/* ==========================================================================
   Calendario Atl. Bembibre — hoja de estilos completa y autosuficiente.

   Va colgada de .calendario-container, no del widget de Elementor, así que
   la tabla se ve igual esté en un widget HTML, en uno de Shortcode o donde
   la pongas. Si algún día borras el CSS personalizado del widget, la tabla
   sigue con su aspecto: aquí está todo.

   PARA CAMBIAR LOS COLORES solo hay que tocar el bloque de variables de
   abajo. Los colores se definen sobre .calendario-container, que está más
   cerca de las celdas que el widget de Elementor, y por eso ganan sin
   necesidad de !important ni de pelear con selectores.
   ========================================================================== */

.calendario-container {
  /* --- Identidad --- */
  --color-principal-bembibre: #dc0202;
  --color-fondo-cabecera: #2c2c2c;
  --color-texto-cabecera: #ffffff;
  --color-borde: #dddddd;
  --color-fila-alterna: #f9f9f9;
  --color-sombra: rgba(0, 0, 0, .1);

  /* --- Resultados: verde / amarillo / rojo --- */
  --color-victoria: #1e7e34;
  --color-texto-victoria: #ffffff;
  --color-empate: #ffc107;
  --color-texto-empate: #4d3800;
  --color-derrota: #c82333;
  --color-texto-derrota: #ffffff;
  --color-pendiente: #e9ecef;
  --color-texto-pendiente: #495057;

  /* Paleta suave anterior, por si prefieres volver a ella: cambia los ocho
     valores de arriba por estos.
       --color-victoria: #d4edda;  --color-texto-victoria: #155724;
       --color-empate:   #fff3cd;  --color-texto-empate:   #856404;
       --color-derrota:  #f8d7da;  --color-texto-derrota:  #721c24;
       --color-pendiente:#e2e3e5;  --color-texto-pendiente:#383d41;
     Los cuatro pares cumplen contraste AA en ambas versiones. */

  font-family: Roboto, sans-serif;
  margin: 2em 0;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 15px var(--color-sombra);
  width: 100%;
}

/* Imprescindible: en móvil las celdas llevan padding-left: 50% para dejar
   hueco a la etiqueta. Sin border-box ese padding se suma al 100% de ancho
   y las tarjetas se salen de la pantalla. No dependemos del reset del tema. */
.calendario-container,
.calendario-container *,
.calendario-resumen,
.calendario-resumen * {
  box-sizing: border-box;
}

/* --------------------------------- Tabla --------------------------------- */

.calendario-container .calendario-tabla {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.calendario-container .calendario-tabla th,
.calendario-container .calendario-tabla td {
  padding: 14px 10px;
  vertical-align: middle;
}

.calendario-container .calendario-tabla thead th {
  background-color: var(--color-fondo-cabecera);
  color: var(--color-texto-cabecera);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .9em;
}

.calendario-container .calendario-tabla thead th:first-child { border-top-left-radius: 5px; }
.calendario-container .calendario-tabla thead th:last-child { border-top-right-radius: 5px; }

.calendario-container .calendario-tabla tbody tr { border-bottom: 1px solid var(--color-borde); }
.calendario-container .calendario-tabla tbody tr:nth-child(even) { background-color: var(--color-fila-alterna); }
.calendario-container .calendario-tabla tbody tr:last-of-type { border-bottom: none; }

/* ------------------------------- Equipos --------------------------------- */

.calendario-container .equipo-local { text-align: right; }
.calendario-container .equipo-visitante { text-align: left; }
.calendario-container .equipo-bembibre {
  font-weight: 700;
  color: var(--color-principal-bembibre);
}

/* ------------------------------ Resultados ------------------------------- */

.calendario-container .resultado {
  font-weight: 700;
  font-size: 1.1em;
  border-radius: 5px;
  padding: 8px 10px;
  min-width: 80px;
  display: inline-block;
}

.calendario-container .resultado.victoria  { background-color: var(--color-victoria);  color: var(--color-texto-victoria); }
.calendario-container .resultado.empate    { background-color: var(--color-empate);    color: var(--color-texto-empate); }
.calendario-container .resultado.derrota   { background-color: var(--color-derrota);   color: var(--color-texto-derrota); }
.calendario-container .resultado.pendiente {
  background-color: var(--color-pendiente);
  color: var(--color-texto-pendiente);
  font-size: .92em;   /* «Pendiente» es una palabra larga para un hueco de marcador */
  font-weight: 600;
}

/* Hora de comienzo, junto a la fecha */
.calendario-container .hora-partido {
  display: inline-block;
  margin-left: .35em;
  font-size: .85em;
  color: #6c757d;
  white-space: nowrap;
}

/* --------------------- Fila del próximo partido -------------------------- */
/* El !important es a propósito: hay que ganar al rayado de filas pares, que
   viene de un selector de Elementor con muchísima especificidad. */

.calendario-container .calendario-tabla tr.fila-proximo {
  background-color: #fffdf0 !important;
  box-shadow: inset 3px 0 0 var(--color-principal-bembibre);
}

/* ------------------ Separador de la segunda vuelta ----------------------- */

.calendario-container .calendario-tabla tr.fila-vueltas td {
  background-color: var(--color-fondo-cabecera);
  color: var(--color-texto-cabecera);
  font-size: .78em;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 10px !important;
}

/* -------------------------- Resumen de temporada ------------------------- */

.calendario-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  font-family: Roboto, sans-serif;
}

.calendario-resumen .resumen-dato {
  flex: 1 1 70px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  line-height: 1.2;
}

.calendario-resumen .resumen-dato.destacado {
  background: var(--color-fondo-cabecera, #2c2c2c);
  border-color: var(--color-fondo-cabecera, #2c2c2c);
}

.calendario-resumen .resumen-dato.destacado .resumen-valor,
.calendario-resumen .resumen-dato.destacado .resumen-etiqueta { color: #fff; }

.calendario-resumen .resumen-valor {
  display: block;
  font-size: 1.35em;
  font-weight: 700;
  color: #2c2c2c;
}

.calendario-resumen .resumen-etiqueta {
  display: block;
  font-size: .7em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6c757d;
}

/* ================================ Móvil ================================== */
/* Cada partido pasa a ser una tarjeta con la etiqueta de cada campo delante. */

@media screen and (max-width: 768px) {

  .calendario-container .calendario-tabla thead { display: none; }

  .calendario-container .calendario-tabla,
  .calendario-container .calendario-tabla tbody,
  .calendario-container .calendario-tabla tr,
  .calendario-container .calendario-tabla td {
    display: block;
    width: 100%;
  }

  .calendario-container .calendario-tabla tr {
    margin-bottom: 1.5em;
    border-radius: 10px;
    border: 1px solid var(--color-borde);
    box-shadow: 0 2px 8px var(--color-sombra);
    overflow: hidden;
  }

  .calendario-container .calendario-tabla tbody tr:nth-child(even) { background-color: #fff; }

  .calendario-container .calendario-tabla td {
    text-align: right;
    padding-left: 50%;
    position: relative;
    border-bottom: 1px solid var(--color-borde);
    white-space: normal !important;
  }

  .calendario-container .calendario-tabla tr td:last-child { border-bottom: none; }

  .calendario-container .calendario-tabla td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: calc(50% - 30px);
    text-align: left;
    font-weight: 600;
    color: var(--color-fondo-cabecera);
    text-transform: uppercase;
    font-size: .85em;
  }

  .calendario-container .calendario-tabla td[data-label="Jornada"] {
    background-color: var(--color-fondo-cabecera);
    color: var(--color-texto-cabecera);
    font-weight: bold;
    font-size: 1.1em;
    border-bottom: 2px solid var(--color-principal-bembibre);
  }

  .calendario-container .calendario-tabla td[data-label="Jornada"]::before { color: rgba(255, 255, 255, .8); }

  .calendario-container .calendario-tabla td[data-label="Partido"] {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .calendario-container .partido-cell-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .calendario-container .partido-cell-container .equipo-local,
  .calendario-container .partido-cell-container .equipo-visitante { text-align: right; }

  .calendario-container .vs-separator {
    font-size: .9em;
    font-weight: 600;
    color: #888;
  }

  /* En móvil la fila es una tarjeta: el resalte va en el borde, no dentro. */
  .calendario-container .calendario-tabla tr.fila-proximo {
    border: 2px solid var(--color-principal-bembibre) !important;
    box-shadow: 0 2px 8px var(--color-sombra);
  }

  /* La fila separadora no tiene data-label ni necesita sangría. */
  .calendario-container .calendario-tabla tr.fila-vueltas {
    margin-bottom: 1em;
    border: none;
    box-shadow: none;
  }

  .calendario-container .calendario-tabla tr.fila-vueltas td {
    padding-left: 10px !important;
    text-align: center;
    border-bottom: none;
  }

  .calendario-container .calendario-tabla tr.fila-vueltas td::before { content: none; }

  .calendario-resumen .resumen-dato { flex: 1 1 22%; }
}