/* ===============================
   B-DESK PRO - theme.css
   Variables + base global
   =============================== */

:root{
  --bg: #070A12;

  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.10);

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);

  /* Cyan y violeta de marca. Hasta 2026-07-28 estos tokens valían #33D6FF /
     #8B5CFF mientras el producto pintaba con #22D3EE / #A855F7 (los valores
     que fija CLAUDE.md): dos paletas conviviendo, con los tokens en minoría
     — 964 ocurrencias de una contra ~223 de la otra. Se unifica en la que ya
     usaban la landing y los cinco módulos.
     Para código nuevo: usar var(--cyan) / var(--violet), no el hex. Las
     variantes con alfa que quedan sueltas por los módulos —rgba(34,211,238,…)
     y rgba(168,85,247,…)— son sombras y bordes translúcidos y se dejaron como
     estaban; las de la paleta vieja (rgba(51,214,255,…) / rgba(139,92,255,…))
     también, porque la diferencia con alfa es imperceptible. */
  --cyan: #22D3EE;
  --violet: #A855F7;
  --green: #2DFFB6;
  --red: #FF5D6C;

  /* Estados positivos (activo / exitoso / confirmado).
     Van en CYAN de marca, no en verde: el verde genérico que había suelto
     por la app (#34d399, #2DFFB6, #86efac…) no pertenece a la paleta.
     Usar estos tokens en vez de hardcodear el color. */
  --ok:        #22D3EE;
  --ok-bg:     rgba(34,211,238,.12);
  --ok-border: rgba(34,211,238,.28);

  /* aliases */
  --aqua: var(--cyan);
  --pos: var(--green);
  --neg: var(--red);
  --danger: var(--red);
  --success: var(--ok);

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 18px;

  /* Fonts */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html, body { height: 100%; }

body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(51,214,255,.10), transparent 60%),
    radial-gradient(900px 600px at 80% 10%, rgba(139,92,255,.10), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Headings: Baloo 2 */
h1,h2,h3,h4,h5,h6,
.title,.brand,.page-title,.card-title,.modal-title{
  font-family: var(--font-display);
  letter-spacing: .2px;
}

/* Form elements inherit */
input,select,textarea,button{ font-family: inherit; }

a{ color: var(--cyan); }
a:hover{ color: rgba(51,214,255,.92); }

::selection{
  background: rgba(51,214,255,.22);
  color: var(--text);
}

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
}
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22); }

/* Focus visible: el anillo global premium vive en bdesk-focus-visible.css
   (tokens --focus-ring-*). Acá solo dejamos la base accesible por si ese
   archivo no cargara (fallback con outline real, NO el viejo outline:none). */
:focus-visible{
  outline: 2px solid rgba(51,214,255,.78);
  outline-offset: 2px;
}
:focus:not(:focus-visible){
  outline: none;
}