/* Haricode — hoja de las herramientas públicas (calculadoras).
   Se apoya en tokens.css y en la base de .lead-form que vive en site.css. */

.tool{padding:var(--sp-8) 0}
.tool-grid{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--sp-6);align-items:start;
}
.tool-form{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-card);padding:var(--sp-6);
  display:grid;gap:var(--sp-4);
}
.tool-form .row{display:grid;gap:var(--sp-2)}
.tool-form label{font-size:var(--fs-xs);color:var(--text-3)}
.tool-form input[type=date],.tool-form input[type=number],.tool-form select{
  font:inherit;font-size:var(--fs-sm);color:var(--text);
  background:var(--surface-0);border:1px solid var(--border);
  border-radius:var(--r-control);padding:var(--sp-3) var(--sp-4);width:100%;
}
.tool-form select{color-scheme:dark light;cursor:pointer}
.tool-form input:focus-visible,.tool-form select:focus-visible{outline:none;border-color:var(--border-strong)}
/* Grupos de preguntas que cambian según lo que se elige (el cotizador). */
.tool-form fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--sp-4)}
.tool-form fieldset[hidden]{display:none}
/* La leyenda nombra el grupo para el lector de pantalla; en pantalla ya lo dice la etiqueta de arriba. */
.tool-form .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tool-form .par{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.tool-check{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  font-size:var(--fs-sm);color:var(--text-2);line-height:1.45;cursor:pointer;
}
.tool-check input{margin-top:3px;accent-color:var(--accent);flex:none}
.tool-check b{display:block;color:var(--text);font-weight:var(--fw-medium)}
.tool-aviso{
  background:var(--accent-quiet);border-left:3px solid var(--accent);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--text);
  border-radius:0 var(--r-control) var(--r-control) 0;
}
.tool-nota{font-size:var(--fs-xs);color:var(--text-3);line-height:1.5}

/* Respuesta directa arriba de la calculadora: varias líneas cortas dentro de .answer */
.hero .answer{max-width:68ch}
.answer p+p{margin-top:var(--sp-2)}

.tool-out{
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-card);padding:var(--sp-6);
}
.tool-out-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--border);margin-bottom:var(--sp-4);
}
.tool-out-head h3{font-size:var(--fs-md);margin:0}
.tool-out-head span{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.tool-lineas{display:grid;gap:var(--sp-4)}
.tool-linea{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-4);align-items:baseline}
.tool-linea dt{color:var(--text);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.tool-linea dd{
  margin:0;text-align:right;font-variant-numeric:tabular-nums;
  font-size:var(--fs-md);color:var(--text);
}
.tool-linea .det{grid-column:1/-1;font-size:var(--fs-xs);color:var(--text-3);line-height:1.5}
.tool-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border-strong);
}
.tool-total span{font-size:var(--fs-sm);color:var(--text-2)}
.tool-total strong{font-size:var(--fs-2xl);font-variant-numeric:tabular-nums;line-height:1.1}
.tool-vacio{color:var(--text-3);font-size:var(--fs-sm);line-height:1.6}

@media(max-width:900px){
  .tool-grid{grid-template-columns:1fr}
  .tool-form .par{grid-template-columns:1fr}
}

/* Tras el resultado, un bloque para quien hace el cálculo por su empresa y no
   por sí mismo. Discreto (la página es para el trabajador), pero con un botón
   claro: antes era una línea de texto y casi nadie lo veía. El clic manda
   whatsapp_click y además cta_calculadora_empresa (assets/site.js). */
.tool-empresa{margin-top:var(--sp-5);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-control);background:var(--surface-2);font-size:var(--fs-sm);color:var(--text-2);line-height:1.55}
.tool-empresa p{margin:0}
.tool-empresa p+p{margin-top:var(--sp-2)}
.tool-empresa .tool-empresa-t{color:var(--text);font-weight:600}
.tool-empresa-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4);margin-top:var(--sp-3)!important}
@media(max-width:520px){.tool-empresa-acciones .button{width:100%}}

/* Generador de enlace de WhatsApp: teléfono, mensaje, plantillas por giro y QR. */
.tool-form input[type=tel],.tool-form input[type=text],.tool-form textarea{
  font:inherit;font-size:var(--fs-sm);color:var(--text);
  background:var(--surface-0);border:1px solid var(--border);
  border-radius:var(--r-control);padding:var(--sp-3) var(--sp-4);width:100%;
}
.tool-form textarea{resize:vertical;line-height:1.5;min-height:6.5em}
.tool-form textarea:focus-visible,.tool-form input[type=tel]:focus-visible,.tool-form input[type=text]:focus-visible{outline:none;border-color:var(--border-strong)}
.tool-form .tel{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--sp-2)}
.tool-sugerencias{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tool-sugerencias button{
  font:inherit;font-size:var(--fs-xs);line-height:1.4;text-align:left;cursor:pointer;
  color:var(--text-2);background:var(--surface-0);border:1px solid var(--border);
  border-radius:var(--r-control);padding:var(--sp-2) var(--sp-3);
}
.tool-sugerencias button:hover,.tool-sugerencias button:focus-visible{border-color:var(--border-strong);color:var(--text);outline:none}
.tool-enlace{
  display:block;word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-xs);color:var(--text);background:var(--surface-0);
  border:1px solid var(--border);border-radius:var(--r-control);padding:var(--sp-3) var(--sp-4);
}
.tool-botones{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-3)}
.tool-botones button{cursor:pointer}
.tool-qr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.tool-qr canvas{width:180px;height:180px;background:#fff;border-radius:var(--r-control);image-rendering:pixelated}
.tool-qr div{flex:1;min-width:12rem;font-size:var(--fs-sm);color:var(--text-2);line-height:1.55}
.tool-bienvenida{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--text-2);line-height:1.55}
.tool-bienvenida blockquote{margin:var(--sp-2) 0 0;padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--border-strong);background:var(--surface-2);color:var(--text)}
@media(max-width:520px){.tool-botones .button,.tool-botones .btn-secondary{width:100%}}

/* Plantillas descargables: la vista previa es la misma ficha que se imprime. */
.plantilla-acciones{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.plantilla-vista{
  margin-top:var(--sp-6);max-height:44rem;overflow:auto;
  border:1px solid var(--border);border-radius:var(--r-card);background:#e9e9ee;padding:var(--sp-5);
}
.plantilla-vista .ficha{max-width:216mm;margin:0 auto;box-shadow:0 2px 14px rgba(0,0,0,.18)}
/* «Imprimir / guardar PDF» en la página de una plantilla: solo sale la ficha. */
@media print{
  body:has(.plantilla-vista) > *:not(main){display:none!important}
  body:has(.plantilla-vista) main > *:not(:has(.plantilla-vista)){display:none!important}
  .plantilla-sec .wrap > *:not(.plantilla-vista){display:none!important}
  .plantilla-sec{padding:0!important;margin:0!important}
  .plantilla-sec .wrap{max-width:none!important;padding:0!important}
  .plantilla-vista{max-height:none;overflow:visible;border:0;border-radius:0;padding:0;margin:0;background:none}
}

/* Calendario laboral y fiscal: un título por tabla. */
.cal-t{margin:var(--sp-7) 0 var(--sp-3);font-size:var(--fs-md);scroll-margin-top:96px}
.cal-t:first-child{margin-top:var(--sp-4)}

/* Insertar una calculadora: el código para copiar y la vista previa en vivo. */
.codigo{
  display:block;white-space:pre-wrap;word-break:break-all;margin:var(--sp-3) 0 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs);line-height:1.6;color:var(--text);
  background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-control);padding:var(--sp-4);
}
.insertar-vista{margin-top:var(--sp-5);border:1px dashed var(--border-strong);border-radius:var(--r-card);padding:var(--sp-3);background:var(--surface-1)}
.insertar-vista iframe{display:block;width:100%;border:0;border-radius:var(--r-control)}

/* Analizador de sitio web: nota en anillo, una barra por área y los arreglos.
   Los tres tonos (bien, mejorar, grave) salen de la nota o del estado. */
.az-cargando[hidden]{display:none}
.az-cargando{display:flex;align-items:center;gap:var(--sp-3);color:var(--text-2);font-size:var(--fs-sm)}
.az-giro{width:22px;height:22px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:az-giro .9s linear infinite;flex:none}
@keyframes az-giro{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.az-giro{animation-duration:3s}}
.az-nota{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.az-anillo{
  --nota:0;--tono:var(--ok);
  width:128px;height:128px;border-radius:50%;flex:none;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,var(--surface-1) 78%,transparent 79% 100%),conic-gradient(var(--tono) calc(var(--nota)*1%),var(--surface-3) 0);
}
.az-anillo strong{font-size:var(--fs-3xl);line-height:1;font-variant-numeric:tabular-nums}
.az-anillo span{font-size:var(--fs-xs);color:var(--text-3)}
.az-anillo.mejorar,.az-barra.mejorar{--tono:#D9952B}
.az-anillo.grave,.az-barra.grave{--tono:var(--brand-red)}
.az-veredicto{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--text);margin:0 0 var(--sp-2)}
.az-nota > div:last-child{flex:1;min-width:12rem}
.az-areas{display:grid;gap:var(--sp-3);margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border)}
.az-area-cab{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-sm);color:var(--text-2);margin-bottom:var(--sp-1)}
.az-area-cab b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:var(--fw-medium)}
.az-barra{--tono:var(--ok);height:8px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.az-barra i{display:block;height:100%;background:var(--tono);border-radius:inherit}
.az-t{font-size:var(--fs-md);margin:var(--sp-6) 0 var(--sp-3)}
.az-arreglos{margin:0;padding-left:1.4em;display:grid;gap:var(--sp-3)}
.az-arreglos li,.az-hallazgo{font-size:var(--fs-sm);color:var(--text-2);line-height:1.55}
.az-arreglos li p,.az-hallazgo p{margin:0}
.az-arreglo-t,.az-hallazgo-t{color:var(--text);font-weight:var(--fw-medium);margin-bottom:var(--sp-1)!important}
.az-suma{margin-left:var(--sp-2);font-size:var(--fs-xs);color:var(--text-3);font-weight:var(--fw-regular);white-space:nowrap}
.az-chip{display:inline-block;font-size:11px;line-height:1;padding:4px 7px;border-radius:var(--r-pill);font-weight:var(--fw-semibold);vertical-align:1px;color:#fff;background:var(--ok)}
.az-chip.mejorar{background:#B5791C}
.az-chip.grave{background:var(--accent)}
.az-todo{margin-top:var(--sp-5);border-top:1px solid var(--border);padding-top:var(--sp-4)}
.az-todo summary{cursor:pointer;font-size:var(--fs-sm);color:var(--text)}
.az-hallazgos{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-3)}
.az-sin{list-style:none;margin-left:-1.4em;color:var(--text-2)}