/* 1secondleft – variables y utilidades Bootstrap */
:root{
  --color-primary:        #00274c;  /* Blue PMS 282 C */
  --color-primary-light:  #133B5C;  /* sigue sirviendo como «light» */
  --color-secondary:      #ffcb05;  /* Maize PMS 7406 C */
  --color-neutral-light:  #DDE2E5;
  --text-on-dark:         #FFFFFF;
  --text-on-light:        #212121;
  --color-success:        #2E7D32;
  --color-error:          #C62828;
}

/* Utilidades rápidas */
.bg-primary-custom   { background-color: var(--color-primary) !important; }
.bg-secondary-custom { background-color: var(--color-secondary) !important; }
.text-primary-custom { color: var(--color-primary) !important; }
.text-secondary-custom { color: var(--color-secondary) !important; }
.btn-secondary-custom{
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border: none;
}
.btn-secondary-custom:hover{
  background-color: var(--color-primary-light);
  color: #fff;
}
.navbar-dashboard {
  background-color: var(--color-primary);   /* #00274c */
}
.navbar-dashboard .navbar-brand img {
  height: 48px;           /* logo más grande */
}
.navbar-dashboard .nav-link,
.navbar-dashboard .navbar-brand,
.navbar-dashboard .dropdown-toggle {
  color: #fff !important;
}
.navbar-dashboard .dropdown-menu {
  right: 0;
  left: auto;
}
/* ======= DASHBOARD ======= */
:root{
  --header-height: 72px;           /* alto real del navbar interno            */
  --sidebar-width: 240px;          /* ancho actual de tu sidebar              */
}

/* -------- Dashboard header personalizado -------- */
:root{
  --header-height-dash: 72px;      /* alto deseado del navbar interno   */
  --blue-brand: #00274c;           /* azul corporativo                  */
  --yellow-brand: #ffcb05;         /* amarillo corporativo              */
}

/* fondo azul y altura fija */
.navbar-dashboard{
  background:var(--blue-brand);
  height:var(--header-height-dash);
}

/* logo grande */
.navbar-dashboard .navbar-brand img{height:64px}

/* texto de marca + dropdown en amarillo */
.navbar-dashboard .navbar-brand,
.navbar-dashboard .dropdown-toggle{color:var(--yellow-brand)!important}

/* Texto del navbar interno en azul corporativo */
.navbar-dashboard-text{
  color:var(--color-primary) !important;     /* var(--color-primary) = #00274c */
}

/* Añade esto en el head o en tu archivo CSS */
.table-categorias th {
    text-align: center;
    vertical-align: middle;
}
.table-categorias td {
    vertical-align: middle;
}

/* Modal categorías: asegura scroll interno */
#modalCat .modal-body {
    max-height: calc(100vh - 200px);   /* espacio para encabezado + footer */
    overflow-y: auto;
}

/* HERO con video */
.hero-video {
  min-height: calc(100vh - 56px);         /* igual que antes */
  overflow: hidden;                       /* recorta el video que sobra */
}

/* Video ocupa todo el section */
.hero-video__bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                      /* recorta sin deformar */
  z-index: 1;
}

/* Capa oscura + degradado */
.hero-video__overlay{
  position: absolute;           /* <-- de relative → absolute */
  top: 0; left: 0;              /* cubrir todo */
  width: 100%;
  height: 100%;

  display: flex;                /* centrado perfecto */
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: linear-gradient(
               rgba(13,27,42,0.75),
               rgba(13,27,42,0.90));
  padding: 0 1rem;
  z-index: 2;                   /* encima del video */
}

/* ----- Próximos torneos ----- */
#upcoming {
  /* imagen de fondo + overlay oscuro */
  position: relative;
  background: url("/assets/img/seccion_torneos.png") center/cover no-repeat;
}
#upcoming::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);          /* overlay */
}
#upcoming > .container { position: relative; z-index: 1; }

.upcoming-avatar{
  width:64px; height:64px;
  object-fit:contain;
  border-radius:50%;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}


/* Swiper flechas (opcional) */
.swiper-button-prev,
.swiper-button-next{ color:#0d6efd; }
/* ----- Card de Próximos Torneos: efecto glass ----- */
.upcoming-card {
  background: rgba(255,255,255,0.60);   /* blanco translúcido */
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  overflow: hidden;       /* evita que el swiper se salga */
}
/* ----- Encabezado banner en Próximos torneos ----- */
.section-heading{
  background: rgba(255,255,255,.50);   /* blanco translúcido */
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.35);
}

/* ----- HERO torneo ----- */
.torneo-hero{
  min-height: 300px;
  background-blend-mode: overlay;   /* mezcla con rgba */
}

/* ----- Card meta ----- */
.torneo-meta-card{
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  margin-top: -3rem;     /* sobrepone la card al HERO */
}
/* --- Cartel/Póster dentro de Info -------------------- */
:root{
  /* Cambia este valor (px) para otro ancho máximo */
  --poster-max-w: 350px;     
}

.torneo-poster{
  max-width: var(--poster-max-w);
  width: 100%;          /* mantiene proporción */
  height: auto;
  display: block;
  margin: 0 auto 2rem;  /* centrado + separación inferior */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Panel del formulario */
#login-panel {
background: linear-gradient(180deg, #00274c 0%, #00172a 100%); /* azul + oscurecido */
color: #ffffff;
position: relative;   /* <-- AÑADE ESTO */
overflow: hidden;     /* <-- AÑADE ESTO (Opcional, pero recomendado) */
}

/* Título */
#login-title {
  color: #ffcb05;             /* Maize */
  font-size: 1.5rem;
}

/* Labels (usamos utilidades Bootstrap, pero forzamos color) */
#login-panel label {
  color: #ffffff;
}

/* Botón principal */
#login-btn {
  background-color: #ffcb05;  /* Maize */
  color: #00274c;
  border: none;
  font-weight: 600;
}
#login-btn:hover,
#login-btn:focus {
  background-color: #e6b705;  /* 10 % más oscuro */
  color: #ffffff;
}

/* Enlaces secundarios */
#login-panel a {
  color: #ffcb05;
}
#login-panel a:hover {
  text-decoration: underline;
}
/* ——— Anchos unificados y bloque centrado ——— */
#login-panel main {
max-width: 304px; /* idéntico al widget reCAPTCHA */
width: 100%;
margin-left: auto; /* MX-AUTO en caso de que el HTML no lo traiga */
margin-right: auto;
position: relative;   /* <-- AÑADE ESTO */
z-index: 1;           /* <-- AÑADE ESTO */
}

/* Inputs, botón, alert y captcha al 100 % del main */
#login-panel .form-control,
#login-panel #login-btn,
#login-panel .alert,
#login-panel .g-recaptcha {
  width: 100%;
}

/* Banner: tope opcional */
#login-banner { max-width: 260px; }

/* Reducir ligeramente reCAPTCHA en móviles XS (< 360 px) */
@media (max-width: 359.98px) {
  #login-panel .g-recaptcha {
    transform: scale(0.9);
    transform-origin: 0 0;
  }
}

/* ——— Cobertura completa en mobile ——— */
@media (max-width: 767.98px) {
  #login-panel {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}