/* [HOME] El sistema visual de la portada ejecutiva.
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * NO INTRODUCE NI UN COLOR NUEVO
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * Todos salen de los tokens que la puerta ya declara —`--primary` granate, `--card`, `--bg`,
 * `--text`, `--text-soft`, `--text-mute`, `--border`, `--sem-*`—. Lo que se moderniza es el
 * LAYOUT, la densidad, la profundidad y la jerarquía tipográfica, que es donde vive la
 * sensación de producto caro; un color nuevo sólo habría roto la identidad.
 *
 * `tests/test_paleta_declarada.py` ya prohíbe inventar un color, y este archivo se escribió
 * para pasarlo sin excepciones.
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * LAS SOMBRAS SON DE UNA SOLA FAMILIA, Y SON TRES
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * Una interfaz se ve barata cuando cada caja inventa su sombra: seis desenfoques distintos en
 * la misma pantalla leen como seis planos que no existen. Acá hay tres niveles y significan
 * algo — apoyada, elevada, flotante— y nada usa un cuarto.
 *
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * LA DENSIDAD ES UNA DECISION, NO UN SOBRANTE
 * ─────────────────────────────────────────────────────────────────────────────────────────
 * Una portada ejecutiva tiene que contestar «qué pasa en mi empresa hoy» sin hacer scroll, y
 * eso obliga a una densidad ALTA. Pero denso no es apretado: el aire se saca de los márgenes
 * exteriores y de los títulos, nunca del interlineado del texto que hay que leer.
 *
 * Marca buscable: home_ejecutiva
 */


/* ══ POR QUE CASI TODO VA PREFIJADO CON `.hx` ════════════════════════════════════════════
 *
 *  MEDIDO EN LA PUERTA REAL EL 23-08-2026: la cifra principal salia en 13px en vez de 26.
 *
 *      .shell-section p   { font-size: 13px }   especificidad (0,1,1)  ← ganaba
 *      .hx-kpi-valor      { font-size: 26px }   especificidad (0,1,0)
 *
 *  `index.html` tiene reglas de ELEMENTO dentro de una clase, y esas le ganan a una clase
 *  sola. No es culpa de esa hoja: es lo que pasa siempre que un modulo se monta dentro de
 *  una pagina que ya tiene opinion sobre sus parrafos.
 *
 *  La respuesta NO es `!important` —que gana la discusion y la vuelve imposible de retomar—
 *  sino subir la especificidad lo justo: `.hx .hx-kpi-valor` es (0,2,0) y gana por regla, no
 *  por excepcion. El dia que alguien necesite anular esto, puede.
 */

/* ══ TOKENS DEL SISTEMA ══════════════════════════════════════════════════════════════════
   Sólo geometría y profundidad. El color no se toca. */
.hx {
  --hx-r: 10px;              /* radio de una tarjeta */
  --hx-r-chico: 8px;         /* radio de un control */
  --hx-gap: 14px;            /* entre tarjetas hermanas */
  --hx-gap-bloque: 22px;     /* entre zonas del tablero */
  --hx-pad: 16px;            /* dentro de una tarjeta */

  /*  Apoyada · elevada · flotante. Tres, y las tres del mismo tinte neutro: una sombra con
      color propio tiñe el fondo y se nota en cuanto hay dos juntas. */
  --hx-s1: 0 1px 2px rgba(16, 18, 22, .05);
  --hx-s2: 0 2px 8px rgba(16, 18, 22, .07);
  --hx-s3: 0 8px 24px rgba(16, 18, 22, .10);
}

/* ══ LA REJILLA ══════════════════════════════════════════════════════════════════════════
   Doce columnas en escritorio ancho. No es decoración: es lo que permite que un KPI ocupe
   tres, un gráfico ocho y el panel de alertas cuatro sin inventar anchos a mano. */
.hx {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--hx-gap);
  align-items: start;
}
.hx-col-3  { grid-column: span 3; }
.hx-col-4  { grid-column: span 4; }
.hx-col-6  { grid-column: span 6; }
.hx-col-8  { grid-column: span 8; }
.hx-col-12 { grid-column: span 12; }

/* ══ LA BARRA SUPERIOR ═══════════════════════════════════════════════════════════════════ */
.hx-topbar {
  grid-column: span 12;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 2px;
}
.hx .hx-titulo {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
/*  El contexto —empresa y período— va JUNTO al título y no en una esquina: es lo que dice
    de qué habla todo lo de abajo, y separarlo obliga a buscarlo para creerle a una cifra. */
.hx .hx-contexto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-mute);
}
/*  La linea de frescura del bloque que ya NO lleva cabecera. Va sola, sin titulo ni boton al
    lado, asi que necesita su propio aire arriba: pegada al contenido anterior se leeria como
    un pie de la seccion de encima en vez de como la fecha de esta. */
.hx .hx-contexto-solo { margin: 0 0 12px; }
.hx .hx-contexto b { color: var(--text); font-weight: 600; }
.hx-topbar-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/*  ── LA FRESCURA NO ES LETRA CHICA ────────────────────────────────────────────────────
    «Actualizado hace 4 horas» decide si se puede tomar una decisión con lo que se ve. Va en
    el mismo tamaño que el resto del contexto, no en un pie de página. */
.hx .hx-frescura {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-mute);
  white-space: nowrap;
}
.hx-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-mute);
  flex: none;
}
.hx-punto.t-ok        { background: var(--sem-ok, #2E7D32); }
.hx-punto.t-pendiente { background: var(--sem-pendiente, #B45309); }
.hx-punto.t-falla     { background: var(--sem-falla, #B3261E); }

/*  La procedencia del dato: de SAP en vivo, o de lo ya recordado. */
.hx .hx-fuente {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-mute);
  white-space: nowrap;
}

.hx-btn {
  font: inherit; font-size: 12.5px; min-height: 34px; width: auto;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--hx-r-chico);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.hx-btn:hover { border-color: var(--primary); }
.hx-btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.hx-btn-primario {
  border-color: transparent; background: var(--primary); color: #FFFFFF; font-weight: 600;
}

/* ══ LOS FILTROS GLOBALES ════════════════════════════════════════════════════════════════ */
.hx-filtros {
  grid-column: span 12;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.hx-chip {
  font: inherit; font-size: 12.5px; min-height: 30px; width: auto;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-soft);
  cursor: pointer;
}
.hx-chip[aria-pressed="true"] {
  background: var(--primary); border-color: var(--primary); color: #FFFFFF; font-weight: 600;
}
.hx-chip:hover { border-color: var(--primary); }
/*  UN FILTRO QUE NO SE PUEDE APLICAR NO SE PINTA COMO SI PUDIERA. Ver la nota de
    `hx-chip-falta` en el módulo: dice qué falta, no se queda apagado sin explicación. */
.hx-chip-falta {
  border-style: dashed;
  color: var(--text-mute);
  cursor: help;
}

/* ══ UNA TARJETA ═════════════════════════════════════════════════════════════════════════ */
.hx-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--hx-r);
  box-shadow: var(--hx-s1);
  padding: var(--hx-pad);
  min-width: 0;
}
.hx-card-cab {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px;
}
.hx .hx-card-tit {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.35;
}
.hx .hx-card-sub { margin: 2px 0 0; font-size: 12px; color: var(--text-mute); line-height: 1.45; }
.hx-card-acc { margin-left: auto; display: flex; gap: 6px; flex: none; }

/* ══ KPI ═════════════════════════════════════════════════════════════════════════════════ */
.hx-kpi { position: relative; overflow: hidden; }
/*  EL COLOR SEMANTICO VA EN UNA BARRA SUPERIOR, no en el fondo de la tarjeta: un fondo verde
    tiñe la cifra y la hace parecer un juicio antes de leerla. */
.hx-kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--border);
}
.hx-kpi.t-ok::before        { background: var(--sem-ok, #2E7D32); }
.hx-kpi.t-falla::before     { background: var(--sem-falla, #B3261E); }
.hx-kpi.t-pendiente::before { background: var(--sem-pendiente, #B45309); }

.hx .hx-kpi-et {
  display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 6px;
}
.hx .hx-kpi-valor {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 26px; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow-wrap: anywhere;
}
.hx .hx-kpi-unidad { font-size: 12px; font-weight: 400; color: var(--text-mute); }
.hx .hx-kpi-var { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: 12.5px; }
.hx .hx-kpi-var.t-ok    { color: var(--sem-ok, #2E7D32); }
.hx .hx-kpi-var.t-falla { color: var(--sem-falla, #B3261E); }
.hx .hx-kpi-var.t-neutro{ color: var(--text-mute); }
.hx .hx-kpi-contra { color: var(--text-mute); font-size: 11.5px; }
/*  «sin comparación» NO se atenúa hasta desaparecer: es la razón por la que no hay flecha, y
    apagarla convierte una explicación en letra chica que nadie lee. */
.hx .hx-kpi-sin { margin-top: 8px; font-size: 12px; color: var(--text-soft); font-style: italic; }
.hx-kpi-pie { margin-top: 10px; display: flex; align-items: center; gap: 8px; }

/*  La microtendencia: una línea de contexto, no un gráfico. Sin ejes ni leyenda a propósito
    —lo que aporta es la FORMA, y ejes en 40px de alto son ruido ilegible—. */
.hx-spark { display: block; width: 100%; height: 34px; margin-top: 10px; }

/* ══ ALERTAS E INSIGHTS ══════════════════════════════════════════════════════════════════ */
.hx-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hx-item {
  display: grid; grid-template-columns: 3px 1fr; gap: 10px;
  border-radius: var(--hx-r-chico);
}
.hx-item-barra { border-radius: 2px; background: var(--border); }
.hx-item.t-ok        .hx-item-barra { background: var(--sem-ok, #2E7D32); }
.hx-item.t-falla     .hx-item-barra { background: var(--sem-falla, #B3261E); }
.hx-item.t-pendiente .hx-item-barra { background: var(--sem-pendiente, #B45309); }
.hx-item-cuerpo { min-width: 0; }
.hx .hx-item-tit { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--text); }
.hx .hx-item-txt { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.hx-item-cta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }

/* ══ ACCESOS RAPIDOS Y MODULOS ═══════════════════════════════════════════════════════════ */
.hx-accesos { display: flex; flex-wrap: wrap; gap: 7px; }
.hx-acceso {
  font: inherit; font-size: 12.5px; min-height: 34px; width: auto;
  padding: 7px 12px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--hx-r-chico);
  background: var(--card); color: var(--text); cursor: pointer;
}
.hx-acceso:hover { border-color: var(--primary); }

.hx-modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.hx-modulo {
  display: block; width: 100%; text-align: left;
  font: inherit; min-height: 62px; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--hx-r-chico);
  background: var(--card); color: var(--text); cursor: pointer;
}
.hx-modulo:hover { border-color: var(--primary); box-shadow: var(--hx-s2); }
.hx .hx-modulo-tit { display: block; font-size: 13px; font-weight: 600; }
.hx .hx-modulo-sub { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-mute);
                 line-height: 1.4; }

/* ══ LOS ESTADOS ═════════════════════════════════════════════════════════════════════════
   Ocho, y ninguno se parece a otro. Fundirlos en «no hay datos» es la forma más barata de
   mentir en un tablero: quien mira decide como si hubiera mirado. */
.hx-estado {
  display: grid; gap: 6px;
  padding: 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--hx-r-chico);
  background: var(--card);
}
.hx-estado.t-curso     { border-left-color: var(--primary); }
.hx-estado.t-pendiente { border-left-color: var(--sem-pendiente, #B45309); }
.hx-estado.t-falla     { border-left-color: var(--sem-falla, #B3261E); }
.hx .hx-estado-tit { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.hx .hx-estado-que { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); }
/*  QUE HACER, un escalon por debajo de QUE PASA: se lee despues, no compite con el
    titulo, y no es un tercer parrafo indistinguible del anterior. */
.hx .hx-estado-sig { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--text-mute); }
.hx-estado-cta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }

/*  ── EL ESQUELETO DE CARGA ────────────────────────────────────────────────────────────
    Silueta, no rueda: dice QUE va a aparecer y dónde, así la pantalla no salta cuando llega.
    Y no se anima si el sistema pide quietud — WCAG 2.3.3 y quien se marea con el movimiento
    no debería pagar por una animación decorativa. */
.hx-esq { border-radius: 6px; background: var(--border); opacity: .5; }
.hx-esq-linea { height: 11px; margin-bottom: 8px; }
.hx-esq-cifra { height: 26px; width: 62%; margin: 8px 0; }
@media (prefers-reduced-motion: no-preference) {
  .hx-esq { animation: hx-latido 1.5s ease-in-out infinite; }
  @keyframes hx-latido { 0%, 100% { opacity: .4; } 50% { opacity: .7; } }
}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════════════════════
   Cuatro tamaños, y en cada uno la pregunta es la misma: ¿sigue contestando «qué pasa hoy»
   sin hacer scroll para lo importante?

   ── LA PREGUNTA ESTABA MAL HECHA ───────────────────────────────────────────────────────

   Estas reglas preguntaban por el ancho de la VENTANA. La portada no ocupa la ventana: vive
   dentro de una caja que comparte el ancho con el menú lateral. Preguntar por la ventana es
   preguntarle a otro cuánto sitio tengo yo.

   Y hay un botón que angosta ese menú de 248px a 58. La portada ganaba 190px y NO SE
   ENTERABA, porque la ventana no había cambiado. MEDIDO el 23-08-2026, ventana 1100:

                        caja      tarjeta KPI
       menú ancho       771px     379px   (2 por fila)
       menú angosto     961px     230px   (4 por fila)

   Con reglas de ventana, la segunda fila no existía: la caja pasaba a 961px y la portada
   seguía poniendo dos KPI por fila, con 190px de aire al lado. El botón de angostar dejaba
   de servir para lo único que sirve.

   Los umbrales no son nuevos: son lo que medía la caja en cada uno de los cortes anteriores,
   así que con el menú ancho no cambia nada.

       ventana 1280 -> caja 951      ventana 900 -> caja 819      ventana 620 -> caja 539

   ── UNA COSA QUE PARECIA UN DEFECTO Y NO LO ERA ────────────────────────────────────────

   Cruzando los 1280, la tarjeta pasa de 307px a 228. Se persiguió un rato como si fuera un
   fallo —«ensanchar la ventana encoge las tarjetas»— y no lo es: debajo del corte caben TRES
   por fila y encima caben CUATRO. Es el punto de quiebre haciendo exactamente su trabajo, y
   cambiarlo habría sido cambiar a peor.  */

@supports (container-type: inline-size) {
  /*  `.hx` puede ser su propio contenedor porque las tres reglas de abajo tocan a sus HIJOS.
      Un elemento nunca responde a su propia consulta — de ahí que `gap`, que sí es suyo, se
      quede en la consulta de ventana de más abajo.  */
  .hx { container-type: inline-size; container-name: hx; }

  /*  Portátil: el panel de alertas baja a media fila, los KPI pasan de cuatro a tres. */
  @container hx (max-width: 950px) {
    .hx-col-3 { grid-column: span 4; }
    .hx-col-8 { grid-column: span 12; }
    .hx-col-4 { grid-column: span 6; }
  }
  /*  Tableta: dos KPI por fila. Tres en 768px dan 230px cada uno y la cifra se parte. */
  @container hx (max-width: 820px) {
    .hx-col-3, .hx-col-4, .hx-col-6 { grid-column: span 6; }
  }
  /*  Teléfono: una columna. Apilar es lo correcto — dos KPI de 170px obligan a acercar la
      pantalla para leer una cifra, que es justo lo que un KPI no puede pedir. */
  @container hx (max-width: 540px) {
    .hx-col-3, .hx-col-4, .hx-col-6, .hx-col-8 { grid-column: span 12; }
    .hx-topbar-der { margin-left: 0; width: 100%; }
    .hx-kpi-valor { font-size: 23px; }
  }
}

/*  ── LO QUE PASA EN UN NAVEGADOR SIN CONSULTAS DE CONTENEDOR ────────────────────────────
    Sin esto, las reglas de arriba se ignoran enteras y quedan doce columnas a cualquier
    ancho: en un teléfono, doce columnas de 26px. La portada no se vería mal, se vería rota.
    Así que ahí se conservan las reglas de ventana EXACTAMENTE como estaban — con su defecto
    incluido, que es preferible a la rotura.  */
@supports not (container-type: inline-size) {
  @media (max-width: 1280px) {
    .hx-col-3 { grid-column: span 4; }
    .hx-col-8 { grid-column: span 12; }
    .hx-col-4 { grid-column: span 6; }
  }
  @media (max-width: 900px) {
    .hx-col-3, .hx-col-4, .hx-col-6 { grid-column: span 6; }
  }
  @media (max-width: 620px) {
    .hx-col-3, .hx-col-4, .hx-col-6, .hx-col-8 { grid-column: span 12; }
    .hx-topbar-der { margin-left: 0; width: 100%; }
    .hx-kpi-valor { font-size: 23px; }
  }
}

/*  `gap` es del propio `.hx`, y un elemento no responde a su propia consulta de contenedor.
    Se queda en ventana, que para un hueco es suficiente: no decide cuántas columnas hay. */
@media (max-width: 620px) {
  .hx { gap: 12px; }
}

/*  ── LO QUE LA PORTADA REEMPLAZA ──────────────────────────────────────────────────────
    `display:none` en una CLASE y no el atributo `hidden`: el atributo lo aplica la hoja del
    navegador —la de menor prioridad— y cualquier `display` de la pagina lo vence. Ya paso
    tres veces en este producto; esta regla existe para que no pase una cuarta.  */
.hx-reemplazado { display: none !important; }