/* ===== Base Styles ===== */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fa;
            min-height: 100vh;
            padding: 20px;
            padding-top: calc(20px + env(safe-area-inset-top));
            padding-right: calc(20px + env(safe-area-inset-right));
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
            padding-left: calc(20px + env(safe-area-inset-left));
            color: #2c3e50;
        }
        
        .container {
            max-width: 1100px;
            margin: 0 auto;
        }

        /* Public (espectador): queremos ocupar TODO el ancho disponible */
        body.is-public .container{
            width: 100%;
            max-width: 100%;
            margin: 0;
        }
        
        header {
            background: white;
            padding: 25px 30px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        /* ===== Header (modo espectador) ===== */
        .app-header {
            overflow: hidden;
        }

        body.is-public .app-header {
            /* Se siente tipo app: se queda pegado arriba al hacer scroll */
            position: sticky;
            z-index: 30;
            padding: 0;
            border-radius: 12px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.06);
            transition: box-shadow .18s ease, transform .18s ease;
        }

        .brand-hero {
            background: #fff;
        }

        .brand-hero-img {
            width: 100%;
            height: auto;
            max-height: 230px;
            display: block;
            object-fit: contain;
        }

        .brand-meta {
            padding: 12px 18px 16px;
            text-align: center;
        }

                /* Accesibilidad: texto sólo para lectores */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        
        h1 {
            font-size: 1.8em;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .subtitle {
            color: #7f8c8d;
            font-size: 0.95em;
        }
        
        

        /* ===== Torneos ===== */
        .torneo-bar {
            margin-top: 18px;
            display: flex;
            gap: 12px;
            align-items: end;
            flex-wrap: wrap;
        }
        .torneo-bar .form-group {
            flex: 1;
            min-width: 260px;
            margin-bottom: 0;
        }

        /* Modo espectador: torneo + categoría (flex-grow) + botón aviso (fijo) */
        body.is-public .torneo-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: flex-end;
        }
        body.is-public .torneo-bar .form-group {
            flex: 1 1 180px;   /* crece, pero nunca menos de 180px */
            min-width: 0;
        }
        body.is-public .torneo-bar .btn-aviso-icon {
            flex: 0 0 auto;    /* tamaño fijo, nunca se estira */
            align-self: flex-end;
            width: 52px;
            max-width: 52px;
        }
        /* Pantallas muy pequeñas: selects ocupan toda la fila, botón a la derecha */
        @media (max-width: 420px) {
            body.is-public .torneo-bar .form-group {
                flex: 1 1 100%;
            }
            body.is-public .torneo-bar .btn-aviso-icon {
                flex: 0 0 auto;
            }
        }

        .btn-aviso-icon{
            height: 52px;
            width: 52px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            border: 1px solid rgba(0,0,0,.08);
            background: rgba(255,255,255,.9);
            box-shadow: 0 2px 8px rgba(0,0,0,.06);
            cursor: pointer;
            font-size: 20px;
            user-select: none;
        }
        .btn-aviso-icon:hover{ transform: translateY(-1px); }
        .btn-aviso-icon:active{ transform: translateY(0px) scale(.98); }
        .btn-aviso-icon:disabled{
            opacity: .45;
            cursor: not-allowed;
            transform: none;
        }
.banner-avisos {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
            padding: 20px 30px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .banner-avisos h3 {
            font-size: 1.1em;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .aviso-display {
            background: white;
            color: #2c3e50;
            padding: 15px 20px;
            border-radius: 6px;
            display: none;
            font-size: 0.95em;
        }
        
        .aviso-display.show {
            display: block;
        }
        
        .aviso-empty {
            color: rgba(255,255,255,0.7);
            font-style: italic;
            font-size: 0.9em;
        }
        
        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .tab {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            background: white;
            border: none;
            border-radius: 10px;
            font-size: 0.95em;
            font-weight: 500;
            color: #7f8c8d;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .tab:hover {
            color: #2c3e50;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        }
        
        .tab.active {
            background: #2c3e50;
            color: white;
        }
        
        .content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .section {
            display: none;
        }
        
        .section.active {
            display: block;
        }
        
        h2 {
            font-size: 1.3em;
            font-weight: 600;
            margin-bottom: 20px;
            color: #2c3e50;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 6px;
            font-size: 0.9em;
            font-weight: 500;
            color: #555;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.95em;
            font-family: inherit;
            transition: border 0.2s;
        }
        
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #3498db;
        }
        
        button.btn-primary {
            background: #2c3e50;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-size: 0.95em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        button.btn-primary:hover {
            background: #34495e;
            transform: translateY(-1px);
        }
        
        button.btn-primary:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        th {
            background: #f8f9fa;
            color: #2c3e50;
            padding: 12px;
            text-align: left;
            font-weight: 600;
            font-size: 0.9em;
            border-bottom: 2px solid #ecf0f1;
        }
        
        td {
            padding: 12px;
            border-bottom: 1px solid #ecf0f1;
            font-size: 0.95em;
        }
        
        tr:hover {
            background: #f8f9fa;
        }
        
        .position {
            font-weight: 600;
            color: #2c3e50;
            font-size: 1.1em;
        }
        
        .match-form {
            display: grid;
            grid-template-columns: 2fr 1fr 2fr;
            gap: 15px;
            align-items: end;
            margin-bottom: 20px;
        }
        
        .vs {
            text-align: center;
            font-weight: 600;
            font-size: 1.2em;
            color: #95a5a6;
            padding-bottom: 12px;
        }
        
        
        /* --- Programar Partido: diseño "tarjetas" (más entendible) --- */
        .match-cards{ display:flex; flex-direction:column; gap:14px; margin-bottom: 14px; }
        .match-cards-3{
            display:grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 12px;
            align-items: stretch;
        }
        .match-cards-2{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            align-items: stretch;
        }
        .vs-pill{
            display:flex;
            align-items:center;
            justify-content:center;
            padding: 8px 12px;
            border-radius: 999px;
            background: #f1f5f9;
            color: #64748b;
            font-weight: 800;
            letter-spacing: 0.04em;
            align-self: center;
            height: fit-content;
        }

        .field-card{
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            padding: 12px 12px 14px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.04);
        }
        .fc-head{
            display:flex;
            align-items:flex-start;
            gap: 10px;
            margin-bottom: 10px;
        }
        .fc-icon{
            font-size: 1.25em;
            line-height: 1.1;
            margin-top: 1px;
        }
        .fc-label{
            display:block;
            font-weight: 800;
            color: #2c3e50;
            margin: 0;
            font-size: 0.98em;
        }
        .fc-help{
            font-size: 0.84em;
            color: #64748b;
            margin-top: 2px;
        }
        .fc-body select,
        .fc-body input,
        .fc-body textarea{
            width: 100%;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            padding: 10px 12px;
            font-size: 1em;
            outline: none;
            transition: border-color .15s, box-shadow .15s;
            background: #fff;
        }
        .fc-body select:focus,
        .fc-body input:focus,
        .fc-body textarea:focus{
            border-color: #94a3b8;
            box-shadow: 0 0 0 4px rgba(148,163,184,0.25);
        }
        @media (max-width: 820px){
            .match-cards-3{ grid-template-columns: 1fr; }
            .vs-pill{ display:none; }
            .match-cards-2{ grid-template-columns: 1fr; }
        }
.btn-delete {
            background: #e74c3c;
            color: white;
            padding: 6px 14px;
            border: none;
            border-radius: 6px;
            font-size: 0.85em;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-delete:hover {
            background: #c0392b;
        }
        
        .match-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .match-info {
            font-size: 0.95em;
        }
        
        .match-score {
            font-weight: 600;
            color: #2c3e50;
            font-size: 1.1em;
        }
        
        .next-match-card {
            background: #2c3e50;
            color: white;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            margin-top: 20px;
        }
        
        .next-match-card h3 {
            margin-bottom: 15px;
            font-weight: 600;
            font-size: 1.1em;
        }
        
        .next-match-teams {
            font-size: 1.8em;
            font-weight: 600;
            margin: 10px 0;
        }
        
        .next-match-datetime {
            font-size: 1.1em;
            margin-top: 10px;
            opacity: 0.9;
        }
        
        .enfrentamiento-card {
            background: white;
            border: 2px solid #ecf0f1;
            border-radius: 8px;
            padding: 20px;
            padding-top: calc(20px + env(safe-area-inset-top));
            padding-right: calc(20px + env(safe-area-inset-right));
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
            padding-left: calc(20px + env(safe-area-inset-left));
            margin-bottom: 15px;
            transition: all 0.2s;
        }
        
        .enfrentamiento-card:hover {
            border-color: #3498db;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1);
        }
        
        .enfrentamiento-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .enfrentamiento-fecha {
            background: #2c3e50;
            color: white;
            padding: 8px 15px;
            border-radius: 6px;
            font-size: 0.9em;
            font-weight: 600;
        }
        
        .enfrentamiento-equipos {
            font-size: 1.3em;
            font-weight: 600;
            color: #2c3e50;
            text-align: center;
            margin: 10px 0;
        }

        .enfrentamiento-equipos .vs{
            display: inline-block;
            margin: 0 10px;
            font-size: .7em;
            font-weight: 800;
            color: #94a3b8;
        }
        .enfrentamiento-equipos .team{ display:inline-block; }
        .enfrentamiento-equipos .team.win{ font-weight: 900; }
        .enfrentamiento-equipos .team.lose{ opacity: .78; }
        .enfrentamiento-equipos .team.draw{ font-weight: 750; }
        
        .enfrentamiento-hora {
            text-align: center;
            color: #7f8c8d;
            font-size: 1.1em;
            font-weight: 500;
        }
        
        .enfrentamiento-notas {
            background: #fff9e6;
            border-left: 3px solid #f39c12;
            padding: 10px 15px;
            margin-top: 15px;
            border-radius: 4px;
            font-size: 0.9em;
            color: #555;
            line-height: 1.5;
        }
        
        .enfrentamiento-notas strong {
            color: #f39c12;
            display: block;
            margin-bottom: 5px;
        }
        
        .btn-eliminar-enfrentamiento {
            background: #95a5a6;
            color: white;
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 0.85em;
            cursor: pointer;
            margin-left: 8px;
        }
        
        .btn-eliminar-enfrentamiento:hover {
            background: #7f8c8d;
        }
        
        .btn-editar-enfrentamiento {
            background: #3498db;
            color: white;
            padding: 6px 12px;
            border: none;
            border-radius: 6px;
            font-size: 0.85em;
            cursor: pointer;
        }
        
        .btn-editar-enfrentamiento:hover {
            background: #2980b9;
        }
        
        .btn-filtro {
            background: white;
            color: #7f8c8d;
            padding: 8px 16px;
            border: 2px solid #ecf0f1;
            border-radius: 6px;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-filtro:hover {
            border-color: #3498db;
            color: #3498db;
        }
        
        .btn-filtro.active {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }


        
        .partido-jugado {
            border-left: 4px solid #27ae60;
        }
        
        .resultado-badge {
            display: inline-block;
            background: #27ae60;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.85em;
            font-weight: 600;
            margin-left: 10px;
        }
        
        
        .amistoso-badge {
            display: inline-block;
            background: #f59e0b;
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.85em;
            font-weight: 700;
            margin-left: 8px;
        }
.resultado-final {
            text-align: center;
            font-size: 1.5em;
            font-weight: 700;
            color: #27ae60;
            margin: 15px 0;
            padding: 15px;
            background: #e8f8f5;
            border-radius: 8px;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }
        
        .modal.show {
            display: flex;
        }
        
        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .modal-header h3 {
            margin: 0;
            font-size: 1.3em;
            color: #2c3e50;
        }
        
        .btn-close {
            background: none;
            border: none;
            font-size: 1.5em;
            cursor: pointer;
            color: #95a5a6;
            padding: 0;
            width: 30px;
            height: 30px;
        }
        
        .btn-close:hover {
            color: #2c3e50;
        }


        /* Team link (abre historial) */
        .team-link{
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            font: inherit;
            font-weight: 600;
            color: #3498db;
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .team-link:hover{ color: #2c3e50; }
        .team-link:focus{ outline: 2px solid rgba(52,152,219,.35); outline-offset: 2px; border-radius: 6px; }

        /* Modal: historial de equipo */
        #modalHistorialEquipo .modal-content{
            max-width: 640px;
            max-height: min(92vh, 820px);
            overflow: hidden;
            border-radius: 24px;
            background: #ffffff;
            box-shadow: 0 24px 80px rgba(15, 23, 42, 0.20);
        }

        #modalHistorialEquipo .modal-header{
            border-bottom: 1px solid #eef2f7;
            padding: 24px 24px 18px;
            align-items: flex-start;
        }

        #modalHistorialEquipo .modal-title{
            font-size: clamp(1.75rem, 4vw, 2.35rem);
            line-height: 1.05;
            color: #0f172a;
            font-weight: 950;
            letter-spacing: -0.04em;
        }

        #modalHistorialEquipo .modal-body{
            max-height: calc(92vh - 98px);
            overflow-y: auto;
            padding: 18px 24px 110px;
            scroll-padding-bottom: 120px;
        }

        #modalHistorialEquipo .modal-body::-webkit-scrollbar{
            width: 7px;
        }

        #modalHistorialEquipo .modal-body::-webkit-scrollbar-thumb{
            background: rgba(37, 99, 235, 0.35);
            border-radius: 999px;
        }

        #modalHistorialEquipo .modal-body::after{
            content: "";
            position: sticky;
            bottom: -110px;
            display: block;
            height: 92px;
            margin: 22px -24px -110px;
            background: linear-gradient(180deg, rgba(255,255,255,0), #fff 42%);
            pointer-events: none;
        }

        #modalHistorialEquipo .btn-close{
            width: 40px;
            height: 40px;
            border-radius: 999px;
            background: #f8fafc;
            color: #94a3b8;
            font-size: 1.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        #modalHistorialEquipo .btn-close:hover{
            background: #eef2ff;
            color: #1d4ed8;
        }

        .historial-modal{
            position: relative;
        }

        .history-return-btn{
            position: absolute;
            left: 24px;
            right: 24px;
            bottom: 18px;
            height: 54px;
            border: 0;
            border-radius: 14px;
            background: #111827;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: .95rem;
            font-weight: 950;
            letter-spacing: .02em;
            cursor: pointer;
            box-shadow: 0 16px 34px rgba(15, 23, 42, .24);
            z-index: 3;
        }

        .history-return-btn:hover{
            background: #0f172a;
            transform: translateY(-1px);
        }

        .history-summary{
            display: block;
            margin-bottom: 20px;
        }

        .team-history-profile{
            display: grid;
            gap: 22px;
        }

        .team-history-head{
            display: flex;
            justify-content: space-between;
            gap: 18px;
            align-items: flex-start;
        }

        .team-history-title-wrap{
            min-width: 0;
        }

        .team-history-title{
            margin: 0 0 8px;
            color: #0f172a;
            font-size: clamp(1.65rem, 4vw, 2.1rem);
            line-height: 1.05;
            font-weight: 950;
            letter-spacing: -0.04em;
        }

        .team-history-meta{
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .team-history-season{
            display: inline-flex;
            align-items: center;
            border-radius: 6px;
            background: #eff6ff;
            color: #2563eb;
            padding: 6px 9px;
            font-size: .76rem;
            font-weight: 950;
            text-transform: uppercase;
            letter-spacing: .02em;
        }

        .team-history-league{
            color: #94a3b8;
            font-size: .82rem;
            font-weight: 750;
        }

        .team-history-form{
            display: grid;
            justify-items: end;
            gap: 8px;
            flex: 0 0 auto;
        }

        .team-history-form-label{
            color: #94a3b8;
            font-size: .68rem;
            font-weight: 950;
            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .team-history-form-dots{
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .form-dot{
            width: 27px;
            height: 27px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: .72rem;
            font-weight: 950;
            box-shadow: 0 6px 14px rgba(15, 23, 42, .10);
        }

        .form-dot--win{ background: #10b981; }
        .form-dot--draw{ background: #94a3b8; }
        .form-dot--loss{ background: #ef4444; }
        .form-dot--empty{
            background: #e2e8f0;
            color: #64748b;
        }

        .team-history-stats-grid{
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 12px;
        }

        .history-stat-card{
            min-height: 66px;
            border: 1px solid #e5edf8;
            border-radius: 15px;
            background: #ffffff;
            display: grid;
            place-items: center;
            gap: 4px;
            padding: 10px 8px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
        }

        .history-stat-card span{
            color: #64748b;
            font-size: .68rem;
            font-weight: 950;
            text-transform: uppercase;
            letter-spacing: .06em;
        }

        .history-stat-card strong{
            color: #0f172a;
            font-size: 1.05rem;
            font-weight: 950;
            line-height: 1;
        }

        .history-stat-card--good span{ color: #16a34a; }
        .history-stat-card--bad span{ color: #ef4444; }
        .history-stat-card--accent span{ color: #2563eb; }

        .history-stat-card--dark{
            background: #111827;
            border-color: #111827;
            box-shadow: 0 14px 26px rgba(15, 23, 42, .18);
        }

        .history-stat-card--dark span,
        .history-stat-card--dark strong{
            color: #ffffff;
        }

        .history-sep,
        .history-h3{
            display: none;
        }

        .history-list{
            display: grid;
            gap: 20px;
        }

        .team-history-section{
            display: grid;
            gap: 12px;
        }

        .team-history-section-title{
            color: #2563eb;
            font-size: .78rem;
            font-weight: 950;
            letter-spacing: .08em;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .team-history-section-title span{
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: #2563eb;
            display: inline-block;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
        }

        .team-history-section-title--muted{
            color: #94a3b8;
        }

        .team-history-upcoming{
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 20px;
            padding: 16px 12px 12px;
        }

        .team-history-upcoming-list,
        .team-history-recent-list{
            display: grid;
            gap: 10px;
        }

        .team-history-next-card{
            display: grid;
            grid-template-columns: 48px minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px;
            min-height: 78px;
            padding: 14px 14px;
            border-radius: 17px;
            background: rgba(255,255,255,.74);
            border: 1px solid rgba(219, 234, 254, .88);
        }

        .team-history-next-card--main{
            background: #ffffff;
            box-shadow: 0 16px 30px rgba(37, 99, 235, .12);
        }

        .team-history-next-icon{
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: #e2e8f0;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 950;
            box-shadow: inset 0 0 0 1px rgba(148,163,184,.18);
        }

        .team-history-next-card--main .team-history-next-icon{
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: #ffffff;
            box-shadow: 0 12px 25px rgba(37,99,235,.28);
        }

        .team-history-next-main{
            min-width: 0;
        }

        .team-history-next-match,
        .team-history-result-match{
            color: #0f172a;
            font-size: 1rem;
            font-weight: 850;
            line-height: 1.2;
        }

        .team-history-next-match span,
        .team-history-result-match span{
            color: #94a3b8;
            font-size: .75rem;
            font-weight: 900;
            text-transform: uppercase;
            margin: 0 2px;
        }

        .team-history-next-meta,
        .team-history-result-date{
            color: #94a3b8;
            font-size: .75rem;
            font-weight: 750;
            margin-top: 6px;
        }

        .team-history-next-card--main .team-history-next-meta{
            color: #2563eb;
            text-transform: uppercase;
            font-weight: 950;
        }

        .team-history-next-badge{
            color: #64748b;
            background: #f1f5f9;
            border-radius: 8px;
            padding: 7px 10px;
            font-size: .68rem;
            font-weight: 950;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .team-history-next-card--main .team-history-next-badge{
            color: #ffffff;
            background: #2563eb;
        }

        .team-history-result-row{
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px;
            padding: 9px 4px;
        }

        .team-history-result-mark{
            width: 27px;
            height: 27px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: .72rem;
            font-weight: 950;
        }

        .team-history-result-mark--win{ background: #10b981; }
        .team-history-result-mark--draw{ background: #94a3b8; }
        .team-history-result-mark--loss{ background: #ef4444; }

        .team-history-result-main{
            min-width: 0;
        }

        .team-history-result-score{
            display: grid;
            justify-items: end;
            gap: 6px;
            min-width: 74px;
        }

        .team-history-result-score strong{
            color: #0f172a;
            font-size: 1.35rem;
            font-weight: 950;
            letter-spacing: -.03em;
            line-height: 1;
        }

        .team-history-result-badge{
            border-radius: 999px;
            padding: 4px 9px;
            font-size: .62rem;
            font-weight: 950;
        }

        .team-history-result-badge--win{
            background: #ecfdf5;
            color: #16a34a;
        }

        .team-history-result-badge--draw{
            background: #f1f5f9;
            color: #94a3b8;
        }

        .team-history-result-badge--loss{
            background: #fef2f2;
            color: #ef4444;
        }

        .team-history-empty{
            border: 1px dashed #cbd5e1;
            border-radius: 14px;
            padding: 18px;
            text-align: center;
            color: #64748b;
            background: rgba(255,255,255,.62);
            font-size: .9rem;
            font-weight: 700;
        }

        .history-item{
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 14px;
            background: #fff;
        }

        @media (max-width: 768px){
            #modalHistorialEquipo .modal-content{
                max-width: calc(100vw - 18px);
                max-height: 94vh;
                border-radius: 22px;
            }

            #modalHistorialEquipo .modal-header{
                padding: 20px 18px 14px;
            }

            #modalHistorialEquipo .modal-body{
                max-height: calc(94vh - 88px);
                padding: 16px 18px 104px;
            }

            .history-return-btn{
                left: 18px;
                right: 18px;
                bottom: 14px;
                height: 52px;
            }

            .team-history-head{
                align-items: stretch;
                flex-direction: column;
            }

            .team-history-form{
                justify-items: start;
            }

            .team-history-stats-grid{
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 10px;
            }

            .team-history-next-card{
                grid-template-columns: 42px minmax(0, 1fr);
                gap: 12px;
            }

            .team-history-next-badge{
                grid-column: 2;
                justify-self: start;
                margin-top: -4px;
            }

            .team-history-result-row{
                grid-template-columns: 30px minmax(0, 1fr) auto;
                gap: 10px;
            }

            .team-history-result-score strong{
                font-size: 1.1rem;
            }
        }

        @media (max-width: 430px){
            .team-history-stats-grid{
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .team-history-next-match,
            .team-history-result-match{
                font-size: .92rem;
            }

            .team-history-result-row{
                align-items: start;
            }

            .team-history-result-score{
                min-width: 58px;
            }
        }

        .ubicacion-info {
            background: #f8f9fa;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 15px;
            font-size: 0.9em;
            color: #555;
        }
        
        .ubicacion-link {
            color: #3498db;
            text-decoration: none;
            font-weight: 500;
        }
        
        .ubicacion-link:hover {
            text-decoration: underline;
        }
        
        .empty-state {
            text-align: center;
            color: #95a5a6;
            padding: 40px 20px;
            font-size: 0.95em;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .loading-overlay .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error-message {
            background: #fee;
            border-left: 4px solid #e74c3c;
            padding: 12px 15px;
            margin: 15px 0;
            border-radius: 4px;
            color: #c0392b;
            font-size: 0.9em;
        }

        .success-message {
            background: #e8f8f5;
            border-left: 4px solid #27ae60;
            padding: 12px 15px;
            margin: 15px 0;
            border-radius: 4px;
            color: #27ae60;
            font-size: 0.9em;
        }

        .config-warning {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 15px 20px;
            margin: 20px 0;
            border-radius: 6px;
            color: #856404;
        }

        .config-warning strong {
            display: block;
            margin-bottom: 8px;
            font-size: 1.1em;
        }

        .config-warning code {
            background: #f8f9fa;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            color: #c7254e;
        }
                                        
                                        /* ===== Helpers responsivos ===== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--ui-border);
  background: var(--ui-card);
  box-shadow: var(--ui-shadow);
}

/* ==========================================
   Side Panels (Public layout)
   - Desktop: left resumen + right sponsors
   - Sticky / limpio
   ========================================== */

.page-grid {
    /* 3 columnas flexibles: panel izquierdo + contenido + panel derecho */
    /* Mantiene los paneles laterales visibles en laptops (modo visitante) */
    width: 100%;
    max-width: none;
    margin: 0;
    display: grid;
    /* Centro flexible, el contenido se limita con .container */
    grid-template-columns: clamp(240px, 18vw, 290px) minmax(0, 1fr) clamp(240px, 18vw, 290px);
    justify-content: stretch;
    gap: 18px;
    align-items: start;
}

.page-grid .container {
    /* Centro: ocupa toda la columna, con tope de ancho controlado por .page-grid */
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.side-panel {
    width: 100%;
}

.side-panel-inner {
    position: sticky;
    top: 20px;
}

.side-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 14px 14px;
}

.side-card-title {
    font-weight: 800;
    font-size: 1.05em;
    margin-bottom: 10px;
    color: #2c3e50;
}

.side-updated{
    font-size: .78rem;
    color: #64748b;
    margin: -6px 0 12px;
}


.side-block {
    margin-bottom: 10px;
}

.side-block-head {
    font-weight: 700;
    font-size: .92em;
    color: #34495e;
    margin-bottom: 8px;
}

.side-divider {
    height: 1px;
    background: #ecf0f1;
    margin: 12px 0;
}


/* CTA en Resumen (Disciplina) */
.side-cta{
    width: 100%;
    border: 1px solid rgba(100,116,139,.22);
    background: rgba(248,250,252,.9);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: transform .08s ease, background .12s ease;
}
.side-cta:hover{ background: rgba(241,245,249,.95); }
.side-cta:active{ transform: translateY(1px); }
.side-cta-title{
    font-weight: 900;
    color: #0f172a;
}
.side-cta-sub{
    font-size: .86rem;
    color: #64748b;
}

/* Modal disciplina */
.disciplina-modal{
    max-width: 760px;
}
.disciplina-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px){
    .disciplina-grid{ grid-template-columns: 1fr; }
}
.side-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.side-item {
    background: #f8f9fa;
    border: 1px solid #ecf0f1;
    border-radius: 10px;
    padding: 10px 10px;
}

.side-item .row1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.side-item .row1 .title {
    font-weight: 800;
    font-size: .95em;
    color: #2c3e50;
}

.side-item .row1 .value {
    font-weight: 900;
    font-size: 1.02em;
    color: #2c3e50;
    white-space: nowrap;
}

.side-item .row2 {
    margin-top: 6px;
    font-size: .85em;
    opacity: .75;
}

.side-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78em;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e6e9ee;
    color: #2c3e50;
}

.side-promos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.promo-card-mini {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    background: #f8f9fa;
    border: 1px solid #ecf0f1;
    border-radius: 12px;
    padding: 10px;
}

.promo-card-mini img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
}

.promo-card-mini .p-title {
    font-weight: 900;
    font-size: .95em;
    margin-bottom: 4px;
}

.promo-card-mini .p-desc {
    font-size: .86em;
    opacity: .82;
    line-height: 1.25;
}

.promo-card-mini .p-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.promo-card-mini .p-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #dfe6ee;
    background: #fff;
    color: #2c3e50;
    text-decoration: none;
    font-weight: 700;
    font-size: .85em;
}

.promo-card-mini .p-cta:hover {
    background: #2c3e50;
    color: white;
    border-color: #2c3e50;
}


/* =========================================================
   Public (Espectador): mantener Resumen/Patrocinadores
   ---------------------------------------------------------
   Objetivo:
   - Desktop: 3 columnas (Resumen + Centro + Patrocinadores)
   - Tablet/Móvil: 1 columna apilada (Centro -> Resumen -> Patrocinadores)
   - Sin romper el layout ni apretar el contenido
   ========================================================= */

/* Controlamos el orden con áreas (no altera el HTML) */
body.is-public .page-grid {
    grid-template-areas: "left main right";
    /* Intercambiado: Patrocinadores a la izquierda */
    grid-template-columns: 360px minmax(0, 1fr) 280px;
}

body.is-public .side-left { grid-area: right; }
body.is-public .container { grid-area: main; }
body.is-public .side-right { grid-area: left; }

/* <=1024px: mobile-first (Bottom Sheet) para Resumen/Patrocinadores
   La idea es mantener una sola columna cómoda en móvil:
   - 1 sola columna
   - nada “aprieta” el contenido (tablas/tabs/avisos)
   - Resumen/Patrocinadores viven en el panel inferior
*/
@media (max-width: 1024px) {
  body.is-public .page-grid {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  body.is-public .side-panel {
    display: none !important;
  }

  body.is-public .side-panel-inner {
    position: static;
    top: auto;
  }

  /* Botón flotante + bottom sheet */
  body.is-public .mobile-panel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
}

/* Public: comportamiento de tabs igual que Admin (scroll horizontal en pantallas medianas) */
@media (max-width: 980px) {
  body.is-public .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    gap: 8px;
  }
  body.is-public .tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 12px 14px;
    border-radius: 999px;
  }
}


/* ==========================================
   Mobile drawer (cuando no hay paneles)
   ========================================== */

.mobile-panel-btn {
    display: none;
    position: fixed;
    right: calc(18px + env(safe-area-inset-right));
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 60;
    min-height: 48px;
    max-width: calc(100vw - 32px);
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, .24);
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 52%, #0f172a 100%);
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(37, 99, 235, .32);
    font-size: .86rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.mobile-panel-btn::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #facc15;
    box-shadow: 0 0 0 5px rgba(250, 204, 21, .18);
    flex: 0 0 auto;
}

.mobile-panel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(37, 99, 235, .38);
    filter: saturate(1.08);
}

.mobile-panel-btn:active {
    transform: translateY(0) scale(.98);
}

.mobile-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 70;
}

.mobile-panel-drawer {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 78vh;
    background: white;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    z-index: 80;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.18);
    overflow: hidden;
}

.mobile-panel-drawer.open,
.mobile-panel-overlay.open {
    display: block;
}

/* Bottom-sheet feel (mobile spectator): transiciones suaves y safe-area */
@media (max-width: 1024px) {
  body.is-public .mobile-panel-overlay {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  body.is-public .mobile-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  body.is-public .mobile-panel-drawer {
    display: block;
    height: calc(78vh - env(safe-area-inset-bottom));
    transform: translateY(105%);
    transition: transform .22s ease;
  }
  body.is-public .mobile-panel-drawer.open {
    transform: translateY(0);
  }
}

.mobile-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #ecf0f1;
}

.mobile-panel-title {
    font-weight: 900;
}

.mobile-panel-close {
    border: 1px solid #dfe6ee;
    background: white;
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
    font-weight: 900;
}

.mobile-panel-tabs {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #ecf0f1;
}

.mptab {
    flex: 1;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid #dfe6ee;
    background: #f8f9fa;
    cursor: pointer;
    font-weight: 800;
}

.mptab.active {
    background: #2c3e50;
    color: white;
    border-color: #2c3e50;
}

.mobile-panel-body {
    padding: 12px 14px;
    height: calc(78vh - 106px);
    overflow: auto;
}

.mp-section {
    display: none;
}

.mp-section.active {
    display: block;
}

.mp-block-head {
    font-weight: 800;
    margin-bottom: 8px;
}



/* ===== Responsive (Public) =====
   IMPORTANT:
   - Primero aplicamos un modo ‘1 columna’ para <=1024px (móvil/tablet)
   - Luego re-habilitamos el panel izquierdo SOLO para 1025-1280px
   Esto evita que en móviles se reserve espacio de panel y el contenido quede ‘corridón’.
*/

/* <=1024px: 1 columna + Bottom Sheet (solo ESPECTADOR)
   Importante: en Admin esto no aplica.
*/
@media (max-width: 1024px) {
    body.is-public .side-panel { display: none; }
    body.is-public .page-grid {
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    body.is-public .mobile-panel-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        right: calc(14px + env(safe-area-inset-right));
        bottom: calc(18px + env(safe-area-inset-bottom));
    }

    /* Espacio inferior para que el FAB nunca tape el último elemento */
    body.is-public #appMain,
    body.is-public #noTorneo {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    /* En móviles, el sticky puede sentirse raro si hubiera paneles visibles */
    body.is-public .side-panel-inner { position: static; }
}

/* 1025px - 1280px: Sidebar izquierdo apilado
   - Arriba: Patrocinadores + Promo
   - Abajo: Resumen
*/
@media (min-width: 1025px) and (max-width: 1280px) {
    body.is-public .side-left { display: block; }
    body.is-public .side-right { display: block; }

    body.is-public .page-grid {
        grid-template-areas:
            "left main"
            "left2 main";
        grid-template-columns: clamp(260px, 28vw, 360px) minmax(0, 1fr);
        justify-content: stretch;
    }

    /* Reasignamos áreas para este breakpoint */
    body.is-public .side-right { grid-area: left; }
    body.is-public .side-left  { grid-area: left2; }
    body.is-public .container  { grid-area: main; }

    /* Evita que los paneles se encimen cuando están apilados */
    body.is-public .side-panel-inner { position: static; }
}

/*
  En pantallas medianas (ej. ~788px/iPad portrait), la tabla de 10 columnas
  se "aprieta" demasiado y visualmente "se rompe".
  Forzamos scroll horizontal antes para que se mantenga legible.
*/
.table-wrap table {
  min-width: 920px;
}

/* Desktop/tablet: colores + hover */
.table-pos-wrap table{ border-collapse: separate !important; border-spacing: 0 !important; }
#tablaPosiciones th{
  background: transparent !important;
  color: var(--ui-muted) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  font-weight: 900;
  font-size: .85rem;
}
#tablaPosiciones td{
  border-bottom: 1px solid var(--ui-border) !important;
}
#tablaPosiciones tr:hover td{ background: rgba(100,116,139,.06) !important; }

/* Por default: no envolver números/cabeceras (se mantiene alineado) */
#tablaPosiciones th,
#tablaPosiciones td {
  white-space: nowrap;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.filtros {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mb-20 { margin-bottom: 20px; }

/* Mejor tipografías fluidas */
h1 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.next-match-teams { font-size: clamp(1.2rem, 4.5vw, 1.8rem); }

/* ===== Breakpoints ===== */
@media (max-width: 900px) {
  body {
    padding: 12px;
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-right: calc(12px + env(safe-area-inset-right));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: calc(12px + env(safe-area-inset-left));
  }
  header { padding: 18px 18px; }
  .content { padding: 18px; }
}

@media (max-width: 720px) {
  /* Tabs: en móvil mejor scroll horizontal */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    gap: 8px;
  }
  .tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 12px 14px;
    border-radius: 999px; /* se sienten “chips” */
  }

  /* Formularios a una columna */
  .match-form { grid-template-columns: 1fr; }
  .vs { padding: 0; font-size: 1em; }

  .grid-2 { grid-template-columns: 1fr; }

  /* Cards/listas */
  .enfrentamiento-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .match-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Modal usable en pantallas pequeñas */
  .modal-content {
    max-height: 85vh;
    overflow: auto;
    padding: 18px;
  }
}

/* ===== Theme Overrides ===== */
:root{
            --bg: #f6f7f9;
            --surface: #ffffff;
            --text: #0f172a;
            --muted: #64748b;
            --border: rgba(15,23,42,.12);
            --primary: #0f172a;
            --primaryText: #ffffff;
            --shadow: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
            --radius: 16px;
            color-scheme: light;
        }

        body{ background: var(--bg) !important; color: var(--text) !important; }

        body.is-public .container{ max-width: 100% !important; width: 100% !important; margin: 0 !important; }

        header{
            background: transparent !important;
            border: 0 !important;
            padding: 0 !important;
            margin-bottom: 18px !important;
        }
        h1{ font-size: 1.6rem !important; letter-spacing: -.02em; }
        .subtitle{ color: var(--muted) !important; }

        /* Top bars */
        .torneo-bar{
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: var(--radius) !important;
            box-shadow: var(--shadow) !important;
            padding: 14px !important;
            gap: 12px !important;
        }
        .hint{
            color: var(--muted);
            font-size: .9em;
        }
        .error-chip{
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(239,68,68,.12);
            border: 1px solid rgba(239,68,68,.25);
            color: #ef4444;
            font-size: .9em;
        }


        /* Tabs */
        .tabs{
            background: transparent !important;
            border: 0 !important;
            padding: 0 !important;
            margin: 14px 0 18px !important;
            display: flex;
            gap: 10px;
            overflow-x: auto;
        }
        .tabs::-webkit-scrollbar{ height: 8px; }
        .tabs::-webkit-scrollbar-thumb{ background: rgba(100,116,139,.35); border-radius: 999px; }
        .tab{
            border-radius: 999px !important;
            border: 1px solid var(--border) !important;
            background: var(--surface) !important;
            color: var(--text) !important;
            padding: 10px 14px !important;
            font-weight: 600 !important;
            white-space: nowrap;
            box-shadow: none !important;
        }
        .tab.active{
            background: var(--primary) !important;
            color: var(--primaryText) !important;
            border-color: transparent !important;
        }

        /* Sections */
        .section{
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: var(--radius) !important;
            box-shadow: var(--shadow) !important;
        }
        .section h2{ font-size: 1.1rem !important; }

        /* Inputs */
        input, select, textarea{
            background: transparent !important;
            border: 1px solid var(--border) !important;
            border-radius: 12px !important;
            color: var(--text) !important;
        }
        input::placeholder, textarea::placeholder{ color: rgba(100,116,139,.85) !important; }
        input:focus, select:focus, textarea:focus{
            outline: none !important;
            border-color: rgba(100,116,139,.55) !important;
            box-shadow: 0 0 0 3px rgba(100,116,139,.18) !important;
        }

        /* Primary button */
        button.btn-primary{
            background: var(--primary) !important;
            color: var(--primaryText) !important;
            border-radius: 999px !important;
            padding: 10px 16px !important;
            transform: none !important;
        }
        button.btn-primary:hover{ opacity: .92; }

        /* Tables */
        table{ border-collapse: separate !important; border-spacing: 0 !important; }
        th{
            background: transparent !important;
            color: var(--muted) !important;
            border-bottom: 1px solid var(--border) !important;
        }
        td{
            border-bottom: 1px solid var(--border) !important;
        }
        tr:hover td{ background: rgba(100,116,139,.06) !important; }

        /* Banner */
        .banner-avisos{
            background: var(--surface) !important;
            border: 1px solid var(--border) !important;
            border-radius: var(--radius) !important;
            box-shadow: var(--shadow) !important;
            color: var(--text) !important;
        }
        .banner-avisos h3{ color: var(--text) !important; }
        .aviso-display{ color: var(--muted) !important; }

/* Promo banner (productos) */
.promo-banner{
    margin: 14px 0 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    background:
        radial-gradient(1200px 300px at 0% 0%, rgba(100,116,139,.14), transparent 55%),
        radial-gradient(900px 260px at 100% 0%, rgba(100,116,139,.10), transparent 60%),
        var(--surface);
    position: relative;
}

/* ==========================================
   Sponsor Hero (Portal)
   - Banner principal arriba (above-the-fold)
   - Dots + contador integrados
   ========================================== */
.promo-banner.sponsor-hero{
    margin-top: 12px;
    background:
        linear-gradient(90deg, rgba(255,219,102,.92) 0%, rgba(255,235,171,.92) 55%, rgba(255,245,214,.92) 100%),
        var(--surface);
    border: 1px solid rgba(0,0,0,.06);
}

.sponsor-hero-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 0;
}

.sponsor-hero-label{
    font-weight: 900;
    letter-spacing: .2px;
    color: rgba(0,0,0,.75);
}

.sponsor-hero-meta{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sponsor-hero-counter{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(0,0,0,.08);
    font-weight: 900;
    font-size: .85rem;
}

.promo-banner.sponsor-hero .promo-dots{
    padding: 0;
    justify-content: flex-end;
}

.promo-banner.sponsor-hero .promo-slide{
    padding-top: 10px;
}

.promo-banner.sponsor-hero .promo-copy h3{
    font-size: 1.55rem;
    font-weight: 950;
    margin-bottom: 6px;
}

.promo-banner.sponsor-hero .promo-copy p{
    color: rgba(0,0,0,.70);
}

.promo-banner.sponsor-hero .promo-cta{
    background: rgba(16, 122, 87, .95);
    color: #fff;
    box-shadow: 0 8px 18px rgba(16, 122, 87, .18);
}

/* Flechas discretas (se muestran al hover) */
.promo-banner.sponsor-hero .promo-nav{
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.promo-banner.sponsor-hero:hover .promo-nav{
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 700px){
  .sponsor-hero-head{ padding: 10px 12px 0; }
  .promo-banner.sponsor-hero .promo-copy h3{ font-size: 1.2rem; }
}

/* ==========================================
   Publicidad nativa (inline)
   ========================================== */
.native-promo{
    margin: 12px 0 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    background:
        radial-gradient(900px 250px at 0% 0%, rgba(100,116,139,.10), transparent 60%),
        var(--surface);
    overflow: hidden;
}

.native-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-weight: 900;
    font-size: .85rem;
    color: var(--muted);
}

.native-body{
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 0 14px 14px;
}

.native-body img{
    width: 120px;
    height: 80px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: rgba(100,116,139,.08);
}

.native-title{
    font-weight: 950;
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.native-desc{
    color: var(--muted);
    font-size: .95rem;
}

.native-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    white-space: nowrap;
}

.native-cta:hover{
    background: var(--text);
    color: #fff;
    border-color: var(--text);
}

@media (max-width: 720px){
  .native-body{
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto;
  }
  .native-body img{ width: 96px; height: 72px; }
  .native-cta{ grid-column: 1 / -1; }
}

/* ==========================================
   Spotlight (Promo del día)
   ========================================== */
.side-card.side-card-spotlight{
    margin-top: 14px;
}

.promo-spotlight{
    display: grid;
    gap: 10px;
}

.promo-spotlight .ps-img{
    width: 100%;
    height: 140px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid #ecf0f1;
    background: #f8f9fa;
}

.promo-spotlight .ps-title{
    font-weight: 950;
    font-size: 1.05rem;
    line-height: 1.15;
}

.promo-spotlight .ps-desc{
    font-size: .92rem;
    opacity: .78;
}

.promo-spotlight .ps-cta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 900;
    border: 1px solid #dfe6ee;
    background: #fff;
    color: #2c3e50;
}

.promo-spotlight .ps-cta:hover{
    background: #2c3e50;
    color: #fff;
    border-color: #2c3e50;
}
.promo-viewport{ overflow: hidden; }
.promo-track{
    display: flex;
    transition: transform .35s ease;
    will-change: transform;
}
.promo-slide{
    min-width: 100%;
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 16px;
}
.promo-img{
    width: 140px;
    height: 92px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: rgba(100,116,139,.08);
}
.promo-copy h3{
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    line-height: 1.15;
}
.promo-copy p{
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
}
.promo-cta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--primaryText);
    text-decoration: none;
    font-weight: 700;
    border: 0;
    white-space: nowrap;
}
.promo-cta:hover{ opacity: .92; }
.promo-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(6px);
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    user-select: none;
}
.promo-nav:hover{ background: rgba(255,255,255,.85); }
.promo-nav.prev{ left: 10px; }
.promo-nav.next{ right: 10px; }
.promo-dots{
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 10px 0 12px;
}
.promo-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
}
.promo-dot.active{
    background: var(--primary);
    border-color: transparent;
}
@media (max-width: 700px){
    .promo-slide{
        grid-template-columns: 96px 1fr;
        grid-template-rows: auto auto;
    }
    .promo-cta{
        grid-column: 1 / -1;
        justify-content: center;
    }
    .promo-img{
        width: 96px;
        height: 72px;
    }
    .promo-nav{ display: none; } /* swipe + dots en móvil */
}

        /* Admin dashboard */
        .public-grid{
            display:grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 14px;
            margin-top: 12px;
        }
        .public-card{
            grid-column: span 6;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 16px;
            background: transparent;
        }
        .public-card h3{ font-size: 1rem; margin-bottom: 6px; }
        .public-card p{ color: var(--muted); margin-bottom: 12px; }
        .btn-secondary{
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text);
            border-radius: 999px;
            padding: 10px 14px;
            font-weight: 600;
            cursor:pointer;
        }
        .btn-secondary:hover{ background: rgba(100,116,139,.08); }
        .btn-secondary:disabled,
        .btn-delete:disabled,
        .btn-eliminar-enfrentamiento:disabled{
            opacity: .5;
            cursor: not-allowed;
            transform: none;
        }

        @media (max-width: 760px){
            .public-card{ grid-column: span 12; }
        }
    


        /* ===== Fix de desbordes y responsividad (secciones) ===== */
        html, body { max-width: 100%; overflow-x: hidden; }

        /* Evita “tarjeta dentro de tarjeta”: el contenedor sólo agrupa secciones */
        #appMain .content{
            background: transparent !important;
            box-shadow: none !important;
            padding: 0 !important;
        }

        /* Cada sección se comporta como tarjeta y “respira” */
        #appMain .section{
            padding: 18px;
        }
        @media (max-width: 720px){
            #appMain .section{ padding: 14px; }
        }

        /* Flex/grid: permitir que el contenido “encaje” sin empujar el ancho */
        .match-item,
        .enfrentamiento-header,{
            min-width: 0;
        }

        .match-item{
            flex-wrap: wrap;
            gap: 10px;
        }
        .match-item span{
            min-width: 0;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .enfrentamiento-header{
            flex-wrap: wrap;
            gap: 10px;
        }
        .enfrentamiento-header > div:last-child{
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: flex-end;
        }
        @media (max-width: 720px){
            .enfrentamiento-header > div:last-child{
                width: 100%;
                justify-content: flex-start;
            }
        }

        .enfrentamiento-equipos,
        .enfrentamiento-notas,
        #vistaPrevia,
        #avisoDisplay{
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        #vistaPrevia,
        #avisoDisplay{ white-space: pre-wrap; }

        .filtros .btn-filtro{ flex: 1 1 140px; }

        /* Columna “Equipo” en tabla: permite salto de línea (nombres largos) */
        #tablaPosiciones th:nth-child(2),
        #tablaPosiciones td:nth-child(2){
            white-space: normal;
            min-width: 180px;
            overflow-wrap: anywhere;
        }


        /* Promo: títulos largos no rompen la grilla */
        .promo-copy{ min-width: 0; }
        .promo-copy h3, .promo-copy p{ overflow-wrap: anywhere; }

        /* Acciones de modal: en móvil se apilan */
        .modal-actions{
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        .modal-actions > *{ flex: 1 1 200px; }

.timeline-mini {
  margin-top: 14px;
}

.timeline-mini .tl-empty {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  opacity: .85;
}

.timeline-mini .tl-item {
  position: relative;
  padding-left: 26px;
  margin: 12px 0;
}

.timeline-mini .tl-item::before {
  content: "";
  position: absolute;
  left: 10px;
  top: -12px;
  bottom: -12px;
  width: 2px;
  background: #e5e7eb;
}

.timeline-mini .tl-dot {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #266edb;
}

.timeline-mini .tl-time {
  font-weight: 800;
  font-size: 1.05em;
}

.timeline-mini .tl-match {
  margin-top: 2px;
  font-weight: 600;
}

.timeline-mini .tl-meta {
  margin-top: 4px;
  font-size: .9em;
  opacity: .8;
}

.timeline-mini .tl-badge {
  margin-left: 8px;
  font-size: .75em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  display: inline-block;
}



.timeline-mini .tl-tag{
  margin-left: 6px;
  font-size: .72em;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  font-weight: 800;
}

.timeline-mini .tl-tag-amistoso{
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}
.timeline-mini-title{
  font-weight: 800;
  opacity: .9;
}


/* Modal Editar Partido: scroll interno + footer fijo */
#modalEditar .modal-dialog{
  width: min(920px, 100%);
  max-height: 92vh;
  max-height: 92dvh; /* tablets/móviles modernos */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* clave para que el body scrollee */
}

#modalEditar .modal-form{
  flex: 1 1 auto;
  min-height: 0; /* clave en flex */
  display: flex;
  flex-direction: column;
}

#modalEditar .modal-body{
  flex: 1 1 auto;
  min-height: 0;              /* clave en flex */
  overflow-y: auto;           /* clave */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 2px; /* evita “corte” por scrollbar */
}

#modalEditar .modal-footer{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 12px;
}



/* ===============================
   Liguilla Bracket (visual)
   =============================== */

.liguilla-bracket-wrap{
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory; /* mejora 5 */
  position: relative;
}

/* Mejora 21: overlay de carga sin borrar el bracket */
.liguilla-bracket-wrap.is-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(2px);
  pointer-events: none;
}

.liguilla-bracket-wrap::-webkit-scrollbar{ height: 10px; }
.liguilla-bracket-wrap::-webkit-scrollbar-thumb{ background: rgba(100,116,139,.25); border-radius: 999px; }

.bracket{
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 18px;
  align-items: start;
  width: max-content;
  min-width: 100%;
  padding: 10px 4px 18px;
}

.bracket-col{
  min-width: 240px;
  scroll-snap-align: start; /* mejora 5 */
}

.bracket-col-title{
  text-align: center;
  font-weight: 900;
  letter-spacing: .08em;
  opacity: .75;
  margin: 0 0 10px;
  font-size: .92rem;
  text-transform: uppercase;
}

.bracket-grid{
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--rows, 8), 64px);
  gap: 14px;
}

.bracket-match{
  position: relative;
  z-index: 1;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  padding: 10px 10px;
  display: grid;
  gap: 8px;
  backdrop-filter: blur(4px);
}

/* Mejora 1: resaltar ganador a nivel tarjeta */
.bracket-match.winner-local,
.bracket-match.winner-visit{
  border-color: rgba(16,185,129,.55);
  box-shadow: 0 14px 30px rgba(16,185,129,.18);
  background: rgba(16,185,129,.08);
}

.bracket-match.is-final{
  border-color: rgba(245,158,11,.45);
}

.crown{ font-size: .95em; margin-left: 4px; color: #f5b301; text-shadow: 0 1px 2px rgba(180, 83, 9, .22); }

/* Hacer evidente que se puede tocar/click */
.bracket-match[data-action]{
  cursor: pointer;
}

.bracket-match[data-action]:hover{
  box-shadow: 0 10px 26px rgba(15,23,42,.10);
}

.bracket-match.is-placeholder{
  opacity: .6;
}

.bracket-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bracket-team{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bracket-team .ico{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(2,132,199,.10);
  flex: 0 0 auto;
}

.bracket-team .name{
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bracket-score{
  font-weight: 1000;
  min-width: 44px;
  text-align: right;
}

.bracket-score.muted{
  opacity: .55;
  font-weight: 900;
}

.bracket-divider{
  height: 1px;
  background: rgba(100,116,139,.18);
}

.bracket-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .82rem;
  opacity: .75;
}

.bracket-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(100,116,139,.22);
  background: rgba(100,116,139,.08);
  font-weight: 800;
  font-size: .78rem;
}

.bracket-badge.ok{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.28);
}

.bracket-team.win{
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.25);
  border-radius: 10px;
  padding: 4px 8px;
}
.bracket-team.win .name{ color: #0f172a; }
.bracket-team.win .score{ font-weight: 1000; }
.bracket-team.lose{ opacity: .65; }

.bracket-svg{
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bracket-svg path,
.bracket-svg .bracket-path{
  stroke: rgba(100,116,139,.45);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}



/* ===============================
   Minimal Pro Bracket Theme (opción 1)
   - Fondo limpio
   - Ganador resaltado sin "fondo pesado"
   =============================== */

.bracket-match--minimal{
  background: #fff;
  border: 1px solid rgba(226,232,240, 1);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  backdrop-filter: none;
}

.bracket-match--minimal .bracket-divider{
  background: rgba(226,232,240,.95);
}

.bracket-match--minimal .bracket-team .ico{
  background: rgba(241,245,249, 1);
  border: 1px solid rgba(226,232,240, 1);
  color: #0f172a;
  font-weight: 1000;
  font-size: .78rem;
  letter-spacing: .02em;
}

.bracket-match--minimal .bracket-score{
  font-size: 1.05rem;
}

/* Resalte ganador: borde + sombra sutil */
.bracket-match--minimal.winner-local,
.bracket-match--minimal.winner-visit{
  background: #fff;
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 14px 30px rgba(34,197,94,.14);
}

/* Resalte ganador: solo el renglón del equipo (no toda la tarjeta) */
.bracket-match--minimal .bracket-row.bracket-team.win{
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);
  border-radius: 12px;
  padding: 6px 8px;
}

.bracket-match--minimal .bracket-row.bracket-team.lose{
  opacity: .72;
}

.bracket-match--minimal .bracket-row.bracket-team.win .ico{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.22);
}

.bracket-match--minimal .bracket-meta{
  justify-content: flex-start;
  gap: 10px;
  opacity: .85;
  font-size: .82rem;
  margin-top: 4px;
}

.bracket-match--minimal .bf-meta-pen{
  margin-left: auto;
  font-weight: 1000;
  opacity: .95;
}

.bracket-svg .bracket-path{
  stroke: rgba(148,163,184,.80);
  stroke-width: 2.2;
}
/* Skeleton (mejora 20) */
.bracket-skeleton .bracket-match{ background: rgba(255,255,255,.7); }
.sk{ display:block; height: 12px; border-radius: 999px; background: rgba(100,116,139,.15); position: relative; overflow:hidden; }
.sk.sm{ height: 10px; width: 70%; }
.sk-t{ height: 12px; width: 65%; margin: 0 auto; }
.sk-line{ margin: 8px 0; }
.sk::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: skmove 1.2s infinite;
}
@keyframes skmove{ to{ transform: translateX(100%); } }

/* Panel resumen (mejora 12) */
.liguilla-summary{ margin-top: 10px; }
.lig-summary-card{
  border: 1px solid rgba(100,116,139,.18);
  border-radius: 16px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  padding: 12px;
}
.lig-summary-title{ font-weight: 900; margin-bottom: 10px; }
.lig-summary-list{ display:grid; gap: 10px; }
.lig-summary-item{ display:flex; justify-content: space-between; align-items:center; gap: 12px; padding: 10px; border-radius: 14px; background: rgba(100,116,139,.06); border: 1px solid rgba(100,116,139,.12); }
.lig-summary-teams{ font-weight: 800; }
.lig-summary-meta{ opacity: .75; font-size: .9em; margin-top: 2px; }
.lig-summary-score{ font-weight: 1000; font-size: 1.05em; }
.lig-summary-score.ok{ color: #0f172a; }
.lig-summary-badge{ width: 28px; height: 28px; display:grid; place-items:center; border-radius: 999px; background: rgba(100,116,139,.12); }
.lig-summary-badge.ok{ background: rgba(16,185,129,.18); }

/* Historial (mejora 14) */
.lig-history-card{
  border: 1px solid rgba(100,116,139,.18);
  border-radius: 16px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  padding: 12px;
}
.lig-history-title{ font-weight: 900; margin-bottom: 10px; }
.lig-history-list{ display:grid; gap: 10px; }
.lig-history-item{ padding: 10px; border-radius: 14px; background: rgba(100,116,139,.06); border: 1px solid rgba(100,116,139,.12); }
.lig-history-name{ font-weight: 900; }
.lig-history-meta{ opacity:.8; margin-top: 3px; }

/* Autosave status (mejora 10) */
.autosave-status{ font-size: .86em; opacity: .8; }
.autosave-status.saving{ opacity: .85; }
.autosave-status.ok{ opacity: 1; }
.autosave-status.err{ opacity: .95; }

@media (max-width: 720px){
  .bracket{ padding: 6px 2px 14px; gap: 14px; }
  .bracket-grid{ grid-template-rows: repeat(var(--rows, 8), 58px); gap: 12px; }
  .bracket-match{ padding: 9px; }
}


/* Campeón (tarjeta principal en Estadísticas) */
.stats-champ-card{ 
  grid-column: 1 / -1;
  padding: 14px 16px;
  border: 1px solid rgba(100,116,139,.18);
  background: rgba(255,255,255,.8);
}
.stats-champ-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.stats-champ-kicker{
  font-size: .92rem;
  font-weight: 900;
  opacity: .85;
}
.stats-champ-name{
  font-size: 1.45rem;
  font-weight: 1000;
  letter-spacing: .2px;
  margin-top: 2px;
}
.stats-champ-sub{
  opacity: .75;
  margin-top: 4px;
}
.stats-champ-note{
  opacity: .65;
  margin-top: 8px;
}
.stats-champ-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(100,116,139,.18);
  background: rgba(100,116,139,.08);
  font-weight: 900;
}
.stats-champ-pill.done{
  background: rgba(16,185,129,.14);
  border-color: rgba(16,185,129,.28);
}


/* Stats campeón (tarjeta principal) */
.stats-champ-card{
  grid-column: 1 / -1;
  padding: 14px 16px;
  border: 1px solid rgba(100,116,139,.18);
  background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(255,255,255,.85));
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

.stats-champ-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.stats-champ-kicker{
  font-weight: 900;
  letter-spacing: .02em;
  opacity: .85;
}

.stats-champ-name{
  font-size: 1.35rem;
  font-weight: 1000;
  margin-top: 4px;
}

.stats-champ-sub{
  opacity: .75;
  margin-top: 4px;
}

.stats-champ-note{
  opacity: .65;
  margin-top: 8px;
}

.stats-champ-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(100,116,139,.20);
  background: rgba(255,255,255,.70);
  font-size: 1.25rem;
}

.stats-champ-pill.done{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.15);
}

/* ==========================================
   Admin: Resumen del torneo (sin duplicar estadísticas)
   ========================================== */
.summary-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}
.summary-item{
  padding: 12px;
  border-radius: 14px;
  background: rgba(100,116,139,.06);
  border: 1px solid rgba(100,116,139,.12);
}
.summary-item .k{
  font-size: .85em;
  opacity: .75;
  margin-bottom: 6px;
}
.summary-item .v{
  font-weight: 900;
}
.summary-item.summary-wide{
  grid-column: 1 / -1;
}
.summary-sub{
  font-size: .85em;
  opacity: .75;
  margin-top: 6px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .9em;
  border: 1px solid rgba(100,116,139,.18);
  background: rgba(100,116,139,.08);
}
.pill-ok{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.22);
}
.pill-warn{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.22);
}
.pill-done{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.22);
}



/* ==========================================
   Modal Aviso Liga (modo espectador)
   ========================================== */
#modalAvisoLiga .aviso-modal{
    max-width: 560px;
}
#modalAvisoLiga .modal-header{
    justify-content: flex-end;
    margin-bottom: 10px;
}
#modalAvisoLiga .aviso-modal-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 0 2px;
}
#modalAvisoLiga .aviso-megafono{
    font-size: 46px;
    line-height: 1;
}
#modalAvisoLiga .aviso-modal-brand{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    margin: 6px 0 14px;
}
#modalAvisoLiga .aviso-modal-icon{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
}
#modalAvisoLiga .aviso-modal-brand-title{
    font-weight: 900;
    letter-spacing: 0.4px;
    color: #2c3e50;
    line-height: 1.1;
}
#modalAvisoLiga .aviso-modal-brand-sub{
    font-size: 0.9em;
    color: #7f8c8d;
    margin-top: 2px;
}
#modalAvisoLiga .aviso-modal-text{
    white-space: pre-wrap;
    font-size: 1.05em;
    line-height: 1.45;
    color: #2c3e50;
    text-align: center;
}

/* Banner aviso como "gatillo" para el modal (solo lectura) */
.is-public .banner-avisos.is-clickable{
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.is-public .banner-avisos.is-clickable:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
    opacity: 0.98;
}
.is-public .banner-avisos.is-clickable:active{
    transform: translateY(0px);
}



/* ====== Tabla de posiciones: estilos base ====== */
:root {
  --ui-bg: #f6f7fb;
  --ui-card: #ffffff;
  --ui-text: #243142;
  --ui-muted: #6b7280;
  --ui-border: #e5e7eb;
  --ui-primary: #2563eb;
  --ui-primary-weak: #eff6ff;
  --ui-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
  /* Estilo “card” siempre (móvil/tablet/web) */
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow);
}

/* Tabla de posiciones (desktop/tablet): colores siempre activos */
#tablaPosiciones{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#tablaPosiciones thead th{
  /* Header con fondo suave */
  background: var(--ui-primary-weak) !important;
  color: var(--ui-muted) !important;
  position: sticky;
  top: 0;
  z-index: 3;
}

#tablaPosiciones tbody td{
  background: var(--ui-card);
}

/* Zebra sutil + mantiene hover */
#tablaPosiciones tbody tr:nth-child(even) td{
  background: rgba(100,116,139,.03);
}

.empty-state {
            text-align: center;
            color: #95a5a6;
            padding: 40px 20px;
            font-size: 0.95em;
        }

        .table-wrap table {
  min-width: 920px;
}

/* Por default: no envolver números/cabeceras (se mantiene alineado) */
#tablaPosiciones th,
#tablaPosiciones td {
  white-space: nowrap;
}

/* ===== Tabla de Posiciones: split (sin overlay) =====
   - Móvil: siempre split
   - Tablet/Web: split cuando haya scroll o viewport “estrecho” (JS pone .use-split)
===== */
.table-pos-wrap .tabla-split{ display: none; }

/* Activa split por clase (tablet/web) */
.table-pos-wrap.use-split .tabla-desktop-wrap{ display: none; }
.table-pos-wrap.use-split .tabla-split{
  display: grid;
  grid-template-columns: auto 1fr;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--ui-card);
  box-shadow: var(--ui-shadow);
}

/* Móvil: split siempre (aunque JS no corra) */
@media (max-width: 900px) {
  .table-pos-wrap .tabla-desktop-wrap{ display: none; }
  .table-pos-wrap .tabla-split{
    display: grid;
    grid-template-columns: auto 1fr;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--ui-card);
    box-shadow: var(--ui-shadow);
  }

  /* Celdas + colores (móvil) */
  .table-pos-wrap .tabla-split th,
  .table-pos-wrap .tabla-split td{
    padding: 10px 12px;
    font-size: .92rem;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-card);
    white-space: nowrap;
    vertical-align: middle;
  }

  .table-pos-wrap .tabla-split th{
    color: var(--ui-muted);
    font-weight: 900;
    font-size: .85rem;
  }

  .table-pos-wrap .tabla-split tr:last-child td{ border-bottom: none; }
}

.table-pos-wrap .split-fixed{
  background: var(--ui-card);
  border-right: 1px solid var(--ui-border);
}

.table-pos-wrap .split-scroll{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--ui-card);
}

.table-pos-wrap .split-scroll::-webkit-scrollbar{ height: 10px; }
.table-pos-wrap .split-scroll::-webkit-scrollbar-thumb{
  background: rgba(100,116,139,.25);
  border-radius: 999px;
}

.table-pos-wrap .split-table{
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 0;
}

/* Derecha: ancho por contenido (para forzar scroll) */
.table-pos-wrap .split-right{
  min-width: 520px;
}

/* Celdas + colores (Celdas + colores)
   - Aplica en móvil (media query) y también cuando JS activa .use-split (tablet/web)
*/
.table-pos-wrap.use-split .tabla-split th,
.table-pos-wrap.use-split .tabla-split td{
  padding: 10px 12px;
  font-size: .92rem;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-card);
  white-space: nowrap;
  vertical-align: middle;
}

.table-pos-wrap.use-split .tabla-split th{
  color: var(--ui-muted);
  font-weight: 900;
  font-size: .85rem;
}

.table-pos-wrap.use-split .tabla-split tr:last-child td{ border-bottom: none; }

/* Anchos del lado fijo */
.table-pos-wrap.use-split .split-left th:nth-child(1),
.table-pos-wrap.use-split .split-left td:nth-child(1){
  width: 64px;
  min-width: 64px;
}

.table-pos-wrap.use-split .split-left th:nth-child(2),
.table-pos-wrap.use-split .split-left td:nth-child(2){
  min-width: 150px;
  max-width: 175px;
}

/* Equipo: ellipsis + espacio para barra de clasificación */
.table-pos-wrap.use-split .split-left td:nth-child(2) .team-link{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  padding-left: 12px;
}

/* Marca por clasificación (línea en columna Equipo) */
#tablaBodyFixed tr.rank-top td:nth-child(2),
#tablaBodyFixed tr.rank-mid td:nth-child(2),
#tablaBodyFixed tr.rank-rest td:nth-child(2){
  position: relative;
}

#tablaBodyFixed tr.rank-top td:nth-child(2)::before,
#tablaBodyFixed tr.rank-mid td:nth-child(2)::before,
#tablaBodyFixed tr.rank-rest td:nth-child(2)::before{
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 5px;
  border-radius: 999px;
  pointer-events: none;
}

#tablaBodyFixed tr.rank-top td:nth-child(2)::before{ background: rgba(34,197,94,.70); }
#tablaBodyFixed tr.rank-mid td:nth-child(2)::before{ background: rgba(249,115,22,.70); }
#tablaBodyFixed tr.rank-rest td:nth-child(2)::before{ background: rgba(239,68,68,.55); }

/* ===== Clasificación: colores SIEMPRE (desktop/tablet también) ===== */
#tablaBody tr.rank-top td:nth-child(2),
#tablaBody tr.rank-mid td:nth-child(2),
#tablaBody tr.rank-rest td:nth-child(2){
  position: relative;
}
#tablaBody tr.rank-top td:nth-child(2)::before,
#tablaBody tr.rank-mid td:nth-child(2)::before,
#tablaBody tr.rank-rest td:nth-child(2)::before{
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 10px;
  width: 5px;
  border-radius: 999px;
  pointer-events: none;
}
#tablaBody tr.rank-top td:nth-child(2)::before{ background: rgba(34,197,94,.70); }
#tablaBody tr.rank-mid td:nth-child(2)::before{ background: rgba(249,115,22,.70); }
#tablaBody tr.rank-rest td:nth-child(2)::before{ background: rgba(239,68,68,.55); }

/* Para que el texto no se encime con la barra */
#tablaBody tr td:nth-child(2) .team-link{ padding-left: 12px; text-align: left; }


/* Empty state split */
.table-pos-wrap.use-split .tabla-split td.empty-state{
  white-space: normal;
  text-align: center;
  opacity: .75;
}


/* ====== Fin tabla de posiciones: estilos base ====== */


/* ===== FIX: Colores SIEMPRE (aunque no exista <thead>) ===== */
#tablaPosiciones th{
  background: var(--ui-primary-weak) !important;
  color: var(--ui-text) !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
#tablaPosiciones th:first-child{ border-top-left-radius: 10px; }
#tablaPosiciones th:last-child{ border-top-right-radius: 10px; }

.table-pos-wrap .split-table th{
  background: var(--ui-primary-weak) !important;
  color: var(--ui-text) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  position: sticky;
  top: 0;
  z-index: 3;
}



/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .promo-track { scroll-snap-type: none; }
}


.js-image-preview-trigger{
  cursor: zoom-in;
}

.image-preview-open{
  overflow: hidden;
}

html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100% !important;
}

body.modal-open {
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  touch-action: none;
}

.image-preview-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 30000;
}

.image-preview-modal.open{
  display: flex;
}

body.image-preview-open .match-detail-modal.show,
body.image-preview-open .match-events-modal.show,
body.image-preview-open #modalHistorialEquipo.show,
body.image-preview-open #modalDisciplina.show,
body.image-preview-open #modalAvisoLiga.show{
  pointer-events: none;
}

body.image-preview-open .image-preview-modal.open{
  pointer-events: auto;
}

.image-preview-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .78);
  backdrop-filter: blur(2px);
}

.image-preview-dialog{
  position: relative;
  z-index: 1;
  width: min(92vw, 960px);
  max-height: 90vh;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.image-preview-img{
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  background: #fff;
}

.image-preview-caption{
  max-width: min(92vw, 960px);
  text-align: center;
  color: #fff;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.image-preview-close{
  position: absolute;
  top: -10px;
  right: -6px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.image-preview-close:hover{
  transform: scale(1.03);
}

@media (max-width: 640px){
  .image-preview-modal{
    padding: 12px;
  }
  .image-preview-dialog{
    width: 100%;
  }
  .image-preview-img{
    max-height: 72vh;
    border-radius: 12px;
  }
  .image-preview-close{
    top: -6px;
    right: 0;
  }
  .image-preview-caption{
    font-size: .92rem;
  }
}



.match-card {
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.match-card:hover {
  border-color: #bfdbfe;
  box-shadow: 0 18px 42px rgba(37, 99, 235, 0.14);
}

.match-card-header {
  align-items: flex-start;
  gap: 12px;
}

.match-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.match-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.match-badge-oficial {
  background: #eaf7ef;
  color: #087f3f;
}

.match-badge-amistoso {
  background: #fff7ed;
  color: #c2410c;
}

.match-badge-jugado {
  background: #e0f2fe;
  color: #0369a1;
}

.enfrentamiento-fecha {
  display: inline-flex;
  align-items: center;
  background: #eaf3ff;
  color: #0f172a;
  border: 1px solid #dbeafe;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.match-meta {
  margin-top: 10px;
  color: #475569;
  font-size: 15px;
  font-weight: 700;
}

.match-meta::first-letter {
  text-transform: uppercase;
}

.match-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  text-align: center;
  margin: 28px 0 12px;
}

.team-side {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
}

.team-logo-slot {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffffff, #eaf3ff);
  border: 1px solid #dbeafe;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  flex: 0 0 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d6efd;
  font-weight: 900;
}

.team-logo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-logo-empty {
  font-size: 22px;
}

.team-name {
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.vs {
  color: #94a3b8;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
}

.match-time {
  display: table;
  margin: 10px auto 22px;
  padding: 8px 16px;
  border-radius: 12px;
  background: #eaf3ff;
  border: 1px solid #dbeafe;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

.match-weather {
  background: #f8fbff;
  border: 1px solid #bfdbfe;
  border-radius: 18px;
  padding: 22px 24px;
  margin-top: 18px;
}

.weather-summary {
  display: grid;
  grid-template-columns: auto minmax(160px, .7fr) 1fr;
  align-items: center;
  gap: 24px;
}

.weather-icon {
  font-size: 62px;
  line-height: 1;
  filter: drop-shadow(0 10px 16px rgba(37, 99, 235, 0.18));
}

.weather-temp-block {
  border-right: 1px solid #dbeafe;
  padding-right: 24px;
}

.weather-temperature {
  display: block;
  color: #0f172a;
  font-size: 42px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.04em;
}

.weather-description {
  display: block;
  margin-top: 8px;
  color: #0d6efd;
  font-size: 19px;
  font-weight: 900;
}

.weather-detail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  color: #0f172a;
  font-size: 14px;
}

.weather-metric {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-left: 1px solid #dbeafe;
  font-weight: 800;
  text-align: center;
}

.weather-metric span {
  display: block;
}

.weather-sensacion {
  color: #b91c1c;
}

.weather-lluvia {
  color: #0369a1;
}

.weather-viento {
  color: #087f3f;
}

.weather-uv {
  color: #6d28d9;
}

.weather-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  color: #087f3f;
}

.weather-tip-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  margin-top: 1px;
}

.weather-tip-box strong {
  display: block;
  font-size: 16px;
  line-height: 1.35;
}

.weather-tip-box small {
  display: block;
  margin-top: 10px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.weather-updated {
  margin-top: 10px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.match-footer {
  text-align: center;
  margin: 24px -20px -20px;
  padding: 18px 20px;
  border-top: 1px solid #e2e8f0;
  background: #fbfdff;
}

.ubicacion-link {
  color: #0d6efd;
  text-decoration: none;
  font-size: 18px;
  font-weight: 900;
}

.ubicacion-link:hover {
  color: #0b5ed7;
  text-decoration: underline;
}

.partido-jugado {
  border-left: 4px solid #087f3f;
}

.resultado-final {
  max-width: 180px;
  margin: 12px auto 10px;
  border-radius: 14px;
  background: #ecfdf3;
  color: #087f3f;
  border: 1px solid #bbf7d0;
}

@media (max-width: 900px) {
  .weather-summary {
    grid-template-columns: auto 1fr;
  }

  .weather-temp-block {
    border-right: 0;
    padding-right: 0;
  }

  .weather-detail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weather-metric {
    border-left: 0;
    border-top: 1px solid #dbeafe;
  }
}

@media (max-width: 640px) {
  .match-card {
    border-radius: 14px;
  }

  .match-card-header {
    flex-direction: column;
  }

  .match-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .match-teams {
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    margin-top: 22px;
  }

  .team-side {
    flex-direction: column;
    gap: 8px;
  }

  .team-logo-slot {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .team-name {
    font-size: 16px;
  }

  .vs {
    font-size: 14px;
  }

  .match-time {
    font-size: 14px;
  }

  .match-weather {
    padding: 16px;
    border-radius: 16px;
  }

  .weather-summary {
    display: block;
    text-align: center;
  }

  .weather-icon {
    font-size: 56px;
    margin-bottom: 10px;
  }

  .weather-temperature {
    font-size: 36px;
  }

  .weather-description {
    font-size: 17px;
  }

  .weather-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
  }

  .weather-metric {
    min-height: auto;
    padding: 10px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #ffffff;
  }

  .weather-tip-box {
    margin-top: 16px;
    padding: 14px;
    text-align: left;
  }

  .weather-tip-box strong {
    font-size: 14px;
  }

  .ubicacion-link {
    font-size: 16px;
  }
}

/* Agrupación del calendario público por jornada y fecha */
.calendar-group {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.calendar-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.calendar-group-title-wrap {
  min-width: 0;
}

.calendar-group-title {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.15;
}

.calendar-group-subtitle {
  margin: 4px 0 0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.calendar-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 88px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #0d6efd;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.calendar-group-list {
  display: grid;
  gap: 10px;
}

.match-compact-date-mini {
  margin-bottom: 5px;
  padding: 5px 8px;
  font-size: 11px;
}

@media (max-width: 720px) {
  .calendar-group {
    gap: 8px;
    margin-bottom: 14px;
  }

  .calendar-group-header {
    align-items: flex-start;
    padding: 11px 12px;
    border-radius: 14px;
  }

  .calendar-group-title {
    font-size: 15px;
  }

  .calendar-group-subtitle {
    font-size: 12px;
  }

  .calendar-group-count {
    min-width: auto;
    padding: 6px 9px;
    font-size: 11px;
  }
}

/* Diseño compacto para calendario público con clima */
.match-compact-card {
  padding: 14px 18px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.match-compact-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.match-compact-date {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  background: #eaf3ff;
  color: #0f172a;
  border: 1px solid #cfe2ff;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
}

.match-compact-submeta {
  margin-top: 6px;
  color: #0d6efd;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.match-compact-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.match-compact-mainrow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 8px 0 6px;
}

.match-compact-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

.match-compact-team strong {
  overflow-wrap: anywhere;
}

.match-compact-team-left {
  justify-content: flex-end;
  text-align: right;
}

.match-compact-team-right {
  justify-content: flex-start;
  text-align: left;
}

.match-compact-center {
  display: flex;
  min-width: 88px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.match-compact-center .vs {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 950;
}

.match-compact-hour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #eaf3ff;
  border: 1px solid #cfe2ff;
  color: #0f172a;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.match-compact-score {
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
}

.match-compact-meta-line {
  text-align: center;
  min-height: 18px;
}

.match-compact-meta-line .match-meta {
  margin: 0 0 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.match-weather-compact {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px 14px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fbff;
  border: 1px solid #cfe2ff;
}

.weather-compact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.weather-compact-row .weather-icon {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 28px;
  line-height: 1;
}

.weather-compact-main {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weather-compact-muted {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.weather-compact-extra {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.weather-tip-compact {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  color: #087f3f;
  font-size: 12px;
  font-weight: 900;
}

.weather-tip-compact span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  border: 2px solid #087f3f;
  font-size: 12px;
  line-height: 1;
}

.weather-tip-compact strong {
  font-weight: 900;
}

.weather-tip-compact small {
  margin-left: auto;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.match-compact-footer {
  display: flex;
  justify-content: center;
  margin-top: 9px;
}

.match-compact-location {
  color: #0d6efd;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.match-compact-location:hover {
  text-decoration: underline;
}

.match-compact-notas {
  margin-top: 10px;
  font-size: 12px;
}

@media (max-width: 720px) {
  .match-compact-card {
    padding: 12px;
  }

  .match-compact-head {
    align-items: flex-start;
  }

  .match-compact-mainrow {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }

  .match-compact-team {
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
  }

  .match-compact-team-left,
  .match-compact-team-right {
    justify-content: center;
    text-align: center;
  }

  .match-compact-team .team-logo-slot {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .match-compact-center {
    min-width: 70px;
  }

  .match-compact-hour {
    padding: 5px 8px;
    font-size: 12px;
  }

  .match-weather-compact {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .weather-compact-extra {
    justify-content: flex-start;
    text-align: left;
  }

  .weather-tip-compact {
    align-items: flex-start;
  }

  .weather-tip-compact small {
    display: block;
    margin-left: 0;
  }
}

/* Ajuste con SVG locales para clima y métricas */
.weather-compact-row-svg {
  gap: 10px;
}

.weather-icon-svg {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  object-fit: contain;
  display: block;
}

.weather-compact-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.weather-compact-temp {
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.weather-compact-desc {
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weather-compact-metrics {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.weather-metric-svg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dbeafe;
  color: #334155;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.weather-metric-svg img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex: 0 0 15px;
  display: block;
}

.weather-tip-compact {
  padding: 7px 9px;
}

@media (max-width: 720px) {
  .weather-icon-svg {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .weather-compact-title {
    gap: 5px;
  }

  .weather-compact-temp {
    font-size: 16px;
  }

  .weather-compact-desc {
    font-size: 12px;
  }

  .weather-compact-metrics {
    justify-content: flex-start;
  }

  .weather-metric-svg {
    font-size: 10.5px;
    padding: 4px 6px;
  }
}

/* Fase 4B - calendario en fila tipo lista */
.calendar-match-list-row {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.045);
}

.calendar-match-list-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 58px;
  border-radius: 10px;
  background: #eaf3ff;
  border: 1px solid #cfe2ff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
}

.calendar-match-list-time .match-compact-date-mini {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 10px;
}

.calendar-match-list-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.calendar-match-list-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.calendar-match-list-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
}

.calendar-match-list-team strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-match-list-team-local {
  justify-content: flex-end;
  text-align: right;
}

.calendar-match-list-team-visitante {
  justify-content: flex-start;
  text-align: left;
}

.calendar-match-list-team .team-logo-slot {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  font-size: 11px;
}

.calendar-match-list-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.calendar-match-list-vs,
.calendar-match-list-center .match-compact-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.calendar-match-list-center .match-compact-score {
  background: #0f172a;
  color: #ffffff;
  font-size: 13px;
}

.calendar-match-list-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.calendar-match-list-label {
  color: #0d6efd;
  font-weight: 950;
  white-space: nowrap;
}

.calendar-match-list-meta .match-meta {
  margin: 0;
  font-size: 11px;
}

.calendar-match-list-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.calendar-match-list-info .match-compact-location {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.calendar-match-list-info .match-weather-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.calendar-match-list-info .weather-compact-row {
  gap: 5px;
}

.calendar-match-list-info .weather-icon,
.calendar-match-list-info .weather-icon-svg {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  font-size: 18px;
}

.calendar-match-list-info .weather-compact-main,
.calendar-match-list-info .weather-compact-temp {
  font-size: 12px;
}

.calendar-match-list-info .weather-compact-muted,
.calendar-match-list-info .weather-compact-extra,
.calendar-match-list-info .weather-tip-compact,
.calendar-match-list-info .weather-compact-desc,
.calendar-match-list-info .weather-compact-updated {
  display: none;
}

.calendar-match-list-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 130px;
}

.calendar-match-list-row .match-compact-notas {
  margin-top: 3px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 11px;
}

@media (max-width: 720px) {
  .calendar-match-list-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }

  .calendar-match-list-time {
    min-height: 66px;
    font-size: 12px;
  }

  .calendar-match-list-status {
    grid-column: 1 / -1;
    justify-content: center;
    max-width: none;
    padding-top: 3px;
  }

  .calendar-match-list-main {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
    gap: 5px;
  }

  .calendar-match-list-team {
    gap: 4px;
    font-size: 12px;
  }

  .calendar-match-list-team .team-logo-slot {
    display: none;
  }

  .calendar-match-list-vs,
  .calendar-match-list-center .match-compact-score {
    min-width: 38px;
    padding: 3px 6px;
    font-size: 11px;
  }

  .calendar-match-list-meta {
    gap: 5px;
    font-size: 10px;
    flex-wrap: wrap;
  }

  .calendar-match-list-info {
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 8px;
    font-size: 11px;
  }

  .calendar-match-list-info .match-compact-location {
    max-width: 140px;
    font-size: 11px;
  }
}

/* Fase 4B - ajuste móvil: la fila se convierte en bloque respirable */
@media (max-width: 560px) {
  .calendar-match-list-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
  }

  .calendar-match-list-time {
    width: fit-content;
    min-height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 5px 9px;
    font-size: 12px;
  }

  .calendar-match-list-time .match-compact-date-mini {
    font-size: 10px;
  }

  .calendar-match-list-body {
    width: 100%;
    gap: 7px;
  }

  .calendar-match-list-main {
    grid-template-columns: 1fr;
    gap: 5px;
    align-items: stretch;
  }

  .calendar-match-list-team {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    font-size: 13px;
    line-height: 1.2;
  }

  .calendar-match-list-team-local,
  .calendar-match-list-team-visitante {
    justify-content: flex-start;
    text-align: left;
  }

  .calendar-match-list-team strong {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }

  .calendar-match-list-center {
    justify-content: flex-start;
  }

  .calendar-match-list-vs,
  .calendar-match-list-center .match-compact-score {
    min-width: auto;
    padding: 3px 9px;
    font-size: 11px;
  }

  .calendar-match-list-meta {
    justify-content: flex-start;
    text-align: left;
    gap: 5px 7px;
  }

  .calendar-match-list-info {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px 8px;
  }

  .calendar-match-list-info .match-compact-location {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
  }

  .calendar-match-list-info .match-weather-compact {
    max-width: 100%;
  }

  .calendar-match-list-status {
    grid-column: auto;
    justify-content: flex-start;
    padding-top: 0;
  }
}

/* Fase 4B - mobile fix 2: quitar badges/opciones que saturan en móvil */
@media (max-width: 560px) {
  .calendar-match-list-row {
    padding: 13px 12px;
    gap: 10px;
  }

  .calendar-match-list-main {
    gap: 7px;
  }

  .calendar-match-list-team {
    font-size: 14px;
  }

  .calendar-match-list-center {
    margin: 1px 0;
  }

  .calendar-match-list-meta {
    display: none;
  }

  .calendar-match-list-status {
    display: none;
  }

  .calendar-match-list-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .calendar-match-list-info .match-compact-location {
    font-size: 12px;
    line-height: 1.25;
  }

  .calendar-match-list-info .weather-compact-row {
    flex-wrap: wrap;
    row-gap: 3px;
  }
}

/* Fase 4C - calendario limpio por fecha + modal minimalista */
.calendar-group-header {
  align-items: center;
}

.calendar-group-title {
  letter-spacing: -0.02em;
}

.calendar-group-subtitle {
  color: #64748b;
}

.calendar-match-clean-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid #e5edf8;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.calendar-group-list .calendar-match-clean-row:first-child {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.calendar-group-list .calendar-match-clean-row:last-child {
  border-bottom: 0;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.calendar-match-clean-time {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.05;
  text-align: left;
  white-space: nowrap;
}

.calendar-match-clean-time span {
  display: block;
}

.calendar-match-clean-teams {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.calendar-match-clean-team {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
}

.calendar-match-clean-team strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-match-clean-team-local {
  justify-content: flex-end;
  text-align: right;
}

.calendar-match-clean-team-visitante {
  justify-content: flex-start;
  text-align: left;
}

.calendar-match-clean-team .team-logo-slot {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  font-size: 11px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}

.calendar-match-clean-vs {
  justify-self: center;
  color: #2563eb;
  background: transparent;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  font-weight: 950;
}

.calendar-match-detail-btn {
  appearance: none;
  border: 1px solid #bfdbfe;
  background: #ffffff;
  color: #0d47a1;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.calendar-match-detail-btn:hover,
.calendar-match-detail-btn:focus-visible {
  background: #eff6ff;
  box-shadow: 0 8px 18px rgba(13, 71, 161, .12);
  transform: translateY(-1px);
  outline: none;
}

.match-detail-open {
  overflow: hidden;
}

.match-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.match-detail-modal.show {
  display: flex;
}

.match-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .54);
  backdrop-filter: blur(4px);
}

.match-detail-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: min(90vh, 820px);
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .24);
  border: 1px solid rgba(219, 234, 254, .95);
  display: flex;
  flex-direction: column;
}

.match-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  margin: 0;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .12);
}

#modalDetallePartidoBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 26px;
}

#modalDetallePartidoBody::-webkit-scrollbar {
  width: 8px;
}

#modalDetallePartidoBody::-webkit-scrollbar-track {
  background: transparent;
}

#modalDetallePartidoBody::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border: 2px solid #ffffff;
  border-radius: 999px;
}

#modalDetallePartidoBody::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.match-detail-hero {
  display: grid;
  gap: 16px;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(145deg, #eef6ff 0%, #f8fbff 50%, #eef2ff 100%);
  border: 1px solid #dbeafe;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.match-detail-date-pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #0d47a1;
  border: 1px solid #bfdbfe;
  box-shadow: 0 8px 18px rgba(13, 71, 161, .10);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.match-detail-team-block {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.match-detail-team-block .team-logo-slot {
  width: 58px;
  height: 58px;
  font-size: 20px;
  box-shadow: 0 14px 28px rgba(37, 99, 235, .16);
}

.match-detail-team-block span {
  display: block;
  margin-bottom: 3px;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.match-detail-team-block strong {
  display: block;
  color: #020617;
  font-size: clamp(24px, 5.3vw, 34px);
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.match-detail-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
}

.match-detail-divider::before,
.match-detail-divider::after {
  content: "";
  height: 1px;
  background: #dbeafe;
}

.match-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.match-detail-badges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #e9eef7;
  color: #334155;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.match-detail-badges span:first-child {
  background: #2563eb;
  color: #ffffff;
}

.match-detail-score-box {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-self: start;
  column-gap: 10px;
  row-gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #0f172a;
  color: #ffffff;
}

.match-detail-score-box span {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.match-detail-score-box strong {
  font-size: 21px;
  font-weight: 950;
}

.match-detail-score-box small {
  grid-column: 1 / -1;
  color: #cbd5e1;
  font-weight: 800;
}

.match-detail-location-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.match-detail-location-box span,
.match-detail-item span {
  display: block;
  margin-bottom: 3px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.match-detail-location-box strong,
.match-detail-item strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.match-detail-location-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.match-detail-status-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.match-detail-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #0d47a1;
  border: 1px solid #bfdbfe;
  text-decoration: none;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.match-detail-section {
  margin-top: 20px;
}

.match-detail-section h4 {
  margin: 0 0 12px;
  color: #020617;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.match-detail-weather-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-radius: 22px;
  background: #fbfdff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
}

.match-detail-weather-hero span {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.match-detail-weather-hero strong {
  display: block;
  margin-top: 6px;
  color: #020617;
  font-size: clamp(38px, 9vw, 52px);
  font-weight: 950;
  letter-spacing: -0.05em;
  line-height: .95;
}

.match-detail-weather-hero small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
}

.match-detail-weather-sun {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 999px;
  background: #fefce8;
  border: 1px solid #fde68a;
  color: #eab308;
  font-size: 36px;
}

.match-detail-grid,
.match-detail-weather-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.match-detail-weather-grid {
  margin-top: 14px;
}

.match-detail-item {
  padding: 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.match-detail-empty {
  padding: 14px;
  border-radius: 16px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
  border: 1px solid #e2e8f0;
}

.match-detail-tip {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.4;
}

.match-detail-updated {
  margin-top: 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.match-detail-notes {
  padding: 14px;
  border-radius: 16px;
  background: #f8fafc;
  color: #334155;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
  border: 1px solid #e2e8f0;
}

@media (max-width: 720px) {
  .calendar-match-clean-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px 10px;
  }

  .calendar-match-clean-time {
    font-size: 15px;
  }

  .calendar-match-clean-teams {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 6px;
  }

  .calendar-match-clean-team {
    gap: 6px;
    font-size: 12.5px;
  }

  .calendar-match-clean-team .team-logo-slot {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    font-size: 9px;
  }

  .calendar-match-clean-vs {
    font-size: 10px;
  }

  .calendar-match-detail-btn {
    padding: 7px 10px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .calendar-match-clean-row {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 12px 8px;
  }

  .calendar-match-clean-time {
    font-size: 14px;
  }

  .calendar-match-clean-teams {
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
    gap: 4px;
  }

  .calendar-match-clean-team {
    font-size: 11.5px;
  }

  .calendar-match-clean-team .team-logo-slot {
    width: 23px;
    height: 23px;
    flex-basis: 23px;
  }

  .calendar-match-detail-btn {
    padding: 7px 9px;
    font-size: 10.5px;
  }

  .match-detail-modal {
    align-items: flex-end;
    padding: 0;
  }

  .match-detail-dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
  }

  #modalDetallePartidoBody {
    padding: 18px;
  }

  .match-detail-hero {
    padding: 18px;
    border-radius: 22px;
  }

  .match-detail-date-pill {
    font-size: 11px;
    line-height: 1.25;
  }

  .match-detail-team-block {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
  }

  .match-detail-team-block .team-logo-slot {
    width: 54px;
    height: 54px;
    font-size: 18px;
  }

  .match-detail-team-block strong {
    font-size: clamp(24px, 7vw, 30px);
  }

  .match-detail-weather-hero {
    padding: 18px;
  }

  .match-detail-weather-sun {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 30px;
  }

  .match-detail-grid,
  .match-detail-weather-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .match-detail-location-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .match-detail-location-actions {
    justify-content: flex-start;
  }
}


/* Ajuste Fase 4C: agrupaciones con sombra, equipos más legibles y botón Detalle abajo */
.calendar-group {
  overflow: hidden;
  margin: 18px 0 24px;
  border: 1px solid #dbeafe;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .12);
}

.calendar-group-header {
  padding: 16px 18px;
  border-bottom: 1px solid #e5edf8;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.calendar-group-list {
  background: #ffffff;
}

.calendar-match-clean-row {
  display: block;
  padding: 18px 18px 16px;
  border: 0;
  border-bottom: 1px solid #e5edf8;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.calendar-group-list .calendar-match-clean-row:last-child {
  border-bottom: 0;
}

.calendar-match-clean-content {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.calendar-match-clean-time {
  color: #0f172a;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.calendar-match-clean-teams {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.calendar-match-clean-team {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #0f172a;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.15;
}

.calendar-match-clean-team strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-match-clean-team-local {
  justify-content: flex-end;
  text-align: right;
}

.calendar-match-clean-team-visitante {
  justify-content: flex-start;
  text-align: left;
}

.calendar-match-clean-team .team-logo-slot {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

.calendar-match-clean-vs {
  justify-self: center;
  color: #2563eb;
  font-size: 14px;
  font-weight: 950;
}

.calendar-match-detail-btn {
  width: 100%;
  margin-top: 14px;
  border: 1px solid #93c5fd;
  background: #ffffff;
  color: #0d47a1;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.calendar-match-detail-btn:hover,
.calendar-match-detail-btn:focus-visible {
  background: #eff6ff;
  box-shadow: 0 8px 18px rgba(13, 71, 161, .12);
  outline: none;
}

@media (max-width: 640px) {
  .calendar-group {
    margin: 16px 0 22px;
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .13);
  }

  .calendar-group-header {
    padding: 14px 14px;
  }

  .calendar-match-clean-row {
    padding: 18px 14px;
  }

  .calendar-match-clean-content {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }

  .calendar-match-clean-time {
    font-size: 17px;
  }

  .calendar-match-clean-teams {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 8px;
  }

  .calendar-match-clean-team {
    gap: 8px;
    font-size: 16px;
  }

  .calendar-match-clean-team .team-logo-slot {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 13px;
  }

  .calendar-match-clean-vs {
    font-size: 12px;
  }

  .calendar-match-detail-btn {
    margin-top: 13px;
    padding: 10px 12px;
    font-size: 13px;
  }
}

@media (max-width: 420px) {
  .calendar-match-clean-content {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
  }

  .calendar-match-clean-time {
    font-size: 16px;
  }

  .calendar-match-clean-teams {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 6px;
  }

  .calendar-match-clean-team {
    font-size: 14.5px;
  }

  .calendar-match-clean-team .team-logo-slot {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 12px;
  }
}


/* ============================================================
   Calendario público - Fase 4C layout 3 rows
   Conserva diseño anterior y solo mejora la fila de partido.
   ============================================================ */
.calendar-group-header {
  position: relative;
  z-index: 1;
}

.calendar-group-title {
  font-size: 18px;
  line-height: 1.15;
  font-weight: 950;
  color: #020617;
  letter-spacing: -0.03em;
}

.calendar-group-subtitle {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 850;
  color: #64748b;
}

.calendar-group-count {
  box-shadow: 0 10px 20px rgba(37, 99, 235, .22);
}

.calendar-match-row-v2 {
  display: block;
  padding: 18px 16px 16px;
  border: 0;
  border-bottom: 1px solid #e5edf8;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.calendar-group-list .calendar-match-row-v2:last-child {
  border-bottom: 0;
}

.calendar-match-row-v2-time {
  margin-bottom: 14px;
  color: #020617;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}

.calendar-match-row-v2-teams {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.calendar-match-row-v2-team {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #020617;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.12;
}

.calendar-match-row-v2-team strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-match-row-v2-team-local {
  justify-content: flex-end;
  text-align: right;
}

.calendar-match-row-v2-team-visitante {
  justify-content: flex-start;
  text-align: left;
}

.calendar-match-row-v2-team .team-logo-slot {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

.calendar-match-row-v2-vs {
  justify-self: center;
  color: #2563eb;
  font-size: 13px;
  font-weight: 950;
}

.calendar-match-row-v2 .calendar-match-detail-btn {
  width: 100%;
  margin-top: 0;
}

@media (max-width: 640px) {
  .calendar-group-title {
    font-size: 17px;
  }

  .calendar-group-subtitle {
    font-size: 12px;
  }

  .calendar-match-row-v2 {
    padding: 17px 14px 15px;
  }

  .calendar-match-row-v2-time {
    margin-bottom: 13px;
    font-size: 17px;
  }

  .calendar-match-row-v2-teams {
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 13px;
  }

  .calendar-match-row-v2-team {
    gap: 8px;
    font-size: 16px;
  }

  .calendar-match-row-v2-team .team-logo-slot {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 13px;
  }

  .calendar-match-row-v2-vs {
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .calendar-match-row-v2-teams {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    gap: 6px;
  }

  .calendar-match-row-v2-team {
    font-size: 15px;
  }

  .calendar-match-row-v2-team .team-logo-slot {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 12px;
  }
}


.calendar-match-row-v2-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendar-match-row-v2-badge {
  flex: 0 0 auto;
  max-width: 52%;
  padding: 6px 10px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .calendar-match-row-v2-time {
    gap: 8px;
  }

  .calendar-match-row-v2-badge {
    max-width: 58%;
    padding: 5px 8px;
    font-size: 11px;
  }
}


/* Ajuste modal clima */
.match-detail-weather-hero-svg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 16%, rgba(59, 130, 246, .13), transparent 34%),
    linear-gradient(145deg, #f8fbff 0%, #eef6ff 52%, #f8fafc 100%);
}

.match-detail-weather-main {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.match-detail-weather-icon-wrap {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(191, 219, 254, .95);
  box-shadow: 0 16px 34px rgba(37, 99, 235, .13);
}

.match-detail-weather-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.match-detail-weather-grid-svg {
  align-items: stretch;
}

.match-detail-weather-metric {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 13px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.match-detail-weather-metric-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
}

.match-detail-weather-metric-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.match-detail-weather-metric span:not(.match-detail-weather-metric-icon) {
  display: block;
  margin-bottom: 4px;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.match-detail-weather-metric strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.match-detail-tip-weather {
  border: 1px solid #fed7aa;
  box-shadow: 0 10px 22px rgba(234, 88, 12, .08);
}

.match-detail-updated-weather {
  text-align: right;
}

@media (max-width: 520px) {
  .match-detail-weather-hero-svg {
    align-items: flex-start;
    padding: 16px;
  }

  .match-detail-weather-hero strong {
    font-size: clamp(34px, 13vw, 48px);
  }

  .match-detail-weather-icon-wrap {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
    border-radius: 22px;
  }

  .match-detail-weather-icon {
    width: 50px;
    height: 50px;
  }

  .match-detail-weather-grid-svg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .match-detail-weather-metric {
    min-height: 66px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
    border-radius: 16px;
  }

  .match-detail-weather-metric-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .match-detail-weather-metric-icon img {
    width: 22px;
    height: 22px;
  }

  .match-detail-updated-weather {
    text-align: left;
  }
}

@media (max-width: 360px) {
  .match-detail-weather-grid-svg {
    grid-template-columns: 1fr;
  }
}


/* Modal detalle: ubicación compacta centrada */
.match-detail-location-strip-centered {
  display: grid;
  place-items: center;
  gap: 10px;
  width: 100%;
  margin: 18px 0 16px;
  text-align: center;
}

.match-detail-location-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.match-detail-location-line {
  flex: 1;
  height: 1px;
  max-width: 96px;
  background: #dbeafe;
}

.match-detail-location-title {
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.match-detail-location-name {
  display: flex;
  justify-content: center;
  width: 100%;
}

.match-detail-location-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(300px, 82vw);
  min-height: 34px;
  padding: 8px 18px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #0f4fb8;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .05em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.match-detail-location-link:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.match-detail-location-link.is-disabled {
  color: #64748b;
  cursor: default;
}

.match-detail-location-link.is-disabled:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

@media (max-width: 420px) {
  .match-detail-location-strip-centered {
    gap: 8px;
  }

  .match-detail-location-heading {
    gap: 8px;
  }

  .match-detail-location-line {
    max-width: 58px;
  }

  .match-detail-location-title {
    font-size: 10px;
  }

  .match-detail-location-link {
    max-width: 78vw;
    min-height: 32px;
    padding: 7px 14px;
    font-size: 11px;
  }
}

/* Ajuste responsive: fecha y jornada centradas en calendario público */
.calendar-group-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(92px, 120px) minmax(0, 1fr) minmax(92px, 120px);
  align-items: center;
  gap: 12px;
}

.calendar-group-title-wrap {
  grid-column: 2;
  min-width: 0;
  text-align: center;
  justify-self: center;
  width: 100%;
}

.calendar-group-title,
.calendar-group-subtitle {
  text-align: center;
}

.calendar-group-count {
  grid-column: 3;
  justify-self: end;
}

@media (max-width: 720px) {
  .calendar-group-header {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding: 12px;
  }

  .calendar-group-title-wrap,
  .calendar-group-count {
    grid-column: 1;
    justify-self: center;
  }

  .calendar-group-title-wrap {
    width: 100%;
  }

  .calendar-group-title {
    font-size: clamp(14px, 4.2vw, 16px);
  }

  .calendar-group-subtitle {
    font-size: clamp(11px, 3.4vw, 12px);
  }
}

@media (max-width: 420px) {
  .calendar-group-header {
    border-radius: 14px;
  }

  .calendar-group-count {
    width: auto;
    max-width: 100%;
  }
}

/* ============================================================
   Fix calendario grande: scroll interno responsivo
   Mantiene el calendario dentro de su panel para que no empuje
   ni desborde las estadísticas/paneles laterales en desktop.
   ============================================================ */
#enfrentamientos.active {
  min-height: 0;
}

#listaEnfrentamientos.calendar-scroll-panel {
  max-height: clamp(320px, calc(100dvh - 310px), 680px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  padding-bottom: 36px;
  scroll-padding-bottom: 36px;
  box-sizing: border-box;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(37, 99, 235, 0.45) rgba(226, 232, 240, 0.9);
}

#listaEnfrentamientos.calendar-scroll-panel:empty {
  overflow: visible;
  padding-right: 0;
  padding-bottom: 0;
}

#listaEnfrentamientos.calendar-scroll-panel::-webkit-scrollbar {
  width: 7px;
}

#listaEnfrentamientos.calendar-scroll-panel::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.75);
  border-radius: 999px;
}

#listaEnfrentamientos.calendar-scroll-panel::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.42);
  border-radius: 999px;
}

#listaEnfrentamientos.calendar-scroll-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.62);
}

@media (max-width: 1280px) {
  #listaEnfrentamientos.calendar-scroll-panel {
    max-height: clamp(300px, calc(100dvh - 285px), 620px);
    padding-bottom: 40px;
    scroll-padding-bottom: 40px;
  }
}

@media (max-width: 1024px) {
  #listaEnfrentamientos.calendar-scroll-panel {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  #listaEnfrentamientos.calendar-scroll-panel {
    max-height: none;
    overflow: visible;
  }
}

/* ============================================================
   Mejora visual: botón Detalle del calendario
   Lo vuelve más identificable como acción principal sin romper layout.
   ============================================================ */
.calendar-match-detail-btn,
.calendar-match-row-v2 .calendar-match-detail-btn {
  border: 1px solid #1d4ed8;
  background: linear-gradient(135deg, #2563eb 0%, #0d47a1 100%);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}

.calendar-match-detail-btn:hover,
.calendar-match-detail-btn:focus-visible,
.calendar-match-row-v2 .calendar-match-detail-btn:hover,
.calendar-match-row-v2 .calendar-match-detail-btn:focus-visible {
  background: linear-gradient(135deg, #1d4ed8 0%, #0b3a84 100%);
  border-color: #0b3a84;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.34);
  transform: translateY(-1px);
  outline: none;
}

.calendar-match-detail-btn:active,
.calendar-match-row-v2 .calendar-match-detail-btn:active {
  transform: translateY(0);
  box-shadow: 0 7px 16px rgba(37, 99, 235, 0.24);
}

/* ==========================================================
   Tabla de posiciones pública — estilo tipo Admin + escudo
   ========================================================== */
#tabla.section.active {
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

#tabla h2 {
  margin-bottom: 14px;
}

.table-pos-wrap {
  background: var(--ui-card, #ffffff);
  border: 1px solid var(--ui-border, #e5e7eb);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

#tablaPosiciones th,
.table-pos-wrap .split-table th {
  background: #f8fafc !important;
  color: #64748b !important;
  padding: 11px 14px;
  text-align: left;
  font-weight: 900;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid #e5e7eb !important;
  white-space: nowrap;
}

#tablaPosiciones td,
.table-pos-wrap .tabla-split td {
  padding: 11px 14px;
  font-size: .9rem;
  border-bottom: 1px solid #eef2f7;
  color: #0f172a;
  vertical-align: middle;
}

#tablaPosiciones tr:last-child td,
.table-pos-wrap .tabla-split tr:last-child td {
  border-bottom: none;
}

#tablaPosiciones tr:hover td,
.table-pos-wrap .tabla-split tr:hover td {
  background: #f8fafc !important;
}

#tablaBody tr.rank-top td:first-child,
#tablaBodyFixed tr.rank-top td:first-child { border-left: 3px solid #16a34a; }
#tablaBody tr.rank-mid td:first-child,
#tablaBodyFixed tr.rank-mid td:first-child { border-left: 3px solid #d97706; }
#tablaBody tr.rank-rest td:first-child,
#tablaBodyFixed tr.rank-rest td:first-child { border-left: 3px solid #dc2626; }

#tablaBody tr.rank-top .position,
#tablaBodyFixed tr.rank-top .position { color: #16a34a; font-weight: 900; }
#tablaBody tr.rank-mid .position,
#tablaBodyFixed tr.rank-mid .position { color: #d97706; font-weight: 900; }
#tablaBody tr.rank-rest .position,
#tablaBodyFixed tr.rank-rest .position { color: #dc2626; font-weight: 900; }

#tablaBody tr.rank-top td:nth-child(2)::before,
#tablaBody tr.rank-mid td:nth-child(2)::before,
#tablaBody tr.rank-rest td:nth-child(2)::before,
#tablaBodyFixed tr.rank-top td:nth-child(2)::before,
#tablaBodyFixed tr.rank-mid td:nth-child(2)::before,
#tablaBodyFixed tr.rank-rest td:nth-child(2)::before {
  display: none;
}

.team-link-pos {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0 !important;
  color: #0f172a;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

.team-link-pos:hover .team-pos-name {
  color: #2563eb;
  text-decoration: underline;
}

.team-link-pos .team-logo-slot {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #ffffff, #eaf3ff);
  border: 1px solid #dbeafe;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.08);
}

.team-link-pos .team-logo-empty {
  font-size: .86rem;
  color: #2563eb;
}

.team-pos-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-pos-wrap.use-split .split-left th:nth-child(2),
.table-pos-wrap.use-split .split-left td:nth-child(2) {
  min-width: 190px;
  max-width: 220px;
}

.table-pos-wrap.use-split .split-left td:nth-child(2) .team-link-pos {
  max-width: 100%;
}

@media (max-width: 900px) {
  .table-pos-wrap .split-left th:nth-child(1),
  .table-pos-wrap .split-left td:nth-child(1) {
    width: 54px;
    min-width: 54px;
  }

  .table-pos-wrap .split-left th:nth-child(2),
  .table-pos-wrap .split-left td:nth-child(2) {
    min-width: 178px;
    max-width: 205px;
  }

  .team-link-pos .team-logo-slot {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .team-pos-name {
    max-width: 130px;
  }
}

@media (max-width: 420px) {
  .table-pos-wrap .split-left th:nth-child(2),
  .table-pos-wrap .split-left td:nth-child(2) {
    min-width: 158px;
    max-width: 175px;
  }

  .team-pos-name {
    max-width: 105px;
  }
}

/* Tabla de posiciones: texto centrado en desktop, tablet y móvil */
#tablaPosiciones th,
#tablaPosiciones td,
.table-pos-wrap .tabla-split th,
.table-pos-wrap .tabla-split td,
.table-pos-wrap .split-table th,
.table-pos-wrap .split-table td {
  text-align: center !important;
}

#tablaPosiciones td:nth-child(2),
#tablaPosiciones th:nth-child(2),
.table-pos-wrap .tabla-split td:nth-child(2),
.table-pos-wrap .tabla-split th:nth-child(2),
.table-pos-wrap .split-table td:nth-child(2),
.table-pos-wrap .split-table th:nth-child(2) {
  text-align: center !important;
}

.team-link-pos,
#tablaBody tr td:nth-child(2) .team-link,
#tablaBodyFixed tr td:nth-child(2) .team-link {
  justify-content: center;
  text-align: center !important;
}

.team-pos-name {
  text-align: center;
}

/* Corrección final: centrar título y contenido de tabla de posiciones */
#tabla h2,
#tabla.section h2,
#tabla.section.active h2 {
  text-align: center !important;
  width: 100%;
  display: block;
}

#tabla .table-wrap,
#tabla .tabla-desktop-wrap,
#tabla .table-pos-wrap {
  text-align: center !important;
}

#tablaPosiciones,
.table-pos-wrap .split-table {
  text-align: center !important;
}

#tablaPosiciones thead th,
#tablaPosiciones tbody td,
.table-pos-wrap .split-table thead th,
.table-pos-wrap .split-table tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

#tablaPosiciones th:nth-child(2),
#tablaPosiciones td:nth-child(2),
.table-pos-wrap .split-left th:nth-child(2),
.table-pos-wrap .split-left td:nth-child(2) {
  text-align: center !important;
}

#tablaPosiciones td:nth-child(2) .team-link-pos,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos {
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto;
}

#tablaPosiciones td:nth-child(2) .team-pos-name,
.table-pos-wrap .split-left td:nth-child(2) .team-pos-name {
  text-align: center !important;
}

@media (max-width: 900px) {
  #tabla h2,
  #tabla.section h2,
  #tabla.section.active h2 {
    text-align: center !important;
  }

  #tablaPosiciones thead th,
  #tablaPosiciones tbody td,
  .table-pos-wrap .split-table thead th,
  .table-pos-wrap .split-table tbody td {
    text-align: center !important;
  }
}

@media (max-width: 520px) {
  #tabla h2,
  #tabla.section h2,
  #tabla.section.active h2 {
    text-align: center !important;
  }

  #tablaPosiciones thead th,
  #tablaPosiciones tbody td,
  .table-pos-wrap .split-table thead th,
  .table-pos-wrap .split-table tbody td {
    text-align: center !important;
  }
}

/* Corrección: centrar logo + nombre dentro de la celda de Equipo */
#tablaPosiciones td:nth-child(2),
.table-pos-wrap .split-left td:nth-child(2) {
  vertical-align: middle !important;
}

#tablaPosiciones td:nth-child(2) .team-link-pos,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos,
#tablaBody tr td:nth-child(2) .team-link-pos,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos {
  width: 100% !important;
  min-height: 42px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  line-height: 1.15 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
  text-decoration: none !important;
}

#tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-slot,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-slot,
#tablaBody tr td:nth-child(2) .team-link-pos .team-logo-slot,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-slot {
  margin: 0 !important;
  align-self: center !important;
}

#tablaPosiciones td:nth-child(2) .team-link-pos .team-pos-name,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-pos-name,
#tablaBody tr td:nth-child(2) .team-link-pos .team-pos-name,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-pos-name {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px;
  line-height: 1.15 !important;
  text-align: center !important;
}

@media (max-width: 520px) {
  #tablaPosiciones td:nth-child(2) .team-link-pos,
  .table-pos-wrap .split-left td:nth-child(2) .team-link-pos,
  #tablaBody tr td:nth-child(2) .team-link-pos,
  #tablaBodyFixed tr td:nth-child(2) .team-link-pos {
    gap: 8px !important;
    min-height: 38px;
  }
}

/* ==========================================================
   Tabla de posiciones: equipo responsivo con logo uniforme
   Mantiene el bloque ordenado en desktop, tablet y movil.
   ========================================================== */
#tablaPosiciones td:nth-child(2),
.table-pos-wrap .split-left td:nth-child(2),
#tablaBody tr td:nth-child(2),
#tablaBodyFixed tr td:nth-child(2) {
  text-align: center !important;
  vertical-align: middle !important;
}

#tablaPosiciones td:nth-child(2) .team-link-pos,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos,
#tablaBody tr td:nth-child(2) .team-link-pos,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos {
  width: min(100%, 198px) !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: initial !important;
  justify-items: initial !important;
  column-gap: 10px !important;
  padding: 0 8px !important;
  margin: 0 auto !important;
  line-height: 1.15 !important;
  text-align: left !important;
}

#tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-slot,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-slot,
#tablaBody tr td:nth-child(2) .team-link-pos .team-logo-slot,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-slot {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  flex: none !important;
  grid-column: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
}

#tablaPosiciones td:nth-child(2) .team-link-pos .team-pos-name,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-pos-name,
#tablaBody tr td:nth-child(2) .team-link-pos .team-pos-name,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-pos-name {
  grid-column: 2 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
  line-height: 1.15 !important;
}

@media (max-width: 900px) {
  #tablaPosiciones td:nth-child(2) .team-link-pos,
  .table-pos-wrap .split-left td:nth-child(2) .team-link-pos,
  #tablaBody tr td:nth-child(2) .team-link-pos,
  #tablaBodyFixed tr td:nth-child(2) .team-link-pos {
    width: min(100%, 178px) !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    padding: 0 7px !important;
  }

  #tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-slot,
  .table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-slot,
  #tablaBody tr td:nth-child(2) .team-link-pos .team-logo-slot,
  #tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-slot {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
}

@media (max-width: 520px) {
  #tablaPosiciones td:nth-child(2) .team-link-pos,
  .table-pos-wrap .split-left td:nth-child(2) .team-link-pos,
  #tablaBody tr td:nth-child(2) .team-link-pos,
  #tablaBodyFixed tr td:nth-child(2) .team-link-pos {
    width: min(100%, 160px) !important;
    min-height: 38px !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    padding: 0 6px !important;
  }

  #tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-slot,
  .table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-slot,
  #tablaBody tr td:nth-child(2) .team-link-pos .team-logo-slot,
  #tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-slot {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
}

/* Clima: color dinámico por condición estimada */
.match-detail-weather-hero-svg.clima-visual-calor,
.match-weather-compact.clima-visual-calor {
  background:
    radial-gradient(circle at 86% 16%, rgba(249, 115, 22, .24), transparent 34%),
    linear-gradient(145deg, #fff7ed 0%, #ffedd5 48%, #fed7aa 100%);
  border-color: #fdba74;
}

.match-detail-weather-hero-svg.clima-visual-soleado,
.match-weather-compact.clima-visual-soleado {
  background:
    radial-gradient(circle at 86% 16%, rgba(250, 204, 21, .24), transparent 34%),
    linear-gradient(145deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
  border-color: #facc15;
}

.match-detail-weather-hero-svg.clima-visual-lluvia,
.match-weather-compact.clima-visual-lluvia {
  background:
    radial-gradient(circle at 86% 16%, rgba(37, 99, 235, .20), transparent 34%),
    linear-gradient(145deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  border-color: #93c5fd;
}

.match-detail-weather-hero-svg.clima-visual-tormenta,
.match-weather-compact.clima-visual-tormenta {
  background:
    radial-gradient(circle at 86% 16%, rgba(99, 102, 241, .25), transparent 34%),
    linear-gradient(145deg, #f8fafc 0%, #c7d2fe 52%, #a5b4fc 100%);
  border-color: #818cf8;
}

.match-detail-weather-hero-svg.clima-visual-nublado,
.match-weather-compact.clima-visual-nublado {
  background:
    radial-gradient(circle at 86% 16%, rgba(100, 116, 139, .16), transparent 34%),
    linear-gradient(145deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
  border-color: #cbd5e1;
}

.match-detail-weather-hero-svg.clima-visual-frio,
.match-weather-compact.clima-visual-frio {
  background:
    radial-gradient(circle at 86% 16%, rgba(6, 182, 212, .20), transparent 34%),
    linear-gradient(145deg, #ecfeff 0%, #cffafe 52%, #a5f3fc 100%);
  border-color: #67e8f9;
}

.match-detail-weather-hero-svg.clima-visual-normal,
.match-weather-compact.clima-visual-normal {
  background:
    radial-gradient(circle at 86% 16%, rgba(34, 197, 94, .14), transparent 34%),
    linear-gradient(145deg, #f0fdf4 0%, #dcfce7 52%, #bbf7d0 100%);
  border-color: #86efac;
}

.match-detail-weather-hero-svg.clima-visual-calor .match-detail-weather-icon-wrap,
.match-weather-compact.clima-visual-calor .weather-icon-svg {
  box-shadow: 0 16px 34px rgba(249, 115, 22, .16);
}

.match-detail-weather-hero-svg.clima-visual-lluvia .match-detail-weather-icon-wrap,
.match-weather-compact.clima-visual-lluvia .weather-icon-svg {
  box-shadow: 0 16px 34px rgba(37, 99, 235, .15);
}

.match-detail-weather-hero-svg.clima-visual-tormenta .match-detail-weather-icon-wrap,
.match-weather-compact.clima-visual-tormenta .weather-icon-svg {
  box-shadow: 0 16px 34px rgba(79, 70, 229, .15);
}

/* Pronóstico de partido en modal público */
.match-detail-probability {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid #dbeafe;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.match-probability-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 14px;
}

.match-probability-header span {
  display: block;
  width: 100%;
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.match-probability-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 22px;
  padding: 3px;
  border-radius: 999px;
  background: #edf2f7;
  border: 1px solid #dbe4ee;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
}

.match-probability-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  transition: width .2s ease;
}

.match-probability-local {
  border-radius: 999px 4px 4px 999px;
  background: linear-gradient(90deg, #0d9488 0%, #14b8a6 100%);
}

.match-probability-draw {
  color: #ffffff;
  background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%);
}

.match-probability-visit {
  border-radius: 4px 999px 999px 4px;
  background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 100%);
}

.match-probability-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.match-probability-labels span {
  min-width: 0;
  overflow: hidden;
  color: #0d9488;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.match-probability-labels span:nth-child(2) {
  color: #64748b;
  text-align: center;
}

.match-probability-labels span:nth-child(3) {
  color: #1d4ed8;
  text-align: right;
}

.match-probability-location {
  display: flex;
  justify-content: center;
  margin: 18px 0 18px;
  padding: 0 10px;
}

.match-probability-location-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-width: min(360px, 100%);
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.match-probability-location-link svg {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.match-location-gps-icon {
  color: #2563eb;
}

.match-location-arrow-icon {
  color: #cbd5e1;
}

.match-location-text {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  color: #0f172a;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.match-location-divider {
  width: 1px;
  height: 18px;
  flex: 0 0 1px;
  background: #e2e8f0;
}

.match-probability-location-link:hover {
  transform: translateY(-1px);
  background: #ffffff;
  border-color: #bfdbfe;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .12);
}

.match-probability-location-link:hover .match-location-arrow-icon {
  color: #2563eb;
}

.match-probability-location-link.is-disabled {
  color: #64748b;
  cursor: default;
}

.match-probability-location-link.is-disabled:hover {
  transform: none;
  border-color: #e2e8f0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
}

.match-detail-probability-location-only {
  padding: 14px 18px;
}

.match-detail-probability-location-only .match-probability-location {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .match-detail-probability {
    padding: 17px 18px;
  }
}

@media (max-width: 768px) {
  .match-detail-probability {
    margin-top: 16px;
    padding: 16px;
    border-radius: 20px;
  }

  .match-probability-header span {
    white-space: normal;
    line-height: 1.35;
  }

  .match-probability-bar {
    min-height: 24px;
  }

  .match-probability-segment {
    min-width: 30px;
    font-size: 10px;
  }

  .match-probability-labels {
    gap: 6px;
  }

  .match-probability-labels span {
    font-size: 9px;
    letter-spacing: .02em;
  }

  .match-probability-location {
    margin: 16px 0 16px;
    padding: 0 6px;
  }

  .match-probability-location-link {
    max-width: 100%;
    min-height: 42px;
    padding: 9px 14px;
    font-size: 11px;
  }

  .match-location-text {
    max-width: 190px;
  }
}

@media (max-width: 430px) {
  .match-probability-segment {
    min-width: 24px;
    font-size: 9px;
  }

  .match-probability-location-link {
    gap: 7px;
    padding-inline: 12px;
    font-size: 10.5px;
  }

  .match-location-text {
    max-width: 145px;
  }

  .match-location-divider {
    height: 16px;
  }
}

.match-detail-note-action {
  display: flex;
  justify-content: center;
  margin: 14px 0 4px;
}

.match-note-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #ffffff;
  color: #0f4fb8;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .12);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.match-note-open-btn:hover {
  transform: translateY(-1px);
  background: #eff6ff;
  border-color: #93c5fd;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .18);
}

.match-note-open-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.match-note-modal {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.match-note-modal.show {
  display: flex;
}

.match-note-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .46);
  backdrop-filter: blur(6px);
}

.match-note-dialog {
  position: relative;
  width: min(420px, 100%);
  padding: 24px 22px 20px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid #dbeafe;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .24);
  text-align: center;
  animation: matchNoteIn .18s ease-out;
}

.match-note-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #f8fafc;
  color: #64748b;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.match-note-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  font-size: 22px;
  font-weight: 950;
}

.match-note-dialog h3 {
  margin: 0;
  color: #020617;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.match-note-body {
  margin-top: 12px;
  padding: 14px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  text-align: left;
  max-height: min(260px, 42vh);
  overflow-y: auto;
}

.match-note-primary-btn {
  width: 100%;
  margin-top: 16px;
  min-height: 42px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .24);
}

@keyframes matchNoteIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 720px) {
  .match-detail-note-action {
    margin-top: 12px;
  }

  .match-note-open-btn {
    width: 100%;
    max-width: 320px;
    font-size: 11px;
  }

  .match-note-dialog {
    padding: 22px 18px 18px;
    border-radius: 24px;
  }
}


/* Ajuste historial equipo: se elimina el bloque duplicado de nombre/torneo dentro del cuerpo */
.team-history-profile--compact{
    padding-top: 4px;
}

.team-history-head--compact{
    justify-content: flex-end;
    margin-bottom: 18px;
}

.team-history-head--compact .team-history-form{
    margin-left: auto;
}

@media (max-width: 640px){
    .team-history-head--compact{
        justify-content: center;
        margin-bottom: 14px;
    }

    .team-history-head--compact .team-history-form{
        margin-left: 0;
        width: 100%;
        align-items: center;
    }
}

/* Mejora visual historial equipo: compacta la zona superior y elimina espacio muerto */
.team-history-profile--compact{
    gap: 12px;
    padding-top: 0;
}

.team-history-head--compact{
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 4px;
    min-height: auto;
}

.team-history-head--compact .team-history-form{
    width: auto;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    justify-items: initial;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid #e5edf8;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

.team-history-head--compact .team-history-form-label{
    white-space: nowrap;
    line-height: 1;
}

.team-history-head--compact .team-history-form-dots{
    gap: 5px;
}

.team-history-head--compact .form-dot{
    width: 24px;
    height: 24px;
    font-size: .68rem;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

#modalHistorialEquipo .history-summary{
    margin-bottom: 16px;
}

@media (max-width: 640px){
    .team-history-head--compact{
        justify-content: center;
        margin-bottom: 2px;
    }

    .team-history-head--compact .team-history-form{
        width: 100%;
        max-width: 360px;
        justify-content: center;
        margin-left: 0;
        padding: 9px 10px;
    }

    .team-history-head--compact .form-dot{
        width: 22px;
        height: 22px;
        font-size: .64rem;
    }
}

/* Hero principal público */
.brand-hero-featured {
    position: relative;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    background: #020617;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.brand-hero-featured picture {
    display: block;
    width: 100%;
}

.brand-hero-featured .brand-hero-img {
    width: 100%;
    height: auto;
    max-height: none;
    display: block;
    object-fit: contain;
    object-position: center;
    filter: saturate(1.04) contrast(1.03);
    transform: none;
}

.brand-slogan-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px 13px;
    border-radius: 0 0 14px 14px;
    background:
        linear-gradient(90deg, rgba(15, 23, 42, 0.04), rgba(250, 204, 21, 0.14), rgba(15, 23, 42, 0.04)),
        #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-top: 0;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.brand-slogan-banner p {
    margin: 0;
    color: #334155;
    font-size: clamp(0.92rem, 1.3vw, 1.05rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.brand-meta {
    display: none;
}

@media (max-width: 768px) {
    .brand-hero-featured {
        border-radius: 12px 12px 0 0;
    }

    .brand-slogan-banner {
        padding: 10px 14px 12px;
        border-radius: 0 0 12px 12px;
    }

    .brand-slogan-banner p {
        font-size: 0.86rem;
        letter-spacing: 0.03em;
    }
}

@media (max-width: 480px) {
    .brand-slogan-banner {
        padding: 9px 12px 10px;
    }

    .brand-slogan-banner p {
        font-size: 0.78rem;
    }
}

.team-history-result-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.team-history-detail-btn,
.side-detail-btn {
    border: 0;
    border-radius: 999px;
    padding: 5px 10px;
    background: #111827;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
    transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.team-history-detail-btn:hover,
.side-detail-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}

.team-history-detail-btn:focus,
.side-detail-btn:focus {
    outline: 2px solid rgba(37, 99, 235, 0.35);
    outline-offset: 2px;
}

.match-events-modal {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.match-events-modal.show {
    display: flex;
}

.match-events-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(3px);
}

.match-events-dialog {
    position: relative;
    z-index: 1;
    width: min(92vw, 760px);
    max-height: min(88vh, 760px);
    overflow: hidden;
    border-radius: 24px;
    background: #020617;
    color: #ffffff;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.match-events-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 900;
    cursor: pointer;
}

.match-events-close:hover {
    background: rgba(255, 255, 255, 0.20);
}

.match-events-body {
    max-height: min(88vh, 760px);
    overflow-y: auto;
    padding: 26px;
}

.match-events-scoreboard {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 10px 44px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.match-events-team {
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
    min-width: 0;
}

.match-events-team .team-logo,
.match-events-team img {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.10);
}

.match-events-team strong {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
}

.match-events-score-center {
    display: grid;
    justify-items: center;
    gap: 5px;
    text-align: center;
}

.match-events-score-center span {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.match-events-score-center strong {
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1;
    letter-spacing: -0.06em;
}

.match-events-score-center small {
    color: #cbd5e1;
    font-weight: 700;
}

.match-events-list-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding-top: 22px;
}

.match-events-column,
.match-events-neutral {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.72);
    padding: 14px;
}

.match-events-column h4,
.match-events-neutral h4 {
    margin: 0 0 12px;
    color: #e5e7eb;
    font-size: 0.84rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.match-events-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 8px;
}

.match-events-item strong {
    color: #f8fafc;
    font-size: 0.86rem;
    text-align: right;
}

.match-events-type {
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    white-space: nowrap;
}

.match-events-item--goal .match-events-type {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

.match-events-item--own-goal .match-events-type {
    background: rgba(249, 115, 22, 0.18);
    color: #fb923c;
}

.match-events-item--yellow .match-events-type {
    background: rgba(250, 204, 21, 0.18);
    color: #fde047;
}

.match-events-item--red .match-events-type {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

.match-events-empty,
.match-events-loading,
.match-events-error {
    border-radius: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    text-align: center;
    font-weight: 800;
}

.match-events-neutral {
    margin-top: 14px;
}

.match-events-penalties {
    margin-top: 4px;
    border-radius: 999px;
    padding: 5px 10px;
    background: rgba(250, 204, 21, 0.14);
    color: #fde047;
    font-size: 0.78rem;
    font-weight: 900;
}

body.modal-stack-open #modalHistorialEquipo {
    z-index: 1000;
}

body.modal-stack-open .match-events-modal.show {
    z-index: 2600;
}

@media (max-width: 640px) {
    .match-events-dialog {
        width: 96vw;
        border-radius: 20px;
    }

    .match-events-body {
        padding: 22px 16px;
    }

    .match-events-scoreboard {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px 38px 18px;
    }

    .match-events-list-wrap {
        grid-template-columns: 1fr;
    }

    .team-history-result-score {
        align-items: flex-end;
    }

    .team-history-detail-btn,
    .side-detail-btn {
        padding: 5px 9px;
        font-size: 0.64rem;
    }
}

#modalHistorialEquipo .modal-content{
    width: min(640px, calc(100vw - 28px));
    max-height: min(92vh, 820px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#modalHistorialEquipo .modal-header{
    flex: 0 0 auto;
}

#modalHistorialEquipo .modal-body{
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 16px 24px 12px;
    scroll-padding-bottom: 24px;
}

#modalHistorialEquipo .modal-body::after{
    content: none;
    display: none;
}

#modalHistorialEquipo .modal-body::-webkit-scrollbar{
    width: 0;
    height: 0;
}

#modalHistorialEquipo .modal-body:hover::-webkit-scrollbar{
    width: 6px;
}

#modalHistorialEquipo .modal-body:hover::-webkit-scrollbar-thumb{
    background: rgba(148, 163, 184, 0.32);
    border-radius: 999px;
}

.history-return-btn{
    position: static;
    flex: 0 0 auto;
    width: min(360px, calc(100% - 48px));
    height: 44px;
    margin: 12px auto 18px;
    border-radius: 13px;
    font-size: .86rem;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .20);
}

.history-list{
    gap: 14px;
    min-height: 0;
}

.team-history-profile{
    gap: 16px;
}

.history-summary{
    margin-bottom: 14px;
}

.team-history-stats-grid{
    gap: 10px;
}

.history-stat-card{
    min-height: 64px;
    padding: 9px 8px;
}

.team-history-section{
    gap: 10px;
    min-height: 0;
}

.team-history-upcoming{
    padding: 14px 12px 12px;
    margin-bottom: 4px;
}

.team-history-upcoming-list{
    max-height: 150px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 99, 235, .25) transparent;
}

.team-history-upcoming-list::-webkit-scrollbar,
.team-history-recent-list::-webkit-scrollbar{
    width: 5px;
}

.team-history-upcoming-list::-webkit-scrollbar-thumb,
.team-history-recent-list::-webkit-scrollbar-thumb{
    background: rgba(37, 99, 235, .25);
    border-radius: 999px;
}

.team-history-recent{
    min-height: 0;
}

.team-history-recent-list{
    max-height: clamp(210px, 32vh, 310px);
    overflow-y: auto;
    padding: 2px 5px 2px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, .20) transparent;
}

.team-history-result-row{
    grid-template-columns: 34px minmax(0, 1fr) minmax(116px, auto);
    padding: 10px 10px;
    border-radius: 16px;
    background: rgba(248, 250, 252, .76);
    border: 1px solid rgba(226, 232, 240, .88);
}

.team-history-result-row + .team-history-result-row{
    margin-top: 8px;
}

.team-history-result-score{
    min-width: 116px;
    gap: 7px;
}

.team-history-result-score strong{
    font-size: 1.28rem;
}

.team-history-result-actions{
    gap: 7px;
    justify-content: flex-end;
}

.team-history-result-badge{
    padding: 4px 8px;
    font-size: .59rem;
}

.team-history-detail-btn{
    min-width: 76px;
    padding: 6px 11px;
    font-size: .65rem;
    line-height: 1;
}

@media (max-width: 768px){
    #modalHistorialEquipo .modal-content{
        max-height: 94vh;
    }

    #modalHistorialEquipo .modal-body{
        max-height: none;
        padding: 14px 18px 10px;
    }

    .history-return-btn{
        left: auto;
        right: auto;
        bottom: auto;
        width: min(320px, calc(100% - 36px));
        height: 42px;
        margin: 10px auto 16px;
        font-size: .82rem;
    }

    .team-history-recent-list{
        max-height: clamp(210px, 34vh, 330px);
    }

    .team-history-upcoming-list{
        max-height: 142px;
    }

    .team-history-result-row{
        grid-template-columns: 30px minmax(0, 1fr) minmax(102px, auto);
        gap: 9px;
        padding: 10px 8px;
    }

    .team-history-result-score{
        min-width: 102px;
    }

    .team-history-detail-btn{
        min-width: 72px;
        padding: 6px 10px;
    }
}

@media (max-width: 430px){
    .team-history-result-row{
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .team-history-result-score{
        grid-column: 2;
        min-width: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 4px;
    }

    .team-history-result-actions{
        flex-wrap: nowrap;
    }

    .team-history-result-score strong{
        font-size: 1.12rem;
    }
}

#modalHistorialEquipo .modal-content{
    max-height: min(94vh, 820px);
}

#modalHistorialEquipo .modal-body{
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 24px 18px;
    scroll-padding-bottom: 0;
}

#modalHistorialEquipo .modal-body::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
}

#modalHistorialEquipo .history-return-btn{
    display: none !important;
}

#modalHistorialEquipo .btn-close{
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.24);
    font-size: 1.45rem;
    font-weight: 950;
    line-height: 1;
    opacity: 1;
}

#modalHistorialEquipo .btn-close:hover,
#modalHistorialEquipo .btn-close:focus{
    background: #2563eb;
    color: #ffffff;
    transform: translateY(-1px);
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 2px;
}

#modalHistorialEquipo .modal-header{
    padding: 24px 28px 16px;
}

#modalHistorialEquipo #historialResumen{
    flex: 0 0 auto;
}

#modalHistorialEquipo #historialLista,
#modalHistorialEquipo .history-list{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#modalHistorialEquipo .team-history-profile,
#modalHistorialEquipo .history-summary{
    margin-bottom: 8px;
}

#modalHistorialEquipo .team-history-upcoming{
    flex: 0 0 auto;
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 16px;
}

#modalHistorialEquipo .team-history-upcoming .team-history-section-title{
    margin-bottom: 8px;
    font-size: 0.74rem;
    line-height: 1;
}

#modalHistorialEquipo .team-history-upcoming-list{
    max-height: 92px;
    overflow-y: auto;
    padding-right: 3px;
}

#modalHistorialEquipo .team-history-next-card{
    min-height: 0;
    padding: 10px 12px;
    border-radius: 14px;
    gap: 10px;
}

#modalHistorialEquipo .team-history-next-card--main{
    padding: 10px 12px;
}

#modalHistorialEquipo .team-history-next-icon{
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    font-size: 0.95rem;
}

#modalHistorialEquipo .team-history-next-match{
    font-size: 0.88rem;
    line-height: 1.15;
}

#modalHistorialEquipo .team-history-next-meta{
    margin-top: 3px;
    font-size: 0.72rem;
}

#modalHistorialEquipo .team-history-next-badge{
    padding: 6px 10px;
    font-size: 0.62rem;
    white-space: nowrap;
}

#modalHistorialEquipo .team-history-recent{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#modalHistorialEquipo .team-history-recent .team-history-section-title{
    flex: 0 0 auto;
    margin-bottom: 8px;
}

#modalHistorialEquipo .team-history-recent-list{
    flex: 1 1 auto;
    min-height: 260px;
    max-height: clamp(280px, 43vh, 430px);
    overflow-y: auto;
    padding: 2px 6px 2px 0;
}

#modalHistorialEquipo .team-history-result-row{
    padding: 9px 10px;
}

@media (max-width: 768px){
    #modalHistorialEquipo .modal-content{
        max-height: 94vh;
    }

    #modalHistorialEquipo .modal-header{
        padding: 22px 24px 14px;
    }

    #modalHistorialEquipo .modal-body{
        padding: 12px 18px 16px;
    }

    #modalHistorialEquipo .btn-close{
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 1.38rem;
    }

    #modalHistorialEquipo .team-history-upcoming{
        padding: 9px 10px;
    }

    #modalHistorialEquipo .team-history-upcoming-list{
        max-height: 88px;
    }

    #modalHistorialEquipo .team-history-recent-list{
        min-height: 280px;
        max-height: clamp(300px, 48vh, 460px);
    }
}

@media (max-width: 430px){
    #modalHistorialEquipo .modal-header{
        padding: 20px 20px 12px;
    }

    #modalHistorialEquipo .modal-body{
        padding: 10px 14px 14px;
    }

    #modalHistorialEquipo .team-history-next-card{
        padding: 9px 10px;
    }

    #modalHistorialEquipo .team-history-next-badge{
        padding: 5px 8px;
        font-size: 0.58rem;
    }

    #modalHistorialEquipo .team-history-recent-list{
        min-height: 300px;
        max-height: 52vh;
    }
}

/* Ajuste final de cierre y cabecera del modal de eventos */
#modalHistorialEquipo .btn-close,
.match-events-close {
    background: #dc2626 !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 14px 30px rgba(220, 38, 38, 0.32) !important;
    opacity: 1 !important;
}

#modalHistorialEquipo .btn-close:hover,
#modalHistorialEquipo .btn-close:focus,
.match-events-close:hover,
.match-events-close:focus {
    background: #b91c1c !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    outline: 3px solid rgba(220, 38, 38, 0.24) !important;
    outline-offset: 2px;
}

.match-events-close {
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 1.42rem;
    line-height: 1;
}

.match-events-scoreboard--simple {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 54px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.match-events-vs-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    color: #f8fafc;
    font-size: clamp(1.02rem, 2.7vw, 1.42rem);
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.match-events-vs-title strong {
    max-width: min(240px, 36vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-events-vs-title span {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.match-events-main-score {
    color: #ffffff;
    font-size: clamp(2.25rem, 7vw, 3.6rem);
    font-weight: 950;
    line-height: 0.95;
    letter-spacing: -0.07em;
}

.match-events-meta {
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 850;
}

@media (max-width: 640px) {
    .match-events-scoreboard--simple {
        padding: 24px 48px 18px;
        gap: 7px;
    }

    .match-events-vs-title {
        font-size: 1.02rem;
    }

    .match-events-vs-title strong {
        max-width: 112px;
    }

    .match-events-main-score {
        font-size: 2.45rem;
    }
}

/* Bloque público para partido por 3er lugar */
.third-place-section {
  margin-top: 18px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.92), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  padding: 16px;
}

.third-place-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.third-place-kicker {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.third-place-header h3 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 950;
  letter-spacing: -0.03em;
}

.third-place-list {
  display: grid;
  gap: 14px;
}

.third-place-card {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  background: #ffffff;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.third-place-scoreboard {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.third-place-teams {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 950;
}

.third-place-teams span,
.third-place-match-teams span {
  color: #94a3b8;
  font-weight: 900;
}

.third-place-score {
  color: #0f172a;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -0.06em;
}

.third-place-round {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 900;
}

.third-place-matches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.third-place-match {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.92);
  padding: 12px;
}

.third-place-match-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.third-place-match-top span {
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(15, 23, 42, 0.08);
  color: #475569;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.third-place-match-top strong {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 1000;
}

.third-place-match-teams {
  color: #0f172a;
  font-weight: 900;
}

.third-place-match-date {
  margin-top: 4px;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
}

.third-place-global,
.third-place-penalties {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

.third-place-penalties {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

.third-place-global span,
.third-place-penalties span {
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.third-place-global strong,
.third-place-penalties strong {
  font-size: 1.04rem;
  font-weight: 1000;
}

@media (max-width: 720px) {
  .third-place-section {
    padding: 13px;
    border-radius: 18px;
  }

  .third-place-header {
    display: grid;
    justify-items: start;
    gap: 8px;
  }

  .third-place-card {
    padding: 12px;
  }

  .third-place-scoreboard {
    justify-items: start;
    text-align: left;
  }

  .third-place-score {
    font-size: 2rem;
  }
}

/* Ajuste móvil: estadísticas del historial en formato compacto */
@media (max-width: 640px) {
    #modalHistorialEquipo .history-summary {
        margin-bottom: 6px;
    }

    #modalHistorialEquipo .team-history-profile,
    #modalHistorialEquipo .team-history-profile--compact {
        gap: 8px;
    }

    #modalHistorialEquipo .team-history-head--compact {
        margin-bottom: 0;
    }

    #modalHistorialEquipo .team-history-head--compact .team-history-form {
        max-width: 100%;
        padding: 7px 9px;
        gap: 7px;
    }

    #modalHistorialEquipo .team-history-head--compact .team-history-form-label {
        font-size: 0.58rem;
        letter-spacing: 0.06em;
    }

    #modalHistorialEquipo .team-history-head--compact .form-dot {
        width: 19px;
        height: 19px;
        font-size: 0.56rem;
    }

    #modalHistorialEquipo .team-history-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 6px;
        border: 1px solid #e5edf8;
        border-radius: 16px;
        background: #f8fafc;
    }

    #modalHistorialEquipo .history-stat-card {
        min-height: 44px !important;
        padding: 6px 3px !important;
        gap: 2px !important;
        border-radius: 11px !important;
        box-shadow: none !important;
        border-color: #e2e8f0 !important;
    }

    #modalHistorialEquipo .history-stat-card span {
        font-size: 0.54rem !important;
        line-height: 1;
        letter-spacing: 0.03em;
    }

    #modalHistorialEquipo .history-stat-card strong {
        font-size: 0.86rem !important;
        line-height: 1;
    }

    #modalHistorialEquipo .history-stat-card--dark {
        border-color: #111827 !important;
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.16) !important;
    }

    #modalHistorialEquipo .team-history-upcoming {
        margin-top: 2px;
    }
}

@media (max-width: 380px) {
    #modalHistorialEquipo .team-history-stats-grid {
        gap: 4px !important;
        padding: 5px;
        border-radius: 14px;
    }

    #modalHistorialEquipo .history-stat-card {
        min-height: 40px !important;
        padding: 5px 2px !important;
        border-radius: 10px !important;
    }

    #modalHistorialEquipo .history-stat-card span {
        font-size: 0.5rem !important;
    }

    #modalHistorialEquipo .history-stat-card strong {
        font-size: 0.8rem !important;
    }
}

.team-logo-with-img {
  position: relative;
}

.team-logo-with-img .team-logo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  font-size: .86rem;
  font-weight: 900;
  z-index: 0;
}

.team-logo-with-img img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-logo-with-img.team-logo-error {
  background: radial-gradient(circle at 30% 25%, #ffffff, #eaf3ff);
}

/* ==========================================================
   Mejora visual: logos de equipo en tabla e historial público
   ========================================================== */
#tablaPosiciones td:nth-child(2) .team-link-pos,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos,
#tablaBody tr td:nth-child(2) .team-link-pos,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos {
    width: min(100%, 206px) !important;
    min-height: 50px !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
}

#tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-slot,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-slot,
#tablaBody tr td:nth-child(2) .team-link-pos .team-logo-slot,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-slot {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
}

#tablaPosiciones td:nth-child(2) .team-link-pos .team-pos-name,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-pos-name,
#tablaBody tr td:nth-child(2) .team-link-pos .team-pos-name,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-pos-name {
    font-size: .92rem !important;
    line-height: 1.12 !important;
}

.team-history-hero {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid #e5edf8;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.team-history-logo {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-history-logo .team-logo-slot {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    border-radius: 24px !important;
    font-size: 1.7rem !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
}

.team-history-logo .team-logo-slot img {
    border-radius: 24px !important;
    object-fit: cover !important;
}

.team-history-hero-text {
    min-width: 0;
}

.team-history-hero-kicker {
    color: #2563eb;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.team-history-hero-name {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.45rem, 4vw, 2.05rem);
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
}

.team-history-hero-meta {
    margin-top: 7px;
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.25;
}

#modalHistorialEquipo .team-history-profile--compact {
    gap: 12px;
}

@media (max-width: 900px) {
    #tablaPosiciones td:nth-child(2) .team-link-pos,
    .table-pos-wrap .split-left td:nth-child(2) .team-link-pos,
    #tablaBody tr td:nth-child(2) .team-link-pos,
    #tablaBodyFixed tr td:nth-child(2) .team-link-pos {
        width: min(100%, 188px) !important;
        min-height: 48px !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    #tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-slot,
    .table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-slot,
    #tablaBody tr td:nth-child(2) .team-link-pos .team-logo-slot,
    #tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-slot {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
}

@media (max-width: 640px) {
    .team-history-hero {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
        border-radius: 20px;
    }

    .team-history-logo {
        width: 70px;
        height: 70px;
    }

    .team-history-logo .team-logo-slot {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        border-radius: 20px !important;
        font-size: 1.35rem !important;
    }

    .team-history-logo .team-logo-slot img {
        border-radius: 20px !important;
    }

    .team-history-hero-kicker {
        font-size: .62rem;
        margin-bottom: 4px;
    }

    .team-history-hero-name {
        font-size: clamp(1.25rem, 7vw, 1.65rem);
    }

    .team-history-hero-meta {
        font-size: .74rem;
    }
}

@media (max-width: 520px) {
    #tablaPosiciones td:nth-child(2) .team-link-pos,
    .table-pos-wrap .split-left td:nth-child(2) .team-link-pos,
    #tablaBody tr td:nth-child(2) .team-link-pos,
    #tablaBodyFixed tr td:nth-child(2) .team-link-pos {
        width: min(100%, 170px) !important;
        min-height: 44px !important;
        grid-template-columns: 36px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    #tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-slot,
    .table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-slot,
    #tablaBody tr td:nth-child(2) .team-link-pos .team-logo-slot,
    #tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-slot {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }

    #tablaPosiciones td:nth-child(2) .team-link-pos .team-pos-name,
    .table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-pos-name,
    #tablaBody tr td:nth-child(2) .team-link-pos .team-pos-name,
    #tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-pos-name {
        font-size: .84rem !important;
    }
}


/* Ajuste final: detalle de equipo compacto sin título ni meta */
#modalHistorialEquipo .modal-content{
    position: relative;
}

#modalHistorialEquipo .modal-header{
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 12;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
}

#modalHistorialEquipo .modal-title{
    display: none !important;
}

#modalHistorialEquipo .btn-close{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 1.05rem !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.24) !important;
}

#modalHistorialEquipo .modal-body{
    padding-top: 18px !important;
}

#modalHistorialEquipo .team-history-hero{
    margin-top: 0 !important;
    padding: 12px 14px !important;
    padding-right: 52px !important;
}

#modalHistorialEquipo .team-history-hero-meta{
    display: none !important;
}

@media (max-width: 640px){
    #modalHistorialEquipo .modal-header{
        top: 10px;
        right: 10px;
    }

    #modalHistorialEquipo .btn-close{
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 1rem !important;
    }

    #modalHistorialEquipo .modal-body{
        padding-top: 14px !important;
    }

    #modalHistorialEquipo .team-history-hero{
        padding: 12px !important;
        padding-right: 48px !important;
    }
}

#tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-with-img img,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-with-img img,
#tablaBody tr td:nth-child(2) .team-link-pos .team-logo-with-img img,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-with-img img,
#modalHistorialEquipo .team-history-logo .team-logo-with-img img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-with-img:not(.team-logo-error) .team-logo-fallback,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-with-img:not(.team-logo-error) .team-logo-fallback,
#tablaBody tr td:nth-child(2) .team-link-pos .team-logo-with-img:not(.team-logo-error) .team-logo-fallback,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-with-img:not(.team-logo-error) .team-logo-fallback,
#modalHistorialEquipo .team-history-logo .team-logo-with-img:not(.team-logo-error) .team-logo-fallback {
    opacity: 0;
}

/* Ajuste: logos de equipo sin marco cuando existe imagen real y con vista ampliada al clic */
#tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img,
#tablaBody tr td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img,
#modalHistorialEquipo .team-history-logo .team-logo-slot.team-logo-with-img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#modalHistorialEquipo .team-history-logo .team-logo-slot.team-logo-with-img,
#modalHistorialEquipo .team-history-logo .team-logo-slot.team-logo-with-img img {
    border-radius: 14px !important;
}

#modalHistorialEquipo .team-history-logo .team-logo-slot.team-logo-with-img img,
#tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img img,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img img,
#tablaBody tr td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img img,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img img {
    object-fit: contain !important;
    background: transparent !important;
}

#modalHistorialEquipo .team-history-logo .team-logo-slot.team-logo-with-img img,
#tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img img,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img img,
#tablaBody tr td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img img,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img img {
    cursor: zoom-in;
}

#modalHistorialEquipo .team-history-logo .team-logo-slot.team-logo-with-img:focus-within,
#tablaPosiciones td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img:focus-within,
.table-pos-wrap .split-left td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img:focus-within,
#tablaBody tr td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img:focus-within,
#tablaBodyFixed tr td:nth-child(2) .team-link-pos .team-logo-slot.team-logo-with-img:focus-within {
    outline: 2px solid rgba(37, 99, 235, .28);
    outline-offset: 3px;
}



@media (max-width: 430px) {
    body.is-public .mobile-panel-btn {
        min-height: 46px;
        padding: 11px 14px;
        font-size: .78rem;
        left: 50%;
        right: auto;
        max-width: calc(100vw - 24px);
    }
}
/* Botón Estadísticas: solo cuando NO hay panel lateral */
@media (min-width: 1025px) {
    body.is-public .mobile-panel-btn,
    body.is-public .mobile-panel-overlay,
    body.is-public .mobile-panel-drawer {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    body.is-public .mobile-panel-btn {
        left: 50% !important;
        right: auto !important;
        bottom: calc(18px + env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        background: #1e293b !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        padding: 12px 24px !important;
        border: none !important;
        border-radius: 14px !important;
        cursor: pointer !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.24) !important;
        transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;

        width: auto !important;
        min-width: 246px !important;
        max-width: calc(100vw - 44px) !important;
        white-space: nowrap !important;
    }

    body.is-public .mobile-panel-btn:hover {
        background: #0f172a !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.30) !important;
    }

    body.is-public .mobile-panel-btn:active {
        transform: translateX(-50%) scale(0.98) !important;
    }
}

@media (max-width: 420px) {
    body.is-public .mobile-panel-btn {
        min-width: calc(100vw - 44px) !important;
        max-width: calc(100vw - 44px) !important;
        padding: 12px 14px !important;
        font-size: 0.86rem !important;
    }
}
/* Feat bracket público ampliado */
.liguilla-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.88);
}

.liguilla-toolbar p {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 750;
}

.btn-bracket-expand {
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
  white-space: nowrap;
}

.btn-bracket-expand:hover,
.btn-bracket-expand:focus {
  background: #1e293b;
  outline: 3px solid rgba(15, 23, 42, 0.16);
  outline-offset: 2px;
}

.btn-bracket-expand:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.liguilla-bracket-wrap.bracket-expandido {
  padding: 8px 4px 16px;
  scroll-snap-type: none;
}

.liguilla-bracket-wrap.bracket-expandido .bracket {
  grid-auto-columns: minmax(320px, 380px);
  gap: 28px;
  padding: 16px 8px 24px;
}

.liguilla-bracket-wrap.bracket-expandido .bracket-col {
  min-width: 320px;
}

.liguilla-bracket-wrap.bracket-expandido .bracket-grid {
  grid-template-rows: repeat(var(--rows, 8), 74px);
  gap: 18px;
}

.bracket-match.bracket-final-card {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.11);
}

.bracket-match.bracket-campeon-card {
  border-color: rgba(245, 158, 11, 0.68);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), #ffffff);
  box-shadow: 0 18px 42px rgba(245, 158, 11, 0.19);
}

.bracket-campeon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(245, 158, 11, 0.16);
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bracket-team-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.bracket-team-logo {
  flex: 0 0 auto;
  display: inline-flex;
}

.bracket-team-logo .team-logo-slot {
  width: 38px;
  height: 30px;
  min-width: 38px;
  flex-basis: 38px;
  border-radius: 10px;
  font-size: 0.72rem;
}

.bracket-team-logo .team-logo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bracket-detail-chip {
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  padding: 4px 8px;
  font-size: 0.7rem;
  font-weight: 950;
  cursor: pointer;
}

.bracket-detail-chip:hover,
.bracket-detail-chip:focus {
  background: rgba(37, 99, 235, 0.14);
  outline: 2px solid rgba(37, 99, 235, 0.16);
  outline-offset: 2px;
}

.bracket-match[data-action="abrir-eventos-partido"]:focus {
  outline: 3px solid rgba(37, 99, 235, 0.24);
  outline-offset: 3px;
}

.third-place-section {
  border-color: rgba(180, 83, 9, 0.20);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.66), rgba(255, 255, 255, 0.98));
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.third-place-kicker {
  background: rgba(180, 83, 9, 0.10);
  color: #92400e;
}

.third-place-card {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

.third-place-score {
  font-size: clamp(1.42rem, 3vw, 2.05rem);
}

.third-place-match[data-action="abrir-eventos-partido"] {
  cursor: pointer;
}

.third-place-match[data-action="abrir-eventos-partido"]:hover,
.third-place-match[data-action="abrir-eventos-partido"]:focus {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
  outline: none;
}

.third-place-match-teams--logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}

.third-place-team-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.third-place-team-name .bracket-team-logo .team-logo-slot {
  width: 22px;
  height: 22px;
  min-width: 22px;
  font-size: 0.65rem;
}

.match-events-scoreboard--loading {
  opacity: 0.82;
}

@media (max-width: 720px) {
  .liguilla-toolbar {
    align-items: stretch;
    display: grid;
  }

  .btn-bracket-expand {
    width: 100%;
  }

  .liguilla-bracket-wrap.bracket-expandido .bracket {
    grid-auto-columns: minmax(285px, 320px);
    gap: 18px;
  }

  .liguilla-bracket-wrap.bracket-expandido .bracket-col {
    min-width: 285px;
  }
}

/* Ajuste liguilla público: detalle de partido pendiente */
.match-events-main-score.is-pending {
    font-size: clamp(1.45rem, 5vw, 2.35rem);
    letter-spacing: -0.03em;
    color: #e2e8f0;
}

.match-events-agenda {
    width: min(100%, 520px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.match-events-agenda-item {
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.56);
    text-align: left;
}

.match-events-agenda-item span {
    display: block;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.match-events-agenda-item strong {
    display: block;
    color: #f8fafc;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.2;
}

@media (max-width: 640px) {
    .match-events-agenda {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Ajuste bracket público tipo Admin
   - Slots fijos por ronda
   - Semifinales/final centradas
   - 3er lugar en panel lateral
   ========================================================== */
.liguilla-bracket-wrap {
  padding: 8px 2px 18px;
  overflow-x: auto;
  overflow-y: hidden;
}

.liguilla-bracket-shell {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr);
  gap: 16px;
  align-items: start;
  min-width: max-content;
}

.liguilla-bracket-shell.has-third-place {
  grid-template-columns: minmax(max-content, 1fr) minmax(254px, 270px);
}

.liguilla-bracket-shell .bracket {
  grid-auto-columns: minmax(288px, 288px);
  gap: 16px;
  min-width: unset;
  width: max-content;
  padding: 6px 8px 18px;
  align-items: start;
}

.liguilla-bracket-shell .bracket-col {
  min-width: 288px;
}

.liguilla-bracket-shell .bracket-grid {
  grid-template-rows: repeat(var(--rows, 8), 88px);
  gap: 8px;
}

.liguilla-bracket-shell .bracket-col-title {
  height: 42px;
  margin: 0 0 10px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-bottom: 2px solid rgba(148, 163, 184, 0.18);
}

.liguilla-bracket-shell .bracket-col-title span {
  display: block;
  font-size: 0.74rem;
  line-height: 1;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #64748b;
}

.liguilla-bracket-shell .bracket-col-title small {
  display: block;
  font-size: 0.64rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: #94a3b8;
}

.liguilla-bracket-shell .bracket-match--minimal {
  min-height: 158px;
  padding: 10px 12px;
  border-radius: 12px;
  border-color: rgba(147, 197, 253, 0.65);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

.liguilla-bracket-shell .bracket-row {
  min-height: 36px;
}

.liguilla-bracket-shell .bracket-row.bracket-team.win {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.24);
}

.liguilla-bracket-shell .bracket-row.bracket-team.lose {
  opacity: 0.48;
}

.liguilla-bracket-shell .bracket-team-main .name {
  font-size: 0.86rem;
  font-weight: 1000;
}

.liguilla-bracket-shell .bracket-score {
  font-size: 1rem;
  font-weight: 1000;
}

.liguilla-bracket-shell .bracket-meta {
  min-height: 24px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.liguilla-bracket-shell .bf-meta-date {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 750;
}

.liguilla-bracket-shell .bracket-detail-chip {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 0.68rem;
}

.liguilla-bracket-shell .bracket-path {
  stroke: rgba(148, 163, 184, 0.86);
  stroke-width: 2;
}

.liguilla-bracket-shell .bracket-col[data-stage-col="FINAL"] .bracket-col-title {
  border-bottom-color: rgba(245, 158, 11, 0.48);
}

.liguilla-bracket-shell .bracket-col[data-stage-col="FINAL"] .bracket-col-title span {
  color: #b45309;
}

.liguilla-bracket-shell .bracket-col[data-stage-col="FINAL"] .bracket-col-title small {
  color: #92400e;
}

.liguilla-bracket-shell .bracket-match.bracket-final-card {
  min-height: 158px;
  border-color: rgba(245, 158, 11, 0.62);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.86), #ffffff);
  box-shadow: 0 12px 26px rgba(245, 158, 11, 0.12);
}

.liguilla-bracket-shell .bracket-match.bracket-campeon-card {
  border-color: rgba(245, 158, 11, 0.82);
  background: linear-gradient(180deg, rgba(255, 251, 235, 1), #ffffff);
  box-shadow: 0 18px 38px rgba(245, 158, 11, 0.18);
}

.liguilla-third-panel {
  align-self: start;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.055);
  overflow: hidden;
  min-width: 254px;
  max-width: 270px;
}

.liguilla-third-head {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.96);
  background: rgba(248, 250, 252, 0.82);
}

.liguilla-third-head strong {
  display: block;
  color: #0f172a;
  font-size: 0.96rem;
  font-weight: 1000;
}

.liguilla-third-body {
  padding: 12px 14px 14px;
}

.liguilla-third-body .bracket-col,
.liguilla-third-body .third-place-list {
  min-width: 0;
  width: 100%;
}

.liguilla-third-body .bracket-col-title {
  height: 48px;
  margin: 0 0 12px;
  border-bottom: 2px solid rgba(245, 158, 11, 0.42);
}

.liguilla-third-body .bracket-col-title span {
  color: #334155;
}

.liguilla-third-body .bracket-col-title small {
  color: #64748b;
}

.liguilla-third-panel .third-place-card {
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

.liguilla-third-panel .third-place-scoreboard {
  display: none;
}

.liguilla-third-panel .third-place-matches {
  display: grid;
  gap: 0;
}

.liguilla-third-panel .third-place-match {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 12px 10px;
  background: #ffffff;
}

.liguilla-third-panel .third-place-match + .third-place-match {
  border-top: 1px solid rgba(226, 232, 240, 0.96);
}

.liguilla-third-panel .third-place-match-top {
  margin-bottom: 10px;
}

.liguilla-third-panel .third-place-match-top span {
  background: rgba(241, 245, 249, 0.98);
  border: 1px solid rgba(226, 232, 240, 0.96);
  color: #475569;
}

.liguilla-third-panel .third-place-match-teams--logos {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 900;
}

.liguilla-third-panel .third-place-match-teams--logos > span:nth-child(2) {
  color: #94a3b8;
  font-weight: 900;
}

.liguilla-third-panel .third-place-team-name {
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liguilla-third-panel .third-place-match-date {
  margin-top: 10px;
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 750;
}

.liguilla-third-panel .third-place-global,
.liguilla-third-panel .third-place-penalties {
  margin: 10px 12px 12px;
}

.liguilla-bracket-wrap.bracket-expandido .liguilla-bracket-shell .bracket {
  grid-auto-columns: minmax(320px, 340px);
  gap: 24px;
}

.liguilla-bracket-wrap.bracket-expandido .liguilla-bracket-shell .bracket-col {
  min-width: 320px;
}

.liguilla-bracket-wrap.bracket-expandido .liguilla-bracket-shell .bracket-grid {
  grid-template-rows: repeat(var(--rows, 8), 96px);
}

@media (max-width: 900px) {
  .liguilla-bracket-shell.has-third-place {
    grid-template-columns: minmax(max-content, 1fr) minmax(240px, 250px);
  }

  .liguilla-bracket-shell .bracket {
    grid-auto-columns: minmax(270px, 270px);
  }

  .liguilla-bracket-shell .bracket-col {
    min-width: 270px;
  }
}

@media (max-width: 720px) {
  .liguilla-bracket-shell.has-third-place {
    grid-template-columns: minmax(max-content, 1fr) minmax(230px, 240px);
  }

  .liguilla-bracket-shell .bracket {
    grid-auto-columns: minmax(250px, 250px);
    gap: 14px;
  }

  .liguilla-bracket-shell .bracket-col {
    min-width: 250px;
  }

  .liguilla-bracket-shell .bracket-grid {
    grid-template-rows: repeat(var(--rows, 8), 82px);
  }

  .liguilla-bracket-shell .bracket-match--minimal {
    min-height: 148px;
  }
}

/* Ajuste público: 3er lugar dentro de la columna Final */
.liguilla-bracket-shell .bracket-col--with-third .bracket-grid {
  align-items: stretch;
}

.bracket-third-inline {
  position: relative;
  z-index: 2;
  min-height: 158px;
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.72), #ffffff);
  box-shadow: 0 10px 22px rgba(245, 158, 11, 0.08);
  overflow: hidden;
}

.bracket-third-inline-title {
  display: grid;
  place-items: center;
  gap: 2px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.26);
  text-align: center;
}

.bracket-third-inline-title span {
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.bracket-third-inline-title small {
  color: #b45309;
  font-size: 0.58rem;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bracket-third-inline .third-place-list {
  gap: 8px;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.bracket-third-inline .third-place-card {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.bracket-third-inline .third-place-scoreboard {
  display: none;
}

.bracket-third-inline .third-place-matches {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.bracket-third-inline .third-place-match {
  padding: 8px 9px;
  border-radius: 10px;
  border-color: rgba(226, 232, 240, 0.96);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.bracket-third-inline .third-place-match-top {
  margin-bottom: 7px;
}

.bracket-third-inline .third-place-match-top span {
  padding: 3px 8px;
  font-size: 0.62rem;
}

.bracket-third-inline .third-place-match-top strong {
  font-size: 0.86rem;
}

.bracket-third-inline .third-place-match-teams--logos {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 6px;
  font-size: 0.74rem;
}

.bracket-third-inline .third-place-match-teams--logos > span:nth-child(2) {
  color: #94a3b8;
  font-weight: 900;
}

.bracket-third-inline .third-place-team-name {
  max-width: 98px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bracket-third-inline .third-place-match-date {
  margin-top: 7px;
  font-size: 0.66rem;
  color: #64748b;
}

.bracket-third-inline .third-place-global,
.bracket-third-inline .third-place-penalties {
  margin: 0;
  padding: 7px 9px;
  font-size: 0.72rem;
}

/* Ajuste público: 3er lugar con color bronce/naranja opaco */
.bracket-third-inline {
  border-color: rgba(180, 83, 9, 0.42);
  background: linear-gradient(180deg, rgba(255, 237, 213, 0.86), rgba(255, 251, 235, 0.96));
  box-shadow: 0 12px 24px rgba(154, 52, 18, 0.10);
}

.bracket-third-inline-title {
  border-bottom-color: rgba(180, 83, 9, 0.30);
}

.bracket-third-inline-title span {
  color: #9a3412;
}

.bracket-third-inline-title small {
  color: #b45309;
}

.bracket-third-inline .third-place-match {
  border-color: rgba(194, 65, 12, 0.28);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.94), rgba(255, 255, 255, 0.98));
}

.bracket-third-inline .third-place-match-top span {
  background: rgba(234, 88, 12, 0.13);
  color: #9a3412;
}

.bracket-third-inline .third-place-match-top strong {
  color: #7c2d12;
}

.bracket-third-inline .third-place-match-date {
  color: #92400e;
}

.bracket-third-inline .third-place-global,
.bracket-third-inline .third-place-penalties {
  background: rgba(234, 88, 12, 0.12);
  color: #7c2d12;
}


/* Ajuste público: 3er lugar más bronce y sin badge en partido único */
.bracket-third-inline {
  border-color: rgba(146, 64, 14, 0.50);
  background: linear-gradient(180deg, rgba(254, 215, 170, 0.72), rgba(255, 247, 237, 0.98));
  box-shadow: 0 12px 24px rgba(124, 45, 18, 0.13);
}

.bracket-third-inline-title {
  border-bottom-color: rgba(146, 64, 14, 0.36);
}

.bracket-third-inline-title span {
  color: #7c2d12;
}

.bracket-third-inline-title small {
  color: #9a3412;
}

.bracket-third-inline .third-place-match {
  border-color: rgba(154, 52, 18, 0.34);
  background: linear-gradient(180deg, rgba(255, 237, 213, 0.90), rgba(255, 247, 237, 0.98));
}

.bracket-third-inline .third-place-match-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bracket-third-inline .third-place-match-top--single {
  justify-content: flex-end;
}

.bracket-third-inline .third-place-match-top span {
  background: rgba(154, 52, 18, 0.16);
  color: #7c2d12;
  border: 1px solid rgba(154, 52, 18, 0.18);
}

.bracket-third-inline .third-place-match-top strong {
  color: #7c2d12;
}

.bracket-third-inline .third-place-match-date {
  color: #7c2d12;
}

/* Ajuste público: en 3er lugar se ocultan logos para priorizar nombres */
.third-place-match-teams--names {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
}

.third-place-match-teams--names .third-place-team-name {
  display: block;
  min-width: 0;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.bracket-third-inline .third-place-match-teams--names,
.liguilla-third-panel .third-place-match-teams--names {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 950;
}

.bracket-third-inline .third-place-match-teams--names > span:nth-child(2),
.liguilla-third-panel .third-place-match-teams--names > span:nth-child(2) {
  color: #94a3b8;
  font-weight: 900;
}

.bracket-third-inline .third-place-match-teams--names .third-place-team-name,
.liguilla-third-panel .third-place-match-teams--names .third-place-team-name {
  max-width: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Ajuste público: tarjetas de bracket sin horario ni botón Detalle visible. La tarjeta completa abre el detalle. */
.liguilla-bracket-shell .bracket-meta--compact {
  min-height: 0;
  margin-top: 2px;
}

.liguilla-bracket-shell .bracket-meta--compact .bf-meta-pen {
  margin-left: 0;
  font-size: 0.68rem;
}

.liguilla-bracket-shell .bracket-team-logo .team-logo-slot {
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.10);
}

.bracket-third-inline .third-place-match {
  gap: 6px;
}

/* Ajuste público: 3er lugar sin banner de pendiente, con local/visitante en filas y marcador a la derecha */
.bracket-third-inline .third-place-match,
.liguilla-third-panel .third-place-match {
  display: grid;
  gap: 8px;
  padding: 10px 11px;
}

.bracket-third-inline .third-place-match-top,
.liguilla-third-panel .third-place-match-top {
  margin: 0 0 2px;
  justify-content: flex-start;
}

.bracket-third-inline .third-place-match-top strong,
.liguilla-third-panel .third-place-match-top strong {
  display: none;
}

.third-place-match-lines {
  display: grid;
  gap: 8px;
  width: 100%;
}

.third-place-match-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
}

.third-place-line-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f2937;
  font-size: 0.88rem;
  font-weight: 1000;
  letter-spacing: -0.02em;
}

.third-place-line-score {
  color: #475569;
  font-size: 0.9rem;
  font-weight: 1000;
  line-height: 1;
}

.third-place-match-line.is-winner {
  border-color: #86efac;
  background: linear-gradient(180deg, #ecfdf5 0%, #f0fdf4 100%);
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.10);
}

.third-place-match-line.is-winner .third-place-line-name,
.third-place-match-line.is-winner .third-place-line-score {
  color: #15803d;
}

.third-place-line-divider {
  height: 1px;
  background: rgba(154, 52, 18, 0.18);
}

.bracket-third-inline .third-place-match.is-pending .third-place-line-score,
.liguilla-third-panel .third-place-match.is-pending .third-place-line-score {
  color: #64748b;
}

@media (max-width: 480px) {
  .third-place-line-name {
    font-size: 0.84rem;
  }

  .third-place-line-score {
    font-size: 0.86rem;
  }
}


/* Modal de serie ida/vuelta en liguilla pública */
.match-series-open {
  overflow: hidden;
}

.match-series-modal {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.match-series-modal.show {
  display: flex;
}

.match-series-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(4px);
}

.match-series-dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 720px);
  max-height: min(88vh, 760px);
  overflow: hidden;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

.match-series-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 1.3rem;
  font-weight: 950;
  cursor: pointer;
}

.match-series-close:hover {
  background: #e2e8f0;
}

.match-series-body {
  max-height: min(88vh, 760px);
  overflow-y: auto;
  padding: 26px;
}

.match-series-header {
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(145deg, #eff6ff 0%, #ffffff 52%, #f8fafc 100%);
  border: 1px solid #dbeafe;
}

.match-series-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.match-series-header h3 {
  margin: 14px 0 12px;
  color: #020617;
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.match-series-header h3 span {
  color: #64748b;
  font-size: 0.55em;
  letter-spacing: 0;
  text-transform: uppercase;
}

.match-series-global {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 16px;
  background: #0f172a;
  color: #ffffff;
}

.match-series-global span {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.match-series-global strong {
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.match-series-global small {
  color: #fde68a;
  font-size: 12px;
  font-weight: 900;
}

.match-series-header p {
  margin: 12px 0 0;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

.match-series-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.match-series-partido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.match-series-partido.is-finished {
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
}

.match-series-partido.is-pending {
  border-color: #fde68a;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.match-series-partido.is-disabled {
  opacity: 0.72;
  background: #f8fafc;
}

.match-series-partido-main {
  min-width: 0;
}

.match-series-mano {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.match-series-teams-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
}

.match-series-teams-line strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-series-teams-line span {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.match-series-meta-line {
  margin-top: 7px;
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.match-series-partido-side {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.match-series-score {
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.match-series-score.is-pending {
  color: #9a3412;
}

.match-series-action {
  min-height: 32px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
}

.match-series-action:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

body.modal-stack-open .match-series-modal.show {
  z-index: 2300;
}

@media (max-width: 640px) {
  .match-series-modal {
    align-items: flex-end;
    padding: 0;
  }

  .match-series-dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 24px 24px 0 0;
  }

  .match-series-body {
    padding: 20px 14px;
  }

  .match-series-partido {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .match-series-partido-side {
    justify-items: stretch;
  }

  .match-series-action {
    width: 100%;
  }
}