/* Establece el tamaño base de la fuente */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Aplicar tema inmediatamente sin transición inicial */
html[data-theme="dark"],
html.dark-preload {
    background-color: #2b2b2b !important;
    color: #f5f5f5 !important;
}

html[data-theme="light"] {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Estilo de enfoque para botones y otros elementos interactivos */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Ajustes para asegurar que la página ocupe todo el alto de la pantalla */
html {
    position: relative;
    min-height: 100%;
}

/* === 🌙 Modo oscuro === */
body.dark-mode {
    background-color: #2b2b2b;
    color: #f5f5f5;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    /* Estilos para los elementos del navbar en modo oscuro */
    body.dark-mode #mainNavbar {
        background-color: #1f1f1f !important;
        border-bottom: 1px solid #444 !important;
    }

    /* Estilos para los enlaces del navbar en modo oscuro */
    body.dark-mode a,
    body.dark-mode .nav-link {
        color: #f5f5f5 !important;
    }

    /* Estilo para la zona del contenedor en modo oscuro */
    body.dark-mode .container {
        background-color: #2b2b2b !important;
    }

    /* Estilos para las tarjetas en modo oscuro */
    body.dark-mode .card {
        background-color: #3a3a3a !important;
        color: #fff !important;
    }

    /* === Contraste de texto en modo oscuro === */
    body.dark-mode .text-dark,
    body.dark-mode .text-muted,
    body.dark-mode .navbar-light .navbar-nav .nav-link {
        color: #f5f5f5 !important;
    }

    /* Estilos de tablas en modo oscuro */
    body.dark-mode table {
        background-color: #2b2b2b;
        color: #fff;
    }

    body.dark-mode th,
    body.dark-mode td {
        color: #fff;
    }

    /* Estilos de inputs, selects y textareas en modo oscuro */
    body.dark-mode label,
    body.dark-mode input,
    body.dark-mode select,
    body.dark-mode textarea {
        color: #fff !important;
        background-color: #3a3a3a !important;
        border-color: #555 !important;
    }

/* === Botón modo oscuro/claro consistente === */
.btn-theme {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    .btn-theme i {
        font-size: 1.2rem;
        line-height: 1;
        color: #444;
    }

    .btn-theme:hover {
        background-color: rgba(0, 0, 0, 0.08);
        transform: scale(1.05);
    }

/* Estilo del botón en modo oscuro */
body.dark-mode .btn-theme {
    background-color: transparent;
}

    body.dark-mode .btn-theme:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    body.dark-mode .btn-theme i {
        color: #f5f5f5;
    }

/* Estilos de icono del sol */
.btn-theme i.fa-sun {
    color: #ffcc00;
}

/* === Ajustes para texto y cabeceras en modo oscuro === */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode th {
    color: #ffffff !important;
}

/* Estilo para las cabeceras de tablas en modo oscuro */
body.dark-mode .table thead th {
    background-color: #444 !important;
    color: #ffffff !important;
}

/* Estilo de filas alternas en tablas */
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #333 !important;
}

/* Estilo de botones primarios en modo oscuro */
body.dark-mode .btn-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

/* === Contraste de tarjetas y listas (modo oscuro) === */
body.dark-mode .card {
    background-color: #2b2b2b !important;
    color: #eaeaea !important;
    border-color: #444 !important;
}

/* Cabeceras de tarjetas en modo oscuro */
body.dark-mode .card-header,
body.dark-mode .card-header.bg-light {
    background-color: #303030 !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

    /* Títulos y subtítulos dentro de la card */
    body.dark-mode .card-header .fw-bold,
    body.dark-mode .card-header h5,
    body.dark-mode .template-card h5 {
        color: #ffffff !important;
    }

/* Estilo de la lista de categorías */
body.dark-mode .list-group-item {
    background-color: #2b2b2b !important;
    color: #eaeaea !important;
    border-color: #444 !important;
}

    /* Estilo de las listas dentro de la card */
    body.dark-mode .list-group-item strong {
        color: #ffffff !important;
    }

    body.dark-mode .list-group-item .text-muted {
        color: #c9c9c9 !important;
    }

/* Estilo de badges y botones outline */
body.dark-mode .badge.bg-secondary {
    background-color: #555 !important;
    color: #fff !important;
}

body.dark-mode .btn-outline-primary {
    color: #9ec5fe !important;
    border-color: #9ec5fe !important;
}

body.dark-mode .btn-outline-danger {
    color: #f5b5b5 !important;
    border-color: #f5b5b5 !important;
}

/* Placeholder del buscador */
body.dark-mode ::placeholder {
    color: #bdbdbd !important;
}

/* === Color neutro del icono para ambos modos === */
.btn-theme i {
    color: #444;
}

body.dark-mode .btn-theme i {
    color: #f5f5f5;
}

/* === Paginación modo oscuro === */
body.dark-mode .pagination {
    background-color: transparent !important;
}

body.dark-mode .page-item .page-link {
    background-color: #2b2b2b !important;
    color: #f5f5f5 !important;
    border-color: #555 !important;
}

body.dark-mode .page-item.active .page-link {
    background-color: #0d6efd !important;
    color: #fff !important;
    border-color: #0d6efd !important;
}

body.dark-mode .page-item.disabled .page-link {
    background-color: #1f1f1f !important;
    color: #777 !important;
    border-color: #444 !important;
}

/* === Modo claro === */
body:not(.dark-mode) {
    background-color: #ffffff !important;
    color: #212529 !important;
}

    body:not(.dark-mode) .card,
    body:not(.dark-mode) .container,
    body:not(.dark-mode) table,
    body:not(.dark-mode) input,
    body:not(.dark-mode) select,
    body:not(.dark-mode) textarea {
        background-color: #ffffff !important;
        color: #212529 !important;
        border-color: #dee2e6 !important;
    }

    body:not(.dark-mode) .navbar,
    body:not(.dark-mode) .card-header,
    body:not(.dark-mode) .list-group-item {
        background-color: #f8f9fa !important;
        color: #212529 !important;
        border-color: #dee2e6 !important;
    }
/* Asegúrate de que los inputs, selects y textareas también tengan el fondo oscuro */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #3a3a3a !important;
    color: #f5f5f5 !important;
    border-color: #555 !important;
}

/* También es importante que las tarjetas y elementos dentro de ellas tengan el fondo oscuro */
body.dark-mode .card,
body.dark-mode .container {
    background-color: #2b2b2b !important;
    color: #fff !important;
}

/* Estilo para el navbar y otras áreas de encabezado en modo oscuro */
body.dark-mode #mainNavbar {
    background-color: #1f1f1f !important;
    border-bottom: 1px solid #444 !important;
}

body.dark-mode .nav-link {
    color: #f5f5f5 !important;
}

/* Estilo para las tablas en modo oscuro */
body.dark-mode table {
    background-color: #333 !important;
    color: #f5f5f5 !important;
}

body.dark-mode th,
body.dark-mode td {
    color: #f5f5f5 !important;
}

/* Asegurarte de que los botones también tengan el fondo oscuro */
body.dark-mode .btn {
    background-color: #444 !important;
    color: #fff !important;
    border-color: #555 !important;
}

    body.dark-mode .btn:hover {
        background-color: #555 !important;
    }
/* Asegurar que los campos dentro de las tarjetas también tengan el fondo oscuro */
body.dark-mode .card,
body.dark-mode .container {
    background-color: #2b2b2b !important;
    color: #fff !important;
}

    /* Fondo oscuro y colores adecuados en los elementos de definición (dl, dt, dd) */
    body.dark-mode .card dl dt,
    body.dark-mode .card dl dd {
        color: #f5f5f5 !important; /* Aseguramos que el texto se vea bien en el modo oscuro */
    }

    body.dark-mode .card dl dt {
        background-color: #333 !important; /* Fondo oscuro para las definiciones */
    }

/* Estilo para los inputs, selects y textareas dentro de las cards en modo oscuro */
body.dark-mode .form-control,
body.dark-mode .form-check-input,
body.dark-mode .form-select {
    background-color: #3a3a3a !important;
    color: #fff !important;
    border-color: #555 !important;
}

/* Estilos para las tablas dentro de las tarjetas en modo oscuro */
body.dark-mode table {
    background-color: #333 !important;
    color: #f5f5f5 !important;
}

body.dark-mode th,
body.dark-mode td {
    color: #f5f5f5 !important;
    border-color: #555 !important; /* Asegura que las tablas tengan borde adecuado en el modo oscuro */
}

/* Asegurar que el fondo de los botones y enlaces se mantenga coherente en modo oscuro */
body.dark-mode .btn,
body.dark-mode .btn-outline-success {
    background-color: #444 !important;
    color: #fff !important;
    border-color: #555 !important;
}

/* Estilo para los enlaces y botones en el navbar */
body.dark-mode .navbar {
    background-color: #1f1f1f !important;
    border-bottom: 1px solid #444 !important;
}

    body.dark-mode .navbar .nav-link {
        color: #f5f5f5 !important;
    }

/* Estilo para las observaciones en modo oscuro */
body.dark-mode .bg-light {
    background-color: #444 !important;
    color: #fff !important;
}

/* Estilo para las badges en modo oscuro */
body.dark-mode .badge {
    color: #fff !important;
}

    body.dark-mode .badge.bg-secondary {
        background-color: #555 !important;
    }

    body.dark-mode .badge.bg-info {
        background-color: #0d6efd !important;
    }

    body.dark-mode .badge.bg-success {
        background-color: #28a745 !important;
    }

    body.dark-mode .badge.bg-warning {
        background-color: #ffc107 !important;
    }

/* Estilo de los iconos en el modo oscuro */
/*body.dark-mode .fas {
    color: #fff !important;
}*/
/* Asegurarse de que todos los formularios hereden el fondo oscuro */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea {
    background-color: #3a3a3a !important;
    color: #f5f5f5 !important;
    border-color: #555 !important;
}

/* Fondo oscuro en las secciones de texto (como divs, etc.) */
body.dark-mode .card-body,
body.dark-mode .container,
body.dark-mode .row {
    background-color: #2b2b2b !important;
    color: #fff !important;
}

/* Para los títulos dentro de las tarjetas y secciones */
body.dark-mode h4,
body.dark-mode h2,
body.dark-mode h5 {
    color: #f5f5f5 !important;
}

/* Estilos de los botones de acción en modo oscuro */
body.dark-mode .btn {
    background-color: #444 !important;
    color: #fff !important;
    border-color: #555 !important;
}

body.dark-mode .btn:hover {
    background-color: #555 !important;
}

/* Estilo para los iconos dentro de los formularios y botones */
body.dark-mode .fas {
    color: #fff !important;
}
/* Asegurarse de que todos los formularios hereden el fondo oscuro */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea {
    background-color: #3a3a3a !important;
    color: #f5f5f5 !important;
    border-color: #555 !important;
}

/* Fondo oscuro en las secciones de texto (como divs, etc.) */
body.dark-mode .card-body,
body.dark-mode .container,
body.dark-mode .row {
    background-color: #2b2b2b !important;
    color: #fff !important;
}

/* Para los títulos dentro de las tarjetas y secciones */
body.dark-mode h4,
body.dark-mode h2,
body.dark-mode h5 {
    color: #f5f5f5 !important;
}

/* Estilos de los botones de acción en modo oscuro */
body.dark-mode .btn {
    background-color: #444 !important;
    color: #fff !important;
    border-color: #555 !important;
}

    body.dark-mode .btn:hover {
        background-color: #555 !important;
    }

/* Estilo para los iconos dentro de los formularios y botones */
body.dark-mode .fas {
    color: #fff !important;
}
/* Etiquetas de los formularios y elementos de definición */
body.dark-mode .form-label {
    color: #f5f5f5 !important; /* Asegura que el texto de las etiquetas sea visible */
}

body.dark-mode dl dt,
body.dark-mode dl dd {
    color: #f5f5f5 !important; /* Colores de las definiciones en la lista */
}

body.dark-mode .form-check-input {
    background-color: #444 !important;
    border-color: #555 !important;
}
/* Estilo para el área de observaciones y otras secciones de texto */
body.dark-mode .form-control:focus,
body.dark-mode textarea {
    background-color: #3a3a3a !important;
    color: #f5f5f5 !important;
    border-color: #555 !important;
}

body.dark-mode .bg-light {
    background-color: #444 !important; /* Fondo oscuro para las zonas de texto */
    color: #f5f5f5 !important;
}
/* Estilo para las categorías con valor "Sí" en modo oscuro */
body.dark-mode .table-warning,
body.dark-mode .category-yes {
    background-color: #f39c12 !important; /* Naranja brillante para 'Sí' */
    color: #ffffff !important; /* Texto blanco para garantizar contraste */
    border-color: #e67e22 !important; /* Borde de color más oscuro */
}


/* Para las categorías que no tienen una respuesta 'Sí' o 'No', usar un color neutro */
body.dark-mode .category-general {
    background-color: #7f8c8d !important; /* Gris neutro */
    color: #ffffff !important; /* Texto blanco */
    border-color: #95a5a6 !important; /* Borde gris claro */
}

/* Asegurar que el fondo de las celdas y filas de categorías también tenga buen contraste */
body.dark-mode .category-container {
    background-color: #333 !important; /* Fondo oscuro para la zona que contiene las categorías */
    color: #f5f5f5 !important; /* Aseguramos que el texto sea claro */
}
/* Estilo para categorías con valor 'Sí' o 'SÍ' en modo oscuro */
body.dark-mode .table-warning,
body.dark-mode .category-yes {
    background-color: #f39c12 !important; /* Naranja brillante para 'Sí' */
    color: #ffffff !important; /* Texto blanco para garantizar contraste */
    border-color: #e67e22 !important; /* Borde de color más oscuro */
}

/* Si la categoría tiene otro valor (no 'Sí' ni 'No'), usa un gris neutro */
body.dark-mode .category-general {
    background-color: #7f8c8d !important; /* Gris neutro */
    color: #ffffff !important; /* Texto blanco */
    border-color: #95a5a6 !important; /* Borde gris claro */
}

/* Asegurar que el fondo de las celdas y filas de categorías también tenga buen contraste */
body.dark-mode .category-container {
    background-color: #333 !important; /* Fondo oscuro para la zona que contiene las categorías */
    color: #f5f5f5 !important; /* Aseguramos que el texto sea claro */
}

/* Cambiar color del fondo y del "tic" cuando el checkbox está marcado */

/* Para checkboxes marcados en modo claro */
input[type="checkbox"]:checked {
    background-color: #ae2aff !important; /* Rojo para el fondo del checkbox */
    border-color: #ae2aff !important; /* Rojo para el borde */
}

    input[type="checkbox"]:checked::before {
        color: white !important; /* Cambiar el color del "tic" a blanco */
    }

/* Para checkboxes marcados en modo oscuro */
body.dark-mode input[type="checkbox"]:checked {
    background-color: #ae2aff !important; /* Rojo para el fondo en modo oscuro */
    border-color: #ae2aff !important; /* Rojo para el borde en modo oscuro */
}

    /* Para asegurarnos que el "tic" también se vea bien en modo oscuro */
    body.dark-mode input[type="checkbox"]:checked::before {
        color: white !important; /* Cambiar el color del "tic" a blanco en modo oscuro */
    }

/* Aseguramos que el estado de los checkboxes sin marcar tenga visibilidad en ambos fondos */
input[type="checkbox"]:not(:checked) {
    border-color: #999 !important; /* Borde gris claro para checkboxes sin marcar */
}

/* Asegurar el contraste del fondo del checkbox en modo oscuro */
body.dark-mode input[type="checkbox"]:not(:checked) {
    background-color: #333 !important; /* Fondo oscuro para checkboxes no marcados */
    border-color: #555 !important; /* Borde gris oscuro en modo oscuro */
}