/* Inter (SIL OFL), alojada en el repo: latin 400–700 variable. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

/* GestOp · rediseño (Claude Design, 28/09) — etapa 1 (base: colores, menú, franja de la llave) y
   etapa 2 (Centro de mensajes › Conversaciones). Ver design_handoff en docs/DISENO-CENTRO-MENSAJES.md.
   Etapa 5 (v0.22.0): las páginas viejas (Dashboard, Panel, Agente, Alertas, Pruebas) usan los mismos
   tokens (los colores fijos de index.html pasaron a var(--…)), así que el modo oscuro vale en todo. */

:root {
  --g-bg:#f4efe3; --surface:#fffdf7; --surface2:#efe8d6; --ink:#212122; --g-muted:#5f5b53; --line:#ddd4bf; --line2:#ebe4d3;
  --accent:#661317; --accent-fg:#f1ead8; --accent-tx:#661317; --sel:#f1e6cc; --chat:#ece5d3; --in:#fffdf7;
  --bot:#dde3ee; --human:#f2dcd3; --tpl:#fbf6e8; --tplline:#a8925c; --tpl-fg:#6a5626;
  --bot-bg:#dde3ee; --bot-fg:#314263; --hum-bg:#f5e1b3; --hum-fg:#634400; --ok-bg:#d9e9da; --ok-fg:#2b5533;
  --wait-bg:#661317; --wait-fg:#f7efdc; --fac-bg:#eedcdc; --warn:#8a5a00; --g-danger:#9b1c22;
  --bad-bg:#f4dcdc; --amb-bg:#f7ebc9; --pur-bg:#e9e2f1; --pur-fg:#4f3474;

  /* Variables de las páginas existentes → paleta Loekemeyer */
  --bg:var(--g-bg); --card:var(--surface); --text:var(--ink); --muted:var(--g-muted);
  --primary:var(--accent); --primary-hover:#4d0e11; --border:var(--line);
  --success:var(--ok-fg); --warning:var(--warn); --danger:var(--g-danger);
  --sidebar-bg:#212122; --sidebar-text:#f1ead8;
}
html.dark {
  --g-bg:#161617; --surface:#212122; --surface2:#2c2c2e; --ink:#f1ead8; --g-muted:#aba497; --line:#3a3a3d; --line2:#2d2d30;
  --accent:#8f2127; --accent-fg:#f7efdc; --accent-tx:#ea9a9e; --sel:#302b22; --chat:#1a1a1b; --in:#2c2c2e;
  --bot:#26314a; --human:#44282b; --tpl:#29261f; --tplline:#8a7a52; --tpl-fg:#d8c48e;
  --bot-bg:#26314a; --bot-fg:#bac7e4; --hum-bg:#4a3a14; --hum-fg:#f0cf85; --ok-bg:#1f3a26; --ok-fg:#a3d4ad;
  --wait-bg:#8f2127; --wait-fg:#f7efdc; --fac-bg:#3e2426; --warn:#e3b451; --g-danger:#f08489;
  --bad-bg:#4a2326; --amb-bg:#3e3316; --pur-bg:#352a47; --pur-fg:#cbb8ea;
}
/* Etapa 5 (v0.22.0): las páginas viejas usan los mismos tokens, así que el modo oscuro vale en todo el sistema. */

body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 14px; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; background: var(--g-bg); color: var(--ink); }
button, select, input, textarea { font-family: inherit; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.app .sidebar.sb2 { width: 212px; flex: none; background: #212122; color: #f1ead8; border-right: 1px solid #38383b; padding: 0; }
.sb2 .sb-logo { padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.sb2 .sb-logo img { width: 150px; height: auto; display: block; }
.sb2 .sb-logo div { font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.sb2 .sb-mods { display: flex; flex-direction: column; padding: 6px 0; gap: 2px; overflow: auto; min-height: 0; }
.sb2 .sb-mod { margin: 0 8px; padding: 8px 10px; background: transparent; border: 0; color: #f1ead8; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; border-radius: 2px; }
.sb2 .sb-mod:hover { background: #2c2c2e; }
.sb2 .sb-mod.cerrado-actual { background: #661317; }
.sb2 .sb-mod .flecha { margin-left: auto; font-size: 9px; transition: transform .15s; }
.sb2 .sb-mod.cerrado .flecha { transform: rotate(-90deg); }
.sb2 .sb-secs { margin: 2px 8px 6px 26px; border-left: 1px solid #4a4a4d; display: flex; flex-direction: column; gap: 1px; }
.sb2 .sb-sec { background: transparent; border: 0; text-align: left; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #c9c2b3;
  cursor: pointer; display: flex; align-items: center; gap: 6px; border-radius: 2px; }
.sb2 .sb-sec:hover { color: #f7efdc; }
.sb2 .sb-sec.activa { background: #661317; color: #f7efdc; }
.g-badge { margin-left: auto; min-width: 18px; padding: 0 5px; background: #f7efdc; color: #661317; font-size: 11px; font-weight: 900;
  border-radius: 2px; text-align: center; line-height: 16px; }
.sb2 .user-info { padding: 12px 16px; border-top: 1px solid #38383b; color: #aba497; font-size: 12px; }
.sb2 .user-info b { color: #f1ead8; display: block; font-size: 13px; }
.sb2 .user-info a { color: #aba497 !important; }
/* Barra lateral (Luis, 05/10): al entrar se ve ABIERTA, como siempre; el botón « la pliega y » la vuelve a fijar.
   Plegada (#app.sb-plegada) queda una tira de 12 px y la barra sale al pasar el mouse, por encima del contenido (no lo
   empuja). Abre a los 0,1 s y cierra a los 0,3 s, así un paso rápido del mouse por el borde no la dispara ni la cierra de
   golpe. Con el teclado (Tab) también sale: :focus-visible, no :focus, porque un clic deja el foco en el botón y la barra
   quedaría abierta tapando la bandeja. La tira se pinta si hay gente esperando (sb-espera / sb-urgente, de
   pintarEsperaBanner), porque el aviso de espera queda adentro de la barra escondida. No se recuerda entre entradas: Luis
   pidió verla abierta al entrar. (02/10 era al revés: escondida siempre, sin botón.)
   Debajo de 1100 px la barra ya no se muestra (se navega con el selector del encabezado). */
.app .sidebar.sb2 { position: relative; }
.sb2 .sb-plegar { position: absolute; top: 12px; right: 8px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  padding: 0; background: transparent; border: 1px solid #4a4a4d; color: #c9c2b3; border-radius: 2px; cursor: pointer; font-size: 14px; font-weight: 700; }
.sb2 .sb-plegar:hover { color: #f7efdc; border-color: #c9c2b3; }
@media (min-width: 1101px) {
  .app.sb-plegada .sidebar.sb2 { --riel: 12px; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1400;
    transform: translateX(calc(-100% + var(--riel))); transition: transform .18s ease .3s, box-shadow .18s ease .3s; }
  .app.sb-plegada .sidebar.sb2:hover, .app.sb-plegada .sidebar.sb2:has(:focus-visible) { transform: none; box-shadow: 10px 0 40px rgba(0,0,0,.35); transition-delay: .1s; }
  /* Recién plegada con el botón: queda plegada aunque el mouse siga encima (si no, el :hover de arriba la reabría y parecía que el botón no hacía nada). gestop2.js la saca al primer mouseleave. */
  .app.sb-plegada .sidebar.sb2.sb-forzada { transform: translateX(calc(-100% + var(--riel))) !important; box-shadow: none !important; transition-delay: 0s; }
  .app.sb-plegada .sidebar.sb2.sb-forzada::after { opacity: 1 !important; transition-delay: 0s; }
  .app.sb-plegada .sidebar.sb2::after { content: "›"; position: absolute; top: 0; right: 0; bottom: 0; width: var(--riel); display: flex; align-items: center;
    justify-content: center; background: #212122; color: #aba497; font-size: 13px; font-weight: 700; pointer-events: none; transition: opacity .15s ease .3s; }
  .app.sb-plegada .sidebar.sb2.sb-espera::after { background: #8a5a00; color: #f7efdc; }
  .app.sb-plegada .sidebar.sb2.sb-urgente::after { background: #9b1c22; color: #f7efdc; }
  .app.sb-plegada .sidebar.sb2:hover::after, .app.sb-plegada .sidebar.sb2:has(:focus-visible)::after { opacity: 0; transition-delay: .1s; }
  .app.sb-plegada .main.main2 { margin-left: 12px; }
}

/* ── Columna principal: llave + header + páginas ─────────────────────── */
.app .main.main2 { flex-direction: column; min-width: 0; background: var(--g-bg); }
.main2 .pages { flex: 1; display: flex; min-height: 0; overflow: hidden; }

.llave-band { flex: none; display: flex; align-items: center; gap: 14px; padding: 8px 16px; min-height: 44px; flex-wrap: wrap; }
.llave-band.m-0 { background: #4a4a4d; color: #f1ead8; }
.llave-band.m-prueba { background: #e2b13c; color: #212122; }
.llave-band.m-1 { background: #2f5a37; color: #f1ead8; }
.llave-band .lk-k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.llave-band .lk-modo { border: 2px solid currentColor; padding: 1px 8px; font-size: 15px; font-weight: 900; letter-spacing: .08em; }
.llave-band .lk-desc { font-size: 13px; }
.llave-band .lk-hoy { margin-left: auto; font-size: 12px; }
.llave-band button { background: transparent; border: 1px solid currentColor; color: inherit; padding: 5px 10px; border-radius: 2px; cursor: pointer; font-size: 12px; }

.mod-head { flex: none; display: flex; align-items: flex-end; gap: 18px; padding: 10px 16px 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.mod-head h1 { font-size: 17px; font-weight: 900; letter-spacing: -.01em; margin: 0 0 10px; white-space: nowrap; }
.mod-head .mod-tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; min-width: 0; }
.mod-head .mod-tab { background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 12px 9px; font-weight: 700; color: var(--g-muted);
  cursor: pointer; white-space: nowrap; display: flex; gap: 6px; align-items: center; font-size: 13px; }
.mod-head .mod-tab.activa { border-bottom-color: var(--accent); color: var(--ink); }
.mod-head .mod-tab .g-badge { background: var(--accent); color: var(--accent-fg); margin-left: 0; }
.mod-head .mod-der { display: flex; gap: 8px; margin: 0 0 8px auto; align-items: center; }
.g-btn { background: var(--surface2); border: 1px solid var(--line); color: var(--ink); padding: 6px 11px; border-radius: 2px; cursor: pointer; font-size: 12px; font-weight: 700; }
.g-btn:hover { border-color: var(--ink); }
.g-btn.prim { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.g-btn.prim:hover { filter: brightness(1.15); }
.g-btn:disabled { opacity: .45; cursor: default; }
.mod-select { display: none; padding: 5px 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 2px; font-weight: 700; }

/* ── Chips de estado (color + texto) ─────────────────────────────────── */
.est { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.est.esperando { background: var(--wait-bg); color: var(--wait-fg); }
.est.humano { background: var(--hum-bg); color: var(--hum-fg); }
.est.bot { background: var(--bot-bg); color: var(--bot-fg); }
.est.resuelta, .est.ok { background: var(--ok-bg); color: var(--ok-fg); }
.est.gris { background: var(--surface2); color: var(--g-muted); }
.edad-0 { color: var(--ink); } .edad-1 { color: var(--warn); } .edad-2 { color: var(--g-danger); }

/* ── Centro de mensajes › Conversaciones ─────────────────────────────── */
#pageConv.active { display: flex; min-width: 0; }
.cm { flex: 1; display: flex; min-width: 0; min-height: 0; background: var(--g-bg); color: var(--ink); }
.cm-bandeja { width: 340px; flex: none; min-width: 0; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); min-height: 0; }
.cm-top { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
.cm-prio { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; background: var(--wait-bg); color: var(--wait-fg); border: 0; padding: 8px 10px; cursor: pointer; text-align: left; border-radius: 2px; }
.cm-prio b { font-size: 22px; font-weight: 900; }
.cm-prio .v { margin-left: auto; font-size: 12px; }
.cm-prio.cero { background: var(--ok-bg); color: var(--ok-fg); }
.cm-buscar { padding: 7px 9px; border: 1px solid var(--line); background: var(--g-bg); color: var(--ink); border-radius: 2px; }
.cm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cm-chip { background: var(--surface); border: 1px solid var(--line); padding: 3px 7px; font-size: 12px; cursor: pointer; border-radius: 2px; color: var(--ink); }
.cm-chip.activo { background: var(--ink); color: var(--g-bg); border-color: var(--ink); }
.cm-filtros { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px; }
.cm-filtros select { padding: 5px 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 2px; min-width: 0; }
.cm-lista { flex: 1; overflow-y: auto; }
.cm-fila { padding: 9px 12px; border-bottom: 1px solid var(--line2); cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.cm-fila:hover { background: var(--g-bg); }
.cm-fila.sel { background: var(--sel); }
.cm-fila .l1 { display: flex; justify-content: space-between; gap: 8px; }
.cm-fila .l1 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-fila .l1 i { color: var(--g-muted); }
.cm-fila .l1 span { color: var(--g-muted); font-size: 12px; flex: none; }
.cm-fila .l2 { color: var(--g-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-fila .l3 { display: flex; gap: 6px; align-items: center; font-size: 12px; flex-wrap: wrap; }
.cm-fila .l3 .meta { color: var(--g-muted); }
.cm-fila .l3 .canal { margin-left: auto; border: 1px solid var(--line); padding: 0 4px; font-size: 10px; font-weight: 700; color: var(--g-muted); }
.cm-vacio { padding: 18px 14px; color: var(--g-muted); }

.cm-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cm-chat-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.cm-chat-head .t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-chat-head .t b { font-size: 15px; font-weight: 900; }
.cm-chat-head .sub { color: var(--g-muted); font-size: 12px; }
.cm-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-volver { display: none; }
.cm-hilo { flex: 1; overflow-y: auto; background: var(--chat); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.bb { max-width: min(560px, 84%); border-radius: 4px; padding: 6px 9px 4px; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
.bb .et { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 2px; }
.bb .h { font-size: 10px; color: var(--g-muted); text-align: right; margin-top: 2px; }
.bb.in { align-self: flex-start; background: var(--in); border: 1px solid var(--line); }
.bb.bot { align-self: flex-end; background: var(--bot); }
.bb.bot .et { color: var(--bot-fg); }
.bb.hum { align-self: flex-end; background: var(--human); }
.bb.hum .et { color: var(--accent-tx); }
.bb.tpl { align-self: flex-end; background: var(--tpl); border: 1px dashed var(--tplline); }
.bb.tpl .et { color: var(--tpl-fg); }
.sys { align-self: center; font-size: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 2px 10px; color: var(--g-muted); }
.dia { align-self: center; font-size: 11px; color: var(--g-muted); background: var(--surface); border-radius: 10px; padding: 1px 10px; border: 1px solid var(--line); }

.cm-caja { background: var(--surface); border-top: 1px solid var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.cm-caja .fila { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.cm-caja .info { font-size: 12px; color: var(--g-muted); }
.cm-caja textarea { width: 100%; min-height: 64px; resize: vertical; padding: 8px; border: 1px solid var(--line); background: var(--g-bg); color: var(--ink); border-radius: 2px; line-height: 1.4; }
.aviso-ambar { background: var(--hum-bg); color: var(--hum-fg); padding: 8px 10px; border-radius: 2px; font-size: 12px; line-height: 1.4; }

.cm-ficha { width: 300px; flex: none; background: var(--surface); border-left: 1px solid var(--line); overflow-y: auto; }
.cm-ficha section { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cm-ficha h4 { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g-muted); margin: 0 0 8px; }
.cm-ficha .rs { font-size: 15px; font-weight: 900; }
.cm-ficha .kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; margin-top: 8px; }
.cm-ficha .kv span:nth-child(odd) { color: var(--g-muted); }
.cm-ficha .it { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--line2); }
.cm-ficha .it:last-child { border-bottom: 0; }
.cm-ficha-cerrar { display: none; }
/* Ficha plegable (Luis, 02/10): en la computadora (≥ 1320 px, donde la ficha es columna) se pliega a una tira de 34 px
   para darle ancho a la charla, y se recuerda (gestop_ficha_plegada). Debajo de 1320 px ya es un panel que se abre y
   cierra con "Ficha del cliente" / "Cerrar", así que el botón no se muestra. */
.cm-ficha { position: relative; }
.cm-ficha-plegar { display: none; }
@media (min-width: 1320px) {
  .cm-ficha { transition: width .15s; }
  .cm-ficha-plegar { display: flex; position: absolute; top: 7px; right: 8px; z-index: 1; width: 26px; height: 26px; align-items: center; justify-content: center;
    gap: 10px; padding: 0; background: var(--surface2); border: 1px solid var(--line); color: var(--ink); border-radius: 2px; cursor: pointer; font-weight: 900; font-size: 15px; }
  .cm-ficha-plegar:hover { border-color: var(--ink); }
  .cm-ficha-plegar .tx { display: none; }
  .cm.ficha-plegada .cm-ficha { width: 34px; overflow: hidden; }
  .cm.ficha-plegada #cmFicha { display: none; }
  .cm.ficha-plegada .cm-ficha-plegar { position: static; width: 100%; height: 100%; flex-direction: column; justify-content: flex-start; padding-top: 10px;
    border: 0; background: transparent; }
  .cm.ficha-plegada .cm-ficha-plegar:hover { background: var(--surface2); }
  .cm.ficha-plegada .cm-ficha-plegar .fl { transform: rotate(180deg); }
  .cm.ficha-plegada .cm-ficha-plegar .tx { display: inline; writing-mode: vertical-rl; font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--g-muted); }
}

/* Modal y toast */
.g-modal-fondo { position: fixed; inset: 0; background: rgba(15,15,16,.55); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 16px; }
.g-modal { background: var(--surface); color: var(--ink); max-width: 540px; width: 100%; border-top: 6px solid var(--accent); box-shadow: 0 20px 60px rgba(0,0,0,.4);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 32px); overflow-y: auto; }
.g-modal h3 { margin: 0; font-size: 17px; font-weight: 900; }
.g-modal .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.g-modal .kv span:nth-child(odd) { color: var(--g-muted); }
.g-modal .texto { background: var(--g-bg); border: 1px solid var(--line); padding: 8px 10px; white-space: pre-wrap; line-height: 1.4; }
.g-modal .nota { padding: 6px 10px; font-size: 12px; border-radius: 2px; }
.g-modal .botones { display: flex; justify-content: flex-end; gap: 8px; }
.g-modal .botones .g-btn { min-height: 44px; padding: 0 18px; font-size: 13px; }
.g-modal .opcion { border: 1px solid var(--line); padding: 10px 12px; display: flex; gap: 12px; align-items: center; cursor: pointer; background: var(--surface); text-align: left; color: var(--ink); }
.g-modal .opcion.elegida { border: 2px solid var(--ink); }
.g-modal .opcion .caja { min-width: 118px; text-align: center; font-weight: 900; letter-spacing: .08em; padding: 3px 0; }
.g-modal input[type=text] { padding: 8px 10px; border: 1px solid var(--line); background: var(--g-bg); color: var(--ink); border-radius: 2px; }
.g-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #212122; color: #f1ead8; font-weight: 700; padding: 10px 16px;
  border-radius: 2px; z-index: 2100; max-width: calc(100vw - 32px); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1319px) {
  .cm-ficha { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 100%); z-index: 1500; box-shadow: -20px 0 50px rgba(0,0,0,.3); display: none; }
  .cm.ficha-abierta .cm-ficha { display: block; }
  .cm-ficha-cerrar { display: inline-block; }
}
@media (max-width: 1100px) {
  .app .sidebar.sb2 { display: none !important; }
  .mod-select { display: inline-block; }
}
@media (max-width: 1000px) { .cm-bandeja { width: 300px; } }
@media (max-width: 900px) { .llave-band .lk-hoy { display: none; } }
@media (max-width: 760px) {
  .app.active { flex-direction: column; }
  .mod-head { flex-wrap: wrap; align-items: center; padding-top: 8px; }
  .mod-head h1 { margin: 0; font-size: 15px; }
  .mod-head .mod-tabs { order: 3; flex-basis: 100%; }
  .mod-head .mod-tab { padding: 8px 7px 9px; font-size: 12px; }
  .mod-head .mod-der { margin: 0 0 0 auto; }
  .llave-band { gap: 8px; padding: 8px 12px; }
  .llave-band .lk-desc { flex-basis: 100%; order: 3; }
  .cm-bandeja { width: 100%; border-right: 0; }
  .cm .cm-chat { display: none; }
  .cm.con-charla .cm-bandeja { display: none; }
  .cm.con-charla .cm-chat { display: flex; }
  .cm-volver { display: inline-block; }
  .g-btn { min-height: 36px; }
}

/* ── Centro de mensajes › Tareas (etapa 3) ───────────────────────────── */
#pageTareas.active { display: flex; min-width: 0; }
.tk { flex: 1; display: flex; min-width: 0; min-height: 0; background: var(--g-bg); color: var(--ink); }
.tk-lista-col { width: 440px; flex: none; min-width: 0; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line); min-height: 0; }
.tk-resumen { font-size: 12px; color: var(--g-muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-resumen b { color: var(--ink); font-size: 15px; font-weight: 900; }
.tk-resumen .g-btn { margin-left: auto; padding: 3px 8px; font-size: 11px; }
.tk-fila .l1 .edad-0 { color: var(--g-muted); }
.tk-fila .l1 .edad-1 { color: var(--warn); font-weight: 900; }
.tk-fila .l1 .edad-2 { color: var(--g-danger); font-weight: 900; }
.tk-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; margin-right: 2px; }
.tk-dot.rojo { background: #c62828; } .tk-dot.amarillo { background: #e0a100; } .tk-dot.verde { background: #2e7d32; }
.est.tipo-tel { background: var(--bot-bg); color: var(--bot-fg); }
.est.tipo-cob { background: var(--wait-bg); color: var(--wait-fg); }
.est.tipo-der { background: var(--hum-bg); color: var(--hum-fg); }
.est.tipo-alta { background: var(--ok-bg); color: var(--ok-fg); }
.est.tipo-aud { background: var(--pur-bg); color: var(--pur-fg); }
.est.tipo-ped { background: var(--ok-bg); color: var(--ok-fg); }
.tk-detalle { flex: 1; min-width: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.tk-card { background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.tk-card h4 { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g-muted); margin: 0; }
.tk-card .tit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-card .tit b { font-size: 17px; font-weight: 900; }
.tk-card .kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; }
.tk-card .kv span:nth-child(odd) { color: var(--g-muted); }
.tk-card .cita { background: var(--g-bg); border-left: 3px solid var(--accent); padding: 8px 10px; white-space: pre-wrap; line-height: 1.4; }
.tk-card .alerta { color: var(--g-danger); font-weight: 700; }
.tk-card .aviso { font-size: 12px; padding: 6px 10px; background: var(--g-bg); border: 1px dashed var(--line); color: var(--g-muted); }
.tk-tels { display: flex; flex-direction: column; max-width: 380px; }
.tk-tels .it { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line2); }
.tk-tels .it:last-child { border-bottom: 0; }
.tk-tels a { color: var(--accent-tx, var(--accent)); font-weight: 700; text-decoration: none; }
.tk .cm-acciones .g-btn { min-height: 34px; }
.tk-volver { display: none; align-self: flex-start; }
.g-modal textarea { width: 100%; min-height: 60px; padding: 8px; border: 1px solid var(--line); background: var(--g-bg); color: var(--ink); border-radius: 2px; resize: vertical; }
@media (max-width: 1000px) { .tk-lista-col { width: 340px; } }
@media (max-width: 760px) {
  .tk-lista-col { width: 100%; border-right: 0; }
  .tk .tk-detalle { display: none; padding: 12px; }
  .tk.con-detalle .tk-lista-col { display: none; }
  .tk.con-detalle .tk-detalle { display: flex; }
  .tk-volver { display: inline-block; }
}

/* ── Centro de mensajes › Salientes (etapa 4) ────────────────────────── */
#pageSalientes.active { display: block; min-width: 0; overflow-y: auto; }
.sl { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; color: var(--ink); max-width: 1200px; }
.sl-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--g-muted); }
.sl-top select { padding: 5px 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 2px; }
.sl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sl-kpi { background: var(--surface); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.sl-kpi span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); }
.sl-kpi b { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sl-kpi i { font-style: normal; font-size: 12px; color: var(--g-muted); }
.sl-card { background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sl-card h4 { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g-muted); margin: 0; }
.sl-card .nota { font-size: 12px; color: var(--g-muted); }
.sl-scroll { overflow-x: auto; }
.sl-tab { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sl-tab th { font-size: 11px; font-weight: 700; color: var(--g-muted); text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom; }
.sl-tab th:first-child, .sl-tab td:first-child { text-align: left; }
.sl-tab td { padding: 4px 8px; border-bottom: 1px solid var(--line2); text-align: right; white-space: nowrap; }
.sl-tab td.cero { color: var(--g-muted); }
.sl-tab td.mal { color: var(--g-danger); font-weight: 700; }
.sl-tab td.ret { color: var(--warn); font-weight: 700; }
.sl-tab tr.tot td { font-weight: 900; border-top: 2px solid var(--line); border-bottom: 0; }
.sl-tab tr.hoy td { background: var(--sel); }
.sl-barra { display: flex; height: 10px; width: 160px; background: var(--line2); }
.sl-barra i { display: block; height: 100%; }
.sl-barra .b-bot { background: var(--accent); } .sl-barra .b-otr { background: #8a8577; } .sl-barra .b-fal { background: #c62828; }
.sl-ley { display: flex; gap: 12px; font-size: 12px; color: var(--g-muted); flex-wrap: wrap; }
.sl-ley i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.sl-2col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.sl-mot { display: grid; grid-template-columns: minmax(0,1fr) 120px 40px; gap: 6px 10px; align-items: center; font-size: 13px; }
.sl-mot .bar { height: 8px; background: #c62828; }
@media (max-width: 900px) { .sl-2col { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 760px) { .sl { padding: 12px; } .sl-kpi b { font-size: 18px; } }

/* ── Informes › Proyección de avisos y gasto (v0.27.0) ───────────────── */
#pageProyeccion.active { display: block; min-width: 0; overflow-y: auto; }
#pagePorConfirmar.active { display: block; min-width: 0; overflow-y: auto; }
#pageSinStock.active { display: block; min-width: 0; overflow-y: auto; }
.pr-barras { display: grid; grid-template-columns: auto minmax(100px, 360px) auto; gap: 6px 10px; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.pr-barras .b { display: flex; height: 12px; background: var(--line2); }
.pr-barras .b i { display: block; height: 100%; }
.pr-barras b { text-align: right; }
.sl-tab .pr-sep { border-left: 1px solid var(--line); }
.sl-tab th.pr-emp, .sl-tab td.pr-emp { text-align: left; }
.sl-tab td:first-child .nota { white-space: normal; max-width: 340px; text-align: left; }
.pr-pct { color: var(--g-muted); font-size: 11px; }
.pr-notas { margin: 0; padding-left: 18px; font-size: 12px; color: var(--g-muted); display: flex; flex-direction: column; gap: 4px; }

/* ── Etapa 5: páginas viejas (Dashboard, Panel, Agente, Alertas, Pruebas) con los tokens nuevos ── */
html.dark { color-scheme: dark; }
.pages input:not([type=checkbox]):not([type=radio]):not([type=range]), .pages select, .pages textarea {
  background-color: var(--g-bg); color: var(--ink); border-color: var(--line);
}
.pages input::placeholder, .pages textarea::placeholder { color: var(--g-muted); }
.pages table { color: var(--ink); }
.pages th { color: var(--g-muted); }
/* El título y las pestañas de cada página ya están en el encabezado nuevo (mod-head): no se repiten. */
#pageDash > .config-page > h2:first-child, #pageConfig > .config-page > h2:first-child,
#pageAlertas > .config-page > h2:first-child, #pageAgente > .config-page > div:first-child > h2 { display: none; }
#pageConfig > .config-page > .subtabs, #pageAgente > .config-page > .subtabs { display: none; }
#pageAgente > .config-page > div:first-child { justify-content: flex-end !important; }
/* Simulador de WhatsApp (Pruebas) en oscuro: la paleta oscura de WhatsApp. */
html.dark { --wa-bg:#0b141a; --wa-in:#202c33; --wa-out:#005c4b; }
html.dark .chat-messages { background-image: none; }

/* Ficha › Agendar con un click (v0.23.0) */
.cm-ficha .agendar { font-size: 12px; }
.cm-ficha .agendar p { margin: 4px 0 8px; color: var(--g-muted); line-height: 1.4; }
.cm-ficha section.agendar { border-left: 3px solid var(--warn); padding-left: 10px; }
.cm-ficha div.agendar { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.cm-ficha .agendar input { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }

/* Login (v0.27.24, Pablo 07/10: "armame algo así", con un mockup).
   Antes (v0.27.18): escena bordó y crema con tres abrelatas en abanico y tarjeta de vidrio. Ahora: fondo de vidrio roto con rejilla,
   el grupo de productos de la marca (foto recortada del mockup, se mezcla con "screen" sobre el fondo oscuro) con haces de luz que
   van hacia un marco de metal con vidrio y neón (cian a la izquierda, magenta a la derecha). Todo el marco escala con --w (el ancho del
   marco): el tamaño de letra del marco es --w / 24, así que logo, GestOp y botón guardan las proporciones del mockup en cualquier pantalla.
   Escena y fondo son decoración (aria-hidden): si la foto no carga se saca sola (onerror) y el resto queda.
   Escritorio: productos a la izquierda y marco a la derecha. Hasta 900 px: una columna, productos arriba. Hasta 560 px: sólo el marco. */
.login-overlay {
  --w: min(46vw, 820px, calc((100vh - 70px) * 1.15)); --sh: min(72vh, var(--w));
  --cian: #2fe3ff; --magenta: #ff3f93;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--w); align-items: center; padding: 0 4.3vw 0 0;
  overflow: hidden; isolation: isolate;
  background:
    radial-gradient(880px 560px at 27% 46%, rgba(70, 100, 130, 0.20), transparent 70%),
    radial-gradient(640px 460px at 100% 100%, rgba(150, 40, 100, 0.15), transparent 70%),
    radial-gradient(620px 420px at 0 0, rgba(90, 120, 150, 0.13), transparent 70%),
    #0b1016;
}
.login-overlay::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(34vw 62vh at calc(100% - 4.3vw - var(--w) * 0.96) 52%, rgba(47, 227, 255, 0.12), transparent 70%),
    radial-gradient(26vw 62vh at calc(100% - 4.3vw) 50%, rgba(255, 63, 147, 0.14), transparent 70%);
}
.login-overlay::after {
  content: "Loekemeyer Hnos – mayorista de artículos de cocina y bazar";
  position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; z-index: 2;
  color: rgba(214, 226, 238, 0.66); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}

/* Fondo: grietas de vidrio y rejilla de plano */
.lg-fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lg-grietas {
  position: absolute; inset: 0; width: 100%; height: 100%; scale: 1.04;
  translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 7px); transition: translate 0.5s ease-out;
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000 38%, transparent 100%); mask-image: radial-gradient(ellipse 92% 92% at 50% 50%, #000 38%, transparent 100%);
}
.lg-rejilla {
  position: absolute; left: 0; top: 18%; width: 30%; height: 50%;
  background-image: linear-gradient(rgba(110, 170, 210, 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 170, 210, 0.13) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 25% 50%, #000 10%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 25% 50%, #000 10%, transparent 100%);
}
.le-grano {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Escena: productos + haces de luz. La caja termina donde empieza el marco, así los haces llegan al borde. */
.lg-escena {
  position: relative; z-index: 1; justify-self: end; height: var(--sh); aspect-ratio: 530 / 507; pointer-events: none;
  mix-blend-mode: screen; /* va ACÁ y no en los hijos: translate crea un contexto de apilado y aislaría el blend de la foto */
  translate: calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -8px); transition: translate 0.4s ease-out;
}
.lg-prod { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; animation: lg-in 0.9s ease-out both; }
.lg-fibras { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(60, 210, 255, 0.9)); }
.lg-fibras path { stroke: rgba(160, 238, 255, 0.95); stroke-dasharray: 20 700; animation: lg-flujo var(--d, 4s) linear infinite; animation-delay: var(--r, 0s); }
@keyframes lg-flujo { from { stroke-dashoffset: 20; } to { stroke-dashoffset: -700; } }
@keyframes lg-in { from { opacity: 0; } }

/* Marco de metal con vidrio (columna derecha). Los chaflanes y las pestañas del borde son polígonos en em. */
.login-box {
  position: relative; z-index: 3; width: var(--w); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; text-align: center; color: #e8f1f8;
  font-size: max(calc(var(--w) / 24), 14px);
  filter: drop-shadow(-0.55em 0 1.1em rgba(47, 227, 255, 0.20)) drop-shadow(0.55em 0 1.1em rgba(255, 63, 147, 0.22)) drop-shadow(0 1.2em 2em rgba(0, 0, 0, 0.6));
  animation: lb-in 0.7s cubic-bezier(.2, .8, .2, 1) both;
}
.lb-marco {
  --c: 1.3em; --t: 0.5em; position: relative; padding: 1em 1em 0;
  background: linear-gradient(135deg, #f1f6fb 0, #7f8b98 22%, #323b45 48%, #8c98a5 74%, #e4ecf4 100%);
  clip-path: polygon(0 calc(var(--c) + var(--t)), var(--c) var(--t), 17% var(--t), calc(17% + var(--t)) 0, calc(83% - var(--t)) 0, 83% var(--t), calc(100% - var(--c)) var(--t), 100% calc(var(--c) + var(--t)),
    100% calc(100% - var(--c) - var(--t)), calc(100% - var(--c)) calc(100% - var(--t)), 83% calc(100% - var(--t)), calc(83% - var(--t)) 100%, calc(17% + var(--t)) 100%, 17% calc(100% - var(--t)), var(--c) calc(100% - var(--t)), 0 calc(100% - var(--c) - var(--t)));
}
.lb-marco::before {
  content: ""; position: absolute; inset: 0.1em; z-index: 0; pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.20) 0, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.10) 82%, rgba(255, 255, 255, 0) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(0, 0, 0, 0.06) 1px 3px),
    linear-gradient(180deg, #a3afbc 0, #5b6773 3%, #2b333c 10%, #1a2027 50%, #29313a 90%, #66727f 97%, #a3afbc 100%);
  clip-path: polygon(0 calc(var(--c) + var(--t)), var(--c) var(--t), 17% var(--t), calc(17% + var(--t)) 0, calc(83% - var(--t)) 0, 83% var(--t), calc(100% - var(--c)) var(--t), 100% calc(var(--c) + var(--t)),
    100% calc(100% - var(--c) - var(--t)), calc(100% - var(--c)) calc(100% - var(--t)), 83% calc(100% - var(--t)), calc(83% - var(--t)) 100%, calc(17% + var(--t)) 100%, 17% calc(100% - var(--t)), var(--c) calc(100% - var(--t)), 0 calc(100% - var(--c) - var(--t)));
}
.lb-cristal {
  --c2: 1.05em; position: relative; z-index: 1; margin-top: var(--t);
  background: linear-gradient(90deg, var(--cian), #6e8fff 50%, var(--magenta));
  clip-path: polygon(var(--c2) 0, calc(100% - var(--c2)) 0, 100% var(--c2), 100% calc(100% - var(--c2)), calc(100% - var(--c2)) 100%, var(--c2) 100%, 0 calc(100% - var(--c2)), 0 var(--c2));
}
.lb-cristal::before {
  content: ""; position: absolute; inset: 0.08em; z-index: 0;
  background:
    radial-gradient(95% 75% at 0 42%, rgba(0, 190, 230, 0.34), transparent 64%),
    radial-gradient(95% 75% at 100% 55%, rgba(255, 50, 140, 0.30), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 32%),
    linear-gradient(160deg, #0d2b39, #0a1722 52%, #1a1021);
  clip-path: polygon(var(--c2) 0, calc(100% - var(--c2)) 0, 100% var(--c2), 100% calc(100% - var(--c2)), calc(100% - var(--c2)) 100%, var(--c2) 100%, 0 calc(100% - var(--c2)), 0 var(--c2));
}
.lb-cristal > * { position: relative; z-index: 1; }
.lb-cristal { padding: 2.1em 1.5em 1.2em; }
.lb-marca {
  width: 11.6em; max-width: 78%; aspect-ratio: 1240 / 125; margin: 0 auto 0.5em;
  background: linear-gradient(180deg, #ffffff 0, #d3dce6 42%, #8e9ba8 54%, #e3eaf2 100%);
  -webkit-mask: url("assets/logo.png") 0 0 / 100% auto no-repeat; mask: url("assets/logo.png") 0 0 / 100% auto no-repeat;
  filter: drop-shadow(0 0.07em 0.05em rgba(0, 0, 0, 0.55));
}
.login-box .lb-gestop { width: 8.7em; max-width: 70%; margin: 0 auto; line-height: 0; font-size: inherit; }
.lb-gestop svg { display: block; width: 100%; height: auto; overflow: visible; }
.lb-bot {
  display: flex; align-items: center; justify-content: center; gap: 0.4em; margin-top: -0.2em;
  font-size: 0.92em; font-weight: 700; font-style: italic; color: #e2f7ff; text-shadow: 0 0 0.55em rgba(47, 227, 255, 0.55);
}
.lb-bot svg { height: 0.78em; width: auto; fill: var(--cian); filter: drop-shadow(0 0 0.25em rgba(47, 227, 255, 0.9)); }
.login-box .lb-bienvenido { margin: 1.05em 0 0.9em; font-size: 1.3em; font-weight: 500; letter-spacing: 0.01em; color: #f4f8fb; }
.login-box .google-btn {
  width: 84%; margin: 0 auto; height: 3.1em; font-size: max(0.78em, 15px); white-space: nowrap; font-weight: 500; color: #e9f1f7; border-radius: 0.55em;
  border: 1px solid #1a2128; border-top-color: #b4bfcb;
  background: linear-gradient(180deg, #5e6a76 0, #3b4550 9%, #2b333b 52%, #222930 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 0.3em 0.9em rgba(0, 0, 0, 0.5), 0 0 0 0.16em rgba(18, 26, 34, 0.85);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.login-box .google-btn:hover { filter: brightness(1.14); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 0.4em 1.1em rgba(0, 0, 0, 0.55), 0 0 0 0.16em rgba(18, 26, 34, 0.85), 0 0 1.2em rgba(47, 227, 255, 0.35); }
.login-box .google-btn:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
.login-box .login-error { color: #ff9db9; font-size: max(0.5em, 13px); margin-top: 0.7em; }
.lb-pie { position: relative; z-index: 1; padding: 1.5em 1em 2.2em; font-size: max(0.6em, 12px); color: rgba(226, 236, 246, 0.86); letter-spacing: 0.01em; }
@keyframes lb-in { from { opacity: 0; transform: translateY(10px); } }

/* Pantallas medianas y chicas */
@media (max-width: 900px) {
  .login-overlay { --w: min(92vw, 560px, calc((100vh - 70px) * 1.15)); --sh: min(44vh, 100vw); grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: end; padding: 0 0 clamp(48px, 9vh, 90px); }
  .login-overlay::before { background: radial-gradient(60vw 40vh at 50% 70%, rgba(47, 227, 255, 0.10), transparent 70%), radial-gradient(60vw 40vh at 80% 80%, rgba(255, 63, 147, 0.12), transparent 70%); }
  .lg-escena { position: absolute; top: 3vh; left: 50%; justify-self: auto; translate: -50% 0; }
  .lg-prod { -webkit-mask-image: linear-gradient(90deg, #000 68%, transparent); mask-image: linear-gradient(90deg, #000 68%, transparent); }
  .lg-fibras { display: none; }
}
@media (max-width: 560px) {
  .login-overlay { --sh: min(34vh, 92vw); padding-bottom: clamp(40px, 8vh, 70px); }
  .lg-escena { top: 4vh; }
  .login-overlay::after { font-size: 10px; letter-spacing: 0; bottom: 36px; padding: 0 16px; }
  .login-box .google-btn { width: 92%; }
  .lb-cristal { padding: 2em 1em 1.1em; }
}
@media (max-height: 600px) and (max-width: 900px) {
  .login-overlay { align-items: center; padding-bottom: 0; }
  .lg-escena, .lg-rejilla { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lg-prod, .lg-fibras path, .login-box { animation: none; } .lg-fibras { display: none; } }

/* ── Botones unificados (Pablo, 29/09: "botones desordenados") ─────────────────────────────────────────────
   Había dos sistemas: .config-btn (páginas viejas: sin borde, gris del navegador, radio 6px) y .g-btn (rediseño:
   borde, radio 2px, 12px). Ahora los dos comparten altura, radio, letra y 3 jerarquías:
     principal  = .config-btn.primary / .g-btn.prim   (color de la marca, UNO por grupo)
     secundario = .config-btn / .g-btn                (fondo claro con borde)
     peligro    = .config-btn.danger                  (borde y texto rojo; relleno rojo sólo al pasar el mouse)
   .small = compacto (tablas, listas) · .icono = sólo un ícono (⟳ ✕ 🗑️), cuadrado. */
.config-btn, .g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 14px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
  cursor: pointer; white-space: nowrap; vertical-align: middle; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, filter .15s;
}
.config-btn:hover, .g-btn:hover { background: var(--surface2); border-color: var(--g-muted); }
.config-btn.primary, .g-btn.prim { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.config-btn.primary:hover, .g-btn.prim:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.15); }
.config-btn.danger { background: transparent; border-color: var(--g-danger); color: var(--g-danger); }
.config-btn.danger:hover { background: var(--g-danger); color: var(--surface); }
.config-btn.small, .tk-resumen .g-btn { min-height: 28px; padding: 0 10px; font-size: 12px; border-radius: 5px; }
.config-btn.icono, .g-btn.icono { min-width: 28px; padding: 0 6px; }
.config-btn:disabled, .g-btn:disabled, .config-btn:disabled:hover, .g-btn:disabled:hover { opacity: .45; cursor: default; filter: none; }
.config-btn:focus-visible, .g-btn:focus-visible { outline: 2px solid var(--accent-tx); outline-offset: 2px; }
/* Grupos de acciones: siempre con el mismo aire entre botones, y que bajen de renglón en vez de apretarse. */
.cm-acciones, .g-modal .botones, .acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.al-tabla td .config-btn + .config-btn { margin-left: 4px; }
.g-modal .botones .g-btn { min-height: 40px; padding: 0 18px; font-size: 13px; }
/* Los "← Volver" / "Cerrar" que sólo existen en pantallas chicas: el display de arriba no los tiene que mostrar en
   la computadora (misma lógica que sus reglas originales, con más prioridad). */
.g-btn.cm-volver, .g-btn.tk-volver, .g-btn.cm-ficha-cerrar, .config-btn.conv-volver { display: none; }
@media (max-width: 1319px) { .g-btn.cm-ficha-cerrar { display: inline-flex; } }
@media (max-width: 760px) { .g-btn.cm-volver, .g-btn.tk-volver { display: inline-flex; } }
@media (max-width: 640px) { .conv-layout.con-charla .config-btn.conv-volver { display: inline-flex; } }
@media (max-width: 640px) {
  .config-btn, .g-btn { min-height: 38px; }
  .config-btn.small { min-height: 32px; }
}

/* ── Celular (Pablo, 29/09: "revisá cómo se ve en el celular") ───────────────────────────────────────────────
   En el Dashboard las secciones medían 738px en un teléfono de 390px y se cortaban a la derecha: los flex no
   podían achicarse (faltaba min-width:0) y el encabezado de cada sección no bajaba de renglón. */
.page, .config-page { min-width: 0; }
.dash-section > summary { flex-wrap: wrap; row-gap: 0.25rem; }
@media (max-width: 640px) {
  .config-page { padding: 1rem; }
  .dash-sec-hint { flex: 1 1 100%; order: 3; }
  .ia-stat { min-width: calc(50% - 0.25rem); }
  /* Configuración › listas de números: el número ocupa todo el renglón; etiqueta/motivo y "+ Agregar" abajo
     (antes los dos campos quedaban cortados: "Número (ej: 5", "Etiqueta (opc"). */
  .bl-add-row { flex-wrap: wrap; }
  .bl-add-row input:first-child { flex: 1 1 100%; }
}

/* ── Inicio (Luis, 05/10: "una pantalla de inicio para que no sea tan chocante") ─────────────────────────────────────
   Primera pantalla después del login: saludo, lo que espera a una persona, tareas, envíos de hoy, últimas charlas y accesos.
   Sólo usa datos que el panel ya trae (lk_conversaciones list, lk_alertas, lk_vinculaciones, la llave): nada que cobre.
   Entra con un fundido corto; la animación está en el contenedor, así el refresco de cada 45 s no la repite. */
#pageInicio { container-type: inline-size; }
#pageInicio.active { display: block; min-width: 0; overflow-y: auto; animation: iniEntra .35s ease both; }
@keyframes iniEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #pageInicio.active { animation: none; } }
.ini { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 18px; color: var(--ink); max-width: 1320px; }
/* Dos columnas cuando el ÁREA de Inicio (no la ventana) mide 1.000 px o más: así cuenta si la barra está abierta o plegada.
   Derecha: estado del bot, gasto de IA y accesos (Luis, 05/10). Más angosto, todo en una columna. */
.ini-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.ini-izq, .ini-der { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@container (min-width: 1000px) {
  .ini-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .ini-der .ini-mods { grid-template-columns: minmax(0, 1fr); }
}
.ini-der .g-btn { align-self: flex-start; }
.ini-llave { display: inline-block; padding: 2px 10px; font-size: 14px; font-weight: 900; letter-spacing: .08em; border-radius: 2px; }
.ini-llave.m-0 { background: #4a4a4d; color: #f1ead8; }
.ini-llave.m-prueba { background: #e2b13c; color: #212122; }
.ini-llave.m-1 { background: #2f5a37; color: #f1ead8; }
.ini-gasto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ini-gasto div { display: flex; flex-direction: column; gap: 2px; }
.ini-gasto span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); }
.ini-gasto b { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ini-gasto i { font-style: normal; font-size: 12px; color: var(--g-muted); }
.ini-hola h2 { margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.01em; }
.ini-hola p { margin: 4px 0 0; color: var(--g-muted); font-size: 14px; }
.ini-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ini-card { text-align: left; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--line); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; color: var(--ink); font: inherit; border-radius: 2px; }
.ini-card:hover { border-color: var(--ink); }
.ini-card.urg { border-top-color: var(--accent); }
.ini-card.ok { border-top-color: var(--ok-fg); }
.ini-card span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); }
.ini-card b { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ini-card i { font-style: normal; font-size: 12px; color: var(--g-muted); }
.ini-card em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent-tx); margin-top: 6px; }
.ini-conv { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 4px 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line2);
  cursor: pointer; font-size: 13px; }
.ini-conv:last-child { border-bottom: 0; }
.ini-conv:hover b { text-decoration: underline; }
.ini-conv .tx { grid-column: 1 / -1; color: var(--g-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-mods { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.ini-mod { text-align: left; background: var(--surface); border: 1px solid var(--line); padding: 10px 12px; cursor: pointer; color: var(--ink); font: inherit;
  border-radius: 2px; display: flex; flex-direction: column; gap: 2px; }
.ini-mod:hover { border-color: var(--ink); }
.ini-mod b { font-size: 14px; }
.ini-mod i { font-style: normal; font-size: 12px; color: var(--g-muted); }
@media (max-width: 760px) { .ini { padding: 16px 12px; } .ini-hola h2 { font-size: 20px; } .ini-card b { font-size: 24px; } }

/* ── Pedidos (v0.31.1, Pablo Olejavetzky 19/10: «meterle mucha más onda, no se entiende nada» y «tomá la de Pedidos web») ──
   Por confirmar y Pedidos web hablan el mismo idioma: números grandes arriba, filtros en chips y una tabla del ancho de su
   contenido donde cada fila se despliega con el detalle. */
#pagePedidosWeb.active { display: block; min-width: 0; overflow-y: auto; }
.pd { max-width: 1240px; }
.pd-cab { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; }
.pd-cab h2 { margin: 0; font-size: 20px; font-weight: 900; color: var(--ink); }
.pd-cab .sub { color: var(--g-muted); font-size: 13px; }
.pd-cab .g-btn { align-self: center; }
.pd-cab .sub { flex-basis: 100%; order: 3; }
.pd-tit { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g-muted); margin: 4px 0 -6px; }
/* Los tres pasos del circuito: el del medio es el de la persona que mira la pantalla. */
.pd-pasos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pd-paso { display: flex; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); padding: 7px 12px 7px 8px; font-size: 12.5px; line-height: 1.3; }
.pd-paso .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 12px; background: var(--surface2); color: var(--g-muted); }
.pd-paso.vos { border-color: var(--accent); }
.pd-paso.vos .n { background: var(--accent); color: var(--accent-fg); }
.pd-flecha { color: var(--g-muted); font-weight: 900; }
/* Números grandes: del ancho de lo que muestran, no estirados a toda la pantalla. */
.pd-kpis { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.pd-kpi { background: var(--surface); padding: 10px 18px 11px; display: flex; flex-direction: column; gap: 1px; min-width: 130px; }
.pd-kpi span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); white-space: nowrap; }
.pd-kpi b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-kpi i { font-style: normal; font-size: 12px; color: var(--g-muted); white-space: nowrap; }
.pd-kpi.rojo b { color: var(--g-danger); } .pd-kpi.amb b { color: var(--warn); } .pd-kpi.verde b { color: var(--ok-fg); }
.pd-vacio { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ok-fg);
  padding: 14px 18px; width: fit-content; max-width: 100%; }
.pd-vacio .ic { font-size: 30px; line-height: 1; }
.pd-vacio b { display: block; font-size: 16px; font-weight: 900; color: var(--ink); }
.pd-vacio span { color: var(--g-muted); font-size: 13px; }
/* Filtros */
.pd-barra { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pd-barra input[type=search] { padding: 6px 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 2px; min-width: 250px; font-size: 13px; }
.pd-barra .carga { font-size: 12px; color: var(--g-muted); }
.pd-seg { display: inline-flex; border: 1px solid var(--line); }
.pd-seg button { background: var(--surface); border: 0; border-right: 1px solid var(--line); padding: 5px 11px; font-weight: 700; font-size: 12px; color: var(--g-muted); cursor: pointer; }
.pd-seg button:last-child { border-right: 0; }
.pd-seg button.activo { background: var(--ink); color: var(--g-bg); }
.pd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-chip { background: var(--surface); border: 1px solid var(--line); padding: 4px 9px; font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 999px; color: var(--ink); white-space: nowrap; }
.pd-chip i { font-style: normal; color: var(--g-muted); font-weight: 400; margin-left: 3px; }
.pd-chip.activo { background: var(--ink); color: var(--g-bg); border-color: var(--ink); }
.pd-chip.activo i { color: var(--g-bg); opacity: .75; }
/* Pastillas de estado: rellenas, con los colores de la paleta (valen en claro y en oscuro). */
.pd-pill { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; line-height: 1.5; }
.pd-pill.gris { background: var(--surface2); color: var(--g-muted); } .pd-pill.azul { background: var(--bot-bg); color: var(--bot-fg); }
.pd-pill.amb { background: var(--hum-bg); color: var(--hum-fg); } .pd-pill.verde { background: var(--ok-bg); color: var(--ok-fg); }
.pd-pill.pur { background: var(--pur-bg); color: var(--pur-fg); } .pd-pill.rojo { background: var(--bad-bg); color: var(--g-danger); }
/* Tabla: cada columna del ancho de su contenido; sólo el cliente y el motivo cortan renglón. */
.pd-marco { background: var(--surface); border: 1px solid var(--line); width: fit-content; max-width: 100%; overflow-x: auto; }
.pd-tab { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.pd-tab th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-muted); text-align: left; padding: 9px 10px 7px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pd-tab td { padding: 8px 10px; border-bottom: 1px solid var(--line2); white-space: nowrap; vertical-align: middle; }
.pd-tab tr:last-child td { border-bottom: 0; }
.pd-tab .num { text-align: right; }
.pd-tab .tenue { color: var(--g-muted); }
.pd-tab td.cli { white-space: normal; min-width: 150px; max-width: 280px; }
.pd-tab td.cli b { font-weight: 800; }
.pd-tab td.texto { white-space: normal; min-width: 180px; max-width: 360px; color: var(--g-muted); font-size: 12px; }
.pd-tab td.ent { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.pd-tab td.tot { font-weight: 900; }
.pd-tab td.avisos { white-space: normal; }
.pd-avs { display: flex; flex-wrap: wrap; gap: 3px; max-width: 210px; }
.pd-tab td.flecha { padding-right: 0; color: var(--g-muted); font-size: 11px; width: 1px; }
.pd-tab tr.pd-fila { cursor: pointer; }
.pd-tab tr.pd-fila:hover td { background: var(--sel); }
.pd-tab tr.pd-fila.abierta td { background: var(--sel); border-bottom-color: transparent; }
.pd-tab tr.pd-fila.abierta td.flecha { color: var(--ink); }
.pd-tab tr.pd-det > td { white-space: normal; padding: 0 10px 14px 28px; background: var(--sel); }
.pd-cod { display: inline-block; font-size: 11px; font-weight: 700; color: var(--g-muted); border: 1px solid var(--line); padding: 0 5px; margin-left: 6px; white-space: nowrap; vertical-align: 1px; }
.pd-hora { color: var(--g-muted); }
/* Detalle desplegado */
.pd-det-box { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; width: fit-content; max-width: 100%; }
.pd-det-box h5 { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-muted); }
.pd-items { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.pd-items th { font-size: 11px; font-weight: 700; color: var(--g-muted); text-align: left; padding: 2px 12px 4px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pd-items td { padding: 4px 12px 4px 0; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.pd-items .num { text-align: right; }
.pd-cuenta { display: inline-grid; grid-template-columns: auto auto; gap: 3px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.pd-cuenta span:nth-child(odd) { color: var(--g-muted); }
.pd-cuenta span:nth-child(even) { text-align: right; white-space: nowrap; padding-left: 24px; }
.pd-cuenta .tot { font-weight: 900; font-size: 15px; color: var(--ink) !important; border-top: 1px solid var(--line); padding-top: 4px; }
.pd-datos { display: grid; grid-template-columns: max-content minmax(0, 340px); gap: 3px 12px; font-size: 13px; }
.pd-datos span:nth-child(odd) { color: var(--g-muted); }
.pd-avisos { display: flex; flex-direction: column; gap: 6px; flex-basis: 100%; }
.pd-aviso { background: var(--amb-bg); color: var(--ink); border-left: 3px solid var(--warn); padding: 7px 10px; font-size: 12.5px; line-height: 1.4; max-width: 700px; }
.pd-aviso.rojo { background: var(--bad-bg); border-left-color: var(--g-danger); }
.pd-acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-basis: 100%; padding-top: 2px; }
.pd-acc .g-btn { min-height: 36px; padding: 0 14px; font-size: 13px; }
.pd-acc .efecto { font-size: 12px; color: var(--g-muted); }
@media (max-width: 760px) { .pd-kpi { min-width: 0; flex: 1 1 40%; } .pd-kpi b { font-size: 19px; } .pd-barra input[type=search] { min-width: 0; flex: 1; }
  .pd-flecha { display: none; } .pd-tab tr.pd-det > td { padding-left: 10px; } }

/* ── Redes (v0.32.0, D087): misma bandeja + charla que Conversaciones (.cm), sólo lectura ─────────── */
#pageRedes.active { display: flex; min-width: 0; }
.rs-per { margin-left: auto; padding: 3px 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 2px; font-size: 12px; }