/* amai.css — piel del Control Room (CR-007) con los tokens del panel de AMAI Voice
   (app/globals.css del repo VOICE, tren de agosto): fondo #0d0d0d, tarjetas #1c1c1c, sidebar #171717,
   jade mate #0f9d6a / #22b27f, hairline blanca al 10 %, radios 0.625–1rem, Poppins en titulares.
   Oscuro por defecto (como el panel). Claro con <html data-theme="light"> (botón de la cabecera).
   Solo CSS + estructura del shell: no cambia datos, endpoints ni los ids/clases que usa app.js. */

:root {
  /* ---- tokens del panel (dark) ---- */
  --cr-bg-rgb: 13 13 13;            /* --background #0d0d0d */
  --cr-surface-rgb: 28 28 28;       /* --card #1c1c1c */
  --cr-surface2-rgb: 38 38 38;      /* --secondary / --input #262626 */
  --cr-sidebar-rgb: 23 23 23;       /* --sidebar #171717 */
  --cr-border-rgb: 255 255 255;
  --cr-border-a: 0.10;              /* --border rgba(255,255,255,.1) */
  --cr-ink-rgb: 245 245 244;        /* --foreground #f5f5f4 */
  --cr-muted-rgb: 163 163 163;      /* --muted-foreground #a3a3a3 */
  --cr-ink-muted-a: 0.62;

  --cr-jade-rgb: 15 157 106;        /* --primary #0f9d6a */
  --cr-jade-accent-rgb: 34 178 127; /* --accent #22b27f */
  --cr-jade-deep-rgb: 0 140 89;     /* --jade-dark #008c59 */
  --cr-on-jade: #00231b;            /* --primary-foreground */
  --cr-jade-glow: rgba(15, 157, 106, 0.45);

  --cr-cyan-rgb: 56 189 209;        /* informativo, mate */
  --cr-amber-rgb: 245 158 11;
  --cr-red-rgb: 248 113 113;

  --cr-radius: 0.625rem;            /* --radius */
  --cr-radius-lg: 1rem;
  --cr-shadow-card: 0 1px 2px rgba(0,0,0,.28), 0 10px 24px -12px rgba(0,0,0,.55);
  --cr-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cr-font-display: "Poppins", var(--cr-font-sans);
  color-scheme: dark;
}

html[data-theme="light"] {
  --cr-bg-rgb: 255 255 255;
  --cr-surface-rgb: 255 255 255;
  --cr-surface2-rgb: 241 245 249;   /* --muted #f1f5f9 */
  --cr-sidebar-rgb: 248 250 252;    /* --sidebar #f8fafc */
  --cr-border-rgb: 15 23 42;
  --cr-border-a: 0.12;              /* --hairline */
  --cr-ink-rgb: 18 18 18;           /* --foreground #121212 */
  --cr-muted-rgb: 91 103 119;       /* --muted-foreground #5b6777 */
  --cr-cyan-rgb: 14 116 144;
  --cr-amber-rgb: 180 83 9;
  --cr-red-rgb: 220 38 38;
  --cr-jade-glow: rgba(15, 157, 106, 0.30);
  --cr-shadow-card: 0 1px 2px rgba(15,23,42,.05), 0 8px 20px -12px rgba(15,23,42,.12);
  color-scheme: light;
}

/* ---- base ---- */
* { scrollbar-color: rgba(var(--cr-border-rgb), .35) transparent; }
html, body { background: rgb(var(--cr-bg-rgb)); }
body { font-family: var(--cr-font-sans); color: rgb(var(--cr-ink-rgb)); -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(var(--cr-border-rgb), .28); border-radius: 8px; }
:focus-visible { outline: 2px solid rgb(var(--cr-jade-accent-rgb)); outline-offset: 2px; }

#view h2, #login h1, .cr-brand-name { font-family: var(--cr-font-display); font-weight: 600; letter-spacing: -0.015em; }
#view h2 { font-size: 1.25rem; line-height: 1.3; }

/* utilidades grises de app.js → tokens del panel (el id gana a la utilidad de Tailwind) */
#appShell .text-slate-300, #login .text-slate-300 { color: rgba(var(--cr-ink-rgb), .85); }
#appShell .text-slate-400, #login .text-slate-400 { color: rgb(var(--cr-muted-rgb)); }
#appShell .text-slate-500, #login .text-slate-500 { color: rgba(var(--cr-muted-rgb), .85); }
#appShell .text-slate-600, #login .text-slate-600 { color: rgba(var(--cr-muted-rgb), .7); }
#appShell .text-white { color: rgb(var(--cr-ink-rgb)); }
#appShell .hover\:text-white:hover { color: rgb(var(--cr-ink-rgb)); }
#appShell .text-black { color: var(--cr-on-jade); }
#appShell .bg-jade, #login .bg-jade { color: var(--cr-on-jade); }
#appShell .bg-white\/5 { background: rgb(var(--cr-surface2-rgb)); }
#appShell .bg-white\/10 { background: rgba(var(--cr-border-rgb), .12); }

/* tarjetas (.bg-panel border-edge rounded-xl en app.js) */
#appShell .bg-panel, #login .bg-panel {
  background: rgb(var(--cr-surface-rgb));
  box-shadow: var(--cr-shadow-card);
}
#appShell .bg-panel.rounded-xl, #appShell .bg-panel.rounded-lg { border-radius: var(--cr-radius-lg); }

/* inputs y selects (Tailwind pone bg-ink/border-edge; aquí la forma) */
#appShell input, #appShell select, #appShell textarea, #login input {
  background: rgb(var(--cr-surface2-rgb));
  border: 1px solid rgba(var(--cr-border-rgb), var(--cr-border-a));
  border-radius: var(--cr-radius);
  color: rgb(var(--cr-ink-rgb));
  min-height: 40px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#appShell input::placeholder, #login input::placeholder { color: rgba(var(--cr-muted-rgb), .8); }
#appShell input:focus, #appShell select:focus, #login input:focus {
  border-color: rgb(var(--cr-jade-rgb));
  box-shadow: 0 0 0 3px rgba(var(--cr-jade-rgb), .18);
}
#appShell input[type="checkbox"] { min-height: 0; accent-color: rgb(var(--cr-jade-rgb)); }

/* botones jade (primarios) */
#appShell button.bg-jade, #login button.bg-jade, #appShell a.bg-jade {
  border-radius: var(--cr-radius);
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px -8px var(--cr-jade-glow);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#appShell button.bg-jade:hover, #login button.bg-jade:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px var(--cr-jade-glow); }
#appShell button.bg-jade:active { transform: translateY(0); }

/* chips (badges): el color lo pone el JS vía --c; aquí geometría */
.chip { font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 600; letter-spacing: .01em;
  border: 1px solid var(--c, rgba(var(--cr-border-rgb), var(--cr-border-a))); white-space: normal; overflow-wrap: anywhere; }
kbd { background: rgb(var(--cr-surface2-rgb)); border: 1px solid rgba(var(--cr-border-rgb), var(--cr-border-a)); border-radius: 4px; padding: 0 5px; font-size: 11px; }

/* ---- login: la MISMA tarjeta que el login del panel de AMAI Voice (components/auth/auth-shell.tsx + app/app/login)
   Receta literal de app/globals.css: .amai-glass-panel (borde blanca .10, degradado .025->.008 sobre rgba(24,24,24,.72),
   blur 8px saturate 110 %, sombra, brillo superior ::before) sobre fondo con amai-grid / amai-stars / amai-noise /
   amai-vignette y dos brillos jade de esquina (bg-primary/8 y /6, blur-3xl). Sin Google ni Facebook. ---- */
.cr-auth { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: hidden; background: rgb(var(--cr-bg-rgb)); }
.cr-auth-grid, .cr-auth-stars, .cr-auth-noise, .cr-auth-vignette, .cr-auth-glow { position: absolute; inset: 0; pointer-events: none; }
.cr-auth-grid {
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 132px 132px; opacity: .18; mask-image: radial-gradient(circle at top, black 0%, transparent 76%); -webkit-mask-image: radial-gradient(circle at top, black 0%, transparent 76%);
}
.cr-auth-stars {
  background-image: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1px), radial-gradient(rgba(var(--cr-jade-rgb), .24) 1px, transparent 1px);
  background-size: 160px 160px, 94px 94px; background-position: 0 0, 44px 58px; opacity: .18;
}
.cr-auth-noise {
  background-image: radial-gradient(rgba(255,255,255,.06) .7px, transparent .7px), radial-gradient(rgba(255,255,255,.025) .7px, transparent .7px);
  background-position: 0 0, 18px 24px; background-size: 26px 26px, 38px 38px; mix-blend-mode: soft-light;
}
.cr-auth-vignette { background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.42) 68%, rgba(0,0,0,.64) 100%); }
.cr-auth-glow { inset: auto; width: 24rem; height: 24rem; border-radius: 999px; filter: blur(64px); }
.cr-auth-glow--tl { top: -8rem; left: -8rem; background: rgba(var(--cr-jade-rgb), .08); }
.cr-auth-glow--br { bottom: -8rem; right: -8rem; background: rgba(var(--cr-jade-rgb), .06); }
.cr-auth-wrap { position: relative; width: 100%; max-width: 28rem; }

.cr-glass-panel {
  position: relative; overflow: clip; border-radius: 1.5rem;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)), rgba(24,24,24,.72);
  backdrop-filter: blur(8px) saturate(110%); -webkit-backdrop-filter: blur(8px) saturate(110%);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.1);
}
.cr-glass-panel::before { content: ""; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%); opacity: .5; }
.cr-login-card { padding: 2rem; }
.cr-login-card > * { position: relative; }
.cr-login-head { text-align: center; margin-bottom: 2rem; }
.cr-login-logo { position: relative; width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 1rem; }
.cr-login-logo-halo { position: absolute; inset: -.75rem; border-radius: 999px; background: rgba(var(--cr-jade-rgb), .20); filter: blur(24px); }
.cr-login-logo img { position: relative; width: 4rem; height: 4rem; object-fit: contain; border-radius: 1rem; }
.cr-login-head h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin: 0; color: rgb(var(--cr-ink-rgb)); }
.cr-login-head p { margin: .5rem 0 0; color: rgb(var(--cr-muted-rgb)); font-size: 1rem; }
.cr-label { display: block; font-size: .875rem; font-weight: 500; color: rgb(var(--cr-ink-rgb)); margin: 0 0 .5rem; }
.cr-field { position: relative; margin-bottom: 1.25rem; }
.cr-field-icon { position: absolute; left: .85rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); color: rgb(var(--cr-muted-rgb)); pointer-events: none; }
#login .cr-input {
  width: 100%; height: 3rem; padding: .75rem 1rem .75rem 2.5rem; font-size: .95rem; margin: 0;
  border-radius: .75rem; border: 1px solid rgba(var(--cr-border-rgb), calc(var(--cr-border-a) * .6));
  background: rgba(var(--cr-bg-rgb), .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: rgb(var(--cr-ink-rgb)); outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
#login .cr-input::placeholder { color: rgba(var(--cr-muted-rgb), .75); }
#login .cr-input:focus { border-color: rgb(var(--cr-jade-rgb)); box-shadow: 0 0 0 3px rgba(var(--cr-jade-rgb), .25); }
.cr-login-btn {
  width: 100%; height: auto; padding: .8rem 1rem; margin-top: .25rem; border: 0; border-radius: .75rem; cursor: pointer;
  background: rgb(var(--cr-jade-rgb)); color: #ffffff; font-family: var(--cr-font-sans); font-size: .95rem; font-weight: 600;
  transition: transform .15s ease, background-color .15s ease;
}
.cr-login-btn:hover { background: rgba(var(--cr-jade-rgb), .9); transform: scale(1.01); }
.cr-login-btn:active { transform: scale(1); }
.cr-login-err { min-height: 1.25rem; margin: .75rem 0 0; text-align: center; font-size: .8rem; color: rgb(var(--cr-red-rgb)); }
.cr-login-foot { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(var(--cr-border-rgb), var(--cr-border-a)); text-align: center; font-size: .8rem; color: rgb(var(--cr-muted-rgb)); }
html[data-theme="light"] .cr-glass-panel { background: #ffffff; border-color: rgba(0,0,0,.08); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06); }
html[data-theme="light"] .cr-auth-vignette, html[data-theme="light"] .cr-auth-stars, html[data-theme="light"] .cr-auth-noise { opacity: 0; }
html[data-theme="light"] .cr-auth-grid { opacity: .5; background-image: linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px); }
html[data-theme="light"] #login .cr-input { background: rgba(255,255,255,.7); }
@media (max-width: 639px) { .cr-login-card { padding: 1.5rem 1.25rem; } }

/* ---- app shell: sidebar del panel + cabecera + contenido ---- */
.cr-shell { display: flex; min-height: 100vh; align-items: stretch; }
.cr-sidebar {
  width: 248px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px;
  padding: .9rem .6rem 1rem; background: rgb(var(--cr-sidebar-rgb));
  border-right: 1px solid rgba(var(--cr-border-rgb), var(--cr-border-a));
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.cr-sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem 1rem; }
.cr-sidebar-brand img { width: 40px; height: 40px; border-radius: .75rem; object-fit: contain; flex-shrink: 0; }
.cr-brand-name { font-size: 15px; line-height: 1.15; color: rgb(var(--cr-ink-rgb)); }
.cr-brand-name b { color: rgb(var(--cr-jade-accent-rgb)); font-weight: 700; }
.cr-brand-sub { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--cr-muted-rgb)); margin-top: 2px; }
.cr-nav-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--cr-muted-rgb), .9); padding: .4rem .8rem .3rem; }
.cr-nav { display: flex; flex-direction: column; gap: 3px; }
#appShell .cr-nav .navbtn {
  position: relative; display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 42px;
  padding: .55rem .8rem; text-align: left; white-space: normal;
  font-size: 14px; font-weight: 500; color: rgba(var(--cr-ink-rgb), .78);
  border-radius: .75rem; border: 1px solid transparent; background: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
#appShell .cr-nav .navbtn::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0;
  background: rgba(var(--cr-muted-rgb), .55); transition: background-color .15s ease, box-shadow .15s ease;
}
#appShell .cr-nav .navbtn:hover {
  background: rgba(var(--cr-border-rgb), .04); border-color: rgba(var(--cr-border-rgb), .06);
  color: rgb(var(--cr-ink-rgb)); transform: translateX(2px);
}
#appShell .cr-nav .navbtn.active {
  color: rgb(var(--cr-jade-accent-rgb));
  border-color: rgba(var(--cr-jade-rgb), .22);
  background: linear-gradient(180deg, rgba(var(--cr-jade-rgb), .16), rgba(var(--cr-jade-rgb), .06));
}
#appShell .cr-nav .navbtn.active::before { background: rgb(var(--cr-jade-accent-rgb)); box-shadow: 0 0 0 4px rgba(var(--cr-jade-rgb), .18); }
.cr-sidebar-foot { margin-top: auto; padding: .8rem .8rem .2rem; font-size: 11px; color: rgba(var(--cr-muted-rgb), .8); }

.cr-shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.cr-header {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem;
  height: 60px; padding: 0 1.25rem; background: rgba(var(--cr-bg-rgb), .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--cr-border-rgb), var(--cr-border-a));
}
.cr-header-spacer { flex: 1; }
.cr-header-actions { display: flex; align-items: center; gap: .35rem; font-size: 13px; color: rgb(var(--cr-muted-rgb)); }
.cr-header-actions #whoami { padding: .3rem .6rem; border-radius: 999px; background: rgb(var(--cr-surface2-rgb)); color: rgb(var(--cr-ink-rgb)); font-weight: 500; }
.cr-header-actions button, .cr-header-actions a {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: 0 .7rem; border-radius: var(--cr-radius);
  color: rgb(var(--cr-muted-rgb)); transition: background-color .15s ease, color .15s ease;
}
.cr-header-actions button:hover, .cr-header-actions a:hover { background: rgba(var(--cr-border-rgb), .06); color: rgb(var(--cr-ink-rgb)); }
.cr-theme-btn { font-size: 15px; }
.cr-main { padding: 1.25rem 1.5rem 2rem; max-width: 1400px; width: 100%; margin: 0 auto; }

/* elementos de vista: alertas, tablas, secciones */
#view .text-\[11px\].uppercase { color: rgb(var(--cr-muted-rgb)); letter-spacing: .08em; }
#view table { border-collapse: collapse; font-variant-numeric: tabular-nums; width: 100%; }
#view thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--cr-muted-rgb)); font-weight: 600; }
#view thead tr { position: sticky; top: 0; background: rgb(var(--cr-surface-rgb)); z-index: 1; }
#view tbody tr { border-top: 1px solid rgba(var(--cr-border-rgb), calc(var(--cr-border-a) * .7)); }
#view tbody tr:hover { background: rgba(var(--cr-border-rgb), .035); }
#view a { color: rgb(var(--cr-jade-accent-rgb)); }
#view code, #view .font-mono { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* toast */
#toast { background: rgb(var(--cr-surface-rgb)); color: rgb(var(--cr-ink-rgb)); border-radius: var(--cr-radius); box-shadow: var(--cr-shadow-card); }

/* botón hamburguesa + scrim: solo existen visualmente bajo 640px */
.cr-menu-btn { display: none; }
.cr-sidebar-scrim { display: none; }

/* ---- 639px: sidebar plegable (checkbox-only, sin JS nuevo) ---- */
@media (max-width: 639px) {
  .cr-menu-btn {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: var(--cr-radius); cursor: pointer; font-size: 18px; line-height: 1;
    color: rgba(var(--cr-ink-rgb), .85);
    position: fixed; top: 10px; left: 12px; z-index: 60;
    background: rgba(var(--cr-bg-rgb), .82); backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--cr-border-rgb), var(--cr-border-a));
  }
  .cr-menu-btn:hover { background: rgba(var(--cr-border-rgb), var(--cr-border-a)); }
  body:has(#appShell.hidden) .cr-menu-btn { display: none; }
  .cr-sidebar {
    position: fixed; inset: 0 auto 0 0; width: 82vw; max-width: 300px; z-index: 50;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: 8px 0 24px rgba(0,0,0,.35);
  }
  #sidebarToggle:checked ~ #appShell .cr-sidebar { transform: translateX(0); }
  .cr-sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.5);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  #sidebarToggle:checked ~ .cr-sidebar-scrim { opacity: 1; pointer-events: auto; }
  .cr-main { padding: .9rem; }
  /* chips sin partir palabras; las tablas se desplazan dentro de su tarjeta, no la página */
  .chip { white-space: nowrap; overflow-wrap: normal; }
  #view table { min-width: max-content; }
  #view .bg-panel:has(table), #view .overflow-auto, #view .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cr-header { padding: 0 .75rem 0 60px; }
  #view .overflow-auto, #view [class*="overflow-auto"] { -webkit-overflow-scrolling: touch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}