/* T-250: cabecera, 112, tokens y pie comunes de las páginas SEO estáticas
   (urgencias/, seo_expandido/*, legal/). Mismos valores que
   frontend/src/styles/tokens.ts (fondo #0f1b2b). Sin JS. Se enlaza DESPUÉS de
   los <style> de cada página, así que gana por orden sin !important. */
:root{--eia-color-bg:#0f1b2b;--eia-color-surface:#16263a;--eia-color-border:#2a3a50;--eia-color-text:#fff;--eia-color-text-2:#ccd6e2;--eia-color-text-3:#9fb0c4;--eia-color-link:#8fc3ff;--eia-color-brand:#1769e0;--eia-color-brand-hover:#0b63c7;--eia-color-urgencia:#c0392b;--eia-color-urgencia-hover:#a82f22;--eia-color-focus:#7cb4ff;--eia-radius-btn:12px;--eia-touch:44px}
html,body{background:var(--eia-color-bg)}
body{overflow-x:hidden}
img,svg,table{max-width:100%}
h1{overflow-wrap:anywhere}
.eia-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--eia-color-border)}
.eia-cab .eia-marca{display:inline-flex;align-items:center;min-height:var(--eia-touch);padding:0 4px;color:var(--eia-color-text);font-size:18px;font-weight:800;letter-spacing:-.2px;text-decoration:none}
.eia-cab-acc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.eia-cab-acc a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--eia-touch);min-width:var(--eia-touch);padding:0 14px;border-radius:var(--eia-radius-btn);font-size:14.5px;font-weight:800;text-decoration:none;text-align:center;box-sizing:border-box}
.eia-cab-acc .eia-btn-app{background:var(--eia-color-brand);color:#fff}
.eia-cab-acc .eia-btn-app:hover{background:var(--eia-color-brand-hover)}
.eia-cab-acc .eia-btn-112{background:var(--eia-color-urgencia);color:#fff}
.eia-cab-acc .eia-btn-112:hover{background:var(--eia-color-urgencia-hover)}
.eia-cab-acc .eia-btn-txt{color:var(--eia-color-link);padding:0 8px}
.eia-cab a:focus-visible{outline:3px solid var(--eia-color-focus);outline-offset:2px}
.eia-cab-fuera{max-width:860px;margin:0 auto;padding:0 18px}
footer{border-top:1px solid var(--eia-color-border);color:var(--eia-color-text-3)}
footer a{color:var(--eia-color-link)}
.cta,.btn-diag{border-radius:var(--eia-radius-btn)}

/* T-443: tema claro de las páginas estáticas (urgencias/, seo_expandido/, legal/). Oscuro sigue siendo el predeterminado;
   con prefers-color-scheme: light se sustituyen fondos y textos escritos a mano en cada página. Mismos valores que el
   tema claro de la app (frontend/src/styles/tokens.ts). El rojo de urgencia/112, los héroes azules y los CTA no cambian. */
:root{color-scheme:dark light}
@media (prefers-color-scheme:light){
:root:not([data-theme=dark]){--eia-color-bg:#f2f5f9;--eia-color-surface:#fff;--eia-color-surface-2:#f6f8fb;--eia-color-border:#cfd8e3;--eia-color-text:#101a26;--eia-color-text-2:#33425a;--eia-color-text-3:#526077;--eia-color-link:#0b5cc4;--eia-color-focus:#0b5cc4}
html:not([data-theme=dark]),html:not([data-theme=dark]) body{background:#f2f5f9;color:#101a26}
html:not([data-theme=dark]) body h1,html:not([data-theme=dark]) body h2,html:not([data-theme=dark]) body h3,html:not([data-theme=dark]) body strong,html:not([data-theme=dark]) body .intro,html:not([data-theme=dark]) body .sirve strong,html:not([data-theme=dark]) body .faq summary,html:not([data-theme=dark]) body .linkcard b{color:#101a26}
html:not([data-theme=dark]) body p,html:not([data-theme=dark]) body li,html:not([data-theme=dark]) body .faq div,html:not([data-theme=dark]) body .intro,html:not([data-theme=dark]) body .clave p,html:not([data-theme=dark]) body .calc-u{color:#33425a}
html:not([data-theme=dark]) body a,html:not([data-theme=dark]) body header a,html:not([data-theme=dark]) body .crumb a,html:not([data-theme=dark]) body footer a{color:#0b5cc4}
html:not([data-theme=dark]) body .crumb,html:not([data-theme=dark]) body footer,html:not([data-theme=dark]) body .revisado,html:not([data-theme=dark]) body .faq summary::after{color:#526077}
html:not([data-theme=dark]) body footer,html:not([data-theme=dark]) body .faq details,html:not([data-theme=dark]) body .otras a,html:not([data-theme=dark]) body .eia-cab{border-color:#cfd8e3}
html:not([data-theme=dark]) body .card,html:not([data-theme=dark]) body .linkcard,html:not([data-theme=dark]) body .faq details,html:not([data-theme=dark]) body .otras a{background:#fff;border-color:#cfd8e3;color:#101a26}
html:not([data-theme=dark]) body .otras a{color:#16314f}
html:not([data-theme=dark]) body .otras a:hover{background:#eaf0f6}
html:not([data-theme=dark]) body .note{background:#f6f8fb;border-left-color:#d9a200;color:#33425a}
html:not([data-theme=dark]) body .clave{background:#e8f1fd;border-left-color:#1769e0}
html:not([data-theme=dark]) body .clave b{color:#0b4ea8}
html:not([data-theme=dark]) body .peligro{background:#fdeceb;border-left-color:#c0392b}
html:not([data-theme=dark]) body .peligro b{color:#a51d14}
html:not([data-theme=dark]) body .peligro p{color:#5c1a14}
html:not([data-theme=dark]) body .aviso{background:#fff4d6;border-color:#e5c76a;color:#4a3510}
html:not([data-theme=dark]) body .hero,html:not([data-theme=dark]) body .hero h1,html:not([data-theme=dark]) body .hero h2,html:not([data-theme=dark]) body .hero p,html:not([data-theme=dark]) body .cta b,html:not([data-theme=dark]) body .cta span{color:#fff}
html:not([data-theme=dark]) body .hero p,html:not([data-theme=dark]) body .cta span{color:#eaf3ff}
html:not([data-theme=dark]) body .cta{color:#fff}
html:not([data-theme=dark]) body .cta em,html:not([data-theme=dark]) body .hero .cta{color:#0a4d99}
html:not([data-theme=dark]) body .saltar{background:#fff;color:#111}
html:not([data-theme=dark]) body .alerta112 a{color:#fff}
html:not([data-theme=dark]) body .btn-diag,html:not([data-theme=dark]) body .eia-cab-acc .eia-btn-app{color:#fff}
html:not([data-theme=dark]) body .eia-cab .eia-marca{color:#101a26}
html:not([data-theme=dark]) body .eia-cab-acc .eia-btn-txt{color:#0b5cc4}
html:not([data-theme=dark]) body .calc-campo input,html:not([data-theme=dark]) body .calc-campo select{background:#fff;color:#101a26;border-color:#66778c}
html:not([data-theme=dark]) body .calc-aviso{background:#fff4d6;color:#4a3510}
html:not([data-theme=dark]) body .calc-campo label{color:#101a26}
html:not([data-theme=dark]) body .pag,html:not([data-theme=dark]) body .indice a{background:#fff;border-color:#cfd8e3;color:#101a26}
html:not([data-theme=dark]) body .pag b,html:not([data-theme=dark]) body .sirve-t{color:#101a26}
html:not([data-theme=dark]) body .pag span,html:not([data-theme=dark]) body .sub{color:#526077}
}

:root[data-theme=light]{--eia-color-bg:#f2f5f9;--eia-color-surface:#fff;--eia-color-surface-2:#f6f8fb;--eia-color-border:#cfd8e3;--eia-color-text:#101a26;--eia-color-text-2:#33425a;--eia-color-text-3:#526077;--eia-color-link:#0b5cc4;--eia-color-focus:#0b5cc4}
html[data-theme=light],html[data-theme=light] body{background:#f2f5f9;color:#101a26}
html[data-theme=light] body h1,html[data-theme=light] body h2,html[data-theme=light] body h3,html[data-theme=light] body strong,html[data-theme=light] body .intro,html[data-theme=light] body .sirve strong,html[data-theme=light] body .faq summary,html[data-theme=light] body .linkcard b{color:#101a26}
html[data-theme=light] body p,html[data-theme=light] body li,html[data-theme=light] body .faq div,html[data-theme=light] body .intro,html[data-theme=light] body .clave p,html[data-theme=light] body .calc-u{color:#33425a}
html[data-theme=light] body a,html[data-theme=light] body header a,html[data-theme=light] body .crumb a,html[data-theme=light] body footer a{color:#0b5cc4}
html[data-theme=light] body .crumb,html[data-theme=light] body footer,html[data-theme=light] body .revisado,html[data-theme=light] body .faq summary::after{color:#526077}
html[data-theme=light] body footer,html[data-theme=light] body .faq details,html[data-theme=light] body .otras a,html[data-theme=light] body .eia-cab{border-color:#cfd8e3}
html[data-theme=light] body .card,html[data-theme=light] body .linkcard,html[data-theme=light] body .faq details,html[data-theme=light] body .otras a{background:#fff;border-color:#cfd8e3;color:#101a26}
html[data-theme=light] body .otras a{color:#16314f}
html[data-theme=light] body .otras a:hover{background:#eaf0f6}
html[data-theme=light] body .note{background:#f6f8fb;border-left-color:#d9a200;color:#33425a}
html[data-theme=light] body .clave{background:#e8f1fd;border-left-color:#1769e0}
html[data-theme=light] body .clave b{color:#0b4ea8}
html[data-theme=light] body .peligro{background:#fdeceb;border-left-color:#c0392b}
html[data-theme=light] body .peligro b{color:#a51d14}
html[data-theme=light] body .peligro p{color:#5c1a14}
html[data-theme=light] body .aviso{background:#fff4d6;border-color:#e5c76a;color:#4a3510}
html[data-theme=light] body .hero,html[data-theme=light] body .hero h1,html[data-theme=light] body .hero h2,html[data-theme=light] body .hero p,html[data-theme=light] body .cta b,html[data-theme=light] body .cta span{color:#fff}
html[data-theme=light] body .hero p,html[data-theme=light] body .cta span{color:#eaf3ff}
html[data-theme=light] body .cta{color:#fff}
html[data-theme=light] body .cta em,html[data-theme=light] body .hero .cta{color:#0a4d99}
html[data-theme=light] body .saltar{background:#fff;color:#111}
html[data-theme=light] body .alerta112 a{color:#fff}
html[data-theme=light] body .btn-diag,html[data-theme=light] body .eia-cab-acc .eia-btn-app{color:#fff}
html[data-theme=light] body .eia-cab .eia-marca{color:#101a26}
html[data-theme=light] body .eia-cab-acc .eia-btn-txt{color:#0b5cc4}
html[data-theme=light] body .calc-campo input,html[data-theme=light] body .calc-campo select{background:#fff;color:#101a26;border-color:#66778c}
html[data-theme=light] body .calc-aviso{background:#fff4d6;color:#4a3510}
html[data-theme=light] body .calc-campo label{color:#101a26}
html[data-theme=light] body .pag,html[data-theme=light] body .indice a{background:#fff;border-color:#cfd8e3;color:#101a26}
html[data-theme=light] body .pag b,html[data-theme=light] body .sirve-t{color:#101a26}
html[data-theme=light] body .pag span,html[data-theme=light] body .sub{color:#526077}


/* T-448: botón «Pedir un electricista cerca» y bloque «Electricistas verificados en tu zona» de las urgencias. */
.btn-pedir{display:flex;align-items:center;justify-content:center;min-height:48px;margin:0 0 18px;padding:12px 18px;border-radius:12px;border:2px solid var(--eia-color-brand);background:transparent;color:var(--eia-color-link);font-weight:800;font-size:16px;text-decoration:none;text-align:center;box-sizing:border-box}
.btn-pedir:hover{background:rgba(23,105,224,.14)}
.btn-pedir:focus-visible,.zona-mt:focus-visible,.zona button:focus-visible,.zona input:focus-visible{outline:3px solid var(--eia-color-focus);outline-offset:2px}
.zona{margin:26px 0;padding:16px;border:1px solid var(--eia-color-border);border-radius:14px;background:var(--eia-color-surface)}
.zona h2{margin-top:0}
.zona-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.zona-fila label{flex:1 0 100%;font-weight:700;font-size:14.5px;color:var(--eia-color-text)}
.zona-fila input{flex:1 1 120px;min-width:0;min-height:48px;padding:0 12px;border-radius:10px;border:1px solid #66778c;background:var(--eia-color-bg);color:var(--eia-color-text);font:inherit;font-size:16px}
.zona-fila button{flex:0 0 auto;min-height:48px;padding:0 16px;border:0;border-radius:10px;background:var(--eia-color-brand);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.zona-fila button:disabled{opacity:.6;cursor:wait}
.zona-res{margin-top:12px;min-height:1px}
.zona-nota{margin:8px 0;font-size:14.5px}
.zona-mt{display:flex;align-items:center;gap:12px;min-height:56px;margin:8px 0;padding:10px 12px;border:1px solid var(--eia-color-border);border-radius:12px;color:var(--eia-color-text);text-decoration:none;background:var(--eia-color-bg)}
.zona-av{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--eia-color-border);color:var(--eia-color-text);font-weight:800}
.zona-tx{min-width:0;flex:1}.zona-n{display:block;font-weight:800;overflow-wrap:anywhere}
.zona-d{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:13.5px;color:var(--eia-color-text-2)}
.zona-ok{color:#6ee7a8}
.zona-enl{margin:12px 0 0}.zona-enl a{display:inline-flex;align-items:center;min-height:44px;color:var(--eia-color-link)}
@media (prefers-color-scheme:light){
html:not([data-theme=dark]) body .btn-pedir{color:#0b5cc4;border-color:#1769e0}
html:not([data-theme=dark]) body .zona{background:#fff;border-color:#cfd8e3}
html:not([data-theme=dark]) body .zona-fila label,html:not([data-theme=dark]) body .zona-n,html:not([data-theme=dark]) body .zona-mt{color:#101a26}
html:not([data-theme=dark]) body .zona-fila input{background:#fff;color:#101a26;border-color:#66778c}
html:not([data-theme=dark]) body .zona-fila button{color:#fff}
html:not([data-theme=dark]) body .zona-mt{background:#f6f8fb;border-color:#cfd8e3}
html:not([data-theme=dark]) body .zona-av{background:#dbe6f3;color:#101a26}
html:not([data-theme=dark]) body .zona-d{color:#33425a}
html:not([data-theme=dark]) body .zona-ok{color:#0b6b3a}
}

html[data-theme=light] body .btn-pedir{color:#0b5cc4;border-color:#1769e0}
html[data-theme=light] body .zona{background:#fff;border-color:#cfd8e3}
html[data-theme=light] body .zona-fila label,html[data-theme=light] body .zona-n,html[data-theme=light] body .zona-mt{color:#101a26}
html[data-theme=light] body .zona-fila input{background:#fff;color:#101a26;border-color:#66778c}
html[data-theme=light] body .zona-fila button{color:#fff}
html[data-theme=light] body .zona-mt{background:#f6f8fb;border-color:#cfd8e3}
html[data-theme=light] body .zona-av{background:#dbe6f3;color:#101a26}
html[data-theme=light] body .zona-d{color:#33425a}
html[data-theme=light] body .zona-ok{color:#0b6b3a}
.zona-prov{list-style:none;margin:10px 0 0;padding:0}.zona-prov a{display:inline-flex;align-items:center;min-height:44px;color:var(--eia-color-link)}
/* T-457 · bloque «¿Eres electricista?» de las urgencias: discreto */
.pro-elec{margin-top:22px;padding:12px 14px;border:1px solid #2a3a50;border-radius:11px;background:#111b29}
.pro-elec p{margin:0;font-size:14px;line-height:1.7;color:#ccd6e2}
.pro-elec strong{color:#fff}
.pro-elec a{display:inline-flex;align-items:center;min-height:44px;color:#9fc8f0;overflow-wrap:anywhere}
.pro-elec a:focus-visible{outline:3px solid #7cb4ff;outline-offset:2px}
html:not([data-theme=dark]) body .pro-elec{background:#fff;border-color:#cfd8e3}
html:not([data-theme=dark]) body .pro-elec p{color:#33425a}
html:not([data-theme=dark]) body .pro-elec strong{color:#101a26}
html:not([data-theme=dark]) body .pro-elec a{color:#0b5cc4}
