:root {
  --fondo: #F4F3EF; --panel: #FFFFFF; --borde: #E2E0DA; --borde2: #ECEAE4; --linea: #D6D3CB;
  --texto: #1E1D1A; --suave: #4A4843; --tenue: #5F5C55; --muy-tenue: #8A867D;
  --acento: #0B5F66; --acento-osc: #07434A; --acento-fondo: #E6F0EF; --acento-claro: #F3F8F8;
  --ok: #24683A; --ok-fondo: #E3F1E6; --mal: #A1321E; --mal-fondo: #FBE7E3;
  --aviso: #8A5A08; --aviso-fondo: #F6EEDC; --aviso-borde: #EBD8B0; --gris-fondo: #EFEDE8;
  --estrella: #C98A12; --sombra: 0 1px 2px rgba(0,0,0,.06);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #161716; --panel: #1F2120; --borde: #333634; --borde2: #2A2C2B; --linea: #3E413F;
    --texto: #ECEBE7; --suave: #C4C1BA; --tenue: #A6A39C; --muy-tenue: #807D76;
    --acento: #5FB3B9; --acento-osc: #86CBD0; --acento-fondo: #1E3437; --acento-claro: #1A2A2C;
    --ok: #7BC891; --ok-fondo: #1F3326; --mal: #F0A190; --mal-fondo: #3A221D;
    --aviso: #E6B861; --aviso-fondo: #362C18; --aviso-borde: #5A4A26; --gris-fondo: #2A2C2B;
    --estrella: #E0A93A; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #161716; --panel: #1F2120; --borde: #333634; --borde2: #2A2C2B; --linea: #3E413F;
  --texto: #ECEBE7; --suave: #C4C1BA; --tenue: #A6A39C; --muy-tenue: #807D76;
  --acento: #5FB3B9; --acento-osc: #86CBD0; --acento-fondo: #1E3437; --acento-claro: #1A2A2C;
  --ok: #7BC891; --ok-fondo: #1F3326; --mal: #F0A190; --mal-fondo: #3A221D;
  --aviso: #E6B861; --aviso-fondo: #362C18; --aviso-borde: #5A4A26; --gris-fondo: #2A2C2B;
  --estrella: #E0A93A; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); font: 14px/1.45 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--acento); }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }

/* ── barra superior ── */
.barra { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--panel);
  border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 20; }
.barra h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.barra .buscar { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; padding: 7px 11px;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); }
.barra .buscar input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; }
.pildora { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--acento-fondo); color: var(--acento);
  font-weight: 500; white-space: nowrap; }
.pildora.rojo { background: var(--mal-fondo); color: var(--mal); }
.pildora.ambar { background: var(--aviso-fondo); color: var(--aviso); }
.icono-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.barra nav { display: flex; gap: 4px; margin-left: auto; }
.barra nav a { text-decoration: none; color: var(--suave); font-size: 13px; padding: 6px 10px; border-radius: 8px; }
.barra nav a.activo { background: var(--acento-fondo); color: var(--acento); font-weight: 600; }

/* ── avisos ── */
.avisos { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 0; }
.aviso { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; font-size: 13px; border: 1px solid; }
.aviso.ambar { background: var(--aviso-fondo); border-color: var(--aviso-borde); color: var(--aviso); }
.aviso.rojo { background: var(--mal-fondo); border-color: #EDC1B8; color: var(--mal); }
.aviso.verde { background: var(--ok-fondo); border-color: #B9DBC2; color: var(--ok); }
.aviso .punto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.aviso .acc { margin-left: auto; display: flex; gap: 6px; }

/* ── rejilla principal ── */
.rejilla { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(340px, 430px);
  gap: 0; height: calc(100vh - 57px); height: calc(100dvh - 57px); }
.col { overflow-y: auto; min-width: 0; }
.col-lista { background: var(--panel); border-right: 1px solid var(--borde); display: flex; flex-direction: column; }
.col-ficha { padding: 16px 20px 40px; }
.col-resp { background: var(--panel); border-left: 1px solid var(--borde); padding: 16px 16px 40px; }
.vacio { color: var(--tenue); padding: 40px 20px; text-align: center; }

/* ── lista ── */
.vistas { display: flex; gap: 6px; padding: 12px 14px; flex-wrap: wrap; border-bottom: 1px solid var(--borde2); }
.chip-v { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); background: var(--panel);
  white-space: nowrap; }
.chip-v.activo { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 500; }
.fila { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--borde2); cursor: pointer; }
.fila:hover { background: var(--acento-claro); }
.fila.sel { background: var(--acento-claro); box-shadow: inset 3px 0 0 var(--acento); }
.fila .cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fila .linea1 { display: flex; gap: 8px; align-items: baseline; }
.fila .linea1 strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .hora { margin-left: auto; font-size: 12px; color: var(--tenue); white-space: nowrap; }
.fila .asunto { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila .res { font-size: 13px; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.chip { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--gris-fondo); color: var(--suave); font-weight: 500; white-space: nowrap; }
.chip.ok { background: var(--ok-fondo); color: var(--ok); font-weight: 600; }
.chip.ac { background: var(--acento-fondo); color: var(--acento); font-weight: 600; }
.chip.mal { background: var(--mal-fondo); color: var(--mal); }
.chip.av { background: var(--aviso-fondo); color: var(--aviso); }
.estrella { background: none; border: 0; padding: 2px; flex: none; align-self: flex-start; line-height: 0; }
.estrella svg { width: 19px; height: 19px; }
.estrella.on svg { fill: var(--estrella); stroke: var(--estrella); }
.estrella:not(.on) svg { fill: none; stroke: var(--muy-tenue); }

/* ── ficha ── */
.cab h2 { margin: 0 0 4px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.cab .meta { font-size: 13px; color: var(--suave); }
.cab .acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.btn { font-size: 13px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--linea); background: var(--panel);
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--texto); }
.btn:hover { border-color: var(--acento); }
.btn.prim { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 600; }
.btn.prim:hover { background: var(--acento-osc); }
.btn.sec { border-color: var(--acento); color: var(--acento); font-weight: 600; }
.btn.peq { font-size: 12px; padding: 4px 9px; border-radius: 7px; }
.btn[disabled] { opacity: .5; cursor: default; }
.bloque { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.ejecutivo { border-left: 3px solid var(--acento); }
.etq { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--acento); text-transform: uppercase; }
.riesgo { display: flex; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde); color: var(--aviso); font-size: 13px; margin-top: 8px; }
.correo-txt { white-space: pre-wrap; word-wrap: break-word; font-size: 13.5px; }
.citado { color: var(--tenue); border-left: 2px solid var(--borde); padding-left: 10px; margin-top: 8px; white-space: pre-wrap; font-size: 13px; }
iframe.html-correo { width: 100%; min-height: 420px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; }

.seccion { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; margin-top: 10px; overflow: hidden; }
.seccion > .sec-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; user-select: none; }
.sec-cab .tit { font-weight: 600; }
.sec-cab .ayuda { font-size: 12px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-cab .cont { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--acento); white-space: nowrap; }
.sec-cab .cont.cero { color: var(--tenue); font-weight: 500; }
.sec-cab .todas { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--suave); }
.flecha { transition: transform .15s; flex: none; }
.seccion.abierta .flecha { transform: rotate(90deg); }
.sec-cuerpo { border-top: 1px solid var(--borde2); padding: 4px 0; }
.it { display: flex; gap: 10px; padding: 8px 12px; align-items: flex-start; }
.it + .it { border-top: 1px solid var(--borde2); }
.it.foco { background: var(--acento-claro); }
.it input[type=checkbox], .chk { width: 17px; height: 17px; accent-color: var(--acento); margin-top: 2px; flex: none; }
.it .txt { flex: 1; min-width: 0; }
.it .t1 { font-size: 13.5px; }
.it .t1 strong { font-weight: 600; }
.it .ext { font-size: 13px; color: var(--suave); white-space: pre-wrap; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }
.it.exp .ext { -webkit-line-clamp: unset; display: block; }
.it .porque { margin-top: 6px; padding: 7px 10px; border-radius: 8px; background: var(--fondo); font-size: 12.5px; color: var(--suave); }
.it .herr { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.it .fij { font-size: 11px; color: var(--acento); font-weight: 600; }
.it.descartado { opacity: .5; }
.vacio-sec { padding: 8px 12px; color: var(--tenue); font-size: 13px; }
.nota-caja { border: 1px dashed var(--acento); border-radius: 12px; padding: 12px 14px; margin-top: 12px; background: var(--panel); }
textarea { width: 100%; border: 1px solid var(--linea); border-radius: 9px; padding: 8px 10px; resize: vertical; background: var(--panel); }
textarea:focus, input:focus { outline: 2px solid var(--acento-fondo); border-color: var(--acento); }
label.chkl { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--suave); }

/* ── respuesta ── */
.persona { display: flex; flex-direction: column; gap: 4px; }
.persona .nombre { font-weight: 600; font-size: 15px; }
.persona .datos { font-size: 12.5px; color: var(--suave); }
.pista { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; border-radius: 10px; background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde); font-size: 13px; color: var(--texto); margin-top: 8px; }
.pista .acc { display: flex; gap: 6px; }
.grupo { margin-top: 12px; }
.grupo > .lbl { font-size: 12px; font-weight: 600; color: var(--suave); margin-bottom: 6px; display: block; }
.intenciones { display: flex; flex-wrap: wrap; gap: 6px; }
.int { font-size: 13px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--linea); background: var(--panel); }
.int.on { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 500; }
.seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--gris-fondo); gap: 2px; }
.seg button { border: 0; background: transparent; padding: 5px 10px; border-radius: 7px; font-size: 12.5px; color: var(--suave); }
.seg button.on { background: var(--panel); color: var(--texto); font-weight: 600; box-shadow: var(--sombra); }
.opciones { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; font-size: 12.5px; color: var(--suave); }
.motor { display: flex; gap: 8px; }
.motor label { flex: 1; display: flex; gap: 7px; align-items: center; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 9px; font-size: 13px; cursor: pointer; }
.motor label.on { border-color: var(--acento); background: var(--acento-claro); }
.proponer { width: 100%; margin-top: 12px; padding: 12px; font-size: 15px; border-radius: 11px; }
.espera { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--borde); margin-top: 12px; }
.barra-prog { height: 6px; border-radius: 3px; background: var(--borde2); overflow: hidden; }
.barra-prog > div { height: 100%; background: var(--acento); transition: width 1s linear; }
.spin { width: 28px; height: 28px; border-radius: 50%; border: 4px solid var(--acento-fondo); border-top-color: var(--acento);
  animation: gira 1s linear infinite; flex: none; }
@keyframes gira { to { transform: rotate(360deg); } }
.versiones { display: flex; gap: 2px; border-bottom: 1px solid var(--borde2); margin-top: 14px; overflow-x: auto; }
.versiones button { border: 0; background: none; padding: 8px 11px; font-size: 13px; color: var(--tenue); border-bottom: 2px solid transparent; white-space: nowrap; }
.versiones button.on { color: var(--texto); font-weight: 600; border-bottom-color: var(--acento); }
.borrador { min-height: 240px; font-size: 14px; line-height: 1.55; margin-top: 10px; }
.para-ti { margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: var(--fondo); font-size: 13px; color: var(--suave); }
.fila-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.fila-btns .btn { flex: 1; justify-content: center; }
details.analisis { margin-top: 10px; font-size: 13px; }
details.analisis summary { cursor: pointer; color: var(--acento); font-weight: 600; }
.md p { margin: 6px 0; }
.md ul { margin: 6px 0; padding-left: 18px; }
.fuentes-cit { font-size: 12.5px; color: var(--suave); margin-top: 8px; }
.fuentes-cit a { cursor: pointer; }

/* ── login ── */
.login { max-width: 380px; margin: 12vh auto; padding: 28px; background: var(--panel); border: 1px solid var(--borde); border-radius: 16px; }
.login h1 { margin: 0 0 6px; font-size: 22px; }
.login input { width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; font-size: 18px; letter-spacing: .1em; background: var(--panel); }
.login .err { color: var(--mal); font-size: 13px; min-height: 18px; }

/* ── páginas (métricas, manual, ajustes) ── */
.pagina { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; }
.kpi .n { font-family: var(--mono); font-size: 28px; font-weight: 600; }
.kpi .l { font-size: 12px; color: var(--tenue); }
.barra-apil { display: flex; height: 24px; border-radius: 6px; overflow: hidden; margin: 10px 0; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th, table.t td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--borde2); vertical-align: top; }
table.t th { color: var(--tenue); font-weight: 600; font-size: 12px; }

/* ── móvil ── */
.tabs-movil, .pie-movil, .nav-movil { display: none; }
@media (max-width: 1180px) and (min-width: 761px) {
  .rejilla { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .col-resp { display: none; }
  body.tab-respuesta .col-ficha { display: none; }
  body.tab-respuesta .col-resp { display: block; grid-column: 2; grid-row: 1; }
  .tabs-movil { display: flex; }
}
@media (max-width: 760px) {
  .barra { padding: 8px 12px; flex-wrap: wrap; }
  .barra .buscar { order: 9; max-width: none; flex-basis: 100%; }
  .barra nav { display: none; }
  .rejilla { display: block; height: auto; }
  .col { overflow: visible; }
  .col-lista { border: 0; min-height: calc(100dvh - 110px); padding-bottom: 70px; }
  body.con-ficha .col-lista { display: none; }
  body:not(.con-ficha) .col-ficha, body:not(.con-ficha) .col-resp { display: none; }
  body.tab-respuesta .col-ficha { display: none; }
  body:not(.tab-respuesta) .col-resp { display: none; }
  body.tab-correo .parte-contexto, body.tab-contexto .parte-correo { display: none; }
  .col-ficha { padding: 12px 12px 90px; }
  .col-resp { border: 0; padding: 12px 12px 140px; background: var(--fondo); }
  .tabs-movil { display: flex; }
  .pie-movil { display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--panel); border-top: 1px solid var(--borde); z-index: 30; }
  body:not(.con-ficha) .pie-movil { display: none; }
  .nav-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; justify-content: space-around; padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    background: var(--panel); border-top: 1px solid var(--borde); z-index: 30; }
  body.con-ficha .nav-movil { display: none; }
  .nav-movil a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--tenue); text-decoration: none; }
  .nav-movil a.activo { color: var(--acento); font-weight: 600; }
  .borrador { min-height: 200px; }
  .pagina { padding-bottom: 90px; }
  .solo-escritorio { display: none !important; }
}
.tabs-movil { margin: 0 0 10px; padding: 3px; border-radius: 10px; background: var(--gris-fondo); gap: 3px; }
.tabs-movil button { flex: 1; border: 0; background: transparent; padding: 7px 0; border-radius: 8px; font-size: 13px; color: var(--suave); }
.tabs-movil button.on { background: var(--panel); color: var(--texto); font-weight: 600; box-shadow: var(--sombra); }
.volver { display: none; }
@media (max-width: 760px) { .volver { display: inline-flex; } }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--texto); color: var(--panel);
  padding: 9px 16px; border-radius: 10px; font-size: 13px; z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,.2); max-width: 90vw; }