:root {
	--color1: #006aaa;
	--grislight: #f4f4f4;
	--grisclaro: #dcdbdb;
	--gris: #888888;
	--grisoscuro: #444444;

	--negro: #000000;
	--negro25: rgba(0, 0, 0, 0.25);
	--negro50: rgba(0, 0, 0, 0.5);
	--negro75: rgba(0, 0, 0, 0.75);
	--negro90: rgba(0, 0, 0, 0.9);

	--blanco: #ffffff;
	--blanco25: rgba(255, 255, 255, 0.25);
	--blanco50: rgba(255, 255, 255, 0.5);
	--blanco75: rgba(255, 255, 255, 0.75);
	--blanco90: rgba(255, 255, 255, 0.9);

	--exito: #4ABD09;
}

@font-face {
    font-family: 'Metropolis';
    src: url('fonts/Metropolis-Regular.eot');
    src: url('fonts/Metropolis-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Metropolis-Regular.woff2') format('woff2'),
        url('fonts/Metropolis-Regular.woff') format('woff'),
        url('fonts/Metropolis-Regular.svg#Metropolis-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

body {
	display: block;
	font-family: 'Metropolis', verdana, arial, sans-serif;
	background: var(--grisclaro);
	line-height: 1;
	font-size: 15px;
	margin: 0;
}

* {
	z-index: 10;
}

a {
	text-decoration: none;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.textocenter {
	text-align: center;
}

.version {
	position: fixed;
	bottom: 4px;
	right: 4px;
	z-index: -1;
	font-size: 12px;
	color: var(--grisoscuro);
}

#alerta {
	display: block;
	text-align: center;
	padding: 12px 5px;
	margin-bottom: 0px;
	background: #FFD246;
	color: #7C5703;
	font-size: 15px;
	border-radius: 6px;
}

#error {
	display: block;
	text-align: center;
	padding: 12px 5px;
	margin-bottom: 10px;
	background: #ff0000;
	color: var(--blanco);
	border-radius: 6px;
}

#exito {
	display: block;
	text-align: center;
	padding: 12px 5px;
	margin-bottom: 10px;
	background: var(--exito);
	color: var(--blanco);
	border-radius: 6px;
}

.grid2, .grid3, .grid4 {
	display: grid;
	gap: 5px;
	overflow-x: hidden;
}

.grid2 { grid-template-columns: 1fr 1fr; }
.grid3 { grid-template-columns: 1fr 1fr 1fr; }
.grid4 { grid-template-columns: 1fr 1fr 1fr 1fr; }


.estilo1 {
	background: var(--color1);
	color: var(--blanco);
}

.estilo2 {
	background: var(--grisclaro);
	color: var(--grisoscuro);
}

form {
	position: relative;
	display: block;
	padding: 15px;
	margin: 0 auto;
	z-index: 0;
	border: solid var(--color1) 3px;
	border-radius: 7px;
}

form.form-ia {
	padding: 20px;
}

form.form-incidencias {
	display: block;
	background: var(--grisclaro);
	border: dotted 3px var(--color1);
}

form.login {
	width: 70%;
	max-width: 340px;
	border: 2px dotted var(--color1);
	background: var(--blanco75);
}

form.box {
	display: block;
	width: calc(94% - 40px);
	max-width: 700px;
	padding: 20px;
	background: var(--blanco);
	border-radius: 10px;
}

form input[type="text"], form input[type="number"], form input[type="date"], form input[type="password"], form input[type="email"], form select, form label, form textarea {
	display: block;
	padding: 8px;
	margin: 10px 0;
	width: calc(100%);
	border: 0px;
	background: var(--grislight) !important;
    outline: none;
}

textarea {
	resize: none;
}

form input[type="checkbox"], form input[type="radio"] {
	transform: scale(1.5);
	margin-right: 10px;
}

form input[type="email"] {
	transform: lowercase;
}

form label {
	width: calc(100% - 16px);
	cursor: pointer;
}


form label.seleccionar {
	position: relative;
	display: block;
	border-radius: 5px;
	overflow: hidden;
	color: var(--negro50);
	padding-top: 12px;
	border: 1px dotted var(--gris);
}

form label.seleccionar input {
	display: none !important;
}

form label.seleccionar input:checked~span {
	color: var(--blanco);
	font-weight: bold;
}

form label.seleccionar input~div {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: url(imagen/checkbox.svg) center right 5px / 25px no-repeat;
}

form label.seleccionar input:checked~div {
	background: var(--exito) url(imagen/checkbox2.svg) center right 5px / 25px no-repeat;
}


form input[type="submit"] {
	display: inline-block;
	padding: 10px 25px;
	margin: 5px 0;
	border: 0px;
	border-radius: 7px;
}

form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	cursor: pointer;
}

form input.bordervacios, form label.bordervacios, form select.bordervacios {
	border-bottom:  solid 1px #ff0000;
	background: #f7dcdc !important;
}

form .subbox {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
}

form .subbox.corto, form .corto {
	max-width: 350px !important;
}

input:disabled {
    opacity: 0.4;
}

a.nuevousuario {
	display: inline-block;
	margin-right: 10px;
	padding: 8px 10px;
	background: var(--gris);
	color: var(--grisclaro);
	border-radius: 5px;
	text-align: center;
}

.recuperar {
	display: inline-block;
	color: var(--color1);
	font-size: 14px;
	padding: 5px 3px 2px 3px;
	border-bottom: 1px solid var(--grisclaro);
}

.logo_login {
	display: block;
	margin: 15px auto;
	width: 120px;
}

form input[type="submit"], .mostrar, .mostrar-solo {
	cursor: pointer;
}


#menu {
	position: fixed;
	width: calc(100% - 30px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: 5px 15px;
	background: var(--color1);
	z-index: 110;
	border-bottom: 3px solid var(--blanco);
}

#menu .perfil {
	display: block;
	height: 37px;
	width: 37px;
	background: url(imagen/profile.svg) center center / 65% no-repeat;
}

#menu .home {
	display: block;
	height: 37px;
	width: 37px;
	background: url(imagen/home.svg) center center / 70% no-repeat;
}

#menu .home2 {
	display: block;
	margin-top: 5px;
	background: var(--blanco);
	color: var(--color1);
	padding: 10px 5px 5px 5px;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
}

.margin-top {
	display: block;
	width: 100%;
	height: 80px;
}

.sombra {
	-webkit-box-shadow: 0px 10px 20px -7px rgba(0,0,0,0.4);
	-moz-box-shadow: 	0px 10px 20px -7px rgba(0,0,0,0.4);
	box-shadow: 		0px 10px 20px -7px rgba(0,0,0,0.4);
}


.bgfull-fixed {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -10;
	opacity: 1;
}


.boton_qr, .boton {
	display: block;
	width: 50%;
	margin: 0 auto;
	padding: 10px 0;
	background: var(--grisoscuro);
	text-align: center;
	color: var(--blanco);
	border: 2px solid var(--blanco);
	border-radius: 5px;
	cursor: pointer;
}

form.qr {
	width: 80%;
	max-width: 300px;
}

form.qr .qr_nuevo {
	width: 100%;
}

.menuperfil {
	position: fixed;
	display: none;
	width: 50%;
	max-width: 250px;
	left: 0;
	top: 0;
	text-align: center;
	color: var(--blanco);
	font-weight: bold;
	padding: 80px 10px 10px 10px;
	background: var(--negro75);
	z-index: 100;
}

.menuperfil a {
	display: block;
	padding: 10px;
	text-align: left;
	color: var(--blanco);
	text-decoration: none;
	background: var(--negro);
	font-weight: normal;
	font-size: 14px;
	margin: 5px 0;
}

.menumenu {
	position: fixed;
	display: none;
	width: 85%;
	max-width: 400px;
	height: 100%;
	top: 0;
	right: 0;
	text-align: center;
	color: var(--blanco);
	font-weight: bold;
	padding: 60px 10px 10px 10px;
	background: var(--negro90);
	z-index: 105;
}

.menumenu a {
	display: block;
	margin: 6px 4px;
	padding: 12px 8px;
	font-size: 14px;
	text-align: left;
	font-weight: normal;
	text-decoration: none;
	color: var(--blanco);
	background: var(--grisoscuro);
	border-radius: 4px;
}

#categoria {
	display: grid;
	gap: 25px 25px;
	margin: 25px 25px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.titulo_categoria {
	display: block;
	font-size: 28px;
	font-weight: bold;
	margin: 30px 10px 40px 10px;
	padding: 15px 10px;
	border-bottom: var(--color1) dotted 3px;
	color: var(--color1);
	background: var(--blanco75);
	text-align: center;
}

.titulo_categoria.bottom5 {
	margin-bottom: 5px;
}

.promedios {
	display: block;
	background: var(--blanco75);
	border-radius: 8px;
	padding: 2px 5px;
	min-height: 150px;
	border: solid 1px var(--color1);
}

a .promedios {
	color: var(--negro);
}

.promedios .grid {
	display: grid;
	grid-template-columns: 3fr 1fr;
	align-items: center;
	min-height: 90px;
	padding-bottom: 15px;
}

.promedios .grid span {
	text-align: center;
}

.promedios .logo_box {
	max-width: 60%;
	max-height: 80px;
	margin: auto;
}

.promedios.fortaleza .grid {
	min-height: 80px;
	padding-bottom: 5px;
}



.promedios.fortaleza .titulo_box {
	margin: 10px 0;
}

.logo_subtitulos {
	display: block;
	max-width: 150px;
	max-height: 150px;
	margin: 0 auto;
}

.titulo_box {
	display: block;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	margin: 10px 0 20px 0;
	text-transform: uppercase;
	background: var(--color1);
	color: var(--blanco);
	padding: 12px 5px;
	border-radius: 10px;
}

.titulo_box_menu {
	display: block;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	margin: 20px 0 5px 0;
	text-transform: uppercase;
	background: var(--color1);
	color: var(--blanco);
	padding: 12px 5px;
	border-radius: 4px;
}

.total_enc_inicio {
	display: block;
	display: none;
	text-align: center;
	font-size: 12px;
	margin: 10px 0 -10px 0;
}

#boxprincipal {
	display: block;
	margin: 10px auto;
	background: var(--blanco);
	padding: 20px;
	width: calc(94% - 40px);
	border-radius: 10px;
	max-width: 850px;
	border: solid 1px var(--grisclaro);
}

.nolimit {
	display: block;
	text-align: center;
	background: var(--grislight);
	padding: 5px;
	color: var(--gris);
}

.nolimit a {
	display: inline-block;
	padding: 8px 10px 5px 10px;
	border-radius: 5px;
	background: var(--gris);
	color: var(--blanco);
	margin-left: 20px;
}

#boxprincipal.max200, .max200 { max-width: 300px; }
#boxprincipal.max300, .max300 { max-width: 300px; }
#boxprincipal.max400, .max400 { max-width: 400px; }
#boxprincipal.max500, .max500 { max-width: 500px; }
#boxprincipal.max600, .max600 { max-width: 600px; }
#boxprincipal.max700, .max700 { max-width: 700px; }
#boxprincipal.max800, .max800 { max-width: 800px; }


#estadisticas_dia {
	position: relative;
	display: block;
	background: var(--gris);
	padding: 10px;
	margin: 0 auto 20px auto;
}

.ir_porusuario {
	display: block;
	width: 200px;
	margin: 0 auto;
	padding: 7px 10px 4px 10px;
	background: var(--gris);
	color: var(--blanco);
	text-align: center;
}

span.datos_meseros {
	display: inline-block;
	padding: 7px 10px 4px 10px;
	background: var(--gris);
	color: var(--blanco);
	margin: 10px 0;
}

.box_qr_individual {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 90%;
	height: 95%;
	padding: 5%;
	background: var(--blanco90);
	z-index: 1000;
	overflow-y: auto;
}

.titulo_unidad_individuales {
	font-size: 20px;
	font-weight: bold;
}

.box_qr_individual .cerrar {
	position: absolute;
	right: 5px;
	top: 5px;
	display: block;
	width: 20px;
	height: 20px;
	padding: 6px;
	background: var(--color1);
	border-radius: 100px;
	z-index: 100;
}

.grid_individuales {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	align-items: end;
	gap: 25px 2px;
	font-size: 12px;
}

.grid_individuales span, .grid_individuales .nombre {
	display: block;
	padding: 5px;
	border-bottom: 1px solid var(--gris);
}

.grid_individuales span.ind_top {
	display: block;
	font-size: 10px;
	color: var(--gris);
	border-bottom: 0px;
}

#estadisticas_dia .top {
	display: grid;
	grid-template-columns: 1fr 60px;
	align-items: center;
	text-align: center;
	margin-bottom: 20px;
	font-size: 20px;
}

#estadisticas_dia .datos {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 10px;
	text-align: center;
}

#estadisticas_dia .datos2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: center;
	text-align: center;
}

#estadisticas_dia .incidencias {
	display: block;
	text-align: center;
	padding: 5px;
	margin-top: 10px;
	background: var(--blanco);
}

#estadisticas_dia .incidencias b.excelente { color: #4ABD09; }
#estadisticas_dia .incidencias b.bueno { color: #FFD246; }
#estadisticas_dia .incidencias b.regular { color: #ff7535; }
#estadisticas_dia .incidencias b.malo { color: #ff0000; }

#estadisticas_dia .datos .dato {
	padding: 5px 10px;
	background: var(--blanco);
	font-size: 20px;
}

#estadisticas_dia .datos .dato.excelente { background: #4ABD09; color: var(--blanco); }
#estadisticas_dia .datos .dato.bueno { background: #FFD246; color: var(--blanco); }
#estadisticas_dia .datos .dato.regular { background: #ff7535; color: var(--blanco); }
#estadisticas_dia .datos .dato.malo { background: #ff0000; color: var(--blanco); }

#estadisticas_dia .datos .dato.escaneos  {
	display: grid;
	align-items: center;
}

#estadisticas_dia .datos .dato .titulo_dato {
	display: block;
	font-weight: bold;
	font-size: 15px;
	margin-bottom: 5px;
}



#respondidas {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 2fr 0.5fr;
	align-items: center;
	gap: 10px;
	min-height: 35px;
	margin: 5px auto 15px auto;
	padding: 5px 5px;
	background: var(--grislight);
	font-size: 14px;
}

#respondidas.block {
	display: block;
}

#respondidas.resumen {
	grid-template-columns: 55px 1fr;
}

#respondidas.dos, #respondidas .grid2 {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}

#respondidas.pendiente, #respondidas.incidencia {
	border-left: 3px solid #ff0000;
}

#respondidas.atendida {
	border-left: 5px solid #4ABD09;
}

#respondidas span {
	display: inline-block;
	vertical-align: bottom;
}

#respondidas span.nombre {
	color: var(--color1);
	font-weight: bold;
}

#respondidas span.fecha {
	display: block;
	font-size: 12px;
	color: var(--gris);
}

.comentario_encuesta {
	display: block;
	padding: 10px 5px;
	margin: -15px 0 0 0;
	font-size: 14px;
	background: var(--grislight);
}

.mesero_encuesta {
	display: block;
	padding: 5px 5px 10px 5px;
	font-size: 12px;
	border-bottom: 2px solid var(--grisclaro);
	margin-bottom: 30px;
	color: var(--color1);
	text-align: right;
	background: var(--grislight);
}

#accesos_inicio {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 10px;
	min-height: 30px;
	margin: 10px auto;
	background: var(--grislight);
	padding: 5px 5px;
	border-bottom: 2px solid var(--grisclaro);
}

#usuarios_inicio {
	position: relative;
	display: grid;
	grid-template-columns: 30px 3fr 1fr 0.5fr;
	align-items: center;
	gap: 10px;
	min-height: 30px;
	margin: 10px auto;
	background: var(--grislight);
	padding: 5px 5px;
	border-bottom: 2px solid var(--grisclaro);
}

#usuarios_inicio a span, #accesos_inicio a span {
	color: var(--color1);
	font-weight: bold;
}

#usuarios_inicio div.dld {
	display: block;
	width: 15px;
	height: 15px;
	padding: 5px 5px;
	border-radius: 5px;
	background: var(--gris) url(imagen/download.svg) center center / 20px no-repeat;
}

#usuarios_inicio span {
	display: inline-block;
	vertical-align: top;
}

#usuarios_inicio span.unidad {
	display: inline-block;
	font-size: 12px;
}

.totalregistros {
	display: inline-block;
	padding: 10px 20px;
	background: var(--gris);
	color: var(--blanco);
}

.gridfidelidad {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 5px;
	min-height: 35px;
	font-size: 14px;;
}

.gridfidelidad .top {
	font-size: 12.5px;
	display: block;
	color: var(--gris);
}

.gridfidelidad div {
	padding: 10px 6px;
	background: var(--grislight);
	border-bottom: 1px solid var(--grisclaro);
	font-size: 14px;
}

.info-individual-fidelidad {
	display: block;
	line-height: 25px;
}

.info-individual-fidelidad b {
	display: inline-block;
	width: 80px;
}

.grid-visitas-fidelidad {
	display: grid;
	grid-template-columns: auto auto 1fr auto;
	gap: 6px;
}

.grid-visitas-fidelidad div {
	display: block;
	padding: 8px 4px;
	background: var(--grislight);
	font-size: 14px;
}

.grid-visitas-fidelidad span.top {
	font-size: 12.5px;
	display: block;
	padding: 5px 0;
	border-bottom: 1px solid var(--grisclaro);
	color: var(--gris);
}

.gridfidelidad .centrar, .grid-visitas-fidelidad .centrar {
	text-align: center;
}

#box_unidades {
	display: block;
	margin: 40px;
	padding: 30px 10px;
}

#box_fortalezas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5%;
	width: 100%;
	max-width: 920px;
	margin: auto;
}

.subtitulo_total {
	display: block;
	font-size: 19px;
	margin: 25px auto;
	text-align: center;
}

a.ver_encuestas {
	display: inline-block;
	width: 200px;
	text-align: center;
	padding: 20px 10px;
	font-size: 15px;
	margin: 5px 10px;
	color: var(--blanco);
	border: solid var(--blanco) 3px;
	border-radius: 10px;
	background: var(--color1);
	text-transform: uppercase;

	-webkit-box-shadow: 0px 1px 8px -3px rgba(0,0,0,0.2);
	-moz-box-shadow: 	0px 1px 8px -3px rgba(0,0,0,0.2);
	box-shadow: 		0px 1px 8px -3px rgba(0,0,0,0.2);
}

.infomini {
	display: block;
	margin: 0;
	font-size: 13px;
	font-style: italic;
}

.encuestas_hoy {
	position: relative;
	left: 50%; 
	transform: translateX(-50%);
	display: inline-block;
	text-align: center;
	margin: 15px auto 0 auto;
	padding: 20px;
	justify-self: center;
	width: calc(100% - 40px);
}

#ultimas_encuestas {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 10px;
	width: 100%;
	max-width: 800px;
	margin: 50px auto 20px auto;
}

#ultimas_encuestas.gr3 {
	grid-template-columns: 1fr 1fr 1fr;
}

#ultimas_encuestas .recientes {
	text-align: center;
	font-weight: bold;
	font-size: 15.5px;
	line-height: 19px;
	background: var(--blanco75);
	border: solid 1px var(--grisclaro);
	padding: 10px 0 5px 0;
	line-height: 1;
	margin: 0;
	border-radius: 5px;
	color: var(--grisoscuro);
}

#ultimas_encuestas .recientes .min {
	margin: 10px auto;
}

.califtotal {
	margin-top: 7px;
	font-weight: bold;
	color: var(--gris);
}

.titulo_unidad {
	display: block;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0 auto;
	color: var(--color1);
}

.indentificador {
	display: block;
	padding: 0;
	font-size: 15px;
	text-align: center;
	margin: 5px auto 10px auto;
}

#info_usuario {
	display: block;
	gap: 10px;
	width: 80%;
	max-width: 600px;
	font-weight: normal;
}

#info_usuario span {
	display: block;
	margin: 5px 0;
}

#info_usuario span b {
	display: inline-block;
	width: 100px;
	background: var(--grisclaro);
	padding: 5px;
	margin-right: 5px;
}

.ver_qr {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--blanco75);
	z-index: 1000;
}

img.qr_usuario {
	display: block;
	width: auto;
	height: auto;
	max-width: 88vw;
	max-height: 88vh;
}

.center_absolute {
	position: absolute;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

label.canjear_selected {
	border-bottom: 5px solid #4ABD09;
	color: #4ABD09;
}

.grid_edades {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 25px;
	margin: 0px auto;
	width: 94%;
	max-width: 900px;
}

#tabla_edades {
	display: block;
	width: 100%;
	max-width: 780px;
	margin: 0 8px 10px auto;
	padding: 0 8px 10px 8px;
	background: var(--blanco50);
}

#tabla_edades .subtabla_edad {
	display: block;
	padding: 8px;
	margin-bottom: 10px;
	border-left: 2px solid var(--color1);
}

#tabla_edades .medida_edad {
	display: block;
	margin-top: 2px;
	height: 10px;
	background: var(--color1);
	border-radius: 100px;
}


/* Palabras comentadas */

#palabras {
	display: block;
	width: 100%;
	padding: 15px 5px;
	max-width: 920px;
	margin: 20px auto;
	background: #ffffff70;
}

.grid_palabras {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px 5px ;
}

.grid_palabras a {
	display: grid;
	grid-template-columns: 1fr auto;
	padding: 12px 5px;
	background: #eaeaea;
	color: #000000;
	font-size: 13.3px;
	gap: 2px;
}

.grid_palabras .palabra {
	display: block;
	color: var(--grisoscuro);
	overflow: hidden;
}

.grid_palabras a b {
	display: inline-block;
	padding: 4px 2px;
	background: var(--color1);
	color: var(--blanco);
	margin: -4px -2px;
	width: 25px;
	text-align: center;
	font-size: 12.5px;
}

a.todas_palabras {
	position: relative;
	display: block;
	width: 200px;
	padding: 5px 0;
	margin: 10px auto;
	border-bottom: solid 3px var(--grisclaro);
	color: var(--color1);
	border-radius: 4px;
	text-align: center;
	font-weight: bold;
	font-size: 12.5px;
	
	-webkit-box-shadow: 0px 0px 0px 0px;
	-moz-box-shadow: 	0px 0px 0px 0px;
	box-shadow: 		0px 0px 0px 0px;
}


.grid-ia {
	display: grid;
	grid-template-columns: 1fr 100px;
	align-items: start;
	gap: 0 10px;
}

.grid-ia select {
	padding: 10px !important;
}

.grid-ia input.sending {
	margin-top: 10px;
	width: 100% !important;
}

#respuestaform ul {
	margin: 0;
	padding: 0;
}

#respuestaform li {
	display: block;
	margin: -2.5px 0;
	padding: 6px;
	border: dotted 2px var(--gris);
	border-left: 4px solid var(--color1);
}

.grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}


.filtrar {
	display: inline-block;
	padding: 8px;
}


















/****************************************************************************************** */

.iconomenu {
    display: block;
    width: 50px;
    height: 50px;
}

.iconomenu .svgmenu {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.svgmenu .line {
    fill: none;
    stroke: var(--blanco);
    stroke-width: 7;
    stroke-linecap: round; 
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
                stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.svgmenu .line1 {
    stroke-dasharray: 60 207;
}
.svgmenu .line2 {
    stroke-dasharray: 60 60;
}
.svgmenu .line3 {
    stroke-dasharray: 60 207;
}

.svgmenu.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
}
.svgmenu.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
}
.svgmenu.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
}

.mostrarmenu {
	cursor: pointer;
}


.grid-probabilidades {
	display: grid;
	grid-template-columns: 2fr 1fr 50px;
	gap: 10px 3px;
}

.grid-probabilidades div {
	position: relative;
	display: block;
	border-bottom: 1px dotted var(--gris);
	background-color: var(--grislight);
	padding: 8px 4px;
}

.porcentaje-probabilidad {
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 1px;
	height: 7px;
	border-radius: 100px;
	background-color: var(--color1);
}







/* -------------------------------- DISPLAY NONE  ----------------------------- */
.oculto, #hide, #redvacios, #subir, #redirige, #vacios {
	display: none;
}




.circulo_calificacion {
	position: relative;
	display: inline-block;
	background-color: var(--blanco);

/* 	width: calc(50% + 30px);
	padding-bottom: calc(50% + 30px);
	margin: -15px; */
	border-radius: 200vw;
	overflow: hidden;
	font-weight: bold;
	margin: auto;
}

.circulo_calificacion.min {
	width: 60px;
	height: 60px;
	font-size: 17px;
}

.circulo_calificacion.max {
	width: 150px;
	height: 150px;
	font-size: 32px;
}

.circulo_calificacion.mini {
	width: 30px;
	height: 30px;
	font-size: 12px;
}


.circulo_calificacion .color {
	position: absolute;
	width: 80%;
	height: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--blanco);
	border-radius: 200vw;
}

.circulo_calificacion.mini .color {
	width: 78%;
	height: 78%;
}

.circulo_calificacion .fondo {
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
}


.circulo_calificacion .fondo.vacio { background-color: #c7c7c7; }
.circulo_calificacion .fondo.excelente { background-color: #4ABD09; }
.circulo_calificacion .fondo.bueno { background-color: #FFD246; }
.circulo_calificacion .fondo.regular { background-color: #ff631b; }
.circulo_calificacion .fondo.malo { background-color: #ff0000; }

.respuestas { 
	padding: 6px 0;
	background: var(--blanco);
	border-radius: 4px;
	text-align: center;
	color: var(--blanco);
	width: 85px;
}
.respuestas.excelente, .respuestas.si { background-color: #4ABD09; }
.respuestas.bueno { background-color: #FFD246; }
.respuestas.regular { background-color: #ff631b; }
.respuestas.malo, .respuestas.no  { background-color: #ff0000; }


.circulo_calificacion .calificacion {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}



/* LOADER */
#loader {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: var(--blanco90);
}

.loader {
	position: absolute;
	top: calc(50% - 24px);
	left: calc(50% - 24px);
    width: 48px;
    height: 48px;
    border: 10px solid var(--grisclaro);
    border-bottom-color: var(--color1);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 0.5s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 






@media screen and (max-width: 1000px) {
		
		
	#categoria {
		grid-template-columns: 1fr 1fr 1fr;
	}


}


@media screen and (max-width: 820px) {
		
		
	#categoria {
		grid-template-columns: 1fr 1fr;
	}


}


@media screen and (max-width: 750px) {
		
	#box_unidades {
		width: 94%;
		margin: 30px auto;
		padding: 20px 10px;
	}

	#categoria {
		grid-template-columns: 1fr 1fr;
	}

	#box_fortalezas {
		grid-template-columns: 1fr;
		gap: 20px 0;
	}

	.grid_edades {
		grid-template-columns: 1fr;
	}

	.recientes {
		font-size: 12px !important;
	}

	#ultimas_encuestas {
		gap: 5px;
	}

	.titulo_categoria {
		font-size: 22px;
		margin: 5px 5px 40px 5px;
	}

	.titulo_unidad {
		font-size: 20px;
	}

	.grid_palabras {
		grid-template-columns: repeat(2, 1fr);
	}

	.gridfidelidad div, .grid-visitas-fidelidad div {
		font-size: 12.5px;
	}

}


@media screen and (max-width: 600px) {
		
		
	#categoria {
		grid-template-columns: 1fr;
	}


}