/* ─────────────────────────────────────────────────────────────
   CAMPOGRAMAS BD - MODAL FIXED (VIEWPORT ABSOLUTE CENTERING)
   ────────────────────────────────────────────────────────────── */

/* Forzar que el backdrop ocupe el 100% real del navegador, ignorando el layout */
/* Solo cuando el modal est abierto (clase .show que Dash/Bootstrap aaden) */
div[id="cbd-modal-ver-imagen"].modal.show {
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
    padding: 0 !important;
    display: flex !important; /* Usamos flex para centrado */
    align-items: center;
    justify-content: center;
    z-index: 5000 !important;
}

/* CENTRADO ABSOLUTO DEL VISOR RESPECTO AL MONITOR */
.cbd-modal-premium-floating {
    position: fixed !important;
    left: 50% !important; /* Centro horizontal del viewport */
    top: 50% !important;  /* Centro vertical del viewport */
    transform: translate(-50%, -50%) !important; /* Ajuste preciso al centro */
    
    width: fit-content !important; /* Se ajusta a la imagen */
    max-width: 95vw !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 5001 !important;
}

.cbd-modal-premium-floating .modal-content {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 40px 150px rgba(0, 0, 0, 0.5) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px);
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* Fondo del modal (backdrop) translúcido y suave que cubre todo */
/* Solo aplicamos este z-index altsimo y blur si el modal de campograma est presente */
/* Nota: Usamos una condicin de z-index que no rompa el stack de Bootstrap por defecto (1050) */
.modal-backdrop.show {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    opacity: 0.7 !important;
    backdrop-filter: blur(5px);
    background-color: #0f172a !important;
    z-index: 1040 !important; /* Valor estndar de Bootstrap para que no tape los modales normales (1050) */
}

/* Y para el modal de campograma que necesita estar por encima de todo */
div[id="cbd-modal-ver-imagen"].modal.show ~ .modal-backdrop.show {
    z-index: 4999 !important;
}

/* BOTÓN CERRAR (X) - ESTILO PREMIUM MÁLAGA CF */
/* BOTÓN CERRAR (X) - ALINEACIÓN VERTICAL PURA */
.cbd-modal-header-fullscreen .btn-close {
    position: absolute !important;
    right: 12px !important; /* Un poco más hacia el borde para mayor limpieza */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    
    /* Estética Premium Mini */
    background: transparent !important;
    border: 1px solid rgba(201, 162, 39, 0.35) !important;
    border-radius: 5px !important;
    width: 20px !important; /* Bajamos a 20px para que sea aún más refinado */
    height: 20px !important;
    padding: 0 !important;
    opacity: 0.7 !important;
    
    /* Icono */
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    box-shadow: none !important;
}

.cbd-modal-header-fullscreen .btn-close::before {
    content: "✕" !important;
    font-size: 10px !important;
    color: #C9A227 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.cbd-modal-header-fullscreen .btn-close:hover {
    background: rgba(0, 24, 64, 0.8) !important;
    border-color: #C9A227 !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.cbd-modal-premium-floating .modal-body {
    padding: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

/* Evitar conflictos con el display flex nativo de Bootstrap */
.cbd-modal-premium-floating.modal-dialog {
    flex: 0 0 auto !important;
}

/* Filtros compactos del modal de seleccion de jugadores */
.cbd-visor-ventana { width:100vw!important; max-width:none!important; height:100vh!important; height:100dvh!important; margin:0!important; }
.cbd-visor-ventana .modal-content { height:100%!important; border:0!important; border-radius:0!important; background:#fff!important; }
.cbd-visor-ventana .modal-body { display:flex; flex:1 1 auto; min-height:0!important; max-height:none!important; padding:0!important; overflow:hidden!important; border-radius:0!important; }
.cbd-visor-ventana #cbd-modal-imagen-body { width:100%; height:100%; min-height:0; background:#fff!important; }
.cbd-visor-ventana #cbd-imagen-zoom { width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
.cbd-visor-ventana .modal-header { position:relative; flex-shrink:0; }
#cbd-pantalla-real { display:none; }
/* El visor auxiliar nunca debe asomar durante la salida de fullscreen. */
html.cbd-pantalla-real-en-uso #cbd-modal-ver-imagen,
html.cbd-pantalla-real-en-uso .cbd-visor-backdrop { visibility:hidden!important; transition:none!important; }
#cbd-pantalla-real.activa, #cbd-pantalla-real:fullscreen { visibility:visible!important; display:flex; position:fixed; inset:0; width:100%; height:100%; align-items:center; justify-content:center; background:#080B10; z-index:11000; }
/* Solo la espera es blanca; la presentación del campograma cargado no cambia. */
#cbd-pantalla-real:has(#cbd-pantalla-real-espera:not([hidden])) { background:#fff; }
#cbd-pantalla-real-imagen { width:100%; height:100%; object-fit:contain; }
#cbd-pantalla-real-imagen[hidden], #cbd-pantalla-real-espera[hidden] { display:none!important; }
#cbd-pantalla-real-espera { position:absolute; text-align:center; z-index:2; }
#cbd-pantalla-real-espera .malaga-spinner { width:28px; height:28px; margin:0 auto 10px; }
#cbd-pantalla-real-espera .spinner-ring { width:28px; height:28px; border-width:2px; }
#cbd-pantalla-real-espera .spinner-logo { width:18px; height:18px; animation:none; }
#cbd-pantalla-real-espera .loading-text { color:#004080; font-size:.75rem; }
#cbd-pantalla-real-espera.error .malaga-spinner { display:none; }
#cbd-pantalla-real-cerrar { position:absolute; z-index:4; right:16px; top:16px; width:32px; height:32px; border:1px solid #FFFFFF66; border-radius:6px; background:#001840BB; color:white; font:inherit; cursor:pointer; opacity:.65; }
#cbd-pantalla-real-cerrar:hover, #cbd-pantalla-real-cerrar:focus-visible { opacity:1; outline:2px solid #C9A227; }

.picker-filter-control .Select-control {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid #B9C4D2 !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

.picker-filter-control .Select-control:hover {
    border-color: #8DA9CA !important;
    box-shadow: none !important;
}

.picker-filter-control.is-focused .Select-control {
    border-color: #C79B00 !important;
    outline: 2px solid #C79B00;
    outline-offset: 2px;
    box-shadow: none !important;
}

.picker-filter-control .Select-placeholder,
.picker-filter-control .Select-value-label {
    line-height: 30px !important;
    font-size: 10px !important;
    color: #6B7280 !important;
}

.picker-filter-control .Select-input {
    height: 30px !important;
}

.picker-filter-control .Select-arrow-zone {
    padding-top: 1px !important;
}

.picker-filter-control .Select-menu-outer {
    border: 1px solid #B9C4D2 !important;
    border-radius: 0 0 8px 8px !important;
    font-size: 10px !important;
}

.picker-reset-filters-btn {
    transition: all 0.18s ease !important;
}

.picker-reset-filters-btn:hover {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    border-color: #DC2626 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22) !important;
    transform: translateY(-1px);
}

.picker-reset-filters-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.18) !important;
}