/*
 * Nosotros — estilos propios, mobile-first, sin frameworks.
 * Base visual: DESIGN.md (luz cálida, serif editorial, superficies pastel, acento Ember solo en contorno).
 * Ajustes de accesibilidad respecto a DESIGN.md (decisión documentada en docs/decisiones.md):
 *   - El texto en Ember usa --ember-text (contraste AA); #ff5924 queda para bordes y adornos.
 *   - Los enlaces usan un cobalto más oscuro (#0f5bb5) para cumplir AA también sobre las tarjetas.
 *   - Los campos de formulario usan --field-border (≥ 3:1) en lugar de Mist, que es solo para divisores.
 * Zonas de datos: público = pergamino, compartido = azul pizarra, privado = salvia.
 */

/* ---------- Fuentes locales (SIL OFL 1.1, licencias en assets/fonts/licencias) ---------- */
@font-face {
    font-family: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/inter-latin-wght.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/nunito-latin-wght.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
    color-scheme: light;

    --canvas: #f9fafc;
    --surface: #ffffff;
    --blush: #fff1f1;
    --mist: #e2e2e2;
    --card-blue: #e5eaf2;
    --card-parchment: #f3f0e7;
    --card-sage: #dde9d3;

    --ink: #000000;
    --heading: #3a475a;
    --text: #4a5465;
    --muted: #5f6276;
    --slate: #748297;
    --nav: #24272d;
    --ash: #afb5c1;

    --ember: #ff5924;
    --ember-text: #b5390c;
    --ember-soft: rgba(255, 89, 36, 0.08);
    --link: #0f5bb5;
    --field-border: #7f8899;
    --hero-eyebrow: #8f2a06;

    --danger: #b42318;
    --danger-bg: #fdecea;
    --success: #2f6b3a;
    --success-bg: #e6f2e2;
    --warning: #8a5300;
    --warning-bg: #fdf3e1;
    --info-bg: #e5eaf2;

    --hero-bloom: linear-gradient(180deg, #ff5924 0%, #ffc0b4 21%, #ffffff 37%, #fff2f2 100%);
    --hero-glow: rgba(255, 167, 129, 0.44) 0 57px 60px -54px, rgba(255, 128, 36, 0.27) 0 -27px 50px -40px;
    --shadow-sm: rgba(140, 142, 151, 0.32) 0 4px 7px -4px;
    --midnight: linear-gradient(180deg, #000000 0%, #2f343c 100%);

    --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-ui: 'Nunito', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --text-caption: 0.875rem;
    --text-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
    --text-sub: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
    --text-heading-sm: clamp(1.625rem, 1.4rem + 0.9vw, 2rem);
    --text-heading: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
    --text-heading-lg: clamp(2.75rem, 1.8rem + 4.2vw, 5rem);
    --text-display: clamp(3.25rem, 1.6rem + 8vw, 8.75rem);

    --radius-sm: 12px;
    --radius: 16px;
    --radius-tag: 36px;
    --radius-pill: 100px;

    --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
    --section-gap: clamp(4rem, 2.5rem + 6vw, 7.5rem);
    --card-pad: clamp(1.5rem, 1rem + 2.5vw, 3.125rem);
    --gap: 1.25rem;
    --page-max: 1440px;
    --measure: 68ch;

    --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
    --focus: 3px solid var(--ember-text);
}

/* Modo oscuro: preferencia del sistema sin JS, o elección guardada (data-theme). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --canvas: #101216;
        --surface: #181b21;
        --blush: #1c1618;
        --mist: #2c3038;
        --card-blue: #1b2230;
        --card-parchment: #24211a;
        --card-sage: #1b2419;
        --ink: #f5f5f7;
        --heading: #dfe4ec;
        --text: #b9c0cc;
        --muted: #9aa0ae;
        --slate: #8c97a8;
        --nav: #eceef2;
        --ash: #6b7280;
        --ember: #ff7a4d;
        --ember-text: #ff9a76;
        --ember-soft: rgba(255, 122, 77, 0.12);
        --link: #7ab2ff;
        --field-border: #717a8b;
        --hero-eyebrow: #ff9a76;
        --danger: #ff9a8f;
        --danger-bg: #3a1714;
        --success: #9fd4a6;
        --success-bg: #16281a;
        --warning: #f5c26b;
        --warning-bg: #2e2312;
        --info-bg: #1b2230;
        --hero-bloom: radial-gradient(120% 70% at 50% 0%, rgba(255, 89, 36, 0.38) 0%, rgba(255, 89, 36, 0.08) 45%, transparent 70%), #101216;
        --hero-glow: rgba(255, 122, 77, 0.22) 0 40px 60px -48px;
        --shadow-sm: rgba(0, 0, 0, 0.5) 0 4px 7px -4px;
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #101216;
    --surface: #181b21;
    --blush: #1c1618;
    --mist: #2c3038;
    --card-blue: #1b2230;
    --card-parchment: #24211a;
    --card-sage: #1b2419;
    --ink: #f5f5f7;
    --heading: #dfe4ec;
    --text: #b9c0cc;
    --muted: #9aa0ae;
    --slate: #8c97a8;
    --nav: #eceef2;
    --ash: #6b7280;
    --ember: #ff7a4d;
    --ember-text: #ff9a76;
    --ember-soft: rgba(255, 122, 77, 0.12);
    --link: #7ab2ff;
    --field-border: #717a8b;
    --hero-eyebrow: #ff9a76;
    --danger: #ff9a8f;
    --danger-bg: #3a1714;
    --success: #9fd4a6;
    --success-bg: #16281a;
    --warning: #f5c26b;
    --warning-bg: #2e2312;
    --info-bg: #1b2230;
    --hero-bloom: radial-gradient(120% 70% at 50% 0%, rgba(255, 89, 36, 0.38) 0%, rgba(255, 89, 36, 0.08) 45%, transparent 70%), #101216;
    --hero-glow: rgba(255, 122, 77, 0.22) 0 40px 60px -48px;
    --shadow-sm: rgba(0, 0, 0, 0.5) 0 4px 7px -4px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--canvas);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.67;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

main { flex: 1 0 auto; }
main:focus { outline: none; }

h1, h2, h3, h4 {
    margin: 0 0 0.5em;
    color: var(--heading);
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

img, svg { display: block; max-width: 100%; }

:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 4px; }

/* Los anclajes (#proponer, #salir…) no quedan tapados por la cabecera fija. */
[id] { scroll-margin-top: 7rem; }

::selection { background: var(--ember-soft); color: var(--ink); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -100px;
    z-index: 100;
    padding: 0.625rem 1.25rem;
    background: var(--nav);
    color: var(--canvas);
    border-radius: var(--radius-pill);
    font-family: var(--font-ui);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Disposición ---------- */
.container {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-gap); }
.section--blush { background: var(--blush); }

.split { display: grid; gap: 2.5rem; }
.card-grid { display: grid; gap: var(--gap); margin-top: 2.5rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

@media (min-width: 768px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .split { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
    .card-grid--3, .card-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Tipografía ---------- */
.display {
    font-size: var(--text-display);
    line-height: 0.9;
    letter-spacing: -0.035em;
    color: var(--ink);
}
.heading-lg { font-size: var(--text-heading-lg); line-height: 0.95; letter-spacing: -0.03em; color: var(--ink); }
.heading    { font-size: var(--text-heading); line-height: 1; letter-spacing: -0.025em; color: var(--ink); max-width: 20ch; }
.heading-sm { font-size: var(--text-heading-sm); line-height: 1.15; letter-spacing: -0.02em; }
.display em, .heading-lg em, .heading em { font-style: italic; }

.lead {
    font-size: var(--text-sub);
    line-height: 1.5;
    color: var(--text);
    max-width: 42ch;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    color: var(--ember-text);
    font-family: var(--font-ui);
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.125em;
    text-transform: uppercase;
}
.eyebrow::before {
    content: '';
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--ember);
}

.muted { color: var(--muted); }

/* ---------- Marca ---------- */
.brand { display: inline-flex; color: var(--ink); text-decoration: none; border-radius: var(--radius-pill); }
.brand-lockup { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-mark { width: 2rem; height: 1.5rem; fill: none; stroke: var(--ember); stroke-width: 2; }
.brand-word { font-family: var(--font-display); font-size: 1.625rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.brand-lockup--small .brand-word { font-size: 1.375rem; }

/* ---------- Cabecera ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--canvas) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
/* En la portada la cabecera flota sobre el degradado y se vuelve sólida al hacer scroll (app.js). */
.page-home .site-header { transition: background-color 0.2s ease; }
.page-home .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.page-home .hero { margin-top: -4.25rem; padding-top: calc(clamp(4.5rem, 3rem + 10vw, 10rem) + 4.25rem); }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.25rem;
}
.site-header__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.site-nav .nav-link { white-space: nowrap; }

/* Móvil: la navegación baja a una segunda fila, completa y sin cortes. */
@media (max-width: 639px) {
    .site-header__inner { flex-wrap: wrap; row-gap: 0; padding-block: 0.5rem; }
    .site-nav { order: 3; flex-basis: 100%; border-top: 1px solid var(--mist); }
    .site-nav ul { flex-wrap: nowrap; overflow-x: auto; }
}
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    color: var(--nav);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
}
.nav-link::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--ember); }
.nav-link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--ember); text-underline-offset: 0.4em; }

.icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--nav);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.icon-button:hover { border-color: var(--mist); background: var(--surface); }

[data-theme="dark"] .icon--sun, :root:not([data-theme="dark"]) .icon--moon { display: block; }
[data-theme="dark"] .icon--moon, :root:not([data-theme="dark"]) .icon--sun { display: none; }

/* ---------- Botones (siempre píldora) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.625rem 1.5rem;
    border: 1px solid var(--slate);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--heading);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.053em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.7s var(--ease-out);
}
.btn:hover { background: var(--surface); text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* Acción de marca: contorno Ember, nunca relleno (DESIGN.md). */
.btn--ember { border-color: var(--ember); color: var(--ember-text); }
.btn--ember:hover { background: var(--ember-soft); }

/* Acción principal de formularios: tinta sólida, para que el envío sea inequívoco. */
.btn--ink { border-color: var(--nav); background: var(--nav); color: var(--canvas); }
.btn--ink:hover { background: var(--heading); border-color: var(--heading); }

.btn--light { border-color: #ffffff; color: #ffffff; border-radius: 120px; }
.btn--light:hover { background: rgba(255, 255, 255, 0.1); }

.btn--danger { border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger-bg); }

.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Estado de carga: lo activa app.js en formularios con data-loading. */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid var(--muted);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.btn--ink.is-loading::after { border-color: var(--canvas); border-right-color: transparent; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tarjetas y zonas ---------- */
.card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: var(--card-pad);
    border-radius: var(--radius);
    background: var(--surface);
}
.card > p { margin: 0; }
.card--blue { background: var(--card-blue); }
.card--parchment { background: var(--card-parchment); }
.card--sage { background: var(--card-sage); }
.card--outline { border: 1px solid var(--mist); }

.zone-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--heading);
}
.zone-label::before {
    content: '';
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    border: 2px solid currentColor;
}
.zone-label--shared::before { background: currentColor; }
.zone-label--private::before { border-radius: 2px; }

.tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto;
    padding: 0.2rem 0.75rem;
    border: 1px solid var(--slate);
    border-radius: var(--radius-tag);
    color: var(--heading);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
}
.tag--ember { border-color: var(--ember); color: var(--ember-text); }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 1.25rem; max-width: 32rem; }
.field { display: grid; gap: 0.375rem; }

.label {
    color: var(--heading);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
}
.label .optional { color: var(--muted); font-weight: 500; }

.input, .select, .textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 1rem; /* 16px: evita el zoom automático en iOS */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--heading); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
    outline: var(--focus);
    outline-offset: 2px;
    border-color: var(--ember-text);
}
[aria-invalid="true"] { border-color: var(--danger) !important; }

.hint { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.field-error { margin: 0; color: var(--danger); font-size: 0.875rem; font-weight: 500; line-height: 1.5; }

.check { display: flex; gap: 0.75rem; align-items: flex-start; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--nav); flex: none; }

/* ---------- Avisos ---------- */
.flash-stack { display: grid; gap: 0.75rem; padding-top: 1rem; }
.alert {
    padding: 0.875rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--info-bg);
    color: var(--heading);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.alert--success { background: var(--success-bg); color: var(--success); }
.alert--danger  { background: var(--danger-bg); color: var(--danger); }
.alert--warning { background: var(--warning-bg); color: var(--warning); }

/* ---------- Estados vacíos y de carga ---------- */
.empty-state {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: var(--card-pad);
    border-radius: var(--radius);
    background: var(--card-parchment);
    text-align: center;
}
.empty-state .heading-sm { margin: 0; }
.empty-state p { max-width: 40ch; }

.skeleton {
    display: block;
    height: 1em;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--mist) 0%, var(--surface) 50%, var(--mist) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Portada ---------- */
.hero {
    padding-block: clamp(4.5rem, 3rem + 10vw, 10rem) clamp(3.5rem, 2rem + 6vw, 7rem);
    background: var(--hero-bloom);
    text-align: center;
}
.hero__inner { display: grid; justify-items: center; }
.hero .display { max-width: 12ch; margin-bottom: 1.5rem; }
/* Sobre la zona rosada del degradado el Ember normal no alcanza 4.5:1. */
.hero .eyebrow { color: var(--hero-eyebrow); }
.hero .lead { margin-inline: auto; }
.hero .button-row { justify-content: center; }

.principles { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.principles__title { margin-bottom: 0.35rem; font-size: var(--text-heading-sm); color: var(--ink); }
.principles p { max-width: 52ch; }

.manifesto {
    padding-block: var(--section-gap);
    background: var(--midnight);
    color: #d4d8df;
}
.manifesto .heading-lg { color: #ffffff; max-width: 16ch; }
.manifesto .lead { color: #d4d8df; max-width: 52ch; }

.error-page .lead { max-width: 48ch; }

/* ---------- Acceso, espacio y cuenta ---------- */
.auth__inner, .space__inner { display: grid; gap: 1.5rem; max-width: 40rem; }
.auth__inner > .heading, .space__inner > .heading { margin-bottom: 0; }
.auth .form, .space .form, .account .form { max-width: none; }
.form--inline { width: 100%; max-width: 26rem; text-align: left; }

.btn--small { min-height: 40px; padding: 0.5rem 1.125rem; font-size: 0.8125rem; white-space: nowrap; }
.nav-link--plain::before { display: none; }

/* En pantallas angostas queda "Entrar" (lo más frecuente); "Crear cuenta" sigue en /entrar y en la portada. */
@media (max-width: 419px) {
    .site-header__actions .btn--small { padding-inline: 0.875rem; }
    .site-header__actions .btn--ember.btn--small { display: none; }
}

.copy-field { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.copy-field .input { flex: 1 1 16rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.875rem; }

.member-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; color: var(--heading); }

.danger-zone { border: 1px solid var(--mist); border-radius: var(--radius); background: var(--surface); }
.danger-zone > summary {
    padding: 1rem 1.5rem;
    color: var(--danger);
    font-family: var(--font-ui);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius);
}
.danger-zone__body { display: grid; gap: 1rem; padding: 0 1.5rem 1.5rem; }
.consequences { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.35rem; }

/* ---------- Panel del espacio ---------- */
.dashboard { display: grid; gap: 1.5rem; }
.dashboard__head { display: grid; gap: 1rem; }
.dashboard__head .heading { margin: 0; max-width: none; }
.dashboard__grid { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 900px) {
    .dashboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard__wide { grid-column: 1 / -1; }
}

.tabs { display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid var(--mist); }
.tabs__item {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border-bottom: 2px solid transparent;
    color: var(--text);
    font-family: var(--font-ui);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.tabs__item:hover { color: var(--ink); }
.tabs__item[aria-current="page"] { border-bottom-color: var(--ember); color: var(--ink); }

.counter__label { margin: 0; font-size: var(--text-sub); font-family: var(--font-body); font-weight: 500; letter-spacing: -0.01em; color: var(--heading); }
.counter__value { display: flex; align-items: baseline; gap: 0.75rem; margin: 0; }
.counter__days { font-family: var(--font-display); font-size: clamp(4.5rem, 3rem + 7vw, 7.5rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.counter__unit { font-family: var(--font-display); font-size: var(--text-heading-sm); color: var(--heading); }
.counter__ref { margin: 0; color: var(--heading); }

.inline-details > summary { color: var(--link); cursor: pointer; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.inline-details[open] > summary { margin-bottom: 0.75rem; }

.status {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.625rem;
    border-radius: var(--radius-tag);
    border: 1px solid var(--slate);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--heading);
}
.status--confirmed, .status--active, .status--completed, .status--on_track { border-color: var(--success); color: var(--success); }
.status--pending, .status--proposed, .status--in_progress, .status--struggling { border-color: var(--warning); color: var(--warning); }
.status--rejected, .status--needs_talk { border-color: var(--danger); color: var(--danger); }

.note {
    margin: 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--slate);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--heading);
    overflow-wrap: anywhere;
}
.proposal { display: grid; gap: 0.75rem; }

.timeline, .plain-list, .checkins, .history, .agreement-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
.timeline li, .plain-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.checkins li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; font-size: 0.9375rem; }
.checkins__note { flex-basis: 100%; color: var(--heading); }
.history__item { gap: 0.5rem; }
.history__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.history__head .heading-sm { margin: 0; }
.history__date { font-family: var(--font-display); font-size: var(--text-heading-sm); color: var(--ink); }
.is-archived { opacity: 0.8; }

.steps { margin: 0; padding-left: 1.5rem; display: grid; gap: 0.75rem; color: var(--heading); }
.steps li::marker { font-family: var(--font-display); color: var(--ember-text); }
.limitations { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--slate) 40%, transparent); }
.card-link { color: inherit; text-decoration: none; }
.card-link:hover { text-decoration: underline; text-decoration-color: var(--ember); }

.shared-reflection { display: grid; gap: 0.375rem; }
.reflection-body { color: var(--heading); overflow-wrap: anywhere; }

/* ---------- Biblioteca y artículos ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag--link { margin-top: 0; text-decoration: none; min-height: 36px; }
.tag--link:hover, .tag--link[aria-current="page"] { border-color: var(--ember); color: var(--ember-text); }

.article .heading-lg { max-width: 18ch; }
.article-meta { display: grid; gap: 0.75rem; margin: 2rem 0; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--card-parchment); }
.article-meta div { display: grid; gap: 0.125rem; }
.article-meta dt { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.article-meta dd { margin: 0; color: var(--heading); }
@media (min-width: 640px) { .article-meta { grid-template-columns: repeat(3, 1fr); } }

.article-section h3, .article-block h3 { margin-top: 1.5rem; font-size: 1.375rem; color: var(--ink); }
.article-block { margin-top: 2.5rem; padding: var(--card-pad); border-radius: var(--radius); }
.article-block > .heading-sm { margin-top: 0; }
.article-block--evidence { background: var(--card-blue); }
.article-block--recommendations { background: var(--card-parchment); }
.article-block--limitations { background: var(--card-sage); }
.cite { text-decoration: none; font-size: 0.75em; font-weight: 600; }
.sources { padding-left: 1.5rem; display: grid; gap: 0.75rem; font-size: 0.9375rem; overflow-wrap: anywhere; }
.sources li:target { background: var(--ember-soft); border-radius: 6px; }
.article-disclaimer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--mist); color: var(--muted); font-size: 0.9375rem; }

/* ---------- Panel editorial ---------- */
.stat-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.stat { text-decoration: none; color: var(--text); }
.stat:hover { border-color: var(--slate); }
.stat__n { display: block; font-family: var(--font-display); font-size: var(--text-heading); line-height: 1; color: var(--ink); }

.table-wrap { overflow-x: auto; border: 1px solid var(--mist); border-radius: var(--radius); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th, .table td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mist); }
.table th { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.table tr:last-child td { border-bottom: 0; }
.table__actions { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; }
.link-button { padding: 0; border: 0; background: none; color: var(--link); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; min-height: 32px; }

.form--wide { max-width: 56rem; }
.form--wide fieldset { margin: 0; display: grid; gap: 1.25rem; }
.form--wide legend { float: left; width: 100%; margin-bottom: 0.25rem; padding: 0; }
.source-picker { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
.source-picker li { display: flex; gap: 0.75rem; align-items: flex-start; }
.input--tiny { width: 4.5rem; flex: none; min-height: 44px; padding: 0.5rem; text-align: center; }
.button-row--tight { margin-top: 0.5rem; align-items: center; gap: 0.5rem 1rem; }
code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.875em; overflow-wrap: anywhere; }

/* ---------- Texto largo ---------- */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.5rem; color: var(--ink); }
.prose ul { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.prose strong { color: var(--heading); font-weight: 600; }

/* ---------- Pie ---------- */
.site-footer { padding-block: 3rem; border-top: 1px solid var(--mist); font-size: 0.9375rem; }
.site-footer__inner { display: grid; gap: 1rem; }
.site-footer__note { max-width: 56ch; margin: 0; color: var(--text); }
.site-footer__meta { margin: 0; color: var(--muted); }

@media (min-width: 768px) {
    .site-footer__inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
}

/* ---------- Movimiento ---------- */
.js [data-reveal] { transform: translateY(1.5rem); transition: transform 0.7s var(--ease-out); }
.js [data-reveal].is-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .js [data-reveal] { transform: none; }
}
.card > .tag--link { margin-top: auto; }

/* Código de verificación: dígitos grandes y espaciados. */
#code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 1.75rem; letter-spacing: 0.4em; text-align: center; max-width: 14rem; }