/* -------------------------------------------------------------------
 * ESTILOS GENERALES Y TEMA DEEP DARK / VIBRANT PINK
 * ------------------------------------------------------------------- */

:root {
    /* Colores base para Dark Mode */
    --alfa-fondo-principal: #1A202C; /* Gris Oscuro Profundo (Deep Dark) */
    --alfa-fondo-secundario: #2D3748; /* Gris Oscuro Ligeramente más Claro para Boxes/Cards */
    
    /* Colores de Acento */
    --color-dark-bg: #0000000a;
--color-lighter-dark: #2c2c2c;
    
    /* Colores de Texto */
    --alfa-texto-principal: #FFFFFF; /* Blanco */
    --alfa-texto-secundario: #E2E8F0; /* Gris muy claro */
    --alfa-texto-desactivado: #A0AEC0; /* Gris medio para elementos desactivados */
}

body {
    color: white !important;
    font-family: 'Montserrat', sans-serif;
}

.content-wrapper, .main-footer{
    margin:0px !important;
}

input[type="file"] {
    display: none;
}
.logo{
    background: black !important;
}

.subir{
    background: transparent;
    color: #FF69B4;
    cursor: pointer;
    border: 3px solid hotpink;
    border-radius: 4px;
    text-align: center;
    font-size: 19px;
    width: 33%;
}

.subir:hover {
    background-color: #FF69B4;
    color: black;
    text-shadow: 0px 0px 3px hotpink;
    box-shadow: 0px 0px 5px hotpink;
    transition: background-color 0.3s ease;
    border: 2px solid black;
}

.login-box-body, .register-box-body {
    background: #0a0a0a !important;
    color: white;
    padding: 20px;
}

/* -------------------------------------------------------------------
 * ESTRUCTURA ADMINLTE OVERRIDES
 * ------------------------------------------------------------------- */

.content-wrapper,
.right-side {
    background-color: #000 !important;
}

.box, .panel-body {
    background: none !important; 
    border: none !important;
    color: var(--alfa-texto-principal) !important;
}

.box-header {
    border-bottom-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--alfa-texto-principal) !important;
}

.box-title {
    color: var(--alfa-texto-principal) !important;
}

.main-footer {
    background-color: #000 !important;
color: var(--alfa-texto-secundario) !important;
border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
padding: 15px;
font-size: 13px;
}

.main-footer a {
    color: var(--alfa-acento-secundario) !important;
}
.wrapper{
    background-color: #000 !important;
}

/* -------------------------------------------------------------------
 * BARRA LATERAL (SIDEBAR)
 * ------------------------------------------------------------------- */

.main-sidebar,
.left-side {
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
background: linear-gradient(3deg, #ffffff24, #0009) !important;
backdrop-filter: blur(6px);
}

.sidebar-menu > li > a {
    color: var(--alfa-texto-secundario) !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li:hover > a {
    color: var(--alfa-texto-principal) !important;
    background: rgba(255, 105, 180, 0.1) !important; 
    border-left-color: var(--alfa-acento-principal) !important; 
}

/* -------------------------------------------------------------------
 * TABLAS (DATA TABLES)
 * ------------------------------------------------------------------- */

.table {
    color: var(--alfa-texto-principal) !important;
    border: 1px solid rgba(255, 105, 180, 0.1);
    background-color: var(--alfa-fondo-secundario);
    width:100% !important;
}

.table > thead > tr > th,
.table > thead > tr > td {
    background-color: white !important;
    color: #121212 !important;
    border-color: #121212 !important;
    font-size:12px;
}

input,
select,
textarea {
    background-color: #121212 !important;
    color: var(--alfa-texto-secundario) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 4px;
    box-shadow: 0px 0px 1px black;
}

.table > tbody > tr {
    background-color: #000000 !important;
    transition: background-color 0.3s ease;
}

.table > tbody > tr:hover {
    background-color: #4A5568 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #000000 !important;
}

.table > tbody > tr > td {
 border:none !important;
}

.dataTables_wrapper,
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
    color: var(--alfa-texto-secundario) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--alfa-texto-desactivado) !important;
    background: none !important;
    border: 1px solid transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--alfa-fondo-principal) !important;
    border: 1px solid rgba(255, 105, 180, 0.3) !important;
    color: var(--alfa-texto-secundario) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--alfa-acento-principal) !important;
    color: #121212 !important;
    border: 1px solid var(--alfa-acento-principal) !important;
}

.btn-primary {
    background-color: #FFF;
    border-color: #323232;
}

.btn.btn-flat {
    border-radius: 4px;
    box-shadow: none;
    border-width: 1px;
    color:black;
}

.btn-primary:hover, .btn-primary:active {
    background-color: #121212;
    color:#FF69B4;
}

.col-xs-4{
    float:none !important;   
    width:100% !important;
}
.btn.btn-pink-alfa{
    background: green;
}

/* -------------------------------------------------------------------
 * FORMULARIOS
 * ------------------------------------------------------------------- */

.form-control {
    background-color: #121212 !important;
    border: rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.25) !important;
    border-radius: 4px;
}

.form-control:focus {
    border-color: white !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 105, 180, 0.25) !important;
}

.bootstrap-select .dropdown-toggle {
    background-color: #1A202C !important;
    border: 1px solid rgba(255, 105, 180, 0.3) !important;
    color: var(--alfa-texto-principal) !important;
}

.bootstrap-select .dropdown-menu {
    background-color: var(--alfa-fondo-secundario) !important;
}

.bootstrap-select .dropdown-menu li a {
    color: var(--alfa-texto-secundario) !important;
}

/* -------------------------------------------------------------------
 * MODALES Y PRELOADER
 * ------------------------------------------------------------------- */

.modal-body {
    color: black !important;
}

#preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #ffffff;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s, visibility 0.5s;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader-spinner {
    position: relative;
    width: 150px; height: 150px;
}

.preloader-spinner img {
    width: 100%; height: 100%;
    object-fit: contain;
    animation: pulse 1.5s infinite ease-in-out; 
}

@keyframes pulse {
    0%, 100% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.0); opacity: 1; }
}

.preloader-spinner::before {
    content: '';
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    border: 3px solid transparent;
    border-top-color: #FF69B4; 
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.salirr {
    transition: transform 0.4s ease-in-out; 
}

/* -------------------------------------------------------------------
 * FIX MOBILE CLICKS & SELECTION (CORRECCIÓN SOLICITADA)
 * ------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* Aseguramos que el sidebar esté por encima de la capa transparente de AdminLTE */
    .main-sidebar {
        z-index: 850 !important;
        position: absolute;
    }

    /* Expandimos el área de click de los elementos del menú */
    .sidebar-menu li a {
        padding: 12px 15px !important;
        display: block !important;
    }

    /* Cuando el menú está abierto, evitamos que el overlay bloquee clics internos */
    .sidebar-open .main-sidebar {
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    }

    /* Forzamos que los submenús (treeview) también sean accesibles */
    .sidebar-menu .treeview-menu {
        z-index: 851 !important;
    }
}