/* CSS Corporativo - Colores de la empresa */

:root {
    /* Paleta corporativa */
    --corporate-black: #000000;
    --corporate-proton-red: #FF0000;
    --corporate-sepia-black: #1C1C1C;
    --corporate-white: #FFFFFF;
    
    /* Variaciones para diferentes usos */
    --corporate-red-hover: #CC0000;
    --corporate-red-light: rgba(255, 0, 0, 0.1);
    --corporate-red-medium: rgba(255, 0, 0, 0.2);
    --corporate-sepia-light: #2A2A2A;
    --corporate-sepia-lighter: #3A3A3A;
}

/* Reset y base */
* {
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, var(--corporate-black), var(--corporate-sepia-black)) !important;
    color: var(--corporate-white) !important;
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* Contenedores principales */
.container, main, section {
    background: transparent !important;
    color: var(--corporate-white) !important;
}

/* Header corporativo */
.corporate-header {
    background: linear-gradient(135deg, var(--corporate-sepia-black), var(--corporate-black)) !important;
    border-bottom: 2px solid var(--corporate-proton-red);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1000;
}

/* Navegación */
.corporate-nav a {
    color: var(--corporate-white) !important;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
}

.corporate-nav a:hover {
    color: var(--corporate-white) !important;
    background: var(--corporate-proton-red) !important;
    border-color: var(--corporate-proton-red);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    transform: translateY(-1px);
}

/* Logo corporativo */
.corporate-logo {
    color: var(--corporate-white) !important;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px var(--corporate-proton-red);
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 16px;
    border-radius: 8px;
    border: 2px solid var(--corporate-proton-red);
}

.corporate-logo:hover {
    color: var(--corporate-white) !important;
    background: var(--corporate-proton-red) !important;
    transform: scale(1.05);
    box-shadow: 0 0 20px var(--corporate-proton-red);
}

/* Botones corporativos */
.btn-corporate, .btn, button {
    background: linear-gradient(135deg, var(--corporate-proton-red), var(--corporate-red-hover)) !important;
    color: var(--corporate-white) !important;
    border: 2px solid var(--corporate-proton-red) !important;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn-corporate:hover, .btn:hover, button:hover {
    background: var(--corporate-red-hover) !important;
    color: var(--corporate-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
    border-color: var(--corporate-white);
}

/* Botones secundarios */
.btn-secondary {
    background: var(--corporate-sepia-black) !important;
    color: var(--corporate-white) !important;
    border: 1px solid var(--corporate-proton-red) !important;
}

.btn-secondary:hover {
    background: var(--corporate-proton-red) !important;
    color: var(--corporate-white) !important;
}

/* Cards corporativas */
.card, .card-main, .corporate-card {
    background: linear-gradient(135deg, var(--corporate-sepia-black), var(--corporate-sepia-light)) !important;
    color: var(--corporate-white) !important;
    border: 1px solid var(--corporate-proton-red);
    border-radius: 12px;
    padding: 20px;
    margin: 10px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.card:hover, .card-main:hover, .corporate-card:hover {
    border-color: var(--corporate-proton-red);
    box-shadow: 0 8px 32px rgba(255, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Formularios */
input, textarea, select {
    background: var(--corporate-sepia-black) !important;
    color: var(--corporate-white) !important;
    border: 1px solid var(--corporate-sepia-light) !important;
    border-radius: 6px;
    padding: 10px 12px;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--corporate-proton-red) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--corporate-red-light);
}

input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

option {
    background: var(--corporate-sepia-black) !important;
    color: var(--corporate-white) !important;
}

/* Tablas */
table {
    background: var(--corporate-sepia-black) !important;
    color: var(--corporate-white) !important;
    border-collapse: collapse;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

th {
    background: var(--corporate-black) !important;
    color: var(--corporate-white) !important;
    border-bottom: 2px solid var(--corporate-proton-red);
    padding: 12px;
    font-weight: bold;
}

td {
    border-bottom: 1px solid var(--corporate-sepia-light);
    padding: 10px 12px;
    color: var(--corporate-white) !important;
}

tr:hover {
    background: var(--corporate-sepia-light) !important;
}

/* Enlaces */
a {
    color: var(--corporate-white) !important;
    text-decoration: none;
}

a:hover {
    color: var(--corporate-proton-red) !important;
    text-decoration: underline;
}

/* Alertas corporativas */
.alert {
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    border-left: 4px solid var(--corporate-proton-red);
}

.alert-success {
    background: var(--corporate-red-light) !important;
    color: var(--corporate-white) !important;
    border-left-color: var(--corporate-proton-red);
}

.alert-error {
    background: var(--corporate-red-medium) !important;
    color: var(--corporate-white) !important;
    border-left-color: var(--corporate-proton-red);
}

.alert-warning {
    background: var(--corporate-sepia-light) !important;
    color: var(--corporate-white) !important;
    border-left-color: var(--corporate-proton-red);
}

/* Badges y etiquetas */
.badge, .status-badge {
    background: var(--corporate-proton-red) !important;
    color: var(--corporate-white) !important;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Barras de progreso */
.progress-bar {
    background: var(--corporate-sepia-light) !important;
    border-radius: 10px;
    overflow: hidden;
    height: 8px;
}

.progress-fill {
    background: linear-gradient(90deg, var(--corporate-proton-red), var(--corporate-red-hover)) !important;
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Modales */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: linear-gradient(135deg, var(--corporate-sepia-black), var(--corporate-black)) !important;
    color: var(--corporate-white) !important;
    border: 2px solid var(--corporate-proton-red);
    border-radius: 12px;
}

/* Notificaciones */
.notification {
    background: var(--corporate-sepia-black) !important;
    color: var(--corporate-white) !important;
    border: 1px solid var(--corporate-proton-red);
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
}

.notification-badge {
    background: var(--corporate-proton-red) !important;
    color: var(--corporate-white) !important;
    border: 2px solid var(--corporate-black);
}

/* Scrollbars corporativas */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--corporate-sepia-black);
}

::-webkit-scrollbar-thumb {
    background: var(--corporate-proton-red);
    border-radius: 4px;
}

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

/* Iconos */
.icon, svg {
    color: var(--corporate-white) !important;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    padding: 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
}

.icon:hover, svg:hover {
    color: var(--corporate-white) !important;
    background: var(--corporate-proton-red) !important;
    border-color: var(--corporate-proton-red);
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--corporate-proton-red);
}

/* Selector de idioma corporativo */
.lang-selector {
    background: rgba(0, 0, 0, 0.8) !important;
    color: var(--corporate-white) !important;
    border: 2px solid var(--corporate-proton-red) !important;
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.lang-selector:focus {
    outline: none;
    border-color: var(--corporate-proton-red);
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .corporate-header {
        padding: 1rem;
    }
    
    .corporate-nav {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .card, .card-main, .corporate-card {
        margin: 5px 0;
        padding: 15px;
    }
}

/* Animaciones */
@keyframes corporateGlow {
    0% { box-shadow: 0 0 5px var(--corporate-proton-red); }
    50% { box-shadow: 0 0 20px var(--corporate-proton-red); }
    100% { box-shadow: 0 0 5px var(--corporate-proton-red); }
}

.corporate-glow {
    animation: corporateGlow 2s infinite;
}

/* Utilidades */
.text-corporate-red { color: var(--corporate-proton-red) !important; }
.text-corporate-white { color: var(--corporate-white) !important; }
.bg-corporate-black { background: var(--corporate-black) !important; }
.bg-corporate-sepia { background: var(--corporate-sepia-black) !important; }
.bg-corporate-red { background: var(--corporate-proton-red) !important; }

/* Sobrescribir cualquier CSS de Tailwind que pueda interferir */
.bg-purple-600, .bg-purple-700, .bg-blue-600, .bg-green-600, .bg-yellow-600 {
    background: var(--corporate-proton-red) !important;
}

.text-purple-300, .text-blue-400, .text-green-400, .text-yellow-400 {
    color: var(--corporate-proton-red) !important;
}

.border-purple-500, .border-blue-500, .border-green-500 {
    border-color: var(--corporate-proton-red) !important;
}

/* Temas de la aplicación */
.theme-dark {
    --bg-primary: #000000;
    --bg-secondary: #1C1C1C;
    --bg-tertiary: #2A2A2A;
    --text-primary: #FFFFFF;
    --text-secondary: #CCCCCC;
    --accent-color: #FF0000;
}

.theme-light {
    --bg-primary: #000000;
    --bg-secondary: #1C1C1C;
    --bg-tertiary: #2A2A2A;
    --text-primary: #FFFFFF;
    --text-secondary: #CCCCCC;
    --accent-color: #FF0000;
}

.theme-neon {
    --bg-primary: #0A0A0A;
    --bg-secondary: #1A1A1A;
    --bg-tertiary: #2A2A2A;
    --text-primary: #00FFFF;
    --text-secondary: #FF00FF;
    --accent-color: #00FF00;
}

/* Aplicar variables de tema - todos mantienen colores corporativos */
body.theme-dark,
body.theme-light,
body.theme-neon,
body.theme-auto {
    background: linear-gradient(135deg, var(--corporate-black), var(--corporate-sepia-black)) !important;
    color: var(--corporate-white) !important;
}

/* Efectos de botones mejorados */
.btn-corporate:hover,
.btn:hover,
button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(255, 0, 0, 0.4) !important;
    background: linear-gradient(135deg, #FF3333, #FF0000) !important;
}

.btn-corporate:active,
.btn:active,
button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3) !important;
}

/* Efectos de enlaces mejorados */
a:hover {
    text-shadow: 0 0 8px var(--accent-color) !important;
    transition: all 0.3s ease !important;
}

/* Efectos de cards */
.card, .glass, .neomorphic {
    transition: all 0.3s ease !important;
}

.card:hover, .glass:hover, .neomorphic:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 32px rgba(255, 0, 0, 0.2) !important;
}

/* Asegurar que Tailwind no interfiera con los efectos */
.hover\:bg-red-600:hover,
.hover\:bg-red-700:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-purple-600:hover {
    background: linear-gradient(135deg, #FF3333, #FF0000) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(255, 0, 0, 0.4) !important;
}

/* Efectos de transición globales */
* {
    transition: all 0.3s ease !important;
}

/* Efectos específicos para elementos interactivos */
.corporate-nav a,
.btn-corporate,
.btn,
button,
input[type="submit"],
input[type="button"],
.card,
.glass,
.neomorphic {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Efectos de focus mejorados */
input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3) !important;
    border-color: var(--corporate-proton-red) !important;
}

/* Efectos de scale para elementos clickeables */
.btn-corporate:hover,
.btn:hover,
button:hover,
.corporate-nav a:hover {
    transform: translateY(-2px) scale(1.02) !important;
}

.btn-corporate:active,
.btn:active,
button:active,
.corporate-nav a:active {
    transform: translateY(0) scale(0.98) !important;
}