/* Prototipo de la app de celular de ORQUESTA — la Sala.
   El arte del puesto lo dibuja escenario.js en un canvas de 300x300, con las
   medidas del visor de assets. Aqui solo va el acomodo y lo que es interfaz. */

/* Los colores y la tipografia son los de ORQUESTA, copiados de
   B:\Impacto\N8N\CLAUDE CODE\jarvis-app\src\App.css. El tema (claro u oscuro)
   lo pone _shared/theme.js en el atributo data-theme del html, igual que en
   cualquier herramienta de la app. Aqui NO se inventan colores nuevos. */

:root {
  --bg: #0d0e10;
  --bg-2: #121316;
  --bg-3: #17191d;
  --line: #212329;
  --line-2: #2c2f36;
  --fg: #ededee;
  --fg-soft: #d2d4da;
  --fg-dim: #969aa2;
  --fg-mute: #5e616a;
  --accent: #7ddc8b;
  --glass: rgba(16,17,20,0.84);
  --hover: rgba(255,255,255,0.06);
  --sans: "Roboto Mono", "JetBrains Mono", ui-monospace, monospace;

  /* LA PARED DEL CUARTO = EL PANEL DE ORQUESTA. Era #09090B (el tono del visor
     de assets) y en la app de escritorio los paneles son #000: las tarjetas se
     veían de otro negro que el resto de la interfaz. Ahora es el mismo, y el
     motor pinta la pared de este color (TEMAS_PARED en escenario.js). */
  --pared: #000000;

  /* avisos: de la paleta de personajes, iguales en los dos temas */
  --alerta: #C75326;
  --alerta-fuerte: #C43030;
  --ok: #15a85c;
  --bronce: #C39F00;
}

:root[data-theme="light"] {
  --bg: #f4f5f7;
  --bg-2: #ffffff;
  --bg-3: #eceef1;
  --line: #e4e6ea;
  --line-2: #d3d6dc;
  --fg: #17181b;
  --fg-soft: #33363d;
  --fg-dim: #5f636c;
  --fg-mute: #9aa0a8;
  --accent: #15a85c;
  --glass: rgba(255,255,255,0.74);
  --hover: rgba(0,0,0,0.045);
  --pared: #FFFFFF;
}

/* nombres viejos del prototipo, apuntando al tema de la app */
:root {
  --fondo: var(--bg);
  --pared-alta: var(--bg-3);
  --linea: var(--line);
  --texto: var(--fg);
  --apagado-texto: var(--fg-dim);
  --cian: var(--accent);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  overscroll-behavior: none;
  /* EL TEXTO NO SE INFLA SOLO AL GIRAR EL TELÉFONO.
     Al pasar a horizontal, el navegador agranda por su cuenta el texto de los
     bloques anchos —cree que ayuda— y al volver a vertical NO lo deshace: se
     queda gigante hasta recargar. Con esto el tamaño es el que dice el CSS y
     nada más. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }

/* ---------- armazon de la pantalla ---------- */

#app {
  height: 100dvh;
  display: grid;
  /* LA BARRA Y LA SALA, Y YA.
     Decia `auto auto 1fr auto`, de cuando abajo iba la recepcion del asistente
     y arriba el control de prueba del prototipo. Los dos se fueron, asi que la
     sala caia en el segundo renglon `auto` —medida por su contenido— y el `1fr`
     se lo quedaba un renglon vacio: el gris de la sala terminaba donde terminaba
     la ultima tarjeta y abajo quedaba una franja muerta. */
  grid-template-rows: auto 1fr;
}

/* ---------- barra de arriba ---------- */

.barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linea);
  /* Del color del panel, como la barra de título de la app de escritorio. */
  background: var(--pared);
}

.barra h1 { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: .2px; flex: none; }

.maquina {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--apagado-texto);
  padding: 5px 9px;
  border: 1px solid var(--linea);
  border-radius: 999px;
}

.maquina .foco { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.maquina.apagada { color: #E4B4A0; border-color: #5B2C1C; }
.maquina.apagada .foco { background: var(--alerta-fuerte); }

/* ---------- el edificio ---------- */

#edificio {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y proximity;
  background: var(--pared);
}

.piso {
  position: relative;
  display: flex;
  scroll-snap-align: center;
  overflow: hidden;
  background: var(--pared);
}

/* el suelo sigue de pared a pared, aunque el puesto no ocupe todo el ancho.
   Es el mismo cafe y la misma linea que pinta el cuarto en el canvas. */
/* La franja café del piso se fue: ahora es una línea (ver abajo). */

/* ---------- un puesto de trabajo: el cuarto y su tablero ---------- */

.puesto {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  width: 100%;
  text-align: left;
  padding: 0;
}

.marco { flex: none; overflow: hidden; line-height: 0; }

.cuarto {
  display: block;
  image-rendering: pixelated;
}

/* el apagon se ve, no se adivina */
.puesto.apagado .cuarto { filter: grayscale(1) brightness(.5); }

/* el apagon es de todo el mundo, tambien del suelo */
#edificio.apagado .piso::after { filter: grayscale(1) brightness(.5); }

/* ---------- el tablero: una pantalla colgada junto al puesto ---------- */

.tablero {
  flex: 1;
  min-width: 0;
  align-self: center;
  padding: 0 8px 0 6px;
}

/* los dos soportes con que el tablero se atornilla a la pared */
.tablero .pernos {
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
}

.tablero .pernos i {
  width: 4px;
  height: 7px;
  background: var(--line-2);
  border-radius: 1px 1px 0 0;
}

.tablero .vidrio {
  border: 2px solid var(--line-2);
  border-radius: 3px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line), 0 2px 0 rgba(0,0,0,.35);
  padding: 8px 8px 9px;
}

.tablero .quien {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

.tablero .tinta { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tablero .nombre { font-size: 12.5px; font-weight: 700; line-height: 1; }

.tablero .campo { margin-bottom: 7px; }

.tablero .rotulo {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 1px;
}

.tablero .valor {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--fg-soft);
}

.tablero .ahora .valor { color: var(--accent); }
.tablero .valor .quieto { color: var(--apagado-texto); }

.tablero .reloj {
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tablero .aviso {
  margin-top: 8px;
  padding: 7px 8px;
  border-radius: 3px;
  border-left: 3px solid var(--alerta);
  background: rgba(199,83,38,.14);
}

.tablero .aviso[hidden] { display: none; }
.tablero .aviso.entrega { border-left-color: var(--bronce); background: rgba(195,159,0,.12); }

.tablero .aviso .senal {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #F0A87F;
  margin-bottom: 2px;
}

.tablero .aviso.entrega .senal { color: #DCC24A; }

.tablero .aviso .dice {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  color: var(--fg);
}

/* el que te pregunta: su tablero late, como su pantalla */
.puesto.preguntando .tablero .vidrio {
  border-color: var(--alerta);
  animation: latido 1.6s ease-in-out infinite;
}

@keyframes latido {
  0%, 100% { border-color: var(--alerta); }
  50% { border-color: #F0A87F; }
}

.puesto.apagado .tablero .vidrio { filter: grayscale(1) brightness(.6); }

/* ---------- mensajes sin leer ---------- */

.sinleer {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--texto);
  /* El numero, del color del fondo. Estaba clavado en negro, y como la bolita
     se pinta del color del TEXTO, en el tema claro quedaba negro sobre negro:
     se veia un punto sin numero. */
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
}

.sinleer[hidden] { display: none; }

/* ---------- recepcion del asistente, siempre a la mano ---------- */

.recepcion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--linea);
  background: linear-gradient(180deg, var(--pared-alta), var(--fondo));
}

.recepcion .retrato {
  position: relative;
  width: 52px;
  height: 52px;
  flex: none;
  overflow: hidden;
}

.recepcion .retrato canvas { display: block; image-rendering: pixelated; }

.recepcion .dicho { flex: 1; min-width: 0; }
.recepcion .dicho .quien { font-size: 13px; font-weight: 650; }
.recepcion .dicho .que { font-size: 11.5px; color: var(--apagado-texto); margin-top: 2px; }

.recepcion .encargar {
  flex: none;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
}

@media (hover: hover) {
  .recepcion .encargar:hover { border-color: var(--cian); color: #7FE3E4; }
  .puesto:hover .cuarto { filter: brightness(1.08); }
}

.recepcion .encargar:active { transform: scale(.97); }

/* ---------- control de prueba del prototipo ---------- */

.probador {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 10px;
  white-space: nowrap;
  color: var(--apagado-texto);
  border-bottom: 1px solid var(--linea);
  background: var(--bg-3);
}

.probador .pastilla {
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  min-width: 30px;
  text-align: center;
}

.probador .pastilla.activa { background: var(--texto); color: #000; border-color: var(--texto); }
.probador .cuenta { min-width: 66px; text-align: center; color: var(--texto); }
.probador #botonApagon { margin-left: auto; }

/* ---------- hoja que se abre encima (el chat) ---------- */

.hoja {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: 1fr auto;
  pointer-events: none;
}

/* cerrada no se ve NADA: si no, el panel se queda tapando la sala */
.hoja:not(.abierta),
.vestidor:not(.abierta) { visibility: hidden; }

.hoja .velo {
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .22s ease;
  /* cerrada no debe atrapar toques: en tactil eso deja la sala muerta */
  pointer-events: none;
}

/* el chat ES el tablero del agente, ya crecido: mismo vidrio, mismo borde */
.hoja .panel {
  background: var(--bg-2);
  border: 2px solid var(--line-2);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  height: 82dvh;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hoja .panel .conversacion { flex: 1; min-height: 0; }

/* lo de adentro entra con un respiro, para que no se vea estirado al crecer */
.hoja .panel > * { opacity: 0; }
.hoja.abierta .panel > * { opacity: 1; transition: opacity .16s ease .12s; }

.hoja.abierta .velo { opacity: 1; pointer-events: auto; }
.hoja.abierta .panel { pointer-events: auto; }

.hoja .asa { width: 40px; height: 4px; border-radius: 2px; background: var(--linea); margin: 8px auto 4px; }

.hoja .cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 10px;
  border-bottom: 1px solid var(--linea);
}

.hoja .cabeza .retrato { position: relative; width: 40px; height: 40px; overflow: hidden; flex: none; }
.hoja .cabeza .retrato canvas { display: block; image-rendering: pixelated; }
.hoja .cabeza .quien { font-size: 15px; font-weight: 650; }
.hoja .cabeza .subquien { font-size: 11.5px; color: var(--apagado-texto); }
.hoja .cabeza .cerrar { margin-left: auto; font-size: 22px; padding: 6px 10px; color: var(--apagado-texto); }

.conversacion { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.vivo[hidden] { display: none; }

.burbuja {
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  background: var(--bg-3);
}

.burbuja.mia { align-self: flex-end; background: var(--line); }
.burbuja.enCamino { opacity: .55; }
.burbuja .sello { display: block; font-size: 10.5px; color: var(--apagado-texto); margin-top: 4px; }

/* ---------- cuando un agente te pregunta ---------- */

.pregunta {
  border-top: 1px solid var(--linea);
  background: var(--bg-3);
  padding: 12px 14px 14px;
  max-height: 58dvh;
  overflow-y: auto;
}

.pregunta[hidden] { display: none; }

.pregunta .quien-pregunta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.pregunta .senal {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #F0A87F;
}

.pregunta .cuantas {
  margin-left: auto;
  font-size: 11px;
  color: var(--apagado-texto);
  font-variant-numeric: tabular-nums;
}

.pregunta .texto {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
}

.pregunta .modo {
  font-size: 11px;
  color: var(--apagado-texto);
  margin-bottom: 10px;
}

.pregunta .opciones { display: flex; flex-direction: column; gap: 8px; }

.opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: #26242300;
}

.opcion .marca {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 2px solid #6A6A72;
  border-radius: 50%;
}

/* las de varias respuestas se marcan cuadradas: se ve la diferencia sin leerla */
.opcion.varias .marca { border-radius: 5px; }

.opcion.marcada .marca { background: var(--texto); border-color: var(--texto); }

.opcion .cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opcion .titulo { font-size: 14px; font-weight: 600; line-height: 1.25; }
.opcion .detalle { font-size: 12px; color: var(--apagado-texto); line-height: 1.3; }

.opcion:active { transform: scale(.99); border-color: #7A7A82; }

.pregunta .listo {
  margin-top: 10px;
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  background: var(--texto);
  color: #000;
  font-weight: 700;
  font-size: 14px;
}

.pregunta .listo:disabled { background: #3A3A42; color: #8A8A93; }

.vivo {
  padding: 7px 14px;
  font-size: 11.5px;
  color: var(--cian);
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: 8px;
}

.vivo .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--cian); animation: respirar 1.2s ease-in-out infinite; }

@keyframes respirar { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

.escribir { display: flex; gap: 8px; padding: 10px 12px 14px; border-top: 1px solid var(--linea); }

.escribir input {
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 11px 14px;
  color: var(--texto);
  font-size: 14px;
  min-width: 0;
}

.escribir input:focus { outline: none; border-color: var(--cian); }

.escribir .enviar {
  flex: none;
  background: var(--texto);
  color: #000;
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: 650;
  font-size: 14px;
}

.escribir .enviar:active { transform: scale(.97); }

/* ---------- el vestidor: nombre, color y personaje ---------- */

.vestidor {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: end center;
  pointer-events: none;
}

.vestidor .velo {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.vestidor .panel {
  position: relative;
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 2px solid var(--line-2);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 0 14px 16px;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22,.9,.3,1);
  pointer-events: none;
}

.vestidor.abierta .velo { opacity: 1; pointer-events: auto; }
.vestidor.abierta .panel { transform: translateY(0); pointer-events: auto; }

.vestidor .cabeza {
  display: flex;
  align-items: center;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 14px;
}

.vestidor .titulo { font-size: 14px; font-weight: 700; }
.vestidor .cerrar { margin-left: auto; font-size: 22px; padding: 4px 8px; color: var(--fg-dim); }

.vestidor .vitrina {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}

.vestidor .vitrina .marco {
  width: 220px;
  height: 220px;
  overflow: hidden;
  border: 2px solid var(--line-2);
  border-radius: 4px;
}

.vestidor .vitrina canvas {
  display: block;
  width: 220px;
  height: 220px;
  image-rendering: pixelated;
}

.vestidor .flecha {
  flex: none;
  width: 46px;
  height: 66px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--fg-soft);
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: var(--bg-3);
}

.vestidor .flecha:active { background: var(--hover); transform: scale(.96); }

.vestidor .cual {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--fg-dim);
  background: var(--glass);
  padding: 2px 7px;
  border-radius: 3px;
}

.vestidor .rotulo {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 5px;
}

.vestidor .campo-nombre { display: block; margin-bottom: 14px; }

.vestidor input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 11px 12px;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
}

.vestidor input:focus { outline: none; border-color: var(--accent); }

.vestidor .campo-color { margin-bottom: 14px; }

.vestidor .paleta {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.vestidor .tono {
  height: 38px;
  border-radius: 4px;
  border: 2px solid var(--line-2);
}

.vestidor .tono.puesto {
  border-color: var(--fg);
  box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--fg);
}

.vestidor .prenda {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--fg-dim);
}

.vestidor .desde-la-compu {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--line-2);
  background: var(--bg-3);
  font-size: 11px;
  line-height: 1.45;
  color: var(--fg-dim);
}

.vestidor .botones { display: flex; gap: 10px; }

.vestidor .cancelar,
.vestidor .guardar {
  flex: 1;
  padding: 13px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
}

.vestidor .cancelar { border: 1px solid var(--linea); color: var(--fg-soft); }
.vestidor .guardar { background: var(--accent); color: var(--bg); }
.vestidor .guardar:active { transform: scale(.98); }

/* el boton para llegar aqui, en la cabeza del chat */
.hoja .cabeza .vestir {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--fg-dim);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 6px 10px;
}

.hoja .cabeza .cerrar { margin-left: 6px; }

/* ===== ENTRAR — la misma cuenta de ORQUESTA =====
   La pantalla vive en entrada.css desde el 1 oct 2026: se ve como orquesta.pro. */
body.entrando { overflow: hidden; }

/* ===== Markdown dentro de la burbuja del agente =====
   Los agentes escriben con negritas, codigo y viñetas. Se pinta armando nodos
   (ver markdown.js), nunca con innerHTML. */
.burbuja .md-p { margin: 0 0 8px; }
.burbuja .md-p:last-child { margin-bottom: 0; }
.burbuja .md-tit {
  font-weight: 700; font-size: 14px; margin: 10px 0 5px; line-height: 1.35;
}
.burbuja .md-tit:first-child { margin-top: 0; }
.burbuja strong { font-weight: 700; }
.burbuja em { font-style: italic; }
.burbuja code {
  font-family: var(--mono, ui-monospace, monospace); font-size: .92em;
  padding: 1px 5px; border-radius: 5px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  overflow-wrap: anywhere;
}
.burbuja .md-lista { margin: 4px 0 8px; padding-left: 18px; }
.burbuja .md-lista:last-child { margin-bottom: 0; }
.burbuja .md-lista li { margin: 3px 0; }
/* Las numeradas traen su propio numero, asi que no se les pone viñeta. */
.burbuja .md-lista li:has(.md-num) { list-style: none; margin-left: -18px; }
.burbuja .md-num { font-variant-numeric: tabular-nums; opacity: .7; }

/* Las tablas. En un telefono no cabe una de cinco columnas, asi que la tabla
   corre de lado DENTRO de su caja: estirar la burbuja rompe el chat entero.
   Los numeros van alineados a la derecha y con cifras de ancho fijo, que es lo
   que permite comparar una columna de un vistazo. */
.burbuja .md-tablabox {
  margin: 6px 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 8px;
}
.burbuja .md-tablabox:last-child { margin-bottom: 0; }
/* Una tabla ancha se corre con el dedo. La barrita delgada es la señal de que
   hay mas a la derecha; sin ella parece que la tabla esta cortada. */
.burbuja .md-tablabox { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, currentColor 28%, transparent) transparent; }
.burbuja .md-tablabox::-webkit-scrollbar { height: 6px; }
.burbuja .md-tablabox::-webkit-scrollbar-track { background: transparent; }
.burbuja .md-tablabox::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, currentColor 28%, transparent); border-radius: 3px;
}
.burbuja .md-tabla { border-collapse: collapse; width: 100%; font-size: 13px; line-height: 1.35; }
/* El texto ENVUELVE por sus espacios y las cifras no: así una tabla de cuatro
   columnas cabe en un telefono en vez de salirse por la derecha, ninguna
   palabra se parte a la mitad y un precio nunca se corta a media cifra. Si aun
   asi no cabe, la caja de arriba corre de lado. */
.burbuja .md-tabla th,
.burbuja .md-tabla td {
  padding: 6px 10px; text-align: left; vertical-align: top;
  white-space: normal; overflow-wrap: normal; word-break: normal;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.burbuja .md-tabla thead th {
  font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.burbuja .md-tabla tbody tr:last-child td { border-bottom: 0; }
/* Las celdas que son pura cifra las marca markdown.js con .num: van a la
   derecha y con cifras del mismo ancho, que es lo que deja comparar la columna
   de un vistazo. */
.burbuja .md-tabla td { font-variant-numeric: tabular-nums; }
.burbuja .md-tabla td.num { text-align: right; white-space: nowrap; }


/* ===== Las cuatro formas de cerrar una tarea =====
   Las mismas que en la computadora. Cada una dice lo que hace ANTES de picarla:
   dos le piden al agente que escriba algo y una tira lo que iba a medias. */
.hoja .cabeza .terminar {
  font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  padding: 7px 12px; margin-left: auto;
  color: var(--fg-dim); background: transparent;
  border: 1px solid var(--wf); border-radius: 999px; cursor: pointer;
}
.hoja .cabeza .terminar:hover { color: var(--fg); }
/* La barra ya no reparte solo con el boton de personalizar. */
.hoja .cabeza .vestir { margin-left: auto; }
.hoja .cabeza .terminar { margin-left: 6px; }

.salidas { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: flex-end; }
.salidas .velo { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s ease; }
.salidas.abierta .velo { opacity: 1; }
.salidas .menu {
  position: relative; width: 100%;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--wf);
  transform: translateY(100%); transition: transform .24s cubic-bezier(.22,.9,.3,1);
}
.salidas.abierta .menu { transform: none; }
.salidas-tit {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-mute); padding: 2px 2px 6px;
}
.salida {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  font: inherit; padding: 12px 14px; cursor: pointer;
  color: var(--fg); background: var(--hover);
  border: 1px solid var(--wf); border-radius: 12px;
}
.salida:disabled { opacity: .5; }
.salida.yendo { border-color: var(--accent); }
.salida-tit { font-size: 14.5px; font-weight: 600; }
.salida-dice { font-size: 12.5px; color: var(--fg-dim); line-height: 1.35; }
/* La que no se puede deshacer se ve distinta. */
.salida.fuerte { border-color: color-mix(in srgb, #e05548 55%, var(--wf)); }
.salida.fuerte .salida-tit { color: #e05548; }
.salida.cancelar { align-items: center; background: transparent; color: var(--fg-dim); }

.aviso-flotante {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px); z-index: 2400;
  max-width: min(92vw, 420px); padding: 11px 15px;
  font-size: 13.5px; line-height: 1.35; text-align: center;
  color: var(--fg); background: var(--bg); border: 1px solid var(--wf); border-radius: 12px;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
.aviso-flotante.visible { opacity: 1; transform: translate(-50%, 0); }


/* ===== La sala en cuadricula (pantalla ancha) =====
   En el telefono no cabe mas de una columna y todo queda igual que siempre.
   Con ancho de sobra los puestos se acomodan en rejilla y se ven todos los
   agentes de un vistazo, que es para lo que sirve la sala. */
#edificio.cuadricula {
  display: grid;
  align-content: start;
  /* El enganche de scroll es para pasar de un agente al siguiente con el pulgar.
     En rejilla estorba: ahi se ven varios a la vez. */
  scroll-snap-type: none;
}
#edificio.cuadricula .piso { scroll-snap-align: none; }
/* CUANDO CABEN TODOS, NO HAY SCROLL. Los renglones se reparten el alto hasta el
   tope de tamaño de la tarjeta (ver `cuadrarFilas` en sala.js); de ahí en
   adelante la cuadrícula se CENTRA, porque estirarlas más deforma al personaje
   —en un monitor ancho salía del tamaño de una puerta (20 sep 2026). */
#edificio.sin-scroll { overflow-y: hidden; align-content: center; justify-content: center; }
/* Una linea entre columnas: se nota donde acaba un cuarto y empieza el otro. */
#edificio.cuadricula .piso + .piso { box-shadow: inset 1px 0 0 rgba(0,0,0,.18); }

/* La barra de arriba se queda fija: con varias filas se pierde de vista quien
   es y si la computadora esta prendida, que es lo que nunca hay que callar. */
@media (min-width: 940px) {
  .barra { position: sticky; top: 0; z-index: 5; }
}

/* ===================== LOS CHATS =====================
   ESPEJO DEL CHAT DE ORQUESTA. Las clases, las medidas y los colores salen de
   App.css de la app de escritorio (.term-chat-* y .kbar-*). Es el mismo chat en
   otra pantalla: que se vea igual no es capricho, es no tener que aprender dos.
   Las variables de color ya se llaman igual en los dos lados. */

/* En el telefono: uno, tapando la pantalla. No hay a donde mas ir. */
.chats {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  pointer-events: none;
}
.chats:empty { display: none; }

.chat {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  background: var(--bg-2);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.22,.9,.3,1);
}
.chat.abierta { transform: none; }

/* ---- la conversacion: igual que .term-chat-list de ORQUESTA ---- */
.chat .conversacion {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-2);
}

/* LAS BURBUJAS SON LAS DE ORQUESTA, COPIADAS TAL CUAL (25 sep 2026).
   La tuya y la del agente, las dos en burbuja, con el color que diga el tema de
   la app (--chat-bub / --chat-bub-u / --tema-chat, que llegan por el puente).
   Aquí hubo un diseño propio —tu burbuja teñida del acento y el agente suelto a
   todo lo ancho— y Carlos lo pidió quitar unas diez veces: la web es una copia
   visual de la app, no otro diseño. Las reglas salen de App.css (.term-chat-msg). */
.term-chat-msg {
  max-width: 84%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: var(--chat-fs, 13px);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--tema-chat, var(--chat-bub, #0b0c10));
  color: var(--chat-fg, #f2f3f6);
  border: none;
}
.term-chat-msg.user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--tema-chat, var(--chat-bub-u, #0b0c10));
  color: var(--chat-fg-u, #ffffff);
}
.term-chat-msg.user.pending { opacity: .65; }
.term-chat-msg.assistant {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  white-space: normal;
}
/* Markdown dentro de la burbuja del agente: los mismos márgenes de la app. */
.term-chat-msg.assistant > :first-child { margin-top: 0; }
.term-chat-msg.assistant > :last-child { margin-bottom: 0; }
.term-chat-msg.assistant .md-p { margin: 0 0 8px; }
.term-chat-msg.assistant .md-lista { margin: 4px 0 8px; padding-left: 18px; }
.term-chat-msg.assistant li { margin: 2px 0; }
.term-chat-msg.assistant .md-tit { font-size: 13.5px; font-weight: 600; margin: 10px 0 6px; }
.term-chat-msg.assistant strong { color: inherit; font-weight: 700; }
.term-chat-msg.assistant code { font-family: var(--mono, var(--sans)); font-size: 12px; background: color-mix(in srgb, currentColor 11%, transparent); padding: 1px 5px; }
.term-chat-msg.assistant pre { overflow-x: auto; margin: 6px 0 8px; padding: 8px 10px; background: color-mix(in srgb, currentColor 7%, transparent); border: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.term-chat-msg.assistant pre code { background: none; padding: 0; }
/* Tablas con su cuadrícula, como en la app. */
.term-chat-msg .md-tablabox { overflow-x: auto; margin: 6px 0 8px; }
.term-chat-msg .md-tabla { border-collapse: collapse; font-size: 12px; }
.term-chat-msg .md-tabla th,
.term-chat-msg .md-tabla td { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); padding: 3px 8px; text-align: left; }
.term-chat-msg .md-tabla td.num { text-align: right; white-space: nowrap; }
/* Las rutas de archivo son links del color de acento, como en la app. Aquí no
   se puede abrir un archivo de tu compu, así que picarla la copia. */
.term-chat-msg .md-ruta { color: var(--accent); text-decoration: underline; cursor: pointer; word-break: break-all; }
/* El sello solo aparece cuando algo NO llegó ("se entrega cuando prendas tu
   computadora", "no se pudo mandar"). "Entregado" no se escribe: en la app no
   existe, y lo normal no necesita letrero. */
.term-chat-msg .sello {
  display: block;
  margin-top: 4px;
  font-family: var(--mono, var(--sans));
  font-size: 10px;
  color: var(--fg-mute);
}

/* ---- la barra de escribir: la misma .kbar de ORQUESTA ---- */
.chat .kbar {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; flex: none;
  margin: 8px 10px 12px; padding: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent);
  transition: box-shadow .2s ease;
}
.chat .kbar:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 20%, transparent); }
.chat .kbar-input {
  width: 100%; box-sizing: border-box; resize: none; border: none; outline: none;
  font: inherit; font-size: 13px; line-height: 1.45;
  padding: 12px 14px 4px; border-radius: 14px 14px 0 0;
  background: transparent; color: var(--fg);
  min-height: 48px; max-height: 240px; overflow-y: auto;
}
.chat .kbar-input::placeholder { color: var(--fg-mute); }
.chat .kbar-row { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 10px 8px; }
.chat .kbar-space { flex: 1; }
.chat .kbar-enviar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; padding: 0; cursor: pointer;
  font-size: 15px; line-height: 1;
  border: 1px solid var(--line-2);
  background: transparent; color: var(--fg-dim);
}
.chat .kbar-enviar:hover { color: var(--fg); }
/* El clip va como los chips de la app: cuadro con borde, sin relleno. */
.chat .kbar-clip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 34px; padding: 0 9px; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: var(--fg-dim); font: inherit;
}
.chat .kbar-clip:hover { color: var(--fg); }

/* EL AGENTE AL PIE DE SU CONVERSACIÓN, junto a la caja de escribir, como en la
   app (.cb-agenteretrato): recuadro con el filo de su color. Se pica para
   cambiarle cómo se ve. */
.chat .kbar-fila { display: flex; align-items: flex-end; min-width: 0; flex: none; }
.chat .kbar-fila > .kbar { flex: 1; min-width: 0; }
.chat .chat-retrato {
  position: relative; flex: none; align-self: flex-end;
  /* Del MISMO ALTO que la caja de escribir (48 + 44 px): arriba empatan los dos
     bordes (pedido de Carlos, 25 sep 2026). */
  margin: 0 0 12px 10px; width: 112px; height: 92px; box-sizing: border-box;
  padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--c, var(--line-2));
  background: var(--bg);
  line-height: 0;
}
.chat .chat-retrato:hover { filter: brightness(1.08); }
/* De cerca: el lienzo lo coloca sala.js (lienzoDeCerca), anclado por abajo. */
.chat .chat-retrato .chat-escena { position: absolute; }
/* En un teléfono angosto se angosta un poco, pero conserva el alto. */
@media (max-width: 420px) {
  .chat .chat-retrato { width: 96px; margin-left: 8px; }
}

/* ===== En pantalla ancha: LA PAGINA SE PARTE EN COLUMNAS =====
   Tres columnas —o cuatro si la pantalla es muy ancha— y cada chat ocupa UNA.
   El ancho de un chat no se estira nunca: es su columna. Los agentes se quedan
   con las que sobran, y cada chat que abres les quita una. Lo que se encoge es
   la sala, que aguanta porque sus cuartos se reacomodan solos. */
@media (min-width: 1100px) {
  body.en-columnas {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    grid-template-rows: 100%;   /* UN SOLO RENGLÓN: nada se va para abajo */
    height: 100dvh;
    overflow: hidden;
  }

  /* NADA MÁS ES UNA COLUMNA. Cualquier capa colgada del `body` —el login, el
     vestidor, el formulario de agregar, un aviso— flota encima. Si entra a la
     rejilla cuenta como celda y recorre todo: así fue como la sala terminó en
     medio de la pantalla y un chat abajo a la izquierda, partido a la mitad. */
  body.en-columnas > *:not(#app):not(.chats) { position: fixed; }

  /* LOS AGENTES, SIEMPRE A LA IZQUIERDA, con las columnas que les quedan.
     Qué columnas son exactamente lo pone el JS: `span` no acepta calc(). */
  body.en-columnas #app { grid-row: 1; height: 100%; min-width: 0; width: auto; }

  /* Los chats dejan de ser una capa flotante y pasan a ser columnas de la
     pagina: cada uno, una celda. */
  body.en-columnas .chats {
    display: contents;
    position: static;
    inset: auto;
  }
  body.en-columnas .chat {
    position: relative;
    height: 100%;
    border-left: 1px solid var(--line);
    transform: none;
    opacity: 0;
    transition: opacity .18s ease;
  }
  body.en-columnas .chat.abierta { opacity: 1; }
}

/* ============ EL PUESTO: tarjeta arriba, cuarto abajo ============
   La tarjeta paso de estar AL LADO a estar ARRIBA: al lado partia el ancho en
   dos y dejaba los cuartos flacos. Arriba ocupa todo el ancho, cabe el nombre
   completo y la tarea sin cortarse, y el personaje se queda su cuarto entero. */
.puesto {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

/* EL PISO ES UNA LINEA. Negra en claro, blanca en oscuro, un tercio del grosor
   que tenia la franja cafe de antes. Va de pared a pared para que no se corte
   entre dos puestos vecinos. */
.piso::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--suelo, 0px);
  height: 1px;
  background: var(--fg);
  opacity: .85;
  z-index: 2;
}

/* El marco del cuarto se centra bajo su tarjeta. */
.puesto .marco { align-self: center; }

/* ---- la tarjeta, ahora arriba y a todo lo ancho ---- */
.tablero {
  width: 100%;
  flex: none;
  align-self: stretch;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tablero .pernos { padding: 0 20px; }
.tablero .vidrio { padding: 7px 10px 8px; }
/* Con el ancho completo la tarea cabe en dos renglones sin cortar palabras. */
.tablero .campo { margin-bottom: 5px; }
.tablero .valor {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tablero .aviso .dice { -webkit-line-clamp: 2; }

/* ---- AGREGAR GENTE: un boton, no un escritorio vacio ----
   Los escritorios de mas se fueron. Ahora, cuando traes a alguien nuevo, la
   pared se abre y el agente entra caminando — un mueble puesto de antemano
   arruinaba justo eso. El boton vive en el espacio que sobra al final. */
.agregar-puesto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 132px;
  padding: 22px 16px;
  font: inherit;
  cursor: pointer;
  color: var(--fg-mute);
  background: none;
  border: none;
  transition: color .15s ease;
}
.agregar-puesto:hover { color: var(--fg); }
.invita-mas {
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px dashed currentColor;
  border-radius: 50%;
}
.invita-txt { font-size: 11.5px; letter-spacing: .04em; }

/* ===== La barra de arriba del chat: LA MISMA DE LA APP (25 sep 2026) =====
   Una sola fila: el color del agente, su tarea, el botón "Tarea terminada" y
   cerrar. El personaje ya no va aquí: va al pie, junto a la caja de escribir,
   como en la app (.chat-retrato). Arrastrar esta barra hacia abajo sigue
   cerrando el chat en el teléfono. */
.chat-tope {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 40px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.chat-tope .tinta { width: 10px; height: 10px; flex: none; }
.chat-quien { flex: 1; min-width: 0; }
.chat-quien .quien-txt {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--fg);
}
.chat-tope .terminar {
  flex: none; font: inherit; font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 4px 8px; cursor: pointer;
  background: var(--fg); color: var(--bg); border: none;
}
.chat-tope .terminar:hover { opacity: .88; }
.chat-tope .cerrar {
  flex: none; font: inherit; font-size: 18px; line-height: 1; padding: 2px 6px; cursor: pointer;
  background: none; border: none; color: var(--fg-dim);
}
.chat-tope .cerrar:hover { color: var(--fg); }
.chat-escena {
  display: block;
  flex: none;
  image-rendering: pixelated;
  /* El tamaño lo pone el propio lienzo (ver chat.js): se fija a sí mismo en
     línea. Aquí solo se dice que no lo estiren. */
}
.chat.preguntando .chat-tope { box-shadow: inset 3px 0 0 var(--alerta); }

/* ===== Agregar un agente ===== */
/* ELEGIR A QUIÉN LE ENCARGAS: LA PANTALLA COMPLETA.
   Era una caja de 420px con los agentes en lista, uno debajo de otro y nada
   más que su nombre. Elegir a alguien es la pantalla entera mientras dura, y
   se elige VIENDO a la gente — igual que en ORQUESTA. */
.agregar { position: fixed; inset: 0; z-index: 2300; display: flex; }
.agregar .velo { display: none; }
.agregar-caja {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px 20px; background: var(--pared); border: none; border-radius: 0;
  overflow-y: auto;
}
/* El título y la X, en el mismo renglón y pegados arriba: salirse tiene que
   estar donde uno lo busca, no al final de una lista de veinte agentes. */
.agregar-top {
  position: sticky; top: -18px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  margin: -18px -20px 0; padding: 18px 20px 10px;
  background: var(--pared);
}
.agregar-tit { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; }
.agregar-x {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--fg-dim); background: transparent; border: 1px solid var(--line-2);
}
.agregar-x:hover { color: var(--fg); border-color: var(--fg-dim); }
.agregar-busca {
  font: inherit; font-size: 13px; padding: 9px 12px;
  color: var(--fg); background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: 0; outline: none;
}
.agregar-busca:focus { border-color: var(--accent); }

/* La misma cuadrícula que en la computadora: se ve a la gente, no una lista. */
.agregar-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.agregar-uno {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font: inherit; font-size: 12.5px; padding: 8px 6px 10px; cursor: pointer;
  color: var(--fg); background: var(--pared);
  border: 1px solid var(--line); border-radius: 0;
}
.agregar-uno:hover { border-color: var(--fg-dim); }
/* Es pixel art: suavizarlo al escalar lo ensucia. */
.agregar-piel { image-rendering: pixelated; display: block; }
/* EL ICONO A LA IZQUIERDA DEL NOMBRE, como en la sala. */
.agregar-quien { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; }
.agregar-quien .ph { font-size: 14px; line-height: 1; flex: none; }
.agregar-nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agregar-uno.elegido { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); }
.agregar-nada { font-size: 12.5px; color: var(--fg-mute); grid-column: 1 / -1; }

/* ---- El clip: mandarle un archivo al agente ---- */
.kbar-clip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  font: inherit; font-size: 16px; cursor: pointer;
  color: var(--fg-mute); background: none; border: none; border-radius: 0;
  transition: color .12s;
}
.kbar-clip:hover { color: var(--fg); }
.kbar-clip:disabled { opacity: .4; cursor: default; }

/* ============ LA AGENDA ============
   Pantalla completa: una rejilla de semana con horas no cabe en media pantalla
   de teléfono, y lo que se viene a hacer aquí es mirar la semana entera. */
.barra-agenda {
  margin-left: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; font-size: 17px;
  color: var(--fg-dim); background: none; border: none; cursor: pointer;
}
.barra-agenda:hover { color: var(--fg); }

/* ===== LA AGENDA DEL TELÉFONO (Fase 4 del plan de la agenda) =====
   Vertical, como Google Calendar en el celular, con el lenguaje de ORQUESTA:
   cuadrado, líneas finas, el proyecto en la cejilla izquierda. Letra mínima
   14 px; las cajas de texto a 16 px para que el iPhone no haga zoom. */
.agenda.ag { position: fixed; inset: 0; z-index: 2600; display: flex; flex-direction: column; background: var(--bg-2); color: var(--fg); font-family: var(--sans); }
.ag .ag-esp { flex: 1; }
.ag .tenue { color: var(--fg-dim); }
.ag .r { color: #e05548; }
.ag-b { border: 1px solid var(--line-2); background: var(--bg-2); color: var(--fg); padding: 7px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.ag-b.ok { background: var(--accent); border-color: var(--accent); color: #0f1410; font-weight: 500; }
:root[data-theme="light"] .ag-b.ok { color: #fff; }
.ag-b.peligro { color: #e05548; border-color: color-mix(in srgb, #e05548 50%, transparent); }
.ag-b.chico { padding: 4px 9px; font-size: 13px; margin: 3px 4px 0 0; }
.ag-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px 8px; flex: none; }
.ag-mes { font: inherit; font-size: 19px; font-weight: 600; background: none; border: none; color: var(--fg); padding: 0; cursor: pointer; }
.ag-nota { font-size: 12px; color: var(--fg-mute); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-x { font-size: 26px; line-height: 1; color: var(--fg-dim); background: none; border: none; cursor: pointer; padding: 0 2px; }
.ag-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 4px 14px 10px; border-bottom: 1px solid var(--line); text-align: center; flex: none; }
.ag-mini[hidden] { display: none; }
.ag-mini .dow { font-size: 11px; color: var(--fg-mute); padding: 3px 0; }
.ag-mini button { font: inherit; font-size: 14px; background: none; border: none; color: var(--fg-dim); padding: 7px 0; }
.ag-mini button.con { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ag-mini button.hoy { background: var(--accent); color: #0f1410; font-weight: 700; text-decoration: none; }
.ag-mini button.fuera, .ag-mini button:disabled { opacity: .35; }
.ag-seg { display: flex; margin: 0 14px 8px; border: 1px solid var(--line-2); flex: none; }
.ag-seg button { flex: 1; font: inherit; font-size: 14px; padding: 8px 0; background: none; border: none; color: var(--fg-dim); cursor: pointer; }
.ag-seg button + button { border-left: 1px solid var(--line-2); }
.ag-seg button.on { background: var(--hover); color: var(--fg); font-weight: 600; }
.ag-vista { flex: 1; min-height: 0; overflow-y: auto; position: relative; border-top: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.ag-pie:empty { display: none; }
.ag-dia { position: sticky; top: 0; z-index: 2; background: var(--bg-2); padding: 12px 16px 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-dim); border-bottom: 1px solid var(--line); }
.ag-dia.hoy { color: var(--accent); }
.ag-dia.late { color: #e05548; }
.ag-fila { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: baseline; font-size: 15px; line-height: 1.35; cursor: pointer; }
.ag-fila.espera { opacity: .5; outline: 1px dashed var(--fg-dim); outline-offset: -2px; }
.ag-fila .hr { width: 60px; flex: none; font-size: 13px; color: var(--fg-dim); }
.ag-fila .tx { flex: 1; border-left: 3px solid var(--c); padding-left: 10px; }
.ag-fila .tx small { display: block; font-size: 13px; color: var(--fg-dim); margin-top: 2px; }
.ag-libre { padding: 10px 16px; font-size: 13.5px; color: var(--fg-mute); border-bottom: 1px solid var(--line); }
.ag-fab { position: absolute; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom)); width: 58px; height: 58px; background: var(--accent); color: #0f1410; border: none; font-size: 30px; line-height: 1; z-index: 5; }
.ag-fab[hidden] { display: none; }
/* Día y 3 días */
.ag-dcab { position: sticky; top: 0; z-index: 4; background: var(--bg-2); display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.ag-dcab b { font-weight: 600; }
.ag-dtodo { position: sticky; top: 51px; z-index: 4; background: var(--bg-2); display: grid; gap: 3px; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--line); }
.ag-dtodo > span { font-size: 11px; color: var(--fg-mute); text-align: right; padding: 5px 6px 0 0; }
.ag-dtodo > div { min-width: 0; }
.ag-chip { display: block; font-size: 13px; padding: 4px 7px; margin-bottom: 2px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 13%, var(--bg-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-chip.hecho { opacity: .35; }
.ag-rejilla { display: grid; position: relative; }
.ag-rejilla .hh { font-size: 11.5px; color: var(--fg-mute); text-align: right; padding-right: 8px; transform: translateY(-7px); }
.ag-col { position: relative; border-left: 1px solid var(--line); }
.ag-col .celda { border-top: 1px solid var(--line); }
.ag-bloque { position: absolute; left: 3px; right: 4px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 16%, var(--bg-2)); padding: 3px 7px; font-size: 13.5px; line-height: 1.3; overflow: hidden; cursor: pointer; }
.ag-bloque small { display: block; font-size: 11.5px; color: var(--fg-dim); }
.ag-bloque.hecho { opacity: .35; }
.ag-bloque.espera { opacity: .5; outline: 1px dashed var(--fg-dim); outline-offset: -1px; }
.ag-ahora { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); z-index: 3; pointer-events: none; }
/* La hoja que sube desde abajo */
.ag-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); z-index: 8; }
.ag-fondo[hidden] { display: none; }
.ag-hoja { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; max-height: 88%; overflow-y: auto; background: var(--bg-2); border-top: 1px solid var(--line-2); transform: translateY(100%); transition: transform .25s ease; padding-bottom: env(safe-area-inset-bottom); }
.ag-hoja.on { transform: none; }
.ag-hoja .asa { width: 44px; height: 4px; background: var(--line-2); margin: 9px auto 6px; }
.ag-hoja .cab { margin: 0 16px; padding: 4px 0 10px 12px; border-left: 3px solid var(--c); }
.ag-hoja .cab h3 { margin: 0 0 4px; font-size: 17px; font-weight: 500; line-height: 1.35; }
.ag-hoja .cab div { font-size: 13.5px; color: var(--fg-dim); }
.ag-hoja .cuerpo { padding: 6px 16px; display: flex; flex-direction: column; gap: 4px; }
.ag-hoja .campo { display: grid; grid-template-columns: 96px 1fr; gap: 6px; font-size: 14.5px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ag-hoja .campo span:first-child { color: var(--fg-mute); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.ag-hoja .acc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 16px; }
.ag-hoja .acc .ag-b { padding: 11px; font-size: 15px; }
.ag-hoja .acc2 { display: flex; gap: 8px; margin-top: 12px; }
.ag-hoja label { font-size: 12px; color: var(--fg-mute); letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; }
.ag-hoja input, .ag-hoja select, .ag-hoja textarea, .ag-fbar textarea { width: 100%; font: inherit; font-size: 16px; border: 1px solid var(--line-2); background: var(--bg); color: var(--fg); padding: 9px 11px; outline: none; resize: none; }
.ag-moverf { display: flex; gap: 6px; padding: 0 16px 10px; flex-wrap: wrap; }
.ag-moverf[hidden] { display: none; }
.ag-moverf input { width: auto; flex: 1; min-width: 120px; }
.ag-que { padding: 8px 16px 14px; border-top: 1px solid var(--line); }
.ag-que label { display: block; margin: 0 0 5px; }
.ag-entendi { font-size: 14px; margin-top: 7px; color: var(--fg-dim); line-height: 1.55; min-height: 20px; }
.ag-entendi b { color: var(--fg); font-weight: 500; }
.ag-aplicar { margin-top: 6px; width: 100%; padding: 11px; }
.ag-aplicar[hidden] { display: none; }
.ag-kick { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mute); font-weight: 600; }
/* El Foco */
.ag-asist { display: flex; gap: 12px; align-items: center; padding: 12px 14px 0; }
.ag-retrato { position: relative; width: 96px; height: 80px; flex: none; overflow: hidden; border: 1px solid #C39F00; background: var(--bg); transition: box-shadow .25s; }
.ag-retrato.trabaja { box-shadow: 0 0 0 3px color-mix(in srgb, #C39F00 45%, transparent); }
.ag-retrato canvas { position: absolute; image-rendering: pixelated; }
.ag-dice { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--fg-dim); line-height: 1.4; }
.ag-dice .punto { width: 8px; height: 8px; flex: none; margin-top: 6px; background: var(--fg-mute); border-radius: 50% !important; }
.ag-dice.trabaja { color: var(--fg); }
.ag-dice.trabaja .punto { background: #C39F00; animation: ag-latido .7s ease-in-out infinite; }
@keyframes ag-latido { 50% { transform: scale(1.7); opacity: .5; } }
.ag-vacio { padding: 50px 24px; text-align: center; color: var(--fg-dim); font-size: 15px; line-height: 1.6; }
.ag-vacio b { font-size: 19px; color: var(--fg); font-weight: 500; }
.ag-fcont { padding: 12px 14px 16px; }
.ag-barra { height: 3px; background: var(--line); }
.ag-barra i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.ag-preg { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); margin: 10px 0 8px; }
.ag-preg b { color: var(--fg); letter-spacing: 0; text-transform: none; }
.ag-desliza { position: relative; }
.ag-desliza .fondo { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; font-size: 14px; font-weight: 600; }
.ag-desliza .fondo .izq { color: var(--accent); } .ag-desliza .fondo .der { color: var(--fg-dim); }
.ag-ficha { position: relative; border: 1px solid var(--line-2); background: var(--bg-2); touch-action: pan-y; }
.ag-ficha .proy { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: color-mix(in srgb, var(--c) 14%, var(--bg-2)); border-bottom: 1px solid var(--line-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--c) 75%, var(--fg)); }
.ag-ficha .proy i { width: 10px; height: 10px; background: var(--c); display: inline-block; }
.ag-ficha .proy .sinf { font-weight: 400; color: var(--fg-dim); text-transform: none; letter-spacing: 0; }
.ag-ficha h2 { margin: 0; padding: 14px 14px 12px; font-size: 20px; line-height: 1.32; font-weight: 500; border-bottom: 1px solid var(--line-2); }
.ag-ficha .filas { display: grid; grid-template-columns: 96px 1fr; }
.ag-ficha .filas > div { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.ag-ficha .filas > div:nth-child(odd) { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-mute); border-right: 1px solid var(--line); display: flex; align-items: center; }
.ag-ficha .extra { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.ag-ficha.abierta .extra { grid-template-rows: 1fr; }
.ag-ficha .extra > div { overflow: hidden; }
.ag-ficha .sec { padding: 10px 12px; border-top: 1px solid var(--line); }
.ag-ficha .sec h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mute); font-weight: 600; }
.ag-ficha .sec p { margin: 0; font-size: 14px; line-height: 1.5; }
.ag-ficha .sec ul { margin: 0; padding: 0; list-style: none; }
.ag-ficha .sec li { font-size: 14px; line-height: 1.45; padding: 2px 0 2px 10px; border-left: 2px solid var(--line-2); margin-bottom: 4px; }
.ag-ficha .trozo { font-size: 12.5px; line-height: 1.6; border: 1px solid var(--line); background: var(--bg); }
.ag-ficha .trozo div { display: grid; grid-template-columns: 34px 1fr; }
.ag-ficha .trozo span:first-child { color: var(--fg-mute); text-align: right; padding-right: 7px; border-right: 1px solid var(--line); }
.ag-ficha .trozo span:last-child { padding-left: 7px; color: var(--fg-dim); white-space: pre-wrap; word-break: break-word; }
.ag-ficha .trozo .hit span:last-child { color: var(--fg); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ag-vermas { display: block; width: 100%; padding: 11px; border: none; border-top: 1px solid var(--line-2); background: none; color: var(--fg); font: inherit; font-size: 14px; font-weight: 500; }
.ag-ficha.entra { animation: ag-entra .42s cubic-bezier(.2,.9,.3,1.2); }
@keyframes ag-entra { from { transform: translateY(40px) scale(.94); opacity: 0; } }
.ag-ficha.sale-hecho { animation: ag-hecho .5s ease-in forwards; }
@keyframes ag-hecho { 30% { box-shadow: 0 0 0 4px var(--accent); } to { transform: translateY(-80px) scale(.9); opacity: 0; } }
.ag-ficha.sale-agenda { animation: ag-agenda .5s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes ag-agenda { to { transform: translateX(110%) scale(.4); opacity: 0; } }
.ag-ficha.sale-eliminar { animation: ag-eliminar .5s ease-in forwards; }
@keyframes ag-eliminar { 25% { border-color: #e05548; } to { transform: translateY(110px) rotate(3deg); opacity: 0; } }
.ag-ficha.sale-saltar { animation: ag-saltar .4s ease-in forwards; }
@keyframes ag-saltar { to { transform: translateX(-110%); opacity: 0; } }
.ag-ficha.sale-asistente { animation: ag-asistente .55s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes ag-asistente { to { transform: translate(-40%, -160px) scale(.25); opacity: 0; } }
.ag-fbar { border-top: 1px solid var(--line); padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--bg-2); }
.ag-rapidos { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.ag-rapidos .ag-b { flex: none; }
.ag-rapidos .ag-b { height: 44px; padding: 0 13px; font-size: 14px; font-weight: 500; }

/* ---- LO QUE EL AGENTE TE ENSEÑA: la tira de arriba del chat ----
   Una fila que se desliza, no una rejilla: son cinco como mucho y no deben
   comerse el alto de la conversación, que es lo que de verdad se lee. */
.vistos {
  display: flex; gap: 6px; flex: none;
  padding: 8px 10px; overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.vistos[hidden] { display: none; }
.visto {
  flex: none; width: 72px; height: 72px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: inherit; cursor: pointer; overflow: hidden;
  color: var(--fg-dim); background: var(--bg);
  border: 1px solid var(--line); border-radius: 0;
}
.visto:hover { border-color: var(--fg-dim); }
.visto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visto-ext { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.visto-nom {
  font-size: 9px; line-height: 1.2; max-width: 100%; padding: 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-mute);
}

/* ---- A pantalla completa ---- */
.lupa {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 14px; background: rgba(0,0,0,.92);
}
.lupa img { max-width: 100%; max-height: calc(100% - 60px); object-fit: contain; }
.lupa-barra { display: flex; align-items: center; gap: 8px; width: 100%; }
.lupa-nom {
  flex: 1; min-width: 0; color: #e7e7ea; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lupa-btn {
  flex: none; font: inherit; font-size: 12px; padding: 7px 12px; cursor: pointer;
  color: #e7e7ea; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25); border-radius: 0; text-decoration: none;
}
.lupa-btn:hover { background: rgba(255,255,255,.2); }

/* LO QUE NO ES UNA IMAGEN TAMBIÉN SE VE AQUÍ.
   Una tabla y un texto son texto: se pintan dentro de la app, no se bajan ni se
   abren en otra pestaña. Este cuerpo es el que scrollea. */
.lupa-cuerpo {
  width: 100%;
  max-height: calc(100% - 60px);
  overflow: auto;
  background: var(--pared);
  color: var(--fg);
  padding: 12px 14px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
/* UN HTML ENTREGADO POR UN AGENTE. Va dentro de un marco encerrado (ver
   chat.js) y ocupa todo el alto disponible: casi siempre es una página con su
   propio diseño, y recortarla a una tira la vuelve ilegible. Fondo blanco
   porque la página trae el suyo y no debe heredar el de la app. */
.lupa-html { padding: 0; }
.lupa-marco {
  display: block; width: 100%; height: calc(100vh - 90px);
  border: 0; background: #fff;
}
/* UN PDF, PÁGINA POR PÁGINA. Sin relleno lateral: la hoja ya trae su margen. */
.lupa-pdf { padding: 0; background: #2a2a2e; }
.lupa-pdfpag {
  display: block; width: 100%; height: auto;
  margin: 0 0 10px; background: #fff;
}
.lupa-texto {
  display: block;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lupa-vacio { display: block; font-size: 12.5px; color: var(--fg-dim); }
/* La tabla: encabezado pegado arriba y celdas que no se parten a la mitad. */
.lupa-tabla { border-collapse: collapse; font-size: 12px; width: max-content; min-width: 100%; }
.lupa-tabla th, .lupa-tabla td {
  border: 1px solid var(--line-2);
  padding: 6px 9px;
  text-align: left;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lupa-tabla th { position: sticky; top: 0; background: var(--bg-2); font-weight: 700; z-index: 1; }
.lupa-tabla tbody tr:nth-child(even) { background: var(--hover); }
.agregar-campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--fg-dim); }
.agregar-campo textarea {
  font: inherit; font-size: 14px; line-height: 1.45; padding: 10px 12px; resize: vertical;
  color: var(--fg); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; outline: none;
}
.agregar-campo textarea:focus { border-color: var(--accent); }
.agregar-botones { display: flex; gap: 8px; justify-content: flex-end; }
.agregar-botones button {
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 16px;
  border-radius: 10px; cursor: pointer; border: 1px solid transparent;
}
.agregar-cancelar { background: transparent; color: var(--fg-dim); border-color: var(--line-2); }
.agregar-ok { background: var(--accent); color: #06231a; }
.agregar-ok:disabled { opacity: .45; cursor: default; }
.agregar-nota { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--fg-dim); }

/* ============ CUANDO LA COMPUTADORA ESTA APAGADA ============
   Se pone gris TODA la sala, no solo los cuartos: antes las tarjetas seguian
   blancas y la pantalla quedaba a medias, con una parte apagada y otra no. */
#edificio.apagado { filter: grayscale(1) brightness(.72); }
/* Ya no hace falta apagar cada pieza por separado: el filtro es de toda la sala. */
#edificio.apagado .piso::after,
#edificio.apagado .puesto.apagado .cuarto,
#edificio.apagado .puesto.apagado .tablero .vidrio { filter: none; }

/* Al pasar el mouse, un poco MENOS gris — pero gris.
   No se prende: sigue apagada. Lo unico que dice es "esto se puede picar", y
   se aprende rapido porque al picarlo no pasa lo que pasaria si estuviera
   prendida. */
#edificio.apagado .puesto:hover { filter: brightness(1.18); }

.agregar-puesto .invita-mas { font-size: 24px; width: 40px; height: 40px; }
.agregar-puesto .invita-txt { font-size: 11px; }
/* En una sola columna (telefono) el boton no tiene columnas que abarcar. */
#edificio:not(.rejilla) .agregar-puesto { grid-column: auto !important; width: 100%; }


/* ============ EL PISO ES LA TARJETA ============
   La informacion del agente vive DENTRO del suelo, justo debajo de quien la
   protagoniza. No hay caja flotando ni espacio muerto entre una cosa y otra:
   el puesto mide el cuarto (hasta el piso) mas esta banda, y nada mas. */
.puesto {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
.puesto .marco { align-self: center; }
/* El lienzo se recorta por ABAJO: arriba queda la pared entera. */
.cuarto { margin-top: 0 !important; }

/* La linea suelta del piso se va: ahora el piso ES la banda. */
.piso::after { display: none; }

.tablero {
  width: 100%;
  flex: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 7px 12px;
  overflow: hidden;
  /* El suelo, ensanchado. Negro en claro, blanco en oscuro — el mismo color de
     la linea que habia antes, ahora con la informacion adentro. */
  background: var(--fg);
  color: var(--bg);
}
.tablero .quien { display: flex; align-items: center; gap: 6px; margin: 0; }
.tablero .tinta { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tablero .nombre {
  font-size: 12.5px; font-weight: 700; line-height: 1.15; color: var(--bg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tablero .valor {
  display: block; font-size: 11px; line-height: 1.3;
  color: color-mix(in srgb, var(--bg) 72%, var(--fg));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tablero .valor.accion { color: color-mix(in srgb, var(--bg) 52%, var(--fg)); }
.tablero .reloj { color: inherit; }
/* Sobre la banda, el aviso de "te pregunta" va como una linea de color, no como
   una cajita: adentro del piso no cabe una tarjeta dentro de otra. */
.tablero .aviso {
  margin: 1px 0 0; padding: 0; border: none; background: none; border-radius: 0;
  overflow: hidden;
}
.tablero .aviso .senal { color: #F0A87F; margin: 0; }
.tablero .aviso.entrega .senal { color: #DCC24A; }
.tablero .aviso .dice {
  display: block; font-size: 11px; line-height: 1.3;
  color: var(--bg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El que te pregunta: su banda se pinta del color de la alerta. */
.puesto.preguntando .tablero { background: var(--alerta); color: #fff; }
.puesto.preguntando .tablero .nombre,
.puesto.preguntando .tablero .valor,
.puesto.preguntando .tablero .aviso .dice { color: #fff; }
.puesto.preguntando .tablero .aviso .senal { color: #ffe0cf; }
.puesto.preguntando .tablero .vidrio { animation: none; }



/* ============ EL VESTIDOR VA ENCIMA DEL CHAT ============
   Se abre DESDE un boton que vive dentro del chat, asi que tiene que salir
   delante de el. Estaba en z-index 30 contra los 2000 del chat: se abria
   detras y parecia que el boton no hacia nada. */
.vestidor { z-index: 2350; }



/* ============ El icono del agente, a la izquierda de su nombre ============
   Es el MISMO icono que le elegiste en ORQUESTA. Junto con su personaje y su
   color, es lo que lo hace reconocible sin leer una palabra. */
.tablero .icono {
  font-size: 14px;
  line-height: 1;
  flex: none;
  display: inline-flex;
}

/* ============ La informacion del piso, CENTRADA ============
   Va debajo de su dueño, y debajo quiere decir centrada bajo el — no pegada a
   la orilla izquierda de la banda, lejos de la persona a la que describe. */
.tablero { align-items: center; text-align: center; }
.tablero .quien { justify-content: center; }
.tablero .campo,
.tablero .valor,
.tablero .aviso,
.tablero .aviso .dice { width: 100%; text-align: center; }


/* ===================== LA SALA: UNA TARJETA POR AGENTE =====================

   Antes cada agente era un PISO: una franja ancha con el cuarto de un lado y su
   tablero del otro, apilada con las demas. Se leia como una lista sin fin y no
   se veia donde terminaba uno y empezaba el siguiente.

   Ahora cada agente es una tarjeta cuadrada sobre un fondo gris, con aire y
   sombra: el mismo lenguaje que los paneles flotantes de la aplicacion de
   escritorio. Cabe mas, se hacen mas columnas; no cabe, hay scroll.

   El color vive en las pantallas del escritorio y el movimiento en el
   personaje. Aqui no se pinta ninguna barrita ni ningun parpadeo encima. */

:root { --marco-sala: #363636; }
:root[data-theme="light"] { --marco-sala: #b2b3b5; }

#edificio.rejilla {
  display: grid;
  gap: 14px;
  padding: 14px;
  align-content: start;
  /* SIN ESTO LAS TARJETAS SE ENCIMAN.
     De fabrica una rejilla ESTIRA sus celdas a lo alto de su renglon, y ese
     estirado le gana al `aspect-ratio` de la tarjeta: el renglon se media por
     el CONTENIDO (el pie, unos 100 px) mientras la tarjeta seguia midiendo su
     ancho completo. En el telefono, con una sola columna, cada tarjeta se
     montaba sobre la siguiente y solo se veian las cabezas asomando. */
  align-items: start;
  scroll-snap-type: none;
  background: var(--marco-sala);
}

/* LA TARJETA ES CUADRADA: misma base y misma altura, mida lo que mida. */
#edificio.rejilla .puesto {
  aspect-ratio: 1 / 1;
  width: auto;
  height: auto;
  /* EL TEXTO SE MIDE CONTRA LA TARJETA, no contra la pantalla: asi el pie ocupa
     SIEMPRE la misma fraccion del cuadro, en el telefono y en el monitor. Si el
     pie midiera lo mismo en pixeles en todos lados, en una tarjeta chica se
     comeria la mitad y el agente saldria mas acercado que su vecino. */
  container-type: inline-size;
  /* Por renglones y no por flex: `minmax(0,1fr)` para la escena deja clarisimo
     que se queda con lo que sobre y que puede encogerse.
     LA COLUMNA SE DECLARA. Sin esto la rejilla se inventa una columna `auto`,
     que mide lo que mide el texto mas largo del pie: la escena salia del ancho
     del NOMBRE de cada agente y cada tarjeta recortaba el dibujo por un lado
     distinto. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 0;
  background: var(--pared);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
}
:root[data-theme="light"] #edificio.rejilla .puesto {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .14), 0 2px 5px rgba(0, 0, 0, .09);
}

/* La escena se lleva lo que sobra y se ancla por el pie: el escritorio queda al
   ras del texto y el recorte se lo lleva el hueco de arriba del agente. */
#edificio.rejilla .puesto .marco {
  position: relative;
  min-height: 0;
  width: auto;
  height: auto;
  align-self: stretch;
  overflow: hidden;
}
/* EL TAMAÑO DEL LIENZO LO PONE `sala.js` EN PIXELES, NO ESTE CSS.
   Con `width:100%` el lienzo salia del ANCHO de la tarjeta y el encuadre
   cambiaba de una tarjeta a otra. Aqui solo se dice que va posicionado y que es
   pixel art; la medida sale del ALTO de la escena (ver `acomodarLienzo`). */
#edificio.rejilla .puesto .cuarto {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
}

/* El pie: el nombre, que hace y en que anda. Lo que antes se apretujaba en la
   franja del piso vive aqui, y si quieres saber mas abres el chat.
   VA SOBRE LA TARJETA, no sobre una banda invertida: la tarjeta es una sola
   superficie con una linea que separa el dibujo del texto. */
#edificio.rejilla .tablero {
  align-self: stretch;
  height: auto;
  min-width: 0;
  gap: 0;
  padding: clamp(4px, 3.5cqw, 8px) clamp(5px, 4.5cqw, 10px) clamp(5px, 4.5cqw, 10px);
  text-align: left;
  align-items: stretch;
  background: var(--pared);
  color: var(--fg);
  border-top: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
}
/* Todo el pie alineado a la izquierda, como en la aplicacion de escritorio. El
   centrado era del tiempo en que el pie era la banda del piso debajo de su
   dueño; en una tarjeta con tres renglones deja los textos flotando. */
#edificio.rejilla .tablero .valor,
#edificio.rejilla .tablero .aviso,
#edificio.rejilla .tablero .aviso .dice { text-align: left; }
/* EL RENGLON DEL NOMBRE MIDE LO MISMO EN TODAS LAS TARJETAS.
   La bolita de mensajes sin leer media 18 px y el nombre 14: en las tarjetas de
   quien te habia escrito el pie crecia 4 px, la escena perdia esos 4 px y ese
   agente salia de otro tamaño que su vecino. Ahora el renglon tiene su altura y
   la bolita se acomoda adentro. */
#edificio.rejilla .tablero .quien {
  justify-content: flex-start;
  align-items: center;
  gap: clamp(3px, 2.5cqw, 6px);
  height: clamp(10px, 6.6cqw, 15px);
  overflow: hidden;
}
#edificio.rejilla .tablero .sinleer {
  min-width: clamp(9px, 5.6cqw, 14px);
  height: clamp(9px, 5.6cqw, 14px);
  font-size: clamp(6.5px, 3.8cqw, 9px);
  padding: 0 clamp(2px, 1.2cqw, 4px);
}
#edificio.rejilla .tablero .icono { font-size: clamp(9px, 6cqw, 14px); }
#edificio.rejilla .tablero .nombre {
  font-size: clamp(8px, 5.6cqw, 12.5px);
  letter-spacing: .06em;
  color: var(--fg);
}
/* La tarea se va: casi siempre repetia el nombre y era la mitad del grosor. */
#edificio.rejilla .tablero [data-tarea] { display: none; }
#edificio.rejilla .tablero .valor.accion {
  font-size: clamp(8px, 5.4cqw, 11px);
  color: var(--fg-dim);
  margin-top: clamp(1px, 1cqw, 3px);
}
#edificio.rejilla .tablero .valor .quieto { color: var(--fg-mute); }
/* De la pregunta se queda el aviso corto; el texto largo se lee abriendo el
   chat, que es a donde lleva picar la tarjeta. */
#edificio.rejilla .tablero .aviso {
  margin: clamp(1px, 1.4cqw, 4px) 0 0;
  padding: 0; border: none; background: none;
}
#edificio.rejilla .tablero .aviso .dice { display: none; }
#edificio.rejilla .tablero .aviso .senal {
  display: block;
  margin: 0;
  font-size: clamp(7px, 4.6cqw, 9.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* El que te pregunta y el que entrega: SOLO el renglon cambia de color. Nada de
   pintar el pie entero — el color vive en las pantallas del escritorio. */
#edificio.rejilla .tablero .aviso.pregunta .senal { color: var(--alerta); }
#edificio.rejilla .tablero .aviso.entrega .senal { color: var(--bronce); }
#edificio.rejilla .puesto.preguntando .tablero { background: var(--pared); color: var(--fg); }
#edificio.rejilla .puesto.preguntando .tablero .nombre { color: var(--fg); }
#edificio.rejilla .puesto.preguntando .tablero .valor { color: var(--fg-dim); }

/* El boton de agregar tambien es una tarjeta, pero punteada: no es un agente,
   es un lugar. Asi no queda una cosa chaparra al lado de puros cuadrados. */
#edificio.rejilla .agregar-puesto {
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--fg) 32%, transparent);
  background: none;
}
#edificio.rejilla .agregar-puesto:hover { border-color: color-mix(in srgb, var(--fg) 60%, transparent); }

/* ============ AJUSTES: el tema y tus agentes ============
   Pantalla completa, como el resto de lo que se viene a hacer aquí. Mismo
   lenguaje: esquinas rectas, el acento solo en lo que esta puesto o se toca. */
.ajustes { position: fixed; inset: 0; z-index: 2400; display: flex; }
.ajustes .velo { display: none; }
.ajustes-caja {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--pared); overflow-y: auto;
}
.ajustes-top {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px 10px; background: var(--pared);
}
.ajustes-tit { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; }
.ajustes-x {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
  color: var(--fg-dim); background: transparent; border: 1px solid var(--line-2);
}
.ajustes-x:hover { color: var(--fg); border-color: var(--fg-dim); }
.ajustes-cuerpo { padding: 0 20px 28px; display: flex; flex-direction: column; gap: 22px; }
.ajustes-seccion { display: flex; flex-direction: column; gap: 8px; }
.ajustes-seccion h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-dim); }
.ajustes-dim { margin: -4px 0 4px; font-size: 12.5px; color: var(--fg-mute); }
.ajustes-nada { font-size: 12.5px; color: var(--fg-mute); }

/* Los temas: una fila por tema, con su color y si es claro u oscuro. */
.ajustes-temas { display: flex; flex-direction: column; gap: 6px; }
.ajustes-tema {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font: inherit; font-size: 13px; text-align: left; padding: 10px 12px; cursor: pointer;
  color: var(--fg); background: var(--bg-2); border: 1px solid var(--line); border-radius: 0;
}
.ajustes-tema:hover { border-color: var(--fg-dim); }
.ajustes-tema.ajustes-tema-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); }
.ajustes-temanombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajustes-temabase { font-size: 11.5px; color: var(--fg-mute); }
.ajustes-punto { flex: none; width: 12px; height: 12px; background: var(--fg-mute); border: 1px solid var(--line-2); }

/* Tus agentes: la fila se abre y debajo sale su ficha. */
.ajustes-agentes { display: flex; flex-direction: column; gap: 6px; }
.ajustes-fila { display: flex; flex-direction: column; }
.ajustes-uno {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font: inherit; font-size: 13px; text-align: left; padding: 10px 12px; cursor: pointer;
  color: var(--fg); background: var(--bg-2); border: 1px solid var(--line); border-radius: 0;
}
.ajustes-uno:hover { border-color: var(--fg-dim); }
.ajustes-uno.abierto { border-color: var(--accent); border-bottom-color: var(--line); }
.ajustes-nombre { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ajustes-chip { font-size: 11px; color: var(--fg-mute); }

.ajustes-ficha {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 12px; background: var(--bg-2);
  border: 1px solid var(--accent); border-top: none;
}
.ajustes-campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--fg-dim); }
.ajustes-input {
  font: inherit; font-size: 13px; padding: 9px 11px;
  color: var(--fg); background: var(--pared);
  border: 1px solid var(--line-2); border-radius: 0; outline: none;
}
.ajustes-input:focus { border-color: var(--accent); }
.ajustes-motores, .ajustes-esfuerzos { display: flex; flex-wrap: wrap; gap: 6px; }
.ajustes-motor, .ajustes-esf {
  font: inherit; font-size: 12.5px; padding: 7px 12px; cursor: pointer;
  color: var(--fg-dim); background: var(--pared);
  border: 1px solid var(--line-2); border-radius: 0;
}
.ajustes-motor:hover, .ajustes-esf:hover { color: var(--fg); border-color: var(--fg-dim); }
.ajustes-motor.on, .ajustes-esf.on {
  color: var(--fg); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--pared));
}
.ajustes-color { width: 54px; height: 32px; padding: 0; background: none; border: 1px solid var(--line-2); cursor: pointer; }
/* La cejilla izquierda es como esta app dice "esto es un aviso". */
.ajustes-nota { padding-left: 9px; border-left: 2px solid var(--line-2); font-size: 11.5px; line-height: 1.5; color: var(--fg-mute); }
.ajustes-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.ajustes-ok {
  font: inherit; font-size: 13px; padding: 9px 16px; cursor: pointer;
  color: #0a120c; background: var(--accent); border: 1px solid var(--accent); border-radius: 0;
}
.ajustes-ok:disabled { opacity: .5; cursor: default; }
.ajustes-cancelar, .ajustes-quitar {
  font: inherit; font-size: 13px; padding: 9px 14px; cursor: pointer;
  color: var(--fg-dim); background: transparent; border: 1px solid var(--line-2); border-radius: 0;
}
.ajustes-cancelar:hover { color: var(--fg); border-color: var(--fg-dim); }
.ajustes-quitar { margin-left: auto; color: #e05548; border-color: color-mix(in srgb, #e05548 45%, transparent); }
.ajustes-quitar:hover { background: color-mix(in srgb, #e05548 12%, transparent); }
.ajustes-agregar {
  align-self: flex-start; margin-top: 4px;
  font: inherit; font-size: 13px; padding: 9px 14px; cursor: pointer;
  color: var(--fg-dim); background: transparent; border: 1px dashed var(--line-2); border-radius: 0;
}
.ajustes-agregar:hover { color: var(--fg); border-color: var(--fg-dim); }

/* ============================================================
   LOS CINCO BOTONES DE ABAJO Y SUS PANTALLAS (1 oct 2026, Carlos).
   El grafo, el asistente, la sala en tus grupos, los chats grupales y la
   agenda. Los botones son los de la cabina de la app (.cb-gbtn de App.css):
   solo icono, pegados con su línea, el elegido invertido, ámbar el que te
   espera y el número en el color de acento. Lo que sigue (los grupos, el
   chat grupal, el cielo) sale de App.css con sus mismas medidas.
   ============================================================ */
:root {
  --wf: rgba(226, 229, 236, 0.30);
  --mono: "Roboto Mono", "JetBrains Mono", ui-monospace, monospace;
  --panel-bg: var(--pared);
  --marco: #363636;
  --menu-alto: 63px;
}
:root[data-theme="light"] { --wf: #111318; --marco: #b2b3b5; }

#app { grid-template-rows: auto minmax(0, 1fr) auto; }
#vistas { position: relative; min-height: 0; overflow: hidden; background: var(--bg-2); }
.vista { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.vista[hidden] { display: none; }
.vista[data-v="agentes"] > #edificio { flex: 1; min-height: 0; }
.vista-vacia { margin: auto; max-width: 320px; padding: 24px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--fg-dim); }

.menu { flex: none; display: flex; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--pared); border-top: 1px solid var(--linea); }
.menu-b {
  flex: 1 1 0; min-width: 0; height: 46px; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--wf); background: transparent; color: var(--fg); font-size: 20px; cursor: pointer;
  transition: background .12s, color .12s;
}
.menu-b + .menu-b { border-left: none; }
.menu-b.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
/* (La clase es `espera` y no `pregunta` como en la app: aquí `.pregunta` es la caja
   de la pregunta del chat y le pondría su relleno al botón.) */
.menu-b.espera:not(.on) { color: #d97706; border-color: #d97706; box-shadow: inset 3px 0 0 #d97706; }
.menu-num {
  position: absolute; top: -6px; right: -6px; z-index: 1;
  min-width: 16px; height: 16px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent, #0f1410); font: 700 9px var(--mono);
}
/* Con el teclado abierto los botones se esconden: el espacio es para leer. */
body.tecleando .menu { display: none; }

/* El chat de un agente se abre encima de la pantalla, pero deja ver los botones. */
body:not(.en-columnas) .chats { bottom: calc(var(--menu-alto) + env(safe-area-inset-bottom)); }
body.tecleando:not(.en-columnas) .chats { bottom: 0; }

/* El chat del asistente, pegado a su botón: sin la barra de arriba (el título ya
   dice quién es) y sin entrar deslizándose. */
.chat.incrustado { flex: 1 1 0; transform: none; transition: none; }
.chat.incrustado .chat-tope { display: none; }

/* ---- LA SALA EN TUS GRUPOS: el nombre del grupo a todo lo ancho y sus tarjetas
   debajo. El alto de cada tarjeta lo escribe sala.js en --lado. ---- */
#edificio.rejilla.en-grupos .puesto,
#edificio.rejilla.en-grupos .agregar-puesto { height: var(--lado, auto); }
.sala-grupo { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 2px 2px 0; font-family: var(--mono); }
.sala-grupo:not(:first-child) { margin-top: 8px; }
.sala-grupo-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; text-transform: uppercase; letter-spacing: .15em; color: var(--fg-soft); }
.sala-grupo-d, .sala-grupo-n { flex: none; font-size: 10px; color: var(--fg-dim); }
.sala-grupo-n { margin-left: auto; }

/* ---- EL CIELO (src/cielo/ de la app, App.css tal cual). El motor pone --ci-fondo
   y --ci-tinta. Aquí además la mira lleva su aviso: ámbar si te pregunta algo, del
   acento si terminó y te dejó algo. ---- */
.grafo-marco { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--pared); }
.grafo-aviso { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; font: 13px/1.6 var(--mono); color: var(--fg-dim); background: var(--pared); }
.grafo-aviso[hidden] { display: none; }
.grafo-aviso b { font-size: 15px; font-weight: 500; color: var(--fg); }
.ci { --ci-fondo: #000000; --ci-tinta: #f4f4f4; position: absolute; inset: 0; overflow: hidden; background: var(--ci-fondo); }
/* El motor pone a los agentes de la orilla pegados a la caja; en el teléfono la
   caja va 12 px adentro (lo mismo que los botones de abajo) para que no toquen la
   orilla de la pantalla. La sombra rellena esos 12 px con el mismo cielo. */
.grafo-marco > .ci { inset: 12px; box-shadow: 0 0 0 12px var(--ci-fondo); }
.ci-lineas, .ci-cielo { position: absolute; left: 0; top: 0; display: block; }
.ci-lineas { pointer-events: none; }
.ci-cielo { cursor: grab; touch-action: none; }
.ci-cielo.agarrando { cursor: grabbing; }
.ci [hidden] { display: none !important; }
.ci-aro { position: absolute; left: 0; top: 0; pointer-events: none; border: 1px solid var(--ci-tinta); opacity: .3; box-sizing: border-box; }
.ci-rotulo {
  position: absolute; left: 8px; bottom: 8px; pointer-events: none; z-index: 3;
  width: min(240px, calc(100% - 16px)); height: 58px; box-sizing: border-box;
  background: color-mix(in srgb, var(--ci-fondo) 86%, transparent); border: 2px solid var(--ci-tinta); padding: 6px 8px;
  color: var(--ci-tinta); font: 11px/1.35 var(--mono); overflow: hidden;
}
.ci-rtexto { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.ci-rt { font-weight: 700; }
.ci-rq { opacity: .65; white-space: pre-wrap; }
.ci-miras, .ci-orilla { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.ci-mira {
  --c: var(--ci-tinta);
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / 10px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 3px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 10px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 3px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 10px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 3px 10px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 10px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 3px 10px no-repeat;
}
.ci-mira.asistente, .ci-borde.asistente { --c: var(--accent); }
.ci-mira.pregunta, .ci-borde.pregunta { --c: #d97706; }
/* El motor les pone la clase `pregunta`, que aquí es también la caja de la pregunta
   del chat: se le quita lo de esa caja (su línea, su relleno y su recorte, que
   escondía el cuadrito del icono). */
.ci-mira.pregunta, .ci-borde.pregunta { border-top: 0; padding: 0; max-height: none; overflow: visible; }
.ci-mira.termino, .ci-borde.termino { --c: var(--accent); }
/* El que te pregunta además parpadea, como su cuadrito en la barra de sesiones de
   la app: así no se confunde con el que terminó aunque tu acento sea naranja. */
.ci-mira.pregunta .ci-ico, .ci-borde.pregunta { animation: ci-parpadea 1s steps(2, jump-none) infinite; }
@keyframes ci-parpadea { 0% { opacity: 1; } 100% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ci-mira.pregunta .ci-ico, .ci-borde.pregunta { animation: none; } }
.ci-ico {
  position: absolute; left: calc(100% + 3px); top: -14px; min-width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c); color: var(--ci-fondo); pointer-events: auto; cursor: pointer; outline: none;
}
.ci-ico i { font-size: 14px; line-height: 1; display: block; }
.ci-ico:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.ci-borde {
  --c: var(--ci-tinta);
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  display: grid; place-items: center; background: var(--c); color: var(--ci-fondo);
  pointer-events: auto; cursor: pointer; outline: none;
}
.ci-borde i { font-size: 14px; line-height: 1; display: block; }
.ci-borde:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }

/* ---- LOS CHATS GRUPALES (Canal.tsx de la app, App.css tal cual): la cara en su
   circulito, el nombre y la tarea, la burbuja de siempre y abajo cómo contestarle.
   El aviso de que te espera es una línea alrededor de TODA la burbuja. ---- */
.cn { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg-2); }
.cn-lista { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 16px; padding: 14px 14px 20px; }
.cn-bloque { display: flex; flex-direction: column; gap: 12px; }
.cn-dia { align-self: center; font-family: var(--mono); font-size: 10.5px; color: var(--fg-mute); padding: 3px 10px; background: color-mix(in srgb, var(--panel-bg) 85%, transparent); }
.cn-msg { display: flex; flex-direction: column; gap: 6px; }
.cn-msg.superada { opacity: .55; }
.cn-fila { display: flex; gap: 10px; align-items: flex-start; }
.cn-cara { flex: none; width: 46px; height: 46px; overflow: hidden; background: color-mix(in srgb, var(--c, #888) 22%, var(--panel-bg)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, #888) 60%, transparent); }
.cn-cara canvas { display: block; }
.cn-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cn-quien { display: flex; flex-direction: column; line-height: 1.25; padding-top: 2px; }
.cn-quien b { font-size: 13px; font-weight: 600; color: var(--fg); }
.cn-quien span { font-size: 11.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn .term-chat-msg.cn-burbuja { max-width: 100%; align-self: flex-start; position: relative; padding-bottom: 22px; }
.cn .term-chat-msg.cn-burbuja.espera { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cn-texto { max-height: 10.5em; overflow: hidden; margin: 0 -12px; padding: 0 12px; }
.cn-texto.abierto { max-height: none; }
.cn-texto.cortado { -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent); mask-image: linear-gradient(to bottom, #000 65%, transparent); }
.cn-vertodo { display: block; border: none; background: none; padding: 3px 0 0; color: inherit; opacity: .7; font: 500 11.5px var(--mono); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cn-vertodo[hidden] { display: none; }
.cn-pregunta { margin-top: 8px; padding: 6px 8px; background: color-mix(in srgb, currentColor 7%, transparent); font-weight: 600; line-height: 1.45; }
.cn-hora { position: absolute; right: 10px; bottom: 5px; font-size: 10px; opacity: .55; font-family: var(--mono); white-space: nowrap; }
.cn-resp { display: flex; flex-wrap: wrap; gap: 5px; }
.cn-op { border: 1px solid var(--wf); background: var(--panel-bg); color: var(--fg); padding: 6px 8px; font: 500 12px var(--mono); cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
.cn-op.cn-accion { color: var(--fg-dim); }
.cn-op i { font-size: 13px; }
.cn-nota { font: 11px var(--mono); color: var(--fg-mute); }
.cn .term-chat-msg.cn-tuya { align-self: flex-end; max-width: 80%; position: relative; padding-bottom: 22px; }
.cn-cita { display: flex; flex-direction: column; gap: 1px; margin: 0 0 6px; padding: 5px 8px; background: color-mix(in srgb, currentColor 9%, transparent); font-size: 12px; line-height: 1.35; white-space: normal; }
.cn-cita b { font-size: 11px; font-weight: 600; color: var(--accent); }
.cn-cita span { opacity: .8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cn-vacio { margin: auto; max-width: 380px; text-align: center; display: flex; flex-direction: column; gap: 6px; font: 13px var(--mono); color: color-mix(in srgb, var(--fg) 60%, var(--marco)); }
.cn-vacio b { font-size: 15px; font-weight: 500; color: color-mix(in srgb, var(--fg) 80%, var(--marco)); }
.cn-escribiendo { align-items: center; }
.cn-escribiendo > span { font: 12px var(--mono); color: var(--fg-mute); }
/* Una pestaña por chat (el asistente y cada líder): las de la cabina de la app. */
.cn-pestanas { flex: none; padding: 8px 12px; border-bottom: 1px solid var(--wf); }
.cn-pestanas[hidden] { display: none; }
.cn .cb-tabs { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; }
.cn .cb-tabs::-webkit-scrollbar { display: none; }
.cn .cb-tab { display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 180px; padding: 4px 10px 4px 5px; border: 1px solid var(--wf); cursor: pointer; background: transparent; color: var(--fg-dim); font-size: 12.5px; font-weight: 600; transition: background .12s, color .12s, transform .1s; }
.cn .cb-tab:active { transform: scale(0.97); }
.cn .cb-tab.on { background: var(--fg); color: var(--bg); }
.cn-pcara { flex: none; width: 22px; height: 22px; overflow: hidden; display: block; background: color-mix(in srgb, var(--c, #888) 22%, var(--panel-bg)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c, #888) 60%, transparent); }
.cn-pcara canvas { display: block; }
.cn-pnombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-pcuenta { flex: none; font: 600 11px var(--mono); color: #d97706; }
.cn .cb-tab.on .cn-pcuenta { color: inherit; }
/* A qué le respondes, arriba de la caja: con su contorno, sin rayita a la izquierda. */
.cn .kbar-resp { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.cn .kbar-resp.cn-citando { flex: none; margin: 0 12px 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
.cn .kbar-resp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cn .kbar-resp-quien { font-size: 11px; color: var(--accent); font-weight: 500; }
.cn .kbar-resp-frag { font-size: 12px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn .kbar-resp-x { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--fg-mute); cursor: pointer; font-size: 14px; }
.cn-citazona { flex: none; }
.cn .term-chat-inputrow { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.cn .term-chat-input { flex: 1; min-width: 0; resize: none; font: inherit; font-size: 13px; line-height: 1.45; padding: 8px 11px; border: 1px solid var(--line-2); background: var(--bg); color: var(--fg); outline: none; max-height: 150px; }
.cn .term-chat-input:focus { border-color: var(--fg-dim); }
.cn .term-chat-input::placeholder { color: var(--fg-mute); }
.cn .term-chat-input.jevph::placeholder { color: var(--fg); opacity: .42; }
.cn .term-chat-send { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; padding: 0; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--fg-dim); cursor: pointer; font-size: 16px; }
.cn .term-chat-send[hidden] { display: none; }
.cn .term-chat-send:disabled { opacity: .4; cursor: default; }

/* ---- LA AGENDA PARTIDA: arriba el Foco (la ficha se desliza), abajo el día o el
   mes. Es la agenda de siempre con sus mismas piezas, acomodada en dos mitades. ---- */
/* La columna va en minmax(0, 1fr): sin eso la fila de botones rápidos (que no se
   parte) ensancha toda la agenda más allá de la pantalla. */
.agenda.ag.partida { position: absolute; inset: 0; z-index: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.ag.partida .ag-arriba { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line-2); }
.ag.partida .ag-focov { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ag.partida .ag-abajo { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
.ag.partida .ag-top { min-width: 0; padding: 8px 10px 6px; gap: 5px; }
.ag.partida .ag-flecha { flex: none; padding: 4px 8px; font-size: 16px; line-height: 1; }
.ag.partida .ag-cuando { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: inherit; font-size: 14px; font-weight: 600; background: none; border: none; color: var(--fg); padding: 0 2px; white-space: nowrap; cursor: pointer; }
.ag.partida .ag-segcal { margin: 0; flex: none; }
.ag.partida .ag-segcal button { flex: none; padding: 5px 8px; font-size: 13px; }
.ag.partida .ag-hoy { flex: none; padding: 5px 8px; font-size: 13px; }
.ag.partida .ag-abajo > .ag-nota { padding: 0 14px 4px; }
.ag.partida .ag-nota:empty { display: none; }
.ag.partida .ag-dtodo { top: 0; }
.ag.partida .ag-asist { padding: 8px 14px 0; gap: 10px; }
.ag.partida .ag-retrato { width: 56px; height: 46px; }
.ag.partida .ag-dice { font-size: 13px; }
.ag.partida .ag-fcont { padding: 8px 14px 10px; }
.ag.partida .ag-preg { margin: 8px 0 6px; }
.ag.partida .ag-ficha h2 { font-size: 17px; padding: 10px 12px 9px; }
/* "Vive en" y "Con quién" van con lo demás, en Ver más: arriba cabe la ficha. */
.ag.partida .ag-ficha .filas { display: none; }
.ag.partida .ag-ficha.abierta .filas { display: grid; }
.ag.partida .ag-vermas { padding: 8px; font-size: 13px; }
.ag.partida .ag-vacio { padding: 26px 20px; }
.ag.partida .ag-fbar { padding: 8px 12px 10px; }
.ag.partida .ag-entendi:empty { min-height: 0; margin-top: 0; }
.ag.partida .ag-rapidos .ag-b { height: 38px; font-size: 13px; padding: 0 11px; }
.ag.partida .ag-fab { bottom: 14px; right: 14px; width: 50px; height: 50px; font-size: 26px; }
.ag.partida .ag-hoja { max-height: 92%; padding-bottom: 0; }
/* El mes: el de la agenda de la computadora (.agc-dia de App.css). */
.ag-mesrej { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 4px 10px 10px; }
.ag-mesrej .dow { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mute); text-align: center; padding-bottom: 2px; }
.ag-mdia { min-height: 44px; border: 1px solid var(--line); background: var(--panel-bg); padding: 4px; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 2px; text-align: left; cursor: pointer; font-family: var(--mono); color: var(--fg); }
.ag-mdia .num { flex: none; min-width: 13px; margin-right: 2px; font-size: 10px; color: var(--fg-dim); line-height: 1; }
.ag-mdia.hoy .num { color: var(--accent); font-weight: 700; }
.ag-mdia.hoy { box-shadow: inset 0 2px 0 var(--accent); }
.ag-mdia.fuera { opacity: .38; }
.ag-mdia .puntos { display: contents; }
.ag-mdia .puntos i { width: 5px; height: 5px; background: var(--c); display: block; }
.ag-mdia .puntos i.hecho { opacity: .28; }
.ag-mdia .grandote { display: block; flex: none; background: var(--fg-soft); }

/* ============================================================
   ESQUINAS RECTAS, IGUAL QUE LA APP (App.css, orden de Carlos).
   Todo rectangular; las únicas excepciones son las burbujas del
   chat y los puntitos de estado, que son círculos funcionales.
   Va al final: aplasta cualquier radio presente o futuro.
   ============================================================ */
*, *::before, *::after { border-radius: 0 !important; }
.term-chat-msg { border-radius: 12px !important; }
.term-chat-msg.user { border-bottom-right-radius: 4px !important; }
.term-chat-msg.assistant { border-bottom-left-radius: 4px !important; }
.maquina .foco, .vivo .punto, .opcion .marca { border-radius: 50% !important; }
/* Las caras del chat grupal, el círculo del cielo, sus agentes asomados y los
   puntitos del mes: redondos también en la app. */
.cn-cara, .cn-pcara, .ci-aro, .ci-borde, .ag-mdia .puntos i, .ag-mdia .grandote { border-radius: 50% !important; }