/* ===========================================
  BASE STYLES - Docokids
=========================================== */

/* -------------------------------------------
  Variables de colores
------------------------------------------- */
:root {
  --p-verde: #18b4b0;
  /* El verde de marca, oscurecido lo justo para poder usarse en TEXTO.

     `--p-verde` (#18b4b0) sobre blanco da 2.56:1, muy por debajo del 4.5:1 que
     pide un texto normal. Se venía usando igual en textos pequeños —los
     requisitos de la contraseña ya cumplidos, el "las contraseñas coinciden"—,
     que son justo los que hay que poder leer de una ojeada.

     Este tono da 5.17:1 y se sigue leyendo como el verde de Docokids, así que
     conserva lo que el color significa ahí: "esto ya está bien". El de marca se
     queda para superficies, bordes e íconos grandes; este es el de texto sobre
     fondo claro. Mismo criterio que `--p-rosado-texto`, aquí abajo. */
  --p-verde-texto: #0b7a77;
  --p-azulclaro: #68ccf0;
  --p-verdeclaro: #afd652;
  --p-rosado: #ed5482;
  /* El rosa de marca, oscurecido lo justo para poder usarse en TEXTO.

     `--p-rosado` (#ed5482) sobre blanco da 3.39:1. Alcanza para un borde —WCAG
     1.4.11 pide 3:1 a elementos de interfaz— pero no para texto normal, que
     pide 4.5:1. Eso ya estaba documentado en `ds/components/form.css:60` y en
     `ds/components/combobox.css:357`, donde la salida fue "el texto va en gris
     y no en rosado".

     Para un enlace ese remedio no sirve: en gris deja de parecer un enlace. De
     ahí esta variante, que a 5.16:1 pasa AA con margen y se sigue reconociendo
     como el rosa de Docokids. El de marca se queda para superficies y bordes;
     este es el de texto sobre fondo claro. */
  --p-rosado-texto: #be3f61;
  --p-naranja: #f2964d;
  --p-morado: #7566db;
  /* El morado de marca, un paso más oscuro, para TEXTO.

     `--p-morado` (#7566db) sobre blanco da 4.49:1: se queda a una centésima del
     4.5:1 que pide un texto normal. A simple vista no se distingue de este, y
     este pasa con holgura (5.11:1). El de marca se queda para botones, bordes y
     fondos; este es el de texto pequeño sobre fondo claro. */
  --p-morado-texto: #6b5bd8;

  --s-azulclaro: #a3ebff;
  --s-verdeclaro: #deff7b;
  --s-rosado: #ff91b5;
  --s-naranja: #ffb482;
  --s-morado: #9f98ff;

  --t-azulclaro: #ddfafe;
  --t-verdeclaro: #f3ffc0;
  --t-rosado: #ffdeeb;
  --t-naranja: #fce4c2;
  --t-morado: #d4d1fc;

  --blanco: #ffffff;
  --negro: #000000;
  --gris-oscuro: #333333;
  --gris: #666666;
  --gris-claro: #f5f5f5;
}

/* -------------------------------------------
  Reset y base
------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

/* -------------------------------------------
  Spacing
------------------------------------------- */
.mb-4-5 {
  margin-bottom: 2.5rem;
}

/* -------------------------------------------
  Spinner
------------------------------------------- */
#spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s linear 0.4s;
}

#spinner.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s;
}

.spinner-logo {
  width: 120px;
  animation: logoPulse 1.5s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}