/* ========================================================================= */
/* MODO OSCURO GLOBAL - PLATAFORMA CONSTANCIAS TESCHI                        */
/* ========================================================================= */

/* Evitar que aparezca la línea de escritura (caret) al dar clic en textos normales */
*:not(input):not(textarea):not([contenteditable="true"]) {
    caret-color: transparent;
}
input, textarea, [contenteditable="true"] {
    caret-color: auto;
}

.btn-dark-mode-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(0, 126, 51, 0.35);
    background: #ffffff;
    color: #007E33;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    padding: 0;
    font-size: 1.05rem;
}

.btn-dark-mode-toggle:hover {
    background: #007E33;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 126, 51, 0.25);
}

html.dark-mode .btn-dark-mode-toggle,
body.dark-mode .btn-dark-mode-toggle {
    background: #1e293b !important;
    color: #fbbf24 !important;
    border-color: #475569 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}

html.dark-mode .btn-dark-mode-toggle:hover,
body.dark-mode .btn-dark-mode-toggle:hover {
    background: #334155 !important;
    color: #fde047 !important;
}

/* Fondos Generales */
html.dark-mode,
html.dark-mode body,
body.dark-mode {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

html.dark-mode #page-content-wrapper,
html.dark-mode #wrapper,
html.dark-mode section,
html.dark-mode #billboard,
html.dark-mode #company-services,
html.dark-mode #yearly-sale,
html.dark-mode #testimonials {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Superficies y Contenedores */
html.dark-mode header#header,
html.dark-mode .site-header,
html.dark-mode .navbar-custom,
html.dark-mode #sidebar-wrapper,
html.dark-mode .offcanvas,
html.dark-mode footer#footer {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html.dark-mode .card,
html.dark-mode .card-chart,
html.dark-mode .card-custom,
html.dark-mode .feature-card,
html.dark-mode .course-card,
html.dark-mode .card-curso,
html.dark-mode .form-container,
html.dark-mode .modal-content,
html.dark-mode .dropdown-menu,
html.dark-mode .list-group-item,
html.dark-mode .cell-card,
html.dark-mode .group-selector {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html.dark-mode .card-header,
html.dark-mode .card-header-custom,
html.dark-mode .modal-footer,
html.dark-mode .illustration-column,
html.dark-mode .cell-empty .cell-header {
    background-color: #172033 !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html.dark-mode .modal-body {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Clases utilitarias de Bootstrap en modo oscuro */
html.dark-mode .bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

html.dark-mode .bg-light {
    background-color: #172033 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .text-dark,
html.dark-mode .text-black,
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode .course-card h5,
html.dark-mode .card-title,
html.dark-mode .login-header,
html.dark-mode blockquote {
    color: #f8fafc !important;
}

html.dark-mode .text-muted,
html.dark-mode .text-secondary,
html.dark-mode .icon-box-content p {
    color: #94a3b8 !important;
}

/* Navbar y Sidebar Links */
html.dark-mode #navbar .nav-link {
    color: #e2e8f0 !important;
}

html.dark-mode #navbar .nav-link:hover,
html.dark-mode #navbar .nav-link.active {
    color: #4ade80 !important;
}

html.dark-mode .dropdown-menu .dropdown-item {
    color: #e2e8f0 !important;
}

html.dark-mode .dropdown-menu .dropdown-item:hover {
    background-color: #334155 !important;
    color: #4ade80 !important;
}

html.dark-mode .list-group-item:hover,
html.dark-mode .list-group-item.active,
html.dark-mode .group-selector.active {
    background-color: rgba(40, 167, 69, 0.2) !important;
    color: #4ade80 !important;
    border-color: #28a745 !important;
}

html.dark-mode .btn-profile {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark-mode .nav-pills {
    background-color: #1e293b !important;
}

html.dark-mode .nav-pills .nav-link:not(.active) {
    color: #cbd5e1 !important;
}

/* Formularios e Inputs */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode .form-floating > .form-control,
html.dark-mode .form-floating > .form-select,
html.dark-mode .input-group-text,
html.dark-mode input:disabled,
html.dark-mode input[readonly] {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html.dark-mode .form-control::placeholder {
    color: #64748b !important;
}

html.dark-mode .form-floating > label {
    color: #94a3b8 !important;
}

html.dark-mode .form-select option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Tablas en módulos del Dashboard */
html.dark-mode .table,
html.dark-mode table {
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html.dark-mode .table thead th,
html.dark-mode .table-light,
html.dark-mode .table-light th,
html.dark-mode .table-light td,
html.dark-mode .table-roles th {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html.dark-mode .table tbody tr,
html.dark-mode .table tbody td {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html.dark-mode .table-hover tbody tr:hover td {
    background-color: #26354d !important;
}

html.dark-mode .border,
html.dark-mode .border-top,
html.dark-mode .border-bottom,
html.dark-mode .border-start,
html.dark-mode .border-end {
    border-color: #334155 !important;
}

html.dark-mode .btn-close:not(.btn-close-white) {
    filter: invert(1) grayscale(100%) brightness(200%);
}