/* Sortio - Responsive */
html { -webkit-text-size-adjust: 100%; }

/* Fondo tipo glass / juegos de mesa: gradiente + patrón sutil para no verse plano */
.bg-sortio {
    background-color: #1e1b4b;
    background-image:
        linear-gradient(135deg, rgba(88, 28, 135, 0.85) 0%, rgba(30, 58, 138, 0.9) 40%, rgba(49, 46, 129, 0.9) 100%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 24px,
            rgba(255, 255, 255, 0.02) 24px,
            rgba(255, 255, 255, 0.02) 25px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 24px,
            rgba(255, 255, 255, 0.02) 24px,
            rgba(255, 255, 255, 0.02) 25px
        );
    background-attachment: fixed;
    position: relative;
}
.bg-sortio::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
                      radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
                      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.bg-sortio > * { position: relative; z-index: 1; }

/* Fondo dinámico (imágenes rotativas) para todo el proyecto */
.dynamic-bg-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
}
.dynamic-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.45;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: brightness(0.8) saturate(1.1) contrast(1.05);
  transition: opacity 1.5s ease-in-out;
  will-change: opacity;
}
.dynamic-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.75) 0%, rgba(79, 70, 229, 0.45) 50%, rgba(124, 58, 237, 0.55) 100%);
  z-index: 1;
}
.dynamic-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.dynamic-bg-wrap > header,
.dynamic-bg-wrap > main,
.dynamic-bg-wrap > .dynamic-bg-content {
  position: relative;
  z-index: 2;
}

/* Fondo dinámico dentro de modales (misma rotación de imágenes). No usar position:relative en .modal-overlay para no romper el fixed. */
.modal-dynamic-bg-wrap {
  position: relative;
}
.modal-overlay .modal-dynamic-bg,
.modal-dynamic-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.7) saturate(1.1) contrast(1.05);
  transition: opacity 1.5s ease-in-out;
}
.modal-dynamic-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.8) 0%, rgba(79, 70, 229, 0.5) 50%, rgba(124, 58, 237, 0.6) 100%);
  z-index: 1;
}
.modal-overlay .modal-dynamic-bg-overlay,
.modal-dynamic-bg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1;
}
.modal-dynamic-bg-wrap .modal-dynamic-bg-content,
.modal-dynamic-bg-wrap .premios-modal-content,
.modal-dynamic-bg-wrap > .bg-white {
  position: relative;
  z-index: 2;
}

/* ===== Contraste en inputs/select: texto siempre visible (evitar que números solo se vean al pasar el mouse) ===== */
input,
select,
textarea {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}
/* Número: quitar spinner que tapa el valor y evita ver los dígitos */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -webkit-appearance: none;
    appearance: none;
}
/* Select: texto visible en el valor seleccionado */
select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.8)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1.25rem;
    padding-right: 2rem;
}
select option {
    background: #312e81;
    color: #fff;
}
/* Fecha: asegurar que el valor mostrado se vea */
input[type="date"] {
    color-scheme: dark;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.7;
    cursor: pointer;
}
/* Evitar que etiquetas de checkbox se corten */
label:has(input[type="checkbox"]) {
    min-width: 0;
    overflow-wrap: break-word;
}

.ticket-grid-container {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.ticket-grid .ticket-num {
    min-width: 44px;
    min-height: 44px;
}
@media (min-width: 640px) {
    .ticket-grid .ticket-num { min-width: 2.25rem; min-height: 2.25rem; }
}
@media (min-width: 640px) {
    .sm\:grid-cols-15 { grid-template-columns: repeat(15, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .md\:grid-cols-20 { grid-template-columns: repeat(20, minmax(0, 1fr)); }
}

/* Safe area para móviles con notch */
.safe-area-padding { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.safe-area-top { padding-top: env(safe-area-inset-top); }
main { padding-bottom: env(safe-area-inset-bottom); }

/* Modal premios (vista pública) */
#modalPremios {
    transition: opacity 0.2s ease;
}
#modalPremios.show {
    opacity: 1;
    pointer-events: auto;
}
.premios-modal-content {
    max-height: 85vh;
}

@media print {
    body { background: #fff; }
    .print\:hidden { display: none !important; }
    .print\:max-w-full { max-width: 100%; }
}