/***FONTS***/
@font-face {font-family: Inter Light;src: url(fonts/Inter-Light.ttf);}
@font-face {font-family: Inter Medium;src: url(fonts/Inter-Medium.ttf);}
@font-face {font-family: Inter Bold;src: url(fonts/Inter-Bold.ttf);}
@font-face {font-family: Inter Bolder;src: url(fonts/Inter-ExtraBold.ttf);}
@font-face {font-family: Inter Black;src: url(fonts/Inter-Black.ttf);}

/* @import url('https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,500,500i,700,700i'); */



body{
  /*font-size: 1.1em;*/
  font-weight: normal;
  text-decoration: none;
  margin:0;
  padding:0;
  scroll:auto;
  max-width:100%;
  overflow-x:hidden;
  line-height: 1.15!important;
}

body,input,button,a:link {
font-family: 'Inter Light', sans-serif;
}

ul,li {
	margin:0;
	padding:0px;
	list-style: none;
}

img {
	/* max-width:100%; */
	/* height:auto; */
}

input, input:active, input:focus {
	border:none;
	box-shadow:none;
	border-radius:0;
	outline: none;
}

.row>*{
	padding-right: 10px;
	padding-left: 10px;
}

.clearfix {
	clear:both;
}

@property --color1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #F14902;
}

@property --color2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #F4B324;
}

@property --colorGreen {
  syntax: "<color>";
  inherits: false;
  initial-value: #599958;
}

@property --colorTxt {
  syntax: "<color>";
  inherits: false;
  initial-value: #282320;
}

/*****home*****/
.loginBox {
	float:left;
	width:50%;
}

.loginBoxLogo, .loginBoxLogin{
	float:right;
	width:100%;
	height:50vh;
	position:relative;	
}
.signupBoxLogin {
	height:73vh;
}

.signupBoxLogo {
	background:var(--colorGreen);
	width:100%;
	padding-left:50px;
	height:27vh;
	overflow:hidden;
}
.signupBoxLogo>div {
	width:100%;
	height:100%;
}

.loginBoxLogo, .signupBoxLogo>div {
	background:var(--color1);
}
.loginLogo{
	position:absolute;
	top:20px;
	right:20px;
	width:11vw;
}
.loginBoxLogin {
	background:#fff;
	border-right:50px solid var(--color2);
}

.loginImg{
	float:left;
	width:50%;
	background:var(--colorGreen);
	height: 100vh;
	position:relative;
}
.signupImg{
	height: 73vh;
}

.loginImg>div{
	height:100%;
	width:calc(100% - 50px);
	/* background-image:url('../images/img_home.png'); */
	background-color:var(--color2);
	background-size:cover;
	float:right;
	background-position-y: bottom;
	background-position-x: right;
}
.signupImg>div{
	background-position-y: top;	
}

.loginTit, .signupTit {
	color: var(--colorTxt);
    font-weight: 500;
    font-size: 6vw;
    float:left;
    margin:60px 0 0 50px;
    clear:both;
    
}
.signupTit {
	font-size:4vw;
	margin: 40px 0 0 40px;
	font-weight:bold;
}

.loginSub {
	color: #14110e;
    font-weight: 00;
    /* font-size: 40px; */
    font-size:3vw;
    float: left;
    margin: 20px 0 0 50px;
    letter-spacing: -2px;
    clear:both;
}
.loginTxt, .signupTxt {
	color: #fff;
/*     font-size: 45px;
    margin:70px 0 0 50px; */
    /* font-size: 43px; */
    font-size:2.1vw;
    line-height: 44px;
    margin:45px 0 0 50px;
    float:left;
    
   clear:both;
   font-weight:bold;
   
   position: absolute;
   bottom: 10px;
   width: calc(100% - 60px);
   line-height: 1.2;
}
.signupTxt {
	font-size: 1.8vw;
	font-weight: normal;
	margin: 15px 0 0 40px;
	width: calc(100% - 280px);
	line-height: 1.2;
}

.loginBoxLogin>div {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	width:50%;
	text-align:center;
}

.loginBoxLogin>div input{
	border:none;
	border-bottom:2px solid #707c8f;
	text-align:center;
	width:100%;
	clear:both;
	margin-bottom:30px;
	padding:5px 0;
}

.loginBoxLogin>div input:focus{	
	border:none;
	box-shadow:none;
	border-bottom:2px solid var(--color1);
}
input::placeholder {
/*	text-transform:uppercase;*/
	color:#c6c6c6;
	font-size:14px;
}

.loginBoxLogin>div div{
	position:relative;
}
.loginBoxLogin>div i{
	position: absolute;
    top: 5px;
    right: 0;
    color: #c6c6c6;
    cursor:pointer;
}

.loginBoxLogin>div button{	
	color:#fff;
	background:var(--color1);
	font-size:18px;	
	border:none;
	padding:20px;
	border-radius:30px;
	font-weight:bolder;
/*	text-transform:uppercase;*/
	width:60%;
	margin-top:30px;
	cursor:pointer;
}

/*****header*****/
/* header {
	width: calc(100% - 20px);
	padding:5px 10px;
	background:#e6e6e6;
	overflow:auto;
	padding:0 10px 3px 0;
} */

/* header .logoHeader {
	height:20px;
	float:left;	
} */

/* .usuario {
	float:right
} */
/* .logueo, a:link.logueo {
	color: #fff;
    background: var(--color1);
    font-size: 18px;
    border: none;
    padding: 20px;
    border-radius: 30px;
    font-weight: bolder;
    text-transform: uppercase;
    width: 60%;
    margin-top: 30px;
    cursor: pointer;
    text-decoration:none;
    transition: transform 0.8s;
  	transform-style: preserve-3d;
}

.logueo:hover, a:link.logueo:hover {
	background:#fff;
	color:var(--color1);
	border: 1px solid var(--color1);
	transform: rotateY(180deg);
	
} */
.idiomas, a.idiomas:link {font-weight:normal;}
.idiomasSelected, a.idiomasSelected:link {font-weight:bold;}

.btn-flip {
  opacity: 1;
  outline: 0;
  color: #fff;
  line-height: 40px;
  position: relative;
  text-align: center;
  letter-spacing: 1px;
  display: inline-block;
  text-decoration: none;
/*  text-transform: uppercase;*/
  font-size:20px;
}
.btn-flip:hover:after {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}
.btn-flip:hover:before {
  opacity: 0;
  transform: translateY(50%) rotateX(90deg);
}
.btn-flip:after {
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  color: var(--color1);
  display: block;
  transition: 0.5s;
  position: absolute;
  background: #fff;
  border:1px solid var(--color1);
  font-size:20px;
  content: attr(data-back);
  transform: translateY(-50%) rotateX(90deg);
}
.btn-flip:before {
  top: 0;
  left: 0;
  opacity: 1;
  color: #fff;
  display: block;
  padding: 0 30px;
  line-height: 40px;
  transition: 0.5s;
  position: relative;
  border:1px solid var(--color1);
  background: var(--color1);
  content: attr(data-front);
  transform: translateY(0) rotateX(0);
}


.logoInvitado {
	position:relative;
	float:left;
	margin:50px 40px 40px 40px;

}
.logoInvitado img {
	width:90px;
}

.logoInvitado.zoom {
	cursor:pointer;
}

.logoOrganizacionLista {
	width:32px;
	height:32px;
	object-fit:contain;
	margin-right:10px;
}

.bloqueImg {
	width:77%;
	aspect-ratio:1/1;
	/* border:4px solid #fff; */
	/* border-radius:50%; */
	background-size:cover;
	float:right;
	/* Keep the image painted on top of the overlapping text box while both stay
	   inside the block's stacking context, so clicks and the hover-zoom register
	   on either element (see .bloqueTxt). */
	position:relative;
	z-index:1;
}

.bloqueTxt {
	display: block;
	white-space: nowrap;
	/* font-size: 46px; */
	font-size: clamp(20px, 2.2vw, 50px);
    font-weight: bold;
    color: #fff;
    background: var(--colorAdmin);
    width: 84%;
    aspect-ratio:4/2;
    border-radius: 15px;
    top: 65%;
    /* Was z-index:-1, which pushed the text box behind the whole block: clicks and
       the .zoom hover only responded on .bloqueImg. z-index:0 (with .bloqueImg at
       z-index:1) keeps the image visually on top while leaving the text box as a
       hit-test target that bubbles the click and triggers the hover-zoom. */
    z-index: 0;
    left: 10%;
    float:right;
    position:absolute;
    font-family: 'Inter Bolder';
}
.bloqueTxt>div {
	position:absolute;
	bottom:10%;
	left:7%;
}

.bloqueImg:hover, .bloqueTxt:hover {
	cursor:pointer;
}


.bloque1, .bloque2, .bloque3, .bloque4 {
	width:25%;
	position:absolute;
}

.bloque1 {
	top:34%;
	left:0%;
}

.bloque1Pro {
	top:16%;
	left:4%;
}

.bloque2 {
	top:6%;
	left:25%;
}
.bloque2 .bloqueTxt{background:var(--umigloGrey);}
.bloque3 {
	top:auto;
	left:45%;
	bottom:14%;
}
.bloque3Pro {
	left:34%;
	bottom: 14%;
    top: auto;
}
.bloque3 .bloqueTxt{background:var(--umigloRed);}
.bloque4 {
	top:25%;
	left:72%;
}
.bloque4Pro {
	top:27%;
	left:69%;
}
.bloque4 .bloqueTxt{
	background:var(--umigloYellow);
	white-space: normal;
	margin-top: +10%;
}
.bloque4 .bloqueTxt > div { width: 86%; }
.bloque4 .bloqueImg { margin-top: 0; }

#web_footer {
	position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #f6f6f6;
    font-size: 11px;
    padding: 5px;
    color: #999;
}


/*pantalla espacios*/
.espacioLog {
	float:left;
	margin:40px;
}
.espacioLog img {
	width:100px;
}

.espacioTit {
	position:relative;
	float:left;
	color:var(--umigloGrey);
	font-size:50px;
	margin-top:60px;
	font-weight:bold;
}
.espacioTit span {
	font-weight:lighter;
}

.espacioTitAdm, .headerTitAdm {
	color:var(--colorAdmin);
}

.espacioTitAlu {
	color:var(--color1);
}

.espacioImg {
	float:left;
	clear:left;
	width:20%;
	aspect-ratio:3/4;
	border-radius:20px;
	background-size:cover;
	margin-left:40px;
}

.espacioImg2 {
	float:left;
	clear:left;
	width:22%;
	aspect-ratio:3/4;
	border-radius:20px;
	background-size:cover;
	margin-left:40px;
	background-position:center;
	margin-top:50px;
}

.espacioBlo1 {
	position:absolute;
	/* top:10%;
	left:26%;
	width:40%; */
	/* height: 100%;
    height: -moz-available;
    height: -webkit-fill-available;
    height: fill-available; */

    /* height: calc(100% - 200px); */

    top: 10vh;
    /* cqw (container query width), not vw: vw is always relative to the true browser viewport, so
       it can never react to #ayudaContentWrap shrinking for the help sidebar (HANDOFF-ayuda-
       contextual.md, style revision) -- cqw is the container-relative equivalent, resolved against
       #ayudaContentWrap's own width (container-type:inline-size, estilosadm.css). Height/top-in-vh
       stay as vh on purpose: the sidebar only consumes horizontal space. */
    left: 25cqw;
    width: 31cqw;
    height: 64vh;

}

/* .espacioBlo1Alu {
    top: 15vh;
    left: 27vw;

}
 */
.espacioBlo1>div>div, .espacioBlo2>div>div  {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	text-align:center;
	font-weight:bold;
	width:95%;
}

.espacioBlo1 .espacioGlo1{
    position: absolute;
    left:80%;
    top:20%;
    width: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: var(--umigloGrey);
    border: 3px solid var(--umigloGrey);
    font-size: 1.7vw;
    cursor:pointer;
}

.espacioBlo1 .espacioGlo2{
    position: absolute;
    left:35%;
    top:55%;
    width: 35%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: var(--umigloGrey);
    border: 3px solid var(--umigloGrey);
    font-size: 1.5vw;
    z-index:2;
    cursor:pointer;
}

.espacioBlo1 .espacioGlo3{
    position: absolute;
	left: 60%;
    top: 70%;
    width: 35%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--umigloGrey);
    color: #fff;
    border: 3px solid #F2F2F2;
    font-size: 1.5vw;
    z-index:3;
    cursor:pointer;
}

.espacioBlo1 .espacioGlo4{
    position: absolute;
	left: 40%;
    top: 0%;
    width: 35%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: var(--umigloGrey);
    border: 3px solid var(--umigloGrey);
    font-size: 1.5vw;
    z-index:1;
    cursor:pointer;
}

.espacioBlo1 .espacioGlo5{
    position: absolute;
	left: 15%;
    top: 15%;
    width: 35%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: var(--umigloGrey);
    border: 3px solid var(--umigloGrey);
    font-size: 1.5vw;
    z-index:1;
    cursor:pointer;
}

.espacioBlo2 {
	position:absolute;
	/* top:27%;
	left:63%;
	width: 30%; */

/*     height: 100%;
    height: -moz-available;
    height: -webkit-fill-available;
    height: fill-available; */

    /* height: calc(100% - 200px); */

    /* cqw, not vw -- see .espacioBlo1 above for why. left:63% was already correct (percentages on
       an absolutely positioned element already resolve against its containing block, not the raw
       viewport) -- only the vw ones needed converting. */
    top: 8cqw;
    left: 63%;
    width: 26cqw;
    height: 53vh;
}

 .espacioBlo2Alu {
    top: 20vh;
/*
    left: 66%;
 */
}
.espacioBlo2 .espacioGlo1{
    position: absolute;
    top:5%;
    left:35%;
    width: 45%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: var(--umigloGrey);
    border: 3px solid var(--umigloGrey);
    font-size: 1.5vw;
    z-index:1;
    cursor:pointer;
}

.espacioBlo2 .espacioGlo2{
    position: absolute;
    top:27%;
    right:-15%;
    width: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: #fff;
    border: 3px solid #F2F2F2;
    font-size: 1.5vw;
    z-index:0;
    cursor:pointer;
}

.espacioBlo2 .espacioGlo3{
    position: absolute;
    top:40%;
    left:30%;
    width: 45%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: #fff;
    border: 3px solid #F2F2F2;
    font-size: 1.5vw;
    z-index:1;
    cursor:pointer;
}

.espacioBlo2 .espacioGlo4{
    position: absolute;
    top:65%;
    left:80%;
    width: 45%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: #fff;
    border: 3px solid #F2F2F2;
    font-size: 1.5vw;
    z-index:1;
    cursor:pointer;
}

.espacioGloDisabled {
    opacity: 0.25;
    user-select: none;
    cursor: default;
    pointer-events: none;
}

.funcDisabled {
    opacity: 0.25;
    user-select: none;
    cursor: default;
    pointer-events: none;
}

.espacioGlo1Alu, .espacioGlo3Alu, .espacioGlo5Alu {
	border-color:#fff!important;
	background:var(--umigloRed)!important;
	color:#fff!important;
}

/* .espacioBlo1 .espacioGlo1Alu {
	width:52%!important;
} */

/*  .espacioBlo1 .espacioGlo2Alu {
	width:50%!important;
	font-size:2.1vw;
	left: 29%;
    top: 27%;
}
 */
.espacioBlo1 .espacioGlo2Alu, .espacioBlo1 .espacioGlo4Alu, .espacioBlo2 .espacioGlo2Alu {
	border-color:var(--umigloRed)!important;
	color:var(--umigloRed)!important;
	background:#F2F2F2!important;
}

.administraBlo1 .administraGlo2Adm, .administraBlo1 .administraGlo4Adm, .espacioBlo1 .espacioGlo2Adm, .espacioBlo1 .espacioGlo4Adm, .espacioBlo2 .espacioGlo2Adm {
	border-color:var(--colorAdmin)!important;
	color:var(--colorAdmin)!important;
}

.administraBlo1 .administraGlo1Adm, 
.administraBlo1 .administraGlo3Adm, 
.administraBlo1 .administraGlo5Adm, 
.espacioBlo1 .espacioGlo1Adm, 
.espacioBlo1 .espacioGlo3Adm, 
.espacioBlo1 .espacioGlo5Adm, 
.espacioBlo2 .espacioGlo1Adm, 
.espacioBlo2 .espacioGlo3Adm, 
.espacioBlo2 .espacioGlo4Adm, 
.espacioBlo4 .espacioGlo4Adm  {
	border-color:#fff!important;
	background:var(--colorAdmin)!important;
	color:#fff!important;
}

.espacioBlo1 .espacioGlo1Pro, .espacioBlo1 .espacioGlo2Pro, .espacioBlo2 .espacioGlo1Pro, .espacioBlo2 .espacioGlo2Pro {
	border-color:var(--color1)!important;
	color:var(--color1)!important;
}

.espacioBlo1 .espacioGlo3Pro, .espacioBlo2 .espacioGlo3Pro {
	background:var(--color1)!important;
	color:#fff!important;
}

.administraBlo1 {
	position:absolute;
    top: 10vh;
    /* cqw, not vw -- same reasoning as .espacioBlo1 above: this menu isn't one of the 5 ayuda
       pilot screens, but the sidebar itself shows (empty) on every screen once help mode is on
       (D7, HANDOFF-ayuda-contextual.md), so this would hit the exact same squeeze bug the moment
       someone activates help mode one click over from the pilot's own menu. */
    left: 25cqw;
    width: 65cqw;
    height: 64vh;
}
.administraBlo1>div>div  {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	text-align:center;
	font-weight:bold;
	width:95%;
}

.administraBlo1 .administraGlo1{
    position: absolute;
    left:20%;
    top:10%;
    width: 30%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: var(--umigloGrey);
    border: 3px solid var(--umigloGrey);
    font-size: 1.7vw;
    cursor:pointer;
}

.administraBlo1 .administraGlo2{
    position: absolute;
    left:60%;
    top:15%;
    width: 25%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: var(--umigloGrey);
    border: 3px solid var(--umigloGrey);
    font-size: 1.5vw;
    z-index:2;
    cursor:pointer;
}

.administraBlo1 .administraGlo3{
    position: absolute;
	left: 50%;
    top: 60%;
    width: 25%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--umigloGrey);
    color: #fff;
    border: 3px solid #F2F2F2;
    font-size: 1.5vw;
    z-index:3;
    cursor:pointer;
}

.administraBlo1 .administraGlo4{
    position: absolute;
	left: 25%;
    top: 80%;
    width: 25%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: var(--umigloGrey);
    border: 3px solid var(--umigloGrey);
    font-size: 1.5vw;
    z-index:1;
    cursor:pointer;
}

.administraBlo1 .administraGlo5 {
    position: absolute;
	left: 80%;
    top: 55%;
    width: 25%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #F2F2F2;
    color: var(--umigloGrey);
    border: 3px solid var(--umigloGrey);
    font-size: 1.5vw;
    z-index:1;
    cursor:pointer;
}

/* bottom in dvh, not % (2026-09-26, real-hardware bug report on an old iPad): a percentage
   `bottom` on a position:fixed element resolves against the initial containing block, whose
   height iOS Safari pins to the "large" viewport (address bar/tab bar collapsed) even while
   they're still shown and the actually visible area is shorter -- so on page load this bar
   rendered partly below the fold, only fully visible once scrolling made Safari collapse its
   chrome and the visible area grew to match. dvh tracks the real visible viewport as the chrome
   shows/hides, so the bar recomputes and stays on-screen without needing a scroll first.
   The plain % is kept as a fallback line before it: dvh has no effect pre-2022 browsers
   (Safari <15.4/Chrome <108/Firefox <101), and since a declaration with an unsupported value is
   dropped rather than falling back, without this line those browsers would end up with no
   `bottom` at all instead of just the old (working) percentage behaviour. */
.espacioBoxBut {
	width:95%;
	clear:both;
	margin-top:40px;
	z-index:10;
	position:fixed;
	bottom:6%;
	bottom:6dvh;
	left:50%;
	transform:translateX(-50%);
}

.espacioBut {
    position:relative;
    width: 300px;
    font-size: 38px;
    color: #fff;
    text-align: center;
    padding: 20px 10px;
    background: var(--umigloGrey);
    font-weight: bold;
    border-radius: 20px;
    margin: 0 auto;
    cursor: pointer;
    float:left;
}

.espacioBoxButLeft {
	 float:left;
	 width:20%;
	 text-align:center;
}

.espacioBoxButLeft>div{
	float:none;
}

.espacioBoxButRight {
	float:right;	
}
.espacioBoxButRight>div {
	margin-left:20px;
	
}
.espacioBoxButRight button {
	float:left;
	margin-top:5px;
}


.espacioOrange {background: var(--umigloRed);}
.espacioGreen {background: var(--colorAdmin)}
.espacioSoftGreen {background: #7dd26f;}

.boxAlumno {
	margin:5px 5px 22px 5px;
	width:calc(14.27% - 10px);
	float:left;
	font-size:10px;
	font-weight:bold;
	line-height:10px;
	color:#666;
	text-align:center;
	position:relative;
}


.boxEspaciosAlumnos50 .boxAlumno {
	width:calc(23% - 10px);
	margin-top:0;
	max-width:160px;
}

/* Lets several microambient groups (subtitle + its own students) share the same visual row,
   instead of each group forcing a full-width line break. Each group is sized to its own
   student count (capped at 7 cards wide, same as the old per-row max) via an inline width
   set from the JSP, so groups pack left-to-right and only wrap when a row is full. */
.microambientsRow {
	display:flex;
	flex-wrap:wrap;
	gap:20px;
}

.microambientGroup .adminSubtitle {
	width:100%;
}

/* .truncate sets max-width:calc(100% - 24px), which would otherwise shrink the title bar
   short of the group's full width; restore it here without touching the shared .truncate class. */
.microambientGroup .adminSubtitle.truncate {
	max-width:100%;
}

.microambientGroup .boxAlumno {
	float:left;
	width:100px;
}

.imgAlumno {
	width:100%;
	aspect-ratio:16/19;
	border-radius:10px;
	border:3px solid #e6e6e6;
	overflow:hidden;
	position:relative;
	cursor:pointer;
}

/* .imgAlumnoDiv {
	border-top-right-radius:0!important;
} */


.imgAlumnoDiv + div::after {
position: absolute;
    content: "";
    width: 30px;
    height: 8px;
    bottom: -1px;
    right: -11px;
    background: #e6e6e6;
    transform: rotate(-45deg);
}

/* .boxAlumnoSelected .imgAlumnoDiv::after {
	background: var(--colorAdmin);
} */


/* .boxAlumno:has(.imgAlumnoDiv)::after{
position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    top: 0px;
    right: 0px;
    background: #fff;
    transform: rotate(45deg);
    z-index: 11111111111111;
    border-top-right-radius: 7px;
} */

.imgAlumno:hover, .txtAlumno:hover, .boxAlumno:hover .txtAlumno {
	border:3px solid var(--colorAdmin);
}


.txtAlumno:hover, .boxAlumno:hover .txtAlumno {
	border:1px solid var(--colorAdmin);
	background: var(--colorAdmin);
	color:#fff;
}

.boxEspaciosAlumnosAlu .txtAlumno:hover {
	border:1px solid var(--color1);
	background: var(--color1);
}

.imgAlumno img {
	width:105%;
	height:auto;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);	
}

.txtAlumno {
	position:absolute;
	bottom:-16px;
	left:50%;
	transform:translateX(-50%);
	border-radius:5px;
	border:1px solid #d6d6d6;
	background:#fff;
	overflow:hidden;
	height:29px;
	width:105%;
}
.txtAlumno>div {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:98%;
	/* max-height: 90%; */
	max-height:24px;
    overflow: hidden;
    line-height:12px;
}

.txtAlumno>div>.txtAlumnotxt {
margin-top: -1px;
 height: 14px;
 line-height: 13px;
 overflow: hidden;
}

.boxAlumnoEspacio .txtAlumno>div {
	max-height: 90%;
}

.collapse.show {margin-bottom:10px;}

/*espacios*/
.topButtons {
	/* border:1px solid #e6e6e6; */
	position:relative;
	border-radius:10px;
	float:left;
	width:max-content;
	padding:3px;
	margin:2px 0;
	/* overflow:auto; */
}
.topButtons .customButton {
	width:10vw;
}

.topButtons .customButton.selected {
	background:var(--colorAdmin);
	color:#fff;
}

.topButtonsAut {
	width:max-content;
	margin-right:5px;
	max-width: 100%;
}
.topButtonsAut .customButton {
	width:200px;
	margin-left:18px;
}

.customButtonWidth {
	width: calc(33.3% - 8px)!important;
}

.customButtonNoSelect {
	user-select: none;
	-webkit-user-select: none; 	/* Safari */
	-moz-user-select: none;    	/* Firefox older versions */
	-ms-user-select: none; 		/* Internet Explorer/Edge legacy */
}
.no-hover {
	transform: none !important;
	transition: none !important;
	cursor: default !important;
}

.customButtonRed {
	background:var(--colorRed)!important;
	color:#fff!important;
	border:none!important;
}

.customButtonYellow {
	background:var(--colorYellow)!important;
	color:#fff!important;
	border:none!important;
}

.customButtonBlue {
	background:var(--colorBlue)!important;
	color:#fff!important;
	border:none!important;
}

.customButtonGreen {
	background:var(--colorGreen)!important;
	color:#fff!important;
	border:none!important;
}

.customButtonTransparent {
	background: transparent !important;
	color: #fff !important;
	border: 3px solid #fff !important;
}

.topButtonsShedulesBox {
	width:80%;	
}

.topButtonsShedulesArrow {
	width:34px!important;
	margin:4px!important;
}
.topButtonsShedules {
	width:calc(100% - 84px)!important;
	float:left;
}
.topButtonsShedules>a {
	width:calc((100% / var(--days-count, 5)) - 8px)!important;
	margin:4px!important;
}

.topButtonsShedulesWrap {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	width:100%;
}
.topButtonsShedulesWrap>a {
	flex:0 0 auto;
	width:140px;
	margin:0!important;
}
.topButtonsShedulesWrapIndent {
	/* Aligns this row's first button under the first day-of-week button above it, even though this
	   row renders no "<" arrow of its own. Value measured against the live rendered arrow + margin
	   box model (not derived from the arrow's declared 34px/4px, which comes out a few px short). */
	margin-left:46px;
}

.boxEspacioContainer {
	width:100%;
	aspect-ratio:1/1;
	position:relative;
	margin-top:60px;
}

.boxEspacios {
	width:100%;
	padding:6px 25px;
	clear:both;
	float:left;
}

.boxEspaciosGrupos {
	float:left;
	width:12%;
	overflow:auto;
	border-right:1px solid #d6d6d6;
	padding-right:10px;
	height:100vh;
}
.boxEspaciosGrupos a, .boxEspaciosMicro a {
	color: var(--colorAdmin);
    border: 2px solid var(--colorAdmin);
    background: #F2F2F2;
    font-size: 18px;
    line-height:18px;
    width: 100%;
    padding: 13px 18px;
    text-align: center;
    border-radius: 10px;
    float: left;
    margin: 5px 0;
    font-weight: bold;
    position: relative;
}

.boxEspaciosMicro a {
    width: 97%;
    float: right;
    background-size:cover;
    background-position:center;
}


.boxEspaciosGrupos a:hover, .boxEspaciosMicro a.boxEspaciosMicroTxt:hover {
	color: #fff;
	background: var(--colorAdmin);
}

.boxEspaciosGrupos a.selected , .boxEspaciosMicro a.boxEspaciosMicroTxt.selected {
	color:#fff;
	background: var(--colorAdmin);
}


.boxEspaciosGrupos a {
	height: 55px;
	padding:0;
}
.boxEspaciosGrupos a>div {
	max-height: 44px;
	min-height: 25px;
	line-height: 1.1;
	transform: translate(-50%, -50%);
	overflow: hidden;
	width: 96%;
	position: absolute;
	top: 50%;
	left: 50%;
}

.boxEspaciosGruposImg {
	height:100px!important;
}

.boxEspaciosGruposImg div img {
	height: 70px;
}
.boxEspaciosGruposImg div{
	max-height:fit-content!important;
}

.boxEspaciosGruposImg2 div img {
	height: 55px;
}
.boxEspaciosGruposImg2>div{
	height:98px!important;
	max-height:98px!important;
}

.boxEspaciosGruposImg2 div>div:first-child {
 height:55px;
 margin-top:2px;
}

.boxEspaciosGruposImg2 div>div:nth-child(2){
	position: absolute;
	width: 98%;
	bottom: 5px;
    padding: 0 3px;
    line-height:1;
}

.boxEspaciosMicroImg {
	color: var(--colorAdmin);
    border: 2px solid var(--colorAdmin);
    background: #fff!important;
    font-size: 21px;
    width: 100%;
    padding: 5px 18px 5px 18px!important;
    text-align: center;
    border-radius: 10px;
    float: left;
    margin: 5px 0;
    font-weight: bold;
    position: relative;
}


.boxEspaciosMicroImg a{
	padding:10px
}

.boxEspaciosMicroImg img{
	height:60px;
}

a.boxEspaciosMicroImg:hover {
	box-shadow:none;
}

/* a.boxEspaciosMicroImg:hover img {
	transition: transform .2s;
	transform: scale(1.1);
} */

a.boxEspaciosMicroImg:hover, a.boxEspaciosMicroImg.selected {
	color:#fff;
	background: var(--colorAdmin)!important;
}

.boxEspaciosAlumnos, .boxEspaciosAlumnosDatosAlumno {
	float:left;
	width:calc(70% - 20px);
	margin:10px;
	padding:0 10px;
	/* border-left:1px solid #e6e6e6; */
	border-right:1px solid #e6e6e6;
}

.boxEspaciosAlumnos50 {
	width:calc(50% - 20px);
}

.boxEspaciosAlumnos2col {
	width:calc(80% - 20px);
}

/* .boxEspaciosAlumnosDatosAlumno {
	width:calc(60% - 20px);
} */

.boxEspaciosAlumnosDatosAlumno .boxAlumno {
	width: calc(14.27% - 10px);
}

.boxEspaciosDatosAlumno {
	float:left;
	width:calc(19% - 20px);
}



/* .boxEspaciosAlumnos .boxAlumno {
	margin:0px 10px 24px 10px;
	width: calc(14.28% - 20px);
} */
/* .boxEspaciosAlumnos2col .boxAlumno {
	width: calc(14.28% - 20px);
} */

.boxAlumnos10 .boxAlumno {
	width: calc(10% - 20px);
}

.boxAlumnos8 .boxAlumno {
	width: calc(12.5% - 20px);
}
.boxAlumnos5 .boxAlumno {
	width: calc(20% - 10px);
}

.boxAlumnos4 .boxAlumno {
	width: calc(25% - 10px);
}

.boxEspaciosAlumnos .imgAlumno {
    aspect-ratio: 16 / 19;
}

.boxEspaciosAlumnos .txtAlumno {
    width: 90%;
    height:32px;
    bottom:-16px;
}

.boxAlumnoSelected .imgAlumno {
	border: 4px solid var(--colorAdmin)!important;
	box-shadow:0 0 7px #333;
}
.boxAlumnoSelected .txtAlumno {
	border: 1px solid var(--colorAdmin);
	background:var(--colorAdmin);
	color:#fff!important;
}

.boxAlumnoSelected .imgAlumnoIcono:after {
	color:var(--colorAdmin);
}

.boxEspaciosAlumnosAlu .boxAlumnoSelected .imgAlumnoIcono:after {
	color:var(--color1);
}

.boxAlumnoSelected .imgAlumnoPI:after {
	color:var(--colorAdmin);
}

.boxEspaciosAlumnosAlu .boxAlumnoSelected .imgAlumnoPI:after {
	color:var(--color1);
}

.boxEspaciosAlumnosAlu.boxAlumnoSelected .imgAlumno {
	border: 4px solid var(--color1)!important;
}
.boxEspaciosAlumnosAlu.boxAlumnoSelected .txtAlumno {
	border: 1px solid var(--color1);
	background:var(--color1);
}


.boxAlumnoEspacio .txtAlumno {
	border: 2px solid var(--colorAdmin);
	background: #f2f2f2;
	color:var(--colorAdmin);
	font-weight:bold;
}

.boxAlumnoEspacio.boxAlumnoSelected .txtAlumno {
	color:var(--colorAdmin)!important;
}

.boxAlumnoEspacio.boxAlumnoSelected:hover .txtAlumno {
	color:#fff!important;
}
.boxAlumno.boxEspaciosAlumnosAlu:hover .txtAlumno{
	background:var(--color1);
	border-color:var(--color1);
}

.boxEspaciosAlumnosAlu .boxAlumnoEspacio .txtAlumno {
	border: 2px solid var(--color1);
    background: #f2f2f2;
    color: var(--color1);
    font-weight: bold;
	
}

.boxAlumnoEspacio.boxAlumnoSelected>div>.txtAlumno {
	color: var(--colorAdmin);
}

.boxAlumnoAssigned .imgAlumno {
	border: 3px solid var(--colorAdmin);
	opacity:0.2;	
}

.boxAlumnoActive .imgAlumno {
	border: 3px solid var(--colorGreen);	
}

.boxAlumnoSemiActive .imgAlumno {
	border: 3px solid #F59E0B;
}

.boxAlumnoActive .txtAlumno {
	border-color: var(--colorGreen);	
	color:var(--colorGreen);
}

.boxEspaciosAlumnosAlu.boxAlumnoActive .imgAlumno {
	border: 3px solid var(--color1);	
}

.boxEspaciosAlumnosAlu.boxAlumnoActive .txtAlumno {
	border-color: var(--color1);	
	color:var(--color1);
}

.boxEspaciosAlumnosAlu.boxAlumnoActive:hover .txtAlumno {
	color:#fff!important;
	color:var(--color1);
}

.boxAlumnoDisabled .imgAlumno {
	border: 3px solid var(--colorSoftGray);
	opacity:0.2;	
}

/* .boxEspaciosAlumnos .imgAlumno:hover {
    border: 4px solid var(--umigloRed);
}

/* .boxEspaciosAlumnos .boxAlumno:hover .txtAlumno {
	display:block;
} */


.boxEspaciosDatosAlumno .boxAlumno {
	margin: 15px auto;
    width: calc(80% - 20px);
    float: none;
}

.boxEspaciosDatosAlumno .boxAlumno .txtAlumno {
	font-size: 14px;
    line-height: 14px;
    height: 35px;
}

.boxEspaciosDatosAlumno .boxEspacio {
	margin: 0px auto;
    width: calc(80% - 20px);
    float: none;
    aspect-ratio:1/1;
    background:var(--umigloGrey);
 	margin-top:10px;
 	border-radius:50%;
 	/* font-size:28px;
 	line-height:28px; */
 	font-size:1.7vw;
 	line-height:1;
 	color:#fff;
 	font-weight:bold;
/* 	text-transform:uppercase;*/
}

.boxEspacioContainer .boxEspacio{
	position:relative;
    width: 86%;
    position: absolute !important;
    right:5%;
    top:90px;
	overflow:hidden;
	background:var(--colorAdmin);
	border:2px solid var(--colorAdmin);
}
.boxEspacioContainer .boxEspacio>div{
	z-index:10;
	color:#fff;
	font-size: 2vw;
}

.boxEspacio:has(.locMicroAmbientNom)::after{
	width:100%;
	height:100%;
	position:absolute;
	content:"";
	top:52%;
	background:#f6f6f6;

	z-index:1;
}
.boxEspacioContainer .boxEspacio2::after{
	display:none;
}


.boxEspaciosDatosAlumno .boxEspacio .locMicroAmbientNom{
	font-size: 17px;
    line-height: 20px !important;
    margin-top: 40px;
}

.boxEspaciosDatosAlumno .boxEspacio2 {
	background:#F2F2F2;
	left: 5%;
	right:auto;
    width: 150px;
    position: absolute !important;
    top:-15px;
    bottom:auto;
    border:2px solid #999;
}
.boxEspaciosDatosAlumno .boxEspacio2>div {
	font-size: 1.2vw;
	color:#999;
}

.boxEspacioContainer .boxEspacio .locMicroAmbientNom{
	color:var(--colorAdmin)!important;
	font-size: 1.5vw;
}


.boxEspaciosMicro {
	float:left;
	width:18%;	
}

.espaciosMicroNum, .espaciosMicroNum2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -16px;
    width: 35px;
    height: 40px;
    border-radius: 7px;
    border: 2px solid var(--colorAdmin);
    background: #FFF;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 36px;
    color: var(--colorAdmin)!important;
    z-index:1;
}

.espaciosMicroNum2 {
	position: absolute;
    top: 13px;
    right: -2px;
    left: auto;
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 27px;
}

.boxEspaciosMicroAlu .boxEspaciosMicroTxt .espaciosMicroNum2 {
	border-color:var(--color1);
	color:var(--color1)!important;
}

.customButton > .espaciosAmbientNum {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: -14px !important;
    width: 30px !important;
    height: 30px !important;
    max-height: none !important;
    border-radius: 6px;
    border: 2px solid var(--colorAdmin);
    background: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: var(--colorAdmin)!important;
    z-index: 1;
    overflow: visible !important;
}

.customButtonAlu > .espaciosAmbientNum {
    border-color: var(--color1);
    color: var(--color1)!important;
}

.boxEspaciosMicroImg .espaciosMicroNum {
	left: -16px;
}

/*custom alumno*/
.customButtonAlu,
 .boxEspaciosGruposAlu a, .boxEspaciosMicroAlu a
{
	border: 2px solid var(--color1);
	color:var(--color1);
}


.customButtonAlu:hover,
.topButtons .customButtonAlu.selected,.customButtonAlu.selected,
.boxEspaciosGruposAlu a:hover, .boxEspaciosMicroAlu a.boxEspaciosMicroTxt:hover,
.boxEspaciosGruposAlu a.selected , .boxEspaciosMicroAlu a.boxEspaciosMicroTxt.selected:hover,
.adminTitleAlu::before, .adminSubtitleAlu::before, .boxEspaciosMicroAlu a:hover,.boxEspaciosMicroAlu .boxEspaciosMicroImg.selected,
.boxEspaciosMicroAlu .boxEspaciosMicroTxt.selected
{
    background: var(--color1)!important;
    border: 2px solid var(--color1)!important;
}

/*custom ambient (Espais) — same colour as customButtonAlu */
.customButtonAmbient {
    border: 2px solid var(--color1);
    color: var(--color1);
}
.customButtonAmbient:hover,
.topButtons .customButtonAmbient.selected, .customButtonAmbient.selected {
    background: var(--color1)!important;
    border: 2px solid var(--color1)!important;
}

/*custom box (Situacions d'aula) — umigloYellow */
.customButtonBox {
    border: 2px solid var(--umigloYellow);
    color: var(--umigloYellow);
}
.customButtonBox:hover,
.topButtons .customButtonBox.selected, .customButtonBox.selected {
    background: var(--umigloYellow)!important;
    border: 2px solid var(--umigloYellow)!important;
}


.boxEspaciosAlumnosAlu .boxAlumnoSelected .imgAlumno {
	border: 3px solid var(--color1)!important;
}
.boxEspaciosAlumnosAlu .boxAlumnoSelected .txtAlumno,
.boxEspaciosAlumnosAlu .txtAlumno:hover, .boxEspaciosAlumnosAlu .boxAlumno:hover>.txtAlumno {
	border: 1px solid var(--color1)!important;
	background: var(--color1)!important;
	color:#fff!important;
}
.boxEspaciosAlumnosAlu .boxAlumnoAssigned .imgAlumno,
.boxEspaciosAlumnosAlu .imgAlumno:hover , .boxEspaciosAlumnosAlu .txtAlumno:hover, .boxEspaciosAlumnosAlu .boxAlumno:hover>.txtAlumno {
	border: 1px solid var(--color1)!important;
	background: var(--color1)!important;
}

.boxEspaciosMicroAlu .espaciosMicroNum, .boxEspaciosMicroAlu .espaciosMicroNum2 {
    color: var(--color1) !important;
    border: 2px solid var(--color1)!important;
}

.boxEspaciosGrupos, .boxEspaciosAlumnos, .boxEspaciosDatosAlumno, .boxEspaciosMicro, .rightCol, .colBotons {
	padding-bottom:140px;
}


.tablaCurriculum, .tablaCriterio {
	width:100%;
}
.tablaCurriculum {
	table-layout: fixed;
}
.tablaCurriculum td, .tablaCurriculum th {
	width:20%;
	align-content: baseline;
	vertical-align:top;
}
.tablaCurriculum thead tr{
	font-size:12px;
	line-height:12px;
	text-align:center;
	border-bottom:1px solid var(--colorAdmin);
	color: var(--colorAdmin) !important;
	color:#fff;
}

.tablaCriterio td, .tablaCriterio th {
	align-content: start;
}

.tablaCriterio th.sortable {
	cursor: pointer;
	user-select: none;
}

.tablaCriterio th.sortable:hover>div {
	opacity: 0.85;
}

.tablaCurriculum th>div, .tablaCriterio th>div{
	border-radius:5px;
	border:1px solid #e6e6e6;
	background:var(--umigloGrey);
	color:#fff;
	width:calc(100% - 4px);
	margin:0 2px;
	text-align:center;
	position:relative;
	height:40px;
	font-size:13px;
}
.tablaCriterio .tablaCriterioTit {
	border-radius:5px;
	/* border:1px solid #e6e6e6; */
	background:var(--umigloGrey);
	color:#fff;
	margin:0px;
	text-align:center;
	position:relative;
	height:30px;
	font-size:12px;
	margin-bottom:5px;
}

.tablaCriterio .tablaCriterioTit>div {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
}

.tablaCriterio .tablaCriterioTitLeft>div {
	left: 10px;
    transform: translateY(-50%);
}


.tablaCriterio .tablaCriterioCampo {
	font-size: 14px;
    padding: 8px 8px;
    overflow: hidden;
    height: 33px;
    line-height: 20px;
}
.tablaCriterio .tablaCriterioCampo2 {
	height:auto;
	line-height: 15px;
	font-size: 13px;
}
.tablaCriterio .tablaCriterioCampoSeparador {
	height: 1px;
	background:var(--umigloGrey);
	width:100%;
}


.tablaCriterio .row>* {
    padding-right: 2px;
    padding-left: 2px;
}

.tablaCurriculum button/* , .tablaCriterio button */ {
	border-radius:5px;
	border:1px solid var(--umigloGrey);
	background:#f6f6f6;
	width:calc(100% - 10px);
	margin:3px 5px;
	text-align:center;
	position:relative;
	font-size:clamp(8px, 1vw, 14px);
	padding:5px 2px;
	max-height:80px;
	overflow:hidden;
	color:#000;
	line-height: 15px;
}


.tablaCurriculum th>div>div, .tablaCurriculum td>div>div, .tablaCriterio th>div>div, .tablaCriterio td>div>div  {
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	position:absolute;
}

.tablaCriterio .inputContainer {
	width: 100% !important;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0px;
}

.tablaCriterio .active {
	background:#f6f6f6;
}

.tablaCriterio td div {
	margin: 0px 2px;
    padding: 0px;
    font-size: 14px;
    height: 40px;
    line-height: 21px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tablaCriterioAutoheight th{
	position:relative;
}

.tablaCriterioAutoheight td div {
	margin: 0px 2px;
    padding: 0px;
    font-size: 14px;
    height: auto;
    line-height: 14px;
}
.tablaCriterioAutoheight td{
	font-size:0.75em;
	line-height:1;
	padding:4px;
}

.tablaCriterio .inputContainer .input {
	font-size: 12px;
}

.tablaCriterio .colIco{
	padding:0;
	text-align:center;
	white-space:nowrap;
}
.tablaCriterio .colIco button{
	margin: 0 2px;
	float: none;
	font-size: 12px;
	width: 28px;
	height: 28px;
	text-align: center;
}

.tablaCriterio textarea{
	overflow:hidden;
	resize: none;
	padding-top:5px;
}

.tablaCriterio .inputContainer:has(textarea) {
	height:auto!important;
}

#dataTable {
    table-layout: fixed;
    width: 100%;
}














/*.contenedor-tabla-evaluaciones {
    flex: 1;
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
}

.contenedor-tabla-evaluaciones .scroll-wrapper {
    flex: 1;
    overflow: auto;
}
*/

.contenedor-tabla-evaluaciones {
    width: 100%;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

.contenedor-tabla-evaluaciones .scroll-wrapper {
    overflow-x: auto;
    position: relative;
}

.tabla-evaluaciones {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.col-fix-1 {
	width: 300px;
}
.col-fix-2 {
	width: 75px;
}
.col-data {
	width: 200px;
}
.col-data.col-collapsed {
	width: 28px;
}

/* Collapsed ambient column header — keep chevron visible, hide label */
th.col-collapsed {
    padding: 0 !important;
    text-align: center;
    overflow: hidden;
}
th.col-collapsed .ambient-label {
    display: none;
}
th.col-collapsed .eval-col-chevron {
    float: none;
    display: block;
    margin: 4px auto 0;
}

/* Collapsed data cells — compact padding, badges stack vertically */
td.col-collapsed {
    padding: 4px !important;
}

.tabla-evaluaciones th, 
.tabla-evaluaciones td {
    padding: 12px;
    border: 1px solid #eee;
    white-space: nowrap;
}

/* --- FILAS SUPERIORES FIJAS --- */
.tabla-evaluaciones thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
    height: 30px;
    z-index: 10;
    border-radius: 1px;
    border: 3px solid #ffffff;
	color: #fff;
	text-align: center;
	font-size: 12px;
/*     background: #fff; */
}
.tabla-evaluaciones thead tr:nth-child(2) th {
    position: sticky;
    top: 30px; /* Ajuste según altura de fila 1 */
    border-radius: 1px;
    border: 3px solid #ffffff;
    z-index: 10;
	color: #fff;
	text-align: center;
	font-size: 12px;
/*     background: #fff; */
/*     border-bottom: 2px solid #ddd; */
}

/* --- COLUMNAS LATERALES FIJAS --- */
.tabla-evaluaciones tr th:nth-child(1),
.tabla-evaluaciones tr td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 25;
/*     background: #fff; */
}
.tabla-evaluaciones tr th:nth-child(2),
.tabla-evaluaciones tr td:nth-child(2) {
    position: sticky;
    left: 300px;
    z-index: 25;
/*    background: #fff;*/
/*    border-right: 2px solid #ddd;*/
}

/* --- ESQUINAS (INTERSECCIÓN) --- */
.tabla-evaluaciones thead tr th:nth-child(1),
.tabla-evaluaciones thead tr th:nth-child(2) {
    z-index: 35;
}

.tabla-evaluaciones thead tr:nth-child(2) th {
    /* Estas celdas NO deben tener 'left' porque no son fijas lateralmente,
       solo deben tener el z-index de la cabecera (10) para no tapar las esquinas (15) */
    z-index: 10;
    position: sticky;
    left: auto; 
}

.botonEvaluacion {
	color: var(--colorAdmin);
/* 	border: 2px solid var(--colorAdmin); */
/* 	background-color: #f6f6f6; */
	border-radius: 6px;
	position: relative;
	margin: 4px;
	float: left;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 36px !important;
	width: 40px !important;
	min-width: 0 !important;
	max-width: 40px !important;
	min-height: 36px !important;
	max-height: 36px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	line-height: 36px !important;
	flex-shrink: 0;
	box-sizing: border-box;
}

.botonEvaluacionSecundario,
.tablaCriterio td div.botonEvaluacionSecundario {
	font-size: 0.72em;
	height: 24px !important;
	width: 28px !important;
	max-width: 28px !important;
	min-height: 24px !important;
	max-height: 24px !important;
	line-height: 24px !important;
	opacity: 0.7;
}

.botonEvaluacionCenter {
	float: none;
	display: inline-flex;
}
















.resizer {
	background-color: #e6e6e6 !important;
	cursor: ew-resize;
	width: 3px !important;
	height: 33px !important;
	position: absolute !important;
	right: -4px;
	top: -3px;
	border: 0 !important;
	border-radius: 0 !important;
	z-index:1010!important;
	transition: transform 0.3s ease-in-out;
}
.resizer:hover, .resizer:active {
	transform: scale(1.2);
	background-color:var(--umigloGrey)!important;
}

.truncate {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 24px);
}
.label.truncate {
	max-width: calc(100% - 5px);
}
.truncate-btn {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100%;
  height: 36px !important;
  line-height: 32px !important;
}

/* .tablaCriterio textarea:focus {
	height:150px!important;
	z-index:100;
	background:#fff;
	box-shadow:0 0 5px #666;
	border:3px solid var(--colorAdmin)!important;
	overflow-y:scroll;
} */

.boxGris {
	border:2px solid var(--umigloGrey);
	border-radius:10px;
	padding:20px;
	width:100%;
	float:left;
}

.boxGris button {
	text-align:left;
	width:100%;
}

.boxGrisCol1 {
	float: none;
	width: 100%;
	margin: 0 0 15px;
}
.boxGrisCol1 .customButton {
	width: 100%;
	float: none;
}

.boxGrisCol2 {
	float: none;
	width: 92%;
	margin: 0 0 0 8%;
}

.bloqueTablaTit>div>div {
	background:var(--umigloGrey);
	border-radius:5px;
	padding:5px;
	color:#fff;
	text-align:center;
	margin:0 5px;
	font-size: 14px;
}

.bloqueTablaLinea {
	clear:both;
}

.bloqueTablaLinea img {
	margin:5px;
	height:43px;
}

.msgInfo {
	width:100%;
	padding:10px;
	background:cornsilk;
	color:#333;
	border:1px solid #e6e6e6;
	border-radius:10px;
	margin:0 0 15px 0;
}

.heightAuto {
	height:auto!important;
	margin-bottom:5px!important;
}

.menuSm {
	display:none;
}

.textInfo {
	background: #fff;
    padding: 7px 15px;
    margin-bottom: 15px;
    border-radius: 10px;
	border:1px solid var(--colorTxt);
	color: var(--colorTxt);
    font-size: 15px;
}

.textInfoAlu {
	background: #fff;
    padding: 7px 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    border: 1px solid var(--umigloRed);
    color: var(--umigloRed);
    font-size: 15px;
}

.textNoResults {
	background: #f6f6f6;
    padding: 5px 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    color: #888;
    font-size: 13px;
}

.ampliarTextarea{
	position:fixed!important;
	width:25%!important;
	height:20%!important;
	z-index:10002!important;
	top:52%!important;
	left:50%!important;
	transform:translate(-50% , -50%)!important;
	background:#fff!important;
	font-size:14px!important;
	overflow-y:scroll!important;
	border: 1px solid var(--umigloGrey)!important;
	border-radius:0!important;
}

.modal:not(.fade) {
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:#fff;
	opacity:40%;
	z-index:10000;
	display:none;
}

.modal-box 	{
	position:fixed;
	width:30%!important;
	height:40%!important;	
	top:50%!important;
	left:50%!important;
	transform:translate(-50% , -50%)!important;
	z-index:10001;
	display:none;
	width:max-content;
	width:130px;
	background:#fff;
	box-shadow:0 0 5px #666;
	border-radius:10px;
}

.modal-btn 	{
	width:130px;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	bottom:15px;
	height:35px!important;
}
.modal-txt 	{
	width:85%;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	top:10%;
}
.modal-txt-2 {
	width:85%;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	top:23%;
	font-size: calc(var(--bs-body-font-size) * 0.75);
}


/*reducir pantalla*/
.boxAlumnoMin {
	width:calc(10% - 10px);
}

.boxAlumnos5Min .adminTitle, .boxAlumnos4Min .adminTitle {
	padding-left: 85px;
	height: 45px;
}

.boxAlumnos5Min .adminTitleTxt, .boxAlumnos4Min .adminTitleTxt {
	padding-left: 90px;
	height: 31px;
	font-size: 18px;
}

.boxAlumnos5Min .adminTitle::before, .boxAlumnos4Min .adminTitle::before  {
	width: 85px;
}

.boxAlumnos5Min .adminTitImg>div:nth-child(1), .boxAlumnos4Min .adminTitImg>div:nth-child(1) {
    height: 45px;
    margin-right: 15px;
    width: 45px;
}
.boxAlumnos5Min .adminTitImg>div>img, .boxAlumnos4Min .adminTitImg>div>img {
    height: 45px;
}

.boxAlumnos5Min .boxAlumno {
	margin: 4px 2px 18px 2px;
	width:calc(16.6% - 4px);
}

.boxAlumnos4Min .boxAlumno {
	margin: 4px 2px 18px 2px;
	width:calc(20% - 4px);
}

.boxAlumnos10Min .boxAlumno {
	margin: 4px 2px 18px 2px;
	width:calc(8.33% - 4px);
}

.boxEspaciosMicroTxtMin {
	font-size: 17px!important;
    padding: 5px 10px!important;
    margin: 5px 0!important;
}


/*reducir pantalla espacios*/
.boxEspaciosMicroImgMin>div.boxEspaciosMicroImgBox{
	float: left;
	margin: 0px 5px;
	width:60px;
	height:60px;
	position:relative;
	overflow:hidden;
}
.boxEspaciosMicroImgMin>div.boxEspaciosMicroImgBox img{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
}

.boxEspaciosMicroImgMin>div.boxEspaciosMicroImgTxt{
	float: none;
	text-align: left;
	width: calc(100% - 115px);
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%);
	font-size:17px;
}

a.boxEspaciosMicroImgMin2 {
	height:7vh;
}

.boxEspaciosMicroImgMin2>div.boxEspaciosMicroImgBox{
	float: left;
	margin: 0px 10px;
	height:100%;
	position:relative;
	overflow:hidden;
	aspect-ratio: 1 / 1;
}
.boxEspaciosMicroImgMin2>div.boxEspaciosMicroImgBox img{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	height: 100%;
}

.boxEspaciosMicroImgMin2>div.boxEspaciosMicroImgTxt{
	float: none;
	text-align: left;
	width: calc(100% - 115px);
	margin-left: 10px;
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 19px;
	line-height: 1;
}


.boxEspaciosGruposImgMin {
	height: 50px!important;
}

.boxEspaciosGruposImgMin div{
	max-height:initial!important;
}

.boxEspaciosGruposImgMin div>div:nth-child(1) {
	height: 40px;
	width: 40px;
	float:left;
	overflow:hidden;
	position:relative;
}
.boxEspaciosGruposImgMin div img {
	position:absolute;
	height:40px;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
}

.boxEspaciosGruposImgMin div>div:nth-child(2) {
	width: calc(100% - 45px);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.boxEspaciosGruposImg2.boxEspaciosGruposImgMin div:nth-child(1) {
	position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0 !important;
    left:3px;
}
.boxEspaciosGruposImg2.boxEspaciosGruposImgMin div:nth-child(2) {
	height:fit-content;
	font-size: 16px;
	width: calc(100% - 42px);
}

.imgAlumnoIcono:after {
	content:"\f252";
	font-family:"Font Awesome 5 Free";
	font-weight:bold;
	position:absolute;
	top:4px;
	right:5px;
	color:var(--umigloGrey);
	font-size:10px;
}

.imgAlumnoPI:after {
	content:"\e4eb";
	font-family:"Font Awesome 6 Free";
	font-weight:900;
	position:absolute;
	top:4px;
	left:5px;
	color:var(--umigloGrey);
	font-size:10px;
}



/* NOTIFICATIONS ***************************/
#notificationsContainer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Estilo base */
.toast {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #333;
  color: white;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(20px);
  animation: toastIn 0.4s ease forwards;
  font-size: 14px;
  max-width: 90vw;     /* evita que salga de la pantalla */
  text-align: center;  /* centra el texto */
}

/* Animación de entrada centrada */
@keyframes toastIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación de salida */
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Colores */
.toast.info { background: #2196F3; }
.toast.success { background: var(--colorAdmin); }
.toast.warning { background: #FF9800; }
.toast.error { background: #F44336; }

#notificationsContainer .toast {
  display: flex !important;
  opacity: 1;
  visibility: visible !important;
}

.cell-border-left {
    border-left-width: 1px;
}

.cell-border-left-thick {
    border-left-width: 2px;
    border-left-style: groove;
}

.cell-border-right {
    border-right-width: 1px;
}
.cell-border-top-thick {
    border-top-width: 2px;
    border-top-style: groove;
}

.progress {
  width: 100%;
  height: 6px;
  background-color: var(--bs-gray-200);
  overflow: hidden;
  position: relative;
}

.progress-bar {
  width: 20%;
  height: 100%;
  background-color: var(--colorGreen);
  position: absolute;
  left: 0;
}

.bounce {
  animation: bounce-x 1.6s ease-in-out infinite alternate;
}

@keyframes bounce-x {
  from { transform: translateX(0); }
  to   { transform: translateX(400%); }
}

.dots {
  width: 80px;
  height: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dots span {
  width: 10px;
  height: 10px;
  background-color: #0d6efd;
  border-radius: 50%;
  animation: bounce 0.8s ease-in-out infinite alternate;
}

.dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes bounce {
  from { transform: translateY(0); opacity: 0.4; }
  to   { transform: translateY(-8px); opacity: 1; }
}




.dots-track {
  width: 100%;
  height: 12px;
  position: relative;
  overflow: hidden;
/*   background-color: #e9ecef; */
}

.dots-track span {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--colorGreen);
  border-radius: 50%;
  top: 1px;

  animation: bounce-full 1.6s ease-in-out infinite alternate;
}

/* stagger the dots */
.dots-track span:nth-child(1) { animation-delay: 0s; background-color: var(--colorAdmin)}
.dots-track span:nth-child(2) { animation-delay: 0.15s; background-color: var(--color2)}
.dots-track span:nth-child(3) { animation-delay: 0.3s; background-color: var(--colorAlumno)}

@keyframes bounce-full {
  from { left: 0; }
  to   { left: calc(100% - 10px); }
}

/* Dropzone multi: previews en graella en comptes de columna */
form.dropzone-multi {
    width: 100% !important;
    height: auto !important;
    min-height: 150px !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding: 10px !important;
    gap: 8px;
}
form.dropzone-multi .dz-preview {
    width: 130px !important;
    height: 130px !important;
    margin: 5px !important;
}

/* ── Evaluation toolbar (avalua_tutor) ── */
.eval-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 4px;
}
.eval-toolbar-sep {
    width: 1px;
    background: #ccc;
    align-self: stretch;
    margin: 0 2px;
}
.toolbarSelector {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 6px;
    border: 2px solid var(--colorAdmin);
    background: #f6f6f6;
    color: var(--colorAdmin);
    font-size: 0.78rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    user-select: none;
}
/* .toolbarSelector:hover { */
/*     background: var(--colorAdmin); */
/*     color: #fff; */
/* } */
.toolbarSelector.active {
    background: var(--colorAdmin);
    color: #fff;
    border-color: var(--colorAdmin);
}
.toolbarSelector i {
    font-size: 0.72rem;
}

/* Chevron inside collapsible table headers */
.eval-col-chevron {
    float: right;
    font-size: 0.65rem;
    margin-top: 3px;
    opacity: 0.75;
    transition: transform 0.2s;
    pointer-events: none;
}
.eval-col-chevron.collapsed {
    transform: rotate(-90deg);
}

/* Collapsible th headers */
.th-collapsible-rows,
.th-collapsible-type,
.th-collapsible-ambient {
    cursor: pointer;
    user-select: none;
}

/* Area row collapse chevron button */
.btn-collapse-area {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.45);
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}
.btn-collapse-area:hover {
    background: rgba(0,0,0,0.12);
}
.btn-collapse-area i {
    font-size: 0.6rem;
    transition: transform 0.2s;
}

.pagAmountNeg {
    color: var(--colorRed);
}

.pagAmountZero {
    color: var(--colorGreen);
}

/* Document thumbnail grid — based on boxAlumno/imgAlumno but with text below the image */
.boxDoc {
    margin: 5px 5px 8px 5px;
    width: calc(14.27% - 10px);
    float: left;
    font-size: 10px;
    font-weight: bold;
    line-height: 12px;
    color: #666;
    text-align: center;
    position: relative;
}

.imgDoc {
    width: 100%;
    aspect-ratio: 16/19;
    border-radius: 10px;
    border: 3px solid #e6e6e6;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: block;
}

.imgDoc:hover {
    border: 3px solid var(--colorAdmin);
}

.imgDoc img {
    width: 105%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.txtDoc {
    margin-top: 4px;
    border-radius: 5px;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 3px 5px;
    overflow: hidden;
    word-break: break-word;
}

/* Allow up to 2 lines inside .txtDoc, then clip with ellipsis */
.txtDoc .truncate {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 12px;
    max-height: 24px;
}

/* Image wrapper — establishes a container for proportional sizing of its children */
.imgDocWrapper {
    position: relative;
    container-type: inline-size;
}

/* Delete button: 1/3 of thumbnail width, scales with viewport */
.imgDocWrapper .adminIco {
    width: 33.33%;
    height: auto;
    aspect-ratio: 1;
    font-size: 10cqw;
    line-height: 1;
    border-radius: 6px;
    margin: 0;
    padding: 0;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dropzone upload area: same size and proportions as document thumbnails */
#dzDocuments {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 19;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dzDocuments .dz-default.dz-message {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Weight inputs in the evaluation grid header — no spinner buttons */
.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spinner {
    -moz-appearance: textfield;
}


/* Weight input + chevron floated right inside evaluation grid header cells */
.th-weight-end {
    float: right;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Weight editor inputs in the evaluation grid header */
.eval-weight-type,
.eval-weight-ambient {
    text-align: right;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

/* Itinerari detallat: day-by-day attendance timeline.
   Two independent flex columns (not one grid row per card) so each side packs
   tightly to its own cards' real heights; a masonry-style grid can't do this
   without JS, and a single alternating row wastes the empty side's row height
   on every item. The dot/connector are positioned relative to each card itself
   (not to a shared row), so they always land on that card's own vertical
   center regardless of the other column's height at that point. */
.itineraryTimeline {
	position: relative;
	display: flex;
	gap: 40px;
	width: 100%;
	padding: 10px 0;
}
.itineraryTimeline::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #d6d6d6;
	transform: translateX(-50%);
}
.itineraryTimelineColLeft,
.itineraryTimelineColRight {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.itineraryTimelineColRight {
	/* Offsets the right column by half a card's height, so its first card starts
	   level with the middle of the left column's first card -- the classic
	   staggered (brick-like) look instead of two columns lined up row by row.
	   54px = half the rendered height of a card with both an ambient and a
	   microambient row (measured ~108px; a card with only the ambient row
	   measures ~75px, so this errs toward the taller, more common case). */
	margin-top: 54px;
}
.itineraryTimelineCard {
	position: relative;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	padding: 10px 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	min-width: 0;
}
.itineraryTimelineCardDiscarded {
	/* Attendance not counted (shorter than the centre minimum): faded, with a diagonal
	   strike from bottom-left to top-right. In linear-gradient, "to bottom right" puts the
	   50% line on exactly that diagonal ("to top right" would draw the opposite one). */
	opacity: 0.55;
}
.itineraryTimelineCardDiscarded::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(to bottom right,
		transparent calc(50% - 1px), #6c6c6c calc(50% - 1px),
		#6c6c6c calc(50% + 1px), transparent calc(50% + 1px));
}
.itineraryTimelineDot {
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--colorAdmin);
	transform: translateY(-50%);
}
.itineraryTimelineColLeft .itineraryTimelineDot {
	left: 100%;
	margin-left: 15px;
}
.itineraryTimelineColRight .itineraryTimelineDot {
	right: 100%;
	margin-right: 15px;
}
.itineraryTimelineConnector {
	position: absolute;
	top: 50%;
	width: 20px;
	height: 2px;
	background: #d6d6d6;
	transform: translateY(-50%);
}
.itineraryTimelineColLeft .itineraryTimelineConnector {
	left: 100%;
}
.itineraryTimelineColRight .itineraryTimelineConnector {
	right: 100%;
}
.itineraryTimelineDateRow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}
.itineraryTimelineDate {
	font-weight: bold;
	font-size: 13px;
}
.itineraryTimelineAmbientRow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	min-width: 0;
}
.itineraryTimelineAmbientImg {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 28px;
}
.itineraryTimelineAmbientImg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.itineraryTimelineAmbientName {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	min-width: 0;
}
.itineraryTimelineAmbientName.itineraryTimelineAmbientNameMain {
	font-weight: bold;
}
.itineraryTimelineTransitionIcon {
	flex: 0 0 auto;
	font-size: 12px;
	color: #999;
}
.itineraryTimelinePending {
	display: inline-block;
	flex: 0 0 auto;
	padding: 2px 10px;
	border-radius: 12px;
	background: var(--colorAdmin);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	white-space: nowrap;
}

/* Dashboard KPI cards: shared by the Quadre de comandament (PN=97) and the Activitat dashboard
   (PN=AM). Moved as-is from the inline <style> of panel_dashboard.jsp. .col-lg-2p4 is the
   five-cards-per-row column used by PN=97. */
.col-lg-2p4 { flex: 0 0 auto; width: 20%; }
@media (max-width: 991.98px) { .col-lg-2p4 { width: 100%; } }
.dashboardKpiCard { background:#fff; border:1px solid #e0e0e0; border-radius:6px; padding:12px 14px; height:100%; }
.dashboardKpiCardWarn { border-color:#e8b4b4; }
.dashboardKpiCardLink { cursor:pointer; }
.dashboardKpiCardLink:hover { border-color:#378729; }
.dashboardKpiValue { font-size:1.6rem; font-weight:700; line-height:1.1; }
.dashboardKpiLabel { font-size:0.8rem; color:#666; margin-top:2px; }