@font-face {
    font-family: 'Cabin';
    src: url('../../font/Cabin/Cabin-VariableFont_wdth\,wght.ttf');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Cabin';
}

/*------------MODO OSCURO---------------*/

#modoOscuro {
    display: none;
}

#invert-colors-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 999;
    background: #eee;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: #020016;
}

body.modo-oscuro {
    background-color: #121212;
    color: #e0e0e0;
}

body.modo-oscuro header h1 {
    color: #e0e0e0;
    text-shadow: none;
}

body.modo-oscuro .recurso1{
          border-radius: 20px;
    box-shadow: #b2ecfc 0px 2px 4px 0px, #b2ecfc 0px 2px 16px 0px;
}

body.modo-oscuro .encabezado,
body.modo-oscuro details,
body.modo-oscuro details > summary,
body.modo-oscuro details > p {
    background-color: #1e1e1e;
    color: #ccc;
    border-color: #444;
}

body.modo-oscuro footer{
    background-color: #1e1e1e;
    color: #ccc;
}

body.modo-oscuro footer a{
    color: #ccc;
}

body.modo-oscuro a:hover {
    color: #ffa500;
}

/*---------FIN MODO OSCURO----------*/


body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header header"
        "main main main main"
        "footer footer footer footer";
}

header {
    grid-area: header;
    /* padding: 1%;*/
}

header h1 {
    color: #020016;
    font-weight: bold;
    text-shadow: 4px 4px 1px #aee3f1;
    margin: 0 auto;
    display: inline-block;
}

.logo {
    display: inline;
    vertical-align: middle;
}

a,
a>button {
    text-decoration: none;
    color: #7d526e;
}

a:hover {
    color: #f98735;
    /*font-size: 2em;*/
}

a:hover button {
    color: #020016;
    background: #f98735;
}

main {
    grid-area: main;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: auto 50% 30% auto;
    grid-template-areas:
        "encabezado encabezado encabezado encabezado"
        ". titulo titulo ."
        ". section recursos .";
}

/* --------------BUSCADOR DENTRO DE MAIN --------------*/

.encabezado {
    grid-area: encabezado;
    text-align: center;
    font-size: 2em;
    background: #aee3f1;
    color: #020016;
}

.encabezado input {
    font-size: 60%;
}

.encabezado button {
    padding: 0.5%;
    font-size: 0.5em;
}

form {
    margin: 2%;
}

#search-form {
    margin-top: 10px;
    padding: 1%;
}

#search-form input[type="text"] {
    padding: 5px;
    margin-right: 5px;
}

/* ----------------FIN BUSCAR ---------------------*/
.titulo {
    grid-area: titulo;
    text-align: center;
    font-size: 2em;
    padding: 2%;
}

.recursos {
    grid-area: recursos;
    display: grid;
    padding: 1rem;
    height: 15%;
    /* quitar si se tiene muchos*/
}

.recurso1 {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0px 1px 0px;
}

.recurso1 p {
    text-align: center;
}


section {
    grid-area: section;
    display: grid;
    grid-template-columns: 100%;
    /* text-align: center;*/
    margin: 2%;
    padding: 1rem;
}

article {
    /*padding: 2%;
    margin: 3%;
    border-radius: 20px ;
    box-shadow: #b2ecfc 0px 2px 4px 0px, #b2ecfc 0px 2px 16px 0px;*/
    position: relative;
    /* Hace que los elementos con position absoluta se alineen a este contenedor */
    padding: 3%;
    margin: 3%;
    border-radius: 20px;
    box-shadow: #b2ecfc 0px 2px 4px 0px, #b2ecfc 0px 2px 16px 0px;
    /* min-height: 100px;*/
}

article h3,
h4 {
    text-align: center;
    margin-bottom: 3%;
}


article ul,
article ol {
    /*list-style-type: none;*/
    font-size: 1em;
    padding: 2%;
    margin: 2%;
}

article ul li,
article ol li {
    margin: 2%;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: auto;
}

th,
td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

dt {
    font-weight: bold;
}

dl,
dd {
    font-size: 0.9rem;
}

dd {
    margin-bottom: 1em;
    margin-left: 1em;
}

/* Contenedor del acordeón */
.accordion {
    max-width: 800px;
    margin: 0 auto;
}

/* Estilo para cada bloque del acordeón */
details {
    background-color: #D5E0F0;
    /* Fondo claro */
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
    filter: drop-shadow(5px 5px 5px #b2ecfc
            /*#38629F*/
        );
    /* Sombra azul oscuro */
    transition: filter 0.3s ease;
}

/* Efecto al pasar el ratón */
details:hover {
    filter: drop-shadow(5px 5px 4px #244E8A);
    /* Sombra más intensa */
}

/* Efecto cuando está abierto */
details[open] {
    filter: drop-shadow(2px 2px 10px #244E8A);
    /* Sombra suave */
}

/* Título del acordeón */
details>summary {
    color: #244E8A;
    /* Azul principal */
    padding: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    /* Elimina el borde al hacer clic */
    user-select: none;
    /* Evita seleccionar el texto al hacer clic */
    background-color: #FFFFFF;
    /* Fondo blanco para el título */
    border-bottom: 1px solid #85adb8
        /*#38629F*/
    ;
    /* Línea divisoria azul */
}

/* Efecto al pasar el ratón sobre el título */
details>summary:hover {
    background-color: #D5E0F0;
    /* Fondo claro al pasar el ratón */
    color: #38629F;
    /* Azul intermedio */
}

/* Contenido del acordeón */
details>p {
    padding: 10px 20px;
    color: #244E8A;
    /* Azul principal para el texto */
    font-size: 1rem;
    line-height: 1.5;
    background-color: #FFFFFF;
    /* Fondo blanco para el contenido */
    border-top: 1px solid #38629F;
    /* Línea divisoria azul */
}

/* Estilo para los enlaces dentro del contenido */
details>p a {
    color: #244E8A;
    /* Azul principal para los enlaces */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

/* Efecto al pasar el ratón sobre el enlace */
details>p a:hover {
    color: #38629F;
    /* Color intermedio */
    text-decoration: underline;
}

/* Estilo para los enlaces al hacer clic */
details>p a:active {
    color: #244E8A;
    /* Vuelve al azul principal */
}


/*article button { 
    /*margin: 2.5%;
    padding: 2.5%;
    bottom: 10px;
    box-shadow: #b2ecfc 0px 0px 5px 0px, #b2ecfc 0px 0px 1px 0px;*/
/*  position: absolute; /* Posiciona el botón dentro del article */
/*bottom: 10px; /* Distancia del fondo del contenedor */
/*left: 50%; /* Centra horizontalmente */
/*transform: translateX(-50%); /* Ajusta el centro real del botón */
/*padding: 1rem;
    box-shadow: #b2ecfc 0px 0px 5px 0px, #b2ecfc 0px 0px 1px 0px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}*/

footer {
    grid-area: footer;
    text-align: center;
    padding: 2%;
    font-size: 2em;
    color: #020016;
    background: #aee3f1;
}

footer .inicio a {
    color: #020016;
}


.subir {
    font-size: 5em; /*4em*/
    position: fixed;
    /*posición fija*/
    bottom: 10px;
    right: 15px;
    /*se situe a la derecha*/
    z-index: 4;
    /*situadi encima de todo el contenido*/
}

/*-------------PARA TABLET--------------------*/
@media screen and (max-width: 1080px) {
    main {
        grid-area: main;
        display: grid;
        grid-template-columns: auto;
        grid-template-areas:
            "encabezado encabezado"
            "titulo titulo"
            "section section"
            "recursos recursos";
    }

    section {
        grid-area: section;
        display: grid;
        grid-template-columns: 50% 50%;
        text-align: center;
        margin: 2%;
    }

}

/*-------------PARA MÓVIL---------------------*/
@media screen and (max-width: 800px) {
    main {
        grid-area: main;
        display: grid;
        grid-template-columns: auto;
        grid-template-areas:
            "encabezado"
            "titulo"
            "recursos"
            "section"
        ;
    }

    section {
        display: grid;
        grid-template-columns: 100%;
        text-align: center;
    }

    article {
        position: static;
        /* Cambia a flujo normal en móviles */
        min-height: auto;
        /* Ajusta la altura automáticamente */
    }

    article button {
        position: static;
        /* Desactiva posición absoluta */
        transform: none;
        /* No hace falta centrar con translate */
        margin-top: 1rem;
        /* Añade espacio entre el texto y el botón */
        margin-left: auto;
        /* Opcional: para centrar */
        margin-right: auto;
        /* Opcional: para centrar */
    }

}