@import url('https://fonts.googleapis.com/css2?family=Fredoka&family=Quicksand&display=swap');

:root {
  --site-color-fondo-1: #F5F7FA;
  --site-color-fondo-2: #FFF;
  --site-color-verde: #4CAF4F;
  --site-color-lila: #CFAFD8;
  --site-color-blanco-texto: #FFFFFF;
  --site-color-negro-texto: #000000;

  --site-font-title: 'Fredoka', sans-serif;
  --site-font-body: 'Quicksand', sans-serif;
}

/* Asegura que el sitio ocupe toda la altura disponible */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--site-font-body);
}

/* Contenedor base que permite sticky footer con flexbox */
.container-base {
  display: grid;
  min-height: 100dvh;
  grid-template-rows: auto 1fr auto;
}

/* Espacio superior para evitar que el navbar fijo se superponga */
main {
  flex: 1;
  padding-top: 110px;
  /* Ajusta si el navbar cambia de tamaño */
  max-width: 100vw;
  overflow-x: hidden;
}

/* Estilo del footer si lo deseas dentro de este archivo */
footer {
  background-color: var(--site-color-lila);
  color: var(--site-color-blanco-texto);
  padding: 2rem 0;
}

.form-control:focus {
  border-color: var(--site-color-verde);
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(76, 175, 79, 0.75) !important;
}

.form-control.is-invalid-field {
  border-color: var(--bs-form-invalid-border-color) !important;
}

.form-control.is-invalid-field:focus {
  border-color: var(--bs-form-invalid-border-color) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25) !important;
}

.form-control.is-valid-field {
  border-color: var(--bs-form-valid-border-color) !important;
}

.form-control.is-valid-field:focus {
  border-color: var(--bs-form-valid-border-color) !important;
  box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25) !important;
}

.is-invalid-field~.invalid-feedback {
  display: block;
}

.valid-field~.invalid-feedback {
  display: none;
}