/* ============================================================
   MARCA — ProGroup Digital
   ------------------------------------------------------------
   Este archivo es lo ÚNICO que define la identidad visual.
   estilos.css no tiene un solo color escrito a mano: todo sale
   de las variables de acá. Si algún día cambia la marca, se
   reemplaza este archivo y listo.

   Colores tomados de las variables globales de Elementor de
   www.progroupdigital.com:
     #06053E  azul noche       (fondo del sitio)
     #4C0487  violeta profundo (bloques y tarjetas)
     #6600BA  violeta          (botones y enlaces)
     #F497FF  rosa             (títulos)
     #F27248  coral            (palabra destacada)
     #FF9E7E  coral claro
     #F0F0F0  gris claro       (texto sobre fondo oscuro)
   Tipografía del sitio: Poppins.
   ============================================================ */

/* ---------- MODO OSCURO: es el modo nativo de la marca ---------- */
:root{
  --bg:#06053E;
  --surface:#0C0A46;
  --surface-2:#171063;
  --border:#2A1F72;
  --border-strong:#43309B;
  --ink:#F0F0F0;
  --muted:#A79FD8;

  --accent:#B36BFF;          /* violeta aclarado: legible sobre el azul noche */
  --accent-ink:#12002B;
  --accent-soft:#33075E;

  --marca-rosa:#F497FF;      /* títulos, igual que en la web */
  --marca-coral:#FF9E7E;     /* etiquetas y palabra destacada */
  --marca-violeta:#6600BA;

  /* Semáforo: NO usa los colores de marca a propósito.
     El coral de ProGroup está demasiado cerca de un "atención" y
     confundiría el estado de un vencimiento con la identidad. */
  --ok:#3DD68C;
  --warn:#FFB454;
  --crit:#FF8095;
  --past:#FF4D6D;

  --backdrop:rgba(3,2,28,.72);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -20px rgba(102,0,186,.75);
  --r:10px;
}

/* ---------- MODO CLARO: misma identidad, fondo claro ---------- */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F4F1FA;
    --surface:#FFFFFF;
    --surface-2:#F7F3FD;
    --border:#E2D9F2;
    --border-strong:#C6B3E6;
    --ink:#06053E;
    --muted:#5F5687;

    --accent:#6600BA;
    --accent-ink:#FFFFFF;
    --accent-soft:#F0E4FE;

    --marca-rosa:#4C0487;
    --marca-coral:#B8431F;
    --marca-violeta:#6600BA;

    --ok:#127A50;
    --warn:#8A5A05;
    --crit:#B32639;
    --past:#8A1226;

    --backdrop:rgba(6,5,62,.42);
    --shadow:0 1px 2px rgba(6,5,62,.07), 0 10px 28px -18px rgba(76,4,135,.45);
  }
}
:root[data-theme="light"]{
  --bg:#F4F1FA;
  --surface:#FFFFFF;
  --surface-2:#F7F3FD;
  --border:#E2D9F2;
  --border-strong:#C6B3E6;
  --ink:#06053E;
  --muted:#5F5687;

  --accent:#6600BA;
  --accent-ink:#FFFFFF;
  --accent-soft:#F0E4FE;

  --marca-rosa:#4C0487;
  --marca-coral:#B8431F;
  --marca-violeta:#6600BA;

  --ok:#127A50;
  --warn:#8A5A05;
  --crit:#B32639;
  --past:#8A1226;

  --backdrop:rgba(6,5,62,.42);
  --shadow:0 1px 2px rgba(6,5,62,.07), 0 10px 28px -18px rgba(76,4,135,.45);
}

/* ---------- tipografía ----------
   Poppins es la única familia del sitio: se usa para todo, igual
   que en progroupdigital.com. La monoespaciada es el único
   agregado que no viene de la web, y está justificado: dominios,
   fechas y montos van en columna y tienen que alinearse.        */
:root{
  --font-ui:"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:"Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --peso-titulo:700;
}

/* ---------- detalles de marca ---------- */
.eyebrow{ color:var(--marca-coral); }
.top h1{ color:var(--marca-rosa); letter-spacing:-.025em; }

.marca{ display:flex; align-items:center; gap:14px; }
.marca img{ height:38px; width:auto; flex:none; }

/* Botón principal: el violeta de la marca, no el acento genérico. */
button.primary{
  background:var(--marca-violeta);
  border-color:var(--marca-violeta);
  color:#FFFFFF;
}
button.primary:hover{ filter:brightness(1.16); }

/* La franja de severidad arranca con un dejo del violeta de marca
   cuando el sitio está tranquilo, para que el panel no sea un
   semáforo permanente. */
.site .stripe{ background:linear-gradient(180deg, var(--sev), color-mix(in oklab, var(--sev) 72%, var(--marca-violeta))); }

.tile .v{ letter-spacing:-.03em; }
.gate-card h2{ color:var(--marca-rosa); }