/* Utility */
.z-1080 { z-index: 1080; }

/* VERSIÓN 4.0 - VERIFICADOR MODERNO */
/* Fecha: 2025-10-13 - Estilos definitivos para verificador */

/* Estilos para la página de detalle de rifa */

/* Themed helpers */
.card-themed {
  background-color: #0b0b0b !important; /* brand black */
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.card-themed .card-header {
  background-color: #0b0b0b !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}
.panel-themed {
  background-color: #0b0b0b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.no-image-placeholder {
  height: 300px;
  background-color: #111111; /* slightly lighter than brand black */
  border: 1px solid rgba(255,255,255,0.12);
}

/* Imagen de rifa - se ve completa y más grande */
.raffle-cover {
  width: 100%;
  height: auto;
  max-height: 700px; /* Aumentado para que se vea más grande */
  object-fit: contain; /* Muestra la imagen completa sin recortar */
  object-position: center;
  border-radius: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  background-color: #0b0b0b; /* Fondo para espacios vacíos */
}

.raffle-cover:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

/* Responsive para imagen completa y más grande */
@media (max-width: 768px) {
  .raffle-cover {
    max-height: 450px; /* Más grande en móviles */
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  .raffle-cover {
    max-height: 550px; /* Más grande en tablets */
  }
}

@media (min-width: 992px) {
  .raffle-cover {
    max-height: 700px; /* Mucho más grande en desktop */
  }
}

.ticket-card {
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ticket-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}

/* Selected ticket in grid */
.ticket-card.selected {
  background-color: #f0b400 !important; /* brand yellow */
  color: #0b0b0b !important;
  border-color: #f0b400 !important;
}

/* Themed states */
.ticket-available {
  background-color: rgba(10, 122, 59, 0.10) !important; /* soft green tint */
  border: 1px solid rgba(10, 122, 59, 0.45) !important;
  color: #e7fff1 !important;
}
.ticket-available small { color: #b7ffd2 !important; }
.ticket-available:hover {
  background-color: rgba(10, 122, 59, 0.18) !important;
  border-color: rgba(10, 122, 59, 0.8) !important;
}

.ticket-unavailable {
  background-color: rgba(224, 36, 36, 0.12) !important; /* soft red tint */
  color: #ffd6d6 !important;
  border: 1px solid rgba(224, 36, 36, 0.55) !important;
  cursor: not-allowed;
}
.ticket-unavailable small { color: #ffbcbc !important; }
.ticket-unavailable:hover { transform: none; box-shadow: none; }

/* Animación para búsqueda */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.ticket-card.pulse { animation: pulse 1s; }

/* Estilos para la barra de progreso */
.progress { height: 25px; background-color: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.12); }
.progress .progress-bar { box-shadow: none !important; min-width: 8px; }
.progress .progress-bar[aria-valuenow="0"] { min-width: 0; }
.progress-bar.bg-success { background-color: #0a7a3b !important; }
.progress-bar.bg-warning { background-color: #f0b400 !important; color: #0b0b0b !important; }

/* Estilos para estadísticas */
.stats-card { transition: transform 0.2s ease; }
.stats-card:hover { transform: translateY(-2px); }

/* Estilos para el grid de tickets */
.tickets-grid {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.375rem;
  padding: 1rem;
}

/* Estilos para badges */
.badge { font-size: 0.875em; }

/* Estilos para botones de control */
.control-buttons .btn { margin: 0 2px; }

/* Estilos para el contador de selección */
.selection-counter { font-weight: bold; color: #28a745; }

/* Estilos responsivos */
@media (max-width: 768px) {
  .ticket-card { min-height: 50px; font-size: 0.9em; }
  .tickets-grid { max-height: 300px; }
  .control-buttons { flex-direction: column; gap: 5px; }
}

/* Chips de tickets seleccionados (lista superior) */
.selected-ticket-item {
  background-color: #f0b400; /* brand yellow */
  color: #0b0b0b;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  position: relative;
  min-width: 80px;
  justify-content: center;
}

.selected-ticket-item .ticket-number { font-size: 1.1rem; }

.selected-ticket-item .remove-btn {
  background-color: rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b0b0b;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.selected-ticket-item .remove-btn:hover { background-color: rgba(0, 0, 0, 0.25); }

/* Estilos para el verificador de tickets */
.themed-header {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  padding: 1.5rem 2rem !important;
  border-radius: 0.5rem 0.5rem 0 0 !important;
}

.themed-header h5 {
  margin: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.themed-header i {
  font-size: 1.1rem !important;
  margin-right: 0.5rem !important;
  opacity: 0.9 !important;
}

.themed-input {
  background-color: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}

.themed-input:focus {
  background-color: #1a1a1a !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(4, 120, 87, 0.25) !important;
}

.themed-input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Mejoras para el cuerpo de la card */
.card-themed .card-body {
  padding: 2rem !important;
}

.card-themed {
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.btn-accent {
  background: linear-gradient(135deg, #f0b400 0%, #e6a200 100%) !important;
  border: none !important;
  color: #0b0b0b !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.btn-accent:hover {
  background: linear-gradient(135deg, #e6a200 0%, #d49500 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(240, 180, 0, 0.3) !important;
}

/* Mejoras para el formulario */
#searchForm {
  margin-bottom: 1.5rem !important;
}

#searchForm .form-control {
  padding: 0.75rem 1rem !important;
  font-size: 1rem !important;
  border-radius: 0.5rem !important;
}

#searchForm .btn {
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  border-radius: 0.5rem !important;
  min-width: 120px !important;
}

/* Mejoras para los ejemplos */
.mt-4 small {
  line-height: 1.6 !important;
  font-size: 0.9rem !important;
}

.mt-4 code {
  background-color: rgba(240, 180, 0, 0.15) !important;
  color: #f0b400 !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.text-accent {
  color: #f0b400 !important;
  font-weight: 600 !important;
}

/* Estilos adicionales para página de éxito */
.border-accent {
  border-color: #f0b400 !important;
}

.btn-outline-accent {
  color: #f0b400 !important;
  border-color: #f0b400 !important;
  background-color: transparent !important;
}

.btn-outline-accent:hover {
  color: #0b0b0b !important;
  background-color: #f0b400 !important;
  border-color: #f0b400 !important;
}

.alert-dark {
  background-color: #1a1a1a !important;
  border-color: #f0b400 !important;
  color: #ffffff !important;
}

.alert-dark .text-accent {
  color: #f0b400 !important;
}

.bg-dark {
  background-color: #1a1a1a !important;
}

/* Paleta de colores extendida */
.text-success-dark {
  color: #10b981 !important;
  font-weight: 600 !important;
}

.text-info-dark {
  color: #06b6d4 !important;
  font-weight: 600 !important;
}

.text-warning-dark {
  color: #f59e0b !important;
  font-weight: 600 !important;
}

.text-danger-dark {
  color: #ef4444 !important;
  font-weight: 600 !important;
}

.text-purple {
  color: #8b5cf6 !important;
  font-weight: 600 !important;
}

.text-pink {
  color: #ec4899 !important;
  font-weight: 600 !important;
}

/* Badges con colores de la paleta */
.badge-success-dark {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

.badge-info-dark {
  background-color: #06b6d4 !important;
  color: #ffffff !important;
}

.badge-warning-dark {
  background-color: #f59e0b !important;
  color: #0b0b0b !important;
}

.badge-danger-dark {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

.badge-purple {
  background-color: #8b5cf6 !important;
  color: #ffffff !important;
}

.badge-pink {
  background-color: #ec4899 !important;
  color: #ffffff !important;
}

/* Cards con colores de acento */
.card-success-dark {
  border-left: 4px solid #10b981 !important;
  background-color: rgba(16, 185, 129, 0.05) !important;
}

.card-info-dark {
  border-left: 4px solid #06b6d4 !important;
  background-color: rgba(6, 182, 212, 0.05) !important;
}

.card-warning-dark {
  border-left: 4px solid #f59e0b !important;
  background-color: rgba(245, 158, 11, 0.05) !important;
}

.card-danger-dark {
  border-left: 4px solid #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.05) !important;
}

.card-purple {
  border-left: 4px solid #8b5cf6 !important;
  background-color: rgba(139, 92, 246, 0.05) !important;
}

.card-pink {
  border-left: 4px solid #ec4899 !important;
  background-color: rgba(236, 72, 153, 0.05) !important;
}

/* Botones con colores de la paleta */
.btn-success-dark {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.btn-info-dark {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.btn-warning-dark {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  border: none !important;
  color: #0b0b0b !important;
  font-weight: 600 !important;
}

.btn-danger-dark {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.btn-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.btn-pink {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Efectos hover para botones */
.btn-success-dark:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3) !important;
}

.btn-info-dark:hover {
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(6, 182, 212, 0.3) !important;
}

.btn-warning-dark:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3) !important;
}

.btn-danger-dark:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3) !important;
}

.btn-purple:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3) !important;
}

.btn-pink:hover {
  background: linear-gradient(135deg, #db2777 0%, #be185d 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(236, 72, 153, 0.3) !important;
}

/* Estilos para resultados de búsqueda */
#searchResults .table {
  color: #ffffff !important;
}

/* Mejoras de espaciado para móviles */
@media (max-width: 768px) {
  /* Controles de búsqueda y selección */
  .row.mb-3 .col-md-6 {
    margin-bottom: 1rem;
  }
  
  /* Botón "ELEGIR A LA SUERTE" */
  #randomSelectBtn {
    width: 100%;
    margin-top: 0.5rem;
  }
  
  /* Información de selección - botones */
  .d-flex.justify-content-between.align-items-center {
    flex-direction: column;
    align-items: stretch !important;
    gap: 1rem;
  }
  
  .d-flex.justify-content-between.align-items-center > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  
  /* Botones Limpiar y Comprar */
  #clearSelectionBtn,
  #purchaseBtn {
    flex: 1;
    margin: 0;
  }
  
  #clearSelectionBtn {
    margin-right: 0.5rem;
  }
  
  /* Input group en móviles */
  .input-group {
    margin-bottom: 1rem;
  }
  
  .input-group .btn {
    white-space: nowrap;
  }
}

#searchResults .table th {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.12) !important;
}

#searchResults .table td {
  background-color: #0b0b0b !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.12) !important;
}

#searchResults .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #1a1a1a !important;
}

#searchResults .badge {
  font-weight: 600 !important;
}

#searchResults .alert {
  background-color: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}

/* Verificador inspirado en diseño moderno */
.verifier-card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 0;
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
}

.verifier-header {
  background: linear-gradient(135deg, #047857 0%, #065f46 100%);
  padding: 2rem 2rem 1.5rem 2rem;
  text-align: center;
}

.verifier-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 1px;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.verifier-body {
  padding: 2rem;
  background: #ffffff;
}

.verifier-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.verifier-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.75rem;
  font-size: 1rem;
  background: #ffffff;
  color: #1f2937;
  transition: all 0.3s ease;
  outline: none;
}

.verifier-input:focus {
  border-color: #047857;
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.1);
}

.verifier-label {
  color: #6b7280;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: -0.5rem;
}

.verifier-button {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
  color: #ffffff;
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.verifier-button:hover {
  background: linear-gradient(135deg, #be185d 0%, #9d174d 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.3);
}

.verifier-button:active {
  transform: translateY(0);
}

.verifier-button i {
  font-size: 1.1rem;
}