/* --- HOJA DE ANOTACIÓN PROFESIONAL OPTIMIZADA --- */
.wpsbs-scorecard-container {
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    color: #334155;
    max-width: 1100px;
    margin: 0 auto;
}

/* BOXSCORE UNIFICADO */
.wpsbs-unified-boxscore {
    margin-bottom: 25px;
    border: 1px solid #1a2a3a;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.wpsbs-box-table { width: 100%; border-collapse: collapse; }
.wpsbs-box-table th { 
    background: #DB0304; 
    color: #fff; 
    padding: 12px 8px; 
    font-size: 12px; 
    font-weight: 500; 
    text-transform: uppercase;
}
.wpsbs-box-table td { 
    border: 1px solid #f1f5f9; 
    padding: 10px 5px; 
    text-align: center; 
    font-size: 14px;
}
.wpsbs-box-table .txt-left { text-align: left; padding-left: 20px; width: 250px; color: #1e293b; }
.wpsbs-box-table .highlight { 
    background: #f8fafc; 
    color: #ef4444; 
    font-weight: 600; 
    border-left: 1px solid #e2e8f0; 
}

/* CELDAS Y DIAMANTE */
.wpsbs-score-cell {
    width: 52px; height: 52px; /* Tamaño optimizado para evitar gigantismo */
    position: relative;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: all 0.2s;
}
.wpsbs-score-cell:hover { background: #f8fafc; border-color: #cbd5e1; }

.wpsbs-diamond-bg {
    position: absolute; top: 50%; left: 50%; width: 28px; height: 28px;
    border: 1px solid #f1f5f9;
    transform: translate(-50%, -50%) rotate(45deg);
    z-index: 1;
}

/* Lógica de Líneas (Score Vzla) - Colores más definidos */
.has-hit-1b .wpsbs-diamond-bg { border-right: 2.5px solid #1a2a3a; }
.has-hit-2b .wpsbs-diamond-bg { border-right: 2.5px solid #1a2a3a; border-top: 2.5px solid #1a2a3a; }
.has-hit-3b .wpsbs-diamond-bg { border-right: 2.5px solid #1a2a3a; border-top: 2.5px solid #1a2a3a; border-left: 2.5px solid #1a2a3a; }
.has-run .wpsbs-diamond-bg { border: 2.5px solid #1a2a3a; background: rgba(26, 42, 58, 0.15); }

/* Texto en Zonas */
.wpsbs-play-text { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; pointer-events: none; }
.z-center { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; color: #1a2a3a; font-weight: 500; }
.z-lf, .z-cf, .z-rf { font-size: 9px; color: #ef4444; font-weight: 500; }

/* --- MODAL DE ANOTACIÓN OPTIMIZADO --- */
.wpsbs-modal {
    display: none;
    position: fixed;
    z-index: 999999 !important;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(15, 23, 42, 0.7); /* Fondo más profundo */
    backdrop-filter: blur(4px);
}

.wpsbs-modal-content {
    background-color: #ffffff;
    margin: 2% auto;
    padding: 20px;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    position: relative;
    border: none; /* Eliminamos el borde tosco */
}

.wpsbs-close-btn {
    position: absolute; 
    right: 20px; 
    top: 15px;
    font-size: 26px; 
    cursor: pointer; 
    color: #94a3b8;
    transition: color 0.2s;
}
.wpsbs-close-btn:hover { color: #ef4444; }

/* Contenedor de Categorías */
#wpsbs-modal-grid { 
    display: flex;
    flex-direction: column;
    gap: 15px; 
    margin-top: 10px;
}

/* Títulos de categorías más elegantes */
.cat-title { 
    display: block;
    width: 100%;
    background: #f8fafc; 
    padding: 6px 12px; 
    font-size: 11px; 
    font-weight: 600; 
    color: #64748b; 
    border-radius: 6px; 
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-left: 3px solid #1a2a3a;
}

/* Grupo de botones por categoría */
.cat-group {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 4 botones por fila */
    gap: 8px;
}

/* Botones de Jugada (Nomenclatura) */
.nomen-btn { 
    padding: 5px 5px; 
    font-size: 12px; 
    border: 1px solid #e2e8f0; 
    background: #ffffff; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: 500; /* Regular, no bold */
    color: #334155;
    transition: all 0.2s ease;
}

.nomen-btn:hover { 
    background: #1a2a3a; 
    color: #ffffff; 
    border-color: #1a2a3a; 
    transform: translateY(-1px);
}

/* --- BOTÓN LIMPIAR (Debajo de todo) --- */
.wpsbs-btn-clear {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    background: #fff1f2; /* Fondo rojizo suave */
    color: #e11d48; /* Texto rojo */
    border: 1px solid #fecdd3;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.wpsbs-btn-clear:hover {
    background: #e11d48;
    color: #ffffff;
    border-color: #e11d48;
    box-shadow: 0 4px 6px -1px rgba(225, 29, 72, 0.2);
}

/* SELECTS E INPUTS */
.wpsbs-player-select-dynamic, .wpsbs-pos-input {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 5px;
    font-size: 12px;
    color: #334155;
    transition: border-color 0.2s;
}
.wpsbs-player-select-dynamic:focus, .wpsbs-pos-input:focus {
    outline: none;
    border-color: #1a2a3a;
}

/* CALENDARIO */
/* --- CONFIGURACIÓN GENERAL --- */
.wpsbs-calendar-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px; /* Reducido para móvil */
    box-shadow: none;
}

.wpsbs-leaders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px; /* Tipografía más pequeña para ahorrar espacio */
}

/* --- OPTIMIZACIÓN MÓVIL (Pantallas < 600px) --- */
@media (max-width: 600px) {
    .wpsbs-leaders-table thead {
        display: none; /* Ocultamos los encabezados en móvil para ganar espacio */
    }
    
    .wpsbs-leaders-table, .wpsbs-leaders-table tbody, .wpsbs-leaders-table tr, .wpsbs-leaders-table td {
        display: block; /* Convertimos celdas en bloques */
        width: 100%;
    }

    .wpsbs-leaders-table tr {
        border-bottom: 1px solid #f1f5f9;
        padding: 10px 0;
    }

    /* Alinear equipos en una sola línea */
    .flex-cell {
        display: inline-flex;
        align-items: center;
        width: 45%; /* Cada equipo ocupa la mitad */
    }

    .txt-center {
        display: inline-block;
        width: 10%;
        text-align: center;
    }
}

/* --- ESTILOS COMPACTOS COMUNES --- */
.wpsbs-logo-table {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px;
    margin-right: 6px;
}

.wpsbs-leaders-table tbody td {
    padding: 6px 4px;
}

/* FUERZA PARA IMÁGENES CIRCULARES DE 65PX */
table.wpsbs-leaders-table img.wpsbs-img-table, 
.wpsbs-scorecard-container img.wpsbs-img-table {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    border-radius: 50% !important; /* Esto hace el círculo */
    object-fit: cover !important;  /* Evita que se estire la cara */
    aspect-ratio: 1 / 1 !important;
    border: 1px solid #1a2a3a !important; /* Usando tu color oscuro de marca */
    display: inline-block !important;
    padding: 0 !important;
}
/* APLICAR ESTILO CIRCULAR DE 65PX TAMBIÉN A LOS LOGOS */
table.wpsbs-leaders-table img.wpsbs-logo-table,
.wpsbs-scorecard-container img.wpsbs-logo-table,
.wpsbs-calendar-container img.wpsbs-logo-table {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    border-radius: 50% !important;
    object-fit: contain !important; /* 'contain' para que el logo no se corte si no es cuadrado */
    aspect-ratio: 1 / 1 !important;
    border: 1px solid #1a2a3a !important; 
    display: inline-block !important;
    background: #fff !important;
    padding: 4px !important; /* Un pequeño respiro interno para que el logo no toque el borde */
}

/* Ajuste para que el texto al lado de la imagen esté centrado */
.flex-cell {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.wpsbs-back-navigation button:hover {
    background: #cbd5e1;
    color: #1e293b;
    transition: all 0.3s ease;
}