/*
  Los estilos de la consola, en un archivo y no en cada página.

  Son **dos pantallas separadas** —`entrar.html` e `index.html`— y comparten la
  marca, los colores y los botones. Duplicar los tokens en las dos es como se
  llega a dos consolas que no se parecen entre sí después del tercer cambio.

  Sigue sin haber compilación: una hoja de estilos y dos documentos.

  Los colores salen de los mismos tokens que el resto de la suite, para que se
  vea de la misma familia sin compartir código.
*/

/*
  **`hidden` tiene que ganarle a cualquier `display` que pongamos nosotros.**

  Esto estaba roto y se vio en la sala: `#patio` traía `display: grid` y la
  barra `display: flex`, y una regla de autor le gana al `[hidden]` del
  navegador, así que marcar `hidden` no ocultaba nada — quedaba el login arriba
  y la lista debajo, en la misma pantalla.
*/
[hidden] { display: none !important; }

  :root {
    --acento: #4db6ac; --acento-fuerte: #6ec6bd; --acento-suave: #06231f;
    --fondo: #0c1418; --superficie: #1c2b33; --superficie-alt: #0a1216;
    --borde: #2b3d47; --texto: #e6f4ef; --texto-tenue: #9ab3ab;
    --error: #ef9a9a; --error-suave: #3a1f20; --exito: #81c784; --aviso: #ffb74d;
    --radio: 8px; --radio-chico: 5px;
    --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;
    --fuente: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--fondo); color: var(--texto);
    font-family: var(--fuente); font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  .barra {
    display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap;
    padding: var(--esp-3) var(--esp-5);
    background: var(--superficie); border-bottom: 1px solid var(--borde);
  }
  .marca { display: flex; align-items: center; gap: var(--esp-2); }
  .marca img { width: 26px; height: 26px; display: block; }
  .marca strong { font-size: 1.05rem; }
  .marca span { color: var(--texto-tenue); border-left: 1px solid var(--borde); padding-left: var(--esp-2); }
  /* El AE en monoespaciada y destacado: es lo que decide qué ve esta consola,
     y cuando un turno no aparece es lo primero que hay que mirar.
     Lleva la palabra «AE» adelante porque sin ella es una sigla suelta: alguien
     la leyó como un código de error. */
  .aet {
    display: none; align-items: baseline; gap: var(--esp-2);
    font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600;
    background: var(--acento-suave); color: var(--acento-fuerte);
    border: 1px solid var(--acento); border-radius: var(--radio-chico);
    padding: 2px var(--esp-3);
  }
  /* Se muestra cuando tiene un valor de verdad. Antes arrancaba con «…» y se
     quedaba así en la pantalla de entrar —el dato lo sirve un endpoint con
     puerta—, y unos puntos suspensivos arriba de todo no explican nada. */
  .aet[data-listo] { display: inline-flex; }
  .aet i { font-style: normal; font-weight: 500; font-size: .72rem; opacity: .75; letter-spacing: .06em; }
  .salir {
    background: transparent; color: var(--texto-tenue); border-color: var(--borde);
    font-weight: 500;
  }
  .salir:hover:not(:disabled) { background: var(--superficie-alt); color: var(--texto); }
  .sello {
    margin-left: auto; font-size: 0.78rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--aviso);
    border: 1px solid var(--aviso); border-radius: 999px; padding: 2px var(--esp-3);
  }
  main { max-width: 900px; margin: 0 auto; padding: var(--esp-5) var(--esp-4) var(--esp-6); }
  h1 { font-size: 1.35rem; margin: 0 0 var(--esp-1); }
  .tenue { color: var(--texto-tenue); margin: 0 0 var(--esp-5); }
  .turno {
    display: grid; grid-template-columns: 4.5rem 1fr auto; gap: var(--esp-4);
    align-items: start; background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: var(--esp-4); margin-bottom: var(--esp-3);
  }
  .hora { font-size: 1.2rem; font-weight: 600; color: var(--acento-fuerte); font-variant-numeric: tabular-nums; }
  .turno h2 { font-size: 1rem; margin: 0 0 2px; }
  .linea { margin: 0; font-size: .85rem; color: var(--texto-tenue); }
  .orden { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }
  .chapa {
    display: inline-block; background: var(--acento-suave); color: var(--acento-fuerte);
    font-weight: 600; font-size: .74rem; border-radius: var(--radio-chico);
    padding: 1px 6px; margin-right: 2px;
  }
  button {
    font: inherit; font-weight: 600; border-radius: var(--radio-chico);
    padding: var(--esp-2) var(--esp-4); min-height: 2.25rem; cursor: pointer;
    background: var(--acento); color: #06231f; border: 1px solid var(--acento);
  }
  button:hover:not(:disabled) { background: var(--acento-fuerte); }
  button:disabled { opacity: .5; cursor: not-allowed; }
  .vacio, .aviso {
    border-radius: var(--radio); padding: var(--esp-5) var(--esp-4);
    text-align: center; color: var(--texto-tenue);
    background: var(--superficie); border: 1px dashed var(--borde);
  }
  .error {
    background: var(--error-suave); border: 1px solid var(--error); color: var(--texto);
    border-radius: var(--radio); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4);
    text-align: left;
  }
  .error p { margin: var(--esp-2) 0 0; font-size: .85rem; color: var(--texto-tenue); }
  .hecho {
    background: var(--acento-suave); border: 1px solid var(--acento); color: var(--texto);
    border-radius: var(--radio); padding: var(--esp-3) var(--esp-4); margin-bottom: var(--esp-4);
    text-align: left;
  }
  .hecho code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }
  :where(button):focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
  @media (max-width: 640px) {
    .turno { grid-template-columns: 1fr; }
  }
  /* La pantalla de entrar ocupa el alto completo y **no muestra la barra**.
     Antes la barra estaba arriba con la marca, el AE en puntos suspensivos y el
     sello, así que entrar parecía un paso dentro de la consola en vez de la
     puerta de la consola. */
  #patio { min-height: 100dvh; display: grid; place-items: center; padding: var(--esp-5) var(--esp-4); }
  .tarjeta-entrar {
    width: 100%; max-width: 22rem; background: var(--superficie);
    border: 1px solid var(--borde); border-top: 3px solid var(--acento);
    border-radius: var(--radio); padding: var(--esp-6) var(--esp-5);
    display: flex; flex-direction: column; gap: var(--esp-3);
  }
  .tarjeta-entrar .cabecera {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--esp-2); text-align: center; margin-bottom: var(--esp-3);
  }
  .tarjeta-entrar .cabecera img { width: 46px; height: 46px; }
  .tarjeta-entrar .cabecera .nombre { font-size: 1.15rem; font-weight: 600; }
  .tarjeta-entrar .cabecera .que-es { color: var(--texto-tenue); font-size: .9rem; }
  /* El sello acompaña a la marca en las dos pantallas: quien se para frente a
     esto tiene que saber que no es un equipo real antes de apretar nada. */
  .tarjeta-entrar .cabecera .sello { margin: var(--esp-1) 0 0; }
  .tarjeta-entrar label { display: flex; flex-direction: column; gap: var(--esp-1); font-size: .85rem; color: var(--texto-tenue); }
  .tarjeta-entrar input {
    font: inherit; color: var(--texto); background: var(--superficie);
    border: 1px solid var(--borde); border-radius: var(--radio-chico);
    padding: var(--esp-2) var(--esp-3); min-height: 2.25rem;
  }