/* SIPROTEC - estilos personalizados */
:root {
    --siprotec-dark: #071735;
    --siprotec-brand: #0284c7;
    --siprotec-brand-light: #38bdf8;
    --siprotec-brand-dark: #0369a1;
    --siprotec-brand-50: #f0f9ff;
    --siprotec-brand-100: #e0f2fe;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-dark-bg {
    background-color: var(--siprotec-dark) !important;
}

.hero-pattern {
    background-color: #f8fafc;
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 24px 24px;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.slow-bounce {
    animation-duration: 3s;
}

#navbar.navbar-scrolled {
    background-color: rgba(7, 23, 53, 0.96) !important;
    box-shadow: 0 10px 25px rgba(2, 6, 23, 0.22);
    backdrop-filter: blur(10px);
}

/* Fallbacks de color corporativo por si Tailwind CDN no alcanza a aplicar la config */
.bg-brand { background-color: var(--siprotec-brand) !important; }
.bg-brand-50 { background-color: var(--siprotec-brand-50) !important; }
.bg-brand-100 { background-color: var(--siprotec-brand-100) !important; }
.text-brand { color: var(--siprotec-brand) !important; }
.text-brand-50 { color: var(--siprotec-brand-50) !important; }
.text-brand-100 { color: var(--siprotec-brand-100) !important; }
.border-brand-100 { border-color: var(--siprotec-brand-100) !important; }
.hover\:bg-brand-dark:hover { background-color: var(--siprotec-brand-dark) !important; }
.hover\:bg-brand:hover { background-color: var(--siprotec-brand) !important; }
.hover\:bg-brand-light:hover { background-color: var(--siprotec-brand-light) !important; }
.hover\:text-brand:hover { color: var(--siprotec-brand) !important; }
.hover\:text-brand-dark:hover { color: var(--siprotec-brand-dark) !important; }
.hover\:border-brand-100:hover { border-color: var(--siprotec-brand-100) !important; }
.group:hover .group-hover\:bg-brand { background-color: var(--siprotec-brand) !important; }
.group:hover .group-hover\:text-white { color: #ffffff !important; }
.focus\:ring-brand:focus { --tw-ring-color: var(--siprotec-brand) !important; }
.focus\:border-brand:focus { border-color: var(--siprotec-brand) !important; }