:root {
  --fondo: #f6f7f9; --superficie: #ffffff; --superficie-2: #f0f2f5; --borde: #e2e5ea;
  --texto: #15191f; --texto-2: #5b6470; --acento: #0f766e; --acento-suave: #e0f2ef; --acento-texto: #ffffff;
  --rojo: #c62828; --rojo-suave: #fdecea; --ambar: #b26a00; --ambar-suave: #fff4e0; --verde: #1b7f3b; --verde-suave: #e6f4ea; --gris: #8a94a3;
  --burbuja-cliente: #ffffff; --burbuja-bot: #e9edf2; --burbuja-humano: #dcf3e6;
  --radio: 12px; --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1216; --superficie: #171b21; --superficie-2: #1e232b; --borde: #2a313b;
    --texto: #e8ebef; --texto-2: #9aa4b2; --acento: #2bb3a3; --acento-suave: #133a36; --acento-texto: #06201d;
    --rojo: #ef5350; --rojo-suave: #3a1715; --ambar: #f0a43a; --ambar-suave: #35270f; --verde: #4caf6d; --verde-suave: #14301e; --gris: #6b7480;
    --burbuja-cliente: #1e232b; --burbuja-bot: #252b35; --burbuja-humano: #173827;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.45 var(--fuente); -webkit-text-size-adjust: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--acento); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
.cargando { padding: 32px; text-align: center; color: var(--texto-2); }
.oculto { display: none !important; }
.tenue { color: var(--texto-2); }
.chico { font-size: .85rem; }
.pre { white-space: pre-wrap; word-break: break-word; }

/* ---- estructura ---- */
.marco { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; min-height: 100dvh; }
.lateral { background: var(--superficie); border-right: 1px solid var(--borde); padding: 16px 10px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; padding: 4px 8px 16px; }
.marca img { width: 30px; height: 30px; }
.nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; color: var(--texto); text-decoration: none; }
.nav a:hover { background: var(--superficie-2); }
.nav a[aria-current="page"] { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.lateral .pie { margin-top: auto; padding: 8px; font-size: .85rem; color: var(--texto-2); }
.principal { min-width: 0; display: flex; flex-direction: column; }
.barra { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: var(--superficie); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.barra .titulo { font-weight: 600; flex: 1; min-width: 0; }
.contenido { padding: 20px; max-width: 1100px; width: 100%; }
.pausa-aviso { background: var(--rojo); color: #fff; padding: 10px 20px; display: flex; gap: 12px; align-items: center; justify-content: space-between; font-weight: 600; }
.pausa-aviso button { background: #fff; color: var(--rojo); border: 0; }
.abajo { display: none; }

@media (max-width: 760px) {
  .marco { grid-template-columns: 1fr; }
  .lateral { display: none; }
  .barra { padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
  .contenido { padding: 16px; padding-bottom: 96px; }
  .abajo { display: flex; position: fixed; inset: auto 0 0 0; background: var(--superficie); border-top: 1px solid var(--borde); padding: 6px 4px max(6px, env(safe-area-inset-bottom)); z-index: 10; overflow-x: auto; }
  .abajo a { flex: 1 0 64px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; color: var(--texto-2); text-decoration: none; padding: 6px 2px; border-radius: 8px; position: relative; }
  .abajo a[aria-current="page"] { color: var(--acento); font-weight: 600; }
  .abajo a .insignia { position: absolute; top: 0; right: 14%; }
  .abajo svg { width: 22px; height: 22px; }
}
.nav svg { width: 18px; height: 18px; flex: none; }
.nav a span.et { display: flex; align-items: center; gap: 10px; }

/* ---- piezas ---- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie); cursor: pointer; font-weight: 500; text-decoration: none; color: var(--texto); touch-action: manipulation; }
.boton:hover { background: var(--superficie-2); }
.boton:disabled { opacity: .55; cursor: default; }
.boton.primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.boton.primario:hover { filter: brightness(1.07); }
.boton.peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.boton.suave { background: transparent; border-color: transparent; color: var(--acento); }
.boton.chico { min-height: 32px; padding: 4px 10px; font-size: .88rem; }
.boton-pausa { background: var(--rojo-suave); color: var(--rojo); border-color: transparent; font-weight: 600; }
.botones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.insignia { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rojo); color: #fff; font-size: .75rem; font-weight: 700; }
.insignia.ambar { background: var(--ambar); }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); }
.pila { display: flex; flex-direction: column; gap: 12px; }
.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rejilla { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
input[type=text], input[type=password], input[type=search], input[type=date], textarea, select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); font-size: 16px; }
textarea { resize: vertical; min-height: 80px; }
textarea.editor { min-height: 55vh; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
input:focus, textarea:focus, select:focus, .boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--texto-2); }
label > input, label > textarea, label > select { color: var(--texto); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chip { white-space: nowrap; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); cursor: pointer; font-size: .88rem; }
.chip[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.estado { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.estado.bot { background: var(--acento-suave); color: var(--acento); }
.estado.espera { background: var(--rojo-suave); color: var(--rojo); }
.estado.humano { background: var(--verde-suave); color: var(--verde); }
.estado.cerrada { background: var(--superficie-2); color: var(--texto-2); }
.estado.borrador { background: var(--ambar-suave); color: var(--ambar); }
.aviso { padding: 12px 14px; border-radius: 10px; background: var(--ambar-suave); color: var(--texto); border: 1px solid transparent; }
.aviso.rojo { background: var(--rojo-suave); }
.aviso.verde { background: var(--verde-suave); }
.vacio { padding: 32px 16px; text-align: center; color: var(--texto-2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--texto); color: var(--fondo); padding: 10px 16px; border-radius: 10px; z-index: 50; max-width: calc(100vw - 32px); box-shadow: var(--sombra); }
@media (max-width: 760px) { .toast { bottom: 88px; } }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 12px; overflow-x: auto; }
.pestanas button { border: 0; background: none; padding: 10px 12px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; color: var(--texto-2); }
.pestanas button[aria-selected="true"] { border-color: var(--acento); color: var(--acento); font-weight: 600; }

/* ---- lista de conversaciones ---- */
.lista { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.item { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--borde); text-decoration: none; color: var(--texto); align-items: flex-start; }
.item:last-child { border-bottom: 0; }
.item:hover { background: var(--superficie-2); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; font-weight: 700; color: var(--texto-2); flex: none; }
.item .cuerpo { min-width: 0; flex: 1; }
.item .linea1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.item .nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .ultimo { color: var(--texto-2); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }

/* ---- chat ---- */
.chat { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--superficie-2); border-radius: var(--radio); min-height: 200px; }
.burbuja { max-width: min(78%, 560px); padding: 8px 12px; border-radius: 14px; box-shadow: var(--sombra); white-space: pre-wrap; word-break: break-word; }
.burbuja .meta { display: block; font-size: .72rem; color: var(--texto-2); margin-top: 4px; }
.burbuja.user { background: var(--burbuja-cliente); align-self: flex-start; border-bottom-left-radius: 4px; }
.burbuja.assistant { background: var(--burbuja-bot); align-self: flex-end; border-bottom-right-radius: 4px; }
.burbuja.humano { background: var(--burbuja-humano); align-self: flex-end; border-bottom-right-radius: 4px; }
.adjunto { display: block; margin-top: 6px; padding: 6px 8px; border-radius: 8px; background: var(--superficie); font-size: .85rem; }
.adjunto img { display: block; max-width: 180px; max-height: 180px; border-radius: 6px; margin-bottom: 4px; }
.borrador-caja { border: 2px dashed var(--ambar); background: var(--ambar-suave); border-radius: var(--radio); padding: 12px; }
.resumen-caja { border-left: 4px solid var(--rojo); background: var(--rojo-suave); border-radius: 8px; padding: 10px 12px; }
.herramientas { font-size: .82rem; color: var(--texto-2); border-left: 3px solid var(--borde); padding-left: 10px; }

/* ---- semáforos ---- */
.luz { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.luz.verde { background: var(--verde); } .luz.amarillo { background: var(--ambar); } .luz.rojo { background: var(--rojo); } .luz.gris { background: var(--gris); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--texto-2); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; }

/* ---- acceso ---- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.acceso .tarjeta { width: 100%; max-width: 360px; }
.acceso img { width: 56px; height: 56px; }
dialog { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); padding: 18px; width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .4); }