/* PadelOrganizer Bootstrap Theme — Sporty/Bold
   Carga DESPUÉS de styles.css para sobreescribir variables y estilos. */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

/* --- Sobreescribir variables del design system ------------------- */
:root {
  --pri:         #0066FF;
  --pri-dark:    #0044CC;
  --pri-light:   #e8f0ff;
  --pri-rgb:     0, 102, 255;
  --white:       #fff;
  --text:        #0a0f1e;
  --shadow-sm:   0 4px 16px rgba(0, 102, 255, 0.10);
  --shadow-md:   0 12px 30px rgba(0, 102, 255, 0.20);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.15);

  /* Bootstrap usa var(--pri) para que los temas funcionen automáticamente */
  --bs-primary:          var(--pri);
  --bs-primary-rgb:      0, 102, 255;   /* se sobreescribe por tema en po_public.css */
  --bs-link-color:       var(--pri);
  --bs-link-hover-color: var(--pri-dark);
}

/* --- Botones — conectar a var(--pri) para que cambien con el tema --- */
.btn-primary {
  --bs-btn-bg:                  var(--pri);
  --bs-btn-border-color:        var(--pri);
  --bs-btn-hover-bg:            var(--pri-dark);
  --bs-btn-hover-border-color:  var(--pri-dark);
  --bs-btn-active-bg:           var(--pri-dark);
  --bs-btn-active-border-color: var(--pri-dark);
  --bs-btn-focus-shadow-rgb:    var(--pri-rgb);
}
.btn-outline-primary {
  --bs-btn-color:               var(--pri);
  --bs-btn-border-color:        var(--pri);
  --bs-btn-hover-bg:            var(--pri);
  --bs-btn-hover-border-color:  var(--pri);
  --bs-btn-active-bg:           var(--pri);
  --bs-btn-active-border-color: var(--pri);
}

/* --- Dark mode: Bootstrap components -------------------------------- */
html[data-theme="oscuro"] .sticky-top,
html[data-theme="oscuro"] .bg-white       { background-color: var(--surface) !important; }
html[data-theme="oscuro"] .border-bottom  { border-color:     var(--border)  !important; }
html[data-theme="oscuro"] .shadow-sm      { box-shadow: 0 2px 8px rgba(0,0,0,.4) !important; }
html[data-theme="oscuro"] .text-muted,
html[data-theme="oscuro"] .text-secondary { color: var(--text-2) !important; }
html[data-theme="oscuro"] .form-control,
html[data-theme="oscuro"] .form-select    { background-color: var(--surface); color: var(--text); border-color: var(--border); }
html[data-theme="oscuro"] .form-control:focus,
html[data-theme="oscuro"] .form-select:focus { background-color: var(--surface); color: var(--text); }
html[data-theme="oscuro"] .card          { background-color: var(--surface); border-color: var(--border); color: var(--text); }
html[data-theme="oscuro"] .alert-warning { background-color: #1c1a07; color: #fef08a; border-color: #713f12; }
html[data-theme="oscuro"] .alert-info    { background-color: #0c1a2e; color: #93c5fd; border-color: #1e3a5f; }
html[data-theme="oscuro"] .alert-danger  { background-color: #1f0a0a; color: #fca5a5; border-color: #7f1d1d; }
html[data-theme="oscuro"] .table         { --bs-table-bg: var(--surface); --bs-table-border-color: var(--border); color: var(--text); }
html[data-theme="oscuro"] .table-light   { --bs-table-bg: #1e293b; }

/* --- Fix: styles.css define .container como card — revertir a Bootstrap estándar --- */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.container-fluid {
  background:    transparent !important;
  border-radius: 0 !important;
  box-shadow:    none !important;
  padding-top:   0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Restaurar el padding lateral estándar de Bootstrap (.75rem cada lado) */
.container, .container-sm, .container-md,
.container-lg, .container-xl, .container-xxl {
  padding-left:  var(--bs-gutter-x, .75rem) !important;
  padding-right: var(--bs-gutter-x, .75rem) !important;
}

/* app_nativa.css carga después de styles.css y sobreescribe body con
   padding-left/right: 10px y padding-top diferente. Lo reseteamos aquí
   para que el hero sea full-width y el topbar quede bien posicionado. */
body {
  font-family: 'Poppins', sans-serif !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: var(--topbar-h, 56px) !important;
  padding-bottom: 1.5rem !important;
}

/* --- Hero Section ----------------------------------------------- */
.po-hero {
  position: relative;
  background-image: url('../images/api/header_api.png'), linear-gradient(135deg, #00143c 0%, #0066FF 100%);
  background-size: cover;
  background-position: center top;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  padding: 1.5rem 1rem;
}

.po-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(0, 20, 60, 0.82) 0%,
    rgba(0, 102, 255, 0.55) 100%
  );
}

.po-hero-content {
  position: relative;
  z-index: 1;
  padding: 0 1rem;
}

.po-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin-bottom: 0.5rem;
}

.po-hero-title {
  font-size: 1.75rem;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
  margin-bottom: 0.15rem;
  line-height: 1.15;
}

.po-hero-sub {
  font-size: 0.88rem;
  font-weight: 500;
  opacity: 0.82;
  letter-spacing: 0.3px;
}

/* Hero reducido para login */
.po-hero-mini {
  min-height: 140px;
  padding-bottom: 2.5rem;
}

/* --- Cards de Menú Principal ------------------------------------ */
.po-menu-card {
  border-radius: 16px;
  padding: 1.1rem 0.75rem;
  text-align: center;
  text-decoration: none !important;
  color: #fff !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.2px;
  transition: transform 0.18s, box-shadow 0.18s;
  height: 100%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
}

.po-menu-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 0.18s;
}

.po-menu-card:hover,
.po-menu-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  color: #fff !important;
}

.po-menu-card:active::after { background: rgba(255,255,255,0.12); }

.po-menu-card img {
  width: 44px; height: 44px; object-fit: contain;
}

.po-menu-card i {
  font-size: 2rem;
  line-height: 1;
  opacity: 0.95;
}

/* Per-section gradient colors */
.po-card-blue   { background: linear-gradient(145deg,#1a6eff 0%,#0044cc 100%); }
.po-card-violet { background: linear-gradient(145deg,#8b5cf6 0%,#6d28d9 100%); }
.po-card-orange { background: linear-gradient(145deg,#f97316 0%,#c2410c 100%); }
.po-card-teal   { background: linear-gradient(145deg,#14b8a6 0%,#0f766e 100%); }
.po-card-green  { background: linear-gradient(145deg,#22c55e 0%,#15803d 100%); }

/* --- Login Card ------------------------------------------------- */
.po-login-card {
  background: var(--white);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 2rem 1.75rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 10;
}

/* En la página de login, la card hace overlap sobre el hero */
.po-login-page {
  padding-top: 0 !important;
}

.po-login-page .po-login-card {
  margin-top: -48px;
}

.po-login-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* --- Perfil Card (jugador logueado) ----------------------------- */
.po-perfil-card {
  background: var(--white);
  border-radius: 14px;
  border-left: 4px solid var(--pri);
  box-shadow: var(--shadow-sm);
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto 1.25rem auto;
}

.po-perfil-card img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pri);
  flex-shrink: 0;
}

.po-perfil-nombre {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  display: block;
  line-height: 1.3;
}

.po-perfil-cat {
  font-size: 0.82rem;
  color: var(--pri);
  font-weight: 600;
  display: block;
  margin-top: 2px;
}

/* --- Responsive ------------------------------------------------- */
@media (max-width: 576px) {
  .po-hero { min-height: 150px; }
  .po-hero-title { font-size: 1.45rem; }
  .po-hero-mini { min-height: 120px; padding-bottom: 2rem; }
  .po-login-card { padding: 1.5rem 1.25rem; }
  .po-login-page .po-login-card { margin-top: -36px; }
  .po-menu-card { padding: 1rem 0.5rem; font-size: 0.78rem; }
  .po-menu-card i { font-size: 1.7rem; }
}