/* ============================================================
   assets/css/app.css - Boleto de Loto | Tema Principal
   ============================================================ */

/* --- Variables de color --- */
:root {
  --bdl-purple:       #6B21A8;
  --bdl-purple-dark:  #4C1D95;
  --bdl-purple-light: #9333EA;
  --bdl-purple-xlight:#EDE9FE;
  --bdl-gold:         #D97706;
  --bdl-gold-light:   #FEF3C7;
  --bdl-sidebar-w:    260px;
  --bdl-topbar-h:     60px;
  --bdl-font:         'Inter', system-ui, sans-serif;
  --bdl-radius:       10px;
  --bdl-shadow:       0 2px 12px rgba(107,33,168,.12);
}

/* --- Reset base --- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--bdl-font);
  background: #F5F3FF;
  color: #1F1B2E;
  margin: 0;
  min-height: 100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.bdl-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--bdl-sidebar-w);
  height: 100vh;
  max-height: 100vh;
  background: linear-gradient(180deg, var(--bdl-purple-dark) 0%, var(--bdl-purple) 100%);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow: hidden;
  transition: transform .3s ease;
  height: 100vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}

.bdl-sidebar::-webkit-scrollbar { width: 4px; }
.bdl-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }

/* Logo */
.bdl-sidebar .sidebar-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}
.bdl-sidebar .sidebar-brand img { height: 36px; }
.bdl-sidebar .sidebar-brand .brand-text {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.3px;
  line-height: 1.2;
}
.bdl-sidebar .sidebar-brand .brand-sub {
  color: rgba(255,255,255,.6);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Menú */
.bdl-sidebar .sidebar-nav { padding: 12px 0; flex: 1; min-height: 0; overflow-y: auto; }

.sidebar-section-title {
  color: rgba(255,255,255,.45);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 14px 20px 6px;
  font-weight: 600;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.8);
  padding: 10px 20px;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all .18s ease;
  border-radius: 0 8px 8px 0;
  margin: 1px 8px 1px 0;
}

.sidebar-nav .nav-link i,
.sidebar-nav .nav-link svg { 
  width: 18px; height: 18px; 
  flex-shrink: 0;
  opacity: .85;
}
.sidebar-nav .nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
  border-left-color: rgba(255,255,255,.4);
}
.sidebar-nav .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.15);
  border-left-color: #E9D5FF;
  font-weight: 600;
}

/* Badge premium en menú */
.nav-badge-premium { margin-left:auto; background:var(--bdl-gold); color:#fff; font-size:.55rem; padding:2px 6px; border-radius:20px; font-weight:700; white-space:nowrap; }


/* Usuario en sidebar */
.sidebar-user {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}
.sidebar-user .user-name {
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user .user-rol { font-size: .72rem; }

/* ============================================================
   TOPBAR
   ============================================================ */
.bdl-topbar {
  position: fixed;
  top: 0;
  left: var(--bdl-sidebar-w);
  right: 0;
  height: var(--bdl-topbar-h);
  background: #fff;
  border-bottom: 1px solid #EDE9FE;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1030;
  box-shadow: 0 1px 6px rgba(107,33,168,.06);
  transition: left .3s ease;
}

.bdl-topbar .topbar-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bdl-purple-dark);
}

.topbar-actions { display: flex; align-items: center; gap: 12px; }

.btn-topbar {
  border: none;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  color: #6B7280;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: all .15s;
}
.btn-topbar:hover { background: var(--bdl-purple-xlight); color: var(--bdl-purple); }

/* Toggle sidebar (mobile) */
.sidebar-toggle {
  display: none;
  border: none;
  background: transparent;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--bdl-purple);
}

/* ============================================================
   CONTENIDO PRINCIPAL
   ============================================================ */
.bdl-main {
  margin-left: var(--bdl-sidebar-w);
  margin-top: var(--bdl-topbar-h);
  padding: 28px 28px 60px;
  min-height: calc(100vh - var(--bdl-topbar-h));
  transition: margin-left .3s ease;
}

/* ============================================================
   TARJETAS
   ============================================================ */
.bdl-card {
  background: #fff;
  border-radius: var(--bdl-radius);
  box-shadow: var(--bdl-shadow);
  border: 1px solid rgba(107,33,168,.08);
  overflow: hidden;
}
.bdl-card .card-header-bdl {
  padding: 16px 22px;
  border-bottom: 1px solid #F3F0FF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bdl-card .card-header-bdl h5 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--bdl-purple-dark);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bdl-card .card-body-bdl { padding: 22px; }

/* ============================================================
   STATS CARDS (dashboard)
   ============================================================ */
.stat-card {
  background: #fff;
  border-radius: var(--bdl-radius);
  padding: 20px 22px;
  box-shadow: var(--bdl-shadow);
  border: 1px solid rgba(107,33,168,.08);
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-card .stat-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-card .stat-icon.purple { background: var(--bdl-purple-xlight); color: var(--bdl-purple); }
.stat-card .stat-icon.gold   { background: var(--bdl-gold-light); color: var(--bdl-gold); }
.stat-card .stat-icon.green  { background: #D1FAE5; color: #065F46; }
.stat-card .stat-icon.blue   { background: #DBEAFE; color: #1E40AF; }
.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--bdl-purple-dark);
  line-height: 1;
}
.stat-card .stat-label {
  font-size: .78rem;
  color: #6B7280;
  margin-top: 3px;
  font-weight: 500;
}

/* ============================================================
   BOLAS DE LOTERÍA
   ============================================================ */
.ball-container { display: flex; gap: 6px; flex-wrap: wrap; }

.loto-ball {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
}
.loto-ball.normal {
  background: linear-gradient(135deg, var(--bdl-purple), var(--bdl-purple-light));
  color: #fff;
  box-shadow: 0 2px 6px rgba(107,33,168,.3);
}
.loto-ball.complementario {
  background: linear-gradient(135deg, var(--bdl-gold), #F59E0B);
  color: #fff;
  box-shadow: 0 2px 6px rgba(217,119,6,.3);
}
.loto-ball.reintegro {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff;
  box-shadow: 0 2px 6px rgba(16,185,129,.3);
}
.loto-ball.sm { width: 28px; height: 28px; font-size: .72rem; }
.loto-ball.lg { width: 46px; height: 46px; font-size: 1rem; }

/* ============================================================
   BADGES DE ROL
   ============================================================ */
.badge-admin     { background: #4C1D95; color: #fff; padding: 3px 10px; border-radius: 20px; font-size: .72rem; }
.badge-oro       { background: var(--bdl-gold); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: .72rem; }
.badge-visitante { background: #E5E7EB; color: #374151; padding: 3px 10px; border-radius: 20px; font-size: .72rem; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn-bdl-primary {
  background: linear-gradient(135deg, var(--bdl-purple), var(--bdl-purple-light));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  transition: all .18s;
  box-shadow: 0 2px 8px rgba(107,33,168,.25);
}
.btn-bdl-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(107,33,168,.35);
  color: #fff;
}
.btn-bdl-gold {
  background: linear-gradient(135deg, var(--bdl-gold), #F59E0B);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  transition: all .18s;
}
.btn-bdl-outline {
  background: transparent;
  color: var(--bdl-purple);
  border: 2px solid var(--bdl-purple);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  transition: all .18s;
}
.btn-bdl-outline:hover {
  background: var(--bdl-purple-xlight);
  color: var(--bdl-purple-dark);
}

/* ============================================================
   ALERTAS PERSONALIZADAS
   ============================================================ */
.alert-bdl-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.alert-bdl-danger   { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.alert-bdl-warning  { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.alert-bdl-info     { background: var(--bdl-purple-xlight); color: var(--bdl-purple-dark); border: 1px solid #DDD6FE; }

/* ============================================================
   UPGRADE BANNER (para visitantes)
   ============================================================ */
.upgrade-banner {
  background: linear-gradient(135deg, var(--bdl-purple-dark), var(--bdl-purple-light));
  color: #fff;
  border-radius: var(--bdl-radius);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: var(--bdl-shadow);
}
.upgrade-banner .upgrade-text h5 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.upgrade-banner .upgrade-text p  { font-size: .85rem; opacity: .85; margin: 0; }

/* ============================================================
   DATATABLE personalización
   ============================================================ */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #DDD6FE;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .85rem;
  outline: none;
  transition: border-color .15s;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--bdl-purple); }
table.dataTable thead th {
  background: var(--bdl-purple-xlight);
  color: var(--bdl-purple-dark);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 2px solid var(--bdl-purple) !important;
}
table.dataTable tbody tr:hover { background: #F5F3FF !important; }
.dataTables_paginate .paginate_button.current {
  background: var(--bdl-purple) !important;
  border-color: var(--bdl-purple) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

/* ============================================================
   LOGIN / AUTH
   ============================================================ */
.auth-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bdl-purple-dark) 0%, var(--bdl-purple-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.auth-card .auth-logo { text-align: center; margin-bottom: 28px; }
.auth-card .auth-logo h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bdl-purple-dark);
}
.auth-card .auth-logo p { color: #6B7280; font-size: .85rem; margin: 4px 0 0; }
.auth-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: .9rem;
  transition: border-color .15s;
  outline: none;
}
.auth-input:focus { border-color: var(--bdl-purple); box-shadow: 0 0 0 3px rgba(107,33,168,.1); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .sidebar-toggle { display: flex; align-items: center; }

  .bdl-sidebar {
    transform: translateX(-100%);
  }
  .bdl-sidebar.open {
    transform: translateX(0);
  }
  .bdl-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1039;
  }
  .bdl-sidebar-overlay.open { display: block; }

  .bdl-topbar { left: 0; }
  .bdl-main { margin-left: 0; padding: 18px 16px 60px; }
}

@media (max-width: 576px) {
  .bdl-main { padding: 14px 12px 50px; }
  .stat-card .stat-value { font-size: 1.3rem; }
  .auth-card { padding: 28px 20px; }
  .loto-ball { width: 30px; height: 30px; font-size: .75rem; }
}

/* ============================================================
   SCROLLBAR GLOBAL
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F5F3FF; }
::-webkit-scrollbar-thumb { background: #C4B5FD; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bdl-purple); }

/* ============================================================
   UTILIDADES
   ============================================================ */
.text-purple       { color: var(--bdl-purple) !important; }
.text-purple-dark  { color: var(--bdl-purple-dark) !important; }
.text-gold         { color: var(--bdl-gold) !important; }
.bg-purple-xlight  { background: var(--bdl-purple-xlight) !important; }
.rounded-bdl       { border-radius: var(--bdl-radius) !important; }
.shadow-bdl        { box-shadow: var(--bdl-shadow) !important; }
.fw-800            { font-weight: 800 !important; }
.page-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--bdl-purple-dark);
  margin-bottom: 6px;
}
.page-subtitle { color: #6B7280; font-size: .85rem; margin-bottom: 24px; }


/* ============================================================
   BANNER TRIAL — ajustes de layout y móvil
   ============================================================ */

/* Evitar scroll horizontal en cualquier viewport */
body { overflow-x: hidden; }

/* En móvil, el sidebar abierto debe quedar ENCIMA del banner trial
   (el banner tiene z-index:1200 definido en barra_trial.php) */
@media (max-width: 1100px) {
  .bdl-sidebar.open {
    z-index: 1210 !important;
  }
  .bdl-sidebar-overlay.open {
    z-index: 1209 !important;
  }
  /* El topbar también debe quedar encima del banner en móvil */
  .bdl-topbar {
    z-index: 1205 !important;
  }
}