/* =========================================================
   VERIFICATE.ONLINE
   DARK MODE — IDENTIDAD
========================================================= */


/* =========================
   FONDO GENERAL
========================= */

html.dark-mode,
html.dark-mode body {
    background: #070b14 !important;
    color: #e5e7eb !important;
}


/* =========================
   HEADER INTERNO
========================= */

html.dark-mode .site-header {
    background: #071020 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* Enlaces inactivos del menú en modo oscuro */
html.dark-mode .nav-menu a:not(.activo) {
    color: #cbd5e1 !important;
}

html.dark-mode .nav-menu a:not(.activo):hover {
    color: #ffffff !important;
}

/* Enlace activo y sus estados (clic, hover, enfoque) en modo oscuro */
html.dark-mode .nav-menu a.activo,
html.dark-mode .nav-menu a.activo:hover,
html.dark-mode .nav-menu a.activo:active,
html.dark-mode .nav-menu a.activo:focus {
    color: #3b82f6 !important;
}

html.dark-mode .language-button {
    background: #0f1b31 !important;
    border-color: #334155 !important;
    color: #3b82f6 !important;
}

html.dark-mode .language-menu {
    background: #0f1b31 !important;
    border-color: #334155 !important;
}

html.dark-mode .language-menu button {
    color: #cbd5e1 !important;
}

html.dark-mode .language-menu button:hover {
    background: #1e293b !important;
    color: #38bdf8 !important;
}

html.dark-mode #darkModeToggle {
    background: #0f1b31 !important;
    border-color: #334155 !important;
}

/* =========================
   SECCIÓN DE CONSULTAS
========================= */

html.dark-mode .queries-section {
    background: #0a0f1c !important;
}


/* =========================
   TÍTULOS
========================= */

html.dark-mode .queries-group h2 {
    color: #f8fafc !important;
    border-color: #1e293b !important;
}


/* =========================
   TARJETAS
========================= */

html.dark-mode .query-card {
    background: #0f172a !important;
    border-color: #263449 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .25) !important;
}


/* Hover */

html.dark-mode .query-card:hover {
    background: #111c30 !important;
    border-color: #1769ff !important;
    box-shadow: 0 15px 40px rgba(23, 105, 255, .12) !important;
}


/* =========================
   ICONO
========================= */

html.dark-mode .query-icon {
    background: #111c30 !important;
}


/* =========================
   TÍTULO DE TARJETA
========================= */

html.dark-mode .query-card h3 {
    color: #f8fafc !important;
}


/* =========================
   DESCRIPCIÓN
========================= */

html.dark-mode .query-card p {
    color: #94a3b8 !important;
}


/* =========================
   BOTÓN CONSULTA
========================= */

html.dark-mode .btn-query {
    color: #60a5fa !important;
}

html.dark-mode .btn-query:hover {
    color: #93c5fd !important;
}


/* =========================
   IMÁGENES / ICONOS
========================= */

html.dark-mode .query-card img {
    background: transparent !important;
}


/* =========================
   FOOTER
========================= */

html.dark-mode .vo-footer {
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(23,105,255,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(56,189,248,.07),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #030712 0%,
            #071020 50%,
            #030712 100%
        ) !important;
}


/* =========================
   BOTÓN LUNA
========================= */

html.dark-mode #darkModeToggle {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

/* =========================================================
   HEADER GLOBAL — DARK MODE
========================================================= */

html.dark-mode header,
html.dark-mode .site-header,
html.dark-mode .vo-header,
html.dark-mode .main-header {
    background: #070b14 !important;
    background-color: #070b14 !important;
    border-color: #1e293b !important;
    box-shadow: none !important;
}

/* Menú */
html.dark-mode header a,
html.dark-mode .site-header a,
html.dark-mode .vo-header a,
html.dark-mode .main-header a {
    color: #e2e8f0 !important;
}

/* Hover del menú */
html.dark-mode header a:hover,
html.dark-mode .site-header a:hover,
html.dark-mode .vo-header a:hover,
html.dark-mode .main-header a:hover {
    color: #60a5fa !important;
}

/* Botón DONAR */
html.dark-mode header .btn-donar,
html.dark-mode .site-header .btn-donar {
    color: #ffffff !important;
}

/* Botón luna */
html.dark-mode #darkModeToggle {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

/* =========================================================
   VERIFICATE.ONLINE
   DARK MODE — MANUAL INTEGRAL
========================================================= */


/* =========================================================
   FONDO GENERAL
========================================================= */

html.dark-mode body {
    background: #070b14 !important;
    color: #e5e7eb !important;
}


/* =========================================================
   HERO DEL MANUAL
========================================================= */

html.dark-mode .manual-hero {
    background: #070b14 !important;
    color: #f8fafc !important;
}

html.dark-mode .manual-hero h1 {
    color: #f8fafc !important;
}

html.dark-mode .manual-hero h1 span {
    color: #60a5fa !important;
}

html.dark-mode .manual-intro {
    color: #94a3b8 !important;
}


/* =========================================================
   AVISO / INFORMACIÓN
========================================================= */

html.dark-mode .manual-notice {
    background: #0f172a !important;
    border-color: #263449 !important;
    color: #e5e7eb !important;
}

html.dark-mode .manual-notice strong {
    color: #f8fafc !important;
}

html.dark-mode .manual-notice p {
    color: #94a3b8 !important;
}

html.dark-mode .manual-notice-icon {
    background: #111c30 !important;
    color: #60a5fa !important;
}


/* =========================================================
   SECCIONES DEL MANUAL
========================================================= */

html.dark-mode .manual-content-section {
    background: #070b14 !important;
}

html.dark-mode .manual-container {
    color: #e5e7eb !important;
}


/* =========================================================
   TARJETA PRINCIPAL DEL CONTENIDO
========================================================= */

html.dark-mode .manual-content-card {
    background: #0f172a !important;
    border-color: #263449 !important;
    color: #e5e7eb !important;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .22) !important;
}


/* =========================================================
   TÍTULOS
========================================================= */

html.dark-mode .manual-content-card h2,
html.dark-mode .manual-content-card h3,
html.dark-mode .manual-content-card h4 {
    color: #f8fafc !important;
}


/* =========================================================
   ETIQUETAS DE SECCIÓN
========================================================= */

html.dark-mode .manual-section-label {
    color: #60a5fa !important;
}


/* =========================================================
   TEXTO DEL DOCUMENTO
========================================================= */

html.dark-mode .doc-body {
    color: #cbd5e1 !important;
}

html.dark-mode .doc-body p {
    color: #94a3b8 !important;
}

html.dark-mode .doc-body li {
    color: #94a3b8 !important;
}

html.dark-mode .doc-body strong {
    color: #e2e8f0 !important;
}

html.dark-mode .doc-body h2,
html.dark-mode .doc-body h3,
html.dark-mode .doc-body h4 {
    color: #f8fafc !important;
}


/* =========================================================
   LISTAS
========================================================= */

html.dark-mode .doc-body ul,
html.dark-mode .doc-body ol {
    color: #94a3b8 !important;
}


/* =========================================================
   TARJETAS DE ABREVIATURAS
========================================================= */

html.dark-mode .manual-grid-items {
    color: #e5e7eb !important;
}

html.dark-mode .manual-card-item {
    background: #111827 !important;
    border-color: #263449 !important;
    border-left-color: #475569 !important;
    color: #e5e7eb !important;
}

html.dark-mode .manual-card-item:hover {
    background: #162033 !important;
    border-left-color: #1769ff !important;
}

html.dark-mode .manual-card-title {
    color: #f8fafc !important;
}

html.dark-mode .manual-card-desc {
    color: #94a3b8 !important;
}


/* =========================================================
   ALERTAS
========================================================= */

html.dark-mode .alert-box-creative {
    background: #241316 !important;
    border-left-color: #ef4444 !important;
}

html.dark-mode .alert-box-creative p {
    color: #fca5a5 !important;
}


/* =========================================================
   BOTONES
========================================================= */

html.dark-mode .btn-link-creative {
    background: #1769ff !important;
    color: #ffffff !important;
}

html.dark-mode .btn-link-creative:hover {
    background: #3b82f6 !important;
}


/* =========================================================
   FUENTES / TARJETAS DE FUENTES
========================================================= */

html.dark-mode .manual-sources-grid {
    color: #e5e7eb !important;
}

html.dark-mode .manual-source-card {
    background: #0f172a !important;
    border-color: #263449 !important;
    color: #e5e7eb !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .18) !important;
}

html.dark-mode .manual-source-card:hover {
    background: #111c30 !important;
    border-color: #1769ff !important;
}

html.dark-mode .manual-source-number {
    background: #111c30 !important;
    color: #60a5fa !important;
}

html.dark-mode .manual-source-info strong {
    color: #f8fafc !important;
}

html.dark-mode .manual-source-info span {
    color: #94a3b8 !important;
}


/* =========================================================
   TABLAS DEL MANUAL
========================================================= */

html.dark-mode .manual-content-card table {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: #263449 !important;
}

html.dark-mode .manual-content-card th {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #263449 !important;
}

html.dark-mode .manual-content-card td {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: #263449 !important;
}

html.dark-mode .manual-content-card tr:hover td {
    background: #111c30 !important;
}


/* =========================================================
   ENLACES
========================================================= */

html.dark-mode .manual-content-card a {
    color: #60a5fa !important;
}

html.dark-mode .manual-content-card a:hover {
    color: #93c5fd !important;
}


/* =========================================================
   FOOTER
========================================================= */

html.dark-mode .vo-footer {
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(23,105,255,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(56,189,248,.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #030712 0%,
            #071020 50%,
            #030712 100%
        ) !important;

    border-top-color: #1769ff !important;
}


/* =========================================================
   HEADER DEL MANUAL
========================================================= */

html.dark-mode .site-header {
    background: #080d18 !important;
    background-color: #080d18 !important;
    border-bottom-color: #1e293b !important;
}

html.dark-mode .nav-menu a.activo,
html.dark-mode .nav-menu a.activo:active,
html.dark-mode .nav-menu a.activo:focus {
    color: #3b82f6 !important;
}

html.dark-mode .site-header .nav-menu a:hover {
    color: #60a5fa !important;
}


/* =========================================================
   BOTÓN LUNA
========================================================= */

html.dark-mode #darkModeToggle {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}


/* =========================================================
   SELECTOR DE IDIOMA
========================================================= */

html.dark-mode .language-button {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .language-menu {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .language-menu button {
    color: #e2e8f0 !important;
}

html.dark-mode .language-menu button:hover {
    background: #1e293b !important;
}


/* =========================================================
   TRANSICIONES
========================================================= */

html.dark-mode .manual-hero,
html.dark-mode .manual-content-section,
html.dark-mode .manual-content-card,
html.dark-mode .manual-card-item,
html.dark-mode .manual-source-card,
html.dark-mode .manual-notice,
html.dark-mode .site-header {
    transition:
        background-color .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}
/* =========================================================
   DARK MODE — GLOSARIO
========================================================= */

html.dark-mode .manual-glosario-container {
    background: #070b14 !important;
    color: #e5e7eb !important;
}

html.dark-mode .manual-glosario-hero {
    background: #070b14 !important;
    color: #f8fafc !important;
}

html.dark-mode .manual-glosario-hero h1 {
    color: #f8fafc !important;
}

html.dark-mode .manual-glosario-hero h1 span {
    color: #60a5fa !important;
}

html.dark-mode .manual-glosario-hero p {
    color: #94a3b8 !important;
}


/* Información */

html.dark-mode .manual-glosario-info {
    background: #0f172a !important;
    border-color: #263449 !important;
}

html.dark-mode .manual-glosario-info strong {
    color: #f8fafc !important;
}

html.dark-mode .manual-glosario-info span {
    color: #94a3b8 !important;
}

html.dark-mode .manual-glosario-info-icon {
    background: #111c30 !important;
    color: #60a5fa !important;
}


/* Índice de letras */

html.dark-mode .manual-glosario-letters {
    background: #0f172a !important;
    border-color: #263449 !important;
}

html.dark-mode .manual-glosario-letters a {
    color: #cbd5e1 !important;
}

html.dark-mode .manual-glosario-letters a:hover {
    color: #60a5fa !important;
}


/* Grupos */

html.dark-mode .manual-glosario-group {
    background: #070b14 !important;
}

html.dark-mode .manual-glosario-group-heading h2 {
    color: #f8fafc !important;
}

html.dark-mode .manual-glosario-group-heading p {
    color: #94a3b8 !important;
}


/* Letra grande */

html.dark-mode .manual-glosario-letter {
    background: #111827 !important;
    color: #60a5fa !important;
}


/* =========================================================
   TARJETAS DEL GLOSARIO
========================================================= */

html.dark-mode .manual-glosario-card {
    background: #0f172a !important;
    background-color: #0f172a !important;

    border-color: #263449 !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .20) !important;
}

html.dark-mode .manual-glosario-card:hover {
    background: #111c30 !important;
    border-color: #1769ff !important;
    box-shadow:
        0 12px 30px rgba(23, 105, 255, .12) !important;
}


/* Número 001, 002, 003... */

html.dark-mode .manual-glosario-number {
    background: #111c30 !important;
    color: #60a5fa !important;
}


/* Títulos */

html.dark-mode .manual-glosario-card h3 {
    color: #f8fafc !important;
}


/* Descripciones */

html.dark-mode .manual-glosario-card p {
    color: #94a3b8 !important;
}


/* =========================================================
   HEADER GLOBAL
========================================================= */

html.dark-mode .site-header {
    background: #080d18 !important;
    background-color: #080d18 !important;
    border-bottom-color: #1e293b !important;
}


/* Botón luna */

html.dark-mode #darkModeToggle {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}


/* =========================================================
   FOOTER
========================================================= */

html.dark-mode .vo-footer {
    background: #030712 !important;
    border-top-color: #1769ff !important;
}

/* =========================================================
   DARK MODE — FUENTES PÚBLICAS
========================================================= */

/* Fondo de toda la sección */
html.dark-mode .manual-sources-section {
    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(23, 105, 255, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 94% 20%,
            rgba(23, 105, 255, 0.08),
            transparent 25%
        ),
        #070b14 !important;
}


/* =========================================================
   ENCABEZADO "LISTAS Y FUENTES"
========================================================= */

html.dark-mode .manual-sources-header {
    background: #0f172a !important;
    background-color: #0f172a !important;

    border-color: #263449 !important;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .25) !important;
}

html.dark-mode .manual-sources-header h2 {
    color: #f8fafc !important;
}

html.dark-mode .manual-sources-header h2 span {
    color: #3b82f6 !important;
}

html.dark-mode .manual-sources-header p {
    color: #94a3b8 !important;
}

html.dark-mode .manual-sources-label {
    color: #60a5fa !important;
}


/* =========================================================
   TARJETAS DE FUENTES
========================================================= */

html.dark-mode .manual-source-card {
    background: #0f172a !important;
    background-color: #0f172a !important;

    border-color: #263449 !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .22) !important;
}


/* Hover */

html.dark-mode .manual-source-card:hover {
    background: #111c30 !important;
    border-color: #1769ff !important;

    box-shadow:
        0 12px 30px rgba(23, 105, 255, .12) !important;
}


/* =========================================================
   NÚMEROS 01, 02, 03...
========================================================= */

html.dark-mode .manual-source-number {
    background: #111c30 !important;
    color: #60a5fa !important;
}


/* =========================================================
   NOMBRE DE LA FUENTE
========================================================= */

html.dark-mode .manual-source-info strong {
    color: #f8fafc !important;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

html.dark-mode .manual-source-info span {
    color: #94a3b8 !important;
}


/* =========================================================
   FLECHA
========================================================= */

html.dark-mode .manual-source-arrow {
    color: #60a5fa !important;
}

/* =========================================================
   DARK MODE — SERVICIOS PERSONALIZADOS
   VERIFICATE.ONLINE
========================================================= */


/* =========================================================
   1. PÁGINA GENERAL
========================================================= */

html.dark-mode .servicios-personalizados-page {
    background: #070b14 !important;
    background-color: #070b14 !important;
    color: #e5e7eb !important;
}


/* =========================================================
   2. HERO
========================================================= */

html.dark-mode .sp-hero {
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(37, 99, 235, .14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #070b14 0%,
            #0a1020 60%,
            #0d1729 100%
        ) !important;
}

html.dark-mode .sp-hero h1 {
    color: #f8fafc !important;
}

html.dark-mode .sp-hero h1 span {
    color: #60a5fa !important;
}

html.dark-mode .sp-hero-content > p {
    color: #94a3b8 !important;
}

html.dark-mode .sp-eyebrow {
    color: #60a5fa !important;
}


/* =========================================================
   3. PANEL DEL HERO
========================================================= */

html.dark-mode .sp-hero-panel {
    background: rgba(15, 23, 42, .90) !important;

    border-color: #263449 !important;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, .30) !important;

    backdrop-filter: blur(14px);
}

html.dark-mode .sp-panel-header {
    color: #94a3b8 !important;
}

html.dark-mode .sp-panel-line {
    background: #263449 !important;
}

html.dark-mode .sp-panel-item {
    color: #e2e8f0 !important;
    border-bottom-color: #263449 !important;
}

html.dark-mode .sp-panel-number {
    color: #60a5fa !important;
}


/* =========================================================
   4. BOTONES
========================================================= */

html.dark-mode .sp-btn-primary {
    background: #1769ff !important;
    color: #ffffff !important;
}

html.dark-mode .sp-btn-primary:hover {
    background: #3b82f6 !important;
}

html.dark-mode .sp-btn-secondary {
    background: #111827 !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .sp-btn-secondary:hover {
    background: #1e293b !important;
    border-color: #1769ff !important;
    color: #60a5fa !important;
}

html.dark-mode .sp-btn-light {
    background: #111827 !important;
    color: #f8fafc !important;
}


/* =========================================================
   5. INTRO
========================================================= */

html.dark-mode .sp-intro {
    background: #070b14 !important;
}

html.dark-mode .sp-intro-grid h2 {
    color: #f8fafc !important;
}

html.dark-mode .sp-intro-grid h2 span {
    color: #60a5fa !important;
}

html.dark-mode .sp-intro-grid p {
    color: #94a3b8 !important;
}

html.dark-mode .sp-section-label {
    color: #60a5fa !important;
}


/* =========================================================
   6. SECCIÓN SERVICIOS
========================================================= */

html.dark-mode .sp-services {
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(23, 105, 255, .07),
            transparent 30%
        ),
        #0a1020 !important;
}

html.dark-mode .sp-section-heading > span {
    color: #60a5fa !important;
}

html.dark-mode .sp-section-heading h2 {
    color: #f8fafc !important;
}

html.dark-mode .sp-section-heading h2 strong {
    color: #60a5fa !important;
}

html.dark-mode .sp-section-heading p {
    color: #94a3b8 !important;
}


/* =========================================================
   7. TARJETAS DE SERVICIOS
========================================================= */

html.dark-mode .sp-service-card {
    background: #0f172a !important;
    background-color: #0f172a !important;

    border-color: #263449 !important;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, .25) !important;
}

html.dark-mode .sp-service-card:hover {
    background: #111c30 !important;

    border-color: rgba(23, 105, 255, .55) !important;

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .35) !important;
}

html.dark-mode .sp-service-featured {
    border-color: rgba(23, 105, 255, .40) !important;
}


/* =========================================================
   8. PARTE SUPERIOR DE LAS TARJETAS
========================================================= */

html.dark-mode .sp-card-number {
    color: #60a5fa !important;
}

html.dark-mode .sp-card-icon {
    background: #111c30 !important;
    color: #60a5fa !important;
}


/* =========================================================
   9. CONTENIDO DE LAS TARJETAS
========================================================= */

html.dark-mode .sp-card-label {
    color: #60a5fa !important;
}

html.dark-mode .sp-card-content h3 {
    color: #f8fafc !important;
}

html.dark-mode .sp-card-content p {
    color: #94a3b8 !important;
}


/* =========================================================
   10. PIE DE LAS TARJETAS
========================================================= */

html.dark-mode .sp-card-footer {
    color: #64748b !important;
    border-top-color: #263449 !important;
}

html.dark-mode .sp-arrow {
    color: #60a5fa !important;
}


/* =========================================================
   11. ENFOQUE
========================================================= */

html.dark-mode .sp-approach {
    background: #070b14 !important;
}

html.dark-mode .sp-approach-box {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(23, 105, 255, .20),
            transparent 38%
        ),
        #0f172a !important;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .25) !important;
}

html.dark-mode .sp-approach-content h2 {
    color: #f8fafc !important;
}

html.dark-mode .sp-approach-content h2 span {
    color: #38bdf8 !important;
}

html.dark-mode .sp-approach-content p {
    color: #94a3b8 !important;
}


/* =========================================================
   12. ITEMS DEL ENFOQUE
========================================================= */

html.dark-mode .sp-approach-item {
    border-bottom-color: rgba(148, 163, 184, .15) !important;
}

html.dark-mode .sp-approach-item > span {
    color: #38bdf8 !important;
}

html.dark-mode .sp-approach-item strong {
    color: #f8fafc !important;
}

html.dark-mode .sp-approach-item p {
    color: #94a3b8 !important;
}


/* =========================================================
   13. CTA
========================================================= */

html.dark-mode .sp-cta {
    background: #0a1020 !important;
}

html.dark-mode .sp-cta-box {
    background:
        linear-gradient(
            135deg,
            #1769ff 0%,
            #1555cc 100%
        ) !important;

    box-shadow:
        0 25px 60px rgba(23, 105, 255, .22) !important;
}

html.dark-mode .sp-cta-box > div > span {
    color: #dbeafe !important;
}

html.dark-mode .sp-cta-box h2 {
    color: #ffffff !important;
}

html.dark-mode .sp-cta-box p {
    color: rgba(255,255,255,.80) !important;
}


/* =========================================================
   14. CONTACTO DENTRO DEL CTA
========================================================= */

html.dark-mode .sp-contact-item {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.18) !important;
}

html.dark-mode .sp-contact-item:hover {
    background: rgba(255,255,255,.14) !important;
}

html.dark-mode .sp-contact-label {
    color: #bfdbfe !important;
}

html.dark-mode .sp-contact-item strong {
    color: #ffffff !important;
}


/* =========================================================
   15. HEADER GLOBAL
========================================================= */

html.dark-mode .site-header {
    background: #080d18 !important;
    background-color: #080d18 !important;

    border-bottom-color: #1e293b !important;

    box-shadow:
        0 4px 20px rgba(0,0,0,.25) !important;
}

html.dark-mode .site-header .nav-menu a {
    color: #cbd5e1 !important;
}

html.dark-mode .site-header .nav-menu a:hover {
    color: #60a5fa !important;
}


/* =========================================================
   16. BOTÓN DARK MODE
========================================================= */

html.dark-mode #darkModeToggle {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}


/* =========================================================
   17. SELECTOR DE IDIOMA
========================================================= */

html.dark-mode .language-button {
    background: #111827 !important;
    background-color: #111827 !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark-mode .language-menu {
    background: #0f172a !important;
    border-color: #334155 !important;
}

html.dark-mode .language-menu button {
    color: #e2e8f0 !important;
}

html.dark-mode .language-menu button:hover {
    background: #1e293b !important;
}


/* =========================================================
   18. FOOTER
========================================================= */

html.dark-mode .servicios-personalizados-page + .vo-footer,
html.dark-mode .vo-footer {
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(23,105,255,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(56,189,248,.08),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #030712 0%,
            #071020 50%,
            #030712 100%
        ) !important;

    border-top-color: #1769ff !important;
}


/* =========================================================
   19. TRANSICIONES
========================================================= */

html.dark-mode .servicios-personalizados-page,
html.dark-mode .sp-hero,
html.dark-mode .sp-hero-panel,
html.dark-mode .sp-intro,
html.dark-mode .sp-services,
html.dark-mode .sp-service-card,
html.dark-mode .sp-approach,
html.dark-mode .sp-approach-box,
html.dark-mode .sp-cta,
html.dark-mode .sp-btn,
html.dark-mode .site-header {
    transition:
        background .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

/* =========================================================
   MODO OSCURO — MARCO LEGAL
   ========================================================= */

html.dark-mode body {
    background: #070b14 !important;
    color: #cbd5e1 !important;
}

/* Contenedor principal */
html.dark-mode .legal-main-container {
    background: #070b14 !important;
}

/* Menú lateral */
html.dark-mode .tab-btn {
    background: #111827 !important;
    color: #cbd5e1 !important;
    border-color: #263244 !important;
}

html.dark-mode .tab-btn:hover {
    background: #172033 !important;
    color: #60a5fa !important;
    border-color: #1769ff !important;
}

html.dark-mode .tab-btn.active {
    background: #1769ff !important;
    color: #ffffff !important;
    border-color: #1769ff !important;
}

/* Caja principal del documento */
html.dark-mode .documento-activo-box {
    background: #111827 !important;
    border-color: #263244 !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25) !important;
}

/* Separador del encabezado */
html.dark-mode .doc-header {
    border-bottom-color: #263244 !important;
}

/* Etiqueta superior */
html.dark-mode .doc-badge {
    background: rgba(23, 105, 255, 0.12) !important;
    color: #60a5fa !important;
}

/* Título del documento */
html.dark-mode .doc-header h2 {
    color: #f8fafc !important;
}

/* Subtítulo */
html.dark-mode .doc-header span {
    color: #94a3b8 !important;
}

/* Títulos internos */
html.dark-mode .doc-body h3 {
    color: #f1f5f9 !important;
}

/* Párrafos */
html.dark-mode .doc-body p {
    color: #aebbd0 !important;
}

/* Listas */
html.dark-mode .doc-body ul {
    color: #aebbd0 !important;
}

html.dark-mode .doc-body li {
    color: #aebbd0 !important;
}

/* Negritas dentro del contenido */
html.dark-mode .doc-body strong {
    color: #e2e8f0 !important;
}

/* Estado final del documento */
html.dark-mode .doc-footer-meta {
    background: #0d1524 !important;
    border-color: #263244 !important;
    color: #94a3b8 !important;
}

html.dark-mode .doc-footer-meta strong {
    color: #60a5fa !important;
}


/* =========================================================
   BLOQUES CON ESTILOS INLINE
   ========================================================= */

/* Aviso antes de redirigir */
html.dark-mode .doc-body div[style*="background: #f8fafc"] {
    background: #0d1524 !important;
    color: #e2e8f0 !important;
    border-color: #1769ff !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.25) !important;
}

/* Canal para ejercer derechos */
html.dark-mode .doc-body div[style*="border: 1px solid #e2e8f0"] {
    background: #0d1524 !important;
    color: #e2e8f0 !important;
    border-color: #263244 !important;
}

/* Texto dentro de esos bloques */
html.dark-mode .doc-body div[style*="border: 1px solid #e2e8f0"] strong {
    color: #f1f5f9 !important;
}


/* =========================================================
   HEADER INTERNO
   ========================================================= */

html.dark-mode .internal-header {
    background: #070b14 !important;
    border-bottom-color: #263244 !important;
}

html.dark-mode .internal-header h1 {
    color: #ffffff !important;
}

html.dark-mode .internal-header p {
    color: #94a3b8 !important;
}

/* =========================================================
   DARK MODE — PROCEDIMIENTOS PENALES
   ========================================================= */

html.dark-mode .vo-procedimientos-penales {
    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(23, 105, 255, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 94% 20%,
            rgba(23, 105, 255, .08),
            transparent 25%
        ),
        #070b14 !important;

    color: #e5e7eb !important;
}

/* TÍTULO */

html.dark-mode .vo-pp-heading h2 {
    color: #f8fafc !important;
}

html.dark-mode .vo-pp-heading h2 span {
    color: #60a5fa !important;
}

html.dark-mode .vo-pp-heading p {
    color: #94a3b8 !important;
}

html.dark-mode .vo-pp-kicker {
    color: #60a5fa !important;
}


/* AVISO */

html.dark-mode .vo-pp-notice {
    background: #0f172a !important;
    border-color: #263449 !important;
    color: #e5e7eb !important;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .22) !important;
}

html.dark-mode .vo-pp-notice-icon {
    background: #111c30 !important;
    color: #60a5fa !important;
}

html.dark-mode .vo-pp-notice strong {
    color: #f8fafc !important;
}

html.dark-mode .vo-pp-notice p {
    color: #94a3b8 !important;
}


/* BUSCADOR */

html.dark-mode .vo-pp-search input,
html.dark-mode .vo-pp-filter select {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: #263449 !important;
    color: #e5e7eb !important;
}

html.dark-mode .vo-pp-search input::placeholder {
    color: #64748b !important;
}

html.dark-mode .vo-pp-search span {
    color: #60a5fa !important;
}

html.dark-mode .vo-pp-search input:focus,
html.dark-mode .vo-pp-filter select:focus {
    border-color: #1769ff !important;

    box-shadow:
        0 0 0 4px rgba(23, 105, 255, .14) !important;
}


/* CONTADOR */

html.dark-mode .vo-pp-summary {
    color: #94a3b8 !important;
}

html.dark-mode .vo-pp-summary #voPpCount {
    color: #60a5fa !important;
}


/* TARJETAS DE DELITOS */

html.dark-mode .vo-pp-card {
    background: #0f172a !important;
    background-color: #0f172a !important;

    border-color: #263449 !important;

    color: #e5e7eb !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .22) !important;
}


/* HOVER */

html.dark-mode .vo-pp-card:hover {
    background: #111c30 !important;
    border-color: #1769ff !important;

    box-shadow:
        0 12px 30px rgba(23, 105, 255, .12) !important;
}


/* CLASIFICACIÓN */

html.dark-mode .vo-pp-badge {
    background: #111c30 !important;
    color: #60a5fa !important;
}


/* ARTÍCULO */

html.dark-mode .vo-pp-article {
    color: #60a5fa !important;
}


/* NOMBRE DEL DELITO */

html.dark-mode .vo-pp-card h3 {
    color: #f8fafc !important;
}


/* DEFINICIÓN */

html.dark-mode .vo-pp-definition {
    color: #94a3b8 !important;
}


/* SIN RESULTADOS */

html.dark-mode .vo-pp-empty {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

html.dark-mode .vo-pp-empty strong {
    color: #f8fafc !important;
}


/* TRANSICIÓN */

html.dark-mode .vo-procedimientos-penales,
html.dark-mode .vo-pp-notice,
html.dark-mode .vo-pp-card,
html.dark-mode .vo-pp-search input,
html.dark-mode .vo-pp-filter select {

    transition:
        background-color .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

/* =========================================================
   DARK MODE — SITUACIONES JURÍDICAS ESPECIALES
   ========================================================= */

html.dark-mode .vo-situaciones-especiales {
    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(23, 105, 255, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 94% 20%,
            rgba(23, 105, 255, .08),
            transparent 25%
        ),
        #070b14 !important;

    color: #e5e7eb !important;
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

html.dark-mode .vo-sj-kicker {
    color: #60a5fa !important;
}

html.dark-mode .vo-sj-header h2 {
    color: #f8fafc !important;
}

html.dark-mode .vo-sj-header h2 span {
    color: #60a5fa !important;
}

html.dark-mode .vo-sj-header p {
    color: #94a3b8 !important;
}


/* =========================================================
   TARJETAS
   ========================================================= */

html.dark-mode .vo-sj-card {
    background: #0f172a !important;
    background-color: #0f172a !important;

    border-color: #263449 !important;

    color: #e5e7eb !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .22) !important;
}

html.dark-mode .vo-sj-card:hover {
    background: #111c30 !important;

    border-color: #1769ff !important;

    box-shadow:
        0 18px 40px rgba(23, 105, 255, .12) !important;
}


/* =========================================================
   NÚMEROS
   ========================================================= */

html.dark-mode .vo-sj-number {
    background: #111c30 !important;

    color: #60a5fa !important;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

html.dark-mode .vo-sj-label {
    color: #60a5fa !important;
}

html.dark-mode .vo-sj-content h3 {
    color: #f8fafc !important;
}

html.dark-mode .vo-sj-content p {
    color: #94a3b8 !important;
}


/* =========================================================
   TRANSICIONES
   ========================================================= */

html.dark-mode .vo-situaciones-especiales,
html.dark-mode .vo-sj-card,
html.dark-mode .vo-sj-number {
    transition:
        background-color .25s ease,
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.nav-menu a {
    color: white !important;
}

/* Le añadimos un sutil resplandor blanco de fondo al logo e imagotipo */
html.dark-mode .elementor-widget-image img,
html.dark-mode .site-branding img,
html.dark-mode .logo img {
    filter: drop-shadow(2px 2px 12px rgba(255, 255, 255, 0.70)) !important;
    transition: filter 0.25s ease !important;
}