/* ======================================================================
   P.E.P.E. — Identidad compartida
   ----------------------------------------------------------------------
   Única fuente de verdad para color, tipografía, radios y curvas.
   La consumen TANTO la landing pública como el panel privado, para que
   entrar al panel no se sienta como otra página.

   Regla: monocromo. El color solo aparece en datos que significan algo
   (calidad del aire, seguridad, victoria/derrota, alertas).
   ====================================================================== */

/* ---------------- CLARO (base) ----------------
   Rediseño v2: neutro CÁLIDO (no gris muerto) + UN acento verde (el mismo
   tono de "EN VIVO"). El color sigue reservado para lo que significa algo. */
:root{
  --ink:#14161a;                  /* texto principal */
  --ink-2:#4a4f57;                /* secundario */
  --ink-3:#878d97;                /* terciario / meta */
  --paper:#faf9f6;                /* fondo (blanco cálido) */
  --paper-2:#f2f1ec;              /* fondo alterno */
  --card:#ffffff;                 /* superficie que SOBRESALE */
  --card-2:#fbfbf9;               /* superficie al pasar el cursor */
  --surface:#f0efea;             /* relleno de control (se HUNDE) */
  --surface-2:#e7e5dd;
  --hair:#e4e2da;                 /* separador 1px */
  --hair-2:#d3d0c6;
  --veil:rgba(250,249,246,.78);   /* barra translúcida */
  --shadow:0 1px 2px rgba(20,22,26,.05), 0 10px 26px -14px rgba(20,22,26,.14);

  /* EL acento — verde P.E.P.E. #009938. El MISMO en claro y en oscuro: antes
     el modo oscuro usaba una variante más clara y quedaban dos verdes. */
  --accent:#009938;
  --accent-ink:#ffffff;
  --accent-soft:rgba(0,153,56,.12);

  /* Semánticos: color con significado (aire, seguridad, victoria, alerta).
     --good va atado al acento a propósito: es el mismo verde. */
  --good:#009938; --mid:#e0912f; --bad:#e0484d; --alt:#2f6bff;
  /* verde oscuro para el tramo alto de las calificaciones personales (96-100) */
  --good-strong:#144d2e;

  --r:16px; --r-sm:11px; --r-lg:22px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --blur:saturate(150%) blur(18px);

  /* UNA sola familia de texto en todo el sitio —landing, panel y login—:
     títulos, cuerpo, chips, fechas y contadores usan IBM Plex Sans.
     La mono queda SOLO para el logotipo P.E.P.E. y la pantalla de carga; en la
     landing ese logotipo es una imagen, así que ahí ni siquiera hace falta.
     Antes el panel titulaba en mono y la landing en sans, y las etiquetas
     chicas del panel además cambiaban de familia al pasar a móvil. */
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --brand:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Alias que quedan de la etapa anterior. Se conservan porque los usan muchas
     reglas, pero ya apuntan los tres a la misma sans: cambiar la tipografía de
     todo el sitio es cambiar --font y nada más. */
  --font-display:var(--font);
  --mono:var(--font);

  /* Escala tipográfica */
  --t-large:31px; --t-title:22px; --t-head:17px;
  --t-body:15px;  --t-sub:14px;   --t-foot:13px; --t-cap:12px;
}

/* ---------------- OSCURO ---------------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e9e8e3;
    --ink-2:#a7a59d;
    --ink-3:#78766f;
    --paper:#161718;
    --paper-2:#1e1f20;
    --card:#202224;
    --card-2:#26282a;
    --surface:#0e0f10;
    --surface-2:#2a2c2e;
    --hair:#2c2e30;
    --hair-2:#3a3d3f;
    --veil:rgba(22,23,24,.7);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.6);
    --accent:#009938; --accent-ink:#ffffff; --accent-soft:rgba(0,153,56,.16);
    --good:#009938; --mid:#e6a959; --bad:#f0787c; --alt:#8fb0ff;
    --good-strong:#236c46;
  }
}
:root[data-theme="dark"]{
  --ink:#e9e8e3;
  --ink-2:#a7a59d;
  --ink-3:#78766f;
  --paper:#161718;
  --paper-2:#1e1f20;
  --card:#202224;
  --card-2:#26282a;
  --surface:#0e0f10;
  --surface-2:#2a2c2e;
  --hair:#2c2e30;
  --hair-2:#3a3d3f;
  --veil:rgba(22,23,24,.7);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.6);
  --accent:#009938; --accent-ink:#ffffff; --accent-soft:rgba(0,153,56,.16);
  --good:#009938; --mid:#e6a959; --bad:#f0787c; --alt:#8fb0ff;
  --good-strong:#236c46;
}

/* ---------------- Base compartida ---------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input{ font:inherit; color:inherit; }
img{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
::selection{ background:var(--ink); color:var(--paper); }

/* Un icono sin regla propia jamás debe crecer hasta llenar su contenedor */
i[data-ico]{ display:inline-block; width:17px; height:17px; flex:none; }
i[data-ico] svg{ display:block; width:100%; height:100%; }

/* Barras de desplazamiento discretas */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:var(--hair-2); border-radius:20px; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---------------- Marca ----------------
   El PNG es blanco sobre transparente: se usa como máscara para que tome
   el color del tema en lugar de verse como un contorno suelto. */
.mark{
  width:26px; height:26px; flex:none;
  background:currentColor;
  -webkit-mask:url(../img/pepe-logo.png) center/contain no-repeat;
  mask:url(../img/pepe-logo.png) center/contain no-repeat;
}
.mark--lg{ width:64px; height:64px; }

/* ---------------- Botón de tema ----------------
   Los selectores llevan [data-ico] a propósito: `i[data-ico]` tiene
   especificidad (0,1,1) y le ganaría a una clase suelta, dejando el sol
   y la luna visibles al mismo tiempo. */
i.t-sun[data-ico]{ display:none; }
i.t-moon[data-ico]{ display:inline-block; }
:root[data-theme="dark"] i.t-sun[data-ico]{ display:inline-block; }
:root[data-theme="dark"] i.t-moon[data-ico]{ display:none; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) i.t-sun[data-ico]{ display:inline-block; }
  :root:not([data-theme="light"]) i.t-moon[data-ico]{ display:none; }
}

.iconbtn{
  width:32px; height:32px; border-radius:var(--r-pill);
  display:grid; place-items:center; color:var(--ink);
  transition:background .2s, transform .2s var(--ease);
}
.iconbtn:hover{ background:var(--surface); }
.iconbtn:active{ transform:scale(.9); }
.iconbtn i[data-ico]{ width:16px; height:16px; }

/* ---------------- Skeletons / Estados de carga compartidos ---------------- */
.skel{
  font-family:var(--mono); font-size:12.5px; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:8px;
}
.skel::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
  animation:skelDot 1.4s ease-in-out infinite;
}
@keyframes skelDot{
  0%, 100%{ opacity:.35; transform:scale(.85); }
  50%{ opacity:1; transform:scale(1.15); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}