/* Panel Automata. Denso y legible: es una herramienta de diagnóstico, no una landing.
   Se banca claro y oscuro según el sistema. */

:root {
  --bg: #fbfbfa; --panel: #fff; --borde: #e3e2df; --txt: #1a1a19; --tenue: #6b6a67;
  --acento: #2f6f4e; --alerta: #a33; --aviso: #a8760a;
  --cliente: #eef2f7; --lucia: #eaf5ee; --code: #f4f4f2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191918; --panel: #232322; --borde: #37372f; --txt: #ecebe6; --tenue: #9a9992;
    --acento: #6fc494; --alerta: #e88; --aviso: #d9a441;
    --cliente: #23292f; --lucia: #1e2b23; --code: #1f1f1e;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--txt);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* ---- header ---- */
header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 5;
}
.marca { font-weight: 700; letter-spacing: .5px; }
header nav { display: flex; gap: 4px; flex-wrap: wrap; }
header nav a {
  color: var(--tenue); text-decoration: none; padding: 5px 10px; border-radius: 6px; font-size: 14px;
}
header nav a:hover { background: var(--code); color: var(--txt); }
header nav a.on { background: var(--acento); color: #fff; }
header .agente, header .salir { margin-left: auto; }
header .salir button, header select {
  background: var(--panel); color: var(--txt); border: 1px solid var(--borde);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 14px;
}
.agente-fijo { margin-left: auto; color: var(--tenue); font-size: 14px; }
header .salir { display: flex; align-items: center; gap: 10px; }
/* Con quién está abierta la sesión. Los mails largos se cortan con puntos suspensivos para
   que el encabezado no se parta en dos líneas; el mail entero queda en el `title`. */
.usuario {
  color: var(--tenue); font-size: 14px; max-width: 24ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

main { max-width: 1400px; margin: 0 auto; padding: 20px; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 22px 0 8px; }
.sub { color: var(--tenue); font-weight: 400; font-size: 14px; }
.nota { color: var(--tenue); font-size: 14px; }
.vacio { color: var(--tenue); font-style: italic; }
a { color: var(--acento); }

/* ---- login ---- */
body.login main { max-width: 340px; margin-top: 18vh; text-align: center; }
body.login input, body.login button {
  width: 100%; padding: 10px; margin-top: 8px; border: 1px solid var(--borde);
  border-radius: 6px; background: var(--panel); color: var(--txt); font-size: 15px;
}
body.login button { background: var(--acento); color: #fff; border: none; cursor: pointer; }
.error { color: var(--alerta); }
.ok-msg { color: var(--acento); }

/* ---- tarjetas ---- */
.tarjetas { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 14px 18px; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
}
.tarjeta .v { font-size: 26px; font-weight: 600; }
.tarjeta .t { color: var(--tenue); font-size: 13px; }
.tarjeta .s { color: var(--tenue); font-size: 12px; }
.estado.ok { color: var(--acento); } .estado.mal { color: var(--alerta); font-weight: 600; }

/* ---- tablas ---- */
table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); font-size: 14px; }
th { color: var(--tenue); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.prueba { opacity: .65; }
/* El nombre de campaña lo escribe marketing y puede venir larguísimo (hasta 300 chars, con
   emojis): se recorta para que no empuje al resto de la fila, y el texto completo queda en el
   title. */
td.campana { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtros { display: flex; gap: 8px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.filtros input[type=text], .filtros input:not([type]) {
  padding: 7px 10px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--panel); color: var(--txt); min-width: 220px;
}
.filtros button { padding: 7px 14px; border: none; border-radius: 6px; background: var(--acento); color: #fff; cursor: pointer; }

/* ---- tags ---- */
.tag {
  display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px;
  background: var(--code); color: var(--tenue); border: 1px solid var(--borde);
}
.tag.fav { background: var(--lucia); color: var(--acento); border-color: var(--acento); }
.tag.desfav, .tag.esc { background: transparent; color: var(--aviso); border-color: var(--aviso); }
.tag.skip { opacity: .8; }
.tag.canal { text-transform: uppercase; letter-spacing: .4px; }

/* ---- columnas ---- */
.cols { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(420px, 2fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .cols { grid-template-columns: 1fr; } }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.campos div { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--borde); border-radius: 6px; padding: 6px 9px; }
.campos b { font-size: 11px; color: var(--tenue); font-weight: 600; text-transform: uppercase; }
.notas { list-style: none; padding: 0; margin: 0; }
.notas li { background: var(--panel); border: 1px solid var(--borde); border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; font-size: 14px; }
.notas .cuando, .notas .autor { color: var(--tenue); font-size: 11px; margin-right: 8px; }

/* ---- el turno: lo más importante del panel ---- */
.turno { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.turno > header {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 0 0 8px; background: none; border: none; position: static;
}
.turno .cuando { font-weight: 600; }
.turno .costo { margin-left: auto; color: var(--tenue); font-size: 12px; font-variant-numeric: tabular-nums; }
.msgs p { margin: 4px 0; padding: 7px 11px; border-radius: 10px; max-width: 85%; white-space: pre-wrap; }
.msgs .cliente { background: var(--cliente); }
.msgs .lucia { background: var(--lucia); margin-left: auto; }
.sin-respuesta { color: var(--aviso); font-size: 13px; font-style: italic; }
.guards { margin: 6px 0; font-size: 12px; color: var(--tenue); }
.g { display: inline-block; background: transparent; border: 1px solid var(--aviso); color: var(--aviso); border-radius: 8px; padding: 0 6px; margin-right: 4px; }

details { margin-top: 8px; }
summary { cursor: pointer; color: var(--tenue); font-size: 13px; padding: 3px 0; }
summary:hover { color: var(--txt); }

.traza { list-style: none; padding: 0; margin: 6px 0 0; counter-reset: paso; }
.paso { border-left: 2px solid var(--borde); padding: 6px 0 6px 12px; margin-bottom: 4px; }
.paso.err { border-left-color: var(--alerta); }
.paso-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paso-h code { font-weight: 600; }
.paso .ms { margin-left: auto; color: var(--tenue); font-size: 12px; }
.paso .args { font-size: 12px; color: var(--tenue); margin: 3px 0; display: flex; gap: 12px; flex-wrap: wrap; }
.paso .res { font-size: 12px; background: var(--code); border-radius: 5px; padding: 4px 7px; margin-top: 3px; white-space: pre-wrap; }

.ef { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--code); border: 1px solid var(--borde); margin-right: 3px; }
.ef.nada { opacity: .5; }
.fuente { display: inline-block; background: var(--code); border-radius: 5px; padding: 2px 7px; margin: 2px 4px 2px 0; font-size: 12px; font-family: ui-monospace, monospace; }
.fuente.skill { border: 1px dashed var(--borde); }

.efectos-lista { list-style: none; padding: 0; margin: 6px 0 0; }
.efectos-lista li { border: 1px solid var(--borde); border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; }
.efectos-lista code { display: block; margin: 4px 0; word-break: break-all; }
.efectos-lista pre { background: var(--code); padding: 6px 8px; border-radius: 5px; overflow-x: auto; margin: 4px 0 0; }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 10px; }
.badge.dry { background: var(--code); color: var(--tenue); border: 1px solid var(--borde); }
.badge.live { background: var(--alerta); color: #fff; }

/* ---- chat ---- */
.chat .mensajes { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 12px; min-height: 240px; max-height: 55vh; overflow-y: auto; }
.chat .mensajes p { margin: 4px 0; padding: 7px 11px; border-radius: 10px; max-width: 85%; white-space: pre-wrap; }
.chat .mensajes .cliente { background: var(--cliente); }
.chat .mensajes .lucia { background: var(--lucia); margin-left: auto; }
#enviar { display: flex; gap: 8px; margin-top: 10px; }
#enviar input { flex: 1; padding: 9px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--panel); color: var(--txt); }
#enviar button { padding: 9px 18px; border: none; border-radius: 8px; background: var(--acento); color: #fff; cursor: pointer; }
#enviar button[disabled] { opacity: .5; cursor: wait; }
.hint { color: var(--tenue); font-size: 13px; min-height: 20px; }

/* ---- vault ---- */
.editor textarea {
  width: 100%; min-height: 62vh; padding: 12px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--panel); color: var(--txt); font-family: ui-monospace, monospace; font-size: 13px; line-height: 1.6;
}
.editor .acciones { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.editor button { padding: 9px 18px; border: none; border-radius: 8px; background: var(--acento); color: #fff; cursor: pointer; }

/* ---- herramientas ---- */
.tool { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; }
.tool.off { opacity: .55; }
.tool h2 { margin: 0 0 4px; }
.tool .resumen { margin: 2px 0; }
.tool .cuando { color: var(--tenue); font-size: 14px; margin: 4px 0; }
.params td { font-size: 13px; padding: 4px 8px; }
.explicacion { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 14px 18px; margin-top: 16px; }
.explicacion p { font-size: 14px; }

/* ---- docs ---- */
/* El diagrama hereda el color del texto (currentColor en el SVG), así que sigue el tema solo. */
.flujo { margin: 18px 0 22px; padding: 0; overflow-x: auto; }
.flujo svg { display: block; width: 100%; min-width: 720px; height: auto; }
.flujo figcaption { margin-top: 6px; font-size: 13px; color: var(--tenue); }
.flujo a { cursor: pointer; }
.flujo a:hover rect { stroke-width: 2.5; }

.indice {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; margin-bottom: 20px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
}
.indice a {
  font-size: 13px; color: var(--tenue); text-decoration: none;
  padding: 3px 9px; border-radius: 6px; border: 1px solid var(--borde);
}
.indice a:hover { background: var(--code); color: var(--txt); }

.doc { max-width: 78ch; }
.doc h2 {
  margin: 34px 0 10px; padding-top: 10px; border-top: 1px solid var(--borde);
  font-size: 21px; scroll-margin-top: 64px;
}
.doc h3 { margin: 22px 0 6px; font-size: 16px; }
.doc h4 { margin: 16px 0 4px; font-size: 14px; color: var(--tenue); }
.doc p { margin: 10px 0; }
.doc li { margin: 4px 0; }
.doc hr { border: none; border-top: 1px solid var(--borde); margin: 26px 0; }
.doc code { background: var(--code); padding: 1px 5px; border-radius: 4px; }
.doc pre {
  background: var(--code); border: 1px solid var(--borde); border-radius: 8px;
  padding: 12px 14px; overflow-x: auto; line-height: 1.45;
}
.doc pre code { background: none; padding: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.doc th, .doc td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.doc th { color: var(--tenue); font-weight: 600; font-size: 13px; }
.doc blockquote {
  margin: 14px 0; padding: 10px 14px; border-left: 3px solid var(--borde);
  background: var(--panel); border-radius: 0 8px 8px 0; font-size: 14px;
}
.doc blockquote p { margin: 6px 0; }
/* Los límites vigentes arrancan con ⚠ y se pintan distinto: son deuda, no explicación. */
.doc blockquote:has(> p:first-child > strong:first-child) { border-left-color: var(--acento); }

/* Bloques leídos del código. Se distinguen a propósito de la prosa: lo que está acá adentro
   nadie lo escribió a mano, y esa es la única razón por la que se le puede creer. */
.vivo {
  margin: 14px 0; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--acento); border-radius: 10px;
}
.vivo figcaption { font-size: 12.5px; color: var(--tenue); margin-bottom: 6px; }
.vivo .tag { background: var(--lucia); color: var(--acento); border-color: var(--acento); }
.vivo table { margin: 0; }
.vivo td, .vivo th { padding: 6px 8px; }
.vivo .si { color: var(--acento); }
.vivo .no { color: var(--tenue); }

/* ---- navegación por día ---- */
.dias { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; }
.dias .flecha {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 1px solid var(--borde); border-radius: 6px; text-decoration: none; font-size: 17px;
  background: var(--panel); color: var(--txt);
}
.dias .flecha:hover { background: var(--code); }
/* La de mañana no es un link: no hay filas en el futuro. */
.dias .flecha.off { opacity: .3; cursor: default; }
.dias .dia-actual { font-weight: 600; min-width: 13ch; text-align: center; }
.dias .hoy, .filtros .limpiar {
  font-size: 13px; text-decoration: none; border: 1px solid var(--borde);
  border-radius: 6px; padding: 4px 10px; color: var(--tenue);
}
.dias .hoy:hover, .filtros .limpiar:hover { background: var(--code); color: var(--txt); }
.filtros .campo-dia { display: flex; align-items: center; gap: 6px; color: var(--tenue); font-size: 14px; }
.filtros input[type=date] {
  padding: 6px 9px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--panel); color: var(--txt); font: inherit; font-size: 14px;
}
.filtros input[type=date]:disabled { opacity: .45; }

/* ---- el día por agente (el mail en pantalla) ---- */
.agente-dia {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 14px 18px; margin: 14px 0;
}
.agente-dia h3 { margin: 0 0 8px; font-size: 16px; }
.agente-dia h4 { margin: 0 0 4px; font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .4px; }
.cols-dia { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.cifras { width: auto; min-width: 320px; background: none; }
.cifras td { border: none; padding: 3px 0; }
.cifras td:first-child { color: var(--tenue); padding-right: 24px; }
.cifras td.fuerte { font-weight: 700; }
.cifras tr.corte td { padding: 5px 0; }
.agente-dia .aviso {
  margin: 10px 0 0; padding: 8px 12px; font-size: 14px;
  border-left: 3px solid var(--aviso); background: var(--code); border-radius: 0 6px 6px 0;
}
.problemas {
  margin-top: 10px; padding: 9px 12px; font-size: 14px;
  border-left: 3px solid var(--alerta); background: var(--code); border-radius: 0 6px 6px 0;
}
.problemas h4 { color: var(--alerta); }

/* ---- gráfico de mensajes por hora ----
   El ancho de cada barra lo pone app.js por CSSOM: la CSP (style-src 'self') bloquea los estilos
   inline, así que no puede venir escrito en el HTML como en el mail. El número va siempre al lado
   en texto — si el JS no corre se pierde el dibujo, no el dato. */
.horas { width: auto; background: none; }
.horas td { border: none; padding: 1px 0; font-size: 12px; line-height: 1.35; }
.horas td.h { color: var(--tenue); text-align: right; padding-right: 8px; font-variant-numeric: tabular-nums; }
.horas td.b { width: 240px; min-width: 120px; }
.horas td.n { padding-left: 8px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.horas .barra { display: block; height: 10px; border-radius: 2px; background: var(--acento); width: 2px; }
.horas .cero { color: var(--tenue); opacity: .5; }

/* ---- guards ---- */
.familia { margin-top: 22px; }
.familia h2 { margin-bottom: 6px; }
/* El cajón de alarma: normalmente no se dibuja. Si aparece, alguien agregó un guard sin su fila. */
.familia.alarma { border-left: 3px solid var(--alerta); padding-left: 12px; }
.familia.alarma h2 { color: var(--alerta); }
.guards-tabla td { vertical-align: top; }
.guards-tabla .etiqueta { color: var(--tenue); font-size: 11.5px; }
.guards-tabla .sub { font-size: 12px; }
.periodo {
  font-size: 13px; text-decoration: none; padding: 5px 11px; border-radius: 6px;
  border: 1px solid var(--borde); color: var(--tenue); background: var(--panel);
}
.periodo:hover { background: var(--code); color: var(--txt); }
.periodo.on { background: var(--acento); color: #fff; border-color: var(--acento); }

/* El borrador que el guard frenó: lo que el modelo IBA a mandar, y por qué no salió. */
.borrador { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--alerta); background: var(--code); border-radius: 0 6px 6px 0; }
.borrador h4 { margin: 0 0 4px; font-size: 12px; color: var(--alerta); text-transform: uppercase; letter-spacing: .4px; }
.borrador .texto { margin: 0; white-space: pre-wrap; }
.borrador .motivo { margin: 6px 0 0; font-size: 12.5px; color: var(--tenue); }
.msgs.salida h4 { margin: 8px 0 2px; font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .4px; }
.turno > header a { font-weight: 600; }