/* ==========================================================================
   1. RESET & GLOBALES
   ========================================================================== */

@charset "utf-8";

/* Body y tipografías */
body {
  background-color: #000;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
}

/* Variables (solo para lectura interna — no obligatorias) */
/* -- Not used directly: left as reference if quieres migrar a variables -- */

/* ==========================================================================
   2. LAYOUTS: PUBLIC / ADMIN
   ========================================================================== */

/* === MODO PÚBLICO (página principal) === */
.public-layout {
  background-color: #000 !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
  background-color: #000;
}



/* Contenedores y títulos públicos */
.public-layout .section-container {
  background-color: #000;
  color: #f00a0a;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
}

.public-layout h1,
.public-layout h2,
.public-layout h3,
.public-layout p {
  color: #fff;
}

/* Botones públicos */
.public-layout .btn-buy,
.public-layout .btn-search,
.public-layout .btn-agregar {
  background-color: #ffcc00;
  color: #000;
  font-weight: 600;
  border: none;
  border-radius: 10px;
}

.public-layout .btn-buy:hover,
.public-layout .btn-search:hover,
.public-layout .btn-agregar:hover {
  background-color: #e6b800;
}

/* HERO / Hero styles */
.public-layout .raffle-title {
  font-family: 'Bebas Neue', 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 4rem;
  color: #fc0909;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.2em;
}

.public-layout .raffle-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  color: #df0808;
  text-transform: uppercase;
  margin-top: 0.3em;
  text-align: center;
}

/* Imagen del premio */
.public-layout .raffle-image {
  border-radius: 15px;
  box-shadow: 0 0 25px rgba(255, 45, 45, 0.3);
  margin-top: 20px;
  max-width: 100%;
  height: auto;
}

/* Barra de progreso pública */
.public-layout .progress-bar-container {
  background: #1a1a1a;
  border-radius: 20px;
  height: 30px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 196, 0, 0.3);
}

.public-layout .progress-bar-fill {
  background: linear-gradient(90deg, #ffcc00, #ff9900);
  color: #000;
  font-weight: 700;
  text-align: center;
  line-height: 30px;
}

.public-layout .section-title {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.public-layout .progress-info {
  color: #bbb;
  font-size: 0.95rem;
}

/* Prize boxes, price boxes, custom purchase */
.public-layout .prize-box {
  background: #ff0040;
  color: #fff;
  width: 120px;
  border-radius: 12px;
  padding: 10px 0;
  box-shadow: 0 0 20px rgba(255, 0, 64, 0.4);
  transition: transform 0.3s;
}
.public-layout .prize-box:hover { transform: scale(1.07); }

.public-layout .price-box {
  background: #111;
  border: 1px solid #333;
  border-radius: 15px;
  color: #fff;
  padding: 20px 10px;
  transition: all 0.3s;
}
.public-layout .price-box:hover {
  border-color: #ffcc00;
  transform: translateY(-5px);
}

.public-layout .custom-purchase-container {
  background: #0f0f0f;
  padding: 30px 20px;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
  max-width: 500px;
  margin: 50px auto;
}

.public-layout .input-cantidad {
  width: 140px;
  padding: 10px;
  border: 2px solid #ff0040;
  border-radius: 8px;
  font-size: 1rem;
  text-align: center;
  background-color: #222;
  color: #fff;
}

/* Search */
.public-layout .search-form input {
  border-radius: 10px;
  text-align: center;
  background-color: #1b1b1b;
  color: #fff;
  border: 1px solid #333;
}

/* Navbar overrides */
.public-layout .navbar {
  background-color: #000 !important;
  border-bottom: 1px solid #222;
}

/* Utility for navbar dark + black background */
.navbar-dark.bg-black {
  background-color: #000 !important;
}

/* ==========================================================================
   3. ADMIN LAYOUT & SIDEBAR ADMIN
   ========================================================================== */

/* === MODO ADMIN === */
.admin-layout {
  background: #000;
  color: #fff;
}

.admin-content {
  margin-left: 240px;
  padding: 40px 20px;
  background: #000;
  min-height: 100vh;
  color: #fff;
}

/* SIDEBAR ADMIN */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 230px;
  height: 100vh;
  background: #0d0d0d;
  border-right: 2px solid #222;
  padding: 25px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 999;
}

.sidebar-logo { text-align: center; margin-bottom: 30px; }
.sidebar-logo img { width: 100px; height: auto; border-radius: 50%; }

.sidebar-menu { display: flex; flex-direction: column; gap: 8px; }

.sidebar-link {
  color: #ccc;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s;
}
.sidebar-link:hover {
  background: #ff0040;
  color: #fff;
  transform: translateX(5px);
}
.sidebar-link i { color: #ff0040; width: 20px; }
.sidebar-link.active {
  background: linear-gradient(90deg, #ff0040, #ff2b6d);
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(255, 0, 64, 0.4);
}

/* Footer de sidebar admin */
.sidebar-footer {
  border-top: 1px solid #222;
  padding-top: 15px;
  text-align: center;
}
.sidebar-footer .logout {
  color: #ff0040;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
}
.sidebar-footer .logout:hover {
  color: #fff;
  text-shadow: 0 0 5px #ff0040;
}

/* ==========================================================================
   4. VENDEDOR SIDEBAR / VENDEDOR LAYOUT (vendedores.css)
   ========================================================================== */

/* Sidebar vendedor */
.sidebar-vendedor {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 230px;
  background-color: #121212;
  border-right: 2px solid #444;
  z-index: 1000;
}

.sidebar-vendedor .nav-link {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-radius: 6px;
  transition: background 0.2s;
}
.sidebar-vendedor .nav-link:hover {
  background-color: #1e1e1e;
  color: #ffc107;
}
.sidebar-vendedor .nav-link.active {
  background-color: #ffc107;
  color: #000;
  font-weight: bold;
}
.sidebar-vendedor h4 { font-size: 1.2rem; }

/* variante / otra nomenclatura encontrada en código */
.vendedor-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.vendedor-content {
  margin-left: 250px;
  padding: 2rem;
  background-color: #111;
  min-height: 100vh;
}
.vendedor-sidebar .sidebar-link:hover {
  background-color: #222;
  color: #FFD700;
  text-decoration: none;
}

/* ==========================================================================
   5. ADMIN FORMS
   ========================================================================== */

.admin-form-container {
  max-width: 600px;
  background: #0d0d0d;
  border: 1px solid #222;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
  padding: 30px;
  margin: 40px auto;
  color: #fff;
}

/* Reglas de texto y campos */
.admin-form-container h2 {
  font-size: 1.6rem;
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
}

.admin-form-container p {
  text-align: center;
  color: #aaa;
  margin-bottom: 25px;
}

.admin-form-container label {
  display: block;
  color: #ddd;
  font-weight: 500;
  margin-top: 10px;
}

.admin-form-container input,
.admin-form-container select {
  width: 100%;
  padding: 10px 14px;
  margin-top: 5px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #1a1a1a;
  color: #fff;
}
.admin-form-container input:focus,
.admin-form-container select:focus {
  border-color: #ff0040;
  outline: none;
}

/* Botones dentro del admin form */
.admin-form-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
}
.admin-form-buttons button { min-width: 140px; font-weight: bold; }

.admin-form-buttons .btn-success { background-color: #28a745; border: none; }
.admin-form-buttons .btn-success:hover { background-color: #218838; }

.admin-form-buttons .btn-secondary { background-color: #444; border: none; }
.admin-form-buttons .btn-secondary:hover { background-color: #666; }

/* Centrado en pantallas grandes */
@media (min-width: 992px) {
  .admin-form-container {
    position: relative;
    left: calc(240px + (100vw - 240px) / 2 - 580px);
    margin: 60px 0;
  }
}

/* Ajuste en pantallas pequeñas */
@media (max-width: 991px) {
  .admin-form-container { left: 0; margin: 40px auto; }
}

/* ==========================================================================
   6. REPORTES / TABLAS / TARJETAS
   ========================================================================== */

.reportes-container {
  background: #0d0d0d;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 0 15px rgba(255, 0, 64, 0.15);
}

.reportes-title {
  color: #ff0040;
  font-weight: 700;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid #ff0040;
  padding-bottom: 10px;
}

.vendedores-table-wrapper { border-radius: 10px; overflow: hidden; }

.vendedores-table {
  color: #fff;
  background: #111;
  border-color: #222;
}
.vendedores-table thead {
  background: linear-gradient(90deg, #ff0040, #ff2b6d);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
}
.vendedores-table tbody tr:hover {
  background: rgba(255, 0, 64, 0.15);
  transition: all 0.2s ease;
}
.vendedores-table td, .vendedores-table th {
  vertical-align: middle;
  white-space: nowrap;
}

/* Badges & botones de acción */
.badge-vendedor {
  background: linear-gradient(90deg, #ffcc00, #ff9900);
  color: #000;
  padding: 5px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
}

.btn-accion {
  display: inline-block;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  color: #fff;
  font-size: 0.9rem;
  margin: 0 2px;
  transition: all 0.3s ease;
}
.btn-edit { background: #007bff; }
.btn-edit:hover { background: #0056b3; transform: translateY(-2px); }
.btn-delete { background: #dc3545; }
.btn-delete:hover { background: #a71d2a; transform: translateY(-2px); }

/* Tarjetas de reporte */
.tarjeta-reporte {
  border: none;
  border-radius: 14px;
  background-color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.tarjeta-reporte:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(255,255,255,0.1); }
.tarjeta-reporte { transition: all 0.3s ease; border-radius: 12px; }
.tarjeta-reporte:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 255, 255, 0.2); }

/* Iconos y resumen */
.icono-card {
  width: 70px; height: 70px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 15px; font-size: 1.8rem;
}
.icono-reporte { width: 55px; height: 55px; border-radius: 50%; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; }

/* Tabla general */
.table thead th { background-color: #111; color: #0d6efd; text-transform: uppercase; font-weight: 600; }
.table td, .table th { vertical-align: middle; }

/* Estilos alternativos / tablero claro (reportes) */
.reportes-container { /* nota: algunas páginas de reportes usan fondo claro  }
.reportes-container { /* si necesitas, marcar como posible cambio }
*/
/* Botones volver y título de reportes */
.volver-panel { display: flex; justify-content: start; margin-bottom: 30px; }
.btn-volver {
  display: flex; align-items: center; gap: 10px;
  background-color: #111; color: #fff;
  border: 1px solid #333; border-radius: 8px; padding: 10px 22px;
  font-weight: 500; text-decoration: none; transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.btn-volver i { font-size: 1.3rem; color: #0d6efd; }
.btn-volver:hover { background-color: #1c1c1c; border-color: #0d6efd; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13,110,253,0.3); }

/* Estilos para tablas claras en reportes (si se usan) */
.table thead { background: linear-gradient(90deg, #00bcd4, #8bc34a); }
.table tbody tr:hover { background-color: rgba(255,255,255,0.05); transform: scale(1.01); transition: all 0.2s ease; }

/* Badges y montos */
.badge-boletos { background: #ffb703; color: #0a1e40; font-weight: 600; padding: 5px 12px; border-radius: 12px; }
.badge-pago { padding: 6px 14px; border-radius: 20px; font-weight: 600; color: #fff; }
.badge-pago.aprobado { background: #06d6a0; }
.badge-pago.pendiente { background: #ffb703; color: #0a1e40; }
.badge-pago.rechazado { background: #ef476f; }
.monto { color: #219ebc; font-weight: 700; }

/* ==========================================================================
   7. UTILIDADES & EDITORIALES
   ========================================================================== */

/* Sidebar icon active tweak */
.sidebar-link.active i { color: #fff !important; transform: scale(1.1); transition: all 0.3s; }

/* Table helpers */
.table-dark th, .table-dark td { vertical-align: middle; }
.table-secondary th { font-weight: 700; }
.table .text-success { color: #df1111 !important; }

/* Text gradients */
/* Text gradients */
.text-gradient {
  background: linear-gradient(90deg, #00bcd4, #8bc34a);
  /* Compatibilidad: define también la propiedad estándar */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}



/* Boton volver alternativa */
.boton-volver { transition: all 0.3s ease; border-radius: 50px; padding: 8px 16px; }
.boton-volver:hover { background-color: #00bcd4; color: #fff !important; transform: translateX(-2px); }

/* ==========================================================================
   8. RESPONSIVE / MEDIA QUERIES
   ========================================================================== */

/* Pequeño a mediano */
@media (max-width: 992px) {
  .admin-sidebar { width: 200px; }
  .admin-content { margin-left: 200px; }
}

/* Mobile adjustments for admin sidebar & public layout */
@media (max-width: 768px) {

  /* Admin sidebar hidden by default in small screens */
  .admin-sidebar {
    position: fixed;
    transform: translateX(-100%);
    transition: transform 0.4s ease;
  }
  .admin-sidebar.active { transform: translateX(0); }

  /* Content margins */
  .admin-content { margin-left: 0; padding: 20px; }

  /* Public adjustments */
  .public-layout .raffle-title { font-size: 2.4rem; }
  .public-layout .raffle-subtitle { font-size: 1rem; }

  .public-layout .section-container { padding: 25px 10px; }

  /* Report cards */
  .tarjeta-reporte { margin-bottom: 15px; }

  /* Report badges smaller */
  .badge-vendedor { font-size: 0.8rem; padding: 4px 8px; }

  /* Btn volver layout */
  .btn-volver { position: static; margin-bottom: 20px; }
}

/* ==========================================================================
   9. NOTAS / MARCAS (posible código muerto — marcado para revisión)
   ========================================================================== */

/*
  - He conservado reglas que aparecen varias veces en tu proyecto pero las
    he unificado. Si hay reglas que realmente no se usan (ej. bloques de
    reportes en páginas públicas), las dejé comentadas en esta sección
    opcional (no eliminadas).
  - Si quieres, puedo ahora eliminar completamente las reglas marcadas como
    'posible código muerto' — pero lo haré sólo si confirmas.
*/

/* End of file */

/* --- FIX: Asegurar colapso navbar funciona aun si hay overrides --- */
.navbar-collapse {
  display: flex !important;              /* formato por defecto cuando está visible */
  flex-basis: auto;
  flex-grow: 1;
  align-items: center;
}

.navbar-collapse.collapse {
  display: none !important;              /* oculto cuando colapsado */
}

.navbar-collapse.collapse.show {
  display: flex !important;              /* visible cuando tiene .show */
  flex-direction: column;                /* mobile: lista vertical */
  gap: 0.5rem;
}

/* Asegura que el icono hamburguesa sea visible sobre fondo oscuro */
.navbar-toggler {
  border-color: rgba(255,255,255,0.12);
}

}

/* === FIX OFFCANVAS VENDEDOR === */

/* En móviles, ocultar sidebar fijo viejo y permitir offcanvas */
@media (max-width: 991px) {
  .vendedor-sidebar,
  .sidebar-vendedor {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* En desktop, si quieres que el sidebar siga fijo, lo dejamos activo */
@media (min-width: 992px) {
  .offcanvas {
    display: none !important; /* desactiva offcanvas en escritorio */
  }
}

/* ===== FIX: Offcanvas vendedor + sidebar fijo ===== */

/* Estilos de offcanvas (mobile) */
.vendedor-offcanvas {
  width: 85%;                 /* ancho en móvil (ajusta si quieres) */
  max-width: 360px;
  z-index: 1100;              /* por encima del contenido */
}

/* Asegurar que el offcanvas ocupe todo el alto y tenga overlay */
.offcanvas-backdrop {
  z-index: 1090;
}

/* Sidebar fijo (desktop) */
.vendedor-sidebar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background: #0d0d0d;
  border-right: 2px solid #222;
  padding: 20px 10px;
  z-index: 1030;
  overflow-y: auto;
}

/* Ajustar contenido principal cuando existe sidebar fijo (desktop).
   Si tu main usa .admin-content u .main-content, asegúrate de tener margen-left correcto. */
@media (min-width: 992px) {
  .main-content, .admin-content, .vendedor-content {
    margin-left: 250px !important;
  }

  /* Ocultar el offcanvas en desktop para evitar duplicados visibles */
  #vendedorOffcanvas {
    display: none;
  }
}

/* En móviles, ocultar cualquier sidebar antiguo que pudiera estar en conflicto */
@media (max-width: 991px) {
  .sidebar-vendedor,
  .vendedor-sidebar,
  .vendedor-sidebar-fixed {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Mostrar offcanvas en móvil (Bootstrap lo hace, pero reforzamos) */
  #vendedorOffcanvas { display: block; }
}

/* Pequeños ajustes visuales */
.vendedor-sidebar-fixed .sidebar-link:hover,
.vendedor-offcanvas .sidebar-link:hover {
  background: rgba(255,255,255,0.04);
  transform: translateX(6px);
  transition: transform .18s ease, background .18s ease;
}

/* Asegurar que offcanvas tenga scroll si el contenido es largo */
.vendedor-offcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

/* Si en tu CSS global hay reglas .offcanvas { width: ... } las sobreescribimos en mobile */
.offcanvas.offcanvas-start {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  transition: transform .3s ease-in-out;
}
.offcanvas.offcanvas-start.show {
  transform: translateX(0);
}

/* Asegurar botón hamburguesa visible */
button[data-bs-toggle="offcanvas"] {
  z-index: 1200;
}

@media (max-width: 600px) {
  .public-layout .raffle-title {
    font-size: 2.8rem;
  }

  .public-layout .raffle-subtitle {
    font-size: 1rem;
  }

  .public-layout .raffle-image-container {
    margin-top: 25px;
  }

  .public-layout .section-title {
    font-size: 1.5rem;
  }
}
/* Contenedor de la barra */
.progress {
  height: 22px; /* más alta para que se note */
  background-color: #ffffff22; /* fondo suave */
  border: 2px solid #ff4d4d; /* CONTORNO ROJO CLARO */
  border-radius: 8px;
  overflow: hidden;
}

/* Barra interna que avanza */
.progress-bar {
  background-color: #ff0000; /* Rojo más fuerte para contraste */
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  line-height: 22px;
  color: white;
  transition: width 0.4s ease-in-out;
}