/* Darkmode CSS para welcome.blade.php */

/* Estilos generales */
body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Header y navbar */
.hero-area {
    background-color: #000000 !important;
}

.overlay span {
    background-color: #222222 !important;
}

.navbar {
    background-color: #000000 !important;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1) !important;
}

/* Asegurar que el navbar mantiene el estilo oscuro al hacer scroll */
.menu-bg {
    background: #000000 !important;
    background: linear-gradient(95deg, #000000 40%, #222222 100%) !important;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1) !important;
}

.menu-bg .logo-menu a {
    color: #ffffff !important;
}

.menu-bg .navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-brand img {
    filter: brightness(1.2) contrast(1.2);
}

.nav-link {
    color: #ffffff !important;
}

.nav-link:hover {
    color: #cccccc !important;
}

/* Secciones */
.section {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.section.bg-gray {
    background-color: #111111 !important;
}

.section-title {
    color: #ffffff !important;
}

.section-header {
    border-color: #333333 !important;
}

.desc-text p {
    color: #cccccc !important;
}

/* Elementos de contenido */
.contents h2 {
    color: #ffffff !important;
}

.contents p {
    color: #cccccc !important;
}

.business-item-info h3 {
    color: #ffffff !important;
}

.business-item-info p, .business-item-info ul li {
    color: #cccccc !important;
}

/* Botones */
.btn-common {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

.btn-common:hover {
    background-color: #444444 !important;
}

.btn-border-filled {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

.btn-border-filled:hover {
    background-color: #444444 !important;
}

.btn-info {
    background-color: #333333 !important;
    border-color: #444444 !important;
    color: #ffffff !important;
}

.btn-info:hover {
    background-color: #444444 !important;
}

/* Iconos */
.lni-checkmark {
    color: #ffffff !important;
}

.lni {
    color: #ffffff !important;
}

.fa, .fas, .far, .fab {
    color: #ffffff !important;
}

/* Imágenes */
.img-fluid {
    filter: grayscale(100%) !important;
}

.intro-img img {
    filter: grayscale(100%) !important;
}

.business-item-img img {
    filter: grayscale(100%) !important;
}

/* Footer */
footer {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-top: 1px solid #333333 !important;
}

footer a {
    color: #cccccc !important;
}

footer a:hover {
    color: #ffffff !important;
}

/* Modal */
.modal-content {
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

.modal-header {
    border-bottom: 1px solid #333333 !important;
}

.modal-footer {
    border-top: 1px solid #333333 !important;
}

.close {
    color: #ffffff !important;
}

/* Formularios */
input, textarea, select {
    background-color: #222222 !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}

input::placeholder, textarea::placeholder {
    color: #aaaaaa !important;
}

/* Elementos adicionales */
.card {
    background-color: #111111 !important;
    border: 1px solid #333333 !important;
}

.card-header {
    background-color: #222222 !important;
    border-bottom: 1px solid #333333 !important;
}

.card-footer {
    background-color: #222222 !important;
    border-top: 1px solid #333333 !important;
}

/* Sobrescribir cualquier color específico */
* {
    border-color: #333333 !important;
}

/* Asegurar que los enlaces sean visibles */
a {
    color: #cccccc !important;
}

a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Eliminar cualquier fondo de color */
[class*="bg-"] {
    background-color: #111111 !important;
}

/* Asegurar que los textos sean legibles */
[class*="text-"] {
    color: #ffffff !important;
}

/* Ajustes para tablas */
table {
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

th, td {
    border-color: #333333 !important;
}

/* Ajustes para listas */
ul, ol {
    color: #cccccc !important;
}