/* ============================================================
   WTF PUBLICIDAD — Panel Interno
   base.css — Variables globales, reset y tipografía
   v1.0 | Sep 2026
   ============================================================ */

/* ─── VARIABLES GLOBALES ─── */
:root {

  /* Colores primarios */
  --g:          #75B82A;   /* Verde WTF principal */
  --gd:         #5a9020;   /* Verde oscuro (hover) */
  --go:         #3B6D11;   /* Verde muy oscuro (texto) */
  --gob:        #EAF3DE;   /* Verde claro (fondos) */

  /* Fondos, bordes y texto: dependen del tema (claro/oscuro).
     Definidos en shell.css bajo [data-theme="light"/"dark"],
     no aqui, para no pisar esos valores. */

  /* Azul (estados en producción) */
  --blue:       #378ADD;
  --bluebg:     #0f1e2e;
  --bluetxt:    #85B7EB;
  --bluebdg:    #E6F1FB;
  --bluetxt2:   #0C447C;

  /* Amarillo (advertencias, pendientes) */
  --yellow:     #BA7517;
  --yellowbg:   #2a1e0e;
  --yellowtxt:  #EF9F27;

  /* Rojo (errores, urgente) */
  --red:        #E24B4A;
  --redbg:      rgba(229, 85, 85, 0.10);
  --redbr:      rgba(229, 85, 85, 0.30);
  --redtxt:     #f87171;

  /* Púrpura (validación, roles especiales) */
  --purple:     #a78bfa;
  --purplebg:   #1a1a2e;
  --purpletxt:  #c4b5fd;

  /* Radios de borde */
  --r:          8px;
  --r2:         12px;
  --r3:         16px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.6);

  /* Transiciones */
  --t-fast:     0.12s ease;
  --t-base:     0.20s ease;
  --t-slow:     0.30s ease;

  /* Tipografía */
  --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  "SF Mono", "Fira Code", Consolas, "Courier New", monospace;

  /* Espaciados base */
  --sp-xs:      4px;
  --sp-sm:      8px;
  --sp-md:      12px;
  --sp-lg:      16px;
  --sp-xl:      24px;
  --sp-2xl:     32px;

  /* Topbar y sidebar: definidos en shell.css */
}

/* ─── RESET ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--t);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* ─── TIPOGRAFÍA BASE ─── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--t);
  line-height: 1.3;
}

p { color: var(--ts); line-height: 1.6; }

a {
  color: var(--g);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--gd); }

/* ─── SCROLLBAR PERSONALIZADO ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--brh);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--brs); }

/* ─── SELECCIÓN DE TEXTO ─── */
::selection {
  background: rgba(117, 184, 42, 0.25);
  color: var(--t);
}

/* ─── CLASES DE UTILIDAD — COLORES ─── */
.text-green   { color: var(--g); }
.text-red     { color: var(--red); }
.text-yellow  { color: var(--yellowtxt); }
.text-blue    { color: var(--bluetxt); }
.text-purple  { color: var(--purple); }
.text-muted   { color: var(--ts); }
.text-dim     { color: var(--tm); }

/* ─── CLASES DE UTILIDAD — LAYOUT ─── */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end  { justify-content: flex-end; }
.justify-center { justify-content: center; }
.flex-1       { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap    { flex-wrap: wrap; }
.gap-xs       { gap: var(--sp-xs); }
.gap-sm       { gap: var(--sp-sm); }
.gap-md       { gap: var(--sp-md); }
.gap-lg       { gap: var(--sp-lg); }

/* ─── CLASES DE UTILIDAD — ESPACIADO ─── */
.mt-sm  { margin-top: var(--sp-sm); }
.mt-md  { margin-top: var(--sp-md); }
.mt-lg  { margin-top: var(--sp-lg); }
.mb-sm  { margin-bottom: var(--sp-sm); }
.mb-md  { margin-bottom: var(--sp-md); }
.mb-lg  { margin-bottom: var(--sp-lg); }
.p-sm   { padding: var(--sp-sm); }
.p-md   { padding: var(--sp-md); }
.p-lg   { padding: var(--sp-lg); }

/* ─── CLASES DE UTILIDAD — TEXTO ─── */
.text-xs    { font-size: 10px; }
.text-sm    { font-size: 11px; }
.text-base  { font-size: 13px; }
.text-md    { font-size: 15px; }
.text-lg    { font-size: 18px; }
.font-500   { font-weight: 500; }
.font-600   { font-weight: 600; }
.truncate   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uppercase  { text-transform: uppercase; letter-spacing: 0.08em; }

/* ─── CLASES DE UTILIDAD — VISIBILIDAD ─── */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── ANIMACIONES GLOBALES ─── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes pop {
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}

.animate-fade-in { animation: fadeIn 0.2s ease forwards; }
.animate-spin    { animation: spin 0.6s linear infinite; }
.animate-pulse   { animation: pulse 1.5s ease-in-out infinite; }

/* ─── LABEL DE SECCIÓN (uppercase pequeño) ─── */
.section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm);
}

/* ─── SEPARADOR ─── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--br);
  margin: var(--sp-md) 0;
}

/* ─── ESTADO DE PÁGINA VACÍA ─── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2xl);
  color: var(--tm);
  text-align: center;
  gap: var(--sp-sm);
}
.empty-state i   { font-size: 32px; color: var(--brh); }
.empty-state p   { font-size: 12px; color: var(--tm); }