/* ARCHIVO GENERADO — NO EDITAR.
 *
 * Copia de www/paquetes/panel-ui/estilos/armazon.css, que es donde se cambia.
 * Editar aquí crea una segunda verdad que el próximo `node herramientas/sincronizar-sistema.mjs`
 * borra sin avisar.
 *
 * Aquí vive la FORMA: la cabecera oscura, la disposición de 1280 px, la caja,
 * la fila y el título de página. Es lo que hace que la portada y el panel se
 * lean como la misma casa y no como dos aplicaciones parecidas.
 *
 * Va TRADUCIDO: los nombres de Tailwind (`--color-panel`) se han cambiado por
 * los de la paleta (`--skj-panel`), porque los primeros los declara un bloque
 * `@theme` que el navegador se salta. El diccionario se lee de tokens.css.
 *
 * Se regenera con:  node herramientas/sincronizar-sistema.mjs
 */
/**
 * @skj/panel-ui · la forma del armazón.
 *
 * Los cinco componentes de `armazon/` no llevan clases de Tailwind escritas
 * dentro: llevan estas. Dos motivos concretos:
 *
 *  · Tailwind v4 no escanea `node_modules`. Un armazón hecho de utilitarios
 *    saldría SIN ESTILO en cuanto un proyecto olvidara su `@source`, y el fallo
 *    no da error: se ve una página en blanco y negro y nadie sabe por qué.
 *  · Los tres anchos son UNA decisión. Aquí se leen los cinco valores que la
 *    forman de una sentada; repartidos en `className` de cinco archivos, no.
 *
 * Va en `@layer components` para que cualquier utilitario que el proyecto
 * escriba en su propia pantalla —un `mt-4`, un `max-w-3xl`— siga ganando: las
 * utilidades de Tailwind viven en una capa posterior.
 *
 * Los cortes son 768 px y 1024 px, los de la especificación. Se comprueba a
 * 320, 390, 768, 1024 y 1440.
 */

@layer components {
  /* ── Cabecera ───────────────────────────────────────────────────────────
     Alto fijo y no derivado del contenido: si creciera un píxel por un nombre
     largo, el lateral pegado debajo perdería su última entrada. */
  .armazon-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--skj-armazon-cabecera-alto);
    padding: 8px 16px;
    background: var(--skj-cabecera);
    color: var(--skj-cabecera-tinta);
    border-bottom: 1px solid var(--skj-cabecera-borde);
  }

  .armazon-cabecera__marca {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 600;
  }

  /* El logotipo mide lo mismo en las tres pantallas y lo dice el armazón, no
     cada proyecto: es lo primero que se mira al cambiar de una a otra, y dos
     copias de esta medida es como acaban midiendo 20 y 24. La imagen la reparte
     el propio paquete (`@skj/panel-ui/img/`). */
  .armazon-cabecera__marca img {
    display: block;
    width: 20px;
    height: 20px;
  }

  /* El contexto se trunca en vez de envolver: con dos líneas la cabecera crece
     y arrastra al lateral, que se cuelga de su alto. */
  .armazon-cabecera__contexto {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--skj-cabecera-tenue);
  }

  .armazon-cabecera__contexto > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* El grupo se va por debajo de 768 px: a esa anchura, mantener "Gestión ·
     Personas" deja truncado justo el nombre de la pantalla, que es el dato. */
  .armazon-cabecera__grupo {
    display: none;
  }

  .armazon-cabecera__pantalla {
    font-weight: 600;
    color: var(--skj-cabecera-tinta);
  }

  .armazon-cabecera__derecha {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* ── Disposición ────────────────────────────────────────────────────────
     Móvil y tableta: una columna, el lateral arriba como tira. Escritorio: dos
     columnas con el lateral fijo. */
  .armazon-disposicion {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    /* `width: 100%` con `margin-inline: auto` parece redundante y no lo es: los
       tres paneles cuelgan esta rejilla de un contenedor `flex-direction:
       column`, y ahí un margen automático en el eje transversal DESACTIVA el
       estirado. Sin esta línea la disposición medía lo que midiera su contenido
       —885 px de los 1280 declarados, medido en el panel— y la página salía
       descentrada y estrecha sin que nada diera error. */
    width: 100%;
    max-width: var(--skj-armazon-ancho);
    margin-inline: auto;
    padding: 16px;
  }

  /* `min-width: 0` es lo que impide que una tabla ancha o un identificador sin
     espacios empujen la maqueta y saquen la barra horizontal en TODA la
     página. Por defecto una celda de grid no se encoge por debajo de su
     contenido. Es el fallo que más se cuela a 320 px. */
  .armazon-disposicion__contenido {
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* 12 px entre cajas y no 16: en una pantalla con cuatro cajas eso son 16 px
       recuperados, y el borde de cada caja ya las separa de sobra. La densidad
       de un panel de gestión se gana así —en los huecos que se repiten—, no
       apretando el texto, que es lo que hay que leer. */
    gap: 12px;
  }

  /* ── Lateral ────────────────────────────────────────────────────────────
     Por debajo de 1024 px no es una columna: es una tira que se desliza. Una
     lista vertical de seis grupos empujaría la pantalla entera hacia abajo y
     habría que hacer scroll para llegar a lo que se venía a ver. */
  .armazon-lateral {
    min-width: 0;
  }

  .armazon-lateral__nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--skj-borde) transparent;
  }

  .armazon-lateral__grupo {
    display: contents;
  }

  /* En la tira, los títulos de grupo estorbarían: se quedan para quien navega
     con lector de pantalla, que sí necesita saber dónde empieza cada bloque. */
  .armazon-lateral__titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .armazon-entrada {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--skj-radio-pieza);
    background: none;
    color: var(--skj-tinta);
    font: inherit;
    font-size: 14px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .armazon-entrada:hover {
    background: var(--skj-realce);
    text-decoration: none;
  }

  /* El foco se ve SIEMPRE, y lo declara el armazón en vez de confiarlo al
     proyecto: el menú es lo primero que se recorre con el tabulador, y un panel
     que lo pierde deja a quien navega con teclado sin saber dónde está.
     `outline-offset` negativo para que no lo recorte la tira al desplazarse. */
  .armazon-entrada:focus-visible {
    outline: 2px solid var(--skj-marca);
    outline-offset: -2px;
  }

  /* La entrada activa no se distingue SOLO por el fondo: lleva borde y negrita.
     En un monitor lavado —los del mostrador lo están— un fondo tenue no se ve. */
  .armazon-entrada[aria-current='page'] {
    background: var(--skj-marca-suave);
    border-color: var(--skj-borde);
    color: var(--skj-marca);
    font-weight: 600;
  }

  .armazon-entrada__icono {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--skj-tenue);
  }

  .armazon-entrada[aria-current='page'] .armazon-entrada__icono {
    color: var(--skj-marca);
  }

  .armazon-entrada__cuenta {
    margin-left: auto;
    padding: 0 6px;
    border: 1px solid var(--skj-borde);
    border-radius: var(--skj-radio-pieza);
    background: var(--skj-lienzo);
    color: var(--skj-tenue);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }

  /* ── Título de página ───────────────────────────────────────────────────
     La línea de debajo es lo que separa "de qué va esta pantalla" de "qué hay
     en ella", sin gastar una tarjeta ni una sombra. */
  .armazon-titulo {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--skj-borde);
  }

  .armazon-titulo__texto {
    min-width: 0;
    flex: 1 1 auto;
  }

  .armazon-titulo__texto h1 {
    margin: 0;
    color: var(--skj-marca);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
  }

  /* `max-width` en `ch` y no en píxeles: lo que se acota es la MEDIDA de
     lectura —cuántos caracteres caben en una línea—, y eso no cambia si mañana
     el panel se ensancha. Sin esto, en una ventana de 1 500 px una línea de
     ayuda sale de 160 caracteres y el ojo pierde el renglón al volver. Los
     datos sí ocupan todo el ancho: ahí se compara en columna, no se lee. */
  .armazon-titulo__sub {
    margin: 4px 0 0;
    max-width: 90ch;
    color: var(--skj-tenue);
    font-size: 13px;
  }

  .armazon-titulo__acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* ── Caja ───────────────────────────────────────────────────────────────
     Borde y nada más. Sin sombra: aquí cada píxel de adorno es ruido encima de
     un dato que hay que leer de un vistazo. */
  .armazon-caja {
    border: var(--skj-borde-grosor) solid var(--skj-borde);
    border-radius: var(--skj-radio-caja);
    background: var(--skj-panel);
    box-shadow: var(--skj-sombra-suave); /* la más suave; el porqué, en «Profundidad» de paleta.css */
  }

  /* Sin `overflow: hidden` desde el 2026-08-22: recortaba la burbuja de `Pista`,
     que nace pegada a este borde. Tapaba el fondo de la cabecera en las esquinas
     y de eso se ocupa ahora ella misma; si algo asoma, se redondea esa pieza. */
  .armazon-caja__cabecera {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--skj-lienzo);
    border-bottom: 1px solid var(--skj-borde);
  }

  /* 1 px menos: el radio interior de un borde no es el exterior. */
  .armazon-caja__cabecera:first-child {
    border-radius: calc(var(--skj-radio-caja) - 1px) calc(var(--skj-radio-caja) - 1px) 0 0;
  }

  .armazon-caja__titulo {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
  }

  .armazon-caja__resumen {
    margin-left: auto;
    color: var(--skj-tenue);
    font-size: 12px;
  }

  .armazon-caja__nota {
    padding: 8px 16px 0;
    max-width: 90ch;
    color: var(--skj-tenue);
    font-size: 12px;
  }

  /* ── Fila ───────────────────────────────────────────────────────────────
     La línea de 1 px va ARRIBA y no abajo: así la última fila no deja una línea
     colgando contra el borde de la caja, y la primera no dobla la línea de la
     cabecera. */
  .armazon-fila {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--skj-borde);
  }

  .armazon-caja__cabecera + .armazon-fila,
  .armazon-caja__nota + .armazon-fila,
  .armazon-fila:first-child {
    border-top: 0;
  }

  .armazon-fila__texto {
    min-width: 0;
    flex: 1 1 auto;
    /* Los correos, las URL y los identificadores son las cadenas largas sin
       espacios de estos paneles: sin esto rompen la fila a 320 px. */
    overflow-wrap: anywhere;
  }

  .armazon-fila__nombre {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
  }

  .armazon-fila__meta,
  .armazon-fila__ayuda {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
    color: var(--skj-tenue);
    font-size: 12px;
  }

  .armazon-fila__acciones {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
  }

  /* ── Estado ─────────────────────────────────────────────────────────────
     Punto Y palabra, nunca solo el punto: hay daltonismo, y a 12 px un punto de
     8 px no se distingue de una mota de polvo en la pantalla. */
  .armazon-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--skj-tenue);
  }

  .armazon-estado__punto {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--skj-debil);
  }

  .armazon-estado--ok {
    color: var(--skj-ok);
  }
  .armazon-estado--ok .armazon-estado__punto {
    background: var(--skj-ok);
  }

  .armazon-estado--espera {
    color: var(--skj-espera);
  }
  .armazon-estado--espera .armazon-estado__punto {
    background: var(--skj-espera);
    animation: armazon-latir 1.2s ease-in-out infinite;
  }

  .armazon-estado--mal {
    color: var(--skj-mal);
  }
  .armazon-estado--mal .armazon-estado__punto {
    background: var(--skj-mal);
  }

  .armazon-estado--info {
    color: var(--skj-info);
  }
  .armazon-estado--info .armazon-estado__punto {
    background: var(--skj-info);
  }

  /* ── Objetivos táctiles ─────────────────────────────────────────────────
     Vale para cualquier boton que se meta en esas dos zonas, sea de quien sea.
     El token pregunta por el PUNTERO y no por el ancho: ver paleta.css. */
  .armazon-fila__acciones > *,
  .armazon-titulo__acciones > * {
    min-height: var(--skj-boton-alto);
  }
  @media (pointer: coarse) {
    .armazon-fila__acciones > *,
    .armazon-titulo__acciones > * {
      min-height: var(--skj-boton-alto-tactil);
    }
  }

  /* ── Tableta ────────────────────────────────────────────────────────────*/
  @media (min-width: 768px) {
    .armazon-cabecera__grupo {
      display: inline;
    }

    /* Los 48 px de abajo eran aire por debajo de lo último que hay en la
       página: separaban el contenido del borde de la ventana, que no es algo de
       lo que haya que separarse. 32 bastan para que la última fila no quede
       pegada al canto. */
    .armazon-disposicion {
      padding: 20px 20px 32px;
    }

  }

  /* ── Escritorio ─────────────────────────────────────────────────────────
     Ya en columna. Pegada arriba porque la lista de una pantalla suele ser más
     larga que el propio menú, y sin `sticky` hay que subir del todo para
     cambiar de sección. */
  @media (min-width: 1024px) {
    /* 24 px de separación y no 32: son 8 px que se van enteros a la tabla, que
       es lo que aquí se viene a leer. El lateral ya está separado por su propio
       borde de entrada activa y no necesita un pasillo. */
    .armazon-disposicion {
      grid-template-columns: var(--skj-armazon-lateral) minmax(0, 1fr);
      gap: 24px;
    }

    .armazon-lateral {
      position: sticky;
      top: 24px;
      align-self: start;
    }

    .armazon-lateral__nav {
      flex-direction: column;
      gap: 2px;
      overflow: visible;
      padding-bottom: 0;
    }

    /* 8 px y no 12: el plegador añade su propio relleno, y con la separación de
       antes el menú desplegado salía 24 px MÁS alto que cuando no se plegaba.
       Una mejora que empeora el caso por defecto no es una mejora. */
    .armazon-lateral__grupo { display: block; margin-bottom: 8px; }

    /* Un grupo cerrado es una línea: separarlo lo mismo que a un bloque de siete
       entradas deja el menú lleno de huecos. */
    .armazon-lateral__grupo[data-plegado='si'] { margin-bottom: 2px; }

    .armazon-lateral__grupo[data-plegado='si'] .armazon-entrada { display: none; }

    /* Deshace el ocultado de la tira: aqui el titulo se ve. */
    .armazon-lateral__titulo {
      position: static;
      width: auto;
      height: auto;
      margin: 0 0 4px;
      padding: 0;
      clip-path: none;
    }

    /* El plegador ocupa la fila entera: se apunta al nombre del módulo, que es
       lo que se está mirando, no a un triángulo de 12 px. */
    .armazon-lateral__plegador {
      display: flex;
      align-items: center;
      gap: 4px;
      width: 100%;
      padding: 3px 8px;
      border: 0;
      border-radius: var(--skj-radio-pieza);
      background: none;
      color: var(--skj-tenue);
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-align: left;
      text-transform: uppercase;
      cursor: pointer;
    }

    .armazon-lateral__plegador:hover { background: var(--skj-realce); color: var(--skj-tinta); }

    .armazon-lateral__plegador:focus-visible { outline: 2px solid var(--skj-marca); outline-offset: -2px; }

    .armazon-lateral__chevron { flex: none; width: 13px; height: 13px; transition: transform 0.15s ease; }

    /* Abajo abierto, a la derecha cerrado: la convención de cualquier árbol de
       carpetas, y esto es un árbol de carpetas. */
    .armazon-lateral__grupo[data-plegado='si'] .armazon-lateral__chevron { transform: rotate(-90deg); }

    .armazon-lateral__rotulo {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Cuántas secciones esconde un grupo cerrado. Ancho mínimo en `em`: escala
       con la letra, y no dispara el guardia que caza anchos en px fuera de
       768/1024 (no distingue un `min-width` de elemento de uno de `@media`). */
    .armazon-lateral__cuantas {
      flex: none;
      min-width: 1.6em;
      padding: 0 4px;
      border-radius: var(--skj-radio-pieza);
      background: var(--skj-realce);
      color: var(--skj-tenue);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0;
      text-align: center;
    }

    /* «Estás aquí dentro». El mismo azul que marca la entrada activa: son la
       misma información a dos niveles de detalle. */
    .armazon-lateral__aqui { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--skj-marca); }
    .armazon-entrada {
      width: 100%;
    }

    .armazon-fila__acciones > *,
    .armazon-titulo__acciones > * {
      min-height: 32px;
    }
  }

  /* Por debajo de 768 px las acciones bajan a su propia línea y se reparten el
     ancho: apretadas contra el borde derecho no se aciertan con el pulgar. */
  @media (max-width: 767px) {
    .armazon-fila {
      flex-wrap: wrap;
    }

    .armazon-fila__acciones {
      width: 100%;
    }

    .armazon-fila__acciones > * {
      flex: 1 1 auto;
    }

    /* La entrada del menú es el objetivo que más se pulsa de todo el panel, y sin
       esto medía 35 px: 21 de caja de línea (1.5 × 14 px) + 12 de relleno + 2 de
       borde. Va en píxeles y no en `rem` a propósito — la raíz de estos paneles
       está en 14 px, así que `min-h-11` de Tailwind da 38,5 px y no los 44 que
       promete su nombre. Aquí se dice el número que se quiere. */
    .armazon-entrada {
      min-height: 44px;
    }
  }
}

@keyframes armazon-latir {
  50% {
    opacity: 0.25;
  }
}

/* El punto que late es decorativo: informa el color y la palabra de al lado.
   Se para sin perder nada. */
@media (prefers-reduced-motion: reduce) {
  .armazon-estado__punto {
    animation: none;
  }
}