/* TAESYS – Estilos globales (unificación visual)
   Mantiene compatibilidad con modales en tema claro (data-bs-theme="light"). */

:root{
  --taesys-bg: #0f1115;
}

body{
  background: var(--taesys-bg);
}

/* Navbar */
.navbar{
  backdrop-filter: blur(6px);
}
.navbar .nav-link.active{
  font-weight: 600;
}

/* Alertas */
.alert{
  border-radius: .75rem;
}

/* Tablas */
.table-responsive{
  border-radius: .75rem;
  /* IMPORTANTE: no usar overflow:hidden, porque en móvil oculta la última columna
     (acciones/botones) y no permite scroll horizontal. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* En algunos Android, el swipe horizontal dentro de contenedores puede quedar “bloqueado”
     si el navegador interpreta solo scroll vertical. Forzamos a permitir ambos ejes. */
  touch-action: pan-x pan-y;
  width: 100%;
}
.table thead th{
  white-space: nowrap;
}

/* Evitar que el scroll agregue un margen inferior grande en tablas */
.table-responsive > .table{ margin-bottom: 0; }

/* Acciones dentro de tablas: permitir wrap en pantallas chicas (sin romper desktop) */
.table td .btn-group,
.table td .d-inline-flex,
.table td .d-flex{
  flex-wrap: wrap;
}

/* Modales: usar variables de Bootstrap (respeta data-bs-theme) */
.modal-content{
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
}
.modal-header,
.modal-footer{
  border-color: var(--bs-border-color);
}
/* Close visible en oscuro */
.modal-content:not([data-bs-theme="light"]) .btn-close{
  filter: invert(1) grayscale(100%);
}

/* Inputs */
.form-control,
.form-select{
  border-radius: .75rem;
}

/* Botones */
.btn{
  border-radius: .75rem;
}

/* Podio grande 1-2-3 */
.podium{display:flex;gap:16px;align-items:flex-end;justify-content:center;margin:16px 0}
.podium .place{flex:1;text-align:center;padding:12px;border-radius:8px;background:#222;color:#fff}
.podium .first{transform:scale(1.1);background:#3a2f00}
.podium .second{background:#2a2a2a}
.podium .third{background:#2a2a2a}
.podium .label{font-size:24px;font-weight:700}

/* Mantener visible el ganador seleccionado aun cuando esté deshabilitado (categoría cerrada) */
.winner-btn.active:disabled,
.winner-btn.active.disabled {
  opacity: 1 !important;
  filter: none !important;
}
.winner-btn:disabled:not(.active) {
  opacity: .45;
}

/* Winner buttons: mantener marcado en modo cerrado */
.winner-btn.locked{opacity:.55;cursor:not-allowed}
.winner-btn.is-winner.locked,.winner-btn.active.locked{opacity:1}

/* Busy overlay global (evita doble click durante guardado/carga) */
#taesysBusyOverlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 3000;
}
#taesysBusyOverlay.show{
  display: flex;
}
#taesysBusyOverlay .taesys-busy-card{
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  max-width: 90vw;
}
#taesysBusyOverlay .taesys-busy-text{
  font-weight: 600;
}

/* =============================
   Responsive (móviles)
   Objetivo: que TAESYS se vea bien en pantallas chicas (ej. Samsung A02)
   sin tocar lógica/funcionalidad.
   ============================= */

/* Evitar que badges/líneas largas rompan el layout */
.navbar .badge{
  white-space: normal;
  line-height: 1.2;
}

/* Helpers reutilizables */
.taesys-maxh-260{ max-height: 260px; }

@media (max-width: 576px){
  /* Contenedor más cómodo en móviles */
  main.container.my-4{
    margin-top: .75rem !important;
    margin-bottom: .75rem !important;
  }
  main.container{
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }

  /* Tipografías un poco más compactas */
  h1, h2, h3, .h1, .h2, .h3{
    font-size: 1.15rem;
    line-height: 1.25;
  }

  /* Cards */
  .card-header{ padding: .5rem .75rem !important; }
  .card-body{ padding: .75rem !important; }

  /* Botones: permitir wrap y bajar un toque el tamaño */
  .btn{ white-space: normal; }
  .btn.btn-sm{ padding: .35rem .6rem; }

  /* Toolbars: si el layout tiene muchos controles en fila, que respiren */
  .taesys-actions{ gap: .5rem !important; }
  .taesys-actions > *{
    width: 100%;
  }

  /* Input groups con min-width (ej. Presidente de mesa en fixture) */
  .taesys-minw-260{ min-width: 100% !important; }

  /* Tablas con altura fija: dar más aire en móvil */
  .taesys-maxh-260{ max-height: 45vh; }

  /* Tablas: acciones en columna, sin forzar horizontal */
  .table{ font-size: .9rem; }
  .table td .d-flex.gap-1,
  .table td .d-flex.gap-2{
    flex-direction: column;
    align-items: stretch !important;
  }
  .table td .d-flex.gap-1 > .btn,
  .table td .d-flex.gap-2 > .btn{
    width: 100%;
  }

  /* Llaves / bracket: que entre mejor en móviles */
  .bracket-round{ min-width: 160px !important; }
  .bracket-slot{ padding: .2rem .4rem !important; }
  .bracket-slot .text-truncate{ font-size: .85rem; }
  .winner-btn{ font-size: .75rem !important; padding: .15rem .35rem !important; }

  /* Podio */
  .podium{ flex-wrap: wrap; gap: 10px; }
  .podium .place{ min-width: 140px !important; }

  /* === Fix crítico: que SIEMPRE se puedan ver los botones (Acciones) en móvil ===
     - Si la tabla excede el ancho: permitir swipe horizontal.
     - Si no se puede/ no se quiere swippear: reducir la última columna para que entre.
     - Mantener desktop intacto.
  */
  .table-responsive{ overflow-x: auto !important; }
  .table-responsive > table{ min-width: max-content; }
  /* Última columna (acciones) no debe imponer min-width en móvil (aunque venga inline) */
  .table thead th:last-child,
  .table tbody td:last-child{
    min-width: 0 !important;
    width: auto !important;
  }
  /* Si los botones son inline, que puedan bajar de línea dentro de la celda */
  .table tbody td:last-child{
    white-space: normal !important;
  }
}

/* En móviles: mantener tablas “normales” y resolver Acciones desde el HTML (d-sm-none/d-sm-table-cell)
   para evitar depender del scroll horizontal en Android. */