/* ============================================================================
   Bloopy · tokens.css (dirección A: crema, rosa Bloop, lavanda, noche teal)
   Única fuente de verdad del sistema visual. Se carga después de las hojas
   heredadas (styles, liquid-glass, editor, auth, repaso) y antes de system.css.
   Define el sistema nuevo (--ap-*) y reasigna TODOS los nombres heredados
   (--atlas-*, --bg, --ink, --blue, --type-*, --radius…, --studio-*, --ma-*)
   para que ninguna hoja antigua conserve una paleta, escala o radio propios.
   Regla: ningún otro archivo declara colores, tamaños de fuente base ni radios
   nuevos; consume estos tokens.
   ========================================================================== */

/* ---- Tipografía (servida desde assets/fonts, la CSP solo admite 'self') ---- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("./assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("./assets/fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("./assets/fonts/figtree-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("./assets/fonts/figtree-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Sistema (independiente del tema) ---- */
:root {
  /* Fuentes */
  --ap-font: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ap-font-display: "Bricolage Grotesque", "Figtree", "Segoe UI", system-ui, sans-serif;
  --ap-font-hand: "Caveat", "Segoe Print", cursive;
  --ap-font-mono: Consolas, "Cascadia Mono", "Courier New", monospace;

  /* Escala tipográfica (7 pasos + métrica). Los pesos van con el rol. */
  --ap-text-label: 12px;      /* etiquetas en mayúsculas, kbd */
  --ap-text-meta: 13px;       /* metadatos, notas */
  --ap-text-ui: 14px;         /* controles, navegación */
  --ap-text-body: 16px;       /* párrafos */
  --ap-text-subtitle: 18px;   /* h3, títulos de fila */
  --ap-text-section: 24px;    /* h2 de sección */
  --ap-text-page: 32px;       /* h1 de vista */
  --ap-text-display: clamp(34px, 3.2vw, 44px); /* portadas, Inicio */
  --ap-text-metric: clamp(32px, 3vw, 40px);
  --ap-weight-body: 450;
  --ap-weight-ui: 560;
  --ap-weight-strong: 650;
  --ap-weight-title: 780;
  --ap-tracking-title: -0.03em;
  --ap-tracking-label: 0.09em;
  --ap-leading-tight: 1.12;
  --ap-leading-ui: 1.35;
  --ap-leading-body: 1.55;

  /* Espaciado en rejilla de 8 px (4 solo para ajustes ópticos) */
  --ap-space-1: 4px;
  --ap-space-2: 8px;
  --ap-space-3: 12px;
  --ap-space-4: 16px;
  --ap-space-5: 24px;
  --ap-space-6: 32px;
  --ap-space-7: 48px;
  --ap-space-8: 64px;
  --ap-inset: var(--ap-space-6);          /* margen interior de tarjetas grandes y portadas */
  --ap-inset-card: var(--ap-space-5);     /* margen interior de paneles */
  --ap-nav-inset: 16px;                   /* margen izquierdo único de la barra lateral */
  --ap-nav-icon: 20px;                    /* columna de iconos de la barra lateral */
  --ap-control: 40px;                     /* altura estándar de control */
  --ap-control-round: 44px;               /* monograma, menú, acciones redondas */
  --ap-gutter: clamp(20px, 3vw, 40px);

  /* Radios: 4 valores + píldora */
  --ap-radius-xs: 8px;
  --ap-radius-sm: 12px;
  --ap-radius-md: 16px;
  --ap-radius-lg: 24px;
  --ap-radius-pill: 999px;

  /* Movimiento: 3 duraciones, 2 curvas */
  --ap-dur-fast: 120ms;
  --ap-dur-base: 200ms;
  --ap-dur-slow: 360ms;
  --ap-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ap-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* Marca (dirección A, igual en los dos temas) */
  --ap-brand: #ff4d8b;        /* rosa Bloop: rellenos y detalles; el texto encima, siempre oscuro */
  --ap-on-brand: #1f0a13;
  --ap-brand-hi: #ff7aa8;      /* botón principal: luz arriba… */
  --ap-brand-lo: #ef3a7c;      /* …y fondo abajo */
  --ap-brand-sheen: rgba(255, 255, 255, 0.55);
  --ap-brand-inner: rgba(120, 0, 50, 0.4);
  --ap-brand-glow: rgba(255, 77, 139, 0.75);
  --ap-brand-glow-strong: rgba(255, 77, 139, 0.85);
  --ap-bloop-shadow: rgba(200, 33, 95, 0.22);   /* sombra rosada bajo Bloop */
  --ap-3d-light: #ffffff;      /* Bloop 3D de la landing: luz principal y paneles del estudio */
  --ap-3d-sky: #fff4ea;        /* luz hemisférica: cielo… */
  --ap-3d-ground: #3a2230;     /* …y suelo */
  --ap-paper-dark: #0b2123;    /* hoja del documento en tema oscuro */
  --ap-inset-shade: rgba(90, 40, 60, 0.1);      /* hundido interior de botones redondos */
  --ap-lav: #b8a4ed;          /* lavanda */
  --ap-peach: #ffb084;        /* melocotón */
  --ap-night: #071c1e;        /* noche teal */

  /* Capas */
  /* Capas (de abajo arriba). Los diálogos usan la capa superior del navegador
     (<dialog>), así que no necesitan z-index. */
  --ap-z-progress: 40;  /* barra de lectura */
  --ap-z-topbar: 45;
  --ap-z-shell: 50;     /* barra lateral */
  --ap-z-scrim: 55;     /* velo del menú en móvil */
  /* Landing (rosa fuerte + tinta), igual en los dos temas. La app aún no los usa. */
  --lp-rosa: #ff2d7a;
  --lp-rosa-claro: #ffb3cf;
  --lp-tinta: #1b0b13;
  --lp-papel: #fbf3f1;
  --lp-papel-2: #f3e5e2;
  --lp-blanco: #ffffff;
  /* Noche de la landing: la franja de tinta y el tema oscuro, sin el teal de la app */
  --lp-noche-2: #24111a;
  --lp-noche-ink: #fbeff2;
  --lp-noche-ink-2: #e2cfd7;
  --lp-noche-muted: #d0bac5;
  --lp-noche-line: rgba(251, 239, 242, 0.12);
  --lp-noche-line-strong: rgba(251, 239, 242, 0.24);
  --lp-noche-glass-1: rgba(58, 28, 41, 0.55);
  --lp-noche-glass-2: rgba(58, 28, 41, 0.72);
  --lp-noche-glass-3: rgba(66, 33, 47, 0.94);
  --lp-noche-edge: rgba(255, 255, 255, 0.12);
  --lp-noche-accent: #ff7aa8;
  --lp-noche-accent-deep: #ffa3c2;
  --lp-noche-accent-soft: #4a1830;
  --lp-noche-success: #86d9ae;
  --ap-z-overlay: 60;   /* menú abierto en móvil, chip de cuenta flotante */
  --ap-z-toast: 180;
  --ap-z-consent: 190;  /* banner de cookies */
  --ap-z-skip: 200;     /* «Saltar al contenido» */
}

/* ---- Tema claro (crema, rosa Bloop, lavanda y melocotón) ---- */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --ap-bg: #fcf7ea;
  --ap-bg-deep: #f3ead6;
  --ap-ink: #1f1419;
  --ap-ink-2: #4b3d45;
  --ap-muted: #6e6068;
  --ap-line: rgba(31, 20, 25, 0.11);
  --ap-line-strong: rgba(31, 20, 25, 0.22);
  --ap-accent: #c8215f;
  --ap-accent-deep: #a3174c;
  --ap-accent-soft: #ffdbe8;
  --ap-accent-tint: rgba(255, 77, 139, 0.12);
  --ap-on-accent: #ffffff;
  --ap-sand: #ddd2f7;
  --ap-sand-deep: #b8a4ed;
  --ap-success: #276b4a;
  --ap-warning: #95560f;
  --ap-danger: #b42318;
  /* Vidrio: tres niveles + borde luminoso */
  --ap-glass-1: rgba(255, 252, 246, 0.46);
  --ap-glass-2: rgba(255, 252, 246, 0.66);
  --ap-glass-3: rgba(255, 252, 246, 0.88);
  --ap-glass-edge: rgba(255, 255, 255, 0.92);
  --ap-glass-blur: blur(18px) saturate(160%);
  --ap-reflection: rgba(255, 255, 255, 0.82);
  /* Sombras: profundidad suave con tinte rosado, nunca negro puro */
  --ap-shadow-1: 0 2px 6px rgba(90, 40, 60, 0.07);
  --ap-shadow-2: 0 8px 22px rgba(90, 40, 60, 0.09), 0 1px 3px rgba(90, 40, 60, 0.05);
  --ap-shadow-3: 0 18px 44px rgba(90, 40, 60, 0.14), 0 2px 8px rgba(90, 40, 60, 0.06);
  --ap-selection: #ffd0e0;
  /* Tintes de espacio: fondo pastel, texto en tinta, monograma intenso */
  --ap-tint-rosa-bg: #ffd9e6;      --ap-tint-rosa-mono: #b01c55;
  --ap-tint-lavanda-bg: #e6defb;   --ap-tint-lavanda-mono: #5540a8;
  --ap-tint-melocoton-bg: #ffe0cc; --ap-tint-melocoton-mono: #9a4119;
  --ap-tint-menta-bg: #d4f0e3;     --ap-tint-menta-mono: #1c6446;
  --ap-tint-teal-bg: #d3ebeb;      --ap-tint-teal-mono: #145558;
  /* Vidrio líquido de la landing: brillo del borde y reflejo diagonal */
  --ap-glass-rim: rgba(255, 255, 255, 0.95);
  --ap-glass-rim-tint: rgba(255, 77, 139, 0.45);
  --ap-glass-sheen: rgba(255, 255, 255, 0.55);
  --ap-glass-sheen-soft: rgba(255, 255, 255, 0.08);
  --ap-tint-ink: var(--ap-ink);
}

/* ---- Tema oscuro (noche teal con rosa Bloop) ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ap-bg: #071c1e;
  --ap-bg-deep: #051517;
  --ap-ink: #fbeff2;
  --ap-ink-2: #d9c9d0;
  --ap-muted: #a9bdb9;
  --ap-line: rgba(251, 239, 242, 0.12);
  --ap-line-strong: rgba(251, 239, 242, 0.24);
  --ap-accent: #ff7aa8;
  --ap-accent-deep: #ffa3c2;
  --ap-accent-soft: #3a1f2d;
  --ap-accent-tint: rgba(255, 122, 168, 0.14);
  --ap-on-accent: #1f0a13;
  --ap-sand: #3b3160;
  --ap-sand-deep: #5a4b8f;
  --ap-success: #86d9ae;
  --ap-warning: #f4c27f;
  --ap-danger: #ff9a8a;
  --ap-glass-1: rgba(18, 48, 51, 0.5);
  --ap-glass-2: rgba(18, 48, 51, 0.68);
  --ap-glass-3: rgba(22, 56, 59, 0.92);
  --ap-glass-edge: rgba(255, 255, 255, 0.12);
  --ap-glass-blur: blur(18px) saturate(150%);
  --ap-reflection: rgba(255, 228, 238, 0.12);
  --ap-shadow-1: 0 2px 6px rgba(0, 0, 0, 0.22);
  --ap-shadow-2: 0 8px 22px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --ap-shadow-3: 0 18px 44px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.24);
  --ap-selection: #5a2440;
  /* Tintes de espacio en oscuro: fondo profundo, monograma claro */
  --ap-tint-rosa-bg: #4a1830;      --ap-tint-rosa-mono: #ffa3c6;
  --ap-tint-lavanda-bg: #2d2552;   --ap-tint-lavanda-mono: #cbbcf7;
  --ap-tint-melocoton-bg: #4a2716; --ap-tint-melocoton-mono: #ffbd94;
  --ap-tint-menta-bg: #143a2d;     --ap-tint-menta-mono: #93dfbc;
  --ap-tint-teal-bg: #0f3638;      --ap-tint-teal-mono: #93d6d6;
  /* Vidrio líquido de la landing en oscuro: borde más tenue */
  --ap-glass-rim: rgba(255, 255, 255, 0.34);
  --ap-glass-rim-tint: rgba(255, 122, 168, 0.5);
  --ap-glass-sheen: rgba(255, 255, 255, 0.14);
  --ap-glass-sheen-soft: rgba(255, 255, 255, 0.02);
  --ap-tint-ink: var(--ap-ink);
}

/* Páginas públicas (landing, legales) no llevan data-theme: siguen al sistema.
   La app siempre lo lleva, así que este bloque nunca la afecta. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --ap-bg: #071c1e;
    --ap-bg-deep: #051517;
    --ap-ink: #fbeff2;
    --ap-ink-2: #d9c9d0;
    --ap-muted: #a9bdb9;
    --ap-line: rgba(251, 239, 242, 0.12);
    --ap-line-strong: rgba(251, 239, 242, 0.24);
    --ap-accent: #ff7aa8;
    --ap-accent-deep: #ffa3c2;
    --ap-accent-soft: #3a1f2d;
    --ap-accent-tint: rgba(255, 122, 168, 0.14);
    --ap-on-accent: #1f0a13;
    --ap-sand: #3b3160;
    --ap-sand-deep: #5a4b8f;
    --ap-success: #86d9ae;
    --ap-warning: #f4c27f;
    --ap-danger: #ff9a8a;
    --ap-glass-1: rgba(18, 48, 51, 0.5);
    --ap-glass-2: rgba(18, 48, 51, 0.68);
    --ap-glass-3: rgba(22, 56, 59, 0.92);
    --ap-glass-edge: rgba(255, 255, 255, 0.12);
    --ap-glass-blur: blur(18px) saturate(150%);
    --ap-reflection: rgba(255, 228, 238, 0.12);
    --ap-shadow-1: 0 2px 6px rgba(0, 0, 0, 0.22);
    --ap-shadow-2: 0 8px 22px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    --ap-shadow-3: 0 18px 44px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.24);
    --ap-selection: #5a2440;
    /* Tintes de espacio en oscuro: fondo profundo, monograma claro */
    --ap-tint-rosa-bg: #4a1830;      --ap-tint-rosa-mono: #ffa3c6;
    --ap-tint-lavanda-bg: #2d2552;   --ap-tint-lavanda-mono: #cbbcf7;
    --ap-tint-melocoton-bg: #4a2716; --ap-tint-melocoton-mono: #ffbd94;
    --ap-tint-menta-bg: #143a2d;     --ap-tint-menta-mono: #93dfbc;
    --ap-tint-teal-bg: #0f3638;      --ap-tint-teal-mono: #93d6d6;
    /* Vidrio líquido de la landing en oscuro: borde más tenue */
    --ap-glass-rim: rgba(255, 255, 255, 0.34);
    --ap-glass-rim-tint: rgba(255, 122, 168, 0.5);
    --ap-glass-sheen: rgba(255, 255, 255, 0.14);
    --ap-glass-sheen-soft: rgba(255, 255, 255, 0.02);
    --ap-tint-ink: var(--ap-ink);
  }
}

/* ============================================================================
   Reasignación de nombres heredados. Todo lo que las hojas antiguas leen
   apunta aquí. Válido en ambos temas porque solo referencia tokens --ap-*.
   ========================================================================== */
:root,
:root[data-theme="light"],
:root[data-theme="dark"],
:root[data-theme] {
  --font-interface: var(--ap-font);

  /* styles.css */
  --type-label: var(--ap-text-label);
  --type-meta: var(--ap-text-meta);
  --type-ui: var(--ap-text-ui);
  --type-body: var(--ap-text-body);
  --type-subtitle: var(--ap-text-subtitle);
  --type-title: var(--ap-text-section);
  --type-section-display: var(--ap-text-display);
  --type-headline: var(--ap-text-page);
  --type-display: var(--ap-text-page);
  --type-display-mobile: 28px;
  --type-metric: var(--ap-text-metric);
  --type-metric-large: var(--ap-text-metric);
  --type-paper-heading: clamp(32px, 4vw, 44px);
  --type-reading: 16px;
  --leading-label: var(--ap-leading-ui);
  --leading-body: var(--ap-leading-body);
  --leading-reading: 1.75;

  --bg: var(--ap-bg);
  --surface: var(--ap-glass-2);
  --surface-soft: var(--ap-bg-deep);
  --surface-strong: var(--ap-glass-3);
  --ink: var(--ap-ink);
  --muted: var(--ap-muted);
  --muted-strong: var(--ap-ink-2);
  --line: var(--ap-line);
  --line-strong: var(--ap-line-strong);
  --blue: var(--ap-accent);
  --blue-deep: var(--ap-accent-deep);
  --violet: var(--ap-sand-deep);
  --cyan: var(--ap-accent);
  --action-start: var(--ap-accent-deep);
  --action-end: var(--ap-accent);
  --action: var(--ap-accent);
  --success: var(--ap-success);
  --warning: var(--ap-warning);
  --danger: var(--ap-danger);
  --danger-solid: var(--ap-danger);
  --on-accent: var(--ap-on-accent);
  --on-action: var(--ap-on-accent);
  --on-danger: #ffffff;
  --accent-soft: var(--ap-accent-tint);
  --danger-soft: color-mix(in srgb, var(--ap-danger) 10%, transparent);
  --text: var(--ap-ink);
  --shadow: var(--ap-shadow-2);
  --shadow-small: var(--ap-shadow-1);
  --radius: var(--ap-radius-md);
  --radius-small: var(--ap-radius-sm);
  --radius-overlay: var(--ap-radius-lg);
  --sidebar-width: 288px;
  --topbar-height: 64px;
  --page-gutter: var(--ap-gutter);

  /* liquid-glass.css */
  --atlas-bg: var(--ap-bg);
  --atlas-bg-deep: var(--ap-bg-deep);
  --atlas-ink: var(--ap-ink);
  --atlas-muted: var(--ap-muted);
  --atlas-cobalt: var(--ap-accent);
  --atlas-cobalt-deep: var(--ap-accent-deep);
  --atlas-violet: var(--ap-sand-deep);
  --atlas-action-start: var(--ap-accent-deep);
  --atlas-action-end: var(--ap-accent);
  --atlas-glass: var(--ap-glass-2);
  --atlas-glass-quiet: var(--ap-glass-1);
  --atlas-glass-strong: var(--ap-glass-3);
  --atlas-glass-edge: var(--ap-glass-edge);
  --atlas-reflection: var(--ap-reflection);
  --atlas-hairline: var(--ap-line);
  --atlas-hairline-strong: var(--ap-line-strong);
  --atlas-depth: var(--ap-shadow-3);
  --atlas-depth-soft: var(--ap-shadow-2);
  --atlas-depth-control: var(--ap-shadow-1);
  --atlas-radius-shell: var(--ap-radius-lg);
  --atlas-radius-panel: var(--ap-radius-md);
  --atlas-radius-control: var(--ap-radius-sm);
  --atlas-blur: var(--ap-glass-blur);
  --atlas-edge: var(--ap-glass-edge);
  --glass-surface: var(--ap-glass-2);
  --glass-surface-strong: var(--ap-glass-3);
  --glass-line: var(--ap-glass-edge);
  --glass-shadow: var(--ap-shadow-3);

  /* studio.css (retirada; sus nombres siguen vivos en app.js/repaso) */
  --studio-mist: var(--ap-accent-soft);
  --studio-pink: var(--ap-sand);
  --studio-blue: var(--ap-accent-soft);
  --studio-peach: var(--ap-sand);
  --studio-glint: var(--ap-reflection);
  --studio-shadow: rgba(90, 40, 60, 0.16);
  --studio-tint: var(--ap-accent-tint);

  /* auth.css */
  --ma-bg: var(--ap-bg);
  --ma-surface: var(--ap-glass-3);
  --ma-text: var(--ap-ink);
  --ma-muted: var(--ap-muted);
  --ma-line: var(--ap-line);
  --ma-accent: var(--ap-accent);
  --ma-accent-ink: var(--ap-on-accent);
  --ma-danger: var(--ap-danger);
  --ma-danger-bg: color-mix(in srgb, var(--ap-danger) 12%, transparent);
  --ma-note-bg: color-mix(in srgb, var(--ap-peach) 26%, transparent);

  /* Portadas con foto */
  --cover-line: rgba(255, 255, 255, 0.38);
  --cover-glass: rgba(255, 255, 255, 0.14);
  --cover-glass-hover: rgba(255, 255, 255, 0.22);
  --on-cover: #ffffff;
  --cover-button-surface: rgba(255, 255, 255, 0.92);
  --cover-button-ink: var(--ap-accent-deep);
  --overlay-scrim: rgba(24, 12, 18, 0.5);
  --cover-veil-top: rgba(31, 10, 19, 0.06);
  --cover-veil-mid: rgba(31, 10, 19, 0.2);
  --cover-veil-bottom: rgba(31, 10, 19, 0.6);
  --cover-text-shadow: rgba(0, 0, 0, 0.25);
}

/* Fondo y selección los fija el sistema, no cada hoja. */
html { background: var(--ap-bg); }
body,
:root[data-theme="dark"] body {
  font-family: var(--ap-font);
  font-weight: var(--ap-weight-body);
  color: var(--ap-ink);
  background:
    radial-gradient(ellipse 60% 50% at 96% 0%, var(--ap-accent-tint), transparent 70%),
    radial-gradient(ellipse 46% 30% at 0% 76%, color-mix(in srgb, var(--ap-sand) 45%, transparent), transparent 70%),  /* se apaga antes del borde de la capa: sin corte al hacer scroll */
    var(--ap-bg);
  /* Sin background-attachment: fixed: penaliza el scroll y falla en iOS. */
  background-repeat: no-repeat;
  background-size: 100% 100vh, 100% 100vh, auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before { content: none; }
/* Ambiente: esferas de vidrio muy desenfocadas detrás de toda la app. Capa fija
   propia (no background-attachment), igual que el fondo de usuario, que la
   sustituye. El body se vuelve transparente para dejarla ver (las dos variantes
   ganan a `body` y a `:root[data-theme="dark"] body`).
   ambiente-claro/oscuro.webp: escenas de esferas de Flow sin Bloop, 960x536,
   desenfoque de radio 28, WebP calidad 70. */
body:not(.has-wallpaper),
:root[data-theme="dark"] body:not(.has-wallpaper) { background: transparent; }
body:not(.has-wallpaper)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("./assets/art/ambiente-claro.webp") center / cover no-repeat, var(--ap-bg);
}
:root[data-theme="dark"] body:not(.has-wallpaper)::before { background: url("./assets/art/ambiente-oscuro.webp") center / cover no-repeat, var(--ap-bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body:not(.has-wallpaper)::before { background: url("./assets/art/ambiente-oscuro.webp") center / cover no-repeat, var(--ap-bg); }
}
::selection { background: var(--ap-selection); color: var(--ap-ink); }
input, textarea, [contenteditable] { caret-color: var(--ap-accent); }

/* ============================================================================
   Fondo de pantalla personalizado
   ----------------------------------------------------------------------------
   Dos reglas que antes fallaban:

   1) La imagen se pintaba en el `background` del `body` con
      `background-attachment: fixed`. En tema oscuro la regla
      `:root[data-theme="dark"] body` de esta hoja (más específica) reimponía
      `background-size: 100% 100vh` y `attachment: scroll`, así que la foto se
      cortaba a la altura de la primera pantalla y por debajo asomaba `--ap-bg`
      (el negro que se veía al bajar). Ahora la imagen vive en una capa fija
      propia (`body::before`), que cubre siempre la ventana entera en los dos
      temas y no depende de `background-attachment` (penaliza el scroll y falla
      en iOS).

   2) El texto no se adaptaba a la foto. Sobre la imagen va un velo del color
      del tema y, mientras hay fondo, el vidrio de paneles, barra lateral y
      superior sube de opacidad. Así el texto conserva su contraste habitual
      sea cual sea la foto, y la foto se sigue viendo.

   El velo es el más ligero que mantiene el texto principal en 4,5:1 con la
   peor foto posible (negra en claro, blanca en oscuro). Con foto, el texto
   secundario pasa a la tinta intermedia en toda la pantalla (también dentro
   de los paneles, que heredan el token): con la apagada se perdía el que va
   directamente sobre la foto. Ese texto no llega a 4,5:1 en el peor caso
   (2,6:1 en claro, 3,6:1 en oscuro), pero no queda por debajo de lo que
   tenía con el velo anterior (2,2:1 y 3,6:1). Lo comprueba tests/wallpaper-veil.mjs.
   ========================================================================== */
body.has-wallpaper {
  --wallpaper-veil: rgba(252, 247, 234, 0.52);
  --wallpaper-softness: blur(14px) saturate(96%);
  --ap-muted: var(--ap-ink-2);
  --muted: var(--ap-ink-2);
  --atlas-muted: var(--ap-ink-2);
  --ma-muted: var(--ap-ink-2);
  /* Vidrio más sólido: el texto nunca compite con la fotografía. */
  --ap-glass-1: rgba(255, 252, 246, 0.66);
  --ap-glass-2: rgba(255, 252, 246, 0.87);
  --ap-glass-3: rgba(255, 252, 246, 0.95);
  --ap-glass-edge: rgba(255, 255, 255, 0.94);
}

:root[data-theme="dark"] body.has-wallpaper {
  --wallpaper-veil: rgba(7, 28, 30, 0.66);
  --ap-glass-1: rgba(14, 40, 43, 0.74);
  --ap-glass-2: rgba(14, 40, 43, 0.9);
  --ap-glass-3: rgba(18, 48, 51, 0.96);
  --ap-glass-edge: rgba(255, 255, 255, 0.14);
}

/* El fondo del body se aparta para dejar ver la capa de la foto. Las dos
   variantes ganan por especificidad a `body` y a `:root[data-theme="dark"] body`. */
body.has-wallpaper,
:root[data-theme="dark"] body.has-wallpaper {
  background: transparent;
}

body.has-wallpaper::before,
:root[data-theme="dark"] body.has-wallpaper::before {
  position: fixed;
  z-index: -1;
  /* Se sale 70 px por cada lado: el desenfoque no puede dejar un borde
     transparente contra el filo de la ventana. */
  inset: -70px;
  width: auto;
  height: auto;
  border-radius: 0;
  background-image: linear-gradient(var(--wallpaper-veil), var(--wallpaper-veil)), var(--app-wallpaper);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  content: "";
  opacity: 1;
  /* El enemigo del texto no es el brillo de la foto, es su contraste local: una
     letra a caballo entre una zona clara y una oscura deja de leerse. El
     desenfoque lo elimina y la foto se sigue reconociendo. */
  filter: var(--wallpaper-softness);
  pointer-events: none;
}