/* ==========================================================================
   ABUELOKUP - Theme Gamer (Bootstrap 5.3)
   ========================================================================== */

:root{
  /* Paleta base */
  --abk-bg: #0b0f1a;
  --abk-bg-2: #0a1633;
  --abk-panel: #0f1730;
  --abk-border: #1c2a4d;
  --abk-text: #e6edff;
  --abk-muted: #9fb1d9;

  /* Azul principal basado en Abuelokoolz */
  --abk-primary: #3a6ff2;
  --abk-primary-2: #1e4fe0;
  --abk-accent: #47b0ff;

  /* Estados */
  --abk-success: #00d38f;
  --abk-info: #16d6ff;
  --abk-warning: #ffd166;
  --abk-danger: #ff4d6d;

  /* Sombras sutiles */
  --abk-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Override de variables de Bootstrap (v5.3 usa CSS vars) */
:root{
  --bs-body-bg: var(--abk-bg);
  --bs-body-color: var(--abk-text);
  --bs-primary: var(--abk-primary);
  --bs-primary-rgb: 58, 111, 242;
  --bs-link-color: var(--abk-accent);
  --bs-link-hover-color: #b7d6ff;
  --bs-border-color: var(--abk-border);
  --bs-success: var(--abk-success);
  --bs-info: var(--abk-info);
  --bs-warning: var(--abk-warning);
  --bs-danger: var(--abk-danger);
}

/* ====== Tipografía & helpers ====== */
body{
  background: radial-gradient(120% 180% at -10% -20%, #0e1a3a 0%, var(--abk-bg) 55%) fixed;
  color: var(--abk-text);
}
.text-secondary{ color: var(--abk-muted) !important; }
a{ transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.object-fit-cover{ object-fit: cover; }

/* ====== Header ====== */
.abk-header{
  background: linear-gradient(180deg, var(--abk-bg-2) 0%, #0b1531 100%);
  box-shadow: 0 2px 0 rgba(58,111,242,.25);
}
.abk-brand-logo{ height: 38px; width:auto; filter: drop-shadow(0 2px 6px rgba(58,111,242,.35)); }

/* ====== Layout ====== */
.abk-layout{ display:flex; min-height: calc(100vh - 56px); }
.abk-sidebar{
  width:260px; flex:0 0 260px;
  background: linear-gradient(180deg, #0b1b3b 0%, #081029 100%);
  border-right: 1px solid var(--abk-border);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.03);
}
.abk-sidebar .nav-link{
  color:#cfe3ff; border-radius:.5rem; padding:.6rem .8rem;
}
.abk-sidebar .nav-link i{ width: 1.25rem; display:inline-block; }
.abk-sidebar .nav-link.active,
.abk-sidebar .nav-link:hover{
  background: rgba(58,111,242,.15);
  color:#fff;
}
.abk-overlay{ background: rgba(0,0,0,.35); }

.abk-content{ flex:1; background: var(--abk-bg); }
.abk-main{ padding: 1rem; }

@media (max-width: 991.98px){
  .abk-sidebar{ position:fixed; inset:0 auto 0 0; transform: translateX(-100%); transition: transform .2s ease-in-out; z-index:1040; }
  .abk-sidebar.show{ transform: translateX(0); }
  .abk-overlay{ position:fixed; inset:0; display:none; z-index:1035; }
  .abk-overlay.show{ display:block; }
}

/* ====== Hero / Cards ====== */
.abk-hero{
  background: radial-gradient(96% 125% at 0% 0%, #0f2447 0%, #0b1020 100%);
  box-shadow: var(--abk-shadow);
}
.abk-card{
  background: var(--abk-panel);
  border: 1px solid var(--abk-border);
  transition: transform .1s ease, box-shadow .1s ease;
}
.abk-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10,22,51,.35);
}

/* ====== Botones ====== */
.btn-primary{
  background: linear-gradient(180deg, var(--abk-primary) 0%, var(--abk-primary-2) 100%);
  border-color: var(--abk-primary-2);
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-outline-light{ border-color: var(--abk-primary); color:#dfe8ff; }
.btn-outline-light:hover{ background: var(--abk-primary); color:#fff; }

/* ====== Formularios & Modales ====== */
.modal-content{
  background: linear-gradient(180deg, #0c1431 0%, #0a0f24 100%);
  border:1px solid var(--abk-border);
  box-shadow: var(--abk-shadow);
}
.form-control, .form-select{
  background:#0f1730; color:#e5edff; border:1px solid #21315b;
}
.form-control:focus, .form-select:focus{
  border-color: var(--abk-primary);
  box-shadow: 0 0 0 .2rem rgba(58,111,242,.25);
}
.input-group-text{ background:#0f1730; color:#bcd0ff; border-color:#21315b; }

/* ====== DataTables (dark) ====== */
.table{ color: var(--abk-text); }
.table thead th{ border-bottom-color: var(--abk-border) !important; }
.table tbody td, .table tbody th{ border-top-color: var(--abk-border) !important; }

.dataTables_wrapper .dataTables_filter input{
  background:#0f1730; border:1px solid #21315b; color:#e5edff;
}
.dataTables_wrapper .dataTables_length select{
  background:#0f1730; border:1px solid #21315b; color:#e5edff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  color:#cfe3ff !important; border:1px solid transparent; border-radius:.375rem; margin:0 .125rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  color:#fff !important; border-color: var(--abk-primary); background: rgba(58,111,242,.18) !important;
}

/* ====== Scrollbar (WebKit) ====== */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background: #1c2a4d; border-radius:10px; }
*::-webkit-scrollbar-thumb:hover{ background: #25407b; }

/* ====== Utilidades ====== */
.badge.bg-primary{ box-shadow: 0 0 12px rgba(58,111,242,.35); }
.ratio > img{ width:100%; height:100%; object-fit:cover; }




/* Selección de slots en reordenar */
#reordenarSlots .abk-slot-btn.btn-warning {
  box-shadow: 0 0 0 0.2rem rgba(255,193,7,.25);
}


/* --- Fix prioridad de modales sobre overlays/sidebars --- */
.modal { z-index: 2055 !important; pointer-events: auto !important; }
.modal-backdrop { z-index: 2050 !important; }

/* Si tu menú lateral/overlay tenía z-index alto, bájalo por debajo del modal */
#abk-sidebar, .abk-overlay, .offcanvas, .offcanvas-backdrop { z-index: 1040 !important; }

/* Evitar que un stacking context tape el modal */
#app-content { transform: none !important; perspective: none !important; filter: none !important; }
/* SweetAlert2 por encima de cualquier modal/overlay */
.swal2-container { z-index: 3000 !important; }


/* ===================== ABUELOKUP — Dark UI Fix para tablas/inputs ===================== */
/* Paleta base (ajusta si quieres afinar tonos) */
:root{
  --abk-bg: #0f1422;
  --abk-surface: #111a2c;           /* tarjetas, paneles */
  --abk-surface-2: #0b1120;         /* fondo de app */
  --abk-text: #e8eef9;              /* texto principal */
  --abk-text-dim: #a7b4c8;          /* texto secundario */
  --abk-border: rgba(255,255,255,.12);
  --abk-accent: #3a86ff;            /* azul gamer */
}

/* Tarjetas y contenedores */
.abk-card, .modal-content{
  background: var(--abk-surface) !important;
  color: var(--abk-text) !important;
  border-color: var(--abk-border) !important;
}

/* ---- DataTables: texto, encabezados, celdas ---- */
table.dataTable,
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tbody th,
table.dataTable tbody td {
  color: var(--abk-text) !important;
  border-color: var(--abk-border) !important;
}

table.dataTable tbody tr{
  background-color: transparent !important;
}
table.dataTable.stripe tbody tr:nth-of-type(odd),
.table.table-striped tbody tr:nth-of-type(odd){
  background-color: rgba(255,255,255,.03) !important;
}
table.dataTable.hover tbody tr:hover,
.table.table-hover tbody tr:hover{
  background-color: rgba(255,255,255,.06) !important;
}

/* Datatables wrapper: labels, info, paginación */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--abk-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  color: #0b1120 !important;
  background: var(--abk-accent) !important;
  border: 0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  color: var(--abk-text) !important;
  background: rgba(255,255,255,.08) !important;
  border: 0 !important;
}

/* Filtro (buscar) e items por página */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background: var(--abk-surface) !important;
  color: var(--abk-text) !important;
  border: 1px solid var(--abk-border) !important;
}
.dataTables_wrapper .dataTables_filter input::placeholder{
  color: var(--abk-text-dim) !important;
  opacity: 1;
}

/* Formularios generales en dark */
.form-control, .form-select, .input-group-text{
  background: var(--abk-surface) !important;
  color: var(--abk-text) !important;
  border: 1px solid var(--abk-border) !important;
}
.form-control::placeholder{
  color: var(--abk-text-dim) !important;
  opacity: 1;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(58,134,255,.6) !important;
  box-shadow: 0 0 0 .2rem rgba(58,134,255,.15) !important;
}

/* Encabezado de tabla un poco más contrastado */
table.dataTable thead th{
  background: rgba(255,255,255,.04) !important;
}

/* Botones outline en dark */
.btn-outline-light{
  color: var(--abk-text) !important;
  border-color: var(--abk-border) !important;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,.1) !important;
}

/* Pequeños elementos */
.badge{ color: #0b1120; } /* si usas badges claras sobre dark */
.small, .text-secondary{ color: var(--abk-text-dim) !important; }

/* Bordes de tablas */
.table, .table > :not(caption) > * > *{
  border-color: var(--abk-border) !important;
}


/* ====== ABK: tabla de Clasificación (tema oscuro) ====== */
#contenedorClasificacion .table{
  /* Variables de Bootstrap para tablas (v5.x) */
  --bs-table-bg: transparent;
  --bs-table-color: var(--abk-text);
  --bs-table-striped-bg: rgba(255,255,255,.04);
  --bs-table-striped-color: var(--abk-text);
  --bs-table-hover-bg: rgba(255,255,255,.06);
  --bs-table-hover-color: var(--abk-text);
  --bs-table-border-color: var(--abk-border);

  color: var(--abk-text) !important;
  border-color: var(--abk-border) !important;
}

#contenedorClasificacion .table thead th{
  color: var(--abk-text) !important;
  background: rgba(255,255,255,.06) !important;
  border-color: var(--abk-border) !important;
}

#contenedorClasificacion .table td,
#contenedorClasificacion .table th{
  color: var(--abk-text) !important;
  border-color: var(--abk-border) !important;
}

#contenedorClasificacion .table tbody tr{
  background-color: transparent !important;
}

#contenedorClasificacion .table.table-striped tbody tr:nth-of-type(odd){
  background-color: rgba(255,255,255,.03) !important;
}

#contenedorClasificacion .table.table-hover tbody tr:hover{
  background-color: rgba(255,255,255,.08) !important;
}

#contenedorClasificacion .text-muted,
#contenedorClasificacion small{
  color: var(--abk-text-dim) !important;
}


/* ===== ABK: Banner / Logo de torneo (600x200) ===== */
.abk-banner-img{
  display:block;
  width:100%;
  max-width:600px;
  height:200px;
  object-fit:cover;
  object-position:center;
  border-radius:12px;
  background:#0b1120;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  margin:0 auto;
}

.abk-banner-bg{
  width:100%;
  max-width:600px;
  height:200px;
  margin:0 auto;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#0b1120;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}

@media (max-width:576px){
  .abk-banner-img,
  .abk-banner-bg{ max-width:100%; height:180px; }
}