/* ==========================================================================
   ANT DESIGN PRO — densidad compacta, sobre los tokens de design-tokens.css
   Sider navy #22465D · contenido #f0f2f5 · Cards radio 10px · acento azure
   ========================================================================== */
:root{
  --azure:#0E9BDB;            /* = --color-azure-500 */
  --azure-hover:#20A6E0;      /* azure-400 */
  --azure-active:#0B7FB4;     /* azure-600 */
  --azure-soft:#E4F4FC;       /* azure-50 */
  --azure-border:#8FD3F1;     /* azure-200 */
  --green:#1d9e75; --green-soft:#E5F3EE;
  --amber:#854f0b; --amber-soft:#FBF1DD;
  --red:#e24b4a;   --red-soft:#FBEAEA;
  --sider:#22465D; --sider-active:#0E9BDB; --content-bg:#f0f2f5;
  --card-radius:10px;
  --ctrl-h:34px;               /* size="small" compacto */
  --sider-w:228px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-sans); font-size:var(--text-base); line-height:1.5; color:var(--text-primary);
  background:var(--content-bg); -webkit-font-smoothing:antialiased; font-feature-settings:var(--num-tabular);
}
.num{font-variant-numeric:tabular-nums} .code{font-family:var(--font-mono)}
a{color:var(--azure-active); text-decoration:none} a:hover{color:var(--azure)}
svg.ic{width:1em; height:1em; fill:currentColor; vertical-align:-.125em; flex:none}

/* ===== Layout Pro (sider + main) ====================================== */
.layout{display:flex; min-height:100vh}
.sider{position:fixed; left:0; top:0; bottom:0; width:var(--sider-w); background:var(--sider); z-index:40;
  display:flex; flex-direction:column; transition:transform .22s ease; box-shadow:2px 0 8px rgba(0,0,0,.08)}
.sider__brand{display:flex; align-items:center; gap:10px; height:56px; padding:0 18px; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08)}
.sider__brand img{height:26px; width:auto; filter:brightness(0) invert(1)}
.sider__brand span{font-size:var(--text-md); font-weight:600; letter-spacing:-.01em}
.sider__menu{padding:12px 10px; display:flex; flex-direction:column; gap:3px; flex:1}
.menu-item{display:flex; align-items:center; gap:11px; height:38px; padding:0 12px; border-radius:8px; cursor:pointer;
  color:rgba(255,255,255,.72); font-size:var(--text-base); font-weight:500; transition:background .15s,color .15s}
.menu-item .ic{font-size:16px; opacity:.95}
.menu-item:hover{background:rgba(255,255,255,.08); color:#fff; text-decoration:none}
.menu-item.active{background:var(--sider-active); color:#fff; box-shadow:0 2px 8px rgba(14,155,219,.35)}
.menu-sep{height:1px; background:rgba(255,255,255,.08); margin:10px 6px}
.menu-ext{color:rgba(255,255,255,.6); font-weight:400; font-size:var(--text-sm)}
.sider__foot{padding:14px 18px; font-size:var(--text-xs); color:rgba(255,255,255,.45);
  border-top:1px solid rgba(255,255,255,.08)}
.backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:35}

.main{flex:1; margin-left:var(--sider-w); min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:20; height:48px; display:flex; align-items:center; gap:12px;
  padding:0 20px; background:var(--bg-surface); box-shadow:var(--shadow-sm)}
.hamb{display:none; border:0; background:transparent; cursor:pointer; color:var(--text-secondary); font-size:18px; padding:6px}
.crumb{font-size:var(--text-base); color:var(--text-secondary)}
.crumb b{color:var(--text-primary); font-weight:600}
.topbar__spacer{margin-left:auto}
.topbar__meta{font-size:var(--text-xs); color:var(--text-tertiary)}

.content{padding:20px; max-width:1180px; width:100%; margin:0 auto; flex:1}

/* ===== PageHeader ===================================================== */
.page-head{margin-bottom:16px}
.page-head h1{font-size:var(--text-xl); font-weight:600; color:var(--text-primary); line-height:1.3; letter-spacing:-.01em}
.page-head p{margin-top:4px; font-size:var(--text-base); color:var(--text-secondary); max-width:780px}

/* ===== Card (radio 10px, sombra suave) =============================== */
.card{background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm)}
.card__head{display:flex; align-items:center; gap:8px; min-height:46px; padding:11px 18px; border-bottom:1px solid var(--border-default)}
.card__head .t{font-size:var(--text-base); font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:8px}
.card__head .t .ic{color:var(--azure)}
.card__extra{margin-left:auto; display:flex; align-items:center; gap:10px}
.card__body{padding:18px 20px}

/* ===== Form compacto (size small) =================================== */
.form-grid{display:grid; gap:0 18px}
.fitem{margin-bottom:15px; display:flex; flex-direction:column}
.fitem:last-child{margin-bottom:0}
.fitem > label{font-size:var(--text-sm); color:var(--text-primary); margin-bottom:4px; line-height:1.3}
.fitem > label .req{color:var(--red); margin-right:2px}
.fitem .help{font-size:var(--text-xs); color:var(--text-tertiary); margin-top:4px; line-height:1.45}
.fitem .help.success{color:var(--green); font-weight:500}

.inp,.sel{width:100%; height:var(--ctrl-h); padding:0 8px; font-family:inherit; font-size:var(--text-sm); color:var(--text-primary);
  background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  transition:border-color .2s,box-shadow .2s; outline:0}
.inp::placeholder{color:var(--color-neutral-400)}
.inp:hover,.sel:hover{border-color:var(--azure-hover)}
.inp:focus,.sel:focus{border-color:var(--azure); box-shadow:0 0 0 2px rgba(14,155,219,.15)}
.inp.right{text-align:right}
.sel{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:26px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' fill='%23AEB4BD'%3E%3Cpath d='M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:11px}

.inp-affix{display:flex; align-items:stretch}
.inp-affix .addon{display:inline-flex; align-items:center; padding:0 9px; font-size:var(--text-sm); color:var(--text-secondary);
  background:var(--bg-subtle); border:1px solid var(--border-strong); border-right:0; border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.inp-affix .inp{border-radius:0 var(--radius-sm) var(--radius-sm) 0}

/* ===== Button compacto ============================================== */
.btn{height:var(--ctrl-h); padding:0 12px; border-radius:var(--radius-sm); font-family:inherit; font-size:var(--text-sm);
  cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:all .18s; white-space:nowrap; line-height:1; font-weight:500}
.btn.block{width:100%; height:34px}
.btn-primary{background:var(--azure); color:#fff; box-shadow:0 2px 0 rgba(14,155,219,.12)}
.btn-primary:hover{background:var(--azure-hover)}
.btn-primary:active{background:var(--azure-active)}
.btn-default{background:var(--bg-surface); color:var(--text-primary); border-color:var(--border-strong); box-shadow:0 1px 0 rgba(0,0,0,.02)}
.btn-default:hover{color:var(--azure); border-color:var(--azure)}
.btn-text{background:transparent; color:var(--text-secondary)}
.btn-text:hover{background:var(--bg-subtle); color:var(--text-primary)}
.btn:focus-visible{box-shadow:0 0 0 2px rgba(14,155,219,.2)}

/* ===== Segmented (toggle Monto/Base) ================================ */
.segmented{display:inline-flex; background:var(--bg-subtle); border-radius:8px; padding:2px; gap:0}
.segmented button{border:0; background:transparent; cursor:pointer; font-family:inherit; font-size:var(--text-sm);
  color:var(--text-secondary); padding:6px 14px; border-radius:6px; transition:color .12s,background .12s; font-weight:500}
.segmented button:hover{color:var(--text-primary)}
.segmented button.active{background:var(--bg-surface); color:var(--azure); box-shadow:var(--shadow-xs)}

/* ===== Statistic (total con color) ================================== */
.stat{padding:2px 0 18px; border-bottom:1px solid var(--border-default); margin-bottom:18px}
.stat__title{font-size:var(--text-sm); color:var(--text-secondary); margin-bottom:4px}
.stat__value{font-size:var(--text-3xl); font-weight:600; color:var(--azure); line-height:1.1; letter-spacing:-.02em}
.stat__value .cur{font-size:var(--text-lg); color:var(--azure-active); font-weight:500; margin-right:4px}
.stat__suffix{font-size:var(--text-xs); color:var(--text-tertiary); margin-top:7px; display:flex; gap:6px; flex-wrap:wrap; align-items:center}

/* ===== Descriptions (desglose con deltas de color) ================= */
.desc{width:100%}
.desc__row{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--border-default)}
.desc__row:last-child{border-bottom:0}
.desc__row dt{color:var(--text-secondary); font-size:var(--text-sm)}
.desc__row dd{color:var(--text-primary); font-size:var(--text-sm); text-align:right; white-space:nowrap; font-weight:500}
.desc__row.sub dt{color:var(--text-tertiary)}
.desc__row.strong dt{color:var(--text-primary); font-weight:600}
.desc__row.strong dd{font-weight:600}
.desc__row.delta dd{color:var(--amber)}
.desc__row.danger dd{color:var(--red)}
.desc__row.total{border-top:2px solid var(--border-default); border-bottom:0; margin-top:3px; padding-top:11px}
.desc__row.total dt{font-weight:600; color:var(--text-primary)}
.desc__row.total dd{font-weight:700; font-size:var(--text-md); color:var(--azure)}

/* ===== Collapse (memoria) ========================================== */
.collapse{border:1px solid var(--border-default); border-radius:var(--card-radius); overflow:hidden; margin-top:16px; background:var(--bg-surface)}
.collapse__head{width:100%; display:flex; align-items:center; gap:9px; padding:9px 14px; cursor:pointer;
  background:var(--bg-subtle); border:0; font-family:inherit; font-size:var(--text-sm); font-weight:600; color:var(--text-primary); text-align:left}
.collapse__head .arrow{transition:transform .2s; color:var(--text-tertiary); font-size:11px}
.collapse__head .ic{color:var(--azure)}
.collapse.open .collapse__head .arrow{transform:rotate(90deg)}
.collapse__body{display:none; padding:14px; border-top:1px solid var(--border-default)}
.collapse.open .collapse__body{display:block}

.sheet{width:100%; border-collapse:collapse}
.sheet td{padding:7px 0; font-size:var(--text-sm)}
.sheet td:last-child{text-align:right; white-space:nowrap}
.sheet .label{color:var(--text-secondary)}
.sheet tr.step td{color:var(--text-tertiary)}
.sheet tr.total td{border-top:1px solid var(--border-strong); font-weight:600; color:var(--text-primary); font-size:var(--text-base); padding-top:10px}
.sheet tr.total td:last-child{color:var(--azure)}
.formula{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-tertiary); background:var(--bg-subtle);
  padding:7px 9px; border-radius:var(--radius-sm); margin:9px 0}
.tramo-tabla{width:100%; border-collapse:collapse; margin:9px 0; font-size:var(--text-sm)}
.tramo-tabla th{background:var(--bg-subtle); font-size:var(--text-xs); font-weight:600; color:var(--text-secondary); text-align:left; padding:6px 8px}
.tramo-tabla th.r,.tramo-tabla td.r{text-align:right}
.tramo-tabla td{padding:6px 8px; border-bottom:1px solid var(--border-default)}

/* ===== Tag ========================================================= */
.tag{display:inline-flex; align-items:center; padding:0 7px; height:20px; font-size:var(--text-xs); line-height:18px;
  border-radius:var(--radius-sm); border:1px solid transparent; font-weight:500}
.tag-blue{color:var(--azure-active); background:var(--azure-soft); border-color:var(--azure-border)}
.tag-gold{color:var(--amber); background:var(--amber-soft); border-color:var(--color-warning-border)}
.tag-red{color:var(--red); background:var(--red-soft); border-color:var(--color-danger-border)}
.tag-green{color:var(--green); background:var(--green-soft); border-color:var(--color-success-border)}

/* ===== Alert ======================================================= */
.alert{display:flex; gap:9px; align-items:flex-start; padding:8px 14px; border-radius:var(--radius-md);
  font-size:var(--text-sm); line-height:1.5; margin:14px 0}
.alert .ic{font-size:15px; margin-top:2px; flex:none}
.alert-info{background:var(--azure-soft); border:1px solid var(--azure-border); color:var(--text-primary)}
.alert-info .ic{color:var(--azure)}
.alert b{font-weight:600}

/* ===== Empty ======================================================= */
.empty{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:34px 20px; color:var(--text-tertiary)}
.empty svg{width:56px; height:36px; margin-bottom:10px}
.empty .t{font-size:var(--text-sm); color:var(--text-tertiary)}

/* ===== Table (size small, totales/sanción con color) =============== */
.table-wrap{overflow-x:auto; border:1px solid var(--border-default); border-radius:var(--card-radius); background:var(--bg-surface); box-shadow:var(--shadow-sm)}
table.multi{width:100%; border-collapse:collapse; min-width:900px}
table.multi thead th{background:var(--bg-subtle); font-size:var(--text-xs); font-weight:600; color:var(--text-secondary);
  text-align:left; padding:10px 11px; white-space:nowrap; border-bottom:1px solid var(--border-default)}
table.multi thead th.r{text-align:right}
table.multi tbody td{padding:8px 11px; border-bottom:1px solid var(--border-default); font-size:var(--text-sm); color:var(--text-primary)}
table.multi tbody td.r{text-align:right; white-space:nowrap}
table.multi tbody tr:last-child td{border-bottom:0}
table.multi tbody tr:hover td{background:var(--bg-subtle)}
table.multi tbody td.cell-t{color:var(--azure-active); font-weight:600}
table.multi tbody td.cell-s{color:var(--red)}
table.multi tbody td .inp,table.multi tbody td .sel{height:28px}
table.multi tfoot td{padding:8px 10px; border-top:1px solid var(--border-strong); background:var(--bg-subtle); font-weight:600; color:var(--text-primary)}
table.multi tfoot td.r{text-align:right; white-space:nowrap}
table.multi tfoot td#totBs{color:var(--azure)}
table.multi tfoot td#totUFVs{color:var(--red)}
.row-warn td{background:var(--amber-soft)!important}
.col-san{display:none}
table.multi.has-sancion .col-san{display:table-cell}
.val-cell{display:inline-flex; align-items:center; gap:5px; justify-content:flex-end}
.help-btn{display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%;
  color:var(--color-neutral-400); cursor:pointer; font-size:12px; transition:color .15s}
.help-btn:hover{color:var(--azure)}

/* ===== Toolbar ===================================================== */
.toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px}
.toolbar .nit-field{display:flex; align-items:center; gap:8px; margin-right:auto; font-size:var(--text-sm); color:var(--text-secondary)}
.toolbar .nit-field .sel{width:auto}

/* ===== Popover ===================================================== */
.popover{position:absolute; z-index:60; width:350px; background:var(--bg-surface); border:1px solid var(--border-default);
  border-radius:var(--card-radius); box-shadow:var(--shadow-md); padding:12px 14px; display:none}
.popover.show{display:block}
.popover__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; padding-bottom:7px; border-bottom:1px solid var(--border-default)}
.popover__title{font-size:var(--text-sm); font-weight:600; color:var(--text-primary)}
.popover__close{cursor:pointer; color:var(--text-tertiary); border:0; background:transparent; display:inline-flex; align-items:center; gap:4px; font-size:var(--text-xs); font-family:inherit}
.popover__close:hover{color:var(--text-primary)}

/* ===== Footer ====================================================== */
.foot{margin-top:22px; padding-top:14px; border-top:1px solid var(--border-default); display:flex; flex-wrap:wrap;
  gap:6px 22px; font-size:var(--text-xs); color:var(--text-tertiary)}
.foot .it{display:inline-flex; align-items:center; gap:6px}
.foot .it .ic{color:var(--azure)}

/* ===== Helpers ===================================================== */
.single-grid{display:grid; grid-template-columns:minmax(330px,380px) 1fr; gap:16px; align-items:start}
.hide{display:none!important}
.err{color:var(--red); font-size:var(--text-sm)}

@media (max-width:980px){
  .single-grid{grid-template-columns:1fr}
  .common-grid{grid-template-columns:1fr 1fr!important}
}
@media (max-width:880px){
  .sider{transform:translateX(-100%)}
  body.sider-open .sider{transform:translateX(0)}
  body.sider-open .backdrop{display:block}
  .main{margin-left:0}
  .hamb{display:inline-flex}
}
@media (max-width:560px){ .common-grid{grid-template-columns:1fr!important} .content{padding:14px} }

  /* ===== Tabs Ant Pro (modo interno de herramientas) ===== */
  .tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-default);margin:0 0 16px;flex-wrap:wrap}
  .tabs button{border:0;background:transparent;cursor:pointer;font-family:inherit;font-size:var(--text-base);font-weight:500;
    color:var(--text-secondary);padding:9px 8px;margin-bottom:-1px;border-bottom:2px solid transparent;
    display:inline-flex;align-items:center;gap:7px;transition:color .12s,border-color .12s}
  .tabs button .ic{font-size:15px}
  .tabs button:hover{color:var(--azure)}
  .tabs button.active{color:var(--azure);border-bottom-color:var(--azure)}

  /* ===== Extras para herramientas absorbidas (badge, hint, grids) ===== */
  .badge{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:600;padding:2px 9px;border-radius:999px;line-height:1.6;white-space:nowrap;background:var(--azure-soft);color:var(--azure-active)}
  .badge.ok,.badge.green{background:var(--green-soft);color:var(--green)}
  .badge.warn,.badge.amber{background:var(--amber-soft);color:var(--amber)}
  .badge.danger,.badge.red{background:var(--red-soft);color:var(--red)}
  .hint{font-size:var(--text-xs);color:var(--text-tertiary)}
  .hint a{color:var(--azure-active)}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
  @media(max-width:680px){.grid-2,.grid-3{grid-template-columns:1fr}}
  .result-box{background:var(--azure-soft);border:1px solid var(--azure-border);border-radius:var(--card-radius);padding:16px;margin-top:4px}
  .result-box .big{font-size:var(--text-2xl);font-weight:600;color:var(--azure-active);letter-spacing:-.01em}
  .muted{color:var(--text-tertiary)}

  /* ============================================================
     ALIASES de vocabulario legado (Carbon) -> Ant Pro renovado
     Para absorber herramientas viejas sin reescribir su markup.
     ============================================================ */
  .input,.select{width:100%;height:var(--ctrl-h);padding:0 8px;font-family:inherit;font-size:var(--text-sm);
    color:var(--text-primary);background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
    transition:border-color .2s,box-shadow .2s;outline:0}
  .input::placeholder{color:var(--color-neutral-400)}
  .input:hover,.select:hover{border-color:var(--azure-hover)}
  .input:focus,.select:focus{border-color:var(--azure);box-shadow:0 0 0 2px rgba(14,155,219,.15)}
  .input.right{text-align:right}
  .input:disabled,.select:disabled{background:var(--bg-subtle);color:var(--text-tertiary);cursor:not-allowed}
  .select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' fill='%23AEB4BD'%3E%3Cpath d='M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 8px center;background-size:11px}
  .field{display:flex;flex-direction:column;margin-bottom:15px}
  .field label{font-size:var(--text-sm);font-weight:500;color:var(--text-primary);margin-bottom:4px;line-height:1.3}
  .field .hint{font-size:var(--text-xs);color:var(--text-tertiary);margin-top:4px;line-height:1.45}
  .field--nit{min-width:220px;max-width:340px}
  .opt{color:var(--text-tertiary);font-weight:400}
  .card__title{font-size:var(--text-base);font-weight:600;color:var(--text-primary)}
  .btn-secondary{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-strong);
    height:var(--ctrl-h);padding:0 12px;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-sm);font-weight:500;
    cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .18s}
  .btn-secondary:hover{color:var(--azure);border-color:var(--azure)}
  .common-bar{display:grid;grid-template-columns:repeat(12,1fr);gap:16px 18px;margin:0 0 18px;padding:18px 20px;
    background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--card-radius);box-shadow:var(--shadow-sm)}
  table.t{width:100%;border-collapse:collapse;min-width:740px}
  table.t thead th{background:var(--bg-subtle);font-size:var(--text-xs);font-weight:600;color:var(--text-secondary);
    text-align:left;padding:10px 11px;white-space:nowrap;border-bottom:1px solid var(--border-default)}
  table.t thead th.r{text-align:right}
  table.t tbody td{padding:7px 11px;border-bottom:1px solid var(--border-default);font-size:var(--text-sm)}
  table.t tbody td.r{text-align:right}
  table.t tbody tr:hover{background:var(--bg-subtle)}
  table.t tbody td .input,table.t tbody td .select{height:28px}
  table.t tfoot td{padding:8px 10px;border-top:1px solid var(--border-strong);background:var(--bg-subtle);font-weight:600}
  table.t tfoot td.r{text-align:right}
  .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
  .metric{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--card-radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
  .metric.accent{background:var(--green-soft);border-color:var(--green)}
  .metric .k{font-size:var(--text-xs);color:var(--text-secondary)}
  .metric .v{font-size:var(--text-xl);font-weight:600;color:var(--text-primary);margin-top:4px;letter-spacing:-.01em}
  .metric.accent .v{color:var(--green)}
  @media(max-width:860px){.metrics{grid-template-columns:repeat(2,1fr)}.common-bar>.field{grid-column:span 12!important}}
  .callout{border:1px solid var(--azure-border);background:var(--azure-soft);color:var(--text-primary);
    padding:10px 14px;border-radius:var(--radius-md);font-size:var(--text-sm);margin:14px 0}
  .callout.green{border-color:var(--green);background:var(--green-soft)}
  .proy{color:var(--azure-active);font-weight:600}
  .mono{font-family:var(--font-mono)}
  details.how{margin:12px 0;border:1px solid var(--border-default);border-radius:var(--card-radius);background:var(--bg-surface);padding:10px 14px;box-shadow:var(--shadow-sm)}
  details.how summary{cursor:pointer;font-weight:600;font-size:var(--text-sm);color:var(--text-primary)}

  /* ============================================================
     Bootstrap-compat -> Ant Pro (tools que usaban Bootstrap)
     ============================================================ */
  .row{display:flex;flex-wrap:wrap;margin:0 -8px}
  .row>[class*=col-]{padding:0 8px}
  .col-12,.col-md-12{flex:0 0 100%;max-width:100%}
  .col-md-6{flex:0 0 50%;max-width:50%}
  .col-md-3{flex:0 0 25%;max-width:25%}
  .col-md-4{flex:0 0 33.333%;max-width:33.333%}
  @media(max-width:760px){.col-md-6,.col-md-4{flex:0 0 100%;max-width:100%}.col-md-3{flex:0 0 50%;max-width:50%}}
  .form-label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--text-primary);margin-bottom:5px}
  .fw-bold{font-weight:600}
  .form-control,.form-select{width:100%;height:var(--ctrl-h);padding:0 10px;font-family:inherit;font-size:var(--text-sm);color:var(--text-primary);
    background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);outline:0;transition:border-color .2s,box-shadow .2s}
  .form-control:hover,.form-select:hover{border-color:var(--azure-hover)}
  .form-control:focus,.form-select:focus{border-color:var(--azure);box-shadow:0 0 0 2px rgba(14,155,219,.15)}
  .card-header{padding:12px 18px;border-bottom:1px solid var(--border-default);font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:8px}
  .card-body{padding:18px 20px}
  .btn-lg{height:40px;padding:0 20px;font-size:var(--text-base)}
  .btn-sm{height:28px;padding:0 10px;font-size:var(--text-xs)}
  .btn-light{background:var(--bg-subtle);color:var(--text-primary);border:1px solid var(--border-default)}
  .btn-light:hover{background:var(--border-default)}
  .w-100{width:100%}
  .badge.bg-primary{background:var(--azure);color:#fff}
  .badge-pill{border-radius:999px}
  .alert{padding:10px 14px;border-radius:var(--radius-md);font-size:var(--text-sm);border:1px solid transparent}
  .alert-info{background:var(--azure-soft);border-color:var(--azure-border);color:var(--text-primary)}
  .alert-success{background:var(--green-soft);border-color:var(--green);color:var(--text-primary)}
  .alert-warning{background:var(--amber-soft);border-color:var(--color-warning-border);color:var(--text-primary)}
  .d-flex{display:flex}.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}
  .align-items-center{align-items:center}.text-center{text-align:center}.text-end{text-align:right}
  .mt-2{margin-top:8px}.mt-3{margin-top:16px}.mt-4{margin-top:24px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:16px}.mb-4{margin-bottom:24px}
  .ms-2{margin-left:8px}.me-2{margin-right:8px}.me-3{margin-right:12px}.py-2{padding-top:8px;padding-bottom:8px}
  .lead{font-size:var(--text-md);color:var(--text-secondary)}
  .display-4{font-size:var(--text-2xl);font-weight:600;color:var(--text-primary);letter-spacing:-.01em}

  /* Bootstrap extra (honorario/calculos_mes) */
  .btn-success{background:var(--green);color:#fff}.btn-success:hover{background:var(--green);filter:brightness(1.06)}
  .btn-warning{background:var(--amber);color:#fff}.btn-warning:hover{background:var(--amber);filter:brightness(1.08)}
  .container-fluid{width:100%}
  .col-lg-3{flex:0 0 25%;max-width:25%}@media(max-width:992px){.col-lg-3{flex:0 0 50%;max-width:50%}}@media(max-width:600px){.col-lg-3{flex:0 0 100%;max-width:100%}}
  .card-footer{padding:12px 18px;border-top:1px solid var(--border-default)}
  .bg-light{background:var(--bg-subtle)}.bg-primary{background:var(--azure)}.bg-success{background:var(--green)}
  .bg-info{background:var(--azure-soft)}.bg-secondary{background:var(--text-secondary)}.bg-warning{background:var(--amber-soft)}
  .text-white{color:#fff}.text-dark{color:var(--text-primary)}
  .px-5{padding-left:24px;padding-right:24px}.p-0{padding:0}.mb-4{margin-bottom:24px}.small{font-size:var(--text-xs)}

  /* ===== Comentarios / feedback por herramienta ===== */
  .cmts{margin-top:28px;padding-top:22px;border-top:1px solid var(--border-default)}
  .cmts__head h3{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin:0 0 4px;display:flex;align-items:center;gap:8px}
  .cmts__head p{font-size:var(--text-sm);color:var(--text-secondary);margin:0 0 16px;max-width:660px}
  .cmts__form{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--card-radius);box-shadow:var(--shadow-sm);padding:16px 18px;margin-bottom:20px}
  .cmts__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  @media(max-width:600px){.cmts__grid{grid-template-columns:1fr}}
  .cmts .opt{color:var(--text-tertiary);font-weight:400}
  .cmts__ta{height:auto;min-height:88px;padding:9px 11px;resize:vertical;line-height:1.5}
  .cmts__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .cmts__actions{display:flex;align-items:center;gap:12px;margin-top:4px}
  .cmts__msg{font-size:var(--text-sm)} .cmts__msg.ok{color:var(--green)} .cmts__msg.err{color:var(--red)}
  .cmts__list{display:flex;flex-direction:column;gap:12px}
  .cmts__empty{font-size:var(--text-sm);color:var(--text-tertiary);padding:6px 0}
  .cmt{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--card-radius);padding:12px 16px}
  .cmt__top{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
  .cmt__name{font-weight:600;color:var(--text-primary);font-size:var(--text-sm)}
  .cmt__date{font-size:var(--text-xs);color:var(--text-tertiary);margin-left:auto}
  .cmt__wa{font-size:11px;color:var(--text-tertiary);background:var(--bg-subtle);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:0 6px}
  .cmt__body{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.55;white-space:pre-wrap;word-break:break-word}
  .cmt__reply{margin-top:10px;margin-left:16px;border-left:2px solid var(--azure-border);padding-left:14px;display:flex;flex-direction:column;gap:8px}
  .cmt--admin{background:var(--azure-soft);border-color:var(--azure-border)}
  .cmt--admin .cmt__name{color:var(--azure-active)}
  .cmt__badge{display:inline-flex;align-items:center;font-size:10px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--azure);color:#fff;letter-spacing:.02em}
  .cmt__replybtn{border:0;background:transparent;color:var(--azure-active);font-size:var(--text-xs);font-weight:500;cursor:pointer;padding:6px 0 0;font-family:inherit}
  .cmt__replybox{margin-top:8px;display:none}
  .cmt__replybox.show{display:block}
  .cmt__replybox textarea{width:100%;min-height:56px;padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-sm);resize:vertical;outline:0}
  .cmt__replybox textarea:focus{border-color:var(--azure);box-shadow:0 0 0 2px rgba(14,155,219,.15)}
  .cmt__replybox .btn{margin-top:8px}

  /* ===== Comentarios — distinción visual (módulo de feedback, azul suave de la paleta) ===== */
  .cmts{margin-top:32px;padding:22px 24px;border-top:0;background:#eff7fc;border:1px solid #d4ebf8;border-radius:14px}
  .cmts__head{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px}
  .cmts__chip{flex:none;width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--azure-border);
    display:flex;align-items:center;justify-content:center;color:var(--azure-active)}
  .cmts__chip svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .cmts__eyebrow{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--azure-active);margin-bottom:3px}
  .cmts__head h3{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin:0 0 3px}
  .cmts__head p{font-size:var(--text-sm);color:var(--text-secondary);margin:0;max-width:640px}
  .cmts__form{background:#fff}
  .cmt{background:#fff}
  .cmt--admin{background:var(--azure-soft);border-color:var(--azure-border)}