:root{
  --bg:#12181F; --panel:#1A222B; --panel2:#151C24; --line:#2A3642;
  --ink:#E8EDF2; --muted:#93A1AF; --faint:#5C6B7A;
  --accent:#38C6F4; --accent-ink:#04212B; --good:#34B37A; --bad:#E05252;
  --accent-rgb:56,198,244;
  --disp:"Avenir Next Condensed","Helvetica Neue Condensed","Arial Narrow",ui-sans-serif,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;display:flex;flex-direction:column;
  /* 100vh no encoge cuando iOS abre el teclado: el campo de texto queda detrás y Safari
     desplaza la página para revelarlo, sacando de sitio todo lo posicionado. --alto-app
     lo fija app.js desde visualViewport; dvh es el respaldo cuando no hay JavaScript. */
  height:100vh;height:100dvh;height:var(--alto-app,100dvh)}
.hidden{display:none!important}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header.top{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;border-bottom:1px solid var(--line);flex-shrink:0}
.logo{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:.08em;display:flex;gap:9px;align-items:center}
.logo .tick{width:12px;height:12px;background:var(--accent);clip-path:polygon(0 0,100% 0,100% 65%,65% 100%,0 100%)}
#nav{display:flex;gap:18px;align-items:center;font-size:13.5px}
#nav a{color:var(--muted)} #nav a:hover{color:var(--ink);text-decoration:none}
#nav .user{color:var(--faint);font-family:var(--mono);font-size:12px}

.center{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.authbox{background:var(--panel);border:1px solid var(--line);padding:30px;width:360px;display:flex;flex-direction:column;gap:12px}
.authbox.wide{width:440px}
.authbox h1{font-family:var(--disp);font-size:24px;margin:0;text-transform:uppercase}
.authbox .sub{color:var(--muted);font-size:13px;margin:0}
input,textarea{background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:10px 12px;font-size:14px;font-family:inherit;width:100%}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.row{display:flex;gap:10px}
.chk{color:var(--muted);font-size:13px;display:flex;gap:8px;align-items:center}
.chk input{width:auto}
.cta{background:var(--accent);color:var(--accent-ink);font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:14.5px;padding:11px 20px;border:none;cursor:pointer}
.cta:hover{filter:brightness(1.08)}
.cta:disabled{opacity:.5;cursor:wait}
.switch{color:var(--muted);font-size:13px;text-align:center;margin:0}
.error{background:rgba(224,82,82,.12);border:1px solid var(--bad);color:#F1A2A2;padding:9px 12px;font-size:13px}
.okmsg{background:rgba(52,179,122,.12);border:1px solid var(--good);color:#9ADFC0;padding:9px 12px;font-size:13px}

.wrap{flex:1;overflow:auto;padding:28px;max-width:900px;margin:0 auto;width:100%}
.rephead{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.rephead h1{font-family:var(--disp);text-transform:uppercase;font-size:26px;margin:0}
.replist{display:flex;flex-direction:column;gap:10px}
.repcard{background:var(--panel);border:1px solid var(--line);padding:16px 18px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.repcard:hover{border-color:var(--accent)}
.repcard .t{font-weight:600}
.repcard .m{color:var(--faint);font-size:12px;font-family:var(--mono);margin-top:3px}
.repcard .del{color:var(--faint);font-size:12px;padding:6px}
.repcard .del:hover{color:var(--bad)}

/* Vista de reporte: canvas a pantalla completa + chat como drawer a la derecha */
.report{flex:1;position:relative;display:flex;flex-direction:column;overflow:hidden}
/* Tres columnas con la del medio ajustada al contenido: el selector queda centrado en la
   barra pase lo que pase con el largo del título, sin superponerse con él. */
.rep-topbar{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
  padding:9px 22px;border-bottom:1px solid var(--line);flex-shrink:0}
.rt-lado{display:flex;gap:18px;align-items:center;min-width:0}
.rep-topbar a{color:var(--muted);white-space:nowrap}
.rep-topbar a:hover{color:var(--ink)}
.rep-title{background:transparent;border:1px solid transparent;color:var(--ink);font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;font-size:20px;font-weight:700;padding:4px 9px;border-radius:6px;width:100%;max-width:380px}
.rep-title:hover{border-color:var(--line)}
.rep-title:focus{outline:none;border-color:var(--accent);background:var(--panel2)}
.model-pick{display:flex;align-items:center;gap:8px;flex-shrink:0;justify-self:center}
.model-pick span{color:var(--faint);font-size:11px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em}
.model-pick select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:6px 9px;font-size:12.5px;font-family:var(--mono);cursor:pointer;max-width:230px}
.model-pick select:hover{border-color:var(--accent)}
.model-pick select:focus{outline:none;border-color:var(--accent)}

/* Chat drawer (derecha) + burbuja flotante */
.chatdrawer{position:absolute;top:0;right:0;bottom:0;width:430px;max-width:92vw;background:var(--panel2);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;transform:translateX(100%);transition:transform .22s ease;z-index:30;box-shadow:-8px 0 30px rgba(0,0,0,.35)}
.report.chat-open .chatdrawer{transform:translateX(0)}
.chathead{padding:11px 16px;border-bottom:1px solid var(--line);font-size:13px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-shrink:0}
.chathead span{color:var(--muted);font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em}
.chat-min{background:transparent;border:1px solid var(--line);color:var(--muted);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:18px;line-height:1}
.chat-min:hover{border-color:var(--accent);color:var(--ink)}
.chat-bubble{position:absolute;right:24px;bottom:24px;width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:none;font-size:26px;cursor:pointer;z-index:31;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.45);transition:transform .15s ease,filter .15s ease}
.chat-bubble:hover{filter:brightness(1.08);transform:scale(1.05)}
.report.chat-open .chat-bubble{display:none}
.chatlog{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:92%;padding:10px 13px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink)}
.msg.assistant{align-self:flex-start;background:var(--panel);border:1px solid var(--line)}
.msg.status{align-self:flex-start;color:var(--faint);font-family:var(--mono);font-size:12px;padding:2px 0}
/* Markdown renderizado en respuestas del asistente */
.msg.md{white-space:normal;overflow-wrap:anywhere}
.msg.md>*:first-child{margin-top:0}
.msg.md>*:last-child{margin-bottom:0}
.msg.md p{margin:0 0 9px}
.msg.md h3,.msg.md h4,.msg.md h5,.msg.md h6{font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;margin:13px 0 6px;font-size:15px;color:var(--ink)}
.msg.md ul,.msg.md ol{margin:6px 0 9px;padding-left:20px}
.msg.md li{margin:3px 0}
.msg.md strong{color:#fff;font-weight:700}
.msg.md em{font-style:italic}
.msg.md a{color:var(--accent);text-decoration:underline}
.msg.md code{font-family:var(--mono);font-size:12.5px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.msg.md pre{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:10px;overflow-x:auto;margin:9px 0}
.msg.md pre code{background:none;border:none;padding:0;font-size:12.5px}
.msg.md table{border-collapse:collapse;width:100%;margin:9px 0;font-size:13px}
.msg.md th,.msg.md td{border:1px solid var(--line);padding:5px 9px;text-align:left}
.msg.md th{background:var(--panel2);font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;font-weight:700;color:var(--muted);white-space:nowrap}
.msg.md td{color:var(--ink)}
.chatinput{display:flex;gap:10px;padding:12px;border-top:1px solid var(--line)}
.chatinput textarea{resize:none}
.chatinput .cta{align-self:flex-end}

.canvas{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:18px;background:var(--bg)}
.canvas-empty{color:var(--faint);text-align:center;margin-top:80px;font-size:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.card h3{margin:0 0 10px;font-size:14.5px;color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.kpi-v{font-family:var(--mono);font-size:21px;font-weight:700}
.kpi-l{color:var(--muted);font-size:12px;margin-top:2px}
.kpi-note{color:var(--good);font-size:11.5px;margin-top:3px}

/* Tarjeta de dashboard: una por consulta, enlazada a su mensaje */
.dash-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:1000px;width:100%;margin:0 auto;flex:0 0 auto}
.dash-card.flash{animation:flash 1.3s ease}
@keyframes flash{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}25%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.7)}}
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.dash-head:hover{background:var(--panel2)}
.dash-q{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-q b{color:var(--faint);font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-right:8px}
.dash-link{color:var(--accent);font-size:12px;white-space:nowrap;flex-shrink:0}
.dash-body{padding:16px;display:flex;flex-direction:column;gap:14px}
.dash-body .card{background:transparent;border:none;border-radius:0;padding:0}
/* Mapa de calor y tabla de datos */
.hm-wrap,.tbl-wrap{overflow-x:auto;max-width:100%}
.heatmap,.datatable{border-collapse:collapse;font-size:12.5px}
.heatmap{width:auto}
.datatable{width:100%}
.heatmap th,.datatable th{font-family:var(--disp);text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;white-space:nowrap}
.heatmap thead th{padding:6px 9px;text-align:center;border-bottom:1px solid var(--line)}
.hm-row{text-align:left;color:var(--ink);padding:6px 12px 6px 4px;white-space:nowrap}
.hm-cell{padding:6px 10px;text-align:center;font-family:var(--mono);border:1px solid rgba(0,0,0,.3);min-width:46px}
.hm-empty{background:var(--panel2)}
.datatable th,.datatable td{border:1px solid var(--line);padding:6px 11px;text-align:left}
.datatable thead th{background:var(--panel2)}
.datatable td{color:var(--ink);font-family:var(--mono);font-size:12px}
.datatable tbody tr:nth-child(even){background:var(--panel2)}
.dash-foot{border-top:1px solid var(--line);padding:9px 16px;background:var(--panel2)}
.dash-foot-empty{display:none}

/* Panel de consumo */
.usage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.usage-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.usage-card h3{margin:0 0 12px;font-size:13px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.usage-card .datatable{width:100%}
.usage-card .num{text-align:right;font-family:var(--mono)}
.usage-card .muted,.muted{color:var(--faint);font-size:12.5px}
.usage-card code,.muted code{font-family:var(--mono);font-size:12px;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.active-row td{color:var(--accent)}
.msg-cost{margin-top:8px;padding-top:7px;border-top:1px solid var(--line);color:var(--faint);font-family:var(--mono);font-size:11.5px}
.dash-src-toggle{color:var(--faint);font-size:12px;font-family:var(--mono);cursor:pointer;display:inline-flex;align-items:center;gap:6px;user-select:none}
.dash-src-toggle:hover{color:var(--ink)}
.dash-src-toggle .caret{transition:transform .15s ease}
.dash-src-toggle.open .caret{transform:rotate(90deg)}
.dash-src-list{display:none;margin-top:10px;flex-direction:column;gap:8px}
.dash-src-list.open{display:flex}
.src-item{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg)}
.src-type{font-size:11px;font-family:var(--disp);text-transform:uppercase;letter-spacing:.04em;color:var(--accent);padding:5px 10px;border-bottom:1px solid var(--line);background:var(--panel2)}
.src-detail{margin:0;padding:9px 11px;font-family:var(--mono);font-size:12px;color:var(--ink);white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.msg[data-msg-id]{cursor:pointer}
.msg.flash{animation:flashmsg 1.3s ease}
@keyframes flashmsg{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}25%{box-shadow:0 0 0 2px rgba(var(--accent-rgb),.8)}}

.lbl{font-size:14px;font-weight:600;fill:#DCE4EC}
.lbl.sm{font-size:12.5px;font-weight:500;fill:#93A1AF}
.grid{stroke:#2A3642}
.axis{stroke:#5C6B7A;stroke-width:1.5}
.bar{cursor:pointer}
.bar:hover{opacity:.75}
#tooltip{position:fixed;display:none;background:#000;color:#fff;padding:6px 10px;border-radius:6px;font-size:13px;pointer-events:none;z-index:10;white-space:nowrap;border:1px solid var(--line)}

@media (max-width:900px){.report{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}

/* Consumo del día en el encabezado del chat (spec 006 §4.4). */
.tope-hoy{margin-left:auto;margin-right:10px;font-family:var(--mono);font-size:11px;
  color:var(--faint);white-space:nowrap}
.tope-hoy.cerca{color:var(--accent)}
.tope-hoy.agotado{color:var(--bad)}
.lim-agotado{color:var(--bad)}
.lnk-tope{margin-left:10px;font-size:12px}

/* ---------- Edición de usuarios en el panel de admin (spec 006 §4.5) ---------- */
/* La tabla nunca debe recortarse: si no entra, se desplaza dentro de su tarjeta. */
.tablewrap{overflow-x:auto}
.datatable .mono{font-family:var(--mono);font-size:12.5px}
.pill-propio{font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--faint)}

.ueditor > td{background:var(--panel2);padding:0}
.uform{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;padding:16px 14px}
.uform label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);
  min-width:170px}
.uform label.chk{flex-direction:row;align-items:center;gap:7px;min-width:0;
  align-self:center;color:var(--ink)}
.uform label.chk input{width:auto}
.uform .hint{font-size:11px;color:var(--faint)}
.uform-acts{display:flex;align-items:center;gap:12px;margin-left:auto;align-self:center}
.uform-msg{font-size:12px;color:var(--muted)}
.uform-msg.err{color:var(--bad)}

/* Gráficos anchos: se desplazan dentro de su tarjeta en vez de encogerse hasta ser
   ilegibles o recortar los nombres. */
.svgwrap{overflow-x:auto;max-width:100%}
.dash-body table{display:block;overflow-x:auto;max-width:100%}

/* Barra de créditos del día. */
.credbar{height:10px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  overflow:hidden}
.credbar span{display:block;height:100%;background:var(--accent);transition:width .4s}
.credbar span.lleno{background:var(--bad)}
.sub-cred{font-size:11px;color:var(--faint);font-family:var(--mono);margin-top:2px}

/* Botón de descarga del dashboard. */
/* Dos descargas distintas: el informe visual y los datos. */
.dash-dl,.dash-xls{color:var(--muted);font-size:12px;margin-left:14px;white-space:nowrap}
.dash-dl:hover,.dash-xls:hover{color:var(--accent)}
.dash-xls{margin-left:10px}

/* Perfil de datos en el panel de admin (spec 008). */
.perf-obj{border:1px solid var(--line);border-radius:9px;padding:12px 14px;margin-bottom:12px;
  background:var(--panel2)}
.perf-obj-h{display:flex;gap:10px;align-items:baseline;margin-bottom:8px;flex-wrap:wrap}
.perf-obj .datatable td{padding:3px 8px;font-size:12.5px}

/* Frase explicativa dentro del bloque Origen (va antes del SQL, no lo reemplaza). */
.src-say{color:var(--ink);font-size:12.5px;line-height:1.5;margin:4px 0 6px}
/* Origen: explicación del analista, campos leídos del SQL, y medición del servidor. */
.src-dest{color:var(--accent);font-family:var(--mono);font-size:11.5px;margin-top:5px}
.src-campos{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:5px}
.src-campos-t{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);
  margin-right:2px}
.src-campos code{font-family:var(--mono);font-size:11px;color:var(--muted);
  border:1px solid var(--line);border-radius:4px;padding:1px 6px;background:rgba(0,0,0,.25)}


/* Estado del servicio en el panel de admin. */
.salud{border-radius:9px;padding:12px 15px;margin-bottom:16px;font-size:13.5px}
.salud.bien{border:1px solid var(--good);background:rgba(52,179,122,.10);color:#9ADFC0}
.salud.mal{border:1px solid var(--bad);background:rgba(224,82,82,.10);color:#F1A2A2}
.salud ul{margin:7px 0 0;padding-left:20px}
.salud li{margin:3px 0}

/* Botón del mensaje que salta a su tablero. */
.msg-ir{display:block;margin-top:9px;background:transparent;border:1px solid var(--line);
  color:var(--accent);border-radius:7px;padding:6px 11px;font-size:12.5px;font-family:inherit;
  cursor:pointer;transition:border-color .15s,background .15s}
.msg-ir:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}

/* ============================================================
   MÓVIL
   La aplicación se hizo para escritorio y tenía una sola regla adaptativa. Esto cubre lo
   que se rompía en un teléfono: la barra superior que pedía 520 px, la barra del tablero
   que superponía el rótulo del modelo con el enlace de volver, y las tablas anchas.
   ============================================================ */

/* Botón del menú: tres líneas que se cruzan al abrirse. */
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:7px;
  width:38px;height:34px;flex-direction:column;justify-content:center;align-items:center;
  gap:4px;cursor:pointer;padding:0;flex-shrink:0}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .2s,opacity .2s}
.nav-toggle.abierto span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.abierto span:nth-child(2){opacity:0}
.nav-toggle.abierto span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:760px){
  /* 16px es un umbral de iOS, no una preferencia estética: por debajo, Safari hace zoom
     automático al enfocar el campo y descuadra toda la pantalla. */
  input,textarea,select{font-size:16px}

  header.top{padding:10px 14px;position:relative}
  .nav-toggle:not(.hidden){display:flex}

  /* El menú deja de ser una fila y pasa a ser un panel desplegable. `position:absolute`
     sobre el header para que no empuje el contenido al abrirse. */
  #nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--panel);border-bottom:1px solid var(--line);z-index:40;
    box-shadow:0 12px 28px rgba(0,0,0,.5);display:none}
  #nav.abierto{display:flex}
  #nav a,#nav .user{padding:13px 18px;border-bottom:1px solid var(--line);font-size:15px}
  #nav .user{font-size:12px;background:var(--panel2)}

  /* Barra del tablero: en columna. En rejilla de tres, los laterales se comprimían a cero
     y el rótulo «Modelo» se montaba sobre «← Reportes». */
  .rep-topbar{grid-template-columns:1fr;gap:8px;padding:10px 14px}
  .rt-lado:empty{display:none}
  .rep-title{max-width:none;font-size:17px;padding:4px 6px}
  .model-pick{justify-self:stretch}
  .model-pick select{max-width:none;width:100%}

  .wrap{padding:18px 14px}
  .rephead{flex-direction:column;align-items:flex-start;gap:12px}
  .rephead .cta{width:100%}
  .repcard{padding:14px}
  .repcard .t{font-size:15px}

  .canvas{padding:14px}
  /* En el teléfono es el único camino al tablero: se le da tamaño de objetivo táctil. */
  .msg-ir{padding:9px 14px;font-size:13.5px;width:100%;text-align:center}
  .dash-card{border-radius:10px}
  .dash-head{flex-wrap:wrap;gap:6px}
  .kpis{grid-template-columns:1fr}

  /* El cajón del chat ocupa la pantalla: 430 px no caben y a media pantalla no se lee. */
  .chatdrawer{width:100%;max-width:100%}
  .chat-bubble{right:16px;bottom:16px;width:52px;height:52px}

  /* Cualquier tabla ancha se desplaza dentro de su tarjeta en vez de estirar la página. */
  .usage-grid{grid-template-columns:1fr}
  .usage-card{overflow-x:auto}
  .datatable{min-width:max-content}
  .uform label{min-width:100%}
  .uform-acts{margin-left:0;width:100%}
}