/* Fuentes */
@font-face {
	font-family: 'Montserrat';
	src: url('../font/Montserrat/Montserrat.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratRegular';
	src: url('../font/Montserrat/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratBlack';
	src: url('../font/Montserrat/Montserrat-Black.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratMedium';
	src: url('../font/Montserrat/Montserrat-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratSemiBold';
	src: url('../font/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratBold';
	src: url('../font/Montserrat/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'MontserratThin';
	src: url('../font/Montserrat/Montserrat-Thin.ttf') format('truetype');
}
@font-face {
	font-family: 'Gogono';
	src: url('../font/gogono/gogono.ttf') format('truetype');
}

/* Scrollbar */
::-webkit-scrollbar {
	height: 8px;
	width: 10px;
}
::-webkit-scrollbar:hover {
	width: 12px;
}
::-webkit-scrollbar-track {
	background: transparent;
	opacity: .4;
}
::-webkit-scrollbar-thumb {
	background: rgb(0, 0, 0, .4);
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
	background: rgb(0, 0, 0, .6);
}
	@media (max-width: 800px) {
		::-webkit-scrollbar {
			height: 8px;
			width: 5px;
		}
	}

/* Cargando */
#cargando {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9998;
	background: url("../gif/cargando.gif") 50% 50% no-repeat rgb(249,249,249);
	opacity: .8;
}

/* Generico */
*,
*::before,
*::after {
	box-sizing: border-box;
}
.oculto {
	display: none;
}
:root {
	/* Colores */
	--color-primary: #c78858;
	--color-primary-opaque: #c7885829;
	--color-background: #FFF8F3;
	--color-grey: #a5a5a5;
	--color-lightgrey: #efecec;
	--color-darkgrey: #747474;
	--color-lightblack: #474747;
    --color-green: #4caf50;
    --color-red: #f44336;
    --color-blue: #26c6da; /*63CCF6*/
    --color-purple: #ab47bc;
    --color-orange: #FF9800;
    --color-rose: #e91e63;

	/* Fuentes texto */
	--font-family-primary: system-ui;

	/* Tamaños texto */
	--font-size-xxs: .65rem;
	--font-size-xs: .75rem;
	--font-size-sm: .875rem;
	--font-size-base: 1rem;
	--font-size-md: 1.125rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--font-size-2xl: 1.875rem;
	--font-size-3xl: 2.25rem;
	--font-size-hero: 3rem;

	/* Tamaños icono */
	--icon-size-4xs: .4rem;
	--icon-size-3xs: .5rem;
	--icon-size-xxs: .75rem;
	--icon-size-xs: 1rem;
	--icon-size-sm: 1.15rem;
	--icon-size-base: 1.4rem;
	--icon-size-md: 1.4rem;
	--icon-size-lg: 1.6rem;
	--icon-size-xl: 2rem;
	--icon-size-2xl: 2.5rem;
	--icon-size-3xl: 3rem;
	--icon-size-hero: 4rem;

	/* Padding icono */
	--icon-padding-xs: .3rem;
	--icon-padding-sm: .4rem;
	--icon-padding-base: .5rem;
	--icon-padding-lg: .625rem;
	--icon-padding-xl: .8rem;
	--icon-padding-xxl: 1rem;

	/* Padding botones */
	--button-padding-xs: .3rem .4rem;
	--button-padding-sm: .3rem .8rem;
	--button-padding-base: .5rem 1rem;
	--button-padding-md: .625rem 1.25rem;
	--button-padding-lg: .85rem 2rem;
	--button-padding-xl: 1.2rem 3.5rem;

	/* Radio botones */
	--button-border-radius-sm: 15px;
	--button-border-radius-base: 18px;
	--button-border-radius-lg: 21px;
	--button-border-radius-round: 50%;

	/* Alto linea */
	--line-height-sm: 30px;
	--line-height-base: 35px;
	--line-height-lg: 40px;

	/* Sombra */
	--box-shadow: 0px 4px 8px rgba(0, 0, 0, .4);
	--box-shadow-up: 0px -4px 8px rgba(0, 0, 0, .4);
}
@media (max-width: 800px) {
	:root {
		/* Tamaños texto */
		--font-size-xxs: .4rem;
		--font-size-xs: .5rem;
		--font-size-sm: .63149625rem;
		--font-size-base: .72171rem;
		--font-size-md: .81192375rem;
		--font-size-lg: .9021375rem;
		--font-size-xl: .993465rem;
		--font-size-2xl: 1.17400625rem;
		--font-size-3xl: 1.3565475rem;
		--font-size-hero: 1.98693rem;

		/* Tamaños icono */
		--icon-size-4xs: .30rem;
		--icon-size-3xs: .35rem;
		--icon-size-xxs: .43rem;
		--icon-size-xs: .6237rem;
		--icon-size-sm: .75735rem;
		--icon-size-base: 1.010394rem;
		--icon-size-md: 1.010394rem;
		--icon-size-lg: 1.154736rem;
		--icon-size-xl: 1.3365rem;
		--icon-size-2xl: 1.804275rem;
		--icon-size-3xl: 2.16513rem;
		--icon-size-hero: 2.88684rem;

		/* Padding icono */
		--icon-padding-xs: .243rem;
		--icon-padding-sm: .324rem;
		--icon-padding-base: .405rem;
		--icon-padding-lg: .50625rem;
		--icon-padding-xl: .648rem;
		--icon-padding-xxl: .8rem;

		/* Padding botones */
		--button-padding-xs: .2rem .3rem;
		--button-padding-sm: .243rem .648rem;
		--button-padding-base: .405rem .81rem;
		--button-padding-md: .50625rem 1.0125rem;
		--button-padding-lg: .75rem 1.8rem;
		--button-padding-xl: .972rem 2.835rem;

		/* Radio botones */
		--button-border-radius-sm: 12.15px;
		--button-border-radius-base: 14.58px;
		--button-border-radius-lg: 17.01px;
		--button-border-radius-round: 50%;

		/* Alto linea */
		--line-height-sm: 18px;
		--line-height-base: 22.5px;
		--line-height-lg: 25px;

		/* Sombra */
		--box-shadow: 0px 3.24px 6.48px rgba(0, 0, 0, .4);
		--box-shadow-up: 0px -3.24px 6.48px rgba(0, 0, 0, .4);
	}
}
/* Textos */
h1, h2, h3, h4, p, a, span, button {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}
	h2 {
		font-size: var(--font-size-xl);
	}
	h3 {
		font-size: var(--font-size-lg);
	}
		h2, h3 {
			font-weight: 500;
		}
	h4 {
		font-size: var(--font-size-base);
	}
	p, td {
		font-size: var(--font-size-md);
	}
	a, button { /* span, */
		font-size: var(--font-size-base);
	}
a {
	text-decoration: none;
	cursor: pointer;
}
input {
	font-size: var(--font-size-sm);
}
/* Botones */
button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--button-padding-base);
	border: 1.5px solid var(--color-lightgrey);
	border-radius: var(--button-border-radius-base);
	background-color: white;
	box-shadow: var(--box-shadow);
}
	button.primary {
		border: 1.5pxsolid var(--color-primary);
		color: white;
		background-color: var(--color-primary);
	}
	button.danger {
		color: var(--color-red);
	}
	button.success {
		color: var(--color-green);
	}
	div.etiquetas button {
		padding: var(--button-padding-sm);
		background-color: rgb(255, 255, 255, .3);
		border: 1px solid rgb(255, 255, 255, .3);
		border-radius: var(--button-border-radius-lg);
		box-shadow: none;
	}
/* Iconos */
i, i.fa {
	font-size: var(--icon-size-base);
	color: inherit;
}
	i.true {
		color: var(--color-green);
	}
	i.false {
		color: var(--color-red);
	}
	i.star {
		color: #e9d206;
	}
	i.inf {
		color: var(--color-blue);
	}
	i.pri {
		color: var(--color-purple);
	}
	i.war {
		color: var(--color-orange);
	}
	i.fav {
		color: #ff0000!important;
	}
	i.male {
		color: #2CA1E8;
	}
	i.female {
		color: #E82CC5;
	}

/* Body */
body {
	overflow-y: hidden;
	overflow-x: hidden;
	margin: 0;
    padding: 0;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-base);
}
/* Notificaciones */
	#notifica {
		position: absolute;
		top: 20px;
		right: 20px;
		box-shadow: 0 4px 20px 0px rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(0, 188, 212, .4);
		color: #ffffff;
		z-index: 1000;
		padding: 20px 15px;
		border-radius: 3px;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		opacity: 0;
		transform: translate3d(0, -250%, 0);
		max-width: 86dvw;
	}
		#notifica span {
			font-size: var(--font-size-sm);
		}
		#notifica i {
			font-size: var(--icon-size-sm);
			margin-left: 1.25rem;
			cursor: pointer;
		}
		#notifica.err {
			background-color: #F44336;
		}
		#notifica.war {
			background-color: #FF9800;
		}
		#notifica.suc {
			background-color: #4CAF50;
		}
		#notifica.inf {
			background-color: #63CCF6;
		}
		@keyframes fadeInDown {
			from {
			opacity: 0;
			transform: translate3d(0, -250%, 0);
			} to {
			opacity: 1;
			transform: none;
			}
		}
		@keyframes fadeOutUp {
			from {
				opacity: 1;
				transform: none;
			} to {
				opacity: 0;
				transform: translate3d(0, -250%, 0);
			}
		}
		#notifica.show {
			animation: fadeInDown;
			animation-duration: 1.5s;
			animation-fill-mode: forwards;
			opacity: 1;
			transform: none;
		}
		#notifica.remove {
			animation: fadeOutUp;
			animation-duration: 1.5s;
			animation-fill-mode: forwards;
			opacity: 0;
			transform: translate3d(0, -100%, 0);
		}
		@media (max-width: 800px) {
			#notifica {
				top: 50px;
				padding: 15px;
			}
				#notifica i {
					margin-left: .5rem;
				}
		}
	/* Modales */
	.modal {
		height: 100dvh;
		width: 100dvw;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 998;
		opacity: 0;
		background-color: rgba(0, 0, 0, 0.25);
		visibility: hidden;
		transition: all .3s ease;
	}
		.modal.show {
			opacity: 1;
			visibility: visible;
		}
		.modal.oculto {
			background-color: transparent;
		}
		.modal .card {
			height: fit-content;
			max-height: calc(100dvh - 55px);
			max-width: calc(100dvw - 30px);
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			background-color: var(--color-background);
			border-radius: 15px;
		}
			.modal .card::-webkit-scrollbar {
				width: 6px;
			}
			.modal .card .cardHeader {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
				.modal .card .cardHeader i {
					margin: 1rem 0 .5rem 0;
					padding: 15px;
					border-radius: 50%;
					font-size: var(--icon-size-3xl);
					color: var(--color-primary);
					background-color: var(--color-primary-opaque);
				}
				.modal .card .cardHeader h4 {
					margin: .25rem 0;
					font-size: var(--font-size-base);
				}
				.modal .card .cardHeader p {
					margin: .25rem 0 0 0;
					color: var(--color-grey)!important;
				}
			.modal .card .cardBody {
				height: stretch;
				display: flex;
				flex-wrap: wrap;
				padding: 10px 15px;
			}
				.modal .card .cardBody .cardButtons {
					display: flex;
					gap: 1rem;
					width: stretch;
					margin: 15px 0;
					padding: 0 10px;
				}
					.modal .card .cardBody .cardButtons button {
						width: stretch;
						padding: 12px;
						cursor: pointer;
					}
						.modal .card .cardBody .cardButtons button:hover {
							scale: 1.01;
						}
				.modal .card .cardBody .cardSeparador {
					height: 15px;
					width: stretch;
					display: flex;
					margin: 5px 0;
					padding: 0 10px;
				}
					.modal .card .cardBody .cardSeparador hr {
						width: stretch;
						height: 1.5px;
						margin: 9.5px 0;
						border: 0;
						background-color: var(--color-lightgrey);
					}
					.modal .card .cardBody .cardSeparador span {
						margin: 0 10px;
						font-size: var(--font-size-xs);
						white-space: nowrap;
					}
			@media (max-width: 800px) {
				.modal .card .cardBody .cardButtons button {
					padding: 8px;
				}
			}
		#divRegistro .card {
			width: 625px;
		}
			#divRegistro .inputGroup:nth-child(2), .inputGroup:nth-child(3) {
				width: 50%;
			}
		#divLogin .cardBody {
			max-width: 500px;
		}
			#divLogin .cardBody p {
				margin: 10px 0;
				padding: 0 10px;
				font-size: var(--font-size-xs);
			}
				#divLogin .cardBody p:first-of-type {
					margin-top: 0;
					color: var(--color-primary);
					cursor: pointer;
				}
				#divLogin .cardBody p:last-of-type {
					margin: 10px auto;
					font-size: var(--font-size-sm);
				}
					#divLogin .cardBody p:last-of-type span {
						font-size: var(--font-size-sm);
						color: var(--color-primary);
						cursor: pointer;
					}
					#divLogin .cardBody p:last-of-type span {
						font-size: var(--font-size-sm);
						color: var(--color-primary);
						cursor: pointer;
					}
			#divLogin .cardBody button i {
				margin-right: var(--icon-padding-base);
			}
		#divVerifica .card {
			width: 450px;
		}
		#divIntroduccion .card {
			width: 800px;
		}
			#divIntroduccion .tarjetas {
				display: flex;
				gap: 2rem;
				width: stretch;
				margin: 1rem;
			}
				#divIntroduccion .tarjetas div {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 1.7rem;
					background-color: white;
					box-shadow: var(--box-shadow);
					border: 2px solid transparent;
					border-radius: var(--button-border-radius-sm);
					cursor: pointer;
				}
					#divIntroduccion .tarjetas div:hover {
						scale: 1.01;
					}
					#divIntroduccion .tarjetas div.act {
						border: 2px solid var(--color-primary);
					}
					#divIntroduccion .tarjetas div i {
						padding: 10px;
						font-size: var(--icon-size-xl);
						border-radius: 50%;
						background-color: var(--color-primary-opaque);
						color: var(--color-primary);
					}
					#divIntroduccion .tarjetas div h3 {
						margin: 10px 0;
					}
		/* Filas y columnas */
		.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
			position: relative;
			width: 100%;
			min-width: 0;
			padding: 0 10px;
		}
		.col-1 {
			flex: 0 0 8.333333%;
			max-width: 8.333333%;
		}
		.col-2 {
			flex: 0 0 16.666667%;
			max-width: 16.666667%;
		}
		.col-3 {
			flex: 0 0 25%;
			max-width: 25%;
		}
		.col-4 {
			flex: 0 0 33.333333%;
			max-width: 33.333333%;
		}
		.col-5 {
			flex: 0 0 41.666667%;
			max-width: 41.666667%;
		}
		.col-6 {
			flex: 0 0 50%;
			max-width: 50%;
		}
		.col-7 {
			flex: 0 0 58.333333%;
			max-width: 58.333333%;
		}
		.col-8 {
			flex: 0 0 66.666667%;
			max-width: 66.666667%;
		}
		.col-9 {
			flex: 0 0 75%;
			max-width: 75%;
		}
		.col-10 {
			flex: 0 0 83.333333%;
			max-width: 83.333333%;
		}
		.col-11 {
			flex: 0 0 91.666667%;
			max-width: 91.666667%;
		}
		.col-12 {
			flex: 0 0 100%;
			max-width: 100%;
		}
			@media (max-width: 800px) {
				.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
					padding: 0 5px;
				}
				.col-1, .col-2, .col-3, .col-4 {
					flex: 0 0 50%;
					max-width: 50%;
				}
				.col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
					flex: 0 0 100%;
					max-width: 100%;
				}
				.colMv-1 {
					flex: 0 0 8.333333%;
					max-width: 8.333333%;
				}
				.colMv-2 {
					flex: 0 0 16.666667%;
					max-width: 16.666667%;
				}
				.colMv-3 {
					flex: 0 0 25%;
					max-width: 25%;
				}
				.colMv-4 {
					flex: 0 0 33.333333%;
					max-width: 33.333333%;
				}
				.colMv-5 {
					flex: 0 0 41.666667%;
					max-width: 41.666667%;
				}
				.colMv-6 {
					flex: 0 0 50%;
					max-width: 50%;
				}
				.colMv-7 {
					flex: 0 0 58.333333%;
					max-width: 58.333333%;
				}
				.colMv-8 {
					flex: 0 0 66.666667%;
					max-width: 66.666667%;
				}
				.colMv-9 {
					flex: 0 0 75%;
					max-width: 75%;
				}
				.colMv-10 {
					flex: 0 0 83.333333%;
					max-width: 83.333333%;
				}
				.colMv-11 {
					flex: 0 0 91.666667%;
					max-width: 91.666667%;
				}
				.colMv-12 {
					flex: 0 0 100%;
					max-width: 100%;
				}
			}
	/* Pagina completa */
	#contenedor {
		height: 100dvh;
		width: 100dvw;
		margin: 0;
		padding: 0;
	}
		/* Barra Superior */
		#navegadorPc {
			height: 70px;
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #ffffff;
			border-bottom: 1px solid rgba(0, 0, 0, .1);
		}
			#navegadorPc div {
				display: flex;
				align-items: center;
			}
				#navegadorPc div img {
					height: 40px;
					margin-left: 2rem;
					cursor: pointer;
				}
				#navegadorPc div h1, #navegadorPc div span {
					margin-left: 2rem;
					padding-right: 1rem;
					font-family: Gogono;
					font-size: var(--font-size-xl);
				}
			#navegadorPc nav {
				display:flex;
				margin-right: 1rem;
				list-style-type: none;
			}
				#navegadorPc nav a {
					display: flex;
					align-items: stretch;
					margin-right: var(--icon-padding-lg);
					padding: var(--button-padding-md);
					border-radius: var(--button-border-radius-base);
				}
					#navegadorPc nav a i {
						margin-right: var(--icon-padding-lg);
					}
					#navegadorPc nav a:hover {
						background-color: #efeded;
					}
					#navegadorPc nav a.active {
						background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
					}
			@media (max-width: 970px) {
				#navegadorPc div h1 {
					display: none;
				}
			}
			@media (max-width: 800px) {
				#navegadorPc {
					display: none;
				}
			}
		/* Contenido pagina */
		#contenido {
			height: calc(100dvh - 70px);
            display: grid;
			align-content: start;
			overflow-y: auto;
			overflow-x: hidden;
			background-color: var(--color-background);
		}
			@media (max-width: 800px) {
				#contenido {
					height: calc(100dvh - 60px);
					padding-bottom: 25px;
				}
			}
			/* Titulo movil*/
			#tituloMovil {
				padding: 1rem;
				font-size: var(--font-size-2xl);
			}
				@media (min-width: 800px) {
					#tituloMovil {
						display: none!important;
					}
				}
			/* Secciones */
			section {
				margin: 0;
				padding: 0 2rem;
				display: flex;
				flex-direction: column;
			}
				section:not(:first-of-type) {
					margin-top: 3rem;
				}
				section header span {
    				font-size: var(--font-size-sm);
				}
				section > div {
					display: grid;
					gap: 1rem;
				}
					article, section > div > a {
						margin: 0;
						margin-top: 2rem;
						padding: 1.2rem;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						background-color: white;
						box-shadow: var(--box-shadow);
						border-radius: var(--button-border-radius-sm);
						background-size: cover;
						background-position: center;
					}
						article > table {
							width: 100%;
						}
							article > table tbody tr {
								display: flex;
								padding: .5rem 0;
							}
							article > table tbody tr:not(:first-of-type) {
								border-top: .8px solid var(--color-lightgrey);
							}
								article > table tbody tr td {
									flex: 1;
									display: flex;
    								align-items: center;
								}
								article > table tbody tr td:not(:first-of-type) {
									font-size: var(--font-size-base);
									color: var(--color-darkgrey);
								}
									article > table tbody tr td i.material-icons {
										font-size: var(--icon-size-xs);
    									padding-right: var(--icon-padding-xl);
									}
				@media (max-width: 800px) {
					section {
						padding: 0 .75rem;
					}
						section:not(:first-of-type) {
							margin-top: 2rem;
						}
						section > div {
							gap: .5rem;
						}
							article, section > div > a {
								margin-top: 1rem;
								padding: .75rem;
							}
				}
			/* En desarrollo */
			section.divProximamente {
				min-height: calc(100dvh - 165px);
				align-items: center;
				justify-content: center;
				gap: 1rem;
			}
				section.divProximamente i {
					padding: 2rem;
					border-radius: 50%;
					font-size: var(--icon-size-lg);
					color: var(--color-primary);
					background-color: rgb(199, 136, 88, .2);
				}
				@media (max-width: 800px) {
					section.divProximamente {
						min-height: calc(100dvh - 85px);
						    margin-top: 0;
					}
				}
			/* En desarrollo */
			.proximamente {
				grid-column: 1 / -1;
				display: flex;
				align-items: center;
    			width: stretch;
			}
				.proximamente span {
    				height: 1px;
					width: stretch;
					background-color: var(--color-primary);
				}
				.proximamente p {
					margin: 0 10px;
					font-size: var(--font-size-sm);
					color: var(--color-primary);
				}
			/* Tarjetas */
			.divTarjetas a, .divTarjetas article {
				padding: 1.7rem;
			}
				.divTarjetas a i, .divTarjetas article i {
					margin-bottom: 10px;
					padding: 10px;
					font-size: var(--icon-size-xl);
					border-radius: 50%;
					background-color: var(--color-primary-opaque);
					color: var(--color-primary);
				}
				.divTarjetas a p, .divTarjetas article p {
					margin-top: .5rem;
					flex: 1;
					font-size: var(--font-size-base);
				}
				@media (max-width: 800px) {
					.divTarjetas a, .divTarjetas article {
						padding: .8rem;
					}
						.divTarjetas a i, .divTarjetas article i {
							padding-bottom: .5rem;
						}
				}
			/* Filtros */
			.divFiltros {
				display: flex;
    			flex-direction: row;
				align-items: center;
				padding-top: 2rem;
			}
				.divFiltros div {
					width: 100%;
					display: flex;
					flex-direction: row;
					padding: .6rem;
					background-color: var(--color-lightgrey);
					border-radius: var(--button-border-radius-lg);
				}
					.divFiltros i {
						padding-left: var(--icon-padding-base);
						font-size: var(--icon-size-md);
					}
					.divFiltros input {
						width: 100%;
						border: 0;
						background-color: transparent;
						outline: none;
					}
				.divFiltros > i {
					cursor: pointer;
				}
			#divFiltrado {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				gap: 1.5rem;
				margin: 0 3rem;
				margin-top: 20px;
				padding: 1rem;
				border-radius: 10px;
				background-color: var(--color-lightgrey);
			}
				#divFiltrado.oculto {
					display: none;
				}
				#divFiltrado > h4 {
					width: 100%;
					display: flex;
    				align-items: center;
				}
					#divFiltrado > h4:not(:first-of-type) {
						margin-top: 1rem;
					}
					#divFiltrado > h4 i {
						font-size: var(--icon-size-sm);
    					margin-right: .5rem;
					}
				#divFiltrado .divFiltro {
					width: calc(50% - .75rem);
					align-content: start;
					gap: .5rem;
				}
					#divFiltrado .divFiltro div {
						display: flex;
						align-items: flex-start;
						flex-wrap: wrap;
						gap: .5rem;
					}
						#divFiltrado .divFiltro div:not(.selectGroup) {
							margin-top: 5.2px;
						}
						#divFiltrado .divFiltro div.selectGroup, #divFiltrado .divFiltro div.inputGroup {
							margin: 0;
						}
							#divFiltrado .divFiltro div.selectGroup div.input, #divFiltrado .divFiltro div.inputGroup input {
								margin: 0;
								padding: 10px 15px;
							}
						#divFiltrado .divFiltro div button {
							padding: var(--button-padding-sm);
							border: 1px solid rgb(0,0,0,.1);
							border-radius: 8px;
							font-size: var(--font-size-sm);
							cursor: pointer;
						}
							#divFiltrado .divFiltro div button.selected {
								border: 1px solid var(--color-primary);
								background-color: var(--color-primary);
								color: white;
							}
				#divFiltrado .btnsFiltro {
					display: flex;
					width: 100%;
					margin-top: 1rem;
				}
					#divFiltrado .btnsFiltro button {
						display: flex;
						align-items: center;
						border-radius: 8px;
						font-size: var(--font-size-xs);
						cursor: pointer;
					}
						#divFiltrado .btnsFiltro button:first-of-type {
							margin-right: auto;
							border: 0;
							background-color: transparent;
							color: var(--color-primary);
							box-shadow: none;
						}
						#divFiltrado .btnsFiltro button:not(:first-of-type) {
							border: 1px solid var(--color-primary);
							background-color: var(--color-primary);
							color: white;
						}
						#divFiltrado .btnsFiltro button i {
							font-size: var(--icon-size-xs);
							margin-right: 7px;
						}
				#divFiltrado:not(.Perro) div.divFiltro.Perro, #divFiltrado:not(.Gato) div.divFiltro.Gato, #divFiltrado:not(.Otro) div.divFiltro.Otro {
					display: none;
				}
					#divFiltrado.Perro div.divFiltro.Perro, #divFiltrado.Gato div.divFiltro.Gato, #divFiltrado.Otro div.divFiltro.Otro {
						display: grid;
					}
				@media (max-width: 800px) {
					.divFiltros {
						padding-top: 1rem;
					}
					#divFiltrado {
						gap: 1rem;
						margin: 0 1rem;
						margin-top: 15px;
					}
						#divFiltrado .divFiltro {
							width: calc(50% - .5rem);
						}
							#divFiltrado .divFiltro div.selectGroup div.input, #divFiltrado .divFiltro div.inputGroup input {
								padding: 10px;
							}
				}
			/* Botones seccion */
			section > button {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0;
    			margin-top: 2rem;
    			padding: 1rem;
				border: 0;
				background-color: white;
    			box-shadow: var(--box-shadow);
    			border-radius: var(--button-border-radius-sm);
				cursor: pointer;
			}
				section > button:hover {
					scale: 1.01;
				}
				section > button i.material-icons {
					margin-left: var(--icon-padding-lg);
					font-size: var(--icon-size-lg);
				}
				@media (max-width: 800px) {
					section > button {
						padding: .5rem;
					}
				}
			/* Cargando datos */
			#divCargandoDatos {
				flex-direction: row;
				align-items: center;
    			justify-content: center;
				gap: .75rem;
				margin-bottom: -3rem;
			}
				#divCargandoDatos.ocu {
					display: none;
				}
				#divCargandoDatos i {
					font-size: var(--font-size-lg);
					color: #999999;
					animation: loading 1.2s infinite ease-in-out;
				}
					#divCargandoDatos i:nth-child(2) {
						animation-delay: 0.2s;
					}
					#divCargandoDatos i:nth-child(3) {
						animation-delay: 0.4s;
					}
					@keyframes loading {
						0%, 80%, 100% {
							opacity: 0.3;
							transform: scale(0.8);
						}
						40% {
							opacity: 1;
							transform: scale(1.2);
						}
					}
				@media (max-width: 800px) {
					#divCargandoDatos {
						margin-bottom: 0;
					}
				}
			/* Campos */
			.inputGroup, .dateGroup, .checkGroup, .selectGroup, .tagGroup {
				width: 100%;
				min-width: 0;
				display: flex;
				flex-direction: column;
				margin: 5px 0;
			}
				.inputGroup.icono, .dateGroup.icono, .checkGroup.icono, .selectGroup.icono {
					width: stretch;
            		align-items: center;
					flex-direction: row;
            		margin-top: .25rem;
				}
					.inputGroup.icono div, .tagGroup div {
						width: stretch;
						display: flex;
						flex-direction: column;
					}
						.inputGroup.icono div input {
							width: stretch;
							margin-top: 7px;
							padding: 0;
							padding-bottom: 3px;
							border: 0;
							border-bottom: 1.5px solid var(--color-primary);
							border-radius: 0;
							outline: 0;
						}
							.inputGroup.icono div input:disabled {
								border-bottom: 1px solid transparent;
							}
			.checkGroup {
				flex-direction: row;
				justify-content: center;
				margin: 15px 0px;
			}
				.inputGroup input, .inputGroup textarea, .dateGroup input, .selectGroup .input, .selectGroup .dropdown input {
					flex: 1;
					min-width: 0;
					width: stretch;
					margin-top: 10px;
					padding: 10px 15px 10px 40px;
					outline: none;
					border: 2px solid var(--color-lightgrey);
    				border-radius: 10px;
				}
				.inputGroup i, .inputGroup i, .dateGroup i, .selectGroup i, .selectGroup .dropdown i {
					position: absolute;
					bottom: 10px;
					left: 22px;
					font-size: var(--icon-size-base);
					color: var(--color-grey);
				}
					.inputGroup textarea + i {
						top: 37px;
					}
				.inputGroup.icono i, .dateGroup.icono i, .checkGroup.icono i, .selectGroup.icono i {
					position: unset;
					margin-right: var(--icon-padding-xl);
					font-size: var(--icon-size-lg);
					color: black;
				}
				.dateGroup input::-webkit-calendar-picker-indicator {
					cursor: pointer;
				}
				.inputGroup input:focus, .inputGroup textarea:focus, .dateGroup input:focus {
					border: 2px solid var(--color-primary);
				}
				.selectGroup .input {
					flex: auto;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					font-size: var(--font-size-sm);
					background-color: white;
					cursor: pointer;
				}
					.selectGroup .input i {
						position: absolute;
						right: 5px;
						top: 7.5px;
						left: auto;
					}
				.selectGroup select {
					display: none;
				}
				.dropdown {
					max-height: 375px;
					width: calc(100% - 21px);
					position: absolute;
					top: 70px;
					left: 10.6px;
					overflow-y: auto;
					display: none;
					background-color: white;
					border-radius: 6px;
					box-shadow: var(--box-shadow);
					z-index: 999;
				}
					.dropdown::-webkit-scrollbar {
						width: 5px;
					}
					.dropdown.show {
						display: block;
					}
					.dropdown i {
						position: absolute;
						bottom: calc(100% - 57px);
						left: 21px;
						font-size: var(--icon-size-sm);
						color: var(--color-grey);
					}
					.dropdown input {
						flex: 1;
						min-width: 0;
						width: stretch;
						margin-top: 5px;
						margin: 10px 15px 0px 15px;
						padding: 7px 10px;
						outline: none;
						border: 2px solid var(--color-lightgrey);
						border-radius: 10px;
					}
						.dropdown input::placeholder {
							font-size: var(--font-size-xs);
						}
					.dropdown ul {
						margin: 0;
						padding: 5px;
						overflow-y: auto;
					}
						.dropdown ul li {
							margin: 5px 0;
							padding: 10px;
							border-radius: 3px;
							font-size: var(--font-size-xs);
							list-style-type: none;
							cursor: pointer;
						}
							.dropdown ul li:not(:last-of-type) {
								border-bottom: 1px solid var(--color-lightgrey);
							}
							.dropdown ul li.act, .selectGroup .dropdown ul li:hover {
								color: white;
								background-color: var(--color-purple);
							}
							.dropdown ul li.ocu {
								display: none;
							}
				.checkGroup input {
					height: 16px;
					width: 16px;
					position: relative;
					margin-right: 10px;
					appearance: none;
					outline: 1px solid grey;
					border-radius: 3px;
					cursor: pointer;
				}
					.checkGroup input:checked::after {
						position: absolute;
						top: calc(50% - 9.6px);
						left: calc(50% - 5.5px);
						content: "✓";
						color: var(--color-primary);
					}
				.inputGroup label, .dateGroup label, .checkGroup label, .selectGroup label {
					font-size: var(--font-size-sm);
					color: var(--color-grey);
				}
				.checkGroup label {
					display: flex;
					align-items: center;
					gap: 5px;
				}
					.checkGroup label a {
						font-size: var(--font-size-sm);
						border-bottom: .8px solid var(--color-grey);
					}
					.checkGroup.left label {
						margin: 0;
					}
					.inputGroup input:focus + label, .dateGroup label, .inputGroup input:not(:placeholder-shown) + label, .inputGroup textarea:not(:placeholder-shown) + label, .selectGroup div.lleno ~ label {
						top: -15px;
						font-size: var(--font-size-xs);
					}
				.radioGroup {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin: .5rem 0;
				}
					.radioGroup label:first-of-type {
						width: 100%;
						margin-bottom: 7px;
					}
					.radioGroup input:not(:first-of-type) {
						margin-left: 20px;
					}
				.tagGroup div {
					flex-direction: row;
					gap: 1rem;
					margin-top: 10px;
				}
					.tagGroup button {
						background-color: white;
						font-size: var(--font-size-sm);
						cursor: pointer;
					}
						.tagGroup button.selected {
							border: 1px solid var(--color-primary);
							background-color: var(--color-primary);
							color: white;
						}
				@media (max-width: 800px) {
					.selectGroup .input {
						height: 35px;
					}
					.selectGroup .dropdown {
						top: 35px;
						left: 30px;
						min-width: 80px;
					}
				}
			/* Adopciones */
			.divAdopciones > div {
				grid-template-columns: repeat(5,minmax(0,  1fr));
			}
				.divAdopciones > div > a {
					position: relative;
					display: flex;
					flex-direction: column;
					padding: 0;
					padding-bottom: .5rem;
					background-color: rgb(255,255,255,.93);
				}
					.divAdopciones > div > a:hover {
						scale: 1.01;
						cursor: pointer;
					}
					.divAdopciones > div > a > span {
						display: flex;
						align-items: center;
						position: absolute;
						left: .6rem;
						top: .6rem;
						background-color: #f3f3f3;
						border-radius: var(--button-border-radius-sm);
						padding: var(--button-padding-xs);
						color: var(--color-darkgrey);
						font-size: var(--font-size-xs);
					}
						.divAdopciones > div > a > span i {
							font-size: var(--icon-size-xs);
							padding-right: var(--icon-padding-xs);
						}
					.divAdopciones button {
						position: absolute;
						right: .6rem;
						top: .6rem;
						padding: 0;
						border: 0;
						background-color: transparent;
						cursor: pointer;
					}
						.divAdopciones button i {
							background-color: #f3f3f3;
							border-radius: var(--button-border-radius-round);
							padding: var(--icon-padding-xs);
							color: var(--color-darkgrey);
							font-size: var(--icon-size-sm);
						}
							.divAdopciones button i:hover {
								scale: 1.1;
							}
					.divAdopciones img {
						flex: 1;
						width: 100%;
						border-radius: var(--button-border-radius-sm) var(--button-border-radius-sm) 0 0;
					}
					.divAdopciones h3, .divAdopciones p {
						display: flex;
						align-items: center;
						padding-left: 1rem;
						font-family: Montserrat;
					}
						.divAdopciones h3 span, .divAdopciones p {
							margin: .28rem 0;
							font-size: var(--font-size-xs);
							color: var(--color-darkgrey);
						}
						.divAdopciones h3 {
							width: 100%;
							margin: 1rem 0 .2rem 0;
						}
							.divAdopciones h3 i {
								margin-left: var(--icon-padding-xs);
								font-size: var(--icon-size-lg);
							}
							.divAdopciones h3 span {
								margin-left: auto;
								padding-right: .8rem;
							}
							.divAdopciones p:first-of-type {
								font-size: var(--font-size-sm);
							}
							.divAdopciones p i {
								margin-right: var(--icon-padding-xs);
								font-size: var(--icon-size-xs);
							}
				@media (max-width: 1300px) {
					.divAdopciones > div {
						grid-template-columns: repeat(4,minmax(0,  1fr));
					}
				}
				@media (max-width: 1100px) {
					.divAdopciones > div {
						grid-template-columns: repeat(3,minmax(0,  1fr));
					}
				}
				@media (max-width: 800px) {
					.divAdopciones > div {
						grid-template-columns: repeat(2, minmax(0, 1fr));
					}
						.divAdopciones > div > a > span {
							left: .3rem;
							top: .3rem;
						}
						.divAdopciones > div > a > i {
							right: .3rem;
    						top: .3rem;
						}
						.divAdopciones button {
							right: .3rem;
							top: .3rem;
						}
						.divAdopciones h3, .divAdopciones p {
							padding-left: .5rem;
						}
							.divAdopciones h3 {
								margin: .3rem 0 .1rem 0;
							}
								.divAdopciones h3 span {
									padding-right: .5rem;
								}
								.divAdopciones p {
									margin:.2rem 0;
								}
				}
		/* Pie de pagina */
		footer {
			width: 100%;
			margin-top: 6rem;
			background: linear-gradient(to bottom,rgba(20,20,25,.96),rgba(15,15,20,.98));
			color: white;
			border-top: 1px solid rgba(255,255,255,.06);
		}
			footer > div {
				padding: 20px 0;
			}
			footer > div:first-child {
				display: flex;
				flex-wrap: wrap;
				gap: 4rem;
				padding: 2rem;
			}
				footer div div {
					flex: 1;
					display: flex;
					flex-direction: column;
				}
					footer div div nav {
						display: flex;
						flex-direction: column;
						padding: 20px 50px;
    					gap: 1.4rem;
					}
						footer hr {
							width: 100%;
							margin: .5rem 0;
							border: 1px solid rgba(255, 255, 255, .2);
						}
			footer span {
				margin: 0 0 1rem 0;
				font-size: var(--font-size-xl);
				font-weight: 800;
				font-family: 'Gogono';
			}
			footer p {
				margin: 0;
				font-size: var(--font-size-base);
    			line-height: 1.5;
			}
			footer a {
				transition: opacity .2s ease, transform .2s ease;
				display: flex;
    			align-items: center;
			}
				footer a:hover {
					opacity: .75;
					transform: translateX(4px);
				}
				footer a i {
					margin-right: .5rem;
					text-align: center;
					width: 1.2rem;
    				font-size: 1.2rem !important;
				}
				footer hr ~ a {
					color: rgb(255, 255, 255, .7);
					font-size: var(--font-size-sm);
				}
		footer div.copyright {
			border-top: 1.5px solid rgba(255, 255, 255, .2);
			padding: 2rem;
			text-align: center;
		}
		@media (max-width: 1150px) {
			footer div.datos {
				gap: 1rem;
			}
		}
		@media (max-width: 800px) {
			footer {
				display: none;
			}
		}
		/* Navegacion movil */
		#navegadorMovil {
			height: 60px;
			display: flex;
			align-items: center;
			gap: .5rem;
			border-top: 1px solid rgba(0, 0, 0, .1);
		}
			#navegadorMovil a {
				flex: 1;
				display: flex;
				flex-direction: column;
    			align-items: center;
				font-size: var(--font-size-lg);
				color: var(--color-darkgrey);
			}
				#navegadorMovil a.active {
					color: var(--color-primary);
				}
				#navegadorMovil a i {
					font-size: var(--icon-size-lg);
					padding-bottom: .2rem;
				}
					#navegadorMovil a.active i {
						color: var(--color-primary);
					}
			@media (min-width: 800px) {
				#navegadorMovil {
					display: none;
				}
			}