/* ═══════════════════════════════════════════════════════════════════════════
   HERRAMIENTAS INTERACTIVAS · La prueba de «Herramientas con IA»
   ═══════════════════════════════════════════════════════════════════════════

   QUÉ SON: tres herramientas que funcionan de verdad en el navegador —panel de
   datos, lector de documentos y búsqueda en notas—. Reglas y cálculo, sin
   modelo de lenguaje, sin red, sin APIs. Nada se ejecuta solo: siempre hay un
   botón que pulsa la persona.

   DE DÓNDE VINIERON: del proyecto anterior (`ds-v2/code/prototipo/
   maqueta-herramientas-ia.html`, bloque `css-herramientas`). Traídas tal cual
   en comportamiento, adaptadas al sistema de esta web.

   POR QUÉ UN COMPONENTE PROPIO Y NO `.mp-*`: el sistema de miniprogramas
   (`mp-*`) modela «pasos + registro + comparativa», que es OTRA forma. Estas
   herramientas son entrada → cálculo → resultado. Forzarlas a `.mp-demo`
   habría obligado a inventar pasos que no existen (mentir en la página) o a
   perder funciones. Son un componente distinto y se documenta como tal.

   ADAPTACIÓN DE TOKENS: el original usaba 7 tokens que aquí no existen. Cada
   uno se tradujo a su equivalente semántico; NO se inventó ningún color.

     original        aquí                qué es
     --sim-fondo  →  --superficie        fondo de la tarjeta
     --sim-fg     →  --fg                texto principal
     --sim-mut    →  --mut               texto secundario
     --sim-bd     →  --borde             borde suave
     --bd         →  --borde-fuerte      borde marcado
     --card       →  --superficie-2      superficie elevada
     --azul       →  --azul-marca        el azul de Sysnetia

   PREFIJO `hi-`: todas las clases llevan `hi-` (de Herramientas IA) para no
   colisionar con `.h-*`, que podría existir en otra parte.

   ALTURA: las tres tarjetas miden lo mismo antes y después de ejecutar, para
   que el botón no salte bajo el dedo. Lo garantiza `min-block-size` en el
   cuerpo, no un alto fijo (el contenido puede crecer).

   ═══════════════════════════════════════════════════════════════════════════ */


/* ============================================================================
   HERRAMIENTAS INTERACTIVAS (La prueba de Herramientas IA).
   El visitante pone los datos, la herramienta responde. Nada se ejecuta solo.
   Los paneles son OSCUROS en los dos temas: su texto usa --fg / --mut,
   NO --fg (que en tema claro es tinta oscura y quedaria ilegible).
   ALTURA FIJA: los 3 .hi-herr miden lo mismo antes y despues de ejecutar, para que
   la fila no salte. El resultado vive en una zona con scroll propio.
   ============================================================================ */
/* COLOR DE ERROR · token LOCAL del componente.
   El proyecto no tiene un token de error y no se inventa uno global por una
   sola caja. Contraste medido sobre el fondo de la tarjeta:
     oscuro  #FF8A8E sobre #1C2027 → 7.22:1
     claro   #A61B15 sobre #E8ECF1 → 6.35:1
   Los dos pasan AA (4.5:1) con margen. */
.hi-herramientas{--hi-error:#FF8A8E}
[data-tema="claro"] .hi-herramientas{--hi-error:#A61B15}

.hi-herramientas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  margin-top:28px;align-items:stretch}
.hi-herr{display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--borde-fuerte);
  background:var(--superficie-2);overflow:hidden;height:520px;
  transition:border-color .3s}
.hi-herr:focus-within{border-color:rgba(var(--acento-rgb),.5)}

.hi-h-cab{padding:13px 15px 11px;border-bottom:1px solid var(--borde-fuerte);background:var(--superficie);flex:0 0 auto}
.hi-h-cab h4{font-size:.88rem;font-weight:600;color:var(--fg);margin:2px 0 3px}
.hi-h-num{font-size:.58rem;letter-spacing:.2em;color:var(--acento);font-weight:700}
.hi-h-tag{font-size:.58rem;color:var(--mut);letter-spacing:.03em;display:block}

.hi-h-cuerpo{padding:14px 15px 16px;display:flex;flex-direction:column;
  gap:0;flex:1 1 auto;min-height:0;background:var(--superficie-2)}

.hi-h-cuerpo label{display:block;font-size:.66rem;color:var(--mut);margin-bottom:6px;flex:0 0 auto}
.hi-h-cuerpo label,.hi-h-cuerpo .hi-h-pie,.hi-h-cuerpo .hi-campo b,.hi-h-cuerpo .hi-kpi span{color:var(--mut)}
.hi-h-cuerpo label.hi-mt{margin-top:11px}
.hi-h-cuerpo textarea,.hi-h-cuerpo input[type=text]{
  width:100%;box-sizing:border-box;background:var(--superficie);color:var(--fg);
  border:1px solid var(--borde);border-radius:8px;padding:9px 11px;
  font:inherit;font-size:.72rem;line-height:1.45;resize:none;flex:0 0 auto}
.hi-h-cuerpo textarea{height:78px;min-height:78px}
.hi-h-cuerpo textarea:focus,.hi-h-cuerpo input:focus{
  outline:2px solid rgba(var(--acento-rgb),.45);outline-offset:1px;border-color:var(--acento)}
.hi-h-cuerpo textarea::placeholder,.hi-h-cuerpo input::placeholder{color:var(--mut);opacity:1}

.hi-h-acciones{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;flex:0 0 auto}
/* El boton de ejecucion se ancla a la DERECHA con margin-left:auto. Asi el
   boton "Ver ejemplo" puede crecer o encoger al cambiar el nombre del ejemplo
   sin mover el boton de ejecucion, que se queda siempre en el mismo sitio. */
.hi-h-acciones .hi-h-principal{margin-left:auto}
/* el texto del ejemplo no rompe la linea ni empuja el layout */
.hi-h-acciones .hi-h-ejemplo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.hi-h-btn{border-radius:7px;padding:8px 13px;font:inherit;font-size:.7rem;font-weight:600;
  cursor:pointer;border:1px solid transparent;transition:all .2s}
.hi-h-ejemplo{background:transparent;color:var(--fg);border-color:var(--borde)}
.hi-h-ejemplo:hover{border-color:var(--acento);color:var(--acento)}
.hi-h-principal{background:var(--acento);color:var(--boton-fg)}
.hi-h-principal:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(var(--acento-rgb),.35)}

/* ZONA DE RESULTADO: ocupa el resto de la tarjeta con scroll propio.
   Asi la altura NO cambia al ejecutar. */
.hi-h-resultado{margin-top:13px;padding-top:13px;border-top:1px solid var(--borde);
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.hi-h-resultado::-webkit-scrollbar{width:5px}
.hi-h-resultado::-webkit-scrollbar-thumb{background:var(--borde-fuerte);border-radius:3px}
.hi-h-error{margin-top:11px;padding:8px 11px;border-radius:7px;font-size:.68rem;
  background:rgba(229,72,77,.10);
  border:1px solid rgba(229,72,77,.45);
  color:var(--hi-error);
  flex:0 0 auto}
.hi-h-pie{margin-top:9px;font-size:.6rem;color:var(--mut);flex:0 0 auto}

.hi-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:11px}
.hi-kpi{background:var(--superficie);border:1px solid var(--borde);border-radius:7px;padding:7px 8px}
.hi-kpi b{display:block;font-size:.82rem;font-weight:800;color:var(--fg);
  font-variant-numeric:tabular-nums;line-height:1.15;word-break:break-word}
.hi-kpi span{display:block;font-size:.5rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);margin-top:3px}
.hi-kpi.hi-mejor b{color:var(--acento)}

.hi-grafico{width:100%;flex:0 0 auto}
.hi-grafico svg{display:block;width:100%;height:auto;overflow:visible}
.hi-grafico .hi-barra{transition:opacity .15s;cursor:pointer}
.hi-grafico .hi-barra:hover{opacity:.75}
.hi-grafico .hi-barra.hi-sel{stroke:var(--acento);stroke-width:.7}

/* detalle del mes clicado */
.hi-detalle{margin-top:10px;padding:9px 11px;border-radius:7px;
  background:rgba(var(--acento-rgb),.10);border:1px solid rgba(var(--acento-rgb),.28);
  font-size:.66rem;color:var(--fg);line-height:1.5;flex:0 0 auto}
.hi-detalle b{color:var(--acento);font-weight:800;font-variant-numeric:tabular-nums}
.hi-detalle .hi-muted{color:var(--mut);font-size:.6rem;display:block;margin-top:3px}

.hi-campos{display:grid;gap:6px}
.hi-campo{display:flex;gap:8px;align-items:baseline;font-size:.69rem;padding:5px 0;
  border-bottom:1px solid var(--borde)}
.hi-campo b{flex:0 0 5.6rem;font-size:.55rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);font-weight:600}
.hi-campo span{color:var(--fg);word-break:break-word}
/* «No encontrado»: se distingue por COLOR y por un guion, NO por itálica.
   Outfit no tiene itálica real y el navegador la sintetiza inclinando los
   glifos: se ve sucio y desafina con el resto. Regla del proyecto —
   `css/01-declaraciones.css:205`: el énfasis se marca con color y peso. */
.hi-campo.hi-nada span{color:var(--mut);font-weight:400;opacity:.75}
.hi-confirma{margin-top:10px;font-size:.62rem;color:var(--mut);line-height:1.5;
  padding:7px 10px;background:rgba(var(--acento-rgb),.08);border-radius:6px}

.hi-hit{padding:8px 10px;border-radius:7px;background:var(--superficie);
  border-left:2px solid var(--acento);margin-bottom:6px;font-size:.68rem;
  color:var(--fg);line-height:1.45}
.hi-hit i{font-style:normal;background:rgba(var(--acento-rgb),.3);border-radius:2px;padding:0 2px}
.hi-hit small{display:block;margin-top:4px;font-size:.55rem;color:var(--mut)}
.hi-hit.no{border-left-color:rgba(229,72,77,.7);color:var(--mut)}

.hi-nota{margin-top:22px;font-size:.65rem;color:var(--mut);text-align:center;
  max-width:62ch;margin-left:auto;margin-right:auto;line-height:1.55;opacity:.8}

/* ============================ TEMA CLARO ============================
   La tarjeta (.hi-herr) y su cabecera usaban --card y --sim-fondo, que en tema
   claro son casi transparentes o negros: la cabecera quedaba un bloque oscuro
   suelto. Aqui se les da un fondo claro con borde visible. El CUERPO sigue
   oscuro a proposito (los textarea y graficos estan pensados para fondo oscuro).
   ============================ */
/* El botón «Ver ejemplo» va dentro del cuerpo de la tarjeta, que ahora SI
   sigue el tema (--superficie-2). Por eso usa --fg y --borde-fuerte: se adapta
   solo. Antes tenía `color:#E8EDF5` fijo porque el cuerpo era negro siempre. */
.hi-h-cuerpo .hi-h-ejemplo{color:var(--fg);border-color:var(--borde-fuerte)}
.hi-h-cuerpo .hi-h-ejemplo:hover{border-color:var(--acento);color:var(--acento)}

@media (max-width:1100px){
  /* UNA COLUMNA, PERO A TODO EL ANCHO. Antes llevaba `max-width:560px`, y en
     un tablet de 834 px dejaba la tarjeta en 267 px con 283 px de aire a cada
     lado: 650 px desperdiciados. Medido, Automatizaciones (que no lleva tope)
     da 751 px en el mismo ancho. Se quita el tope para que las dos secciones
     se lean igual — el mismo corte (1099) y sin límite de ancho. */
  .hi-herramientas{grid-template-columns:minmax(0,1fr)}
  .hi-herr{height:460px}
}


/* ── MÓVIL · pulsar cómodo con el dedo ───────────────────────────────────────
   Medido: los botones salían a 36 px de alto en 390 y 360. El mínimo táctil
   recomendado es 44×44 (WCAG 2.5.5 Nivel AAA, y lo que usan iOS y Android).
   Con 36 px y dos botones juntos, el dedo cae en el de al lado: en una tarjeta
   donde «Ver ejemplo» y «Dibujar panel» hacen cosas opuestas, eso es un
   error real, no estética.

   A 44 px de alto y con `gap` propio, los dos botones ocupan el ancho de la
   tarjeta en una fila y se separan lo suficiente. */
@media (max-width: 720px) {
  .hi-h-btn {
    min-block-size: 44px;
    padding-block: 0;
  }
  .hi-h-acciones {
    gap: 10px;
  }
  /* En el ancho más estrecho (360) los dos botones se reparten el ancho
     completo en vez de dejar el hueco a la derecha: se alcanzan con el pulgar. */
  .hi-h-acciones > .hi-h-btn {
    flex: 1 1 0;
    min-inline-size: 0;
  }
}