/* Estilos para modo oscuro mejorado - dark-mode-styles.css */

/* Estilos generales para modo oscuro */
.dark-mode {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2d 100%) !important;
    color: #e2e8f0 !important;
}

/* Header y navegación */
.dark-mode .header-bg {
    background: rgba(23, 23, 42, 0.95) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    border-bottom: 2px solid #6366f1 !important;
}

.dark-mode .text-dark {
    color: #e2e8f0 !important;
}

/* Fondos y contenedores */
.dark-mode .bg-white {
    background-color: #1e1e2d !important;
}

.dark-mode .bg-gray-50 {
    background-color: #252535 !important;
}

.dark-mode .bg-gray-100 {
    background-color: #2d2d42 !important;
}

.dark-mode .bg-gray-200 {
    background-color: #353552 !important;
}

/* Bordes */
.dark-mode .border-gray-100 {
    border-color: #353552 !important;
}

.dark-mode .border-gray-200 {
    border-color: #3d3d62 !important;
}

.dark-mode .border-gray-300 {
    border-color: #454572 !important;
}

/* Textos */
.dark-mode .text-gray-400 {
    color: #94a3b8 !important;
}

.dark-mode .text-gray-500 {
    color: #64748b !important;
}

.dark-mode .text-gray-600 {
    color: #475569 !important;
}

.dark-mode .text-gray-700 {
    color: #334155 !important;
}

.dark-mode .text-gray-800 {
    color: #e2e8f0 !important;
}

.dark-mode .text-gray-900 {
    color: #f1f5f9 !important;
}

/* ESTILOS ESPECÍFICOS PARA EL PANEL DE USUARIO */

/* Gradientes del panel de usuario */
.dark-mode .bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: linear-gradient(to right, #1e1e2d, #252535) !important;
}

.dark-mode .bg-gradient-to-r.from-green-50.to-emerald-50 {
    background: linear-gradient(to right, #1e2d1e, #253525) !important;
}

.dark-mode .bg-gradient-to-r.from-purple-50.to-pink-50 {
    background: linear-gradient(to right, #2d1e2d, #352535) !important;
}

.dark-mode .bg-gradient-to-r.from-orange-50.to-red-50 {
    background: linear-gradient(to right, #2d1e1e, #352525) !important;
}

.dark-mode .bg-gradient-to-r.from-teal-50.to-cyan-50 {
    background: linear-gradient(to right, #1e2d2d, #253535) !important;
}

/* Colores de texto para estadísticas */
.dark-mode .text-blue-600 {
    color: #60a5fa !important;
}

.dark-mode .text-green-600 {
    color: #34d399 !important;
}

.dark-mode .text-purple-600 {
    color: #a78bfa !important;
}

.dark-mode .text-orange-600 {
    color: #fb923c !important;
}

.dark-mode .text-teal-600 {
    color: #2dd4bf !important;
}

.dark-mode .text-indigo-600 {
    color: #818cf8 !important;
}

/* ESTILOS PARA COMENTARIOS */

/* Contenedores de comentarios */
.dark-mode .comment-container {
    background-color: #252535 !important;
    border-color: #353552 !important;
}

/* Botones de comentarios */
.dark-mode .comment-button {
    background-color: #3d3d62 !important;
    color: #e2e8f0 !important;
    border-color: #6366f1 !important;
}

.dark-mode .comment-button:hover {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Formularios de comentarios */
.dark-mode textarea {
    background-color: #252535 !important;
    border-color: #353552 !important;
    color: #e2e8f0 !important;
}

.dark-mode textarea::placeholder {
    color: #94a3b8 !important;
}

/* ESTILOS PARA MISIONES DIARIAS */

/* Contenedor de misiones */
.dark-mode .missions-container {
    background-color: #1e1e2d !important;
}

/* Misiones completadas */
.dark-mode .bg-green-50 {
    background-color: #1e2d1e !important;
}

.dark-mode .border-green-200 {
    border-color: #34d399 !important;
}

.dark-mode .text-green-700 {
    color: #34d399 !important;
}

/* Barras de progreso */
.dark-mode .bg-green-500 {
    background-color: #10b981 !important;
}

.dark-mode .bg-blue-500 {
    background-color: #3b82f6 !important;
}

/* Gradientes para misiones completadas */
.dark-mode .bg-gradient-to-r.from-green-400.to-blue-500 {
    background: linear-gradient(to right, #34d399, #3b82f6) !important;
}

.dark-mode .bg-gradient-to-r.from-yellow-400.to-orange-500 {
    background: linear-gradient(to right, #fbbf24, #f97316) !important;
}

.dark-mode .bg-gradient-to-r.from-purple-400.to-pink-500 {
    background: linear-gradient(to right, #a78bfa, #ec4899) !important;
}

/* ESTILO SUAVE PARA POSTS STICKY */
.dark-mode .bg-yellow-50 {
    background-color: #2d2d1e !important;
}

.dark-mode .border-yellow-200 {
    border-color: #fbbf24 !important;
}

.dark-mode .bg-yellow-100 {
    background-color: #353525 !important;
}

.dark-mode .text-yellow-600 {
    color: #fbbf24 !important;
}

.dark-mode .bg-yellow-200 {
    background-color: #3d3d25 !important;
}

.dark-mode .text-yellow-800 {
    color: #fbbf24 !important;
}

/* ESTILOS PARA FORMULARIOS */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode select {
    background-color: #252535 !important;
    border-color: #353552 !important;
    color: #e2e8f0 !important;
}

.dark-mode input[type="text"]::placeholder,
.dark-mode input[type="email"]::placeholder,
.dark-mode input[type="password"]::placeholder {
    color: #94a3b8 !important;
}

/* ESTILOS PARA BOTONES */
.dark-mode .btn-primary {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}

.dark-mode .btn-secondary {
    background-color: #3d3d62 !important;
    border-color: #3d3d62 !important;
    color: #e2e8f0 !important;
}

.dark-mode .btn-secondary:hover {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}

/* Botones con acento */
.dark-mode .accent-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white !important;
    border: none !important;
}

.dark-mode .accent-btn:hover {
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
}

/* ESTILOS PARA PAGINACIÓN */
.dark-mode .pagination a {
    background-color: #3d3d62 !important;
    color: #e2e8f0 !important;
    border-color: #6366f1 !important;
}

.dark-mode .pagination a:hover {
    background-color: #6366f1 !important;
    color: white !important;
}

.dark-mode .pagination .active {
    background-color: #6366f1 !important;
    color: white !important;
}

/* ESTILOS PARA SOMBRAS */
.dark-mode .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

/* ESTILOS PARA CATEGORÍAS */
.dark-mode .categoria-filter {
    background-color: #2d2d42 !important;
    color: #e2e8f0 !important;
    border-color: #6366f1 !important;
}

.dark-mode .categoria-filter:hover {
    background-color: #6366f1 !important;
    color: white !important;
}

.dark-mode .categoria-filter.active {
    background-color: #6366f1 !important;
    color: white !important;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.7);
}

/* ESTILOS ESPECÍFICOS PARA ELEMENTOS QUE FALTABAN */

/* Avatares y elementos circulares */
.dark-mode .border-indigo-100 {
    border-color: #6366f1 !important;
}

/* Elementos de hover */
.dark-mode .hover\:bg-gray-100:hover {
    background-color: #353552 !important;
}

.dark-mode .hover\:text-gray-900:hover {
    color: #6366f1 !important;
}

/* Elementos de focus */
.dark-mode .focus\:ring-2:focus {
    --tw-ring-color: #6366f1 !important;
}

/* Elementos sticky */
.dark-mode .sticky {
    background-color: inherit !important;
}

/* Corrección para elementos que heredan colores incorrectos */
.dark-mode * {
    border-color: inherit;
}

/* Asegurar que los iconos mantengan sus colores específicos */
.dark-mode .text-yellow-500 {
    color: #fbbf24 !important;
}

.dark-mode .text-green-500 {
    color: #10b981 !important;
}

.dark-mode .text-blue-500 {
    color: #3b82f6 !important;
}

.dark-mode .text-red-500 {
    color: #ef4444 !important;
}

.dark-mode .text-purple-500 {
    color: #8b5cf6 !important;
}

/* Estilos para elementos de notificación */
.dark-mode .notification-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white !important;
}

/* Estilos para elementos de estadísticas */
.dark-mode .stat-item {
    background-color: #252535 !important;
    border-color: #353552 !important;
}

/* ESTILOS ESPECÍFICOS PARA PERFIL.PHP */

/* Contenedor principal del perfil */
.dark-mode .profile-container {
    background-color: #1e1e2d !important;
}

/* Estadísticas del perfil */
.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50 {
    background: linear-gradient(to bottom right, #252535, #2d2d42) !important;
}

.dark-mode .bg-gradient-to-br.from-green-50.to-emerald-50 {
    background: linear-gradient(to bottom right, #253525, #2d422d) !important;
}

.dark-mode .bg-gradient-to-br.from-purple-50.to-pink-50 {
    background: linear-gradient(to bottom right, #352535, #422d42) !important;
}

.dark-mode .bg-gradient-to-br.from-orange-50.to-red-50 {
    background: linear-gradient(to bottom right, #352525, #422d2d) !important;
}

.dark-mode .bg-gradient-to-br.from-yellow-50.to-orange-50 {
    background: linear-gradient(to bottom right, #353525, #423d2d) !important;
}

/* Colores de texto para las estadísticas del perfil */
.dark-mode .text-indigo-600 {
    color: #818cf8 !important;
}

.dark-mode .text-green-600 {
    color: #34d399 !important;
}

.dark-mode .text-purple-600 {
    color: #a78bfa !important;
}

.dark-mode .text-orange-600 {
    color: #fb923c !important;
}

.dark-mode .text-yellow-600 {
    color: #fbbf24 !important;
}

/* Borde del avatar */
.dark-mode .border-indigo-200 {
    border-color: #818cf8 !important;
}

/* Biografía */
.dark-mode .hover\:bg-gray-50:hover {
    background-color: #353552 !important;
}

.dark-mode .hover\:border-gray-200:hover {
    border-color: #6366f1 !important;
}

/* Contenedores de posts y comentarios */
.dark-mode .border-gray-200 {
    border-color: #353552 !important;
}

.dark-mode .hover\:shadow-md:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Etiquetas de categorías */
.dark-mode .bg-gray-100 {
    background-color: #353552 !important;
}

/* Enlaces en posts */
.dark-mode .text-indigo-600 {
    color: #818cf8 !important;
}

.dark-mode .hover\:text-indigo-800:hover {
    color: #6366f1 !important;
}

/* Botones de seguir */
.dark-mode .from-indigo-500 {
    --tw-gradient-from: #6366f1 !important;
}

.dark-mode .to-purple-600 {
    --tw-gradient-to: #8b5cf6 !important;
}

.dark-mode .from-red-500 {
    --tw-gradient-from: #ef4444 !important;
}

.dark-mode .to-red-600 {
    --tw-gradient-to: #dc2626 !important;
}

/* Indicador de estado online/offline */
.dark-mode .bg-green-500 {
    background-color: #10b981 !important;
}

.dark-mode .bg-gray-400 {
    background-color: #94a3b8 !important;
}

/* Botón de cambiar avatar */
.dark-mode .bg-indigo-500 {
    background-color: #6366f1 !important;
}

.dark-mode .hover\:bg-indigo-600:hover {
    background-color: #4f46e5 !important;
}

/* Formulario de biografía */
.dark-mode .border-gray-300 {
    border-color: #353552 !important;
}

.dark-mode .focus\:ring-indigo-500:focus {
    --tw-ring-color: #6366f1 !important;
}

.dark-mode .focus\:border-transparent:focus {
    border-color: transparent !important;
}

/* Botones del formulario de biografía */
.dark-mode .text-gray-600 {
    color: #94a3b8 !important;
}

.dark-mode .hover\:text-gray-800:hover {
    color: #6366f1 !important;
}

/* Información adicional del perfil */
.dark-mode .text-gray-500 {
    color: #64748b !important;
}

/* Separadores */
.dark-mode .border-t {
    border-color: #353552 !important;
}

/* Modal de avatar */
.dark-mode .modal-content {
    background-color: #1e1e2d !important;
    border-color: #353552 !important;
}

/* Mensajes de notificación */
.dark-mode .notification-message {
    background-color: #252535 !important;
    color: #e2e8f0 !important;
}

/* Estilos para elementos de texto específicos del perfil */
.dark-mode .profile-username {
    color: #f1f5f9 !important;
}

.dark-mode .profile-bio {
    color: #cbd5e1 !important;
    background-color: #252535 !important;
}

/* Iconos en el perfil */
.dark-mode .text-indigo-500 {
    color: #6366f1 !important;
}

.dark-mode .text-gray-400 {
    color: #94a3b8 !important;
}

/* Estilos para el contenido de posts en el perfil */
.dark-mode .post-preview {
    background-color: #252535 !important;
    border-color: #353552 !important;
}

.dark-mode .post-preview:hover {
    background-color: #2d2d42 !important;
}

/* Estilos para comentarios en el perfil */
.dark-mode .comment-preview {
    background-color: #252535 !important;
    border-color: #353552 !important;
}

.dark-mode .comment-preview:hover {
    background-color: #2d2d42 !important;
}

/* ESTILOS ESPECÍFICOS PARA LA MODAL DE RANGOS */
.dark-mode #modal-rangos .bg-white {
    background-color: #1e1e2d !important;
}

.dark-mode #modal-rangos .bg-gray-50 {
    background-color: #252535 !important;
}

.dark-mode #modal-rangos .border-gray-200 {
    border-color: #353552 !important;
}

.dark-mode #modal-rangos .text-gray-800 {
    color: #e2e8f0 !important;
}

.dark-mode #modal-rangos .text-gray-700 {
    color: #cbd5e1 !important;
}

.dark-mode #modal-rangos .text-gray-600 {
    color: #94a3b8 !important;
}

/* Estilos específicos para rangos especiales */
.dark-mode #modal-rangos .bg-gradient-to-r.from-red-50.to-orange-50 {
    background: linear-gradient(to right, #2d2525, #352d25) !important;
    border-color: #f97316 !important;
}

.dark-mode #modal-rangos .bg-gradient-to-r.from-red-100.to-red-50 {
    background: linear-gradient(to right, #352525, #2d2525) !important;
    border-color: #ef4444 !important;
}

/* Texto específico para rangos especiales */
.dark-mode #modal-rangos .text-red-600 {
    color: #ef4444 !important;
}

/* Asegurar que los fondos de gradiente se vean bien */
.dark-mode #modal-rangos .bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: linear-gradient(to right, #252535, #2d2d42) !important;
    border-color: #6366f1 !important;
}

.dark-mode #modal-rangos .bg-gradient-to-r.from-green-50.to-emerald-50 {
    background: linear-gradient(to right, #253525, #2d422d) !important;
    border-color: #34d399 !important;
}

/* Iconos en la modal de rangos */
.dark-mode #modal-rangos .text-yellow-500 {
    color: #fbbf24 !important;
}

.dark-mode #modal-rangos .text-red-500 {
    color: #ef4444 !important;
}

.dark-mode #modal-rangos .text-green-500 {
    color: #10b981 !important;
}

/* Botón de cerrar modal */
.dark-mode #modal-rangos .bg-indigo-600 {
    background-color: #6366f1 !important;
}

.dark-mode #modal-rangos .hover\:bg-indigo-700:hover {
    background-color: #4f46e5 !important;
}

/* ESTILOS PARA LA GUÍA DE BBCODES */
.dark-mode .bg-white.rounded-lg.shadow-md {
    background-color: #1e1e2d !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .text-gray-800.mb-4 {
    color: #e2e8f0 !important;
}

.dark-mode .border-gray-200 {
    border-color: #353552 !important;
}

.dark-mode code.bg-gray-100 {
    background-color: #252535 !important;
    color: #e2e8f0 !important;
}

.dark-mode .text-gray-600.text-xs {
    color: #94a3b8 !important;
}

.dark-mode .text-gray-500.text-xs {
    color: #64748b !important;
}

/* ESTILOS PARA EL COLOR PICKER */
.dark-mode #colorPickerModal .bg-white {
    background-color: #1e1e2d !important;
}

.dark-mode #colorPickerModal .dark\:bg-gray-800 {
    background-color: #1e1e2d !important;
}

.dark-mode #colorPickerModal .text-gray-800 {
    color: #e2e8f0 !important;
}

.dark-mode #colorPickerModal .dark\:text-gray-200 {
    color: #e2e8f0 !important;
}

.dark-mode #colorPickerModal .text-gray-500 {
    color: #94a3b8 !important;
}

.dark-mode #colorPickerModal .dark\:text-gray-400 {
    color: #94a3b8 !important;
}

.dark-mode #colorPickerModal .dark\:hover\:text-gray-200:hover {
    color: #e2e8f0 !important;
}

.dark-mode #colorPickerModal .text-gray-700 {
    color: #cbd5e1 !important;
}

.dark-mode #colorPickerModal .dark\:text-gray-300 {
    color: #cbd5e1 !important;
}

.dark-mode #colorPickerModal .border-gray-300 {
    border-color: #353552 !important;
}

.dark-mode #colorPickerModal .dark\:border-gray-600 {
    border-color: #353552 !important;
}

.dark-mode #colorPickerModal .dark\:bg-gray-700 {
    background-color: #252535 !important;
}

.dark-mode #colorPickerModal .dark\:text-gray-200 {
    color: #e2e8f0 !important;
}

.dark-mode #colorPickerModal input[type="text"] {
    background-color: #252535 !important;
    color: #e2e8f0 !important;
    border-color: #353552 !important;
}

.dark-mode #colorPickerModal input[type="text"]:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

.dark-mode #colorPickerModal .preset-color {
    border-color: #353552 !important;
}

.dark-mode #colorPickerModal .preset-color:hover {
    border-color: #6366f1 !important;
}

.dark-mode #colorPickerModal #colorPreview {
    background-color: #252535 !important;
    border-color: #353552 !important;
}

.dark-mode #colorPickerModal .text-gray-600 {
    color: #94a3b8 !important;
}

/* ESTILOS PARA BOTONES DEL EDITOR */
.dark-mode .bg-gray-200.text-gray-700 {
    background-color: #353552 !important;
    color: #e2e8f0 !important;
}

.dark-mode .bg-gray-200.text-gray-700:hover {
    background-color: #2d2d42 !important;
}

.dark-mode .bg-red-500.text-white:hover {
    background-color: #dc2626 !important;
}

/* ESTILOS PARA FORMULARIOS */
.dark-mode input[type="text"],
.dark-mode textarea,
.dark-mode select {
    background-color: #252535 !important;
    color: #e2e8f0 !important;
    border-color: #353552 !important;
}

.dark-mode input[type="text"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

.dark-mode label {
    color: #e2e8f0 !important;
}

.dark-mode .text-xs.text-gray-500 {
    color: #94a3b8 !important;
}

/* ESTILOS PARA CHECKBOXES */
.dark-mode input[type="checkbox"] {
    background-color: #252535 !important;
    border-color: #353552 !important;
}

.dark-mode input[type="checkbox"]:checked {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}

/* ESTILOS PARA LA PREVISUALIZACIÓN */
.dark-mode #preview {
    background-color: #1e1e2d !important;
}

.dark-mode #preview-content {
    color: #e2e8f0 !important;
}

.dark-mode #preview-content img {
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

/* ESTILOS PARA BORRADORES */
.dark-mode .bg-blue-50 {
    background-color: #252535 !important;
}

.dark-mode .border-blue-200 {
    border-color: #6366f1 !important;
}

.dark-mode .text-blue-700 {
    color: #e2e8f0 !important;
}

.dark-mode .text-indigo-600 {
    color: #818cf8 !important;
}

.dark-mode .hover\:text-indigo-800:hover {
    color: #6366f1 !important;
}

/* ESTILOS ADICIONALES PARA ELEMENTOS FALTANTES */

/* Área de YouTube en la guía de BBCodes */
.dark-mode .bg-red-100 {
    background-color: #2d2525 !important;
}

.dark-mode .text-red-700 {
    color: #ef4444 !important;
}

/* Sección de multimedia completa */
.dark-mode .text-purple-500 {
    color: #a78bfa !important;
}

/* Enlaces y Layout */
.dark-mode .text-blue-500 {
    color: #3b82f6 !important;
}

/* Área de consejos */
.dark-mode .bg-blue-100 {
    background-color: #252535 !important;
}

.dark-mode .border-blue-300 {
    border-color: #6366f1 !important;
}

.dark-mode .text-blue-800 {
    color: #e2e8f0 !important;
}

/* Iconos de colores */
.dark-mode .text-green-500 {
    color: #10b981 !important;
}

.dark-mode .text-orange-500 {
    color: #f97316 !important;
}

.dark-mode .text-yellow-500 {
    color: #fbbf24 !important;
}

.dark-mode .text-pink-500 {
    color: #ec4899 !important;
}

.dark-mode .text-teal-500 {
    color: #14b8a6 !important;
}

/* Texto de ayuda y descripciones */
.dark-mode .text-gray-500.text-xs.mt-1 {
    color: #94a3b8 !important;
}

/* Mejorar contraste en códigos */
.dark-mode code {
    background-color: #252535 !important;
    color: #e2e8f0 !important;
    border: 1px solid #353552 !important;
}

/* Área de consejos mejorada */
.dark-mode .bg-blue-50.border.border-blue-200 {
    background-color: #252535 !important;
    border-color: #6366f1 !important;
}

/* ========================================
   ESTILOS BÁSICOS PARA ADMIN_PANEL
   ======================================== */

/* Contenedor principal del panel de administración */
.dark-mode .container.mx-auto.px-4.py-8 {
    background-color: #1e1e2d !important;
}

/* Contenedor principal del panel */
.dark-mode .bg-white.rounded-lg.shadow-lg {
    background-color: #252535 !important;
    border-color: #353552 !important;
}

/* Título del panel de administración */
.dark-mode h1.text-3xl.font-bold.text-gray-800 {
    color: #e2e8f0 !important;
}

/* Icono del título */
.dark-mode .text-zinfinal {
    color: #6366f1 !important;
}

/* Mensajes de éxito */
.dark-mode .bg-green-100.border.border-green-400.text-green-700 {
    background-color: #1e2d1e !important;
    border-color: #34d399 !important;
    color: #34d399 !important;
}

/* Contenedor de la tabla de usuarios */
.dark-mode .bg-white.rounded-lg.border.border-gray-200 {
    background-color: #252535 !important;
    border-color: #353552 !important;
}

/* Header de la tabla */
.dark-mode .bg-gray-50.px-6.py-4.border-b.border-gray-200 {
    background-color: #1e1e2d !important;
    border-color: #353552 !important;
}

/* Título de gestión de usuarios */
.dark-mode h3.text-lg.font-semibold.text-gray-800 {
    color: #e2e8f0 !important;
}

/* Campo de búsqueda */
.dark-mode .search-input {
    background-color: #353552 !important;
    border-color: #6366f1 !important;
    color: #e2e8f0 !important;
}

.dark-mode .search-input::placeholder {
    color: #94a3b8 !important;
}

/* Icono de búsqueda */
.dark-mode .search-icon {
    color: #94a3b8 !important;
}

/* Contador de usuarios */
.dark-mode .text-sm.text-gray-500 {
    color: #94a3b8 !important;
}

/* Botones de filtro */
.dark-mode .filter-btn {
    background-color: #353552 !important;
    color: #e2e8f0 !important;
}

.dark-mode .filter-btn:hover {
    background-color: #6366f1 !important;
}

.dark-mode .filter-btn.active {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Filtros específicos por color */
.dark-mode .bg-green-100.text-green-700 {
    background-color: #1e2d1e !important;
    color: #34d399 !important;
}

.dark-mode .bg-red-100.text-red-700 {
    background-color: #2d2525 !important;
    color: #ef4444 !important;
}

.dark-mode .bg-purple-100.text-purple-700 {
    background-color: #2d252d !important;
    color: #a78bfa !important;
}

.dark-mode .bg-blue-100.text-blue-700 {
    background-color: #252535 !important;
    color: #3b82f6 !important;
}

/* Tabla de usuarios */
.dark-mode .min-w-full.divide-y.divide-gray-200 {
    border-color: #353552 !important;
}

.dark-mode .min-w-full.divide-y.divide-gray-200 thead {
    background-color: #1e1e2d !important;
}

.dark-mode .min-w-full.divide-y.divide-gray-200 thead th {
    color: #94a3b8 !important;
    border-color: #353552 !important;
}

.dark-mode .min-w-full.divide-y.divide-gray-200 tbody {
    background-color: #252535 !important;
}

.dark-mode .min-w-full.divide-y.divide-gray-200 tbody tr {
    border-color: #353552 !important;
}

.dark-mode .hover\:bg-gray-50:hover {
    background-color: #2d2d42 !important;
}

/* Celdas de la tabla */
.dark-mode .px-6.py-4.whitespace-nowrap.text-sm.text-gray-900 {
    color: #e2e8f0 !important;
}

.dark-mode .px-6.py-4.whitespace-nowrap.text-sm.font-medium.text-gray-900 {
    color: #e2e8f0 !important;
}

.dark-mode .px-6.py-4.whitespace-nowrap.text-sm.text-gray-500 {
    color: #94a3b8 !important;
}

/* Estados de usuario */
.dark-mode .bg-green-100.text-green-800 {
    background-color: #1e2d1e !important;
    color: #34d399 !important;
}

.dark-mode .bg-red-100.text-red-800 {
    background-color: #2d2525 !important;
    color: #ef4444 !important;
}

/* Información adicional de baneos */
.dark-mode .text-xs.text-gray-500.mt-1 {
    color: #94a3b8 !important;
}

/* ========================================
   BOTONES DE ACCIÓN BÁSICOS
   ======================================== */

/* Botón Editar */
.dark-mode .text-blue-600.hover\:text-blue-900.bg-blue-100.hover\:bg-blue-200 {
    background-color: #252535 !important;
    color: #3b82f6 !important;
}

/* Botón Banear */
.dark-mode .text-yellow-600.hover\:text-yellow-900.bg-yellow-100.hover\:bg-yellow-200 {
    background-color: #2d2d1e !important;
    color: #fbbf24 !important;
}

/* Botón Desbanear */
.dark-mode .text-green-600.hover\:text-green-900.bg-green-100.hover\:bg-green-200 {
    background-color: #1e2d1e !important;
    color: #34d399 !important;
}

/* Botón Eliminar */
.dark-mode .text-red-600.hover\:text-red-900.bg-red-100.hover\:bg-red-200 {
    background-color: #2d2525 !important;
    color: #ef4444 !important;
}

/* Botón Ver Perfil */
.dark-mode .text-indigo-600.hover\:text-indigo-900.bg-indigo-100.hover\:bg-indigo-200 {
    background-color: #252535 !important;
    color: #6366f1 !important;
}

/* ========================================
   BOTONES DE POSTS BÁSICOS
   ======================================== */

/* Botón Otorgar Puntos */
.dark-mode .bg-gradient-to-r.from-yellow-500.to-orange-500 {
    background: linear-gradient(to right, #fbbf24, #f97316) !important;
}

/* Botón Favorito - Estados activo e inactivo */
.dark-mode .text-yellow-500.bg-yellow-50.hover\:bg-yellow-100 {
    background-color: #2d2d1e !important;
    color: #fbbf24 !important;
}

.dark-mode .text-gray-500.hover\:text-yellow-500.bg-gray-50.hover\:bg-yellow-50 {
    background-color: #353552 !important;
    color: #94a3b8 !important;
}

/* Botón Denunciar/Reportar */
.dark-mode .text-gray-500.hover\:text-red-500.bg-gray-50.hover\:bg-red-50 {
    background-color: #353552 !important;
    color: #94a3b8 !important;
}

/* Botón Editar */
.dark-mode .text-gray-500.hover\:text-blue-500.bg-gray-50.hover\:bg-blue-50 {
    background-color: #353552 !important;
    color: #94a3b8 !important;
}

/* Botón Eliminar */
.dark-mode .text-gray-500.hover\:text-red-600.bg-gray-50.hover\:bg-red-50 {
    background-color: #353552 !important;
    color: #94a3b8 !important;
}

/* Contenedor de puntos del post */
.dark-mode .bg-gradient-to-r.from-indigo-50.to-purple-50 {
    background: linear-gradient(to right, #252535, #2d2d42) !important;
}

.dark-mode .text-indigo-500 {
    color: #6366f1 !important;
}

.dark-mode .text-indigo-700 {
    color: #818cf8 !important;
}

/* ========================================
   TOOLTIPS BÁSICOS
   ======================================== */

.dark-mode .tooltip .tooltiptext {
    background-color: #1e1e2d !important;
    color: #e2e8f0 !important;
    border: 1px solid #353552 !important;
}

.dark-mode .tooltip .tooltiptext::after {
    border-color: #1e1e2d transparent transparent transparent !important;
}

/* ========================================
   MODALES BÁSICOS
   ======================================== */

/* Modal de edición */
.dark-mode #editModal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.dark-mode #editModal .bg-white {
    background-color: #252535 !important;
    border-color: #353552 !important;
}

.dark-mode #editModal .text-gray-800 {
    color: #e2e8f0 !important;
}

.dark-mode #editModal .text-gray-600 {
    color: #94a3b8 !important;
}

.dark-mode #editModal input,
.dark-mode #editModal select {
    background-color: #353552 !important;
    border-color: #6366f1 !important;
    color: #e2e8f0 !important;
}

/* Modal de baneo */
.dark-mode #banModal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.dark-mode #banModal .bg-white {
    background-color: #252535 !important;
    border-color: #353552 !important;
}

.dark-mode #banModal .text-gray-800 {
    color: #e2e8f0 !important;
}

.dark-mode #banModal .text-gray-600 {
    color: #94a3b8 !important;
}

.dark-mode #banModal input,
.dark-mode #banModal select,
.dark-mode #banModal textarea {
    background-color: #353552 !important;
    border-color: #6366f1 !important;
    color: #e2e8f0 !important;
}

/* Botones de los modales */
.dark-mode .bg-indigo-600.text-white {
    background-color: #6366f1 !important;
}

.dark-mode .bg-gray-300.text-gray-700 {
    background-color: #6366f1 !important;
    color: #e2e8f0 !important;
}

/* ========================================
   SELECTOR DE PUNTOS
   ======================================== */

.dark-mode select#puntos-select {
    background-color: #353552 !important;
    border-color: #6366f1 !important;
    color: #e2e8f0 !important;
}

.dark-mode select#puntos-select option {
    background-color: #353552 !important;
    color: #e2e8f0 !important;
}

/* ========================================
   MENSAJES DE ERROR
   ======================================== */

.dark-mode .bg-red-100.border.border-red-400.text-red-700 {
    background-color: #2d2525 !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

/* ========================================
   MENSAJE DE NO RESULTADOS
   ======================================== */

.dark-mode .no-results {
    color: #94a3b8 !important;
}

/* ========================================
   CHECKBOXES Y RADIO BUTTONS
   ======================================== */

.dark-mode input[type="checkbox"] {
    background-color: #353552 !important;
    border-color: #6366f1 !important;
}

.dark-mode input[type="checkbox"]:checked {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}

.dark-mode input[type="radio"] {
    background-color: #353552 !important;
    border-color: #6366f1 !important;
}

.dark-mode input[type="radio"]:checked {
    background-color: #6366f1 !important;
    border-color: #6366f1 !important;
}

/* ========================================
   EFECTOS HOVER PARA BOTONES EN POST.PHP
   ======================================== */

/* Botón Favorito - Efectos hover */
.dark-mode .text-yellow-500.bg-yellow-50.hover\:bg-yellow-100:hover {
    background-color: #353525 !important;
    color: #fbbf24 !important;
}

.dark-mode .text-gray-500.hover\:text-yellow-500.bg-gray-50.hover\:bg-yellow-50:hover {
    background-color: #2d2d1e !important;
    color: #fbbf24 !important;
}

/* Botón Denunciar/Reportar - Efectos hover */
.dark-mode .text-gray-500.hover\:text-red-500.bg-gray-50.hover\:bg-red-50:hover {
    background-color: #2d2525 !important;
    color: #ef4444 !important;
}

/* Botón Editar - Efectos hover */
.dark-mode .text-gray-500.hover\:text-blue-500.bg-gray-50.hover\:bg-blue-50:hover {
    background-color: #252535 !important;
    color: #3b82f6 !important;
}

/* Botón Eliminar - Efectos hover */
.dark-mode .text-gray-500.hover\:text-red-600.bg-gray-50.hover\:bg-red-50:hover {
    background-color: #2d2525 !important;
    color: #ef4444 !important;
}

/* Botón Otorgar Puntos - Efectos hover */
.dark-mode .bg-gradient-to-r.from-yellow-500.to-orange-500:hover,
.dark-mode .hover\:from-yellow-600.hover\:to-orange-600:hover {
    background: linear-gradient(to right, #f59e0b, #ea580c) !important;
}

/* ========================================
   ARREGLAR TEXTO "OTORGAR PUNTOS" EN MODO OSCURO
   ======================================== */

/* Texto del label "Otorgar puntos" */
.dark-mode label[for="puntos-select"] {
    color: #e2e8f0 !important;
}

/* Texto general que dice "Otorgar puntos" */
.dark-mode .text-gray-600 {
    color: #94a3b8 !important;
}

/* Texto específico para el área de otorgar puntos */
.dark-mode .text-sm.text-gray-600 {
    color: #e2e8f0 !important;
}

/* Asegurar que el texto sea visible en el contenedor de puntos */
.dark-mode .bg-gray-50 .text-gray-600 {
    color: #e2e8f0 !important;
}

/* Mejorar contraste del texto en general */
.dark-mode .text-gray-500,
.dark-mode .text-gray-600,
.dark-mode .text-gray-700 {
    color: #cbd5e1 !important;
}

/* Texto en áreas específicas de puntos */
.dark-mode .puntos-area .text-gray-600,
.dark-mode .puntos-container .text-gray-600 {
    color: #e2e8f0 !important;
}

/* ========================================
   OTORGAR PUNTOS (cartel) - MODO OSCURO
   ======================================== */

.dark-mode #form-puntos {
    background: linear-gradient(135deg, #252535 0%, #2d2d42 100%) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35) !important;
}

/* texto interno del panel */
.dark-mode #form-puntos,
.dark-mode #form-puntos * {
    color: #e2e8f0 !important;
}

/* "(quedan X)" o contadores dentro del panel */
.dark-mode #form-puntos #puntos-disponibles,
.dark-mode #form-puntos .contador,
.dark-mode #form-puntos .text-gray-700,
.dark-mode #form-puntos .text-gray-600 {
    color: #e2e8f0 !important;
    opacity: 0.95;
}

/* selector de puntos */
.dark-mode #form-puntos select,
.dark-mode #form-puntos .select,
.dark-mode #select-puntos {
    background-color: #252535 !important;
    border-color: #353552 !important;
    color: #e2e8f0 !important;
}

.dark-mode #form-puntos select:focus,
.dark-mode #form-puntos .select:focus,
.dark-mode #select-puntos:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

/* botón ENVIAR */
.dark-mode #form-puntos button,
.dark-mode #form-puntos .btn-otorgar {
    background: linear-gradient(90deg, #6366f1, #8b5cf6) !important;
    border: 1px solid #6366f1 !important;
    color: #ffffff !important;
}

.dark-mode #form-puntos button:hover,
.dark-mode #form-puntos .btn-otorgar:hover {
    background: linear-gradient(90deg, #8b5cf6, #6366f1) !important;
    border-color: #8b5cf6 !important;
}

/* botón deshabilitado */
.dark-mode #form-puntos button:disabled,
.dark-mode #form-puntos .btn-otorgar:disabled {
    background: #353552 !important;
    border-color: #6366f1 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
    opacity: .8 !important;
}

/* badges/píldoras dentro del panel */
.dark-mode #form-puntos .badge,
.dark-mode #form-puntos .pill,
.dark-mode #form-puntos .bg-yellow-50,
.dark-mode #form-puntos .bg-yellow-100,
.dark-mode #form-puntos .bg-orange-50 {
    background-color: #353552 !important;
    border-color: #6366f1 !important;
    color: #e2e8f0 !important;
}

/* elimina cualquier resto de degradados "amarillos" del contenedor */
.dark-mode #form-puntos.bg-gradient-to-r.from-yellow-50.to-orange-50,
.dark-mode #form-puntos.bg-yellow-50,
.dark-mode #form-puntos.bg-yellow-100,
.dark-mode #form-puntos.border-yellow-200 {
    background: linear-gradient(135deg, #252535 0%, #2d2d42 100%) !important;
    border-color: #6366f1 !important;
}

/* icono del cohete/estrella mantiene color "aviso" */
.dark-mode #form-puntos .text-yellow-500,
.dark-mode #form-puntos .text-yellow-600 {
    color: #fbbf24 !important;
}

/* --- Estadísticas: aclarar título, etiquetas y valores --- */
.dark-mode .bg-white.rounded-lg.shadow-md.p-6 h3,
.dark-mode .bg-white.rounded-lg.shadow-md.p-6 .text-dark {
    color: #e2e8f0 !important;
}

.dark-mode .bg-white.rounded-lg.shadow-md.p-6 .text-gray-600 {
    color: #e2e8f0 !important;
}

.dark-mode .bg-white.rounded-lg.shadow-md.p-6 .font-semibold,
.dark-mode .bg-white.rounded-lg.shadow-md.p-6 .font-semibold * {
    color: #e2e8f0 !important;
}

/* Color base del contenido por si hay spans sin clase */
.dark-mode .bg-white.rounded-lg.shadow-md.p-6 {
    color: #e2e8f0 !important;
}

/* =============================
   PERFIL – aclarar textos tenues
   ============================= */

/* 1) Últimos comentarios (tarjetas de la derecha) */
.dark-mode .profile-container .bg-white.rounded-lg.shadow-md p.text-gray-600,
.dark-mode .profile-container .bg-white.rounded-lg.shadow-md .text-gray-600 {
    color: #e2e8f0 !important;
}

.dark-mode .profile-container .bg-white.rounded-lg.shadow-md .text-gray-500,
.dark-mode .profile-container .bg-white.rounded-lg.shadow-md .text-xs.text-gray-500 {
    color: #94a3b8 !important;
}

/* 2) Biografía */
.dark-mode .profile-bio {
    color: #e2e8f0 !important;
}

/* 3) Estadísticas del perfil (etiquetas debajo de los números) */
.dark-mode .profile-container .bg-gradient-to-br .text-gray-600,
.dark-mode .profile-container .bg-gradient-to-br .text-gray-500 {
    color: #e2e8f0 !important;
}

/* 4) Seguro extra: cualquier .text-gray-600 dentro del perfil que haya quedado oscuro */
.dark-mode .profile-container .text-sm.text-gray-600,
.dark-mode .profile-container .text-xs.text-gray-600 {
    color: #e2e8f0 !important;
}

/* PILL de categoría (en cualquier tarjeta) */
.dark-mode .text-xs.text-gray-500.bg-gray-100.rounded-full,
.dark-mode .text-xs.text-gray-600.bg-gray-100.rounded-full,
.dark-mode .text-xs.bg-gray-100.rounded-full,
.dark-mode .badge,
.dark-mode .category-badge {
    color: #ffffff !important;
    background-color: #353552 !important;
    border-color: #6366f1 !important;
    opacity: 1 !important;
}

/* (Opcional) al pasar el mouse, un pelín más oscuro */
.dark-mode .text-xs.bg-gray-100.rounded-full:hover {
    background-color: #252535 !important;
    color: #ffffff !important;
}

/* MODERADOR – dark con acento azul */
.dark-mode .rango-moderador {
    background: linear-gradient(to right, #252535, #2d2d42) !important;
    border-color: #6366f1 !important;
    color: #f8fafc !important;
}

.dark-mode .rango-moderador h4,
.dark-mode .rango-moderador strong {
    color: #ffffff !important;
}

.dark-mode .rango-moderador p {
    color: #e2e8f0 !important;
}

.dark-mode .rango-moderador .accent {
    color: #6366f1 !important;
}

.dark-mode .rango-moderador * {
    opacity: 1 !important;
}

/* ========================================
   ESTILOS ESPECÍFICOS PARA REGISTER.PHP Y LOGIN.PHP
   ======================================== */

/* Fondo principal SOLO para register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2d 100%) !important;
}

/* Tarjetas blancas SOLO en register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-white {
    background-color: #1e1e2d !important;
}

/* Textos dentro de las tarjetas de register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-white h2,
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-white h3,
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-white p,
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-white label,
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-white span {
    color: #e2e8f0 !important;
}

/* Textos secundarios SOLO en register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .text-gray-600 {
    color: #94a3b8 !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .text-gray-700 {
    color: #cbd5e1 !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .text-gray-900 {
    color: #f1f5f9 !important;
}

/* Inputs SOLO en register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 input[type="text"],
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 input[type="email"],
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 input[type="password"] {
    background-color: #252535 !important;
    border-color: #353552 !important;
    color: #e2e8f0 !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 input[type="text"]::placeholder,
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 input[type="email"]::placeholder,
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 input[type="password"]::placeholder {
    color: #94a3b8 !important;
}

/* Mensajes de error y éxito SOLO en register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-red-50 {
    background-color: #2d2525 !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .text-red-700 {
    color: #ef4444 !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-green-50 {
    background-color: #1e2d1e !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .text-green-700 {
    color: #34d399 !important;
}

/* Enlaces SOLO en register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 a {
    color: #6366f1 !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 a:hover {
    color: #8b5cf6 !important;
}

/* Mini-protocolo SOLO en register */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-yellow-50 {
    background-color: #2d2d1e !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .text-yellow-800 {
    color: #fbbf24 !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-red-50 {
    background-color: #2d2525 !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .text-red-800 {
    color: #ef4444 !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-blue-50 {
    background-color: #252535 !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .text-blue-900 {
    color: #6366f1 !important;
}

/* Contador de caracteres SOLO en register */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .char-count {
    color: #94a3b8 !important;
}

/* Toggle de recordarme SOLO en login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .switch-track {
    background-color: #353552 !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .switch-thumb {
    background-color: #e2e8f0 !important;
}

/* Botones con gradiente SOLO en register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-gradient-to-r.from-blue-500.to-purple-600 {
    background: linear-gradient(to right, #6366f1, #8b5cf6) !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-gradient-to-r.from-blue-500.to-purple-600:hover {
    background: linear-gradient(to right, #8b5cf6, #6366f1) !important;
}

/* Placeholders específicos SOLO en register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .placeholder-gray-400::placeholder {
    color: #94a3b8 !important;
}

/* Texto de ayuda SOLO en register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .text-xs.text-gray-500 {
    color: #94a3b8 !important;
}

/* Efectos hover en las tarjetas SOLO en register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.3) !important;
}

/* Focus states para inputs SOLO en register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .focus\:ring-blue-500:focus {
    --tw-ring-color: rgba(99, 102, 241, 0.5) !important;
}

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .focus\:border-transparent:focus {
    border-color: transparent !important;
}

/* =========================================================
   MODO OSCURO — EMOTES (emoji chips) + EMOJI PICKER
   ========================================================= */
.dark-mode .emoji-chip {
    background: #252535 !important;
    border-color: #353552 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.dark-mode .emoji-chip:hover {
    background: #1e1e2d !important;
    border-color: #6366f1 !important;
    box-shadow: 0 6px 14px rgba(99, 102, 241, 0.25) !important;
}

/* Botón que abre el picker */
.dark-mode .emoji-picker-toggle {
    background: #252535 !important;
    border-color: #353552 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

.dark-mode .emoji-picker-toggle:hover {
    background: #1e1e2d !important;
    border-color: #6366f1 !important;
    box-shadow: 0 6px 14px rgba(99, 102, 241, 0.25) !important;
}

/* Popover contenedor del picker */
.dark-mode .emoji-picker-popover {
    background: #1e1e2d !important;
    border-color: #353552 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}

/* El overlay ya lo tienes; aquí solo lo hacemos un pelín más oscuro en dark */
.dark-mode #emojiPickerOverlay {
    background: rgba(0, 0, 0, 0.65) !important;
}

/* El webcomponent <emoji-picker> */
.dark-mode .emoji-picker {
    background: transparent !important;
    color: #e2e8f0 !important;
}

/* Si tu versión de <emoji-picker> soporta ::part, estos ayudan bastante. */
.dark-mode .emoji-picker::part(search) {
    background: #1e1e2d !important;
    color: #e2e8f0 !important;
    border: 1px solid #353552 !important;
}

.dark-mode .emoji-picker::part(category-buttons) {
    background: #1e1e2d !important;
    border-bottom: 1px solid #353552 !important;
}

.dark-mode .emoji-picker::part(category-button) {
    color: #94a3b8 !important;
}

.dark-mode .emoji-picker::part(category-button):is([aria-pressed="true"], :hover) {
    background: #252535 !important;
    color: #e2e8f0 !important;
}

.dark-mode .emoji-picker::part(emoji) {
    border-radius: 8px !important;
}

.dark-mode .emoji-picker::part(emoji):hover {
    background: #252535 !important;
    outline: 1px solid #6366f1 !important;
}

/* =========================================================
   MODO OSCURO — SPOILER (en posts y previsualización)
   ========================================================= */
.dark-mode .post-content .spoiler,
.dark-mode #preview-content .spoiler,
.dark-mode .spoiler {
    background: linear-gradient(135deg, #1e1e2d 0%, #252535 100%) !important;
    border: 1px solid #353552 !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
    color: #e2e8f0 !important;
    overflow: hidden;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

/* Título/cabecera del spoiler */
.dark-mode .post-content .spoiler .spoiler-title,
.dark-mode #preview-content .spoiler .spoiler-title,
.dark-mode .spoiler .spoiler-title {
    background: rgba(99, 102, 241, 0.08) !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid #353552 !important;
    padding: 10px 14px !important;
    letter-spacing: .2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Indicador visual (triangulito) con pure CSS */
.dark-mode .spoiler .spoiler-title::before {
    content: '▸';
    font-size: 12px;
    transform: translateY(-1px);
    opacity: .9;
    color: #6366f1 !important;
}

/* Contenido del spoiler (cerrado por defecto) */
.dark-mode .post-content .spoiler .spoiler-content,
.dark-mode #preview-content .spoiler .spoiler-content,
.dark-mode .spoiler .spoiler-content {
    background: #1e1e2d !important;
    color: #e2e8f0 !important;
}

/* Estado expandido: cambia flechita y realza título */
.dark-mode .spoiler.expanded .spoiler-title::before {
    content: '▾';
}

.dark-mode .spoiler.expanded {
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.25) !important;
    border-color: #6366f1 !important;
}

.dark-mode .spoiler:hover {
    border-color: #6366f1 !important;
}

/* Accesibilidad: focus claro para teclado */
.dark-mode .spoiler:focus,
.dark-mode .spoiler:focus-visible,
.dark-mode .spoiler .spoiler-title:focus,
.dark-mode .spoiler .spoiler-title:focus-visible {
    outline: 2px solid #6366f1 !important;
    outline-offset: 2px !important;
}

/* Reduce animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .dark-mode .spoiler,
    .dark-mode .emoji-chip,
    .dark-mode .emoji-picker-toggle {
        transition: none !important;
    }
}

/* =========================================================
   QUOTE (BBCode) — OVERRIDES MODO OSCURO
   ========================================================= */
.dark-mode .post-content .bbcode-quote,
.dark-mode #preview-content .bbcode-quote,
.dark-mode .bbcode-quote {
    background: linear-gradient(135deg, #1e1e2d 0%, #252535 100%) !important;
    border-left-color: #6366f1 !important;
    border-color: #353552 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45) !important;
}

.dark-mode .bbcode-quote::before {
    color: #6366f1 !important;
    opacity: .10 !important;
}

.dark-mode .bbcode-quote .quote-author {
    background: linear-gradient(90deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35) !important;
}

.dark-mode .bbcode-quote .bbcode-quote-content {
    color: #e2e8f0 !important;
}

/* Links y código en dark */
.dark-mode .bbcode-quote a {
    color: #8b5cf6 !important;
    border-bottom: 1px dashed rgba(139, 92, 246, 0.55) !important;
}

.dark-mode .bbcode-quote a:hover {
    border-bottom-style: solid !important;
}

.dark-mode .bbcode-quote code {
    background: #252535 !important;
    color: #e2e8f0 !important;
    border: 1px solid #353552 !important;
}

/* Anidados en dark — cambian leve el acento y el fondo */
.dark-mode .bbcode-quote .bbcode-quote {
    border-left-color: #6366f1 !important;
    background: linear-gradient(135deg, #1e1e2d 0%, #252535 100%) !important;
}

.dark-mode .bbcode-quote .bbcode-quote .bbcode-quote {
    border-left-color: #8b5cf6 !important;
    background: linear-gradient(135deg, #1e1e2d 0%, #252535 100%) !important;
}

/* Accesibilidad: focus dentro del quote (por si es foco con teclado) */
.dark-mode .bbcode-quote :focus-visible,
.bbcode-quote :focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* =========================================
   EMOJI PICKER — MODO OSCURO
   ========================================= */

/* Caja flotante que ya creaste */
.dark-mode .emoji-picker-popover {
    background: #1e1e2d !important;
    border: 1px solid #353552 !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
}

/* Overlay ya lo tienes; por si acaso lo oscurecemos un poco */
.dark-mode .emoji-picker-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Estilos del web-component via CSS variables */
.dark-mode emoji-picker {
    --background: #1e1e2d;
    --color: #e2e8f0;
    --border-color: #353552;
    --accent-color: #6366f1;
    --indicator-color: #6366f1;
    --button-hover-background: #252535;
    --button-active-background: #1e1e2d;
    --input-background: #1e1e2d;
    --input-border-color: #353552;
    --input-placeholder-color: #94a3b8;
    --secondary-color: #94a3b8;
    border-radius: 12px !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
}

/* Si el componente expone ::part, estos ayudan (no rompen si no existen) */
.dark-mode emoji-picker::part(search) {
    background: #1e1e2d;
    border-bottom: 1px solid #353552;
}

.dark-mode emoji-picker::part(search-field) {
    background: #1e1e2d;
    color: #e2e8f0;
}

.dark-mode emoji-picker::part(category-tabs),
.dark-mode emoji-picker::part(footer) {
    background: #1e1e2d;
    border-top: 1px solid #353552;
}

/* Quickbar de emojis y botón toggle que agregaste tú */
.dark-mode .emoji-chip {
    background: #1e1e2d !important;
    border-color: #353552 !important;
    color: #e2e8f0 !important;
}

.dark-mode .emoji-chip:hover {
    background: #252535 !important;
    border-color: #6366f1 !important;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.25) !important;
}

.dark-mode .emoji-picker-toggle {
    background: #1e1e2d !important;
    border-color: #353552 !important;
    color: #e2e8f0 !important;
}

.dark-mode .emoji-picker-toggle:hover {
    background: #252535 !important;
    border-color: #6366f1 !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25) !important;
}

/* Scrollbar interno del popover (suave y discreto) */
.dark-mode .emoji-picker-popover *::-webkit-scrollbar {
    width: 8px;
}

.dark-mode .emoji-picker-popover *::-webkit-scrollbar-track {
    background: #1e1e2d;
}

.dark-mode .emoji-picker-popover *::-webkit-scrollbar-thumb {
    background: #353552;
    border-radius: 8px;
}

.dark-mode .emoji-picker-popover *::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}

/* =======================================================
   MENSAJES.PHP — FIXES MODO OSCURO
   ======================================================= */

/* 1) Color/gradiente para todo lo que use .bg-zinfinal: */
.dark-mode .bg-zinfinal {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
    border-color: rgba(99, 102, 241, 0.55) !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25) !important;
}

.dark-mode .bg-zinfinal:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
}

/* 2) Focos/anillos en inputs y textareas con focus:ring-zinfinal */
.dark-mode .focus\:ring-zinfinal:focus {
    --tw-ring-color: #6366f1 !important;
}

.dark-mode .focus\:ring-2:focus {
    --tw-ring-color: #6366f1 !important;
}

/* 3) Compatibilidad con utilidades Tailwind con slash (bg-blue-900/20) */
.dark-mode .bg-blue-900\/20 {
    background-color: rgba(99, 102, 241, 0.20) !important;
}

/* 4) Micro-contrastes en meta (hora leída en tus mensajes) */
.dark-mode .text-blue-100 {
    color: #e2e8f0 !important;
    opacity: .9 !important;
}

/* 5) Lista de conversaciones: hover y "seleccionado" con mejor lectura */
.dark-mode .hover\:bg-gray-700:hover {
    background-color: #2d2d42 !important;
}

.dark-mode .border-gray-200 {
    border-color: #353552 !important;
}

/* 6) Burbujas de mensajes "del otro" */
.dark-mode .bg-gray-200.dark\:bg-gray-700,
.dark-mode .dark\:bg-gray-700 {
    background-color: #2d2d42 !important;
    color: #e2e8f0 !important;
}

/* 7) Botón "fab" de enviar (el redondo a la derecha) */
.dark-mode .h-12.w-12.bg-zinfinal {
    box-shadow: 0 10px 22px rgba(99, 102, 241, 0.28) !important;
}

/* 8) Inputs/textarea de mensajes — bordes y placeholder más claros aún */
.dark-mode textarea#contenido-respuesta,
.dark-mode textarea#contenido-mensaje {
    background-color: #252535 !important;
    border-color: #353552 !important;
    color: #e2e8f0 !important;
}

.dark-mode textarea#contenido-respuesta::placeholder,
.dark-mode textarea#contenido-mensaje::placeholder {
    color: #94a3b8 !important;
}

/* 9) Cabecera de conversación y tarjetas contenedoras */
.dark-mode .dark\:bg-gray-800 {
    background-color: #1e1e2d !important;
}

.dark-mode .dark\:border-gray-700 {
    border-color: #353552 !important;
}

/* 11) Estado leído (check) + badge no leídos (ligera mejora de contraste) */
.dark-mode .fa-check {
    color: #6366f1 !important;
}

.dark-mode .bg-red-500.text-white {
    box-shadow: 0 0 0 2px #1e1e2d !important;
}

/* 12) Scroll suave de la conversación (ya lo tienes, reforzamos en dark) */
.dark-mode #conversacion-mensajes {
    scroll-behavior: smooth;
    background: linear-gradient(180deg, rgba(30, 30, 45, 0.95) 0%, rgba(30, 30, 45, 0.98) 100%) !important;
}

/* Efectos especiales adicionales */
.dark-mode .accent-text {
    color: #6366f1 !important;
}

.dark-mode .highlight-text {
    color: #fbbf24 !important;
}

/* Asegurar buena legibilidad en todos los textos */
.dark-mode .text-gray-900 {
    color: #f1f5f9 !important;
}

.dark-mode .text-gray-800 {
    color: #e2e8f0 !important;
}

.dark-mode .text-gray-700 {
    color: #cbd5e1 !important;
}

.dark-mode .text-gray-600 {
    color: #94a3b8 !important;
}

/* Efectos de hover en enlaces */
.dark-mode .hover\:text-accent:hover {
    color: #6366f1 !important;
}

/* Logo en modo oscuro */
.dark-mode .logo-bg {
    background: linear-gradient(90deg, #6366f1, #8b5cf6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.5) !important;
}

/* Botón toggle de categorías en modo oscuro */
.dark-mode .categoria-toggle {
    background-color: #252535 !important;
    color: #6366f1 !important;
    border-color: #8b5cf6 !important;
}

.dark-mode .categoria-toggle:hover {
    background-color: #6366f1 !important;
    color: white !important;
}

/* Buscador en modo oscuro */
.dark-mode .bg-gray-800 {
    background-color: #252535 !important;
}

.dark-mode .text-accent-100 {
    color: #e2e8f0 !important;
}

.dark-mode .border-accent-500 {
    border-color: #6366f1 !important;
}

.dark-mode .text-accent-500 {
    color: #6366f1 !important;
}

/* Avatar de usuario en modo oscuro */
.dark-mode .bg-accent-200 {
    background-color: #353552 !important;
}

.dark-mode .border-accent-400 {
    border-color: #8b5cf6 !important;
}

/* Menú móvil en modo oscuro */
.dark-mode #mobileMenu {
    background: linear-gradient(135deg, #1e1e2d 0%, #252535 100%) !important;
    color: #e2e8f0 !important;
    border-right: 2px solid #6366f1 !important;
}

.dark-mode #mobileMenu .text-gray-700 {
    color: #e2e8f0 !important;
}

.dark-mode #mobileMenu .text-gray-800 {
    color: #e2e8f0 !important;
}

.dark-mode #mobileMenu .text-gray-500 {
    color: #94a3b8 !important;
}

.dark-mode #mobileMenu .border-gray-200 {
    border-color: #353552 !important;
}

.dark-mode #mobileMenu .hover\:bg-gray-100:hover {
    background-color: #252535 !important;
}

/* Overlay del menú móvil */
.dark-mode .mobile-menu-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Mejoras de accesibilidad y contraste */
.dark-mode .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Estados de focus mejorados para accesibilidad */
.dark-mode button:focus-visible,
.dark-mode a:focus-visible,
.dark-mode input:focus-visible,
.dark-mode select:focus-visible,
.dark-mode textarea:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Transiciones suaves para todos los elementos interactivos */
.dark-mode * {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Media queries para mejorar la experiencia en diferentes dispositivos */
@media (max-width: 768px) {
    .dark-mode .mobile-optimized {
        background-color: #1e1e2d !important;
    }
    
    .dark-mode .mobile-menu {
        background: linear-gradient(135deg, #1e1e2d 0%, #252535 100%) !important;
    }
}

/* Scrollbar personalizado para navegadores webkit */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: #1e1e2d;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #353552;
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}

/* ========================================
   SECCIÓN EXPLICACIÓN PEDIDOS - FONDO NEGRO
   ======================================== */

.dark-mode .bg-gradient-to-r.from-orange-50.to-purple-50 {
    background: #000000 !important;
    border-left-color: #6366f1 !important;
}

.dark-mode .bg-gradient-to-r.from-orange-50.to-purple-50 .text-dark {
    color: #ffffff !important;
}

.dark-mode .bg-gradient-to-r.from-orange-50.to-purple-50 .text-gray-700 {
    color: #e2e8f0 !important;
}

.dark-mode .bg-gradient-to-r.from-orange-50.to-purple-50 strong {
    color: #ffffff !important;
}

.dark-mode .bg-gradient-to-r.from-orange-50.to-purple-50 p {
    color: #cbd5e1 !important;
}

/* ========================================
   ESTILOS ESPECÍFICOS PARA RANKING.PHP
   ======================================== */

/* Fondo principal del ranking */
.dark-mode main.container.mx-auto.px-4.py-8 {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2d 100%) !important;
}

/* Header del ranking */
.dark-mode .text-center.mb-8 h1.text-4xl.font-bold.text-gray-800 {
    color: #f1f5f9 !important;
}

.dark-mode .text-center.mb-8 p.text-xl.text-gray-600 {
    color: #94a3b8 !important;
}

/* Tarjetas de ranking */
.dark-mode .ranking-card {
    background: linear-gradient(135deg, #1e1e2d 0%, #252535 100%) !important;
    border: 1px solid #353552 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .ranking-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(99, 102, 241, 0.2) !important;
    border-color: #6366f1 !important;
}

/* Títulos de las tarjetas */
.dark-mode .ranking-card h3.text-xl.font-bold.text-gray-800 {
    color: #e2e8f0 !important;
}

.dark-mode .ranking-card p.text-gray-600.text-sm {
    color: #94a3b8 !important;
}

/* Iconos de las tarjetas */
.dark-mode .ranking-card .w-12.h-12.bg-gradient-to-r {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Items de ranking */
.dark-mode .ranking-item {
    background: transparent !important;
    border: 1px solid transparent !important;
}

.dark-mode .ranking-item:hover {
    background: linear-gradient(135deg, #252535 0%, #2d2d42 100%) !important;
    border-color: #353552 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Badges de puesto */
.dark-mode .puesto-badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Avatar de usuario */
.dark-mode .user-avatar {
    border: 3px solid #353552 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .ranking-item:hover .user-avatar {
    border-color: #6366f1 !important;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.3) !important;
}

/* Nombres de usuario */
.dark-mode .ranking-item .font-semibold.text-gray-800 {
    color: #e2e8f0 !important;
}

/* Badges de estadísticas */
.dark-mode .stats-badge {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

/* Tags de categoría */
.dark-mode .category-tag {
    background: #252535 !important;
    color: #cbd5e1 !important;
    border: 1px solid #353552 !important;
}

/* Navegación del ranking */
.dark-mode .nav-ranking {
    background: linear-gradient(135deg, #252535 0%, #2d2d42 100%) !important;
    border: 1px solid #353552 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .nav-ranking button {
    background: transparent !important;
    color: #94a3b8 !important;
    border: 1px solid transparent !important;
}

.dark-mode .nav-ranking button.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

.dark-mode .nav-ranking button:hover:not(.active) {
    background: #353552 !important;
    color: #e2e8f0 !important;
    border-color: #6366f1 !important;
}

/* Sección de información adicional */
.dark-mode .bg-gradient-to-r.from-orange-50.to-purple-50 {
    background: linear-gradient(135deg, #252535 0%, #2d2d42 100%) !important;
    border: 1px solid #353552 !important;
}

.dark-mode .bg-gradient-to-r.from-orange-50.to-purple-50 h3.text-2xl.font-bold.text-gray-800 {
    color: #e2e8f0 !important;
}

.dark-mode .bg-gradient-to-r.from-orange-50.to-purple-50 p.text-gray-600 {
    color: #94a3b8 !important;
}

.dark-mode .bg-gradient-to-r.from-orange-50.to-purple-50 .text-gray-600 {
    color: #cbd5e1 !important;
}

/* Iconos de la sección informativa */
.dark-mode .bg-gradient-to-r.from-orange-50.to-purple-50 .text-orange-500 {
    color: #6366f1 !important;
}

.dark-mode .bg-gradient-to-r.from-orange-50.to-purple-50 .text-purple-500 {
    color: #8b5cf6 !important;
}

/* Trofeo animado */
.dark-mode .inline-flex.items-center.justify-center.w-20.h-20.bg-gradient-to-r.from-yellow-400.to-orange-500 {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3) !important;
}

/* Rangos de usuarios */
.dark-mode .inline-flex.items-center.px-2.py-1.rounded-full.text-xs.font-bold.text-white {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Estados de hover mejorados */
.dark-mode .ranking-item {
    transition: all 0.3s ease !important;
}

.dark-mode .ranking-item:hover {
    transform: translateY(-2px) !important;
}

/* Efectos de foco para accesibilidad */
.dark-mode .nav-btn:focus-visible,
.dark-mode .ranking-item:focus-visible {
    outline: 2px solid #6366f1 !important;
    outline-offset: 2px !important;
}

/* Colores específicos para puestos */
.dark-mode .puesto-badge.from-yellow-400.to-yellow-600 {
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
}

.dark-mode .puesto-badge.from-gray-400.to-gray-600 {
    background: linear-gradient(135deg, #94a3b8, #475569) !important;
}

.dark-mode .puesto-badge.from-orange-700.to-orange-900 {
    background: linear-gradient(135deg, #c2410c, #7c2d12) !important;
}

.dark-mode .puesto-badge.from-indigo-500.to-purple-600 {
    background: linear-gradient(135deg, #6366f1, #7c3aed) !important;
}

/* Iconos de los puestos */
.dark-mode .puesto-badge .fas {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .dark-mode .ranking-card {
        margin-bottom: 1rem !important;
    }
    
    .dark-mode .nav-ranking {
        padding: 0.5rem !important;
    }
    
    .dark-mode .nav-btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* Scrollbar personalizado para secciones de ranking */
.dark-mode .ranking-card ::-webkit-scrollbar {
    width: 6px;
}

.dark-mode .ranking-card ::-webkit-scrollbar-track {
    background: #1e1e2d;
}

.dark-mode .ranking-card ::-webkit-scrollbar-thumb {
    background: #353552;
    border-radius: 3px;
}

.dark-mode .ranking-card ::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}

/* Mejoras de contraste para textos */
.dark-mode .text-sm.text-gray-600 {
    color: #94a3b8 !important;
}

.dark-mode .flex.items-center.text-sm.text-gray-600 {
    color: #cbd5e1 !important;
}

/* Asegurar que todos los textos sean legibles */
.dark-mode .ranking-card * {
    color: inherit !important;
}

/* Estados de carga y animaciones */
.dark-mode .trophy-animation {
    filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3)) !important;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { 
        transform: translateY(0); 
        filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3)) !important;
    }
    40% { 
        transform: translateY(-5px); 
        filter: drop-shadow(0 6px 12px rgba(99, 102, 241, 0.4)) !important;
    }
    60% { 
        transform: translateY(-3px); 
        filter: drop-shadow(0 5px 10px rgba(99, 102, 241, 0.35)) !important;
    }
}

/* Transiciones suaves para todos los elementos interactivos */
.dark-mode .ranking-card,
.dark-mode .ranking-item,
.dark-mode .nav-btn,
.dark-mode .user-avatar {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Efectos de profundidad mejorados */
.dark-mode .ranking-card {
    position: relative;
}

.dark-mode .ranking-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.dark-mode .ranking-card:hover::before {
    opacity: 1;
}