/*Paleta de colores (mis variables)*/
:root {
  --marron:#5C3317; 
  --verde: #8AA400; 
  --verde-suave: #dde2c5;
  --verde-suave-transparente:#dde2c5b9; /* PARA RESALTAR LOS MODALS*/
  --gris: #4A4A49;
  --blanco: #ffffff;
  --rojo: #9e1818;
  --gris-texto: #444;
  --gris-claro:#f9f9f9;
} 


/* calculo del borde y el padding. */
* { box-sizing: border-box;}

html, body {
    height: 100%; /*Asegura que el body tenga la altura completa de la pantalla (por si hacemos zoom el body ocupe todo el alto de la ventana del navegador)*/
    margin: 0;    /*Eliminamos los margenes del navegador   MUY IMPORTANTE PARA QUE QUEDE A PANTALLA COMPLETA LA WEB */
}

body{
     /* Creamos el grid */ 
    display: grid;

     /* Definimos la separación entre cada una de las zonas */
    grid-gap: 3px;
	
     /* Definimos el número de filas y columnas que va a tener la maqueta.*/
    grid-template-columns:  1fr 1fr;
    grid-template-rows: 150px 80px 1fr auto;
     
     /* Utilizaremos las areas para indicar a que está destinada cada area en la maqueta.*/
    grid-template-areas:
         "header header"
         "nav nav"
         "main main"
         "footer footer";


    font-family: Verdana,sans-serif,'Segoe UI';
	
    }


/*HEADER*/
header { 
    grid-area: header;
    width: 100%;
    min-height: 150px; /* Aseguramos que tenga espacio */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* ¡Fundamental para el móvil! */
    justify-content: center; 
    align-items: center;
    padding: 10px 2%;
    background-color: var(--blanco);
}

/*NAV*/
 nav{
	/*lo añadimos al grid*/
	grid-area:nav;
    width: 100%;
	height: auto; 
    display:flex;
	justify-content: center;
	align-items: center;
    box-shadow: 0px 1px 4px var(--gris);

   
 }

/*MAIN*/
 main{
	/*lo añadimos al grid*/
	grid-area:main;
    width: 100%;
    height: auto;
    padding:20px 0px 20px 0px;
	display: block;	
	justify-content: center;
	align-items: center;

   
 }

 .contenido{
    color: var(--gris-texto);
    line-height: 1.8;
    width: 80%;
    margin: 0% 10% 0% 10%;
    height: auto;
    text-align: justify;
    
 }

/*FOOTER*/
footer{
	/*lo añadimos al grid*/
	grid-area:footer;
    display:flex;
    flex-direction: row;
	width: 100%;
	height: auto; 
	color: var(--blanco);
    background-color: var(--marron);
	font-weight: 900;
	text-align: center;
	justify-content: center;
	align-items: center;
    gap:30px;
    padding: 10px;
}

footer a{
 color: var(--blanco);
 text-decoration: none;
}

footer a:hover{
 color: var(--verde);
 text-shadow: 0px 4px 12px var(--gris);

}

.enlaces-footer{
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content:flex-end;
    font-size: 0.8em;
}

.info-footer{
    
}


/*************************************/
/*ESTILO DE LA CABECERA*/
/*lOGO*/
.logo-login{
    display:flex;
    flex-direction: row;
    width: 100%;
    height: auto;

}

#logo{
   display: flex;
    align-items: center;
    flex: 0 1 auto; /* Se ajusta al contenido */
    
}

#logo img{
    width: 345px;
    height: auto;
}

/*Estado (mensaje de bienvenida y nombre del usuario autenticado)*/
.estado {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex: 1; /* Ocupa el espacio sobrante en el centro */
    gap: 15px;
    font-size: 0.9em;
}

/* Limpieza de párrafos internos */
.estado p, .estado span {
    margin: 0; /* Quitamos márgenes que desalinean */
    white-space: nowrap; /* Evita que el nombre de usuario salte de línea */
}

/*Boton zona*/

.boton-zona{
 
   width: auto; /* Que el botón crezca según el texto */
    min-width: 160px; 
    padding: 8px 15px;
    text-align: center;
    border-radius: 15px;
    background: var(--verde);
    color: var(--blanco);
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: 0.3s; /*El tiempo que dura el cambio con hover*/
    font-weight: 600;


}

.boton-zona:hover{
    background-color: var(--marron);
}

/****************************************************************************************************/
/*ESTILO DEL FORMULARIO LOGIN*/
#login-logout {
    display: flex;
    justify-content: column;
  
    gap: 10px;
    text-align: center;
    
}
.campo-login {
    display: flex;
    justify-content: right; /*Alineamos todo hacia la derecha así los campos input me coinciden.*/

}
.campo-login label {
    text-align: right; 
    margin-right: 10px;
}

.campo-login input {
    flex: 2;
    padding: 5px;
}

#boton-login{
       text-align: center; 
}


.boton-login-logout{
    
    width: auto; /* Que el botón crezca según el texto */
    min-width: 160px; 
    padding: 8px 15px;

    text-align: center;
    border-radius: 15px;
    transition: 0.3s; /*El tiempo qeu dura el cambio con hover */
    font-weight: 600;

    background: var(--verde);
    color: var(--blanco);
    font-weight: bold;
    text-decoration: none;
    border-radius: 25px;

}

.boton-login-logout:hover{
    
    background-color: var(--marron);

}

/****************************************************************************************************/
/*ESTILO DE LAS TABLAS*/


table{
    border-spacing: 0px;
    text-align: center;
   
}
td,th {
    border: solid 1px;
    padding: 5px;

}
input,label,select{
    margin: 5px 2px 5px 5px;
}

/****************************************************************************************************/
/*ESTILO DE LA BARRA NAV*/
.nav-front-end{
    background-color:var(--verde);
}

.nav-back-end{
    background-color: var(--marron);
    
}

.nav-back-end a{
    color:var(--blanco);
}

.nav-back-end a:hover{
    color:var(--verde-suave);
    text-shadow: 0px 2px 12px var(--blanco);
     
    
}

nav ul{

    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;

    flex-wrap: wrap; /*Permitirá que si el texto no entra en el nav por el tamaño de la pantalla entonces se pasa a una siguiente linea */
    
}
nav li{

    list-style: none;
    padding: 0.5rem 1rem;

    
}
nav a{
    text-decoration: none;
    color: var(--blanco);
    font-size: 1.5em;
    font-weight: 900;
    width: 100%;
    
}
nav a:hover{

    color: var(--marron);
    text-shadow: 0px 4px 12px var(--blanco);

}


/****************************************************************************************************/
/*ESTILO DE LOS MENSAJES Y ERRORES*/
.mensaje , .errores{
    color: var(--rojo);
}

/****************************************************************************************************/
/*ESTILO ENCABEZADOS DE CONTENIDO */
.encabezado-contenido {
    width: 100%;
    height: auto;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--marron);
    color: var(--blanco);
    padding: 10px 10px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 6px var(--gris);

}

.encabezado-contenido h1 { 
    font-size: 2.8em; 
    margin: 0; 
    padding: 10px 5px; 
}

.encabezado-contenido-intranet {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--gris-texto);
    text-shadow: 0px 4px 3px var(--verde-suave);
    text-align: center;
    margin: 0;
    padding: 0;


}

.encabezado-bienvenida-intranet{
    height: auto;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--verde);
    color: var(--blanco);
    padding: 10px 10px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 15px var(--verde-suave);
    line-height: 0.3;
}




/****************************************************************************************************/
/*Definición de estilos para distintos span*/
.span-verde{
    color: var(--verde); 
    /* Le he dibujado un contorno para que destaque más en los fondos oscuros*/
    text-shadow: 1px 1px 0  var(--blanco);
    text-shadow: -1px -1px 0  var(--blanco);
    text-shadow: 1px -1px 0  var(--blanco);
    text-shadow: -1px 1px 0  var(--blanco);
}

.span-pet{
    color: var(--verde); 

}

.span-marron{
    color: var(--marron); 
    /* Le he dibujado un contorno para que destaque más*/
    text-shadow: 1px 1px 0  var(--verde);
    text-shadow: -1px -1px 0  var(--verde);
    text-shadow: 1px -1px 0  var(--verde);
    text-shadow: -1px 1px 0  var(--verde);
}

.span-negrita{
    font-weight: 600;
}

.span-mensaje{
    margin-left: 10px;
    padding: 10px;
    background-color: var(--gris);
    color: var(--blanco);
    border-radius: 20px;
}

.span-error{
    color: var(--rojo); font-size: 0.85rem;

}

.span-texto-pequeño{
    font-size: 0.7em;
}


/****************************************************************************************************/
/* Bloques verdes */
.bloque-verde-externo {
    padding: 40px 20px;
    text-align: center;
}

.bloque-verde-interno{
    background-color: var(--verde-suave);
    color: var(--gris-texto);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 15px var(--verde-suave);
    display: inline-block;
  
}

.bloque-verde-interno h3{
    color: var(--verde);
}
/****************************************************************************************************/
/*ESTILO DE LOS MODALs*/
#capa-modal-confirmar-borrar{
    display:none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position:fixed;
    justify-content: center;
    align-items: center;
    background-color: var(--verde-suave-transparente); /*el fondo lo ponemos transparente para que resalte el modal*/

    z-index: 9999;
    
    

}
#modal-confirmar-borrar{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   background-color: var(--marron);
    color: var(--blanco);
    padding: 10px;
    gap: 10px;
    border-radius: 15px;

}

#modal-confirmar-borrar button{
    width: 200px;
    padding: 10px;
    

    background-color: var(--verde);
    color: var(--blanco);
    border-radius: 15px;
    font-weight: 600;
    font-size: 1.3em;
}



/****************************************************************************************************/
/*Estilo de los formularios*/
.login-contenedor{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5%;

}

.formularios form{

    justify-content: center;
    margin: 5%;
    align-items: flex-start;
    text-align: left;

}
.formularios input[type="text"], .formularios textarea {
    width: 100%;
    padding: 8px;
    font-size: 1rem;
    
}
.formularios input[type="submit"], .login-contenedor input[type="submit"]{
    padding: 10px 30px;
    border-radius: 15px;
    background-color: var(--verde);
    color: var(--blanco);
    font-weight:600;
    font-size: 1em;
}

.formularios:hover input[type="submit"]:hover, .login-contenedor input[type="submit"]:hover{
    padding: 10px 30px;
    border-radius: 15px;
    background-color: var(--marron);
    color: var(--blanco);
    font-weight:600;
    font-size: 1em;
}


/*Botonera del CRUD*/
.botones-crud{
    display: flex;
    flex-direction: row;
    justify-content: right !important;
    align-items: right !important;  
    gap: 10px;

}

/*Estilo del boton añadir*/
.boton-añadir{
    width: auto; /* Que el botón crezca según el texto */
    padding: 8px 15px;
    text-align: center;
    border-radius: 15px;
    background: var(--verde);
    color: var(--blanco);
    text-decoration: none;
    border-radius: 25px;
    transition: 0.3s; /* el tiempo que dura el cambio con hover*/
    font-weight: 600;
}

.boton-añadir:hover{
    background-color: var(--marron);
}
/****************************************************************************************************/
/*Estilo de los iconos de FontAwesome*/
/*Estilo del lapiz del boton editar  (el nombre de la clase es por una libreria fontawesome)*/
.fa-pencil {
    font-size: 1.6em; 
    margin: 5px;
    color: #ff8800; 

    transition:0.3s; /*la transición del cambio a hover para que no vaya tan rapido */
}

/*Estilo hover del boton editar*/
.botones-crud a:hover .fa-pencil {

    color: var(--verde); 
    transform: rotate(-15.0deg); /* hacemos el giro */
}

/*Estilo del icono papelera del CRUD (el nombre de la clase es por una libreria fontawesome)*/
.fa-trash-can{
    font-size: 1.8em; 
}

/*Estilo del icono para exportar en pdf*/
.fa-file-pdf{
    color:var(--verde);
    font-size: 3em;
}

.fa-file-pdf:hover{
    color: var(--marron);

}

/*Este icono solo es decorativo (huella)*/
.fa-paw{
    color: var(--marron);
    
}

/****************************************************************************************************/
/*Estilo del filtro*/
.botones-filtrar-exportar{
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 10px;
}
.filtro{
    display:flex;
    flex-direction: row; 
    flex: 1;
    margin: 15px 0px 5px 0px;
    text-align: left;
}

.filtro button[type="submit"]{

    padding: 10px 30px;
    border-radius: 15px;
    background-color: var(--verde);
    color: var(--blanco);
    font-weight:600;
    font-size: 0.9em;


}

.filtro button[type="submit"]:hover{
    padding: 10px 30px;
    border-radius: 15px;
    background-color: var(--marron);
    color: var(--blanco);
    font-weight:600;
    font-size: 0.9em;
}

.botones-exportar{
    margin: 0;

}
.boton-imprimir{
    border: none;
    background-color: var(--blanco);
    width: 50px;
    height:50px;
}



/****************************************************************************************************/
/*ESTILO DE "INICIO ZONA PUBLICA"*/
.contenido-inicio{
    text-align: justify;
}
.contenido-inicio h1, h2, h3{
    text-align: center;
}

#boton-servicios {
    display: inline-block;
    background-color: var(--verde);
    color: var(--blanco);
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    transition: 0.3s; /*el tiempo que dura el cambio al hacer el hover*/
}

#boton-servicios:hover {
    background-color: var(--blanco);
    color: var(--verde);

}

/*Apartado de servicios y cada Tarjeta*/
.servicios {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: 50px 20px;
    gap: 20px; /*separacion entre tarjetas*/
    
}

.servicio-tarjeta {
    background-color: var(--blanco);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px var(--verde-suave);
    flex: 1;
    border-bottom: 15px solid var(--verde);
    border-radius:  25px;
    transition: 0.3s; /*El tiempo que dura el cambio al hacer el hover*/
}

.servicio-tarjeta:hover{
    transform: translateY(-5px);
}

.icon img{
    width: 150px;
    height: auto;
 }

 /*Bloque localización "donde-estamos" */
.bloque-localizacion {
    text-align: center;
    padding: 50px 20px;
}

.lista-ciudades {
    font-size: 1.2rem;
    color: var(--marron);
    font-weight: bold;
    margin-top: 20px;
}
/*FIN ESTILO DE "INICIO ZONA PUBLICA"*/
/****************************************************************************************************/
/*ESTILO DE "QUIENES SOMOS"*/

.qs-mascotas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.qs-tarjeta-mascota{
    display: flex;
    flex-direction: row;
    justify-content: left;
    background: var(--blanco);
    padding: 20px;
    border-radius: 20px;
    border-bottom: 10px solid var(--verde);
    box-shadow: 0 4px 15px var(--verde-suave);
    text-align: center;
    gap: 3;
    transition: 0.3s;
}

.qs-tarjeta-mascota:hover{
    transform: translateY(-5px);

}



 .icon-mini img{
    width: 50px;
    height: auto;
   
 }
 .texto-tarjeta-mascota{
    padding: 0px 5px;
 }

.qs-valores {
    display: flex;
    width: 100%;
    gap: 30px;
    margin: 50px 0;
    background-color: var(--verde-suave);
    box-shadow: 0px 4px 15px var(--verde-suave);
    padding: 30px;
    border-radius: 15px;

}
 .qs-valores div{
    width: 50%;
 }

 .qs-valores h3 { 
    color: var(--verde);
 }



.boton-tiendas {
    display: inline-block;
    background: var(--verde);
    color: var(--blanco);
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: 0.3s;/*El tiempo que dura el cambio que hace hover */ 
    margin: 0% 0% 5% 0%;
}

.boton-tiendas:hover { 
    background: var(--marron); 
 }
/*FIN  DE ESTILO DE "QUIENES SOMOS"*/
/****************************************************************************************************/
/* ESTILO DE "TIENDAS"*/

/*Contenedor Principal de las tiendas fisicas*/
.contenido-tiendas-fisicas {
    margin: 40px auto;
 
}



/*Hacemos un grid para las tarjetas de las tiendas fisicas. */
.tiendas-grid {
    display: grid;

    /* la funcion repeat hará que las tarjetas se creen por columnas una tras otra o en filas si no entran en la pantalla. el tamaño de la tarjeta no será menor a 350px 
    * si la pantalla es grande entonces se ensancharan las tarjetas como maximo hasta 1fr y se adaptara si existe mas o menos tarjetas.
    */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px; /* separo las tarjetas para que no esten pegadas*/
}

.tienda-tarjeta {
    background: var(--blanco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 4px 15px var(--verde-suave);
    display: flex;
    flex-direction: column;
    transition: 0.3s ; /*El tiempo que dura la transformación */
    text-align: left;
}
/*Le damos un poco de animación a las tarjetas de las tiendas, se desplazan hacia arriba unos 5 pixeles al pasar el ratón por encima */
.tienda-tarjeta:hover {
    transform: translateY(-5px);
}

.mapa {
    width: 100%;
    height: 200px;

    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 15px solid var(--verde);
    border-radius:  15px;
}

.info-tienda {
    padding: 20px;
    font-size: 0.95rem;
}

.info-tienda h2 {
    color: var(--marron);
    margin: 0;
}

.info-contacto {
    padding: 15px 0px 0px 0px;
    border-top: 1px solid var(--verde-suave); /*Borde superior que divide la info-tienda de los datos de contacto*/
}

.info-contacto div {
    margin: 0px 0px 8px 0px ;
    font-size: 0.9rem;
}

/*FIN DE ESTILO TIENDAS*/
/****************************************************************************************************/
/*ESTILO DE LA PAGINA CONTACTO*/

.contacto-descripcion {
    text-align: center;
    margin-bottom: 50px;
}

.contacto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.contacto-tarjeta {
    background: var(--blanco);
    padding: 40px 20px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 4px 15px var(--verde-suave);
    border: 1px solid var(--verde-suave);
    border-bottom: 15px solid var(--verde);
    transition: 0.3s; /*El tiempo que dura la transformación */ 

}

.contacto-tarjeta:hover {
    transform: translateY(-5px); /*desplazando hacia arriba la tarjeta */
}

.contacto-tarjeta .icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.contacto-link {
    display: block;
    font-size: 1.3rem;
    color: var(--verde);
    text-decoration: none;
    font-weight: bold;

    margin: 10px 0px;
}

.boton-whatsapp {
    display: inline-block;
    margin-top: 15px;
    background: #25D366; /* Verde especial para whatsApp */
    color: var(--blanco);
    padding: 5px 15px;
    border-radius: 20px;
    transition: 0.3s; /*El tiempo que dura el cambio con hover */
    font-size: 1.2em;
    font-weight: 600;
}

.boton-whatsapp:hover{
    box-shadow: 0px 4px 15px var(--verde);

}

/*FIN ESTILO DE LA PAGINA CONTACTO*/
/****************************************************************************************************/
/*ESTILO CONTENEDOR INFORMACIÓN LEGAL (se aplica en "aviso legal" y en "condiciones generales")*/

.contenedor-informacion-legal{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;

}


.contenedor-informacion-legal h1 {
    color: var(--verde);
    text-align: center;
    border-bottom: 3px solid var(--verde);
    padding-bottom: 10px;
    font-size: 2.5rem;
}

.contenedor-informacion-legal h2 {
    color: var(--verde);
    margin-top: 30px;
    border-bottom: 2px solid var(--verde-suave);
    /*el centrado lo heredo de .contenido h2*/
}


#datos-identificativos {
    background-color: var(--gris-claro);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid var(--verde-suave);
    text-align: left;
}

#datos-identificativos li {
    list-style: none;
    margin-bottom: 5px;
}

#contactar-nosotros{
    font-weight: 600;

    text-align: center;
}
#boton-contactar{
    background-color: var(--verde);
    padding: 10px 25px;
    color: var(--blanco);
    text-decoration: none;
    border-radius: 15px;
    font-weight: 600;
    transition: 0.3s; /*el tiempo que dura el cambio al hacer el hover*/
}
#boton-contactar:hover{
    background-color: var(--marron);
    color: var(--blanco);

}
/*FIN ESTILO CONTENEDOR INFORMACIÓN LEGAL */

/****************************************************************************************************/
/*****************************ESTILOS DE LA INTRANET***********************************/
/*ESTILO DE NOTICIAS Y NORMATIVAS en Intranet*/
.noticias-normativas{
    height: auto;
    display:flex;
    flex-direction: column;
    gap: 40px;
    
}

.noticia-normativa{
    width: 100%;
    height: auto;
    background-color: var(--verde-suave);
    box-shadow: 0px 4px 15px var(--verde-suave);
    color: var(--gris);
    border-radius: 20px;
    padding: 10px 10px;
    overflow: hidden;

}


.noticia-normativa img {
    max-width: 100%;  
    height: auto;  
    margin-top: 10px;
}

.contenido-noticia-normativa{
    display: block;
    width: 100%;
    height: auto;
    padding: 0px 30px 10px 30px;
    margin: 10;
}

/*Diseño exclusivo para la pagina noticias de zona publica*/
.noticia-publica{
    width: 100%;
    height: auto;
    background-color: var(--blanco);
    box-shadow: 0px 4px 15px var(--verde-suave);
    color: var(--gris);
    border-radius: 20px;
    padding: 10px 10px;
    overflow: hidden;
    border-bottom: 10px solid var(--verde);
}

.info-publicacion{
    display: flex;
    flex-direction: row;
    text-align: left;
    margin:0;
    padding-top: 1px;
   
    border-bottom: 1px solid var(--marron);
    gap: 10px;
}




/****************************************************************************************************/
/*MEDIAS !! VERSIONES */

/* Media para versión movil*/
@media (max-width:768px){

    body{
    grid-template-rows: 200px 80px 1fr auto;
	
    }



    .enlaces-footer{
        display: flex;
        flex-direction: column;
    }
    .estado {
        flex-direction: column; /* Texto uno debajo de otro en móvil */
        gap: 5px;
        width: 100%;
        
    }
    .boton-zona, .boton-login-logout {
        width: 100%; /* Botones a lo ancho en móvil */
        margin: 5px 0;
    }

    #logo img{
        width: 250px; 
    }
    #login-logout{
        font-size: 0.8em;

    }

    nav li{
        padding: 0.1rem 0.5rem;
        
    }

    nav a{
            font-size: 1rem;
    }

    .encabezado-contenido h1 { 
        font-size: 1.8em; 
        margin: 0; 
        padding: 2%; 
    }

    .encabezado-bienvenida-intranet{
        line-height: 1.5;

    }

    .boton-login-logout{
        display: block;
        justify-content: center;
        align-items: center;
        text-align: center;
  
        padding: 10px;
        width: 200px;
        height: auto;
        background-color: var(--verde);
        border-radius: 15px;
        

    }
    

    .info-publicacion{
        display: flex;
        flex-direction: column;
        line-height: 0;
        margin: 0;
        padding: 0;
        gap: 0;
    }

    .botones-exportar{
        margin:0;
    }
    

}

/*Versión especial para el ajuste del tamaño del logo.*/

@media(max-width:1100px){
     #logo img{
        width: 250px; 
    }
}