/* ============================================
   Modo Oscuro - Sistema de Rifas
   ============================================ */

/* Variables CSS para modo oscuro */
:root {
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2d2d2d;
    --dark-bg-tertiary: #3a3a3a;
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    --dark-border: #404040;
    --dark-card-bg: #252525;
    --dark-input-bg: #2d2d2d;
    --dark-hover: #3a3a3a;
}

/* Aplicar modo oscuro cuando el body tiene la clase 'dark-mode' */
body.dark-mode,
html.dark-mode {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

/* Deshabilitar transiciones durante la carga inicial */
html:not(.dark-mode-loaded) *,
html:not(.dark-mode-loaded) *::before,
html:not(.dark-mode-loaded) *::after {
    transition: none !important;
    animation: none !important;
}

/* Habilitar transiciones después de la carga */
html.dark-mode-loaded body.dark-mode {
    transition: background-color 0.1s ease, color 0.1s ease;
}

/* Navbar en modo oscuro */
body.dark-mode .navbar-custom {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom: 1px solid var(--dark-border);
}

/* Navbar en modo claro - misma separación que modo oscuro */
.navbar-custom {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.dark-mode .navbar-custom .navbar-brand span,
body.dark-mode .navbar-custom .nav-link {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .navbar-custom .nav-link:hover {
    background-color: var(--dark-hover) !important;
}

/* Cards en modo oscuro */
body.dark-mode .card {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Excepción: Cards de estadísticas mantienen sus colores Bootstrap originales */
body.dark-mode .card.bg-primary,
body.dark-mode .card.bg-success,
body.dark-mode .card.bg-warning,
body.dark-mode .card.bg-danger,
body.dark-mode .card.bg-info,
body.dark-mode .card.bg-secondary {
    background-color: inherit !important;
    border-color: transparent !important;
}

body.dark-mode .card-body {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .card-title,
body.dark-mode .card-text {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .card-text.text-muted {
    color: var(--dark-text-secondary) !important;
}

/* Secciones en modo oscuro */
body.dark-mode section {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode section.bg-light {
    background-color: var(--dark-bg-secondary) !important;
}

/* Step cards en modo oscuro */
body.dark-mode .step-card {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .step-card:hover {
    background-color: var(--dark-hover) !important;
}

/* Formularios en modo oscuro */
body.dark-mode .form-section {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--primary-color) !important;
    color: var(--dark-text-primary) !important;
}

/* Placeholder en modo oscuro */
body.dark-mode .form-control::placeholder,
body.dark-mode .form-control::-webkit-input-placeholder,
body.dark-mode .form-control::-moz-placeholder,
body.dark-mode .form-control:-ms-input-placeholder {
    color: var(--dark-text-secondary) !important;
    opacity: 0.7 !important;
}

/* Inputs específicos de rifa-detalle.php */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="number"],
body.dark-mode textarea {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="tel"]:focus,
body.dark-mode input[type="number"]:focus,
body.dark-mode textarea:focus {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--primary-color) !important;
    color: var(--dark-text-primary) !important;
}

/* Campo de correo electrónico específicamente */
body.dark-mode input[type="email"] {
    color: var(--dark-text-primary) !important;
}

body.dark-mode input[type="email"]::placeholder {
    color: var(--dark-text-secondary) !important;
    opacity: 0.7 !important;
}

body.dark-mode .form-label {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .form-text,
body.dark-mode .form-text.text-muted,
body.dark-mode small,
body.dark-mode .small {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .text-muted {
    color: var(--dark-text-secondary) !important;
}

/* Tablas en modo oscuro */
body.dark-mode .table {
    color: var(--dark-text-primary) !important;
    background-color: var(--dark-card-bg) !important;
}

body.dark-mode .table th {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
    font-weight: 600;
}

body.dark-mode .table td {
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
    background-color: var(--dark-card-bg) !important;
}

body.dark-mode .table tbody tr {
    background-color: var(--dark-card-bg) !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .table-hover > tbody > tr:hover {
    background-color: var(--dark-hover) !important;
}

body.dark-mode .table-hover > tbody > tr:hover > td {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* Filas especiales de tablas en modo oscuro */
body.dark-mode .table-row-cerrada {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

body.dark-mode .table-row-cerrada:hover {
    background-color: rgba(220, 53, 69, 0.25) !important;
}

body.dark-mode .table-row-cerrada td {
    background-color: rgba(220, 53, 69, 0.15) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .table-row-inactiva {
    background-color: rgba(108, 117, 125, 0.2) !important;
    opacity: 0.8;
}

body.dark-mode .table-row-inactiva td {
    background-color: rgba(108, 117, 125, 0.2) !important;
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .table-row-finalizada {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

body.dark-mode .table-row-finalizada:hover {
    background-color: rgba(255, 193, 7, 0.25) !important;
}

body.dark-mode .table-row-finalizada td {
    background-color: rgba(255, 193, 7, 0.15) !important;
    color: var(--dark-text-primary) !important;
}

/* Badges en modo oscuro */
body.dark-mode .badge {
    color: var(--dark-text-primary) !important;
}

/* Badges de estado en tablas - Más opacos en modo oscuro */
body.dark-mode .table .badge.bg-success {
    background-color: rgba(25, 135, 84, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode .table .badge.bg-danger {
    background-color: rgba(220, 53, 69, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode .table .badge.bg-warning {
    background-color: rgba(255, 193, 7, 0.7) !important;
    color: #000000 !important;
}

body.dark-mode .table .badge.bg-secondary {
    background-color: rgba(108, 117, 125, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode .table .badge.bg-info {
    background-color: rgba(13, 202, 240, 0.7) !important;
    color: #000000 !important;
}

/* Badges en modal de detalles de ticket - Más opacos en modo oscuro */
body.dark-mode #modal-ticket-content .badge.bg-success,
body.dark-mode .modal-body .badge.bg-success {
    background-color: rgba(25, 135, 84, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode #modal-ticket-content .badge.bg-danger,
body.dark-mode .modal-body .badge.bg-danger {
    background-color: rgba(220, 53, 69, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode #modal-ticket-content .badge.bg-warning,
body.dark-mode .modal-body .badge.bg-warning {
    background-color: rgba(255, 193, 7, 0.7) !important;
    color: #000000 !important;
}

body.dark-mode #modal-ticket-content .badge.bg-secondary,
body.dark-mode .modal-body .badge.bg-secondary {
    background-color: rgba(108, 117, 125, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode #modal-ticket-content .badge.bg-primary,
body.dark-mode .modal-body .badge.bg-primary {
    background-color: rgba(13, 110, 253, 0.7) !important;
    color: #ffffff !important;
}

/* Badges en página de confirmación de compra - Más opacos en modo oscuro */
body.dark-mode .card .badge.bg-success,
body.dark-mode .card-body .badge.bg-success {
    background-color: rgba(25, 135, 84, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode .card .badge.bg-danger,
body.dark-mode .card-body .badge.bg-danger {
    background-color: rgba(220, 53, 69, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode .card .badge.bg-warning,
body.dark-mode .card-body .badge.bg-warning {
    background-color: rgba(255, 193, 7, 0.7) !important;
    color: #000000 !important;
}

body.dark-mode .card .badge.bg-secondary,
body.dark-mode .card-body .badge.bg-secondary {
    background-color: rgba(108, 117, 125, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode .card .badge.bg-primary,
body.dark-mode .card-body .badge.bg-primary {
    background-color: rgba(13, 110, 253, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode .card .badge.bg-info,
body.dark-mode .card-body .badge.bg-info {
    background-color: rgba(13, 202, 240, 0.7) !important;
    color: #000000 !important;
}

/* Progress bars en modo oscuro */
body.dark-mode .progress {
    background-color: var(--dark-bg-secondary) !important;
}

/* Modales en modo oscuro */
body.dark-mode .modal-content {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .modal-header {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .modal-footer {
    border-top-color: var(--dark-border) !important;
}

body.dark-mode .modal-body {
    color: var(--dark-text-primary) !important;
}

/* Contenido dinámico del modal de tickets en modo oscuro */
body.dark-mode #modal-ticket-content,
body.dark-mode #modal-ticket-content * {
    color: var(--dark-text-primary) !important;
}

body.dark-mode #modal-ticket-content h6 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode #modal-ticket-content p {
    color: var(--dark-text-primary) !important;
}

body.dark-mode #modal-ticket-content strong {
    color: var(--dark-text-primary) !important;
}

body.dark-mode #modal-ticket-content .text-muted {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode #modal-ticket-content .border {
    border-color: var(--dark-border) !important;
}

body.dark-mode #modal-ticket-content iframe {
    background-color: var(--dark-bg-primary) !important;
}

body.dark-mode #modal-ticket-content .btn-outline-primary {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

body.dark-mode #modal-ticket-content .btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Imágenes en el modal de tickets */
body.dark-mode #modal-ticket-content img {
    border-color: var(--dark-border) !important;
}

/* Contenedor del comprobante en modal */
body.dark-mode #modal-ticket-content .border.rounded {
    border-color: var(--dark-border) !important;
    background-color: var(--dark-bg-secondary) !important;
}

/* Texto dentro del contenedor del comprobante */
body.dark-mode #modal-ticket-content .border.rounded span,
body.dark-mode #modal-ticket-content .border.rounded i {
    color: var(--dark-text-primary) !important;
}

/* Alerts en el modal de tickets - Modo oscuro */
body.dark-mode #modal-ticket-content .alert {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #modal-ticket-content .alert-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-color: rgba(220, 53, 69, 0.5) !important;
    color: #ff6b7a !important;
}

body.dark-mode #modal-ticket-content .alert-danger p,
body.dark-mode #modal-ticket-content .alert-danger .mb-0 {
    color: #ff6b7a !important;
}

body.dark-mode #modal-ticket-content .alert-danger i {
    color: #ff6b7a !important;
}

body.dark-mode #modal-ticket-content .alert-danger .text-muted {
    color: rgba(255, 107, 122, 0.7) !important;
}

body.dark-mode #modal-ticket-content .alert-danger small {
    color: rgba(255, 107, 122, 0.8) !important;
}

body.dark-mode #modal-ticket-content .alert-danger br {
    display: block;
    content: "";
    margin-top: 0.5em;
}

body.dark-mode #modal-ticket-content .alert-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
    border-color: rgba(13, 202, 240, 0.4) !important;
    color: #6dd5ed !important;
}

body.dark-mode #modal-ticket-content .alert-info p,
body.dark-mode #modal-ticket-content .alert-info .mb-0 {
    color: #6dd5ed !important;
}

body.dark-mode #modal-ticket-content .alert-info i {
    color: #6dd5ed !important;
}

body.dark-mode #modal-ticket-content .alert-info .text-muted {
    color: rgba(109, 213, 237, 0.7) !important;
}

body.dark-mode #modal-ticket-content .alert-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    color: #ffd54f !important;
}

body.dark-mode #modal-ticket-content .alert-warning p,
body.dark-mode #modal-ticket-content .alert-warning strong {
    color: #ffd54f !important;
}

body.dark-mode #modal-ticket-content .alert-warning i {
    color: #ffd54f !important;
}

/* Footer en modo oscuro */
body.dark-mode .footer-custom {
    background-color: var(--dark-bg-secondary) !important;
    border-top-color: var(--dark-border) !important;
    color: #ffffff !important;
}

body.dark-mode .footer-custom h5,
body.dark-mode .footer-custom h6,
body.dark-mode .footer-custom p,
body.dark-mode .footer-custom strong,
body.dark-mode .footer-custom span,
body.dark-mode .footer-custom a,
body.dark-mode .footer-custom .footer-description,
body.dark-mode .footer-custom .footer-section-title,
body.dark-mode .footer-custom .copyright,
body.dark-mode .footer-custom .developer-name,
body.dark-mode .footer-custom .contacto-item {
    color: #ffffff !important;
}

body.dark-mode .footer-custom .red-social-link,
body.dark-mode .footer-custom .github-link {
    color: #ffffff !important;
}

body.dark-mode .footer-custom a:hover {
    color: #ffffff !important;
    opacity: 0.8 !important;
}

/* Textos en modo oscuro */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .text-muted {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .lead {
    color: var(--dark-text-secondary) !important;
}

/* Botones en modo oscuro */
body.dark-mode .btn-outline-light {
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .btn-outline-light:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Alerts en modo oscuro */
body.dark-mode .alert {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Breadcrumb - Estilos consistentes en modo claro y oscuro */
.breadcrumb {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    padding: 0.75rem 1rem !important;
}

.breadcrumb-item a {
    color: #6c757d !important;
    text-decoration: none !important;
}

.breadcrumb-item a:hover {
    color: var(--primary-color) !important;
}

.breadcrumb-item.active {
    color: #495057 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d !important;
    content: ">" !important;
}

/* Breadcrumb en modo oscuro */
body.dark-mode .breadcrumb {
    background-color: var(--dark-bg-primary) !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 0.375rem !important;
    padding: 0.75rem 1rem !important;
}

body.dark-mode .breadcrumb-item a {
    color: var(--dark-text-secondary) !important;
    text-decoration: none !important;
}

body.dark-mode .breadcrumb-item a:hover {
    color: var(--primary-color) !important;
}

body.dark-mode .breadcrumb-item.active {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: var(--dark-text-secondary) !important;
    content: ">" !important;
}

/* Paginación en modo oscuro */
body.dark-mode .page-link {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .page-link:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* Dropdown en modo oscuro */
body.dark-mode .dropdown-menu {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .dropdown-item {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .dropdown-item:hover {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

/* ============================================
   ADMIN - Modo Oscuro
   ============================================ */

/* Sidebar en modo oscuro */
body.dark-mode .sidebar {
    background-color: var(--dark-bg-secondary) !important;
    border-right: 1px solid var(--dark-border);
}

body.dark-mode .sidebar .nav-link {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .sidebar .nav-link:hover,
body.dark-mode .sidebar .nav-link.active {
    background-color: var(--dark-hover) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .sidebar h4 {
    color: var(--dark-text-primary) !important;
}

/* Topbar en modo oscuro */
body.dark-mode .navbar-light {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .navbar-light .navbar-brand {
    color: var(--dark-text-primary) !important;
}

/* Main content en modo oscuro */
body.dark-mode .main-content {
    background-color: var(--dark-bg-primary) !important;
}

/* Cards de estadísticas en modo oscuro - Mantener colores originales */
body.dark-mode .card.bg-primary,
body.dark-mode .card.bg-success,
body.dark-mode .card.bg-warning,
body.dark-mode .card.bg-danger,
body.dark-mode .card.bg-info,
body.dark-mode .card.bg-secondary {
    /* Mantener colores originales de las cards de estadísticas */
    background-color: inherit !important;
    border-color: transparent !important;
    opacity: 1 !important;
}

/* Cards de estadísticas con colores atenuados para modo oscuro */
body.dark-mode .card.bg-primary {
    background-color: #0a58ca !important; /* Más oscuro que #0d6efd */
}

body.dark-mode .card.bg-success {
    background-color: #146c43 !important; /* Más oscuro que #198754 */
}

body.dark-mode .card.bg-warning {
    background-color: #cc9a06 !important; /* Más oscuro que #ffc107 */
}

body.dark-mode .card.bg-danger {
    background-color: #b02a37 !important; /* Más oscuro que #dc3545 */
}

body.dark-mode .card.bg-info {
    background-color: #0aa2c0 !important; /* Más oscuro que #0dcaf0 */
}

body.dark-mode .card.bg-secondary {
    background-color: #5c636a !important; /* Más oscuro que #6c757d */
}

body.dark-mode .card.bg-primary .card-body,
body.dark-mode .card.bg-success .card-body,
body.dark-mode .card.bg-warning .card-body,
body.dark-mode .card.bg-danger .card-body,
body.dark-mode .card.bg-info .card-body,
body.dark-mode .card.bg-secondary .card-body {
    color: white !important;
}

body.dark-mode .card.bg-primary h4,
body.dark-mode .card.bg-primary h5,
body.dark-mode .card.bg-primary p,
body.dark-mode .card.bg-primary small,
body.dark-mode .card.bg-success h4,
body.dark-mode .card.bg-success h5,
body.dark-mode .card.bg-success p,
body.dark-mode .card.bg-success small,
body.dark-mode .card.bg-warning h4,
body.dark-mode .card.bg-warning h5,
body.dark-mode .card.bg-warning p,
body.dark-mode .card.bg-warning small,
body.dark-mode .card.bg-danger h4,
body.dark-mode .card.bg-danger h5,
body.dark-mode .card.bg-danger p,
body.dark-mode .card.bg-danger small,
body.dark-mode .card.bg-info h4,
body.dark-mode .card.bg-info h5,
body.dark-mode .card.bg-info p,
body.dark-mode .card.bg-info small,
body.dark-mode .card.bg-secondary h4,
body.dark-mode .card.bg-secondary h5,
body.dark-mode .card.bg-secondary p,
body.dark-mode .card.bg-secondary small {
    color: white !important;
}

body.dark-mode .card.bg-primary i,
body.dark-mode .card.bg-success i,
body.dark-mode .card.bg-warning i,
body.dark-mode .card.bg-danger i,
body.dark-mode .card.bg-info i,
body.dark-mode .card.bg-secondary i {
    color: white !important;
    opacity: 0.5 !important;
}

/* Cards de estadísticas con colores personalizados en modo oscuro */
/* Total de Rifas - Azul oscuro (#2c3e50) -> Más opaco */
body.dark-mode .card[style*="background-color: #2c3e50"] {
    background-color: #1e2a35 !important;
    opacity: 0.9 !important;
}

/* Rifas Activas - Verde (#28a745) -> Más opaco */
body.dark-mode .card[style*="background-color: #28a745"] {
    background-color: #1e7e34 !important;
    opacity: 0.9 !important;
}

/* Destacadas - Gradiente dorado -> Más opaco */
body.dark-mode .card[style*="background: linear-gradient(135deg, #f39c12"] {
    background: linear-gradient(135deg, #d68910 0%, #ca6f1e 100%) !important;
    opacity: 0.9 !important;
}

/* Tickets Vendidos - Azul (#007bff) -> Más opaco */
body.dark-mode .card[style*="background-color: #007bff"] {
    background-color: #0056b3 !important;
    opacity: 0.9 !important;
}

/* Tickets Pendientes - Naranja (#fd7e14) -> Más opaco */
body.dark-mode .card[style*="background-color: #fd7e14"] {
    background-color: #dc6502 !important;
    opacity: 0.9 !important;
}

/* Ingresos en BS - Verde turquesa (#20c997) -> Más opaco */
body.dark-mode .card[style*="background-color: #20c997"] {
    background-color: #17a085 !important;
    opacity: 0.9 !important;
}

/* Ingresos en Dólares - Azul turquesa (#17a2b8) -> Más opaco */
body.dark-mode .card[style*="background-color: #17a2b8"] {
    background-color: #117a8b !important;
    opacity: 0.9 !important;
}

/* Asegurar que el texto se mantenga blanco en modo oscuro para cards personalizadas */
body.dark-mode .card[style*="background-color"] .card-body,
body.dark-mode .card[style*="background: linear-gradient"] .card-body {
    color: white !important;
}

body.dark-mode .card[style*="background-color"] h5,
body.dark-mode .card[style*="background-color"] p,
body.dark-mode .card[style*="background-color"] small,
body.dark-mode .card[style*="background: linear-gradient"] h5,
body.dark-mode .card[style*="background: linear-gradient"] p,
body.dark-mode .card[style*="background: linear-gradient"] small {
    color: white !important;
}

body.dark-mode .card[style*="background-color"] i,
body.dark-mode .card[style*="background: linear-gradient"] i {
    color: white !important;
    opacity: 0.5 !important;
}

/* Mejorar legibilidad de descripciones de campos en modo oscuro */
body.dark-mode .field-description,
body.dark-mode .form-text.text-muted {
    color: var(--dark-text-secondary) !important;
    opacity: 0.9 !important;
}

/* Mejorar legibilidad de placeholders en modo oscuro - más específico */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode .form-control::placeholder,
body.dark-mode input.form-control::placeholder,
body.dark-mode textarea.form-control::placeholder,
body.dark-mode #filtro-busqueda::placeholder,
body.dark-mode input[type="text"]::placeholder,
body.dark-mode input[type="email"]::placeholder,
body.dark-mode input[type="tel"]::placeholder,
body.dark-mode input[type="number"]::placeholder {
    color: var(--dark-text-secondary) !important;
    opacity: 0.85 !important;
}

/* Placeholders específicos para webkit y moz */
body.dark-mode input::-webkit-input-placeholder,
body.dark-mode textarea::-webkit-input-placeholder,
body.dark-mode .form-control::-webkit-input-placeholder,
body.dark-mode #filtro-busqueda::-webkit-input-placeholder {
    color: var(--dark-text-secondary) !important;
    opacity: 0.85 !important;
}

body.dark-mode input::-moz-placeholder,
body.dark-mode textarea::-moz-placeholder,
body.dark-mode .form-control::-moz-placeholder,
body.dark-mode #filtro-busqueda::-moz-placeholder {
    color: var(--dark-text-secondary) !important;
    opacity: 0.85 !important;
}

body.dark-mode input:-ms-input-placeholder,
body.dark-mode textarea:-ms-input-placeholder,
body.dark-mode .form-control:-ms-input-placeholder,
body.dark-mode #filtro-busqueda:-ms-input-placeholder {
    color: var(--dark-text-secondary) !important;
    opacity: 0.85 !important;
}

/* Ocultar icono de calendario nativo del navegador dentro del campo de fecha */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
    display: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Firefox - ocultar icono de calendario nativo */
input[type="date"]::-moz-clear {
    display: none !important;
}

/* Edge/IE - ocultar icono de calendario nativo */
input[type="date"]::-ms-clear {
    display: none !important;
}

/* Iconos de calendario con efecto hover */
.calendar-icon {
    transition: all 0.3s ease;
    cursor: pointer !important;
}

.calendar-icon:hover {
    background-color: rgba(0, 123, 255, 0.15) !important;
    color: #007bff !important;
}

.calendar-icon i {
    transition: transform 0.3s ease;
}

.calendar-icon:hover i {
    transform: scale(1.1);
}

/* Modo oscuro: iconos de calendario */
body.dark-mode .calendar-icon {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .calendar-icon:hover {
    background-color: rgba(102, 126, 234, 0.2) !important;
    color: var(--primary-color) !important;
}

/* Animación hover minimalista y elegante para modo oscuro */
body.dark-mode .card.bg-primary:hover,
body.dark-mode .card.bg-success:hover,
body.dark-mode .card.bg-warning:hover,
body.dark-mode .card.bg-danger:hover,
body.dark-mode .card.bg-info:hover,
body.dark-mode .card.bg-secondary:hover,
body.dark-mode .card[style*="background: linear-gradient"]:hover,
body.dark-mode .card[style*="background-color"]:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 0 30px rgba(255, 255, 255, 0.05) !important;
    filter: brightness(1.1) !important;
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover minimalista para cards de estadísticas en modo oscuro */
body.dark-mode .row.g-2 .card:hover,
body.dark-mode .row.g-3 .card:hover,
body.dark-mode .row.g-md-3 .card:hover,
body.dark-mode .row.stats-cards .card:hover,
body.dark-mode .card.stats-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 0 30px rgba(255, 255, 255, 0.05) !important;
    filter: brightness(1.1) !important;
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Image upload en modo oscuro */
body.dark-mode .image-upload-container {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .image-upload-container:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--primary-color) !important;
}

/* Gallery preview en modo oscuro */
body.dark-mode .gallery-item {
    border-color: var(--dark-border) !important;
}

/* Galería de imágenes en rifa-detalle - Modo oscuro */
body.dark-mode #galeria-imagenes {
    background-color: transparent !important;
}

body.dark-mode #galeria-imagenes .gallery-thumbnail {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode #galeria-imagenes .gallery-thumbnail:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3) !important;
    background-color: var(--dark-hover) !important;
}

body.dark-mode #galeria-imagenes .gallery-thumbnail.active {
    border-color: var(--primary-color) !important;
    border-width: 3px !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
    background-color: var(--dark-hover) !important;
}

body.dark-mode #imagen-principal {
    background-color: var(--dark-card-bg) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Asegurar que los bordes de las miniaturas se vean bien en modo oscuro */
body.dark-mode #galeria-imagenes .gallery-thumbnail {
    border: 1px solid var(--dark-border) !important;
}

body.dark-mode #galeria-imagenes .gallery-thumbnail.active {
    border: 3px solid var(--primary-color) !important;
}

/* Spinner en modo oscuro */
body.dark-mode .spinner-border {
    color: var(--dark-text-primary) !important;
}

/* Listas en modo oscuro */
body.dark-mode ul,
body.dark-mode ol {
    color: var(--dark-text-primary) !important;
}

body.dark-mode ul li,
body.dark-mode ol li {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .alert ul li,
body.dark-mode .alert ol li {
    color: var(--dark-text-primary) !important;
}

/* Nav tabs en modo oscuro */
body.dark-mode .nav-tabs {
    border-bottom-color: var(--dark-border) !important;
}

body.dark-mode .nav-tabs .nav-link {
    color: var(--dark-text-secondary) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) var(--dark-border) transparent !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    color: var(--dark-text-primary) !important;
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) var(--dark-border) var(--dark-card-bg) !important;
}

/* Config cards en modo oscuro */
body.dark-mode .config-card {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .config-card h6 {
    color: var(--dark-text-primary) !important;
}

/* Tab content en modo oscuro */
body.dark-mode .tab-content {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .tab-pane {
    color: var(--dark-text-primary) !important;
}

/* Métodos de pago en modo oscuro */
body.dark-mode .metodo-pago {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .metodo-pago h6 {
    color: var(--dark-text-primary) !important;
}

/* Métodos de pago - Opciones de selección (rifa-detalle.php) */
body.dark-mode .metodo-pago-option {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .metodo-pago-option:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--primary-color) !important;
}

body.dark-mode .metodo-pago-option .form-check-label {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .metodo-pago-option .detalles-pago {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .metodo-pago-option .detalles-pago strong {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .metodo-temporal {
    background-color: rgba(255, 193, 7, 0.1) !important;
    border-left-color: #ffc107 !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .metodo-temporal h6 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .badge-temporal {
    background-color: #ffc107 !important;
    color: #000 !important;
}

/* ============================================
   Botón de Toggle Modo Oscuro - Minimalista
   ============================================ */

.dark-mode-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    max-width: 38px;
    max-height: 38px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    overflow: visible;
    flex-shrink: 0;
    z-index: 10;
    padding: 0;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    box-sizing: border-box;
    vertical-align: middle;
}

.dark-mode-toggle:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    transform: none;
    overflow: visible;
}

.dark-mode-toggle:active {
    transform: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.15);
}

.dark-mode-toggle:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.dark-mode-toggle i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.15s ease;
    position: absolute;
    line-height: 1;
}

.dark-mode-toggle .fa-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.dark-mode-toggle .fa-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
}

/* Estado activo (modo oscuro) */
body.dark-mode .dark-mode-toggle {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .dark-mode-toggle:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
    transform: none !important;
    overflow: visible;
    width: 38px !important;
    height: 38px !important;
}

body.dark-mode .dark-mode-toggle:focus {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

body.dark-mode .dark-mode-toggle .fa-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
}

body.dark-mode .dark-mode-toggle .fa-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* En el navbar */
.navbar .dark-mode-toggle {
    margin-left: 0.75rem;
    margin-right: 0;
}

/* Ajuste para que el botón se vea bien en el navbar */
.navbar-nav .nav-item .dark-mode-toggle {
    margin: 0;
}

/* En modo oscuro, sobrescribir los colores del header para el botón */
body.dark-mode .navbar-custom .dark-mode-toggle {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .navbar-custom .dark-mode-toggle:hover {
    border-color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
    transform: none !important;
    width: 38px !important;
    height: 38px !important;
}

body.dark-mode .navbar-custom .dark-mode-toggle:focus {
    border-color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .navbar-custom .dark-mode-toggle i {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* En el topbar del admin */
.navbar-light .dark-mode-toggle {
    margin-right: 0.5rem;
    border-color: rgba(0, 0, 0, 0.3);
}

.navbar-light .dark-mode-toggle i {
    color: rgba(0, 0, 0, 0.7);
}

.navbar-light .dark-mode-toggle:hover {
    border-color: rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
    transform: none !important;
    overflow: visible;
    width: 38px !important;
    height: 38px !important;
}

/* Prevenir scroll y cambios de layout cuando se hace hover sobre el botón de modo oscuro */
.navbar .dark-mode-toggle,
.navbar-light .dark-mode-toggle {
    pointer-events: auto;
    touch-action: manipulation;
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.navbar .dark-mode-toggle:hover,
.navbar-light .dark-mode-toggle:hover {
    pointer-events: auto;
    touch-action: manipulation;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    transform: none !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
}

/* Asegurar que el contenedor del botón no cause scroll */
.navbar .d-flex.gap-2,
.navbar-light .d-flex.gap-2 {
    overflow: visible;
    position: relative;
    flex-shrink: 0;
}

.navbar .container-fluid,
.navbar-light .container-fluid {
    overflow: visible;
    position: relative;
}

body.dark-mode .navbar-light .dark-mode-toggle {
    border-color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .navbar-light .dark-mode-toggle i {
    color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .navbar-light .dark-mode-toggle:hover {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
    .dark-mode-toggle {
        width: 36px;
        height: 36px;
    }
    
    .dark-mode-toggle i {
        font-size: 0.9rem;
    }
    
    .navbar .dark-mode-toggle {
        margin-left: 0.5rem;
    }
    
    .navbar-light .dark-mode-toggle {
        margin-right: 0.5rem;
    }
}

/* Animación suave para el cambio de modo (solo después de la carga) - Optimizado a 0.1s */
html.dark-mode-loaded * {
    transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

/* SOBRESCRIBIR la regla global para elementos del navbar - evita conflictos con animaciones */
html.dark-mode-loaded .navbar-custom,
html.dark-mode-loaded .navbar-custom *,
html.dark-mode-loaded .navbar-collapse,
html.dark-mode-loaded .navbar-collapse *,
html.dark-mode-loaded .navbar-nav,
html.dark-mode-loaded .navbar-nav *,
html.dark-mode-loaded .nav-item,
html.dark-mode-loaded .nav-link {
    transition: initial !important;
}

/* ============================================
   RIFA-DETALLE.PHP - Estilos Específicos
   ============================================ */

/* Verificador de tickets */
body.dark-mode #busqueda-ticket {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #busqueda-ticket::placeholder {
    color: var(--dark-text-secondary) !important;
    opacity: 0.7 !important;
}

body.dark-mode #busqueda-ticket:focus {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--primary-color) !important;
    color: var(--dark-text-primary) !important;
}

/* Descripción del verificador de tickets */
body.dark-mode #form-verificar-ticket .text-muted {
    color: var(--dark-text-secondary) !important;
}

/* Card del resultado del verificador de tickets */
body.dark-mode #resultado-verificacion .card.bg-light {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* Contenido dentro de la card del verificador */
body.dark-mode #resultado-verificacion .card.bg-light .card-body {
    background-color: var(--dark-card-bg) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #resultado-verificacion .card.bg-light .card-title,
body.dark-mode #resultado-verificacion .card.bg-light h5,
body.dark-mode #resultado-verificacion .card.bg-light h6 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode #resultado-verificacion .card.bg-light p,
body.dark-mode #resultado-verificacion .card.bg-light strong {
    color: var(--dark-text-primary) !important;
}

body.dark-mode #resultado-verificacion .card.bg-light .text-muted,
body.dark-mode #resultado-verificacion .card.bg-light small {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode #resultado-verificacion .card.bg-light hr {
    border-color: var(--dark-border) !important;
    opacity: 0.3 !important;
}

/* List group items en el historial de rechazos */
body.dark-mode #resultado-verificacion .list-group-item {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

/* H6 dentro de list-group-item - hacer más visible - Selector muy específico */
body.dark-mode #resultado-verificacion .list-group-item h6,
body.dark-mode #resultado-verificacion .list-group-item h6.mb-1,
body.dark-mode #resultado-verificacion .list-group-item-action h6,
body.dark-mode #resultado-verificacion .list-group-item-action h6.mb-1,
body.dark-mode #resultado-verificacion .card.bg-light .list-group-item h6,
body.dark-mode #resultado-verificacion .card.bg-light .list-group-item-action h6 {
    color: #ffffff !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Texto dentro del h6 del ticket - asegurar visibilidad máxima */
body.dark-mode #resultado-verificacion .list-group-item h6 *:not(i):not(.text-danger),
body.dark-mode #resultado-verificacion .list-group-item-action h6 *:not(i):not(.text-danger),
body.dark-mode #resultado-verificacion .card.bg-light .list-group-item h6 *:not(i):not(.text-danger) {
    color: #ffffff !important;
}

/* Sobrescribir cualquier estilo que pueda hacer el texto gris - Selector máximo */
body.dark-mode #resultado-verificacion .card.bg-light .list-group-item.list-group-item-action h6.mb-1 {
    color: #ffffff !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* Forzar color blanco en todo el contenido del h6 (excepto iconos) */
body.dark-mode #resultado-verificacion .list-group-item h6.mb-1,
body.dark-mode #resultado-verificacion .list-group-item-action h6.mb-1 {
    color: #ffffff !important;
}

/* Asegurar que el texto dentro del h6 también sea blanco */
body.dark-mode #resultado-verificacion .list-group-item h6.mb-1:not(:has(i)),
body.dark-mode #resultado-verificacion .list-group-item-action h6.mb-1:not(:has(i)) {
    color: #ffffff !important;
}

/* Fallback para navegadores que no soportan :has() */
body.dark-mode #resultado-verificacion .list-group-item h6.mb-1,
body.dark-mode #resultado-verificacion .list-group-item-action h6.mb-1 {
    color: #ffffff !important;
}

body.dark-mode #resultado-verificacion .list-group-item p,
body.dark-mode #resultado-verificacion .list-group-item strong {
    color: var(--dark-text-primary) !important;
}

body.dark-mode #resultado-verificacion .list-group-item .text-muted,
body.dark-mode #resultado-verificacion .list-group-item small {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode #resultado-verificacion .list-group-item:hover {
    background-color: var(--dark-hover) !important;
}

/* Alerts dentro del verificador de tickets */
body.dark-mode #resultado-verificacion .alert {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #resultado-verificacion .alert-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-color: rgba(220, 53, 69, 0.5) !important;
    color: #ff6b7a !important;
}

body.dark-mode #resultado-verificacion .alert-danger h6,
body.dark-mode #resultado-verificacion .alert-danger p,
body.dark-mode #resultado-verificacion .alert-danger strong {
    color: #ff6b7a !important;
}

body.dark-mode #resultado-verificacion .alert-info {
    background-color: rgba(13, 202, 240, 0.15) !important;
    border-color: rgba(13, 202, 240, 0.4) !important;
    color: #6dd5ed !important;
}

body.dark-mode #resultado-verificacion .alert-info h6,
body.dark-mode #resultado-verificacion .alert-info p,
body.dark-mode #resultado-verificacion .alert-info strong {
    color: #6dd5ed !important;
}

body.dark-mode #resultado-verificacion .alert-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    color: #ffd54f !important;
}

body.dark-mode #resultado-verificacion .alert-warning h6,
body.dark-mode #resultado-verificacion .alert-warning p,
body.dark-mode #resultado-verificacion .alert-warning strong {
    color: #ffd54f !important;
}

/* Badges dentro del verificador de tickets */
body.dark-mode #resultado-verificacion .badge {
    color: white !important;
}

body.dark-mode #resultado-verificacion .badge.bg-primary {
    background-color: rgba(13, 110, 253, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode #resultado-verificacion .badge.bg-success {
    background-color: rgba(25, 135, 84, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode #resultado-verificacion .badge.bg-danger {
    background-color: rgba(220, 53, 69, 0.7) !important;
    color: #ffffff !important;
}

body.dark-mode #resultado-verificacion .badge.bg-warning {
    background-color: rgba(255, 193, 7, 0.7) !important;
    color: #000000 !important;
}

body.dark-mode #resultado-verificacion .badge.bg-info {
    background-color: rgba(13, 202, 240, 0.7) !important;
    color: #000000 !important;
}

/* Textos de color dentro del verificador */
body.dark-mode #resultado-verificacion .text-success {
    color: #6dd5a0 !important;
}

body.dark-mode #resultado-verificacion .text-danger {
    color: #ff6b7a !important;
}

body.dark-mode #resultado-verificacion .text-warning {
    color: #ffd54f !important;
}

body.dark-mode #resultado-verificacion .text-info {
    color: #6dd5ed !important;
}

/* Iconos dentro del verificador */
body.dark-mode #resultado-verificacion .text-danger i,
body.dark-mode #resultado-verificacion i.text-danger {
    color: #ff6b7a !important;
}

body.dark-mode #resultado-verificacion .text-warning i,
body.dark-mode #resultado-verificacion i.text-warning {
    color: #ffd54f !important;
}

body.dark-mode #resultado-verificacion .text-success i,
body.dark-mode #resultado-verificacion i.text-success {
    color: #6dd5a0 !important;
}

/* ============================================
   SELECTOR DE NÚMEROS - Modo Oscuro
   ============================================ */

/* Contenedores de números en modo oscuro */
body.dark-mode .sorteo-numeros-grid,
body.dark-mode .numeros-paginado-container {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Números disponibles en modo oscuro */
body.dark-mode .sorteo-numero.disponible {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
    border: 1px solid var(--dark-border) !important;
    cursor: pointer !important;
}

body.dark-mode .sorteo-numero.disponible:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

/* Números seleccionados en modo oscuro */
body.dark-mode .sorteo-numero.seleccionado {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

/* Números vendidos en modo oscuro */
body.dark-mode .sorteo-numero.vendido {
    background-color: var(--dark-bg-tertiary) !important;
    color: #6c757d !important;
    border-color: var(--dark-border) !important;
    border: 1px solid var(--dark-border) !important;
    cursor: not-allowed !important;
}

/* Números reservados en modo oscuro */
body.dark-mode .sorteo-numero.reservado {
    background-color: var(--dark-bg-tertiary) !important;
    color: #6c757d !important;
    border-color: var(--dark-border) !important;
    border: 1px solid var(--dark-border) !important;
    cursor: not-allowed !important;
}

/* Asegurar que los números vendidos/reservados tengan estilos correctos en modo oscuro */
body.dark-mode .sorteo-numero.vendido,
body.dark-mode .sorteo-numero.reservado,
body.dark-mode div.sorteo-numero.vendido,
body.dark-mode div.sorteo-numero.reservado,
body.dark-mode #numeros-container .sorteo-numero.vendido,
body.dark-mode #numeros-container .sorteo-numero.reservado,
body.dark-mode #numeros-container-paginado .sorteo-numero.vendido,
body.dark-mode #numeros-container-paginado .sorteo-numero.reservado {
    color: #6c757d !important;
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    border: 1px solid var(--dark-border) !important;
}

/* Resumen de compra */
body.dark-mode .bg-light.rounded {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .bg-light.rounded h6 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .bg-light.rounded span {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .bg-light.rounded hr {
    border-color: var(--dark-border) !important;
}

/* Contenedor de referencia de pago */
body.dark-mode #referencia-pago-container .form-control {
    background-color: var(--dark-input-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode #referencia-pago-container .form-control::placeholder {
    color: var(--dark-text-secondary) !important;
    opacity: 0.7 !important;
}

/* Form check labels en modo oscuro */
body.dark-mode .form-check-label {
    color: var(--dark-text-primary) !important;
}

/* Image upload container en modo oscuro */
body.dark-mode .image-upload-container {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .image-upload-container:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--primary-color) !important;
}

body.dark-mode .image-upload-container .text-muted {
    color: var(--dark-text-secondary) !important;
}

/* ============================================
   CARDS MÓVILES (Tablas Responsive)
   ============================================ */

body.dark-mode .table-row-mobile {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .table-row-mobile .mobile-label {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .table-row-mobile .mobile-value {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .table-row-mobile .mobile-value strong {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .table-row-mobile .mobile-value small {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .table-row-mobile .badge {
    color: white !important;
}

/* Aplicar estilos de filas especiales a cards móviles */
body.dark-mode .table-row-mobile.table-row-cerrada {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

body.dark-mode .table-row-mobile.table-row-inactiva {
    background-color: rgba(108, 117, 125, 0.2) !important;
    opacity: 0.8;
}

body.dark-mode .table-row-mobile.table-row-finalizada {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

/* ============================================
   CONFIGURACIÓN - Vista Previa
   ============================================ */

/* Vista previa del Hero */
body.dark-mode .hero-preview-container {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .hero-preview-container h6 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .hero-preview {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .hero-preview .hero-content {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .hero-preview .hero-content h1 {
    color: inherit !important;
}

body.dark-mode .hero-preview .hero-content p {
    color: inherit !important;
}

/* Vista previa del Header */
body.dark-mode .header-preview-container {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .header-preview-container h6 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .header-preview {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .header-preview .header-content {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .header-preview .header-nav a {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .header-preview .header-nav a:hover {
    color: var(--primary-color) !important;
}

/* ============================================
   CONFIGURACIÓN - Selector de Imágenes
   ============================================ */

body.dark-mode .image-upload-zone {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .image-upload-zone:hover {
    background-color: var(--dark-hover) !important;
    border-color: var(--primary-color) !important;
}

body.dark-mode .image-upload-zone.dragover {
    background-color: var(--dark-hover) !important;
    border-color: var(--primary-color) !important;
}

body.dark-mode .image-upload-zone.has-image {
    background-color: var(--dark-card-bg) !important;
    border-color: var(--primary-color) !important;
}

body.dark-mode .image-upload-zone .upload-content {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .image-upload-zone .upload-content i {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .image-upload-zone .upload-content p {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .image-upload-zone .upload-content p.text-muted {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .image-upload-zone .upload-content .btn {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

body.dark-mode .image-upload-zone .upload-content .btn:hover {
    background-color: #5a6fd8 !important;
    border-color: #5a6fd8 !important;
}

/* Excepciones para elementos que no deben tener transición */
img,
svg,
video,
iframe,
canvas {
    transition: none !important;
}

/* ============================================
   VERIFICADOR DE TICKETS - ESTILOS FINALES
   Máxima especificidad para sobrescribir cualquier estilo
   ============================================ */

/* Forzar color blanco en h6 del verificador - Selector de máxima especificidad */
body.dark-mode #resultado-verificacion .card.bg-light .card-body .list-group .list-group-item.list-group-item-action .d-flex .div h6.mb-1,
body.dark-mode #resultado-verificacion .card.bg-light .list-group .list-group-item.list-group-item-action h6.mb-1 {
    color: #ffffff !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Asegurar que cualquier texto dentro del h6 también sea blanco */
body.dark-mode #resultado-verificacion .list-group-item h6.mb-1,
body.dark-mode #resultado-verificacion .list-group-item-action h6.mb-1 {
    color: #ffffff !important;
}