/* SynerG - ERPSolutions 
   High-Contrast Design System for Tripea 
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* 1. Base Cromática: Profundidad y Nitidez */
    --background: 224 71% 2%;    /* Un negro más profundo para que el neón resalte */
    --foreground: 210 40% 98%;   /* Blanco puro con un toque de azul para evitar fatiga */
    
    /* 2. Colores de Marca con Contraste Elevado */
    --primary: 270 95% 65%;      /* Púrpura Eléctrico: Brilla sobre el fondo oscuro */
    --primary-foreground: 224 71% 2%; /* Texto oscuro sobre púrpura para máxima lectura */
    
    --secondary: 190 90% 50%;    /* Cian Neón: Para elementos de apoyo o tags */
    --secondary-foreground: 224 71% 2%;
    
    /* 3. Estados Críticos (Colores Semánticos) */
    --destructive: 0 100% 60%;   /* Rojo Puro: Alertas imposibles de ignorar */
    --accent: 45 100% 50%;       /* Ámbar: Para estados pendientes o VIP */
    
    /* 4. Estructura de Superficies */
    --card: 224 71% 4%;
    --card-foreground: 210 40% 98%;
    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 270 95% 65%;
    --radius: 1.5rem;
  }
}

/* 1. Fondo "Nebulosa SynerG": Contraste Gradual */
body {
    /* He intensificado el radial para que el centro sea muy oscuro y solo la base tenga color */
    background: radial-gradient(circle at 50% 120%, 
                rgba(147, 51, 234, 0.25) 0%, 
                rgba(15, 23, 42, 0) 60%), 
                #02040a; 
    background-attachment: fixed;
    min-height: 100vh;
    font-family: 'DM Sans', sans-serif;
    color: #f8fafc;
    -webkit-font-smoothing: antialiased;
}

/* 2. Glassmorphism de Alta Legibilidad */
.glass-card {
    /* Fondo un poco más opaco para asegurar que el texto blanco sea legible */
    background: rgba(15, 23, 42, 0.8); 
    backdrop-filter: blur(20px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* 3. Botones "High-Action" */
.btn-primary-neon {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    transition: all 0.3s ease;
}

.btn-primary-neon:hover {
    box-shadow: 0 0 35px rgba(236, 72, 153, 0.6);
    transform: translateY(-2px);
}

/* 4. Utilidades de Enfoque Visual */
.text-contrast-glow {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

.border-neon {
    border: 1px solid rgba(168, 85, 247, 0.5);
    box-shadow: inset 0 0 10px rgba(168, 85, 247, 0.2);
}

/* 5. Custom Scrollbar: Estilo Cyber-ERP */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #02040a;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #9333ea, #db2777);
    border-radius: 20px;
    border: 2px solid #02040a;
}

/* Animación de la barra de progreso del Toast */
@keyframes toast-progress {
    from { width: 100%; }
    to { width: 0%; }
}

/* Contenedor de Toasts con Z-Index superior */
#toaster-container {
    perspective: 1000px;
}

.tripea-toast {
    /* Efecto de entrada tipo "slide and bounce" */
    animation: toast-enter 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes toast-enter {
    from { transform: translateX(100%) scale(0.9); opacity: 0; }
    to { transform: translateX(0) scale(1); opacity: 1; }
}

.hero-visual {
        min-height: 100vh;
        /* JORGE: Aquí pones la ruta de tu imagen principal de San Carlos o el destino estrella */
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(15, 23, 42, 0.5)), 
                          url('/assets/img/hero-background.png'); 
        background-size: cover;
        background-position: center;
        background-attachment: fixed; /* Este efecto hace que la imagen se quede quieta al bajar */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .text-gradient {
        background: linear-gradient(to right, #a855f7, #ec4899);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }