/* 
	FICHERO CON EL ESTILO PARA TELÉFONO
	
	Autor: Robert Sallent
	Última revisión: 08/08/2025
*/


/* Visibilidad */

.pc{
	display: none !important;
}

.phone{
	display: initial !important;
}	


/* Correcciones de clases genéricas para adaptarlas a pantallas pequeñas */

.w50, .w75, .w100 		{ width: 100% }
.p1, .p2, .p4, .p4, .p5	{ padding: 10px }

.micro   				{ font-size: 0.8rem   }
.mini   				{ font-size: 1rem   }
.maxi   				{ font-size: 1.2rem   }


.two-columns			{ column-count: 1 }
.three-columns			{ column-count: 1 }
.four-columns			{ column-count: 2 }


.phone100{ width: 100% !important; margin: 0.5rem 0 }
.phone75 { width: 75% !important;  margin: 0.5rem auto}
.phone50 { width: 50% !important;  margin: 0.5rem auto}
.phone25 { width: 25% !important;  margin: 0.5rem auto}
.phone10 { width: 10% !important;  margin: 0.5rem auto}

.phonemxauto {
	margin-left:  auto !important; 
	margin-right: auto !important;
}

/* Grid lists ------------------------------------------ */
.grid-list span.span1, 
.grid-list span.span2,
.grid-list span.span3,
.grid-list span.span4,
.grid-list span.span5,
.grid-list span.span6,
.grid-list span.span7,
.grid-list span.span8{	grid-column: span 1;}

.grid-list-item span {
   text-align: left;
}

/* Elementos estructurales */
body{
	margin: 0;
	padding: 0;
}


section{
	margin: 10px 0px;
	padding: 8px;
}

a.action-icon, input[type="image"].action-icon{
	display: 	inline-block;
	width: 		44px;
	text-align: center;
	padding: 	4px 6px;
	margin: 	2px;
}



a.social-icon{
	width: 30px;
	text-align: center;
	padding: 0px;
	margin: 1px;
}

h2:first-child{
	margin:  0.8rem 0;
}
h3:first-child{
	margin:  0.6rem 0;
}


/* Header principal (en el body)  -------------------------------  */
#main-header{
	padding: 15px 0px 25px 0px;
}

#main-header>div{
	padding: 5px;
}

#main-header hgroup{
	margin: auto;
	padding: 0px;
	text-align: left;
	width: 100%;
	background: transparent;
}

#main-header h1{
	font-size: 1.8rem;
	white-space: wrap;
}

#main-header p{
	font-size: 1.15rem;
}

#main-header figure{
	min-width: 100px;
	max-width: 100px;
}






/* Formularios -------------------------------------  */
form .long, form .short, form .medium{
	width: 90%;
	margin: 5px;
}

form label{
	width: 90%;
}


#operacions, #operaciones{
	text-align: center;	
}


/* ------------------------ MODALES Y MENSAJES -------------------------  */

#accept-cookies{
	padding: 10px;
	width: 90%;
}

.modal				{ padding: 5px; }
.modal .message		{ padding: 50px 10px; }


.modal>figure, .modal>div{
	position: relative;
	height: 90%;
	width:  90%;
	margin: 5% auto !important;
}

.modal figure.card{
	margin: auto;
	width: 96%;
	padding: 5px;
}

.modal-cookies>form{
	height: 50%;
}

.modal figure.card img, .modal figure.card img.no-description{
	aspect-ratio: 3/4;
}


/* Imágenes y galerías ----- */
figure.card{
	margin: 10px 0px;
}

video.xx-small, figure.xx-small, img.xx-small,
video.xx-small, figure.x-small,  img.x-small		{ max-width: 100px; min-width: 100px; padding: 5px; }
video.xx-small, figure.small,    img.small			{ max-width: 200px; min-width: 180px; padding: 10px;}
video.xx-small, figure.medium,   img.medium			{ max-width: 300px; min-width: 200px;}
video.xx-small, figure.large,    img.large,			
video.xx-small, figure.x-large,  img.x-large,		
video.xx-small, figure.xx-large, img.xx-large		{ max-width: 400px; min-width: 240px;}


.code-block{
	padding: 5px;
	font-size: 0.75rem;
	tab-size: 0.8rem;
}


.web-map>ul.flex-container{
	padding: 5px;
	display: initial;
}

.web-map>ul>li{
	margin-bottom: 1.2rem;
}
  
/* ------------------------------- FOOTER  -------------------------------  */
.footer{
	background-size: cover;
}
.footer>div{
	width: 100%;
	text-align: center;
	margin: 5px;
	padding: 5px;
	background-color: rgba(255,255,255,0.8);
}

.footer div.links{
	width: 100%;
	display: flex;
}

.footer div.links a{
	display: block;
	flex: 1;
	text-align: center;
}



div.links img{
	width: 80%;
	height: auto;
}



#login{
	width: 100%;
}