/* ═══════════════════════════════════════════════════════════
   BRAND.CSS — Control de Horarios · OSPAIL / OSPA
   Para cambiar colores: modificar las variables de empresa
   ═══════════════════════════════════════════════════════════ */

/* ── Variables globales base (dark UI) ── */
:root {
  --one-black:      #000000;
  --one-ink:        #1a181d;
  --one-ink-light:  #0a0810;
  --one-white:      #fefeff;
  --one-slate:      #a4a8c0;
  --one-mist:       #c6c9d7;

  --color-success:      #34d399;
  --color-success-text: #86efac;
  --color-danger:       #ef4444;
  --color-danger-text:  #fca5a5;
  --color-warn:         #f59e0b;
  --color-warn-text:    #fcd34d;

  --font-title: "Exo 2", system-ui, sans-serif;
  --font-body:  "Exo 2", system-ui, sans-serif;

  --glass-bg:     rgba(255,255,255,.055);
  --glass-border: rgba(198,201,215,.14);
  --glass-blur:   18px;

  --radius-lg:   16px;
  --radius-md:   12px;
  --radius-sm:   8px;
  --radius-pill: 999px;

  /* ── Empresa activa: OSPAIL por defecto ── */
  --c1:   #F26513;
  --c1b:  #d4540e;
  --c1l:  rgba(242,101,19,.18);
  --c1ll: rgba(242,101,19,.08);
  --c2:   #F2935C;
  --c2l:  rgba(242,147,92,.15);
  --cacento: #F26513;

  --bg-gradient:
    radial-gradient(1200px 700px at 70% 25%, rgba(242,101,19,.12), transparent 55%),
    radial-gradient(900px  600px at 15% 65%, rgba(242,147,92,.08), transparent 55%),
    radial-gradient(700px  500px at 50% 90%, rgba(242,101,19,.06), transparent 60%),
    linear-gradient(180deg, #0a0810, #1a181d);
}

/* ── Empresa OSPA ── */
body.empresa-ospa {
  --c1:   #11308C;
  --c1b:  #0d2570;
  --c1l:  rgba(17,48,140,.18);
  --c1ll: rgba(17,48,140,.08);
  --c2:   #79BF0F;
  --c2l:  rgba(121,191,15,.15);
  --cacento: #79BF0F;

  --bg-gradient:
    radial-gradient(1200px 700px at 70% 25%, rgba(17,48,140,.14), transparent 55%),
    radial-gradient(900px  600px at 15% 65%, rgba(121,191,15,.08), transparent 55%),
    radial-gradient(700px  500px at 50% 90%, rgba(17,48,140,.06), transparent 60%),
    linear-gradient(180deg, #050b1f, #0a1230);
}

/* ── Gradientes de texto de marca ── */
.brand-gc {
  background: linear-gradient(90deg, var(--c1), var(--c2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-gc-solid { color: var(--c1); }

/* ── Marca: icono y nombre ── */
.brand-mark {
  width: 36px; height: 36px; border-radius: 50%;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-color: var(--c1ll);
  border: 1px solid var(--c1l);
  box-shadow: 0 0 20px var(--c1l);
  flex-shrink: 0;
}
.brand-name { font-family: var(--font-title); font-weight: 800; font-size: 16px; letter-spacing: .04em; }
.brand-sub  { font-size: 10px; color: rgba(198,201,215,.52); letter-spacing: .04em; display: block; margin-top: 1px; }

/* ── Colores de área ── */
.acolor-ADMINISTRACION   { color: var(--c1) !important; }
.acolor-COMERCIAL        { color: var(--c2) !important; }
.acolor-RECURSOS_HUMANOS { color: #e4c76a !important; }
.acolor-MARKETING        { color: #f472b6 !important; }
.acolor-ACADEMICO        { color: #a78bfa !important; }
.acolor-INNOVACION       { color: #34d399 !important; }
.acolor-MAESTRANZA       { color: #fb923c !important; }
.acolor-default          { color: var(--one-slate) !important; }