/* =========================================
   1. VARIABLES Y RESET
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700;800;900&display=swap');

   :root {
       --bg-color: #050505;      /* Fondo principal muy oscuro */
       --card-bg: #121212;       /* Fondo de tarjetas */
       --panel-bg: #1a1a1a;      /* Fondo de secciones del panel */
       --text-white: #ffffff;
       --neon-green: #39ff14;    /* El verde flúor del boliche */
       --neon-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
       --font-main: 'Montserrat', sans-serif;
   }
   
   * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main); }
   
   body { 
       background-color: var(--bg-color); 
       color: var(--text-white); 
       min-height: 100vh;
       /* Imagen de fondo sutil para que no sea todo negro plano */
       background-image: radial-gradient(circle at 50% 0%, #111, #050505);
   }
   
   a { text-decoration: none; color: inherit; transition: 0.3s; }
   ul { list-style: none; }
   
   /* Utilidades de Texto */
   .neon { color: var(--neon-green); text-shadow: var(--neon-shadow); }
   .text-muted { color: #888; font-size: 0.85rem; }
   .text-center { text-align: center; }
   
   /* =========================================
      2. LOGIN Y REGISTRO
      ========================================= */
   .login-box {
       background: rgba(18, 18, 18, 0.95);
       padding: 40px;
       border-radius: 10px;
       box-shadow: 0 0 20px rgba(0,0,0,0.8);
       border: 1px solid #333;
       width: 100%;
       max-width: 400px;
       text-align: center;
       margin: 50px auto; /* Centrado verticalmente si es página única */
   }
   
   .input-group { margin-bottom: 20px; text-align: left; }
   .input-group label { display: block; margin-bottom: 5px; font-size: 0.8rem; color: #ccc; font-weight: 700; }
   .input-group input, .input-group select {
       width: 100%; padding: 12px; background: #222; border: 1px solid #333;
       color: white; border-radius: 4px; outline: none; transition: 0.3s;
   }
   .input-group input:focus, .input-group select:focus { 
       border-color: var(--neon-green); 
       box-shadow: 0 0 5px var(--neon-green); 
   }
   
   /* Botones */
   .btn-login {
       width: 100%; background: var(--neon-green); color: black; padding: 12px;
       font-weight: 900; text-transform: uppercase; border: none; cursor: pointer;
       margin-top: 10px; transition: 0.3s; display: inline-block;
       clip-path: polygon(2% 0, 100% 0, 100% 80%, 98% 100%, 0 100%, 0 20%);
   }
   .btn-login:hover { transform: scale(1.02); box-shadow: 0 0 15px var(--neon-green); background: white; }
   
   .links { margin-top: 20px; font-size: 0.85rem; }
   .links a { color: #888; margin: 0 10px; }
   .links a:hover { color: white; }
   
   /* =========================================
      3. DASHBOARD (LAYOUT PRINCIPAL)
      ========================================= */
   .dash-container { 
       width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; 
   }
   
   .dash-nav { 
       display: flex; justify-content: space-between; align-items: center; 
       padding: 20px 0; border-bottom: 1px solid #333; margin-bottom: 30px; 
   }
   
   .user-info h2 { margin: 0; font-size: 1.5rem; font-style: italic; text-transform: uppercase; }
   .role-badge { 
       background: var(--neon-green); color: black; padding: 2px 8px; 
       font-weight: 800; font-size: 0.7rem; text-transform: uppercase; border-radius: 2px; 
   }
   
   .logout-btn { 
       color: white; font-weight: 700; font-size: 0.9rem; 
       border: 1px solid transparent; padding: 8px 15px; border-radius: 4px;
   }
   .logout-btn:hover { border-color: #ff4444; color: #ff4444; }
   
   /* Secciones del Dashboard */
   .dash-section { margin-bottom: 40px; animation: fadeIn 0.5s ease-in-out; }
   .dash-section h3 { 
       margin-bottom: 20px; font-size: 1.2rem; font-weight: 800; 
       text-transform: uppercase; letter-spacing: 1px; border-left: 4px solid var(--neon-green); 
       padding-left: 10px;
   }
   
   /* =========================================
      4. TABLAS Y LISTAS
      ========================================= */
   .table-responsive { overflow-x: auto; }
   .dash-table { 
       width: 100%; border-collapse: collapse; background: var(--panel-bg); 
       border-radius: 6px; overflow: hidden; 
   }
   .dash-table th, .dash-table td { 
       padding: 15px; text-align: left; border-bottom: 1px solid #333; color: #ccc; 
   }
   .dash-table th { 
       background: #222; color: var(--neon-green); 
       text-transform: uppercase; font-size: 0.8rem; 
   }
   .dash-table tr:hover { background: #222; }
   .apodo-cell { color: var(--neon-green); font-weight: 800; text-transform: uppercase; }
   
   /* =========================================
      5. TARJETAS DE ESTADÍSTICAS Y TICKETS
      ========================================= */
   .stats-grid { 
       display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; 
   }
   
   .stat-card { 
       background: var(--panel-bg); padding: 20px; border-radius: 8px; 
       border: 1px solid #333; position: relative; overflow: hidden;
       transition: 0.3s;
   }
   .stat-card:hover { transform: translateY(-5px); border-color: #444; }
   
   /* =========================================
      6. EL QR BLINDADO (CON LOGO S)
      ========================================= */
   .qr-wrapper {
       position: relative;
       display: inline-block;
       padding: 10px;
       background: white;
       border-radius: 12px;
       border: 4px solid var(--neon-green); /* Borde de seguridad */
       box-shadow: 0 0 15px rgba(57, 255, 20, 0.2);
   }
   
   .qr-logo-overlay {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 45px;  /* Tamaño de la bola del medio */
       height: 45px;
       background: white;
       padding: 4px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 0 5px rgba(0,0,0,0.3);
       z-index: 10;
   }
   
   .qr-logo-overlay img { width: 100%; height: auto; }
   .qr-logo-overlay span { line-height: 1; } /* Para la S de texto */
   
   /* =========================================
      7. CAJA DE LINK DE VENTA
      ========================================= */
   .link-container { 
       background: var(--panel-bg); padding: 20px; 
       border: 1px dashed var(--neon-green); border-radius: 6px;
       display: flex; align-items: center; gap: 15px; margin-top: 10px; 
   }
   .link-url { 
       flex-grow: 1; color: white; font-family: 'Courier New', monospace; 
       font-size: 1rem; overflow-wrap: anywhere; 
   }
   .btn-copy { 
       background: var(--neon-green); color: black; border: none; 
       padding: 8px 20px; font-weight: 800; cursor: pointer; border-radius: 4px; 
   }
   .btn-copy:hover { background: white; }
   
   /* =========================================
      8. RESPONSIVE (CELULARES)
      ========================================= */
   @media (max-width: 768px) {
       .dash-nav { flex-direction: column; gap: 15px; text-align: center; }
       .link-container { flex-direction: column; text-align: center; }
       .btn-copy { width: 100%; }
       
       /* Ajuste del generador en celular */
       .dash-section { display: block !important; } /* Rompe grids complejos */
       .dash-section > div { margin-bottom: 20px; }
       
       .login-box { width: 95%; margin: 20px auto; }
   }
   
   /* Animación suave de entrada */
   @keyframes fadeIn {
       from { opacity: 0; transform: translateY(10px); }
       to { opacity: 1; transform: translateY(0); }
   }