: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;height:100vh;display:flex;flex-direction:column}
.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}
.rep-topbar{display:flex;gap:18px;align-items:center;padding:9px 22px;border-bottom:1px solid var(--line);flex-shrink: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:520px;max-width:60%}
.rep-title:hover{border-color:var(--line)}
.rep-title:focus{outline:none;border-color:var(--accent);background:var(--panel2)}
.model-pick{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.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}