:root {
	--porcentaje-claro: 45%;
    --porcentaje-oscuro: 15%;	
	
	--colorPrimario-h: 208;
    --colorPrimario-s: 55%;
    --colorPrimario-l: 42%;
    --colorPrimario: hsl(var(--colorPrimario-h), var(--colorPrimario-s), var(--colorPrimario-l));
	--colorPrimario--claro: hsl(var(--colorPrimario-h), var(--colorPrimario-s), calc(var(--colorPrimario-l) + var(--porcentaje-claro)));	
	--colorPrimario--oscuro: hsl(var(--colorPrimario-h), var(--colorPrimario-s), calc(var(--colorPrimario-l) - var(--porcentaje-oscuro)));
	--colorPrimario--oscuro--hover: hsl(var(--colorPrimario-h), var(--colorPrimario-s), calc(var(--colorPrimario-l) - var(--porcentaje-oscuro) + 5%));
	--colorPrimario--hover: hsl(var(--colorPrimario-h), var(--colorPrimario-s), calc(var(--colorPrimario-l) + 5%));
	
    --colorSecundario-h: 180;
    --colorSecundario-s: 35%;
    --colorSecundario-l: 42%;
    --colorSecundario: hsl(var(--colorSecundario-h), var(--colorSecundario-s), var(--colorSecundario-l));
	--colorSecundario--claro: hsl(var(--colorSecundario-h), var(--colorSecundario-s), calc(var(--colorSecundario-l) + var(--porcentaje-claro)));	
	--colorSecundario--oscuro: hsl(var(--colorSecundario-h), var(--colorSecundario-s), calc(var(--colorSecundario-l) - var(--porcentaje-oscuro)));	
	--colorSecundario--hover: hsl(var(--colorSecundario-h), var(--colorSecundario-s), calc(var(--colorSecundario-l) - 5%));
	
	--colorSuave: #f1f5f9;
	
	--colorDarkMode: #23354e;
	--colorDarkMode--claro: #274265;
	--colorDarkMode--oscuro: #16202e;
	
}

html {
	display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
	overflow-x: hidden;
}


/*** Animación Preloading Puntos ***/

.loading {
	
	height: 100%;
    width: 100%;
    position: fixed;
	background-color: #00000090;
	opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999999999999999;
	animation: fade 0.5s ease-out 1s forwards;
	display: flex;
	flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
	color: white;
    font-weight: bold;	
}

.line {
	display: inline-block;
	width: 6px;
	height: 16px;
	border-radius: 15px;
	background-color: #4b9cdb;
}

@keyframes loadingC {
	0% {
	  transform: translate(0, 0);
	}
	50% {
	  transform: translate(0, 15px);
	}
	100% {
	  transform: translate(0, 0);
	}
}

.load-3 {
	height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;	
}

.load-3 .line:nth-last-child(1) {
	animation: loadingC 0.6s 0.1s linear infinite;
  }
.load-3 .line:nth-last-child(2) {
	animation: loadingC 0.6s 0.2s linear infinite;
}
.load-3 .line:nth-last-child(3) {
	animation: loadingC 0.6s 0.3s linear infinite;
}



@keyframes fade {
	from {
		opacity: 0;
		backdrop-filter: blur(0px);
	}
	to {
		opacity: 1;		
		backdrop-filter: blur(4px);
	}
}

@keyframes detalleAbrir {
	0% {
		max-height: 2.5em;
		opacity: 0;
	}
	100% {
		max-height: 20em;
		opacity: 1;
	}
}

@keyframes menuabrir {
	from {
		height: 0em;
		opacity: 0;
	}
	to {
		height: 2.7em;
		opacity: 1;
	}
}



.lds-ellipsis {
  /*display: block;*/
  position: relative;
  width: 80px !important;
  height: 80px !important;
  /*margin: auto;*/
  /*margin-top: 100px;*/
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: white;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
  z-index: 99999999999999999999;
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s 1s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s 1s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s 1s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s 1s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
/*** Animación Preloading Puntos ***/


input:-internal-autofill-selected {
    appearance: none;
	
}


body, button, input, select {
	font-family: 'Manrope', 'Arial', 'Helvetica', sans-serif;
}


body {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 100%;
	margin: 0;
	color: #666;
	/*background: #dee3e5;*/
}

#body {
	margin: 0;
    display: flex;
    flex-direction: column;
	height: 100%;
}


a:hover {
	text-decoration: underline;
	cursor: pointer;
}




h2 {
	font-size: 1.5rem;
}

.desktoponly {
	display: none;
}

#snackbar {
	opacity: 0;
    transition: 0.5s;
    color: #7a0000;
    background: #ffbbbb;
    padding: 1em;
    border-radius: 0.5rem;
    position: fixed;
    left: 50%;
    bottom: 24%;
    transform: translateX(-50%);
    min-width: 18em;
	z-index: 9;
	text-align: center;
	pointer-events: none;
}

#snackbar.show {
	opacity:1;
	transition: 0.5s;
}


.flex-container.login {
	justify-content: center;
	align-content: center;
	overflow: unset !important;
	background: white;
	padding: 0;
	
	position: absolute; /*FIX PARA EVITAR CONFIGURAR EL BODY AL 100% DE ALTURA (GENERA PROBLEMAS CON EL HEADER) */
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
    
}

.flex-container.login li {
	box-shadow: none;
	margin: 0;
}


#body > ul {
	overflow-y: hidden;
}

header {
	/*width: 100%;*/
	color: white;
    font-size: 1.2em;
    background: var(--colorPrimario);
    height: 10%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*animation: slideHeader 0.2s ease-out 1s forwards;*/
    /*padding: 0.5em;*/
	position: sticky;
	top: 0;
	
	/*height: 1em;*/
	height: unset;
	
	/*position: fixed;*/
	left: 0;
	right: 0;
	
	/*padding: 0.3em;*/
	padding: 0;
    /*height: 2em;*/
}

@keyframes slideHeader {
	from {
		top: -32px;
	}
	to {
		top: 0;
	}
}


h1 {
	color: var(--colorPrimario);
    font-size: 1.8em;
    margin: 0;
	width: 100%;
	text-align: center;
}

h3 {
	color: var(--colorPrimario);
}

header h1 {
	margin: 0;
    line-height: 2em;
}

header > div {
    font-size: 0.8em;
    display: block;
}

header > div > div:nth-child(2) {
	/*margin-right: 1em;*/
	display: flex;
	align-items: center;
}

header > div > div:nth-child(2) > * {
	margin-left: 1em;
}

header > div > div:nth-child(2) > i {
	margin-right: 0.3em;
}

header > div > div:nth-child(2) label {
	cursor: pointer;
}

header button {
	display: none !important;
}

header .fa-angle-right {
	margin: 0 0.5em;
}


header > div:first-child {
	/*width: 100%;*/
	width: auto;
    /*height: 100%;*/
	height: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
	/*border-bottom: 1px solid #00000030;*/
	padding: 0.3rem;
}

.subheader {
	padding: 0.5em;
    color: white;
    background: var(--colorPrimario--oscuro);
    /*border-bottom: 1px solid #00000030;*/
    /*position: fixed;*/
    width: 100%;
	z-index:1;
	left: 0;
    right: 0;
    /*top: 2.88rem;*/
	outline: 1px solid transparent; /* Fix para el pixel subrendering al cerrar pestaña */
	
	display: flex;
}

.subheader + ul {
	padding-top: 4em;
}

#headerPaciente button {
	padding: 0;
    display: inline-flex !important;
	color: white;
}

.footer {    
    display: flex;
    justify-content: center;
	height: 5em;
	width: 100%;
	background: white;
}

.hidden {
	display: none;
}


.logo {
	font-weight: bolder;
    background: url(symon-logo-header.svg) no-repeat;
    background-size: 1.2em;
    background-position: left;
    background-position-y: 0.25em;
    padding-left: 1.4em;
    /*margin-left: 0.3em;*/
    display: flex;
    align-items: baseline;
    align-content: center;
    flex-wrap: wrap;
    height: 2em;
    font-weight: 800;
	user-select: none;
	cursor: pointer;
	transition: 0.3s;
}

.logo:hover {
	transform: scale(105%);
	opacity: 0.9;
}

.logo span {
	/*
	font-size: 0.8em;
    margin-left: 0.8em;*/
    font-weight: 300;

}


.mainlogo {
    align-self: center;
    margin: 2em;
	width: 10em !important;
    height: 10em;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-size: cover;
}


.mainlogo > span {
    width: 100%;
    display: block;
    font-weight: 500;
    font-size: 0.8em;
}

.flex-container {
	display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 4em;
    /*margin-bottom: 4em;*/
    /*width: 100%;*/
	align-content: flex-start;
    align-items: flex-start;
    flex: 1;
    padding-bottom: 8em;
	/*align-content: center;*/
	overflow-y: scroll;
	padding: 2em 1em 6em 1em;
	/*margin-bottom: 6em;*/
	gap: 2em;
	background: #dee3e5;
}

.flex-item-contenedor {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.flex-item {
	background-color: white;
    /*padding: 1em;*/
    width: 100%;
    height: auto;
   /* color: var(--colorPrimario);*/
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    /*overflow: inherit;*/
	display: flex;
	flex-direction: column;
	/*animation: 0.3s ease-out 0s 1 slideMargin;	*/
	/*margin-top: 2em;*/
	padding-bottom: 1em;
	
	box-shadow: 0.2rem 0.2rem 0.5rem -0.1rem #0000002e;
	padding: 1em;
    border-radius: 0.5rem;
}



.flex-item.wrap {
	gap: 1em;
}

.flex-item.wrap > div {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
}

.flex-item.wrap > h3 {
	margin: 0;
	font-size: 1rem;
    font-weight: 800;
	text-align: left;
}

.flex-item.wrap > div > div {
	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 400;
	text-align: center;
}

.flex-item.wrap > div > div > img {
	border-radius: 10em;
	object-fit: cover;
	border-radius: 10em;
	width: 170px;
    aspect-ratio: 1;
    height: auto;
	border: 2px solid #b0b0b0;
	
}

.flex-item.wrap > div > div > span:first-of-type {
	font-weight: 800;
	margin-top: 0.5em;
}



@keyframes slideMargin {
  0% {
    /*transform: translateX(100%);*/
	opacity: 0;
	margin-top: 3em;
  }
  100% {
    /*transform: translateX(0);*/
	opacity: 1;
	margin-top: 2em;
  }
}

@keyframes slideTop {
  0% {
	opacity: 0;
	/*top: 55%;*/
	transform: translate(-50%, -55%);
  }
  100% {
	opacity: 1;
	/*top: 50%;*/
	transform: translate(-50%, -59%);
  }
}

@keyframes slideMenu {
  from {
	opacity: 0;
	top: 0;
  }
  to {
	opacity: 1;
	top: -67px;
  }
}


@keyframes opacidad {
  0% {
	opacity: 0;
  }
  100% {
	opacity: 1;
  }
}


.flex-item > * {
	width: 100%;
	max-height: 100% !important;
}

.flex-item > h3 {
	margin: 0 0 0.5em 0;
	margin: 0;
	font-size: 1rem;
	font-weight: 800;
}

.flex-item:last-child {
	margin-bottom: 5em;
}
.flex-item:nth-child(1) {
	margin-bottom: 0;
}


.flex-item .canvascontainer {
	/*min-height: 220px;*/
	height: 280px;
	overflow: hidden;
	margin: auto;
	width: 100%;
}


.flex-item .canvascontainer.cuadrado {
	max-height: 320px;
	aspect-ratio: 1/1;
	/*height: auto;*/
	width: 260px !important;
}

form {
	margin: 0;
	height: 100%;
}


fieldset {
	border: none;
	display: flex;
    gap: 0.5em;
	flex-direction: column;
	margin-inline: 0;
    padding: 0;
}

fieldset.horizontal {
	display: flex;
    gap: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
	margin: 1em 0;
	box-sizing: border-box;
}

fieldset legend {
    text-align: left;
	font-size: 1.2em;
	font-weight: 800;
	margin-bottom: 0.5em;	
}

fieldset div {
	width: 100%;
	height: 3.2rem;
	display: flex;
}




.toast {
	background: var(--colorSecundario--claro);
    padding: 0.5em;
    border-radius: 0.5em;
    font-size: 0.8em;
    font-weight: normal;
	margin: 1em 0;
	color: var(--colorSecundario--oscuro);
	box-sizing: border-box;
}

.toast.error {
	background: #ffbbbb;
	color: #7a0000;
}

.ayuda {
	background: var(--colorPrimario--claro);
    padding: 0.5em;
    border-radius: 0.5em;
    font-size: 0.8em;
    font-weight: normal;
	margin: 1em 0;
}

fieldset .icon, fieldset input, fieldset select {
	border: none;
	padding: 1em;
	font-size: 1rem;
	
}

fieldset .icon {
	border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    color: white;
    background: var(--colorPrimario);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
}

fieldset input, fieldset select {
    margin: 0;
    width: 100%;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    background: var(--colorPrimario--claro);
	/*border: 1px solid #0000000a;*/
    border-left: none;
}

fieldset input[type="radio"] {	
	position: fixed;
    pointer-events: none;
    display: none;
}


fieldset label.btn {
	cursor: pointer;
    box-sizing: border-box;
    height: 3em;
}


fieldset .boton {
	margin-top: 0.5em;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  /*color: var(--colorPrimario);*/
  /*opacity: 1; */ /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--colorPrimario);
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--colorPrimario);
}


textarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	border-radius: 0.5em;
    box-shadow: 0 0 0 1px var(--colorPrimario--claro);
    border: 3px solid transparent;
	max-width: 100%;
}




button, .boton {
	background: none;
    border: none;
    padding: 1em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: block;
    font-size: 1em;
    color: var(--colorPrimario);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
	transition: .2s ease-in-out;
	flex-direction: column;
}

.boton {
	background: var(--colorSecundario);
    border: none;
    border-radius: 5rem;
    padding: 0.8em;
    color: white !important;
    /*font-weight: bold;*/
	cursor: pointer;
	text-decoration: none;
	display: block;
	font-size: 1em;
	
	
	box-shadow: -5px -5px 15px rgb(255 255 255 / 90%), 5px 5px 15px hsl(185deg 100% 20% / 30%);
    background-image: linear-gradient(51deg,hsl(185deg 100% 30%) 50%,hsl(175deg 80% 36%) 75%,hsl(175deg 80% 38%) 100%);
	background-size: 200%;
    background-position-x: 100%;
	border: none;
}

.botonactivo {
	background: white;
    border: 1px solid var(--colorSecundario);
    color: var(--colorSecundario) !important;
}

button:hover {
	color: var(--colorPrimario--hover);
}

.boton:hover {/*
	background: var(--colorSecundario--hover);
	background: hsl(185deg 100% 30%);*/
	color: white;
	box-shadow: -2px -2px 5px rgb(255 255 255 / 90%), 2px 2px 5px hsl(185deg 100% 20% / 30%);
	background-position-x: 0;
}

.recuperar {
	align-self: end;
    padding: 0.5em 0;
    font-size: 0.8em;
    color: var(--colorPrimario);
}

.grupobtn {
	display: flex;
    gap: 0.5em;
	margin-top: 0.5em;
    justify-content: center;
}

.grupobtn.multi > button {
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    align-self: center;
}


.dolor {
    margin: 0;
    display: block;
    line-height: 0.5em;
    font-size: 1em;
    color: #00000099;
    cursor: pointer;
    height: 0.8em;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
	outline: 0 solid #44444400;
	transition: 
	margin 80ms ease-out,
	outline 40ms ease-out,
	height 80ms ease-out,
	font-size 80ms ease-out,
	border-radius 40ms ease-out;
	
}


fieldset input[type="radio"]:checked+label {	
    outline: 0.15em solid #444444;
    border-radius: 0.3em;
    z-index: 1;
    font-size: 1.5em;
    padding: 0;
    height: 2.2em;
	margin: -2em 0;
}


.dolor:hover {
	outline: 0.15em solid #444444;
    border-radius: 0.3em;
    z-index: 1;
    font-size: 1.5em;
    padding: 0;
    height: 2.2em;	
    z-index: 2;
	margin: -2em 0;
}

.dolor:first-of-type {
	border-top-left-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
}
.dolor:last-of-type {
	border-top-right-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
}

.registro input[type="radio"]:nth-of-type(1) + label {
	background: #79dc95;
}
.registro input[type="radio"]:nth-of-type(2) + label {
	background: #91e588;
}
.registro input[type="radio"]:nth-of-type(3) + label {
	background: #b9ef91;
}
.registro input[type="radio"]:nth-of-type(4) + label {
	background: #e1ef91;
}
.registro input[type="radio"]:nth-of-type(5) + label {
	background: #f5ee89;
}
.registro input[type="radio"]:nth-of-type(6) + label {
	background: #fadd8e;
}
.registro input[type="radio"]:nth-of-type(7) + label {
	background: #f6c58d;
}
.registro input[type="radio"]:nth-of-type(8) + label {
	background: #f7b588;
}
.registro input[type="radio"]:nth-of-type(9) + label {
	background: #f7a284;
}
.registro input[type="radio"]:nth-of-type(10) + label {
	background: #f59384;
}
.registro input[type="radio"]:nth-of-type(11) + label {
	background: #f08484;
}


.flex-item.calendario {
    gap: 0;
}

.calendario {
	width:100%;
	/*border-bottom: 0.1em solid var(--colorPrimario--claro);*/

}

.calendario table {
	width: 100%;	
	border-spacing: 0;
}

.calendario tr, .calendario td {
	border-spacing: 0;
}

.calendario table:last-of-type tr:first-child {
	font-size: 0.7em;
    font-weight: lighter;
	text-align: center;
}

.calendario table:last-of-type td {
	height: 2.5em;
    width: 2em;
	box-sizing: border-box;
	padding: 1px;
}


.calendario table:last-of-type tr:first-child td {
	pointer-events: none;
}


.calendario table:last-of-type td:hover > div {
	border: 0.2em solid #00000040;
	box-sizing: border-box;
}





.calendario table:last-of-type td span {
    position: absolute;
    top: 0.01em;
    right: 0.2em;
}

.calendario table:last-of-type td a {
	font-weight: lighter;
	text-decoration: none;
}

.calendario .seleccionado {
	box-sizing: border-box;
    border: 0.2em solid #00000040;
}


.calendario > div:first-of-type {
	display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
	color: var(--colorPrimario);
}

.calendario > div:first-of-type button {
	width: fit-content;
    margin: inherit;
	color: var(--colorPrimario);
}


.calendario > div > form {
	display: none;
}

.calendario form {
	width: 100%;
}

.calendario table td > div {
	background: none;
    border: none;
    padding: 1em;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: block;
    font-size: 1em;
    color: var(--colorPrimario);
    display: flex;
    justify-content: center;
    align-items: center;
		border-radius: 0.3rem;
	overflow: hidden;
	flex-wrap: wrap;
	pointer-events: none;
}



.calendario button, .calendario table td > div {
	font-weight: normal;
    font-size: 1em;
	padding: 0;
	margin: auto;
	padding: 0;
	font-size: 1em;
	width: 100%;
    height: 100%;
	color: #5b5b5b;
	display: flex;
    flex-direction: column;
	gap: 0;
}



.calendario td > div > div {
	width: 100%;
	height: 100%;
	gap: 0;	
	pointer-events: none;
}

.calendario td > div > div > button > div:first-child {
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
	color: black;
}

.calendario td > div > div > button > div:last-child {
	height: 20%;
    display: flex;
    background: white;
    gap: 1px;
    padding-top: 1px;
	width: 100%;
}

.calendario td > div > div > button {
	width: 100%;
	pointer-events: all;
}


.calendario td > div > div > button > div > div {
	font-size: 0;
	width: 33%;
}

.calendario td > div > div > button > div > div:first-child {
	border-left: none;
}
.calendario td > div > div > button > div > div:last-child {
	border-right: none;
}




.caldetalle {
	display: flex;
	flex-direction: column;
    width: calc(100% - 2rem);
    height: 90%;
    background: #f4f4f4;
    position: fixed;
    border-radius: 0.5rem;
    overflow: hidden;
	justify-content: space-between;
	color: #5b5b5b;
	
	width: 92%;
	max-width: 60em;
    height: fit-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -59%);
	background: white;
	pointer-events: bounding-box;
	animation: 0.3s ease-out 0s 1 slideTop;	
	/*pointer-events: none;*/
}

.caldetalle > div:first-child {
	background: var(--colorPrimario);
	padding: 0.8em;
	color: white;
}

.caldetalle > div:first-child form {
	display: flex;
    justify-content: space-between;
}

.caldetalle > div:first-child button {
	color: white;
	padding: 0;
}

.caldetalle > div:nth-child(2) {
	display: flex;
    flex-direction: column;
    padding: 0 1.2em;
    padding-top: 1.5em;
    flex: 1;
    gap: 1em;
	pointer-events: none;
}

.caldetalle > div:nth-child(2) > div {
	display: flex;
	width: 100%;
	align-items: flex-start;
	gap: 0.5em;
}

.caldetalle > div:nth-child(2) > div > div {
	width: auto;
}

.caldetalle > div:nth-child(2) > div > div > div {
	width: 2em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
	border-radius: 0.3rem;
}

.caldetalle > div:nth-child(2) > div img {
	width: 2em;
	height: 2em;
	opacity: 0.6;
}

.caldetalle > div:nth-child(2) > div > div:nth-child(3) {
	flex: 1;
    font-size: 0.8em;
    font-weight: normal;
    text-align: left;
}

.caldetalle > div:nth-child(3) {
    display: flex;
    justify-content: center;
    height: 4em;
    align-items: center;
	padding: 0.5em;
}

.caldetalle > div:nth-child(3) button {
    width: 40%;
    height: 61%;
    padding: 0.5em;
    font-weight: bold;
	display: flex;
	pointer-events: all;
}

.caldetalle > div:nth-child(2) > div > div:nth-child(3) > span:first-child {
	font-weight: bold;
}

.caldetalle span.positivo, .caldetalle span.negativo {
	color: white;    
    padding: 0.3em;
    border-radius: 0.3em;
    box-sizing: border-box;
    font-size: 0.8em;
    display: inline-block;
    line-height: 0.8em;
    vertical-align: top;
}	

.caldetalle span.positivo {
	background: green;
}
.caldetalle span.negativo {
	background: red;
}

.caldetalle span i {
    padding-right: 0.2em;
    padding-left: 0.3em;

}



.bg {
	background: #00000060;
    backdrop-filter: blur(3px);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
	left: 0;
    pointer-events: none;
	display: none;
	pointer-events: bounding-box;
	touch-action: none;
	animation: 0.3s ease-out 0s 1 opacidad;	
}


.col2 {
	display: flex;
    flex-wrap: wrap;
}

.col2 > * {
	flex: 2 0 48%;
	text-align: left;
	box-sizing: border-box;
	/*padding: 0.5em;*/
	padding: 0.7em 0.5em;
	font-size: 0.85em;
	border-bottom: 1px solid var(--colorPrimario--claro);
}

.col2 > div {
	font-weight: lighter;
}

.col2 h3 {
	flex: none;
	width: 100%;
	text-align: center;
	font-size: 1.5em;
	border: none;
	margin: auto;
}

.col2 label {
	max-width: 50%;
	color: #666;
    font-weight: normal;
}

.col2 > div:last-of-type, .col2 > label:last-of-type {
	border-bottom: none;
}

.col2 > button {
	margin-top: 1em;	
    font-size: 1rem;
}

.seleccionar {
	display: flex;
	width: 100%;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
}

.seleccionar form {
	display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
	flex-wrap: wrap;
}

.seleccionar label {
	width: 100%;
	text-align: left;
	margin-bottom: 0.5em;
	font-size: 1.2rem;
	font-weight: 800;
}
/*
.seleccionar label[for="paciente"] {
	color: var(--colorSecundario--oscuro);
}
*/

input, select:focus {
	outline: none;
}

input[type="date"], input#calendar {
	cursor: pointer;
}

.seleccionar button {
	border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    height: 3.2rem;
}


select {
	flex: 1;
    height: 3.2rem;
    padding: 0.5em 0.75em;
    font-size: 1em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(angle-down-solid.svg);
    background-position: 95%;
    background-repeat: no-repeat;
    background-size: 1em;
    border-radius: 0.5em;
    border: none;
    background-color: var(--colorPrimario--claro);
    color: var(--colorPrimario--oscuro);
    border: 1px solid #0000000a;
	cursor: pointer;
	width: 100%;
}


.seleccionar select {
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}


select#genero, select#registros {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	color: black;
	padding: 0 1em;
    height: auto;
}



/* Añadidos de jose */


.configpadre {
	position: fixed;
    /*bottom: -136px;*/
	bottom: 0px;
	display: flex;
    flex-direction: column-reverse;
	width: 100%;
	z-index: 2;
	
	/*animation: slideBottom 0.5s ease-out 1s forwards;*/
	

}

.configpadre.menuOff {
	display: none;
}



@keyframes slideBottom {
	from {
		bottom: -80px;
	}
	to {
		bottom: 0;
	}
}



.configpadre > div > div {
    align-content: center;
	text-align: center;
	/*padding: 0.2em 0.3em !important;*/
	width: 20%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.configpadre > .pacientedoctor {
	display: none;
}

.configpadre > .pacientedoctor.mostrar {
	display: flex;
}

.configpadre > .pacientedoctor > div {
	width: 20%;
}

.configpadre > div > div > div {
	width: 100%;
    position: absolute;
    /*top: -67px;*/
    left: 50%;
    transform: translateX(-50%);
	z-index: -1;
	bottom: 67px
}


.config > div > .menuactivo, .mostrar {
	background: #00000050;
}
.seleccionado i {
}


.config {
    /*background: var(--colorPrimario);*/
    display: flex;
    flex-direction: column;
    width: 25%;
    overflow-y: scroll;
    width: 100%;
    flex-direction: row;
    overflow-y: inherit;
    justify-content: space-between !important;
    /*z-index: 1;*/
    box-sizing: border-box;
    overflow-x: hidden;
	/*order-bottom: 1px solid #00000030;*/
}

.config > div {
	transition: background 250ms;
	width: 100%;
}

.config > div:focus-visible, .config button:focus-visible  {
	outline: none;
}

.config > div:nth-child(6) {
	display: none;
}


.config > div:last-child {

	background: none;
}
/*
.config > div:last-child > button {

	background: #9ed59e;
    border-radius: 0.5em;
    width: 100%;
    padding: 1em;
    color: #0000008f;
    border: none;
	font-weight: bold;
	font-size: 1em;
	cursor: pointer;
}
*/

.config button {
    padding: 0.6rem;
    cursor: pointer;
    width: 2.4rem;
    text-align: center;
    color: white;
   /* font-size: 1.3em;*/
	display: flex;
    flex-direction: column;
    align-items: center;
	
	font-size: 0.6em;
    line-height: 0.6em;
    /*margin-top: 0.5em;*/
	width: 100%;
	height: 7em;
	
	color: #ffffffA0;
}

.config button.menuactivo {
	color: white;
}

.config i {
	font-size: 2.5em;
}

.config button span {
	margin-top: 0.5em;
}

.config label input, .config label button {
    display: none;
}
/*
.config span {
	font-size: 0.6em;
	line-height: 0.6em;
    margin-top: 0.5em;	
}
*/
.config:nth-child(2) {
	/*filter: hue-rotate(310deg) saturate(0.8);*/
	background: var(--colorPrimario--oscuro) !important;
}

.config:nth-child(2) > div:hover {
	background: #00000020 !important;
}

.config:nth-child(2) .menuactivo, .config:nth-child(2) .mostrar {
	background: #00000050;
}


.configsub {
    background: var(--colorPrimario);
	
    display: flex;
    flex-direction: column;
    width: 25%;
    overflow-y: scroll;
    width: 100%;
    flex-direction: row;
    overflow-y: inherit;
    justify-content: space-between !important;
    z-index: 1;
    box-sizing: border-box;
    overflow-x: hidden;
	/*order-bottom: 1px solid #00000030;*/
	
	animation: 0.3s ease-out 0s 1 slideMenu;
}

.configsub > div {
	width: 100%;
}

.configsub > div, .config > div > .menuactivo, .mostrar {
	background: #00000030;
}

header, .config, .configsub {
	background-image: linear-gradient(90deg,hsl(202deg 100% 30%) 60%,hsl(186deg 80% 36%) 100%);
}





.flex-item {
	gap: 0.5em;
}
/*
.tabla {
	display: flex;
    align-items: flex-start !important;
    flex-direction: column;
    border-radius: 0.3em;
	overflow: hidden;
	gap: 1px;
}
*/


.observaciones {
	display: flex;
    /*background: green;*/
    font-weight: normal;
    font-size: 0.8em;
    align-items: stretch;
	width: 100%;
}

.observaciones > div {
    display: flex;
    align-items: center;
	justify-content: center;
    color: #444;
    padding: 0.5em;
}

.observaciones > div:nth-child(1) {
    width: 1.5em;
	font-weight: bold;
}

.observaciones > div:nth-child(2) {
    width: 6em;
	background: black;
	background: #00000020;
}

.observaciones > div:nth-child(3) {
    flex: 1;
	background: #f1f1f1;
	justify-content: flex-start;
    text-align: left;
}

.observaciones:nth-child(even) > div:nth-child(3) {
    flex: 1;
	background: white;
}

.intensidad0 {
	background: #79dc95;
}
.intensidad1 {
	background: #91e588;
}
.intensidad2 {
	background: #b9ef91;
}
.intensidad3 {
	background: #e1ef91;
}
.intensidad4 {
	background: #f5ee89;
}
.intensidad5 {
	background: #fadd8e;
}
.intensidad6 {
	background: #f6c58d;
}
.intensidad7 {
	background: #f7b588;
}
.intensidad8 {
	background: #f7a284;
}
.intensidad9 {
	background: #f59384;
}
.intensidad10 {
	background: #f08484;
}







.alertas > div {/*
	display: flex;
    flex-direction: column;
    background: var(--colorSuave);
    font-size: 1rem;
    font-weight: normal;
    border-radius: 0.5rem;
    overflow: hidden;
    box-sizing: border-box;*/
 /*  border: 1px solid var(--colorPrimario--claro);**
	/*border: none;*/
}

.alertas > div > div {
	position: relative;
}

.alertas > div > div {
	display: flex;
    font-weight: normal;
    text-align: left;
    gap: 0.5em;
    flex-wrap: wrap;
    justify-content: space-between;
    background: var(--colorSuave);
    /*padding: 1em;*/
    /*padding-bottom: 3em;*/
    margin-bottom: 3em;
   /* border: 1px solid var(--colorPrimario--claro);*/
   /* border-radius: 0.5rem;		*/

}




.alertas > div > div:first-child {
    font-weight: bold;
    background: var(--colorPrimario);
    color: white;
}

.alertas > div > div:nth-child(2n+2) {
	background: #e1ebf5;
}


.alertas > div > div:first-of-type label {
	display: flex;
}

.alertas > div > div:first-of-type label:nth-child(1), .alertas > div > div > div:nth-of-type(1) {
	width: 100%;
	flex: 1;
}
.alertas > div > div:first-of-type label:nth-child(2), .alertas > div > div > div:nth-of-type(2) {
	width: 32%;
}
.alertas > div > div:first-of-type label:nth-child(3), .alertas > div > div > div:nth-of-type(3) {
	width: 30%;
	display: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



.alertas > div > div:first-of-type label:nth-child(4), .alertas > div > div > div:nth-of-type(4) {
	width: 16%;
}

.alertas > div > div > div:nth-of-type(4) {
	gap: 0.5em;
    flex-direction: row;
    flex-wrap: nowrap;
}


.alertas > div > div:first-of-type label:nth-child(2) {
	
}

.alertas > div > div > label {
	width: 20%;
	font-weight: bold;

}


.alertas > div > div {
	flex-wrap: nowrap;
    /*padding-bottom: 1em;*/
    margin-bottom: 0;
    border: none;
   /* border-top: 1px solid var(--colorPrimario);
    border-radius: 0;*/
    background: none;
	/*padding: 1em 0;*/
	
	   
	display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
    /*padding: 0.5em 0.65em;*/
    /*color: #666;*/
}












.alertas form {
	position: absolute;
    bottom: 1.4em;
    display: flex;
    /*gap: 0.5em;*/
    justify-content: center;
    height: auto;
	width: 100%;
}

.alertas button {
	padding: 0.5em;
    /*font-size: 1em;*/
	/*box-shadow: none;*/
	border-radius: 0;
	display: flex;
    max-height: 4em;
	pointer-events: all;
	width: 100%;
	border-radius: 0.5rem;
	flex-direction: row;
}

.alertas button:hover {
	box-shadow: none;
}
/*
.alertas button:first-of-type {
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
}

.alertas button:last-of-type {
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
	
	width: 100%;
}
*/

.alertas form button span {
	font-size: 0.5em;
	display: block;
	width: 9em;
}

.alertas form button:first-child span {
	display: none;
}

.alertas a:hover {
	text-decoration: underline;
	cursor: pointer;
}












.alertas > div > div > label {
	display: none;
}

.alertas > div > div > label {
	display: none;
}

.alertas > div > div > div {
	width: 75%;
	/*color: #666;*/
	
	display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.alertas .cerrardetalle {
	display: none;
}

.alertas .detalle .cerrardetalle {
	display: flex;
}

.alertas .mensajediv > * {
	pointer-events: none;
}
.alertas .mensajediv:hover  {
	cursor: pointer;
	background: #306fa610;
}
/*
.alertas .mensajediv.detalle:hover {
	background: var(--colorSuave);
}

.alertas .mensajediv.detalle:hover:nth-child(2n+2) {
	background: white;
}
*/
.alertas .detalle {
	display: flex;
	flex-direction: column;
    align-items: flex-start;
	pointer-events: none;
	animation: detalleAbrir 0.3s ease-out forwards; 
}

.alertas .detalle a {
	pointer-events: all;
}

.alertas .detalle > label {
	display: flex;
}

.alertas .detalle > * {
	width: 100% !important;
	display: flex !important;
}

.alertas button:first-child span {
	display: none;
}

.alertas .detalle button:first-child span {
	display: flex;
}

.alertas .detalle {
	gap: 0;
}

.alertas .detalle > label, .alertas .detalle > div:last-child {
	margin-top: 0.5em;
}


#menualertas > div:first-child > button > span {
	
	position: relative;
}

.notificacion {
	background: var(--colorPrimario--claro);
    color: var(--colorPrimario);
    padding: 0.3em;
    border-radius: 3.5em;
    font-size: 0.6rem !important;
    width: 1em;
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
	right: -1.5em;
    top: -4.5em;
    line-height: 0;
	

	border-radius: 0.3rem;
    font-weight: 900;
}

#btnMenualertas > span, #pacientechat > span {
	position: relative;
}




.encuesta {
	display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.encuesta > div {
	display: flex;
	flex-direction: column;
}

.encuesta > div > span {
    width: 100%;
    padding: 0.2em 0;
    font-weight: 600;
    font-size: 0.9rem;
}

.encuesta > div > div {
	color: white;
    width: 100%;
	height: 2.1em;
    display: flex;
   /*border-radius: 5rem;
	-webkit-border-radius: 5rem;*/
    overflow: hidden;
    align-items: center;
	-user-select: none;
	-webkit-user-select: none;
	border-radius: 2rem;
}

.encuesta > div > div > div {
	height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	position: relative;
	font-size: 0.8em;
	font-weight: 800;
}
/* BORDER RADIUS NECESARIO PARA SAFARI */
.encuesta > div > div > div:first-child {
	border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}
.encuesta > div > div > div:last-child {
	border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}
/* BORDER RADIUS NECESARIO PARA SAFARI */
.encuesta .si {
	/*background: #4296a1;*/
	background-image: linear-gradient(51deg,hsl(185deg 100% 30%) 50%,hsl(175deg 80% 36%) 75%,hsl(175deg 80% 38%) 100%);
}
.encuesta .no {
	/*background: #d4668f;*/
	background-image: linear-gradient(51deg,hsl(343deg 51% 45%) 50%,hsl(343deg 77% 65%) 75%,hsl(332deg 100% 72%) 100%);
}

.encuesta .si span, .encuesta .no span {
	position: absolute;
    
    font-size: 2.7rem;
    color: #ffffff15;
} 

.encuesta .si span {
	left: 0;
}


.encuesta .no span {
	left: -3px;
}








.ajustes .boton i {
	padding-right: 0.5em;
	display: none;
}

.ajustes .boton {
	margin-top: 1em;
}




.layout > div:last-child {
	flex: 1;
    /* overflow-y: scroll; */
    display: flex;
    flex-direction: column;	
	background: white;
	
}


.layout {
	/*height: 95vh;
    height: 90%;*/
    display: flex;
    position: relative;
	/*width: fit-content;*/
	height: 100%;
	flex: 1;
	overflow: hidden;
}

.fa-xmark {
	padding: 0 0.5em;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
   
    cursor: pointer;
    flex-direction: row;
    box-sizing: border-box;
}

.fa-xmark:hover {
	background: #306fa6;
	color: white;
}


.text {
	position: relative;
}

.requerido {
	position: absolute;
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    color: #ff8080;
    right: 1em;
    width: fit-content;
    background: var(--colorPrimario--claro);
    font-weight: normal;
    font-size: 0.8em;
}











.resumen {
	padding-top: 1em !important;
}

.resumen > div {
	display: flex;
    flex-direction: column;
    background: var(--colorSuave);
    font-size: 0.8rem;
    font-weight: normal;
    border-radius: 0.5rem;
    overflow: hidden;
    box-sizing: border-box;
    /*border: 1px solid var(--colorPrimario--claro);*/
	
}

.resumen > div:first-child {
	background: none;
    border: none;
    display: flex;
    /*min-height: 3.5em;*/
    justify-content: flex-end;
	font-size: 1rem;
	margin-bottom: 0.8em;
}

.resumen h3 {
	margin: 0;
}

.resumen > div > div {
	display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
    /*padding: 0.5em 0.65em;*/
	padding: 0.8em 1em;
	color: #666;
}

.resumen > div > div:first-child {
	font-weight: bold;
    background: var(--colorPrimario);
    color: white;
}

.resumen > div > div:nth-child(2n+2) {
	background: #e1ebf5;
}

.resumen > div > div > div {
	display: flex;
	justify-content: flex-end;
	text-align: left;
}

.resumen > div > div > div:nth-child(1) {
	flex: 1;
	justify-content: flex-start;
}
.resumen > div > div > div:nth-child(2) {
	width: 15%;
	
}
.resumen > div > div > div:nth-child(3) {
	width: 25%;
}

.resumen > div > div > div > div {
    padding: 0.1em 0.3em;
    border-radius: 0.3em;
    color: black;
    width: 1.8em;
    text-align: center;
}
.resumen a {
	cursor: pointer;
}

.resumen a:hover {
	text-decoration: underline;;
}
/*
.resumen.tabla.col2 > div > div > div:nth-child(2) {
	width: 34%;
}
*/












/* CHAT */


/* Scrollbar width */
::-webkit-scrollbar {
  width: 0em;
  margin: 0em;  
}

/* Scrollbar Track */
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0.5rem;
}

/* Scrollbar Handle */
::-webkit-scrollbar-thumb {
  background: #81818138;
  border-radius: 0.5rem;
}

/* Scrollbar Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--colorPrimario--claro);
  
}





.flex-item.fill {
	/*height: 100%;
	height: 64vh;*/
	/*margin-bottom: 0;*/
	width: 100%;
	min-height: inherit;
}

.chat, .chatdiv {
	height: 34vh;
}

.chat { 
    /*background-color: snow;*/
    display: flex;
    flex-flow: column nowrap;
	
	/*
    background: var(--colorPrimario--oscuro);
    border-radius: 1.5rem;
    border: 1px solid var(--colorPrimario--claro);*/
}
.chatdiv {
	font-size: 1em;
    padding: 0.3em;
    /*margin: 0.5em;*/
    color: white;
    display: flex;
    gap: 0.5em;
    flex-wrap: nowrap;
    flex-direction: column-reverse;
    overflow-Y: scroll;
	overflow-X: hidden;
    text-align: left;
	
}
/*
.chatdiv > div {
	padding: 0.5em;
}
*/
.chatdiv span {
	display: block;
    font-size: 0.7em;
	font-style: italic;
    color: #00000070;	
}
/*
.textareaFocusOn {
	bottom: 0 !important;
}
*/
.textareadown {
	bottom: 0 !important;
}

.chatinput {
	display: flex;
    position: relative;
    padding: 0.5em 0.5em;
    position: fixed;
    bottom: 8.4em;
    height: 4em;
    left: 0;
    width: 100%;
    padding: 0;
	z-index:3;
}


.chatinput > div {
	display: flex;
	position: absolute;
    right: 0.88em;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;	
    justify-content: center;
	align-items: center;
    flex-direction: row;
	gap: 0.3em;
	height: calc(100% - 0.2rem);
}

.chatinput button {
    box-shadow: none;
	height: calc(100% - 1.5em);
    border-radius: 0.6rem;
	display: flex;
}

.chatinput button.leido {
	display: flex;
    flex-direction: row;
}

.chatinput button.btnLeidoOff {
	display: none;
}

.chatinput button span {
	font-size: 0.8em;
    max-width: 68px;
    overflow: hidden;
    display: inline-flex;
    line-height: 1.2em;
}

.chatinput textarea {
    /*height: 3.5em;*/
    font-size: 1.3em;
    padding: 0.2em 7em 0.2em 0.5em;
    color: #333;
	resize: none;
	border-radius: 0;
}

.chatinput textarea:focus {
	outline: none !important;
}


.in, .out {
	border-radius: 0.5rem;
    padding: 0.5em;
    font-weight: normal;
	position: relative;
	max-width: 80%;
}

.in img, .out img {
	position: absolute;
	width: 1.5em;
	height: 1.5em;
	top: 0;
	--webkit-user-select: none;
	user-select: none;
	image-rendering: pixelated;
}

.in {
	background-color: var(--colorPrimario);
	align-self: flex-start;
	color: white;
}
.out {	
	background-color: var(--colorSecundario);
	align-self: flex-end;
}

.in img {
	left: -0.3em;
}

.out img {
	right: -0.3em;
}






/* FIN CHAT */






















/* FILTROS */

.filtros {
	width: 100%;
    display: flex;
    gap: 0.5em;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.filtros .boton {
	font-size: 0.8em;
	padding: 0.7em;
    border-radius: 0.7rem;
}

.filtroactivo button > div {
	background: none !important;
}

.leyenda {
	width: 100%;
    display: flex;
    gap: 0.5em;
	flex-wrap: wrap;
	align-items: center;
	
	background: var(--colorSuave);
    padding: 1em;
    border-radius: 0.5rem;
    border: 1px solid var(--colorPrimario--claro);
	margin-bottom: 1em;
	box-sizing: border-box;
}

.leyenda > div {
	display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.8em;
    color: #5b5b5b;
}


.leyenda > div > div {
	min-width: 3em;
    height: 0.8em;
	border-radius: 0.1rem;
}

h2 {
	width: 100%;
    margin-bottom: 0;
    color: var(--colorPrimario);
	text-align: center;
	margin: 0 0 0.5em 0;
}


/* FIN FILTROS */


#listpaciente {
	padding: 1em;
    font-size: 1rem;
	border-radius: 0.5em;
	width: auto;
}


#listpacienteresults {
	display: block;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    list-style: none;
    padding-left: inherit;
    background: white;
    border-radius: 0.5rem;
    border: 1px solid var(--colorPrimario--claro);
	display: none;
	overflow: hidden;
	padding-left: 0;
}

#listpacienteresults > li {
	background: var(--colorSuave);
	transition: 0.3s;
}

#listpacienteresults > li > button {
	width: 100%;
    align-items: start;
}

#listpacienteresults > li:nth-child(2n+2) {
	background: white;
}

#listpacienteresults > li:hover {
	background: var(--colorPrimario--claro);
}


















/* INFORME */
.informe {
	background: white;
    text-align: justify;
	overflow: auto;
	overflow-x: hidden;
	height: auto;
	
	text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    -moz-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%;
	
	line-height: 1.5em;
}

.informe, .informe button, .informe input, .informe select {
	font-family: 'Arial', 'Helvetica', sans-serif;
}


.informe h1 {
	text-align: center;
	color: dimgray;
	margin-bottom: 2em;
}

.informe > div {
	display: flex;
    flex-direction: column;
    gap: 2em;
	
	/*padding: 1em;*/
    /*margin: 4em;*/
}


.informe #loadingBody {
	display: none;
}

.informe .flex-container {
	display: flex;
	padding: inherit;
	justify-content: center;
	
	flex-direction: column;
    align-content: center;
	align-items: center;
	
	overflow: hidden;
	margin-bottom: 4em;
	background: none;
}

.informe .flex-item {
	color: black;
	font-weight: normal;
	background: none;
	box-shadow: none;
}

.informe .flex-item > * {
	max-height: 100% !important;
	text-align: justify;
}

.informe .flex-item.tarta .canvascontainer {
    /*width: auto !important;*/
}

.informe .flex-container > div {
	margin: 1cm 0;
	margin: 0;
	padding: 0;
}

.informe .flex-container > div > .leyenda {
	/*display: none;*/
}

.informe .flex-item {
	min-width: 100% !important;
	max-width: 100% !important;
	padding-bottom: 1em;
	overflow: hidden;
}

.informe .flex-item > div {
	padding-top: 1em;
}

.informe .flex-item > div > div {
	margin-bottom: 1em;
}

.informe h4 {
	color: var(--colorPrimario);
	text-align: center;
    font-size: 1.2rem;
	margin: 0;
}

.informe .titulo {
	color: var(--colorPrimario);
	width: 100% !important;
}

.informe .titulo.seccion {
    display: flex;
    align-items: center;
}

.informe .titulo.seccion > div:last-child {
	flex: 1;
    border-bottom: 0.75mm solid;
	margin: 0;
	padding: 0;
    margin-left: 2mm;
	padding-top: 0.2em !important;
}

.informe .flex-container > div {
	font-weight: inherit;
    color: inherit;
	text-align: inherit;
}

.informe .flex-container > div > div {
	max-height: 100%;
}

.informe .flex-container > div > h4 {
	/*display: none;*/
}

.informe .flex-item > div:nth-of-type(2) {
	font-weight: normal;
    color: black;
	/*padding-top: 1em;*/
}

.informe .flex-item canvas {
	pointer-events: none;
}


.informe h2 {
	border-left: 1mm solid;
    color: var(--colorPrimario);
    padding: 0mm 0 0.1mm 2mm;
	text-align: left;
}

.informe header, .informe footer {
	display: none;
}


.informe .menu {
	background: var(--colorPrimario);
	padding: 0;
	margin: 0;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
	flex-direction: row;
	justify-content: center;
	
	position: fixed;
	font-size: 3rem;
}

.informe .menu button {
	display: flex !important;
    color: white;
    flex-direction: row;
    padding: 0.5em;
}


.informe .intro h3 {
	color: #5b5b5b;
}

.informe .col2 > * {
	padding: 0.5em 0;
	font-size: 1em;
}

.wrapper {
	/*max-width: calc(100% - 2rem);*/
	
	margin-left: auto;
	margin-right: auto;
}


.wrapper {
	width: calc(100% - 2rem);
	margin-top: 6rem;
}

.wrapper > div > div {
	margin-bottom: 20mm;
}


.informe .canvascontainer {
	/*width: 100% !important;*/
	max-width: 17cm !important;
	margin: auto;
}

.informe .boton {
	min-width: 12em;
	margin: auto;
	font-size: 2rem;
}


























@media(min-width: 1200px) {
	.wrapper {	
		max-width: 1170px;
	}
	
	.informe .canvascontainer {
	max-width: 17cm !important;
		/*margin: auto;*/
	}
}


.informe .flex-item.tarta {
	gap: 0 !important;
	display: block;
}

	
	
.informe .flex-item.tarta > div > div:nth-of-type(1), .informe .flex-item.tarta > div > div:nth-of-type(2) {
	width: 100%;
	/*padding-top: 0;*/
}


.informe .flex-item.tarta > div > div:nth-of-type(1) {
	float: left;
	width: 42%;
}

.informe .flex-item.tarta > div > div:nth-of-type(2) {
	float: right;
	width: 50%;
	padding-top: inherit;
}



.informe .flex-item.tarta > div > div:nth-of-type(1) > div:first-of-type {
	padding-bottom: 1em;
}



.informe .flex-item > div:last-child {
	text-align: justify;
}

.informe .leyenda {
	align-items: flex-start;
	flex-direction: column;
	width: 100%;
	max-height: 100%;
    box-sizing: border-box;
	margin-bottom: 0.5cm;
	
	margin-top: 1em;
    font-weight: normal;
	
	margin-bottom: 0 !important;
	
	line-height: 1em;
}

.informe .leyenda > div {
	font-size: 0.7em;
}

.informe .flex-item-contenedor {
	justify-content: space-between;
	gap: 5%;
	/*
	display: grid;
    grid-template-columns: auto auto auto;
	*/
}

.informe .flex-item-contenedor.filtroactivo {
	gap: 1%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
	
}

.informe .flex-item-contenedor > table {
	width: 100%;
}

.informe .flex-item-contenedor > table > tbody > tr > td {
	vertical-align: top;
	max-width: 90%;
}
/*
.informe .flex-item-contenedor > table > tbody > tr > td:nth-child(2) {
	padding: 0 2em;
}
*/
.informe .calendario {
	min-width: inherit !important;
    max-width: inherit !important;
    /*width: 30% !important;*/
    border-bottom: none;
    /*display: flex;*/
    padding: 0;
    margin: 0 !important;
	padding-top: 1cm;
	flex-direction: column;
	display: block !important;
	width: 100% !important;
}

.informe .calendario td, .informe .calendario button {
	pointer-events: none !important;
	font-size: 0.85em;
}

.informe .calendario > div:first-of-type {
	justify-content: center;
}
/*
.informe .flex-item-contenedor {
	gap: 1em;
}

.informe .flex-item.calendario {
	min-width: 24%;
	max-width: 26%;
}
*/
/*
.calendario table:last-of-type td {
	height: 0.7cm !important;
}
*/
.informe .flex-item-contenedor > table > tbody > tr > td:nth-child(1) {
	text-align: -webkit-left;
}
.informe .flex-item-contenedor > table > tbody > tr > td:nth-child(2) {
	text-align: -webkit-center;
}
.informe .flex-item-contenedor > table > tbody > tr > td:nth-child(3) {
	text-align: -webkit-right;
}

.informe .tarta .calendario td > div > div > button > div:last-child {
	background: inherit !important;
}

.informe .tarta .leyenda {
	margin-top: inherit;
}


/*
.informe .flex-container > div > .leyenda {
	width: fit-content !important;
	flex-wrap: wrap;
    flex-direction: row;
	margin: 1.5em auto;
}
*/

/* FIN INFORME */












/* MENU PIE */
.menupie {
	display: none;
    flex-direction: column;
    align-items: flex-start;
	position: fixed;
    bottom: 0.4rem;
}

.menupie > div {
	align-items: flex-start;
}

.menupie button {
	color: #ffffffbb;
    font-size: 0.75em;
    padding: 0 1.5em;
}

.menupie > span {
	color: #ffffff70;
	font-size: 0.75em;
    padding: 0.5em 1.5em;
}

.menupie button:hover {
	color: #fff;
}

/* FIN MENU PIE */










/* SWITCH */


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/* FIN SWITCH */















/* MODO OSCURO */

.dark-mode .subheader {
	border-bottom: 1px solid;
}

.dark-mode .config > div > .menuactivo, .dark-mode .configsub > div, .dark-mode .resumen > div:last-child, .dark-mode .alertas > div, .dark-mode .user-menu > div:last-child {
	background: var(--colorDarkMode);
}
.dark-mode input:checked + .slider, .dark-mode .leyenda {
	background: var(--colorDarkMode--claro);
}
body.dark-mode, .dark-mode .flex-container, .dark-mode .mostrar, .dark-mode .subheader, .dark-mode .chatinput textarea {
	background-color: var(--colorDarkMode--oscuro);
}
.dark-mode .col2 > *, .dark-mode .subheader {
	border-color: var(--colorDarkMode--claro);
}



body.dark-mode, .dark-mode .tabla, .dark-mode .flex-container, .dark-mode .col2 label, .dark-mode .calendario button, .dark-mode .subheader, .dark-mode .calendario td > div, .dark-mode .leyenda > div, .dark-mode .inner-header span, .dark-mode .flex-item.wrap > div > div > div  {
	color: #ffffffcc !important;
}

.dark-mode .boton, .dark-mode .chatinput textarea {
	box-shadow: none;
}

.dark-mode input:focus + .slider, .dark-mode .chatinput {
	box-shadow: 0 0 1px var(--colorDarkMode--claro);
}

.dark-mode .flex-item {
	background: var(--colorDarkMode);
	box-shadow: 0.2rem 0.2rem 0.5rem -0.1rem #00000070;			
}

.dark-mode .tabla > div:first-child, .dark-mode fieldset .icon {
	background: var(--colorPrimario--oscuro--hover);
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode .flex-item, .dark-mode .calendario > div:first-of-type, .dark-mode .calendario > div:first-of-type button {
	color: var(--colorPrimario--claro);
}

.dark-mode .tabla > div:last-child, .dark-mode .alertas > div, .dark-mode .chat, .dark-mode .leyenda {
	border: none;
}

.dark-mode .tabla, .dark-mode .tabla > div:nth-child(2n+2), .dark-mode .alertas > div > div:nth-child(2n+2), .dark-mode .alertas .mensajediv.detalle:hover:nth-child(2n+2), .dark-mode .alertas .mensajediv.detalle:hover {
	background: #0000001f;
}

.dark-mode .notificacion {
	color: white;
	background: #3f93ff;
}

.dark-mode header, .dark-mode .config, .dark-mode .configsub {
	background-image: linear-gradient(51deg,hsl(215deg 38% 30%) 50%,hsl(300deg 15% 48%) 100%);
}








/* FIN MODO OSCURO */











/* MENU USUARIO */

header {
	/*padding: 0.7em !important;*/
	z-index: 5;
	overflow: inherit;
}

.user-menu {
	display: flex;
    border-radius: 4em;
    overflow: hidden;
    padding: 0 !important;
    /*border: 0.1rem solid;*/
	cursor: pointer;
	/*
	height: 2rem;
    width: 2rem;*/
	
	height: 100%;
	aspect-ratio: 1;
}

.user-menu > div:first-child {
	border-radius: 4em;
    overflow: hidden;
    padding: 0 !important;
    border: 1.5px solid;
    margin: 0 !important;
	
	isolation: isolate;
	transform: translateZ(0);
}

.user-menu > div:last-child {
	position: absolute;
    width: 16em;
    background: white;
    padding: 1em;
    right: -19em;
    top: 3.2em;
    z-index: 5;
    background: var(--colorPrimario);
    border-radius: 0.5rem;
	box-shadow: 0.2rem 0.2rem 0.5rem -0.1rem #000000b0;
	transition: 0.3s;
	
	display: flex !important;
    flex-direction: column;
    gap: 1em;
	cursor: auto;
	margin-left: 0;
}

.user-menu img {
	display: flex;
	height: 100%;
	width: 100%;
	transition: 0.3s;
	
}



.user-menu:hover > div > img {
	transform: scale(110%);	
	-webkit-transform: scale(110%);
}
/*
@media not all and (min-resolution:.001dpcm) { @media {
	.user-menu:hover img {
		transform: none;
	}
}
}
*/



#usermenupanel.abierto {
	right: 1em;
}

#usermenupanel > div:nth-child(2) > div {
	cursor: pointer;
	transition: 0.3s;
}

#usermenupanel > div > div {
	box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 0.3rem;
}


#usermenupanel > div:nth-child(2) > div:hover {
	background: #00000020;
}

#usermenupanel img {
	width: 6em;
	height: 6em;
    object-fit: cover;
    border-radius: 4em;
    border: 3px solid;
}

#usermenupanel > div:first-child {
	display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #ffffff50;
    padding: 0.6rem;
}

/* FIN MENU USUARIO */

















/* PANEL TITULO */
.inner-header {
	width: 100%;
}
.inner-header h1 {
	font-weight: 400;
}
.inner-header span {
	max-width: 100%;
    display: block;
    font-size: 0.8em;
	font-weight: normal;
	color: black;
	text-align: center;
}
.inner-header i {
	color: var(--colorSecundario);
}
/* FIN PANEL TITULO */













/* NUEVO ESTILO TABLAS */

.tabla {
	display: flex;
	background: var(--colorSuave);
    font-weight: normal;
    color: #666;
    font-size: 0.8rem;
	border-radius: 0.5rem;
	flex-direction: column;
    overflow: hidden;
}

.tabla > div {
	display: flex;
    padding: 0.8em 1em;
    width: 100%;
	box-sizing: border-box;	
	gap: 0.5em;
	align-items: center;
}

.tabla > div:first-child {
	background: var(--colorPrimario);
	color: white;
	font-weight: bold;
	/*padding: 0.8em 1em;*/
}

.tabla > div:nth-child(2n+2) {
    background: #e1ebf5;
}

.tabla > div > div {
    text-align: left;
	width: 20%;
}

.tabla > div > div:last-child {
	text-align: right;
}

.tabla > div > div:last-child.large {
	text-align: left;
}

.tabla .large, .tabla > div > div:nth-child(1) {
	flex: 1;
}

.tabla > div > div.medium {
	width: 30%;
	flex: inherit;
}

.tabla > div > div.small {
	width: 10%;
	flex: inherit;
}

.tabla .valor {
	padding: 0.1em 0.3em;
    border-radius: 0.3em;
    color: black;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
	min-width: 1.5em;
    border: 1px solid #0000001a;
}

.tabla > div:first-child, .tabla .detalle > div:nth-of-type(3) {
	z-index: 1;
}

/* FIN NUEVO ESTILO TABLAS */















@media(min-height: 600px) {
	.footer {		
		bottom: 0;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media(min-height: 740px) {
	/*
	.mainlogo {
		margin-top: 5em;
	}*/
}


@media(min-width: 700px) {
	.logo {
		margin-left: 0.5em;
	}
	
	header {
		top: 0px;
		animation: none;
		/*padding: 0.4em;*/
		/*height: 3rem;*/
	}
	
	body {
		overflow: hidden;
		background-image: linear-gradient(51deg,hsl(202deg 100% 30%) 50%,hsl(175deg 80% 36%) 75%,hsl(175deg 80% 38%) 100%);
	}
	
	.flex-container.login {
		background: none;
	}
	
	.flex-container.login li {
		box-shadow: none;
		padding: 2em;
		border-radius: 1.5rem;
	}
	
	.configpadre {
		bottom: 0px;
		animation: none;
	}
	
	.config button span {
		margin-top: inherit;
	}

	
	.subheader {
		padding-left: 0.8em;
	}
	
	.flex-container {
		gap: 1.06em;
	}
	
	.flex-item-contenedor {
		gap: 1.06em;
	}
	
	.flex-item {
		/*width: 45.6%;*/
		/*min-width: 40%;*/
		/*max-width: 47.82%;*/
		max-width: 44.5%;
	}
	
	.caldetalle {
		width: 60%;
	}
	/*
	header.pacienteon {
		height: 8vh;
	}
	header.pacienteoff {
		height: 5vh;
	}
	.layout.pacienteon {
		height: 92vh;
	}
	.layout.pacienteoff {
		height: 95vh;
	}
	*/
	
	.flex-item.large {
		max-width: 100%;
		text-align: left;
	}
	
	.flex-item.medium {
		/*width: 50% !important;*/
		max-width: 100%;
		text-align: left;
	}
	
	.flex-item.small {
		/*width: 35% !important;*/
		max-width: 40%;
	}	
	
	
	
	
	.flex-item.fill {
		height: inherit;
		margin-bottom: inherit;
		min-width: 50%;
	}


	.flex-item.wrap > div > div {
		width: fit-content;
		max-width: 47%;
	}

	.chat { 
		/*background-color: snow;*/
		display: flex;
		flex-flow: column nowrap;
		/*background: var(--colorPrimario--oscuro);*/
		/*background: var(--colorSuave);*/
		background: #e1ebf5;
		border-radius: 1.5rem;
		/*border: 1px solid var(--colorPrimario--claro);*/
		height: inherit;
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
	}
	
	
	
	.chatdiv {
		padding: 1em;
		margin: 0.5em;
	}
	
	
	.chatinput {
		position: relative;
		padding: 0.5em 0.5em;
		bottom: inherit;
		width: auto;
		height: auto;
		/*height: 4em;*/
	}
/*
	.chatinput > div {
		position: absolute;
		right: 0.8em;
		top: 50%;
		transform: translateY(-50%);
		box-sizing: border-box;
		box-shadow: none;
		height: calc(100% - 1.5em);
		border-radius: 0.8rem;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
*/
	.chatinput button.btnLeidoOff {
		display: flex !important;
	}


	.chatinput textarea {
		border-radius: 1rem;
		/*height: 3.5em;*/
		padding: 0.2em 11em 0.2em 0.5em;
		color: #333;
		resize: none;
	}
	
	.in img {
		left: -0.5em;
	}

	.out img {
		right: -0.5em;
	}
	
	
	
	.notificacion {
		right: -1.5em;
		top: -3.8em;
	}
	
	.leyenda {
		gap: 0em;
		width: 80%;
	}
	
	.leyenda > div {
		flex: 0 0 50%;
	}
	
	.informe .menu, .informe .boton {
		font-size: 3rem;
	}
	
	.flex-item.calendario {
		min-height: 18.1em;
		height: fit-content;
	}


}

@media(min-width: 1000px) {
	/*
	.layout {
		display: flex;
		height: 92vh;
		overflow: hidden;
	}	
	
	*/
	
		
	::-webkit-scrollbar {
		  width: 0.5em;
		  margin: 1em;  
	}
	
	.desktoponly {
		display: flex;
	}
	

	
	body, #body {
		/*background: var(--colorPrimario);	*/
		
	}
	#body > ul > li {
		padding: 4em;
		border-radius: 1.5em;
	}
	
	h1 {
		text-align: left;
	}
	
	header {		
		/*padding: 1em 0.5em 0.3em 0.5em;*/
		background: none;
		/*height: 100%;*/
		/*height: 2.86rem;*/
		/*width: auto;*/
		/*padding: 0.5em !important;*/
	}
	
	.mainlogo {
		margin-top: 2em;
	}
	
	header > div:first-child {
		height: 3rem;
	}
	
	header > div > div:nth-child(2) {
		padding-top: 0.4em;
	}
	
	.logo {
		background-size: 1.2em;
		background-position-y: 0.3em;
		height: 1.65em;
		font-size: 1.5em;
		padding-top: 0.2em;
	}
	
	
	.subheader {
		border-top-left-radius: 0.75em;		
		position: absolute;
		top: 1.2rem;
		left: 18%;
		/*z-index: -1;*/
		font-size: 1rem;
		border-top-right-radius: 0.75em;
		/*background: white;*/
		background: #dee3e5;
		color: var(--colorPrimario);
		border-bottom: none;
		font-weight: bold;
		height: 1.43rem;
		width: fit-content;;
	}
	
	.user-menu > div:first-child {
		border: 2px solid;
	}
	
	#headerPaciente button {
		color: inherit;
	}
	
	.layout > div:last-child {
		flex: 1;
		display: flex;
		flex-direction: column;
		/*border-top-left-radius: 1.5rem;*/
		width: 82%;
		/*margin-left: 18%;*/
		position: relative;
		height: 93vh;
		height: 100%;
		width: 100vw;
		overflow: hidden;
		/*overflow-y: scroll;*/
		
		background: none;
		
		max-height: 100%;
	}
	
	.flex-container {
		flex: 1;
		/*padding-bottom: 0;*/
		/* overflow-y: scroll; */
		padding: 2em 3em;
		box-sizing: border-box;
		margin-bottom: 0;
		
		
		background: white;
		overflow-y: scroll;
		background: #dee3e5;
	}
	
	#contenido.esquina {
		border-top-left-radius: 1.5rem;
	}
	
	
	
	.flex-item {
		flex: 1;
		min-width: 40%;		
		max-width: 49%;
		min-height: 22.5rem;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: center;	

		background: white;
		padding: 1.5em;
		box-sizing: border-box;
		box-shadow: 0.2rem 0.2rem 0.5rem -0.1rem #0000002e;
		border-radius: 0.5rem;		
	}
	

	.flex-item.large {
		max-width: 100%;
		text-align: left;
	}
	
	.flex-item.medium {
		/*width: 50% !important;*/
		max-width: 70%;
		text-align: left;
	}
	
	.flex-item.small {
		/*width: 35% !important;*/
		max-width: 50%;
	}	


	.flex-item:last-child {
		margin-bottom: 4em;
	}


	.flex-item.wrap > div > div {
		width: fit-content;
		max-width: 25%;
	}

	.flex-item.wrap > div > div > img {
		width: 120px;
	}
	
	.configpadre {
		/*position: fixed;*/
		width: 5em;
		width: 18%;
		height: 100%;
		flex-direction: column;
		/*top: 6em;*/
		justify-content: space-between;
		
		position: relative;
		padding: 2em 0 1em 0;
		box-sizing: border-box;
	}	
	
	.configpadre > div {
		/*margin-top: 2em;*/
	}
	
	.configpadre > div > div, .configpadre > .pacientedoctor > div {
		width: 100%;
	}
	
	
	.configpadre > div > div > div {
		position: relative;
		top: inherit;
		bottom: inherit;
		font-size: 0.8em;
		flex-direction: column;
		z-index: 0;
	}
	
	.configpadre.menuOff {
		display: flex;
	}
	
	.config {
		display: flex;
		width: 25%;
		overflow-y: scroll;
		overflow-y: hidden;
		z-index: 1;
		box-sizing: border-box;
		overflow-x: hidden;
		flex-direction: row;
		left: 0;
		/*width: 5em;*/
		max-height: 100%;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		background: none;
		
		
		width: 100%;
		align-content: flex-start;
	}
	
	.config > div > div > div > button {
		padding-left: 3rem;
	}
	
	.config button {
		height: 4.5em;
		flex-direction: row;
		padding: 1em 2em;
		justify-content: flex-start;
		gap: 1.2em;
		color: white;
	}
	
	.config > div > button.menuactivo {
		/*border-left: 4px solid white;*/
	}
	
	.config i {
		font-size: 2em;
		width: 1em;
	}
	
	.config span {
		font-size: 1.7em;
	}
	
	.config > div > button:hover {
		background: #00000030;
	}
	
	.configsub {
		background: none;
		animation: none;
	}
	
	.configsub button {
		color: #ffffffa0;
	}
	
	.configsub button:hover {
		color: white;
		transform: scale(1.03);
	}
	
	
	.config > div > .menuactivo:hover {
		background: #00000050 !important;
	}
	
	.config > div > .menuactivo + div {
		overflow: hidden;
	}
	.config > div > .menuactivo + div > div {
		height: 2.7em;	
	}
	.config > div > .menuactivo + div > div {
		height: 0em;
		animation: menuabrir 0.3s ease-out forwards;
	}
	/*
	.configsub.quitar > div {
		animation: menuabrir 0.3s ease-out reverse forwards;
	}
*/
	
	
	
	
	
	form {
		width: 100%;
	}
	
	.caldetalle {
		width: 28%;
		box-shadow: 8px 8px 32px #000000ba;
	}
	
	
	.bg {
		background: none;
		width: 82%;
		left: 18.1%;
		top: 3.6rem;
	}
	

	

	
	
	.col2 label {
		max-width: 35%;
	}
	
	.alertas > div > div:first-of-type label:nth-child(2), .alertas > div > div > div:nth-of-type(2) {
		width: 16%;
	}	
	.alertas > div > div:first-of-type label:nth-child(3), .alertas > div > div > div:nth-of-type(3) {
		display: -webkit-box;
	}	
	.alertas > div > div:first-of-type label:nth-child(4), .alertas > div > div > div:nth-of-type(4) {
		width: 12%;
	}	
	
	
	
	
	.notificacion {
		right: -2em;
		top: -1em;
	}
	
	
	
	.flex-item.calendario {
		min-height: 21.1em;
	}


	.filtros {
		justify-content: inherit;
	}
	.filtros .boton {
		font-size: inherit;
	}
	
	
	.informe .menu, .informe .boton {
		font-size: 2rem;
		min-width: 18em;
	}	

	.informe .flex-item.tarta > div > div:nth-of-type(1) {
		float: left;
		width: 42%;
		padding-top: 1em;
	}

	.informe .flex-item.tarta > div > div:nth-of-type(2) {
		float: right;
		width: 50%;
		padding-top: inherit;
	}
	
	
	body.dark-mode {
		background-image: linear-gradient(51deg,hsl(215deg 38% 30%) 50%,hsl(300deg 15% 48%) 100%);
	}
	
	.dark-mode header, .dark-mode .config, .dark-mode .configsub {
		background-image: none;
	}
	
	.dark-mode .chat {
		background: var(--colorDarkMode);
	}
	
	.dark-mode .chatinput {
		box-shadow: none;
	}
	

	
	
	.menupie {
		display: flex;
	}

	
	.config > div:nth-child(6) {
		display: flex;
	}

		
	h2 {
		text-align: inherit;
	}
	
	.inner-header span {
		text-align: left;
	}

}

@media (min-width: 1200px) {
	body {
		height: 100%;
	}
	
	#body {
		height: 100%;
		/*height: auto;*/
	}
	
	#body {
		justify-content: center;		
	}
	
	header {
		position: sticky;
	}
	/*
	.flex-container {
		
		padding: 3em 1em 3em 1em;
		
	}*/
	
	.flex-container.login {
		align-self: center;
		flex: inherit;
		border-radius: 1rem;
		padding: 0;
		width: 30%;
	}
	
	.flex-container.login > li {
		display: flex;
		width: 100%;
		max-width: 100%;
		flex-direction: column;
		margin-bottom: inherit;
		align-content: center;
		
		box-shadow: none;
				box-shadow: none;
		padding: 2em;
		border-radius: 1.5rem;
	}
	
	.flex-container.login > li > fieldset {
		width: 100%;
	}
	/*
	.flex-container.login { 
		position: fixed;
		top: 50%;
		transform: translateY(-50%);
	}

	*/
	
	
	.layout {
		z-index: 4;
	}
	
	.flex-item {
		flex: 1;
		min-width: 29%;
		max-width: 32.2%;
	}
	
	.informe > div {
		padding: 2em;
		margin: 4em;
	}
	 
	
	.informe .flex-item {
		min-width: 70%;		
		max-width: 70%;
	}
	
	
	.flex-item.large {
		max-width: 100%;
		text-align: left;
	}
	
	.flex-item.medium {
		/*width: 50% !important;*/
		max-width: 50%;
		text-align: left;
	}
	
	.flex-item.small {
		/*width: 35% !important;*/
		max-width: 40%;
	}	
	
	.configpadre {
		width: 14%;
		
	}
	
	.layout > div:last-child {
		/*margin-left: 14%;*/
	}
	
	.subheader {
		left: 14%;
	}
	
	.bg {
		width: 86%;
		left: 14.1%;
	}
	
	.leyenda {
		gap: 0em;
		width: 50%;
	}
	
	.leyenda > div {
		flex: 0 0 50%;
	}
	
	.informe .menu {
		font-size: 1rem;
		padding: 0.3rem;
	}	
	
	.informe .boton {
		font-size: 1rem;
	}
	

	.user-menu {
		/*height: 2.8em;
		width: 2.8em;*/
		/*
		height: 100%;
		aspect-ratio: 1;
		*/
	}
	
	.user-menu > div:last-child {
		top: 4.2rem;
	}
	

	
	.dark-mode .subheader {
		border-bottom: none;
	}
	

	
	
		
	.inner-header span {
		max-width: 50%;
	}
	
}

@media (min-width: 1800px) {
	
	.flex-item:last-child {
		margin-bottom: 0;
	}
	.configpadre {
		width: 12%;
	}
	
	.subheader {
		left: 12%;
	}
	
	.flex-item {
		flex: 1;
		/*min-width: 29%;		
		max-width: 32%;*/
		min-width: 32.5%;
	}
	
	.flex-item-contenedor {
		gap: 1em;
	}
	
	.flex-item.calendario {
		flex: 1;
		min-width: 24%;
		max-width: 26%;
	}


}

@media (min-height: 660px) {
	.chat, .chatdiv {
		height: 47vh;
	}
}
@media (min-height: 800px) {
	.chat, .chatdiv {
		height: 56vh;
	}
}