:root {
  /* Beat · índigo corporativo sobrio (indigo.tech). Neutral slate + un solo
     acento índigo usado con mesura; sin violeta neón, glows discretos. */
  --bg:#0b0d14; --bg-2:#0f1219;
  --panel:#141823; --panel2:#1a1f2c; --line:#262c3a; --line-2:#333a4d;
  --text:#e7eaf1; --muted:#8b93a7;
  --accent:#6366f1; --accent-2:#7c83f5; --accent2:#2dd4a7;
  --warn:#e9b15a; --err:#ef6f7b; --ink:#0a0c12;
  --brand:linear-gradient(135deg,#5b62e0 0%,#7c83f5 100%);
  --glow:0 8px 24px -12px rgba(99,102,241,.35);
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
/* El atributo [hidden] debe ganarle a display:flex/grid de .login/.wrap/.account */
[hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

header { padding:16px 24px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; }
header .brand { width:26px; height:26px; border-radius:6px; display:block; align-self:center; }
header h1 { font-size:17px; margin:0; font-weight:600; letter-spacing:.2px; align-self:center; }
header .sub { color:var(--muted); font-size:12px; }
.account { margin-left:auto; display:flex; align-items:center; gap:10px; }
.account #who { color:var(--muted); font-size:13px; }
/* CTA único de la barra: la acción principal del modo (Transpilar / Generar). */
.cta { padding:8px 16px; }
.cta:disabled { opacity:.5; cursor:not-allowed; }

/* login gate */
.login { min-height:calc(100vh - 58px); display:flex; align-items:center; justify-content:center; }
.logincard { background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:38px 40px; text-align:center; max-width:360px; }
.logincard .logo { width:64px; height:64px; border-radius:14px; margin:0 auto 12px; display:block; }
.logincard h2 { margin:0 0 6px; font-size:18px; }
.logincard p { color:var(--muted); font-size:13px; margin:0 0 20px; }
.logincard .loginhint { color:var(--err); margin-top:14px; }

/* app layout */
.wrap { display:grid; grid-template-columns:380px 1fr; height:calc(100vh - 58px); }
.panel { padding:18px 22px; border-right:1px solid var(--line); overflow:auto; }
.out { padding:20px 24px; overflow:auto; }

label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); margin:16px 0 6px; }
select, input, textarea { width:100%; background:var(--panel2); color:var(--text);
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:13px; font-family:inherit; }
select:focus, input:focus, textarea:focus { outline:none; border-color:var(--accent); }
textarea { font-family:var(--mono); font-size:12px; resize:vertical; }
.labelrow { display:flex; align-items:center; gap:10px; }
.labelrow label { flex:1; margin-bottom:6px; }
.labelrow button { margin:10px 0 6px; }
.ptrow { display:flex; gap:8px; }
.ptrow > * { flex:1; }

/* mode toggle (Transpilador / API Creator) */
.modes { display:flex; gap:0; border:1px solid var(--line); border-radius:8px;
  overflow:hidden; margin-bottom:6px; }
.modes .mode { flex:1; background:var(--panel2); color:var(--muted); border:none;
  border-radius:0; padding:9px 10px; font-size:12px; font-weight:600; }
.modes .mode.active { background:var(--accent); color:var(--ink); }
#modeHint { margin-bottom:4px; }
.fixedrow { display:flex; align-items:center; gap:8px; }
.fixedrow .chip { flex:1; text-align:center; background:var(--panel2);
  border:1px solid var(--line); border-radius:8px; padding:9px 11px;
  font-size:13px; color:var(--text); }
.fixedrow .arrow { flex:0 0 auto; color:var(--accent); font-weight:700; }
.fablink { display:inline-block; background:var(--warn); color:var(--ink); font-weight:600;
  font-size:13px; padding:9px 14px; border-radius:8px; text-decoration:none; }
.fablink:hover { filter:brightness(1.08); }

/* combobox con buscador */
.combo { position:relative; flex:1; }
.combo-input { width:100%; background:var(--panel2); color:var(--text);
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:13px; }
.combo-input:focus { outline:none; border-color:var(--accent); }
.combo-list { position:absolute; z-index:20; top:calc(100% + 4px); left:0; right:0;
  max-height:240px; overflow:auto; background:var(--panel2); border:1px solid var(--accent);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.45); padding:4px; }
.combo-opt { padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.combo-opt:hover { background:#241f47; }
.combo-opt.sel { color:var(--accent); }
.combo-empty { padding:8px 10px; color:var(--muted); font-size:12px; }
.ck { display:flex; align-items:center; gap:7px; margin:0; font-size:13px;
  text-transform:none; letter-spacing:normal; color:var(--text); cursor:pointer; white-space:nowrap; }
.ck input { width:auto; cursor:pointer; }

button { cursor:pointer; border:none; border-radius:8px; padding:11px 14px;
  font-size:13px; font-weight:600; color:var(--ink); background:var(--accent); }
button.primary { width:100%; }
button.ghost { background:var(--panel2); color:var(--text); border:1px solid var(--line); }
button.ship { background:var(--warn); }
button.small { padding:6px 12px; font-size:12px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.row { display:flex; gap:8px; margin-top:18px; }
.row button { flex:1; }
.hint { color:var(--muted); font-size:11px; margin-top:6px; }

/* output / cells */
.empty { color:var(--muted); margin-top:40px; text-align:center; }
.toolbar { display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.toolbar h2 { font-size:14px; margin:0; flex:1; }
.report { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:7px 13px; }
.stat b { font-size:17px; display:block; }
.stat span { color:var(--muted); font-size:11px; }
.cell { border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:var(--panel); overflow:hidden; }
.cell > summary { cursor:pointer; padding:9px 14px; font-size:12px; display:flex; gap:10px;
  align-items:center; list-style:none; user-select:none; }
.cell > summary::-webkit-details-marker { display:none; }
.badge { font-size:10px; padding:2px 7px; border-radius:20px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; }
.badge.code { background:#241f47; color:var(--accent); }
.badge.markdown { background:#15352a; color:var(--accent2); }
.cell pre { margin:0; padding:14px; border-top:1px solid var(--line);
  background:#0c111b; overflow:auto; font:12px/1.55 var(--mono); white-space:pre; }
.copy { margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:22px; padding:0; background:transparent; color:var(--muted);
  border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.copy:hover { background:#241f47; color:var(--accent); border-color:var(--accent); }
.copy.ok { color:var(--accent2); border-color:var(--accent2); }
.copy svg { width:13px; height:13px; display:block; }
.ptform { background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; margin-bottom:14px; }
.ptform h3 { font-size:13px; margin:16px 0 10px; font-weight:600; color:var(--text); }
.ptform > h3:first-child { margin-top:0; }
.ptform .ptrow { margin-bottom:10px; }
.ptform .ptrow > div { display:flex; flex-direction:column; }
.ptform label { margin:0 0 4px; }
.ptchecks { display:flex; gap:20px; margin-top:8px; }
button.apply { background:var(--accent2); }
.contractbig { width:100%; min-height:calc(100vh - 190px); background:#0c111b;
  border:1px solid var(--line); border-radius:10px; padding:14px; color:var(--text);
  font:12px/1.55 var(--mono); resize:vertical; }
.contractbig:focus { outline:none; border-color:var(--accent); }
.warnlist { margin:0 0 16px; padding:0; list-style:none; }
.warnlist li { font:12px/1.5 var(--mono); padding:5px 10px; border-radius:6px;
  margin-bottom:4px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent); }

/* Compiler diagnostics (severity + provenance). */
.diaglist { margin:0 0 16px; padding:0; list-style:none; }
.diaglist li { font:12px/1.5 var(--mono); padding:5px 10px; border-radius:6px;
  margin-bottom:4px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--muted); }
.diaglist li.info { border-left-color:var(--accent); }
.diaglist li.warning { border-left-color:#e0b341; }
.diaglist li.error { border-left-color:var(--err); }
.diaglist code { color:var(--accent2); }
.diaglist .src { color:var(--muted); }
.err { color:var(--err); background:#2a1518; border:1px solid #4a2228;
  padding:12px 14px; border-radius:8px; font-family:var(--mono); font-size:12px; white-space:pre-wrap; }

/* Módulo 3: checklist de progreso (vista / test / Excel) + tabla de validación. */
.checklist { margin:0; padding:0; list-style:none; counter-reset: step; }
.checklist li { font-size:13px; padding:10px 14px; border-radius:10px; margin-bottom:8px;
  background:var(--panel); border:1px solid var(--line); }
.checklist .stic { display:inline-block; width:22px; font-family:var(--mono); }
.checklist li.st-run { border-color:var(--accent); }
.checklist li.st-ok { border-left:3px solid var(--accent2); }
.checklist li.st-ok .stic { color:var(--accent2); }
.checklist li.st-fail { border-left:3px solid var(--err); }
.checklist li.st-fail .stic { color:var(--err); }
.checklist li.st-wait, .checklist li.st-skip { color:var(--muted); }
.stdetail { margin-top:10px; font-size:12px; }
.stdetail code { color:var(--accent2); font-family:var(--mono); }
.valtable { width:100%; border-collapse:collapse; margin-top:10px;
  font:12px/1.5 var(--mono); }
.valtable th { text-align:left; color:var(--muted); font-weight:600;
  padding:4px 8px; border-bottom:1px solid var(--line); }
.valtable td { padding:4px 8px; border-bottom:1px solid var(--line); }
.valtable tr.bad td { color:var(--err); }
.valtable tr.soft td { color:#e0b341; }

/* API Creator: toggles de pasos del Ship (default todos; desactivables). */
.steptoggles { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;
  margin:8px 0 4px; }
.okmsg { color:var(--accent2); font-family:var(--mono); }

/* Cierre: certificado de transacción — compacto, apto para screenshot de celular
   y compartir. Reusado por API Creator (m2) y Excel (m3). */
.cert { max-width:380px; margin:18px 0 4px; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:var(--panel); }
.cert.cert-ok { border-color:#1f5a44; }
.cert.cert-bad { border-color:#4a2228; }
.cert-head { display:flex; align-items:center; gap:13px; padding:16px 18px; }
.cert-ok .cert-head { background:#13302480; }
.cert-bad .cert-head { background:#2a151880; }
.cert-seal { font-size:24px; width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-weight:700;
  background:var(--accent2); color:#082018; }
.cert-bad .cert-seal { background:var(--err); color:#200a0b; }
.cert-title { font-size:15px; font-weight:700; }
.cert-obj { font-family:var(--mono); font-size:11px; color:var(--muted); word-break:break-all; }
.cert-body { padding:6px 18px; }
.cert-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  font-size:13px; border-bottom:1px dashed var(--line); }
.cert-row:last-child { border-bottom:none; }
.cert-row span { color:var(--muted); }
.cert-links { padding:4px 18px 12px; display:flex; flex-direction:column; gap:6px; }
.cert-foot { padding:9px 18px; font-size:10px; color:var(--muted);
  border-top:1px solid var(--line); letter-spacing:.05em; text-transform:uppercase; }

.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  padding:10px 18px; border-radius:8px; font-size:13px; max-width:80vw; z-index:10; }
.toast.ok { background:#15352a; color:var(--accent2); border:1px solid #1f5a44; }
.toast.error { background:#2a1518; color:var(--err); border:1px solid #4a2228; }

/* landing de herramientas (post-login): card más ancho que el de login para
   que los 3 tiles queden anchos y bajos, no en columnas angostas. */
#landing .logincard { max-width:680px; }
.tiles { display:flex; gap:14px; margin-top:18px; }
.tiles button { flex:1; padding:20px 18px; font-size:15px; line-height:1.4; }
.tiles small { display:block; font-weight:400; opacity:.75; font-size:12px; margin-top:6px; }

/* ── Vistas de grafo / chat (SQL Creator + Visor) ───────────────────────────
   Viven bajo el header global (mismo top bar en las 3 vistas). Estilos propios
   (paleta catppuccin), todos prefijados con .gview para no chocar con el tema
   raíz. SQL Creator = solo chat · Visor = solo grafo. */
.gview { height:calc(100vh - 58px); background:#1e1e2e; color:#cdd6f4;
         display:flex; flex-direction:column;
         font-family:-apple-system,Segoe UI,sans-serif; }
.gview .chatwrap { flex:1; display:flex; flex-direction:column; min-height:0;
                   width:100%; max-width:820px; margin:0 auto; }
.gview .gtop { padding:8px 14px; background:#181825; display:flex; gap:10px;
               align-items:center; flex-wrap:wrap; border-bottom:1px solid #313244; flex-shrink:0; }
.gview .gtop h1 { font-size:15px; margin:0 8px 0 0; font-weight:600; color:#cdd6f4; }
.gview .gtop h1 .gstats { font-weight:400; opacity:.6; font-size:12px; }
.gview input[type=text] { padding:6px 10px; border-radius:6px; border:1px solid #313244;
                          font-size:13px; background:#1e1e2e; color:#cdd6f4; }
.gview .gq { width:300px; }
.gview select, .gview .gbtn { padding:6px 10px; border-radius:6px; border:none;
                              font-size:13px; cursor:pointer; }
.gview select { background:#1e1e2e; color:#cdd6f4; border:1px solid #313244; }
.gview .gbtn { background:#7c7bf7; font-weight:600; color:#11111b; }
.gview .gbtn.sec { background:#313244; color:#cdd6f4; }
.gview .gbtn.back { background:#f38ba8; color:#11111b; }
.gview .gbtn.cancel { background:#f38ba8; color:#11111b; }   /* Enviar -> Cancelar en vuelo */
.gview .glegend { font-size:11px; display:flex; gap:6px; align-items:center; color:#cdd6f4; }
.gview .gfilt { font-size:11px; display:inline-flex; align-items:center; gap:0;
                background:#181825; color:#cdd6f4; border:1px solid #313244;
                border-radius:6px; padding:3px 8px; cursor:pointer; line-height:1; }
.gview .gfilt:hover { border-color:#585b70; }
.gview .gfilt.off { opacity:0.4; text-decoration:line-through; }
.gview .dot { display:inline-block; width:10px; height:10px; border-radius:50%;
              margin-right:3px; vertical-align:-1px; }
.gview .line { display:inline-block; width:14px; height:0; border-top:2.5px solid;
               margin-right:3px; vertical-align:3px; }
.gview .gmain { flex:1; display:flex; min-height:0; }
.gview .netwrap { flex:1; position:relative; min-width:0; }
.gview .net { position:absolute; inset:0; }
.gview .info { position:absolute; bottom:12px; left:12px; background:rgba(24,24,37,.94);
               padding:10px 14px; border-radius:8px; font-size:12px; max-width:440px;
               display:none; border:1px solid #313244; line-height:1.5; }
.gview .info b { color:#7c7bf7; }
.gview .info .purp { color:#a6e3a1; }
.gview .gloading { position:absolute; inset:0; display:flex; align-items:center;
                   justify-content:center; font-size:14px; color:#a6adc8; }
.gview aside { width:400px; border-left:1px solid #313244; background:#181825;
               display:flex; flex-direction:column; min-height:0; }
.gview aside h2 { font-size:13px; margin:0; padding:10px 14px;
                  border-bottom:1px solid #313244; color:#cdd6f4; }
.gview .msgs { flex:1; overflow-y:auto; padding:12px; display:flex;
               flex-direction:column; gap:10px; }
.gview .msg { padding:9px 12px; border-radius:10px; font-size:12.5px; line-height:1.45;
              white-space:pre-wrap; word-break:break-word; }
.gview .msg.user { background:#2a2a3e; align-self:flex-end; max-width:88%; }
.gview .msg.bot  { background:#11111b; align-self:flex-start; max-width:95%;
                   border:1px solid #313244; }
.gview .msg.bot .objs { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.gview .objs button { font-size:11px; padding:3px 8px; background:#313244; color:#cdd6f4;
                      border:none; border-radius:6px; cursor:pointer; }
.gview .msg.think { color:#a6adc8; font-style:italic; }
.gview .askbar { display:flex; gap:8px; padding:10px; border-top:1px solid #313244; align-items:flex-end; }
.gview .askbar input, .gview .askbar textarea { flex:1; }
.gview .askbar textarea { resize:none; overflow-y:auto; line-height:1.4; min-height:38px; }
.gview .askbar .gbtn { flex:none; }

/* ════════════════════════════════════════════════════════════════════════
   Beat · pulido de marca índigo (overrides — van al final para ganar cascada)
   ════════════════════════════════════════════════════════════════════════ */

/* Fondo: slate oscuro con un wash índigo MUY tenue arriba (sin glow morado). */
body {
  background:
    radial-gradient(1200px 560px at 18% -12%, rgba(99,102,241,.07), transparent 62%),
    var(--bg);
  background-attachment:fixed;
}

/* Header: hairline de marca tenue + wordmark blanco con punto índigo (sobrio). */
header {
  position:relative; background:var(--bg);
  border-bottom:1px solid var(--line);
}
header::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(99,102,241,.55), transparent);
}
header h1 { color:var(--text); font-weight:650; letter-spacing:.2px; }

/* Logo/brand: marco discreto (1px) con sombra suave, sin halo. */
header .brand { box-shadow:0 0 0 1px var(--line-2), 0 2px 8px -2px rgba(0,0,0,.5); }
.logincard .logo { box-shadow:0 0 0 1px var(--line-2), 0 8px 24px -10px rgba(99,102,241,.35); }

/* Botón base + CTA + primary: índigo sólido sobrio, micro-lift contenido. */
button, .cta { background:var(--accent); color:#fff; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
button:hover:not(:disabled), .cta:hover:not(:disabled) { transform:translateY(-1px); background:#6f72f3; box-shadow:var(--glow); }
button:active:not(:disabled) { transform:translateY(0); }
button.primary { box-shadow:var(--glow); }
button.ghost { background:var(--panel2); color:var(--text); box-shadow:none; }
button.ghost:hover:not(:disabled) { border-color:var(--line-2); background:#222838; box-shadow:none; transform:none; }
button.ship { background:var(--accent-2); color:var(--ink); }   /* publicar: distinto del primary */
button.apply { background:var(--accent2); color:var(--ink); }
.modes .mode.active { background:var(--accent); color:#fff; }

/* Cards de login/landing: borde sutil + sombra profunda neutra (no glow morado). */
.logincard {
  background:var(--panel); border:1px solid var(--line);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.02);
}

/* Chips de dialecto / flechas: acento contenido. */
.fixedrow .arrow { color:var(--accent); }

/* ── Landing estructurado: hero + grid de herramientas + footer ───────────── */
#landing .logincard { max-width:760px; padding:34px 36px 22px; text-align:left; }
.landinghead { display:flex; align-items:center; gap:16px; margin-bottom:6px; }
.landinghead .logo { width:52px; height:52px; margin:0; }
.eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:1.4px;
  color:var(--accent-2); font-weight:600; }
.landinghead h2 { margin:4px 0 2px; font-size:20px; color:var(--text); }
.landinghead .lead { margin:0; color:var(--muted); font-size:13px; }
.landingdiv { height:1px; background:var(--line); margin:20px 0; }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0; }
.tiles .tile {
  display:block; background:var(--panel2); color:var(--text); text-align:left;
  border:1px solid var(--line); border-radius:12px; padding:16px 16px 15px;
  box-shadow:none; position:relative; transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.tile b { margin-top:12px; }
.tile .tile-ic { display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; color:var(--accent-2);
  background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25); }
.tile .tile-ic svg { width:18px; height:18px; }
.tile b { font-size:14px; font-weight:600; }
.tile small { display:block; color:var(--muted); font-size:12px; line-height:1.45; font-weight:400; margin-top:2px; }
.tile .tile-arrow { position:absolute; top:14px; right:14px; color:var(--muted);
  font-size:14px; transition:transform .14s ease, color .14s ease; }
.tiles .tile:hover:not(:disabled) {
  transform:translateY(-2px); border-color:var(--accent);
  background:#1d2333; box-shadow:0 16px 34px -20px rgba(99,102,241,.5);
}
.tile:hover .tile-arrow { transform:translateX(3px); color:var(--accent-2); }
.landingfoot { display:flex; justify-content:space-between; margin-top:20px;
  padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.landingfoot .accent { color:var(--accent-2); }

/* Scrollbars discretos en la paleta índigo. */
* { scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); background-clip:content-box; }