/* ==========================================================================
   Don Héctor — capa de aspecto.
   ==========================================================================
   Va DESPUÉS de styles.css (y después de inicio.css en la pantalla de entrada)
   y solo repinta: color, luz, tipografía y el comportamiento de la hoja del
   teléfono. El layout de escritorio sigue siendo de styles.css.

   LA IDEA — "la lámpara del escritorio".
   Don Héctor fue una persona real que trabajaba en una oficina. Esto no es una
   nave: es su escritorio de noche. La pantalla es tinta azul fría y la luz es
   CÁLIDA y viene de un punto, como una lámpara encendida sobre papeles. Esa
   inversión — luz cálida en vez de neón frío — es lo que separa esto de la
   pantalla de ciencia ficción que se ve en todas partes.

   Por eso NO hay aquí: cian sobre negro, líneas de barrido, esquinas de visor,
   rótulos en mayúsculas con tracking, corchetes decorativos, ni monoespaciada
   como disfraz. La monoespaciada aparece solo donde de verdad hay una ruta de
   archivo o un bloque de código.

   El futurismo está en que la luz responde: respira, se calienta cuando habla
   y el texto se escribe solo. No en el cromado.
   ========================================================================== */

:root {
  /* Tinta azul, no un negro teñido. Que se lea como un color. */
  --fondo: #121724;
  --fondo-2: #1A2133;
  --fondo-3: #232C42;

  /* Las superficies son cálidas sobre un fondo frío: es lo que hace que un
     panel parezca papel iluminado y no un cristal más. */
  --superficie: rgba(255, 240, 214, 0.035);
  --superficie-alta: rgba(255, 240, 214, 0.075);
  --borde: rgba(255, 236, 205, 0.10);
  --borde-fuerte: rgba(240, 180, 75, 0.45);

  --texto: #ECE6DA;          /* blanco de papel, no blanco de pantalla */
  --texto-medio: #A8A294;
  --tenue: #7B7566;
  --etiqueta: #8A8375;

  /* La luz de la lámpara. Un solo acento, y manda. */
  --acento: #F0B44B;
  --acento-claro: #FFD98A;
  --acento-hondo: rgba(240, 180, 75, 0.16);

  --vivo: #58C39A;           /* conectado, hecho, enviado */
  --alerta: #E2503F;

  --radio: 10px;
  --radio-chico: 7px;

  /* Tipos de nodo: terrosos y apagados, no neón. Se distinguen entre sí sin
     que ninguno grite. Los mismos valores están en ui/graph.js (COLORES). */
  --tipo-nota: #E8E2D4;
  --tipo-empleado: #7FB6D9;
  --tipo-cliente: #58C39A;
  --tipo-proveedor: #F0B44B;
  --tipo-factura: #E2856F;
  --tipo-contrato: #A99BE0;
  --tipo-empresa: #63C6C0;
  --tipo-soporte: #8E8878;

  --sans: "Segoe UI Variable Text", "Segoe UI", Inter, -apple-system,
          system-ui, sans-serif;
  --mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
}

/* ==========================================================================
   Fondo
   ==========================================================================
   Dos focos cálidos arriba y a la izquierda, y la tinta oscureciéndose hacia
   abajo. Nada más: el polvo que flota en la luz lo dibuja futuro.js. */

html, body {
  font-family: var(--sans);
  background:
    radial-gradient(1200px 780px at 22% -12%, rgba(240, 180, 75, 0.13), transparent 58%),
    radial-gradient(760px 620px at 88% 12%, rgba(255, 217, 138, 0.055), transparent 62%),
    linear-gradient(172deg, var(--fondo-2), var(--fondo) 55%, #0E121C);
}

#lienzo { z-index: 1; }

/* Las dos capas que crea futuro.js. Ni una recibe un clic. */
#polvo, #vineta { position: fixed; inset: 0; pointer-events: none; }
#polvo  { z-index: 0; }
#vineta {
  z-index: 41;
  background: radial-gradient(128% 108% at 26% 0%, transparent 46%, rgba(6, 9, 16, 0.72) 100%);
}

/* ==========================================================================
   Tipografía
   ==========================================================================
   Un solo tipo. La jerarquía sale del tamaño, del peso y del color — no de
   poner cosas en mayúsculas. Los rótulos en versalitas con tracking eran el
   disfraz que hacía que esto pareciera un tablero de nave. */

.etiqueta {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--etiqueta);
}

/* Las cifras alineadas: en una columna de contadores, cifras de ancho variable
   bailan de renglón a renglón. */
#hubs .fila .n, #filtros .fila .n, #cola-n, .usuario .cuenta,
#subidos .doc .peso {
  font-variant-numeric: tabular-nums;
}

/* Monoespaciada SOLO donde de verdad hay una ruta o un bloque de código. */
#ins-meta, #tarjeta pre, #tareas code {
  font-family: var(--mono);
}
#pregunta, #estado-voz, #marca .nombre, .insignia, label, #ayuda {
  font-family: var(--sans);
}

#marca .nombre {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--texto);
}
#marca .punto {
  background: var(--acento);
  box-shadow: 0 0 9px rgba(240, 180, 75, 0.75);
}

#estado-voz {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  color: var(--tenue);
}

#ayuda { color: #6A6456; letter-spacing: 0; }

/* ==========================================================================
   Paneles
   ==========================================================================
   Papel iluminado: un poco más claro arriba que abajo, borde de un pelo y una
   sombra que los separa del fondo. Sin marcos, sin escuadras. */

.panel, #izquierda > section, #caja {
  background:
    linear-gradient(180deg, rgba(255, 240, 214, 0.052), rgba(255, 240, 214, 0.016)),
    rgba(18, 23, 36, 0.82);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 14px 40px rgba(4, 7, 14, 0.5),
              inset 0 1px 0 rgba(255, 240, 214, 0.07);
}

#izquierda {
  background: none; border: none; box-shadow: none; backdrop-filter: none;
}

/* La barra de abajo es un contenedor transparente, no una caja: lo que se ve
   es la píldora de la pregunta. */
#abajo { background: none; border: none; box-shadow: none; backdrop-filter: none; }

/* ==========================================================================
   Controles
   ========================================================================== */

#barra-pregunta {
  background: rgba(20, 26, 40, 0.86);
  border: 1px solid var(--borde);
  box-shadow: 0 10px 30px rgba(4, 7, 14, 0.45);
}
#barra-pregunta:focus-within {
  border-color: var(--borde-fuerte);
  box-shadow: 0 10px 30px rgba(4, 7, 14, 0.45), 0 0 0 3px rgba(240, 180, 75, 0.12);
}
#pregunta { color: var(--texto); caret-color: var(--acento); }
#pregunta::placeholder { color: #6A6456; font-style: normal; }

.boton {
  border-radius: var(--radio-chico);
  border-color: var(--borde);
  color: var(--texto-medio);
  background: var(--superficie);
  transition: color .15s, border-color .15s, background .15s;
}
.boton:hover { color: var(--texto); border-color: rgba(255, 236, 205, 0.2); }
.boton.activo, #btn-enviar.listo { color: var(--acento); border-color: var(--borde-fuerte); }

/* El foco de teclado tiene que verse siempre y no puede depender del color que
   ponga el navegador por su cuenta. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

.insignia {
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10.5px;
  color: var(--acento);
  background: var(--acento-hondo);
  border-color: rgba(240, 180, 75, 0.26);
}
.insignia.gris { color: var(--tenue); background: var(--superficie); border-color: var(--borde); }
.insignia.roja {
  color: var(--alerta); background: rgba(226, 80, 63, 0.13);
  border-color: rgba(226, 80, 63, 0.32);
}

#niveles span { background: var(--acento); }

#filtros .fila:hover, #hubs .fila:hover, #vecinos div:hover { color: var(--texto); }
.bolita { box-shadow: 0 0 7px currentColor; }

/* ==========================================================================
   La respuesta
   ========================================================================== */

#resp-etiqueta { color: var(--etiqueta); }
#dicho { font-size: 13.5px; line-height: 1.62; color: var(--texto); }
#dicho .cursor-maquina {
  display: inline-block; width: 7px; height: 1.02em;
  margin-left: 2px; vertical-align: -0.14em;
  background: var(--acento);
  animation: parpadeo-cursor .78s steps(1) infinite;
}
@keyframes parpadeo-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

#subtitulo { color: var(--texto-medio); font-style: normal; }
#tarjeta h3 { color: var(--texto); font-weight: 600; }
/* Sin tarjeta no hay raya: el borde de arriba dejaba un renglon suelto debajo
   de cada respuesta que no traia datos. */
#tarjeta:empty { display: none; }
#tarjeta .item { border-bottom-color: var(--borde); }
#onda span { background: var(--acento); }
/* `#onda { display: flex }` de styles.css gana sobre el atributo `hidden`, así
   que las barras se quedaban encendidas para siempre. */
#onda[hidden] { display: none; }

/* ==========================================================================
   Mientras habla
   ==========================================================================
   Miguel lo pidió: que vibre. Vibra la sala, no lo que estás leyendo — un
   temblor de 1 px sobre el fondo y la viñeta, con los paneles y el texto
   quietos. Mover el texto marea, y esta pantalla se mira jornadas enteras. */

body.hablando::after {
  box-shadow: inset 0 0 0 1px rgba(240, 180, 75, .30),
              inset 0 0 70px rgba(240, 180, 75, .12);
}
body.hablando #vineta { animation: vibrar 0.15s linear infinite; }
body.hablando #polvo  { animation: vibrar 0.12s linear infinite reverse; }

@keyframes vibrar {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-0.7px, 0.4px, 0); }
  50%  { transform: translate3d(0.5px, -0.6px, 0); }
  75%  { transform: translate3d(-0.3px, -0.4px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

body.hablando #respuesta {
  border-color: rgba(240, 180, 75, 0.4);
  animation: respira 1.9s ease-in-out infinite;
}
@keyframes respira {
  0%, 100% { box-shadow: 0 14px 40px rgba(4, 7, 14, .5); }
  50%      { box-shadow: 0 14px 40px rgba(4, 7, 14, .5), 0 0 34px rgba(240, 180, 75, .18); }
}

/* Pensando: la píldora de la pregunta se calienta y se enfría. Es la única
   señal de "sigo trabajando" que se ve sin mirar el reactor. */
body.pensando #barra-pregunta { animation: pensando 1.5s ease-in-out infinite; }
@keyframes pensando {
  0%, 100% { border-color: var(--borde); }
  50%      { border-color: rgba(240, 180, 75, .42); }
}

/* ==========================================================================
   Formularios y pantalla de entrada
   ========================================================================== */

.mini-form input, #bienvenida textarea, #bienvenida input[type="text"],
input[type="text"], input[type="password"], input:not([type]), textarea, select {
  background: rgba(12, 16, 26, 0.7);
  border-color: var(--borde);
  color: var(--texto);
  border-radius: var(--radio-chico);
  font-family: var(--sans);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--borde-fuerte);
  box-shadow: 0 0 0 3px rgba(240, 180, 75, 0.12);
}

.mini-form button, .boton-conectar, #bienvenida button, .pendiente button, button {
  border-radius: var(--radio-chico);
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  background: var(--acento-hondo);
  color: var(--acento-claro);
  border: 1px solid rgba(240, 180, 75, 0.3);
}
.mini-form button:hover, .boton-conectar:hover, #bienvenida button:hover,
.pendiente button:hover, button:hover {
  background: rgba(240, 180, 75, 0.24);
  color: #FFF0CE;
}
.pendiente button.enviar {
  color: var(--vivo); border-color: rgba(88, 195, 154, 0.35);
  background: rgba(88, 195, 154, 0.12);
}
#atras { background: var(--superficie); color: var(--texto-medio); border-color: var(--borde); }
.punto-paso.activo { background: var(--acento); box-shadow: none; }

/* Los iconos de la barra no son botones de formulario: la regla `button` de
   arriba es ancha a propósito, y aquí se les devuelve lo suyo. */
.boton, #btn-enviar {
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--texto-medio);
}
#btn-enviar { background: none; border: none; }

#soltar { border-color: rgba(255, 236, 205, 0.16); border-radius: var(--radio); }
#soltar:hover { border-color: var(--borde-fuerte); }
#soltar.encima { border-color: var(--acento); background: var(--acento-hondo); }
#lienzo.soltando { outline-color: var(--acento); }

#bienvenida .panel-bv, #caja { border-radius: var(--radio); }
#bienvenida .op.elegida, .opcion:has(input:checked) { border-color: var(--borde-fuerte); }
#bienvenida .op input, .opcion input { accent-color: var(--acento); }
#bienvenida button.principal {
  background: var(--acento); border-color: var(--acento); color: #1A1305;
  font-weight: 600;
}
#bienvenida button.principal:hover { background: var(--acento-claro); color: #1A1305; }

#reactor { filter: drop-shadow(0 0 10px rgba(240, 180, 75, 0.3)); }

/* ==========================================================================
   ==========================================================================
   TELÉFONO
   ==========================================================================
   ==========================================================================

   Lo que había: una hoja con dos posiciones, cinco pestañas de texto en un
   carrusel horizontal y la caja de escribir metida DENTRO de la hoja — así que
   abrir la hoja se llevaba la caja de escribir hasta arriba del todo, lejos
   del pulgar. Y las áreas de toque estaban por debajo de los 44 px que
   necesita un dedo.

   Lo que hay ahora:
   - La caja de escribir se queda pegada al fondo de la pantalla, pase lo que
     pase. Es lo que más se usa y está donde llega el pulgar.
   - La hoja se desliza por detrás, con tres alturas y arrastre de verdad.
   - Las cinco secciones caben en una fila sin scroll, con icono y palabra.
   ========================================================================== */

@media (max-width: 768px) {

  /* ---- la barra de la marca ---- */
  #marca {
    background: linear-gradient(180deg, rgba(18, 23, 36, 0.94), rgba(18, 23, 36, 0.7));
    border-bottom: 1px solid var(--borde);
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  #marca .nombre { font-size: 13px; letter-spacing: 0.01em; }

  /* ---- el velo ---- */
  #velo-hoja {
    position: fixed; inset: 0; z-index: 7;
    background: rgba(8, 11, 19, 0.62);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* ---- la hoja ---- */
  #hoja {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0;
    bottom: calc(var(--alto-abajo, 74px) + var(--teclado, 0px));
    z-index: 8;
    height: 84vh; max-height: 84vh;
    background: linear-gradient(180deg, #1E2537 0%, #171D2C 46%, #141926 100%);
    border: 1px solid var(--borde);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 50px rgba(4, 7, 14, 0.55);
    backdrop-filter: none;              /* la hoja es opaca: nada que desenfocar */
    padding-bottom: 0;
    transition: transform .34s cubic-bezier(.32, .72, 0, 1);
    will-change: transform;
    touch-action: none;
  }
  /* Mientras el dedo la lleva, la hoja no interpola: va donde va el dedo. */
  #hoja.arrastrando { transition: none; }

  /* ---- el tirador ---- */
  /* 26 px de alto para poder agarrarlo. La rayita mide 4; el área de toque no
     puede medir lo mismo que el dibujo. */
  #tirador {
    display: block; height: 26px; flex: 0 0 26px;
    cursor: grab; touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  #tirador::before {
    content: ''; display: block; width: 42px; height: 4px;
    margin: 11px auto 0;
    background: rgba(255, 236, 205, 0.26); border-radius: 2px;
    transition: background .2s, width .2s;
  }
  #hoja.abierta #tirador::before { background: rgba(240, 180, 75, 0.55); width: 30px; }

  /* ---- las cinco secciones ---- */
  /* Sin scroll horizontal: lo que se sale del borde no existe para el que
     mira. Cinco caben en fila si cada una es un icono con su palabra debajo. */
  #pestanas {
    display: flex; gap: 2px; padding: 0 6px 6px;
    overflow: visible;
    flex: 0 0 auto;
  }
  #pestanas button {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 2px 9px;
    min-height: 56px;                    /* área de toque de verdad */
    background: none; border: none; border-radius: 12px;
    color: var(--tenue); font: inherit; cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s, background .18s;
  }
  #pestanas button svg { width: 21px; height: 21px; flex: 0 0 21px; }
  #pestanas button .texto-pestana {
    font-size: 10.5px; line-height: 1.1; letter-spacing: -0.01em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #pestanas button:active { background: rgba(255, 236, 205, 0.06); }
  #pestanas button.activa { color: var(--acento); background: var(--acento-hondo); }

  /* El aviso va sobre el icono, con un aro del color de la hoja para que se
     recorte contra el trazo. Antes eran 5 px al lado del texto: invisible. */
  #pestanas button .punto-aviso {
    position: absolute; top: 7px; left: 50%; margin-left: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--acento);
    box-shadow: 0 0 0 2.5px #1E2537;
  }

  /* ---- lo que la hoja tenía roto de antes ----
     styles.css apaga los contenedores de escritorio con
       #izquierda, #derecha, #respuesta, #cola, #reactor-caja
         { display: none !important }
     La intención era buena para #izquierda y #reactor-caja, cuyos hijos se
     mudan a la hoja o no se usan en el teléfono. Pero #respuesta, #cola y
     #derecha se mudan ENTEROS, y la regla los seguía apagando dentro de la
     hoja: en un celular no se veía nunca ni la respuesta del asistente ni la
     cola de WhatsApp ni los filtros. Aquí se les devuelve la visibilidad,
     respetando quién decide si van: la clase `visible` en la respuesta y el
     atributo `hidden` en la cola. */
  #contenido-hoja #respuesta.visible,
  #contenido-hoja #derecha:not([hidden]),
  #contenido-hoja #cola:not([hidden]) {
    display: block !important;
  }

  /* ---- el contenido ---- */
  #contenido-hoja {
    flex: 1 1 auto;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 2px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  #contenido-hoja .etiqueta { font-size: 11.5px; margin-bottom: 4px; }
  #inspector .cuerpo { max-height: none; }

  /* Los secundarios, dentro de la hoja y con su nombre entero: un icono suelto
     en un menú que se abre una vez al día no se recuerda, y aquí sobra sitio
     para la palabra. */
  #acciones-hoja { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  #acciones-hoja button {
    font: inherit; font-size: 13px; padding: 11px 15px; min-height: 44px;
    border-radius: 999px;
    background: var(--superficie); border: 1px solid var(--borde);
    color: var(--texto-medio);
  }
  #acciones-hoja button:active { background: var(--superficie-alta); color: var(--texto); }

  /* ---- la caja de escribir: fija abajo, por encima de la hoja ---- */
  #abajo {
    position: fixed !important; left: 0; right: 0;
    bottom: var(--teclado, 0px);
    transform: none; width: 100%;
    z-index: 9;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
    /* Casi opaca: por detrás pasa el contenido de la hoja, y con la barra
       traslúcida se veían formas fantasma debajo de lo que estás escribiendo. */
    background: linear-gradient(180deg, rgba(15, 19, 30, 0.9), rgba(15, 19, 30, 0.995) 42%);
    border-top: 1px solid var(--borde);
    backdrop-filter: blur(16px);
    transition: bottom .18s ease;
  }
  #barra-pregunta { flex: 1; padding: 12px 16px; min-height: 48px; }
  #pregunta { font-size: 16px; }        /* 16 o iOS hace zoom al enfocar */

  #btn-micro {
    width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%;
    background: var(--acento-hondo);
    border: 1px solid rgba(240, 180, 75, 0.34);
    color: var(--acento-claro);
  }
  #btn-micro svg { width: 23px; height: 23px; }
  #btn-micro.activo {
    background: var(--acento); border-color: var(--acento); color: #1A1305;
    transform: none;
  }
  #btn-enviar { width: 32px; height: 32px; }

  /* Con el teclado abierto sobra todo lo que no sea escribir. */
  body.con-teclado #hoja { transition: none; }
  body.con-teclado #marca { opacity: 0; pointer-events: none; }
}

/* En horizontal la pantalla es baja: la hoja no puede comerse casi todo, y la
   palabra debajo del icono deja de caber. */
@media (max-width: 768px) and (max-height: 480px) {
  #hoja { height: 90vh; max-height: 90vh; }
  #pestanas button { min-height: 46px; padding: 5px 2px 6px; }
  #pestanas button .texto-pestana { display: none; }
}

@media (max-width: 340px) {
  #pestanas button .texto-pestana { font-size: 9.5px; }
}

/* ==========================================================================
   El encendido
   ==========================================================================
   El único momento coreografiado de toda la interfaz: la lámpara se enciende,
   con el titubeo que tiene una bombilla de verdad al arrancar. 1,1 s, una sola
   vez por sesión del navegador, y se salta con un toque. */

#encendido {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: #0E121C;
  transition: opacity .45s ease;
}
#encendido.fuera { opacity: 0; }
#encendido .lampara {
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 217, 138, 0.55), transparent 62%);
  animation: encender-lampara 1.1s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes encender-lampara {
  0%   { opacity: 0; transform: scale(.3); }
  38%  { opacity: 1; transform: scale(1.06); }
  46%  { opacity: .5; }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: .9; transform: scale(1); }
}

/* ==========================================================================
   Menos movimiento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.hablando #vineta, body.hablando #polvo, body.hablando #respuesta,
  body.pensando #barra-pregunta, #encendido .lampara,
  #dicho .cursor-maquina {
    animation: none !important;
  }
  #hoja { transition: none; }
}