/* ===== EVALUACIÓN AJEDREZ DE SILICIO - BASE ===== */

/* Variables CSS - Paleta de Colores Revolucionaria */
:root {
    /* Colores principales */
    --primary-red: #c70039;
    --primary-red-light: #ff1744;
    --primary-red-dark: #a0002e;
    --secondary-gold: #ffc107;
    --secondary-gold-light: #ffd54f;
    --secondary-gold-dark: #ff8f00;
    
    /* Fondos oscuros */
    --background-dark: #0a0a0a;
    --background-darker: #050505;
    --background-card: #111111;
    --background-glass: rgba(17, 17, 17, 0.85);
    
    /* Texto */
    --text-white: #ffffff;
    --text-gray: #b0b0b0;
    --text-light-gray: #e0e0e0;
    
    /* Bordes */
    --border-color: #333333;
    --border-focus: #c70039;
    
    /* Estados */
    --success-color: #00ff88;
    --error-color: #ff3366;
    --warning-color: #ffaa00;
    --info-color: #00aaff;
    
    /* Efectos de neón sutiles */
    --neon-red: 0 0 10px rgba(199, 0, 57, 0.4);
    --neon-gold: 0 0 10px rgba(255, 193, 7, 0.4);
    --neon-blue: 0 0 10px rgba(0, 170, 255, 0.4);
    
    /* Sombras elegantes */
    --shadow-cyber: 0 0 20px rgba(199, 0, 57, 0.2);
    --shadow-glow: 0 0 25px rgba(255, 193, 7, 0.15);
    --shadow-deep: 0 15px 40px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* Transiciones */
    --transition-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Configuración del body */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--background-darker);
    background: linear-gradient(135deg, var(--background-darker) 0%, var(--background-dark) 100%);
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Scrollbar personalizado - Elegante y Red/Silver */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--background-dark);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-red) 0%, #8B0028 100%);
    border-radius: 10px;
    border: 2px solid var(--background-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--secondary-gold) 0%, var(--secondary-gold-dark) 100%);
}

/* Scrollbar para Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-red) var(--background-dark);
}

/* Selección de texto */
::selection {
    background: var(--primary-red);
    color: var(--text-white);
}

::-moz-selection {
    background: var(--primary-red);
    color: var(--text-white);
}