@font-face{
	font-family:'organo';
	src:url('/a_comun/css/fonts/organo.woff2') format('woff2');
	font-weight:normal;
	font-style:normal;
}

@font-face{
	font-family:'vanilla';
	src:url('/a_comun/css/fonts/vanillaextractregular.woff2') format('woff2');
	font-weight:normal;
	font-style:normal;
}

/* ==========================================================
   ESTILOS GENERALES
   ========================================================== */

/*
 * box-sizing: border-box hace que el padding y el borde
 * formen parte del tamaño total de los elementos.
 */

* { box-sizing: border-box; }

/*
 * Eliminamos los márgenes por defecto del navegador.
 *
 * height: 100% permite que la aplicación pueda ocupar
 * toda la altura disponible.
 */

html,
body {
	margin: 0;
	height: 100%;
	font-family: system-ui, sans-serif;
}

/* ==========================================================
   ESTRUCTURA PRINCIPAL
   ========================================================== */

/*
 * La aplicación utiliza CSS Grid.
 *
 * Escritorio:
 *
 * ┌──────────────────────────────┐
 * │		   HEADER			 │
 * ├──────────┬───────────────────┤
 * │ menuLat  │	  MAIN		 │
 * │		  │				   │
 * └──────────┴───────────────────┘
 */

.app {
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-template-rows: 60px 1fr;
	grid-template-areas: "header header" "menuLat main";
	height: 100vh;
}

/* ==========================================================
   CABECERA
   ========================================================== */

.header {
	z-index: 102;
	grid-area: header;
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 0 20px;
	background: blue;
	border-bottom: solid 2px white;
	color: var(--color-blanco);
	position: relative;
}

.menu-boton {
	display: none;
	border: 0;
	background: transparent;
	color: var(--color-blanco);
	font-size: 26px;
	cursor: pointer;
}

.logo {
	font-family: "organo";
	font-size: 20px;
	font-weight: bold;
	color: var(--color-principal-claro);
}

/* ==========================================================
   MENÚ LATERAL
   ========================================================== */

.tapa-menu {
	z-index: 100;
	display: none;
	position: fixed;
	top: 60px;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--color-oscuro-45);
}

.menuLat {
	grid-area: menuLat;
	background: var(--color-principal-claro);
	border-right: 2px solid var(--color-blanco);
	padding: 20px;
}

.menuLat nav a {
	display: block;
	padding: 10px;
	margin-bottom: 5px;
	color: var(--color-texto);
	text-decoration: none;
	border-radius: 6px;
}

.menuLat nav a:hover {
	background: var(--color-separador);
}

/* ==========================================================
   CONTENIDO PRINCIPAL
   ========================================================== */

.main {
	grid-area: main;
	padding: 0;
	overflow: hidden;
	background: var(--color-blanco);
	position: relative;
}

/*
 * El iframe ocupa todo el contenido disponible.
 */

.main iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

/* ==========================================================
   GESTION DE FICHEROS
   ========================================================== */

.capa-Fichs {
	z-index: 200;
	display: none;
	position: fixed;
	top: 60px;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--color-oscuro-55);
	align-items: center;
	justify-content: center;
}

.capa-Fichs iframe {
	z-index: 201;
	width: 98%;
	height: 98%;
	border: none;
	background: var(--color-blanco);
}

/* ==========================================================
   VISOR DE FOTOGRAFIAS
   ========================================================== */

.capa-Foto {
	z-index: 300;
	display: none;
	position: fixed;
	top: 60px;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--color-oscuro-65);
	align-items: center;
	justify-content: center;
}

.capa-Foto iframe {
	z-index: 301;
	width: 98%;
	height: 98%;
	border: none;
	background: var(--color-blanco);
}



/* ==========================================================
   DISEÑO PARA DISPOSITIVOS MÓVILES
   ========================================================== */

/*
 * A partir de 768px o menos cambiamos la estructura.
 *
 * En móvil:
 *
 * ┌───────────────────────────┐
 * │		  HEADER		   │
 * ├───────────────────────────┤
 * │						   │
 * │		   MAIN			│
 * │						   │
 * └───────────────────────────┘
 *
 * El menú lateral pasa a ser una capa que se desplaza
 * desde la izquierda.
 */

#botones-cab {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--color-principal-claro);
    padding: 5px 8px;
    border-radius: 3px;
}


@media (max-width: 768px) {

	#botones-cab {
        display: none;
    }

	/* ------------------------------------------------------
	   ESTRUCTURA DE LA APLICACIÓN
	   ------------------------------------------------------ */

	.app {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 60px 1fr;
		grid-template-areas: "header" "main";
	}
	

	/* ------------------------------------------------------
	   BOTÓN DEL MENÚ
	   ------------------------------------------------------ */

	.menu-boton {
		display: block;
	}
	
	

	/* ------------------------------------------------------
	   MENÚ LATERAL MÓVIL
	   ------------------------------------------------------ */

	.menuLat {
		z-index: 101;
		position: fixed;
		top: 60px;
		left: 0;
		bottom: 0;
		width: 280px;
		transform: translateX(-100%);
		transition: transform .25s ease;
		box-shadow: 5px 0 20px var(--color-oscuro-20);
	}

	/*
	 * Cuando JavaScript añade la clase .open,
	 * el menú vuelve a su posición original.
	 */

	.menuLat.open {
		transform: translateX(0);
	}

	/* ------------------------------------------------------
	   CAPA OSCURA
	   ------------------------------------------------------ */

	/*
	 * La capa oscura ocupa únicamente la zona situada
	 * debajo de la cabecera.
	 *
	 * Es independiente del menú y no se utiliza para cerrarlo.
	 */

	.tapa-menu.open {
		display: block;
	}

}

/* ==========================================================
   PENSADO PARA EL PRIMER ACCESO
   ========================================================== */
.sin-registro .menuLat {
	display: none;
}
.sin-registro .menu-boton {
	display: none;
}

.sin-registro .app {
	grid-template-columns: 1fr;
	grid-template-areas: "header" "main";
}