/* ============================================================
   BookedUp · Dashboard — Tokens de diseño
   Valores alineados al dashboard original (deploy replit).
   Marca: #35219B → #822299. Acento de contenido SIEMPRE morado;
   el color de rol solo tiñe el tab del switcher y el avatar.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Marca ---- */
  --marca-primario: #35219b;
  --marca-secundario: #822299;
  --marca-degradado: linear-gradient(135deg, #35219b 0%, #822299 100%);

  /* ---- Superficies y fondos (grises cálidos) ---- */
  --fondo-app: #f9fafc;
  --superficie: #ffffff;
  --superficie-tenue: #f1f3f8;
  --borde: #e7e9f0;
  --borde-fuerte: #d3d7e0;

  /* ---- Texto ---- */
  --texto-fuerte: #0f1722;
  --texto: #334155;
  --texto-suave: #64748b;
  --texto-tenue: #94a3b8;
  --texto-invertido: #ffffff;

  /* ---- Morados auxiliares ---- */
  --morado-claro: #f4f0fe;
  --morado-medio: #b9aee0;
  --morado-oscuro: #2a1a7a;

  /* ---- Colores semánticos de estado ---- */
  --exito: #00b37d;
  --exito-suave: #e6f7f1;
  --exito-texto: #007a55;
  --aviso: #d69e2e;
  --aviso-suave: #fffbeb;
  --aviso-texto: #975a16;
  --peligro: #e53e3e;
  --peligro-suave: #fef2f2;
  --peligro-texto: #c53030;
  --info: #3182ce;
  --info-suave: #ebf4ff;
  --info-texto: #2c5282;

  /* ---- Acento de contenido: violeta eléctrico (interacción).
     La MARCA (logo/degradados de identidad) sigue en --marca-*; el acento de
     botones, estados activos, badges y enlaces es este violeta más vivo. ---- */
  --acento: #9b18f5;
  --acento-suave: var(--morado-claro);
  /* Texto/enlace/icono de acento sobre superficies claras o sobre --morado-claro.
     En tema oscuro se sustituye por una lavanda clara para que no quede
     morado-sobre-morado (invisible). Usar SIEMPRE este token para acento de
     TEXTO; --acento queda para FONDOS sólidos con texto blanco. */
  --acento-texto: #8617e0;

  /* ---- Botones ----
     Primario: violeta eléctrico de acento (CTA como "Create Avatar" del diseño).
     Secundario con relleno y elevación propios para que se lea como
     botón aunque esté sobre una barra del mismo color. */
  --btn-primario: #9b18f5;
  --btn-primario-hover: #8610e2;
  --btn-sec: #eef0f5;
  --btn-sec-hover: #e3e6ee;

  /* ---- Color de rol (solo tab del switcher + avatar) ----
     Cada vista lo redefine con --rol-color / --rol-color-suave. */
  --rol-staff: #35219b;          --rol-staff-suave: #f4f0fe;
  --rol-owner: #00b37d;          --rol-owner-suave: #e6f7f1;
  --rol-pm: #3182ce;             --rol-pm-suave: #ebf4ff;
  --rol-superadmin: #e53e3e;     --rol-superadmin-suave: #fef2f2;
  --rol-partner: #b7791f;        --rol-partner-suave: #fdf3e0;
  /* Texto del rol (inicial del avatar): en oscuro se aclara para leerse sobre
     el tinte *-suave oscurecido (mismo patrón que --exito-texto/--info-texto). */
  --rol-staff-texto: var(--rol-staff);
  --rol-owner-texto: var(--rol-owner);
  --rol-pm-texto: var(--rol-pm);
  --rol-superadmin-texto: var(--rol-superadmin);
  --rol-partner-texto: var(--rol-partner);
  --rol-color: var(--rol-staff);
  --rol-color-suave: var(--rol-staff-suave);
  --rol-color-texto: var(--rol-staff-texto);

  /* ---- Tipografía ----
     El dashboard original usa Plus Jakarta Sans (texto) y DM Mono (datos:
     horas, duraciones). La marca corporativa es Greycliff CF (Adobe, de pago);
     cuando esté el kit, se sustituye en --fuente. */
  --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-bold: 700;

  --txt-xs: 10.5px;
  --txt-sm: 11px;
  --txt-base: 12.5px;
  --txt-md: 13px;
  --txt-lg: 16px;
  --txt-xl: 20px;
  --txt-2xl: 26px;

  /* ---- Espaciado ---- */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 10px;
  --esp-4: 14px;
  --esp-5: 16px;
  --esp-6: 20px;
  --esp-8: 28px;

  /* ---- Radios ---- */
  --radio-sm: 6px;
  --radio: 10px;
  --radio-full: 999px;

  /* ---- Sombras ---- */
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.09), 0 2px 4px rgba(0, 0, 0, 0.04);

  /* ---- Layout (cabecera única) ---- */
  --subheader-alto: 54px;
  --sidebar-ancho: 210px;

  --transicion: 120ms ease;
}

/* ============================================================
   Tema OSCURO. Lo aplica la preferencia del usuario
   (PreferenciasUsuario.tema → <html data-theme>): "oscuro" fuerza
   la paleta; "sistema" la hereda de prefers-color-scheme. La paleta
   redefine SOLO superficies/texto/bordes/suaves; la marca, los
   colores semánticos plenos y el layout no cambian.
   ============================================================ */
/* ESPEJO: cualquier cambio aquí debe replicarse en el bloque data-theme="sistema" de abajo. */
html[data-theme="oscuro"] {
  color-scheme: dark;
  --fondo-app: #090816;
  --superficie: #0e0f22;
  --superficie-tenue: #16172e;
  --borde: #20214a;
  --borde-fuerte: #33345f;

  --texto-fuerte: #eceaf2;
  --texto: #c7c6da;
  --texto-suave: #8b8da6;
  --texto-tenue: #6a6c86;

  --morado-claro: #201338;
  --morado-medio: #7668c4;
  /* Acento de TEXTO y "morado oscuro" (que en claro era texto oscuro sobre
     lavanda): en oscuro ambos pasan a lavanda CLARA para leerse sobre fondos
     oscuros y sobre --morado-claro. */
  --acento-texto: #b9a6f5;
  --morado-oscuro: #d3c9f7;
  --btn-primario: #8b1bfd;
  --btn-primario-hover: #7a10f0;
  --btn-sec: #1b1c34;
  --btn-sec-hover: #242542;

  --exito-suave: #11362a;   --exito-texto: #5fd8ae;
  --aviso-suave: #38300f;   --aviso-texto: #e6bb5e;
  --peligro-suave: #3d1d1d; --peligro-texto: #f29a9a;
  --info-suave: #16293f;    --info-texto: #84b6e8;

  --rol-staff-suave: #201338;
  --rol-owner-suave: #11362a;
  --rol-pm-suave: #16293f;
  --rol-superadmin-suave: #3d1d1d;
  --rol-partner-suave: #3a2c10;
  --rol-staff-texto: #b3a6f2;
  --rol-owner-texto: #5fd8ae;
  --rol-pm-texto: #84b6e8;
  --rol-superadmin-texto: #f29a9a;
  --rol-partner-texto: #e6bb5e;

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
  --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  /* ESPEJO del bloque data-theme="oscuro" de arriba. */
  html[data-theme="sistema"] {
    color-scheme: dark;
    --fondo-app: #090816;
    --superficie: #0e0f22;
    --superficie-tenue: #16172e;
    --borde: #20214a;
    --borde-fuerte: #33345f;

    --texto-fuerte: #eceaf2;
    --texto: #c7c6da;
    --texto-suave: #8b8da6;
    --texto-tenue: #6a6c86;

    --morado-claro: #201338;
    --morado-medio: #7668c4;
    --acento-texto: #b9a6f5;
    --morado-oscuro: #d3c9f7;
    --btn-primario: #8b1bfd;
    --btn-primario-hover: #7a10f0;
    --btn-sec: #1b1c34;
    --btn-sec-hover: #242542;

    --exito-suave: #11362a;   --exito-texto: #5fd8ae;
    --aviso-suave: #38300f;   --aviso-texto: #e6bb5e;
    --peligro-suave: #3d1d1d; --peligro-texto: #f29a9a;
    --info-suave: #16293f;    --info-texto: #84b6e8;

    --rol-staff-suave: #201338;
    --rol-owner-suave: #11362a;
    --rol-pm-suave: #16293f;
    --rol-superadmin-suave: #3d1d1d;
    --rol-partner-suave: #3a2c10;
    --rol-staff-texto: #b3a6f2;
    --rol-owner-texto: #5fd8ae;
    --rol-pm-texto: #84b6e8;
    --rol-superadmin-texto: #f29a9a;
    --rol-partner-texto: #e6bb5e;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
    --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35);
  }
}