/* Fredoka: solo los archivos latin, que incluyen á, é, ñ, ü, ¿, ¡ */
@font-face { font-family: "Fredoka"; font-weight: 400; font-display: swap; src: url("/fonts/fredoka-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url("/fonts/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("/fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url("/fonts/fredoka-latin-700-normal.woff2") format("woff2"); }

:root {
  --color-rosa: #ff4f9a;
  --color-lila: #b58cff;
  --color-rosa-suave: #ffc2dc;
  --color-morado-oscuro: #2b1a3a;
  --color-fondo: #fff5fa;

  /* Colores de uso: son los que cambian con el tema */
  --color-pagina: var(--color-fondo);
  --color-texto: var(--color-morado-oscuro);
  --color-texto-suave: rgb(43 26 58 / 0.7);
  --color-separador: rgb(43 26 58 / 0.1);
  --color-hover: rgb(43 26 58 / 0.08);

  --fuente: "Fredoka", system-ui, sans-serif;

  color-scheme: light;
}

:root[data-tema="oscuro"] {
  --color-pagina: var(--color-morado-oscuro);
  --color-texto: var(--color-fondo);
  --color-texto-suave: rgb(255 245 250 / 0.7);
  --color-separador: rgb(255 245 250 / 0.12);
  --color-hover: rgb(255 245 250 / 0.08);

  color-scheme: dark;
}

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  font-family: var(--fuente);
  color: var(--color-texto);
  background: var(--color-pagina);
}

/* El contenido ocupa el espacio libre: en páginas cortas, el pie queda abajo */
main {
  flex: 1;
}

.container {
  width: min(1160px, 100% - 40px);
  margin-inline: auto;
}

:focus-visible {
  outline: 2px solid var(--color-rosa);
  outline-offset: 2px;
}

/* Botón redondo con icono (Header, menú lateral, página en construcción) */
.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-texto);
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--color-hover);
}

.icon-btn svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* Cambios según el tema: oculta la versión que no toca */
:root:not([data-tema="oscuro"]) .solo-oscuro,
[data-tema="oscuro"] .solo-claro {
  display: none !important;
}