/* ============================================================
   SIOM Dark Mode — tema ifopV4 (overrides)
   Activado con html[data-theme="dark"]
   Creado por Nemo 🤿 — 2026-08-03
   ============================================================ */

html[data-theme="dark"] {
    --siom-bg: #121417;
    --siom-bg-card: #1b1e23;
    --siom-bg-header: #0e1013;
    --siom-border: #2a2e35;
    --siom-text: #d6dae0;
    --siom-text-muted: #9aa3ad;
    --siom-link: #6fb1ff;
    --siom-azul: #114285;
    --siom-azul-claro: #2daae2;
}

html[data-theme="dark"] body {
    background-color: var(--siom-bg);
    color: var(--siom-text);
}

/* Header / navbar */
html[data-theme="dark"] .navbar-default,
html[data-theme="dark"] nav.navbar {
    background-color: var(--siom-bg-header);
    border-color: var(--siom-border);
}
html[data-theme="dark"] .navbar-default .navbar-nav > li > a {
    color: var(--siom-text);
}
html[data-theme="dark"] .navbar-default .navbar-nav > li > a:hover,
html[data-theme="dark"] .navbar-default .navbar-nav > li > a:focus {
    color: #fff;
    background-color: #23272e;
}
html[data-theme="dark"] .navbar-default .navbar-nav > .active > a,
html[data-theme="dark"] .navbar-default .navbar-nav > .active > a:hover {
    color: #fff;
    background-color: var(--siom-azul);
}

/* Contenido principal */
html[data-theme="dark"] .content,
html[data-theme="dark"] .contenido,
html[data-theme="dark"] .entry-content,
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-default,
html[data-theme="dark"] .well,
html[data-theme="dark"] .card,
html[data-theme="dark"] .post,
html[data-theme="dark"] article {
    background-color: var(--siom-bg-card);
    color: var(--siom-text);
    border-color: var(--siom-border);
}

/* Textos y encabezados */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #eef1f5;
}
html[data-theme="dark"] .textobanner,
html[data-theme="dark"] .titulobanner {
    color: #eef1f5;
}

/* Enlaces */
html[data-theme="dark"] a {
    color: var(--siom-link);
}
html[data-theme="dark"] a:hover {
    color: #9cc5ff;
}

/* Tablas */
html[data-theme="dark"] table,
html[data-theme="dark"] .table {
    color: var(--siom-text);
}
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > th,
html[data-theme="dark"] .table > thead > tr > td,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tfoot > tr > td {
    border-color: var(--siom-border);
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #20242a;
}

/* Formularios e inputs */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #23272e;
    color: var(--siom-text);
    border-color: var(--siom-border);
}
html[data-theme="dark"] .form-control:focus {
    border-color: var(--siom-azul-claro);
}

/* Footer */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] #footer {
    background-color: var(--siom-bg-header);
    color: var(--siom-text-muted);
    border-color: var(--siom-border);
}

/* Widgets/módulos embebidos con iframe conservan su propio fondo;
   forzamos contenedores oscuros para integrarlos visualmente */
html[data-theme="dark"] .embed-responsive,
html[data-theme="dark"] iframe {
    background-color: var(--siom-bg-card);
}

/* Botón toggle (abajo-izquierda; el chatbot está abajo-derecha) */
#siom-dark-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999998;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    background: #003B5C;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    transition: transform .2s ease, background .2s ease;
}
#siom-dark-toggle:hover {
    transform: scale(1.1);
}
html[data-theme="dark"] #siom-dark-toggle {
    background: #2daae2;
}

/* Ajuste móvil: no tapar contenido */
@media (max-width: 480px) {
    #siom-dark-toggle {
        width: 38px;
        height: 38px;
        font-size: 17px;
        bottom: 14px;
        left: 14px;
    }
}