/* =========================================================================
   admin-tokens.css — VALORES del sistema de diseño AMSAC (fuente de verdad).
   Sistema NUEVO (2026-07-07): dark a medida (mockups) + claro aprobado previo.
   Único lugar con HEX. El acento AMSAC vive en :root (fijo); neutros y
   semánticos cambian con data-mode. Ver STYLE_SPECIFICATIONS.md / DESIGN_GUIDELINES.md.
   ========================================================================= */
:root {
  /* ---- Tipografía ---- */
  --font-family: 'Montserrat', system-ui, sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* Escala (px). Títulos grandes en peso 300. */
  --fs-display:30px;   /* H1 de página */
  --fs-kpi:32px;       /* valor KPI del dashboard */
  --fs-h1:22px;        /* nombres de rol / matriz */
  --fs-title:21px;     /* título de modal */
  --fs-h2:16px;        /* título de sección/tarjeta */
  --fs-input:15px;     /* texto de input (login) */
  --fs-body:14px;
  --fs-sm2:13.5px; --fs-sm:13px;
  --fs-label:12px; --fs-label-sm:11.5px; --fs-micro:11px;

  /* ---- Espaciado (base 4) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;

  /* ---- Radios ---- */
  --radius-sm:7px;         /* chips de acción, botones pequeños */
  --radius-input:9px;      /* inputs, botones, ítems de nav */
  --radius-md:9px;         /* alias (default de MudBlazor) */
  --radius-card:14px;      /* tarjetas / tablas */
  --radius-lg:16px;        /* modal / card de login */
  --radius-modal:16px;
  --radius-pill:999px;

  /* ---- Alturas de control / fila ---- */
  --ctrl-sm:32px;          /* botón de acción de fila */
  --ctrl-icon:38px;        /* botón de icono de topbar */
  --ctrl-md:44px;          /* botón/primario, input de formulario */
  --ctrl-input:46px;       /* input de modal */
  --ctrl-lg:52px;          /* input/submit de login */
  --row-h:52px; --row-h-compact:44px;

  /* ---- Shell ---- */
  --topbar-h:60px; --sidebar-w:248px;

  --ease: ease; --duration:160ms;

  /* ---- Acento AMSAC (fijo) ---- */
  --accent:#e6a412;
  --accent-rgb:230,164,18;              /* overlay/ripple de hover (rgba del acento) */
  --accent-darken:#c8901a;              /* hover / active-pressed del primario relleno */
  --accent-soft:rgba(230,164,18,.12);   /* halo de foco / píldoras */
  --accent-soft-2:rgba(230,164,18,.14); /* chip ámbar */
  --accent-tile:rgba(230,164,18,.13);   /* tiles de icono */
  --accent-nav:rgba(230,164,18,.10);    /* ítem de nav activo */

  /* ---- Tipos de entidad (bitácora de auditoría) ----
     Un hue por tipo. EXTENSIBLE: para un tipo nuevo, agrega aquí su --ent-*
     y mapea la clase en admin-components.css (sección Bitácora). */
  --ent-evento:#5b9bff;
  --ent-subevento:#38bdf8;
  --ent-noticia:#22b8c0;
  --ent-podcast:#ec4899;
  --ent-socio:#a78bfa;
  --ent-usuario:#818cf8;
  --ent-beneficio:#4ade80;
  --ent-categoria:#e6a412;
  --ent-acceso:#5b9bff;
  --ent-preventa:#34d399;
  --ent-conferencista:#c084fc;
  --ent-descuento:#fb923c;
  --ent-default:#8b929e;
}

/* ---------- MODO OSCURO (diseño nuevo, a medida) ---------- */
[data-mode="dark"] {
  --bg:#0b0e13;          /* lienzo de la app */
  --surface:#161a21;     /* tarjetas / modal / login card */
  --surface-2:#1b212b;   /* selects / superficies elevadas */
  --field:#0f1218;       /* fondo de inputs (inset) */
  --topbar-bg:#14181f;
  --sidebar-bg:#10141a;
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.13);
  --hover:rgba(255,255,255,.05); --hover-2:rgba(255,255,255,.08);
  --danger-soft:rgba(214,77,66,.12);
  --ink:#f6f7f9; --ink-2:#eef0f3; --muted:#8b929e; --faint:#626a76;
  --on-accent:#1a1208;
  --accent-text:#e6a412;
  --success:#4ade80; --success-dot:#34c759;
  --error:#e0766c; --error-strong:#d64d42;
  --warning:#e6a412; --info:#5b9bff;
  --shadow-card:none;
  --shadow-modal:0 34px 90px rgba(0,0,0,.62);
  --shadow-login:0 28px 70px rgba(0,0,0,.55);
  --overlay:rgba(6,8,11,.74);
  --color-success-subtle:rgba(74,222,128,.13);
}

/* ---------- MODO CLARO (colores aprobados previos, estructura nueva) ---------- */
[data-mode="light"] {
  --bg:#f7f8fa; --surface:#ffffff; --surface-2:#f1f2f4;
  --field:#ffffff;
  --topbar-bg:#ffffff; --sidebar-bg:#ffffff;
  --border:#e3e5e9; --border-strong:#d5d8dd;
  --hover:rgba(0,0,0,.035); --hover-2:rgba(0,0,0,.06);
  --danger-soft:rgba(217,45,32,.08);
  --ink:#1a1d21; --ink-2:#1a1d21; --muted:#5b6470; --faint:#8a929e;
  --on-accent:#1a1a1a;
  --accent-text:#9a6f08;
  --success:#1f9d57; --success-dot:#1f9d57;
  --error:#d92d20; --error-strong:#d92d20;
  --warning:#c77700; --info:#2563eb;
  --shadow-card:0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --shadow-modal:0 20px 60px rgba(0,0,0,.18);
  --shadow-login:0 10px 40px rgba(0,0,0,.12);
  --overlay:rgba(15,18,24,.5);
  --color-success-subtle:rgba(31,157,87,.10);
}

/* ---------- ALIAS de compatibilidad ----------
   Las páginas Stands/Patrocinios/Portales y sus componentes se escribieron
   contra un naming viejo (--color-*) que el sistema nuevo dejó de definir.
   data-mode vive en <html> (:root), así que estos alias resuelven al token
   correcto por modo sin duplicar. */
:root {
  --color-text:var(--ink);
  --color-text-muted:var(--muted);
  --color-border:var(--border);
  --color-primary:var(--accent);
  --color-primary-subtle:var(--accent-soft);
  --color-bg-subtle:var(--surface-2);
  --color-bg-card:var(--surface);
  --color-success:var(--success);
  --color-warning:var(--warning);
  --color-info:var(--info);
}