.ºlayout{
	display: grid;
	width: 100%;
	margin-bottom: var(--size-2);
	grid-gap: var(--size-1) var(--size-2);
	grid-auto-rows: min-content;
	box-sizing: border-box;
}
	.ºlayout > .layout-group{
		display: grid;
		grid-gap: inherit;
		grid-column: 1/-1;
	}
	.ºlayout > .layout-break,
	.ºlayout > .layout-space{
		grid-column: 1/-1;
		margin: var(--size-2) 0 0;
	}
	.ºlayout > .layout-space.control{
		margin: 0;
		height: var(--control-height)
	}
	.ºlayout > .layout-break{
		margin: var(--size-2) 0;
	}

	main .ºlayout:last-child,
	footer .ºlayout:last-child,
	.ºwindow  .ºlayout:last-child{
		margin-bottom: 0;
	}
	
	footer .ºlayout{
		padding: var(--size-3) var(--size-4) var(--size-3) var(--size-3);
	}

.ºlayout.form{
	--padding-top: calc(var(--size-4) - var(--size-1) / 2);
	--margin-top: calc(var(--padding-top) * -1);
	--margin-h: calc(var(--size-4) * -1);
	--padding: var(--padding-top) var(--size-4);
	padding: var(--padding);
	background: #FFF;
	border-radius: var(--control-border-radius-2);
}
	.ºlayout.form > .layout-break{
		border-bottom: 1px solid var(--control-border-color-2);
	}
	.ºlayout.form .ºlabel{
		padding-right: var(--size-3);
	}
	
	.ºlayout.form > .layout-header{
		grid-column: 1/-1;
		margin: var(--margin-top) var(--margin-h) var(--size-3);
		padding: var(--size-1) var(--size-3);
		height: var(--size-4);
		border-bottom: 1px solid var(--control-border-color-2);
	}
		.ºlayout.form > .layout-header .text-size{
			font-weight: 400;
		}	
	
.ºlayout > .ºlayout{
	padding: 0;
}
	.ºlayout > .ºlayout.form{
		grid-column: auto;
		margin-bottom: var(--size-2);
		padding: var(--padding);
	}
	.ºlayout.form > .ºlayout{
		margin-bottom: 0;
	}
	
.ºlayout.gap2{
	grid-gap: var(--size-1) var(--size-1);
}
.ºlayout.form.legend{
	padding: var(--size-1) var(--size-4);
}
.ºlayout.form.legend.fixbottom{
	position: sticky;
    bottom: 0;
	border-top: solid 4px var(--bg-main);
}
#content > main:has(.selected .ºlayout.form.legend.fixbottom) {
	padding: var(--size-4) calc(var(--size-4) + 10px) 0px var(--size-4);
}

.ºlayout.error{
	position: relative;
}

.ºlayout.compact > .layout-header{
	margin-bottom: 0;
}
	.ºlayout.compact .ºgrid.view-table > .container > .body{
		min-height: auto;
	}
	.ºlayout.compact > .ºbutton{
		margin-top: var(--size-2);
	}
.ºlayout.only-columns{
	grid-gap: 0 var(--size-2);
}

.ºlayout.centered{
	width: 60%;
	min-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.ºlayout.paragraph *{
	white-space: break-spaces !important;
}

.ºlayout.padding2{
	padding: var(--size-2);
}
.ºlayout.padding3{
	padding: var(--size-3);
}
.ºlayout.padding4{
	padding: var(--size-4);
}
	.ºlayout.vpadding4{
		padding: var(--size-4) 0;
	}

.ºlayout.columns2{
	grid-template-columns: repeat(2, 1fr);
}
.ºlayout.columns3{
	grid-template-columns: repeat(3, 1fr);
}
.ºlayout.columns4{
	grid-template-columns: repeat(4, 1fr);
}
.ºlayout.columns5{
	grid-template-columns: repeat(5, 1fr);
}
 
@media (min-width: 900px){
	.ºlayout.clickwraps{
		display: flex;
		justify-content: space-evenly;
	}
}
@media (max-width: 900px){
	.ºlayout.columns2,
    .ºlayout.columns3,
	.ºlayout.columns4,
	.ºlayout.columns5{
		direction: rtl; /*Forzar a cada control a ocupar toda la fila en pantallas pequeñas*/
	}
}

.ºlayout .photo.empty-employee {
  content: "";
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMidYMid slice'><circle cx='12' cy='8' r='4' fill='%23ccc'/><path d='M4 20c0-4 4-6 8-6s8 2 8 6' fill='%23ccc'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.ºlayout .photo.empty-logo{
  display: block; 
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' preserveAspectRatio='xMidYMid slice'><rect x='12' y='20' width='40' height='30' rx='2' fill='%23ccc'/><rect x='18' y='26' width='6' height='6' fill='%23f5e6d3'/><rect x='28' y='26' width='6' height='6' fill='%23f5e6d3'/><rect x='38' y='26' width='6' height='6' fill='%23f5e6d3'/><rect x='18' y='36' width='6' height='6' fill='%23f5e6d3'/><rect x='28' y='36' width='6' height='6' fill='%23f5e6d3'/><rect x='38' y='36' width='6' height='6' fill='%23f5e6d3'/><rect x='26' y='14' width='12' height='10' fill='%23ccc'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}