/* =========================================
   RESERVAS BINGO WIN - REPLICA ANDROID 3D
   ========================================= */

/* AJUSTE RESPONSIVE DE LA CARTA */
.card-3d {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;          /* Curva un poco más suave en móvil */
    padding: 6px;                 /* Menos relleno para que no se infle en móvil */
    min-height: 55px;             /* Altura más compacta para celular */
    cursor: pointer;
    
    transform: rotate(0deg) !important;
    font-style: normal !important;
    
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.5s ease;
    
    color: white;
    font-size: 1rem;              /* Texto un poco más pequeño en móvil */
    
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.card-3d:active {
    transform: translateY(4px) scale(0.96) !important;
}

/* =========================================
   GRILLA MÁGICA AUTOMÁTICA (Escalado Perfecto)
   ========================================= */
.bingo-grid {
    display: grid;
    /* En CELULARES: el mínimo es 42px, permitiendo que quepan 7 u 8 columnas fácilmente */
    grid-template-columns: repeat(auto-fill, minmax(60px, 0.8fr));
}

/* =========================================
   MEDIA QUERIES PARA TABLETS Y PC
   ========================================= */
@media (min-width: 300px) {
    .bingo-grid {
        /* En TABLETS: Aumentamos el tamaño mínimo de la carta */
        grid-template-columns: repeat(auto-fill, minmax(60px, 0.8fr));
    }
    
    .card-3d {
        /* Restauramos el tamaño grande para pantallas más amplias */
        padding: 12px;
        min-height: 50px;
        border-radius: 16px;
        font-size: 1.25rem;
    }
}

@media (min-width: 900px) {
    .bingo-grid {
        /* En PC: Cartas aún más amplias para aprovechar el monitor */
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
}

/* =========================================
   BOTONES POR COLORES
   ========================================= */

/* ESTADO: ROJO NORMAL */
.bw-card-red {
    background-color: #C54540 !important;
    border: 4px solid #B42E1E !important;
    box-shadow: 0 8px 0 #7E0F00 !important;
}
.bw-card-red:active {
    box-shadow: 0 4px 0 #7E0F00 !important;
}

/* ESTADO: AZUL NORMAL */
.bw-card-blue {
    background-color: #0891b2 !important;
    border: 4px solid #02647C !important;
    box-shadow: 0 8px 0 #014150 !important;
}
.bw-card-blue:active {
    box-shadow: 0 4px 0 #014150 !important;
}

/* ESTADO: DORADO SELECCIONADO */
.bw-card-selected {
    background-color: #EFBC44 !important;
    border: 4px solid #DC9C26 !important;
    box-shadow: 0 8px 0 #B97D1C !important;
    color: white !important;
}
.bw-card-selected:active {
    box-shadow: 0 4px 0 #B97D1C !important;
}

/* ESTADO: GRIS DESHABILITADO / RESERVADA */
.bw-card-disabled {
    background-color: #BDBDBD !important;
    border: 4px solid #C8C8C8 !important;
    box-shadow: 0 8px 0 #808080 !important;
    color: white !important;
    opacity: 0.3 !important;
}
.bw-card-disabled:active {
    transform: rotate(0deg) !important;
    box-shadow: 0 8px 0 #808080 !important;
}

/* =========================================
   ANIMACIONES DE APARICIÓN (POP IN / OUT)
   ========================================= */
@keyframes popIn {
    0% { opacity: 0; transform: scale(0.4); }
    70% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes popOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.4); }
}

.card-animate-in {
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.card-animate-out {
    animation: popOut 0.2s ease-in forwards;
    pointer-events: none; /* Evita clics fantasmas mientras desaparece */
}

/* =========================================
   BLOQUEAR ANIMACIÓN DE PRESIÓN EN HEADER
   ========================================= */
#header_container:active {
    transform: none !important;
    box-shadow: 0 4px 0 #7E0F00 !important; /* Mantiene sombra roja por defecto */
}
.mode-tarde #header_container:active {
    box-shadow: 0 4px 0 #014150 !important; /* Mantiene sombra azul en la tarde */
}