/* Marcadores de clasificación argentina */
.table-block .swatch{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:middle;border:1px solid rgba(0,0,0,.1)}
.table-block .mark-champion,.legend .mark-champion{background:#ffe680}
.table-block .mark-lib,.legend .mark-lib{background:#ffec99}
.table-block .mark-suda,.legend .mark-suda{background:#cfe8ff}
.table-block .mark-desc,.legend .mark-desc{background:#ffc9c9}

.league-table tr.mark-champion{background:#fff6cc !important}
.league-table tr.mark-lib{background:#fff2a8 !important}
.league-table tr.mark-suda{background:#d6ecff !important}
.league-table tr.mark-desc{background:#ffe3e3 !important}
/* Asegurar que el color afecte las celdas (override a zebra rows) */
.league-table tr.mark-champion td{background:#fff6cc !important}
.league-table tr.mark-lib td{background:#fff2a8 !important}
.league-table tr.mark-lib-qualy td{background:#ffe08a !important}
.league-table tr.mark-suda td{background:#d6ecff !important}
.league-table tr.mark-desc td{background:#ffe3e3 !important}
/* Aplicar los mismos colores a tablas de grupos (Copa de la Liga) */
.group-table tr.mark-suda{background:#d6ecff !important}
.group-table tr.mark-suda td{background:#d6ecff !important}
/* Top qualifiers (verde) en tablas de grupos */
.group-table tr.mark-lib{background:#d6ffdb !important}
.group-table tr.mark-lib td{background:#d6ffdb !important}
/* Mejores terceros (amarillo) en tablas de grupos — Copa América 2019 */
.group-table tr.mark-lib-qualy{background:#ffe08a !important}
.group-table tr.mark-lib-qualy td{background:#ffe08a !important}
/* Campeón (dorado) en Fase Final tipo pool — Copa América 1991 */
.group-table tr.mark-champion{background:#ffce54 !important}
.group-table tr.mark-champion td{background:#ffce54 !important}

/* Aplicar colores a tablas de datos (Liga 2016) */
.data-table tr.mark-champion{background:#fff6cc !important}
.data-table tr.mark-lib{background:#fff2a8 !important}
.data-table tr.mark-lib-qualy{background:#ffe08a !important}
.data-table tr.mark-suda{background:#d6ecff !important}
.data-table tr.mark-desc{background:#ffe3e3 !important}
/* Asegurar que el color afecte las celdas */
.data-table tr.mark-champion td{background:#fff6cc !important}
.data-table tr.mark-lib td{background:#fff2a8 !important}
.data-table tr.mark-lib-qualy td{background:#ffe08a !important}
.data-table tr.mark-suda td{background:#d6ecff !important}
.data-table tr.mark-desc td{background:#ffe3e3 !important}
/* Playoff/Desempate (naranja) */
.league-table tr.mark-playoff{background:#ffd39c !important}
.league-table tr.mark-playoff td{background:#ffc477 !important}

/* Promoción (naranja) */
.league-table tr.mark-promotion{background:#ffb366 !important}
.league-table tr.mark-promotion td{background:#ffb366 !important}
.data-table tr.mark-promotion{background:#ffb366 !important}
.data-table tr.mark-promotion td{background:#ffb366 !important}

/* Descenso (rojo) */
.league-table tr.mark-relegation{background:#ff6b6b !important}
.league-table tr.mark-relegation td{background:#ff6b6b !important}
.data-table tr.mark-relegation{background:#ff6b6b !important}
.data-table tr.mark-relegation td{background:#ff6b6b !important}

/* Legend swatches */
.legend .swatch{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:middle;border:1px solid rgba(0,0,0,.2)}
/* Libertadores playoff (tono más oscuro) */
.league-table tr.mark-lib-qualy{background:#ffe08a !important}

/* Separación extra para bloques de tablas (ligas argentinas) */
.table-block{margin-top:16px;margin-bottom:8px;position:relative}
.tables-two-cols + .table-block{margin-top:20px}
.dual-head-1970{display:grid;grid-template-columns:1fr 1fr;gap:0;border-bottom:1px solid #cccccc}
.dual-head-1970 span{display:block;background:#0000ff;color:#fff;font-weight:700;font-size:14px;padding:8px 12px;text-align:center}
.dual-head-1970 span:first-child{border-right:1px solid #0c2be0}
.ko-1970 .subhdr{font-weight:700;font-size:12px;color:#111;margin:0 0 8px 2px}
.ko-1970 .stack .box{margin:0 auto}
.ko-1970 .col.final .stack .box{margin-top:4px}
/* Inline crest next to team name in tables */
.team-crest-inline{
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 6px;
}
/* Align champion/runner-up cells to left */
#editions-table td:nth-child(2),
#editions-table td:nth-child(3),
#winners-table td:first-child{
  text-align: left;
}
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #1a4d1a;
    color: #ffffff;
    line-height: 1.4;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    /* Sitio 10% más grande de forma global (equivalente a zoom de navegador 110%).
       Se usa `zoom` en lugar de `transform: scale` para que el layout reflowe
       correctamente sin overflow ni espacios en blanco. */
    zoom: 1.1;
}

.container {
    max-width: 1200px;
    margin: 10px auto;
    background-color: #1a4d1a;
    min-height: calc(100vh - 20px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border: 2px solid #0d4d0d;
}

/* Header Styles */
.header {
    background-color: #0c380c;
    border-bottom: 1px solid #2d5a2d;
    padding: 0;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    color: #ffffff;
}

.header-brand h1 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

.header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.network-sites select {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 2px 5px;
    font-size: 11px;
    color: #000000;
}

.header-nav {
    font-size: 12px;
    display: flex;
    gap: 20px;
}

.header-nav a {
    color: #ffffff;
    text-decoration: none;
    padding: 8px 12px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.header-nav a:hover {
    background-color: #2d5a2d;
}

.header-date {
    font-size: 11px;
    color: #ffffff;
}

/* Main Content Layout */
.main-content {
    display: flex;
    flex: 1;
}

/* Sidebar Styles */
.sidebar {
    width: 200px;
    background-color: #1a4d1a;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3), 4px 0 12px rgba(0, 0, 0, 0.2);
    padding: 0;
    position: relative;
    z-index: 1000;
}

.right-sidebar {
    border-right: none;
    border-left: 1px solid #cccccc;
}

.sidebar-section {
    margin-bottom: 25px;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 15px;
}

.sidebar-section h3 {
    background-color: #000000;
    color: #5aff48;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 12px;
    margin: 0;
    border: none;
    text-align: left;
}

.sidebar-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-section li {
    margin: 0;
    border-bottom: 1px solid #2d5a2d;
}

.sidebar-section li:last-child {
    border-bottom: none;
}

.sidebar-section a {
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    display: block;
    padding: 10px 12px;
    background-color: transparent;
    transition: background-color 0.2s;
}

.sidebar-section a:hover {
    background-color: #2d5a2d;
}

.sidebar-section a.sub-item {
    padding-left: 20px;
    font-size: 11px;
    color: #cccccc;
}


/* Separadores entre secciones */
.sidebar-section {
    margin-bottom: 0;
    border-bottom: 1px solid #2d5a2d;
}

.sidebar-section:last-child {
    border-bottom: none;
}

/* Central Content */
.central-content {
    flex: 1;
    padding: 15px;
    background-color: #1a4d1a;
}

.central-content h1 {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 8px;
    text-align: center;
}

.description {
    font-size: 12px;
    color: #ffffff;
    margin-bottom: 10px;
    text-align: center;
}

.central-content p {
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.5;
}

/* Competition Selector */
.competition-selector {
    margin: 10px 0;
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.competition-selector h2 {
    background-color: #f0f0f0;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 8px;
    margin-bottom: 10px;
    border: 1px solid #cccccc;
    text-align: center;
    border-radius: 4px;
}

.match-teams {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
}

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

.match-team-crest {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.match-team-name {
    font-size: 13px;
    color: #ffffff;
    font-weight: 500;
}

.match-score {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    min-width: 60px;
    text-align: center;
}

.match-venue {
    font-size: 11px;
    color: #cccccc;
    text-align: center;
    margin-top: 5px;
}

.no-matches {
    text-align: center;
    padding: 40px;
    color: #cccccc;
    font-size: 14px;
}


.competition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.competition-card {
    border: 1px solid #ffffff;
    background-color: #1a4d1a;
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.competition-card:hover {
    background-color: #2d5a2d;
}

.competition-card h3 {
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 3px;
}

.competition-card p {
    font-size: 10px;
    color: #ffffff;
    margin-bottom: 4px;
}

.competition-card .years {
    font-size: 9px;
    color: #ffffff;
    font-weight: bold;
}

/* Dynamic Content Styles */
#dynamic-content {
    margin-top: 15px;
}

.content-section {
    margin-bottom: 10px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    padding: 8px;
    border-radius: 4px;
}

.content-section h3 {
    background-color: transparent;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    margin: 0 0 5px 0;
    border-bottom: none;
}

.content-section .content-body {
    padding: 5px;
}

/* Season List */
.season-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.season-item {
    background-color: #f0f0f0;
    border: 1px solid #cccccc;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    color: #0000ff;
    text-decoration: none;
}

.season-item:hover {
    background-color: #e0e0e0;
    text-decoration: underline;
}

.season-item.active {
    background-color: #0000ff;
    color: #ffffff;
}

/* Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 0;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.data-table th {
    background-color: #f0f0f0;
    color: #000000;
    font-weight: bold;
    padding: 6px 8px;
    border: 1px solid #cccccc;
    text-align: left;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
}

.data-table td {
    padding: 6px 8px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    color: #000000;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
}

/* Quitar la línea gris inferior del último registro para que el espacio se vea limpio */
.league-table tbody tr:last-child td { border-bottom: 1px solid #cccccc; }

.data-table tr:nth-child(even) td {
    background-color: #f8f8f8;
}

.data-table tr:hover td {
    background-color: transparent;
}

/* Asegurar que el texto en las tablas sea negro */
.data-table td,
.data-table th,
.group-table td,
.group-table th,
.bracket-table td,
.bracket-table th,
.phase-table td,
.phase-table th,
.league-table td,
.league-table th {
    color: #000000 !important;
}

/* Centrar solo años en tabla de ediciones (primera columna) */
.data-table td:nth-child(1) {
    text-align: center !important;
}

.data-table th:nth-child(1) {
    text-align: center !important;
}

/* Centrar números en tablas de ligas - SOLO puntos y estadísticas */
.league-table td:nth-child(3),
.league-table td:nth-child(4),
.league-table td:nth-child(5),
.league-table td:nth-child(6),
.league-table td:nth-child(7),
.league-table td:nth-child(8),
.league-table td:nth-child(9),
.league-table td:nth-child(10),
.league-table td:nth-child(11),
.league-table th:nth-child(3),
.league-table th:nth-child(4),
.league-table th:nth-child(5),
.league-table th:nth-child(6),
.league-table th:nth-child(7),
.league-table th:nth-child(8),
.league-table th:nth-child(9),
.league-table th:nth-child(10),
.league-table th:nth-child(11) {
    text-align: center !important;
}

/* Centrar números en tablas de estadísticas (Máximos Ganadores) */
.data-table td:nth-child(2),
.data-table td:nth-child(3),
.data-table th:nth-child(2),
.data-table th:nth-child(3) {
    text-align: center !important;
}

/* Asegurar que nombres de equipos en tablas de ediciones estén alineados a la izquierda */
.data-table td:nth-child(2) img,
.data-table td:nth-child(3) img {
    float: left;
    margin-right: 5px;
}

/* Solo para tablas de ediciones, alinear nombres a la izquierda */
.data-table td:nth-child(2),
.data-table td:nth-child(3) {
    text-align: left !important;
}

/* Excepción para tablas de ligas - centrar SOLO puntos */
.league-table td:nth-child(3) {
    text-align: center !important;
}

/* Asegurar que nombres de equipos en ligas estén alineados a la izquierda */
.league-table td:nth-child(2) {
    text-align: left !important;
}

/* Clase específica para tablas de estadísticas (Máximos Ganadores) */
.stats-table td:nth-child(2),
.stats-table td:nth-child(3),
.stats-table th:nth-child(2),
.stats-table th:nth-child(3) {
    text-align: center !important;
}

/* Asegurar que nombres de equipos en Máximos Ganadores estén alineados a la izquierda */
.stats-table td:nth-child(1) {
    text-align: left !important;
}

/* Estilos específicos para fases de grupos */
.group-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

.group-table th {
    background-color: #f0f0f0;
    color: #000000;
    padding: 6px 8px;
    border: 1px solid #cccccc;
    font-size: 12px;
}

.group-table td {
    padding: 6px 8px;
    border: 1px solid #cccccc;
    color: #000000;
    font-size: 12px;
}

.group-table tr:nth-child(even) td {
    background-color: #f8f8f8;
}

.group-table tr:hover td {
    background-color: transparent;
}

/* Estilos para brackets */
.bracket-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: none;
}

.bracket-table th {
    background-color: #f0f0f0;
    color: #000000;
    padding: 6px 8px;
    border: 1px solid #cccccc;
    font-size: 12px;
}

.bracket-table td {
    color: #000000;
    font-size: 12px;
}

/* Evitar sombras/zebra en celdas del bracket (dejamos fondo plano) */
.bracket-table tr:nth-child(even) td { background-color: transparent; }
.bracket-table td { background-color: transparent; }

.bracket-table tr:hover td {
    background-color: transparent;
}

/* Estilos para nombres de equipos en tablas */
.team-name {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #2C3E50;
}

.data-table .team-name,
.league-table .team-name,
.bracket-table .team-name,
.group-table .team-name,
.elimination-matches .team-name {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #2C3E50;
}

/* Groups Grid Layout */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.groups-row {
    display: contents;
}

/* Group Tables */
.group-container {
    margin-bottom: 0;
    padding: 8px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
}

/* Evitar borde superior visual entre bloques de tablas consecutivas */
.table-block + .table-block .data-table {
  border-top: 0;
}
.table-block + .table-block .data-table th,
.table-block + .table-block .data-table td {
  border-top: 0;
}

/* Overpaint vertical borders from table above so they don't "connect" visually */
/* Eliminar franja blanca superior que sobresale sobre el fondo */
.table-block::before{display:none}

.group-title {
    background-color: #0000ff;
    color: #ffffff;
    font-weight: bold;
    padding: 8px 12px;
    font-size: 14px;
    text-align: center;
}

.group-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.group-table th {
    background-color: #e0e0e0;
    color: #000000;
    font-weight: bold;
    padding: 6px 4px;
    border: 1px solid #cccccc;
    text-align: center;
    min-width: 30px;
}

.group-table th:nth-child(2) {
    min-width: 120px;
    text-align: left;
}

.group-table td {
    padding: 4px 4px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    text-align: center;
    min-width: 30px;
}

.group-table .team-name {
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
}

/* Match Results */
.match-results {
    margin-top: 20px;
}

.match-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #cccccc;
    font-size: 12px;
}

.match-row:hover {
    background-color: #f8f8f8;
}

.match-teams {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.match-score {
    font-weight: bold;
    margin: 0 15px;
    color: #0000ff;
    font-size: 14px;
}

.match-date {
    color: #666666;
    font-size: 11px;
    margin-left: 15px;
}

.team-name {
    font-weight: bold;
    color: #000000;
}

/* Knockout Stages */
.match-date-group {
    margin-bottom: 15px;
}

.match-date-group h5 {
    background-color: #e0e0e0 !important;
    color: #000000 !important;
    font-weight: bold;
    border: 1px solid #cccccc;
    margin: 0 0 5px 0 !important;
}

/* Knockout Round Headers */
.content-section h3 {
    background-color: #222222;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 12px;
    margin: 0;
    border-bottom: 1px solid #cccccc;
}

/* Better spacing for knockout rounds */
.content-section {
    margin-bottom: 20px;
    border: none;
    background-color: transparent;
}

/* En competiciones, evitamos que los bordes verticales del contenedor unan visualmente bloques internos */
#competition-details.content-section{ border-left: 0; border-right: 0; background:#fff; }
/* neutraliza bordes de las celdas de la fila inmediatamente anterior al título siguiente */
.tables-two-cols{ 
    border-bottom: 0; 
    display: flex;
    gap: 20px;
}
.tables-two-cols .table-block {
    flex: 1;
}
.tables-two-cols .table-block h3 {
    margin-bottom: 0;
    padding-bottom: 0;
}
.tables-two-cols .table-block .league-table {
    margin-top: 0;
    padding-top: 0;
}
.tables-two-cols .table-block h3 + .league-table {
    margin-top: 0;
}
.tables-two-cols .table-block h3 {
    margin-bottom: 0;
}

.content-section .content-body {
    padding: 5px;
}

/* Group Matches */
.group-matches {
    margin-top: 15px;
    padding: 10px;
    background-color: #f8f8f8;
    border: 1px solid #cccccc;
}

.group-matches h5 {
    background-color: #e0e0e0;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 8px;
    margin: 0 0 10px 0;
    border: 1px solid #cccccc;
}

/* === Matchday slider (.md-block) ============================================
   Tarjeta compacta debajo de la tabla del grupo: barra superior con flechas
   a los lados y "Fecha N · 11 abr 1972" en el medio; abajo, una grilla de
   3 columnas (home / score / away) por partido con crests/banderas.
   Las clases viejas .md-controls, .compact-match, etc. se mantienen para
   otros usos (mundial 1950 final group, group playoff). ============= */
.md-block {
    margin: 8px 12px 12px;
    background: #ffffff;
    border: 1px solid #e1e4ea;
    border-radius: 6px;
    overflow: hidden;
}
.md-bar {
    display: flex;
    align-items: stretch;
    background: #f3f6ff;
    border-bottom: 1px solid #e1e4ea;
}
.md-bar-spacer { flex: 1; }
.md-prev,
.md-next {
    background: transparent;
    border: 0;
    padding: 4px 14px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #0a39ff;
    font-weight: 700;
    transition: background-color 0.15s ease;
}
.md-prev:hover,
.md-next:hover { background: #e3e9ff; }
.md-prev:active,
.md-next:active { background: #c8d3ff; }
.md-matches {
    background: #ffffff;
}
.md-match {
    display: grid;
    /* [crest izq] [nombre home flex] [score] [nombre away flex] [crest der]
       Crests pegados al borde, nombres flex con texto cerca del score. */
    grid-template-columns: 22px 1fr 70px 1fr 22px;
    align-items: center;
    padding: 7px 10px;
    gap: 8px;
    font-size: 12px;
    color: #111827;
}
.md-match + .md-match { border-top: 1px solid #f1f3f7; }
.md-icon-cell {
    display: flex;
    align-items: center;
}
.md-icon-home { justify-content: flex-start; }
.md-icon-away { justify-content: flex-end; }
.md-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.md-flag { width: 22px; height: 14px; }
.md-team-name {
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.md-name-home { text-align: left; }
.md-name-away { text-align: right; }
.md-score {
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #0a39ff;
    white-space: nowrap;
}

/* Compact Matches */
.compact-matches {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    background-color: #f8f8f8;
}

.compact-date-group {
    margin-bottom: 8px;
}

.compact-date {
    background-color: #e0e0e0;
    color: #000000;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 6px;
    margin-bottom: 4px;
    text-align: center;
}

.compact-match {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 8px;
    font-size: 10px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #ffffff;
}

.compact-match:hover {
    background-color: #f0f0f0;
}

.compact-team {
    flex: 1;
    font-weight: bold;
    color: #000000;
}

.compact-score {
    font-weight: bold;
    color: #0000ff;
    margin: 0 8px;
    font-size: 11px;
}

/* Responsive groups */
@media (max-width: 768px) {
    .groups-row {
        grid-template-columns: 1fr;
    }
    
    .compact-matches {
        max-height: 150px;
    }
}

/* Bracket Styles */
.bracket-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bracket-date-group {
    margin-bottom: 20px;
}

.bracket-date {
    background-color: #0000ff;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    margin: 0 0 10px 0;
    text-align: center;
}

.bracket-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    margin-bottom: 8px;
    padding: 8px 12px;
    font-size: 12px;
}

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

.bracket-team.home-team {
    justify-content: flex-start;
}

.bracket-team.away-team {
    justify-content: flex-end;
}

.team-flag {
    font-size: 14px;
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
}

.team-name {
    font-weight: bold;
    color: #000000;
}

.team-score {
    font-weight: bold;
    color: #0000ff;
    font-size: 14px;
    min-width: 20px;
    text-align: center;
}

.bracket-vs {
    color: #666666;
    font-size: 10px;
    font-weight: bold;
    margin: 0 10px;
}

/* Responsive bracket */
@media (max-width: 768px) {
    .bracket-match {
        flex-direction: column;
        gap: 5px;
    }
    
    .bracket-team {
        justify-content: center !important;
    }
    
    .bracket-vs {
        display: none;
    }
}

/* Search */
#search-input {
    width: 100%;
    padding: 5px;
    border: 1px solid #cccccc;
    font-size: 12px;
    margin-bottom: 10px;
    background-color: #ffffff;
}

.search-input {
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

button {
    background-color: #1a4d1a;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
}

button:hover {
    background-color: #0d4d0d;
}


/* Responsive Design */
@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #cccccc;
    }
    
    .competition-grid {
        grid-template-columns: 1fr;
    }
    
    .header-top {
        flex-direction: column;
        gap: 10px;
    }

}

/* Loading States */
.loading {
    text-align: center;
    padding: 20px;
    color: #666666;
    font-style: italic;
}

/* Error States */
.error {
    background-color: #ffcccc;
    border: 1px solid #ff0000;
    color: #cc0000;
    padding: 10px;
    margin: 10px 0;
    font-size: 12px;
}

/* Success States */
.success {
    background-color: #ccffcc;
    border: 1px solid #00cc00;
    color: #006600;
    padding: 10px;
    margin: 10px 0;
    font-size: 12px;
}

/* ===== TOURNAMENT BRACKET STYLES ===== */
#tournament-bracket {
    margin-top: 30px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
    overflow: hidden;
}

#tournament-bracket h3 {
    background-color: #0000ff;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 12px;
    margin: 0;
    border-bottom: 1px solid #cccccc;
    text-align: center;
}

#bracket-container {
    padding: 20px;
    overflow-x: auto;
    background: #f7f7fb;
}

/* ===== LIBERTADORES HISTORY STYLES ===== */
.libertadores-container {
    display: flex;
    gap: 15px;
    margin: 15px 0;
}

.history-section, .ranking-section {
    flex: 1;
    background: #f7f7fb;
    border: 1px solid #e7e7ef;
    border-radius: 6px;
    padding: 15px;
}

.history-section h3, .ranking-section h3 {
    color: #333;
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-table, .ranking-table {
    width: 100%;
    border-collapse: collapse;
    color: #333;
    font-size: 12px;
}

.history-table th, .ranking-table th {
    background: #f3f6ff;
    color: #333;
    padding: 8px 10px;
    text-align: left;
    font-weight: bold;
    border-bottom: 1px solid #e7e7ef;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.history-table td, .ranking-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #e7e7ef;
    font-size: 12px;
}

.history-table tr:nth-child(even), .ranking-table tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.history-table a {
    color: #0066cc;
    text-decoration: none;
    font-weight: 500;
}

.history-table a:hover {
    color: #004499;
    text-decoration: underline;
}

/* ===== BRACKET TABLE STYLES (Wikipedia Style) ===== */
.bracket-table {
    border-collapse: collapse;
    min-width: 800px;
    width: max-content;
    font-size: 12px;
    line-height: 1.2;
    margin: 0 auto;
    border: none;
}

/* Wrapper para brackets con scroll */
.bracket-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin: 0 auto;
}

.bracket-table thead th {
    position: sticky;
    top: 0;
    background: #f3f6ff;
    padding: 0.4rem 0.6rem;
    border: 1px solid #e7e7ef;
    text-align: center;
    font-weight: 700;
}

.bracket-table thead th.head {
    background: #0a39ff;
    color: #fff;
    border-color: #0c2be0;
}

/* Filas con altura fija para centrado perfecto */
.bracket-table tbody tr {
    height: 32px;
}

/* Celdas contenedoras de cruces */
.bracket-table td.tie {
    padding: 0;
    border: none;
    background: transparent;
    vertical-align: middle;
}

/* Cajita del cruce */
.bracket-box {
    display: inline-block;
    border: 1px solid #e7e7ef;
    background: #fff;
    padding: 0.2rem 0.4rem;
    min-width: 200px;
}

.bracket-hdr {
    display: grid;
    grid-template-columns: auto 24px 24px 32px;
    gap: 0.2rem;
    font-size: 10px;
    opacity: 0.7;
    margin-bottom: 0.1rem;
}

.bracket-row {
    display: grid;
    grid-template-columns: auto 24px 24px 32px;
    gap: 0.2rem;
    margin: 1px 0;
}

.bracket-name {
    font-weight: 600;
}

.bracket-agg {
    font-variant-numeric: tabular-nums;
}

/* Conectores */
.bracket-table td.c {
    width: 16px;
    min-width: 16px;
    padding: 0;
    border: none;
}

.bracket-table .r { border-right: 2px solid #666; }
.bracket-table .l { border-left: 2px solid #666; }
.bracket-table .t { border-top: 2px solid #666; }
.bracket-table .b { border-bottom: 2px solid #666; }
.bracket-table .rt { border-right: 2px solid #666; border-top: 2px solid #666; }
.bracket-table .rb { border-right: 2px solid #666; border-bottom: 2px solid #666; }
.bracket-table .lt { border-left: 2px solid #666; border-top: 2px solid #666; }
.bracket-table .lb { border-left: 2px solid #666; border-bottom: 2px solid #666; }

/* ===== RESPONSIVE BRACKETS - COMPLETE ===== */

/* Contenedor de brackets con scroll horizontal en móviles */
.bracket-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Móviles pequeños (320px - 480px) */
@media (max-width: 480px) {
    .bracket-wrap {
        padding: 8px;
        overflow-x: auto;
    }
    
    table.bracket-table {
        font-size: 10px;
        min-width: 700px; /* Mantener ancho mínimo para estructura */
        width: max-content;
    }
    
    .bracket-table thead th {
        padding: 0.25rem 0.4rem;
        font-size: 10px;
    }
    
    .bracket-table .box {
        min-width: 140px;
        padding: 0.15rem 0.25rem;
    }
    
    .bracket-table .box-with-desempate {
        min-width: 260px;
        padding: 0.2rem 0.3rem;
    }
    
    .bracket-table .hdr {
        grid-template-columns: auto 22px 22px 30px;
        gap: 0.2rem;
        font-size: 9px;
        margin-bottom: 0.1rem;
    }
    
    .bracket-table .row {
        grid-template-columns: auto 22px 22px 30px;
        gap: 0.2rem;
        font-size: 10px;
    }
    
    .bracket-table .box-with-desempate .hdr {
        grid-template-columns: auto 30px 30px 30px 50px !important;
        gap: 0.35rem !important;
        font-size: 8px;
    }
    
    .bracket-table .box-with-desempate .row {
        grid-template-columns: auto 30px 30px 30px 50px !important;
        gap: 0.35rem !important;
        font-size: 9px;
    }
    
    .bracket-table .name {
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100px;
    }
    
    .bracket-table .agg {
        font-size: 10px;
    }
    
    .bracket-table .agg .pens {
        font-size: 8px;
    }
    
    .bracket-table tbody tr {
        height: 28px;
    }
    
    .bracket-table .c {
        width: 12px;
        min-width: 12px;
    }
    
    /* Phase table responsive */
    .phase-table {
        width: 100%;
        min-width: 600px;
        font-size: 10px;
    }
    
    .phase-table thead th,
    .phase-table tbody td {
        padding: 4px 6px;
        font-size: 9px;
    }
}

/* Móviles grandes (480px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .bracket-wrap {
        padding: 10px;
    }
    
    table.bracket-table {
        font-size: 11px;
        min-width: 750px;
    }
    
    .bracket-table thead th {
        padding: 0.3rem 0.5rem;
        font-size: 11px;
    }
    
    .bracket-table .box {
        min-width: 160px;
        padding: 0.18rem 0.35rem;
    }
    
    .bracket-table .box-with-desempate {
        min-width: 290px;
        padding: 0.22rem 0.32rem;
    }
    
    .bracket-table .hdr {
        grid-template-columns: auto 24px 24px 32px;
        gap: 0.22rem;
        font-size: 10px;
    }
    
    .bracket-table .row {
        grid-template-columns: auto 24px 24px 32px;
        gap: 0.22rem;
        font-size: 11px;
    }
    
    .bracket-table .box-with-desempate .hdr {
        grid-template-columns: auto 32px 32px 32px 52px !important;
        gap: 0.4rem !important;
        font-size: 9px;
    }
    
    .bracket-table .box-with-desempate .row {
        grid-template-columns: auto 32px 32px 32px 52px !important;
        gap: 0.4rem !important;
        font-size: 10px;
    }
    
    .bracket-table .name {
        font-size: 11px;
        max-width: 120px;
    }
    
    .bracket-table tbody tr {
        height: 30px;
    }
    
    .bracket-table .c {
        width: 14px;
        min-width: 14px;
    }
    
    /* Phase table */
    .phase-table {
        width: 100%;
        min-width: 650px;
        font-size: 11px;
    }
}

/* Tablets (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .bracket-wrap {
        padding: 12px;
    }
    
    table.bracket-table {
        font-size: 12px;
        min-width: 800px;
    }
    
    .bracket-table .box {
        min-width: 170px;
    }
    
    .bracket-table .box-with-desempate {
        min-width: 300px;
    }
    
    .bracket-table .name {
        max-width: 140px;
    }
    
    /* Phase table */
    .phase-table {
        width: 95%;
        min-width: 700px;
        font-size: 12px;
    }
}

/* Ajustes adicionales para todos los brackets */
@media (max-width: 1024px) {
    /* Asegurar scroll horizontal suave */
    .bracket-wrap {
        scrollbar-width: thin;
        scrollbar-color: #cccccc #f0f0f0;
    }
    
    .bracket-wrap::-webkit-scrollbar {
        height: 8px;
    }
    
    .bracket-wrap::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 4px;
    }
    
    .bracket-wrap::-webkit-scrollbar-thumb {
        background: #cccccc;
        border-radius: 4px;
    }
    
    .bracket-wrap::-webkit-scrollbar-thumb:hover {
        background: #999999;
    }
    
    /* Ajustar knockout section */
    .knockout-section {
        overflow-x: auto;
    }
    
    .ko-round-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    
    .ko-card {
        min-width: 250px;
        flex-shrink: 0;
    }
    
    /* Phase table wrapper */
    .phase-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
}

/* ===== TABLES CONTAINER FOR LIBERTADORES ===== */
.tables-container {
    display: flex;
    gap: 20px;
    width: 100%;
}

.table-half {
    flex: 1;
    width: 50%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-half table {
    width: 100%;
    table-layout: auto;
}

.table-half table th,
.table-half table td {
    padding: 8px 4px;
    word-wrap: break-word;
    white-space: nowrap;
}

.table-half table td.team-name {
    white-space: normal;
    max-width: 200px;
}

/* Center text for CAMPEONATOS and SUBCAMPEONATOS columns */
.table-half table th:nth-child(3),
.table-half table td:nth-child(3),
.table-half table th:nth-child(4),
.table-half table td:nth-child(4) {
    text-align: center;
}

/* Mejorar scroll y área táctil para tabla de ediciones en móvil */
@media (max-width: 768px) {
    .table-half {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    
    .table-half table {
        min-width: 650px;
    }
    
    /* Mejorar área táctil para ediciones */
    #editions-table tbody tr {
        cursor: pointer;
        min-height: 44px; /* Tamaño mínimo táctil recomendado por Apple */
    }
    
    #editions-table tbody td {
        padding: 10px 8px;
        touch-action: manipulation;
    }
    
    /* Scrollbar visible para table-half */
    .table-half::-webkit-scrollbar {
        height: 8px;
    }
    
    .table-half::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 4px;
    }
    
    .table-half::-webkit-scrollbar-thumb {
        background: #888888;
        border-radius: 4px;
    }
    
    .table-half::-webkit-scrollbar-thumb:hover {
        background: #666666;
    }
}

/* ===== SEARCH FUNCTIONALITY ===== */
.search-container {
    margin: 20px 0;
}

.search-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #cccccc;
    font-size: 14px;
    margin-bottom: 15px;
}

#teams-section .search-input {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.search-results {
    margin-top: 15px;
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: #f0f0f0;
}

.team-crest, .personality-photo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 15px;
    border: 2px solid #cccccc;
    background-color: #ffffff;
    padding: 4px;
    border-radius: 4px;
}

.team-info, .personality-info {
    flex: 1;
}

.team-info h4, .personality-info h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}

#teams-section .team-info h4 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.team-info p, .personality-info p {
    margin: 0;
    font-size: 13px;
    color: #666666;
}

#teams-section .team-info p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ===== ALL TEAMS COMPACT LIST ===== */
.all-teams-list {
    margin-top: 20px;
}

.all-teams-compact-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 4px;
    margin-top: 10px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 12px;
    border-radius: 4px;
}

.all-teams-item {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 12px;
    color: #000000;
    cursor: pointer;
    transition: background-color 0.15s;
    border-radius: 3px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.all-teams-item:hover {
    background-color: #f5f5f5;
}

/* Tarjetas de equipo como <a> reales (abrir en pestaña nueva con
   click derecho / rueda / ctrl+click), sin estilo de enlace */
a.all-teams-item,
a.all-teams-item:hover,
a.all-teams-item:visited,
a.search-result-item,
a.search-result-item:hover,
a.search-result-item:visited {
    text-decoration: none;
}

a.search-result-item {
    color: inherit;
}

.all-teams-crest {
    width: 16px;
    height: 16px;
    object-fit: contain;
    margin-right: 6px;
    flex-shrink: 0;
}

.all-teams-name {
    font-weight: 500;
    margin-right: 4px;
    white-space: nowrap;
    color: #000000;
}

.all-teams-country {
    color: #555555;
    font-size: 11px;
    white-space: nowrap;
}

/* ===== EXPAND BUTTON ===== */
.expand-btn {
    background-color: #000000;
    color: #ffffff;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
}

.expand-btn:hover {
    background-color: #0000cc;
}

/* ===== RELEGATED TEAMS ===== */
.relegated {
    background-color: rgba(255, 0, 0, 0.1) !important;
}

/* ===== GROUPS SECTION ===== */
.groups-section {
    margin-bottom: 30px;
}

.groups-section h3 {
    background-color: #0000ff;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 12px;
    margin: 0 0 15px 0;
    border: 1px solid #cccccc;
    text-align: center;
}

/* ===== KNOCKOUT SECTION ===== */
.knockout-section {
    margin-top: 30px;
}

.knockout-section h3 {
    background-color: #0000ff;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 12px;
    margin: 0 0 15px 0;
    border: 1px solid #cccccc;
    text-align: center;
}

/* Renderers de ligas italianas antiguas (1900-1929): se basan en
   `<h3>Title</h3>` con divs sueltos (matches-section, grid de grupos,
   tablas) y estilos inline. Aquí los normalizamos al look del sitio:
   h3 azul centrado para todo h3 directo en league-content, + sección
   con bordes y filas con separador limpio. */
#league-content > h3 {
    background-color: #0000ff;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 12px;
    margin: 24px 0 12px 0 !important;
    border: 1px solid #cccccc;
    text-align: center;
}
#league-content > h3:first-child {
    margin-top: 0 !important;
}
#league-content .matches-section {
    background: #ffffff;
    border: 1px solid #cccccc;
    border-top: 0;
    margin: 0 0 15px 0 !important;
    padding: 0;
}
#league-content .matches-section .match-row {
    background-color: #ffffff !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #e5e5e5;
}
#league-content .matches-section .match-row:last-child {
    border-bottom: 0;
}

/* Subsección dentro de un bloque de fase eliminatoria (jerarquía 2):
   p.ej., "Rueda de Ganadores" / "Rueda de Perdedores" / "Final" en 1985N */
.knockout-subsection-title {
    display: inline-block;
    background-color: #fff3b0;
    color: #1a3d1a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 22px;
    margin: 36px auto 14px auto;
    border: 1px solid #d6b85a;
    border-radius: 999px;
    text-align: center;
}

/* Wrapper centrador para .knockout-subsection-title (que es inline-block) */
.knockout-subsection-title-wrap {
    display: flex;
    justify-content: center;
    margin: 0;
}

/* Título de fase individual (jerarquía 3):
   p.ej., "Segunda Fase", "Tercera Fase", "Final de la Rueda de Perdedores" */
.knockout-phase-title {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    margin: 14px 0 6px 0;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

/* Finals 2020 compact layout */
.finals-compact{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.final-card{border:1px solid #cccccc;background:#ffffff;padding:8px 10px;border-radius:4px}
.final-card .final-title{background:#0000ff;color:#fff;font-weight:700;font-size:14px;padding:6px 10px;margin:-8px -10px 8px -10px}
.final-card .pens{font-size:11px;color:#555;font-weight:600}
.final-card td{position:relative}
.final-card .pk{font-size:11px;opacity:.8}
/* hide generic empty-warning if present below finals */
.knockout-section + .empty, .finals-compact + .empty { display: none; }

/* ===== LEAGUE TABLE ===== */
.league-table-container {
    margin: 20px 0;
}

.league-table-container h3 {
    background-color: #0000ff;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 12px;
    margin: 0 0 15px 0;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    text-align: center;
}

.league-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 0;
}

.league-table th {
    background-color: #e0e0e0;
    color: #000000;
    font-weight: bold;
    padding: 8px 5px;
    border: 1px solid #cccccc;
    text-align: center;
}

.league-table td {
    padding: 6px 5px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    text-align: center;
}

.league-table .team-name {
    text-align: left;
    font-weight: bold;
}

.league-table tr:nth-child(even) td {
    background-color: #f8f8f8;
}

.league-table tr:hover td {
    /* sin efecto hover: mantener el fondo natural (par/impar) en lugar
       de transparentar, que dejaba ver el verde del body */
    background-color: inherit;
}
.league-table tr:nth-child(even):hover td { background-color: #f8f8f8; }
.league-table tr:nth-child(odd):hover td { background-color: #ffffff; }

/* ===== MATCHDAY SLIDER (junto a la tabla en ligas europeas modernas) ===== */
.league-with-slider {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin: 20px 0;
}

.league-with-slider .league-table-container {
    margin: 0;
}

.matchday-slider {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.matchday-slider-header {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
    background-color: #0000ff;
    color: #ffffff;
    padding: 8px 10px;
}

.matchday-slider-arrow {
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.matchday-slider-arrow:hover {
    opacity: 0.7;
}

.matchday-slider-title {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.matchday-slider-list {
    background-color: #ffffff;
}

.matchday-page {
    display: none;
}

.matchday-page.active {
    display: block;
}

.matchday-slider-match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 7px 10px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12px;
    color: #000000;
}

.matchday-slider-match:last-child {
    border-bottom: 0;
}

.matchday-slider-home,
.matchday-slider-away {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.matchday-slider-home {
    justify-content: flex-end;
    text-align: right;
}

.matchday-slider-away {
    justify-content: flex-start;
}

.matchday-slider-team {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.matchday-slider-match img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.matchday-slider-score {
    font-weight: 700;
    white-space: nowrap;
    color: #000000;
}

@media (max-width: 1024px) {
    .league-with-slider {
        grid-template-columns: 1fr;
    }
}

/* ===== RESPONSIVE IMPROVEMENTS ===== */
@media (max-width: 768px) {
    .tables-container {
        flex-direction: column;
    }
    
    .table-half {
        width: 100%;
    }
    
    .search-result-item {
        flex-direction: column;
        text-align: center;
    }
    
    .team-crest, .personality-photo {
        margin: 0 0 10px 0;
    }
}

/* ===== TEAM DETAILS ===== */
.team-details {
    margin: 20px 0 10px 0;
}

/* Usar profile-card para el header del equipo (igual que personalidades) */
.team-details .profile-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 16px 10px 16px;
    border: 1px solid #cccccc;
    background: #ffffff;
    margin-bottom: 16px;
}

.team-details .profile-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.team-details .profile-main h1 {
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #000000;
    font-weight: 700;
    line-height: 1;
    display: block;
}

.team-details .profile-main p {
    margin: -2px 0 0 0;
    padding: 0;
    font-size: 14px;
    color: #666666;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.2;
    display: block;
}

/* Caja grande para las secciones (igual que tab-panels en personalidades) */
.team-details .tab-panels {
    border: 1px solid #cccccc;
    background: #fff;
    padding: 12px;
}

.team-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 20px 20px 20px 20px;
    background-color: #f8f8f8;
    border: 1px solid #cccccc;
}

/* Scope al team-header del perfil de equipo (antes era global .team-info y
   pisaba el align centrado del Supercopa de Europa / Intercontinental). */
.team-header .team-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 1 auto;
    padding: 0;
    margin: 0;
    align-self: flex-start;
}

.team-details .profile-card .team-crest-large {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background-color: #ffffff;
    margin: 0;
    align-self: flex-start;
}

.team-info h1 {
    margin: 0 0 4px 0;
    padding: 0;
    font-size: 28px;
    color: #000000;
    font-weight: 700;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-align: left;
    line-height: 1;
}

.team-info p {
    margin: 0;
    padding: 0;
    font-size: 15px;
    color: #666666;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: block;
    width: auto;
    text-align: left;
    line-height: 1.4;
}

.team-titles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.title-section {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 20px;
    text-align: center;
}

.title-section h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #000000;
    text-transform: uppercase;
}

.title-count {
    font-size: 24px;
    font-weight: bold;
    color: #0000ff;
}

.total-titles {
    background-color: #0000ff;
    color: #ffffff;
    padding: 20px;
    text-align: center;
    border: 1px solid #0000cc;
}

.total-titles h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.title-count-large {
    font-size: 36px;
    font-weight: bold;
}

/* ===== TEAM DETAIL – Structured Sections ===== */
/* Helvetica Neue solo para elementos específicos de la sección de equipos */
#teams-section h1,
#teams-section .search-results,
#teams-section .search-result-item,
.team-details,
.team-section {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#teams-section h1 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 20px;
}

#teams-section h1.teams-title {
    color: #ffffff;
}

.team-palmares-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.team-palmares-topbar .breadcrumbs {
    margin-bottom: 0;
}

.team-palmares-topbar .edition-info-btn {
    flex-shrink: 0;
}

.team-details .breadcrumbs {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.team-details .breadcrumbs a {
    color: #0a39ff;
    text-decoration: none;
    font-weight: 500;
}

.team-details .breadcrumbs a:hover {
    text-decoration: underline;
}

/* Caja grande para las secciones (igual que tab-panels en personalidades) */
.team-details .tab-panels {
    border: 1px solid #cccccc;
    background: #fff;
    padding: 12px;
}

.team-details .tab-panels .team-section {
    background: #ffffff;
    border: 1px solid #cccccc;
    padding: 12px;
    margin: 0 0 20px 0;
}

.team-details .tab-panels .team-section:first-child {
    margin-top: 0;
}

.team-details .tab-panels .team-section:last-child {
    margin-bottom: 0;
}
.section-header{display:none}
.team-details .tab-panels .section-title{
    margin:0 0 10px 0;
    font-size:16px;
    line-height:1.2;
    color:#000000;
    font-weight:700;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0 0 8px 0;
    border: none;
    border-bottom: 1px solid #e5e5e5;
}
.section-count{display:none}
.team-section h2 {
    font-size: 18px;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
}
.years-paragraph {
    margin: 0;
    line-height: 1.6;
    word-break: break-word;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333;
}
.cup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 20px;
    margin-top: 8px;
}
.cup-item {
    padding: 8px 0;
}
.cup-name {
    color: #000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
}
.cup-name strong {
    font-weight: 500;
}
.cup-count-paren,
.team-details .section-title .title-count{
    color:#0a39ff;
    font-weight:500;
    font-size: inherit;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    margin-left: 2px;
}
.cup-count { 
    color: #555; 
    font-weight: normal; 
}
.cup-years {
    color: #333;
    font-size: 13px;
    margin-top: 8px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Años de copas en grilla: columnas de ancho fijo (definido inline según
   el año más largo de la copa) y uniformes => filas parejas, compacto,
   sin estirar. tabular-nums: cada dígito ocupa exactamente 1ch. */
.cup-years-grid {
    display: grid;
    gap: 4px 14px;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

.cup-years-grid .year-pill {
    white-space: nowrap;
}

/* ===== PERSONALITY DETAILS ===== */
.personality-details {
    margin: 20px 0 10px 0;
}

.profile-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: start;
    padding: 16px 16px 10px 16px;
    border: 1px solid #cccccc;
    background: #ffffff;
    margin-bottom: 16px;
}

.profile-main h1 {
    margin: 0 0 4px 0;
    font-size: 24px;
}

.roles-line{ color:#444; font-size:13px; margin:2px 0 6px 0 }

.role-chips { display:none; }
.chip { display:none; }

.profile-meta { display:grid; grid-template-columns: auto 1fr; gap:4px 10px; margin-top:8px; font-size:13px; align-items:center }
.meta-label { color:#666; }
.meta-value { color:#111; }
.flag-icon{height:1em;width:auto;vertical-align:-0.15em;margin-right:6px;display:inline-block}

.stat-strip { display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.stat-box { border:1px solid #e0e0e0; background:#fafafa; padding:8px 10px; min-width:110px; text-align:center; }
.stat-value { font-size:18px; font-weight:700; color:#0a39ff; }
.stat-label { font-size:11px; color:#555; }

/* Two-column layout like Transfermarkt */
.personality-layout{display:block}
.layout-left{display:block}
.layout-right{display:none}

.trophy-card{border:1px solid #cccccc;background:#fff}
.trophy-card h3{margin:0;background:#0000ff;color:#fff;font-size:16px;padding:8px 12px;text-align:center}
.trophy-body{padding:12px}
.trophy-block{margin-bottom:12px}
.trophy-block .label{font-weight:700;margin-bottom:6px}
.trophy-list{margin:0;padding-left:16px}
.trophy-list li{margin:4px 0;font-size:13px}

/* Tabs */
.tabs{display:flex;gap:6px;margin:10px 0}
.tab{background:#f3f3f3;border:1px solid #cccccc;padding:6px 10px;font-size:13px;cursor:pointer}
.tab.active{background:#0000ff;color:#fff;border-color:#0c2be0}
.tab-panels{border:1px solid #cccccc;background:#fff}
.tab-panel{display:none;padding:12px}
.tab-panel.active{display:block}

.personality-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f8f8;
    border: 1px solid #cccccc;
}

.personality-photo-large {
    width: 140px;
    height: 140px;
    object-fit: cover; /* cuadrada */
    margin-right: 20px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    border-radius: 0; /* sin burbuja redonda */
}

.personality-info h1 {
    margin: 0 0 5px 0;
    font-size: 24px;
    color: #000000;
}

.personality-info p {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #666666;
}

.personality-career {
    background-color: transparent; /* sin recuadro */
    border: none; /* sin borde exterior */
    padding: 0;
    margin-bottom: 18px;
}

.personality-career h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    background-color: transparent; /* sin barra azul */
    color: #000000;
    padding: 0; /* sin padding de banda */
    border: none;
}

.career-stats p {
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 1.5;
}

.career-stats strong {
    color: #000000;
    font-weight: bold;
}

/* Generic info table for personalities */
.info-table{
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #cccccc;
}
.info-table thead th{
    background: #f3f3f3;
    color: #111111;
    font-weight: 700;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid #d9d9d9;
}
.info-table tbody td{
    padding: 10px 12px;
    border-bottom: 1px solid #cccccc; /* mismo tono que bordes verticales */
}
/* asegurar mismo tono en la última fila */
.info-table tbody tr:last-child td{ border-bottom: 1px solid #cccccc; }
/* grid lines */
.info-table th, .info-table td { border-right: 1px solid #cccccc; }
.info-table th:last-child, .info-table td:last-child { border-right: none; }
/* Trajectory grid - fixed layout and centered numbers */
.personality-details .info-table.grid-trajectory { table-layout: fixed; }
.personality-details .info-table.grid-trajectory col.col-team { width: 40%; }
.personality-details .info-table.grid-trajectory col.col-team-wide { width: 70%; }
.personality-details .info-table.grid-trajectory col.col-num { width: 20%; }
.personality-details .info-table.grid-trajectory col.col-num-30 { width: 30%; }
.personality-details .info-table.grid-trajectory thead th { vertical-align: middle; }
.personality-details .info-table.grid-trajectory tbody td { vertical-align: middle; }
.personality-details .info-table.grid-trajectory thead th:nth-child(n+2),
.personality-details .info-table.grid-trajectory tbody td:nth-child(n+2){ text-align: center; }
.personality-details .info-table.grid-trajectory tbody td:first-child{ text-align:left }
/* ensure assists column text visible */
.personality-details .info-table.grid-trajectory tbody td:nth-child(4){ color:#111 }
.personality-details .info-table.grid-trajectory td, 
.personality-details .info-table.grid-trajectory th { vertical-align: middle; }

:root{
  --row: 36px;      /* altura por fila (ajusta y todo re-alinea) */
  --col-gap: 15px;  /* ancho de columna de conectores */
  --line:#666; --muted:#e7e7ef; --head:#0a39ff;
}
.bracket-wrap{overflow-x:auto;background:#fff;border:1px solid var(--muted);padding:12px;border-radius:8px;width:100%;-webkit-overflow-scrolling:touch}
table.bracket-table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.15}
.bracket-table thead th{
  position:sticky;top:0;background:#f3f6ff;padding:.35rem .5rem;border:1px solid var(--muted);text-align:center;font-weight:700
}
.bracket-table thead th.head{background:var(--head);color:#fff !important;border-color:#0c2be0}
.bracket-table tbody tr{height:var(--row)}
.bracket-table td.tie{padding:0;border:none;background:transparent;vertical-align:middle}
.bracket-table .box{display:inline-block;border:1px solid var(--muted);background:#fff;padding:.2rem .4rem;min-width:180px;border-radius:6px}
.bracket-table .hdr{display:grid;grid-template-columns:auto 26px 26px 34px;gap:.25rem;font-size:11px;opacity:.7;margin-bottom:.12rem}
.bracket-table .row{display:grid;grid-template-columns:auto 26px 26px 34px;gap:.25rem;margin:1px 0}
.bracket-table .name{font-weight:600}
.bracket-table .agg{font-variant-numeric:tabular-nums}
.bracket-table .agg .base{font-weight:700}
.bracket-table .agg .pens{font-size:10px;font-weight:600;margin-left:2px}
.bracket-table .row .name{white-space:nowrap}
.bracket-table .row .name .via{font-size:10px;font-weight:600;margin-left:4px;opacity:.8}
/* Estilos para caja con desempate (final con 3 partidos) */
.bracket-table .box-with-desempate{min-width:320px;padding:.25rem .35rem}
.bracket-table .box-with-desempate .hdr{grid-template-columns:auto 35px 35px 35px 55px !important;gap:.45rem !important;font-size:9px}
.bracket-table .box-with-desempate .row{grid-template-columns:auto 35px 35px 35px 55px !important;gap:.45rem !important;font-size:11px}
.bracket-table .box-with-desempate .row .name{font-size:11px;white-space:nowrap}
.bracket-table .c{width:var(--col-gap);min-width:var(--col-gap);padding:0;border:none}
.bracket-table .r{ border-right:2px solid var(--line);}
.bracket-table .l{ border-left: 2px solid var(--line);}
.bracket-table .t{ border-top:  2px solid var(--line);}
.bracket-table .b{ border-bottom:2px solid var(--line);}
.bracket-table .rt{ border-right:2px solid var(--line); border-top:2px solid var(--line);}
.bracket-table .rb{ border-right:2px solid var(--line); border-bottom:2px solid var(--line);}
.bracket-table .lt{ border-left: 2px solid var(--line);  border-top:2px solid var(--line);}
.bracket-table .lb{ border-left: 2px solid var(--line);  border-bottom:2px solid var(--line);}

/* Líneas divisorias internas dentro de cada caja del bracket: separan
   el header de los equipos, los dos equipos entre sí, y la columna del
   nombre/scores de la columna del agregado (vertical sutil). */
.bracket-table .box .hdr{
  border-bottom:1px solid #d8dee9;
  padding-bottom:2px;
  margin-bottom:2px;
}
.bracket-table .box .row:not(:last-child){
  border-bottom:1px solid #e3e6ec;
  padding-bottom:1px;
  margin-bottom:1px;
}
.bracket-table .box .hdr > span:not(:last-child),
.bracket-table .box .row > span:not(:last-child){
  border-right:1px solid #e3e6ec;
  padding-right:4px;
}

/* Caja del bracket: ancho fijo y word-wrap en nombres largos para que
   las cajas no se extiendan horizontalmente. */
.bracket-table .box{
  width:200px;
  box-sizing:border-box;
  /* color explícito porque algunas ramas (libertadores 1962-1970) usan
     <div class="bracket-table"> y la regla .bracket-table td { color:#000 }
     no aplica. Sin esto el texto hereda blanco del body. */
  color:#000;
}
.bracket-table .box-with-desempate{
  width:340px;
}
.bracket-table .box .row .name{
  white-space:normal;
  overflow-wrap:break-word;
  line-height:1.15;
  font-size:11px;
}

/* Fine-tune lower semifinal in 1988 a few pixels upwards visually */
.bracket-wrap.lib1988 td.tie.semi-bottom{ transform: translateY(-56px); }

/* Slightly lift the single-match final in 1988 */
.bracket-wrap.lib1988 td.tie.final1988{ transform: translateY(-4px); }

/* Colores mucho menos opacos para TF 13/14 */
.data-table tr.mark-promotion-light{background:rgba(255, 179, 102, 0.15) !important}
.data-table tr.mark-promotion-light td{background:rgba(255, 179, 102, 0.15) !important}
.data-table tr.mark-relegation-light{background:rgba(255, 107, 107, 0.15) !important}
.data-table tr.mark-relegation-light td{background:rgba(255, 107, 107, 0.15) !important}

.badge{display:inline-block;padding:2px 8px;border-radius:10px;background:#eef2ff;border:1px solid #cfd8ff;color:#0a39ff;font-weight:700;font-size:11px;vertical-align:middle}
.count-badge{background:#0a39ff;color:#fff;border-color:#0a39ff}
.years-list{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.year-pill{
    display:inline-block;
    padding:0;
    background:transparent;
    border:none;
    border-radius:0;
    font-size:13px;
    color:#333;
    font-weight: 400;
}

#teams-section .year-pill,
.team-details .year-pill {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.knockout-section .ko-stacked{margin:12px 0}
.knockout-section .ko-phase{margin:10px 0}
.knockout-section .ko-round-title{font-weight:700;margin:6px 0;text-align:center}
.knockout-section .ko-round-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ko-card{border:1px solid #e7e7ef;background:#fff;padding:8px 10px;border-radius:4px;min-width:280px}
.ko-card .team-name{font-weight:700;color:#000}
.ko-card .ko-leg,.ko-card .ko-date{font-size:11px;color:#666;margin-top:2px;text-align:center}

/* Force groups grid two columns and visible */
/* Esta regla se aplica solo cuando se necesita, no globalmente */
.groups-row{display:contents}

/* Wikipedia-like knockout phase table (centered) */
.phase-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  margin: 10px 0;
}

.phase-table{
  border-collapse: collapse;
  width: 800px;
  min-width: 720px;
  table-layout: fixed;
  margin: 10px auto;
  background: #ffffff;
  border: 1px solid #cccccc;
}
.phase-table thead th{
  background: #f0f0f0;
  color: #000000;
  font-weight: 700;
  padding: 6px 10px;
  border: 1px solid #cccccc;
  text-align: center;
}
.phase-table tbody td{
  padding: 6px 10px;
  border: 1px solid #cccccc;
}
.phase-table tbody tr:nth-child(even) td{ background:#f8f8f8; }
.phase-table tbody tr:hover td{ background: transparent; }
.phase-table tbody td:nth-child(2){ text-align:center; font-weight:700; }
.phase-table tbody td:first-child{ text-align:left; }
.phase-table tbody td:nth-child(3){ text-align:right; }

/* Column widths to keep center column perfectly centered */
.phase-table th:nth-child(1), .phase-table td:nth-child(1){ width:40%; white-space:nowrap; }
.phase-table th:nth-child(2), .phase-table td:nth-child(2){ width:20%; }
.phase-table th:nth-child(3), .phase-table td:nth-child(3){ width:40%; white-space:nowrap; }

/* ======================
   NAVEGACIÓN CON FLECHAS
   ====================== */

.edition-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.edition-header h1 {
    margin: 0;
    flex: 1;
    text-align: center;
}

.edition-info-btn {
    background-color: transparent;
    border: 2px solid #ffffff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.2s;
}

.edition-info-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.edition-info-btn span {
    line-height: 1;
}

/* Modal para detalles de edición */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #ffffff;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 10px;
}

.modal-close:hover,
.modal-close:focus {
    color: #000;
    text-decoration: none;
}

#edition-details-content {
    margin-top: 20px;
}

#edition-details-content h2 {
    margin-top: 0;
    color: #000000;
    font-size: 24px;
}

#edition-details-content p {
    color: #333333;
    line-height: 1.6;
    margin: 10px 0;
}

#edition-details-content .detail-section {
    margin: 20px 0;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

#edition-details-content .detail-section h3 {
    margin-top: 0;
    color: #000000;
    font-size: 18px;
}

#edition-details-content .detail-section p {
    margin: 8px 0;
}

.nav-arrow {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #ffffff;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s;
    padding: 0;
}

.nav-arrow:hover:not(.disabled) {
    background-color: #0000cc;
}

.nav-arrow.disabled {
    background-color: #666666;
    cursor: not-allowed;
    opacity: 0.6;
}

.nav-arrow.disabled:hover {
    background-color: #666666;
}

.nav-arrow span {
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* Estilos para banderas de categorías */
.category-flag {
    width: 20px;
    height: 15px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 2px;
}

/* Estilos específicos para logos redondos/circulares */
.category-flag.logo-round {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: contain;
}

/* Estilos específicos para logos cuadrados */
.category-flag.logo-square {
    width: 18px;
    height: 18px;
    border-radius: 0;
    object-fit: contain;
}

/* Estilos para Copa Intercontinental - Versión Corregida */
.intercontinental-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.trophy-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
}

.flag-section {
    display: flex;
    justify-content: center;
}

.champion-trophy-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.team-crest-large {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 0;
    border: none;
    background: transparent;
}

.country-flag-large {
    width: 25px;
    height: 18px;
    border-radius: 0;
}

.trophy-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trophy-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.intercontinental-matches {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.intercontinental-match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    background: #f8f9fa;
    border: 2px solid #4a7c59;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
}

.team-left {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-self: start;
}

.team-right {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 15px;
    justify-self: end;
}

.match-center {
    display: flex;
    justify-content: center;
    min-width: 200px;
}

.team-crest {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: none;
    border-radius: 0;
}

/* Eliminar fondo blanco de los escudos en Supercopa de Europa */
.intercontinental-container .team-crest,
.intercontinental-container .team-crest-large {
    background-color: transparent !important;
    background: transparent !important;
    padding: 0;
}

.team-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.country-flag {
    width: 20px;
    height: 15px;
    border-radius: 0;
}

/* Helvetica Neue solo para team-name en la sección de equipos, pero NO en tablas */
#teams-section .team-info .team-name,
.team-details .team-info .team-name,
.intercontinental-match .team-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #000000;
    letter-spacing: 0.3px;
    text-transform: capitalize;
}

.match-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.score-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.score {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
}

.penalties {
    font-size: 16px;
    font-weight: normal;
    color: #666666;
}

/* Los estilos del bracket de Intercontinental usan los mismos de Libertadores */

.match-round {
    font-size: 14px;
    color: #666;
    font-weight: bold;
}

/* Estilos para tablas de eliminación (Copa Sudamericana) - Optimizado para mejor uso del espacio */
.elimination-table {
    overflow-x: auto;
    margin-bottom: 15px;
}

.elimination-matches {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    font-size: 13px;
}

.elimination-matches th {
    background: #2c5530;
    color: white;
    padding: 6px 3px;
    text-align: center;
    font-weight: bold;
    font-size: 0.8em;
    white-space: nowrap;
}

.elimination-matches td {
    padding: 4px 3px;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
    background: white;
    color: #000000;
    line-height: 1.2;
}

.elimination-matches tr {
    background: white;
}

.elimination-matches tr:hover {
    background: #f5f5f5;
}

.elimination-matches .team-home,
.elimination-matches .team-away {
    font-weight: 500;
    background: white;
    color: #000000;
    vertical-align: middle;
    line-height: 1.2;
    white-space: nowrap;
}

/* Columnas de equipos optimizadas */
.elimination-matches .team-home { 
    text-align: left; 
    font-size: 0.85em; 
    padding: 4px 6px 4px 4px; 
    width: auto;
    max-width: 200px;
}
.elimination-matches .team-away { 
    text-align: right; 
    font-size: 0.85em; 
    padding: 4px 4px 4px 6px; 
    width: auto;
    max-width: 200px;
}

/* Columnas de scores más compactas */
.elimination-matches .score { 
    font-family: Arial, sans-serif; 
    font-size: 0.95em; 
    font-weight: 600;
    padding: 4px 2px;
    min-width: 45px;
    width: auto;
}

.elimination-matches .global-score { 
    font-family: Arial, sans-serif;
    font-size: 1em; 
    font-weight: bold;
    line-height: 1.2; 
    padding: 4px 2px;
    min-width: 80px;
    width: auto;
}

/* Escudos más compactos */
.elimination-matches .team-home .team-crest-inline{ 
    width: 12px; 
    height: 12px; 
    margin: 0 3px 0 0; 
    vertical-align: middle;
}
.elimination-matches .team-away .team-crest-inline{ 
    width: 12px; 
    height: 12px; 
    margin: 0 0 0 3px; 
    vertical-align: middle;
}

/* Optimizar columnas de equipos para mejor distribución del espacio */
.elimination-matches colgroup {
    display: table-column-group;
}

/* ============================================
   RESPONSIVE DESIGN - COMPLETE
   ============================================ */

/* ===== MÓVILES PEQUEÑOS (320px - 480px) ===== */
@media (max-width: 480px) {
    .container {
        margin: 0;
        border: none;
        min-height: 100vh;
    }
    
    .header-top {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
    
    .header-brand h1 {
        font-size: 16px;
    }
    
    .header-nav {
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }
    
    .header-nav a {
        padding: 6px 10px;
        font-size: 11px;
        text-align: center;
    }
    
    .header-right {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    
    .main-content {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        position: relative;
        box-shadow: none;
        border-bottom: 1px solid #2d5a2d;
    }
    
    .central-content {
        width: 100%;
        padding: 10px;
        padding-bottom: 80px; /* Espacio para evitar que el overlay del navegador tape contenido */
    }
    
    .content-section h1 {
        font-size: 20px;
    }
    
    .content-section h2 {
        font-size: 16px;
    }
    
    /* Tablas responsivas - mantener formato horizontal con scroll */
    .table-block {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
    }
    
    .league-table,
    .data-table,
    .group-table {
        font-size: 9px;
        display: table;
        width: 100%;
        min-width: 600px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .league-table thead,
    .data-table thead,
    .group-table thead {
        display: table-header-group;
    }
    
    .league-table tr,
    .data-table tr,
    .group-table tr {
        display: table-row;
    }
    
    .league-table td,
    .data-table td,
    .group-table td {
        display: table-cell;
        padding: 6px 4px;
        text-align: center;
        white-space: nowrap;
    }
    
    .league-table td.team-name,
    .data-table td.team-name,
    .group-table td.team-name {
        text-align: left;
        white-space: normal;
    }
    
    .league-table th,
    .data-table th,
    .group-table th {
        padding: 6px 4px;
        font-size: 9px;
        white-space: nowrap;
    }
    
    /* Competition grid */
    .competition-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .competition-card {
        padding: 12px;
    }
    
    .competition-card h3 {
        font-size: 14px;
    }
    
    /* Bracket responsive */
    .bracket-container {
        padding: 5px;
    }
    
    .bracket-match {
        padding: 6px;
        font-size: 11px;
    }
    
    /* Team details */
    .team-details .profile-card {
        flex-direction: column;
        padding: 12px;
    }
    
    .team-crest-large {
        width: 60px !important;
        height: 60px !important;
    }
    
    .team-titles {
        grid-template-columns: 1fr;
    }
    
    /* Search */
    .search-input {
        font-size: 14px;
        padding: 8px;
    }
    
    .search-result-item {
        flex-direction: column;
        padding: 10px;
    }
    
    /* Modal */
    .modal-content {
        width: 95%;
        margin: 10px auto;
        padding: 15px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Groups */
    .groups-row {
        grid-template-columns: 1fr;
    }
    
    /* Asegurar que groups-grid sea una sola columna en móvil */
    .groups-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    /* Scroll horizontal para tablas de grupos */
    .group-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0; /* Permite que el contenedor se reduzca */
        position: relative;
    }
    
    .group-container .group-table {
        min-width: 600px !important;
        width: max-content !important;
    }
    
    /* Scrollbar visible para group-container */
    .group-container::-webkit-scrollbar {
        height: 8px;
    }
    
    .group-container::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 4px;
    }
    
    .group-container::-webkit-scrollbar-thumb {
        background: #888888;
        border-radius: 4px;
    }
    
    .group-container::-webkit-scrollbar-thumb:hover {
        background: #666666;
    }
    
    /* Tables container */
    .tables-container {
        flex-direction: column;
    }
    
    .table-half {
        width: 100%;
    }
}

/* ===== MÓVILES GRANDES (480px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        margin: 5px;
    }
    
    .header-top {
        flex-wrap: wrap;
        padding: 10px 15px;
    }
    
    .header-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
    
    .main-content {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        position: relative;
        border-bottom: 1px solid #2d5a2d;
    }
    
    .sidebar-section ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }
    
    .central-content {
        width: 100%;
        padding: 15px;
        padding-bottom: 80px; /* Espacio para evitar que el overlay del navegador tape contenido */
    }
    
    /* Tablas con scroll horizontal */
    .table-block {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
    }
    
    .league-table,
    .data-table,
    .group-table {
        font-size: 10px;
        display: table;
        width: 100%;
        min-width: 650px;
        overflow-x: auto;
    }
    
    .league-table thead,
    .data-table thead,
    .group-table thead {
        display: table-header-group;
    }
    
    .league-table td,
    .data-table td,
    .group-table td {
        padding: 6px 5px;
        white-space: nowrap;
    }
    
    .league-table th,
    .data-table th,
    .group-table th {
        padding: 6px 5px;
        font-size: 10px;
    }
    
    /* Apilar tablas de dos columnas */
    .tables-two-cols {
        flex-direction: column;
        gap: 20px;
    }
    
    .tables-two-cols .table-block {
        width: 100%;
        flex: none;
    }
    
    /* Grupos apilados */
    .groups-row {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    /* Asegurar que groups-grid sea una sola columna en móvil */
    .groups-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    /* Scroll horizontal para tablas de grupos */
    .group-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0; /* Permite que el contenedor se reduzca */
        position: relative;
    }
    
    .group-container .group-table {
        min-width: 650px !important;
        width: max-content !important;
    }
    
    /* Scrollbar visible para group-container */
    .group-container::-webkit-scrollbar {
        height: 8px;
    }
    
    .group-container::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 4px;
    }
    
    .group-container::-webkit-scrollbar-thumb {
        background: #888888;
        border-radius: 4px;
    }
    
    .group-container::-webkit-scrollbar-thumb:hover {
        background: #666666;
    }
    
    /* Competition grid */
    .competition-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    /* Bracket */
    .bracket-match {
        padding: 8px;
        font-size: 12px;
    }
    
    /* Team details */
    .team-details .profile-card {
        padding: 15px;
    }
    
    .team-titles {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Modal */
    .modal-content {
        width: 90%;
        padding: 20px;
    }
    
    /* Groups */
    .groups-row {
        grid-template-columns: 1fr;
    }
}

/* ===== TABLETS (768px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 100%;
        margin: 5px;
    }
    
    .header-top {
        padding: 10px 20px;
    }
    
    .sidebar {
        width: 180px;
    }
    
    .central-content {
        padding: 15px 20px;
    }
    
    /* Tablas */
    .league-table,
    .data-table,
    .group-table {
        font-size: 12px;
    }
    
    /* Competition grid */
    .competition-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    /* Team details */
    .team-titles {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Groups */
    .groups-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Tables container */
    .tables-container {
        flex-direction: column;
    }
    
    .table-half {
        width: 100%;
    }
}

/* ===== TABLETS LANDSCAPE Y PANTALLAS MEDIANAS (1024px - 1280px) ===== */
@media (min-width: 1025px) and (max-width: 1280px) {
    .container {
        max-width: 100%;
    }
    
    .sidebar {
        width: 200px;
    }
    
    .central-content {
        padding: 20px;
    }
    
    /* Competition grid */
    .competition-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Groups */
    .groups-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== MEJORAS ADICIONALES PARA TODOS LOS TAMAÑOS ===== */

/* Scroll suave en móviles */
@media (max-width: 768px) {
    html {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Ocultar elementos no esenciales en móviles */
    .header-date {
        font-size: 10px;
    }
    
    /* Ajustar padding general */
    .content-section {
        padding: 10px;
        padding-bottom: 80px; /* Espacio para evitar que el overlay del navegador tape contenido */
    }
    
    /* Mejorar legibilidad de texto */
    body {
        font-size: 14px;
        padding-bottom: 20px;
    }
    
    /* Ajustar botones */
    button,
    .btn {
        padding: 10px 15px;
        font-size: 14px;
        min-height: 44px; /* Tamaño táctil mínimo */
    }
    
    /* Mejorar inputs */
    input[type="text"],
    input[type="search"],
    select {
        font-size: 16px; /* Evita zoom en iOS */
        padding: 12px;
        min-height: 44px;
    }
    
    /* Ajustar modales */
    .modal {
        padding: 10px;
    }
    
    .modal-content {
        border-radius: 8px;
    }
    
    /* Mejorar navegación de breadcrumbs */
    .breadcrumbs {
        font-size: 12px;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* Ajustar tabs */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab {
        padding: 10px 15px;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* ===== ORIENTACIÓN LANDSCAPE EN MÓVILES ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .header-top {
        flex-direction: row;
    }
    
    .header-nav {
        order: 0;
        width: auto;
        margin-top: 0;
    }
    
    .sidebar {
        width: 150px;
    }
    
    .central-content {
        padding: 10px 15px;
    }
}

/* ===== IMPRESIÓN ===== */
@media print {
    .header,
    .sidebar,
    .header-nav,
    button,
    .btn {
        display: none;
    }
    
    .container {
        max-width: 100%;
        margin: 0;
        border: none;
        box-shadow: none;
    }
    
    .central-content {
        width: 100%;
        padding: 0;
    }
    
    .league-table,
    .data-table,
    .group-table {
        font-size: 10px;
    }
}

/* ===== ESTILOS PARA HISTORIALES ===== */
.historiales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.historial-team-card {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.historial-team-card:hover {
    background-color: #f0f0f0;
}

.historial-team-crest {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.historial-team-name {
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.historial-content {
    margin-top: 20px;
}

/* Header superior con información del equipo - ESTILO AÑOS 2000 */
.historial-team-header {
    margin-bottom: 15px;
}

.historial-team-info-card {
    background-color: #1a4d1a;
    padding: 15px 18px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.historial-team-crest-large {
    width: 80px;
    height: 80px;
    object-fit: contain;
    flex-shrink: 0;
}

.historial-team-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.historial-team-name-main {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 3px;
}

.historial-team-detail {
    color: #cccccc;
    font-size: 13px;
    line-height: 1.4;
}

/* Banner con escudo y título - ESTILO AÑOS 2000 */
.historial-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #2d5a2d;
    padding: 10px 15px;
    margin-bottom: 15px;
}

.historial-banner-crest {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.historial-banner-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

/* Tabla de historiales - ESTILO COMO LA IMAGEN */
.historial-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #ffffff;
}

.historial-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 0;
    background-color: #ffffff;
    font-family: Arial, sans-serif;
}

.historial-table thead {
    background-color: #1a4d1a;
}

.historial-table th {
    background-color: #1a4d1a;
    color: #ffffff;
    font-weight: bold;
    padding: 6px 8px;
    border: 1px solid #2d5a2d;
    border-bottom: 1px solid #2d5a2d;
    text-align: left;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.historial-table th:first-child {
    text-align: left;
}

.historial-table th:not(:first-child) {
    text-align: center;
}

.historial-table th:nth-child(2) {
    width: 60px;
}

.historial-table td {
    padding: 6px 8px;
    border: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #ffffff;
    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.historial-table td:first-child {
    text-align: left;
}

.historial-table td:not(:first-child) {
    text-align: center;
}

.historial-table tbody tr {
    background-color: #ffffff;
}

.historial-table tbody tr:nth-child(even) {
    background-color: #f5f5f5;
}

.historial-table tbody tr:hover {
    background-color: #f0f0f0;
}

.rival-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    color: #000000;
}

/* Cuadrado rojo indicador de historial negativo */
.negative-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #d32f2f;
    border: 1px solid #b71c1c;
    flex-shrink: 0;
}

.rival-crest {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Celda DIF con fondo de color - ocupa toda la celda */
.historial-table td:nth-child(2) {
    padding: 0;
    width: 60px;
    position: relative;
    vertical-align: middle;
}

.diff-positive {
    background-color: #4caf50;
    color: #ffffff;
    font-weight: bold;
    padding: 6px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.diff-negative {
    background-color: #d32f2f;
    color: #ffffff;
    font-weight: bold;
    padding: 6px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.diff-zero {
    color: #666666;
    padding: 6px 8px;
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* Responsive para historiales */
@media (max-width: 768px) {
    .historiales-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 15px;
        padding: 15px 0;
    }
    
    .historial-team-card {
        padding: 12px;
    }
    
    .historial-team-crest {
        width: 50px;
        height: 50px;
    }
    
    .historial-team-name {
        font-size: 12px;
    }
    
    .historial-team-info-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px;
    }
    
    .historial-team-crest-large {
        width: 60px;
        height: 60px;
    }
    
    .historial-team-name-main {
        font-size: 18px;
    }
    
    .historial-team-detail {
        font-size: 12px;
    }
    
    .historial-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .historial-tab {
        padding: 8px 15px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    .historial-banner {
        padding: 10px 12px;
    }
    
    .historial-banner-crest {
        width: 32px;
        height: 32px;
    }
    
    .historial-banner-title {
        font-size: 16px;
    }
    
    .historial-table {
        font-size: 11px;
        min-width: 500px;
    }
    
    .historial-table th,
    .historial-table td {
        padding: 8px 6px;
    }
    
    .rival-crest {
        width: 20px;
        height: 20px;
    }
    
    .historial-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Match Details Modal Styles */
.match-details-modal {
    color: #000000;
    padding: 20px;
}

.match-details-modal h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #000000;
}

.match-details-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.match-details-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.match-details-crest {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.match-details-team strong {
    font-size: 24px;
    color: #000000;
}

.match-details-vs {
    font-size: 18px;
    color: #666666;
}

.match-details-info {
    margin: 10px 0;
    padding: 8px;
    background-color: #f5f5f5;
    border-radius: 4px;
    color: #000000;
}

.match-details-lineups {
    margin-top: 20px;
}

.match-details-lineups h3 {
    color: #000000;
    margin-bottom: 15px;
}

.lineup-section {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.lineup-section h4 {
    color: #000000;
    margin-bottom: 10px;
}

.lineup-formation {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 10px;
}

.lineup-players {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.lineup-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    background-color: #ffffff;
    border-radius: 3px;
}

.player-number {
    font-weight: bold;
    color: #000000;
    min-width: 25px;
}

.player-name {
    flex: 1;
    color: #000000;
}

.player-position {
    font-size: 11px;
    color: #666666;
}

.match-details-events {
    margin-top: 20px;
}

.match-details-events h3 {
    color: #000000;
    margin-bottom: 15px;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background-color: #f5f5f5;
    border-radius: 4px;
    color: #000000;
}

.event-time {
    font-weight: bold;
    min-width: 40px;
}

.event-icon {
    font-size: 16px;
}

.event-detail {
    flex: 1;
}

.event-player {
    font-weight: 500;
}

.event-team {
    font-size: 12px;
    color: #666666;
}

/* ===== ESTADIOS ===== */
.stadium-image {
    width: 280px;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .stadium-image {
        width: 100%;
        max-width: 300px;
        height: 160px;
    }
}

/* Detalle de estadio: separar las líneas de info (override del margin negativo
   que aplica .team-details .profile-main p para el detalle de equipos) */
#stadiums-section .team-details .profile-main {
    gap: 6px;
}

#stadiums-section .team-details .profile-main h1 {
    margin-bottom: 8px;
}

#stadiums-section .team-details .profile-main p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
}

/* Resultados del buscador de estadios: el HTML usa .result-name / .result-meta
   pero no tenían estilos, así que el texto heredaba el blanco del fondo verde
   y quedaba invisible sobre la caja blanca del item. */
#stadiums-section .search-result-item .result-name {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 4px 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#stadiums-section .search-result-item .result-meta {
    font-size: 13px;
    color: #666666;
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ======================
   Otros Datos
   ====================== */
.otros-datos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

#otros-datos-breadcrumb .breadcrumbs {
    font-size: 13px;
    color: #cccccc;
    margin: 4px 0 4px;
}

#otros-datos-breadcrumb .breadcrumbs a {
    color: #8fce8f;
    text-decoration: none;
    font-weight: 600;
}

#otros-datos-breadcrumb .breadcrumbs a:hover {
    text-decoration: underline;
}

.otros-datos-card {
    border: 1px solid #ffffff;
    background-color: #ffffff;
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.otros-datos-card:hover {
    background-color: #eef2ee;
}

.otros-datos-card h3 {
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 6px;
}

.otros-datos-card p {
    font-size: 12px;
    color: #1a1a1a;
    line-height: 1.4;
}

.otros-datos-placeholder {
    grid-column: 1 / -1;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid #2d5a2d;
    border-radius: 6px;
    padding: 28px 22px;
    color: #e8e8e8;
    text-align: center;
}

.otros-datos-placeholder .hint {
    font-size: 13px;
    color: #b9c9b9;
    margin-top: 6px;
}

.otros-datos-tables {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
}

/* Cada bloque (título + tabla) es una columna; las 3 en la misma hilera */
.otros-datos-table-block {
    flex: 1 1 300px;
    min-width: 0;
}

.otros-datos-table-block h3 {
    color: #ffffff;
    font-size: 14px;
    margin: 0;
}

/* La tabla ocupa el ancho del bloque, así la caja del título coincide con la tabla */
.otros-datos-table-block .data-table {
    width: 100%;
    max-width: none;
}

.otros-datos-table-block .data-table td,
.otros-datos-table-block .data-table th {
    padding: 4px 10px;
}

.otros-datos-table-block .data-table .ent-col-pos {
    width: 34px;
    text-align: center !important;
}

.otros-datos-table-block .data-table .ent-col-titles {
    width: 70px;
    text-align: center !important;
}

.otros-datos-table-block .data-table td .ent-name {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.otros-datos-table-block .data-table td .ent-name img.ent-flag {
    width: 22px;
    height: 15px;
    object-fit: cover;
    float: none;
    margin: 0;
    border: 1px solid #cccccc;
    flex: 0 0 auto;
}

/* Nota "Actualizado al ..." */
.otros-datos-updated {
    grid-column: 1 / -1;
    color: #cccccc;
    font-size: 13px;
    font-style: italic;
    margin: 0 0 14px;
}

/* Índice de tablas de la sección (sutil, clickeable, scroll suave) */
.otros-datos-index {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 2px 0 20px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid #2d5a2d;
    border-radius: 8px;
}

.otros-datos-index-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9fc39f;
    font-weight: 700;
}

.otros-datos-index-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.od-index-link {
    font-family: inherit;
    font-size: 13px;
    color: #e8f0e8;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid #3a6b3a;
    border-radius: 999px;
    padding: 5px 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.od-index-link:hover {
    background: #2d5a2d;
    border-color: #6aa86a;
    color: #ffffff;
}

.otros-datos-table-block {
    scroll-margin-top: 20px;
}

/* Filtro de la tabla de títulos totales */
.tt-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 12px;
}

.tt-btn {
    font-family: inherit;
    font-size: 13px;
    color: #e8f0e8;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid #3a6b3a;
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tt-btn:hover {
    background: #2d5a2d;
    border-color: #6aa86a;
    color: #ffffff;
}

.tt-btn.active {
    background: #2d5a2d;
    border-color: #8fce8f;
    color: #ffffff;
    font-weight: 700;
}


/* Tablas apiladas (goleadores por competición): cada una a lo ancho */
.otros-datos-tables--stacked {
    flex-direction: column;
    gap: 26px;
}

.otros-datos-table-block--wide {
    flex: 1 1 auto;
    width: 100%;
    max-width: 760px;
    overflow-x: auto;
}

.otros-datos-table-block--wide .data-table {
    width: 100%;
    max-width: none;
}

/* Goleadores por año: varios goleadores empatados, apilados en la misma fila */
.otros-datos-table-block .data-table td .gpa-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.otros-datos-table-block .data-table td .gpa-entry + .gpa-entry {
    border-top: 1px dashed #ddd;
}

.otros-datos-table-block .data-table td .gpa-entry img.ent-flag {
    width: 22px;
    height: 15px;
    object-fit: cover;
    float: none;
    margin: 0;
    border: 1px solid #cccccc;
    flex: 0 0 auto;
}

.otros-datos-table-block .data-table td .gpa-team {
    color: #555;
}

/* Escudo de club (solo fútbol argentino) */
.otros-datos-table-block .data-table td img.ent-crest {
    width: 20px;
    height: 20px;
    object-fit: contain;
    float: none;
    margin: 0;
    flex: 0 0 auto;
}

.otros-datos-table-block .data-table td .gpa-entry img.ent-crest {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* ======================
   Sobre Fulbarium
   ====================== */
.about-container {
    max-width: 880px;
    margin: 0 auto;
    padding: 10px 0 60px;
    color: #e8e8e8;
}

.about-container h1 {
    color: #ffffff;
    margin-bottom: 24px;
}

.about-section {
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid #2d5a2d;
    border-radius: 6px;
    padding: 18px 22px;
    margin-bottom: 18px;
}

.about-section h2 {
    color: #ffffff;
    font-size: 17px;
    margin: 0 0 12px;
    border-bottom: 1px solid #2d5a2d;
    padding-bottom: 6px;
}

.about-section p {
    line-height: 1.55;
    margin: 8px 0;
    font-size: 14px;
}

.about-section a {
    color: #9be39b;
    text-decoration: underline;
}

.about-section .hint {
    font-size: 13px;
    color: #b8b8b8;
    font-style: italic;
}

.disclaimer-box {
    border-left: 3px solid #9be39b;
}

/* Formulario de reporte de errores */
.report-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}

.report-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #e8e8e8;
}

.report-form .form-row > span {
    font-weight: 600;
}

.report-form .form-row em {
    font-style: normal;
    font-weight: 400;
    color: #b8b8b8;
    font-size: 12px;
}

.report-form input[type="text"],
.report-form input[type="email"],
.report-form select,
.report-form textarea {
    background-color: #ffffff;
    border: 1px solid #2d5a2d;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    color: #000000;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.report-form textarea {
    resize: vertical;
    min-height: 70px;
}

.report-form input:focus,
.report-form select:focus,
.report-form textarea:focus {
    outline: none;
    border-color: #9be39b;
    box-shadow: 0 0 0 2px rgba(155, 227, 155, 0.25);
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.btn-submit {
    background-color: #1a4d1a;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
}

.btn-submit:hover:not(:disabled) {
    background-color: #2d5a2d;
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-status {
    font-size: 13px;
    min-height: 1em;
}

.form-status.success { color: #9be39b; }
.form-status.error   { color: #ff8a8a; }
.form-status.pending { color: #cccccc; }

@media (max-width: 768px) {
    .about-container { padding: 4px 0 40px; }
    .about-section { padding: 14px 14px; }
}

/* ======================
   Tabla Histórica
   ====================== */
.tabla-historica-meta {
    color: #cccccc;
    font-size: 13px;
    margin: 6px 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tabla-historica-meta a {
    color: #9be39b;
    text-decoration: underline;
}

.tabla-historica-meta .meta-sep {
    opacity: 0.6;
}

.tabla-historica-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px;
    margin-bottom: 12px;
    background: #2d3748;
    border-radius: 4px;
}

.tabla-historica-filters .filter-label {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 500;
}

.tabla-historica-filters .filter-btn {
    padding: 6px 14px;
    background: #4a5568;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.tabla-historica-filters .filter-btn:hover:not(.active) {
    background: #5a6a5a;
}

.tabla-historica-filters .filter-btn.active {
    background: #2d5a2d;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.tabla-historica-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabla-historica-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    color: #000000;
    font-size: 13px;
}

.tabla-historica-table th,
.tabla-historica-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    white-space: nowrap;
}

.tabla-historica-table th {
    background-color: #1a4d1a;
    color: #ffffff !important;
    font-weight: 600;
    text-align: center;
    cursor: help;
}

.tabla-historica-table td.rank {
    text-align: center;
    font-weight: 600;
    width: 40px;
}

.tabla-historica-table td.team {
    font-weight: 500;
}

.tabla-historica-table td.team .team-crest-inline {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 6px;
    object-fit: contain;
}

.tabla-historica-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tabla-historica-table tbody tr:nth-child(even) {
    background-color: #f7fafc;
}

.tabla-historica-table tbody tr:hover {
    background-color: #edf2f7;
}

.empty-state {
    text-align: center;
    color: #cccccc;
    padding: 30px;
    font-style: italic;
}

@media (max-width: 768px) {
    .tabla-historica-table {
        font-size: 11px;
    }
    .tabla-historica-table th,
    .tabla-historica-table td {
        padding: 4px 6px;
    }
}

/* ======================
   Team links (clickeables) en vistas de competición
   ====================== */
.team-link {
    cursor: pointer;
}

.team-link:hover {
    text-decoration: underline;
}

/* ======================
   Juegos Diarios
   ====================== */
.games-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 4px 0 30px;
}

.games-title {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    margin: 0 0 4px;
}

.games-intro {
    color: #cfe0cf;
    font-size: 12px;
    margin: 0 0 16px;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px;
}

.game-card {
    background-color: #ffffff;
    border: 1px solid #0d4d0d;
    padding: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    flex-direction: column;
}
.game-card:hover { background-color: #eef2ee; }

.game-card-icon { font-size: 30px; line-height: 1; margin-bottom: 8px; }

.game-card-title {
    font-size: 14px;
    font-weight: bold;
    color: #0c380c;
    margin-bottom: 4px;
}

.game-card-desc {
    font-size: 12px;
    color: #1a1a1a;
    line-height: 1.4;
    flex: 1;
}

.game-card-cta {
    margin-top: 10px;
    font-size: 12px;
    font-weight: bold;
    color: #1a4d1a;
}

.game-card-soon { cursor: default; background-color: #e8ebe8; }
.game-card-soon:hover { background-color: #e8ebe8; }
.game-card-soon .game-card-icon,
.game-card-soon .game-card-title { opacity: .5; }

.game-card-tag {
    margin-top: 10px;
    font-size: 11px;
    font-weight: bold;
    color: #777777;
    text-transform: uppercase;
}

/* ── Portada / pantalla previa de un juego ── */
.game-back {
    display: inline-block;
    margin-bottom: 10px;
    color: #8fce8f;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}
.game-back:hover { color: #ffffff; text-decoration: underline; }

.game-cover {
    background-color: #0c380c;
    border: 1px solid #0d4d0d;
    padding: 26px 16px;
    text-align: center;
    margin-bottom: 14px;
}
.game-cover-icon { font-size: 46px; line-height: 1; }
.game-cover h1 {
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    margin: 8px 0 0;
}

.game-howto {
    background-color: #ffffff;
    border: 1px solid #0d4d0d;
    padding: 16px 18px;
    margin-bottom: 14px;
    color: #1a1a1a;
}
.game-howto h2 {
    color: #0c380c;
    font-size: 14px;
    font-weight: bold;
    margin: 16px 0 6px;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 3px;
}
.game-howto h2:first-child { margin-top: 0; }
.game-howto p {
    color: #1a1a1a;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 6px;
}

.game-modes { margin-top: 4px; }

.game-mode {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background-color: #f4f6f4;
    border: 1px solid #b9c9b9;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
}
.game-mode:hover { background-color: #eef2ee; }
.game-mode input { margin-top: 2px; }
.game-mode-body { display: flex; flex-direction: column; gap: 2px; }
.game-mode-name { color: #0c380c; font-weight: bold; font-size: 13px; }
.game-mode-rules { color: #333333; font-size: 12px; line-height: 1.45; }

.arrow-hint { font-weight: bold; }
.arrow-after { color: #1a7d1a; }
.arrow-before { color: #c0392b; }

.game-start-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #1a4d1a;
    color: #ffffff;
    border: 1px solid #0d4d0d;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.game-start-btn:hover { background-color: #0c380c; }

.game-construction { padding: 30px 16px; color: #ffffff; }
.game-construction-icon { font-size: 44px; }
.game-construction h2 { color: #ffffff; font-size: 17px; margin: 10px 0 6px; }
.game-construction p { color: #cfe0cf; font-size: 12px; margin: 3px 0; }
.game-construction-note { color: #9fb09f !important; font-size: 11px; }

/* ── Lock diario + racha (Ya jugaste hoy) ── */
.game-already {
    background-color: #ffffff;
    border: 1px solid #0d4d0d;
    padding: 22px 18px;
    margin-bottom: 14px;
    color: #1a1a1a;
    text-align: center;
}
.ap-icon { font-size: 38px; line-height: 1; margin-bottom: 6px; }
.game-already h2 {
    color: #0c380c;
    font-size: 16px;
    font-weight: bold;
    margin: 4px 0 10px;
}
.ap-answer { font-size: 13px; margin: 6px 0; }
.ap-answer strong { color: #0c380c; }
.ap-meta { color: #5c705c; font-size: 11px; font-weight: normal; }
.ap-attempts { font-size: 12px; color: #3a4d3a; margin: 4px 0 12px; }
.game-streak {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 12px 0;
    padding: 10px 0;
    border-top: 1px solid #cfe0cf;
    border-bottom: 1px solid #cfe0cf;
    font-size: 12px;
}
.game-streak strong { color: #0c380c; font-size: 14px; }
.ap-tomorrow { color: #5c705c; font-size: 11px; margin-top: 10px; }

/* ── Juego 1: Adivina el Torneo ── */
.torneo-board {
    background-color: #ffffff;
    border: 1px solid #0d4d0d;
    padding: 16px 18px;
    color: #1a1a1a;
}

.torneo-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 8px;
    margin-bottom: 12px;
}
.torneo-mode-tag {
    background-color: #1a4d1a;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
}
.torneo-prompt { font-size: 14px; font-weight: bold; color: #0c380c; }

.torneo-table-wrap { margin-bottom: 14px; overflow-x: auto; }

/* En el Juego 1 reusamos el renderer oficial del bracket. Sus contenedores
   internos vienen con overflow-x:auto y meten un scroll horizontal interno.
   Lo deshabilitamos en todos los descendientes para que el scroll quede
   delegado a la página (si hiciera falta) y no aparezca una barra adentro. */
.torneo-bracket-host,
.torneo-bracket-host * {
    overflow-x: visible !important;
}
.torneo-bracket-host { width: 100%; }

/* ── Bracket (CL / Libertadores en Juego 1) ── */
.torneo-bracket {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding: 6px 2px 12px;
}
.bracket-round {
    flex: 0 0 auto;
    min-width: 215px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bracket-round-title {
    font-size: 11px;
    font-weight: bold;
    color: #0c380c;
    background-color: #d4e8d4;
    padding: 4px 8px;
    text-align: center;
    border: 1px solid #0d4d0d;
}
.bracket-series {
    background-color: #ffffff;
    border: 1px solid #0d4d0d;
    padding: 6px 8px;
    font-size: 11px;
    color: #1a1a1a;
}
.bracket-hdr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px 22px 30px;
    gap: 4px;
    font-size: 9px;
    color: #5c705c;
    text-align: center;
    margin-bottom: 2px;
}
.bracket-hdr span:first-child { text-align: left; }
.bracket-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px 22px 30px;
    gap: 4px;
    align-items: center;
    line-height: 1.5;
}
.bracket-row span { text-align: center; }
.bracket-team {
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}
.bracket-team .team-crest-inline { width: 14px; height: 14px; flex: 0 0 14px; }
.bracket-agg { font-weight: bold; color: #0c380c; }
.torneo-bracket-empty {
    text-align: center;
    color: #cfe0cf;
    padding: 20px;
    background-color: #0c380c;
    border: 1px solid #0d4d0d;
    margin-bottom: 14px;
}

.torneo-guesses { max-width: 460px; margin: 0 auto 12px; }
.torneo-guess {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #cccccc;
    padding: 7px 10px;
    margin-bottom: 5px;
    font-size: 13px;
}
.torneo-guess span { font-weight: bold; }
.torneo-guess-ok  { background-color: #d6ffdb; border-color: #1a7d1a; }
.torneo-guess-bad { background-color: #ffe3e3; border-color: #c0392b; }
.torneo-guess .arrow-hint { font-size: 16px; }
.torneo-guess-mark { font-weight: bold; font-size: 15px; }
.torneo-guess-mark.ok  { color: #1a7d1a; }
.torneo-guess-mark.bad { color: #c0392b; }

.torneo-attempts {
    font-size: 13px;
    color: #333333;
    margin: 0 0 10px;
    text-align: center;
}
.torneo-attempts strong { color: #0c380c; font-size: 16px; }

.torneo-search {
    position: relative;
    max-width: 460px;
    margin: 0 auto;
}
.game-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    background-color: #ffffff;
    border: 2px solid #0d4d0d;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #1a1a1a;
}
.game-input::placeholder { color: #8a988a; }
.game-input:focus { outline: none; border-color: #1a7d1a; background-color: #f4fff4; }

.game-panel {
    background-color: #ffffff;
    border: 1px solid #0d4d0d;
    padding: 16px;
}

.torneo-ac {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background-color: #ffffff;
    border: 1px solid #0d4d0d;
    border-top: none;
    max-height: 220px;
    overflow-y: auto;
    z-index: 20;
}
.torneo-ac-item {
    padding: 7px 10px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #eeeeee;
}
.torneo-ac-item:hover { background-color: #eef2ee; }
.torneo-ac-empty { padding: 7px 10px; font-size: 12px; color: #888888; }

.torneo-result {
    max-width: 460px;
    margin: 0 auto;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    border: 1px solid;
}
.torneo-win  { background-color: #d6ffdb; border-color: #1a7d1a; color: #0c380c; }
.torneo-lose { background-color: #ffe3e3; border-color: #c0392b; color: #7a1f17; }

/* ── Juego 2: Adivina el Equipo por Palmarés ── */
.palmares-board { color: #1a1a1a; }

.palmares-card {
    background-color: #ffffff;
    border: 1px solid #0d4d0d;
    padding: 18px;
    text-align: center;
    margin-bottom: 12px;
}
.palmares-card.won { border-color: #1a7d1a; }

.palmares-crest {
    width: 84px;
    height: 84px;
    object-fit: contain;
}
.palmares-card.won .palmares-crest { animation: palmaresPop 0.55s ease-out; }
@keyframes palmaresPop {
    0%   { transform: scale(0.4); opacity: 0; }
    65%  { transform: scale(1.18); }
    100% { transform: scale(1); opacity: 1; }
}

.palmares-identity { margin: 6px 0 4px; min-height: 22px; }
.palmares-name { font-size: 18px; font-weight: bold; color: #0c380c; }
.palmares-name.palmares-unknown { font-size: 26px; color: #b9c9b9; }
.palmares-country { font-size: 13px; color: #555555; }

.palmares-sections { text-align: left; margin-top: 12px; }
.pal-sec { margin-bottom: 12px; }
.pal-sec:last-child { margin-bottom: 0; }
.pal-sec-title {
    font-size: 14px;
    font-weight: bold;
    color: #0c380c;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 3px;
    margin-bottom: 7px;
}
.pal-count { color: #1a4d1a; }

.pal-cups { display: flex; flex-wrap: wrap; gap: 6px; }
.pal-cup {
    background-color: #f4f6f4;
    border: 1px solid #b9c9b9;
    padding: 4px 9px;
    font-size: 12px;
    color: #1a1a1a;
}
.pal-cup-n { color: #1a4d1a; font-weight: bold; }

.game-topbar { display: flex; justify-content: space-between; align-items: center; }
.game-test-btn {
    background-color: #4a3a00;
    color: #ffd966;
    border: 1px solid #6b5500;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 9px;
    margin-bottom: 10px;
    cursor: pointer;
}
.game-test-btn:hover { background-color: #6b5500; }

/* ── Juego 3: Adivina el Escudo I ── */
.escudo-canvas {
    width: 220px;
    height: 220px;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    filter: grayscale(100%) contrast(1.1);
    transform: scaleY(-1);
}
.escudo-reveal {
    width: 150px;
    height: 150px;
    object-fit: contain;
}
.escudo-reveal.won { animation: palmaresPop 0.55s ease-out; }

/* ── Juego 4: Adivina el Escudo II (zoom) ── */
.escudo-zoom {
    width: 240px;
    height: 240px;
    border: 1px solid #cccccc;
}
.escudo-zoom.bw { filter: grayscale(100%) contrast(1.1); }

/* ── Juego 5: Loldle ── */
.game-howto-list {
    margin: 4px 0 0 18px;
    padding: 0;
    color: #1a1a1a;
    font-size: 12px;
    line-height: 1.6;
}
.game-howto-list li { margin-bottom: 2px; }
.game-howto-list strong { color: #0c380c; }

.loldle-hint {
    text-align: center;
    color: #cfe0cf;
    font-size: 12px;
    font-style: italic;
    margin: 14px 0 0;
}

.loldle-scroll {
    overflow-x: auto;
    margin-top: 12px;
    padding-bottom: 4px;
}

.loldle-grid {
    display: grid;
    grid-template-columns: 116px repeat(7, 84px);
    gap: 4px;
    min-width: 720px;
    margin: 0 auto;
    width: -moz-fit-content;
    width: fit-content;
}

.loldle-cell {
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.2;
    padding: 4px 6px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.loldle-head {
    background-color: #0c380c;
    color: #ffffff;
    font-size: 10px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    height: 38px;
}

.loldle-team {
    background-color: #ffffff;
    color: #0c380c;
    gap: 3px;
}
.loldle-team img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.loldle-team span {
    font-size: 10px;
    color: #1a1a1a;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.loldle-green   { background-color: #2f9e2f; color: #ffffff; }
.loldle-red     { background-color: #cf2e2e; color: #ffffff; }
.loldle-yellow  { background-color: #d4a017; color: #ffffff; }
.loldle-unknown { background-color: #7a7a7a; color: #ffffff; }

.loldle-anim {
    animation: loldleReveal 0.45s ease-out both;
    transform-origin: center;
}
@keyframes loldleReveal {
    0%   { transform: rotateX(90deg); opacity: 0; }
    60%  { transform: rotateX(-8deg); opacity: 1; }
    100% { transform: rotateX(0); opacity: 1; }
}