/* fuentes utilizadas en la página poppins y montserrat */
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* colores de la página */
:root {
	--negroTexto: #6b7353;
	--negroTextoFuerte: #40482a;
	--blanco: #f8fff8;
	--blanco2: #f8fbef;
	--azulVerde: #338385;
	--azulVerdeOscuro: #3b626c;
	--verdeCrema: #bec6a0;
	--verdeCremaClaro: #edf5ce;
	--alertaAzul: #6eaedb;
	--alertaAzulOscuro: #166790;
	--alertaRoja: #df9389;
	--rojoTexto: #914e46;
	--verdePastel: #92af92;
	--verdeTexto: #6FA769;
	--amarilloPastel: #eee8a9;
	--amarilloPastelOscuro: #ffdb97;
}

/* headers */
.head1 {
	font-family: "Poppins", sans-serif;
	font-size: 48px;
	color: var(--negroTextoFuerte);
	font-weight: normal;
}

.head2 {
	font-family: "Poppins", sans-serif;
	font-size: 40px;
	color: var(--negroTextoFuerte);
	font-weight: normal;
}

.head3 {
	font-family: "Poppins", sans-serif;
	font-size: 34px;
	color: var(--negroTextoFuerte);
	font-weight: normal;
}

.head4 {
	font-family: "Poppins", sans-serif;
	font-size: 28px;
	color: var(--negroTextoFuerte);
	font-weight: normal;
}

.head5 {
	font-family: "Poppins", sans-serif;
	font-size: 24px;
	color: var(--negroTextoFuerte);
	font-weight: normal;
}

.head6 {
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	color: var(--negroTextoFuerte);
	font-weight: normal;
}

.headLigero1 {
	font-family: "Poppins", sans-serif;
	font-size: 48px;
	color: var(--negroTexto);
	font-weight: normal;
}

.headLigero2 {
	font-family: "Poppins", sans-serif;
	font-size: 40px;
	color: var(--negroTexto);
	font-weight: normal;
}

.headLigero3 {
	font-family: "Poppins", sans-serif;
	font-size: 34px;
	color: var(--negroTexto);
	font-weight: normal;
}

.headLigero4 {
	font-family: "Poppins", sans-serif;
	font-size: 28px;
	color: var(--negroTexto);
	font-weight: normal;
}

.headLigero5 {
	font-family: "Poppins", sans-serif;
	font-size: 24px;
	color: var(--negroTexto);
	font-weight: normal;
}

.headLigero6 {
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	color: var(--negroTexto);
	font-weight: normal;
}

.headBlancoLigero6 {
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	color: var(--blanco2);
	font-weight: normal;
}

/* textos */
.parrafoLigero {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	color: var(--negroTexto);
	font-weight: normal;
}

.parrafo {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	color: var(--negroTextoFuerte);
	font-weight: normal;
}


/* botones */
.botonPersonalizado {
    background-color: var(--azulVerde);
    color: var(--blanco);
    border-radius: 0.6rem;
    text-align: center;
    margin: 0;
    width: fit-content;
    padding: 0.8rem 1.2rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.botonPersonalizado:hover {
    background-color: var(--azulVerdeOscuro);
    color: var(--blanco);
}

.botonPersonalizado a {
    color: var(--blanco);
    text-decoration: none;
}

.botonAlerta {
    background-color: var(--alertaRoja);
    color: var(--blanco);
    border-radius: 0.6rem;
    text-align: center;
    margin: 0;
    width: fit-content;
    padding: 0.8rem 1.2rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.botonAlerta:hover {
    background-color: var(--rojoTexto);
    color: var(--blanco);
}

.botonAlerta a {
    color: var(--blanco);
    text-decoration: none;
}

.botonAdvertencia {
    background-color: var(--amarilloPastel);
    color: var(--azulVerdeOscuro);
    border-radius: 0.6rem;
    text-align: center;
    margin: 0;
    width: fit-content;
    padding: 0.8rem 1.2rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.botonAdvertencia:hover {
    background-color: var(--amarilloPastelOscuro);
    color: var(--azulVerdeOscuro);
}

.botonAdvertencia a {
    color: var(--azulVerdeOscuro);
    text-decoration: none;
}

.botonConfirmacion {
    background-color: var(--alertaAzul);
    color: var(--blanco);
    border-radius: 0.6rem;
    text-align: center;
    margin: 0;
    width: fit-content;
    padding: 0.8rem 1.2rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.botonConfirmacion:hover {
    background-color: var(--alertaAzulOscuro);
    color: var(--blanco);
}

.botonConfirmacion a {
    color: var(--blanco);
    text-decoration: none;
}

.logoutButton svg {
	transition: fill 0.3s ease;
}

.logoutButton svg:hover {
	fill: var(--rojoTexto);
}