/* ==========================================================================
   QuVi · Overlay Herramientas — modal "detalle de plan" (sidebar + panel)
   Reusa los tokens --pd-* de overlay-pd.css para consistencia visual.
   Prefijo propio tm-* para no acoplar con plan-detail.
   ========================================================================== */

:root{
  --tm-maxw:1040px;
  --tm-h:90vh;
  --tm-sidebar-w:236px;
  --tm-radius:var(--pd-radius,18px);
  --tm-pad-x:clamp(20px,2vw,28px);
  --tm-shadow:var(--pd-shadow,0 -10px 32px rgba(15,23,42,.16));
  --tm-stage-bg:var(--bg-subtle,#F4F8FF);
  --tm-border:var(--pd-border,color-mix(in oklch,var(--separator,#e6eaf0) 75%,transparent 25%));
  --tm-mobile-tabs-h:104px;
}

/* ==========================================================================
   01) Backdrop + panel (bottom-sheet)
   ========================================================================== */
.tm-backdrop{
  position:fixed;inset:0;z-index:var(--z-modal,2000);
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(15,23,42,0);
  -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease, background .2s ease, backdrop-filter .2s ease;
}
.tm-backdrop.is-open{
  opacity:1;pointer-events:auto;
  background:rgba(15,23,42,.22);
  -webkit-backdrop-filter:saturate(110%) blur(3px);backdrop-filter:saturate(110%) blur(3px);
}
.tm-backdrop.is-closing{opacity:0;pointer-events:none;background:rgba(15,23,42,0);}
.tm-backdrop{overscroll-behavior:contain;}

/* Overlay abierto: bloquea el scroll del fondo (no se pueden mover los planes detrás)
   y oculta el dock / barra de comparar del recomendador mientras está abierto. */
html.tools-modal-open, html.tools-modal-open body{overflow:hidden;overscroll-behavior:none;}
html.tools-modal-open .mobile-results-dock,
html.tools-modal-open .barra-comparar{display:none !important;}

.tm-panel{
  width:100%;max-width:var(--tm-maxw);height:var(--tm-h);
  background:var(--surface,#fff);color:var(--label,#0f1422);
  border:1px solid var(--pd-border-strong,color-mix(in oklch,var(--separator,#e6eaf0) 90%,transparent 10%));
  border-bottom:0;border-radius:var(--tm-radius) var(--tm-radius) 0 0;
  box-shadow:var(--tm-shadow);
  overflow:hidden;outline:none;contain:layout paint;
  transform:translate3d(0,102%,0);will-change:transform;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  display:grid;
  grid-template-columns:var(--tm-sidebar-w) minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr);
  grid-template-areas:"handle handle""sidebar header""sidebar content";
}
.tm-backdrop.is-open .tm-panel{transform:translate3d(0,0,0);}
.tm-backdrop.is-closing .tm-panel{transform:translate3d(0,102%,0) scale(.985);}

/* ==========================================================================
   02) Handle + header
   ========================================================================== */
.tm-handle{grid-area:handle;height:20px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;}
.tm-handle::before{content:"";width:44px;height:4px;border-radius:999px;background:color-mix(in oklch,var(--separator,#e6eaf0) 80%,transparent 20%);}

.tm-header{
  grid-area:header;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px var(--tm-pad-x);
  border-bottom:1px solid var(--tm-border);border-left:1px solid var(--tm-border);
  background:color-mix(in oklch,var(--surface,#fff) 94%,transparent 6%);
}
.tm-title{font:700 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;letter-spacing:-.02em;color:var(--label,#0f1422);}
/* Cerrar — copia exacta de .cerrar-modal (comparador.js): 28px, icono 15px, rota 90° en hover */
.tm-x{
  all:unset;cursor:pointer;flex:0 0 28px;
  inline-size:28px;block-size:28px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-subtle,#F4F8FF);color:var(--ink,#0f172a);
  transition:background .12s ease,transform .12s ease,box-shadow .12s ease;
}
.tm-x i,.tm-x [data-lucide],.tm-x svg{inline-size:15px;block-size:15px;stroke-width:2;transition:transform .18s ease;}
.tm-x:active{transform:translateY(.5px);}
.tm-x:focus-visible{outline:2px solid transparent;box-shadow:var(--qv-ring0,0 0 0 2px color-mix(in oklch,var(--brand,#0d99ff) 25%,transparent)),var(--qv-ring1,0 0 0 4px color-mix(in oklch,var(--brand,#0d99ff) 45%,transparent));}
@media (hover:hover){
  .tm-x:hover{background:color-mix(in oklch,var(--bg-subtle,#F4F8FF) 90%,var(--ink,#0f172a) 10%);}
  .tm-x:hover i,.tm-x:hover [data-lucide],.tm-x:hover svg{transform:rotate(90deg);}
}

/* ==========================================================================
   03) Sidebar (nav)
   ========================================================================== */
.tm-sidebar{
  grid-area:sidebar;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:14px 12px;display:flex;flex-direction:column;gap:12px;
  background:var(--surface,#fff);
}
.tm-brand{display:flex;align-items:center;padding:4px 10px 14px;}
.tm-brand__logo{height:28px;width:auto;object-fit:contain;display:block;}
.tm-nav{display:flex;flex-direction:column;gap:4px;}
.tm-navitem{
  appearance:none;border:0;background:transparent;width:100%;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:8px 12px 8px 10px;border-radius:10px;
  text-align:left;font:550 12.5px/1.15 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:color-mix(in oklch,var(--label,#0f1422) 78%,var(--muted,#6b7280) 22%);
  transition:background .12s ease,color .12s ease;
}
.tm-navitem:hover{background:color-mix(in oklch,var(--surface,#fff) 92%,var(--brand,#0d99ff) 8%);color:var(--brand,#0d99ff);}
.tm-navitem.is-active{background:color-mix(in oklch,var(--surface,#fff) 90%,var(--brand,#0d99ff) 10%);color:var(--brand,#0d99ff);}
.tm-navitem:focus-visible{outline:2px solid var(--focus,#3b82f6);outline-offset:2px;}
.tm-ico{display:flex;align-items:center;justify-content:center;width:18px;flex:0 0 18px;color:currentColor;opacity:.92;}
.tm-ico svg{width:17px;height:17px;stroke-width:1.9;}
.tm-navtext{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Chevrón — copia del menú de detalle de plan (.plan-detail-navitem::after) */
.tm-navitem::after{
  content:"";width:5px;height:5px;flex:0 0 auto;margin-left:auto;
  border-right:2px solid color-mix(in oklch,var(--label,#0f1422) 42%,transparent);
  border-bottom:2px solid color-mix(in oklch,var(--label,#0f1422) 42%,transparent);
  transform:rotate(-45deg);opacity:.85;transition:border-color .12s ease,opacity .12s ease;
}
.tm-navitem:hover::after,.tm-navitem.is-active::after{
  border-right-color:var(--brand,#0d99ff);border-bottom-color:var(--brand,#0d99ff);opacity:1;
}
/* Sub-ítems (acceso directo dentro de una categoría) */
.tm-subnav{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 19px;padding-left:16px;border-left:1.5px solid color-mix(in oklch,var(--separator,#e6eaf0) 80%,transparent);}
.tm-subitem{
  appearance:none;border:0;background:transparent;cursor:pointer;width:100%;text-align:left;
  padding:6px 10px;border-radius:8px;
  font:500 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:color-mix(in oklch,var(--label,#0f1422) 60%,var(--muted,#6b7280) 40%);
  transition:background .12s ease,color .12s ease;
}
.tm-subitem:hover{background:color-mix(in oklch,var(--surface,#fff) 92%,var(--brand,#0d99ff) 8%);color:var(--brand,#0d99ff);}
.tm-subitem.is-active{background:color-mix(in oklch,var(--surface,#fff) 90%,var(--brand,#0d99ff) 10%);color:var(--brand,#0d99ff);font-weight:600;}
.tm-subitem:focus-visible{outline:2px solid var(--focus,#3b82f6);outline-offset:2px;}

/* ==========================================================================
   04) Content / views
   ========================================================================== */
.tm-content{grid-area:content;min-height:0;position:relative;overflow:hidden;border-left:1px solid var(--tm-border);
  background:linear-gradient(180deg,color-mix(in oklch,var(--brand,#0d99ff) 5%,var(--tm-stage-bg)) 0%,var(--tm-stage-bg) 60%);}
.tm-stage{position:relative;height:100%;min-height:0;}
.tm-view{
  position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:24px var(--tm-pad-x) 28px;opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.tm-view.is-active{opacity:1;pointer-events:auto;}
/* Layouts de vista: Inicio (stack) y categorías (grilla 2 col) */
.tm-home{display:flex;flex-direction:column;gap:22px;max-width:920px;margin:0 auto;}
.tm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;}
/* Cap solo cuando la grilla es la vista de categoría (hija directa); la grilla
   anidada en Inicio llena todo el ancho del bloque. */
.tm-view > .tm-grid{max-width:920px;margin-inline:auto;}
.tm-grid--1{grid-template-columns:1fr;}
.tm-col-full{grid-column:1 / -1;}

/* Cálculos del día (Inicio): dos columnas explícitas. Izquierda apila
   edad + 7%; derecha factor. Cada columna crece independiente → sin huecos. */
.tm-cols{display:flex;gap:16px;align-items:flex-start;}
.tm-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px;}

/* Bloque "pelado" (sin card): Indicadores y Accesos en Inicio */
.tm-block{display:grid;gap:14px;}
.tm-block-head{display:flex;align-items:center;gap:10px;}
.tm-block-ico{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in oklch,var(--brand,#0d99ff) 11%,var(--surface,#fff));color:var(--brand,#0d99ff);}
.tm-block-ico svg{width:17px;height:17px;stroke-width:1.9;}
.tm-block-ttl{margin:0;font:700 15px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;letter-spacing:-.01em;color:var(--label,#0f1422);}
.tm-block-sub{margin:1px 0 0;font:500 12px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280);}
/* Variante en fila: encabezado a la izquierda, contenido (indicadores) a la derecha */
.tm-block--row{display:flex;align-items:center;gap:20px;}
.tm-block--row .tm-block-head{flex:0 0 auto;}
.tm-block--row .tm-stats{flex:1 1 auto;}

/* Section cards — glass (estilo modo-transparencia) */
.tm-sec{
  background:color-mix(in srgb,var(--surface,#fff) 64%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);border-radius:18px;padding:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 30px -14px rgba(31,38,135,.18),
    0 2px 8px -2px rgba(16,24,40,.05);
}
.tm-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.tm-sec-ico{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in oklch,var(--brand,#0d99ff) 11%,var(--surface,#fff));color:var(--brand,#0d99ff);}
.tm-sec-ico svg{width:17px;height:17px;stroke-width:1.9;}
.tm-sec-ttl{margin:0;font:700 15px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;letter-spacing:-.01em;color:var(--label,#0f1422);}
.tm-sec-sub{margin:1px 0 0;font:500 12px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280);}

/* Indicadores del día (UF + dólar) */
.tm-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tm-stat{display:grid;gap:2px;padding:14px;border-radius:14px;background:color-mix(in oklch,var(--brand,#0d99ff) 7%,var(--surface,#fff));border:1px solid color-mix(in oklch,var(--brand,#0d99ff) 16%,transparent);}
.tm-stat-lab{font:700 10.5px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;text-transform:uppercase;letter-spacing:.05em;color:color-mix(in oklch,var(--brand,#0d99ff) 72%,var(--label,#0f1422) 28%);}
.tm-stat-val{font:700 24px/1.05 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--brand,#0d99ff);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.tm-stat-foot{font:500 11px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280);}
.tm-stat-foot:empty{display:none;}

/* ==========================================================================
   05) Panel interno (controles compartidos por las herramientas)
   ========================================================================== */
.tool-panel{display:grid;gap:14px;}
.tool-panel p{margin:0;font:500 12.5px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280);}

/* Conversor */
.tm-stage .conv2{display:grid;align-items:end;gap:10px;grid-template-columns:1fr 44px 1fr;}
.tm-stage .conv-col{display:grid;gap:6px;min-width:0;}
.tm-stage .conv-lab{font:600 11px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#6b7280);padding-left:2px;}
.tm-stage .conv-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.tm-stage .swap{
  appearance:none;border:0;width:36px;height:36px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;color:var(--label,#0f1422);
  background:color-mix(in oklch,var(--separator,#e6eaf0) 40%,transparent);
  transition:background .14s ease,transform .12s ease;
}
.tm-stage .swap:hover{background:color-mix(in oklch,var(--separator,#e6eaf0) 60%,transparent);}
.tm-stage .swap:active{transform:scale(.94);}
.tm-stage .swap.clear{background:color-mix(in oklch,var(--separator,#e6eaf0) 30%,transparent);}
.tm-stage .swap[aria-disabled="true"]{opacity:.35;cursor:default;pointer-events:none;}
.tm-stage .swap svg{width:16px;height:16px;stroke-width:1.9;}

/* Campos */
.tm-stage .fld{display:grid;gap:6px;}
.tm-stage .fld>span{font:600 11px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#6b7280);}
.tm-stage .in{
  height:46px;padding:0 14px;box-sizing:border-box;width:100%;
  border:1px solid var(--separator,#e6eaf0);border-radius:12px;background:var(--surface,#fff);
  color:var(--label,#0f1422);font:600 15px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  font-variant-numeric:tabular-nums;caret-color:var(--brand,#0d99ff);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.tm-stage .in::placeholder{color:color-mix(in oklch,var(--muted,#6b7280) 52%,transparent);font-weight:400;opacity:1;}
.tm-stage .in:focus{border-color:var(--brand,#0d99ff);box-shadow:0 0 0 3px color-mix(in oklch,var(--brand,#0d99ff) 16%,transparent);outline:none;}

/* Resultado simple (edad, 7%) */
.tm-stage .res{margin:0;font:600 14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--label,#0f1422);}
.tm-stage .res output{font:inherit;color:var(--brand,#0d99ff);}
.tm-stage .res small{margin-left:6px;font:600 12.5px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280);}

/* Nota */
.tm-stage .note{margin:0;font:500 12.5px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280);}

/* Bloque resultado destacado */
.res-box{
  display:grid;gap:2px;padding:14px 16px;border-radius:14px;
  border:1px solid color-mix(in oklch,var(--brand,#0d99ff) 22%,transparent);
  background:color-mix(in oklch,var(--brand,#0d99ff) 7%,var(--surface,#fff));
}
.res-box .res-lab{font:700 11px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;text-transform:uppercase;letter-spacing:.05em;color:color-mix(in oklch,var(--brand,#0d99ff) 75%,var(--label,#0f1422) 25%);}
.res-box .res-val{font:700 26px/1.05 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--brand,#0d99ff);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.res-box .res-sub{font:500 12.5px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280);}
.res-box.is-green{border-color:color-mix(in oklch,#10b981 32%,transparent);background:color-mix(in oklch,#10b981 8%,var(--surface,#fff));}
.res-box.is-green .res-lab,.res-box.is-green .res-val{color:#0e9f6e;}
.res-box.is-red{border-color:color-mix(in oklch,#ef4444 30%,transparent);background:color-mix(in oklch,#ef4444 7%,var(--surface,#fff));}
.res-box.is-red .res-lab,.res-box.is-red .res-val{color:#dc2626;}
.res-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.res-duo .res-box .res-val{font-size:20px;}

/* Segmented control */
.seg{display:flex;gap:4px;background:color-mix(in oklch,var(--separator,#e6eaf0) 45%,transparent);border-radius:10px;padding:3px;}
.seg button{
  flex:1;appearance:none;border:0;background:transparent;border-radius:8px;padding:9px;cursor:pointer;
  font:600 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280);
  transition:background .14s ease,color .14s ease;
}
.seg button[aria-pressed="true"]{background:var(--surface,#fff);color:var(--label,#0f1422);box-shadow:0 1px 2px rgba(2,6,23,.08);}
.seg button:focus-visible{outline:2px solid var(--focus,#3b82f6);outline-offset:2px;}

/* Checkbox */
.chk{display:flex;align-items:flex-start;gap:10px;cursor:pointer;}
.chk input[type="checkbox"]{width:18px;height:18px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--brand,#0d99ff);cursor:pointer;}
.chk-copy{display:grid;gap:2px;}
.chk-txt{font:500 13px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--label,#0f1422);}
.chk-help{font:500 11.5px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280);}

/* Barra de progreso (CAEC) */
.bar-wrap{display:grid;gap:6px;padding:14px;border:1px solid var(--separator,#e6eaf0);border-radius:14px;background:color-mix(in oklch,var(--surface,#fff) 98%,var(--bg,#0f1422) 2%);}
.bar-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.bar-lab{font:600 11px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#6b7280);}
.bar-pct{font:700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--brand,#0d99ff);font-variant-numeric:tabular-nums;}
.bar-track{height:8px;border-radius:4px;background:color-mix(in oklch,var(--separator,#e6eaf0) 70%,transparent);overflow:hidden;}
.bar-fill{height:100%;border-radius:4px;background:var(--brand,#0d99ff);transition:width .22s ease,background .18s ease;}
.bar-fill.is-active{background:#10b981;}
.bar-foot{margin:0;font:500 12.5px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--muted,#6b7280);}

/* Sliders (novenos) */
.rng{display:grid;gap:8px;}
.rng-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.rng-lab{font:600 12.5px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--label,#0f1422);}
.rng-val{font:700 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--brand,#0d99ff);font-variant-numeric:tabular-nums;}
/* Rail custom (igual que la guía): pista fina con relleno azul vía --nc-fill */
.rng input[type=range]{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:100px;outline:none;cursor:pointer;
  background:linear-gradient(to right,var(--brand,#0d99ff) 0%,var(--brand,#0d99ff) var(--nc-fill,50%),#e2e8f0 var(--nc-fill,50%),#e2e8f0 100%);
  transition:background .15s ease;
}
.rng input[type=range]:focus-visible{box-shadow:0 0 0 3px color-mix(in oklch,var(--brand,#0d99ff) 18%,transparent);}
.rng input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--brand,#0d99ff);box-shadow:0 1px 4px rgba(15,23,42,.18);
  cursor:grab;transition:transform .15s ease,box-shadow .15s ease;margin-top:-6px;
}
.rng input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18);box-shadow:0 3px 10px rgba(13,153,255,.3);}
.rng input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.08);}
.rng input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:100px;background:transparent;}
.rng input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--brand,#0d99ff);
  box-shadow:0 1px 4px rgba(15,23,42,.18);cursor:grab;transition:transform .15s ease,box-shadow .15s ease;
}
.rng input[type=range]::-moz-range-thumb:hover{transform:scale(1.18);box-shadow:0 3px 10px rgba(13,153,255,.3);}
.rng input[type=range]::-moz-range-track{height:4px;border-radius:100px;background:transparent;}
.rng input[type=range]::-moz-range-progress{height:4px;border-radius:100px 0 0 100px;background:var(--brand,#0d99ff);}

/* Visualizador 9 segmentos (novenos) */
.nov-bar{display:flex;gap:3px;}
.nov-seg{flex:1;height:8px;border-radius:2px;background:color-mix(in oklch,var(--separator,#e6eaf0) 70%,transparent);transition:background .25s ease;}
.nov-seg.on{background:var(--brand,#0d99ff);}

/* Tinte por riesgo en la card de resultado, con transición fade (igual que la guía) */
.nov-calc .res-box{transition:border-color .3s ease,background .3s ease;}
.nov-calc.is-warn .res-box{border-color:rgba(217,119,6,.45);background:linear-gradient(180deg,rgba(251,191,36,.12),var(--surface,#fff));}
.nov-calc.is-warn .res-box .res-lab{color:#b45309;}
.nov-calc.is-warn .res-box .res-val{color:#d97706;}
.nov-calc.is-warn .nov-seg.on{background:#d97706;}
.nov-calc.is-caution .res-box{border-color:rgba(234,88,12,.5);background:linear-gradient(180deg,rgba(249,115,22,.13),var(--surface,#fff));}
.nov-calc.is-caution .res-box .res-lab{color:#c2410c;}
.nov-calc.is-caution .res-box .res-val{color:#ea580c;}
.nov-calc.is-caution .nov-seg.on{background:#ea580c;}
.nov-calc.is-danger .res-box{border-color:rgba(220,38,38,.55);background:linear-gradient(180deg,rgba(239,68,68,.14),var(--surface,#fff));}
.nov-calc.is-danger .res-box .res-lab{color:#b91c1c;}
.nov-calc.is-danger .res-box .res-val{color:#dc2626;}
.nov-calc.is-danger .nov-seg.on{background:#dc2626;}

/* Código (fórmula) */
.code-like{border:1px dashed color-mix(in oklch,var(--label,#0f1422) 14%,var(--separator,#e6eaf0) 86%);border-radius:12px;background:color-mix(in oklch,var(--surface,#fff) 97%,var(--bg,#0f1422) 3%);padding:12px 14px;font:600 12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--label,#0f1422);overflow:auto;}

/* Enlaces */
.tm-stage .links{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;}
.tm-stage .links li{border-bottom:1px solid var(--separator,#e6eaf0);}
.tm-stage .links li:last-child{border-bottom:none;}
.tm-stage .links a{display:block;padding:11px 2px;color:var(--brand,#0d99ff);text-decoration:none;font:500 13.5px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;}
.tm-stage .links a:hover{text-decoration:underline;}

/* Tablas */
.tbl-wrap{overflow:auto;border:1px solid var(--separator,#e6eaf0);border-radius:14px;background:var(--surface,#fff);}
.tbl{border-collapse:separate;border-spacing:0;width:100%;min-width:0;table-layout:fixed;background:var(--surface,#fff);}
.tbl thead th{position:sticky;top:0;background:color-mix(in oklch,var(--surface,#fff) 96%,var(--bg,#0f1422) 4%);text-align:left;padding:10px 12px;font:700 11px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#6b7280);border-bottom:1px solid var(--separator,#e6eaf0);}
.tbl tbody td{padding:11px 12px;border-bottom:1px solid var(--separator,#e6eaf0);font:500 13.5px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--label,#0f1422);vertical-align:middle;}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr:nth-child(even){background:color-mix(in oklch,var(--surface,#fff) 97%,var(--bg,#0f1422) 3%);}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;}
.tbl.tbl-factores th:nth-child(1),.tbl.tbl-factores td:nth-child(1){width:40%;}
.tbl.tbl-factores th:nth-child(2),.tbl.tbl-factores td:nth-child(2),
.tbl.tbl-factores th:nth-child(3),.tbl.tbl-factores td:nth-child(3){width:30%;text-align:right;font-variant-numeric:tabular-nums;}
.tbl.tbl-ges th:nth-child(1),.tbl.tbl-ges td:nth-child(1){width:40%;text-align:left;}
.tbl.tbl-ges th:nth-child(2),.tbl.tbl-ges td:nth-child(2),
.tbl.tbl-ges th:nth-child(3),.tbl.tbl-ges td:nth-child(3){width:30%;text-align:right;font-variant-numeric:tabular-nums;}

/* ==========================================================================
   06) Móvil (≤768px): shell canónico .mobile-overlay + tabs por categoría
   ========================================================================== */
@media (max-width:768px),(hover:none) and (pointer:coarse){
  /* Nav → tab-bar horizontal (compartido) */
  .tm-brand{display:none;}
  .tm-subnav{display:none;}
  .tm-nav{flex-direction:row;gap:6px;align-items:stretch;overflow-x:auto;overflow-y:hidden;}
  .tm-navitem{
    flex:0 0 auto;width:96px;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;padding:10px 8px;border-radius:14px;text-align:center;
    border:1px solid color-mix(in oklch,var(--separator,#e6eaf0) 80%,transparent);
  }
  .tm-navitem::after{display:none;}
  .tm-navitem.is-active{border-color:color-mix(in oklch,var(--brand,#0d99ff) 40%,transparent);}
  .tm-navtext{white-space:normal;text-align:center;font-size:12px;line-height:1.18;}
  .tm-ico svg{width:19px;height:19px;}

  /* Body canónico de tools: el body es el scroller; nav sticky; vistas en flujo */
  .mobile-overlay__body--tools{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0;}
  .mobile-overlay__body--tools .tm-nav{
    position:sticky;top:0;z-index:3;margin:0;padding:10px 14px;
    background:var(--surface,#fff);border-bottom:1px solid var(--tm-border);
  }
  .mobile-overlay__body--tools .tm-stage{position:static;height:auto;}
  .mobile-overlay__body--tools .tm-view{
    position:static;inset:auto;overflow:visible;
    display:none;opacity:1;pointer-events:auto;
    padding:18px 16px calc(24px + env(safe-area-inset-bottom,0px));
  }
  .mobile-overlay__body--tools .tm-view.is-active{display:block;}

  /* Desktop tm-modal como fallback si quedara montado en móvil (cambio de breakpoint) */
  .tm-backdrop{ top: calc(var(--header-h, 58px) + var(--safe-top, env(safe-area-inset-top, 0px))); }
  .tm-panel{
    max-width:none;height:100%;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"handle""header""sidebar""content";
    grid-template-rows:auto auto auto minmax(0,1fr);
  }
  .tm-sidebar{flex-direction:row;align-items:stretch;gap:8px;padding:10px 12px;border-bottom:1px solid var(--tm-border);min-height:var(--tm-mobile-tabs-h);}
  .tm-content{border-left:0;}

  /* Contenido responsive (cualquier contenedor) */
  .tm-stage .in{font-size:16px;}        /* 16px anti-zoom iOS */
  .res-duo{grid-template-columns:1fr;}
  .tm-grid{grid-template-columns:1fr;}
  .tm-cols{flex-direction:column;align-items:stretch;}  /* apiladas → ancho completo, sin espacio vacío */
  .tm-block--row{flex-direction:column;align-items:stretch;gap:14px;}
  .tm-home,.tm-grid{max-width:none;}
  .tm-stage .links{grid-template-columns:1fr;}
}

/* ==========================================================================
   07) Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .tm-backdrop,.tm-panel,.tm-view,.bar-fill,.nov-seg{transition:none!important;}
}