/* ==================================================
   ESTILO GLOBAL - MIDNIGHT GLASS TURQUOISE (UNIFICADO)
   UBICACIÓN: assets/css/main.css
   ================================================== */

:root {
    /* Colores Corporativos Oscuros */
    --brand-dark: #0f172a;
    /* Azul noche profundo */
    --brand-teal: #403060;
    /* Morado oscuro atenuado */
    --brand-teal-light: #6b5c92;
    /* Morado claro atenuado */
    --bg-body: #020617;
    /* Fondo casi negro para contraste */

    /* Variables de Vidrio (Glassmorphism) */
    --glass-bg: rgba(15, 23, 42, 0.7);
    /* Azul pizarra traslúcido */
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Tipografía (Forzada a Blanco/Gris claro para legibilidad) */
    --font-main: 'Liberation Mono', 'Courier New', Courier, monospace;
    --text-main: #ffffff;
    /* Blanco puro para datos */
    --text-muted: #cbd5e1;
    /* Gris plata para secundarios */
    --radius: 20px;
}

html {
    font-size: 14px; /* Base reducida sutilmente: escala todos los rem sin comprimir demasiado */
}

* {
    font-family: var(--font-main) !important;
}

body {
    background-color: var(--bg-body);
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--text-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ==================================================
   1. ESTRUCTURA FIJA Y CORRECCIÓN DE CLICKS
   ================================================== */

.sidebar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    background: linear-gradient(180deg, #020617 0%, #1f1a30 100%);
    border-right: 1px solid var(--glass-border);
    z-index: 1050;
    overflow-y: auto;
    padding: 2rem 1rem;
    transition: all 0.3s ease;
}

.main-content-wrapper {
    margin-left: 260px;
    width: calc(100% - 260px);
    min-height: 100vh;
    padding: 3rem;
    background: linear-gradient(135deg, #0f172a 0%, #2d2040 100%);
    box-sizing: border-box;
    /* NOTA: Sin z-index ni position para no crear stacking context y permitir que
       el backdrop y el modal de Bootstrap funcionen correctamente */
}

/* SOLUCIÓN DE CLICKS: Asegura que nada bloquee el puntero */
.glass-card,
.panel-card {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    /* Permite interacción */
}

/* Prioridad máxima a botones y enlaces para que siempre reciban el click */
a,
button,
.nav-link,
.btn,
.btn-view-modal,
.dropdown-item {
    position: relative;
    z-index: 10 !important;
    cursor: pointer !important;
    pointer-events: all !important;
}

/* ==================================================
   2. REGLAS DE LEGIBILIDAD (TEXTO CLARO)
   ================================================== */

.page-title,
.hero-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff !important;
}

.table-glass td {
    color: #ffffff !important;
}

.text-muted,
.small,
.card-label,
.text-white-50 {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

.table-glass thead th {
    color: #94a3b8 !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
}

::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ==================================================
   3. NAVEGACIÓN (SIDEBAR)
   ================================================== */

.nav-link {
    display: flex;
    align-items: center;
    color: var(--text-muted) !important;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 4px;
    transition: all 0.3s ease;
}

.nav-link i {
    font-size: 1.2rem;
    margin-right: 12px;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.3);
    /* Brillo en iconos */
}

.nav-link:hover {
    color: #38bdf8 !important;
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.nav-link.active {
    background-color: var(--brand-teal-light) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(107, 92, 146, 0.3);
}

.nav-link.active i {
    color: #ffffff !important;
}

/* ==================================================
   4. TABLAS Y TARJETAS ESTILO GLASS
   ================================================== */

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
    padding: 1.5rem;
}

.table-glass {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.table-glass tbody tr {
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}

.table-glass tbody tr:hover {
    background: rgba(255, 255, 255, 0.07);
    /* SIN transform: evita crear stacking context que rompe z-index de dropdowns */
}

.table-glass td {
    padding: 1.25rem 1.5rem;
    border: none;
}

.table-glass tbody tr td:first-child {
    border-radius: 12px 0 0 12px;
}

.table-glass tbody tr td:last-child {
    border-radius: 0 12px 12px 0;
}

/* SCROLL PARA TABLAS CON ENCABEZADO FIJO */
.table-responsive {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
}

.table-glass thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* SCROLLBAR ELEGANTE */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* Fix dropdown dentro de overflow containers */
.dropdown-menu {
    z-index: 1056 !important;
}

.glass-card.overflow-hidden {
    overflow: visible !important;
    /* Allow dropdowns to escape the container */
}

/* ==================================================
   5. RESPONSIVE
   ================================================== */

@media (max-width: 992px) {
    .sidebar-fixed {
        transform: translateX(-100%);
    }

    .sidebar-fixed.show {
        transform: translateX(0);
    }

    .main-content-wrapper {
        margin-left: 0;
        width: 100%;
        padding: 1.5rem;
    }
}

/* ==================================================
   6. PREMIUM DARK THEME GLOBAL STYLING OVERRIDES
   ================================================== */

/* Forzar que las etiquetas de formulario sean de un gris claro/blanco elegante */
.form-label,
label {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: 0.5px !important;
}

/* Campos de texto, áreas de texto y selectores estilo Midnight Glassmorphism */
.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="file"],
input[type="search"],
.search-bar {
    background-color: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Barra de Búsqueda específica */
.search-bar {
    padding-left: 2.5rem !important;
    /* Da espacio a la lupa */
    min-width: 280px;
}

/* Evitar que Google Chrome pinte de blanco/amarillo los inputs por el "autofill" */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
    /* Fondo azul noche forzado */
    -webkit-text-fill-color: white !important;
    /* Letra forzada a blanco */
    transition: background-color 5000s ease-in-out 0s;
}

/* Evitar bordes blancos o colores raros en placeholders */
.form-control::placeholder,
textarea::placeholder,
input::placeholder,
.search-bar::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Estados de Focus e Interacción */
.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus,
.search-bar:focus {
    background-color: #0f172a !important;
    border-color: var(--brand-teal-light, #6b5c92) !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(107, 92, 146, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Opciones de selección para comboboxes y Dropdowns */
.form-select option,
select option {
    background-color: #0f172a !important;
    /* Azul pizarra oscuro */
    color: #ffffff !important;
    padding: 10px !important;
}

.dropdown-menu {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    padding: 8px !important;
}

.dropdown-item {
    color: var(--text-muted) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    padding: 8px 16px !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(107, 92, 146, 0.2) !important;
    color: #ffffff !important;
}

.dropdown-item i {
    color: var(--brand-teal-light) !important;
}

/* Personalizar flecha de selección de Bootstrap para que sea blanca */
.form-select,
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-position: right 1rem center !important;
    background-size: 16px 12px !important;
    background-repeat: no-repeat !important;
    padding-right: 2.5rem !important;
}

/* Estilos Premium para Contenedores Especiales en Formularios */
.col-12 div[style*="background: rgba(139, 92, 246, 0.05)"] {
    background: rgba(107, 92, 146, 0.08) !important;
    border: 1px dashed rgba(107, 92, 146, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 16px !important;
}

.col-12 div[style*="background: rgba(139, 92, 246, 0.05)"] label {
    color: #ffffff !important;
}

/* Estilos de Botones Premium con Degradados y Micro-Animaciones */
.btn,
.btn-glass-primary,
.btn-glass-secondary,
.btn-primary,
.btn-primary-app,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info,
.btn-dark-apple,
.btn-light-apple {
    border-radius: 12px !important;
    padding: 0.7rem 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Botón Primario Turquesa Neón -> Morado Brillante */
.btn-primary,
.btn-glass-primary,
.btn-primary-app,
.btn-light-apple {
    background: linear-gradient(135deg, #6b5c92 0%, #5a4b81 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(107, 92, 146, 0.3) !important;
}

.btn-primary:hover,
.btn-glass-primary:hover,
.btn-primary-app:hover,
.btn-light-apple:hover {
    background: linear-gradient(135deg, #7d6ea3 0%, #6b5c92 100%) !important;
    box-shadow: 0 6px 20px rgba(107, 92, 146, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Botón Secundario Transparente / Slate */
.btn-secondary,
.btn-glass-secondary,
.btn-dark-apple,
.btn-light {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.btn-secondary:hover,
.btn-glass-secondary:hover,
.btn-dark-apple:hover,
.btn-light:hover {
    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* Botones de Alertas / Estados */
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #34d399 0%, #065f46 100%) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
    transform: translateY(-2px) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #f87171 0%, #991b1b 100%) !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5) !important;
    transform: translateY(-2px) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%) !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5) !important;
    transform: translateY(-2px) !important;
}

.btn-info {
    background: linear-gradient(135deg, #6b5c92 0%, #7d6ea3 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(107, 92, 146, 0.3) !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, #7d6ea3 0%, #8e7eb5 100%) !important;
    box-shadow: 0 6px 20px rgba(107, 92, 146, 0.5) !important;
    transform: translateY(-2px) !important;
}

/* Nav Pills */
.nav-pills-app {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.4);
    padding: 6px;
    border-radius: 16px;
}

.nav-pills-app .nav-link {
    background: transparent;
    color: var(--text-muted);
    border-radius: 10px;
    padding: 8px 16px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.nav-pills-app .nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.nav-pills-app .nav-link.active {
    background: var(--brand-teal-light) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(107, 92, 146, 0.25);
}

/* Efecto Click Presionado en Todos los Botones */
.btn:active,
.btn-glass-primary:active,
.btn-glass-secondary:active {
    transform: translateY(0px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* ==================================================
   7. RESPONSIVIDAD AVANZADA Y COMPLETA PARA MÓVILES
   ================================================== */

@media (max-width: 768px) {

    /* Ajustes generales de espaciado y márgenes */
    .main-content-wrapper {
        padding: 1.5rem 1rem !important;
    }

    /* Forzar que las tarjetas de vidrio tengan scroll horizontal si sus tablas se desbordan */
    .glass-card {
        padding: 1.25rem !important;
        border-radius: 16px !important;
        overflow-x: auto !important;
    }

    /* Encabezados y barras de herramientas Flex se apilan verticalmente */
    .d-flex.justify-content-between:not(.no-stack),
    .d-flex.gap-3:not(.no-stack),
    .d-flex.gap-2:not(.no-stack),
    .d-flex.align-items-center:not(.no-stack) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    /* Grupos de botones en pie de formularios se expanden verticalmente al 100% */
    .d-flex.justify-content-end,
    .mt-5.border-top.pt-4.d-flex {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .d-flex.justify-content-end .btn,
    .d-flex.justify-content-end a,
    .mt-5.border-top.pt-4.d-flex button,
    .mt-5.border-top.pt-4.d-flex a {
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* Mantener alineación horizontal para pequeños badges, botones pequeños e iconos de navegación */
    .nav-link.d-flex,
    .badge.d-flex,
    .btn.d-flex,
    .no-stack,
    .navbar-brand,
    .card-icon {
        flex-direction: row !important;
        align-items: center !important;
    }

    /* Grillas de columnas se apilan más rápido */
    .col-md-6,
    .col-sm-6 {
        width: 100% !important;
    }

    /* Tablas responsivas táctiles sin romper bordes o diseños */
    .table-glass {
        min-width: 600px !important;
        /* Permite scroll natural táctil en móviles */
    }

    /* Título de páginas responsivo */
    h1,
    .page-title {
        font-size: 1.75rem !important;
    }

}

/* Animación Corazón Latiendo */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1);
    }
}

.beating-heart {
    display: inline-block;
    color: #a855f7;
    /* Morado claro para resaltar */
    animation: heartbeat 1.5s infinite;
}