/* SIDEBAR STICKY (template-parts/sidebar-sticky.php + inc/enfoque-sidebar.php).
   STICKY: acompaña al lector mientras hace scroll, dentro del alto de su columna (en la Home, el bloque Mundo).
   Siempre negro, igual que el Header, el Hero y el Footer: no usa los tokens del modo oscuro.
   Ancho previsto: 308 px. Variables globales (--enf-rojo, --enf-adminbar) vienen de header.css.
   Sin fuentes externas: usa la tipografía del tema (más peso y números tabulares para dar carácter). */

.enf-sb {
    --sb-negro: #0A0A0B;
    --sb-linea: rgba(255,255,255,.12);
    --sb-gris: #A8A8A8;
    box-sizing: border-box;
    width: 100%;
    background: var(--sb-negro);
    color: #fff;
    border-top: 4px solid var(--enf-rojo, #C70302);
    align-self: start;                 /* el sidebar ocupa solo su alto, aunque la columna sea más alta */
}
.enf-sb *, .enf-sb *::before, .enf-sb *::after { box-sizing: border-box; }
.enf-sb a { color: inherit; text-decoration: none; }

/* ---------- Sticky ---------- */
@media (min-width: 1020px) {
    .enf-sb {
        position: sticky;
        /* sidebar-sticky.js ajusta --enf-sb-top cuando el sidebar es más alto que la pantalla: en ese caso queda
           pegado por abajo (se ve su parte final) en vez de quedar cortado. */
        top: var(--enf-sb-top, calc(var(--enf-adminbar, 0px) + 125px));
    }
}

/* ---------- Módulos ---------- */
.enf-sb__mod { padding: 22px; border-bottom: 1px solid var(--sb-linea); }
.enf-sb__mod:last-child { border-bottom: 0; }
.enf-sb__rotulo {
    margin: 0 0 8px; padding: 0;
    font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase;
    color: var(--enf-rojo, #C70302);
}
.enf-sb__fuente { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--sb-gris); }
.enf-sb__fuente a { text-decoration: underline; text-underline-offset: 2px; }
/* Crédito de la fuente del clima: se conserva (la licencia CC BY 4.0 de Open-Meteo lo exige) pero discreto. */
.enf-sb__credito { margin-top: 12px; font-size: 10.5px; color: #8A8A8A; }
.enf-sb__fuente a:hover, .enf-sb__fuente a:focus-visible { color: #fff; }

/* ---------- Dólar ---------- */
.enf-sb__cifra { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.enf-sb__valor { font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.enf-sb__unidad { font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #B8B8B8; }

/* ---------- Clima ---------- */
.enf-sb__ciudades { list-style: none; margin: 0; padding: 0; }
.enf-sb__ciudad { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.enf-sb__ciudad:first-child { border-top: 0; }
.enf-sb__ico { flex: none; width: 28px; height: 28px; }
.enf-sb__ico svg { display: block; width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.enf-sb__ciudad-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.enf-sb__ciudad-n { font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.enf-sb__cond { font-size: 12px; color: var(--sb-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enf-sb__temp { flex: none; font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.enf-sb__temp i { font-style: normal; color: var(--enf-rojo, #C70302); }
.enf-sb__clima.is-vacio .enf-sb__temp, .enf-sb__clima.is-vacio .enf-sb__ico { opacity: .35; }

/* ---------- Banner de WhatsApp (imagen completa, enlazada) ---------- */
.enf-sb__wa { padding: 0; border-bottom: 0; }
.enf-sb__wa-enlace { display: block; overflow: hidden; background: #8e0000; }
/* La imagen trae las esquinas redondeadas "grabadas" (transparentes). Se amplía un 3 % desde el centro y el enlace
   recorta lo que sobra: así el banner queda con las esquinas rectas. Se pierde un 1,5 % por cada lado (la imagen tiene
   margen de sobra). Si se cambia la imagen por una de esquinas rectas, se puede quitar este transform. */
.enf-sb__wa-img { display: block; width: 100%; height: auto; transform: scale(1.03); transform-origin: center; transition: filter .25s ease; border-radius: 0; }
.enf-sb__wa-enlace:hover .enf-sb__wa-img, .enf-sb__wa-enlace:focus-visible .enf-sb__wa-img { filter: brightness(1.08) saturate(1.05); }
.enf-sb__wa-enlace:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.enf-sb__wa + .enf-sb__mod { border-top: 1px solid var(--sb-linea); }

/* ---------- Redes (iconos de 24 px; el del header mide 18 px) ---------- */
.enf-sb__redes-lista { display: flex; justify-content: space-between; gap: 6px; margin-top: 14px; }
.enf-sb__redes-lista a {
    flex: none; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff; opacity: .9;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.enf-sb__redes-lista svg { width: 24px; height: 24px; fill: currentColor; }
.enf-sb__redes-lista a:hover, .enf-sb__redes-lista a:focus-visible { color: #fff; background: var(--enf-rojo, #C70302); border-color: var(--enf-rojo, #C70302); opacity: 1; }
.enf-sb__redes-lista a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    .enf-sb__wa-img, .enf-sb__redes-lista a { transition: none; }
}