/* calc-kit: piezas que faltan a .t-calc (plantillas.css) para cualquier calculadora.
   Se carga después de plantillas.css. Sin barras laterales ni nada sticky (normas del proyecto). */
/* La calculadora es la respuesta: pegada al hero (72 + 84 px de hueco sin esto). */
.t-calc-sec{padding-top:0}
.t-calc-set{border:0;margin:0;padding:0;display:grid;gap:14px;min-width:0}
.t-calc-set+.t-calc-set{padding-top:22px;border-top:1px dashed var(--rule)}
.t-calc-set legend{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 4px}
.t-calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 14px;align-items:start}
/* Cada campo ocupa tres filas (etiqueta, control, ayuda) en subgrid: los controles vecinos quedan a la misma altura
   aunque una etiqueta ocupe dos líneas o un campo lleve ayuda. */
.t-calc-grid>.t-calc-f{grid-row:span 3}
.t-calc-grid>fieldset.t-calc-f{grid-column:1/-1}
.t-calc-pills{display:flex;flex-wrap:wrap;gap:8px}
.t-calc-grid.t-calc-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.t-calc-grid>div.t-calc-f{grid-template-rows:subgrid;gap:0}
.t-calc-grid>div.t-calc-f>label{align-self:end;padding-bottom:8px}
.t-calc-grid>div.t-calc-f>small{padding-top:6px}
.t-calc-form select{font:inherit;font-size:17px;font-weight:700;color:var(--ink);background:#fff;border:1.5px solid #ddd6c3;border-radius:999px;height:52px;width:100%;padding:0 44px 0 20px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%;background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
.t-calc-form select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,225,77,.55)}
.t-calc-form input[aria-invalid=true]{border-color:#b3261e}
.t-calc-err{margin:0;font-size:15px;line-height:1.45;color:#8c1d18;background:#fdeceb;border:1px solid #f1b8b4;border-radius:14px;padding:10px 14px}
.t-calc-err:empty{display:none}
.t-calc-out .t-calc-sub{font-size:15px;color:rgba(255,255,255,.78)}
.t-calc-estado{display:inline-flex;align-items:center;justify-self:start;margin:16px 0 0;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:700;line-height:1.3}
.t-calc-estado.ok{background:var(--marker);color:var(--ink)}
.t-calc-estado.ko{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.t-calc-estado:empty{display:none}
.t-calc-out .t-calc-notas{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px;line-height:1.45;color:rgba(255,255,255,.82)}
.t-calc-out .t-calc-notas:empty{display:none}
.t-calc-out .t-calc-big{flex-wrap:wrap;row-gap:4px}
.t-calc-out .t-calc-big b{white-space:nowrap;max-width:100%}
/* Móvil: resumen del resultado al principio del formulario, porque la tarjeta queda debajo. */
.t-calc-mini{display:none}
@media (max-width:900px){
 .t-calc-mini{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0;padding:12px 16px;border:1px solid var(--ink);border-radius:14px;background:var(--marker-soft,#fff6c2);font-size:16px;color:var(--ink)}
 .t-calc-mini b{font-family:var(--display);font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
 .t-calc-mini a{margin-left:auto;font-size:15px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
}
@media (max-width:600px){
 .t-calc-set legend{font-size:18px}
 .t-calc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
 .t-calc-grid:not(.t-calc-2)>.t-calc-f:last-child:nth-child(odd){grid-column:1/-1}
}
/* v2 (29/10): usabilidad tras revisar la industria (NN/g, NerdWallet, TaxDown, Omni). */
/* Etiquetas en la letra de lectura: la monoespaciada es para etiquetas de sección, no para formularios. */
.t-calc .t-calc-f>label,.t-calc .t-calc-f>legend{font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink);line-height:1.3}
.t-calc-ayuda{margin:0;font-size:15px;line-height:1.45;color:var(--muted)}
.t-calc-form input::placeholder{color:#8a93a3;font-weight:500;font-size:15px}
/* Grupo opcional plegado: parece un botón (borde, fondo, icono en círculo, hover). */
.t-calc-mas{border:1px solid var(--rule);border-radius:16px;background:#fbf9f3;padding:0}
.t-calc-set+.t-calc-mas{border-top:1px solid var(--rule);padding-top:0}
.t-calc-mas>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);border-radius:16px}
.t-calc-mas>summary::-webkit-details-marker{display:none}
.t-calc-mas>summary:hover{background:#f4f0e3}
.t-calc-mas>summary:focus-visible{outline:3px solid var(--marker);outline-offset:2px}
.t-calc-mas>summary i{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;transition:transform .25s}
.t-calc-mas>summary i::before{content:"+";font-style:normal;font-size:21px;line-height:1;font-family:var(--body);font-weight:600;margin-top:-2px}
.t-calc-mas[open]>summary i{transform:rotate(45deg);background:var(--marker)}
.t-calc-mas[open]{background:#fff}
.t-calc-mas>.t-calc-ayuda,.t-calc-mas>.t-calc-grid{margin:0 16px 16px}
/* Acciones bajo el formulario */
.t-calc-acciones{display:flex;flex-wrap:wrap;gap:10px}
.t-calc-acciones button{font:inherit;font-size:15px;font-weight:700;color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:10px 18px;cursor:pointer;transition:background .15s}
.t-calc-acciones button:hover{background:var(--marker-soft)}
.t-calc-acciones button[data-a=ejemplo]{background:var(--marker);border-color:var(--marker)}
.t-calc-acciones button[data-a=ejemplo]:hover{background:#ffd61f}
.t-calc-acciones button:focus-visible{outline:3px solid var(--marker);outline-offset:2px}
.t-calc-big[hidden]{display:none}
.t-calc-out .t-calc-sub{font-size:16px;line-height:1.45}
.t-calc-big[hidden]+.t-calc-sub{margin-top:14px;font-size:17px;color:#fff}
@media (max-width:600px){.t-calc-acciones button{flex:1 1 auto}}
/* style.css estiliza «summary > span» (gris, 22 px, gira al abrir): aquí no. */
.t-calc .t-calc-mas>summary>span,.t-calc .t-calc-mas[open]>summary>span{font:inherit;color:inherit;line-height:1.25;transform:none}
/* Deslizadores: el campo numérico conserva el valor exacto. */
.t-calc-controles{min-width:0}
.t-calc-rango{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ink);font-size:14px;line-height:1.2}
.t-calc-rango span{flex:none;font-size:14px}
.t-calc .t-calc-rango input[type=range]{--progreso:0%;appearance:none;-webkit-appearance:none;display:block;flex:1 1 auto;min-width:0;width:100%;height:44px;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent;cursor:pointer}
.t-calc .t-calc-rango input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,#ffe14d var(--progreso),#ddd var(--progreso))}
.t-calc .t-calc-rango input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(to right,#ffe14d var(--progreso),#ddd var(--progreso))}
.t-calc .t-calc-rango input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border:2px solid var(--ink);border-radius:50%;background:#ffe14d}
.t-calc .t-calc-rango input[type=range]::-moz-range-thumb{width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;background:#ffe14d}
.t-calc .t-calc-rango input[type=range].vacio,.t-calc .t-calc-rango input[type=range]:disabled{opacity:.45}
.t-calc .t-calc-rango input[type=range]:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px}
/* Filas del resultado: una cifra larga baja de línea en vez de cortarse (bombers, 29/10). */
.t-calc .t-calc-rows dd{white-space:normal;text-align:right;min-width:0;overflow-wrap:anywhere}
.t-calc .t-calc-rows dt{min-width:0}
