/* AURORA — Pantalla de inicio de "Consultar AURORA"
   ---------------------------------------------------------------------------
   Ocupa el hueco del chat mientras la conversación está sin estrenar: la red
   neuronal, el saludo y los accesos a las secciones orbitando alrededor. En
   cuanto hay mensajes desaparece y queda el chat de siempre.

   La red se dibuja en un <canvas> (static/js/inicio.js); aquí solo va el
   escenario y las tarjetas, que son DOM porque tienen que ser clicables y
   accesibles con el teclado. La posición de cada tarjeta la escribe el JS en
   su 'transform' — nada de 'left/top' por fotograma, para no forzar reflow.

   Dos modos: órbita (pantalla ancha) y 'compact' (estrecha), donde la red se
   queda pequeña arriba y los accesos pasan a una rejilla normal. */

  /* ── LA RED DE FONDO (con conversación abierta) ──
     Cuelga del panel del chat, por debajo de los mensajes y del cuadro de
     texto. No captura el ratón ni se desplaza con la conversación: es un fondo.
     El área de mensajes es transparente, así que la red se ve entre burbujas;
     las burbujas llevan su propio color y siguen legibles. */
  /* Pestañas que lucen la red: basta con colgarles un <canvas class="chat-bg">
     como primer hijo — goTab se encarga de engancharles el motor. Incidencias
     también la lleva; sus reglas van con el resto de su maquetado en aurora.css. */
  #tcon-chat, #tcon-manuales { position: relative; }
  #tcon-chat > .msgs, #tcon-chat > .inp-area,
  #tcon-manuales > .manual-bar, #tcon-manuales > #manual-upload-status,
  #tcon-manuales > .man-split { position: relative; z-index: 1; }
  /* La barra de manuales se destapa para que la red llegue al borde superior;
     sus controles llevan fondo propio, así que siguen legibles. El cuadro de
     texto de abajo se queda opaco, igual que en el chat. */
  #tcon-manuales > .manual-bar { background: transparent; }
  /* Módulos que lucen la red de fondo sin CSS a medida.
     El lienzo va en z-index 0 y POSICIONADO, así que el contenido en flujo
     normal quedaría DEBAJO: no basta con no tocarlo, hay que subirlo. Por eso
     todo hijo directo del tcon pasa a position:relative + z-index 1.
     Se exceptúa lo que ya se coloca solo: .inf2-toast va en position:fixed y
     forzarle relative lo dejaría clavado a mitad de página. */
  .tcon.con-fondo { position: relative; }
  .tcon.con-fondo > *:not(canvas.chat-bg):not(.inf2-toast) {
    position: relative; z-index: 1;
  }

  .chat-bg {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }


  /* ── LA CONVERSACIÓN VIVE DENTRO DE LA ESCENA ──────────────────────────
     Nada de ventanas. La pantalla de inicio se queda entera —red, accesos y
     puesta al día— y al escribir la primera pregunta se abre un margen a la
     derecha donde van los bocadillos, sueltos sobre el fondo. La red se estrecha
     y se recuesta a la izquierda para dejarles sitio; los accesos siguen
     orbitando y se pueden pulsar mientras se conversa.

        SIN ESTRENAR                    CONVERSANDO
        ┌────────────────────┐          ┌──────────────┬─────────┐
        │ parte   ( red )    │          │ parte ( red )│    ▭▭▭ │
        │      ( accesos )   │   ──▶    │   ( accesos )│ ▭▭▭▭   │
        │      saludo        │          │              │    ▭▭▭ │
        ├────────────────────┤          ├──────────────┴─────────┤
        │ [ escribe…       ] │          │ [ escribe…           ] │
        └────────────────────┘          └────────────────────────┘

     El cuadro de texto cruza las dos columnas: es de la pantalla, no del hilo.

     OJO con el selector: lleva .active a propósito. Sin él, este display
     ganaría por especificidad al .tcon{display:none} que esconde las pestañas y
     el chat se vería por debajo de cualquier otro módulo. */
  #tcon-chat.active { display: grid; }
  #tcon-chat {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  #tcon-chat.conversando {
    /* El hilo se lleva un tercio largo, con suelo y techo: por debajo de 300 px
       los bocadillos se parten en dos palabras por línea, y por encima de 560
       la línea se hace demasiado larga para leerla de un vistazo. */
    grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 560px);
  }
  /* La escena ocupa su columna entera y el cuadro de texto cruza las dos. */
  #tcon-chat > .chat-escena { min-width: 0; min-height: 0; display: flex; }
  #tcon-chat > .inp-area { grid-column: 1 / -1; }

  /* El hilo: nace sin existir y aparece con la primera pregunta. */
  #tcon-chat > .msgs { display: none; }
  #tcon-chat.conversando > .msgs {
    display: flex;
    background: none;              /* ni marco, ni fondo, ni sombra: aire */
    /* Aire desahogado a la derecha (el pico de tus bocadillos asoma 5 px) y
       casi ninguno a la izquierda: los de AURORA tienen que quedar cerca de la
       red, que es de donde salen. */
    padding: 16px 28px 10px 4px;
    gap: 4px;
  }
  /* Los bocadillos se apoyan abajo, junto al cuadro de texto, y solo suben
     cuando ya no caben. Con margin-top:auto en el primero y no con
     justify-content:flex-end, que en una caja que se desplaza deja el principio
     de la conversación fuera de alcance. */
  #tcon-chat.conversando > .msgs > .msg:first-child { margin-top: auto; }

  /* La red, más estrecha, se queda a la izquierda de su hueco en vez de
     centrarse: así el ojo va de AURORA a lo que dice, y no al revés. */
  #tcon-chat.conversando .hero { justify-content: center; }

  /* Por debajo de 1080 px no hay dos columnas que repartir: el hilo se queda
     con la pantalla y la escena se recoge. Es la única vez que se abandona el
     boceto, y es porque ahí no cabe. */
  @media (max-width: 1080px) {
    #tcon-chat.conversando { grid-template-columns: minmax(0, 1fr); }
    #tcon-chat.conversando > .chat-escena { display: none; }
    #tcon-chat.conversando > .msgs { padding: 16px 14px 10px; }
  }

  .hero {
    position: relative;   /* ancla del panel de Puesta al día, que va flotando al lado */
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 8px 4px;
    /* Lo que miden las @container de más abajo: el hueco real de la escena, que
       ya no es el de la ventana (la conversación le come la derecha). */
    container-type: inline-size;
    container-name: escena;
  }

  .hero-stage {
    position: relative;
    width: 100%; max-width: 980px;
    flex: 1 1 auto; min-height: 300px;
  }
  /* Con el parte y el aviso de pruebas flotando a los lados, la malla se
     recoge para no pasarles por encima: 320 px de guardia a cada lado. */
  @container escena (min-width: 1400px) {
    .hero:not(.compact) .hero-stage { max-width: min(980px, calc(100% - 640px)); }
  }
  .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* Aviso de que AURORA se equivoca. Va justo bajo la red y con el mismo aire
     que el resto: una pastilla tenue, no un cartel de advertencia. Decir "puede
     cometer errores" sin dar miedo es exactamente el tono que se busca — por eso
     ni rojo, ni triángulo, ni borde marcado. */
  .hero-aviso {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
    max-width: 620px; margin: 0 auto; padding: 7px 14px;
    font-size: 1.15rem; line-height: 1.4; text-align: left;
    color: var(--text2); background: var(--bg2);
    border: 1px solid var(--border); border-radius: 999px;
  }
  .hero-aviso i { font-size: 1.5rem; color: var(--blue); flex: none; }
  .hero-aviso b { color: var(--text1); font-weight: 600; }

  @media (max-width: 620px) {
    /* En estrecho, la píldora se parte fea: se deja como línea de texto. */
    .hero-aviso { border: none; background: none; padding: 4px 10px; text-align: center; }
  }

  /* Saludo: debajo de la red, fuera del escenario. Estuvo dentro y superpuesto,
     pero los nodos de la mitad inferior le caían encima. */
  .hero-greet { flex-shrink: 0; text-align: center; padding: 0 12px; }
  .hero-hello {
    font-size: 2.6rem; font-weight: 400; color: var(--text0);
    letter-spacing: -.01em; line-height: 1.25;
  }
  .hero-hello b { font-weight: 500; color: var(--blue); }
  .hero-ask { margin-top: 6px; font-size: 1.5rem; color: var(--text1); }
  .hero-temp {
    display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px;
    padding: 3px 9px; border-radius: 12px;
    background: var(--amber-bg); border: 1px solid var(--amber);
    color: var(--amber); font-size: 1.05rem;
  }

  /* Capa de accesos: no captura el ratón (para no tapar la red), solo las tarjetas. */
  .hero-cards { position: absolute; inset: 0; pointer-events: none; }

  /* Cada acceso es OTRO NODO de la red, no un botón: un punto de la malla que
     resulta que se puede pulsar. La caja del botón es solo el círculo (46px) —
     el rótulo va colgado debajo en absoluto — para que el cable que llega del
     núcleo pueda terminar justo en el borde del nodo. */
  /* El botón es solo la CAJA de posición (46px, el tamaño del nodo): su
     'transform' lo escribe el JS en cada fotograma, así que no puede llevar
     encima ningún efecto de CSS. Todo lo visible va en .hero-node-dot, que sí
     es libre de crecer al pasar el ratón. */
  .hero-node {
    position: absolute; left: 50%; top: 50%;
    width: 46px; height: 46px; padding: 0;
    background: none; border: none; cursor: pointer;
    pointer-events: auto; font-family: var(--font-ui);
  }
  .hero-node-dot {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bg1);
    border: 1px solid var(--blue-dim);
    box-shadow: 0 0 0 5px var(--blue-bg), 0 0 18px rgba(249,115,22,.16);
    transition: transform .16s, border-color .16s, box-shadow .16s, background .16s;
  }
  .hero-node-dot i { font-size: 1.9rem; color: var(--blue); line-height: 1; }
  .hero-node-lbl {
    position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: 1.15rem; color: var(--text1);
    text-shadow: 0 1px 3px var(--bg0), 0 0 8px var(--bg0);
    transition: color .16s;
  }
  .hero-node:hover .hero-node-dot, .hero-node:focus-visible .hero-node-dot {
    transform: scale(1.15);
    border-color: var(--blue); background: var(--blue-bg);
    box-shadow: 0 0 0 7px var(--blue-bg), 0 0 26px rgba(249,115,22,.34);
  }
  .hero-node:focus-visible { outline: none; }
  .hero-node:hover .hero-node-lbl, .hero-node:focus-visible .hero-node-lbl { color: var(--blue); }

  /* Tema claro: sobre blanco, el nodo necesita relleno propio y una sombra de
     verdad; si no, se pierde igual que se perdía la red. */
  :root[data-theme="light"] .hero-node-dot {
    background: #fff; border-color: var(--blue);
    box-shadow: 0 0 0 5px var(--blue-bg), 0 4px 14px rgba(31,41,55,.14);
  }
  :root[data-theme="light"] .hero-node-lbl {
    color: var(--text0); text-shadow: 0 1px 2px #fff, 0 0 6px #fff;
  }

  .hero-hint {
    flex-shrink: 0; font-size: 1.15rem; color: var(--text2); text-align: center;
    padding: 0 12px;
  }
  .hero-hint code {
    font-family: var(--font-mono); color: var(--text1);
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 5px; padding: 1px 5px;
  }

  /* ── PUESTA AL DÍA (parte de entrada) ──────────────────────────────
     SIN CAJA: ni borde, ni fondo, ni desenfoque. Solo tipografía sobre el negro,
     a la izquierda, en el hueco que deja la red. Es la tercera versión y las dos
     anteriores fallaban por lo mismo: centrada bajo el saludo le quitaba el sitio
     a la red, y en un panel de cristal a la derecha se le ponía encima. La red es
     lo que se viene a ver en esta pantalla; esto es una nota al margen.
     Si alguna vez vuelve a aparecer un borde aquí, se ha perdido el hilo.
     Ver static/js/parte.js. */
  .parte {
    width: min(290px, 100%);
    font-family: var(--font-mono);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .parte.visible { opacity: 1; transform: none; }
  .parte:empty   { display: none; }

  .parte-cab {
    margin-bottom: 10px;
    font-size: .92rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text2);
  }

  .parte-lineas { display: flex; flex-direction: column; }

  /* Cada línea es texto que resulta que se puede pulsar, no un botón: sin fondo
     ni borde ni en reposo ni al pasar por encima. Lo único que responde es el
     color y un desplazamiento mínimo. */
  .parte-linea {
    display: block; width: 100%;
    padding: 4px 0;
    border: none; background: none;
    color: var(--text1);
    font-family: inherit; font-size: 1.05rem; line-height: 1.45;
    text-align: left; cursor: pointer;
    transition: color .15s, transform .15s;
  }
  .parte-linea:hover:not([disabled]) { color: var(--text0); transform: translateX(3px); }
  .parte-linea[disabled] { cursor: default; }
  /* La cifra es el único color de todo el bloque (lo pone _parteResaltar). */
  .parte-linea b          { color: var(--blue); font-weight: 500; }
  .parte-linea.urgente b  { color: var(--red); }
  /* «Ninguna incidencia abierta» y compañía: son buenas noticias, así que se
     dicen más bajo. Sin color y un punto más apagadas que el resto, para que
     nunca compitan con una línea que sí pide algo. */
  .parte-linea.calma      { color: var(--text2); opacity: .8; }

  .parte-pie {
    margin-top: 10px;
    font-size: .9rem; color: var(--text2); opacity: .75;
  }
  /* El cursor es el MISMO del lema del login (.login-caret, en aurora.css):
     va saltando de línea en línea mientras se escribe y acaba parado aquí. */

  /* Flotando en el margen IZQUIERDO, fuera del escenario de la red.

     Se mide EL HUECO DE LA ESCENA y no la ventana del navegador (@container y
     no @media): desde que la conversación se abre a la derecha, la escena ya no
     ocupa toda la pantalla, y con una media query el parte seguía saltando al
     margen creyendo que tenía sitio — y se metía encima de la malla. Donde no
     cabe, vuelve al flujo bajo el saludo, como siempre. */
  @container escena (min-width: 1400px) {
    .hero:not(.compact) .parte {
      position: absolute;
      left: 20px;
      /* Centrado vertical por márgenes y NO con translateY(-50%): el transform
         está reservado para la entrada desde el lado. Mezclando los dos, al
         pasar a modo compacto el bloque se quedaba desplazado media altura
         porque la transición seguía peleándose con el centrado. */
      top: 0; bottom: 0;
      height: fit-content;
      margin: auto 0;
    }
  }

  /* ── GRACIAS POR PROBAR (solo clientes) ──
     Ventana tipo panel de instrumentos, al OTRO lado de la red. Aquí sí lleva
     marco, al contrario que el parte de entrada: no es una nota al margen, es un
     mensaje con remitente, y tiene que leerse como algo puesto ahí a propósito.

     NO lleva la clase .parte: la llevó, y heredaba su posición con 'left', que
     en un absoluto con anchura gana a 'right' — el bloque acababa en el lado
     contrario. Todo lo suyo se define aquí.

     Las esquinas no se recortan con clip-path porque eso se come el borde y deja
     el corte a hueso; se marcan con dos escuadras dibujadas encima, que es lo
     que da el aire de visor sin pelearse con el marco. */
  .hero-gracias {
    width: min(320px, 100%);
    position: relative;
    padding: 0;
    font-family: var(--font-mono);
    background:
      linear-gradient(160deg, var(--blue-bg) 0%, transparent 55%),
      var(--bg1);
    border: 1px solid var(--blue-dim);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 10px 30px rgba(0, 0, 0, .28);
    opacity: 0; transform: translateX(10px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .hero-gracias.visible { opacity: 1; transform: none; }

  /* Escuadras de las esquinas (arriba-izquierda y abajo-derecha). */
  .hero-gracias::before,
  .hero-gracias::after {
    content: ''; position: absolute; width: 14px; height: 14px;
    border: 2px solid var(--blue); pointer-events: none;
  }
  .hero-gracias::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
  .hero-gracias::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

  .hg-hdr {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, .12);
  }
  .hg-tit {
    font-size: 1.05rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .16em; color: var(--blue);
  }
  /* El filete que ya usan las cabeceras de sección del menú: ocupa lo que sobra
     y se desvanece. Misma familia visual, sin inventar nada nuevo. */
  .hg-hdr::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(to right, var(--blue), transparent 85%);
    opacity: .6;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-gracias { transition: none; }
  }

  .hg-body { padding: 12px 14px 14px; }
  .hg-body p {
    margin: 0 0 9px; font-size: 1.2rem; line-height: 1.5; color: var(--text1);
  }
  .hg-body p b { color: var(--text0); font-weight: 600; }
  .hg-cta {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 3px;
    padding: 6px 12px; cursor: pointer;
    font-family: inherit; font-size: 1.1rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--blue); background: none;
    border: 1px solid var(--blue-dim); border-radius: 0;
    transition: background .15s, border-color .15s, color .15s;
  }
  .hg-cta:hover { background: var(--blue-bg); border-color: var(--blue); }
  .hg-cta i { font-size: 1.3rem; }

  /* Igual que el parte de entrada, pero por el otro lado. */
  @container escena (min-width: 1400px) {
    .hero:not(.compact) .hero-gracias {
      position: absolute;
      right: 20px;
      left: auto;
      top: 0; bottom: 0;
      height: fit-content;
      margin: auto 0;
    }
  }

  /* ── MODO COMPACTO (pantallas estrechas o poco altas) ──
     Sin órbita: la red se queda arriba con altura fija y los accesos bajan a una
     rejilla. El JS deja de escribir 'transform' en las tarjetas en este modo. */
  .hero.compact .hero-stage {
    flex: 0 0 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 12px;
  }
  .hero.compact .hero-canvas { position: static; height: 140px; }
  /* En estrecho manda el saludo: primero quién eres, luego la red y los accesos. */
  .hero.compact .hero-greet { order: -1; }
  .hero.compact .hero-hello { font-size: 2.1rem; }
  .hero.compact .hero-cards {
    position: static;
    display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center;
    pointer-events: auto;
  }
  /* En compacto los nodos vuelven a la fila: el círculo con el rótulo al lado. */
  .hero.compact .hero-node {
    position: static; transform: none;
    width: auto; height: auto;
    display: flex; align-items: center; gap: 8px;
  }
  .hero.compact .hero-node-dot {
    position: static; width: 34px; height: 34px; flex-shrink: 0;
    box-shadow: none;
  }
  .hero.compact .hero-node-dot i { font-size: 1.6rem; }
  .hero.compact .hero-node-lbl {
    position: static; transform: none; text-shadow: none;
  }

  /* Sin animación para quien la haya desactivado en el sistema: el JS pinta un
     único fotograma y las tarjetas se quedan quietas (lo de arriba ya vale). */
  @media (prefers-reduced-motion: reduce) {
    .hero-node-dot, .hero-node-lbl { transition: none; }
  }