/* assets/css/global.css */

:root {
    /* Paleta de Colores Principal */
    --bg-main: #0f172a;        /* Fondo oscuro principal (el de la web) */
    --bg-card: #1e293b;        /* Fondo para tarjetas, stats y secciones destacadas */
    --accent-orange: #f97316;  /* Naranja principal para botones y logo */
    --accent-hover: #ea580c;   /* Naranja más oscuro para hovers en botones */
    --text-main: #f8fafc;      /* Texto principal (blanco puro/roto) */
    --text-muted: #94a3b8;     /* Texto secundario (gris azulado para subtítulos) */
    --border-color: #334155;   /* Líneas separadoras y bordes de tarjetas */

    /* Tipografía y Variables Estructurales */
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius-md: 8px;
    --radius-lg: 12px;
    --transition: all 0.3s ease;
}

/* ==========================================
   RESETEO BÁSICO
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

/* ==========================================
   CLASES DE UTILIDAD GLOBALES
   ========================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn-primary {
    background-color: var(--accent-orange);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-main);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-secondary:hover {
    background-color: var(--bg-card);
    border-color: var(--text-muted);
}