/* alfredodiaz.cl · hoja de estilos
   Sitio colorido con los colores de concientización de cada tema:
     TEA: azul · TDAH: naranjo · Disautonomía: turquesa · Discapacidad invisible: amarillo girasol
     Neurodiversidad en general: arcoíris (símbolo del infinito).
   Sin animaciones. Todo texto de color cumple contraste AA en tema claro y oscuro.
   Para cambiar colores, edite las variables de :root y de los temas. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Base */
  --fondo: #FFFDF8;
  --superficie: #FFFFFF;
  --texto: #24262B;
  --texto-2: #50535C;
  --borde: #E3DFD5;
  --acento: #5B3CC4;            /* violeta: enlaces y foco */
  --acento-suave: #EEE9FB;
  /* Colores por tema: -t texto (AA), -v relleno vivo, -s fondo suave */
  --tea-t: #1F5FBF;  --tea-v: #2F7BEA;  --tea-s: #E6EEFB;
  --tdah-t: #B04E0F; --tdah-v: #F07C1E; --tdah-s: #FDEBDC;
  --dis-t: #0B6E6B;  --dis-v: #18B5AE;  --dis-s: #DCF3F1;
  --inv-t: #7A5A00;  --inv-v: #F2B705;  --inv-s: #FFF4CC;
  --arcoiris: linear-gradient(90deg, #E5484D 0%, #F2994A 20%, #F2C94C 40%, #3FB27F 60%, #2D9CDB 80%, #7B61FF 100%);
  --fuente: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --ancho: 66rem;
  --lectura: 40rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #1A1C22; --superficie: #22252D; --texto: #ECEAE4; --texto-2: #B9B7B0; --borde: #363A44;
    --acento: #B9A2FF; --acento-suave: #2C2742;
    --tea-t: #7FB0FF;  --tea-s: #1E2A40;
    --tdah-t: #FFA35C; --tdah-s: #3A2617;
    --dis-t: #4FD1C9;  --dis-s: #11302F;
    --inv-t: #FFD34D;  --inv-s: #352D10;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #1A1C22; --superficie: #22252D; --texto: #ECEAE4; --texto-2: #B9B7B0; --borde: #363A44;
  --acento: #B9A2FF; --acento-suave: #2C2742;
  --tea-t: #7FB0FF;  --tea-s: #1E2A40;
  --tdah-t: #FFA35C; --tdah-s: #3A2617;
  --dis-t: #4FD1C9;  --dis-s: #11302F;
  --inv-t: #FFD34D;  --inv-s: #352D10;
  color-scheme: dark;
}

/* Clases de color por tema: fijan --c (texto), --cv (vivo) y --cs (suave) */
.c-tea   { --c: var(--tea-t);  --cv: var(--tea-v);  --cs: var(--tea-s); }
.c-tdah  { --c: var(--tdah-t); --cv: var(--tdah-v); --cs: var(--tdah-s); }
.c-dis   { --c: var(--dis-t);  --cv: var(--dis-v);  --cs: var(--dis-s); }
.c-inv   { --c: var(--inv-t);  --cv: var(--inv-v);  --cs: var(--inv-s); }
.c-neuro { --c: var(--acento); --cv: var(--acento); --cs: var(--acento-suave); }

/* Tamaño de letra elegido por la persona */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html[data-tamano="2"] { font-size: 112.5%; }
html[data-tamano="3"] { font-size: 125%; }

*, *::before, *::after { box-sizing: border-box; }
* { animation: none !important; transition: none !important; } /* sin movimiento, siempre */

body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--fuente); font-size: 1.125rem; line-height: 1.7;
  letter-spacing: 0.005em; word-spacing: 0.04em;
}
img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--acento); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 2px; }

.saltar { position: absolute; left: 1rem; top: -5rem; background: var(--texto); color: var(--fondo); padding: 0.6rem 1rem; z-index: 10; }
.saltar:focus { top: 1rem; }

.contenedor { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
.lectura { max-width: var(--lectura); }

/* Franja arcoíris */
.arcoiris { height: 6px; background: var(--arcoiris); }

/* ---------- Encabezado ---------- */
.cabecera { border-bottom: 1px solid var(--borde); background: var(--fondo); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; flex-wrap: wrap; padding-block: 1rem; }
.nombre-sitio { font-weight: 700; font-size: 1.25rem; color: var(--texto); text-decoration: none; display: flex; align-items: center; gap: 0.6rem; }
.nombre-sitio svg { width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 0 0 1px var(--borde); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; }
.nav a { color: var(--texto); text-decoration: none; padding-block: 0.35rem; display: inline-block; border-bottom: 3px solid transparent; }
.nav a:hover { border-bottom-color: var(--borde); }
.nav a[aria-current="page"] { font-weight: 700; border-image: var(--arcoiris) 1; border-bottom-width: 3px; border-bottom-style: solid; }

/* ---------- Preferencias de lectura ---------- */
.preferencias { background: var(--superficie); border-bottom: 1px solid var(--borde); font-size: 0.95rem; }
.preferencias .contenedor { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; padding-block: 0.5rem; }
.grupo-pref { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.grupo-pref span { color: var(--texto-2); }
.preferencias button {
  font: inherit; color: var(--texto); background: transparent; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 999px; padding: 0.3rem 0.85rem; min-height: 40px; min-width: 40px;
}
.preferencias button[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento); font-weight: 700; }
.sin-js .preferencias { display: none; }

/* ---------- Tipografía ---------- */
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-top: 2.2em; }
h3 { font-size: 1.25rem; margin-top: 1.8em; }
p, ul, ol { margin: 0 0 1.1em; }
.entrada { font-size: 1.25rem; color: var(--texto-2); }

/* ---------- Portada ---------- */
.portada { padding-block: clamp(3rem, 8vw, 5rem) 2rem; }
.portada h1::after { content: ""; display: block; width: 7rem; height: 8px; border-radius: 8px; background: var(--arcoiris); margin-top: 1rem; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.etiqueta { background: var(--cs); color: var(--c); border: 2px solid var(--cv); border-radius: 999px; padding: 0.2rem 0.9rem; font-weight: 700; font-size: 0.95rem; }

.temas { list-style: none; padding: 0; margin: 1rem 0 4rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.tema {
  background: var(--cs); border-radius: 14px; padding: 1.5rem 1.5rem 1.25rem; height: 100%;
  border-top: 10px solid var(--cv); display: flex; flex-direction: column;
}
.tema.c-neuro { border-top: 0; position: relative; padding-top: calc(1.5rem + 10px); }
.tema.c-neuro::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; border-radius: 14px 14px 0 0; background: linear-gradient(90deg, var(--tea-v) 0 50%, var(--tdah-v) 50% 100%); }
.tema h2, .tema h3 { margin-top: 0; font-size: 1.4rem; }
.tema h2 a { color: var(--texto); text-decoration-color: var(--cv); text-decoration-thickness: 3px; }
.tema p { color: var(--texto); margin-bottom: 1rem; }
.tema .etiquetas { margin-top: auto; }
.tema .etiqueta { background: var(--superficie); }

/* ---------- Páginas temáticas ---------- */
.banda-tema { background: var(--cs); border-bottom: 6px solid var(--cv); }
.banda-tema.c-neuro { border-bottom: 0; position: relative; }
.banda-tema.c-neuro::after { content: ""; position: absolute; inset: auto 0 0; height: 6px; background: linear-gradient(90deg, var(--tea-v) 0 50%, var(--tdah-v) 50% 100%); }
.titulo-pagina { padding-block: clamp(2.25rem, 6vw, 3.5rem) clamp(1.75rem, 4vw, 2.5rem); }
.titulo-pagina h1 { margin-bottom: 0.4em; }
.titulo-pagina .entrada { margin-bottom: 0; color: var(--texto); }
.migas { font-size: 0.95rem; color: var(--texto-2); margin-bottom: 1rem; }
.migas a { color: var(--texto); }

.indice { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 1rem 1.5rem; margin: 1.5rem 0 1rem; }
.indice p { margin: 0 0 0.3rem; font-weight: 700; }
.indice ol { margin: 0; padding-left: 1.25rem; }
.indice li::marker { color: var(--texto-2); font-weight: 700; }

.articulo { padding-bottom: 4rem; }
.articulo section { scroll-margin-top: 1rem; }
.articulo section[class*="c-"] { border-left: 6px solid var(--cv); padding-left: 1.1rem; margin-top: 2rem; }
.articulo section[class*="c-"] > h2, .articulo section[class*="c-"] > h3 { color: var(--c); margin-top: 0; }
.articulo section.sub { border-left-width: 3px; margin-left: 0.75rem; }

.aviso { border-left: 6px solid var(--acento); background: var(--acento-suave); padding: 1rem 1.25rem; border-radius: 0 10px 10px 0; margin: 1.5rem 0; }
.aviso p:last-child { margin-bottom: 0; }

/* Marcador visible de dato pendiente: buscar "PENDIENTE" en los archivos antes de publicar */
.pendiente { display: inline; background: #FFF1B8; color: #3D3300; border: 1px dashed #8A7400; padding: 0.05em 0.4em; border-radius: 4px; }

.volver { margin-top: 3rem; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--borde); padding-block: 2rem 2.5rem; color: var(--texto-2); font-size: 0.95rem; }
.pie .contenedor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.pie p { margin: 0; }

@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }
  .preferencias .contenedor { gap: 0.4rem 1rem; }
}
@media print {
  .preferencias, .nav, .saltar { display: none; }
  body { background: #fff; color: #000; }
}

/* Presentación en primera persona (inicio) */
.presentacion { font-size: 1.3rem; line-height: 1.6; border-left: 6px solid transparent; border-image: linear-gradient(180deg, #E5484D, #F2994A, #F2C94C, #3FB27F, #2D9CDB, #7B61FF) 1; padding-left: 1rem; }

/* Lista de fuentes */
.fuentes { list-style: none; padding: 0; display: grid; gap: 1rem; }
.fuentes li { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 0.9rem 1.1rem; color: var(--texto-2); }
.fuentes a { font-weight: 700; }
.idioma { font-size: 0.9em; color: var(--texto-2); }

/* Mitos y prejuicios */
.mitos { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
.mitos li { background: var(--cs, var(--acento-suave)); border-radius: 10px; padding: 0.9rem 1.1rem; }
.mitos p { margin: 0; }
.mito { font-weight: 700; color: var(--c, var(--texto)); margin-bottom: 0.35rem !important; }
.articulo section ul:not(.mitos):not(.fuentes) { padding-left: 1.25rem; }
.articulo section ul:not(.mitos):not(.fuentes) li { margin-bottom: 0.45rem; }
.articulo section ul:not(.mitos):not(.fuentes) li::marker { color: var(--cv, var(--acento)); }