/* ==========================================================================
   TORNEOS_STYLE.CSS - VERSIÓN "CARDS ROBUSTAS Y UNIFORMES"
   ========================================================================== */
/* =========================================
   1. CONFIGURACIÓN GLOBAL Y COLORES
   ========================================= */
:root {
  --color-primario: #0056b3;
  --color-fondo: #f4f4f9;
  --color-tarjeta: #ffffff;
  --color-texto: #333;
  --color-texto-secundario: #666;
  --color-borde: #e0e0e0;
  --color-en-juego: #dc3545;
  --color-admin: #ffc107;

  /* Colores de Torneo (Alto contraste) */
  --torneo-color-1: #80deea;
  --torneo-color-2: #fff59d;
  --torneo-color-3: #f48fb1;
  --torneo-color-4: #a5d6a7;
  --torneo-color-5: #b39ddb;

  /* Colores Ganador/Perdedor */
  --color-ganador-fondo: #e6f7ec;
  --color-ganador-texto: #228b22;
  --color-perdedor-fondo: #fafafa;
  --color-perdedor-texto: #999;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--color-fondo);
  color: var(--color-texto);
  margin: 0;
  padding: 0;
}

.container {
  max-width: auto;
  margin: 0 auto;
  padding: 6px;
}

/* =========================================
   2. ENCABEZADO Y TABS
   ========================================= */
header {
  text-align: center;
  margin-bottom: 15px;
  background-color: var(--color-tarjeta);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

header img {
  max-width: 250px;
  height: auto;
}

header h1 {
  font-size: 1.5rem;
  color: var(--color-primario);
  margin: 5px 0 0;
}

.tab-container {
  display: flex;
  overflow-x: auto;
  border-bottom: 2px solid var(--color-borde);
  margin-bottom: 15px;
  background-color: var(--color-tarjeta);
  border-radius: 8px 8px 0 0;
}

.tab-button {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-texto-secundario);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.tab-button:hover {
  color: var(--color-primario);
}

.tab-button.active {
  color: var(--color-primario);
  border-bottom: 3px solid var(--color-primario);
}

.tab-content {
  display: none;
  background-color: var(--color-tarjeta);
  padding: 15px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.filters select,
.filters input {
  flex: 1 1 200px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--color-borde);
  font-size: 1rem;
}

/* =========================================
   3. PESTAÑA PARTIDOS (MATCH CARDS)
   ========================================= */
#matches-container {
  display: grid;
  /* AUMENTADO: minmax de 320px a 380px para dar más ancho */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 15px;
  /* IMPORTANTE: Alinea altura de todas las cards en la fila */
  align-items: stretch; 
}

.match-card {
  background-color: var(--color-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  overflow: hidden; /* Ojo: Si el acordeón necesita salir, cambiar esto, pero para cards suele estar bien */
  transition: box-shadow 0.3s ease, opacity 0.3s ease;
  border-left: 5px solid var(--color-borde);
  
  /* IMPORTANTE: Fuerza a la tarjeta a llenar la altura de la celda de la grilla */
  height: 100%; 
  display: flex;
  flex-direction: column; /* Estructura base vertical */
}

/* Para el layout interno horizontal (Foto | Info) */
.match-card-inner-layout {
    display: flex;
    flex-direction: row;
    flex: 1; /* Ocupa todo el alto disponible */
}

.match-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.match-card.en-juego {
  background-color: #fffbe6;
  animation: pulse-admin 1.5s infinite alternate;
}

@keyframes pulse-admin {
  from { box-shadow: 0 0 2px var(--color-en-juego); }
  to { box-shadow: 0 0 8px var(--color-en-juego); }
}

.match-header {
  padding: 10px 12px;
  background-color: #fafafa;
  border-bottom: 1px solid var(--color-borde);
}

/* Estructura Interna de la Card (Fotos + Info) */
.match-photo-container {
  width: 100px;
  min-width: 100px;
  background-color: #f0f0f0;
  cursor: pointer;
  position: relative;
  border-right: 1px solid var(--color-borde);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  height: auto !important; /* Crece con la card */
}

.match-photo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  opacity: 0.9;
}

.match-photo-container:hover .match-photo-thumb {
  transform: scale(1.05);
  opacity: 1;
}

.photo-overlay-icon {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  border-radius: 50%;
  padding: 4px;
  font-size: 10px;
  pointer-events: none;
}

.match-card-right-col {
  flex: 1;
  min-width: 0; /* Permite que el flex encoja textos largos si es crítico */
  display: flex;
  flex-direction: column;
}

.match-body {
  display: flex; /* Cambiado a Flex para mejor control */
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  flex: 1; /* Ocupa el espacio vertical restante */
}

.team-cell {
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 10px;
  flex: 1; /* Los nombres toman el espacio disponible */
  min-width: 0; /* Permite truncar texto si es necesario */
}

.team-cell:first-child { text-align: left; }
.team-cell:last-child { text-align: right; }

.team-cell.match-winner {
  background-color: var(--color-ganador-fondo);
  font-weight: 600;
}
.team-cell.match-winner div { color: var(--color-ganador-texto); }

.team-cell.match-loser {
  background-color: var(--color-perdedor-fondo);
  color: var(--color-perdedor-texto);
  opacity: 0.7;
}

/* --- SCORE CORREGIDO: NO PARTIR LÍNEAS --- */
.match-result-score {
  padding: 0 10px;
  text-align: center;
  font-weight: bold;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  /* CLAVE: Impide que el score se rompa o se achique */
  white-space: nowrap; 
  flex-shrink: 0; 
  min-width: fit-content;
}

.match-result-score .set {
  padding: 2px 0;
  white-space: nowrap; /* Refuerzo */
}

.match-result-pending {
  font-size: 1.5rem;
  color: var(--color-texto-secundario);
  text-align: center;
  width: 100%;
}

/* Bordes de Torneo Específicos */
.torneo-clase1 { border-left: 6px solid #1976D2 !important; }
.torneo-clase2 { border-left: 6px solid #689F38 !important; }
.torneo-clase3 { border-left: 6px solid #FBC02D !important; }
.torneo-clase4 { border-left: 6px solid #C2185B !important; }
.torneo-clase5 { border-left: 6px solid #7B1FA2 !important; }


/* =========================================
   4. PESTAÑA ZONAS
   ========================================= */
.inner-tabs {
  border-top: 1px solid var(--color-borde);
  border-bottom: 2px solid var(--color-borde);
  margin-bottom: 15px;
  background-color: #fafafa;
  border-radius: 0;
}

.zone-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-size: 0.85rem;
  min-width: 600px;
}

.zone-table th,
.zone-table td {
  border: 1px solid var(--color-borde);
  padding: 8px 5px;
  text-align: center;
  white-space: nowrap;
}

.zone-table th { background-color: #f9f9f9; }
.zone-table td:first-child { font-weight: bold; }
.zone-table td:nth-child(2) { text-align: left; font-weight: 500; white-space: normal; }


/* =========================================
   5. PESTAÑA GRILLA
   ========================================= */
#grid-container {
  height: 75vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-borde);
  background: #fdfdfd;
  position: relative;
  overscroll-behavior: contain;
}

.grid-day-section {
  display: flex;
  border-bottom: 5px solid #333;
  position: relative;
}

.grid-canchas-wrapper { display: flex; flex-grow: 1; }

.grid-time-column {
  width: 35px;
  flex-shrink: 0;
  background: #f8f9fa;
  border-right: 2px solid #bbb;
  position: sticky;
  left: 0;
  z-index: 30;
}

.grid-time-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
  color: #555;
  transform: rotate(-90deg);
  white-space: nowrap;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}

.grid-day-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  background-color: #333;
  color: white;
  width: 100%;
  padding: 8px 2px;
  font-weight: bold;
}

.grid-cancha-column {
  width: 45vw;
  min-width: 160px;
  max-width: 220px;
  flex-shrink: 0;
  position: relative;
  border-right: 1px solid #eee;
}

.grid-cancha-header {
  background: var(--color-primario);
  color: white;
  text-align: center;
  padding: 10px 5px;
  font-weight: bold;
  border-bottom: 2px solid #fff;
  height: 40px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 20;
}

.grid-match-area {
  position: relative;
  width: 100%;
  background-image: linear-gradient(to bottom, #eee 1px, transparent 1px);
  background-size: 100% 20px;
}

.grid-match-absolute {
  position: absolute;
  left: 2px;
  right: 2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
  background-color: white;
  z-index: 10;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  color: #333;
  font-size: 0.7rem;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.grid-match-absolute:hover {
  z-index: 100 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  min-height: fit-content;
}

.grid-match-absolute.en-juego {
  background-color: #fffbe6 !important;
  border: 2px solid #ff0000 !important;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-size: 20px 20px;
  animation: pulse-grid 1.5s infinite alternate;
}

@keyframes pulse-grid {
  from { box-shadow: 0 0 2px #ccc; }
  to { box-shadow: 0 0 8px var(--color-en-juego); }
}

@media (max-width: 600px) {
  .grid-cancha-column { width: 42vw; min-width: 150px; }
  .grid-match-absolute { font-size: 0.6rem; }
}

/* =========================================
   6. MODO ADMIN & MODALES
   ========================================= */
.admin-footer { text-align: center; padding: 20px 0; margin-top: 20px; }
#admin-link { color: var(--color-texto-secundario); text-decoration: none; font-size: 0.9rem; }

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  max-width: 400px;
  border-radius: 8px;
  box-sizing: border-box;
}

.modal-content input, .modal-content select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

.modal-content button {
  padding: 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.admin-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: #fafafa;
  border-top: 1px solid #eee;
  padding: 0 12px;
}

.admin-panel.expanded { max-height: 350px; padding: 15px 12px; }

/* Switch Toggle */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0;}
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked+.slider { background-color: var(--color-en-juego); }
input:checked+.slider:before { transform: translateX(20px); }

/* =========================================
   7. PESTAÑA LLAVES (BRACKET)
   ========================================= */
.bracket-header-sticky {
  background: #333;
  color: white;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 50;
  flex-shrink: 0;
}

.bracket-scroll-container {
  flex: 1;
  overflow: auto;
  padding: 10px;
  background-color: #f4f4f4;
  display: flex;
}

.bracket-flex-wrapper { display: flex; gap: 0; }
.bracket-column { display: flex; flex-direction: column; min-width: 240px; }

.bracket-column-title {
  text-align: center;
  font-weight: bold;
  color: #555;
  background-color: #e0e0e0;
  padding: 6px;
  margin-bottom: 15px;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.bracket-column-matches { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-around; }
.bracket-match-container { flex: 1; display: flex; align-items: center; position: relative; padding-right: 24px; }

.bracket-match-card {
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 6px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  z-index: 2;
  position: relative;
  left: 10px;
  margin: 4px 0;
}

.bracket-match-card.match-unscheduled { opacity: 0.5; background-color: #f2f2f2; }

/* Líneas conectoras */
.bracket-column:not(:first-child) .bracket-match-card::before {
  content: ''; position: absolute; left: -11px; top: 50%; width: 10px; height: 2px; background-color: #21b52e;
}
.bracket-column:not(:last-child) .bracket-match-container::after {
  content: ''; position: absolute; right: 0; width: 12px; border-style: solid; border-width: 0; border-color: #21b52e;
}
.bracket-column:not(:last-child) .bracket-match-container:nth-child(odd)::after {
  top: 50%; height: 50%; border-top-width: 2px; border-right-width: 2px;
}
.bracket-column:not(:last-child) .bracket-match-container:nth-child(even)::after {
  top: 0; height: 50%; border-bottom-width: 2px; border-right-width: 2px;
}

/* =========================================
   8. MODAL DE FOTOS (FULLSCREEN)
   ========================================= */
#photo-modal.modal { background-color: rgba(0, 0, 0, 0.95); z-index: 10000; display: flex; align-items: center; justify-content: center; overflow-y: auto; }
.photo-modal-frame { width: 100%; max-width: 900px; min-height: 100vh; background: #fff; display: flex; flex-direction: column; }
.photo-viewport { flex: 1; background: #222; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; min-height: 200px; padding-bottom: 80px; }
#photo-modal-canvas { max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); }
.modal-close-flotante { position: fixed; top: 15px; right: 20px; color: white; font-size: 3rem; cursor: pointer; z-index: 10001; line-height: 0.5; }
.modal-nav { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 40px; cursor: pointer; padding: 20px; z-index: 3001; background: rgba(0, 0, 0, 0.2); border-radius: 5px; }
.nav-left { left: 10px; } .nav-right { right: 10px; }
.photo-controls-bar { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background-color: #000; border-top: 1px solid #333; display: flex; justify-content: center; gap: 20px; z-index: 20; }
.btn-action { flex: 1; max-width: 220px; padding: 12px 10px; border: none; border-radius: 6px; font-weight: bold; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-download { background-color: #fff; color: #000; }
.btn-share { background-color: #25D366; color: #fff; }

.loader-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 50; }
.spinner { border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


/* =========================================
   ESTILOS TABLA ADMIN (INSCRIPTOS)
   ========================================= */

.admin-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-width: 800px; /* Fuerza scroll en pantallas chicas, prioriza vista PC */
    background-color: white;
}

.admin-data-table thead {
    background-color: #343a40;
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.admin-data-table th, .admin-data-table td {
    padding: 8px 12px;
    border: 1px solid #dee2e6;
    text-align: left;
}

.admin-data-table th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: relative;
}

.admin-data-table th:hover {
    background-color: #495057;
}

/* Indicador de ordenamiento (flechita) */
.admin-data-table th.sort-asc::after { content: " ▲"; font-size: 0.7rem; opacity: 0.8; }
.admin-data-table th.sort-desc::after { content: " ▼"; font-size: 0.7rem; opacity: 0.8; }

.admin-data-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.admin-data-table tbody tr:hover {
    background-color: #e2e6ea;
}

/* Celdas especiales */
.cell-pay-ok { color: green; font-weight: bold; text-align: center; }
.cell-pay-pending { color: #dc3545; font-weight: bold; text-align: center; }
.cell-pay-free { color: #0056b3; font-weight: bold; text-align: center; }
.money-val { font-family: monospace; text-align: right; }

/* Botones de Vista */
.view-btn { transition: background 0.3s, color 0.3s; }
.view-btn.active { font-weight: bold; box-shadow: inset 0 0 5px rgba(0,0,0,0.2); }

/* --- SUB TABS (Zonas y Llaves) --- */
.sub-tabs-container, 
.bracket-tabs-container {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.sub-tabs-container::-webkit-scrollbar,
.bracket-tabs-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Estado Activo (inyectado por JS, pero reforzado aquí si se desea) */
.zone-tab-btn:active, .bracket-tab-btn:active {
    transform: scale(0.95);
}


/* =========================================
   ESTILOS LANDING MEJORADO (Activos vs Historial)
   ========================================= */

/* Títulos de Sección */
.landing-section-title {
    font-size: 1.2rem;
    color: var(--color-texto);
    margin: 30px 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-primario);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- GRID ACTIVOS (Tarjetas Grandes) --- */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.event-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
}

.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.event-card-img {
    height: 140px;
    background-color: #eee;
    position: relative;
    overflow: hidden;
}

.event-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-card-body {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.event-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #2e7d32; /* Verde Activo */
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- LISTA HISTORIAL (Reducida) --- */
.events-list-compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.event-mini-card {
    display: flex;
    align-items: center;
    background: white;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #eee;
    transition: background 0.2s;
    cursor: pointer;
}

.event-mini-card:hover {
    background: #f9f9f9;
    border-color: #ddd;
}

.mini-date-box {
    background: #eee;
    color: #555;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.8rem;
    text-align: center;
    margin-right: 15px;
    min-width: 50px;
}

.mini-info {
    flex: 1;
}

.mini-info h4 {
    margin: 0;
    font-size: 1rem;
    color: #333;
}

.mini-info small {
    color: #888;
}

.mini-action {
    color: var(--color-primario);
    font-size: 0.9rem;
    font-weight: 500;
}


/* ==========================================================================
   TORNEOS_STYLE.CSS - ESTILOS LANDING Y UI GENERAL
   ========================================================================== */

/* (Mantener todo el CSS previo de Variables, Header, Tabs, Matches, etc...) */
/* Solo reemplaza o agrega al final la sección de LANDING MEJORADO */

/* =========================================
   ESTILOS LANDING MEJORADO (Activos vs Historial)
   ========================================= */

.landing-section-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-texto);
    margin: 25px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #ddd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- GRID ACTIVOS (Tarjetas Grandes) --- */
.events-grid {
    display: grid;
    /* Cards grandes: mínimo 300px, llenan el ancho */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.event-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
    cursor: pointer;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.event-card-img {
    height: 150px;
    background-color: #eee;
    position: relative;
    overflow: hidden;
}

.event-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-placeholder {
    width: 100%; height: 100%; 
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: #ccc; background: #f5f5f5;
}

.event-badge-live {
    position: absolute;
    top: 10px; right: 10px;
    background: #d32f2f; /* Rojo vivo */
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    letter-spacing: 0.5px;
}

.event-card-body {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.event-card-body h3 {
    margin: 0 0 10px 0;
    font-size: 1.15rem;
    color: var(--color-primario);
}

.event-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 15px;
}

.event-meta i { color: #999; margin-right: 4px; }

.btn-ver-torneo {
    margin-top: auto;
    background: var(--color-primario);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}

/* --- LISTA HISTORIAL (Compacta, una debajo de otra) --- */
.events-list-compact {
    display: flex;
    flex-direction: column; /* Apilados verticalmente */
    gap: 10px;
}

.event-mini-card {
    display: flex;
    align-items: center;
    background: white;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #eee; /* Borde sutil */
    transition: background 0.2s, border-color 0.2s;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.event-mini-card:hover {
    background: #fcfcfc;
    border-color: var(--color-primario);
}

.mini-card-left {
    margin-right: 15px;
}

.mini-date-box {
    background: #f0f0f0;
    color: #555;
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.8rem;
    text-align: center;
    min-width: 45px;
}

.mini-card-center {
    flex: 1;
}

.mini-card-center h4 {
    margin: 0;
    font-size: 1rem;
    color: #333;
    font-weight: 600;
}

.mini-card-center small {
    color: #888;
    font-size: 0.8rem;
}

.mini-card-right {
    color: #ccc;
    font-size: 0.9rem;
}

.event-mini-card:hover .mini-card-right {
    color: var(--color-primario);
}

/* =========================================
   COLORES DE TORNEO (PALETA 12 COLORES)
   ========================================= */
.torneo-clase1  { border-left: 6px solid #D32F2F !important; } /* Rojo */
.torneo-clase2  { border-left: 6px solid #1976D2 !important; } /* Azul */
.torneo-clase3  { border-left: 6px solid #FBC02D !important; } /* Amarillo */
.torneo-clase4  { border-left: 6px solid #388E3C !important; } /* Verde */
.torneo-clase5  { border-left: 6px solid #F57C00 !important; } /* Naranja */
.torneo-clase6  { border-left: 6px solid #7B1FA2 !important; } /* Violeta */
.torneo-clase7  { border-left: 6px solid #0097A7 !important; } /* Cian */
.torneo-clase8  { border-left: 6px solid #C2185B !important; } /* Magenta */
.torneo-clase9  { border-left: 6px solid #F06292 !important; } /* Rosa */
.torneo-clase10 { border-left: 6px solid #5D4037 !important; } /* Marrón */
.torneo-clase11 { border-left: 6px solid #616161 !important; } /* Gris */

.torneo-clase12 { border-left: 6px solid #212121 !important; } /* Negro */


/* =========================================
   SPINNER DE ACTUALIZACIÓN (TÍTULO)
   ========================================= */
.title-loader {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-left: 10px;
    border: 2px solid rgba(0, 0, 0, 0.1); /* Borde suave */
    border-top-color: var(--color-primario); /* Color principal girando */
    border-radius: 50%;
    animation: title-spin 0.8s linear infinite;
    vertical-align: middle;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.title-loader.visible {
    opacity: 1;
}

@keyframes title-spin {
    to { transform: rotate(360deg); }
}