@charset "utf-8";
@import "/css/variables.css";
@import "/css/fuentes.css";

body {
    font-family: var(--fuente_enfasis);
	margin: 0px;
}
div#cuerpo_primario {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* 🟠CABECERA */
#panel_superior {
    border-bottom: var(--tam_linea_marco) solid var(--rosa);
    box-shadow: var(--sombra_marco);
}
#cabecera {
    width: 100%;
}
#cabecera_imagen {
    height: var(--tamv_img_cabecera);
	background: var(--color_cabecera) var(--img_cabecera) left no-repeat; 
    box-shadow: var(--sombra_marco);
}
#titulo {
    font-size: var(--tam_fuente_cabecera);
	margin: var(--margen_cabecera);
	white-space: nowrap;
	display: flex;
	flex-direction: row;
	column-gap: var(--espaciado_cajas);
}
#titulo>div {
	display: flex;
	flex-flow: column;
	justify-content: center;
	height: var(--tamv_caja_cabecera);
	border: var(--borde_caja);
    border-radius: var(--radio_caja);
}
#caja_titulo_logo {
	background-color: var(--lavanda_pastel);
    transition: filter var(--tiempo_fulgor), opacity var(--tiempo_fulgor);
	width: var(--tamh_caja_cabecera);
	padding: var(--relleno_imagen);
	cursor: pointer;
	filter: none;
}
#caja_titulo_logo svg {
	height: var(--tam_logo);
	width: var(--tam_logo);
}
/* SVG */
svg#logo_svg {	
	fill: var(--color_logo);
	stroke: 10px var(--color_cajas_enfasis);
	stroke-width: 2px;
}
#caja_titulo_logo:hover {
	filter: var(--fulgor_caja);
	opacity: var(--alfa_fulgor_caja);
}
#caja_titulo_nivel {
    color: var(--color_cajas_enfasis);
    text-shadow: var(--sombra_texto);
    background-color: var(--rosa_pastel);
	padding: var(--relleno_texto);
}
#caja_titulo_nombre {
    color: var(--color_cajas);
    text-shadow: var(--sombra_texto);
    background-color: var(--lavanda_pastel);
	padding: var(--relleno_texto);
}
/* 🟠CUERPO */
#mainframe {
	height: auto;
    width: 100%;
	display: flex;   
    flex: 1;
}
div#contenido {
    height: 100%;
    width: 100%;
    padding: 0px;
	flex-grow: 1;
}
div#contenido>iframe {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0px;
    border: none;
}
/* 🟠PIÉ */
footer#pie_marco {
    height: var(--tamv_pie);
	position: relative;
	bottom: 0px;
    background: var(--color_pie) var(--img_pie) left no-repeat;
    box-shadow: var(--sombra_marco);
}
/* 🟡MENÚ */
#menu {
	float: left;
	width: var(--ancho_panel_menu);
    padding: var(--relleno_menu);
    background: var(--degradado_menu);
	box-shadow: var(--sombra_panel);
	border-bottom: var(--borde_panel);
	z-index: auto;
}
button{
	font-family: var(--fuente_primaria);
	text-align: right;
	display: block;
	text-shadow: var(--sombra_texto);
	margin: var(--margen_boton);
	padding: var(--relleno_boton);
	border-radius: var(--boton_radio);
	cursor: pointer;
}
button.boton-menu {
	min-width: 100%;
	font-size: var(--tam_fuente_boton);
	color: var(--gris_pastel);
	border: var(--borde_boton);
	background-color: var(--indigo_oscuro);
	transition: filter var(--tiempo_fulgor), opacity var(--tiempo_fulgor);
	filter: none;
}
.boton-menu:hover {
	filter: var(--fulgor_boton);
	opacity: var(--alfa_fulgor_boton);
}
.submenu {
    display: block;
	overflow: hidden;
    padding: var(--relleno_submenu);
	transition: var(--tiempo_menu) ease-in-out;
}
button.boton-submenu {
	font-size: var(--tam_fuente_submenu);
	color: var(--gris_pastel);
	height: var(--tamv_submenu);
    width: var(--tamh_submenu);
 	background-color: var(--color_submenu);
	border: var(--borde_submenu);
	transition: filter var(--tiempo_fulgor), opacity var(--tiempo_fulgor);
	filter: none;
}
.boton-submenu:hover {
	filter: var(--fulgor_submenu);
	opacity: var(--alfa_fulgor_submenu);
}