/* Estilos para el modo oscuro */

/* Fondo general */
body.dark {
    background-color: #1e1e1e !important; /* Gris oscuro */
}

/* Fondo de secciones */
body.dark .servicios,
body.dark .nosotros,
body.dark .contacto {
    background-color: #1e1e1e !important; /* Gris oscuro */
}

/* Fondo del bottom sheet */
body.dark .bottom-sheet {
    background-color: #2c2c2c !important; /* Gris oscuro más claro */
}

/* Fondo de tarjetas de servicios */
body.dark .tarjeta {
    background-color: #2c2c2c !important; /* Gris oscuro más claro */
}

/* Fondo de tarjeta de reseñas */
body.dark .nosotros-tarjeta-resenas {
    background-color: #2c2c2c !important; /* Gris oscuro más claro */
}

/* Sombras ajustadas (25% más de opacidad) */
body.dark .navbar {
    box-shadow: 0 4px 10px rgba(8, 165, 255, 0.5) !important; /* Aumentado de 0.4 */
}

body.dark .boton-contacto {
    box-shadow: 0 6px 15px rgba(8, 165, 255, 0.625) !important; /* Aumentado de 0.5 */
}

body.dark .boton-contacto:hover {
    box-shadow: 0 8px 25px rgba(8, 165, 255, 0.875) !important; /* Aumentado de 0.7 */
}

body.dark .bottom-sheet {
    box-shadow: 0 8px 25px rgba(8, 165, 255, 0.625) !important; /* Aumentado de 0.5 */
}

body.dark .bottom-sheet-button:hover {
    box-shadow: 0 6px 20px rgba(8, 165, 255, 0.75) !important; /* Aumentado de 0.6 */
}

body.dark .tarjeta:hover,
body.dark .tarjeta:active {
    box-shadow: 0 4px 20px rgba(8, 165, 255, 0.675) !important; /* Aumentado de 0.54 */
}

body.dark .nosotros-tarjeta {
    box-shadow: 0 6px 15px rgba(8, 165, 255, 0.625) !important; /* Aumentado de 0.5 */
}

body.dark .nosotros-tarjeta:hover,
body.dark .nosotros-tarjeta:active {
    box-shadow: 0 8px 40px rgba(8, 165, 255, 1.25) !important; /* Aumentado de 1.0 */
}

body.dark .contacto-mapa {
    box-shadow: 0 4px 15px rgba(8, 165, 255, 0.375) !important; /* Aumentado de 0.3 */
}

body.dark .contacto-boton-mapa:hover,
body.dark .contacto-boton-mapa:active {
    box-shadow: 0 6px 20px rgba(8, 165, 255, 0.75) !important; /* Aumentado de 0.6 */
}

body.dark .contacto-boton:hover,
body.dark .contacto-boton:active {
    box-shadow: 0 6px 20px rgba(8, 165, 255, 0.75) !important; /* Aumentado de 0.6 */
}

/* Textos en blanco */
body.dark p,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark span,
body.dark a,
body.dark .navbar-link,
body.dark .servicios-titulo,
body.dark .tarjeta-titulo,
body.dark .tarjeta-descripcion,
body.dark .nosotros-resenas-titulo,
body.dark .resena-autor,
body.dark .resena p,
body.dark .contacto-texto-guia,
body.dark .bottom-sheet-textfield,
body.dark .bottom-sheet-button,
body.dark .contacto-boton,
body.dark .contacto-boton-mapa {
    color: white !important;
}

/* Íconos en blanco */
body.dark .tarjeta-icono,
body.dark .bottom-sheet-icono,
body.dark .contacto-icono,
body.dark .boton-contacto-icono,
body.dark .boton-darkmode-icono {
    fill: white !important;
    stroke: white !important;
}

/* Placeholder del textfield */
body.dark .bottom-sheet-textfield::placeholder {
    color: #ccc !important; /* Gris claro para el placeholder */
}

/* Fondo del textfield */
body.dark .bottom-sheet-textfield {
    background-color: #333 !important; /* Gris oscuro más claro */
    border-color: #555 !important; /* Borde gris oscuro */
}