/* La calculadora de la página pública. Va sobre landing.css —los colores, la tipografía, los
   botones y las tarjetas son los de la portada— y aquí sólo vive lo suyo. Igual que allá, la
   CSP es style-src 'self': nada de style= en el HTML; lo que cambia en vivo (el relleno de los
   deslizadores) va por variables CSS que pone el script. */

/* El encabezado es el de la portada, letra por letra; aquí sólo se marca dónde se está. */
.nav-cta [aria-current="page"],.nav-calc-fila [aria-current="page"]{border-color:color-mix(in srgb,var(--cyan) 60%,var(--line-strong));color:var(--cyan-hi)}

/* ---------- Encabezado corto: la calculadora tiene que verse sin bajar ---------- */
.calc-hero .wrap{padding-block:clamp(36px,5vw,60px) clamp(28px,4vw,44px)}
.calc-hero h1{font-size:clamp(2.1rem,4.2vw,3.5rem);max-width:17em}
.calc-hero .lede{margin-top:18px;max-width:44em}

/* ---------- Las dos herramientas: sueldos y salarios, finiquitos y liquidaciones ---------- */
/* Pestañas grandes, por encima de todo: no son una opción del cálculo, son dos cálculos. */
.herramientas{display:flex;gap:6px;padding:6px;margin:0 0 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);width:max-content;max-width:100%}
.herramientas button{font:600 16px/1.2 var(--f-body);color:var(--fg-2);background:transparent;border:1px solid transparent;border-radius:11px;padding:13px 20px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.herramientas button:hover{color:var(--fg)}
.herramientas button[aria-selected="true"]{color:var(--fg);background:var(--raised);border-color:color-mix(in srgb,var(--cyan) 55%,var(--line-strong))}
.herramientas button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- Rejilla: formulario y resultado lado a lado ---------- */
.calculadora{padding-bottom:clamp(64px,8vw,104px)}
.calc-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:24px;align-items:start;margin-top:4px}
.calc-form{gap:20px;position:sticky;top:104px}
.calc-form:hover{border-color:var(--line)}

/* Los tres esquemas: un control segmentado, no pestañas que esconden contenido. */
.esquemas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--ink-deep);border:1px solid var(--line)}
.esquemas button{font:600 14.5px/1 var(--f-body);color:var(--fg-2);background:transparent;border:0;border-radius:10px;padding:12px 6px;cursor:pointer;transition:background-color .2s,color .2s}
.esquemas button:hover{color:var(--fg)}
.esquemas button[aria-checked="true"]{color:var(--ink-deep);background:linear-gradient(180deg,var(--cyan-hi),var(--cyan))}
.esquema-nota{font-size:14px;color:var(--fg-2);line-height:1.5;margin-top:-6px}

.campo-etiqueta{display:block;font:600 12px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-bottom:8px}
.campo{display:block}
.campo select,.pesos{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--line-strong);background:var(--ink-deep);color:var(--fg);font:500 16px/1.2 var(--f-body);padding:0 14px}
.campo select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.campo select:focus-visible,.pesos:focus-within{outline:2px solid var(--cyan);outline-offset:2px}
.pesos{display:flex;align-items:center;gap:8px;min-height:62px;font:700 26px/1 var(--f-mono)}
.pesos > span{color:var(--fg-3)}
.pesos input{flex:1;min-width:0;background:transparent;border:0;color:var(--fg);font:inherit;padding:0;letter-spacing:-.01em}
.pesos input:focus{outline:none}
/* Fechas y números del finiquito: la misma caja que los desplegables. */
.entrada{display:block;width:100%;min-height:48px;border-radius:12px;border:1px solid var(--line-strong);background:var(--ink-deep);color:var(--fg);font:500 16px/1.2 var(--f-body);padding:0 14px}
.entrada::placeholder{color:var(--fg-3)}
.entrada:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.dos-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-form > .ayuda{margin-top:-10px}
.calc-form .opciones label{flex-basis:110px}
.error{display:block;min-height:0;color:var(--amber);font-size:13.5px;margin-top:6px}
.error:empty{display:none}
.ayuda{display:block;font-size:13px;color:var(--fg-3);margin-top:8px;line-height:1.45}

.direccion{border:0;padding:0;margin:0;min-width:0}
.direccion legend{padding:0}
.direccion .dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.direccion label{position:relative;display:block;cursor:pointer}
.direccion input{position:absolute;opacity:0;pointer-events:none}
.direccion label > span{display:flex;flex-direction:column;gap:3px;height:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--ink-deep) 60%,transparent);transition:border-color .2s,background-color .2s}
.direccion b{font:600 15px/1.25 var(--f-body);color:var(--fg)}
.direccion small{font-size:13px;color:var(--fg-3)}
.direccion input:checked + span{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,var(--ink-deep))}
.direccion input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}

.mas{display:flex;flex-direction:column;gap:10px;padding-top:4px;border-top:1px solid var(--line)}
.mas .btn{margin-top:14px;justify-content:flex-start;width:100%}
.cuantos{margin-left:auto;min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;font:700 12px/1 var(--f-mono);color:var(--ink-deep);background:var(--cyan)}
.resumen-parametros{font-size:13.5px;color:var(--fg-3);line-height:1.5}

/* ---------- Resultado ---------- */
/* El resultado se acomoda a su propio ancho, no al de la ventana: al lado del formulario es
   angosto aunque la pantalla sea ancha. */
.calc-res{min-width:0;display:flex;flex-direction:column;gap:18px;container-type:inline-size}
.calc-res[aria-busy="true"] .cifras{opacity:.55;transition:opacity .2s .15s}
.cargando{color:var(--fg-3);padding:40px 0}
.cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cifra{padding:18px 18px 16px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,var(--raised),var(--surface));min-width:0;container-type:inline-size}
.cifra span{display:block;font:600 11.5px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
/* La cifra no se parte: se achica con su caja. Trece caracteres —«$1,234,567.89»— caben. */
.cifra strong{display:block;margin-top:10px;font:700 clamp(1rem,11cqi,1.75rem)/1.1 var(--f-mono);letter-spacing:-.02em;color:var(--fg);white-space:nowrap}
.cifra small{display:block;margin-top:8px;font-size:13px;color:var(--fg-3);line-height:1.4}
.cifra.acento{border-color:color-mix(in srgb,var(--cyan) 55%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 12%,var(--raised)),var(--surface))}
.cifra.acento strong{color:var(--cyan-hi)}

.aviso{padding:14px 16px;border-radius:14px;border:1px solid color-mix(in srgb,var(--amber) 40%,var(--line));background:color-mix(in srgb,var(--amber) 8%,var(--surface));font-size:14.5px;color:var(--fg-2);line-height:1.5}
.aviso strong{color:var(--fg)}
.nota{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:14.5px;color:var(--fg-2);line-height:1.5}
.nota strong{color:var(--fg)}

.desglose{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bloque{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:6px 18px 10px;min-width:0}
.bloque h3{font:600 12px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin:0;padding:12px 0 10px;border-bottom:1px solid var(--line)}
.reng{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line)}
.reng:last-child{border-bottom:0}
.reng > span:first-child{min-width:0;color:var(--fg-2);font-size:15px}
.reng small{display:block;color:var(--fg-3);font-size:12.5px;line-height:1.4;margin-top:2px}
.reng .monto{font:500 15px/1.2 var(--f-mono);color:var(--fg);white-space:nowrap}
.reng .monto.menos{color:var(--fg-2)}
.reng.total{border-top:1px solid var(--line-strong);border-bottom:0;margin-top:2px}
.reng.total > span:first-child{color:var(--fg);font-weight:600}
.reng.total .monto{font-weight:700;color:var(--cyan-hi)}
.reng .pendiente{font:600 13px/1 var(--f-body);color:var(--cyan);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

.bloque .vacio{color:var(--fg-3);font-size:14.5px;line-height:1.5;padding:12px 0}
.calc-res > .bloque{padding-bottom:6px}
.con-que{font-size:13.5px;color:var(--fg-3);line-height:1.6}
.con-que b{color:var(--fg-2);font-weight:500}

.banda h3{font:600 12px/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin:0 0 10px}
.banda .tabla{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.banda table{width:100%;border-collapse:collapse;font:500 14px/1.2 var(--f-mono);min-width:460px}
.banda th,.banda td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.banda th{font:600 11px/1.3 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);background:var(--surface)}
.banda tr:last-child td{border-bottom:0}
.banda tr.elegido td{color:var(--cyan-hi);background:color-mix(in srgb,var(--cyan) 7%,transparent)}
.banda .causa{text-align:left;font-family:var(--f-body);white-space:normal}

.calc-pie{margin-top:28px;font-size:14px;color:var(--fg-3);line-height:1.6;max-width:62em}
.calc-cta{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding:clamp(24px,3vw,36px);border-radius:22px;border:1px solid var(--line-strong);background:radial-gradient(60% 120% at 100% 0%,rgba(47,124,246,.22),transparent 70%),linear-gradient(180deg,var(--raised),var(--surface))}
.calc-cta h2{font-size:clamp(1.45rem,2.6vw,2rem)}
.calc-cta p{color:var(--fg-2);margin-top:10px;max-width:38em}

/* ---------- El cajón de parámetros: se desliza desde la izquierda sobre el formulario ---------- */
/* Desde la izquierda y no desde la derecha: tapa el formulario, que mientras se ajusta no hace
   falta, y deja a la vista el resultado, que se recalcula con cada movimiento. */
.cajon{position:fixed;inset:0 auto 0 0;margin:0;width:min(460px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;border-right:1px solid var(--line-strong);background:var(--surface);color:var(--fg);box-shadow:30px 0 80px -30px var(--shadow)}
.cajon[open]{animation:entra-izq .28s cubic-bezier(.2,.8,.2,1)}
.cajon::backdrop{background:rgba(4,11,24,.38)}
@keyframes entra-izq{from{transform:translateX(-100%)}to{transform:none}}
.cajon-in{display:flex;flex-direction:column;height:100%}
.cajon-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 12px}
.cajon-cabeza h2{font-size:24px}
.cerrar{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--raised);color:var(--fg);cursor:pointer}
.cerrar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cajon-vivo{margin:0 22px;padding:10px 14px;border-radius:12px;background:var(--ink-deep);border:1px solid var(--line);font:500 14px/1.4 var(--f-mono);color:var(--fg-2)}
.cajon-vivo b{color:var(--cyan-hi);font-weight:600}
.cajon-cuerpo{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 22px 24px}
.grupo h3{font:700 16px/1.3 var(--f-display);margin:22px 0 6px;letter-spacing:-.01em}
.grupo-nota{font-size:13.5px;color:var(--fg-3);line-height:1.5;margin-bottom:12px}
.grupo .campo{margin-top:12px}
.cajon-pie{display:flex;gap:10px;justify-content:space-between;padding:14px 22px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surface)}
.cajon-pie .btn{padding:13px 18px}

/* Un deslizador con su número al lado: se arrastra para explorar, se teclea para ser exacto. */
.deslizador{padding:12px 0 6px}
.deslizador label{display:block;font-size:15px;color:var(--fg);font-weight:500}
.deslizador label small{display:block;font-size:12.5px;color:var(--fg-3);font-weight:400;margin-top:2px}
.deslizador .fila{display:flex;align-items:center;gap:14px;margin-top:10px}
.deslizador input[type="range"]{--lleno:0%;flex:1;min-width:0;height:28px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.deslizador input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--cyan) var(--lleno),var(--line-strong) var(--lleno))}
.deslizador input[type="range"]::-moz-range-track{height:6px;border-radius:6px;background:var(--line-strong)}
.deslizador input[type="range"]::-moz-range-progress{height:6px;border-radius:6px;background:var(--cyan)}
.deslizador input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--fg);border:3px solid var(--cyan);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.deslizador input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--fg);border:3px solid var(--cyan)}
.deslizador input[type="range"]:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:8px}
.valor{width:76px;min-height:40px;border-radius:10px;border:1px solid var(--line-strong);background:var(--ink-deep);color:var(--fg);font:600 15px/1 var(--f-mono);text-align:right;padding:0 10px}
.valor.ancho{width:104px}
.valor:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opciones label{position:relative;cursor:pointer;flex:1 1 150px}
.opciones input{position:absolute;opacity:0;pointer-events:none}
.opciones label > span{display:block;height:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line-strong);background:var(--ink-deep);font-size:14.5px;font-weight:500;color:var(--fg-2);transition:border-color .2s,color .2s}
.opciones small{display:block;font-size:12.5px;color:var(--fg-3);font-weight:400;margin-top:2px}
.opciones input:checked + span{border-color:var(--cyan);color:var(--fg);background:color-mix(in srgb,var(--cyan) 10%,var(--ink-deep))}
.opciones input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}

[hidden]{display:none!important}

@container (max-width:640px){
  .desglose{grid-template-columns:1fr}
}

/* ---------- Teléfono y tableta ---------- */
@media (max-width:980px){
  .calc-grid{grid-template-columns:1fr}
  .calc-form{position:static}
}
@media (max-width:760px){
  .cifras{grid-template-columns:1fr 1fr}
  .cifras .cifra.acento{grid-column:1 / -1}
  /* En el teléfono el cajón sube desde abajo y deja ver arriba el resumen en vivo. */
  .cajon{inset:auto 0 0 0;width:100vw;height:min(86dvh,760px);border-right:0;border-top:1px solid var(--line-strong);border-radius:22px 22px 0 0;box-shadow:0 -30px 80px -30px var(--shadow)}
  .cajon[open]{animation:entra-abajo .28s cubic-bezier(.2,.8,.2,1)}
  .cajon-cabeza{padding:16px 18px 10px}
  .cajon-vivo{margin:0 18px}
  .cajon-cuerpo{padding:4px 18px 20px}
  .cajon-pie{padding-inline:18px}
}
@keyframes entra-abajo{from{transform:translateY(100%)}to{transform:none}}
@media (max-width:640px){
  .calc-hero .wrap{padding-block:24px 20px}
  .calc-hero h1{font-size:1.9rem}
  .calc-hero .lede{font-size:15.5px;margin-top:12px}
  .direccion label > span{padding:11px 12px}
}
@media (max-width:520px){
  .herramientas{width:100%}
  .herramientas button{flex:1;font-size:14px;padding:12px 8px}
}
@media (max-width:420px){
  .dos-campos{grid-template-columns:1fr}
  .esquemas button{font-size:13.5px;padding:11px 2px}
}