/* -------------------------------------------------
   DARK MODE
   - Texto → blanco
   - Fondo → negro
   - Adorno/Hover → varios tonos de gris
--------------------------------------------------- */
.theme-dark {
    /* ---------- TEXTOS (blanco) ---------- */
    --color-oscuro: #ffffff;   /* usado en muchos lugares como “texto principal” */
    --txt:          #ffffff;   /* texto principal */
    --txt-footer:   #ffffff;   /* texto en footer (sobre fondo oscuro) */
    --txt-color-claro: #ffffff;


    /* ---------- FONDOS (negro) ---------- */
    --color-claro:  #000000;   /* fondo general */
    --bgr:          #000000;   /* fondo general (también usado en contenedores) */
    --bgr-footer:   #000000;   /* texto que aparece sobre fondos claros (ahora negro) */
    --bgr-color-oscuro: #000000;


    /* colores auxiliares que en tu dark mode deben ser negros */
    --mint:    #000000;
    --cielo:   #000000;
    --yema:    #000000;
    --isabelina:#000000;

    /* ---------- ADORNOS / HOVER (gris) ---------- */
    --color-comodin: #777777;   /* gris medio */
    --txt-hover:    #777777;   /* hover gris */
    --malvarosa:    #777777;   /* gris (puedes ajustar tono) */
    --cazador:      #777777;   /* gris */
    --celestial:    #777777;   /* gris */

    /* Si alguna regla tiene colores fijos, los forzamos aquí */
    background: var(--bgr) !important;
    color:      var(--txt) !important;
}

h1.titulo-editorial, .editorial, .editorial a {
    color: var(--txt-footer);
}

/* -------------------------------------------------
   HIGH‑CONTRAST (HC)
   - Negro → #061c23 (color‑oscuro)
   - Blanco → #EAC435 (amarillo)
   - Gris → mantiene los mismos valores que en Dark
--------------------------------------------------- */
.theme-hc {
    /* ---------- TEXTOS (amarillo) ---------- */
    --color-oscuro: #EAC435;   /* texto principal */
    --txt:          #EAC435;   /* texto principal */
    --txt-footer:   #EAC435;   /* texto en footer */
    --txt-color-claro: #EAC435;

    /* ---------- FONDOS (color‑oscuro) ---------- */
    --color-claro:  #061c23;   /* fondo general (el “negro” del HC) */
    --bgr:          #061c23;   /* fondo general */
    --bgr-footer:   #061c23;   /* texto que aparece sobre fondos claros */
    --bgr-color-oscuro: #061c23;

    /* colores auxiliares que en HC deben ser el mismo “negro” */
    --mint:    #061c23;
    --cielo:   #061c23;
    --yema:    #061c23;
    --isabelina:#061c23;

    /* ---------- ADORNOS / HOVER (gris, idéntico a Dark) ---------- */
    --color-comodin: #777777;
    --txt-hover:    #777777;
    --malvarosa:    #777777;
    --cazador:      #777777;
    --celestial:    #777777;

    background: var(--bgr) !important;
    color:      var(--txt) !important;
}


h1.titulo-editorial, .editorial, .editorial a {
    color: var(--txt-footer);
}

/* ==============================================================
   SWITCH DE MODOS – ESTILOS REVISADOS
   ============================================================== */

/* -------------------------------------------------
   Contenedor (desktop = vertical, mobile = compact left)
--------------------------------------------------- */
#theme-switcher {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;          /* vertical en desktop */
    gap: 1.5rem;                      /* más espacio entre círculos */
    background: var(--bgr);
    color: var(--txt);
    border-radius: 0 4px 4px 0;
    padding: .5rem 0rem;
    /* box-shadow: 2px 2px 6px rgba(0,0,0,.2); */
    z-index: 9999;
    font-family: sans-serif;
}

/* -------------------------------------------------
   Botón común – aumentamos hit‑area
--------------------------------------------------- */
.theme-btn {
    position: relative;
    width: 1.5rem;          /* círculo ligeramente mayor */
    height: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 4px;
    box-shadow: none;
}

button .theme-btn {
    box-shadow: none;
}

/* Círculo visual */
.theme-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

/* -------------------------------------------------
   Iconos específicos (colores fijos)
--------------------------------------------------- */
#btn-default::before {
    background: conic-gradient(
        /* 0° → 90°  (arriba‑izquierda) */
        #061c23 0deg,
        #061c23 90deg,

        /* 90° → 180° (arriba‑derecha) */
        #fcfcf8 90deg,
        #fcfcf8 180deg,

        /* 180° → 270° (abajo‑derecha) */
        #C03221 180deg,
        #C03221 270deg,

        /* 270° → 360° (abajo‑izquierda) */
        #26a19d 270deg,
        #26a19d 360deg
    );
}
#btn-dark::before {
    background: linear-gradient(to right,
                #ffffff 50%,   /* blanco */
                #000000 50%);  /* negro */
}
#btn-hc::before {
    background: linear-gradient(to right,
                #061c23 50%,   /* negro alto‑contraste */
                #EAC435 50%);  /* amarillo */
}

/* -------------------------------------------------
   Texto bajo el círculo (etiquetas)
--------------------------------------------------- */
.theme-btn .label {
    position: absolute;
    bottom: -0.65rem;          /* suficiente espacio para todos */
    left: 50%;
    transform: translateX(-50%);
    font-size: .5rem;        /* legible pero discreto */
    white-space: nowrap;
    color: var(--txt);
}

/* -------------------------------------------------
   Estado activo (borde interno)
--------------------------------------------------- */
#theme-switcher button[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--txt);
    border-radius: 50%;
    box-sizing: border-box;
}

/* -------------------------------------------------
   Hover / foco
--------------------------------------------------- */
.theme-btn:hover::before,
.theme-btn:focus-visible::before {
    opacity: .85;
}
.theme-btn:hover::before {
    transform: scale(1.09);
    transition: transform .15s ease-out;
}

/* -------------------------------------------------
   MEDIA QUERY – MOBILE (≤ 600 px)
   • Contenedor pasa a la izquierda, sin barra completa.
   • Los botones quedan alineados horizontalmente con
     suficiente separación para dedos gruesos.
--------------------------------------------------- */
@media (max-width: 900px) {
    #theme-switcher {
        top: 0.2rem;               /* pegado al borde superior */
        left: .2rem;          /* un pequeño margen interior */
        right: auto;
        bottom: auto;
        transform: none;
        flex-direction: row;  /* horizontal */
        gap: .8rem;           /* mayor separación entre círculos */
        background: transparent;   /* quitamos fondo para que no tape el logo */
        padding: 0rem 0rem;
        border-radius: 0;     /* sin esquinas redondeadas en móvil */
        box-shadow: none;
    }

    .theme-btn {
        width: 1rem;
        height: 1rem;
    }

    .theme-btn .label {
        bottom: -0.75rem;      /* etiqueta más cerca del círculo */
        font-size: .5rem;
    }
}

/* -------------------------------------------------
   OPCIÓN INNOVADORA – CIRCULOS EN CADA ESQUINA
   • Activar añadiendo la clase .corner‑mode al <body>
   • Cada botón se posiciona en una esquina distinta.
   • Mantiene la misma hit‑area y etiquetas.
--------------------------------------------------- */
body.corner-mode #theme-switcher {
    display: block;               /* quitamos flex */
    top: auto; left: auto;
    right: auto; bottom: auto;
    transform: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Posiciones en esquinas */
body.corner-mode #btn-default { position: fixed; top: .5rem; left: .5rem; }
body.corner-mode #btn-dark     { position: fixed; top: .5rem; right: .5rem; }
body.corner-mode #btn-hc       { position: fixed; bottom: .5rem; left: .5rem; }

/* Si prefieres que el tercer botón quede en la esquina inferior‑derecha,
   simplemente cambia la regla anterior a `right: .5rem;` */


:root{
    --logo-sarancha-url: url("../Images/logo-sarancha-bgr-header.svg");
}
.theme-dark{
    --logo-sarancha-url: url("../Images/logo-sarancha-bgr-header.svg");   /* o negro */
}
.theme-hc{
    --logo-sarancha-url: url("../Images/logo-sarancha-bgr-header-yl.svg");
}



:root{
    --logo-sarancha-header-url: url("../Images/logo-sarancha-n-header.svg");
}
.theme-dark{
    --logo-sarancha-header-url: url("../Images/logo-sarancha-bgr-header.svg");   /* o negro */
}
.theme-hc{
    --logo-sarancha-header-url: url("../Images/logo-sarancha-bgr-header-yl.svg");
}




:root{
    --icon-instagram-url: url("../Images/instagram-icon.svg");
}
.theme-dark{
    --icon-instagram-url: url("../Images/instagram-icon.svg");   /* o negro */
}
.theme-hc{
    --icon-instagram-url: url("../Images/instagram-icon-yl.svg");
}



:root{
    --icon-facebook-url: url("../Images/facebook-icon.svg");
}
.theme-dark{
    --icon-facebook-url: url("../Images/facebook-icon.svg");   /* o negro */
}
.theme-hc{
    --icon-facebook-url: url("../Images/facebook-icon-yl.svg");
}



:root{
    --logo-gob-url: url("../Images/logo-chile.svg");
}
.theme-dark{
    --logo-gob-url: url("../Images/logo-chile.svg");   /* o negro */
}
.theme-hc{
    --logo-gob-url: url("../Images/logo-chile-a.svg");
}