/* ==========================================================================
   AMV — herramientas (calculadora, documentos, diagnóstico)
   Se carga DESPUÉS de styles.css y solo en las páginas de herramientas.
   Mismas reglas del manual: sin sombras, sin degradados, nada en ángulo
   recto. Todas las clases propias llevan el prefijo h- para no chocar con
   las del sitio (main.js anima .paso, .qa, .sec-head…).
   ========================================================================== */

:root{
  --h-alerta: #A33A2E;
  --h-alerta-100: #F7E9E6;
  --h-sticky: 112px;           /* alto del encabezado del sitio */
}

/* --- Hero compacto: la herramienta tiene que asomar en la primera pantalla */
.h-hero .display{ font-size:clamp(2rem, 1.05rem + 3.4vw, 3.5rem); line-height:1.02; letter-spacing:-0.04em; }
.h-hero .hero__meta .chico{ max-width:52ch; }
.h-hero .eyebrow{ margin-bottom:var(--e3); }
.h-hero{ padding-bottom:0; }

.h-banda{ padding-top:clamp(28px, 3.4vw, 56px); }

/* --- Bloques con índice (01 Elegí… / 02 Tus datos…) ----------------------- */
.h-bloque + .h-bloque{ margin-top:var(--e5); }
.h-bloque__cabeza{
  display:flex; align-items:baseline; gap:var(--e3);
  padding-top:var(--e3); margin-bottom:var(--e4);
  border-top:2px solid var(--carbon);
}
.h-bloque__n{ font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--verde-prof); font-variant-numeric:tabular-nums; }
.h-bloque__titulo{ font-family:var(--f-titulo); font-weight:600; font-size:clamp(1.125rem, 1rem + .6vw, 1.5rem); letter-spacing:-0.025em; line-height:1.2; }
.h-bloque__ayuda{ color:var(--gris-frio); font-size:15px; margin:calc(var(--e3) * -1) 0 var(--e4); max-width:60ch; }

/* --- Campos ------------------------------------------------------------------ */
.h-campos{ display:grid; gap:var(--e4); }
@media (min-width:640px){ .h-campos--2{ grid-template-columns:1fr 1fr; } }
.h-campo-ancho{ grid-column:1 / -1; }

.campo .h-pista{ font-size:13px; line-height:1.45; color:var(--gris-frio); }
.campo.h-error input, .campo.h-error textarea{ border-color:var(--h-alerta); }

/* Entrada con unidad adentro («min», «$») */
.h-entrada{ position:relative; display:flex; align-items:center; }
.h-entrada input{ padding-right:64px; font-variant-numeric:tabular-nums; }
.h-entrada--pesos input{ padding-left:34px; padding-right:var(--e3); }
.h-unidad{
  position:absolute; right:var(--e3); pointer-events:none;
  font-size:14px; color:var(--gris-frio);
}
.h-entrada--pesos .h-unidad{ left:var(--e3); right:auto; color:var(--carbon); font-weight:500; }

/* Selector segmentado (por día / semana / mes) */
.h-segmentos{
  display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr;
  padding:4px; gap:4px; width:100%;
  border:1px solid var(--neutro-300); border-radius:var(--r-pill);
  background:var(--blanco);
}
.h-segmentos button{
  font:inherit; font-size:14px; font-weight:500; color:var(--neutro-700);
  padding:10px 12px; border:0; border-radius:var(--r-pill); background:transparent; cursor:pointer;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.h-segmentos button:hover{ color:var(--verde-prof); }
.h-segmentos button[aria-pressed="true"]{ background:var(--verde); color:var(--blanco); }

/* Contador − 1 + */
.h-contador{ display:inline-flex; align-items:center; gap:6px; }
.h-contador input{
  width:64px; text-align:center; padding:10px 6px !important;
  font-variant-numeric:tabular-nums;
}
.h-redondo{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--neutro-300); border-radius:var(--r-pill);
  background:var(--blanco); color:var(--carbon); cursor:pointer;
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.h-redondo:hover{ border-color:var(--verde); color:var(--verde-prof); background:var(--verde-100); }
.h-redondo:disabled{ opacity:.35; cursor:default; background:var(--blanco); border-color:var(--neutro-300); color:var(--carbon); }
.h-redondo .ico{ width:18px; height:18px; }

/* --- Fichas de ejemplo ------------------------------------------------------- */
.h-ejemplos{ display:grid; gap:var(--e2); }
.h-ejemplos__rotulo{ font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-frio); margin-bottom:var(--e2); }
@media (min-width:640px){ .h-ejemplos{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.h-ejemplo{
  text-align:left; font:inherit; cursor:pointer;
  padding:14px var(--e3); border:1px solid var(--neutro-300); border-radius:var(--r-card);
  background:var(--blanco); color:var(--carbon);
  display:grid; gap:2px;
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.h-ejemplo:hover{ border-color:var(--verde); }
.h-ejemplo[aria-pressed="true"]{ border-color:var(--verde); background:var(--verde-100); }
.h-ejemplo strong{ font-weight:600; font-size:15px; line-height:1.3; }
.h-ejemplo span{ font-size:13px; color:var(--gris-frio); line-height:1.4; }

/* --- Desplegable de ayuda ---------------------------------------------------- */
.h-ayuda{ border:1px solid var(--verde-200); border-radius:var(--r-card); background:var(--verde-100); }
.h-ayuda summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--e3);
  padding:14px var(--e3); cursor:pointer; list-style:none;
  font-size:14px; font-weight:600; color:var(--verde-prof);
}
.h-ayuda summary::-webkit-details-marker{ display:none; }
.h-ayuda summary .ico--chev{ width:18px; height:18px; transition:transform var(--t-lento) var(--ease-out); }
.h-ayuda[open] summary .ico--chev{ transform:rotate(180deg); }
.h-ayuda__cuerpo{ padding:0 var(--e3) var(--e3); display:grid; gap:var(--e3); }
.h-ayuda__cuerpo .campo input{ background:var(--blanco); }
.h-ayuda__resultado{ font-size:15px; color:var(--verde-900); }
.h-ayuda__resultado strong{ font-variant-numeric:tabular-nums; }

/* --- Botones chicos ---------------------------------------------------------- */
.btn.h-btn-chico{ padding:12px var(--e4); font-size:15px; }
.h-enlace{
  font:inherit; font-size:14px; color:var(--neutro-700); cursor:pointer;
  background:none; border:0; padding:10px 0; min-height:44px;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--neutro-300);
}
.h-enlace:hover{ color:var(--verde-prof); text-decoration-color:currentColor; }
.btn[disabled]{ opacity:.55; cursor:default; }
.btn[disabled]::before{ display:none; }

/* --- Distribución herramienta + resultado ------------------------------------ */
.h-distrib{ display:grid; gap:var(--e5); align-items:start; }
@media (min-width:980px){
  .h-distrib{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:var(--e6); }
  .h-lateral{ position:sticky; top:calc(var(--h-sticky) + var(--e3)); }
}

/* --- Tarjeta de resultado ---------------------------------------------------- */
.h-tarjeta{
  border:1px solid var(--neutro-300); border-radius:var(--r-plano);
  background:var(--blanco); padding:clamp(20px, 2.4vw, 32px);
  display:grid; gap:var(--e4);
}
.h-tarjeta--apoyo{ background:var(--neutro-100); border-color:var(--apoyo); }
.h-rotulo{
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--verde-prof);
}
.h-cifra{
  font-family:var(--f-titulo); font-weight:600;
  font-size:clamp(2.5rem, 1.6rem + 3.2vw, 4rem);
  line-height:1; letter-spacing:-0.045em;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
  transition:color var(--t) var(--ease);
}
.h-cifra--vacia{ color:var(--neutro-300); }
.h-frase{ font-size:16px; line-height:1.5; color:var(--neutro-700); }
.h-frase strong{ color:var(--carbon); font-weight:600; }

.h-desglose{ display:grid; border-top:1px solid var(--apoyo); }
.h-desglose li{
  display:flex; justify-content:space-between; gap:var(--e3);
  padding-block:10px; border-bottom:1px solid var(--apoyo); font-size:15px;
}
.h-desglose li span:first-child{ color:var(--gris-frio); }
.h-desglose li span:last-child{ font-variant-numeric:tabular-nums; font-weight:500; }
.h-desglose--total li:last-child{ border-bottom:0; }

.h-acciones{ display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:center; }
.h-acciones .btn{ padding:14px var(--e4); font-size:15px; }
@media (max-width:599px){ .h-acciones .btn{ width:100%; justify-content:center; } }

/* Barra del año: doce meses de una persona a tiempo completo */
.h-anio{ display:grid; gap:var(--e2); }
.h-anio__meses{ display:grid; grid-template-columns:repeat(12, 1fr); gap:3px; }
.h-anio__mes{ height:12px; border-radius:3px; background:var(--apoyo); overflow:hidden; }
.h-anio__mes span{ display:block; height:100%; width:0; background:var(--verde); border-radius:inherit; transition:width var(--t-lento) var(--ease-out); }
.h-anio__texto{ font-size:13px; color:var(--gris-frio); line-height:1.45; }

/* --- Avisos ------------------------------------------------------------------ */
.h-aviso{
  display:none; gap:var(--e2); align-items:flex-start;
  padding:12px var(--e3); border-radius:var(--r-campo);
  background:var(--h-alerta-100); color:#7A2A21; font-size:14px; line-height:1.5;
}
.h-aviso.visible{ display:flex; }
.h-aviso .ico{ width:18px; height:18px; margin-top:2px; }
.h-nota{
  font-size:13.5px; line-height:1.55; color:var(--gris-frio);
  padding-left:var(--e3); border-left:2px solid var(--verde-200);
}

.h-oculto{ display:none !important; }

/* --- Barra flotante en celular (el número siempre a la vista) ---------------- */
.h-flotante{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:35;
  display:flex; align-items:center; justify-content:space-between; gap:var(--e3);
  padding:10px 10px 10px 20px; border-radius:var(--r-pill);
  background:var(--carbon); color:var(--blanco);
  transform:translateY(140%); transition:transform var(--t-lento) var(--ease-out);
}
.h-flotante.visible{ transform:none; }
.h-flotante__dato{ display:grid; line-height:1.15; min-width:0; }
.h-flotante__dato small{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--neutro-300); }
.h-flotante__dato strong{ font-family:var(--f-titulo); font-weight:600; font-size:20px; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h-flotante button{
  font:inherit; font-size:14px; font-weight:600; flex:none;
  padding:12px 18px; border-radius:var(--r-pill); border:0; cursor:pointer;
  background:var(--verde); color:var(--blanco);
}
@media (min-width:980px){ .h-flotante{ display:none; } }

/* --- Catálogo (documentos) ---------------------------------------------------- */
.h-catalogo{ display:grid; gap:var(--e2); }
.h-prod{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--e2) var(--e3); align-items:center;
  padding:14px var(--e3); border:1px solid var(--neutro-300); border-radius:var(--r-card);
  background:var(--blanco);
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.h-prod.elegido{ border-color:var(--verde); background:var(--verde-100); }
.h-prod__nombre{ font-weight:600; font-size:15.5px; line-height:1.3; }
.h-prod__meta{ font-size:13px; color:var(--gris-frio); margin-top:2px; }
.h-prod__precio{ font-variant-numeric:tabular-nums; font-weight:500; color:var(--verde-prof); }
.h-prod.elegido .h-prod__meta{ color:var(--neutro-700); }

/* Resumen del pedido */
.h-lineas{ display:grid; gap:0; }
.h-lineas li{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--e2);
  padding-block:10px; border-bottom:1px solid var(--apoyo); font-size:14.5px; line-height:1.35;
}
.h-lineas .cant{ font-variant-numeric:tabular-nums; color:var(--verde-prof); font-weight:600; min-width:2.2em; }
.h-lineas .sub{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.h-lineas__vacio{ color:var(--gris-frio); font-size:14.5px; padding-block:var(--e2); }
.h-total{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--e3); }
.h-total__monto{ font-family:var(--f-titulo); font-weight:600; font-size:clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); letter-spacing:-0.035em; font-variant-numeric:tabular-nums; }
.h-total small{ display:block; font-size:12.5px; color:var(--gris-frio); }

.h-trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- Proceso en vivo ---------------------------------------------------------- */
.h-proceso{ display:grid; gap:0; max-width:640px; }
.h-proceso li{
  display:grid; grid-template-columns:36px minmax(0,1fr); gap:var(--e3);
  padding-block:var(--e3); border-bottom:1px solid var(--apoyo);
  color:var(--gris-frio); transition:color var(--t) var(--ease);
}
.h-proceso li strong{ display:block; font-weight:600; font-size:16px; color:inherit; }
.h-proceso li small{ display:block; font-size:13.5px; margin-top:2px; }
.h-proceso__icono{
  width:28px; height:28px; border-radius:var(--r-pill);
  border:1.5px solid var(--neutro-300); display:grid; place-items:center; margin-top:1px;
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.h-proceso__icono .ico{ width:16px; height:16px; opacity:0; transition:opacity var(--t) var(--ease); }
.h-proceso li.en-curso{ color:var(--carbon); }
.h-proceso li.en-curso .h-proceso__icono{ border-color:var(--verde); border-top-color:transparent; animation:h-girar 900ms linear infinite; }
.h-proceso li.listo{ color:var(--carbon); }
.h-proceso li.listo .h-proceso__icono{ background:var(--verde); border-color:var(--verde); color:var(--blanco); }
.h-proceso li.listo .h-proceso__icono .ico{ opacity:1; }
.h-proceso li.fallo{ color:#7A2A21; }
.h-proceso li.fallo .h-proceso__icono{ border-color:var(--h-alerta); background:var(--h-alerta-100); }
@keyframes h-girar{ to{ transform:rotate(360deg); } }

/* --- Éxito -------------------------------------------------------------------- */
.h-exito{ display:grid; gap:var(--e5); }
.h-exito__cabeza{ display:grid; gap:var(--e3); }
.h-sello{
  width:56px; height:56px; border-radius:var(--r-pill); background:var(--verde); color:var(--blanco);
  display:grid; place-items:center;
}
.h-sello .ico{ width:28px; height:28px; stroke-width:2; }
.h-exito__numero{
  font-family:var(--f-titulo); font-weight:600;
  font-size:clamp(2rem, 1.3rem + 2.6vw, 3.25rem); letter-spacing:-0.04em; line-height:1.02;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere;
}
.h-exito__texto{ color:var(--neutro-700); max-width:60ch; }
.h-exito__texto strong{ color:var(--carbon); font-weight:600; }

/* Planilla en miniatura */
.h-planilla{ border:1px solid var(--neutro-300); border-radius:var(--r-card); overflow:auto; background:var(--blanco); }
.h-planilla table{ border-collapse:collapse; width:100%; min-width:720px; font-size:13.5px; font-variant-numeric:tabular-nums; }
.h-planilla th, .h-planilla td{ padding:9px 12px; text-align:left; white-space:nowrap; border-bottom:1px solid var(--apoyo); border-right:1px solid var(--apoyo); }
.h-planilla th{ background:var(--carbon); color:var(--blanco); font-weight:600; font-size:12.5px; }
.h-planilla td:first-child, .h-planilla th:first-child{ width:44px; text-align:center; color:var(--gris-frio); background:var(--neutro-100); font-size:12px; }
.h-planilla th:first-child{ background:#2A363B; color:var(--neutro-300); }
.h-planilla tr.fantasma td{ color:var(--neutro-300); }
.h-planilla tr.nueva td{ background:var(--verde-100); animation:h-resaltar 2.4s var(--ease-out) both; }
.h-planilla tr.nueva td:first-child{ color:var(--verde-prof); font-weight:600; }
@keyframes h-resaltar{ 0%{ background:var(--verde-200); } 100%{ background:var(--verde-100); } }

/* Caja de siguiente paso */
.h-siguiente{
  display:grid; gap:var(--e3); align-items:center;
  padding:clamp(20px, 2.4vw, 32px); border-radius:var(--r-plano);
  background:var(--verde); color:var(--blanco);
}
.h-siguiente h3{ color:var(--blanco); font-size:clamp(1.25rem, 1.1rem + .7vw, 1.625rem); }
.h-siguiente p{ color:#F2F8F7; max-width:56ch; }
.h-siguiente :focus-visible{ outline-color:var(--blanco); }
@media (min-width:900px){ .h-siguiente{ grid-template-columns:minmax(0,1fr) auto; column-gap:var(--e5); } }

/* --- Diagnóstico: preguntas --------------------------------------------------- */
.h-cuestionario{ max-width:760px; }
.h-avance{ display:grid; gap:10px; margin-bottom:var(--e5); }
.h-avance__datos{ display:flex; justify-content:space-between; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris-frio); font-variant-numeric:tabular-nums; }
.h-avance__riel{ height:4px; border-radius:var(--r-pill); background:var(--apoyo); overflow:hidden; }
.h-avance__barra{ height:100%; width:0; background:var(--verde); border-radius:inherit; transition:width var(--t-lento) var(--ease-out); }

.h-pantalla{ display:grid; gap:var(--e4); }
.h-pantalla.saliendo{ opacity:0; transform:translateY(-10px); transition:opacity 160ms var(--ease), transform 160ms var(--ease); }
.h-pantalla.entrando{ animation:h-entrar 340ms var(--ease-out) both; }
@keyframes h-entrar{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.h-pregunta{ font-size:clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); line-height:1.12; letter-spacing:-0.035em; text-wrap:balance; }
.h-pregunta:focus{ outline:none; }
.h-pregunta-ayuda{ color:var(--gris-frio); max-width:60ch; margin-top:calc(var(--e3) * -1); }

.h-opciones{ display:grid; gap:var(--e2); }
.h-opcion{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--e3);
  width:100%; text-align:left; font:inherit; font-size:16.5px; color:var(--carbon); cursor:pointer;
  padding:18px var(--e4); border:1px solid var(--neutro-300); border-radius:var(--r-card); background:var(--blanco);
  transition:border-color var(--t) var(--ease), background-color var(--t) var(--ease), transform var(--t-rapido) var(--ease);
}
.h-opcion:hover{ border-color:var(--verde); }
.h-opcion:active{ transform:scale(.995); }
.h-opcion__marca{ width:20px; height:20px; border-radius:var(--r-pill); border:1.5px solid var(--neutro-300); position:relative; transition:border-color var(--t) var(--ease); }
.h-opcion__tecla{ font-size:12px; font-weight:600; color:var(--gris-frio); border:1px solid var(--apoyo); border-radius:6px; padding:2px 7px; font-variant-numeric:tabular-nums; }
.h-opcion[aria-checked="true"]{ border-color:var(--verde); background:var(--verde-100); }
.h-opcion[aria-checked="true"] .h-opcion__marca{ border-color:var(--verde); }
.h-opcion[aria-checked="true"] .h-opcion__marca::after{ content:""; position:absolute; inset:4px; border-radius:inherit; background:var(--verde); }
@media (hover:none){ .h-opcion__tecla{ display:none; } }

/* --- Diagnóstico: resultado --------------------------------------------------- */
.h-procesos{ display:grid; gap:0; border-top:1px solid var(--neutro-300); }
.h-proc{ display:grid; gap:var(--e2); padding-block:var(--e4); border-bottom:1px solid var(--neutro-300); }
.h-proc__cabeza{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--e3); align-items:baseline; }
.h-proc__n{ font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--verde-prof); font-variant-numeric:tabular-nums; }
.h-proc__titulo{ font-size:clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height:1.2; letter-spacing:-0.025em; }
.h-proc__horas{ font-family:var(--f-titulo); font-weight:600; font-size:1.25rem; letter-spacing:-0.02em; color:var(--verde-prof); font-variant-numeric:tabular-nums; white-space:nowrap; }
.h-proc__riel{ height:8px; border-radius:var(--r-pill); background:var(--apoyo); overflow:hidden; }
.h-proc__barra{ height:100%; width:0; background:var(--verde); border-radius:inherit; transition:width 900ms var(--ease-out); }
.h-proc p{ color:var(--neutro-700); max-width:62ch; }
.h-proc__plazo{ font-size:13.5px; color:var(--gris-frio); }
.h-proc__plazo strong{ color:var(--carbon); font-weight:600; }
@media (min-width:760px){ .h-proc{ padding-left:calc(var(--e4) + 24px); position:relative; } .h-proc__n{ position:absolute; left:0; top:calc(var(--e4) + 6px); } .h-proc__cabeza{ grid-template-columns:minmax(0,1fr) auto; } }

/* --- Cómo funciona (debajo de la herramienta) --------------------------------- */
.h-pasos{ display:grid; gap:var(--e4); counter-reset:hpaso; }
@media (min-width:900px){ .h-pasos{ grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--e5); } }
.h-pasos li{ display:grid; gap:var(--e2); padding-top:var(--e3); border-top:2px solid var(--verde-200); }
.h-pasos li::before{
  counter-increment:hpaso; content:"0" counter(hpaso);
  font-family:var(--f-titulo); font-weight:600; font-size:1.375rem; letter-spacing:-0.02em; color:var(--verde-prof);
}
.h-pasos strong{ font-family:var(--f-titulo); font-weight:600; font-size:1.125rem; letter-spacing:-0.02em; line-height:1.25; }
.h-pasos p{ color:var(--gris-texto); font-size:15.5px; }

@media (prefers-reduced-motion:reduce){
  .h-pantalla.entrando{ animation:none; }
  .h-proceso li.en-curso .h-proceso__icono{ animation:none; border-top-color:var(--verde); }
}