#toggle-focus {
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    background-color: #5b4636;
    color: #e8dcc1 !important;
    padding-top: 1rem;
    padding-left: 2rem;
}

#toggle-focus svg {
    width: 20px;  
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px; 
}

.focus-mode-controls {
    position: fixed;
    right: 0px;
    bottom: 0px;
    z-index: 9999;
    background-color: #5b4636;
    border-radius: 999px 0 0 0 ;
    display: flex;

    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
    transform-origin: bottom right; 
    transform: scale(1);
    opacity: 1;
}

.focus-mode-controls.is-shrinking {
    transform: scale(0);
    opacity: 0;
}

.focus-options {
    background-color: #d9c598;
    padding: 0 10px;
    
}

/* .focus-options-box div:first-child {
    border-bottom: 1px solid #5b4636;
} */

.focus-options-box div {
    display: flex;
   
    align-items: center;
    
}


.focus-mode-controls button {
    
    color: #1e1e1e;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 9999px 0 0 0;
    background-color: #d9c598;
 /*    border: 1px solid red; */
 
}

.focus-mode-controls #font-dec {
    font-size:1rem;
    font-weight: 900;
    padding: 5px;
}

.focus-mode-controls #font-inc {
    font-size:1.4rem;
    font-weight: 900;
    padding: 5px;
}


/* BOTONERA DE TEMAS */
.theme-picker {
    display: flex;
    gap: 12px; /* Espacio entre los círculos */
    align-items: center;
}


/* Contenedor para alinear los círculos uniformemente */
.theme-picker {
    display: flex;
    gap: 12px; /* Espacio entre los círculos */
    align-items: center;
}

/* Estilo base para transformarlos en círculos */
.theme-picker .theme-btn {
    width: 20px;
    height: 20px;
    border-radius: 50% !important;
    cursor: pointer;
    padding: 5px;
    transition: all 0.25s ease;
    
    /* Reseteo de bordes nativos */
    border: 1px solid rgba(0, 0, 0, 0.1); 
}

/* Asignación de colores de fondo específicos */
#theme-light {
    background-color: #ffffff;
}

#theme-dark {
    background-color: #1e1e1e; /* Ajusta a tu negro/oscuro exacto */
    border-color: rgba(255, 255, 255, 0.1);
}

#theme-sepia {
    background-color: var(--wp--preset--color--tertiary); /* Ajusta a tu tono sepia/marrón exacto */
}


/* OTROS */


/* Ocultar todo lo que no sea el artículo */
body.in-focus-mode header,
body.in-focus-mode footer,
body.in-focus-mode .sidebar,
body.in-focus-mode .esconder-en-focus,
body.in-focus-mode .comments-area,
body.in-focus-mode .nav-links {
    display: none !important;
}

/* Centrar y limpiar el contenedor principal */
body.in-focus-mode .site-main,
body.in-focus-mode article {
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    float: none !important;
}

/* Tipografía super legible para el modo lectura */
body.in-focus-mode .entry-content {
    font-family: 'Georgia', serif !important;
    font-family: var(--wp--preset--font-family--titulos) !important;
    font-size: 1.5rem;
    line-height: 2 !important;
    letter-spacing: 0.01em;
}


/* Content size */

/* Cuando el body tenga la clase focus, redefinimos las variables de WordPress */
body.in-focus-mode {
    --wp--style--global--content-size: 1400px !important;
    --wp--style--global--wide-size: 1400px !important;
}

/* Esquemas de color usando variables CSS o clases directas */

/*DARK mode*/


body.in-focus-mode.focus-theme-dark {
    --wp--preset--color--contrast: #e0e0e0 !important;
    --wp--preset--color--tertiary:#bda776 !important;
    --wp--preset--color--tertiary-dark: #bda776 !important;
}

body.in-focus-mode.focus-theme-dark {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}



body.in-focus-mode.focus-theme-dark .wp-block-post-title {
    color: #e0e0e0 !important;
}

body.in-focus-mode.focus-theme-dark p {
    color: #e0e0e0 ;
}


body.in-focus-mode.focus-theme-dark .interview-guest,
body.in-focus-mode.focus-theme-dark .interview-host {
    color: var(--wp--preset--color--secondary) !important;
}

body.in-focus-mode.focus-theme-dark .wp-block-group {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

body.in-focus-mode.focus-theme-dark .floritura  g {
    fill: var(--wp--preset--color--secondary) !important;
}


/*SEPIA mode*/


body.in-focus-mode.focus-theme-sepia {
    background-color: #e8dcc1 !important;
    --wp--preset--color--secondary-dark: #90773f !important;
    --wp--preset--color--secondary: #90773f;
    
}

body.in-focus-mode.focus-theme-sepia .wp-block-group {
    background-color: #e8dcc1 !important;
    color: var(--wp--preset--color--contrast) !important;
    
}


/*LIGHT mode*/
body.in-focus-mode.focus-theme-light {
    background-color: #ffffff !important;
    color: #222222 !important;
}