/* Custom styles to complement Tailwind CSS */

/* Paleta de marca CXD (sobrescrita por branding.js al cargar branding.json) */
:root {
    --cxd-deep:    #05060c;
    --cxd-blue:    #1363ff;
    --cxd-azure:   #1ea7ff;
    --cxd-pink:    #ff0db7;
    --cxd-magenta: #ff2ea6;
    --cxd-cyan:    #1ee9db;
}

/* Fondo hero con gradientes radiales suaves (branding.js lo sobreescribe dinámicamente) */
.hero-bg {
    background:
        radial-gradient(800px 400px at 10% 15%, rgba(30,167,255,0.25), transparent 60%),
        radial-gradient(700px 350px at 85% 10%, rgba(19,99,255,0.25), transparent 60%),
        radial-gradient(900px 450px at 20% 85%, rgba(255,13,183,0.22), transparent 60%),
        radial-gradient(600px 300px at 70% 80%, rgba(30,233,219,0.15), transparent 60%),
        linear-gradient(180deg, var(--cxd-deep) 0%, var(--cxd-deep) 100%);
}

/* Gradiente de marca reutilizable */
.brand-gradient {
    background: linear-gradient(135deg, var(--cxd-cyan) 0%, var(--cxd-azure) 30%, var(--cxd-blue) 60%, var(--cxd-pink) 100%);
}

/* Texto con gradiente sutil (para la marca) */
.brand-text {
    background: linear-gradient(135deg, #fff 0%, #e2e8f0 50%, #f8fafc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: lowercase;
    letter-spacing: 0.2px;
}

/* Borde degradado alrededor de la tarjeta (branding.js lo sobreescribe dinámicamente) */
.card-gradient {
    padding: 1px;
    background: linear-gradient(135deg, rgba(30,167,255,0.7), rgba(19,99,255,0.25) 40%, rgba(255,13,183,0.5));
    border-radius: 1rem;
}

/* Botón con gradiente de marca */
.btn-gradient {
    background: linear-gradient(135deg, var(--cxd-azure), var(--cxd-blue) 55%, var(--cxd-pink));
}
.btn-gradient:hover {
    filter: brightness(1.03) saturate(1.05);
}

/* Additional animations and utilities */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Custom scrollbar for better UX */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
}

/* Ensure form elements have proper focus states */
input:focus, button:focus {
    outline: none;
}

/* Animation classes for dynamic content */
.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

/* Glass morphism effect for background elements */
.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Print styles */
@media print {
    body {
        background: white !important;
    }

    .no-print {
        display: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .bg-gradient-to-br {
        background: #000 !important;
    }

    .text-white {
        color: #fff !important;
    }

    .bg-white {
        background: #fff !important;
        border: 2px solid #000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .animate-slide-up,
    .animate-fade-in,
    .transition-all {
        animation: none !important;
        transition: none !important;
    }
}

/* reCAPTCHA layout tweaks to avoid overlapping the submit button on mobile */
.grecaptcha-badge {
    right: 12px !important;
    bottom: 12px !important;
    z-index: 999;
    transition: bottom 0.2s ease, right 0.2s ease;
}

/* Move the badge slightly up on small screens so it doesn't cover the main button */
@media (max-width: 640px) {
    .grecaptcha-badge {
        bottom: 78px !important;
        right: 12px !important;
    }
    #pageContent {
        padding-bottom: 120px;
    }
}

/* Give submit button higher z-index so it is always clickable */
#submitBtn {
    position: relative;
    z-index: 1001;
}

/* Slightly nudge the badge up on larger screens if a floating element is near bottom */
@media (min-width: 641px) {
    .grecaptcha-badge {
        bottom: 18px !important;
    }
}