/* ------ */
/* Banner */
/* ------ */

.div-banner {
    width: 90%;
    height: auto;
    margin: 0 auto; 
}

.div-banner img {
  display: block; 
  margin: 0 auto; 
  max-width: 100%;
  height: auto;
}

/* ------ */
/* Titulo */
/* ------ */

.tit-departamento {
  width: 90%;
  margin: 0 auto;
  font-family: Verdana; 
  font-weight: bold; 
  color: green;
  text-align: center;
}

/* ---------------- */
/* ---------------- */
/* CONTACTOS        */
/* ---------------- */
/* ---------------- */

.div-contacto {
    border-radius: 15px; /* Redondeo para las cuatro esquinas */
    background-color: #FFC5C1;
    padding: 10px;
    padding-top: 0px;
    /*order: 1px solid black;*/
    width: 75%;
    margin: 0 auto;
}

.div-contacto-metodos {
    border-radius: 10px; /* Redondeo para las cuatro esquinas */
    background-color: #FFF1F0;
    padding: 5px;
    width: 98%;
    margin-top: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;     /* eje vertical */
    height: 50px;           /* necesario para ver el efecto vertical */
}

/* ---------------- */
/* ---------------- */
/* DOCUMENTACION    */
/* ---------------- */
/* ---------------- */

.div-documentacion {
    border-radius: 15px; /* Redondeo para las cuatro esquinas */
    background-color: #D6FFC1;
    padding: 10px;
    padding-top: 0px;
    /*order: 1px solid black;*/
    width: 90%;
    margin: 0 auto;
}

.div-card-contenedor {
  display: flex;       /* activa el modo flex */
  gap: 10px;           /* espacio entre divs */
}

.div-card {
  background: lightblue;
  padding: 20px;
  width: 33%;
  border: 1px solid #000;
}

/* ------- */
/* details */
/* ------- */

.div-documentacion details {   
    font-family: sans-serif;   
    width: 100%;   
    /*border: 1px solid lightgrey;*/   
    border-radius: 10px;   
    /*margin: 1rem;*/
    list-style:none; 
    background-color: #F5FFF0;
} 

/* details: al pasar sobre control */
.div-documentacion details:hover {   
    background-color: #FFFFFF;
}
 
/* details: descripcion */
.div-documentacion details summary {   
    margin: 0.5rem;   
    padding: 0.5rem;   
    cursor: pointer; 
}

/* details: icono en contenido colapsado */
.div-documentacion details summary::marker {
  content: "+ ";
  color: indigo;
  font-size: 2rem;
}

/* details: icono en contenido desplegado */
.div-documentacion details[open] summary::marker {
  content: "- ";
} 

/* ---------------- */
/* ---------------- */
/* pildoras         */
/* ---------------- */
/* ---------------- */

.div-pildora {
    border-radius: 15px; /* Redondeo para las cuatro esquinas */
    background-color: #FFE992;
    padding: 10px;
    padding-top: 0px;
    /*order: 1px solid black;*/
    width: 90%;
    margin: 0 auto;
}

/* ------- */
/* details */
/* ------- */

.div-pildora details {   
    font-family: sans-serif;   
    width: 100%;   
    /*border: 1px solid lightgrey;*/   
    border-radius: 10px;   
    /*margin: 1rem;*/
    list-style:none; 
    background-color: #FFFAE6;
} 

/* details: al pasar sobre control */
.div-pildora details:hover {   
    background-color: #FFFFFF;
}
 
/* details: descripcion */
.div-pildora details summary {   
    margin: 0.5rem;   
    padding: 0.5rem;   
    cursor: pointer; 
}

/* details: icono en contenido colapsado */
.div-pildora details summary::marker {
  content: "+ ";
  color: indigo;
  font-size: 2rem;
}

/* details: icono en contenido desplegado */
.div-pildora details[open] summary::marker {
  content: "- ";
} 

/* ---------------- */
/* ---------------- */
/* resueltos        */
/* ---------------- */
/* ---------------- */

.div-resueltos {
    border-radius: 15px; /* Redondeo para las cuatro esquinas */
    background-color: #C1FFF7;
    padding: 10px;
    padding-top: 0px;
    /*order: 1px solid black;*/
    width: 90%;
    margin: 0 auto;
}

.font-resueltos {
    font-size: clamp(10px, 1vw, 16px);
}

.img-resueltos {
    width: 30px;
    height: auto;
    display: block;
}

.img-resueltos-pdf {
    width: clamp(50px, 35vw, 300px);
    height: auto;
    border: 1px solid; 
    display: block;
    color: black;
    border-radius: 10px; 
}

.img-resueltos-apartado {
    vertical-align:middle;
    height: 30px;
    width: 30px;
}

.img-resueltos-ref {
    font-family: Arial; 
    font-weight: bold;
}

.div-resueltos-apartado {
    padding: 1px !important;
}

.div-resueltos-alternativa {
    padding: 1px !important;
    padding-left: 30px !important;
}

.container-resueltos {   
    display: grid;   
    grid-template-areas:     
        "ejer ejerPdf ejerApart";      
    grid-template-columns: 1fr 2fr 3fr;  
    width: 100%;
    margin: 0 auto;
    list-style:none; 
    background-color: #C1FFF7;

}

.container-resueltos div {   
    background-color: #C1FFF7;   
    padding: 10px;
}

.container-resueltos div.ejer {  
    grid-area: ejer;
}

.container-resueltos div.ejerPdf {   
    grid-area: ejerPdf;  
    display: block; 
    margin: 0 auto; 
    max-width: 100%;
    height: auto;

}
.container-resueltos div.ejerApart {   
    grid-area: ejerApart;
}

/* ------- */
/* buttom */
/* ------- */

.resueltos-pulse-effect {   
    padding-top: 5px;   
    padding-bottom: 5px;   
    padding-left: 10px;   
    padding-right: 5px;   
    display: flex;   
    align-items: center;   
    border: none;   
    color: white;  
    margin-bottom: 5px;
    width: clamp(150px, 15vw, 90%);
    /*width: 90%;*/  
    /*height: 40px;*/   
    cursor: pointer;   
    color: black;
    border-radius: 5px;   
    background-color: #F0FFFD;    
    transition: transform 0.3s ease-in-out; /* Transición suave del efecto de pulsación */ 
}
            
.resueltos-pulse-effect:hover {   
    background-color: #FFFFFF; /* Cambia el color al pasar el cursor sobre el botón */ 
}
            
.resueltos-pulse-effect:active {   
    transform: scale(0.9); /* Reduce ligeramente el tamaño del botón cuando se hace clic */ 
}          

/* ---------------- */
/* ---------------- */
/* ENLACES          */
/* ---------------- */
/* ---------------- */

.div-enlaces {
    border-radius: 15px; /* Redondeo para las cuatro esquinas */
    background-color: #C1C1FF;
    padding: 10px;
    padding-top: 0px;
    /*order: 1px solid black;*/
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;     /* eje vertical */
}

.div-enlaces-empresas {
    font-family: Verdana;
    border-radius: 10px; /* Redondeo para las cuatro esquinas */
    background-color: #F0F0FF;
    padding: 5px;
    width: 20%;
    margin-top: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;     /* eje vertical */
    height: 50px;           /* necesario para ver el efecto vertical */
    gap: 10px;
}


/* -------------- */
/* -------------- */
/* TITULO details */
/* -------------- */
/* -------------- */

.blk-titulo {
  display: flex;
  align-items: center;     /* centra verticalmente */
  height: 50px;           /* necesario para ver el centrado vertical */
}

.blk-titulo p {
    font-family: sans-serif;  
    font-size: 25px;    
    display: flex;
    align-items: center;     /* centra verticalmente */
    padding-left: 10px;
}

/* -------------- */
/* -------------- */
/* CARDS          */
/* -------------- */
/* -------------- */

.card {
    border-radius: 10px; /* Redondeo para las cuatro esquinas */
    border-color: #F0F40B;
    border-width: 2px;     /* grosor del borde */
    border-style: solid;   /* estilo del borde */
    background-color: #FDFEE7;
    padding: 5px;
    width: 90%;
    margin-left: 75px;
    margin-right: 10px;
    margin-bottom: 10px;
    align-items: center;     /* eje vertical */
    height: 35px;           /* necesario para ver el efecto vertical */
    display: flex;

}

.card:hover {
  border-color: #F0F40B;
  background-color: #F8FA8F;
}