/* ==========================================================================
   neografo — sistema de diseño
   CSS puro, sin build. Tokens en :root, modo claro/oscuro, componentes.
   ========================================================================== */

/* hidden oculta siempre, aunque la clase del elemento ponga display (lección 2026-09-29: pasó dos veces). */
[hidden] { display: none !important; }

/* ---------- Tokens ---------- */
:root {
  /* paleta de marca (heredada de la landing) */
  --cream: #FAF3E2;
  --cream-2: #F1E6C9;
  --cream-3: #E7D8B1;
  --teal: #1E4842;
  --teal-2: #153531;
  --mustard: #D9A441;
  --brick: #C1502E;
  --ink-soft: #5B6B67;

  /* roles semánticos */
  --bg: var(--cream);
  --surface: #FFFBF1;
  --surface-2: var(--cream-2);
  --text: var(--teal-2);
  --text-soft: var(--ink-soft);
  --heading: var(--teal);
  --accent: var(--brick);
  --accent-text: #A8431F;      /* ladrillo oscurecido: 5.3:1 sobre crema, apto para texto pequeño */
  --highlight: var(--mustard);
  --line: rgba(21, 53, 49, .12);
  --line-strong: rgba(21, 53, 49, .22);
  --on-teal: var(--cream);
  --shadow: 0 1px 2px rgba(21, 53, 49, .06), 0 8px 24px -12px rgba(21, 53, 49, .18);
  --shadow-lift: 0 2px 4px rgba(21, 53, 49, .08), 0 18px 36px -16px rgba(21, 53, 49, .28);
  --paper-line: rgba(30, 72, 66, .10);

  /* series de gráficas: validadas con el validador de paleta (color de daltonismo, contraste, croma) */
  --series-1: #0E8C74;
  --series-2: #C1502E;
  --good: #2E7D4F;
  --bad: #B3261E;

  /* colores de nivel */
  --tier-1: #7E8B87;
  --tier-2: var(--teal);
  --tier-3: #B8862A;
  --tier-4: var(--brick);
  --tier-5: #2F6B5F;
  --tier-6: #8A3C6B;
  --tier-7: #1B1B1B;

  /* tipografía */
  --font-display: 'Lobster', cursive;
  --font-body: 'Poppins', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* escala */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --gap: 20px;
  --header-h: 68px;
  color-scheme: light;
  --snow: 120, 148, 172; /* nieve (public/js/snow.js): azul grisáceo, sobre crema el blanco no se ve */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1F1C;
    --surface: #152B27;
    --surface-2: #1B3631;
    --text: #EFE6CF;
    --text-soft: #A7B5B0;
    --heading: #FAF3E2;
    --accent: #E0714D;
    --accent-text: #EE8A66;
    --line: rgba(250, 243, 226, .10);
    --line-strong: rgba(250, 243, 226, .20);
    --on-teal: var(--cream);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 36px -16px rgba(0, 0, 0, .6);
    --paper-line: rgba(30, 72, 66, .14);
    --tier-1: #9AA7A3;
    --tier-2: #5FA597;
    --tier-7: #EFE6CF;
    --series-1: #22AD8E;
    --series-2: #DE6A45;
    --good: #5CC08A;
    --bad: #F2867D;
    --tier-4: #E0714D;
    --tier-5: #5DB39F;
    --tier-6: #C97BAA;
    color-scheme: dark;
    --snow: 255, 255, 255;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1F1C;
  --surface: #152B27;
  --surface-2: #1B3631;
  --text: #EFE6CF;
  --text-soft: #A7B5B0;
  --heading: #FAF3E2;
  --accent: #E0714D;
  --accent-text: #EE8A66;
  --line: rgba(250, 243, 226, .10);
  --line-strong: rgba(250, 243, 226, .20);
  --on-teal: var(--cream);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 36px -16px rgba(0, 0, 0, .6);
  --paper-line: rgba(30, 72, 66, .14);
  --tier-1: #9AA7A3;
  --tier-2: #5FA597;
  --tier-7: #EFE6CF;
  --series-1: #22AD8E;
  --series-2: #DE6A45;
  --good: #5CC08A;
  --bad: #F2867D;
  --tier-4: #E0714D;
  --tier-5: #5DB39F;
  --tier-6: #C97BAA;
  color-scheme: dark;
  --snow: 255, 255, 255;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 6px; } /* ≥ 5,8:1 en claro y oscuro (la mostaza daba 2:1 sobre crema) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; }
.soft { color: var(--text-soft); }

/* manchas decorativas de la landing */
.blob { position: fixed; border-radius: 50%; filter: blur(70px); opacity: .22; z-index: -1; pointer-events: none; }
.blob.b1 { width: 420px; height: 420px; background: var(--mustard); top: -160px; left: -140px; }
.blob.b2 { width: 460px; height: 460px; background: var(--brick); bottom: -200px; right: -160px; opacity: .14; }

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .inner {
  max-width: 1440px; height: 100%; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px;
}
.logo { font-family: var(--font-display); font-size: 28px; color: var(--heading); line-height: 1; flex-shrink: 0; }
.logo span { color: var(--accent); }

.main-nav { display: flex; gap: 4px; }
.main-nav a {
  padding: 8px 14px; border-radius: var(--r-pill);
  font-weight: 500; font-size: 14px; color: var(--text-soft);
  transition: background .15s, color .15s;
}
.main-nav a:hover { background: var(--surface-2); color: var(--heading); }
.main-nav a[aria-current="page"] { background: var(--teal); color: var(--on-teal); }

.search {
  flex: 1; max-width: 360px; margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 8px 14px;
}
.search input { border: 0; background: none; outline: none; width: 100%; font-size: 14px; }
.search svg { width: 16px; height: 16px; color: var(--text-soft); flex-shrink: 0; }
.search kbd { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 6px; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.site-header .search-link { display: none; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  color: var(--text-soft); transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--heading); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-pill);
  font-weight: 600; font-size: 14px; line-height: 1;
  transition: transform .12s, background .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px var(--brick); }
.btn-primary:hover { background: #AD4526; }
.btn-dark { background: var(--teal); color: var(--on-teal); }
.btn-dark:hover { background: var(--teal-2); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--heading); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 7px 12px; font-size: 13px; }

/* ---------- Avatares y niveles ---------- */
.avatar {
  --size: 40px;
  width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--font-display); font-size: calc(var(--size) * .48); color: var(--cream);
  background: var(--teal);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring, transparent);
}
.avatar.sm { --size: 32px; }
.avatar.xs { --size: 26px; box-shadow: 0 0 0 2px var(--surface); }
.avatar.lg { --size: 112px; box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--ring, transparent); }
.avatar.c1 { background: #2F6B5F; } .avatar.c2 { background: var(--brick); }
.avatar.c3 { background: #B8862A; } .avatar.c4 { background: #8A3C6B; } .avatar.c5 { background: #4A5A8C; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.has-photo { background: var(--surface); }

.tier {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 8px 3px 6px; border-radius: var(--r-pill);
  color: var(--tier-c); background: color-mix(in srgb, var(--tier-c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-c) 28%, transparent);
  white-space: nowrap;
}
.tier::before { content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--tier-c); }
.t1 { --tier-c: var(--tier-1); --ring: var(--tier-1); }
.t2 { --tier-c: var(--tier-2); --ring: var(--tier-2); }
.t3 { --tier-c: var(--tier-3); --ring: var(--tier-3); }
.t4 { --tier-c: var(--tier-4); --ring: var(--tier-4); }
.t5 { --tier-c: var(--tier-5); --ring: var(--tier-5); }
.t6 { --tier-c: var(--tier-6); --ring: var(--tier-6); }
.t7 { --tier-c: var(--tier-7); --ring: var(--mustard); }

/* ---------- Layout ---------- */
.layout {
  max-width: 1440px; margin: 0 auto; padding: 28px 24px 80px;
  display: grid; gap: 28px;
  grid-template-columns: 220px minmax(0, 1fr) 320px;
  align-items: start;
}
.sidebar { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: var(--gap); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.card-pad { padding: 20px; }
.card-title {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 600; font-size: 15px; color: var(--heading); margin-bottom: 14px;
}
.card-title a { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--accent-text); }

/* navegación lateral */
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 500; color: var(--text-soft);
}
.side-nav a svg { width: 18px; height: 18px; }
.side-nav a:hover { background: var(--surface-2); color: var(--heading); }
.side-nav a[aria-current="page"] { background: var(--surface); color: var(--heading); box-shadow: var(--shadow); }
.side-nav .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; }
.side-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); padding: 18px 12px 8px; }
.tag-dot { width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); flex-shrink: 0; margin: 0 4px; }

/* ---------- Hero de bienvenida ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--teal); color: var(--cream);
  border-radius: var(--r-lg); padding: 30px 32px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(40px); }
.hero::before { width: 260px; height: 260px; background: var(--mustard); opacity: .35; top: -120px; right: 60px; }
.hero::after { width: 200px; height: 200px; background: var(--brick); opacity: .45; bottom: -120px; right: -40px; }
.hero { border: 1px solid var(--line); }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; margin-bottom: 8px; }
.hero h1 em { font-style: normal; color: var(--mustard); }
.hero p { color: rgba(250, 243, 226, .78); max-width: 460px; font-size: 14.5px; }
.hero .btn-primary { box-shadow: none; }

/* ---------- Compositor ---------- */
.composer { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.composer-row { display: flex; align-items: center; gap: 12px; }
.composer-input {
  flex: 1; padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid transparent;
  color: var(--text-soft); font-size: 14.5px; text-align: left;
}
.composer-input:hover { border-color: var(--line-strong); }
.composer-types { display: flex; flex-wrap: wrap; gap: 8px; }
.type-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--text-soft);
  border: 1px solid var(--line);
}
.type-chip:hover { border-color: var(--line-strong); color: var(--heading); }
.type-chip svg { width: 15px; height: 15px; }
.type-chip .pts { font-family: var(--font-mono); font-size: 10.5px; color: var(--tier-3); }

/* ---------- Pestañas ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a {
  padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--text-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs a:hover { color: var(--heading); }
.tabs a[aria-current="page"] { color: var(--heading); border-color: var(--accent); }
/* Muchas pestañas (Temas): en móvil van en dos filas, para que la elegida se vea siempre. */
@media (max-width: 640px) { .tabs-wrap { flex-wrap: wrap; gap: 0 2px; } .tabs-wrap a { padding: 8px 10px; } }

/* ---------- Publicaciones ---------- */
.feed { display: flex; flex-direction: column; gap: var(--gap); }
.post { overflow: hidden; transition: box-shadow .2s, transform .2s; }
.post:hover { box-shadow: var(--shadow-lift); }
.post-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0; }
.post-meta { display: flex; flex-direction: column; min-width: 0; }
.post-meta .name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--heading); flex-wrap: wrap; }
.post-meta .sub { font-size: 12.5px; color: var(--text-soft); }
.post-type {
  margin-left: auto; align-self: flex-start;
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 6px; background: var(--surface-2); color: var(--text-soft);
}
.post-type.q { background: color-mix(in srgb, var(--mustard) 20%, transparent); color: #8A6317; }
.post-type.tut { background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal); }
[data-theme="dark"] .post-type.q, [data-theme="dark"] .post-type.tut { color: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .post-type.q, :root:not([data-theme="light"]) .post-type.tut { color: var(--text); } }

.post-body { padding: 14px 20px 0; }
.post-body h2 { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--heading); margin-bottom: 6px; }
.post-body h2 a:hover { color: var(--accent-text); }
.post-body p { color: var(--text-soft); font-size: 14.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); padding: 3px 9px; border-radius: 6px; border: 1px dashed var(--line-strong); }
.favorite-styles { list-style: none; padding: 0; margin-top: 10px; }
.mod-avatar { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.tag:hover { color: var(--accent-text); border-color: var(--accent); }

.post-media { margin: 16px 20px 0; display: grid; gap: 8px; }
.post-media.two { grid-template-columns: 1.4fr 1fr; }
.post-media.two .artwork { aspect-ratio: auto; min-height: 240px; }

/* “obra”: placeholder que imita una hoja de práctica caligráfica */
.artwork {
  position: relative; overflow: hidden; border-radius: var(--r);
  aspect-ratio: 4 / 3;
  display: grid; place-items: center; text-align: center; padding: 18px;
  background-color: #FBF6E9;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 27px, var(--paper-line) 27px 28px),
    repeating-linear-gradient(55deg, transparent 0 34px, rgba(193, 80, 46, .07) 34px 35px);
  color: #1A2B28;
  border: 1px solid rgba(21, 53, 49, .08);
}
.artwork.tall { aspect-ratio: auto; height: 100%; }
.artwork .w { line-height: 1; }
.artwork.copper .w { font-family: 'Pinyon Script', cursive; font-size: clamp(40px, 6vw, 64px); }
.artwork.gothic { background-color: #F4EBD3; }
.artwork.gothic .w { font-family: 'UnifrakturMaguntia', serif; font-size: clamp(36px, 5vw, 54px); color: #3B1D12; }
.artwork.gothic .w::first-letter { color: var(--brick); font-size: 1.3em; }
.artwork.brush { background: var(--teal); background-image: none; color: var(--cream); }
.artwork.brush .w { font-family: 'Kaushan Script', cursive; font-size: clamp(34px, 4.6vw, 50px); transform: rotate(-6deg); }
.artwork.brush .w span { color: var(--mustard); }
.artwork .credit { position: absolute; bottom: 10px; right: 12px; font-family: var(--font-mono); font-size: 10px; opacity: .55; }
.artwork .zoom {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; border-radius: 6px;
  background: rgba(21, 53, 49, .72); color: var(--cream);
}

.answer-preview {
  margin: 14px 20px 0; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-2); border-left: 3px solid var(--tier-5);
  font-size: 13.5px; color: var(--text-soft);
}
.answer-preview strong { color: var(--heading); font-weight: 600; }
.answer-preview .accepted { font-family: var(--font-mono); font-size: 10.5px; color: var(--tier-5); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 4px; }

.post-actions {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 14px; margin-top: 14px; border-top: 1px solid var(--line);
}
.act {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500; color: var(--text-soft);
  transition: background .15s, color .15s;
}
.act svg { width: 18px; height: 18px; }
.act:hover { background: var(--surface-2); color: var(--heading); }
.act.ink[aria-pressed="true"] { color: var(--accent-text); }
.act.ink[aria-pressed="true"] svg { fill: currentColor; }
.act.ink.pop svg { animation: pop .35s ease; }
@keyframes pop { 40% { transform: scale(1.35); } }
.act.push { margin-left: auto; }

/* ---------- Tarjeta de nivel ---------- */
.level-card { padding: 20px; position: relative; overflow: hidden; }
.level-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.level-top .who { font-weight: 600; color: var(--heading); line-height: 1.3; }
.level-name { font-family: var(--font-display); font-size: 26px; color: var(--heading); line-height: 1.1; }
/* <progress> nativo: accesible y sin estilos en línea (CSP) */
.progress {
  display: block; width: 100%; height: 10px; margin: 10px 0 8px; border: 0; border-radius: var(--r-pill);
  background: var(--surface-2); overflow: hidden; appearance: none; -webkit-appearance: none;
}
.progress::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--r-pill); }
.progress::-webkit-progress-value { background: linear-gradient(90deg, var(--mustard), var(--brick)); border-radius: var(--r-pill); }
.progress::-moz-progress-bar { background: linear-gradient(90deg, var(--mustard), var(--brick)); border-radius: var(--r-pill); }
/* prototipo de design/ (div + span con --p) */
div.progress > span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--mustard), var(--brick)); }
.level-top .level-link { margin-left: auto; font-size: 13px; align-self: flex-start; }
.progress-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); }
.next-unlock {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--mustard) 14%, transparent);
  border: 1px dashed color-mix(in srgb, var(--mustard) 60%, transparent);
  font-size: 13px;
}
.next-unlock b { color: var(--heading); font-weight: 600; }
.next-unlock .mono { display: block; color: var(--tier-3); margin-bottom: 2px; }

.missions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.mission { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.mission .check {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
}
.mission.done .check { background: var(--tier-5); border-color: var(--tier-5); color: #fff; }
.mission.done .check svg { width: 12px; height: 12px; }
.mission.done .label { color: var(--text-soft); text-decoration: line-through; }
.mission .pts { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--tier-3); }

/* ---------- Reto semanal ---------- */
.challenge { overflow: hidden; }
.challenge .artwork { border-radius: 0; aspect-ratio: 16 / 9; border: 0; }
.challenge .body { padding: 16px 20px 20px; }
.challenge h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--heading); line-height: 1.15; }
.challenge .meta { display: flex; gap: 14px; margin: 8px 0 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); }
.challenge .countdown { color: var(--accent-text); }
.avatars { display: flex; align-items: center; margin-bottom: 14px; }
.avatars .avatar { margin-right: -8px; }
.avatars span.mono { margin-left: 16px; color: var(--text-soft); }

/* ---------- Ranking ---------- */
.rank { display: flex; flex-direction: column; gap: 12px; }
.rank li { list-style: none; display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rank .pos { width: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); }
.rank li:first-child .pos { color: var(--tier-3); font-weight: 600; }
.rank .n { font-weight: 600; color: var(--heading); line-height: 1.25; }
.rank .ink-pts { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); white-space: nowrap; }

.footer-links { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 6px; font-size: 12px; color: var(--text-soft); }
.footer-links a:hover { color: var(--heading); }

/* ---------- Perfil ---------- */
.profile-wrap { max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; display: flex; flex-direction: column; gap: 28px; }
.profile-cover {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--teal); height: 190px;
}
.profile-cover::before, .profile-cover::after { content: ""; position: absolute; border-radius: 50%; filter: blur(50px); }
.profile-cover::before { width: 360px; height: 360px; background: var(--mustard); opacity: .4; top: -180px; left: 20%; }
.profile-cover::after { width: 300px; height: 300px; background: var(--brick); opacity: .55; bottom: -180px; right: 5%; }
.profile-cover .quote {
  position: absolute; z-index: 1; right: 32px; top: 50%; transform: translateY(-50%) rotate(-4deg);
  font-family: 'Pinyon Script', cursive; font-size: 46px; color: rgba(250, 243, 226, .85);
}
.profile-head { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: start; margin-top: 16px; padding: 0 28px; position: relative; z-index: 2; }
.profile-head .avatar.lg { margin-top: -72px; }
.profile-head h1 { font-family: var(--font-display); font-weight: 400; font-size: 38px; color: var(--heading); line-height: 1.1; }
.profile-head .handle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--text-soft); }
.profile-head .bio { margin-top: 8px; max-width: 560px; font-size: 14.5px; }
.profile-head .actions { display: flex; gap: 10px; padding-top: 8px; }

.stats { display: grid; grid-template-columns: repeat(7, 1fr); }
a.stat:hover .v { color: var(--accent); }
.stat { padding: 18px 20px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .v { font-family: var(--font-display); font-size: 32px; color: var(--heading); line-height: 1.1; }
.stat .l { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }

.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.section-title { font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--heading); margin-bottom: 4px; }
.section-sub { color: var(--text-soft); font-size: 14px; margin-bottom: 18px; }

/* camino de niveles */
.path { list-style: none; position: relative; display: flex; flex-direction: column; gap: 4px; }
.path::before { content: ""; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px; background: var(--line-strong); }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 10px 0; }
.step .gem {
  width: 44px; height: 44px; border-radius: 12px; transform: rotate(45deg) scale(.78);
  display: grid; place-items: center; z-index: 1;
  background: var(--surface); border: 2px solid var(--line-strong);
}
.step .gem span { transform: rotate(-45deg); font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--text-soft); }
.step.reached .gem { background: var(--tier-c); border-color: var(--tier-c); }
.step.reached .gem span { color: #fff; }
.step.current .gem { box-shadow: 0 0 0 6px color-mix(in srgb, var(--tier-c) 22%, transparent); }
.step .info { padding: 14px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.step.current .info { border-color: var(--tier-c); box-shadow: var(--shadow); }
.step.locked .info { background: transparent; border-style: dashed; }
.step h3, .step h4 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--heading); }
.step h3 .mono, .step h4 .mono { color: var(--text-soft); }
.step.locked h3, .step.locked h4 { color: var(--text-soft); }
.step .you { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; background: var(--tier-c); color: #fff; }
.perks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; list-style: none; padding: 0; }
.perk { font-size: 12.5px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); }
.step.locked .perk { background: none; border: 1px solid var(--line); color: var(--text-soft); }

/* insignias */
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.badge-item { text-align: center; padding: 14px 8px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.badge-item .seal {
  width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25), 0 4px 10px -4px var(--c);
}
.badge-item .seal svg { width: 24px; height: 24px; }
.badge-item .bn { font-size: 12.5px; font-weight: 600; color: var(--heading); line-height: 1.3; }
.badge-item .bd { font-size: 11px; color: var(--text-soft); line-height: 1.35; margin-top: 2px; }
.badge-item.locked { border-style: dashed; background: transparent; }
.badge-item.locked .seal { background: var(--surface-2); box-shadow: none; color: var(--text-soft); }

.works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.works .artwork { aspect-ratio: 1; }
.works .artwork .w { font-size: 30px !important; }

.ledger { list-style: none; display: flex; flex-direction: column; }
.ledger li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ledger li:last-child { border-bottom: 0; }
.ledger .plus { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--tier-5); white-space: nowrap; }
.ledger .minus { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--accent-text); white-space: nowrap; }
.ledger .when + .plus, .ledger .when + .minus { margin-left: 0; }
.ledger li > span:first-child { flex: 1; min-width: 0; }
.ledger li.voided .plus, .ledger li.voided .minus { text-decoration: line-through; color: var(--text-soft); }
.fine-print { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.ink-rules { margin-top: 8px; }
@media (max-width: 560px) {
  .ledger li:has(.when) { flex-wrap: wrap; row-gap: 2px; }
  .ledger li:has(.when) > span:first-child { flex-basis: 100%; }
  .ledger .when + .plus, .ledger .when + .minus { margin-left: auto; }
}
.ledger .when { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); white-space: nowrap; }

/* ---------- Barra inferior móvil ---------- */
.bottom-nav { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .layout > .sidebar.left { display: none; }
  .main-nav a { padding: 8px 10px; }
}
/* Entre el móvil y el escritorio ancho, las secciones no dejan sitio al buscador: se queda en un
   icono que lleva a la búsqueda, y la cabecera se aprieta. Hasta 1100 px, las secciones van al menú. */
@media (min-width: 901px) and (max-width: 1280px) {
  .site-header .inner { gap: 16px; }
  .main-nav a { padding: 8px; }
  .site-header .search { display: none; }
  .site-header .search-link { display: inline-grid; margin-left: auto; flex-shrink: 0; }
  .site-header .search-link ~ .header-actions { margin-left: 0; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .main-nav { display: none; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding-bottom: 110px; }
  .layout > .sidebar.right { position: static; }
  .main-nav, .search, .header-actions .btn { display: none; }
  .menu-nav { display: flex; flex-direction: column; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
  .header-actions { margin-left: auto; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-head { grid-template-columns: 1fr; justify-items: start; padding: 0 8px; gap: 14px; }
  .profile-head .avatar.lg { --size: 96px; margin-top: -64px; }
  .profile-head .actions { padding-top: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .bottom-nav {
    display: flex; justify-content: space-around; align-items: center;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
    padding: 8px; border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line); box-shadow: var(--shadow-lift);
  }
  .bottom-nav a { display: grid; place-items: center; gap: 2px; font-size: 10.5px; color: var(--text-soft); padding: 4px 10px; }
  .bottom-nav a svg { width: 22px; height: 22px; }
  .bottom-nav a[aria-current="page"] { color: var(--heading); }
  .bottom-nav .fab { width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: #fff; margin-top: -26px; box-shadow: 0 8px 18px -6px var(--brick); padding: 0; }
}
@media (max-width: 560px) {
  .site-header .inner, .layout, .profile-wrap { padding-left: 16px; padding-right: 16px; }
  .hero { grid-template-columns: 1fr; padding: 24px; }
  .post-media.two { grid-template-columns: 1fr; }
  .post-media.two .artwork { aspect-ratio: 4 / 3; min-height: 0; }
  .post-head, .post-body { padding-left: 16px; padding-right: 16px; }
  .post-media, .answer-preview { margin-left: 16px; margin-right: 16px; }
  .act .lbl { display: none; }
  .post-actions { gap: 0; }
  .post-actions .act { padding: 7px 8px; white-space: nowrap; }
  .profile-cover { height: 150px; }
  .profile-cover .quote { font-size: 32px; right: 18px; }
  .badges { grid-template-columns: repeat(2, 1fr); }
  .works { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Landing (antes del lanzamiento)
   ========================================================================== */
.landing { display: flex; flex-direction: column; min-height: 100vh; }
.landing-header { padding: 28px 28px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.landing-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px 60px; }
.landing-card { max-width: 640px; width: 100%; text-align: center; }

.soon {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal); color: var(--on-teal);
  padding: 9px 18px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 28px;
}
.soon .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mustard); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } }

.landing h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 7vw, 68px); line-height: 1.12;
  color: var(--heading); margin-bottom: 22px;
}
.landing h1 .accent { color: var(--accent); }
.landing .lead { font-size: 17.5px; color: var(--text-soft); max-width: 480px; margin: 0 auto 32px; }

.waitlist { max-width: 460px; margin: 0 auto; text-align: left; }
.waitlist .row {
  display: flex; gap: 6px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); box-shadow: var(--shadow);
}
.waitlist .row:focus-within { border-color: var(--teal); }
.waitlist input[type="email"] {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: 8px 14px; font-size: 15px;
}
.waitlist .consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 6px 0; font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }
.waitlist .consent input { margin-top: 3px; accent-color: var(--teal); flex-shrink: 0; }
.waitlist .consent a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.waitlist .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field-error { margin: 8px 16px 0; font-size: 13px; color: var(--accent-text); }

.notice {
  max-width: 460px; margin: 0 auto 20px; padding: 14px 18px; border-radius: var(--r);
  font-size: 14.5px; text-align: left;
  background: color-mix(in srgb, var(--tier-5) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tier-5) 35%, transparent);
}
.notice.warn { background: color-mix(in srgb, var(--mustard) 16%, var(--surface)); border-color: color-mix(in srgb, var(--mustard) 45%, transparent); }
.notice strong { color: var(--heading); }
/* Aviso de traducción de los textos legales (legal/translation-notice): a lo ancho del texto, no centrado. */
.prose .legal-translation { max-width: none; margin: 0 0 22px; }

.landing-footer { padding: 26px 28px 30px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); }
.landing-footer a { text-decoration: underline; text-underline-offset: 2px; }
.landing-footer a:hover { color: var(--heading); }

/* mantenimiento: una hoja de práctica con pauta donde se dibuja un rasgo a plumilla */
.maint-sheet { position: relative; max-width: 440px; height: 150px; margin: 0 auto 30px; }
.maint-sheet::before {           /* la pauta (renglones e inclinación), difuminada hacia los bordes */
  content: ""; position: absolute; inset: 0; border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(to bottom, transparent 0 29px, var(--paper-line) 29px 30px),
    repeating-linear-gradient(125deg, transparent 0 25px, color-mix(in srgb, var(--brick) 9%, transparent) 25px 26px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, #000 55%, transparent 78%);
}
.maint-flourish { position: absolute; inset: 10px 0; width: 100%; height: calc(100% - 20px); overflow: visible; }
.maint-stroke {
  fill: none; stroke: var(--heading); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 0;           /* sin animación: el rasgo ya dibujado */
  animation: maint-draw 7s cubic-bezier(.55, .1, .35, 1) infinite;
}
.maint-drop { fill: var(--mustard); transform-box: fill-box; transform-origin: center top; animation: maint-drip 7s ease-in infinite; }
@keyframes maint-draw {
  0% { stroke-dashoffset: 1000; opacity: 1; }
  45%, 82% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes maint-drip {
  0%, 44% { opacity: 0; transform: translateY(-14px) scale(.4); }
  52% { opacity: 1; transform: translateY(0) scale(1); }
  60% { transform: translateY(0) scale(1.15, .85); }
  66%, 82% { opacity: 1; transform: translateY(0) scale(1); }
  96%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}
.maint-eta {
  display: inline-flex; gap: 8px; align-items: baseline; margin: -8px auto 26px;
  padding: 10px 20px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--mustard) 18%, var(--surface)); border: 1px solid color-mix(in srgb, var(--mustard) 45%, transparent);
  font-size: 15px; color: var(--text);
}
.maint-eta time { font-weight: 600; color: var(--heading); }
.maint-note {
  position: relative; max-width: 460px; margin: 0 auto 26px; padding: 20px 24px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  text-align: left; border-left: 4px solid var(--accent);
}
.maint-note blockquote { font-size: 15.5px; color: var(--text); white-space: pre-line; }
.maint-note figcaption { margin-top: 10px; font-family: var(--font-display); font-size: 18px; color: var(--accent-text); }
.maint-hint { font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); }
@media (max-width: 560px) {
  .maint-sheet { height: 120px; margin-bottom: 22px; }
}

/* «Una letra más»: el juego de la página de mantenimiento (public/js/una-letra-mas.js) */
.lm {
  margin: 34px auto 0; padding: 22px 22px 18px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.lm-intro { text-align: center; }
.lm-intro p { max-width: 460px; margin: 8px auto 16px; font-size: 14.5px; color: var(--text-soft); }
.lm-intro .lm-note { margin: 14px auto 0; font-size: 12.5px; }
.lm-title { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--heading); }
.lm-play .lm-title, .lm-end .lm-title { margin-bottom: 8px; }
.lm-hud { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lm-hud > span { font-family: var(--font-mono); font-size: 12.5px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--heading); }
.lm-hud strong { font-weight: 600; }
.lm-hud .lm-time { min-width: 52px; text-align: center; background: var(--teal); color: var(--cream); font-weight: 600; }
.lm-hud .lm-time.is-low { background: var(--brick); color: #fff; }
.lm-hud .lm-combo { background: var(--mustard); color: #1E2A27; }
.lm-hud .lm-best { margin-left: auto; background: transparent; border: 1px solid var(--line-strong); }
.lm-stage { position: relative; }
.lm-stage canvas, .lm-row canvas {
  display: block; width: 100%; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 70%, #fff 30%);
}
[data-theme="dark"] .lm-stage canvas, [data-theme="dark"] .lm-row canvas { background: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lm-stage canvas, :root:not([data-theme="light"]) .lm-row canvas { background: var(--bg); } }
.lm-stage canvas { touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.lm-grade { position: absolute; top: 12px; right: 14px; text-align: right; pointer-events: none; opacity: 0; }
.lm-grade b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1; color: var(--heading); }
.lm-grade small { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-soft); }
.lm-grade.is-good b { color: var(--accent-text); }
.lm-grade.is-bad b, .lm-grade.is-blot b { color: var(--text-soft); }
.lm-grade.is-blot b { font-family: var(--font-body); font-size: 14px; }
.lm-grade.is-on { animation: lm-pop 1.1s ease-out forwards; }
@keyframes lm-pop {
  0% { opacity: 0; transform: translateY(6px) scale(.92); }
  12% { opacity: 1; transform: translateY(0) scale(1.04); }
  22%, 75% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}
.lm-label { margin: 14px 0 6px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.lm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; font-size: 13px; color: var(--text-soft); }
.lm-buttons { display: flex; gap: 6px; }
.lm-final { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 15px; color: var(--text-soft); }
.lm-final strong { font-family: var(--font-display); font-weight: 400; font-size: 60px; line-height: 1; color: var(--heading); }
.lm-record { font-family: var(--font-mono); font-size: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--brick); color: #fff; }
.lm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0 4px; }
.lm-stats div { padding: 9px 11px; border-radius: var(--r-sm); background: var(--surface-2); }
.lm-stats dt { font-size: 11.5px; color: var(--text-soft); }
.lm-stats dd { font-size: 20px; font-weight: 600; color: var(--heading); }
.lm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lm-back { margin-top: 14px; padding: 10px 14px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--good) 14%, var(--surface)); color: var(--text); font-size: 14px; text-align: center; }
.lm-back a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) {
  .lm { margin-top: 26px; padding: 16px 12px 14px; border-radius: var(--r); }
  .lm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lm-hud .lm-best { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-grade.is-on { animation: none; opacity: 1; }
}

/* aviso para administración mientras el mantenimiento está activo */
.maint-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 9px 16px; background: var(--mustard); color: #1E2A27; font-size: 13.5px; text-align: center;
}
.maint-banner strong { font-weight: 600; }
.maint-banner a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* panel de mantenimiento */
.maint-status { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.legal-docs { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.maint-status .state { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 6px 14px; border-radius: var(--r-pill); }
.maint-status .state.on { background: var(--mustard); color: #1E2A27; }
.maint-status .state.off { background: color-mix(in srgb, var(--good) 15%, var(--surface)); color: var(--good); }
.maint-preview { font-size: 13.5px; }
.maint-preview a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
code.route-path { font-family: var(--font-mono); font-size: 13px; background: color-mix(in srgb, var(--teal) 8%, transparent); padding: 2px 6px; border-radius: 6px; }

/* páginas de texto (legal, errores) */
.prose { max-width: 680px; margin: 0 auto; padding: 24px 24px 80px; }
.prose h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 5vw, 44px); color: var(--heading); line-height: 1.15; margin-bottom: 18px; }
.prose h2 { font-size: 18px; font-weight: 600; color: var(--heading); margin: 28px 0 8px; }
.prose p, .prose li { color: var(--text); margin-bottom: 10px; }
.prose ul { padding-left: 20px; }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
/* Tablas de los textos legales (política de cookies): con desplazamiento en móvil. */
.prose .table-wrap { overflow-x: auto; margin: 6px 0 14px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.prose td:first-child { white-space: nowrap; }
.prose h3 { font-size: 16px; font-weight: 600; color: var(--heading); margin: 20px 0 6px; }
.prose .todo { background: color-mix(in srgb, var(--mustard) 25%, transparent); padding: 0 4px; border-radius: 4px; }

@media (max-width: 560px) {
  .landing-header { padding: 20px 16px 0; }
  .landing-main { padding: 32px 16px 48px; }
  .waitlist .row { flex-direction: column; border-radius: var(--r-lg); }
  .waitlist .row .btn { width: 100%; padding: 13px; }
}

/* ==========================================================================
   Formularios y cuentas
   ========================================================================== */
.auth-card { width: 100%; max-width: 440px; padding: 32px; }
.auth-card.wide { max-width: 560px; }
.auth-card h1 { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--heading); margin-bottom: 6px; }
.auth-card .sub { color: var(--text-soft); font-size: 14.5px; margin-bottom: 24px; }
.auth-card .btn { width: 100%; padding: 13px; margin-top: 8px; }
.auth-links { margin-top: 20px; font-size: 13.5px; color: var(--text-soft); text-align: center; }
.auth-links a, .link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label, .field .label { font-size: 13.5px; font-weight: 600; color: var(--heading); }
.field .hint { font-size: 12.5px; color: var(--text-soft); }
.input {
  width: 100%; padding: 11px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line-strong);
  font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); }
.input[readonly] { background: var(--surface-2); color: var(--text-soft); }
.input[aria-invalid="true"] { border-color: var(--accent); }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.5; }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line-strong); border-right: 0; border-radius: 12px 0 0 12px; background: var(--surface-2); color: var(--text-soft); font-family: var(--font-mono); }
.input-prefix .input { border-radius: 0 12px 12px 0; }
.field .field-error { margin: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-soft); margin-bottom: 16px; }
.check input { margin-top: 4px; accent-color: var(--teal); flex-shrink: 0; }
.check a { color: var(--accent-text); text-decoration: underline; }
.form-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-row .check { margin: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 8px; }
.form-actions .btn { width: auto; margin-top: 0; }
.saved { font-size: 13px; color: var(--tier-5); }

/* menú de usuario sin JS: <details> */
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; border-radius: 50%; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu .menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; z-index: 70;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lift);
  padding: 6px; display: flex; flex-direction: column;
  /* La cabecera es fija: si el menú no cabe en la pantalla, se desplaza él (no la página). */
  max-height: calc(100vh - var(--header-h) - 20px); max-height: calc(100dvh - var(--header-h) - 20px);
  overflow-y: auto; overscroll-behavior: contain;
}
/* En móvil, la barra de abajo (.bottom-nav, por encima de la cabecera) taparía el final del menú. */
@media (max-width: 900px) {
  .user-menu .menu { max-height: calc(100vh - var(--header-h) - 110px); max-height: calc(100dvh - var(--header-h) - 110px); }
}
.user-menu .menu .who { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 13px; color: var(--text-soft); line-height: 1.35; }
.user-menu .menu .who strong { display: block; color: var(--heading); font-size: 14px; }
.user-menu .menu .who .tier { display: flex; width: fit-content; margin-top: 6px; }
.user-menu .menu-meta { float: right; font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); }
.user-menu .menu a, .user-menu .menu button { text-align: left; padding: 9px 12px; border-radius: 9px; font-size: 14px; color: var(--text); width: 100%; }
.user-menu .menu a:hover, .user-menu .menu button:hover { background: var(--surface-2); color: var(--heading); }
/* Las secciones del menú solo hacen falta si no caben en la cabecera (hasta 1100 px). Con
   min-width y no después de la regla de móvil: por orden, esta la anulaba y el menú salía vacío. */
@media (min-width: 1101px) { .menu-nav { display: none; } }
@media (min-width: 901px) and (max-width: 1100px) {
  .menu-nav { display: flex; flex-direction: column; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
}

/* páginas de la app */
.page { max-width: 1240px; margin: 0 auto; padding: 28px 24px 56px; display: flex; flex-direction: column; gap: 24px; }
.page.narrow { max-width: 860px; }
.page-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 40px); color: var(--heading); line-height: 1.1; }
.settings-section { padding: 28px; }
.settings-section h2 { font-size: 18px; font-weight: 600; color: var(--heading); margin-bottom: 4px; }
.settings-section > p { color: var(--text-soft); font-size: 14px; margin-bottom: 20px; }
.empty { text-align: center; padding: 48px 24px; color: var(--text-soft); }
.empty h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--heading); margin-bottom: 6px; }
.steps { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.steps li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.steps .check-dot { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); flex-shrink: 0; display: grid; place-items: center; }
.steps .done .check-dot { background: var(--tier-5); border-color: var(--tier-5); color: #fff; font-size: 12px; }
.steps .done span:last-child { color: var(--text-soft); text-decoration: line-through; }
.steps .soon-tag { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }
.banner { padding: 12px 16px; border-radius: var(--r); font-size: 14px; background: color-mix(in srgb, var(--mustard) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--mustard) 45%, transparent); }
.banner form { display: inline; }
.banner button { color: var(--accent-text); text-decoration: underline; font-weight: 600; }

@media (max-width: 560px) {
  .auth-card { padding: 24px 20px; }
  .settings-section { padding: 22px 18px; }
  .page { padding-left: 16px; padding-right: 16px; }
}
.banner-wrap { max-width: 860px; margin: 16px auto 0; padding: 0 24px; }
.site-header .header-actions { margin-left: auto; }
.steps .done a { color: inherit; text-decoration: none; }

/* ==========================================================================
   Obras: subida, feed, página de obra y perfil
   ========================================================================== */
.dropzone {
  position: relative; display: grid; place-items: center; gap: 2px; text-align: center;
  padding: 34px 20px; border-radius: var(--r); cursor: pointer;
  border: 2px dashed var(--line-strong); background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus-within, .dropzone.over { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 6%, var(--surface-2)); }
.dropzone:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dz-title { font-weight: 600; color: var(--heading); }
.dz-sub { font-size: 13px; color: var(--text-soft); }
.previews { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.previews:empty { display: none; }
.previews li { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.previews img { width: 100%; height: 100%; object-fit: cover; }
.previews .n { position: absolute; top: 5px; left: 5px; font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: rgba(21, 53, 49, .75); color: var(--cream); }
select.input { appearance: auto; }

.post-media.photos { display: grid; gap: 8px; }
.post-media.photos.two { grid-template-columns: 1fr 1fr; }
.post-media.photos figure { position: relative; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.post-media.photos img { width: 100%; height: auto; max-height: 620px; object-fit: contain; display: block; }
/* nunca recortar: en caligrafía el recorte se come letras */
.post-media.photos.two img { aspect-ratio: 4 / 3; height: auto; object-fit: contain; }
.post-media .more { position: absolute; right: 10px; bottom: 10px; font-family: var(--font-mono); font-size: 13px; padding: 4px 10px; border-radius: 8px; background: rgba(21, 53, 49, .8); color: var(--cream); }
.post-meta .name a:hover, .obra-head .name a:hover { color: var(--accent-text); }

.obra { gap: 18px; }
.obra-head { display: flex; align-items: center; gap: 12px; }
.obra-head .btn { margin-left: auto; }
.gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery-item { display: flex; justify-content: center; margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
/* El marco se ajusta a la foto (no al recuadro): las marcas de los consejos van encima, en su sitio. */
.photo-frame { position: relative; display: block; max-width: 100%; }
/* <picture> de las fotos en AVIF (components/avif): no cuenta en la maquetación, como si solo estuviera la <img>. */
picture { display: contents; }
.gallery-link { display: block; }
.gallery-item img { display: block; max-width: 100%; width: auto; height: auto; max-height: 85vh; }
.obra-text { font-size: 15.5px; line-height: 1.7; margin-bottom: 14px; overflow-wrap: anywhere; }
.obra-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.obra-facts dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.obra-facts dd { font-weight: 500; color: var(--heading); }
.obra-info:has(.obra-facts:empty):not(:has(.obra-text)) { display: none; }
.danger-zone { font-size: 13.5px; color: var(--text-soft); }
.danger-zone summary { cursor: pointer; color: var(--accent-text); width: fit-content; }
.danger-zone p { margin: 8px 0 10px; }

.works { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.work { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.work img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.work:hover img { transform: scale(1.03); }
.work-title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 10px 8px;
  font-size: 12.5px; font-weight: 500; color: #fff; line-height: 1.3;
  background: linear-gradient(transparent, rgba(15, 31, 28, .8));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pager { display: flex; justify-content: space-between; gap: 12px; }
.pager .btn:only-child { margin-left: auto; }

@media (max-width: 900px) {
  .site-header .header-actions .btn-primary { display: inline-flex; }
}
@media (max-width: 560px) {
  .works { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ==========================================================================
   Tinta y consejos
   ========================================================================== */
.ink-form { display: inline-flex; }
.act.ink.static { cursor: default; }
.act.ink.static:hover { background: none; color: var(--text-soft); }
.ink-form.htmx-added .act.ink[aria-pressed="true"] svg { animation: pop .35s ease; }
.ink-form.htmx-request .act.ink { opacity: .6; }
.save-form { display: inline-flex; }
.act.save[aria-pressed="true"] { color: var(--heading); }
.act.save[aria-pressed="true"] svg { fill: currentColor; }
.save-form.htmx-request .act.save { opacity: .6; }
.obra-actions { display: flex; gap: 6px; align-items: center; }
.obra-actions .act { font-size: 14.5px; padding: 9px 14px; border: 1px solid var(--line); background: var(--surface); }
.obra-actions .act svg { width: 20px; height: 20px; }

.comments { display: flex; flex-direction: column; gap: 14px; }
.comment { padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.comment:target { border-color: var(--mustard); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mustard) 25%, transparent); }
.comment-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
/* Ficha de la autoría bajo el nombre (nivel · consejos · desde cuándo), en su propia línea. */
.comment-card { order: 5; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; margin-top: -2px; }
.comment-card .tier { font-size: 10px; }
.comment-card > span:not(.tier) + span::before { content: "· "; }
.comment-author { font-weight: 600; color: var(--heading); }
.comment-author:hover { color: var(--accent-text); }
.author-tag { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--heading) 12%, transparent); color: var(--heading); }
.comment-time { color: var(--text-soft); font-size: 12.5px; }
.comment-time:hover { text-decoration: underline; }
.comment-number { font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); order: 4; margin-left: auto; }
.comment-number:hover, .comment-ref:hover { color: var(--accent-text); }
.topic-tools-error { flex-basis: 100%; }
/* Un desplegable abierto (mover, unir, responder…) baja a su propia línea al final de la fila. */
.comment-actions > details[open], .obra-actions details.move-topic[open] { flex-basis: 100%; order: 10; }
.move-thread { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.move-thread .input { width: min(100%, 420px); }
.move-thread .check { margin: 4px 0 0; }
.comment-image { display: block; margin-top: 10px; max-width: min(100%, 520px); }
.comment-image img { display: block; width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); }
.comment-image-field { margin: 4px 0 12px; }
.comment-image-field summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--heading); }
.comment-image-field[open] { display: flex; flex-direction: column; gap: 6px; }
.comment-preview { border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 12px 14px; margin-bottom: 12px; background: var(--surface-2); }
.comment-preview .mono { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.format-help { font-size: 12.5px; color: var(--text-soft); margin: -4px 0 10px; line-height: 1.7; }
.format-help code { white-space: nowrap; }
.format-help code, .comment-body code, .dm-body code { font-family: var(--font-mono); font-size: .88em; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); color: var(--heading); }
.user-list { margin: 4px 0 4px 1.3em; padding: 0; }
.user-list li + li { margin-top: 2px; }
.comment-ref { font-family: var(--font-mono); font-size: .92em; color: var(--accent-text); }
.comment-body { margin: 8px 0 6px; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.comment-removed { font-size: 13.5px; font-style: italic; color: var(--text-soft); }
.comment-actions { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.reply-box summary { cursor: pointer; color: var(--text-soft); list-style: none; }
.reply-box summary::-webkit-details-marker { display: none; }
.reply-box summary:hover, .reply-box[open] summary { color: var(--accent-text); }
/* Consejo de una cuenta bloqueada: plegado, se despliega si quieres leerlo. */
.comment-blocked > summary { cursor: pointer; color: var(--text-soft); font-size: 14px; padding: 4px 0; }
.comment-blocked[open] > summary { margin-bottom: 8px; }
.comment-blocked[open] > summary .soft { display: none; }
.reply-box form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 8px; width: min(560px, 80vw); }
.replies { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--line-strong); display: flex; flex-direction: column; gap: 10px; }
.replies .comment { background: var(--bg); }
.comment-form .btn { margin-top: 4px; }

/* ==========================================================================
   Reportes y moderación
   ========================================================================== */
.report-box summary, .decision summary { list-style: none; cursor: pointer; }
.report-box summary::-webkit-details-marker, .decision summary::-webkit-details-marker { display: none; }
.report-box summary { color: var(--text-soft); font-size: 13px; }
.report-box summary:hover, .report-box[open] summary { color: var(--accent-text); }
.report-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 14px; width: min(420px, 85vw); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.report-form fieldset { border: 0; display: flex; flex-direction: column; gap: 2px; }
.report-form legend { font-size: 13px; font-weight: 600; color: var(--heading); margin-bottom: 6px; }
.report-form .check { margin: 0; }
.obra-actions { flex-wrap: wrap; }
.obra-actions .push { margin-left: auto; }
.count-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 11px; vertical-align: middle; }
.section-title .count-badge { font-size: 12px; height: 24px; min-width: 24px; }
.mod-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mod-item { padding: 18px 20px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.mod-item h3 { font-size: 17px; color: var(--heading); }
.mod-item h3 a:hover { color: var(--accent-text); }
.mod-meta { font-size: 13px; color: var(--text-soft); }
.mod-meta a:hover { color: var(--accent-text); }
/* Traducciones de un estilo o un reto (partials/translation-fields): un desplegable por idioma. */
.translation-fields { margin: 4px 0 12px; }
.translation-fields summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--heading); width: fit-content; }
.translation-fields[open] summary { margin-bottom: 10px; }
.mod-text { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.mod-note { font-size: 14px; background: var(--surface-2); border-radius: calc(var(--r) - 6px); padding: 8px 10px; margin: 8px 0; }
.pending-comments { display: grid; gap: 10px; margin: 0 0 16px; }
.pending-comment { border: 1px dashed var(--line-strong); }
blockquote.mod-text { border-left: 3px solid var(--line-strong); padding-left: 12px; }
.mod-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.mod-thumbs img { width: 120px; height: 90px; object-fit: contain; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.mod-reports { list-style: none; font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.mod-actions { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.mod-actions form { display: inline; }
.decision[open] summary { opacity: .6; }
.settings-section.danger { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.settings-section.danger summary { list-style: none; cursor: pointer; }
.settings-section.danger summary::-webkit-details-marker { display: none; }
.delete-account { margin-top: 16px; max-width: 420px; }

/* ==========================================================================
   Administración: auditoría
   ========================================================================== */
.page.wide { max-width: 1440px; }
.audit-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.audit-chip { font-size: 12.5px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); }
.audit-chip.warn { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.audit-chip:hover { border-color: var(--teal); }
.audit-filters { padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 0 12px; align-items: end; }
.audit-filters .input { min-width: 0; width: 100%; } /* los de fecha no encogían y se salían de la tarjeta en móvil */
.audit-filters .form-actions { grid-column: 1 / -1; }
.audit-filters .field { margin-bottom: 10px; }
.audit-table-wrap { overflow-x: auto; padding: 0; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); padding: 12px 14px; border-bottom: 1px solid var(--line-strong); }
.audit-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.audit-table tr.warn td:first-child { box-shadow: inset 3px 0 var(--accent); }
.audit-table a { color: var(--heading); }
.audit-table a:hover { color: var(--accent-text); }
.audit-table .nowrap { white-space: nowrap; }
.audit-meta { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.audit-meta .ua { font-size: 11.5px; }
.purge-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; align-items: end; }
.purge-form .check, .purge-form .btn, .purge-form .field-error { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 900px) {
  .audit-filters, .purge-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.px { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ==========================================================================
   Administración: estadísticas (gráficas SVG en el servidor)
   ========================================================================== */
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); width: fit-content; }
.segmented a { padding: 7px 14px; border-radius: var(--r-pill); font-size: 13.5px; color: var(--text-soft); }
.segmented a[aria-current="page"] { background: var(--surface); color: var(--heading); font-weight: 600; box-shadow: var(--shadow); }
.segmented.wrap { flex-wrap: wrap; max-width: 100%; border-radius: 18px; } /* muchas opciones: en el móvil bajan de línea en vez de salirse */
.segmented.wrap a { white-space: nowrap; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.kpi-label { font-size: 13px; color: var(--text-soft); }
.kpi-value { font-size: 30px; font-weight: 600; color: var(--heading); line-height: 1.2; }
.kpi-delta { font-size: 12.5px; color: var(--text); }
.kpi-delta .arrow { font-size: 10px; color: var(--text-soft); }
.kpi-delta .arrow.up { color: var(--good); }
.kpi-delta .arrow.down { color: var(--bad); }

.chart { position: relative; outline-offset: 6px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-title { font-weight: 600; color: var(--heading); }
.chart-legend { display: flex; gap: 14px; font-size: 13px; color: var(--text-soft); }
.chart-legend .key { display: inline-flex; align-items: center; gap: 6px; }
.chart-plot { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--text-soft); font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart line.s1, .chart .line.s1 { stroke: var(--series-1); }
.chart line.s2, .chart .line.s2 { stroke: var(--series-2); }
.chart .dot.s1 { fill: var(--series-1); }
.chart .dot.s2 { fill: var(--series-2); }
.chart-legend line, .chart-tip line { stroke-width: 2; stroke-linecap: round; }
.chart .crosshair { stroke: var(--text-soft); stroke-width: 1; opacity: 0; }
.chart .crosshair.on { opacity: .6; }
.chart-tip {
  position: absolute; top: 0; left: var(--x, 0); transform: translateX(12px); z-index: 5; pointer-events: none;
  min-width: 140px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift);
}
.chart-tip.flip { transform: translateX(calc(-100% - 12px)); }
.chart-tip .tip-day { color: var(--text-soft); margin-bottom: 4px; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 6px; }
.chart-tip strong { color: var(--heading); font-variant-numeric: tabular-nums; }
.chart-tip .tip-row span { color: var(--text-soft); }
.chart-caption { font-size: 12.5px; color: var(--text-soft); margin-top: 8px; }
.chart-table { margin-top: 10px; font-size: 13px; }
.chart-table summary { cursor: pointer; color: var(--accent-text); width: fit-content; }
.chart-table table { margin-top: 8px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.chart-table th, .chart-table td { padding: 4px 14px 4px 0; text-align: left; border-bottom: 1px solid var(--line); }

.stats-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.stats-sub { margin-top: 22px; }
.bar-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bar-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; font-size: 13.5px; }
.bl-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); }
.bl-label a:hover { color: var(--accent-text); }
.bl-value { grid-row: 1; grid-column: 2; font-variant-numeric: tabular-nums; }
.bl-track { grid-column: 1 / -1; width: 100%; height: 8px; }
.bl-bar { fill: var(--series-1); }
.funnel { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.funnel dt { font-size: 13px; color: var(--text-soft); }
.funnel dd { font-size: 24px; font-weight: 600; color: var(--heading); }
@media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr; } }
.stats-group { margin: 18px 0 8px; font-size: 15px; }
.stats-sub-first { margin-top: 0; }
.stats-posts { list-style: decimal; padding-left: 22px; margin: 8px 0 0; display: grid; gap: 6px; font-size: 14px; }
.stats-posts li { overflow-wrap: anywhere; }
.stats-posts .soft { font-size: 12.5px; }
.stats-post-count { float: right; margin-left: 12px; font-variant-numeric: tabular-nums; color: var(--heading); font-weight: 600; }

.chart-plot svg.narrow { display: none; }
@media (max-width: 640px) {
  .chart-plot svg.wide { display: none; }
  .chart-plot svg.narrow { display: block; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 12px 14px; }
  .kpi-value { font-size: 24px; }
}

/* Verificación en dos pasos */
.settings-section h2 .tier { margin-left: 8px; vertical-align: middle; }
.twofa-setup { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.twofa-setup .qr { padding: 10px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); width: fit-content; }
.twofa-setup .qr svg { width: 180px; height: 180px; }
.secret { word-break: break-all; font-size: 14px; color: var(--heading); margin-bottom: 14px; }
.recovery-codes { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 24px; margin-top: 10px; font-size: 14px; color: var(--heading); }
.recovery { margin-top: 18px; font-size: 13.5px; }
.recovery summary { cursor: pointer; color: var(--accent-text); }
.recovery form { margin-top: 12px; }
.form-actions form { display: inline; }
@media (max-width: 560px) { .twofa-setup { grid-template-columns: 1fr; } }

/* Preguntas y respuestas */
.feed-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.feed-bar .tabs { flex: 1; }
.page-title .post-type, .page-title .tier { vertical-align: middle; margin: 0 6px; font-size: 11px; }
.page-title .post-type { margin-left: 0; }
.question-text { font-size: 15.5px; line-height: 1.7; }
.helpful { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-soft); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid transparent; }
.helpful:hover { border-color: var(--line-strong); color: var(--heading); }
.helpful[aria-pressed="true"] { color: var(--tier-5); border-color: color-mix(in srgb, var(--tier-5) 40%, transparent); background: color-mix(in srgb, var(--tier-5) 8%, transparent); }
.helpful.static { cursor: default; }
.helpful .n { font-weight: 600; }
.comment.accepted { border-color: color-mix(in srgb, var(--tier-5) 55%, transparent); box-shadow: inset 3px 0 var(--tier-5); }
.accepted-tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tier-5); margin-bottom: 6px; }
.link-btn { font-size: 13px; color: var(--text-soft); }
.link-btn:hover { color: var(--accent-text); text-decoration: underline; }
.link-btn.accept { color: var(--tier-5); font-weight: 600; }
.comment-actions { align-items: center; }
.comment-actions form { display: inline; }
.question-list { list-style: none; display: flex; flex-direction: column; }
.question-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.question-list li:last-child { border-bottom: 0; }
.question-list a { color: var(--heading); font-weight: 500; }
.question-list a:hover { color: var(--accent-text); }
.question-list .soft { white-space: nowrap; font-size: 13px; }
.question-list .resolved { color: var(--tier-5); }
/* Perfil › En revisión: en pantallas estrechas, la marca y la fecha bajo el título. */
@media (max-width: 600px) {
  .review-list li { flex-direction: column; gap: 4px; }
  .review-list .soft { white-space: normal; }
}

/* Búsqueda y listados */
.site-header .search { max-width: 320px; }
.search-big { display: flex; gap: 8px; }
.search-big .input { flex: 1; }
.search-extras { display: flex; flex-direction: column; gap: 10px; }
.people { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.people a { display: inline-flex; align-items: center; gap: 6px; color: var(--heading); }
.people a:hover { color: var(--accent-text); }
.post-meta .sub a:hover { color: var(--accent-text); text-decoration: underline; }
.obra-facts dd a:hover { color: var(--accent-text); }
.obra-info .tags { margin-top: 12px; }

/* ---------- Ajustes: foto y estilos ---------- */
.avatar-settings { display: flex; gap: 20px; align-items: flex-start; }
.avatar-settings > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.style-picker { border: 0; padding: 0; margin: 0 0 16px; }
.style-picker .hint { margin-top: 8px; font-size: 12.5px; color: var(--text-soft); }
.style-picker .field-error { margin: 8px 0 0; }
.style-picker legend { font-size: 13.5px; font-weight: 600; color: var(--heading); margin-bottom: 8px; }
.style-options .check { margin-bottom: 0; }
.style-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; }
@media (max-width: 560px) {
  .avatar-settings { flex-direction: column; align-items: center; }
}

/* ==========================================================================
   Avisos: campana de la cabecera y página /avisos
   ========================================================================== */
.bell { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--heading); }
.bell:hover, .bell[aria-current="page"] { background: color-mix(in srgb, var(--teal) 9%, transparent); }
.bell svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell .count-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; box-shadow: 0 0 0 2px var(--bg); }

.notices { list-style: none; display: flex; flex-direction: column; }
.notice-item { border-bottom: 1px solid var(--line); }
.notice-item:last-child { border-bottom: 0; }
.notice-item > a { display: flex; gap: 12px; align-items: flex-start; padding: 14px 10px; margin: 0 -10px; border-radius: var(--r-sm); }
.notice-item > a:hover { background: color-mix(in srgb, var(--teal) 5%, transparent); }
.notice-item.unread > a { background: color-mix(in srgb, var(--mustard) 11%, transparent); }
.notice-item.unread > a:hover { background: color-mix(in srgb, var(--mustard) 17%, transparent); }
.notice-item .avatar { flex-shrink: 0; }
.notice-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.notice-text { font-size: 14px; color: var(--text); }
.notice-text strong { color: var(--heading); font-weight: 600; }
.notice-text em { font-style: normal; color: var(--heading); }
.notice-excerpt { font-size: 13px; color: var(--text-soft); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notice-item .when { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); }
.notice-item.unread .when::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
/* sin persona (subida de nivel): una gota de tinta */
.notice-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--teal); position: relative; }
.notice-icon.is-badge { background: var(--mustard); }
.notice-icon.is-badge::after { background: var(--teal); border-radius: 50%; transform: translate(-50%, -50%); }
.notice-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; background: var(--mustard); border-radius: 50% 50% 50% 0; transform: translate(-50%, -40%) rotate(-45deg); }

/* mención enlazada dentro de un texto */
a.mention { color: var(--accent-text); font-weight: 500; }
.mod-link { overflow-wrap: anywhere; font-size: 13px; }
.link-blocked { color: var(--text-soft); font-style: italic; }
a.mention:hover { text-decoration: underline; text-underline-offset: 2px; }

fieldset.checks { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 2px; }
fieldset.checks .check { margin-bottom: 8px; color: var(--text); font-size: 14px; }
/* Recursos: ¿quién puede descargarlo? (el desplegable de nivel, en la misma línea que su opción) */
.access-field legend { margin-bottom: 8px; font-weight: 600; color: var(--heading); }
.access-field .check:has(select) { align-items: center; flex-wrap: wrap; }
.access-field .check:has(select) input { margin-top: 0; }
.access-field select.input { width: auto; padding: 5px 10px; }
.access-field .hint { margin-top: 0; font-size: 12.5px; color: var(--text-soft); }
.access-tag { white-space: nowrap; }
.access-tag { color: var(--accent-text); }
.listing-filter { margin: -4px 0 14px; }

/* ==========================================================================
   Seguir: botón, listas de personas y selector de feed
   ========================================================================== */
.follow-form { display: inline-flex; margin: 0; }
.follow-form .btn { min-width: 108px; justify-content: center; }
.follow-form .off { display: none; }
.follow-form [aria-pressed="true"]:hover .on, .follow-form [aria-pressed="true"]:focus-visible .on { display: none; }
.follow-form [aria-pressed="true"]:hover .off, .follow-form [aria-pressed="true"]:focus-visible .off { display: inline; color: var(--accent-text); }

.people { list-style: none; display: flex; flex-direction: column; flex-wrap: nowrap; } /* sin wrap: en columna, «wrap» ensancha cada fila a su contenido */
.people li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.people li:last-child { border-bottom: 0; }
.people .who { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people .who strong { color: var(--heading); font-weight: 600; }

.listing-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fav-note { font-size: 13px; padding-top: 12px; }
.feed-switch { margin-bottom: -8px; }

/* ==========================================================================
   Racha, misiones, ranking e insignias (Fase 2F)
   ========================================================================== */
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-head .card-title { margin-bottom: 6px; }
.card-head > .link { font-size: 13px; }

.streak { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-soft); }
.streak svg { width: 18px; height: 18px; }
.streak b { font-family: var(--font-mono); font-size: 16px; color: var(--heading); }
.streak.on svg { color: var(--accent-text); fill: color-mix(in srgb, var(--mustard) 55%, transparent); }
.streak-note { font-size: 13.5px; }
.streak-note .wildcard { display: block; font-family: var(--font-mono); font-size: 11.5px; margin-top: 2px; }
.missions-title { margin-top: 16px; font-size: 11.5px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.steps.missions { margin-top: 8px; }
.mission-meta { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.steps.missions .done .mission-meta { text-decoration: none; color: var(--tier-5); }
.today .fine-print { margin-top: 12px; }

.ranking { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; padding: 0; }
.ranking li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r); }
.ranking li.me { background: color-mix(in srgb, var(--mustard) 14%, var(--surface)); }
.ranking .place { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 12.5px; color: var(--text-soft); background: var(--surface-2); }
.ranking .podium-1 .place { background: var(--mustard); color: #3a2a05; font-weight: 600; }
.ranking .podium-2 .place { background: color-mix(in srgb, var(--text-soft) 30%, var(--surface)); color: var(--heading); }
.ranking .podium-3 .place { background: color-mix(in srgb, var(--brick) 28%, var(--surface)); color: var(--heading); }
.ranking .rank-name { font-weight: 500; color: var(--heading); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .rank-ink { margin-left: auto; font-size: 13px; color: var(--heading); white-space: nowrap; }
.ranking .rank-ink .lbl { color: var(--text-soft); }
.ranking.compact li { padding: 5px 8px; }
.rank-me { margin-top: 12px; font-size: 14px; }

.badge-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 0; margin: 0; }
.badge-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  padding: 18px 14px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.badge-seal {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mustard) 80%, #fff), var(--mustard) 60%, color-mix(in srgb, var(--mustard) 70%, var(--brick)));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, #fff 35%, transparent), 0 2px 6px color-mix(in srgb, var(--mustard) 35%, transparent);
}
.badge-seal svg { width: 26px; height: 26px; color: #3a2a05; }
.badge-name { font-weight: 600; font-size: 14px; color: var(--heading); }
.badge-how { font-size: 12.5px; color: var(--text-soft); line-height: 1.35; }
.badge-when { font-size: 11.5px; color: var(--text-soft); margin-top: auto; padding-top: 4px; }
/* Barra y cifra, juntas abajo: las tarjetas de una fila acaban a la misma altura. */
.badge-foot { display: block; width: 100%; margin-top: auto; padding-top: 6px; }
.badge-foot .badge-when { display: block; }
.badge-card .progress { height: 6px; margin: 0; }
.badge-card.locked .badge-seal { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); }
.badge-card.locked .badge-seal svg { color: var(--text-soft); opacity: .7; }
.badge-card.locked .badge-name { color: var(--text-soft); }
@media (max-width: 520px) {
  .badge-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .badge-card { padding: 14px 10px 12px; }
}

/* ==========================================================================
   Tutoriales (Fase 3A)
   ========================================================================== */
.post-type.t { background: color-mix(in srgb, var(--teal) 14%, var(--surface)); color: var(--heading); }
.tutorial-body.has-cover { display: grid; grid-template-columns: 1fr 120px; gap: 16px; align-items: start; }
.tutorial-cover img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--r); display: block; background: var(--surface-2); }
.tutorial-page .lead { font-size: 17px; color: var(--text); margin: -4px 0 18px; line-height: 1.55; }
.toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.toc a { color: var(--accent-text); }
.md { font-size: 16px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.md > * + * { margin-top: .9em; }
.md h2, .md h3, .md h4 { color: var(--heading); line-height: 1.3; margin-top: 1.6em; scroll-margin-top: 80px; }
.md h2 { font-family: var(--font-display); font-weight: 400; font-size: 27px; }
.md h3 { font-size: 19px; }
.md h4 { font-size: 16px; }
.md > :first-child { margin-top: 0; }
.md ul, .md ol { padding-left: 1.4em; }
.md li + li { margin-top: .25em; }
.md a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.md img { display: block; max-width: 100%; height: auto; margin: 1.2em auto; border-radius: var(--r); background: var(--surface-2); }
.md blockquote { border-left: 3px solid var(--mustard); padding: 8px 14px; background: color-mix(in srgb, var(--mustard) 10%, var(--surface)); border-radius: 0 var(--r) var(--r) 0; }
.md code { font-family: var(--font-mono); font-size: .88em; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); }
.md pre { overflow-x: auto; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); }
.md pre code { padding: 0; background: none; }
.md table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 14.5px; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.md th { background: var(--surface-2); color: var(--heading); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.obra-text.md h2 { font-size: 22px; }
.obra-text.md h3 { font-size: 17px; }
.md-input { font-family: var(--font-mono); font-size: 14px; line-height: 1.55; min-height: 420px; }
.md-help { font-size: 13.5px; margin: -4px 0 16px; }
.md-help summary { cursor: pointer; color: var(--accent-text); }
.md-help dl { display: grid; gap: 6px; margin-top: 10px; }
.md-help dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.md-help dd { color: var(--text-soft); margin: 0; }
.md .video-embed { margin: 1.4em 0; }
.video-cover, .video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r); }
.video-cover, .md a.video-cover { position: relative; display: grid; place-content: center; justify-items: center; gap: 10px; overflow: hidden; background: var(--teal); color: #fff; text-decoration: none; }
.md .video-cover .video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 0; background: none; }
.video-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / .15), rgb(0 0 0 / .55)); }
.video-icon, .video-label { position: relative; z-index: 1; }
.video-label { text-shadow: 0 1px 3px rgb(0 0 0 / .6); }
.video-cover:hover .video-icon rect, .video-cover:focus-visible .video-icon rect { fill: var(--brick); }
.video-cover:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
.video-icon { width: 68px; height: 48px; }
.video-icon rect { fill: color-mix(in srgb, var(--brick) 85%, black); transition: fill .15s; }
.video-icon path { fill: #fff; }
.video-label { font-weight: 500; }
.video-note { margin-top: 6px; font-size: 13px; color: var(--text-soft); }
/* Google Maps (App\Text\MapEmbedRenderer): la misma tarjeta que un vídeo, sin miniatura. */
.video-cover.map-cover { background: linear-gradient(135deg, var(--teal), color-mix(in srgb, var(--teal) 70%, var(--mustard))); }
.map-icon { position: relative; z-index: 1; width: 44px; height: 44px; }
/* El enlace corto no carga nada aquí: una tarjeta baja, no la caja de 16:9. */
.video-cover.map-cover:not([data-map]) { aspect-ratio: auto; padding: 20px 16px; }
.map-icon path { fill: var(--brick); stroke: #fff; stroke-width: 1.2; }
.map-icon circle { fill: #fff; }
.map-cover:hover .map-icon path, .map-cover:focus-visible .map-icon path { fill: color-mix(in srgb, var(--brick) 80%, white); }
.map-sub, .video-sub { position: relative; z-index: 1; font-size: 13.5px; opacity: .9; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }
/* Google Drive (App\Text\DriveEmbedRenderer): la tarjeta de los mapas, más baja; el visor, alto, para leer un PDF. */
.video-cover.drive-cover { aspect-ratio: 2 / 1; }
/* Con la primera página: más alta, y se ve la parte de arriba (el título del documento). */
.video-cover.drive-cover.has-thumb { aspect-ratio: 4 / 3; background: var(--surface-2); }
.md .drive-cover .video-thumb { object-position: top; }
.drive-icon { position: relative; z-index: 1; width: 44px; height: 44px; }
.drive-icon path { fill: #fff; stroke: var(--brick); stroke-width: 1.2; stroke-linejoin: round; }
.drive-icon .drive-fold { fill: color-mix(in srgb, var(--brick) 25%, white); }
.drive-cover:hover .drive-icon path:not(.drive-fold), .drive-cover:focus-visible .drive-icon path:not(.drive-fold) { fill: color-mix(in srgb, var(--mustard) 25%, white); }
.video-frame.drive-frame { aspect-ratio: auto; height: min(85vh, 960px); background: var(--surface-2); }

/* Galerías (public/js/gallery.js): una foto por vez en una franja que se desliza; en el móvil asoma la
   siguiente. Sin JS, se desliza igual. En un texto (App\Text\GalleryRenderer), cada foto en una caja de
   proporción fija; en una obra, cada una con su forma, para que las marcas de los consejos caigan en su sitio. */
.md-gallery { position: relative; }
.md .md-gallery { margin: 1.4em 0; --ratio: 4 / 3; }
.md-gallery-wide { --ratio: 16 / 9; }
.md-gallery-square { --ratio: 1 / 1; }
.md-gallery-portrait { --ratio: 4 / 5; }
.md-gallery .md-gallery-track { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; border-radius: var(--r); }
.md-gallery.is-enhanced .md-gallery-track { scrollbar-width: none; }
.md-gallery.is-enhanced .md-gallery-track::-webkit-scrollbar { display: none; }
.md-gallery-track:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
.md-gallery .md-gallery-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.md-gallery figure { margin: 0; }
.md .md-gallery-slide a { display: block; aspect-ratio: var(--ratio); max-height: 70vh; width: 100%; overflow: hidden; border-radius: var(--r); background: var(--surface-2); }
.md-gallery-slide a:focus-visible { outline: 3px solid var(--mustard); outline-offset: -3px; }
.md-gallery-zoom { cursor: zoom-in; }
.md .md-gallery img { width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; border-radius: 0; background: none; }
.md-gallery figcaption { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--text-soft); text-align: center; }
.obra-gallery.gallery { display: block; }
.obra-gallery .md-gallery-slide { align-items: center; }
.obra-gallery .gallery-item img { max-height: 75vh; }
.md-gallery .md-gallery-count { position: absolute; top: 10px; right: 10px; margin: 0; padding: 2px 10px; border-radius: var(--r-pill); background: rgb(0 0 0 / .55); color: #fff; font-family: var(--font-mono); font-size: 12.5px; pointer-events: none; }
.md-gallery .md-gallery-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.md-gallery-arrow { flex: none; width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--heading); font-size: 22px; line-height: 1; cursor: pointer; }
.md-gallery-arrow:hover:not(:disabled) { background: var(--surface-2); }
.md-gallery-arrow:disabled { opacity: .35; cursor: default; }
.md-gallery-thumbs { display: flex; flex: 1; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.md-gallery-thumbs::-webkit-scrollbar { display: none; }
.md-gallery-thumb { flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); opacity: .55; cursor: pointer; transition: opacity .15s; }
.md-gallery-thumb:hover, .md-gallery-thumb[aria-current] { opacity: 1; }
.md-gallery-thumb[aria-current] { outline: 2px solid var(--accent); outline-offset: 1px; }
.md-gallery .md-gallery-thumb img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
@media (max-width: 760px) {
  .md-gallery .md-gallery-slide { flex-basis: 88%; }
  .md-gallery-thumb { width: 46px; height: 46px; }
  /* Encima de la foto taparía la que asoma: debajo, junto al pie. */
  .md-gallery .md-gallery-count { position: static; margin-top: 4px; padding: 0; background: none; color: var(--text-soft); text-align: center; }
}
@media (prefers-reduced-motion: no-preference) { .md-gallery-track { scroll-behavior: smooth; } }
@media print {
  .md-gallery .md-gallery-track { display: block; overflow: visible; }
  .md-gallery .md-gallery-slide + .md-gallery-slide { margin-top: 1em; }
  .md .md-gallery-slide a { aspect-ratio: auto; max-height: none; }
  .md-gallery-bar, .md-gallery-count { display: none !important; }
}

/* Pantalla completa (un <dialog> nativo para toda la página). */
.md-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(8 14 13 / .98); color: #fff; overscroll-behavior: contain; }
.md-lightbox::backdrop { background: rgb(8 14 13 / .6); }
.has-lightbox { overflow: hidden; }
.md-lightbox-figure { display: grid; place-items: center; align-content: center; gap: 10px; height: 100%; margin: 0; padding: 56px 16px 24px; }
.md-lightbox-figure img { max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; touch-action: pan-y pinch-zoom; }
.md-lightbox-caption { max-width: 60ch; margin: 0; font-size: 15px; text-align: center; color: rgb(255 255 255 / .85); }
.md-lightbox-count { position: absolute; top: 18px; left: 18px; margin: 0; font-family: var(--font-mono); font-size: 13px; color: rgb(255 255 255 / .8); }
.md-lightbox-close, .md-lightbox-arrow { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.md-lightbox-close:hover, .md-lightbox-arrow:hover:not(:disabled) { background: rgb(255 255 255 / .25); }
.md-lightbox-close:focus-visible, .md-lightbox-arrow:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.md-lightbox-close { top: 8px; right: 8px; }
.md-lightbox-arrow { top: calc(50% - 22px); }
.md-lightbox-arrow:disabled { opacity: .25; cursor: default; }
.md-lightbox-prev { left: 10px; }
.md-lightbox-next { right: 10px; }
@media (max-width: 760px) { .md-lightbox-arrow { top: auto; bottom: 14px; } }
.md-preview:not(:empty) { margin-top: 18px; }
.preview-label { font-size: 12px; margin-bottom: 12px; }
.previews.codes { margin-bottom: 10px; }
/* «Sin marca de agua» sobre cada miniatura (App\Images\FreeImages). */
.previews .free-check { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 5px; padding: 5px 6px; font-size: 10.5px; line-height: 1.2; color: var(--cream); background: rgba(21, 53, 49, .8); cursor: pointer; }
.previews .free-check input { margin: 0; flex-shrink: 0; accent-color: var(--mustard); }
/* «×» de cada imagen: quitar la nueva (upload.js) o marcar una guardada para quitarla al guardar. */
.previews .preview-remove { position: absolute; top: 4px; right: 4px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(21, 53, 49, .8); color: var(--cream); font-size: 17px; line-height: 1; cursor: pointer; }
.previews .preview-remove:hover { background: var(--brick); }
.previews .preview-remove:focus-visible, .previews .preview-remove:has(input:focus-visible) { outline: 3px solid var(--mustard); outline-offset: 1px; }
.previews li:has(.preview-remove input:checked) img { opacity: .3; }
.previews li:has(.preview-remove input:checked) .preview-remove { background: var(--brick); }
.previews li:has(.preview-remove input:checked)::after { content: attr(data-removing); position: absolute; inset: auto 0 50% 0; transform: translateY(50%); text-align: center; font-size: 11px; font-weight: 600; color: var(--heading); }
@media (max-width: 560px) {
  .tutorial-body.has-cover { grid-template-columns: 1fr 84px; gap: 12px; }
  .tutorial-cover img { width: 84px; height: 84px; }
  .md-help dl div { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Wiki de los tutoriales (Fase 3B)
   ========================================================================== */
.inline-form { display: inline; }
.inline-form .link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); text-decoration: underline; cursor: pointer; }
.wiki-line { font-size: 13.5px; margin: 10px 4px 0; }
.history { width: 100%; border-collapse: collapse; font-size: 14px; }
.history th { text-align: left; font-weight: 500; font-size: 12px; color: var(--text-soft); padding: 0 6px 8px; }
.history td { padding: 10px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.history td:nth-child(-n+2), .history th:nth-child(-n+2) { width: 34px; text-align: center; }
.history tr.current { background: color-mix(in srgb, var(--mustard) 8%, transparent); }
.history .rev-n { display: inline-block; min-width: 30px; color: var(--accent-text); }
.history time { font-size: 12.5px; margin-left: 4px; }
.history .rev-note { display: block; margin-top: 3px; color: var(--text); }
.history .rev-actions { text-align: right; white-space: nowrap; }
.diff { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.diff li { padding: 2px 10px 2px 26px; position: relative; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.55em; }
.diff li::before { position: absolute; left: 9px; color: var(--text-soft); }
.diff .del { background: color-mix(in srgb, var(--brick) 12%, var(--surface)); }
.diff .del::before { content: "−"; }
.diff .ins { background: color-mix(in srgb, var(--tier-5) 14%, var(--surface)); }
.diff .ins::before { content: "+"; }
.diff .mod { background: color-mix(in srgb, var(--mustard) 10%, var(--surface)); }
.diff .mod::before { content: "~"; }
.diff del { background: color-mix(in srgb, var(--brick) 28%, transparent); text-decoration: line-through; border-radius: 3px; }
.diff ins { background: color-mix(in srgb, var(--tier-5) 30%, transparent); text-decoration: none; border-radius: 3px; }
.diff .skip { color: var(--text-soft); font-style: italic; background: var(--surface-2); text-align: center; padding-left: 10px; }
.diff-block + .diff-block { margin-top: 14px; }
.revert-form { margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   Recursos descargables (Fase 3C)
   ========================================================================== */
.post-type.r { background: color-mix(in srgb, var(--brick) 12%, var(--surface)); color: var(--heading); }
.post-type.h { background: color-mix(in srgb, var(--mustard) 12%, color-mix(in srgb, var(--brick) 8%, var(--surface))); color: var(--heading); }
.resource-body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.resource-thumb { width: 96px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 2px 3px 0 var(--line); }
.resource-thumb img { width: 100%; height: 100%; object-fit: cover; }
.resource-thumb .format { font-size: 13px; font-weight: 600; color: var(--accent-text); letter-spacing: .06em; }
.resource-thumb.big { width: 150px; }
.resource-meta { font-size: 12px; margin: 2px 0 6px; }
.download-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.resource-cover { width: 240px; max-width: 100%; height: auto; border-radius: var(--r); background: var(--surface-2); }
.download-info { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.download-info .mono { font-size: 13px; }
.resource-file-line { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.resource-cover-now { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; }
.resource-cover-now img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.resource-cover-now label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
@media (max-width: 560px) {
  .resource-body { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .resource-thumb { width: 72px; }
  .download-card { grid-template-columns: 1fr; }
  .resource-cover { width: 100%; }
}

/* ==========================================================================
   Colecciones (Fase 3D)
   ========================================================================== */
.collect-box { margin-top: 12px; font-size: 14px; }
.collect-box summary { cursor: pointer; color: var(--accent-text); width: fit-content; }
.collect-form { display: grid; gap: 6px; max-width: 420px; margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.collect-form label { font-size: 13px; font-weight: 500; color: var(--heading); margin-top: 4px; }
.collect-form .btn { justify-self: start; margin-top: 6px; }
.new-collection summary { cursor: pointer; font-weight: 600; color: var(--heading); }
.new-collection form { margin-top: 14px; }
.collection-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.collection-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; color: inherit; }
.collection-card:hover { border-color: var(--line-strong); }
.collection-cover { aspect-ratio: 16 / 9; background: linear-gradient(135deg, color-mix(in srgb, var(--mustard) 25%, var(--surface-2)), var(--surface-2)); display: block; }
.collection-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.collection-body strong { color: var(--heading); font-size: 15px; }
.collection-body .mono { font-size: 12px; }
.collection-body .tier { width: fit-content; }
.collection-desc { font-size: 13px; color: var(--text-soft); }
.collection-entry { display: flex; flex-direction: column; gap: 6px; }
.collection-entry-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 6px; }
.collection-note { font-size: 14px; color: var(--text); font-style: italic; margin: 0; }
.collection-tools { display: flex; gap: 14px; margin-left: auto; font-size: 13px; }
.collection-tools form { display: inline; }
.collection-tools .link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; }

/* ==========================================================================
   Retos semanales (Fase 3E)
   ========================================================================== */
.post-type.c { background: color-mix(in srgb, var(--mustard) 22%, var(--surface)); color: var(--heading); }
.challenge-hero { display: flex; flex-direction: column; gap: 6px; color: inherit; border-left: 4px solid var(--mustard); }
.challenge-hero.voting { border-left-color: var(--brick); }
.challenge-hero:hover { border-color: var(--line-strong); }
.challenge-phase { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-text); }
.challenge-title { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--heading); line-height: 1.2; }
.challenge-desc { color: var(--text); font-size: 14.5px; }
.challenge-dates { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 4px; font-size: 14px; }
.challenge-dates li { padding: 6px 10px; border-radius: var(--r); color: var(--text-soft); }
.challenge-dates li.now { background: color-mix(in srgb, var(--mustard) 14%, var(--surface)); color: var(--heading); font-weight: 500; }
.challenge-dates .mono { display: inline-block; min-width: 118px; font-size: 12px; }
.challenge-enter .eligible { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.challenge-enter .eligible li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.challenge-enter .withdraw .link, .challenge-cta .link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); cursor: pointer; text-decoration: underline; }
.challenge-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.challenge-cta p { margin: 0; }
.challenge-entry { display: flex; flex-direction: column; gap: 6px; }
.entry-vote, .entry-result { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 0 6px; }
.podium-badge { font-family: var(--font-mono); font-weight: 600; padding: 2px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--heading); }
.podium-badge.p1 { background: var(--mustard); color: #3a2a05; }
.podium-badge.p2 { background: color-mix(in srgb, var(--text-soft) 30%, var(--surface)); }
.podium-badge.p3 { background: color-mix(in srgb, var(--brick) 28%, var(--surface)); }
.challenge-archive { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.challenge-archive > li { display: flex; flex-direction: column; gap: 4px; }
.challenge-archive .mono { font-size: 12px; }
.mini-podium { list-style: none; padding: 0; margin: 4px 0 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.mini-podium .place { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; background: var(--surface-2); margin-right: 4px; }
.mini-podium .p1 .place { background: var(--mustard); color: #3a2a05; }
.approve-week { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.approve-week select { width: auto; }
.notice-icon.is-challenge { background: var(--brick); }

/* Moderadores de estilo (Fase 4B) */
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.assigned { display: inline-flex; gap: 6px; align-items: baseline; margin-left: 10px; }
@media (max-width: 560px) { .inline-fields { grid-template-columns: 1fr; } }

/* Apelaciones (Fase 4C) */
.appeal-status { margin-top: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); font-size: 14px; }
.appeal-status.reversed { background: color-mix(in srgb, var(--tier-5) 14%, var(--surface)); }
.appeal-status p { margin: 4px 0 0; }
.appeal-body { font-style: italic; margin: 8px 0; }
.resolve-form { display: grid; gap: 6px; max-width: 520px; }
.resolve-form .btn { justify-self: start; }

/* Señales y suspensiones (Fase 4D) */
.signal-people { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; font-size: 14px; }
.signal-people .mono { font-size: 12px; margin-left: 6px; }
.signal-data { font-size: 14px; }
.signal-data p { margin: 2px 0; }
.suspension-box summary { cursor: pointer; color: var(--accent-text); }
.suspension-box form { display: grid; gap: 6px; margin-top: 10px; max-width: 480px; }
.suspension-box .btn { justify-self: start; }

/* Panel de salud (Fase 4E) */
.health-grid { grid-template-columns: 1fr 1fr; margin: 16px 0; }
.export-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 14px; }
.export-ready .soft { font-size: 13px; }

/* ---------- Buscador del foro ---------- */
.search-filters { margin: 4px 0 12px; }
.search-solved { margin: 0; align-items: center; font-size: 13.5px; }
.search-results { padding: 0; overflow: hidden; }
.search-count { padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 13px; }
.search-hit { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.search-hit:last-child { border-bottom: 0; }
.search-excerpt, .search-comment { font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.search-comment { padding-left: 12px; border-left: 3px solid var(--line); }
.search-results mark { background: color-mix(in srgb, var(--mustard) 38%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-empty { padding: 28px 20px; text-align: center; }
@media (max-width: 760px) { .search-hit, .search-count { padding-left: 16px; padding-right: 16px; } }

/* ---------- Bienvenida guiada ---------- */
.onboarding { display: flex; flex-direction: column; gap: 16px; }
.onboarding-step { display: flex; flex-direction: column; gap: 10px; }
.onboarding-step form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.onboarding-step textarea { width: 100%; }
.onboarding-step .style-picker { border: 0; padding: 0; margin: 0; width: 100%; }
.onboarding-step .style-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 4px 16px; }
.onboarding-step .style-options .check { margin: 0; min-height: 28px; align-items: center; }
.onboarding-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--heading); }
.step-num { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--heading); font-family: var(--font-mono); font-size: 14px; }
.onboarding-step.done .step-num { background: var(--tier-5); color: #fff; }
.onboarding-people { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.onboarding-people li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); }
.onboarding-people .avatar { grid-row: span 2; }
.onboarding-people .who { color: var(--heading); font-size: 14px; overflow-wrap: anywhere; }
.onboarding-meta { font-size: 12.5px; grid-column: 2; }
.onboarding-people .follow-form { grid-column: 1 / -1; margin-top: 6px; }
.onboarding-people .follow-form .btn { width: 100%; justify-content: center; }
.onboarding-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.onboarding-actions form { margin: 0; }
.onboarding-card .onboarding-actions { margin-top: 12px; }

/* ---------- Estado del sistema (administración) ---------- */
.st-ok { --st: var(--tier-5); }
.st-warn { --st: #85600F; } /* mostaza oscurecido: 5,5:1 sobre crema */
[data-theme="dark"] .st-warn { --st: var(--mustard); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-warn { --st: var(--mustard); } }
.st-fail { --st: var(--accent-text); }
.sys-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 16px; font-weight: 600; color: var(--heading); border-left: 4px solid var(--st); }
.sys-summary .soft { font-size: 13px; font-weight: 400; }
.sys-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--st); color: var(--surface); font-size: 14px; }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.sys-checks { list-style: none; padding: 0; margin: 8px 0 0; }
.sys-checks li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sys-checks li:first-child { border-top: 0; }
.sys-status { grid-row: span 3; align-self: start; font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--st); padding-top: 2px; }
.sys-label { font-weight: 600; color: var(--heading); }
.sys-value { color: var(--text); overflow-wrap: anywhere; }
.sys-hint { font-size: 12.5px; color: var(--text-soft); }
.sys-error { overflow-wrap: anywhere; font-size: 13px; }
.sys-when { white-space: nowrap; }
.sys-mail-test { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.sys-mail-test fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sys-mail-test legend { padding: 0; margin-bottom: 4px; font-weight: 600; color: var(--heading); font-size: 14px; }
.sys-mail-test .check { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.sys-mail-test .form-note, .sys-mail-test .field-error { margin: 0; }
.sys-mail-error { border-left: 4px solid var(--accent-text); padding: 4px 0 4px 12px; font-size: 13.5px; }
.sys-mail-error p { margin: 0 0 4px; }
.sys-mail-error .mono { overflow-wrap: anywhere; color: var(--text); }
@media (max-width: 520px) { .sys-checks li { grid-template-columns: 1fr; } .sys-status { grid-row: auto; } }
/* Panel › Sistema › Cola: en el móvil, cada trabajo es una ficha con sus etiquetas. */
.queue-stuck { border-left: 4px solid var(--accent-text); padding: 4px 0 4px 12px; color: var(--accent-text); font-size: 14px; }
.queue-work { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.queue-work .form-note { margin: 0; }
.queue-table .queue-to { white-space: nowrap; }
.queue-table .queue-actions { white-space: nowrap; }
.queue-table .queue-actions form { margin: 0; }
.queue-table details form { margin-top: 6px; }
@media (max-width: 640px) {
  .data-table.queue-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table.queue-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .data-table.queue-table td { display: block; border: 0; padding: 2px 0; text-align: left; }
  .data-table.queue-table td.num { text-align: left; }
  .data-table.queue-table td[data-label]::before { content: attr(data-label) " · "; font-size: 12px; color: var(--text-soft); }
  .data-table.queue-table .queue-actions { display: flex; gap: 16px; align-items: baseline; padding-top: 6px; }
}
/* Panel › Servidor */
.st-unknown { --st: var(--text-soft); }
.srv-request { grid-column: 2; font-size: 13px; }
@media (max-width: 520px) { .srv-request { grid-column: auto; } }
.srv-request > summary { cursor: pointer; color: var(--accent-text); width: fit-content; }
.srv-request p { margin: 6px 0; color: var(--text); }
.srv-request pre, .srv-all { margin: 6px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.srv-all { max-height: 420px; overflow: auto; }
.srv-recheck { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 18px; }
.srv-progress { margin: 10px 0 0; }
.choice.is-disabled { opacity: .6; cursor: not-allowed; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; margin-top: 8px; }
.data-table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--text-soft); padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line-strong); }
.data-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); color: var(--heading); }
.data-table .num { text-align: right; }
@media (max-width: 900px) { .health-grid { grid-template-columns: 1fr; } }

/* Administración: usuarios */
.back-link { font-size: 14px; width: fit-content; }
.admin-link { font-size: 14px; }
.auth-alt { margin-top: 16px; text-align: center; font-size: 14px; }
.user-filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; }
.user-filters .field { margin: 0; }
.user-filters .form-actions { margin: 0 0 2px; }
.user-state { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-state { display: inline-block; font-size: 11.5px; line-height: 1.5; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-soft); white-space: nowrap; }
.tag-state.ok { border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--good); }
.tag-state.warn { border-color: color-mix(in srgb, var(--bad) 45%, transparent); color: var(--bad); }
.facts { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin-top: 12px; font-size: 14.5px; }
.facts dt { color: var(--text-soft); }
.facts dd { color: var(--heading); overflow-wrap: anywhere; }
.facts-title { font-size: 15px; font-weight: 600; color: var(--heading); margin-top: 22px; }
.data-table .nowrap { white-space: nowrap; }
.data-table .ua { font-size: 12.5px; color: var(--text-soft); overflow-wrap: anywhere; }
.temp-password { border-color: var(--highlight); }
.temp-password code { font-size: 17px; letter-spacing: .04em; user-select: all; }
@media (max-width: 700px) {
  .user-filters { grid-template-columns: 1fr 1fr; }
  .user-filters .field:first-child { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 8px; }
}
.data-table td.when { width: 1%; padding-right: 20px; }
.landing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.landing-actions .btn { min-width: 150px; }
.form-note { font-size: 13px; color: var(--text-soft); margin: 2px 0 10px; }
.avatar.anon { background: var(--surface-2); color: var(--text-soft); }
.join-band { display: flex; flex-direction: column; gap: 16px; }
.join-band h1 { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.1; color: var(--heading); margin-bottom: 8px; }
.join-band h1 .accent { color: var(--accent-text); }
.join-band p { color: var(--text-soft); }
.join-band .landing-actions { justify-content: flex-start; margin-top: 0; }
.join-waitlist .waitlist { margin: 10px 0 0; max-width: none; }
/* Cabecera sin cuenta: «Entrar» siempre a la vista; el menú de secciones cuando no caben en la cabecera. */
.guest-menu { display: none; }
@media (max-width: 1100px) { .guest-menu { display: block; } }
.menu-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; color: var(--heading); }
.menu-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 900px) {
  .header-actions .btn.guest-login { display: inline-flex; }
}
/* Móvil estrecho: logo + Entrar + Crear cuenta + menú no caben; «Crear cuenta» pasa al menú. */
.user-menu .menu a.menu-signup { display: none; }
@media (max-width: 480px) {
  .site-header .header-actions .btn.guest-signup { display: none; }
  .user-menu .menu a.menu-signup { display: block; font-weight: 600; color: var(--accent-text); border-bottom: 1px solid var(--line); border-radius: 9px 9px 0 0; margin-bottom: 6px; }
}
.choices { display: grid; gap: 8px; border: 0; padding: 0; margin: 0 0 8px; }
.choices legend { font-weight: 600; color: var(--heading); font-size: 14px; margin-bottom: 6px; }
/* Ajustes › Idioma: en qué idiomas se ven los temas (debajo del idioma de la interfaz). */
.content-locales { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.content-locales .check { margin-bottom: 0; font-size: 14px; color: var(--text); }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 14px; }
.choice:has(input:checked) { border-color: var(--teal); background: var(--surface-2); }
.choice input { margin-top: 3px; accent-color: var(--teal); flex-shrink: 0; }
.choice strong { color: var(--heading); margin-right: 4px; }
.friend-form { display: inline-flex; flex-direction: column; margin: 0; }
.friend-form .btn { min-width: 150px; justify-content: center; }
.friend-form .off { display: none; }
.friend-form .is-friend:hover .on, .friend-form .is-friend:focus-visible .on,
.friend-form .is-sent:hover .on, .friend-form .is-sent:focus-visible .on { display: none; }
.friend-form .is-friend:hover .off, .friend-form .is-friend:focus-visible .off,
.friend-form .is-sent:hover .off, .friend-form .is-sent:focus-visible .off { display: inline; color: var(--accent-text); }
.profile-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.profile-restricted { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.profile-restricted h1 { font-family: var(--font-display); font-weight: 400; font-size: 34px; color: var(--heading); line-height: 1.1; }
.profile-restricted .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 600px) { .profile-restricted { grid-template-columns: 1fr; justify-items: start; } }
.request-actions { display: flex; gap: 6px; margin-left: auto; } .request-actions form { margin: 0; }
/* El avatar-enlace de las listas de personas no hereda el inline-flex de sus enlaces (la inicial se descentraba). */
.people a.avatar { display: inline-grid; place-items: center; gap: 0; }
@media (max-width: 900px) { .stats > .stat:last-child:nth-child(odd) { grid-column: span 2; border-right: 0; } }
.people li { flex-wrap: wrap; }
.people li .who { flex: 1 1 180px; min-width: 0; }
/* Estado en línea */
.avatar.online { position: relative; }
.avatar.online::after { content: ""; position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--surface); }
.avatar.lg.online::after { right: 6%; bottom: 6%; width: 18%; height: 18%; box-shadow: 0 0 0 4px var(--surface); }
.presence { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); }
.presence.on { color: var(--good); }
.presence.on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.online-box .online-people { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.online-box .online-people a { display: inline-flex; }
.online-box .online-people { list-style: none; padding: 0; }
/* Marca de agua (panel) */
.wm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.wm-toggle { margin-bottom: 14px; font-size: 15px; }
.wm-preview { margin: 0; }
.wm-preview img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.wm-preview figcaption { font-size: 12.5px; margin-top: 6px; }
.wm-progress progress { width: 100%; height: 10px; accent-color: var(--teal); }
.wm-progress p { font-size: 14px; color: var(--text-soft); margin-top: 6px; }
@media (max-width: 800px) { .wm-grid { grid-template-columns: 1fr; } }
/* Un segundo apartado dentro de la misma tarjeta de ajustes (p. ej. Lista de espera bajo Registro). */
.settings-section form + .section-title { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.guest-menu .menu-nav { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

/* ---------- Temas (estilo foro) ---------- */
.topic-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.topic-filters .input-sm { width: auto; padding: 7px 10px; font-size: 13.5px; }
.topic-list { padding: 0; overflow: hidden; }
.topic-head, .topic { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px 84px 190px; gap: 12px; align-items: center; padding: 12px 20px; }
.topic-head { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.topic-head span:not(:first-child) { text-align: center; }
.topic-head span:last-child { text-align: left; }
.topic { border-bottom: 1px solid var(--line); }
.topic:last-child { border-bottom: 0; }
.topic:hover { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.topic-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--heading); }
.topic-title a:hover { color: var(--accent-text); }
.topic-title .post-type { font-size: 10px; margin-right: 6px; vertical-align: 2px; }
.topic-solved { font-family: var(--font-mono); font-size: 10.5px; color: var(--tier-5); text-transform: uppercase; letter-spacing: .05em; margin-left: 6px; white-space: nowrap; }
.topic-meta { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; }
.topic-meta a:hover, .topic-last a:hover { color: var(--accent-text); }
.topic-stats { display: contents; }
.topic-stats > div { text-align: center; }
.topic-stats dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* se ve la cabecera; el lector de pantalla oye «Consejos 3» */
.topic-stats dd { font-family: var(--font-mono); font-size: 14px; color: var(--heading); }
.topic-stats dd small { display: block; font-size: 10.5px; color: var(--accent-text); }
.topic-stats .on dd { font-weight: 700; }
.topic-last { font-size: 12.5px; line-height: 1.4; color: var(--text); }
.topic-last time { display: block; color: var(--text-soft); }
.topic-last a { font-weight: 600; color: var(--heading); }
.topic-empty { padding: 28px 20px; text-align: center; }
@media (max-width: 760px) {
  .topic-head { display: none; }
  .topic { grid-template-columns: 1fr; gap: 6px; padding: 12px 16px; }
  .topic-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .topic-stats > div { display: flex; gap: 4px; align-items: baseline; text-align: left; }
  .topic-stats dt { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: inline; font-size: 12px; color: var(--text-soft); order: 2; }
  .topic-stats dd { font-size: 12.5px; display: flex; gap: 4px; align-items: baseline; }
  .topic-stats dd small { display: inline; }
  .topic-last time { display: inline; margin-left: 4px; }
}
@media (min-width: 761px) { .forum-head, .forum-row { grid-template-columns: minmax(0, 1fr) 84px 84px 280px; } }
.forum-row .topic-title { font-size: 16.5px; }
.listing-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Encuestas de las preguntas ---------- */
.poll { display: flex; flex-direction: column; gap: 12px; }
.poll-title { font-size: 16px; font-weight: 600; color: var(--heading); }
.poll-title .soft { font-size: 13.5px; font-weight: 400; }
.poll-results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.poll-results li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; }
.poll-results li.mine .poll-label { font-weight: 600; color: var(--heading); }
.poll-count { color: var(--text-soft); }
.poll-bar { grid-column: 1 / -1; width: 100%; height: 8px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); appearance: none; -webkit-appearance: none; }
.poll-bar::-webkit-meter-bar { background: var(--surface-2); border: 0; border-radius: var(--r-pill); height: 8px; }
.poll-bar::-webkit-meter-optimum-value, .poll-bar::-webkit-meter-suboptimum-value, .poll-bar::-webkit-meter-even-less-good-value { background: var(--accent-text); border-radius: var(--r-pill); }
.poll-bar::-moz-meter-bar { background: var(--accent-text); border-radius: var(--r-pill); }
.poll-vote summary { cursor: pointer; font-size: 14px; color: var(--accent-text); font-weight: 600; }
.poll-vote form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; align-items: flex-start; }
.poll-vote fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.poll-option { display: flex; gap: 8px; align-items: center; font-size: 14.5px; min-height: 28px; cursor: pointer; }
.poll-option input { accent-color: var(--accent-text); width: 18px; height: 18px; }
.poll-fields summary { cursor: pointer; font-weight: 600; color: var(--heading); font-size: 14.5px; }
.poll-fields[open] { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Firma bajo los consejos ---------- */
.comment-signature { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--text-soft); font-style: italic; overflow-wrap: anywhere; }

/* ---------- Pie «¿Quién está en línea?» (estilo foro) ---------- */
.board { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 55%, transparent); padding: 28px 24px 48px; }
.board-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px 40px; }
.board-block h2 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); margin-bottom: 10px; }
.board-block p { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.board-block p + p { margin-top: 6px; }
.board-block strong { color: var(--heading); font-family: var(--font-mono); font-weight: 600; }
.board-block a:not(.link) { color: var(--heading); font-weight: 600; }
.board-block a:hover { color: var(--accent-text); }
.board-names { color: var(--text-soft); }
.board-links a:not(.link) { font-weight: 400; color: var(--text-soft); }
@media (max-width: 760px) { .board-inner { grid-template-columns: 1fr; } .board { padding: 24px 16px 40px; } }

/* ---------- Inicio en dos columnas (escritorio) ---------- */
.page.home-page { max-width: 1240px; }
.home-grid { display: flex; flex-direction: column; gap: 24px; }
.home-side, .home-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.topic-mini ol { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.topic-mini li { display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.35; }
.topic-mini li a { color: var(--heading); font-weight: 600; }
.topic-mini li a:hover { color: var(--accent-text); }
.topic-mini li .soft { font-size: 12px; }
@media (min-width: 1024px) {
  .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; gap: 24px 28px; align-items: start; }
  .home-grid > .home-side { grid-column: 2; grid-row: 1; }
  .home-grid > .home-main { grid-column: 1; grid-row: 1 / span 2; }
  .home-grid > .home-topics { grid-column: 2; grid-row: 2; }
}

/* ---------- Mensajes privados ---------- */
.dm-inbox { padding: 0; overflow: hidden; }
.dm-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); color: var(--text); }
.dm-row:last-child { border-bottom: 0; }
.dm-row:hover { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.dm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-row-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.dm-row-top strong { color: var(--heading); font-weight: 600; }
.dm-row-top time { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.dm-row-last { font-size: 13.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row.unread .dm-row-top strong, .dm-row.unread .dm-row-last { color: var(--heading); font-weight: 700; }
.dm-empty { padding: 28px 20px; text-align: center; }
.dm-head { display: flex; align-items: center; gap: 12px; }
.dm-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dm-name { font-weight: 600; color: var(--heading); }
.dm-more { position: relative; font-size: 13px; }
.dm-more summary { cursor: pointer; color: var(--text-soft); list-style: none; }
.dm-more-menu { position: absolute; right: 0; top: 100%; z-index: 5; margin-top: 6px; padding: 10px 14px; display: grid; gap: 8px; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lift); }
.dm-thread { display: flex; flex-direction: column; gap: 10px; }
.dm-msg { max-width: min(78%, 560px); align-self: flex-start; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.dm-msg.mine { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: color-mix(in srgb, var(--teal) 12%, var(--surface)); }
.dm-body { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.dm-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 4px; font-size: 11.5px; color: var(--text-soft); }
.dm-msg.mine .dm-meta { justify-content: flex-end; }
.dm-form textarea { min-height: 80px; }
.mod-context { margin: 8px 0; font-size: 13px; color: var(--text-soft); }
.mod-context summary { cursor: pointer; }
@media (max-width: 560px) { .dm-msg { max-width: 90%; } }

/* ---------- Temas: seguir, nuevo, fijados, citas ---------- */
.obra-actions { flex-wrap: wrap; }
.obra-actions form { margin: 0; }
.act.follow-topic svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.act.follow-topic[aria-pressed="true"] { color: var(--heading); }
.act.follow-topic[aria-pressed="true"] svg { fill: currentColor; }
/* Texto pequeño: acento oscurecido (claro) o aclarado (oscuro) con el color de la tarjeta, ≥ 5,8:1. */
.topic-new { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--surface); background: var(--accent-text); border-radius: var(--r-pill); padding: 1px 7px; margin-left: 6px; white-space: nowrap; vertical-align: 2px; }
.topic.is-new .topic-title a { color: var(--heading); }
.topic:not(.is-new) .topic-title { font-weight: 500; }
.topic-pinned { font-size: 12px; margin-right: 4px; }
.topic-list.pinned { border-color: color-mix(in srgb, var(--mustard) 45%, var(--line)); }
.topic-list.pinned .topic-head { background: color-mix(in srgb, var(--mustard) 16%, var(--surface-2)); }
.topics-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.topics-bar form { margin: 0 0 0 auto; }
@media (max-width: 480px) { .topics-bar .segmented a { padding: 7px 10px; } }
/* «Solo con novedades»: interruptor que se suma al filtro de al lado. */
.chip-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 13.5px; color: var(--text-soft); }
.chip-toggle .box { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--text-soft); font-size: 11px; line-height: 1; }
.chip-toggle[aria-current] { color: var(--heading); font-weight: 600; border-color: var(--accent-text); }
.chip-toggle[aria-current] .box { background: var(--accent-text); border-color: var(--accent-text); color: var(--surface); }
.chip-toggle:hover { border-color: var(--text-soft); }

/* Páginas de consejos de un tema. */
.comment-page-of { font-family: var(--font-body); font-size: 14px; font-weight: 400; }
.best-comments { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); padding: 12px 14px; margin: 0 0 16px; }
.best-comments-title { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 600; margin: 0 0 8px; }
.best-comments ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.best-comment { display: grid; gap: 2px; padding: 8px 10px; margin: 0 -10px; border-radius: calc(var(--r) - 6px); color: var(--text); text-decoration: none; }
.best-comment:hover, .best-comment:focus-visible { background: var(--surface); }
.best-comment-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; }
.best-comment-author { font-weight: 600; }
.best-comment-text { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.draft-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--text-soft); margin: -4px 0 12px; }
.draft-note .link-btn { text-decoration: underline; text-underline-offset: 2px; }
.featured-comment { border: 1px solid var(--accent); border-radius: var(--r); background: var(--surface); padding: 12px 16px 10px; margin: 0 0 16px; }
.featured-comment .best-comment-head { margin: 0 0 6px; }
.featured-comment-link { font-size: 13px; margin: 8px 0 0; }
.featured-tag { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-text); }
.comment-new { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: var(--r-pill); background: var(--accent-text); color: var(--surface); }
.topic-news-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--text-soft); margin: 0 0 12px; }
.saved-comments { display: grid; gap: 12px; }
.related-topics { margin-top: 20px; }
.related-topics ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.related-topics li { display: grid; gap: 2px; }
.related-topics li a { font-weight: 600; color: var(--heading); overflow-wrap: anywhere; }
.related-topics li .soft { font-size: 13px; }
.related-more { margin: 12px 0 0; font-size: 14px; }
.bot-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.captcha { margin: 4px 0 14px; }
.captcha-question { display: grid; gap: 6px; }
.captcha [hidden] { display: none; } /* la regla de arriba ganaría al atributo hidden */
.captcha-question .input { max-width: 8rem; }
.captcha-status { font-size: 13px; margin: 0; }
.saved-comment-topic { font-weight: 600; margin: 0; }
.saved-comment-topic a { color: var(--heading); }
.saved-comment-meta { font-size: 13px; margin: 2px 0 8px; }
.saved-comment-text { margin: 0 0 6px; line-height: 1.5; overflow-wrap: anywhere; }
.comment-save[aria-pressed="true"] { color: var(--accent-text); font-weight: 600; }
.comment-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 14px; font-size: 14px; }
.comment-pager a, .comment-pager [aria-current] { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text); }
.comment-pager a:hover { border-color: var(--text-soft); }
.comment-pager [aria-current] { background: var(--accent-text); border-color: var(--accent-text); color: var(--surface); font-weight: 600; }
.comment-pager .gap { color: var(--text-soft); padding: 0 2px; }
.comment-edited { font-size: 12.5px; }
.topic-closed-note { color: var(--text-soft); }
blockquote.quote { margin: 4px 0 8px; padding: 6px 12px; border-left: 3px solid var(--line-strong); background: color-mix(in srgb, var(--surface-2) 60%, transparent); border-radius: 0 10px 10px 0; color: var(--text-soft); font-size: .95em; }
@media (max-width: 760px) {
  .topic-list.pinned .topic-head { display: block; padding: 10px 16px; }
  .topic-list.pinned .topic-head span:not(:first-child) { display: none; }
}

/* Botón oscuro en modo oscuro: el verde azulado apenas se distinguía de la tarjeta (1,5:1); invertido, 11:1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-dark { background: #E6DCC4; color: #0F1F1C; }
  :root:not([data-theme="light"]) .btn-dark:hover { background: #FAF3E2; }
}
[data-theme="dark"] .btn-dark { background: #E6DCC4; color: #0F1F1C; }
[data-theme="dark"] .btn-dark:hover { background: #FAF3E2; }

/* ---- Panel del equipo (layouts/panel, panel/home) ---- */
.panel-shell { max-width: 1240px; margin: 0 auto; padding: 28px 24px 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } /* sin columna explícita, una tabla ancha la estira en móvil */
.panel-shell [hidden] { display: none !important; } /* hidden gana a los display de las clases (lección 2026-09-29) */
.panel-side { display: none; }
.panel-nav-mobile { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.panel-nav-mobile > summary { padding: 12px 16px; font-weight: 600; cursor: pointer; color: var(--heading); }
.panel-nav-mobile .panel-nav { padding: 0 10px 12px; }
@media (min-width: 960px) {
  .panel-shell { grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 36px; }
  .panel-side { display: block; position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 4px; }
  .panel-nav-mobile { display: none; }
}
.panel-nav { display: grid; gap: 2px; font-size: 14px; }
.panel-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: calc(var(--r) - 6px); color: var(--text); text-decoration: none; }
.panel-nav a:hover { background: var(--surface-2); }
.panel-nav a.is-current { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--heading); font-weight: 600; }
.panel-nav-home { justify-content: flex-start !important; font-weight: 600; }
.panel-nav-group { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; padding: 0 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.panel-nav-group .panel-icon { width: 16px; height: 16px; color: var(--accent-text); }
.panel-nav-home .panel-icon { width: 18px; height: 18px; color: var(--accent-text); }
.panel-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.panel-crumbs { font-size: 13px; color: var(--text-soft); display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.panel-crumbs a { color: var(--accent-text); }
.panel-head { margin-bottom: 20px; }
.panel-main { min-width: 0; display: grid; gap: 28px; align-content: start; }
.panel-main > .panel-crumbs, .panel-main > .panel-head { margin-bottom: -16px; }
.panel-section-title { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 600; margin: 0 0 12px; }
.panel-row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.panel-row-head .panel-section-title { margin: 0; }
.panel-todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.panel-todo-tile { display: grid; gap: 2px; padding: 16px 18px; text-decoration: none; color: var(--text); border-left: 4px solid var(--accent); transition: transform .12s ease; }
.panel-todo-tile:hover { transform: translateY(-2px); }
.panel-todo-count { font-size: 34px; font-weight: 600; line-height: 1.1; color: var(--heading); }
.panel-todo-label { font-size: 13.5px; color: var(--text-soft); }
.panel-todo-tile.is-zero { border-left-color: var(--line-strong); }
.panel-todo-tile.is-zero .panel-todo-count { color: var(--text-soft); font-weight: 400; }
.panel-todo-clear { margin: 10px 0 0; font-size: 14px; }
.panel-alerts { padding: 18px 20px; border-color: color-mix(in srgb, var(--mustard) 55%, var(--line)); }
.panel-alerts ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.panel-alert { display: flex; gap: 10px; align-items: baseline; }
.panel-alert-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--mustard); transform: translateY(-1px); }
.panel-alert.fail .panel-alert-dot { background: var(--bad); }
.panel-search input { width: min(280px, 70vw); }
.panel-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.panel-group { padding: 20px 20px 10px; display: grid; gap: 10px; align-content: start; }
.panel-group-head { display: flex; gap: 14px; align-items: flex-start; }
.panel-group-head h3 { font-size: 17px; font-weight: 600; color: var(--heading); margin: 0; }
.panel-group-head p { font-size: 13px; margin: 2px 0 0; }
.panel-group-icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent-text); }
.panel-items { list-style: none; margin: 0; padding: 0; }
.panel-items li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.panel-items a { display: grid; gap: 1px; min-width: 0; text-decoration: none; color: var(--text); }
.panel-items a:hover .panel-item-label { color: var(--accent-text); }
.panel-item-label { font-weight: 600; font-size: 14.5px; color: var(--heading); display: flex; align-items: center; gap: 8px; }
.panel-item-hint { font-size: 12.5px; }
.panel-state { flex: none; font-family: var(--font-mono); font-size: 11px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); white-space: nowrap; }
.panel-search-empty { margin-top: 12px; }
.panel-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.panel-settings .settings-section { scroll-margin-top: 90px; }
/* Páginas del equipo dentro del panel: su envoltorio de siempre no suma márgenes ni ancho. */
.panel-main > .page { padding: 0; margin: 0; max-width: none; width: auto; }
.panel-main > * { min-width: 0; } /* como elementos de la rejilla, no encogen por debajo de su contenido: las tablas se desplazan dentro de su caja */
.panel-shell.no-side { max-width: 860px; }
.choice.is-disabled { cursor: not-allowed; opacity: .65; }
.choice .panel-state { margin: 0 4px; }

/* ---- Selector de tema (partials/theme-switch) ---- */
.theme-switch { display: inline-flex; flex-wrap: nowrap; max-width: 100%; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); }
@media (max-width: 420px) { .theme-switch:not(.is-compact) button { padding: 6px 10px; font-size: 13.5px; } }
.theme-switch button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; border: 0; background: transparent; color: var(--text-soft); font: inherit; font-size: 14px; padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; }
.theme-switch button:hover { color: var(--heading); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--heading); font-weight: 600; box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 18%, transparent); }
.theme-switch.is-compact button { padding: 4px 10px; font-size: 15px; line-height: 1; }
.user-menu .menu .theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; font-size: 14px; color: var(--text-soft); }
.user-menu .menu .theme-row form { margin: 0; }
/* Los botones del menú ocupan todo el ancho y tienen su relleno; los del tema, no. */
.user-menu .menu .theme-switch button { width: auto; padding: 4px 10px; border-radius: var(--r-pill); }
.user-menu .menu .theme-switch button[aria-pressed="true"], .user-menu .menu .theme-switch button[aria-pressed="true"]:hover { background: var(--surface); }
.footer-theme { display: inline-flex; vertical-align: middle; margin-left: 6px; }
/* Aviso de traducción en beta (partials/locale-beta): una línea discreta bajo los enlaces del pie. */
.locale-beta { display: block; margin-top: 10px; font-size: 12.5px; color: var(--text-soft); }
.locale-beta .tier { --tier-c: var(--tier-3); margin-right: 4px; }
.locale-beta .tier::before { content: none; }

/* ---- Editor de tutoriales (public/js/md-editor.js) ---- */
.md-editor { display: grid; gap: 8px; }
.md-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.md-toolbar button { border: 1px solid transparent; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; padding: 5px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.md-toolbar button:hover, .md-toolbar button:focus-visible, .md-toolbar button[aria-expanded="true"] { background: var(--surface); border-color: var(--line); color: var(--heading); }
.md-toolbar .md-b { font-weight: 700; }
.md-toolbar .md-i { font-style: italic; font-family: Georgia, serif; }
.md-toolbar .md-s { text-decoration: line-through; }
.md-images { position: relative; }
.md-image-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(320px, 80vw); max-height: 320px; overflow-y: auto; padding: 8px; display: grid; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px color-mix(in srgb, var(--text) 18%, transparent); }
.md-image-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.md-image-menu img { width: 48px; height: 36px; object-fit: cover; border-radius: 6px; }
.md-image-menu p { font-size: 13px; color: var(--text-soft); margin: 4px; }
.md-image-menu[hidden], .md-editor [hidden] { display: none; }
.md-tabs { display: flex; gap: 4px; }
.md-tabs button { border: 0; background: transparent; font: inherit; font-size: 14px; padding: 6px 12px; border-radius: 8px; color: var(--text-soft); cursor: pointer; }
.md-tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--heading); font-weight: 600; }
.md-panes { display: grid; gap: 12px; }
.md-live { min-height: 320px; max-height: 70vh; overflow-y: auto; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--surface); }
.md-live > .card { box-shadow: none; border: 0; padding: 0; background: transparent; }
.md-editor[data-tab="write"] .md-live { display: none; }
.md-editor[data-tab="preview"] .md-panes > textarea { display: none; }
@media (min-width: 1100px) {
  /* En escritorio, texto y vista a la vez: la página del tutorial se ensancha y el resto de campos no. */
  .tutorial-page:has(.md-editor) { max-width: 1240px; }
  .tutorial-page:has(.md-editor) .tutorial-form > :not(.field-md):not(.form-actions) { max-width: 820px; }
  .md-tabs { display: none; }
  .md-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .md-editor[data-tab] .md-live, .md-editor[data-tab] .md-panes > textarea { display: block; }
  .md-panes > textarea { min-height: 560px; }
  .md-live { max-height: none; height: 100%; min-height: 560px; }
}
/* Iconos propios dentro de un texto (<x-panel-icon class="inline-icon">): del tamaño de la letra. */
.inline-icon { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex: none; } /* los svg son de bloque por defecto (arriba) */
.topic-pinned .inline-icon { margin-right: 4px; color: var(--text-soft); }

/* ---- Nieve de Navidad (public/js/snow.js, App\Site\Seasonal) ---- */
.snow { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.snow-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 61; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text-soft); cursor: pointer;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--text) 14%, transparent); }
.snow-toggle:hover, .snow-toggle:focus-visible { color: var(--heading); }
.snow-toggle[aria-pressed="false"] { opacity: .7; }

/* ==========================================================================
   Generador de pautas (/pautas)
   ========================================================================== */
.guides { max-width: 1180px; }
.guide-style-pick { display: flex; gap: 8px; }
.guide-style-pick .input { flex: 1; min-width: 0; }
.guide-style-links a[aria-current="page"] { font-weight: 600; text-decoration: none; }
.guide-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
.guide-form { margin: 0; }
.guide-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.guide-fields .field { min-width: 0; }
.guide-preview { position: sticky; top: calc(var(--header-h) + 16px); }
.guide-sheet { background: #fff; border-radius: 4px; box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; }
.guide-sheet svg { display: block; width: 100%; height: auto; }
/* Sin ligaduras, alternativas ni ajustes de OpenType: el PDF no los aplica, y la vista previa tiene que ser igual
   que él (con «clig», Old Scientific Illustration cambia letras por otras más anchas y el renglón se salía). */
.guide-sheet text { font-kerning: none; font-variant-ligatures: none; font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "calt" 0, "dlig" 0, "swsh" 0; }
.guide-rows { margin: 10px 2px 0; font-size: 13px; }
.guide-preview .notice ul { margin: 6px 0 0; padding-left: 18px; }
.guide-help { margin-top: 28px; }
.guide-help ul { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 6px; }
@media (max-width: 900px) {
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-preview { position: static; }
}
.guide-model { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px 2px; margin: 4px 0 14px; }
.guide-model legend { font-weight: 600; color: var(--heading); font-size: 14px; padding: 0 6px; }
.guide-model .btn { align-self: flex-start; } /* «Otras palabras»: a su medida, no a todo el ancho */
.guide-font-sample { font-size: 30px; line-height: 1.3; color: var(--heading); margin: 0 0 4px; overflow-wrap: anywhere; }
.guide-font-styles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.stats-sub-link { font-size: 13px; font-weight: 500; margin-left: 8px; }

/* ==========================================================================
   Consejos sobre la foto (App\Forum\PhotoMark, public/js/photo-notes.js)
   ========================================================================== */
.mark-preview { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 13px; }
.mark-preview .photo-frame { width: min(260px, 100%); }
.mark-preview img { display: block; width: 100%; height: auto; border-radius: 8px; }
.photo-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.photo-mark { pointer-events: auto; cursor: pointer; }
.photo-mark-halo { fill: color-mix(in srgb, var(--brick) 22%, transparent); stroke: rgba(255, 255, 255, .85); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.photo-mark-dot { fill: var(--brick); stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.photo-mark-n { fill: #fff; font-family: var(--font-mono); font-weight: 600; pointer-events: none; }
.photo-mark:hover .photo-mark-dot, .photo-mark:focus-visible .photo-mark-dot { fill: var(--teal); }
.photo-mark:focus-visible { outline: none; }
.photo-mark:focus-visible .photo-mark-halo { stroke: var(--teal); stroke-width: 4px; }
.photo-mark.flash .photo-mark-halo, .photo-mark:target .photo-mark-halo { animation: mark-flash 1s ease-in-out 2; transform-box: fill-box; transform-origin: center; }
@keyframes mark-flash { 50% { transform: scale(1.6); opacity: .5; } }
.comment.flash { animation: comment-flash 2s ease-out; }
@keyframes comment-flash { 0%, 30% { background: color-mix(in srgb, var(--mustard) 25%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .photo-mark.flash .photo-mark-halo, .photo-mark:target .photo-mark-halo, .comment.flash { animation: none; } }

/* Ocultar o enseñar las marcas: una casilla y CSS, sin JavaScript. */
.photo-marks-label { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--text-soft); cursor: pointer; margin-bottom: -6px; }
.photo-marks-label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brick); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brick); }
.photo-marks-label:hover { color: var(--heading); border-color: var(--text-soft); }
.photo-marks-toggle:focus-visible + .photo-marks-label { outline: 2px solid var(--teal); outline-offset: 2px; }
.photo-marks-toggle:checked + .photo-marks-label .when-off, .photo-marks-toggle:not(:checked) + .photo-marks-label .when-on { display: none; }
.photo-marks-toggle:not(:checked) + .photo-marks-label::before { background: transparent; }
.photo-marks-toggle:not(:checked) ~ .gallery .photo-marks { display: none; }

/* En el consejo: el enlace a su marca. */
.comment-mark { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13px; color: var(--accent-text); }
.comment-mark svg { fill: none; stroke: currentColor; stroke-width: 2; }
.comment-mark:hover { text-decoration: underline; }

/* Al escribir: elegir el punto. */
.photo-pick { margin: 4px 0 12px; }
.photo-pick summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--heading); }
.photo-pick[open] { display: flex; flex-direction: column; gap: 8px; }
.photo-pick:not(.js) .photo-pick-js, .photo-pick.js .photo-pick-nojs { display: none; }
.pick-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-thumb { padding: 0; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; line-height: 0; }
.pick-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.pick-thumb[aria-pressed="true"] { border-color: var(--teal); }
.pick-stage { position: relative; align-self: flex-start; max-width: min(100%, 520px); cursor: crosshair; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); line-height: 0; touch-action: manipulation; }
.pick-stage[hidden] { display: none; }
.pick-stage:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pick-stage img { display: block; max-width: 100%; height: auto; max-height: 60vh; width: auto; user-select: none; -webkit-user-select: none; }
.pick-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pick-status { margin: 0; font-size: 13px; }
/* En pantallas estrechas la foto se ve pequeña: cada marca, más grande alrededor de su centro (el punto no se mueve). */
@media (max-width: 600px) { .photo-mark { transform-box: fill-box; transform-origin: center; transform: scale(1.5); } }
.guide-font-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 700px) { .guide-font-grid { grid-template-columns: minmax(0, 1fr); } }
.guide-font-notes { font-size: 13px; color: var(--text-soft); background: var(--surface-2); border-radius: 8px; padding: 8px 12px; margin: 6px 0; white-space: pre-line; }
.guide-font-nopreview { font-size: 13px; }
.guide-credit { margin: 10px 2px 0; font-size: 13px; }
.guide-credit-note { display: block; margin-top: 2px; }
.guide-font-grid .input[readonly] { background: var(--surface-2); color: var(--text-soft); cursor: default; }
.guide-font-missing { color: var(--accent-text); }
/* Fuentes subidas, por estilo (Panel › Fuentes de las pautas) */
.gf-summary { font-size: 14px; color: var(--text-soft); margin: 0 0 6px; }
.gf-uncovered { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-soft); margin: 0 0 8px; }
.gf-group { margin-top: 18px; }
.gf-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); }
.gf-group-head h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--heading); margin: 0; }
.gf-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); }
.gf-see { margin-left: auto; font-size: 13px; }
.gf-list { list-style: none; margin: 0; padding: 0; }
.gf-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.gf-row:last-child { border-bottom: 0; }
.gf-row:target { background: color-mix(in srgb, var(--mustard) 10%, transparent); box-shadow: -10px 0 0 color-mix(in srgb, var(--mustard) 10%, transparent), 10px 0 0 color-mix(in srgb, var(--mustard) 10%, transparent); }
.gf-sample { font-size: 28px; line-height: 1.25; color: var(--heading); overflow-wrap: anywhere; min-width: 0; }
.gf-nosample { font-size: 13px; color: var(--text-soft); }
.gf-meta { min-width: 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }
.gf-meta p { margin: 0; }
.gf-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--heading); }
.gf-row.is-inactive .gf-sample, .gf-detail.is-inactive .guide-font-sample { opacity: .5; }
.gf-detail .guide-font-sample { font-size: 36px; line-height: 1.25; margin: 0 0 6px; color: var(--heading); }
.gf-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: 13.5px; margin: 10px 0 0; }
.gf-facts div { display: contents; }
.gf-facts dt { color: var(--text-soft); font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.gf-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .gf-row { grid-template-columns: minmax(0, 1fr) auto; }
  .gf-sample { grid-column: 1 / -1; font-size: 24px; }
  .gf-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gf-facts dd { margin-bottom: 8px; }
}
.guide-missing { color: var(--accent-text); }

/* Cuándo se hizo una obra (mes y año) */
fieldset.made-on { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset.made-on legend { padding: 0; margin-bottom: 6px; }
.made-on-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; max-width: 360px; }

/* Mi evolución (/@usuario/evolucion) */
.evo-styles { display: flex; flex-wrap: wrap; gap: 8px; }
.evo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; color: var(--text-soft); }
.evo-chip span { font-family: var(--font-mono); font-size: 11.5px; }
.evo-chip:hover { border-color: var(--teal); color: var(--heading); }
.evo-chip[aria-current="page"] { border-color: var(--accent-text); color: var(--heading); font-weight: 600; }
.evo-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.evo-stats .evo-date { font-size: 22px; padding-top: 6px; }
.evo-gap { font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); margin-bottom: 14px; }
.evo-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.evo-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.evo-side figcaption { font-size: 14px; color: var(--text-soft); }
.evo-which { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); font-weight: 600; margin-right: 6px; }
.evo-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.evo-photo img { width: 100%; height: 100%; object-fit: contain; }
.evo-title { font-weight: 500; overflow-wrap: anywhere; }
.evo-choose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.evo-choose .field { margin-bottom: 0; }
.evo-share { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.evo-share .label { font-size: 13.5px; font-weight: 600; color: var(--heading); }
.evo-share-row { display: flex; gap: 8px; }
.evo-share-row .input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12.5px; }
.evo-timeline { display: flex; flex-direction: column; gap: 6px; }
.evo-timeline-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.evo-year { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--heading); margin-top: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.evo-year + .evo-works { margin-top: 8px; }
.evo-when { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }
.evo-works li { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.evo-works .work { width: 100%; }
.evo-works li.in-pair .work { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text); }
.evo-mark { white-space: normal; }
.evo-mark.is-first { border-color: color-mix(in srgb, var(--mustard) 60%, transparent); }
a.evo-mark:hover { color: var(--heading); }
.evo-pick { display: inline-flex; gap: 10px; font-size: 12.5px; }
.evo-pick a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }
.evo-pick a:hover { color: var(--heading); }
.evo-pick a[aria-current] { color: var(--accent-text); font-weight: 600; text-decoration: none; }
@media (max-width: 700px) {
  .evo-pair { grid-template-columns: minmax(0, 1fr); }
  .evo-choose { grid-template-columns: minmax(0, 1fr); }
}

/* Sugerencias (SuggestionController): el formulario, «Mis sugerencias» y Panel › Sugerencias. El estado va escrito;
   el punto de color solo acompaña. */
.suggestion { margin-bottom: 14px; }
.suggestion-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-soft); margin: 0 0 8px; }
.suggestion-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  font-size: 12px; font-weight: 600; color: var(--heading); }
.suggestion-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--text-soft)); }
.suggestion-status.is-new { --dot: var(--accent); }
.suggestion-status.is-studying { --dot: var(--highlight); }
.suggestion-status.is-done { --dot: var(--good); }
.suggestion-status.is-declined { --dot: var(--tier-1); }
.suggestion-body { white-space: pre-line; overflow-wrap: anywhere; margin: 0 0 10px; }
.suggestion-context { font-size: 13px; margin: 0 0 10px; overflow-wrap: anywhere; }
.suggestion-reply { border-left: 3px solid var(--heading); padding: 6px 0 6px 12px; margin-top: 10px; }
.suggestion-reply p { margin: 0; white-space: pre-line; }
.suggestion-reply .suggestion-reply-label { font-size: 12px; font-weight: 600; color: var(--heading); margin-bottom: 4px; }
.suggestion-types { font-size: 13px; margin: 10px 0 18px; }
.suggestion-types a[aria-current="page"] { font-weight: 600; text-decoration: none; }
.suggestion-admin { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }