/* ==========================================================================
   ESTILOS MODO OSCURO - TEMA "NEGRO TOTAL" (PURE BLACK)
   ========================================================================== */

/* 1. FONDO PRINCIPAL
   Cambio: De gris azulado (#111827) a Negro Puro (#000000).
   Esto afecta a todo el fondo de la página.
*/
body.dark-mode {
  background-color: #000000; /* Negro absoluto */
  color: #f9fafb; /* Texto casi blanco para alto contraste */
}

/* 2. BARRA DE NAVEGACIÓN (NAVBAR)
   Cambio: Fondo negro total. Se añade un borde gris oscuro sutil (#333)
   para separar el menú del resto del contenido negro.
*/
body.dark-mode .navbar-gradient {
  background-color: #000000; /* Fondo negro */
  border-bottom: 1px solid #262626; /* Borde sutil para separar del cuerpo */
}

/* Color de los enlaces del menú */
body.dark-mode .nav-link,
body.dark-mode .text-gray-800 {
  color: #d4d4d4; /* Gris claro neutro */
}

/* Efecto al pasar el mouse por los enlaces (Hover) */
body.dark-mode .nav-link:hover {
  color: #ffffff; /* Blanco puro al pasar el mouse */
}

/* La línea decorativa debajo de los enlaces se mantiene en rojo para contraste */
body.dark-mode .nav-link::before {
  background: linear-gradient(90deg, #f87171, #ef4444);
}

/* Iconos del carrito y hamburguesa */
body.dark-mode .cart-icon-wrapper i,
body.dark-mode #hamburger-btn i {
  color: #d4d4d4;
}

body.dark-mode .cart-icon-wrapper:hover i,
body.dark-mode #hamburger-btn:hover i {
  color: #ffffff;
}

/* 3. MENÚ MÓVIL
   Cambio: Fondo negro en lugar de gris.
*/
body.dark-mode #mobile-menu {
  background-color: #000000;
  border-top: 1px solid #262626; /* Separador sutil */
}

body.dark-mode #mobile-menu a,
body.dark-mode #mobile-menu button {
  color: #d4d4d4;
}

body.dark-mode #mobile-menu a:hover,
body.dark-mode #mobile-menu button:hover {
  background-color: #171717; /* Gris muy oscuro (casi negro) para indicar selección */
  color: #ffffff;
}

/* 4. FOOTER (PIE DE PÁGINA)
   Cambio: Fondo negro y bordes neutros.
*/
body.dark-mode footer {
  background-color: #000000;
  border-top: 1px solid #262626; /* Borde superior gris oscuro */
}

body.dark-mode footer h3,
body.dark-mode footer a,
body.dark-mode footer p,
body.dark-mode footer span {
  color: #a3a3a3; /* Gris medio para texto secundario */
}

body.dark-mode footer a:hover {
  color: #ef4444; /* Rojo al pasar el mouse */
}

/* Iconos de redes sociales en el footer */
body.dark-mode footer .social-icons a {
    background-color: #171717; /* Fondo del botón: Gris muy oscuro */
    color: #e5e5e5;
    border: 1px solid #333; /* Borde fino */
}

body.dark-mode footer .social-icons a:hover {
    background-color: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

/* 5. CONTENIDO GENERAL Y UTILIDADES
   Estas clases sobrescriben los colores por defecto de Tailwind/Bootstrap
   para forzar el negro.
*/
body.dark-mode .bg-white {
    background-color: #000000 !important; /* Fuerza fondo negro donde antes era blanco */
}

body.dark-mode .text-gray-900 {
    color: #f9fafb !important; /* Texto principal a blanco */
}

body.dark-mode .text-gray-700 {
    color: #d4d4d4 !important; /* Texto secundario a gris claro */
}

body.dark-mode .text-gray-600 {
    color: #a3a3a3 !important; /* Texto terciario a gris medio */
}

body.dark-mode .border-gray-200 {
    border-color: #262626 !important; /* Bordes a gris muy oscuro */
}

/* Sombras: Se hacen más sutiles o negras para que no se vean grises */
body.dark-mode .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
}

/* 6. SECCIÓN DE COTIZACIÓN (TARJETAS/CARDS)
   Cambio: En lugar de gris azulado, usamos #0a0a0a (casi negro).
   Es necesario que sea un 1% más claro que el fondo o tener borde
   para que la tarjeta no "desaparezca" en el fondo negro.
*/
body.dark-mode #cotizacion-motos .card {
    background: #0a0a0a; /* Apenas visiblemente más claro que el negro puro */
    border: 1px solid #262626; /* Borde para delimitar la tarjeta */
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

body.dark-mode #cotizacion-motos h2 {
    color: #f87171; /* Títulos en rojo suave */
}

body.dark-mode #cotizacion-motos label {
    color: #e5e5e5;
}

/* Inputs y Selects (Formularios) */
body.dark-mode #cotizacion-motos input,
body.dark-mode #cotizacion-motos select {
    background-color: #000000; /* Fondo del input negro */
    border-color: #404040; /* Borde gris medio */
    color: #ffffff;
}

body.dark-mode #cotizacion-motos input::placeholder {
    color: #525252; /* Placeholder gris oscuro */
}

/* Efecto al hacer clic en un input */
body.dark-mode #cotizacion-motos input:focus,
body.dark-mode #cotizacion-motos select:focus {
    border-color: #f87171; /* Rojo al escribir */
    box-shadow: 0 0 0 1px #f87171; /* Resplandor rojo sutil */
    background-color: #0a0a0a;
}

body.dark-mode #cotizacion-motos .muted {
    color: #737373;
}

body.dark-mode #cotizacion-motos .note {
    background: #171717; /* Nota al pie en gris muy oscuro */
    color: #d4d4d4;
    border: 1px solid #333;
}

/* 7. REGLAS FORZADAS (HARD OVERRIDES)
   Estas reglas son para librerías externas o clases de Tailwind
   que suelen inyectar colores azules/grisáceos.
*/

/* Navbar contenedor principal - Forzado a negro */
.dark .navbar,
[data-theme="dark"] .navbar,
.dark header.navbar,
[data-theme="dark"] header.navbar {
  background-color: #000000 !important;
  color: #e5e7eb !important;
  border-bottom: 1px solid #262626;
}

/* Utilidades de fondo - Todas a negro puro */
.dark .bg-slate-900,
.dark .bg-gray-900,
.dark .bg-neutral-900,
.dark .bg-zinc-900,
[data-theme="dark"] .bg-slate-900,
[data-theme="dark"] .bg-gray-900,
[data-theme="dark"] .bg-neutral-900,
[data-theme="dark"] .bg-zinc-900 {
  background-color: #000000 !important;
}

/* Menús desplegables (Dropdowns) */
.dark .dropdown-menu,
.dark .menu,
.dark .offcanvas,
.dark .sidebar,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .menu,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .sidebar {
  background-color: #0a0a0a !important; /* Casi negro */
  color: #e5e7eb !important;
  border: 1px solid #262626 !important; /* Borde necesario para contraste */
}

/* Enlaces del navbar forzados */
.dark .navbar a,
.dark .navbar button,
[data-theme="dark"] .navbar a,
[data-theme="dark"] .navbar button {
  color: #e5e7eb !important;
}

/* Hover en navbar */
.dark .navbar a:hover,
.dark .navbar a:focus,
[data-theme="dark"] .navbar a:hover,
[data-theme="dark"] .navbar a:focus {
  color: #ffffff !important;
  background-color: #171717 !important; /* Gris muy oscuro al pasar el mouse */
}

/* Transparencias */
.dark .backdrop-blur,
[data-theme="dark"] .backdrop-blur {
  background-color: rgba(0,0,0,0.85) !important; /* Más opaco */
}

/* Iconos */
.dark .navbar i,
[data-theme="dark"] .navbar i {
  color: #f3f4f6 !important;
}

/* ID específico del navbar */
.dark #navbar,
[data-theme="dark"] #navbar {
  background-color: #000000 !important;
}

/* ==========================================================================
   SECCIÓN DE GARANTÍA - CUARTA SECCIÓN
   ========================================================================== */

/* Forzar texto negro por defecto en la sección de garantía */
.seccionGarantiaInicio h6,
.seccionGarantiaInicio h3,
.seccionGarantiaInicio h4,
.seccionGarantiaInicio h5,
.seccionGarantiaInicio p,
.seccionGarantiaInicio em,
.seccionGarantiaInicio strong {
  color: #000000 !important; /* Negro por defecto */
}

/* Modo oscuro: texto blanco en la sección de garantía */
body.dark-mode .seccionGarantiaInicio h6,
body.dark-mode .seccionGarantiaInicio h3,
body.dark-mode .seccionGarantiaInicio h4,
body.dark-mode .seccionGarantiaInicio h5,
body.dark-mode .seccionGarantiaInicio p,
body.dark-mode .seccionGarantiaInicio em,
body.dark-mode .seccionGarantiaInicio strong,
.dark .seccionGarantiaInicio h6,
.dark .seccionGarantiaInicio h3,
.dark .seccionGarantiaInicio h4,
.dark .seccionGarantiaInicio h5,
.dark .seccionGarantiaInicio p,
.dark .seccionGarantiaInicio em,
.dark .seccionGarantiaInicio strong {
  color: #ffffff !important; /* Blanco en modo oscuro */
}

/* Excepciones: mantener botones rojos */
.seccionGarantiaInicio a.bg-red-600,
body.dark-mode .seccionGarantiaInicio a.bg-red-600,
.dark .seccionGarantiaInicio a.bg-red-600 {
  color: #ffffff !important; /* Los botones siempre blancos */
  background-color: #dc2626 !important;
}

.seccionGarantiaInicio a.bg-red-600:hover,
body.dark-mode .seccionGarantiaInicio a.bg-red-600:hover,
.dark .seccionGarantiaInicio a.bg-red-600:hover {
  background-color: #b91c1c !important;
}

/* ==========================================================================
   PÁGINA NOSOTROS - TÍTULOS Y NOMBRES EN MODO OSCURO
   ========================================================================== */

/* En modo oscuro: forzar h1, h2 y h3 a blanco */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
.dark h1,
.dark h2,
.dark h3 {
  color: #ffffff !important;
}

/* En modo oscuro: forzar nombres del equipo y mecánicos a blanco */
body.dark-mode .swiper-slide h3,
.dark .swiper-slide h3 {
  color: #ffffff !important;
}

/* ==========================================================================
   FOOTER - MANTENER TÍTULOS EN ROJO SIEMPRE
   ========================================================================== */

/* Los títulos H3 del footer se mantienen rojos en ambos modos */
footer h3,
body.dark-mode footer h3,
.dark footer h3 {
  color: #ef4444 !important; /* Rojo (text-red-500) siempre */
}

/* Asegurar que los subtítulos del footer no cambien */
footer .text-red-500,
body.dark-mode footer .text-red-500,
.dark footer .text-red-500 {
  color: #ef4444 !important;
}

/* Enlaces del sub-footer en rojo fijo (text-red-800) */
footer .text-red-800,
footer .text-red-800 a,
body.dark-mode footer .text-red-800,
body.dark-mode footer .text-red-800 a,
.dark footer .text-red-800,
.dark footer .text-red-800 a {
  color: #991b1b !important; /* Rojo oscuro (text-red-800) siempre */
}

/* Asegurar que los enlaces del sub-footer mantengan el rojo en hover */
footer .text-red-800 a:hover,
body.dark-mode footer .text-red-800 a:hover,
.dark footer .text-red-800 a:hover {
  color: #dc2626 !important; /* Rojo más brillante en hover */
}

/* ==========================================================================
   PÁGINA NOSOTROS - TÍTULO PRINCIPAL ESPECÍFICO
   ========================================================================== */

/* Modo claro (sin .dark ni .dark-mode): forzar negro en el título principal */
#nosotros-title {
  color: #000000 !important;
}

/* Modo oscuro: forzar blanco en el título principal */
body.dark-mode #nosotros-title,
.dark #nosotros-title,
[data-theme="dark"] #nosotros-title {
  color: #ffffff !important;
}

/* ==========================================================================
   PLACEHOLDERS EN MODO OSCURO (GLOBAL)
   ========================================================================== */

/* Asegurar visibilidad de placeholders en modo oscuro en todos los formularios */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode select::placeholder,
.dark input::placeholder,
.dark textarea::placeholder,
.dark select::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] select::placeholder {
  color: #a3a3a3 !important; /* Gris claro, legible en fondo oscuro */
  opacity: 1; /* Evitar que el navegador reduzca la opacidad del placeholder */
}

/* Compatibilidad con distintos motores de navegador */
body.dark-mode input::-webkit-input-placeholder,
body.dark-mode textarea::-webkit-input-placeholder,
.dark input::-webkit-input-placeholder,
.dark textarea::-webkit-input-placeholder,
[data-theme="dark"] input::-webkit-input-placeholder,
[data-theme="dark"] textarea::-webkit-input-placeholder {
  color: #a3a3a3 !important;
  opacity: 1;
}

/* =========================================================================
   PÁGINA DE MOTOS PÚBLICAS - TÍTULOS Y NOMBRES EN BLANCO
   ========================================================================== */

/* Título principal "Nuestras Motos" en blanco */
body.dark-mode h1.text-black,
.dark h1.text-black,
[data-theme="dark"] h1.text-black {
  color: #ffffff !important;
}

/* Título de categoría "Motos Hero" en blanco */
body.dark-mode h2.text-gray-800,
.dark h2.text-gray-800,
[data-theme="dark"] h2.text-gray-800 {
  color: #ffffff !important;
}

/* Nombres de modelos de motos_privadas en las tarjetas en blanco */
body.dark-mode h3.text-black,
.dark h3.text-black,
[data-theme="dark"] h3.text-black {
  color: #ffffff !important;
}

/* Asegurar que todos los títulos en la página de motos_privadas sean blancos */
body.dark-mode .text-black,
.dark .text-black,
[data-theme="dark"] .text-black {
  color: #ffffff !important;
}

/* Títulos en modales de motos_privadas también en blanco */
body.dark-mode #modal-moto-modelo,
.dark #modal-moto-modelo,
[data-theme="dark"] #modal-moto-modelo {
  color: #ffffff !important;
}

/* ==========================================================================
   MEGA MENÚ DE MODELOS - MODO OSCURO
   ========================================================================== */

/* Contenedor principal del mega menú */
body.dark-mode #hero-mega-menu,
.dark #hero-mega-menu,
[data-theme="dark"] #hero-mega-menu {
  background-color: #0a0a0a !important; /* Casi negro para que se distinga del fondo */
  border-color: #262626 !important;
}

/* Texto general y encabezados dentro del menú */
body.dark-mode #hero-mega-menu .text-base,
body.dark-mode #hero-mega-menu .text-sky-900,
body.dark-mode #hero-mega-menu h4,
.dark #hero-mega-menu .text-base,
.dark #hero-mega-menu .text-sky-900,
.dark #hero-mega-menu h4,
[data-theme="dark"] #hero-mega-menu .text-base,
[data-theme="dark"] #hero-mega-menu .text-sky-900,
[data-theme="dark"] #hero-mega-menu h4 {
  color: #ffffff !important;
}

/* Botones de categoría y modelo */
body.dark-mode .hero-cat-tab,
body.dark-mode .hero-model-tab,
.dark .hero-cat-tab,
.dark .hero-model-tab,
[data-theme="dark"] .hero-cat-tab,
[data-theme="dark"] .hero-model-tab {
  color: #d4d4d4 !important; /* Gris claro para texto no seleccionado */
}

/* Estado hover/focus para los botones de tabs */
body.dark-mode .hero-cat-tab:hover,
body.dark-mode .hero-model-tab:hover,
body.dark-mode .hero-cat-tab:focus,
body.dark-mode .hero-model-tab:focus,
.dark .hero-cat-tab:hover,
.dark .hero-model-tab:hover,
.dark .hero-cat-tab:focus,
.dark .hero-model-tab:focus,
[data-theme="dark"] .hero-cat-tab:hover,
[data-theme="dark"] .hero-model-tab:hover,
[data-theme="dark"] .hero-cat-tab:focus,
[data-theme="dark"] .hero-model-tab:focus {
  background-color: #171717 !important; /* Gris muy oscuro */
  color: #ffffff !important;
}

/* Tab activo (cuando tiene la clase de fondo gris) */
body.dark-mode .hero-cat-tab.bg-gray-100,
body.dark-mode .hero-model-tab.bg-gray-100,
.dark .hero-cat-tab.bg-gray-100,
.dark .hero-model-tab.bg-gray-100,
[data-theme="dark"] .hero-cat-tab.bg-gray-100,
[data-theme="dark"] .hero-model-tab.bg-gray-100 {
  background-color: #262626 !important; /* Gris oscuro para el activo */
  color: #ffffff !important;
}


/* Enlaces y textos azules específicos (ej. "Ver todas", "Selecciona un modelo") */
body.dark-mode #hero-mega-menu .text-sky-700,
.dark #hero-mega-menu .text-sky-700,
[data-theme="dark"] #hero-mega-menu .text-sky-700 {
  color: #d4d4d4 !important;
}

body.dark-mode #hero-mega-menu .text-sky-700:hover,
.dark #hero-mega-menu .text-sky-700:hover,
[data-theme="dark"] #hero-mega-menu .text-sky-700:hover {
  color: #ffffff !important;
}

/* ==========================================================================
   REGLAS GLOBALES ADICIONALES - FORZAR TEXTO BLANCO EN MODO OSCURO
   ========================================================================== */

/* Sobrescribir todas las clases de texto negro de Tailwind en modo oscuro */
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-900 {
  color: #ffffff !important;
}

/* Asegurar que todos los h1, h2, h3, h4 con texto negro sean blancos */
body.dark-mode h1.text-gray-800,
body.dark-mode h2.text-gray-800,
body.dark-mode h3.text-gray-800,
body.dark-mode h4.text-gray-800,
html.dark h1.text-gray-800,
html.dark h2.text-gray-800,
html.dark h3.text-gray-800,
html.dark h4.text-gray-800,
html[data-theme="dark"] h1.text-gray-800,
html[data-theme="dark"] h2.text-gray-800,
html[data-theme="dark"] h3.text-gray-800,
html[data-theme="dark"] h4.text-gray-800 {
  color: #ffffff !important;
}

/* Forzar texto blanco en todas las tarjetas de motos_privadas */
body.dark-mode .bg-gray-50 h3,
body.dark-mode .bg-white h3,
html.dark .bg-gray-50 h3,
html.dark .bg-white h3,
html[data-theme="dark"] .bg-gray-50 h3,
html[data-theme="dark"] .bg-white h3 {
  color: #ffffff !important;
}

/* Específicamente para la página de motos_privadas - contenedor de motos_privadas */
body.dark-mode .min-h-screen h1,
body.dark-mode .min-h-screen h2,
body.dark-mode .min-h-screen h3,
html.dark .min-h-screen h1,
html.dark .min-h-screen h2,
html.dark .min-h-screen h3,
html[data-theme="dark"] .min-h-screen h1,
html[data-theme="dark"] .min-h-screen h2,
html[data-theme="dark"] .min-h-screen h3 {
  color: #ffffff !important;
}

/* ==========================================================================
   PÁGINA TRATAMIENTOS DE DATOS - BORDES BLANCOS EN MODO OSCURO
   ========================================================================== */

/* Forzar borde blanco en el contenedor principal de tratamientos de datos */
body.dark-mode article.border-black,
.dark article.border-black,
[data-theme="dark"] article.border-black {
  border-color: #ffffff !important;
}

/* Forzar borde blanco en separadores internos */
body.dark-mode section.border-t-2,
.dark section.border-t-2,
[data-theme="dark"] section.border-t-2 {
  border-top-color: #ffffff !important;
}

/* Asegurar que el badge de "Información importante" también tenga borde visible */
body.dark-mode .border-red-200,
.dark .border-red-200,
[data-theme="dark"] .border-red-200 {
  border-color: #7f1d1d !important; /* Rojo oscuro para contraste */
}

/* ==========================================================================
   PÁGINA TRATAMIENTOS DE DATOS - TÍTULOS Y SUBTÍTULOS
   ========================================================================== */

/* MODO CLARO: Asegurar que h3 y h5 sean negros */
h3.text-black,
h5.text-black {
  color: #000000 !important;
}

/* MODO OSCURO: Forzar h3 y h5 a blanco */
body.dark-mode h3.text-black,
body.dark-mode h5.text-black,
.dark h3.text-black,
.dark h5.text-black,
[data-theme="dark"] h3.text-black,
[data-theme="dark"] h5.text-black {
  color: #ffffff !important;
}

/* Asegurar que los párrafos y listas también tengan el color correcto */
body.dark-mode p.text-black,
body.dark-mode ul.text-black,
body.dark-mode li.text-black,
.dark p.text-black,
.dark ul.text-black,
.dark li.text-black,
[data-theme="dark"] p.text-black,
[data-theme="dark"] ul.text-black,
[data-theme="dark"] li.text-black {
  color: #ffffff !important;
}

/* ==========================================================================
   PÁGINA TALLERES - BORDES BLANCOS EN TARJETAS DE UBICACIONES
   ========================================================================== */

/* Forzar bordes blancos en las tarjetas de talleres en modo oscuro */
body.dark-mode .border-gray-200.border-2,
.dark .border-gray-200.border-2,
[data-theme="dark"] .border-gray-200.border-2 {
  border-color: #ffffff !important;
}

/* Mantener los colores de hover para cada sede */
body.dark-mode .hover\:border-red-500:hover,
.dark .hover\:border-red-500:hover,
[data-theme="dark"] .hover\:border-red-500:hover {
  border-color: #ef4444 !important;
}

body.dark-mode .hover\:border-green-500:hover,
.dark .hover\:border-green-500:hover,
[data-theme="dark"] .hover\:border-green-500:hover {
  border-color: #10b981 !important;
}

body.dark-mode .hover\:border-blue-500:hover,
.dark .hover\:border-blue-500:hover,
[data-theme="dark"] .hover\:border-blue-500:hover {
  border-color: #3b82f6 !important;
}

/* ==========================================================================
   CARRITO / DASHBOARD - MODO OSCURO
   ========================================================================== */

/* Contenedor principal del carrito */
body.dark-mode .max-w-6xl.bg-white,
.dark .max-w-6xl.bg-white,
[data-theme="dark"] .max-w-6xl.bg-white {
  background-color: #000000 !important;
  border-color: #ffffff !important;
}

/* Tarjetas de pedidos en modo oscuro */
body.dark-mode .pedido-card,
.dark .pedido-card,
[data-theme="dark"] .pedido-card {
  background-color: #171717 !important;
  border-color: #ffffff !important;
}

/* Inputs de búsqueda y fecha en modo oscuro */
body.dark-mode input[type="text"],
body.dark-mode input[type="date"],
body.dark-mode input[type="email"],
body.dark-mode textarea,
body.dark-mode select,
.dark input[type="text"],
.dark input[type="date"],
.dark input[type="email"],
.dark textarea,
.dark select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #171717 !important;
  color: #ffffff !important;
  border-color: #404040 !important;
}

/* Placeholder en inputs en modo oscuro */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
.dark input::placeholder,
.dark textarea::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #737373 !important;
}

/* Botones de filtro en modo oscuro */
body.dark-mode .filter-button.bg-gray-200,
.dark .filter-button.bg-gray-200,
[data-theme="dark"] .filter-button.bg-gray-200 {
  background-color: #404040 !important;
  color: #e5e5e5 !important;
}

body.dark-mode .filter-button.bg-gray-200:hover,
.dark .filter-button.bg-gray-200:hover,
[data-theme="dark"] .filter-button.bg-gray-200:hover {
  background-color: #525252 !important;
}

/* Sección de detalles de envío */
body.dark-mode .bg-gray-50,
.dark .bg-gray-50,
[data-theme="dark"] .bg-gray-50 {
  background-color: #0a0a0a !important;
}

/* Títulos y textos en tarjetas de pedidos */
body.dark-mode .pedido-card h2,
body.dark-mode .pedido-card h3,
body.dark-mode .pedido-card .font-semibold,
.dark .pedido-card h2,
.dark .pedido-card h3,
.dark .pedido-card .font-semibold,
[data-theme="dark"] .pedido-card h2,
[data-theme="dark"] .pedido-card h3,
[data-theme="dark"] .pedido-card .font-semibold {
  color: #ffffff !important;
}

/* Textos secundarios en tarjetas */
body.dark-mode .pedido-card .text-gray-500,
body.dark-mode .pedido-card .text-gray-600,
body.dark-mode .pedido-card .text-gray-700,
.dark .pedido-card .text-gray-500,
.dark .pedido-card .text-gray-600,
.dark .pedido-card .text-gray-700,
[data-theme="dark"] .pedido-card .text-gray-500,
[data-theme="dark"] .pedido-card .text-gray-600,
[data-theme="dark"] .pedido-card .text-gray-700 {
  color: #d4d4d4 !important;
}

/* Nombres de productos en modo oscuro */
body.dark-mode .pedido-card .font-medium.text-gray-800,
.dark .pedido-card .font-medium.text-gray-800,
[data-theme="dark"] .pedido-card .font-medium.text-gray-800 {
  color: #ffffff !important;
}

/* Cantidad de productos */
body.dark-mode .pedido-card .text-sm.text-gray-500,
.dark .pedido-card .text-sm.text-gray-500,
[data-theme="dark"] .pedido-card .text-sm.text-gray-500 {
  color: #a3a3a3 !important;
}

/* Etiqueta "Total:" y subtotal */
body.dark-mode .pedido-card .text-gray-700,
.dark .pedido-card .text-gray-700,
[data-theme="dark"] .pedido-card .text-gray-700 {
  color: #e5e5e5 !important;
}

/* Precio total in rojo */
body.dark-mode .pedido-card .text-red-600,
.dark .pedido-card .text-red-600,
[data-theme="dark"] .pedido-card .text-red-600 {
  color: #ef4444 !important;
}

/* Bordes internos en tarjetas */
body.dark-mode .border-gray-200,
.dark .border-gray-200,
[data-theme="dark"] .border-gray-200 {
  border-color: #404040 !important;
}

/* Timeline del pedido */
body.dark-mode .bg-gray-200,
.dark .bg-gray-200,
[data-theme="dark"] .bg-gray-200 {
  background-color: #404040 !important;
}

/* Botones de acción secundarios */
body.dark-mode .delete-order-button,
body.dark-mode .download-pdf-button,
.dark .delete-order-button,
.dark .download-pdf-button,
[data-theme="dark"] .delete-order-button,
[data-theme="dark"] .download-pdf-button {
  background-color: #404040 !important;
  color: #e5e5e5 !important;
}

body.dark-mode .delete-order-button:hover,
body.dark-mode .download-pdf-button:hover,
.dark .delete-order-button:hover,
.dark .download-pdf-button:hover,
[data-theme="dark"] .delete-order-button:hover,
[data-theme="dark"] .download-pdf-button:hover {
  background-color: #525252 !important;
}

/* Fondo de imágenes de productos */
body.dark-mode .bg-gray-100,
.dark .bg-gray-100,
[data-theme="dark"] .bg-gray-100 {
  background-color: #262626 !important;
}

/* Paginación */
body.dark-mode .pagination a,
body.dark-mode .pagination span,
.dark .pagination a,
.dark .pagination span,
[data-theme="dark"] .pagination a,
[data-theme="dark"] .pagination span {
  background-color: #404040 !important;
  color: #e5e5e5 !important;
}

/* Mensaje cuando no hay pedidos */
body.dark-mode .text-gray-300,
.dark .text-gray-300,
[data-theme="dark"] .text-gray-300 {
  color: #525252 !important;
}

/* ==========================================================================
   CHECKOUT / FINALIZAR COMPRA - MODO OSCURO
   ========================================================================== */

/* Contenedor principal del checkout */
body.dark-mode .bg-gray-100.min-h-screen,
.dark .bg-gray-100.min-hscreen,
[data-theme="dark"] .bg-gray-100.min-hscreen {
  background-color: #000000 !important;
}

/* Tarjetas del formulario y resumen */
body.dark-mode .bg-white.rounded-xl,
.dark .bg-white.rounded-xl,
[data-theme="dark"] .bg-white.rounded-xl {
  background-color: #171717 !important;
}

/* Títulos principales del checkout - MODO CLARO: negro */
h1.text-black {
  color: #000000 !important;
}

h2.text-gray-800 {
  color: #1f2937 !important; /* Gris muy oscuro (casi negro) */
}

/* Títulos principales del checkout - MODO OSCURO: blanco */
body.dark-mode h1.text-black,
body.dark-mode h2.text-gray-800,
.dark h1.text-black,
.dark h2.text-gray-800,
[data-theme="dark"] h1.text-black,
[data-theme="dark"] h2.text-gray-800 {
  color: #ffffff !important;
}

/* Subtítulos y secciones */
body.dark-mode h3.text-gray-700,
body.dark-mode h4.text-blue-900,
.dark h3.text-gray-700,
.dark h4.text-blue-900,
[data-theme="dark"] h3.text-gray-700,
[data-theme="dark"] h4.text-blue-900 {
  color: #e5e5e5 !important;
}

/* Labels de formulario */
body.dark-mode label.text-gray-700,
.dark label.text-gray-700,
[data-theme="dark"] label.text-gray-700 {
  color: #d4d4d4 !important;
}

/* Inputs, selects y textareas del formulario */
body.dark-mode #checkout-form input,
body.dark-mode #checkout-form select,
body.dark-mode #checkout-form textarea,
.dark #checkout-form input,
.dark #checkout-form select,
.dark #checkout-form textarea,
[data-theme="dark"] #checkout-form input,
[data-theme="dark"] #checkout-form select,
[data-theme="dark"] #checkout-form textarea {
  background-color: #0a0a0a !important;
  color: #ffffff !important;
  border-color: #404040 !important;
}

/* Placeholder en inputs del checkout */
body.dark-mode #checkout-form input::placeholder,
body.dark-mode #checkout-form textarea::placeholder,
.dark #checkout-form input::placeholder,
.dark #checkout-form textarea::placeholder,
[data-theme="dark"] #checkout-form input::placeholder,
[data-theme="dark"] #checkout-form textarea::placeholder {
  color: #737373 !important;
}

/* Textos de ayuda */
body.dark-mode .text-gray-500,
body.dark-mode .text-gray-600,
.dark .text-gray-500,
.dark .text-gray-600,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600 {
  color: #a3a3a3 !important;
}

/* Nombres de productos en el resumen - MODO CLARO: negro */
h3.text-gray-800,
.font-semibold.text-gray-800 {
  color: #1f2937 !important;
}

/* Nombres de productos en el resumen - MODO OSCURO: blanco */
body.dark-mode h3.text-gray-800,
body.dark-mode .font-semibold.text-gray-800,
.dark h3.text-gray-800,
.dark .font-semibold.text-gray-800,
[data-theme="dark"] h3.text-gray-800,
[data-theme="dark"] .font-semibold.text-gray-800 {
  color: #ffffff !important;
}

/* Cantidades y precios en el resumen - MODO CLARO: gris oscuro */
.text-sm.text-gray-600,
p.font-semibold {
  color: #4b5563 !important;
}

/* Cantidades y precios en el resumen - MODO OSCURO: gris claro */
body.dark-mode .text-sm.text-gray-600,
body.dark-mode p.font-semibold,
.dark .text-sm.text-gray-600,
.dark p.font-semibold,
[data-theme="dark"] .text-sm.text-gray-600,
[data-theme="dark"] p.font-semibold {
  color: #d4d4d4 !important;
}

/* Etiquetas "Productos", "Subtotal", "Total a pagar" - MODO CLARO: gris oscuro */
.text-gray-700 {
  color: #374151 !important;
}

span.text-gray-800 {
  color: #1f2937 !important;
}

/* Etiquetas "Productos", "Subtotal", "Total a pagar" - MODO OSCURO: gris claro */
body.dark-mode .text-gray-700,
body.dark-mode span.text-gray-800,
.dark .text-gray-700,
.dark span.text-gray-800,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] span.text-gray-800 {
  color: #e5e5e5 !important;
}

/* Total en rojo */
body.dark-mode .text-red-600,
body.dark-mode #total-final,
.dark .text-red-600,
.dark #total-final,
[data-theme="dark"] .text-red-600,
[data-theme="dark"] #total-final {
  color: #ef4444 !important;
}

/* Caja de información de envío */
body.dark-mode .bg-blue-50,
.dark .bg-blue-50,
[data-theme="dark"] .bg-blue-50 {
  background-color: #1e3a8a !important;
}

body.dark-mode .text-blue-900,
body.dark-mode .text-blue-800,
.dark .text-blue-900,
.dark .text-blue-800,
[data-theme="dark"] .text-blue-900,
[data-theme="dark"] .text-blue-800 {
  color: #93c5fd !important;
}

/* Bordes en modo oscuro */
body.dark-mode .border-gray-200,
.dark .border-gray-200,
[data-theme="dark"] .border-gray-200 {
  border-color: #404040 !important;
}

/* Fondo de imágenes placeholder */
body.dark-mode .bg-gray-200.flex.items-center.justify-center,
.dark .bg-gray-200.flex.items-center.justify-center,
[data-theme="dark"] .bg-gray-200.flex.items-center.justify-center {
  background-color: #262626 !important;
}

/* ==========================================================================
   LÍNEAS SEPARADORAS NAVBAR Y FOOTER - VISIBLES EN AMBOS MODOS
   ========================================================================== */

/* Navbar: línea inferior oscura en modo claro, blanca en modo oscuro */
nav.navbar-gradient,
.navbar-gradient {
  border-bottom: 2px solid #262626 !important; /* Línea oscura por defecto (modo claro) */
}

body.dark-mode nav.navbar-gradient,
body.dark-mode .navbar-gradient,
.dark nav.navbar-gradient,
.dark .navbar-gradient,
[data-theme="dark"] nav.navbar-gradient,
[data-theme="dark"] .navbar-gradient {
  border-bottom: 2px solid #ffffff !important; /* Línea blanca en modo oscuro */
}

/* Footer: línea superior oscura en modo claro, blanca en modo oscuro */
footer {
  border-top: 2px solid #262626 !important; /* Línea oscura por defecto (modo claro) */
}

body.dark-mode footer,
.dark footer,
[data-theme="dark"] footer {
  border-top: 2px solid #ffffff !important; /* Línea blanca en modo oscuro */
}

/* ==========================================================================
   PÁGINA HOME - LÍNEAS SEPARADORAS ENTRE SECCIONES
   ========================================================================== */

/* Líneas separadoras entre secciones del home */
/* Modo claro: líneas negras/gris oscuro */
.border-t-2.border-gray-800 {
  border-top-color: #1f2937 !important; /* Gris muy oscuro (casi negro) */
}

/* Modo oscuro: líneas blancas */
body.dark-mode .border-t-2.border-gray-800,
.dark .border-t-2.border-gray-800,
[data-theme="dark"] .border-t-2.border-gray-800 {
  border-top-color: #ffffff !important; /* Blanco puro */
}

/* Asegurar que las utilidades dark: de Tailwind también funcionen */
body.dark-mode .dark\:border-white,
html.dark .dark\:border-white,
[data-theme="dark"] .dark\:border-white {
  border-color: #ffffff !important;
}

/* ==========================================================================
   PÁGINA DE MOTOS (POSVENTA) - MODO OSCURO COMPLETO
   ========================================================================== */

/* Contenedor principal de motos_privadas */
body.dark-mode .min-h-screen.bg-white,
.dark .min-h-screen.bg-white,
[data-theme="dark"] .min-h-screen.bg-white {
  background-color: #000000 !important;
}

/* MODO CLARO: Asegurar que títulos sean negros */
h1.text-4xl,
h2.text-3xl,
h3.font-bold {
  color: #000000;
}

/* MODO OSCURO: Forzar títulos a blanco */
body.dark-mode h1.text-4xl,
body.dark-mode h2.text-3xl,
body.dark-mode h3.font-bold,
.dark h1.text-4xl,
.dark h2.text-3xl,
.dark h3.font-bold,
[data-theme="dark"] h1.text-4xl,
[data-theme="dark"] h2.text-3xl,
[data-theme="dark"] h3.font-bold {
  color: #ffffff !important;
}

/* MODO CLARO: Bordes negros en tarjetas de motos_privadas */
.bg-gray-50.rounded-lg.border-2 {
  border-color: #000000 !important;
}

/* MODO OSCURO: Tarjetas de motos_privadas con fondo oscuro y borde blanco */
body.dark-mode .bg-gray-50.rounded-lg,
.dark .bg-gray-50.rounded-lg,
[data-theme="dark"] .bg-gray-50.rounded-lg {
  background-color: #171717 !important;
  border-color: #ffffff !important;
}

/* MODO CLARO: Borde negro en el modal */
#moto-modal > div.border-2 {
  border-color: #000000 !important;
}

/* MODAL DE MOTOS - Fondo oscuro */
body.dark-mode #moto-modal,
.dark #moto-modal,
[data-theme="dark"] #moto-modal {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

/* MODAL - Contenedor principal con fondo oscuro y borde blanco en modo oscuro */
body.dark-mode #moto-modal > div,
.dark #moto-modal > div,
[data-theme="dark"] #moto-modal > div {
  background-color: #171717 !important;
  border-color: #ffffff !important;
}

/* MODAL - Sección superior del modal */
body.dark-mode #moto-modal .bg-white,
.dark #moto-modal .bg-white,
[data-theme="dark"] #moto-modal .bg-white {
  background-color: #171717 !important;
}

/* MODAL - Título del modal */
body.dark-mode #modal-moto-modelo,
.dark #modal-moto-modelo,
[data-theme="dark"] #modal-moto-modelo {
  color: #ffffff !important;
}

/* MODAL - Textos descriptivos */
body.dark-mode #moto-modal .text-gray-500,
body.dark-mode #moto-modal .text-gray-800,
.dark #moto-modal .text-gray-500,
.dark #moto-modal .text-gray-800,
[data-theme="dark"] #moto-modal .text-gray-500,
[data-theme="dark"] #moto-modal .text-gray-800 {
  color: #d4d4d4 !important;
}

/* MODAL - Precios en rojo */
body.dark-mode #moto-modal .text-red-600,
.dark #moto-modal .text-red-600,
[data-theme="dark"] #moto-modal .text-red-600 {
  color: #ef4444 !important;
}

/* MODAL - Sección inferior del modal (footer) */
body.dark-mode #moto-modal .bg-gray-50,
.dark #moto-modal .bg-gray-50,
[data-theme="dark"] #moto-modal .bg-gray-50 {
  background-color: #0a0a0a !important;
}

/* MODAL - Botón cerrar (X) */
body.dark-mode .close-modal-btn,
.dark .close-modal-btn,
[data-theme="dark"] .close-modal-btn {
  color: #d4d4d4 !important;
}

body.dark-mode .close-modal-btn:hover,
.dark .close-modal-btn:hover,
[data-theme="dark"] .close-modal-btn:hover {
  color: #ffffff !important;
}

/* MODAL - Botón "Cotizar Moto" */
body.dark-mode #modal-comprar-btn,
.dark #modal-comprar-btn,
[data-theme="dark"] #modal-comprar-btn {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

body.dark-mode #modal-comprar-btn:hover,
.dark #modal-comprar-btn:hover,
[data-theme="dark"] #modal-comprar-btn:hover {
  background-color: #b91c1c !important;
}

/* Textos dentro de las tarjetas de motos_privadas - MODO CLARO negro */
.bg-gray-50 .text-black,
.bg-gray-50 h3 {
  color: #000000;
}

/* Textos dentro de las tarjetas de motos_privadas - MODO OSCURO blanco */
body.dark-mode .bg-gray-50 .text-black,
body.dark-mode .bg-gray-50 h3,
.dark .bg-gray-50 .text-black,
.dark .bg-gray-50 h3,
[data-theme="dark"] .bg-gray-50 .text-black,
[data-theme="dark"] .bg-gray-50 h3 {
  color: #ffffff !important;
}

body.dark-mode .bg-gray-50 .text-gray-600,
.dark .bg-gray-50 .text-gray-600,
[data-theme="dark"] .bg-gray-50 .text-gray-600 {
  color: #d4d4d4 !important;
}

body.dark-mode .bg-gray-50 .text-red-600,
.dark .bg-gray-50 .text-red-600,
[data-theme="dark"] .bg-gray-50 .text-red-600 {
  color: #ef4444 !important;
}

/* Placeholder "Sin imagen" en modo oscuro */
body.dark-mode .bg-gray-200.flex.items-center,
.dark .bg-gray-200.flex.items-center,
[data-theme="dark"] .bg-gray-200.flex.items-center {
  background-color: #262626 !important;
  color: #737373 !important;
}

/* ==========================================================================
   CARRITO - RESUMEN (CUADRO DERECHO) - MODO OSCURO
   ========================================================================== */

/* Fondo del contenedor principal del carrito */
body.dark-mode .carrito-page-bg {
  background: #000000 !important;
}

/* Tarjeta de resumen */
body.dark-mode .summary-card {
  background: #111827 !important; /* gris muy oscuro */
  border-color: #ef4444 !important; /* rojo visible */
}

/* Título "Resumen" - MODO CLARO: negro para ser visible */
.summary-card h2 {
  color: #000000 !important;
}

/* Título "Resumen" - MODO OSCURO: blanco como ya funcionaba */
body.dark-mode .summary-card h2,
body.dark-mode .summary-card h2 span,
body.dark-mode .summary-card h2 i,
.dark .summary-card h2,
[data-theme="dark"] .summary-card h2 {
  color: #ffffff !important;
}

/* Filas de Productos y Subtotal */
body.dark-mode .summary-card .resumen-label,
body.dark-mode .summary-card .resumen-label i {
  color: #e5e5e5 !important;
}

/* ==========================================================================
   CARRITO - RESUMEN (Valores numéricos claros en modo claro y blancos en oscuro)
   ========================================================================== */

/* Modo claro: forzar texto negro para los valores del resumen del carrito */
.resumen-value,
.resumen-total-value,
#cart-item-count,
#cart-subtotal,
#cart-total {
  color: #000000 !important;
}

/* Modo oscuro: forzar texto blanco para los valores del resumen del carrito */
body.dark-mode .resumen-value,
body.dark-mode .resumen-total-value,
body.dark-mode #cart-item-count,
body.dark-mode #cart-subtotal,
body.dark-mode #cart-total,
.dark .resumen-value,
.dark .resumen-total-value,
.dark #cart-item-count,
.dark #cart-subtotal,
.dark #cart-total,
[data-theme="dark"] .resumen-value,
[data-theme="dark"] .resumen-total-value,
[data-theme="dark"] #cart-item-count,
[data-theme="dark"] #cart-subtotal,
[data-theme="dark"] #cart-total {
  color: #ffffff !important;
}

/* ==========================================================================
   CARRITO - CONTADOR DE CANTIDAD DE PRODUCTOS
   ========================================================================== */

/* Modo claro: números de cantidad en negro para que sean visibles */
.quantity-display {
  color: #000000 !important;
}

/* Modo oscuro: números de cantidad en blanco */
body.dark-mode .quantity-display,
.dark .quantity-display,
[data-theme="dark"] .quantity-display {
  color: #000000 !important;
}

/* Botones de cantidad (+ y -) - Modo claro: gris oscuro */
.quantity-btn {
  color: #1f2937 !important; /* Gris muy oscuro, casi negro */
}

.quantity-btn i {
  color: #1f2937 !important;
}

/* Botones de cantidad (+ y -) - Modo oscuro: blanco para visibilidad */
body.dark-mode .quantity-btn,
body.dark-mode .quantity-btn i,
.dark .quantity-btn,
.dark .quantity-btn i,
[data-theme="dark"] .quantity-btn,
[data-theme="dark"] .quantity-btn i {
  color: #000000 !important;
}

/* Hover en los botones - mantener el efecto rojo */
.quantity-btn:hover,
body.dark-mode .quantity-btn:hover,
.dark .quantity-btn:hover,
[data-theme="dark"] .quantity-btn:hover {
  background-color: #dc2626 !important;
  color: #000000 !important;
}

.quantity-btn:hover i,
body.dark-mode .quantity-btn:hover i,
.dark .quantity-btn:hover i,
[data-theme="dark"] .quantity-btn:hover i {
  color: #000000 !important;
}