.games-page,
.game-detail-page {
  width: 100%;
}

.games-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.games-title {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: #111827;
}

.games-subtitle {
  margin: 6px 0 0;
  color: #6b7280;
  font-size: 14px;
}

.games-primary-button {
  border: 0;
  border-radius: 10px;
  padding: 12px 18px;
  background: #dc2626;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.games-panel,
.game-summary-card,
.game-options-card,
.game-action-content {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
}

.games-panel {
  padding: 20px;
}

.games-toolbar {
  margin-bottom: 18px;
}

.games-search {
  width: 100%;
  max-width: 480px;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  outline: none;
  font-size: 14px;
}

.games-search:focus {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}

.games-table {
  width: 100%;
  border-collapse: collapse;
}

.games-table th {
  padding: 12px 10px;
  text-align: left;
  color: #6b7280;
  font-size: 12px;
  text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb;
}

.games-table td {
  padding: 14px 10px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}

.games-table tr:last-child td {
  border-bottom: 0;
}

.game-open-button {
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  background: #111827;
  color: #ffffff;
  cursor: pointer;
  font-weight: 700;
}

.game-open-button:hover {
  background: #dc2626;
}

.game-back-button {
  margin-bottom: 18px;
  border: 0;
  background: transparent;
  color: #374151;
  font-weight: 700;
  cursor: pointer;
}

.game-summary-card {
  padding: 24px;
  margin-bottom: 22px;
}

.game-summary-status {
  display: flex;
  justify-content: flex-end;
}

.game-status-badge {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 12px;
  font-weight: 800;
}

.game-status-badge.is-final {
  background: #fee2e2;
  color: #991b1b;
}

.game-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  padding: 22px 0;
}

.game-team {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.game-team-right {
  text-align: right;
}

.game-team-label {
  color: #6b7280;
  font-size: 11px;
  font-weight: 800;
}

.game-team-name {
  font-size: 25px;
  font-weight: 900;
}

.game-vs {
  font-size: 18px;
  font-weight: 900;
  color: #9ca3af;
}

.game-information {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  border-top: 1px solid #e5e7eb;
  padding-top: 18px;
}

.game-information div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.game-information span {
  font-size: 11px;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 800;
}

.game-information strong {
  font-size: 14px;
}

.game-options-card {
  padding: 26px;
}

.game-options-heading h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 900;
  text-transform: uppercase;
}

.game-options-heading p {
  margin: 7px 0 0;
  color: #6b7280;
  font-weight: 700;
}

.game-options-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 16px;
}

.game-action {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 7px 0 rgba(15, 23, 42, 0.20);
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}

.game-action:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.game-action:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.20);
}

.game-action-icon {
  min-width: 28px;
  font-size: 13px;
}

.game-action-red {
  background: #dc2626;
}

.game-action-orange {
  background: #d97706;
}

.game-action-green {
  background: #15803d;
}

.game-action-blue {
  background: #2563eb;
}

.game-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.game-readonly-notice{margin:14px 0;padding:12px 15px;border:1px solid #f2c66d;border-left:5px solid #e58a00;border-radius:10px;background:#fff8e8;color:#74500c;font-size:13px;font-weight:800}

.game-action-content {
  margin-top: 22px;
  padding: 24px;
}

.game-action-placeholder h3 {
  margin-top: 0;
}

.game-action-placeholder p {
  margin-bottom: 0;
  color: #6b7280;
}

@media (max-width: 1000px) {
  .game-options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .games-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .game-matchup {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .game-team,
  .game-team-right {
    text-align: center;
  }

  .game-information {
    grid-template-columns: 1fr;
  }

  .game-options-grid {
    grid-template-columns: 1fr;
  }

  .games-table {
    display: block;
    overflow-x: auto;
  }
}


/* ==========================================================
   UX JUEGOS V2
   ========================================================== */

.games-panel {
  padding: 22px;
  overflow: hidden;
}

.games-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.games-search {
  min-height: 46px;
  max-width: 560px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 15px;
  background: #ffffff;
}

.games-table {
  border-collapse: separate;
  border-spacing: 0;
}

.games-table thead th {
  height: 48px;
  padding: 0 14px;
  vertical-align: middle;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.games-table thead th:first-child {
  border-left: 1px solid #e5e7eb;
  border-top-left-radius: 12px;
}

.games-table thead th:last-child {
  border-right: 1px solid #e5e7eb;
  border-top-right-radius: 12px;
}

.games-row {
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.games-row:hover {
  background: #f8fafc;
}

.games-table td {
  height: 64px;
  padding: 10px 14px;
  vertical-align: middle;
  border-bottom: 1px solid #edf2f7;
  font-size: 14px;
}

.games-action-column {
  width: 215px;
  min-width: 215px;
}

.game-row-actions { display:flex; align-items:center; gap:9px; }
.game-delete-button { min-width:48px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; border:2px solid #a91524; border-radius:10px; background:#dc2638; color:#fff; font-size:25px; font-weight:950; line-height:1; cursor:pointer; box-shadow:0 4px 0 #85111e,0 6px 13px rgba(220,38,56,.2); }
.game-delete-button:hover { background:#bd1e2f; transform:translateY(-1px); }
.game-delete-button:active { transform:translateY(1px); box-shadow:0 2px 0 #85111e; }
.game-delete-button:disabled { opacity:.55; cursor:wait; transform:none; }
.game-delete-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.games-delete-confirm { max-width:560px; }
.games-delete-confirm-body { display:grid; gap:10px; padding:26px 28px 10px; color:#162033; }
.games-delete-confirm-body > strong { font-size:22px; line-height:1.25; }
.games-delete-confirm-body > span { color:#52627a; font-weight:800; }
.games-delete-confirm-body p { margin:8px 0 0; color:#5b2630; font-size:16px; line-height:1.5; }
.games-delete-danger { min-height:46px; border:0; border-radius:10px; padding:0 20px; background:#c81e32; color:#fff; font-weight:900; cursor:pointer; box-shadow:0 4px 0 #85111e; }
.games-delete-danger:hover { background:#aa1829; }
.games-delete-danger:disabled { opacity:.65; cursor:wait; }

.game-open-button {
  min-width: 132px;
  min-height: 42px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding: 0 15px;

  border: 0;
  border-radius: 10px;

  background: #2563eb;
  color: #ffffff;

  font-size: 13px;
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    0 4px 10px rgba(37, 99, 235, 0.20);

  transition:
    transform 0.12s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}

.game-open-button:hover {
  background: #1d4ed8;

  transform: translateY(-1px);

  box-shadow:
    0 6px 14px rgba(37, 99, 235, 0.28);
}

.game-open-button:active {
  transform: translateY(1px);
}

.game-open-icon {
  width: 23px;
  height: 23px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.18);

  font-size: 15px;
  font-weight: 900;
}

.games-date-cell {
  white-space: nowrap;
  font-weight: 700;
  color: #334155;
}

.games-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 88px;
  min-height: 30px;

  padding: 0 11px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
}

.games-status.is-finished {
  background: #dcfce7;
  color: #166534;
}

.games-status.is-pending {
  background: #fef3c7;
  color: #92400e;
}

.games-primary-button {
  min-height: 46px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 20px;

  border-radius: 11px;

  background: #dc2626;

  font-size: 14px;
  font-weight: 900;

  box-shadow:
    0 5px 14px rgba(220, 38, 38, 0.20);

  transition:
    transform 0.12s ease,
    background 0.12s ease;
}

.games-primary-button:hover {
  background: #b91c1c;
  transform: translateY(-1px);
}


/* Pantallas pequeñas */

@media (max-width: 900px) {

  .games-panel {
    padding: 14px;
    overflow-x: auto;
  }

  .games-table {
    min-width: 980px;
  }

  .games-action-column {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #ffffff;
  }

  .games-table thead .games-action-column {
    background: #f8fafc;
    z-index: 4;
  }
}


/* ==========================================================
   SYNERGY V2 - SUNLIGHT / FIELD UX
   Diseñado para estadios y exteriores
   ========================================================== */

.games-page {
  color: #0b1220;
}

.games-title {
  font-size: 30px;
  font-weight: 950;
  color: #050b16;
}

.games-subtitle {
  color: #475569;
  font-size: 15px;
  font-weight: 600;
}


/* PANEL MÁS BLANCO Y CONTRASTADO */

.games-panel {
  background: #ffffff;
  border: 1px solid #cbd5e1;

  box-shadow:
    0 6px 22px rgba(15, 23, 42, 0.10);
}


/* BUSCADOR */

.games-search {
  color: #0f172a;
  border: 2px solid #94a3b8;

  font-size: 16px;
  font-weight: 600;

  background: #ffffff;
}

.games-search::placeholder {
  color: #64748b;
}

.games-search:focus {
  border-color: #1d4ed8;

  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.16);
}


/* CABECERA DE LA TABLA */

.games-table thead th {
  height: 52px;

  background: #e8edf3;

  color: #253044;

  font-size: 12px;
  font-weight: 950;

  border-color: #cbd5e1;
}


/* FILAS MÁS ALTAS Y FÁCILES DE LEER */

.games-table td {
  height: 72px;

  color: #0f172a;

  border-bottom: 1px solid #cbd5e1;

  font-size: 15px;
}

.games-row:nth-child(even) {
  background: #f7f9fc;
}

.games-row:hover {
  background: #eaf2ff;
}


/* ==========================================================
   FECHA
   ========================================================== */

.games-date-cell {
  min-width: 150px;

  color: #111827;

  font-size: 15px;
  font-weight: 900;

  white-space: nowrap;
}


/* ==========================================================
   NOMBRES DE EQUIPOS
   ========================================================== */

.games-team-cell {
  min-width: 260px;

  font-size: 17px;

  color: #050b16;

  line-height: 1.25;
}

.games-team-cell strong {
  font-weight: 950;
}

.games-away-cell {
  border-left: 4px solid transparent;
}

.games-home-cell {
  border-left: 4px solid transparent;
}


/* ==========================================================
   LUGAR Y TORNEO
   ========================================================== */

.games-location-cell,
.games-tournament-cell {
  color: #334155;

  font-size: 14px;
  font-weight: 700;

  min-width: 120px;
}


/* ==========================================================
   BOTÓN PRINCIPAL
   ========================================================== */

.game-open-button {
  min-width: 145px;
  min-height: 48px;

  background: #155eef;

  border: 2px solid #0f4bc5;

  color: #ffffff;

  font-size: 14px;
  font-weight: 950;

  box-shadow:
    0 4px 0 #0b3a99,
    0 6px 13px rgba(15, 23, 42, 0.18);
}

.game-open-button:hover {
  background: #0f4fd6;

  box-shadow:
    0 4px 0 #082f82,
    0 8px 15px rgba(15, 23, 42, 0.22);
}

.game-open-icon {
  width: 26px;
  height: 26px;

  background: rgba(255,255,255,0.24);

  font-size: 17px;
}


/* ==========================================================
   ESTADOS MUY VISIBLES
   ========================================================== */

.games-status {
  min-width: 104px;
  min-height: 34px;

  padding: 0 14px;

  border: 2px solid transparent;

  font-size: 13px;
  font-weight: 950;
}

.games-status.is-finished {
  background: #bbf7d0;
  color: #064e3b;

  border-color: #22c55e;
}

.games-status.is-pending {
  background: #fde68a;
  color: #713f12;

  border-color: #f59e0b;
}


/* ==========================================================
   NUEVO JUEGO
   ========================================================== */

.games-primary-button {
  min-height: 50px;

  padding-left: 23px;
  padding-right: 23px;

  background: #dc2626;

  border: 2px solid #b91c1c;

  color: #ffffff;

  font-size: 15px;
  font-weight: 950;

  box-shadow:
    0 4px 0 #991b1b,
    0 7px 15px rgba(127, 29, 29, 0.18);
}


/* ==========================================================
   EXTERIORES / TABLET
   ========================================================== */

@media (max-width: 1200px) {

  .games-team-cell {
    min-width: 220px;
  }

  .games-table td {
    font-size: 14px;
  }

  .games-team-cell {
    font-size: 16px;
  }
}


/* ==========================================================
   ACCESSIBILITY / HIGH VISIBILITY FOCUS
   Optimizado para teclado, tablet y uso exterior
   ========================================================== */

/*
 * Solo mostramos el anillo fuerte cuando la navegación
 * realmente requiere foco visible (por ejemplo teclado).
 */

.game-open-button:focus-visible {
  outline: 4px solid #0b1220;
  outline-offset: 3px;

  box-shadow:
    0 0 0 7px #ffffff,
    0 4px 0 #0b3a99,
    0 8px 18px rgba(15, 23, 42, 0.32);
}

.games-primary-button:focus-visible {
  outline: 4px solid #0b1220;
  outline-offset: 3px;

  box-shadow:
    0 0 0 7px #ffffff,
    0 4px 0 #991b1b,
    0 8px 18px rgba(15, 23, 42, 0.30);
}

.games-search:focus-visible {
  outline: 4px solid #1d4ed8;
  outline-offset: 2px;

  border-color: #0f4fd6;

  box-shadow:
    0 0 0 7px #ffffff,
    0 0 0 10px rgba(29, 78, 216, 0.30);
}


/*
 * Compatibilidad para navegadores donde focus-visible
 * pueda comportarse de forma diferente.
 */

.game-open-button:focus,
.games-primary-button:focus {
  position: relative;
  z-index: 5;
}


/*
 * La fila también ayuda visualmente a localizar el juego
 * cuyo botón tiene el foco.
 */

.games-row:focus-within {
  background: #dbeafe;

  box-shadow:
    inset 5px 0 0 #1d4ed8;
}


/*
 * Mantener contraste cuando el usuario utiliza
 * configuración de alto contraste del sistema.
 */

@media (forced-colors: active) {

  .game-open-button:focus-visible,
  .games-primary-button:focus-visible,
  .games-search:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }

  .games-row:focus-within {
    outline: 2px solid Highlight;
  }
}


/* ==========================================================
   GAME DETAIL - TABLET FIRST UX
   ========================================================== */

.game-summary-card {
  padding: 22px 26px;
}

.game-matchup-stacked {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;

  padding: 12px 0 20px;
}

.game-team-block {
  width: 100%;
  padding: 14px 16px;

  border: 1px solid #cbd5e1;
  border-radius: 12px;

  background: #f8fafc;
}

.game-team-block .game-team-label {
  display: block;

  margin-bottom: 5px;

  color: #475569;

  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.game-team-block .game-team-name {
  color: #050b16;

  font-size: 25px;
  font-weight: 950;

  line-height: 1.15;
}

.game-vs-stacked {
  text-align: center;

  color: #64748b;

  font-size: 14px;
  font-weight: 950;
}


/* INFORMACION DEL JUEGO */

.game-information-stacked {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

  padding-top: 16px;
}

.game-information-stacked > div {
  min-height: 74px;

  padding: 12px 14px;

  border: 1px solid #dbe2ea;
  border-radius: 10px;

  background: #ffffff;
}

.game-information-stacked span {
  color: #475569;

  font-size: 11px;
  font-weight: 950;
}

.game-information-stacked strong {
  margin-top: 5px;

  color: #0f172a;

  font-size: 15px;
  font-weight: 900;
}


/* ==========================================================
   OPCIONES DEL JUEGO
   ========================================================== */

.game-options-card {
  padding: 24px 26px;
}

.game-options-heading h2 {
  font-size: 27px;
}

.game-options-heading p {
  font-size: 15px;
}


/*
 * En desktop mantenemos 3 columnas,
 * pero los botones crecen para ser cómodos al tacto.
 */

.game-options-grid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 16px;
}

.game-action {
  min-height: 82px;

  padding: 15px;

  font-size: 16px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

  .game-summary-card,
  .game-options-card {
    padding: 20px;
  }

  .game-team-block .game-team-name {
    font-size: 23px;
  }

  /*
   * TABLET: 2 botones por fila.
   */

  .game-options-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 14px;
  }

  .game-action {
    min-height: 86px;

    font-size: 16px;
  }

}


/* ==========================================================
   TABLET VERTICAL / MOVIL
   ========================================================== */

@media (max-width: 720px) {

  .game-summary-card {
    padding: 16px;
  }

  .game-team-block {
    padding: 13px;
  }

  .game-team-block .game-team-name {
    font-size: 21px;
  }

  .game-information-stacked {
    grid-template-columns: 1fr;
  }

  /*
   * Un botón por fila para máxima claridad.
   */

  .game-options-grid {
    grid-template-columns: 1fr;
  }

  .game-action {
    min-height: 70px;
  }

}


/* ==========================================================
   GAMES RESPONSIVE MATRIX V1
   Una lógica / una API / tres presentaciones
   ========================================================== */


/* ==========================================================
   BASE
   ========================================================== */

.games-mobile-list,
.games-tablet-wrapper,
.games-desktop-wrapper {
  display: none;
}


/* ==========================================================
   MOBILE
   0 - 720px
   TARJETAS
   ========================================================== */

@media (max-width: 720px) {

  .games-mobile-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .games-tablet-wrapper,
  .games-desktop-wrapper {
    display: none;
  }


  .games-panel {
    padding: 12px;
    border-radius: 14px;
  }


  .games-toolbar {
    margin-bottom: 14px;
  }


  .games-search {
    width: 100%;
    max-width: none;
    min-height: 52px;

    font-size: 16px;
  }


  .games-mobile-card {
    padding: 16px;

    border: 2px solid #cbd5e1;
    border-radius: 14px;

    background: #ffffff;

    box-shadow:
      0 5px 14px rgba(15, 23, 42, 0.10);
  }


  .games-mobile-card:focus-within {
    border-color: #1d4ed8;

    box-shadow:
      0 0 0 3px rgba(29, 78, 216, 0.18),
      0 7px 18px rgba(15, 23, 42, 0.14);
  }


  .games-mobile-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 16px;
  }


  .games-mobile-date {
    color: #0b1220;

    font-size: 16px;
    font-weight: 950;
  }


  .games-mobile-matchup {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 14px;

    border-radius: 12px;

    background: #f1f5f9;
  }


  .games-mobile-team {
    display: flex;
    flex-direction: column;

    gap: 3px;
  }


  .games-mobile-team-label {
    color: #475569;

    font-size: 11px;
    font-weight: 950;

    letter-spacing: 0.05em;
  }


  .games-mobile-team strong {
    color: #050b16;

    font-size: 20px;
    font-weight: 950;

    line-height: 1.15;
  }


  .games-mobile-vs {
    color: #64748b;

    font-size: 12px;
    font-weight: 950;
  }


  .games-mobile-details {
    display: grid;
    grid-template-columns: 1fr;

    gap: 9px;

    margin-top: 13px;
  }


  .games-mobile-details div {
    display: flex;
    flex-direction: column;

    gap: 3px;
  }


  .games-mobile-details span {
    color: #64748b;

    font-size: 11px;
    font-weight: 900;

    text-transform: uppercase;
  }


  .games-mobile-details strong {
    color: #0f172a;

    font-size: 14px;
    font-weight: 800;
  }


  .games-mobile-action {
    margin-top: 16px;
  }

  .games-mobile-action .game-row-actions { display:grid; grid-template-columns:minmax(0,1fr) 56px; gap:10px; }
  .games-mobile-action .game-delete-button { width:56px; min-height:54px; }


  .game-open-button-mobile {
    width: 100%;

    min-height: 54px;

    font-size: 15px;
  }


  .games-status {
    min-height: 32px;

    font-size: 12px;
  }

}


/* ==========================================================
   TABLET
   721 - 1100px
   TABLA SIMPLIFICADA
   ========================================================== */

@media
  (min-width: 721px)
  and (max-width: 1100px) {

  .games-tablet-wrapper {
    display: block;

    width: 100%;
    overflow-x: auto;
  }

  .games-mobile-list,
  .games-desktop-wrapper {
    display: none;
  }


  .games-tablet-table {
    width: 100%;

    min-width: 720px;
  }


  .games-tablet-table th,
  .games-tablet-table td {
    padding-left: 12px;
    padding-right: 12px;
  }


  .games-tablet-table .games-action-column {
    width: 215px;
    min-width: 215px;
  }


  .games-tablet-matchup-cell {
    min-width: 300px;
  }


  .games-tablet-team {
    display: flex;
    flex-direction: column;

    gap: 2px;
  }


  .games-tablet-team span {
    color: #64748b;

    font-size: 10px;
    font-weight: 950;

    letter-spacing: 0.05em;
  }


  .games-tablet-team strong {
    color: #050b16;

    font-size: 16px;
    font-weight: 950;

    line-height: 1.15;
  }


  .games-tablet-vs {
    margin: 5px 0;

    color: #64748b;

    font-size: 11px;
    font-weight: 950;
  }


  .games-tablet-meta {
    margin-top: 7px;

    color: #475569;

    font-size: 12px;
    font-weight: 700;
  }


  .game-open-button {
    min-height: 52px;
  }

}


/* ==========================================================
   DESKTOP
   1101px+
   TABLA COMPLETA
   ========================================================== */

@media (min-width: 1101px) {

  .games-desktop-wrapper {
    display: block;

    width: 100%;
    overflow-x: auto;
  }

  .games-mobile-list,
  .games-tablet-wrapper {
    display: none;
  }


  .games-desktop-table {
    width: 100%;
  }

}


/* ==========================================================
   TOUCH DEVICES
   Tablets / móviles incluso con resoluciones grandes
   ========================================================== */

@media (pointer: coarse) {

  .game-open-button,
  .games-primary-button,
  .games-search {
    min-height: 52px;
  }


  .game-open-button {
    padding-left: 17px;
    padding-right: 17px;
  }

}

body.games-modal-open { overflow: hidden; }
.games-create-overlay { position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:18px; background:rgba(5,13,27,.78); backdrop-filter:blur(7px); }
.games-create-modal { width:min(760px,100%); max-height:95vh; overflow:auto; border:1px solid #d8e2ee; border-radius:18px; background:#f7f9fc; box-shadow:0 28px 80px rgba(0,0,0,.35); }
.games-create-modal>header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; background:linear-gradient(125deg,#091426,#163b68); color:#fff; }
.games-create-modal>header span { color:#ff6877; font-size:11px; font-weight:950; letter-spacing:1.3px; }.games-create-modal>header h2{margin:3px 0 0;font-size:26px}.games-create-modal>header button{width:40px;height:40px;border:0;border-radius:9px;background:#dc2638;color:#fff;font-size:25px;cursor:pointer}
.games-create-matchup { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:end; padding:22px; background:#fff; border-bottom:1px solid #dce4ee; }.games-create-matchup>strong{padding-bottom:12px;color:#8b98aa}.games-create-matchup label,.games-create-fields label{display:grid;gap:6px}.games-create-matchup span,.games-create-fields span{font-size:11px;font-weight:950;letter-spacing:.8px;color:#42546c}.games-create-matchup label:first-child span{color:#dc2638}.games-create-matchup label:last-child span{color:#155eef}
.games-create-modal select,.games-create-modal input{width:100%;min-height:46px;border:1px solid #c9d4e2;border-radius:9px;background:#fff;padding:0 12px;color:#172033;font-size:14px}.games-create-modal select:focus,.games-create-modal input:focus{outline:3px solid rgba(21,94,239,.15);border-color:#155eef}
.games-create-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:20px 22px}.games-create-fields label:last-child{grid-column:1/-1}.games-create-error{min-height:22px;padding:0 22px;color:#bf1728;font-size:13px;font-weight:800}.games-create-modal>footer{display:flex;justify-content:flex-end;gap:10px;padding:15px 22px 20px}.games-create-modal>footer button{min-height:44px;padding:0 18px;border:0;border-radius:9px;font-weight:900;cursor:pointer}.games-create-cancel{background:#e4e9f0;color:#34445a}.games-create-submit{background:#079455;color:#fff;box-shadow:0 7px 18px rgba(7,148,85,.24)}.games-create-loading{display:grid;gap:14px;place-items:center;min-height:180px;padding:30px;font-weight:900}.games-create-loading button{padding:10px 16px}
@media(max-width:620px){.games-create-overlay{padding:0}.games-create-modal{max-height:100vh;border-radius:0}.games-create-matchup,.games-create-fields{grid-template-columns:1fr}.games-create-matchup>strong{display:none}.games-create-fields label:last-child{grid-column:auto}.games-create-modal>footer{display:grid;grid-template-columns:1fr 1fr}.games-create-modal>footer button{padding:0 8px}}


/* ==========================================================
   TABLET PORTRAIT
   Más espacio vertical y botones cómodos
   ========================================================== */

@media
  (min-width: 721px)
  and (max-width: 1100px)
  and (orientation: portrait) {

  .games-tablet-matchup-cell {
    min-width: 280px;
  }

  .games-panel {
    padding: 16px;
  }

}


/* ==========================================================
   EMPTY STATE
   ========================================================== */

.games-empty-state {
  min-height: 160px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 28px;

  text-align: center;

  border: 2px dashed #94a3b8;
  border-radius: 14px;

  background: #f8fafc;
}


.games-empty-state strong {
  color: #0b1220;

  font-size: 17px;
  font-weight: 950;
}


.games-empty-state span {
  color: #475569;

  font-size: 14px;
  font-weight: 600;
}


/* ==========================================================
   GAMES STATUS FILTER
   Pendientes / Finalizados
   ========================================================== */

.games-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}


.games-status-filter {
  display: inline-flex;

  padding: 4px;

  border: 2px solid #94a3b8;
  border-radius: 12px;

  background: #e8edf3;
}


.games-filter-button {
  min-height: 42px;

  padding: 0 18px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  color: #334155;

  font-size: 14px;
  font-weight: 900;

  cursor: pointer;

  transition:
    background 0.12s ease,
    color 0.12s ease,
    transform 0.12s ease;
}


.games-filter-button:hover {
  background: #ffffff;
  color: #0f172a;
}


.games-filter-button.is-active {
  background: #155eef;
  color: #ffffff;

  box-shadow:
    0 3px 8px rgba(21, 94, 239, 0.25);
}


.games-filter-button:focus-visible {
  outline: 4px solid #0b1220;
  outline-offset: 3px;

  position: relative;
  z-index: 5;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

  .games-toolbar {
    flex-direction: column;
    align-items: stretch;

    gap: 12px;
  }


  .games-status-filter {
    display: grid;
    grid-template-columns: 1fr 1fr;

    width: 100%;
  }


  .games-filter-button {
    min-height: 52px;

    padding-left: 10px;
    padding-right: 10px;

    font-size: 14px;
  }


  .games-search {
    width: 100%;
  }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media
  (min-width: 721px)
  and (max-width: 1100px) {

  .games-status-filter {
    flex: 0 0 auto;
  }


  .games-filter-button {
    min-height: 48px;
  }


  .games-search {
    flex: 1 1 300px;
  }

}


/* Touch */

@media (pointer: coarse) {

  .games-filter-button {
    min-height: 52px;
  }

}