/* En PC (pantallas mayores a 768px), cada lado mide el 100% del alto */
@media (min-width: 768px) {
    .h-md-100 {
        height: 100vh !important;
    }
}

/* En móvil (pantallas menores a 767px), cada lado mide el 50% del alto */
@media (max-width: 767px) {
    .h-md-100 {
        height: 50vh !important;
    }
}

.admin-split-wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
    background-color: #fff; /* Fondo blanco de apoyo */
    overflow: hidden;
}

.admin-v-panel {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 60px 40px;
    overflow: hidden;
    border-right: 1px solid rgba(0,0,0,0.05);
    transition: flex 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-v-panel:hover { flex: 2; }

/* --- MANEJO DE IMÁGENES Y VELO --- */
.panel-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: brightness(1.2) grayscale(20%); /* Efecto claro inicial */
    transition: all 0.8s ease;
}

.panel-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.6); /* EL VELO BLANCO */
    z-index: 1;
    transition: all 0.5s ease;
}

.admin-v-panel:hover .panel-bg { filter: brightness(1) grayscale(0%); transform: scale(1.05); }
.admin-v-panel:hover .panel-overlay { background-color: rgba(255, 255, 255, 0.1); }

/* --- TEXTOS --- */
.panel-content { position: relative; z-index: 2; }
.panel-number { color: #ffffff; font-weight: 900; letter-spacing: 5px; margin-bottom: 10px; }
.panel-title { color: #ffffff !important; font-size: 1.6rem; font-weight: 700; letter-spacing: 10px; text-transform: uppercase; }
.panel-description { color: #ffffff !important; font-size: 0.7rem; margin-top: 15px; opacity: 0; transition: 0.5s; }
.admin-v-panel:hover .panel-description { opacity: 1; }

/* Estilo para que el fondo del loading sea borroso y transparente */
._dash-loading-callback {
    background-color: rgba(255, 255, 255, 0.4) !important; /* Blanco muy transparente */
    backdrop-filter: blur(8px) !important; /* El efecto borroso */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}