/* Modo oscuro de soyimpacto.org.
   Se activa con <html data-tema="oscuro"> (botón ☀︎/☾ del menú; la primera vez sigue la preferencia del sistema).
   Paleta: fondo #0E0E0D · superficie #171716 · superficie 2 #20201E · línea #2C2C29 · texto #F2F1EC / #B9B7B0 / #84827C */
html[data-tema="oscuro"] { color-scheme: dark; }
html[data-tema="oscuro"], html[data-tema="oscuro"] body { background: #0E0E0D !important; color: #F2F1EC !important; }

/* Superficies */
html[data-tema="oscuro"] .bg-white, html[data-tema="oscuro"] .bg-ink-50, html[data-tema="oscuro"] .bg-\[\#FBFAF7\] { background-color: #171716 !important; }
html[data-tema="oscuro"] .bg-white\/90 { background-color: rgba(14,14,13,.88) !important; }
html[data-tema="oscuro"] .bg-white\/60 { background-color: rgba(23,23,22,.6) !important; }
html[data-tema="oscuro"] .bg-ink-100 { background-color: #20201E !important; }
html[data-tema="oscuro"] .bg-ink-300 { background-color: #3A3A37 !important; }
html[data-tema="oscuro"] section.bg-ink-900, html[data-tema="oscuro"] div.bg-ink-900, html[data-tema="oscuro"] .rounded-3xl.bg-ink-900 { background-color: #1A1A18 !important; }
html[data-tema="oscuro"] .bg-amarillo-50, html[data-tema="oscuro"] .bg-amarillo-100 { background-color: rgba(247,179,62,.14) !important; }
html[data-tema="oscuro"] .bg-azul-100 { background-color: rgba(56,126,194,.18) !important; }
html[data-tema="oscuro"] .bg-verde-100 { background-color: rgba(76,160,55,.18) !important; }
html[data-tema="oscuro"] .bg-rojo-100 { background-color: rgba(223,66,58,.18) !important; }
html[data-tema="oscuro"] .bg-morado-100 { background-color: rgba(129,23,156,.24) !important; }

/* Texto */
html[data-tema="oscuro"] .text-ink-900, html[data-tema="oscuro"] .text-ink-800 { color: #F2F1EC !important; }
html[data-tema="oscuro"] .text-ink-600 { color: #B9B7B0 !important; }
html[data-tema="oscuro"] .text-ink-300 { color: #6E6C67 !important; }
html[data-tema="oscuro"] .text-amarillo-700, html[data-tema="oscuro"] .text-amarillo-600 { color: #F9CB58 !important; }
html[data-tema="oscuro"] .text-verde-700 { color: #8ECB7F !important; }
html[data-tema="oscuro"] .text-azul-500 { color: #6FA6DB !important; }
html[data-tema="oscuro"] .text-rojo-500 { color: #EC8880 !important; }
html[data-tema="oscuro"] .text-morado-500 { color: #C072DB !important; }
html[data-tema="oscuro"] .hover\:text-azul-500:hover { color: #8FBAE1 !important; }

/* Líneas */
html[data-tema="oscuro"] .border-ink-100, html[data-tema="oscuro"] .divide-ink-100 > * + * { border-color: #2C2C29 !important; }
html[data-tema="oscuro"] .border-ink-900 { border-color: #F2F1EC !important; }

/* Botones negros → claros (para que se vean sobre el fondo oscuro) */
html[data-tema="oscuro"] a.bg-ink-900, html[data-tema="oscuro"] button.bg-ink-900 { background-color: #F2F1EC !important; color: #0E0E0D !important; }
html[data-tema="oscuro"] a.bg-ink-900:hover, html[data-tema="oscuro"] button.bg-ink-900:hover { background-color: #f7b33e !important; color: #0E0E0D !important; }
html[data-tema="oscuro"] .shadow-xl, html[data-tema="oscuro"] .shadow-2xl, html[data-tema="oscuro"] .shadow-lg { --tw-shadow-color: rgba(0,0,0,.6); }

/* Menú */
html[data-tema="oscuro"] header#nav, html[data-tema="oscuro"] header.sticky { border-color: #2C2C29 !important; }
html[data-tema="oscuro"] .bq-boton:hover, html[data-tema="oscuro"] .tema-boton:hover { background: rgba(255,255,255,.08); }

/* Preguntas frecuentes (inicio) */
html[data-tema="oscuro"] .faq[open] .faq-mas { background: #F2F1EC; color: #0E0E0D; border-color: #F2F1EC; }
html[data-tema="oscuro"] .faq summary:hover .faq-mas { border-color: #F2F1EC; color: #F2F1EC; }

/* Formularios: servoluntario */
html[data-tema="oscuro"] .field input, html[data-tema="oscuro"] .field select, html[data-tema="oscuro"] .field textarea,
html[data-tema="oscuro"] .q input, html[data-tema="oscuro"] .q select, html[data-tema="oscuro"] .q textarea { background: #171716; border-color: #2C2C29; color: #F2F1EC; }
html[data-tema="oscuro"] .field input:disabled { background: #121211; }
html[data-tema="oscuro"] .field input:focus ~ label, html[data-tema="oscuro"] .field input:not(:placeholder-shown) ~ label,
html[data-tema="oscuro"] .field select:focus ~ label, html[data-tema="oscuro"] .field select:valid:not([value=""]) ~ label,
html[data-tema="oscuro"] .field textarea:focus ~ label, html[data-tema="oscuro"] .field textarea:not(:placeholder-shown) ~ label { background: #171716; color: #8FBAE1; }
html[data-tema="oscuro"] .field > label { color: #84827C; }
html[data-tema="oscuro"] .field .hint, html[data-tema="oscuro"] .q .q-h, html[data-tema="oscuro"] .section-head .sub, html[data-tema="oscuro"] .review-row .k { color: #B9B7B0; }
html[data-tema="oscuro"] .q > label, html[data-tema="oscuro"] .q > .q-t, html[data-tema="oscuro"] .review-row .v { color: #F2F1EC; }
html[data-tema="oscuro"] .chips label { border-color: #2C2C29; }
html[data-tema="oscuro"] .chips label:has(input:checked) { background: rgba(247,179,62,.14); border-color: #f7b33e; }
html[data-tema="oscuro"] .stepper-item.active { color: #F2F1EC; }
html[data-tema="oscuro"] .stepper-dot, html[data-tema="oscuro"] .progress-bar { background: #2C2C29; }
html[data-tema="oscuro"] .stepper-item.active .stepper-dot { background: #F2F1EC; color: #0E0E0D; }
html[data-tema="oscuro"] .review-row, html[data-tema="oscuro"] .section-head { border-color: #2C2C29; }
html[data-tema="oscuro"] .section-head .num { background: #F2F1EC; color: #0E0E0D; }
html[data-tema="oscuro"] .resume-banner { background: linear-gradient(135deg, rgba(247,179,62,.16), rgba(56,126,194,.18)); }
html[data-tema="oscuro"] .mun-lista { background: #171716; border-color: #2C2C29; }
html[data-tema="oscuro"] .mun-lista li[aria-selected="true"], html[data-tema="oscuro"] .mun-lista li:hover { background: rgba(247,179,62,.16); }
html[data-tema="oscuro"] .mun-lista li.vacio { color: #B9B7B0; }
html[data-tema="oscuro"] .mun-ok { color: #8ECB7F !important; }
html[data-tema="oscuro"] .aporta { background: rgba(247,179,62,.1); }
html[data-tema="oscuro"] .aporta-cifra, html[data-tema="oscuro"] .aporta p { color: #F2F1EC; }
html[data-tema="oscuro"] .aporta-cifra small { color: #B9B7B0; }
html[data-tema="oscuro"] .aporta-ok input { accent-color: #f7b33e; }

/* Formularios: sumarme / eventos */
html[data-tema="oscuro"] .seg { background: #20201E; }
html[data-tema="oscuro"] .seg span, html[data-tema="oscuro"] .otra > span:first-child, html[data-tema="oscuro"] .otra .pre, html[data-tema="oscuro"] .otra .post { color: #B9B7B0; }
html[data-tema="oscuro"] .seg input:checked + span, html[data-tema="oscuro"] .montos input:checked + span, html[data-tema="oscuro"] .opciones input:checked + span { background: #F2F1EC; color: #0E0E0D; border-color: #F2F1EC; }
html[data-tema="oscuro"] .montos span, html[data-tema="oscuro"] .otra, html[data-tema="oscuro"] .opciones span, html[data-tema="oscuro"] .vista,
html[data-tema="oscuro"] .campo input, html[data-tema="oscuro"] .campo select { background: #171716; border-color: #2C2C29; color: #F2F1EC; }
html[data-tema="oscuro"] .montos span:hover, html[data-tema="oscuro"] .otra:focus-within, html[data-tema="oscuro"] .campo input:focus, html[data-tema="oscuro"] .campo select:focus { border-color: #F2F1EC; }
html[data-tema="oscuro"] .campo > span, html[data-tema="oscuro"] .impacto-txt { color: #F2F1EC; }
html[data-tema="oscuro"] .enviar { background: #F2F1EC; color: #0E0E0D; }
html[data-tema="oscuro"] .enviar:hover { background: #f7b33e; }

/* Aviso de privacidad */
html[data-tema="oscuro"] .legal p, html[data-tema="oscuro"] .legal li { color: #B9B7B0; }
html[data-tema="oscuro"] .legal strong, html[data-tema="oscuro"] .legal a { color: #F2F1EC; }

/* Mural (usa variables) */
html[data-tema="oscuro"] { --paper: #0E0E0D; --paper-sunk: #171716; --ink: #F2F1EC; --ink-2: #B9B7B0; --ink-3: #84827C; --rule: #2C2C29; --rule-strong: #3A3A37; --nacional: #F2F1EC; }

/* Mapa del inicio */
html[data-tema="oscuro"] .mx-mun .municipios path { fill: #2A2A27; stroke: #0E0E0D; }
html[data-tema="oscuro"] .mx-mun .municipios path.edo { fill: #4A3C1E; }
html[data-tema="oscuro"] .mx-mun .municipios path.on { fill: #f7b33e; }
html[data-tema="oscuro"] .mx-mun .municipios path:hover { fill: #387ec2; }

/* Footer compartido y buscador */
html[data-tema="oscuro"] .pie { color: #F2F1EC; }
html[data-tema="oscuro"] .pie-frase, html[data-tema="oscuro"] .pie-cta-pie strong, html[data-tema="oscuro"] .pie-canal { color: #F2F1EC !important; }
html[data-tema="oscuro"] .pie-cta, html[data-tema="oscuro"] .pie-grid, html[data-tema="oscuro"] .pie-legal { border-color: #2C2C29; }
html[data-tema="oscuro"] .pie-cta-pie p { color: #B9B7B0; }
html[data-tema="oscuro"] .pie-grid nav a, html[data-tema="oscuro"] .pie-grid nav button { color: #E2E0DA; }
html[data-tema="oscuro"] .pie-btn { background: #F2F1EC; color: #0E0E0D !important; }
html[data-tema="oscuro"] .pie-btn-2 { background: transparent; color: #F2F1EC !important; box-shadow: inset 0 0 0 1.5px #F2F1EC; }
html[data-tema="oscuro"] .pie-btn-2:hover { background: #F2F1EC; color: #0E0E0D !important; }
html[data-tema="oscuro"] .pie-red { color: #B9B7B0 !important; }
html[data-tema="oscuro"] .pie-red:hover { background: #F2F1EC; color: #0E0E0D !important; }
html[data-tema="oscuro"] .pie-canal { box-shadow: inset 0 0 0 1px #3A3A37; }
html[data-tema="oscuro"] .pie-legal a:hover { color: #F2F1EC; }
html[data-tema="oscuro"] #buscador .bq-panel { background: #171716; }
html[data-tema="oscuro"] #buscador .bq-barra { border-color: #2C2C29; }
html[data-tema="oscuro"] #buscador input, html[data-tema="oscuro"] #buscador .bq-res a { color: #F2F1EC; }
html[data-tema="oscuro"] #buscador .bq-x { background: #20201E; color: #B9B7B0; }
html[data-tema="oscuro"] #buscador .bq-res a:hover, html[data-tema="oscuro"] #buscador .bq-res a.sel { background: rgba(247,179,62,.14); }

/* Botón de tema */
.tema-boton { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 0; background: transparent; color: inherit; cursor: pointer; transition: background .15s; }
.tema-boton:hover { background: rgba(0,0,0,.06); }
.tema-boton svg { width: 20px; height: 20px; }
.tema-boton .luna { display: block; } .tema-boton .sol { display: none; }
html[data-tema="oscuro"] .tema-boton .luna { display: none; } html[data-tema="oscuro"] .tema-boton .sol { display: block; }
html[data-tema="oscuro"] .vista-muro b { color: var(--vr, #F2F1EC); }
