/* aviiperu.com — herramientas (calculadoras, generadores y listas).
   Dueño: herramientas (agente B). Se carga DESPUÉS de tokens.css y avii.css.
   Mobile-first. Azul, blanco y negro formales; tarjetas con radio 2px
   (var(--rounded-none)); píldoras y círculos con var(--rounded-full).
   No redefine .btn ni sus variantes (viven en avii.css).

   Contrato de clases comunes:
     .herramienta                  contenedor (lleva data-herramienta="{slug}")
       .herramienta--lado          opcional: formulario y resultado lado a lado desde 64rem
       .herramienta__respaldo      párrafo para quien no tiene JS (el JS lo reemplaza)
       .herramienta__rotulo        rótulo (span) de un grupo de chips; enlazar con aria-labelledby
     .herramienta__form            rejilla de campos (auto-fit)
       .herramienta__grupo         subgrupo de campos que ocupa toda la fila (misma rejilla)
       .campo                      label + input/select/textarea
         .campo--ancho             ocupa toda la fila de la rejilla
         .campo__grupo             input con prefijo/sufijo (.campo__prefijo / .campo__sufijo)
         .campo__ayuda             texto de ayuda (enlazar con aria-describedby)
         .campo__error             error (enlazar con aria-describedby; input con aria-invalid="true")
       .campo-check                checkbox o radio con su label
       .chip-grupo > .chip-opcion  botones de opción con aria-pressed
     .herramienta__acciones        fila de botones (.btn .btn--primario, etc.)
     .herramienta__resultado       panel con aria-live="polite"
       .herramienta__resultado--oscuro   variante azul marino
       .resultado__etiqueta        rótulo pequeño
       .resultado__cifra           número grande
       .resultado__filas           <dl> con dt/dd (directos o envueltos en <div>)
         .es-total                 en el <div> (o dt/dd) de la fila total
       .resultado__nota            nota/aclaración
     .barra-progreso               pista; hijo <span> o .barra-progreso__relleno (ancho con
                                   style.width o la variable --valor); también vale <progress class="barra-progreso">
     .tabla-scroll > table         tabla con desplazamiento horizontal (dar tabindex="0" y aria-label)
     .herramienta__aviso           mensaje breve (copiado, descargado) con role="status"
   Lo propio de cada herramienta va con prefijo .h-{slug}__ al final de este archivo. */

/* ------------------------------------------------------------------ */
/* Contenedor                                                          */
/* ------------------------------------------------------------------ */
.herramienta {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
  min-width: 0;
  padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--rounded-none);
  box-shadow: var(--shadow-panel, 0 14px 36px rgba(10, 15, 28, .08));
}
.herramienta > * { min-width: 0; }
.herramienta [hidden] { display: none !important; }   /* hidden gana aunque la clase defina display */
.herramienta h2, .herramienta h3 { color: var(--color-secondary); margin: 0; }
.herramienta__rotulo { display: block; font-weight: 600; color: var(--color-secondary); line-height: 1.3; }
.herramienta__titulo { font-family: var(--font-display); font-size: var(--text-title, 1.25rem); line-height: 1.25; }
.herramienta__respaldo {
  margin: 0;
  padding: 1rem 1.15rem;
  background: var(--color-neutral);
  border-left: 4px solid var(--color-primary);
  color: var(--color-on-surface);
}
@media (width >= 64rem) {
  .herramienta--lado { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .herramienta--lado > .herramienta__resultado { position: sticky; top: 6.5rem; }
}

/* ------------------------------------------------------------------ */
/* Formulario y campos                                                 */
/* ------------------------------------------------------------------ */
.herramienta__form {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: start;
  margin: 0;
}
.herramienta__form > * { min-width: 0; }
.herramienta__grupo {                     /* subgrupo de campos dentro del formulario (ocupa toda la fila) */
  grid-column: 1 / -1;
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-items: start;
  min-width: 0;
}
.herramienta__form fieldset { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.herramienta__form legend { padding: 0; margin-bottom: .5rem; font-weight: 600; color: var(--color-secondary); }

.campo { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-weight: 600; color: var(--color-secondary); line-height: 1.3; }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-width: 0;
  min-height: 3rem;                       /* 48 px */
  padding: .7rem .85rem;
  border: 2px solid var(--color-line);
  border-radius: var(--rounded-none);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font: inherit;
  line-height: 1.35;
  transition: border-color .2s, box-shadow .2s;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #b7c3d6; }
.campo textarea { min-height: 9rem; resize: vertical; }
.campo select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-secondary) 50%), linear-gradient(135deg, var(--color-secondary) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
}
.campo input[type="number"] { font-variant-numeric: tabular-nums; }
.campo input::placeholder, .campo textarea::placeholder { color: #6b7587; opacity: 1; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, .18);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.campo [aria-invalid="true"] { border-color: var(--color-error); }
.campo [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .16); }
.campo__ayuda { margin: 0; color: var(--color-muted); font-size: var(--text-small, .9375rem); line-height: 1.45; }
.campo__error {
  display: flex;
  gap: .4rem;
  align-items: flex-start;
  margin: 0;
  color: var(--color-error);
  font-size: var(--text-small, .9375rem);
  font-weight: 600;
  line-height: 1.4;
}
.campo__error:empty { display: none; }
.campo__error:not(:empty)::before { content: "!"; content: "!" / ""; flex: none; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-top: .1rem; border-radius: var(--rounded-full); background: var(--color-error); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1; }

/* Prefijo / sufijo (S/, USD, %, h) */
.campo__grupo { display: flex; align-items: stretch; min-width: 0; }
.campo__grupo input, .campo__grupo select { flex: 1 1 auto; }
.campo__prefijo, .campo__sufijo {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0 .8rem;
  border: 2px solid var(--color-line);
  background: var(--color-neutral);
  color: var(--color-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.campo__prefijo { border-right: 0; border-radius: var(--rounded-none) 0 0 var(--rounded-none); }
.campo__sufijo { border-left: 0; border-radius: 0 var(--rounded-none) var(--rounded-none) 0; }

/* Checkbox y radio */
.campo-check {
  display: flex;
  gap: .65rem;
  align-items: center;
  min-height: 2.75rem;                    /* 44 px */
  cursor: pointer;
  line-height: 1.35;
}
.campo-check input { flex: none; width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--color-primary); cursor: pointer; }

/* Botones de opción (píldoras con aria-pressed) */
.chip-grupo { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-opcion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.75rem;                    /* 44 px */
  min-width: 2.75rem;
  padding: .5rem 1.05rem;
  border: 2px solid var(--color-line);
  border-radius: var(--rounded-full);
  background: var(--color-surface);
  color: var(--color-secondary);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip-opcion:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip-opcion[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.chip-opcion[aria-pressed="true"]::before { content: "\2713"; font-weight: 700; }   /* marca visible además del color */
.chip-opcion:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.chip-opcion:disabled { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------------ */
/* Acciones                                                            */
/* ------------------------------------------------------------------ */
.herramienta__acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.herramienta__acciones .btn { flex: 1 1 100%; }
.herramienta__acciones .btn:disabled, .herramienta__acciones .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
@media (width >= 30rem) { .herramienta__acciones .btn { flex: 0 1 auto; } }
.herramienta__aviso {
  margin: 0;
  min-height: 1.5em;
  color: var(--color-success);
  font-weight: 600;
  font-size: var(--text-small, .9375rem);
}
.herramienta__aviso--error { color: var(--color-error); }

/* ------------------------------------------------------------------ */
/* Resultado                                                           */
/* ------------------------------------------------------------------ */
.herramienta__resultado {
  display: grid;
  gap: .85rem;
  min-width: 0;
  padding: clamp(1.15rem, .9rem + 1.2vw, 1.75rem);
  background: var(--color-neutral);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--rounded-none);
}
.herramienta__resultado > * { margin: 0; min-width: 0; }
.herramienta__resultado[hidden] { display: none; }
.resultado__etiqueta {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-small, .9375rem);
  font-weight: 600;
  letter-spacing: .01em;
}
.resultado__cifra {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.55rem + 2.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.resultado__cifra small { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--color-muted); }
.resultado__filas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  border-top: 1px solid var(--color-line);
}
.resultado__filas > div { display: contents; }
.resultado__filas dt,
.resultado__filas dd {
  margin: 0;
  padding: .6rem 0;
  border-bottom: 1px solid var(--color-line);
  line-height: 1.4;
}
.resultado__filas dt { padding-right: 1rem; color: var(--color-on-surface); }
.resultado__filas dd {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.resultado__filas .es-total dt, .resultado__filas dt.es-total { font-weight: 700; color: var(--color-secondary); }
.resultado__filas .es-total dd, .resultado__filas dd.es-total { font-weight: 700; color: var(--color-primary); font-size: 1.1em; }
@media (width < 22rem) {
  .resultado__filas { grid-template-columns: minmax(0, 1fr); }
  .resultado__filas dt { padding-bottom: 0; border-bottom: 0; }
  .resultado__filas dd { text-align: left; padding-top: .15rem; white-space: normal; }
}
.resultado__nota {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-small, .9375rem);
  line-height: 1.5;
}
.resultado__nota strong { color: var(--color-on-surface); }

/* Variante azul marino */
.herramienta__resultado--oscuro {
  background: var(--color-navy);
  border-color: var(--color-navy);
  border-left-color: var(--color-accent-on-dark, #60a5fa);
  color: var(--color-on-secondary);
}
.herramienta__resultado--oscuro .resultado__etiqueta,
.herramienta__resultado--oscuro .resultado__nota { color: var(--color-muted-on-dark, #a9b4c6); }
.herramienta__resultado--oscuro .resultado__nota strong { color: var(--color-on-secondary); }
.herramienta__resultado--oscuro .resultado__cifra,
.herramienta__resultado--oscuro .resultado__filas dt,
.herramienta__resultado--oscuro .resultado__filas dd { color: var(--color-on-secondary); }
.herramienta__resultado--oscuro .resultado__cifra small { color: var(--color-muted-on-dark, #a9b4c6); }
.herramienta__resultado--oscuro .resultado__filas,
.herramienta__resultado--oscuro .resultado__filas dt,
.herramienta__resultado--oscuro .resultado__filas dd { border-color: rgba(255, 255, 255, .18); }
.herramienta__resultado--oscuro .resultado__filas .es-total dd,
.herramienta__resultado--oscuro .resultado__filas dd.es-total { color: var(--color-accent-on-dark, #60a5fa); }
.herramienta__resultado--oscuro a { color: #bcd3ff; }

/* ------------------------------------------------------------------ */
/* Barra de progreso                                                   */
/* ------------------------------------------------------------------ */
.barra-progreso {
  --valor: 0%;
  position: relative;
  display: block;
  width: 100%;
  height: .75rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--rounded-full);
  background: var(--color-line);
  appearance: none;
}
.barra-progreso > span,
.barra-progreso__relleno {
  display: block;
  height: 100%;
  width: var(--valor);
  max-width: 100%;
  border-radius: inherit;
  background: var(--color-primary);
  transition: width .5s var(--ease, ease);
}
progress.barra-progreso::-webkit-progress-bar { background: var(--color-line); border-radius: var(--rounded-full); }
progress.barra-progreso::-webkit-progress-value { background: var(--color-primary); border-radius: var(--rounded-full); }
progress.barra-progreso::-moz-progress-bar { background: var(--color-primary); border-radius: var(--rounded-full); }
.herramienta__resultado--oscuro .barra-progreso { background: rgba(255, 255, 255, .2); }
.herramienta__resultado--oscuro .barra-progreso > span,
.herramienta__resultado--oscuro .barra-progreso__relleno { background: var(--color-accent-on-dark, #60a5fa); }

/* ------------------------------------------------------------------ */
/* Tablas                                                              */
/* ------------------------------------------------------------------ */
.tabla-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-line);
  border-radius: var(--rounded-none);
  background: var(--color-surface);
  overscroll-behavior-x: contain;
}
.tabla-scroll:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.tabla-scroll--alta { max-height: min(70vh, 40rem); overflow-y: auto; }
.tabla-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small, .9375rem);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.tabla-scroll caption {
  padding: .75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-secondary);
  caption-side: top;
}
.tabla-scroll th,
.tabla-scroll td {
  padding: .65rem .9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
}
.tabla-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-navy);
  color: var(--color-on-secondary);
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
}
.tabla-scroll tbody tr:nth-child(even) { background: var(--color-neutral); }
.tabla-scroll tbody th { font-weight: 600; color: var(--color-secondary); }
.tabla-scroll .num, .tabla-scroll td[data-num] { text-align: right; white-space: nowrap; }
.tabla-scroll tfoot td, .tabla-scroll tfoot th { font-weight: 700; background: var(--color-neutral); border-top: 2px solid var(--color-secondary); }

/* ------------------------------------------------------------------ */
/* Preferencias del usuario                                            */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .campo input, .campo select, .campo textarea, .chip-opcion,
  .barra-progreso > span, .barra-progreso__relleno { transition: none; }
}
@media (forced-colors: active) {
  .chip-opcion[aria-pressed="true"] { border: 3px solid CanvasText; }
  .barra-progreso { border: 1px solid CanvasText; }
  .barra-progreso > span, .barra-progreso__relleno { background: Highlight; }
}
@media print {
  .herramienta { box-shadow: none; border: 1px solid #000; }
  .herramienta__acciones, .herramienta__aviso { display: none; }
  .tabla-scroll { overflow: visible; max-height: none; }
  .tabla-scroll thead th { position: static; color: #000; background: #fff; }
}

/* ================================================================== */
/* Estilos propios por herramienta (.h-{slug}__)                       */
/* ================================================================== */

/* --- lista-filtrable (departamentos, distritos, países) ------------- */
.h-lista-filtrable__controles { display: grid; gap: 1rem; }
.h-lista-filtrable__barra { display: grid; gap: .75rem; }
.h-lista-filtrable__contador { margin: 0; font-weight: 600; color: var(--color-secondary); }
.h-lista-filtrable__vacio { margin: 0; padding: 1rem; background: var(--color-neutral); border-left: 4px solid var(--color-error); }
.h-lista-filtrable .tabla-scroll th small,
.h-lista-filtrable .tabla-scroll td small { display: block; font-weight: 400; font-size: .8125rem; color: var(--color-muted); }
.h-lista-filtrable tbody tr[hidden] { display: none; }
.h-lista-filtrable .resultado__nota { margin: 0; }
.h-lista-filtrable--simple { gap: 1rem; }
.h-lista-filtrable__columnas {
  margin: 0;
  padding: 0 0 0 1.1rem;
  columns: 1;
  column-gap: 2rem;
  line-height: 1.5;
}
.h-lista-filtrable__columnas li { break-inside: avoid; padding: .15rem 0; }
@media (width >= 30rem) { .h-lista-filtrable__columnas { columns: 2; } }
@media (width >= 56rem) {
  .h-lista-filtrable__columnas { columns: 3; }
  .h-lista-filtrable__barra { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .h-lista-filtrable__barra .herramienta__aviso { grid-column: 1 / -1; }
}

/* --- calculadora-igv ------------------------------------------------ */
.h-calculadora-igv__entrada, .h-calculadora-paypal__entrada { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.h-calculadora-igv__letras {
  margin: 0;
  padding: .75rem .9rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-line);
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--color-secondary);
  overflow-wrap: anywhere;
}
.h-calculadora-igv__letras:empty { display: none; }

/* --- calculadora-paypal --------------------------------------------- */
.h-calculadora-paypal__leyenda:empty { display: none; }

/* --- calculadora-horas-trabajadas ----------------------------------- */
.h-calculadora-horas-trabajadas__semana { grid-column: 1 / -1; display: grid; gap: .75rem; }
.herramienta .h-calculadora-horas-trabajadas__dia {
  display: grid;
  gap: .5rem .75rem;
  margin: 0;
  padding: .75rem .9rem;
  border: 1px solid var(--color-line);
  border-radius: var(--rounded-none);
  background: var(--color-surface);
}
.h-calculadora-horas-trabajadas__dia legend { padding: 0 .25rem; font-weight: 700; color: var(--color-secondary); }
.h-calculadora-horas-trabajadas__dia-campos { display: grid; gap: .5rem .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); }
.h-calculadora-horas-trabajadas__dia--libre { background: var(--color-neutral); }
.h-calculadora-horas-trabajadas__dia--libre .h-calculadora-horas-trabajadas__dia-campos { opacity: .55; }
.h-calculadora-horas-trabajadas__total-dia { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.h-calculadora-horas-trabajadas__dia .campo input:disabled { background: var(--color-neutral); cursor: not-allowed; }

/* --- calculadora-horas-extras --------------------------------------- */
.h-calculadora-horas-extras__grupos { grid-column: 1 / -1; display: grid; gap: .75rem; }
.herramienta .h-calculadora-horas-extras__grupo {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--rounded-none);
}
.h-calculadora-horas-extras__grupo legend { padding: 0 .25rem; font-weight: 700; color: var(--color-secondary); }
.h-calculadora-horas-extras__quitar { justify-self: start; }
.h-calculadora-horas-extras__recargos { grid-column: 1 / -1; border: 1px solid var(--color-line); border-radius: var(--rounded-none); padding: 0 1rem; }
.h-calculadora-horas-extras__recargos summary {
  display: flex; align-items: center; min-height: 2.75rem; cursor: pointer;
  font-weight: 600; color: var(--color-primary);
}
.h-calculadora-horas-extras__recargos[open] { padding-bottom: 1rem; }

/* --- generador-enlaces-whatsapp ------------------------------------- */
.h-generador-enlaces-whatsapp__enlace { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9375rem; }
.h-generador-enlaces-whatsapp__vista {
  padding: 1rem;
  background: #e7ded4;
  border-radius: var(--rounded-none);
}
.h-generador-enlaces-whatsapp__burbuja {
  display: block;
  max-width: 85%;
  margin-left: auto;
  padding: .55rem .8rem;
  background: #d9fdd3;
  color: #0a0f1c;
  border-radius: .75rem .75rem .2rem .75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(10, 15, 28, .12);
}
.herramienta__acciones a.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* --- contador-de-palabras ------------------------------------------- */
.h-contador-de-palabras__form textarea { min-height: 14rem; font-size: 1.0625rem; line-height: 1.6; }
.h-contador-de-palabras__subtitulo { font-size: 1.0625rem; margin: 0 0 .5rem; color: var(--color-secondary); }
.h-contador-de-palabras__top { margin: 0; padding-left: 1.4rem; display: grid; gap: .25rem; }
.h-contador-de-palabras__top li::marker { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.h-contador-de-palabras__top li > span:first-child { font-weight: 600; overflow-wrap: anywhere; }
.h-contador-de-palabras__veces { margin-left: .5rem; color: var(--color-muted); font-size: var(--text-small, .9375rem); }
.h-contador-de-palabras__vacio { list-style: none; margin-left: -1.4rem; color: var(--color-muted); }
.h-contador-de-palabras__excedido > span { background: var(--color-error); }
.h-contador-de-palabras__crono { display: grid; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }
.h-contador-de-palabras__crono .campo__ayuda { margin: 0; }
.h-contador-de-palabras__reloj { margin: 0; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--color-secondary); font-variant-numeric: tabular-nums; }
@media (width >= 64rem) {
  .h-contador-de-palabras__raiz { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
  .h-contador-de-palabras__raiz > .herramienta__form,
  .h-contador-de-palabras__raiz > .herramienta__acciones,
  .h-contador-de-palabras__raiz > .herramienta__aviso { grid-column: 1; }
  .h-contador-de-palabras__raiz > .herramienta__resultado { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 6.5rem; }
  .h-contador-de-palabras__raiz > .h-contador-de-palabras__crono { grid-column: 1; }
}

/* --- volumen-de-un-cilindro ----------------------------------------- */
.h-volumen-de-un-cilindro__entrada { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.h-volumen-de-un-cilindro__figura { margin: 0; display: flex; justify-content: center; }
.h-volumen-de-un-cilindro__dibujo { width: min(100%, 13rem); height: auto; }
.h-volumen-de-un-cilindro__cuerpo { fill: rgba(29, 78, 216, .08); stroke: var(--color-secondary); stroke-width: 2; }
.h-volumen-de-un-cilindro__tapa { fill: rgba(29, 78, 216, .18); stroke: var(--color-secondary); stroke-width: 2; }
.h-volumen-de-un-cilindro__oculta { fill: none; stroke: var(--color-muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.h-volumen-de-un-cilindro__cota { stroke: var(--color-primary); stroke-width: 2; }
.h-volumen-de-un-cilindro__punto { fill: var(--color-primary); }
.h-volumen-de-un-cilindro__texto { fill: var(--color-primary); font-family: var(--font-display); font-size: 18px; font-weight: 700; font-style: italic; }
.h-lista-filtrable__titulo { margin: 0; font-weight: 600; color: var(--color-secondary); line-height: 1.4; }