/*
Theme Name: erase_una_vez
Theme URI: https://muchoscuentos.com
Author: Ibai Moneo
Author URI: https://muchoscuentos.com
Description: Tema personalizado del sitio de cuentos infantiles 
'muchoscuentos.com' dedicado a la educación y diversión de los 
menores sin importar estatus social, origen, sexo, color de piel...
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: erase_una_vez
*/
/* Custom Theme Styles for erase_una_vez - global.css */
/* Contenedor principal del buscador */
.header__search {
    position: absolute; 
    flex-grow: 1.5;
    max-height: 4.5dvh;
    width: 35vw;
    left: 28.25vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transform: var(--search, scale(0));
    transition: transform 0.5s ease-in-out;
    z-index: 20;
}
/* Texto y botón en línea y centrados */
.header__form > div {
    display: flex;
    align-items:center;
    height: 100%;
    width: 100%;
	background-color: var( --bg-header); 
	border-radius: 2.5rem;
	border:.1em solid #fff;
    outline: .2em ridge #000;
	box-shadow: var(--btn-shadow);
}
/* Tamaño de elementos antes de escalar */
.header__form input {
    outline: none;
    border:none;
    color:transparent;
    background-color: transparent;  
	padding-left: clamp(.5rem, 0.471rem + 0.233vw, .75rem);
	width: 7dvw;
    height: calc(1rem + 1dvw);
	transition: all .6s; 
}
/* Estilos para el texto y del input */
.text{
    max-width: 75%;
    border-radius: 2.5em 0 0 2.5em;  
    flex:3;
}
/* Estilos para el botón */
.button  {
    position: relative;
    max-width: 25%;
    max-height: 100%;
    height: auto;
    background: url(/wp-content/uploads/2025/02/lupa.svg) center / clamp(.412rem, 1.97vh, 1.87rem ) no-repeat;
    border-radius: 0 2.5em 2.5em 0 ;
    cursor: pointer;    
    flex: 1;    
}
.header__form input:focus {
	width: 35dvw;
    height: 5dvh;
    color: var(--primary-color);   
}
/* footer */
.footer {
    position: relative;  
    background-color: var(--bg-footer);
    border-radius: .5em .5em 0 0;
    min-width: 100dvw;
    width: 100%;
    height: auto;
    bottom: -100%;
    margin-top: 0;
    right: 0;
    left: 0;
    padding: 2dvh 8dvw 1dvh 8dvw;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3dvw;
    overflow-x: hidden;
    overflow-y: auto;  /* Permite el desplazamiento vertical */
    z-index: 50;   
}
.footer__legales {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .8em;
}
.footer__secciones {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .8em;
}
.content__social {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.siguenos {
    margin: .75em 0;
    text-align: center;   
}
.footer__social {
    width: 100%;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
} 
.footer__warning {
    border-top: .03em solid var(--secondary-color);
}
.content__derechos {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.footer__derechos {
    width: 100%;
    display: flex;
    margin: auto;
    justify-content: space-between;
}
.footer__derechos img {
    color: var(--secondary-color);
}
.footer__legales, 
.footer__secciones,  
.content__social, 
.content__derechos, 
.footer__warning {
    padding: 2dvw;
}
.footer__legales h2,
.footer__secciones h2 {
    font-size: var(--pabc);
    font-weight: bold; 
    color: var(--f-primary-color); 
}
.footer__warning a, 
.footer__legales a,
.footer__secciones a {
    font-size: var(--p);
    font-weight: 500; 
    color: var(--f-accent-color); 
}
.licencia {
    font-size: var(--fp);
    font-weight: 500;  
}
/* Estilos RS pie de contenido */
.content__comparte__redes {
    margin: 0 0 .4em;
    font-size: var(--pabc);
    text-align: center;
    color: rgb(177, 98, 177);
    filter: drop-shadow(.05em .05em .01em rgba(8, 8, 8, 0.8));
    -webkit-text-stroke: .01em var(--accent-color);
} 
/* footer del contenido */
.content__footer--audiovideo {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: .3em .3em 1em .1em;
}
.footer__navigation--read {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    text-align: start; 
}
.footer__navigation--read li {
    margin-left: .5em;
    margin-top: .4em; 
    list-style: inside "\1F44C" ;
}
.footer__navigation--read a {
    text-decoration: none;
    text-wrap: balance;;
    color: rgb(255, 0, 0);
    filter: drop-shadow(.05em .05em .01em rgba(8, 8, 8, 0.8));
    -webkit-text-stroke: .01em var(--accent-color);
}
.footer__navigation--read li::marker {
    font-size: var(--pli);
}
.footer__navigation--read a {
    font-size: var(--plia);
}
.footer__navigation--read h2 {
    font-size: var(--pabc);
    margin: .5em 0 0 .2em;
    text-align: start; 
    color: rgb(163, 130, 163);
    filter: drop-shadow(.05em .05em .01em rgba(8, 8, 8, 0.8));
    -webkit-text-stroke: .01em var(--accent-color);
} 
.content a,
.content h1,
.content h2,
.content h3,
.navegacion-interactivo,
.content__contenido strong,
.modal__audiocuento__title {
    font-family: 'Patrick Hand SC', Verdana, Arial, sans-serif;
    text-wrap: stable;
    hyphens: auto;
    margin-inline: auto;
}
.content p,
.anchor__interactivo {
    font-family: 'Patrick Hand', Verdana, Arial, sans-serif;
    text-wrap: pretty;
    hyphens: auto;
    margin: .5lh auto;
}
.content__title,
.content__title__indice,
.content__title__single,
.content__title__archive,
.modal__audiocuento__title,
.content__title__archive--large {
    color: var(--accent-color);
    filter: drop-shadow(.05em .05em .01em rgba(8, 8, 8, 0.8));
    -webkit-text-stroke: .01em darkturquoise;
}
.content h1 {
    hyphens: none;
}
footer h2,
.breadcrumbs,
.newsletter a,
.breadcrumbs a,
.boton__standard,
.main__verdana h1,
.licencia__masinfo,
.respons__licencia,
.content__container,
.content__verdana p,
.content__verdana a,
.content__verdana h2,
.content__verdana h3 {
    font-family: 'Verdana', Arial, sans-serif;
    letter-spacing: var(--sans-spacing);
    text-wrap: pretty;
    margin-inline: auto;
    line-height: 1.5;
}
.respons__licencia {
    hyphens: auto;
    font-weight: 600;
    color: rgb(253, 4, 4);
}
.info__licencia {
    font-weight: 800;
}
.licencia__masinfo,
.anchor__interactivo {
    font-weight: 600;
    text-decoration: underline;
    color: var(--accent-color);
}
@media (orientation: landscape) {
    .header__search {
        position: relative;
        left: 7.5dvw;
        margin: auto;
        transition: ease .6s;
        transform: var(--search);
    } 
    .header__form >div {
        outline: .006em solid rgba(0, 0, 0, 0.6);
    }
    .footer {
        grid-template-columns: repeat(4, auto);
    }
    .footer__legales {   
        grid-column: 1 / 3;
    } 
    .footer__secciones {  
        grid-column: 3 / -1;
    }   
    footer .newsletter {
        grid-column: 1 / -1;
    }
    .content__social {
        grid-column: 1 / -1;
    } 
    .footer__warning {
        grid-column: 1 / 3;
        width: 40dvw;
    }   
    .content__derechos {
        grid-column: 3 / -1;
        border-top: .03em solid #aba;
        width: 40dvw;  
    } 
    .modal-content,
    .modal__content--instrucciones{
        margin: 50%;
        height: 70dvh;
        width: max(40rem, 25%);
    }
    .reseñas__existentes {
        width: 75%;
    }
    .content__comparte__redes,
    .footer__navigation--read h2  {
        font-size: var(--labc);
    }    
    .footer__navigation span,
    .footer__navigation--read li::marker {
        font-size: var(--lli);
    }
    .submit-rating-btn {
        font-size: var(--blh4);
    }
    .footer__navigation--read {
        width: 80%;
    }
    .footer__navigation--read a {
        font-size: var(--llia);
    }
}
@media (min-width: 768px) and (orientation: landscape){
    .footer {
        background-color: #000;
    }
    .comment-form-author input,
    .comment-form-email input,
    .form-submit input,
    .comment-form-comment textarea {
        position: relative;
        margin: auto;
    }
    .wp-comments-cookies-consent label {
        text-align: start;
    }
    .custom-comment-form {
        width: clamp(26.2rem, 60%, 31.5rem);
    }
}
@media (min-width: 1024px)  {
    .footer {
        padding:4dvh 4dvw 1dvh;
        grid-template-rows: min-content min-content;
        grid-template-columns: 36dvw repeat(2, 25dvw);       
        gap:  3dvw;
    }
    footer .newsletter {
        padding-top: .5em;
        max-width: 38rem;
        aspect-ratio: 23 / 15;
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        margin: 0 auto;
    } 
    .footer__legales {
        grid-column: 2 / 3;
    } 
    .footer__secciones {
        grid-column: 3 / -1;
    } 
    .content__social {
        grid-column: 1 / 2;
        border-top: .03em solid #aba;
    }
    .footer__warning {
        grid-column: 2 / 3;
        width: 25dvw;
    }   
    .content__derechos {
        grid-column: 3 / 4;
        width: 25dvw;
    }
    .modal__header h2 {
        color: var(--primary-color);
    }
    .reseñas__existentes {
        width: 100%;
    }
    .valoraciones {
        max-width: 40rem;
    }
    #rating-stars {
        width: 70%;
    }
}
/* Transiciones para dispositivos con cursor */
@media (hover: hover) and (pointer: fine) {
    .footer__legales a, 
    .footer__secciones a, 
    .newsletter__accept a {
        transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    }
    .footer__legales a:hover, 
    .footer__secciones a:hover, 
    .newsletter__accept a:hover {
        color: white;
        transform: scale(1.05);
    }
    .social__link img {
        transition: transform 0.3s ease-in-out;   
    }
    .social__link img:hover {
        transform: scale(1.3);
    }
    .footer__navigation li a,
    .content__indice ul li a,
    .content__lista--cuentos h2,
    .footer__navigation--read a {
        transition: -webkit-text-stroke, color 0.3s ease-in-out;
    }
    .footer__navigation li a:hover,
    .content__indice ul li a:hover,
    .content__lista--cuentos h2:hover,
    .footer__navigation--read a:hover {
        color: var(--accent-color);
        -webkit-text-stroke: .02em darkturquoise;
    }
    .content__secundario img {
        transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    }
    .content__secundario img:hover {
        transform: scale(1.1); 
        filter: drop-shadow(0 0.45rem 0.89rem rgba(0, 0, 0, 0.3)); 
    }
    .color,
    .galeria-miniatura {
        transition: transform 0.3s ease-in-out;
    }
    .color:hover,
    .galeria-miniatura:hover {
        transform: scale(1.1);
    }
    .boton-borrar,
    .color-selector,
    .color-selector,
    .boton-descargar {
        transition: transform 0.3s ease-in-out; 
    }
    .boton-borrar:hover,
    .color-selector:hover,
    .color-selector:hover,
    .boton-descargar:hover { 
        background-color: var(--bg-header);
    }
    .star {
        transition: color 0.3s ease-in-out;
    }
    .star:hover {
        color: gold; 
    }
    .nosotros__social a {
        transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
        }
    .nosotros__social a:hover {
        color: indigo;
        transform: scale(1.1);
        }
    .modal-close,
    .breadcrumbs a {
        transition: transform 0.3s ease-in-out;
    }
    .modal-close:hover,    
    .breadcrumbs a :hover {
        transform: scale(1.1);
    } 
    .boton__standard {
        transition: transform 0.3s ease-in-out;
        }
    .boton__standard:hover {
        background-color: indigo;
        }  
    .boton__seccion {
        transition: ease .5s transform scale;
    }
    .boton__seccion:hover {
        transform: scale(.95);
    } 
    .slider__btn {
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }
    .slider__btn:hover {
        opacity: 1;
    }
    .alphabet-letter,
    .alphabet-search button {
        transition: all 0.2s ease;
    }
    .alphabet-letter:hover,
    .alphabet-search button:hover {
    background-color: var(--accent-color);
    color: #fff;
    }
    .print-button {
        transition: background-color 0.3s;
    }
    .print-button:hover {
        background-color: #45a049;
    }
    #next,
    #prev {
        transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;    
    }
    #next:hover,
    #prev:hover {
        color: darkturquoise;
        transform: scale(1.05); 
    }
}
/* Efectos para pantallas táctiles */
@media (hover: none) and (pointer: coarse) {
    #next:active,
    #prev:active,
    .color:active,
    .slider__btn:active,
    .modal-close:active,
    .color-selector:active,
    .boton-borrar:active,
    .boton__seccion:active,
    .color-selector:active,
    .alphabet-letter:active,
    .boton__standard:active,
    .boton-descargar:active,
    .social__link img:active,
    .galeria-miniatura:active,
    .footer__legales a:active,
    .nosotros__social a:active,
    .footer__secciones a:active,
    .newsletter__accept a:active,
    .alphabet-search button:active,
    .footer__navigation li a:active,
    .content__indice ul li a:active,
    .content__lista--cuentos h2:active,
    .footer__navigation--read a:active {
        transform: scale(0.95); /* Pequeño efecto de presión al tocar */
        background-color: rgba(0, 0, 0, 0.1); /* Sutil cambio de color */
    }
    .breadcrumbs a:active,
    .content__secundario img:active {
        transform: scale(1.05); /* Menos intenso que el hover */
    }
}