/*
 * Hoja de estilos de eeyapp.app.
 *
 * Los colores, la letra, los tamaños y los espacios son los de la app
 * (eey-app/components/marca/theme.ts). Si cambian allí, cambian aquí.
 * Como en la app, la web sigue el modo claro u oscuro del sistema.
 */

/* ------------------------------------------------------------ letra */

/* Poppins, alojada en la propia web (carpeta fuentes, con su licencia).
 * Solo los tres pesos que usa la app. */
@font-face {
  font-family: 'Poppins';
  src: url('/fuentes/Poppins_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fuentes/Poppins_500Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fuentes/Poppins_600SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------ colores */

/* Los roles de la app, con sus valores del tema claro */
:root {
  color-scheme: light dark;

  --fondo-pantalla: #FAFAF7;
  --texto-principal: #22302A;
  --texto-secundario: #525D52;
  --texto-apagado: #6D6D66;
  --marca-oscuro: #2E4034;
  --borde-sutil: #ECECE6;

  /* La escala de espacios de la app */
  --espacio-xs: 4px;
  --espacio-s: 8px;
  --espacio-m: 12px;
  --espacio-l: 16px;
  --espacio-xl: 24px;
  --espacio-xxl: 32px;
}

/* Los mismos roles, con los valores del tema oscuro. Como en la app,
 * marca-oscuro pasa a ser el verde claro */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo-pantalla: #141815;
    --texto-principal: #ECEFE9;
    --texto-secundario: #A8B3A4;
    --texto-apagado: #889186;
    --marca-oscuro: #CBD9C4;
    --borde-sutil: #262E28;
  }
}

/* ------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Que el navegador del móvil no agrande el texto por su cuenta */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* El estilo «cuerpo» de la app: 15 de letra y 20 de línea */
body {
  margin: 0;
  background: var(--fondo-pantalla);
  color: var(--texto-principal);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
}

p {
  margin: 0;
}

a {
  color: var(--marca-oscuro);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid var(--marca-oscuro);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ estructura */

/* La página entera, al menos del alto de la pantalla, con el pie abajo */
.pagina {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* El pie de todas las páginas salvo la portada, que ya lleva estos enlaces
 * en su lista: los términos de uso y la política de privacidad, que dicen
 * quién ofrece eey y cómo contactar (art. 10 de la LSSI). El estilo
 * «etiqueta» de la app, en el verde de la marca */
.pie {
  padding: 0 var(--espacio-xl) var(--espacio-l);
}

.enlaces-pie {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
}

.enlaces-pie li {
  white-space: nowrap;
}

.enlaces-pie li:not(:last-child)::after {
  content: '·' / '';
  margin: 0 var(--espacio-s);
  color: var(--texto-apagado);
}

/* 45 de alto: por encima del área táctil mínima de la app, 44 */
.enlaces-pie a {
  display: inline-block;
  padding: 15px 0;
}

/* ------------------------------------------------------------ portada */

/* Como la pantalla de entrar de la app: todo centrado, con el logotipo
 * arriba y los márgenes laterales de la app. Los enlaces pueden ocupar
 * todo el ancho; el texto, como mucho 400 */
.portada {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--espacio-xl);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--espacio-xxl) var(--espacio-xl);
  text-align: center;
}

.portada h1 {
  margin: 0;
  line-height: 0;
  color: var(--marca-oscuro);
}

/* El logotipo, al ancho con el que sale en la app al entrar: 130 */
.logo {
  width: 130px;
  height: auto;
}

/* El texto de la portada: algo más de aire entre líneas, como los textos
 * legales de la app, que también se leen seguidos */
.portada-texto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-m);
  max-width: 400px;
  line-height: 22px;
}

/* La frase de la aplicación: el estilo «titulo» de la app, en el verde
 * de la marca. Si no cabe en una línea, se reparte en dos de largo
 * parecido, y solo corta entre frases: dentro de cada una, los espacios
 * del HTML son de no separación ( ) */
.portada-texto .lema {
  font-size: 17px;
  line-height: 20px;
  font-weight: 600;
  color: var(--marca-oscuro);
  text-wrap: balance;
}

.portada-texto .secundario {
  color: var(--texto-secundario);
}

/* Los enlaces: el estilo «nombre» de la app, en el verde de la marca.
 * En el móvil, uno debajo de otro, con 44 de alto cada uno: el área
 * táctil mínima de la app */
.enlaces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
}

.enlaces a {
  display: inline-block;
  padding: 14px 0;
}

/* En una pantalla ancha, los cuatro en una línea, separados por un punto
 * medio que los lectores de pantalla no leen */
@media (min-width: 600px) {
  .enlaces {
    flex-direction: row;
  }

  .enlaces li {
    white-space: nowrap;
  }

  .enlaces li:not(:last-child)::after {
    content: '·' / '';
    margin: 0 var(--espacio-s);
    color: var(--texto-apagado);
  }
}

/* ------------------------------------------------------------ página de error */

/* Usa la misma estructura que la portada. Aquí el logotipo lleva a la
 * portada */
.logo-enlace {
  display: block;
  line-height: 0;
  color: var(--marca-oscuro);
}

/* El aviso: el estilo «cuerpo» de la app, como el resto del texto */
.aviso {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}

/* ------------------------------------------------------------ páginas de texto */

/* Soporte, eliminar la cuenta, los términos de uso y la política de
 * privacidad: texto seguido, alineado a la izquierda y con un ancho cómodo
 * de leer. Arriba, el logotipo, que lleva a la portada */
.texto {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--espacio-xl) var(--espacio-xl) var(--espacio-xxl);
  /* Una dirección larga sin espacios, como la de la licencia CC BY en los
   * términos, se parte si no cabe en la línea, en vez de salirse de la
   * pantalla del móvil */
  overflow-wrap: break-word;
}

.texto .logo-enlace {
  display: inline-block;
  margin-bottom: var(--espacio-xl);
}

.texto .logo {
  width: 72px;
}

/* El título de la página: el estilo «logotipo» de la app, 23 */
.texto h1 {
  margin: 0 0 var(--espacio-l);
  font-size: 23px;
  line-height: 26px;
  font-weight: 600;
}

/* Cada bloque: el estilo «titulo» de la app, 17 */
.texto h2 {
  margin: var(--espacio-xl) 0 var(--espacio-s);
  font-size: 17px;
  line-height: 20px;
  font-weight: 600;
}

/* El texto: el estilo «cuerpo», con el aire entre líneas de los textos
 * legales de la app */
.texto p,
.texto li {
  line-height: 22px;
}

.texto p + p {
  margin-top: var(--espacio-m);
}

.texto ul,
.texto ol {
  margin: 0;
  padding-left: 20px;
}

.texto li + li {
  margin-top: var(--espacio-s);
}

/* Una lista entre párrafos, y un párrafo después de una lista, con la
 * misma separación que entre dos párrafos */
.texto p + ul,
.texto p + ol,
.texto ul + p,
.texto ol + p {
  margin-top: var(--espacio-m);
}

/* La lista dentro de otra, con «–», como en la app */
.texto li > ul {
  margin-top: var(--espacio-s);
  list-style-type: '– ';
}

/* La negrita de los textos legales: el peso «fuerte» de la app, 600 */
.texto strong {
  font-weight: 600;
}

/* Dentro de una frase, el enlace va subrayado, para que se distinga
 * del texto por algo más que el color */
.texto p a,
.texto li a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La pregunta de cada pregunta frecuente: el peso «medio» de la app */
.pregunta {
  font-weight: 500;
}

/* Un párrafo que va después de una lista, con la misma separación que
 * un bloque nuevo */
.texto .aparte {
  margin-top: var(--espacio-xl);
}