/* ════════════════════════════════════════════════════════════════════════
   base.css — colores, reinicio y tipografía.
   Es lo único que hay que tocar para cambiar la paleta de todo el sitio.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#fdf6f7; --ink:#241a20; --muted:#7a6670;
  --brand:#b8386b; --brand-ink:#fff; --brand-suave:#fbe8ef;
  --acento:#2c6f7a; --acento-suave:#e2f1f2;
  --line:#eddde3; --card:#fff; --sombra:0 1px 2px rgba(36,26,32,.06);
  --radio:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#161016; --ink:#f3eaee; --muted:#a8949e;
    --brand:#f291b4; --brand-ink:#1c1014; --brand-suave:#2c1a22;
    --acento:#6fc9cf; --acento-suave:#132628;
    --line:#2f2028; --card:#1f1620; --sombra:none;
  }
}

*{box-sizing:border-box}

/* `hidden` tiene que ganar SIEMPRE, y hace falta el !important.
   El navegador trae `[hidden]{display:none}` en su hoja propia, pero cualquier
   regla de autor le gana — así que `.btn{display:inline-block}` hacía que un
   botón con `hidden` se siguiera viendo. Pasaba con «Borrar mis datos», que
   salía en un perfil recién creado sin nada que borrar, y con el «Quitar» de
   los subidores antes de elegir ninguna imagen. Comprobado en el navegador:
   `hidden` valía true y `display` valía block igualmente. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.2; margin:0 0 .4em}
h1{font-size:clamp(1.9rem,5vw,2.6rem); letter-spacing:-.02em}
h2{font-size:1.35rem}
h3{font-size:1.05rem}
p{margin:0 0 1em}
a{color:var(--brand)}
small,.pequeno{font-size:.85rem; color:var(--muted)}

/* el ancho de página, compartido por todas las vistas */
.wrap{max-width:60rem; margin:0 auto; padding:0 1.25rem}
/* variante para una columna de lectura: el formulario del alta */
.wrap.estrecho{max-width:38rem}

/* accesible pero invisible: etiquetas que solo lee un lector de pantalla */
.solo-lectores{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* Empuja un elemento al final de su fila flex. La usan los km de la tarjeta
   y el globo de la lista de conversaciones; estaba puesta a mano con
   `style.marginLeft` desde el JavaScript, que es estilo escrito en el sitio
   equivocado. */
.derecha{margin-left:auto}

/* foco visible de verdad: se navega mucho con teclado en los formularios */
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}


/* La línea que se ve mientras la página le pregunta al servidor quién eres y
   qué catálogos hay (ver `main.js`). Vive en 00-base y no en una vista porque
   no es de ninguna: se enseña antes de que haya vista. */
.cargando { padding: 3rem 0; color: var(--muted); }