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

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

/* Header y navegación */
.dark-mode .header-bg {
    background: rgba(23, 25, 35, 0.98) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ESTILOS ESPECÍFICOS PARA EL PANEL DE USUARIO EN POST.PHP */

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

.dark-mode .bg-gradient-to-r.from-green-50.to-emerald-50 {
    background: linear-gradient(to right, #2f5233, #3c6e47) !important;
}

.dark-mode .bg-gradient-to-r.from-purple-50.to-pink-50 {
    background: linear-gradient(to right, #553c9a, #7c2d92) !important;
}

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

.dark-mode .bg-gradient-to-r.from-teal-50.to-cyan-50 {
    background: linear-gradient(to right, #2c7a7b, #0891b2) !important;
}

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

.dark-mode .text-green-600 {
    color: #68d391 !important;
}

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

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

.dark-mode .text-teal-600 {
    color: #4fd1c7 !important;
}

.dark-mode .text-indigo-600 {
    color: #7c3aed !important;
}

/* ESTILOS PARA COMENTARIOS */

/* Contenedores de comentarios */
.dark-mode .comment-container {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

/* Botones de comentarios */
.dark-mode .comment-button {
    background-color: #4a5568 !important;
    color: #e2e8f0 !important;
    border-color: #718096 !important;
}

.dark-mode .comment-button:hover {
    background-color: #718096 !important;
    color: #f7fafc !important;
}

/* Formularios de comentarios */
.dark-mode textarea {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

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

/* ESTILOS PARA MISIONES DIARIAS EN CONTENIDO.PHP */

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

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

.dark-mode .border-green-200 {
    border-color: #48bb78 !important;
}

.dark-mode .text-green-700 {
    color: #68d391 !important;
}

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

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

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

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

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

/* ESTILO SUAVE PARA POSTS STICKY EN MODO OSCURO */

.dark-mode .bg-yellow-50 {
    background-color: #3b3200 !important;  /* fondo muy oscuro, ligeramente cálido */
}

.dark-mode .border-yellow-200 {
    border-color: #e9d8a6 !important;  /* amarillo pastel (tipo vainilla) */
}

.dark-mode .bg-yellow-100 {
    background-color: #4a3f00 !important;  /* un poco más claro que el fondo base */
}

.dark-mode .text-yellow-600 {
    color: #fef9c3 !important;  /* amarillo suave y claro, buena visibilidad */
}

.dark-mode .bg-yellow-200 {
    background-color: #5c4f00 !important;  /* cálido suave, sin saturación */
}

.dark-mode .text-yellow-800 {
    color: #fefcbf !important;  /* tono crema claro */
}



/* ESTILOS PARA FORMULARIOS */

.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode select {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

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

/* ESTILOS PARA BOTONES */

.dark-mode .btn-primary {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
}

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

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

/* ESTILOS PARA PAGINACIÓN */

.dark-mode .pagination a {
    background-color: #4a5568 !important;
    color: #e2e8f0 !important;
    border-color: #718096 !important;
}

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

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

/* ESTILOS PARA SOMBRAS */

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

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

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

/* ESTILOS PARA CATEGORÍAS */

.dark-mode .categoria-filter {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

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

.dark-mode .categoria-filter.active {
    background-color: #4f46e5 !important;
    color: white !important;
}

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

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

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

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

/* Elementos de focus */
.dark-mode .focus\:ring-2:focus {
    --tw-ring-color: #4f46e5 !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: #ecc94b !important;
}

.dark-mode .text-green-500 {
    color: #48bb78 !important;
}

.dark-mode .text-blue-500 {
    color: #4299e1 !important;
}

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

.dark-mode .text-purple-500 {
    color: #9f7aea !important;
}

/* Estilos para elementos de notificación */
.dark-mode .notification-badge {
    background-color: #e53e3e !important;
    color: white !important;
}

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

/* Sin transiciones adicionales */


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

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

/* Estadísticas del perfil - Siguiendo, Seguidores, Comentarios, Posts, Puntos */
.dark-mode .bg-gradient-to-br.from-blue-50.to-indigo-50 {
    background: linear-gradient(to bottom right, #2a4365, #3c4f76) !important;
}

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

.dark-mode .bg-gradient-to-br.from-purple-50.to-pink-50 {
    background: linear-gradient(to bottom right, #553c9a, #7c2d92) !important;
}

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

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

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

.dark-mode .text-green-600 {
    color: #68d391 !important;
}

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

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

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

/* Borde del avatar en modo oscuro */
.dark-mode .border-indigo-200 {
    border-color: #5a67d8 !important;
}

/* Biografía en modo oscuro */
.dark-mode .hover\:bg-gray-50:hover {
    background-color: #4a5568 !important;
}

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

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

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

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

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

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

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

.dark-mode .to-purple-600 {
    --tw-gradient-to: #9333ea !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: #48bb78 !important;
}

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

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

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

/* Formulario de biografía */
.dark-mode .border-gray-300 {
    border-color: #4a5568 !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: #a0aec0 !important;
}

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

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

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

/* Modal de avatar (si existe) */
.dark-mode .modal-content {
    background-color: #1a202c !important;
    border-color: #4a5568 !important;
}

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

/* Sin efectos hover adicionales */

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

.dark-mode .profile-bio {
    color: #cbd5e0 !important;
    background-color: #2d3748 !important;
}

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

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

/* Sin efectos de gradiente adicionales */

/* Sin transiciones adicionales en perfil */

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

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

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

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


/* Estilos específicos para la modal de rangos en modo oscuro */
.dark-mode #modal-rangos .bg-white {
    background-color: #1a202c !important;
}

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

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

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

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

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

/* Estilos específicos para rangos especiales en modo oscuro */
.dark-mode #modal-rangos .bg-gradient-to-r.from-red-50.to-orange-50 {
    background: linear-gradient(to right, #2d1b1b, #2d2419) !important;
    border-color: #744444 !important;
}

.dark-mode #modal-rangos .bg-gradient-to-r.from-red-100.to-red-50 {
    background: linear-gradient(to right, #3d1a1a, #2d1b1b) !important;
    border-color: #8b4444 !important;
}

/* Texto específico para rangos especiales en modo oscuro */
.dark-mode #modal-rangos .text-red-600 {
    color: #fc8181 !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, #1e2a4a, #1e2951) !important;
    border-color: #4c6ef5 !important;
}

.dark-mode #modal-rangos .bg-gradient-to-r.from-green-50.to-emerald-50 {
    background: linear-gradient(to right, #1e3a2e, #1e4338) !important;
    border-color: #48bb78 !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: #f56565 !important;
}

.dark-mode #modal-rangos .text-green-500 {
    color: #48bb78 !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: #5b21b6 !important;
}


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

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

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

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

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

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

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

.dark-mode #colorPickerModal .dark\:bg-gray-800 {
    background-color: #1a202c !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: #a0aec0 !important;
}

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

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

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

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

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

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

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

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

.dark-mode #colorPickerModal input[type="text"] {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

.dark-mode #colorPickerModal input[type="text"]:focus {
    border-color: #3182ce !important;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1) !important;
}

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

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

.dark-mode #colorPickerModal #colorPreview {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

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

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

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

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

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

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

/* ESTILOS PARA FORMULARIOS EN MODO OSCURO */
.dark-mode input[type="text"],
.dark-mode textarea,
.dark-mode select {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #4a5568 !important;
}

.dark-mode input[type="text"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: #3182ce !important;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1) !important;
}

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

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

/* ESTILOS PARA CHECKBOXES EN MODO OSCURO */
.dark-mode input[type="checkbox"] {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

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

/* ESTILOS PARA LA PREVISUALIZACIÓN EN MODO OSCURO */
.dark-mode #preview {
    background-color: #1a202c !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.3);
}

/* ESTILOS PARA BORRADORES EN MODO OSCURO */
.dark-mode .bg-blue-50 {
    background-color: #2a4365 !important;
}

.dark-mode .border-blue-200 {
    border-color: #3182ce !important;
}

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

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

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


/* ESTILOS ADICIONALES PARA ELEMENTOS FALTANTES EN MODO OSCURO */

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

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

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

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

/* Área de consejos (azul) */
.dark-mode .bg-blue-100 {
    background-color: #2a4365 !important;
}

.dark-mode .border-blue-300 {
    border-color: #3182ce !important;
}

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

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

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

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

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

.dark-mode .text-teal-500 {
    color: #4fd1c7 !important;
}

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


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

/* Área de consejos mejorada */
.dark-mode .bg-blue-50.border.border-blue-200 {
    background-color: #2a4365 !important;
    border-color: #3182ce !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: #1a202c !important;
}

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

/* Título del panel de administración */
.dark-mode h1.text-3xl.font-bold.text-gray-800 {
    color: #f7fafc !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: #2f5233 !important;
    border-color: #48bb78 !important;
    color: #68d391 !important;
}

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

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

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

/* Campo de búsqueda */
.dark-mode .search-input {
    background-color: #4a5568 !important;
    border-color: #718096 !important;
    color: #f7fafc !important;
}

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

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

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

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

.dark-mode .filter-btn:hover {
    background-color: #718096 !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: #2f5233 !important;
    color: #68d391 !important;
}

.dark-mode .bg-red-100.text-red-700 {
    background-color: #742a2a !important;
    color: #feb2b2 !important;
}

.dark-mode .bg-purple-100.text-purple-700 {
    background-color: #553c9a !important;
    color: #d8b4fe !important;
}

.dark-mode .bg-blue-100.text-blue-700 {
    background-color: #2a4365 !important;
    color: #90cdf4 !important;
}

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

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

.dark-mode .min-w-full.divide-y.divide-gray-200 thead th {
    color: #a0aec0 !important;
    border-color: #4a5568 !important;
}

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

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

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

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

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

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

/* Estados de usuario */
.dark-mode .bg-green-100.text-green-800 {
    background-color: #2f5233 !important;
    color: #68d391 !important;
}

.dark-mode .bg-red-100.text-red-800 {
    background-color: #742a2a !important;
    color: #feb2b2 !important;
}

/* Información adicional de baneos */
.dark-mode .text-xs.text-gray-500.mt-1 {
    color: #718096 !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: #2a4365 !important;
    color: #90cdf4 !important;
}

/* Botón Banear */
.dark-mode .text-yellow-600.hover\:text-yellow-900.bg-yellow-100.hover\:bg-yellow-200 {
    background-color: #744210 !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: #2f5233 !important;
    color: #68d391 !important;
}

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

/* Botón Ver Perfil */
.dark-mode .text-indigo-600.hover\:text-indigo-900.bg-indigo-100.hover\:bg-indigo-200 {
    background-color: #553c9a !important;
    color: #d8b4fe !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, #f59e0b, #ea580c) !important;
}

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

.dark-mode .text-gray-500.hover\:text-yellow-500.bg-gray-50.hover\:bg-yellow-50 {
    background-color: #4a5568 !important;
    color: #a0aec0 !important;
}

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

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

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

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

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

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

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

.dark-mode .tooltip .tooltiptext {
    background-color: #1a202c !important;
    color: #f7fafc !important;
    border: 1px solid #4a5568 !important;
}

.dark-mode .tooltip .tooltiptext::after {
    border-color: #1a202c 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: #2d3748 !important;
    border-color: #4a5568 !important;
}

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

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

.dark-mode #editModal input,
.dark-mode #editModal select {
    background-color: #4a5568 !important;
    border-color: #718096 !important;
    color: #f7fafc !important;
}

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

.dark-mode #banModal .bg-white {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
}

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

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

.dark-mode #banModal input,
.dark-mode #banModal select,
.dark-mode #banModal textarea {
    background-color: #4a5568 !important;
    border-color: #718096 !important;
    color: #f7fafc !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: #718096 !important;
    color: #cbd5e1 !important;
}

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

.dark-mode select#puntos-select {
    background-color: #4a5568 !important;
    border-color: #718096 !important;
    color: #f7fafc !important;
}

.dark-mode select#puntos-select option {
    background-color: #4a5568 !important;
    color: #f7fafc !important;
}

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

.dark-mode .bg-red-100.border.border-red-400.text-red-700 {
    background-color: #742a2a !important;
    border-color: #f56565 !important;
    color: #feb2b2 !important;
}

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

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

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

.dark-mode input[type="checkbox"] {
    background-color: #4a5568 !important;
    border-color: #718096 !important;
}

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

.dark-mode input[type="radio"] {
    background-color: #4a5568 !important;
    border-color: #718096 !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: #92400e !important;
    color: #fde68a !important;
}

.dark-mode .text-gray-500.hover\:text-yellow-500.bg-gray-50.hover\:bg-yellow-50:hover {
    background-color: #744210 !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: #742a2a !important;
    color: #feb2b2 !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: #2a4365 !important;
    color: #90cdf4 !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: #742a2a !important;
    color: #feb2b2 !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, #d97706, #c2410c) !important;
}

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

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

/* Texto general que dice "Otorgar puntos" */
.dark-mode .text-gray-600 {
    color: #cbd5e1 !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: #1f2937 !important;
}



/* Texto específico para "Otorgar puntos (quedan X)" */
.dark-mode span:contains("Otorgar puntos") {
    color: #f7fafc !important;
}

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

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

/* ========================================
   OTORGAR PUNTOS (cartel amarillo) - MODO OSCURO
   Pégalo al FINAL de tu CSS
   ======================================== */

.dark-mode #form-puntos {
    /* reemplaza el degradado amarillo por un panel oscuro */
    background: linear-gradient(135deg, #2b2f3a 0%, #1f2532 100%) !important;
    border-color: #4a5568 !important;
    box-shadow: 0 6px 18px rgba(0,0,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: #f7fafc !important;
    opacity: 0.95;
}

/* selector de puntos */
.dark-mode #form-puntos select,
.dark-mode #form-puntos .select,
.dark-mode #select-puntos { /* por si usas este id */
    background-color: #2d3748 !important;
    border-color: #4a5568 !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;          /* indigo */
    box-shadow: 0 0 0 3px rgba(99,102,241,.25) !important;
}

/* botón ENVIAR (antes era amarillo/naranja) */
.dark-mode #form-puntos button,
.dark-mode #form-puntos .btn-otorgar {
    background: linear-gradient(90deg, #4f46e5, #7c3aed) !important; /* indigo → purple */
    border: 1px solid #605adf !important;
    color: #ffffff !important;
}
.dark-mode #form-puntos button:hover,
.dark-mode #form-puntos .btn-otorgar:hover {
    background: linear-gradient(90deg, #4338ca, #6d28d9) !important;
    border-color: #6b63e6 !important;
}

/* botón deshabilitado (si aplica) */
.dark-mode #form-puntos button:disabled,
.dark-mode #form-puntos .btn-otorgar:disabled {
    background: #3b3f4b !important;
    border-color: #4a4f5d !important;
    color: #a0aec0 !important;
    cursor: not-allowed !important;
    opacity: .8 !important;
}

/* badges/píldoras dentro del panel (por si aparece “10 puntos”) */
.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: #374151 !important;
    border-color: #4a5568 !important;
    color: #f7fafc !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, #2b2f3a 0%, #1f2532 100%) !important;
    border-color: #4a5568 !important;
}

/* icono del cohete/estrella (si lo hay) 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: #f7fafc !important;               /* Título */
}

.dark-mode .bg-white.rounded-lg.shadow-md.p-6 .text-gray-600 {
  color: #e2e8f0 !important;               /* Etiquetas: Usuarios, Miembros, etc. */
  /* color: #f1f5f9 !important;  /* <-- MÁS CLARO aún, si lo quieres */ 
}

.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: #ffffff !important;               /* Números de la derecha */
}

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


/* =============================
   PERFIL – aclarar textos tenues
   (Últimos comentarios, bio y estadísticas)
   PÉGALO AL FINAL
   ============================= */

/* 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: #e5e7eb !important;   /* subtexto claro */
}
.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: #cbd5e1 !important;   /* metadatos / fecha */
}

/* 2) Biografía */
.dark-mode .profile-bio {
  color: #f1f5f9 !important;    /* más claro que #cbd5e0 */
}

/* 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: #eef2f7 !important;    /* “Siguiendo”, “Seguidores”, “Comentarios”, etc. */
}

/* 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: #e5e7eb !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;            /* texto bien blanco */
  background-color: #4a5568 !important; /* fondo gris oscuro */
  border-color: #4a5568 !important;
  opacity: 1 !important;                /* por si tenía opacity util */
}

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

/* MODERADOR – dark con naranja oscuro tipo “burnt amber” */
.dark-mode .rango-moderador{
  background: linear-gradient(to right, #3b2a12, #2b2416) !important; /* ámbar oscuro */
  border-color: #b45309 !important;   /* ámbar 700 aprox */
  color: #f8fafc !important;
}
.dark-mode .rango-moderador h4,
.dark-mode .rango-moderador strong{ color:#ffffff !important; }
.dark-mode .rango-moderador p{ color:#e5e7eb !important; }
.dark-mode .rango-moderador .accent{ color:#fbbf24 !important; } /* subtítulo y puntos */
.dark-mode .rango-moderador *{ opacity:1 !important; } /* por herencias raras */


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

/* Fondo principal SOLO para register y login */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 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: #1a202c !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: #f7fafc !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: #a0aec0 !important;
}

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

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .text-gray-900 {
    color: #f7fafc !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: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #f7fafc !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: #a0aec0 !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: #742a2a !important;
}

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

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

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

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

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

/* Mini-protocolo SOLO en register */
.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .bg-yellow-50 {
    background-color: #744210 !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: #742a2a !important;
}

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

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

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

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

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

.dark-mode main.bg-gradient-to-br.from-blue-50.to-indigo-100 .switch-thumb {
    background-color: #f7fafc !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, #4c51bf, #7c3aed) !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, #434190, #6d28d9) !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: #718096 !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: #718096 !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(0, 0, 0, 0.5) !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
   (colores coherentes y buen contraste)
   ========================================================= */
.dark-mode .emoji-chip {
  background: #1f2937 !important;            /* slate-800 */
  border-color: #374151 !important;           /* slate-700 */
  color: #e5e7eb !important;                  /* slate-200 */
  box-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}
.dark-mode .emoji-chip:hover {
  background: #111827 !important;            /* slate-900 */
  border-color: #4f46e5 !important;          /* indigo */
  box-shadow: 0 6px 14px rgba(79,70,229,.25) !important;
}

/* Botón que abre el picker */
.dark-mode .emoji-picker-toggle {
  background: #1f2937 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}
.dark-mode .emoji-picker-toggle:hover {
  background: #111827 !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 6px 14px rgba(79,70,229,.25) !important;
}

/* Popover contenedor del picker */
.dark-mode .emoji-picker-popover {
  background: #0b1220 !important;            /* azul/gris muy oscuro con leve tinte */
  border-color: #273043 !important;          /* borde frío sutil */
  box-shadow: 0 24px 60px rgba(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,.65) !important;
}

/* El webcomponent <emoji-picker> no siempre expone estilos,
   pero muchos builds respetan fondo y texto del host */
.dark-mode .emoji-picker {
  background: transparent !important;
  color: #e5e7eb !important;
}

/* Si tu versión de <emoji-picker> soporta ::part, estos ayudan bastante.
   Son opcionales y NO rompen nada si no existen. */
.dark-mode .emoji-picker::part(search) {
  background: #111827 !important;
  color: #e5e7eb !important;
  border: 1px solid #374151 !important;
}
.dark-mode .emoji-picker::part(category-buttons) {
  background: #0f172a !important;            /* slate-950-ish */
  border-bottom: 1px solid #273043 !important;
}
.dark-mode .emoji-picker::part(category-button) {
  color: #cbd5e1 !important;
}
.dark-mode .emoji-picker::part(category-button):is([aria-pressed="true"], :hover) {
  background: #1f2937 !important;
  color: #ffffff !important;
}
.dark-mode .emoji-picker::part(emoji) {
  border-radius: 8px !important;
}
.dark-mode .emoji-picker::part(emoji):hover {
  background: #1f2937 !important;
  outline: 1px solid #4f46e5 !important;
}

/* =========================================================
   MODO OSCURO — SPOILER (en posts y previsualización)
   Mantiene tu API de clases: .spoiler, .spoiler-title, .spoiler-content
   ========================================================= */
.dark-mode .post-content .spoiler,
.dark-mode #preview-content .spoiler,
.dark-mode .spoiler {
  background: linear-gradient(135deg, #0f172a 0%, #111827 100%) !important; /* azul noche */
  border: 1px solid #273043 !important;    /* borde frío */
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
  color: #e5e7eb !important;
  overflow: hidden;                         /* evita que el contenido sobresalga */
  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(79,70,229,.08) !important;     /* indigo muy suave */
  color: #c7d2fe !important;                       /* indigo-200 */
  border-bottom: 1px solid #273043 !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;
}

/* 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: #0b1220 !important;
  color: #e5e7eb !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(79,70,229,.25) !important;  /* halo indigo leve */
  border-color: #3b3f68 !important;
}
.dark-mode .spoiler:hover {
  border-color: #3b3f68 !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 #4f46e5 !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) — ESTILOS BASE (modo claro)
   Target: .bbcode-quote generado por [quote] y [quote=Autor]
   ========================================================= */
.post-content .bbcode-quote,
#preview-content .bbcode-quote,
.bbcode-quote {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-left: 4px solid #4f46e5;           /* acento indigo */
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 16px 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
}

.bbcode-quote::before {
  content: "“";
  font-size: 64px;
  line-height: 1;
  color: #4f46e5;
  opacity: .08;
  position: absolute;
  top: -10px;
  left: 10px;
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
}

.bbcode-quote .quote-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #4f46e5;
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(79,70,229,.25);
}

.bbcode-quote .bbcode-quote-content {
  color: #475569; /* slate-600 */
  line-height: 1.65;
  font-style: italic;
}

/* Links y código dentro del quote */
.bbcode-quote a {
  color: #4f46e5;
  border-bottom: 1px dashed rgba(79,70,229,.4);
  text-decoration: none;
}
.bbcode-quote a:hover {
  border-bottom-style: solid;
}
.bbcode-quote code {
  background: #eef2ff; /* indigo-50 */
  color: #1e293b;       /* slate-800 */
  border: 1px solid #e0e7ff;
  border-radius: 6px;
  padding: .1rem .35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  font-size: .85em;
}

/* Quotes anidados — escalonado visual suave */
.bbcode-quote .bbcode-quote {
  margin: 12px 0 0 0;
  border-left-color: #8b5cf6; /* purple-500 */
  background: linear-gradient(135deg, #f9fafb 0%, #eef2ff 100%);
}
.bbcode-quote .bbcode-quote .bbcode-quote {
  border-left-color: #06b6d4; /* cyan-500 */
  background: linear-gradient(135deg, #fafafa 0%, #ecfeff 100%);
}

/* Responsivo */
@media (max-width: 640px) {
  .bbcode-quote { padding: 12px 14px; border-radius: 8px; }
  .bbcode-quote::before { font-size: 42px; top: -6px; left: 8px; }
  .bbcode-quote .quote-author { font-size: .75rem; padding: 3px 10px; }
}

/* =========================================================
   OVERRIDES MODO OSCURO
   ========================================================= */
.dark-mode .post-content .bbcode-quote,
.dark-mode #preview-content .bbcode-quote,
.dark-mode .bbcode-quote {
  background: linear-gradient(135deg, #0f172a 0%, #111827 100%) !important; /* noche */
  border-left-color: #6366f1 !important;   /* indigo-500 */
  border-color: #273043 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.45) !important;
}

.dark-mode .bbcode-quote::before {
  color: #818cf8 !important;  /* indigo-400 */
  opacity: .10 !important;
}

.dark-mode .bbcode-quote .quote-author {
  background: linear-gradient(90deg, #4f46e5, #7c3aed) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(99,102,241,.35) !important;
}

.dark-mode .bbcode-quote .bbcode-quote-content {
  color: #e5e7eb !important;  /* slate-200 */
}

/* Links y código en dark */
.dark-mode .bbcode-quote a {
  color: #a5b4fc !important;                               /* indigo-200 */
  border-bottom: 1px dashed rgba(165,180,252,.55) !important;
}
.dark-mode .bbcode-quote a:hover {
  border-bottom-style: solid !important;
}
.dark-mode .bbcode-quote code {
  background: #1f2937 !important;  /* slate-800 */
  color: #e5e7eb !important;       /* slate-200 */
  border: 1px solid #374151 !important;
}

/* Anidados en dark — cambian leve el acento y el fondo */
.dark-mode .bbcode-quote .bbcode-quote {
  border-left-color: #a78bfa !important; /* violet-300 */
  background: linear-gradient(135deg, #0b1220 0%, #101827 100%) !important;
}
.dark-mode .bbcode-quote .bbcode-quote .bbcode-quote {
  border-left-color: #67e8f9 !important; /* cyan-300 */
  background: linear-gradient(135deg, #0a1020 0%, #0e1422 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 #4f46e5;
  outline-offset: 2px;
}

/* =========================================
   EMOJI PICKER — MODO OSCURO
   (emoji-picker-element + tu popover)
   ========================================= */

/* Caja flotante que ya creaste */
.dark-mode .emoji-picker-popover {
  background: #0f172a !important;          /* slate-900 */
  border: 1px solid #273043 !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 64px rgba(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,.6) !important; }

/* Estilos del web-component via CSS variables */
.dark-mode emoji-picker {
  /* fondo y texto */
  --background: #0f172a;                   /* panel */
  --color: #e5e7eb;                        /* texto */

  /* bordes / separadores */
  --border-color: #273043;

  /* acento (tabs activos, línea categoría, focos) */
  --accent-color: #6366f1;                 /* indigo-500 */
  --indicator-color: #6366f1;

  /* botones internos (categorías, skintone, etc.) */
  --button-hover-background: #1f2937;
  --button-active-background: #111827;

  /* buscador */
  --input-background: #111827;
  --input-border-color: #374151;
  --input-placeholder-color: #94a3b8;

  /* colores secundarios (labels, contadores) */
  --secondary-color: #a0aec0;

  /* opcional: tamaño del emoji */
  /* --emoji-size: 1.25rem; */

  /* un poco de “polish” extra */
  border-radius: 12px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.55) !important;
}

/* Si el componente expone ::part, estos ayudan (no rompen si no existen) */
.dark-mode emoji-picker::part(search) {
  background: #0f172a; border-bottom: 1px solid #273043;
}
.dark-mode emoji-picker::part(search-field) {
  background: #111827; color: #e5e7eb;
}
.dark-mode emoji-picker::part(category-tabs),
.dark-mode emoji-picker::part(footer) {
  background: #0f172a; border-top: 1px solid #273043;
}

/* Quickbar de emojis y botón toggle que agregaste tú */
.dark-mode .emoji-chip {
  background: #111827 !important;
  border-color: #2b3447 !important;
  color: #e5e7eb !important;
}
.dark-mode .emoji-chip:hover {
  background: #1f2937 !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 6px 16px rgba(79,70,229,.25) !important;
}

.dark-mode .emoji-picker-toggle {
  background: #111827 !important;
  border-color: #2b3447 !important;
  color: #e5e7eb !important;
}
.dark-mode .emoji-picker-toggle:hover {
  background: #1f2937 !important;
  border-color: #6366f1 !important;
  box-shadow: 0 8px 20px rgba(99,102,241,.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: #0f172a; }
.dark-mode .emoji-picker-popover *::-webkit-scrollbar-thumb {
  background: #273043; border-radius: 8px;
}
.dark-mode .emoji-picker-popover *::-webkit-scrollbar-thumb:hover { background: #374151; }


/* Asegurar que los textos sean legibles en todos los estados */
.dark-mode .text-gray-900 {
    color: #f7fafc !important;
}

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

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

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