/* Tokens (paleta validada, tema oscuro) */
:root {
  --plano: #0d0d0d;          /* fondo de página */
  --superficie: #1a1a19;     /* tarjetas / paneles */
  --superficie-2: #222221;   /* hover, insumos */
  --tinta: #ffffff;          /* texto primario */
  --tinta-2: #c3c2b7;        /* texto secundario */
  --tinta-3: #898781;        /* muted: ejes, etiquetas */
  --grid: #2c2c2a;           /* hairlines */
  --linea-base: #383835;
  --borde: rgba(255, 255, 255, 0.10);
  --serie-1: #3987e5;        /* azul de datos (validado sobre #1a1a19) */
  --bueno: #0ca30c;
  --alerta: #fab219;
  --critico: #d03b3b;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.5;
  background: var(--plano); color: var(--tinta);
}

.oculto { display: none !important; }

h1 { font-size: 20px; font-weight: 650; }
h2 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
a { color: var(--serie-1); }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; color: var(--tinta-2); }

/* ── Acceso ─────────────────────────────────────────────── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-caja {
  width: 360px; max-width: 100%; text-align: center;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; padding: 36px 28px;
}
.login-logo { font-size: 42px; margin-bottom: 8px; }
.login-caja h1 { font-size: 18px; }
.login-caja p { color: var(--tinta-3); margin-bottom: 22px; }
.login-caja input { width: 100%; margin-bottom: 12px; }
.login-caja button { width: 100%; }
.login-error { color: var(--critico); font-size: 13px; margin-top: 10px; min-height: 18px; }

/* ── Estructura ─────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--superficie); border-right: 1px solid var(--borde);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 0; height: 100vh;
}
.marca { display: flex; gap: 10px; align-items: center; padding: 0 8px; }
.marca-icono { font-size: 26px; }
.marca b { display: block; font-size: 14.5px; }
.marca small { color: var(--tinta-3); font-size: 11.5px; }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--tinta-2); text-decoration: none; font-weight: 500;
}
.sidebar nav a svg { width: 17px; height: 17px; fill: currentColor; opacity: .85; }
.sidebar nav a:hover { background: var(--superficie-2); color: var(--tinta); }
.sidebar nav a.activo { background: rgba(57, 135, 229, 0.14); color: var(--serie-1); }

.sidebar-pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 4px; }

main { padding: 28px 32px; max-width: 1200px; width: 100%; }

.cabecera-vista { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cabecera-vista p { color: var(--tinta-3); }

/* ── Componentes ────────────────────────────────────────── */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 12px; padding: 18px;
}

.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; }
.kpi .kpi-label { color: var(--tinta-3); font-size: 12.5px; }
.kpi .kpi-valor { font-size: 26px; font-weight: 600; margin-top: 2px; }
.kpi .kpi-nota { color: var(--tinta-3); font-size: 12px; }

.fila-paneles { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .fila-paneles { grid-template-columns: 1fr; } .app { grid-template-columns: 64px 1fr; } .sidebar nav a span, .marca div, .sidebar-pie .btn { display: none; } }

input, select, button, textarea {
  font: inherit; color: var(--tinta);
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 8px; padding: 8px 11px;
}
input:focus, select:focus { outline: 1.5px solid var(--serie-1); outline-offset: -1px; }
input::placeholder { color: var(--tinta-3); }
label { color: var(--tinta-2); font-size: 13px; }

.btn { cursor: pointer; font-weight: 600; background: var(--serie-1); border-color: transparent; color: #fff; }
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.fantasma { background: transparent; border: 1px solid var(--borde); color: var(--tinta-2); font-weight: 500; }
.btn.fantasma:hover { background: var(--superficie-2); filter: none; }
.btn.peligro { background: transparent; border: 1px solid var(--critico); color: var(--critico); font-weight: 500; }
.btn.peligro:hover { background: rgba(208, 59, 59, 0.12); filter: none; }
.btn.chico { padding: 4px 10px; font-size: 12.5px; }

.formulario { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo input, .campo select { min-width: 160px; }

/* Chips de estado: el color NUNCA va solo — siempre icono + texto */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 550;
  border: 1px solid var(--borde); background: var(--superficie-2); color: var(--tinta-2);
}
.chip.bueno { color: var(--bueno); border-color: rgba(12, 163, 12, 0.35); background: rgba(12, 163, 12, 0.10); }
.chip.alerta { color: var(--alerta); border-color: rgba(250, 178, 25, 0.35); background: rgba(250, 178, 25, 0.10); }
.chip.critico { color: var(--critico); border-color: rgba(208, 59, 59, 0.35); background: rgba(208, 59, 59, 0.10); }
.chip.neutro { color: var(--tinta-3); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
th { color: var(--tinta-3); font-weight: 600; font-size: 12px; white-space: nowrap; }
td.num { font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--superficie-2); }
.tabla-scroll { overflow-x: auto; }
.celda-recorte { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

pre.json {
  background: var(--plano); border: 1px solid var(--grid); border-radius: 10px;
  padding: 12px 14px; overflow-x: auto; font-size: 12.5px; color: var(--tinta-2);
}

.aviso-key {
  border: 1px dashed var(--alerta); border-radius: 10px;
  padding: 14px; margin-top: 14px; word-break: break-all;
}
.aviso-key code { color: var(--alerta); font-size: 14px; }

.msj { font-size: 13px; min-height: 18px; margin-top: 8px; }
.msj.bueno { color: var(--bueno); }
.msj.critico { color: var(--critico); }

/* ── Gráfico (SVG) ──────────────────────────────────────── */
.grafico-svg { width: 100%; height: auto; display: block; }
.grafico-svg .eje-texto { fill: var(--tinta-3); font-size: 11px; }
.grafico-svg .gridline { stroke: var(--grid); stroke-width: 1; }
.grafico-svg .baseline { stroke: var(--linea-base); stroke-width: 1; }
.grafico-svg .barra { fill: var(--serie-1); }
.grafico-svg .etiqueta-dato { fill: var(--tinta-2); font-size: 11px; font-weight: 600; }
.grafico-svg .zona-hover { fill: transparent; }
.grafico-svg .zona-hover:hover + .barra, .grafico-svg .barra.resaltada { filter: brightness(1.18); }

.tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.tooltip b { font-variant-numeric: tabular-nums; }

.pie-tabla { color: var(--tinta-3); font-size: 12.5px; margin-top: 10px; }

/* ── Guía de integración ────────────────────────────────── */
.pasos { padding-left: 22px; display: grid; gap: 8px; color: var(--tinta-2); }
.pasos li::marker { color: var(--serie-1); font-weight: 650; }
.pasos b, .lista-reglas b { color: var(--tinta); }
.lista-reglas { padding-left: 18px; display: grid; gap: 6px; color: var(--tinta-2); }
.chips-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.neutro { font-family: ui-monospace, Consolas, monospace; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--grid); }
.tab {
  background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--tinta-3); padding: 6px 12px; cursor: pointer; font-weight: 500; margin-bottom: -1px;
}
.tab:hover { color: var(--tinta); }
.tab.activo { color: var(--tinta); border-bottom-color: var(--serie-1); }
.bloque-codigo { position: relative; }
.bloque-codigo pre { min-height: 120px; padding-right: 90px; white-space: pre; }
.btn-copiar-bloque { position: absolute; top: 8px; right: 8px; }

/* ── Respuesta en lenguaje natural (Probar consulta) ───────── */
.respuesta { border-radius: 10px; padding: 12px 14px; border: 1px solid var(--borde); background: var(--superficie-2); display: grid; gap: 6px; }
.respuesta p { color: var(--tinta); }
.respuesta-titulo { font-weight: 650; }
.respuesta.buena { border-color: rgba(12, 163, 12, 0.35); } .respuesta.buena .respuesta-titulo { color: var(--bueno); }
.respuesta.alerta { border-color: rgba(250, 178, 25, 0.35); } .respuesta.alerta .respuesta-titulo { color: var(--alerta); }
.respuesta.critica { border-color: rgba(208, 59, 59, 0.4); } .respuesta.critica .respuesta-titulo { color: var(--critico); }
.respuesta-sugerencia { color: var(--tinta-2) !important; }
.respuesta details code { display: block; margin-top: 6px; word-break: break-all; }