/* ==========================================================================
   GLOBAL.CSS - BASE DEL SISTEMA QUIERO KEBAB (BRUTALIST V3)
   ========================================================================== */

/* --- 1. IMPORTACIÓN DE FUENTES --- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Poppins:wght@300;400;500;600;700;800;900&family=Courier+Prime:wght@400;700&display=swap');

/* --- 2. VARIABLES GLOBALES (IDENTIDAD BRUTALISTA) --- */ 
:root {
    /* Color Principal — Naranja Neón Ultra Saturado */
    --primary: #FF6A00;
    --primary-hover: #FF8C00;
    --primary-dim: rgba(255, 106, 0, 0.15);
    --primary-glow: rgba(255, 106, 0, 0.50);

    /* Fondos Negro Puro */
    --bg-body: #000000;
    --bg-card: #0A0A0A;
    --bg-glass: rgba(255, 255, 255, 0.02);
    
    /* Textos */
    --text-main: #ffffff;
    --text-muted: #888888;
    --text-dark: #000000;     

    /* Estados del Sistema */
    --success: #00FF66;
    --warning: #FFD600;
    --danger: #FF2222;
    
    /* Bordes y Sombras — Neón Crudo */
    --border-light: rgba(255, 255, 255, 0.06);
    --shadow-neon: 0 0 20px rgba(255, 106, 0, 0.45);
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.7);
    
    /* Medidas — Esquinas Muertas */
    --radius-main: 0px;
    --radius-pill: 0px;

    /* Tipografía */
    --font-heading: 'Archivo Black', 'Impact', sans-serif;
    --font-body: 'Poppins', sans-serif;
}

/* --- 3. RESET & BASE --- */ 
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* ═══ NUCLEAR BRUTALIST RESET: ZERO RADIUS ═══
   Kills every rounded corner globally.
   Individual stylesheets inherit this baseline. */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;

    /* ═══ Subtle Noise / Grain Texture ═══
       Ultra-light SVG noise pattern layered on pure black.
       Gives a raw, tactile "printed" feel without PNG weight. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* ═══ HEADINGS: Archivo Black ═══ */
h1, h2, h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.95;
}

/* Selección de Texto (Estilo Marca) */
::selection {
    background: var(--primary);
    color: #000;
}

/* --- 4. SCROLLBAR PERSONALIZADO (Estilo Crudo) --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-body); 
}

::-webkit-scrollbar-thumb {
    background: #222;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* --- 5. UTILIDADES GLOBALES --- */

/* Textos */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-orange { color: var(--primary) !important; }
.text-dim { color: var(--text-muted) !important; }
.text-danger { color: var(--danger) !important; }

/* Efecto de Texto Gradiente (Neón) */
.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, #FFD600 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Flexbox Helpers */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-10 { gap: 10px; }

/* Visibilidad */
.hidden { display: none !important; }

/* --- 6. ELEMENTOS COMUNES --- */

/* Botones Base */
button {
    font-family: var(--font-body);
    border: none;
    outline: none;
    cursor: pointer;
    background: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s ease;
}

/* Inputs Base */
input, select, textarea {
    font-family: var(--font-body);
    outline: none;
}

/* Efecto Focus Accesible (Teclado) */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --- 7. ANIMACIONES GLOBALES --- */

/* ═══ NEON FLICKER — Electric erratic buzz ═══ */
@keyframes neon-flicker {
  0%   { opacity: 1; }
  2%   { opacity: 0.82; }
  4%   { opacity: 1; }
  6%   { opacity: 0.88; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  93%  { opacity: 0.8; }
  94%  { opacity: 1; }
  96%  { opacity: 0.85; }
  97%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Fade In Suave */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.5s ease-out forwards; }

/* Spinner de Carga */
.loader {
    border: 3px solid rgba(255,255,255,0.1);
    border-top: 3px solid var(--primary);
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════
   ── WEBKIT AUTOFILL OVERRIDE — Dark mode protection
   Chrome/Safari inyectan fondo amarillo + texto oscuro en campos
   autocompletados. La técnica de box-shadow inset masivo es el
   único método cross-browser fiable para neutralizarlo.
   ══════════════════════════════════════════════════════════════ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #111111 inset !important;
  box-shadow:         0 0 0px 1000px #111111 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
  transition: background-color 99999s ease-in-out 0s;
}