:root {
	--umigloGreen:  #608c62;
	--umigloGreenLight:	#D2DED3;
	--umigloRed:    #F14902;
	--umigloYellow: #F4B324;
	--umigloGrey:   #A8A59F;
	--color1: var(--umigloRed);
	--color2: var(--umigloYellow);
	--colorTxt: #282320;
	--colorSoftGray: var(--umigloGrey);
	--colorGestor: #F8BC39;
	/* --colorAdmin: #48974a; */
	--colorAdmin: var(--umigloGreen);
	--colorAlumno: var(--umigloRed);
	--colorGreen: #48974a;
	--colorGreen2: #378729;
	--colorGreen3: #70d375;
	--colorBlue: #30a7e0;
	--colorBlue2: #1d8bc0; 
	--colorYellow: #F8BC39;
	--colorRed: #dd1a1a;
	--ayudaDrawerWidth: 360px;
}

a {text-decoration: none;}

/****** login *******/
div.login {
   /*  background: linear-gradient(-45deg, #f14902, #F4B324, #ff9c1f, #f14902);
    background-size: 400% 400%;
    animation: gradient 13s ease infinite; */
    height: calc(100vh - 68px);
}

@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

.loginInicio{
	width:400px;
	max-width:95%;
	position:relative;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	opacity: 0;
	animation: fadeInTop 1s ease-in both;}
	
@keyframes fadeInTop {
	from {
		opacity: 0;
		transform: translate3d(-50%, -100%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(-50, -50%, 0);
	}
}
.loginInicioBox {
	background:#fff;
	border-radius:30px;
	box-shadow:0 0 8px #777;
	padding:10px 20px 20px 20px;
	text-align:center;
	margin-bottom:10px;}
	
.loginInicioBox img {
	padding-bottom:10px;
	width:140px;}
	
.loginInicioLegend {
	font-size:11px;
	width:100%;
	text-align:center;
	color:var(--color1);}
	
.loginInicioLegend a{color:var(--color1);}
.loginInicioLegend img{
	padding:0 5px;
	width:110px;}
	
input:-internal-autofill-selected {
	appearance: menulist-button;
	background-image: none!important;
	background-color:#fff!important;}
	
div.home {
    height: 100vh;
    position:relative;
   /*  background:var(--color2); */
}


.logoHome {
	position:absolute;
	text-align:center;
	font-size:35px;
	line-height:35px;
	/*text-transform:uppercase;*/
	color:var(--color2);
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	font-weight:lighter;
	letter-spacing:5px;
}

.logoHome img{
	width:300px;
	animation: 2s  circle-in-center both;
}
@keyframes circle-in-center {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(125%);
  }
}

.logoHome>div {
	animation-name: appear-in;
	animation-delay: 1s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity:0;
}

@keyframes appear-in {
  from {
    opacity:0;
  }
  to {
    opacity:100%;
  }
}

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
	animation-delay: 2s;
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

.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);
}

	
/*****input interactiu*****/
.inputContainer {
	position: relative;
	height: 38px;
	width: 100%;
	margin-bottom: 15px;}
	
.inputContainer1ico {
	width:calc(100% - 50px)!important;
	float:left;
}

.inputContainer2ico {
	width:calc(100% - 95px);
	float:left;
}

.inputContainerTextImg {
	width:calc(100% - 175px);
	float:left;
}
	
.inputContainer .input {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	border: 2px solid var(--umigloGrey);
	border-radius: 7px;
	font-size: 14px;
	padding: 0 5px;
	outline: none;
	background: none;
	z-index: 1;
	color:#558657;
	}

.inputContainer .input[disabled] {border: 2px solid #DADCE0!important;}

.inputContainer .input[disabled]:hover {cursor:not-allowed;}

.inputContainer textarea.input {
	font-size: 13px;
	padding: 7px 3px 3px 5px;
	height: 150px;
	resize:none;
	}
	
.inputContainerText {
	height:150px;
}

.inputContainer:has(textarea) {	height:150px;}

.inputContainer .input::placeholder {color: transparent;}

.inputContainer .label {
	position: absolute;
	top: 50%;
	left: 3px;
	padding: 0 2px;
	background-color: white;
	color: #c9c9c9;
	font-size: 13px;
	transition: 0.5s;
	z-index: 0;
	font-weight: normal;
	transform: translateY(-50%);
	line-height: 14px;}
	
.inputContainer .input:focus + .label {
	top: -9px;
	left: 9px;
	z-index: 10;
	font-size: 13px;
	font-weight: 400;
	color: var(--colorAdmin);
	transform: none;}

.inputContainer .input[disabled]+label{z-index:1;}

.inputContainer .input:focus {border: 1px solid var(--colorAdmin);}

.inputContainer .input:not(:placeholder-shown)+ .label {
	top: -9px;
	left: 9px;
	z-index: 10;
	font-size: 13px;
	font-weight: 400;
	transform: none;}
	
.inputContainer i{
	position: absolute;
	top: 28%;
	right: 4%;
	cursor: pointer;
	color: lightgray;
	cursor:pointer;
	z-index: 1000;}

.inputContainerIcon {
	width:calc(100% - 50px)!important;
	float:left;}

.inputContainerIcon  + button {float:right;}

.inputObligatorio {border:2px solid var(--colorAdmin)!important;}

.inputError {
    color: var(--colorRed) !important;
    border-color: var(--colorRed) !important;
}

.inputContainerImg {
	width:150px;
	margin:0 auto;
	border-radius:10px;
	overflow:hidden;
	border:1px solid var(--colorSoftGray);
	margin-bottom:10px;
	position:relative;
}
.inputContainerImg:hover {
	cursor:pointer;
}

.inputContainerImg::after {
	width:60px;
	height:60px;
	background:rgba(255,255,255,0.6);
	text-align:center;
	border-radius:50%;	
	content:'\f093';
	font-family: "FontAwesome";
	font-size:30px;
	line-height:60px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity:0;
}

.inputContainerImg:hover:after {
	opacity:1;
}

.inputContainerImg img {
	width:100%;
}

.inputContainerCheck label {
	width: calc(100% - 32px);
    position: relative;
    top: 0;
}
/*****animated button*****/
.animated-button {
	position: relative;
	display: block;
	margin: 20px auto 0;
	padding: 6px 25px;
	color: #fff;
	font-size:16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	/*text-transform: uppercase;*/
	overflow: hidden;
	letter-spacing: .08em;
	border-radius: 5px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	background:#fff;}
	
.animated-button {
	color: var(--color1);
	cursor: pointer;
	display: block;
	position: relative;
	border: 1px solid var(--color1);
}
	
.animated-button:hover {
	color: #fff !important;
	background-color: var(--color1);
}
.animated-button.animated-right {
	color: var(--color1);
	cursor: pointer;
	display: block;
	position: relative;
	border: 1px solid var(--color1);
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);}

.animated-button.animated-right:hover {
	color: #fff !important;
	background-color: transparent;}

.animated-button.animated-right:hover:before {
	right: 0%;
	left: auto;
	width: 100%;}

.animated-button.animated-right:before {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 0px;
	z-index: -1;
	content: '';
	background: var(--color1);
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);}
	
	
/*****capçalera*****/
header {
    padding: 2px 15px 5px 15px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background:#e6e6e6;
}

/* New-organization onboarding wizard (HANDOFF-organization-onboarding-wizard.md, D-nav): the
   minimal top bar shown instead of the normal header while the wizard is active, plus the step
   map / content layout every wizard JSP shares. */
.capcaleraMinima {
	text-align: right;
}
.capcaleraMinima a {
	color: var(--color1);
	font-size: 16px;
}
.wizardBody {
	max-width: 900px;
	margin: 60px auto 40px auto;
	padding: 0 15px;
}
.wizardStepMap {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0 0 25px 0;
	padding: 0;
}
.wizardStepMap li {
	flex: 1;
	text-align: center;
	font-size: 11px;
	color: #999;
	position: relative;
	padding-top: 28px;
}
.wizardStepMap li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 100%;
	height: 2px;
	background: #ddd;
}
.wizardStepMap li .wizardStepDot {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #ccc;
	line-height: 14px;
	font-weight: bold;
	color: #999;
}
.wizardStepMap li.wizardStepDone .wizardStepDot {
	background: var(--color1);
	border-color: var(--color1);
	color: #fff;
}
.wizardStepMap li.wizardStepCurrent .wizardStepDot {
	border-color: var(--color1);
	color: var(--color1);
}
.wizardStepMap li.wizardStepDone a,
.wizardStepMap li.wizardStepCurrent {
	color: #333;
	font-weight: bold;
}
.wizardStepMap li a {
	color: #999;
	text-decoration: none;
}
.wizardProgress {
	text-align: center;
	color: #999;
	font-size: 12px;
	margin-bottom: 10px;
}
.wizardHint {
	color: #666;
	font-size: 13px;
	margin-bottom: 20px;
}
.wizardPanel {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 20px;
}
.wizardPanel.wizardPanelProposed {
	border-left: 4px solid #f0ad4e;
}
.wizardFooter {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}

.usuario {
	color:#999;
	font-size:12px;
	float:left;
	font-weight:bold;
	/*text-transform:uppercase;*/
	margin-top:3px;
}
.usuarioIconos {
	float:right;
}

.usuarioIconos a{
	margin-left:15px;
	color:var(--color1);
	font-size:13px;
	font-weight:bold;
	line-height:13px;
}

/* Field-help icons (Fase 3 of HANDOFF-ayuda-contextual.md): hidden unless help mode is on --
   body.helpModeActive is set server-side on load (page.jsp) and toggled live by toggleHelpMode()
   (capcalera.jsp), so this stays correct across both navigation and the live toggle.
   !important on both: fontawesome/css/all.css declares "display: inline-block" on .fa-solid (same
   selector specificity as .ayudaIcon) and loads AFTER this file, so without !important that base
   rule silently wins the "hide" case on cascade order alone -- the icons stayed visible after
   turning help mode off. The "show" rule doesn't strictly need it (body.helpModeActive .ayudaIcon
   already outranks .fa-solid on specificity alone) but carries it too, so both rules read as an
   explicit pair instead of one relying on specificity and the other on !important.
   Positioning (revised): every icon is nested as the last child of the component it documents, and
   pinned with position:absolute at that component's own top-right corner -- fixed size regardless of
   the parent's own font-size, entirely out of normal flow so it never shifts page layout. The host
   component needs its own position:relative (or already-positioned box, e.g. the position:absolute
   circle tiles in ambientes.jsp) for top/right to resolve against ITS box and not some outer ancestor. */
.ayudaIcon {
	display:none !important;
	position:absolute;
	top:-10px;
	right:-10px;
	width:16px;
	height:16px;
	font-size:12px;
	line-height:16px;
	text-align:center;
	color:var(--color2);
	cursor:pointer;
	z-index:20;
}
body.helpModeActive .ayudaIcon {
	display:inline-block !important;
}

/* Top-right is the default corner, but on a few ambientes.jsp tiles that corner lands on top of a
   neighboring tile instead of clear space (their physical circles overlap by design) -- these use
   the top-left corner instead, which is clear for that specific pair. */
.ayudaIcon-cornerTL {
	top:-10px;
	right:auto;
	left:-10px;
}

/* .menuLateralOpt (panel_consulta_include.jsp) has a thicker 3px border + 10px border-radius than
   the tiles the -10px default was tuned against -- at that offset the icon's badge collided with
   the rounded-corner curve instead of floating clear of it (confirmed visually against an isolated
   test page in the Browser pane, several offsets compared side by side: -10/-12px still touched the
   curve, -14px was the first to clear it without floating disconnected like -16px did). */
.menuLateralOpt .ayudaIcon {
	top:-14px;
	right:-14px;
}

/* Per-instance colors matching the nearby component's own theme color (see HANDOFF-ayuda-contextual.md
   inventory) -- always fa-regular now (see above), only the color varies per component. */
.ayudaIcon-admin { color:var(--colorAdmin); }
.ayudaIcon-red { color:var(--umigloRed); }
.ayudaIcon-gray { color:var(--umigloGrey); }
.ayudaIcon-green { color:var(--colorGreen); }
.ayudaIcon-blue { color:var(--colorBlue); }
.ayudaIcon-btngray { color:#abaaaa; }
.ayudaIcon-gestor { color:var(--colorGestor); }

/* Permanent help sidebar (#ayudaDrawer, ayuda_drawer.jsp): unlike a Bootstrap Offcanvas, this is
   plain display:none/block off body.helpModeActive -- no backdrop, no Escape-to-close, no
   click-outside-to-close. The ONLY way it closes is toggleHelpMode() (its own close button calls
   that too), matching "solo se sale de modo ayuda con el botón de ayuda". */
#ayudaDrawer {
	display:none;
	position:fixed;
	top:0;
	right:0;
	width:var(--ayudaDrawerWidth);
	height:100vh;
	overflow-y:auto;
	background:#fff;
	box-shadow:-2px 0 10px rgba(0,0,0,0.2);
	z-index:1050;
}
body.helpModeActive #ayudaDrawer {
	display:block;
}

/* Resize handle (ayuda_drawer.jsp): position:fixed, independent of #ayudaDrawer's own overflow,
   straddling its left edge (left computed the same way #ayudaContentWrap's width is, so it always
   tracks the sidebar's current edge -- including live while dragging, since both read the same
   --ayudaDrawerWidth custom property the drag JS updates). Clamped to [20vw,50vw] in JS
   (ayuda_drawer.jsp), not here -- CSS has no min()/max() support old enough to rely on yet in this
   project's target browsers, so the clamp is plain JS math. */
#ayudaDrawerResizeHandle {
	display:none;
	position:fixed;
	top:50%;
	left:calc(100% - var(--ayudaDrawerWidth));
	transform:translate(-50%, -50%);
	width:22px;
	height:64px;
	border-radius:6px;
	background:var(--color1);
	color:#fff;
	align-items:center;
	justify-content:center;
	cursor:ew-resize;
	z-index:1051;
	touch-action:none;
}
body.helpModeActive #ayudaDrawerResizeHandle {
	display:flex;
}
body.ayudaDrawerResizing {
	cursor:ew-resize;
	user-select:none;
}

/* Reflow to make room for the sidebar. #ayudaContentWrap (page.jsp) wraps every screen's own
   content in a position:relative box, shrunk here -- NOT a margin on body -- because it also
   becomes the containing block for any position:absolute descendant sized/positioned in
   percentages (e.g. inicio.jsp's .bloque1-4), which a body margin cannot reach: percentages on an
   absolutely positioned element are relative to its nearest *positioned* ancestor, defaulting all
   the way up to the viewport if there is none -- exactly the bug reported after the first pass of
   this feature (PN=50&PE=1: those tiles kept spilling under the sidebar because they were never
   positioned against anything narrower than the full viewport).
   height:100vh (not the default auto) matters here for a second, easy-to-miss reason: percentage
   `top`/`height` on an absolutely positioned descendant only resolves against a containing block
   with a *definite* height -- with height:auto (content-based) those percentages compute as if
   unset instead, which is exactly what silently "desmontó" inicio.jsp's .bloque1-4 (top:34%/6%/
   etc.) the moment this wrapper was introduced, with help mode off or on alike. 100vh reproduces
   the same definite height the initial containing block (the viewport) already provided before
   this wrapper existed, so this is a return to the original behaviour, not a new one.
   container-type:inline-size turns this element into a CSS container query container: some
   pre-existing classes (.espacioBlo1/.espacioBlo2/.administraBlo1 in estilos.css) are positioned in
   vw -- always relative to the true viewport, which shrinking this wrapper can never reach, no
   matter what -- and had to be switched to the container-relative cqw unit instead so they
   actually respond to the sidebar the same way they would to the browser window itself being
   narrower (see estilos.css for the detail).
   CORRECTION (verified empirically in an isolated test page, see HANDOFF-ayuda-contextual.md
   section 7 for how): container-type/contain:layout does NOT extend to position:fixed descendants
   the way it does to position:absolute ones -- a fixed element inside a contain:layout ancestor
   still positions against the true viewport, exactly like a fixed sibling outside it. (An earlier
   pass of this file assumed otherwise -- transform/filter/will-change:transform do capture fixed
   descendants, contain:layout provably does not -- and removed the two rules below on that wrong
   assumption, which is why the bottom bar on PN=50&PE=6/PN=64&PE=1 went back to not adapting at
   all.) So every position:fixed element inside a screen's own content still needs its own explicit
   override, same idea as header below: header (capcalera.jsp, a sibling of #ayudaContentWrap, not
   a descendant) shifts by `right`; .botonesFixed2 (the bottom action bar on most screens) the
   same; .espacioBoxBut (ambientes.jsp's own bottom bar) is centered via `left:50%+transform`
   instead, so it needs recentring *and* a matching width shrink -- its unshrunk width (95% of the
   true viewport) is wider than the space actually left once the sidebar takes the rest, so
   recentring it alone without narrowing it still overflows both edges (confirmed bug: "Alumnes"
   pushed off the left edge, "Volver" ending up under the sidebar on the right). */
#ayudaContentWrap {
	position:relative;
	width:100%;
	height:100vh;
	container-type:inline-size;
}
body.helpModeActive #ayudaContentWrap {
	width:calc(100% - var(--ayudaDrawerWidth));
}
body.helpModeActive header {
	width:calc(100% - var(--ayudaDrawerWidth));
}
body.helpModeActive .botonesFixed2 {
	right:calc(50px + var(--ayudaDrawerWidth));
}
body.helpModeActive .espacioBoxBut {
	left:calc((100% - var(--ayudaDrawerWidth)) / 2);
	width:calc((100% - var(--ayudaDrawerWidth)) * 0.95);
}
.ayudaDrawerHeader {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:15px 20px;
	border-bottom:1px solid #e6e6e6;
}
.ayudaDrawerHeader h5 {
	margin:0;
	font-size:16px;
	color:var(--color1);
}
.ayudaDrawerHeader h5 i {
	color:var(--color1);
}
.ayudaDrawerBody {
	padding:15px 20px;
}
.ayudaDrawerBody h6 {
	color:var(--color1);
	font-weight:bold;
	margin-top:15px;
}
.ayudaDrawerBody h6:first-child {
	margin-top:0;
}
.ayudaDrawerSupportEmail {
	color:var(--color1);
	font-weight:bold;
}
/* Fluxe: a horizontal chain of step boxes joined by arrows (wraps to multiple lines on a narrow
   sidebar -- flex-wrap, not a fixed-width row -- since the sidebar itself is user-resizable down
   to 20vw). Plain CSS, no diagramming library: each step is just a bordered box, each arrow just
   a FontAwesome glyph between two boxes. */
.ayudaFlujo {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px;
}
.ayudaFlujoPaso {
	border:1px solid var(--color2);
	border-radius:8px !important;
	padding:6px 10px;
	font-size:13px;
	color:var(--colorTxt);
	background:#fff8e6;
}
.ayudaFlujoArrow {
	color:var(--color2);
	font-size:13px;
}
/* Sitewide reset (estilos.css: "ul,li{list-style:none}") loads right after this file, but that's
   an element selector (0,0,1) against this class selector (0,1,0), so specificity alone already
   settles it in our favor -- the bug was simply that list-style was never declared here at all,
   so nothing overrode the reset's "none". Declaring it explicitly is enough, no !important
   needed (unlike the .ayudaIcon visibility fix above, which was a same-specificity tie). */
.ayudaTenerEnCuenta {
	margin:0;
	padding-left:18px;
	list-style:disc;
}
.ayudaTenerEnCuenta li {
	margin-bottom:6px;
	list-style:disc;
}
.ayudaTenerEnCuenta li:last-child {
	margin-bottom:0;
}
/* Iconografia: a small legend of the real visual markers used on student cards elsewhere on the
   page. Each swatch is a self-contained miniature that mimics the actual marker's CSS technique
   (see estilos.css for the full-size originals) rather than reusing the live card classes
   directly -- those depend on percentage-based grid widths and sibling structure that only make
   sense inside a real student card, not a small standalone sample. */
.ayudaIconografia {
	display:flex;
	flex-direction:column;
	gap:12px;
}
.ayudaIconografiaItem {
	display:flex;
	align-items:flex-start;
	gap:10px;
}
.ayudaIconoSample {
	flex-shrink:0;
	width:32px;
	height:32px;
	border-radius:8px;
	border:2px solid #e6e6e6;
	background:#f2f2f2;
	position:relative;
	overflow:hidden;
}
/* Mimics .imgAlumnoDiv (estilos.css): same rotated-rectangle fold, resized to fit a 32px sample
   instead of a full student photo. */
.ayudaIconoSample--diversidad::after {
	content:"";
	position:absolute;
	width:16px;
	height:6px;
	bottom:-1px;
	right:-6px;
	background:#e6e6e6;
	transform:rotate(-45deg);
}
/* Mimics .boxAlumnoEspacio .txtAlumno (estilos.css): this marker lives on the name label, not the
   photo, so the sample is a colored-border pill instead of the square photo swatch above. */
.ayudaIconoSample--asignado {
	width:44px;
	height:20px;
	border-radius:6px;
	border:2px solid var(--colorAdmin);
	background:#f2f2f2;
}
/* Mimics .imgAlumnoIcono:after (estilos.css): same hourglass glyph and font, resized to fit a
   32px sample instead of a full student photo. */
.ayudaIconoSample--pendent::after {
	content:"\f252";
	font-family:"Font Awesome 5 Free";
	font-weight:bold;
	position:absolute;
	top:2px;
	right:3px;
	color:var(--umigloGrey);
	font-size:9px;
}
/* Mimics .imgAlumnoPI:after (estilos.css): same file glyph and font, resized to fit a 32px
   sample instead of a full student photo. */
.ayudaIconoSample--pi::after {
	content:"\e4eb";
	font-family:"Font Awesome 6 Free";
	font-weight:900;
	position:absolute;
	top:2px;
	left:3px;
	color:var(--umigloGrey);
	font-size:9px;
}
/* Mimics .boxAlumnoActive .imgAlumno / .boxAlumnoSemiActive .imgAlumno (estilos.css): same
   colored photo border, at the 32px sample size instead of a full student photo. */
.ayudaIconoSample--avaluat {
	border: 3px solid var(--colorGreen);
}
.ayudaIconoSample--avaluat-parcial {
	border: 3px solid #F59E0B;
}
/* Mimics button.customButtonSomeEvaluated::after / button.customButtonAllEvaluated::after
   (estilosadm.css): same check glyphs and font, centered to fit a 32px sample instead of the
   real button's top-right corner. */
.ayudaIconoSample--proposta-parcial::after {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	color: var(--umigloGrey);
}
.ayudaIconoSample--proposta-total::after {
	content: "\f560";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	color: var(--umigloGrey);
}
.ayudaIconografiaText {
	display:flex;
	flex-direction:column;
	gap:2px;
	font-size:12px;
	line-height:1.5;
}
.ayudaIconografiaContexto {
	font-weight:bold;
	color:var(--colorTxt);
}
.ayudaIconografiaExplicacion {
	color:var(--colorTxt);
}

/* Contextual help content editor -- "Mode edicio" (HANDOFF-ayuda-contextual-editor.md). Every
   selector below is hidden by default and only shown while BOTH body.helpModeActive (drawer
   visible at all) and body.helpEditModeActive (edit mode specifically on) hold -- only a
   SUPER_ADMIN with HELP_CONTENT_EDITOR_ENABLED can ever have the latter class, so this is purely a
   visibility rule, not a security boundary. Same !important pairing as .ayudaIcon above and for the
   same reason: .ayudaEditPencil is a fa-solid glyph, and fontawesome's own "display:inline-block"
   rule on that same selector loads after this file. */
.ayudaEditPencil {
	display:none !important;
	margin-left:6px;
	font-size:12px;
	color:var(--color1);
	cursor:pointer;
}
.ayudaEditPencil:hover {
	color:var(--color2);
}
body.helpModeActive.helpEditModeActive .ayudaEditPencil {
	display:inline-block !important;
}
.ayudaEditForm {
	display:none;
	flex-direction:column;
	gap:8px;
	margin-top:6px;
}
.ayudaEditForm.ayudaEditFormActive {
	display:flex;
}
.ayudaEditTextarea {
	width:100%;
	min-height:80px;
	padding:8px;
	border:1px solid var(--color2);
	border-radius:6px !important;
	font-size:13px;
	font-family:inherit;
	resize:vertical;
}
.ayudaEditFormActions {
	display:flex;
	gap:8px;
	justify-content:flex-end;
}
/* Groups the edit actions with the close button so both sit tight together on the header's right
   edge -- .ayudaDrawerHeader's own space-between only ever sees 2 children (h5, this group), so
   the actions can't drift toward the middle regardless of whether they're shown. */
.ayudaDrawerHeaderRight {
	display:flex;
	align-items:center;
	gap:14px;
}
.ayudaDrawerEditActions {
	display:none;
	align-items:center;
	gap:12px;
}
body.helpModeActive.helpEditModeActive .ayudaDrawerEditActions {
	display:flex;
}
/* Plain <a>, not <button> -- same icon-only-link pattern as capcalera.jsp's own header icons
   (.usuarioIconos a), which this is styled to match: no box, no border, just the glyph in
   var(--color1) with the same hover-to-var(--color2) swap .adminIco/.zoom already use elsewhere. */
.ayudaDrawerEditBtn {
	display:inline-flex;
	align-items:center;
	color:var(--color1);
	font-size:16px;
	line-height:1;
	cursor:pointer;
}
.ayudaDrawerEditBtn:hover {
	color:var(--color2);
}
/* Iconografia (Fase 2): each entry has 2 independently-editable fields (Contexto/Explicacio),
   each its own pencil+form pair on its own line -- see ayuda_drawer.jsp's per-field markup. */
.ayudaIconografiaField {
	display:flex;
	flex-direction:column;
}
/* Numbered-list sections (Fluxe/Tenir en compte, Fase 2): a vertical stack of removable rows plus
   an "Afegeix" link, same flat <a>-based icon-button styling as .ayudaDrawerEditBtn/.ayudaEditPencil
   above and for the same reason -- no native <button> chrome. */
.ayudaEditListForm {
	display:none;
	flex-direction:column;
	gap:8px;
	margin-top:6px;
}
.ayudaEditListForm.ayudaEditFormActive {
	display:flex;
}
.ayudaEditListRows {
	display:flex;
	flex-direction:column;
	gap:6px;
}
.ayudaEditListRow {
	display:flex;
	align-items:center;
	gap:8px;
}
.ayudaEditListInput {
	flex:1;
	padding:6px 8px;
	border:1px solid var(--color2);
	border-radius:6px !important;
	font-size:13px;
	font-family:inherit;
}
.ayudaEditListRemoveBtn {
	display:inline-flex;
	align-items:center;
	color:var(--umigloGrey);
	font-size:14px;
	cursor:pointer;
	flex-shrink:0;
}
.ayudaEditListRemoveBtn:hover {
	color:var(--color1);
}
.ayudaEditListAddBtn {
	display:inline-flex;
	align-items:center;
	gap:6px;
	align-self:flex-start;
	color:var(--color1);
	font-size:13px;
	cursor:pointer;
}
.ayudaEditListAddBtn:hover {
	color:var(--color2);
}

/* Popover editing (Fase 3): one shared floating panel for all ~414 popover-help pencils spread
   across the app's own JSPs, repositioned per click by ayudaEdit.js rather than one inline form
   per site -- see ayudaPopoverEditOpen's own comment. position:fixed + a high z-index since this
   can be triggered from anywhere in the page, including inside elements with their own stacking
   context (modals, sticky headers). No helpModeActive/helpEditModeActive gate needed here (unlike
   every other .ayudaEdit* rule in this file): the panel only ever becomes visible via
   ayudaPopoverEditOpen, which only ever runs from a pencil that's itself already gated that way. */
.ayudaPopoverEditPanel {
	display:none;
	position:fixed;
	z-index:2000;
	width:320px;
	max-width:calc(100vw - 24px);
	background:#fff;
	border:1px solid var(--color2);
	border-radius:8px !important;
	padding:10px;
	box-shadow:0 4px 16px rgba(0,0,0,.15);
	flex-direction:column;
	gap:8px;
}
.ayudaPopoverEditPanel.ayudaPopoverEditPanelActive {
	display:flex;
}

@media only screen and (max-width : 767px) {
	body.helpModeActive #ayudaContentWrap {
		width:100%;
	}
	body.helpModeActive header {
		width:100%;
	}
	body.helpModeActive .botonesFixed2 {
		right:50px;
	}
	body.helpModeActive .espacioBoxBut {
		left:50%;
		width:95%;
	}
	#ayudaDrawer {
		width:100%;
	}
	#ayudaDrawerResizeHandle {
		display:none !important;
	}
}
.logo {
	position:absolute;
	z-index:0;
	top:40px;
	right:25px;
}

.logo img{
	height:100px;
}

/*home*/

div.home {
    /* background: linear-gradient(-45deg, #f14902, #F4B324, #ff9c1f, #f14902);
    background-size: 400% 400%;
    animation: gradient 13s ease infinite; */
    height: calc(100vh);
    position:relative;  
}

@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}


.logoHome {
	position:absolute;
	text-align:center;
    font-size: 35px;
    line-height: 35px;
    /*text-transform: uppercase;*/
    color: var(--color2);
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	font-weight:lighter;
	letter-spacing:5px;
}

.logoHome img{
	width:300px;
	animation: 2s  circle-in-center both;
}
@keyframes circle-in-center {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(125%);
  }
}

.logoHome>div {
	animation-name: appear-in;
	animation-delay: 1s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity:0;
}

@keyframes appear-in {
  from {
    opacity:0;
  }
  to {
    opacity:100%;
  }
}

.bounce-in-top {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
	animation-delay: 2s;
}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


.headerTit{
	padding: 60px 130px 30px 30px;
    font-size: 50px;
    line-height: 50px;
    float: left;
    color: var(--colorSoftGray);
    width: 100%;
    position:relative;
    margin-bottom:10px;
}

.headerTit>span{
	color:var(--color1);
	font-size:18px;
	/*text-transform:uppercase;*/
}

.headerSubtit{
	font-size: 30px;
	margin-top:20px;

}

.logueo {
	float: right;
	background:var(--color1);
    color: #fff;
    /*text-transform: uppercase;*/
    text-decoration: none;
    padding: 2px 10px;
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 14px;
    line-height: 16px;
    margin-top: 1px;
}

.logueo:hover {
	background:#fff;
	color:var(--color1);
}

/*****menu*****/
.menuBox {
    /* border-bottom: 1px solid var(--color2);
    background: var(--color1); */
    width: 50%;
    overflow: auto;
    padding: 4px 0;
    clear:both;
}

.menu-container {
	list-style: none;
	margin:0;
	padding:0px;
}
.menuSelected{
	float:left;
	padding:0px 20px;
	list-style: none;
	text-decoration:none;
	color:var(--color2);
	/*text-transform:uppercase;*/
}

.menu{
	float:left;
	padding:0px 20px;
	list-style: none;
	text-decoration:none;
	color:var(--color1);
	/*text-transform:uppercase;*/
}

.menu:hover, .menuSelected:hover{
	color:#000;
	text-decoration:none;
}
#cssmenu #menu-button {display: none;}

/*****menu lateral*****/
.menuLateral {
    float: left;
    width: 270px;
    /* border: 2px solid #fff; */
    /* margin: 0 25px; */
    background: #efefef;
    padding: 20px;
    min-height: calc(100vh - 145px);
}

.menuLateralOpt {
    width: 100%;
    background: #f6f6f6;
    color: var(--colorGestor);
    position: relative;
    font-size: 22px;
    line-height:21px;
    height: 80px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 3px solid var(--colorGestor);
    text-align:center;
}

.menuLateralOpt>div{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	/*text-transform:uppercase;*/
	width:98%;
}

.menuLateralOptAct {
	background: var(--colorGestor);
    color: #fff;
    border: 3px solid var(--colorGestor);
}

.menuLateralOptAdm {
    color: var(--colorAdmin);
    border: 3px solid var(--colorAdmin);
}
.menuLateralOptActAdm {
	background: var(--colorAdmin);
	border: 3px solid var(--colorAdmin);
	color: #fff;
}

.zoom:hover {
	transition: transform .2s;
	transform: scale(1.05);
}

.boxCol {
	background: linear-gradient(to right, #efefef 270px, #fff 270px);
	float:left;
	width:100%;
}

.rightCol{
	float:left;
	width: calc(100% - 270px);
	padding-right: 30px;
	/* width:calc(100% - 310px);
	margin-right:30px; */
	padding-bottom:140px;
	background:#fff;
	min-height:calc(100vh - 145px);
	/* height:100vh; */
}
.fullCol{
	float:left;
	width: 100%;
	padding:0 30px;
	/* width:calc(100% - 310px);
	margin-right:30px; */
	padding-bottom:140px;
	background:#fff;
	min-height:calc(100vh - 145px);
}

.rightColAlu .colText {
	width:60%;
}
.rightColAlu .colBotons {
	width:40%;
}

.fullColFlex {
	display:flex;
}
.fullColFlex>div {
	float:none;
	width:auto;
	flex:1;
}


/*****contingut*****/
#content {
	padding: 0px;
	min-height: calc(100vh - 250px);
	transition: all 0.3s;
	width:100%;
	position:relative;
	margin-top:40px;}

.contingut {
	min-height:calc(100vh - 240px);
	padding:10px 10px 230px 10px;
	background:#fff;
	border-radius:15px;
	margin:10px 0;}

.contingut, #content>.titPagina {
	float:left;
	width:95%;
	position:relative;
	left:50%;
	-ms-transform: translateX(-50%); /* IE 9 */
	-webkit-transform: translateX(-50%); /* Safari */
	transform: translateX(-50%);}

.contingutCol {
	/* width:calc(100% - 300px);
	float:left; */
	position:relative;
	margin:0 auto;
	width:1250px;
	overflow:auto;
	padding:10px;
}

.botonesCol {
	width:220px;
	float:right;
	padding:20px;
	position:absolute;
	right:30px;
	bottom:30px;
}

.botonesCol button {
	width:100%;
	margin:5px;
	}
	
/*****contenido generales*****/
.titPagina {
	padding: 0 0 0 10px;
	font-size: 1.7em;
	color: var(--color1);
	margin: 20px 0 0 0!important;
	font-weight: 300;
	line-height: 1;}

.titPagina span {font-weight:500;}

.subtitPagina, .subtitPaginaPanel {
	padding:10px 15px;
	font-size:1.2em;
	color:var(--color2);
	border-bottom:1px solid var(--color2);
	background:#fff;
	margin-bottom:10px;}
.subtitPaginaPanel {
	margin-bottom:0px;
	background: #DBEFFF;
	color: var(--color2);
	border-color: #1B3E72;}

.blockPanel {
	background: #fff;
	/* box-shadow: 0 0 3px #999; */
	width: 100%;
	float:left;
	border-radius: 3px;
	margin-bottom: 15px;}

.blockPanel hr {border-top: 1px solid #BADCF7;
}

/*****panel administracion*****/
.boxPanel {
	padding:15px;
	border-radius:10px;
	background:#f6f6f6;
	margin:15px 0;
}

.panelOpt {
	width: calc(10% - 10px);
	float: left;
	margin: 5px;}

.btnPanel {
	height: 75px;
	background: #fadda0;
	border: 1px solid var(--color1);
	margin: 0 auto;
	border-radius: 3px;
	color: var(--color1);
	padding: 15px 5px 15px 5px;
	font-size: 17px;
	font-weight: 300;
	line-height: 1;
	position:relative;
	overflow:hidden;
	transition: transform .2s;}

.btnPanel:hover {
	box-shadow: none;
	background:var(--color1);
	color:#fff;
	transform: scale(1.05);}

.btnPanel>div {
	z-index:1;
	position:relative;}

.btnPanel:hover i {
	transform: rotate(-20deg);
	color:#fff;}

.btnPanel i {
	color: #fff;
	margin: 10px;
	position: absolute;
	transform: rotate(-9deg);
	font-size: 80px;
	right: -10px;
	bottom: -20px;
	z-index: 0;
	opacity: 0.25;}

.tit1 {
	float:left;
	font-size:1.3em;
	padding:10px;
	background-color:#eee;
	font-weight:700;
	width:100%;
	margin-bottom:10px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;}

.titTable {
	background:#ccc;
	border:1px solid #fff;
	font-weight:500;}

.textTable {font-size:0.9em;}

.table-responsive {
	overflow-x:visible;
	width:100%;}

.colLinea {
	border-bottom:1px solid #e9e9e9; 
	float: left;
	width: 100%;
	min-height:60px;}

.bg-total {background:#ffebeb;}

.bg-totales {background:#ffbfbf;}

/*****botones*****/
.botonesFixed {
	position: fixed;
	bottom: 40px;
	background: rgba(255,255,255,0.8);
	z-index: 1001;
	padding: 10px 15px;
	border-radius: 26px;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	border: 2px solid var(--color2);}

.botonesFixed a, .botonesFixed button {
	float:none!important;
	margin:0 5px;}

.botonesFixed2 {
	position: fixed;
	bottom: 20px;
	border-radius: 26px;
	right: 50px;
	z-index: 1001;}

.botonesFixed2 a, .botonesFixed2 button {
	float:none!important;
	margin:0 5px;}



.btn {
	font-size: 13px;
    /* margin-top: -4px; */
}

.btn:hover {
	transition: transform 0.3s;
	transform: scale(1.08);}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {outline:none;}

.btn b {font-weight:500;}

.btn-sm, .btn-group-sm > .btn {
	border-radius: 20px;
	padding:1px 15px 2px 15px;
	font-size: 13px;
	/*text-transform: uppercase;*/}
	
.btn-xs {
	border-radius: 20px;
	}
	
.btn-default {
	color: #fff;
	background-color: var(--color1);
	border-color: none;
	text-transform: none!important;}
	
.btn-default:hover {
	color: #fff;
	background-color: var(--color2);}

.btn-admin {
	position:relative;
	color: #fff;
    background-color: var(--colorGestor);
    font-size: 45px;
    border-radius: 50%;
    width: 75px;
    height: 75px;
    line-height: 45px;
    margin: 0 20px;
    border:0;
}

.btn-admin:hover {
	background-color: var(--colorGestor);
	color:#fff!important;
}

.btn-success {
	background-color: var(--colorGreen);
}

.btn-success:hover {
	background-color: var(--colorGreen2);
}

.btn-info {
	background-color: var(--colorBlue);
}

.btn-gray {
	background-color: #abaaaa;
}
.btn-gray:hover {
	background-color: #888888;
}

.btn-info:hover {
	background-color: var(--colorBlue2);
}

.btn-danger {
	background-color: #e94242;
}

.btn-danger:hover {
	background-color: #dd1a1a;
}

.adminTitle, .adminTitle2 {
	width: 100%;
    padding: 5px 0;
    /*text-transform: uppercase;*/
    text-align: left;
    margin-bottom: 100%;
    color: #fff;
    background: var(--umigloGrey);
    border-radius: 10px;
    font-size:22px;
    line-height:23px;
    margin-bottom:15px;
    position:relative;
    padding-left:130px;
    clear:both;
    display: flex;
    align-items: center;
}
.adminTitle2 {
	text-align:center;
	padding-left:0px;
	display:block;	
}

/*.adminTitle i {
	position:absolute;
	right:0;
}
*/
.adminTitle i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.adminTitle i:nth-of-type(1) {
  right: 10px;
}

.adminTitle i:nth-of-type(2) {
  right: 40px;
}
/* nth-of-type counts DOM position regardless of display:none, but .ayudaIcon/.ayudaEditPencil
   (help + edit-pencil) are hidden outside help mode -- so the 3rd icon's right offset must track
   how many of the preceding icons are actually visible, or it leaves a hollow gap in the default,
   non-help-mode disposition (see reports_management/lista.jsp: help icon, edit-pencil icon, then
   filter icon, in that DOM order). */
.adminTitle i:nth-of-type(3) {
  right: 10px;
}
body.helpModeActive:not(.helpEditModeActive) .adminTitle i:nth-of-type(3) {
  right: 40px;
}
body.helpModeActive.helpEditModeActive .adminTitle i:nth-of-type(3) {
  right: 70px;
}
.adminTitle i.filtered {
  transform: translateY(calc(-50% + 6px));
}
.adminTitle::before {
position: absolute;
    content: "";
    background: var(--colorAdmin);
    left: 0;
    top: 0;
    width: 120px;
    border-right: 1px solid #fff;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* Filter drawer: the box that opens under an .adminTitle bar when its filter icon is clicked
   (filters.js toggleFilterInput() shows/hides it through an inline display). It is a light
   gray box (the bar's grey at low opacity, with a border of the bar's grey) that starts behind
   the bar, so it reads as pulled out of it and not as one more block of controls: the -25px top
   margin cancels the bar's 15px bottom margin and tucks the box 10px under it (estilosmqueries.css
   uses -20px where the bar's bottom margin is 10px), and the 10px side margins keep its square top
   corners under the flat part of the bar (whose own corners are rounded). The padding leaves
   about 8px between the bar and the content (a checkbox row), and about the same below it. */
.filterDrawer {
	margin: -25px 10px 15px;
	padding: 12px 15px 6px;
	border: 2px solid var(--umigloGrey);
	background: rgba(168,165,159,.18);
	border-radius: 0 0 10px 10px;
}
/* Inside the drawer the controls do not keep their 15px bottom margin (it would add empty space
   under the last one); a page that stacks several rows separates them itself (e.g. Bootstrap gy-3). */
.filterDrawer .inputContainer {margin-bottom: 0;}
/* The floating label of a text input paints a white patch over the input's border: here it has to
   match the drawer (the .18 gray over white). */
.filterDrawer .inputContainer .label {background-color: #efefee;}
/* That label is drawn 9px above its input (it sits on the input's top border): give it room so it
   does not touch the title bar. */
.filterDrawer .inputContainer:has(> .label) {margin-top: 11px;}

.adminTitImg, .adminTitImg2 {
	padding-top:0;
	padding-bottom:0;
	padding-left:120px;
	display:flex;
	align-items: center;
	height:60px;
}

.adminTitImg>div:nth-child(1), .adminTitImg2>div:nth-child(1) {
	height:60px;
	margin-right:15px;
	width:80px;
	display:inline-block;
	overflow:hidden;
	text-align:center;
	left: 40px;
	position:absolute
}
.adminTitImg>div:nth-child(1){
	background:#fff;
}
.adminTitImg>div:nth-child(2), .adminTitImg2>div:nth-child(2){
	margin-left:10px;
}

.adminTitImg>div>img, .adminTitImg2>div>img {
	height:60px;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.adminSubtitle {
	width: 100%;
    padding: 5px 10px;
    /*text-transform: uppercase;*/
    margin-bottom: 100%;
    color: #fff;
    /* border:2px solid var(--colorAdmin); */
    border-radius: 8px;
    font-size:16px;
    line-height:18px;
    margin-bottom:15px;
    position:relative;
    text-align:left;
    background: var(--umigloGrey);
    padding-left:85px;
}

.adminSubtitle::before {
position: absolute;
    content: "";
    background: var(--colorAdmin);
    left: 0;
    top: 0;
    width: 80px;
    border-right: 1px solid #fff;
    height: 100%;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.subTitle {
	background: var(--umigloGrey);
	color:#fff;
	font-size:16px;
    line-height:18px;
    width: 100%;
    padding: 7px 5px 7px 15px;
    border-radius: 8px;
}

.adminIcoHeading {
	float:right;
    border: 2px solid var(--colorSoftGray);
    background: var(--colorSoftGray);
    color:#fff;
    font-size: 21px;
    width: 38px;
    height: 38px;
    line-height: 22px;
    border-radius: 8px;
    margin-left:4px;
}

.adminIcoHeading:hover {
	background:#fff;
	color: var(--colorAdmin);
}

.adminIco {
	float:right;
    border: 2px solid var(--color2);
    background: var(--color2);
    color:#fff;
    font-size: 21px;
    width: 38px;
    height: 38px;
    line-height: 22px;
    border-radius: 8px;
    margin-left:4px;
}

.adminIcoVert {
	width:31px;
	font-size:15px;
	
}


.adminIco:hover {
	background:#fff;
	color: var(--color2);
}


.adminIcoSuccess{
	background:var(--umigloGreen);
	border-color:var(--umigloGreen);
	color:#fff;
}

.adminIcoSuccess:hover {
	border-color:var(--colorAdmin);
	background:#fff;
	color:var(--colorGreen);
}

.adminIcoInfo {
	border-color:var(--colorBlue);
	background:var(--colorBlue);
}

.adminIcoInfo:hover {
	background:#fff;
	border-color:var(--colorBlue);
	color:var(--colorBlue);
}

.adminIcoDanger {
	background:#e94242;
	border-color:#e94242;
	color:#fff;
	
}
.adminIcoDanger:hover {
	background:#fff;
	color:#e94242;
}

.overlapRightBottom {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

/*****listas y tablas*****/
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	padding: 2px 6px 2px 6px;
	line-height: 1;
	vertical-align: middle;
	font-size: 13px;
	height: 30px;}

.table>thead>tr>th {
	border-bottom:1px solid var(--colorAdmin);
	font-weight:300;
	color:var(--colorAdmin);
	font-size:12px;}

.table-responsive .table {margin-bottom: 0px;}

.table-responsive .table a {
	color:var(--color1);
	font-size:13px;}

.table-responsive .table a:hover {color:var(--color1);}

th {
	color:var(--colorSoftGray);
	font-weight:normal;
	
}


/*table stackable*/
.table-responsive-stack tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;}


.table-responsive-stack td,
.table-responsive-stack th {
	display:block;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;}

.table-responsive-stack .table-responsive-stack-thead {font-weight: bold;}

.table-responsive-stack td {
	text-align:left;
	font-size: 13px!important;
	line-height: 24px!important;}

.table-responsive-stack td span, .table-responsive-stack td div {
	margin-right:10px;
	float:left;
	margin-top:0!important;}

.show-sm {display:none;}

@media screen and (max-width: 768px) {
	.table-responsive-stack tr {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		border-bottom: 4px solid #ccc;
		display:block;}
	
	/*  IE9 FIX   */
	.table-responsive-stack td {
	float: left\9;
	border-top: none!important;
	width: 100%!important;}

	.show-sm {display:block;}
}

/*****ICONOS****/
.icon {
	cursor: pointer;
	position: relative;
	display: inline-block;
	width: 35px;
	height: 35px;
	margin-left: 5px;
	margin-right: 5px;
	border-radius: 30px;
	overflow: hidden;
	text-align:center;
	line-height:35px;
	font-size: 15px;
	/*text-transform: uppercase;*/
	color: var(--color1);
	font-weight:500;
	padding: 0;
	border: 0;
	transition: transform .2s;
	background:#fff;}
	
.icon:hover {transform: scale(1.15); }

.icon::before, .icon::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	transition: all 0.25s ease;
	border-radius: 30px;}
	
.icon i {
	position: relative;
	color: var(--color1);
	font-size: 21px;
	margin-top: 7px;
	transition: all 0.25s ease;}
	
.icon>div {
	z-index: 100;
	position: relative;}

.icon:hover i, .icon>div:hover {color:#fff!important;}

.icon::before {
	transition-duration: 0.5s;
	box-shadow: inset 0 0 0 1px var(--color1);}
	
.icon:hover::before {
	box-shadow: inset 0 0 0 60px var(--color1);}

.icon-small {
	width: 27px;
	height: 27px;
	font-size: 12px;
	line-height: 27px;
	margin:0 2px;}

.icon-small i {
	font-size: 15px;
	margin-top: 6px;}

.icon-xs {
	width: 24px;
	height: 24px;
	font-size: 12px;
	line-height: 24px;
	margin:0 2px;}

a.icon-xs {display: inline-grid;}

.icon-xs i {
	font-size: 14px;
	margin-top: 5px;}

.icon-xs>div, .icon-small>div {letter-spacing: -1px;}

.icon-selected {
	box-shadow: inset 0 0 0 60px #1B3E72;
	color:#fff;}

.icon-red i{color: #e60000;}

.icon-red::before {
	transition-duration: 0.5s;
	box-shadow: inset 0 0 0 1px #e60000;}
	
.icon-red:hover::before {box-shadow: inset 0 0 0 60px #e60000;}

.icon-orange i{color: #f5ac49;}

.icon-orange::before {
	transition-duration: 0.5s;
	box-shadow: inset 0 0 0 1px #f5ac49;
}

.icon-orange:hover::before {box-shadow: inset 0 0 0 60px #f5ac49;}

.icon-green i{color: #789b41;}

.icon-green::before {
	transition-duration: 0.5s;
	box-shadow: inset 0 0 0 1px #789b41;}
	
.icon-green:hover::before, .icon-green:active::before, .icon-green:focus::before {box-shadow: inset 0 0 0 60px #b3db74;}

/*nou dashboard */
.colText {
	width:calc(50% - 10px);
	float:left;
	padding:0 5px;
	margin-top:5px;
	border-right:1px solid #e6e6e6;
	padding-right:15px;
/*	min-height:100vh;*/
	}

.colText2 {
	margin:5px auto;
	padding:0 5px;}

.colBotons {
	width:calc(50% - 0px);
	float:right;
	padding:0 10px;
	margin-top:5px;
	}

.colCamp {
	margin:5px 0;
	padding-bottom:10px;}

.colCamp>label {
	font-size:15px;
	font-weight:normal;
	padding-top: 5px;
	background-color: #f4f6f9;
	width: 100%;
	padding: 4px 5px;
	text-align: left;
	margin-bottom: 3px!important;
	/*text-transform: uppercase;*/
	color: var(--color1);
	text-align:left!important;
	border-left:5px solid var(--color2);}

.colCamp2>label {
	background-color: #c5c5c5;
	color: #fff;}

.colCampRadio {
	margin-bottom:0px;
	padding-bottom:5px;
	/* border-bottom:1px solid #f4f7fa;
	border-top:1px solid #f4f7fa; */
	float: left;
	width: 100%;
	padding-bottom: 0px!important;
	clear:both;
	margin:2px 0;}

.colCampRadio>label {
	font-size:15px;
	font-weight:normal;
	padding-top: 5px;
	float:left;
	/* width:calc(100% - 75px); */
	margin-right:20px;
	padding-top:0!important;
	margin-top:2px;
	text-align: left;
	margin-bottom: 3px!important;
	/*text-transform: uppercase;*/
	color: #1B3E72;
	text-align:left!important;}

.colCampRadio>div {float:left;}

.colCampRadio .toggleSwitch {
	margin:0;}

.colCamp2 {background-color: #f4f7fa;}

label.control-label {position:relative;}

.colCamp .formData {
	width: 60px;
	text-align: center;
	margin: 0;}

.colCamp .formData2 {
	width: 110px;
	text-align: center;
	margin: 0;}

.form-text {margin-bottom:0;}

.col50 {
	width:50%!important;
	float:left;}

.col100 {width:100%!important;}

/*custom switch*/
.toggleSwitch {
	position: relative;
	margin-top: 5px;
	font-size: 0;
	width: 60px;
	height: 30px;}

.toggleSwitch-label {
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	font-size: 14px!important;
	color:#fff;
	cursor:pointer;
	line-height: 20px!important;
	margin-bottom:0;}

.toggleSwitch-label_left:after {
	content: "";
	position: absolute;
	top: -10px;
	right: -38px;
	bottom: -10px;
	left: 0px;
	z-index: 2;}

.toggleSwitch-label_left {
	position: absolute;
	right: 5px;
	z-index: 1;
	width: 22px!important;
	text-align: center;
	top: 4px;}

.toggleSwitch-label_right {
	position: absolute;
	left: 5px;
	z-index: 1;
	width: 22px!important;
	text-align: center;
	top: 4px;}

.toggleSwitch-input {
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	position: absolute;
	clip: rect(0 0 0 0);
	overflow: hidden;}

.toggleSwitch-display {
	content: "";
	position: absolute;
	width: 58px;
	height: 28px;
	border-radius: 17.5px;
	transition: background-color 150ms ease-in-out;}

.toggleSwitch-display:after {
	content: "";
	position: absolute;
	top: 3px;
	left: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: white;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
	transition: transform 150ms ease-in-out;}

/* checked logic selector */
.toggleSwitch-input_right:checked + .toggleSwitch-display {background-color: #d14545;}
.toggleSwitch-input_right:checked + .toggleSwitch-input_right{ color: #d14545;}
.toggleSwitch-input_right:disabled:checked + .toggleSwitch-display {background-color: #e79a9a;}
.toggleSwitch-input_right:disabled:checked + .toggleSwitch-input_right {color: #e79a9a;}

/* checked logic selector */
.toggleSwitch-input_right:checked + .toggleSwitch-display:after {transform: translateX(29px);}

/* checked logic selector */
.toggleSwitch-input_left:checked + .toggleSwitch-label_right:after {
	content: "";
	position: absolute;
	top: -10px;
	right: 0;
	bottom: -10px;
	left: -36px;
	z-index: 2;}

.toggleSwitch-input_left:checked ~  .toggleSwitch-display {background-color:var(--colorGreen);}
.toggleSwitch-input_left:disabled:checked ~ .toggleSwitch-display {background-color: #dae29e!important;}
.toggleSwitch-input_left:disabled:checked ~ .toggleSwitch-input_left {color: #dae29e!important;}


/*custom checkbox*/
.customCheck{
	margin: 4px;
	float: left;
	width: calc(33.3% - 8px);
}
.customCheck label {
	width:100%;
}
.customCheck label div {
  text-align: center;
  padding: 3px 0;
  display: block;
  width:100%;
  /*text-transform:uppercase;*/
}

.customCheck label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.customCheck label input + div{
	color: var(--colorAdmin);
	/* box-shadow:0 0 5px #999; */
	border: 2px solid var(--colorAdmin);
	background-color: #f6f6f6;
	border-radius: 6px;
	height:36px;
	position:relative;
}
.customCheck label input + div:hover{cursor:pointer;}
/* Disabled (e.g. criterion linked to a locked scheme): dimmed and not clickable. The :hover variant is needed to beat the pointer above. */
.customCheck input:disabled + div,
.customCheck label input:disabled + div:hover {opacity:.65;cursor:not-allowed;}
.customCheck input:checked + div {
    color: #ffffff;
    /* text-shadow: 0 0  6px rgba(0, 0, 0, 0.8); */
}
.customCheck input:checked + div {background-color: var(--colorAdmin);color:#fff;/* box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5); */border:0;}
.customCheck input + div>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    line-height: 14px;
    font-size: 14px;
    text-wrap: unset;
}

/*custom radio*/
.customRadio{
	margin: 4px;
	float: left;
	width: calc(33.3% - 8px);
}
.customRadio>label {
	width:calc(100% - 30px);
	float:left;
}

.customRadio>div {
	width:30px;
	float:right;
}
.customRadio label div {
  text-align: center;
  padding: 3px 0;
  display: block;
  width:100%;
  /*text-transform:uppercase;*/
}

.customRadio input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.customRadio label input + div{
	color: var(--colorAdmin);
    /* box-shadow: 0 0 5px #999; */
    border: 2px solid var(--colorAdmin);
    background-color: #f6f6f6;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    height: 36px;
    position: relative;
    border-right: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.customRadio label input + div:hover{cursor:pointer;}
.customRadio label input:checked + div {
    color: #ffffff;
    /* text-shadow: 0 0  6px rgba(0, 0, 0, 0.8); */
}
.customRadio label input:checked + div {background-color: var(--colorAdmin);color:#fff;/* box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5); */border:0;}
.customRadio label input + div>div {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    line-height: 14px;
    font-size: 14px;
    text-wrap: unset;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 4px 0;
}

.customRadio div input + div{
	color: var(--colorAdmin);
    /* box-shadow: 0 0 5px #999; */
    border: 2px solid var(--colorAdmin);
    background-color: #ffff;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    height: 36px;
    position: relative;
    border-left: 0;
}
.customRadio div input:checked + div::after {
	position:absolute;
   content: "\f00c";
   font-weight:bold;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	font-family:'Font Awesome 5 Free';
}


.customRadio input.selected + div {
	background: var(--colorAdmin);
	color:#fff;
}



/*custom radio text*/
.customRadioTxt{
	margin: 4px;
	float: left;
	width: calc(33.3% - 8px);
}
.customRadioTxt label {
	width:100%;
}
.customRadioTxt label div {
  text-align: center;
  padding: 3px 0;
  display: block;
  width:100%;
  /*text-transform:uppercase;*/
}

.customRadioTxt label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.customRadioTxt label input + div{
	color: var(--colorAdmin);
	/* box-shadow:0 0 5px #999; */
	border: 2px solid var(--colorAdmin);
	background-color: #f6f6f6;
	border-radius: 6px;
	height:36px;
	position:relative;
}
.customRadioTxt label input + div:hover{cursor:pointer;}
.customRadioTxt input:checked + div {
    color: #ffffff;
    /* text-shadow: 0 0  6px rgba(0, 0, 0, 0.8); */
}
.customRadioTxt input:checked + div {background-color: var(--colorAdmin);color:#fff;/* box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5); */border:0;}
.customRadioTxt input + div>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    line-height: 14px;
    font-size: 14px;
    text-wrap: unset;
}

/*custom radio criterio*/
.customRadioCriterio{
	margin: 4px;
	float: left;
	width: calc(100% - 8px);
}
.customRadioCriterio label {
	width:100%;
}

.customRadioCriterio label input {
  position: absolute;
  display: none;
  color: #fff !important;
}

.customRadioCriterio label input + div{
	color: var(--colorAdmin);
	/* box-shadow:0 0 5px #999; */
	border: 2px solid var(--colorAdmin);
	background-color: #f6f6f6;
	border-radius: 6px;
	height:67px;
	overflow:hidden;
}

.customRadioCriterioAlu label input + div{
	color: var(--color1);
	border: 2px solid var(--color1);

}

.customRadioCriterio input:checked + div {
		height: fit-content;
	min-height:45px;
	max-height: fit-content;
}

.customRadioCriterio label input + div:hover{cursor:pointer;}
.customRadioCriterio input:checked + div {
    color: #ffffff;
    /* text-shadow: 0 0  6px rgba(0, 0, 0, 0.8); */
}
.customRadioCriterio input:checked + div {background-color: var(--colorAdmin);color:#fff;/* box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5); */border:0;}
.customRadioCriterioAlu input:checked + div {background-color: var(--color1);}

.customRadioCriterioTxt {
  padding: 3px 0;
  width:calc(100% - 75px);
  margin-left:10px;
  float:left;
  font-size:14px;
}
.customRadioCriterioTxt2 {
	width:calc(100% - 15px)!important;
}
.customRadioCriterioTxt span{
	font-size:12px;
}

.customRadioCriterioImg {
	float:left;
	background:fff;
}
.customRadioCriterioImg img{
	width:55px;
}








/*custom radio: a button with an editable number*/
.customRadioNum{
	margin: 4px;
	float: left;
	width: calc(33.3% - 8px);
}
.customRadioNum>label {
	width:calc(100% - 30px);
	float:left;
}

.customRadioNum>div {
	width:30px;
	float:right;
}
.customRadioNum label div {
  text-align: center;
  padding: 3px 0;
  display: block;
  width:100%;
  /*text-transform:uppercase;*/
}

.customRadioNum input {
  position: absolute;
/*  display: none;*/
  color: var(--colorAdmin) !important;
  width: 100%;
/*  height: 100%;*/
  text-align: center;
  font-size: 14px;
}

.customRadioNum label input + div{
	color: var(--colorAdmin);
    /* box-shadow: 0 0 5px #999; */
    border: 2px solid var(--colorAdmin);
    background-color: #f6f6f6;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    height: 36px;
    position: relative;
    border-right: 0;
}
.customRadioNum label input + div:hover{cursor:pointer;}
.customRadioNum label input:checked + div {
    color: #ffffff;
    /* text-shadow: 0 0  6px rgba(0, 0, 0, 0.8); */
}
.customRadioNum label input:checked + div {background-color: var(--colorAdmin);color:#fff;/* box-shadow:inset 0px 0px 10px rgba(0,0,0,0.5); */border:0;}
.customRadioNum label input + div>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    line-height: 14px;
    font-size: 14px;
    text-wrap: unset;
}

.customRadioNum div input + div{
	color: var(--colorAdmin);
    /* box-shadow: 0 0 5px #999; */
    border: 2px solid var(--colorAdmin);
    background-color: #ffff;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    height: 36px;
    position: relative;
    border-left: 0;
}
.customRadioNum div input:checked + div::after {
	position:absolute;
	content: "\f00c";
	font-weight:bold;
	top:50%;
	left:50%;
	transform:translate(-50% , -50%);
	font-family:'Font Awesome 5 Free';
}


.customRadioNum input.selected + div {
	background: var(--colorAdmin);
	color:#fff;
}



















.customButton, .customButtonMark {
	color: var(--colorAdmin);
	border: 2px solid var(--colorAdmin);
	background-color: #f6f6f6;
	border-radius: 6px;
	height:36px;
	position:relative;
	margin: 4px;
	float: left;
	width: calc(50% - 8px);
	text-align:center;
	line-height:32px;
	/*text-transform:uppercase;*/
}

.customButton2 {
	width:auto;
	padding:0 20px;
	margin:15px 5px;
}
.customButtonAct, .customButton.selected {
	color: #fff;
	border: 2px solid var(--colorAdmin);
	background-color: var(--colorAdmin);	
}
.customButton:hover {
	cursor:pointer;
	background: var(--colorAdmin);
	color:#fff;
}
.customButton.disabled:hover {
	cursor:inherit;
	background-color: #f6f6f6;
	color: var(--colorAdmin);
}
.customButton.disabled.selected:hover, .customButton.disabled.selected {
	cursor:inherit;
	background: var(--colorAdmin);
	color:#fff;
}

.customButton>div{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 31px;
	line-height: 15px;
	width: 97%;
	overflow: hidden;
	padding-bottom: 3px;
	margin-top: 0px;
	padding-top: 1px;
}

button.customButton {
	text-transform:none;
	line-height:19px;
	height:36px;
	padding:2px 4px!important;
	overflow:hidden;
}

button.customButton.selected {
	height: fit-content;
	min-height:36px;
	max-height: fit-content;
}

.customButtonActive:hover, .customButtonActive.selected {
	height:auto!important;
	max-height:auto!important;
	min-height:36px!important;
}

.customButtonActive:hover>div, .customButtonActive.selected>div{
	position: relative;
    top: 0%;
    left: auto;
    transform: none;
    max-height: none;
    line-height: 15px;
    width: 97%;
    overflow: hidden;
    height: max-content;
}

/* Button with two-line text (name + subline), overrides fixed height from button.customButton */
button.customButtonMultiline {
	float: none;
	flex: 1;
	min-width: 0;
	height: auto !important;
	overflow: visible !important;
	line-height: 1.3 !important;
	padding: 6px 4px !important;
}
/* Inner line inside customButtonMultiline: resets absolute positioning from .customButton>div, adds ellipsis truncation */
button.customButtonMultiline > div {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	max-height: none !important;
	width: 100% !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
	padding: 0 !important;
}
/* Subline variant: smaller, dimmed, right-aligned */
button.customButtonMultiline > div.customButtonSubline {
	font-size: 0.78em;
	opacity: 0.65;
	text-align: right;
}
button.customButtonMultiline:hover > div:not(.customButtonSubline) {
	white-space: normal;
	text-overflow: clip;
	overflow: visible;
}

/* Curriculum map (PN=A6) cell-detail modal: a grid of Espai/Proposta/Criteri, grouped by
   ambient type (colspanned subtitle row) and with the Proposta cell left blank on rows that
   repeat the previous row's proposal, so consecutive achievements of one proposal read as
   a group instead of repeating its name on every line. Widened past SweetAlert's default
   ~480px modal width (too cramped for 3 columns of text). */
.swal-modal.cellDetailModal {
	width: 90%;
	max-width: 900px;
}
.cellDetailTable {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
	table-layout: fixed;
}
.cellDetailTable th,
.cellDetailTable td {
	padding: 6px 10px;
	border-bottom: 1px solid #e0e0e0;
	text-align: left;
	vertical-align: top;
	word-wrap: break-word;
}
/* table-layout:fixed makes these percentages the actual column widths, regardless of content. */
.cellDetailTable th:nth-child(1),
.cellDetailTable td:nth-child(1) {
	width: 20%;
}
.cellDetailTable th:nth-child(2),
.cellDetailTable td:nth-child(2) {
	width: 40%;
}
.cellDetailTable th:nth-child(3),
.cellDetailTable td:nth-child(3) {
	width: 40%;
}
.cellDetailTable thead th {
	border-bottom: 2px solid var(--umigloGrey);
	font-weight: 700;
	position: sticky;
	top: 0;
	background: #fff;
	/* .customButton is itself position:relative with z-index:auto, so on scroll the button
	   rows (later in DOM) paint over this sticky header unless it's explicitly raised above
	   their default auto stacking. */
	z-index: 2;
}
.cellDetailGroupHdr {
	background: var(--umigloGrey);
	color: #fff;
	font-weight: 700;
	text-align: center;
}
/* Buttons for the Proposta/Criteri cells: same Umiglo button look as elsewhere (color/border/
   radius/hover from .customButton), but laid out to fill the table cell and clamped to 2 lines
   of wrapped text with ellipsis beyond that — the full text is still available via title.
   The extra-specific selector (3 classes) reliably beats .customButton's own float/width/height
   without depending on stylesheet order. */
.cellDetailTable .customButton.cellDetailButton {
	float: none;
	width: 100%;
	height: auto;
	min-height: 36px;
	margin: 0;
	padding: 6px 10px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
}

/* PN=AI cell-detail modal (D7, HANDOFF-mapa-curricular-alumne.md): flags a row whose achievement
   is linked directly to the student (evaluation_achievements_students) instead of inherited from
   their class group. Same icon/color already used for PI elsewhere (.imgAlumnoPI:after). */
.cellDetailPiIcon {
	color: var(--colorAdmin);
	margin-right: 4px;
}

button.customButtonSomeEvaluated,
button.customButtonAllEvaluated {
	position: relative;
}
button.customButtonSomeEvaluated::after {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	top: 3px;
	right: 4px;
	font-size: 10px;
	line-height: 1;
	pointer-events: none;
}
button.customButtonAllEvaluated::after {
	content: "\f560";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	top: 3px;
	right: 4px;
	font-size: 10px;
	line-height: 1;
	pointer-events: none;
}
button.customButtonSomeEvaluated > div,
button.customButtonAllEvaluated > div {
	padding-right: 16px;
}
button.customButton.customButtonActive > div {
	max-height: 34px;
	padding-bottom: 5px;
}
button.customButton.customButtonActive:hover > div,
button.customButton.customButtonActive.selected > div {
	max-height: none;
	padding-bottom: 0;
}

.form-control {
	height:auto;
	padding: 7px 10px;
	font-size: 13px;
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	color:#558657!important;
	}

select.form-control {
	margin-top:2px!important;
	padding:5px 10px;}

.form-control-static {
	font-size:14px;
	min-height: auto;
	padding-top: 3px;
	padding-bottom: 3px;}

.form-control-static select {padding: 1px 2px;border-radius: 4px;}
.form-horizontal .control-label {padding-top:3px;}
#collapseFiltros .btn-sm, #collapseFiltros .btn-group-sm > .btn {margin-top: -1px;}
.form-horizontal .form-group {padding-bottom: 1px;}
/* .form-horizontal {margin:15px 0;} */
.form-group {
	margin-bottom: 5px;
	font-size:14px!important;}

.form-group input {margin-bottom:0px;}
.form-control[disabled], fieldset[disabled] .form-control {	background-color: #f4f7fa;	}
.form-control[readonly] {background-color:#e9f3fe}
textarea.form-control {min-height:120px;}
.form-horizontal .form-group {
	padding-bottom:10px;
	border-bottom:1px solid #f4f7fa;}

.campoObligatorio {border:2px solid #BADCF7!important;}

input[type=time]{
	border:1px solid var(--colorSoftGray);
	border-radius: 7px;
    font-size: 15px;
    padding: 0 10px;
    color:var(--colorSoftGray);
    position:relative;
    /* padding-right:25px; */
}

.filtro {
	padding:10px 5px;
	margin-bottom:10px;}


.filtro>button {
	margin:1px 1px;
	border:2px solid var(--umigloGrey);
}

.filtro>div {
	width:20%;
	float:left;
	margin:0 5px;
}
.filtro-adv {
	display:flex;
	position:relative;
	margin:6px 0;
	padding:5px;
}
.filtro-adv>div {
	width:-webkit-fill-available;
}
/* Groups a subset of .filtro-adv fields (e.g. a toggle plus the fields it enables)
   inside a subtle bordered box, without altering the outer row's sizing rules: left as
   a plain .filtro-adv>div so it still gets its share via width:-webkit-fill-available
   like every other top-level filter field. Its own children use a standard, self-contained
   flex layout (not the fill-available hack) so they never overflow the box: flex-wrap is a
   hard safety net against overlap, and min-width:0 defeats flex's default min-width:auto,
   which otherwise refuses to shrink a <select> below its content size and pushes it past
   the border. align-items:center + margin:0 (instead of each field's own 15px bottom
   margin) give the box equal breathing room above and below its content. */
.filtroGroup {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:8px 10px;
	padding:10px;
	border:1px solid var(--umigloGrey);
	border-radius:8px;
}
.filtroGroup>div {
	flex:1 1 170px;
	min-width:0;
	width:auto;
	margin:0;
}

/* Curriculum map (PN=A6): rows 1 and 2 of the filter bar share a 4-column grid so their
   fields line up exactly — Cicle/Grup/Àrea/Tipus above Només propostes actives/Període/
   [box]. Uses CSS Grid rather than .filtro-adv's usual flex "equal-share" trick, because
   that trick can only ever divide space evenly among direct children; here the box below
   needs to be exactly 2 columns wide to match Àrea+Tipus combined, which plain equal
   flex-sharing cannot express. Scoped to this extra class so the shared .filtro-adv/
   .filtro-adv>div rules used by every other page stay untouched. */
.filtro-adv.mapFilterGrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 10px;
}
.filtro-adv.mapFilterGrid > div {
	width: auto;
}
.filtro-adv.mapFilterGrid > .filtroGroup {
	grid-column: span 2;
}


.drag-handle {
	cursor:grab;
	min-height:28px!important;
	height:auto!important;
	/* border-radius:0!important;
	height:28px!important;
	background:#f6f6f6!important;
	color:#333!important; */
	float:inline-start;
}
.drag-handle>div:nth-child(1){
	/*width: calc(100% - 4px) !important; */
    text-align: left;
    /* left: 4px !important; */
    /* transform: translateY(-50%) !important; */
    float: left;
    position: inherit;
    left: auto;
    top:auto;
    line-height: 27px;
    margin-left: 2px;
    transform:none;
}
.drag-handle>div:nth-child(2){
	float:right;
	position:inherit;
	transform:none;
	left:auto;
	top:auto;
	margin-top:6px;
}

.drag-handle button{
    /* position: absolute; */
    right: 2px;
    border: none;
    background: none;
    width: 12px;
    height: 14px;
    text-align: center;
    line-height: 10px;
    z-index: 100;
    padding: 0;
    /* border-radius: 50%; */
    margin: 0;
    color:#fff;
}
.drag-handle button:hover{
	color:#666;
}

.drag-handle button, .drag-handle i {
  cursor: pointer;
  pointer-events: auto;
}

.drag-handle button:disabled, .drag-handle button:disabled i{
	cursor:default;
}
.drag-handle button:disabled:hover{
	color:#fff;
}

.drag-handle .sort-btn {
	width:6px;
}

.dropdown-menu {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: block;
  position: absolute;
  right: -1px;
  padding:0;
  width: fit-content;
  min-width: auto;
  font-size:13px;
  top:16px;
  z-index:100000;
}

.dropdown-menu.show {
      opacity: 1;
  transform: scaleY(1);
}

.tablaCriterio th:nth-child(1) .dropdown-menu,.tablaCriterio th:nth-child(2) .dropdown-menu {
	left:-5px;
	right:auto;
}

.dropdown-item {
	padding: 3px 4px 3px 3px;
	cursor:pointer;
}
.dropdown-item i{
	font-size:8px;
	color:#999;
	margin-right:2px;
	position:relative;
	top:-2px;
}

.dropdown-item:active, 
.dropdown-item:focus {
	background-color: transparent !important;
	color: inherit !important;
}


.btn-dropdown {
	width:auto!important;
	position:relative;
	padding:0;
	margin: 0 !important;
}
.btn-dropdown button {
	margin: 1px 1px;
    border: 2px solid var(--umigloGrey);
}

.btn-dropdown .dropdown-item {
	font-size: 12px;
	padding: 5px 7px;
	display:inline-flex
}


.btn-dropdown .dropdown-item input{
	margin-right:3px;
}
.btn-dropdown .dropdown-item div{
	margin-top:1px;
}
.btn-dropdown .dropdown-menu{
	top:38px;
}

/*checkbox personalitzat*/
.dropdown-item label {
  cursor: pointer;
  color: #383A3F;
  display: block;
  font-size: 13px;
}
.dropdown-item label input[type=checkbox] + .label-text:hover:before {
  color: var(--colorGreen);
}
.dropdown-item label input[type=checkbox] {
  display: none;
}
.dropdown-item label input[type=checkbox] + .label-text:before {
  content: "";
  color: #dddfe6;
  font-family: "fontAwesome";
  line-height: 1;
  width: 1em;
  display: inline-block;
  margin-right: 5px;
  font-size:14px;
}
.dropdown-item label input[type=checkbox]:checked + .label-text:before {
  content: "";
  color: var(--colorGreen);
  animation: tick 150ms ease-in;
}
.dropdown-item label input[type=checkbox]:disabled + .label-text:before {
  content: "";
  color: #dddfe6;
}

@keyframes tick {
  0% {
    transform: scale(0);
  }
  90% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* input[type=time]::-webkit-calendar-picker-indicator {
	display:none;
} */

/* input[type=time]::after {
  right:4px;
  top:3px;
  content: '\f017';
  font-size: 15px;
  font-weight:normal;
  position: absolute;
  font-family:'Font Awesome 5 Free';
  
  } */

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 5px;
  height: 25px;
  width: 25px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  outline: none;
  z-index: 1000;
}
.option-input:hover {
  background: #9faab7;
}

.option-input:checked {
  /* background: #40e0d0; */
  background:var(--colorGreen);
}
.option-input:checked::before {
  width: 25px;
  height: 25px;
  display:flex;
  content: '\f00c';
  font-size: 17px;
  font-weight:bold;
  position: absolute;
  align-items:center;
  justify-content:center;
  font-family:'Font Awesome 5 Free';
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #40e0d0;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}

.option-input.radio {
  border-radius: 50%;
}
.option-input.radio::after {
  border-radius: 50%;
}

.option-input:disabled {
	transition: none;
	opacity:0.9;
	cursor:auto;
	background: #cbd1d8;
}

.option-input:disabled:hover {
  background: #cbd1d8;
}

.option-input:disabled::after {
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;	
}

.boxInputRadio {
	float:left;
	clear:both;
}
.boxInputRadio>div, .boxInputRadio>input {
	float:left;
}
.boxInputRadio>div{
	margin-top:17px;
}

@keyframes click-wave {
  0% {
    height: 25px;
    width: 25px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 80px;
    width: 80px;
    margin-left: -25px;
    margin-top: -25px;
    opacity: 0;
  }
}

.botonsPaginacio {
	float:left;
	clear:both;
	margin:10px 0;
	position:relative;
	left:50%;
	-ms-transform: translatex(-50%);
	-webkit-transform: translatex(-50%);
	-moz-transform: translatex(-50%);
	transform: translatex(-50%);	}

.botonsPaginacio a {
	padding:4px 10px;
	border:1px solid #ccc;
	margin:5px 0;
	border-radius:5px; }

.botonsPaginacio a:hover {
	background:#f4f7fa;
	color:#B0BDE9;}

.page-link {
	color:var(--color1);
}

/* Light base for a <select> dropped inside a Bootstrap .page-link cell — used both by
   the unified pager below and by pages that keep their own pager markup
   (query_evaluations_advanced). Just strips the native chrome and matches the row height. */
.page-link-select select {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	border:0;
	background:transparent;
	font:inherit;
	color:inherit;
	cursor:pointer;
}

/* Unified table pager (HANDOFF-paginacion-tablas.md, section 4.A): total on the left,
   navigation centred, page-size selector on the right, every control the same height and
   baseline. Everything is scoped under .tablePager and overrides Bootstrap's
   .pagination/.page-link box model so the widget renders identically whether or not its
   nav sits inside a <ul class="pagination"> (Pattern A/C fragment vs the Pattern B panels).
   Colours are driven by the tokens below, so one screen can re-skin the widget with an
   inline style or a modifier class, e.g. <div class="tablePager" style="--tablePager-active-bg:#0a7">. */
.tablePager {
	--tablePager-fg:         var(--color1);
	--tablePager-border:     var(--colorSoftGray);
	--tablePager-active-bg:  var(--color1);
	--tablePager-active-fg:  #fff;
	--tablePager-muted-fg:   var(--colorSoftGray);
	--tablePager-value-fg:   var(--colorTxt);
	--tablePager-ctl-height: 32px;

	display:flex;
	align-items:center;
	gap:14px;
	justify-content:center;
	flex-wrap:wrap;
	margin-top:10px;
	font-size:.85rem;
	line-height:1;
}
.tablePager-total {
	color:var(--tablePager-muted-fg);
	white-space:nowrap;
}
.tablePager-size {
	display:flex;
	align-items:center;
	gap:8px;
}
.tablePager-size label {
	color:var(--tablePager-muted-fg);
	margin:0;
	line-height:var(--tablePager-ctl-height);
}

.tablePager nav { display:flex; }
.tablePager .pagination {
	margin:0;
	display:flex;
	align-items:stretch;
	gap:0;
	list-style:none;
	padding:0;
	/* zero out Bootstrap 5's pagination CSS vars so its own .page-link rules collapse */
	--bs-pagination-padding-x:0;
	--bs-pagination-padding-y:0;
	--bs-pagination-border-width:0;
}
.tablePager .page-item {
	display:flex;
	margin:0;
}
.tablePager .page-link,
.tablePager .page-link-select {
	box-sizing:border-box;
	height:var(--tablePager-ctl-height);
	min-width:var(--tablePager-ctl-height);
	margin:0;
	padding:0 10px;
	border:1px solid var(--tablePager-border);
	background:#fff;
	color:var(--tablePager-fg);
	font-size:.85rem;
	line-height:1;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	white-space:nowrap;
}
.tablePager .page-item + .page-item .page-link,
.tablePager .page-item + .page-item .page-link-select {
	border-left:0;
}
.tablePager .page-item:first-child .page-link {
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
}
.tablePager .page-item:last-child .page-link,
.tablePager .page-item:last-child .page-link-select {
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
}
.tablePager a.page-link:hover {
	background:#f4f7fa;
}
.tablePager .page-active {
	background:var(--tablePager-active-bg);
	border-color:var(--tablePager-active-bg);
	color:var(--tablePager-active-fg);
	font-weight:600;
}
.tablePager .page-item.disabled .page-link,
.tablePager .page-item.disabled .page-link-select,
.tablePager .page-link-select select:disabled {
	opacity:.4;
	pointer-events:none;
	cursor:default;
}

/* Both <select> wrappers: the go-to-page one (inside the .pagination) and the page-size
   one (inside .tablePager-size). Padding sits on the <select>, not the wrapper. */
.tablePager .page-link-select {
	padding:0;
	overflow:hidden;
	color:var(--tablePager-value-fg);
}
.tablePager-size .page-link-select {
	border-radius:4px;
}
.tablePager .page-link-select select {
	height:100%;
	margin:0;
	padding:0 24px 0 10px;
	background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23999' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 8px center;
}

/* The centre go-to-page <select> replaces the old current-page number, so it carries the
   same "you are here" accent (page-active) — needs a white caret on the accent fill. */
.tablePager .page-link-select.page-active {
	color:var(--tablePager-active-fg);
	font-weight:600;
}
.tablePager .page-link-select.page-active select {
	background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23fff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}

.formData {
	width:150px!important;
	display:inline!important;
	margin:3px!important;
	float:none!important;}


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

.dropzone .dz-message > span {
	font-size: 16px!important;
}

.bottomFixed {
    position: fixed;
    left: 0;
    bottom: 0px;
    width: 100%;
    background: #fff;
    padding-bottom: 60px;
    box-shadow: 0 0 5px #999;
    height:250px;
}

#bloAmbientes, #bloAreas, #bloCajas, #bloGrupos, #bloEspecialidad {
	display:none;
}

#divMicroAmbients img, #divMicroespais img, #divCriterisAvaluacio img,  .tablaCriterio img, .bloqueTablaLinea img{
	border-radius: 10px;
    border: 1px solid var(--colorSoftGray);
    height:37px;
}

/* Microespai thumbnail: the delete-image button overlays the image corner (.overlapRightBottom)
   instead of floating beside it, so it can't wrap onto its own line and drop out of alignment
   with the neighbouring row-delete button when the column is too narrow for both. */
#divMicroAmbients td > div {
	position: relative;
	display: inline-block;
}
#divMicroAmbients td > div .overlapRightBottom {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	font-size: 11px;
	line-height: 1;
	margin: 0;
	border: 2px solid #fff;
}

.imgCriteriItem {
	width: 37px;
	object-fit: contain;
}

.w-md-50 {
	width:50%!important;
}
.w-md-40 {
	width:40%!important;
}


.accentColorAdmin{
	accent-color: var(--colorAdmin);
}


/****************mqueries**************/

@media only screen and (max-width : 1024px) {
	.menuBox {width:100%;}
	#cssmenu {width:100%}
	#cssmenu #menu-button {position:relative;display: block;text-decoration: none;font-size: 17px;color: var(--color1);padding:8px 5px 8px 60px;text-transform: uppercase;cursor: pointer; text-align:left;}
	#cssmenu > ul > li {width:100%;margin:0;}
	#cssmenu > ul > li > a {float:left;width:100%;padding:10px 0; border-radius:0;text-align:center; font-size:18px;border-top:1px solid #fff;border-bottom:1px solid #fff;}
	#cssmenu > ul {display: none;}
	#cssmenu > ul.open {display: block; border-top: 1px solid rgba(0, 0, 0, 0.1);width:100%}
	#cssmenu #menu-button::after {display: block;content: '';position: absolute;height: 7px;width: 25px;border-top: 2px solid var(--color1);border-bottom: 2px solid var(--color1); left: 20px; top: 15px;}
	#cssmenu #menu-button::before {display: block; content: ''; position: absolute; height: 3px; width: 25px;border-top: 2px solid var(--color1); left: 20px;top: 25px;}
}

@media only screen and (max-width : 767px) {
	/* .usuario{width: 100%;text-align: center;margin-top: 15px;}
	.w-md-50, .w-md-40, .filtro>div {width:100%!important;}
	.filtro>div {margin:5px 0;} */
	
}

@media only screen and (max-width : 480px) {

}


/* 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;
}

.filtered {
/* 	color: var(--colorBlue2);
	border: 2px solid #fff;
	padding: 12px; */
	border-bottom: 2px solid currentColor;
	padding-bottom: 10px;
}






.fixedTable {
    border-collapse: collapse;
    table-layout: fixed;
    width: max-content; /* Ensures table is wide enough to trigger scrolling */
    min-width: 100%;
}

/* --- Linkable textarea preview (utilsControls.js) --- */
.inputContainer .linkPreview {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    /* Match .inputContainer textarea.input */
    border: 2px solid var(--umigloGrey);
    border-radius: 7px;
    font-size: 13px;
    padding: 7px 3px 3px 5px;
    color: #558657;
    background: #fff;
    z-index: 1;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    cursor: text;
}
.inputContainer .linkPreview a {
    color: #0066cc;
    text-decoration: underline;
}

/* Student payment status icons */
.pagCheckPaid {
    color: var(--colorGreen);
    font-size: 1.2em;
}
.pagCheckPending {
    color: var(--colorRed);
    font-size: 1.2em;
}
.pagCheckExempt {
    color: var(--colorSoftGray);
    font-size: 1.2em;
}

/* Compact bank movement table */
.tablaCriterio.tablaDensa td,
.tablaCriterio.tablaDensa th {
    font-size: 12px;
    padding: 3px 6px;
    line-height: 1.3;
}

/* Small inline icon button for dense tables */
.adminIcoSm {
    font-size: 13px;
    width: 24px;
    height: 24px;
    line-height: 13px;
    border-radius: 5px;
    margin-left: 2px;
    float: right;
    border: 2px solid;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Smaller checkbox variant for dense table rows — stays below fixed action bar */
.option-input-sm {
    width: 20px;
    height: 20px;
    top: 2px;
    z-index: 1;
}
.option-input-sm:checked::before {
    width: 20px;
    height: 20px;
    font-size: 13px;
}