:root {
  --fondo: #f3f5fa; --tarjeta: #ffffff; --texto: #131a33; --suave: #5b6482; --linea: #dfe3ee;
  --marino: #070b1a; --azul: #2b6cf6; --azul-suave: #e6eeff; --rosa: #e8558f; --verde: #1e9e6a;
  --ambar: #b97700; --rojo: #c8383f; --radio: 12px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0a0f20; --tarjeta: #121a33; --texto: #e9ecf7; --suave: #9aa3c2; --linea: #24304f;
    --azul: #6d9cff; --azul-suave: #1a2850; --rosa: #ff7fae; --verde: #4fd09a; --ambar: #f0b445; --rojo: #ff7a80;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh; overscroll-behavior-y: contain;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.cargando { padding: 48px 16px; text-align: center; color: var(--suave); }

/* Cabecera */
.cab {
  position: sticky; top: 0; z-index: 5; background: var(--marino); color: #fff;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px; display: flex; align-items: center; gap: 12px;
  border-bottom: 2px solid var(--rosa);
}
.cab img { height: 36px; width: 36px; border-radius: 50%; }
.cab .tit { flex: 1; min-width: 0; }
.cab .tit b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab .tit span { display: block; font-size: 12px; color: #aab4d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab button {
  background: transparent; border: 1px solid #33406b; color: #fff; border-radius: 8px; padding: 8px 10px;
  font-size: 14px; min-height: 40px;
}
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #7d86a6; margin-right: 6px; }
.punto.ok { background: #3ddc97; } .punto.mal { background: #ff7a80; } .punto.activa { background: var(--verde); }
.punto.archivada { background: transparent; border: 1px solid var(--suave); }
.punto.espera { background: var(--ambar); } .punto.nuevo { background: var(--rosa); }
.punto.trabaja { background: var(--verde); animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .punto.trabaja { animation: none; } }
.marca { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; white-space: nowrap; border: 1px solid currentColor; }
.marca.espera { color: var(--ambar); } .marca.nuevo { color: var(--rosa); } .marca.trabaja { color: var(--verde); }
.chip.aten { border-color: var(--rosa); }
.chip.aten[aria-pressed="false"] { color: var(--texto); text-decoration: none; }
.chip.aten[aria-pressed="true"] { background: var(--rosa); color: #fff; }
.chip.aten[aria-pressed="true"] small { color: #fff; }
.informe .meta { display: block; font-size: 12px; margin-top: 4px; }
.informe .meta button { background: none; border: 0; color: var(--azul); text-decoration: underline; padding: 4px 0; font-size: 12px; }

main { max-width: 880px; margin: 0 auto; padding: 12px 16px calc(32px + env(safe-area-inset-bottom)); }

/* Acceso */
.acceso { max-width: 380px; margin: 0 auto; padding: 32px 16px; }
.acceso .logo { display: block; width: 96px; height: 96px; border-radius: 50%; margin: 8px auto 16px; }
.acceso h1 { font-size: 20px; text-align: center; margin: 0 0 4px; }
.acceso p { color: var(--suave); font-size: 14px; }
.acceso .centro { text-align: center; }
.campo { display: block; margin: 14px 0; }
.campo span { display: block; font-size: 13px; color: var(--suave); margin-bottom: 4px; }
.campo input, .campo select, textarea, .buscar {
  width: 100%; padding: 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--tarjeta);
}
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 2px;
}
.boton {
  display: inline-block; background: var(--azul); color: #fff; border: 0; border-radius: 10px; padding: 12px 16px;
  font-weight: 600; min-height: 44px; text-decoration: none; text-align: center;
}
@media (prefers-color-scheme: dark) { .boton { color: #071022; } }
.boton.ancho { width: 100%; }
.boton.sec { background: transparent; color: var(--texto); border: 1px solid var(--linea); font-weight: 500; }
.boton.mini { padding: 8px 12px; min-height: 40px; font-size: 14px; }
.boton:disabled { opacity: .55; cursor: default; }
.error { color: var(--rojo); font-size: 14px; min-height: 20px; margin: 8px 0; }
.qr { display: block; width: 220px; max-width: 100%; margin: 12px auto; background: #fff; border-radius: 8px; }
.secreto { font-family: ui-monospace, Consolas, monospace; word-break: break-all; text-align: center; font-size: 14px; }
.codigos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-family: ui-monospace, Consolas, monospace;
  background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 10px; padding: 12px; text-align: center;
}

/* Filtros */
.ambitos { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.chip {
  border: 1px solid var(--linea); background: var(--tarjeta); border-radius: 999px; padding: 8px 14px; font-size: 14px;
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
}
.chip[aria-pressed="true"] { background: var(--azul-suave); border-color: var(--azul); font-weight: 600; }
.chip[aria-pressed="false"] { color: var(--suave); text-decoration: line-through; }
.chip small { font-weight: 400; color: var(--suave); text-decoration: none; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros .buscar { flex: 1 1 180px; }
.filtros select { flex: 0 1 auto; padding: 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--tarjeta); }
.aviso { background: var(--azul-suave); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 12px; }
.aviso.mal { background: transparent; border: 1px solid var(--rojo); }

/* Proyectos y sesiones */
.proy { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); margin: 0 0 14px; overflow: hidden; }
.proy > header { padding: 12px 14px 8px; }
.proy h2 { font-size: 16px; margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.proy h2 small { font-size: 12px; font-weight: 500; color: var(--suave); }
.etq { font-size: 11px; font-weight: 700; letter-spacing: .04em; border-radius: 6px; padding: 2px 6px; text-transform: uppercase; }
.etq.ak { background: var(--azul-suave); color: var(--azul); } .etq.sog { background: #fde9d2; color: #8a4b00; }
.etq.per, .etq.duda { background: var(--linea); color: var(--suave); }
@media (prefers-color-scheme: dark) { .etq.sog { background: #3a2a10; color: #f0b445; } }
.proy .det { color: var(--suave); font-size: 13px; margin: 2px 0 0; }
.proy details { padding: 0 14px 8px; font-size: 14px; }
.proy summary { color: var(--azul); cursor: pointer; padding: 6px 0; }
.proy details ul { margin: 4px 0 4px; padding-left: 20px; }
.proy details li { margin: 3px 0; }
.ses {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--linea);
  padding: 12px 14px; min-height: 56px;
}
.ses:hover { background: var(--azul-suave); }
.ses .fila { display: flex; align-items: center; gap: 8px; }
.ses .nom { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ses .cuando { font-size: 12px; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ses .pend { font-size: 13px; color: var(--suave); margin: 2px 0 0 15px; overflow-wrap: anywhere; }
.ses.oculta .nom { color: var(--suave); font-style: italic; }
.globo { background: var(--rosa); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; padding: 1px 8px; }
.esperando { font-size: 12px; color: var(--ambar); white-space: nowrap; }
.vacio { text-align: center; color: var(--suave); padding: 32px 8px; }
.pie { text-align: center; color: var(--suave); font-size: 12px; margin-top: 20px; }
.pie button { background: none; border: 0; color: var(--azul); text-decoration: underline; padding: 8px; }

/* Conversación */
.ficha { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; margin-bottom: 12px; font-size: 14px; }
.ficha dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.ficha dt { color: var(--suave); } .ficha dd { margin: 0; overflow-wrap: anywhere; }
.ficha .acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ficha .acciones select { padding: 8px; border: 1px solid var(--linea); border-radius: 10px; background: var(--tarjeta); min-height: 40px; max-width: 100%; }
.informe { white-space: pre-wrap; color: var(--suave); }
.hilo { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 150px; }
.msg { max-width: 92%; border-radius: 14px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 4px; }
@media (prefers-color-scheme: dark) { .msg.user { color: #071022; } }
.msg.assistant { align-self: flex-start; background: var(--tarjeta); border: 1px solid var(--linea); border-bottom-left-radius: 4px; }
.msg.sistema { align-self: center; background: transparent; border: 1px dashed var(--rojo); font-size: 14px; }
.msg .meta { display: block; font-size: 11px; opacity: .75; margin-top: 4px; }
.msg .meta button { background: none; border: 0; color: inherit; text-decoration: underline; padding: 4px; font-size: 11px; }
.redactar {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--fondo); border-top: 1px solid var(--linea);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
}
.redactar .dentro { max-width: 848px; margin: 0 auto; }
.redactar textarea { display: block; resize: none; height: 68px; }
.redactar .fila { display: flex; gap: 8px; margin-top: 6px; align-items: center; }
.redactar select { flex: 1; min-width: 0; padding: 8px; border: 1px solid var(--linea); border-radius: 10px; background: var(--tarjeta); min-height: 44px; }