/* ======================================================================
   No Cierres Los Ojos · bundle.css (todo el CSS junto)
   Archivos incluidos, en este orden:
     1. styles.css
     2. polish.css
     3. login.css
     4. editorial.css
     5. nav-i18n.css
     6. extras.css
     7. profile.css
     8. fixes.css
   ====================================================================== */


/* ======================================================================
   >>> INICIO: styles.css
   ====================================================================== */

/* =========================================================
   No Cierres Los Ojos
   Tipografía: Bricolage Grotesque (títulos) + Atkinson Hyperlegible (texto)
   Idea visual: una página de papel con anotaciones hechas con marcador amarillo.
   ========================================================= */

:root {
  --bg: #f5f6f7;
  --panel: #ffffff;
  --ink: #1c2128;
  --muted: #59636f;
  --line: #dadfe4;
  --brand: #1f4e5f;
  --brand-ink: #ffffff;
  --mark: #ffd84d;
  --mark-soft: #fff1b3;
  --red: #c1382b;
  --blue: #2b6a8c;
  --green: #2d7a5d;
  --violet: #7753a1;
  --danger: #a8321f;
  --danger-soft: #f8e3df;
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --text: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 10px;
}

:root[data-theme="dark"] {
  --bg: #12161b;
  --panel: #1b2128;
  --ink: #e8ecf0;
  --muted: #9ba6b2;
  --line: #2d353e;
  --brand: #7bbcd0;
  --brand-ink: #0d1a20;
  --mark-soft: rgba(255, 216, 77, 0.16);
  --red: #e5675a;
  --blue: #6aaed0;
  --green: #5fc19b;
  --violet: #b394d8;
  --danger: #f08e7e;
  --danger-soft: rgba(240, 142, 126, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.05rem;
  line-height: 1.6;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand); text-underline-offset: 3px; }
img { max-width: 100%; }
::selection { background: var(--mark); color: #1c2128; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.is-hidden { display: none !important; }

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

/* ---------- Formularios y botones ---------- */
label { display: grid; gap: 6px; font-weight: 700; font-size: 0.97rem; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-weight: 400;
}
input, select { min-height: 46px; padding: 0 12px; }
textarea { padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid color-mix(in srgb, var(--brand) 30%, transparent); border-color: var(--brand); }
input[type="file"] { padding: 9px 12px; height: auto; }

.check-row { display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--muted); }
.check-row input { width: 18px; height: 18px; min-height: 0; }

button[type="submit"], .cta-main, .admin-actions button:not(.ghost-button), .admin-hero-actions button:not(.ghost-button),
.reply-form button, .cat-row button, .btn-mark {
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
}
button[type="submit"]:hover, .cta-main:hover, .reply-form button:hover { filter: brightness(1.1); }

.ghost-button, .forum-toolbar button, .admin-actions .ghost-button, .admin-hero-actions .ghost-button {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}
.ghost-button:hover, .forum-toolbar button:hover { border-color: var(--ink); }

.btn-mark { background: var(--mark); color: #1c2128; }
.btn-mark:hover { filter: brightness(0.96); }

.text-btn { min-height: 42px; padding: 0 12px; border: 0; background: none; color: var(--muted); font-weight: 700; }
.text-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.danger-btn { min-height: 46px; padding: 0 18px; border: 1px solid var(--danger); border-radius: 8px; background: transparent; color: var(--danger); font-weight: 700; }
.danger-btn:hover { background: var(--danger-soft); }

.muted { color: var(--muted); font-size: 0.95rem; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Pantalla de entrada ---------- */
.access-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); }

.access-visual {
  display: flex;
  align-items: flex-end;
  padding: 56px;
  color: #fff;
  background:
    linear-gradient(0deg, rgba(14, 20, 26, 0.88) 0%, rgba(14, 20, 26, 0.35) 70%),
    url("https://images.unsplash.com/photo-1521295121783-8a321d551ad2?auto=format&fit=crop&w=1400&q=80") center / cover;
}
.access-copy { max-width: 36rem; display: grid; gap: 16px; }
.access-copy h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
.access-copy p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.88); }

.access-panel { display: grid; place-items: center; padding: 32px 20px; }
.access-card { width: min(420px, 100%); }

.brand-row, .brand { display: flex; align-items: center; gap: 12px; }
.brand-row strong { display: block; font-family: var(--display); font-size: 1.15rem; }
.brand-row small { color: var(--muted); }
.brand-logo { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--panel); }

.access-tabs { display: flex; gap: 22px; margin: 28px 0 20px; border-bottom: 1px solid var(--line); }
.auth-tab { padding: 10px 0; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font-weight: 700; }
.auth-tab.is-active { color: var(--ink); border-bottom-color: var(--mark); }

.auth-form { display: none; gap: 14px; }
.auth-form.is-active { display: grid; }
.access-note { margin-top: 18px; color: var(--muted); font-size: 0.93rem; }

/* ---------- Estructura de la app ---------- */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 256px minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  background: var(--panel);
}
.brand { padding: 0 8px; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.1rem; line-height: 1.15; text-decoration: none; }

.side-nav { display: grid; gap: 2px; }
.nav-label { margin: 18px 8px 4px; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.side-nav > .nav-label:first-child { margin-top: 0; }

.nav-item {
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  text-align: left;
  font-weight: 400;
}
.nav-item:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.nav-item.is-active { background: var(--mark); color: #1c2128; font-weight: 700; }
:root[data-theme="dark"] .nav-item.is-active { background: var(--mark-soft); color: var(--ink); box-shadow: inset 3px 0 0 var(--mark); }

.admin-group { display: grid; gap: 2px; margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }

.session-card { margin-top: auto; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.session-card span { display: block; color: var(--muted); font-size: 0.88rem; }
.session-card strong { display: block; margin: 2px 0 10px; overflow-wrap: anywhere; }
.session-card button { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: none; font-weight: 700; }
.session-card button:hover { border-color: var(--ink); }

.drawer-close { display: none; align-self: flex-end; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: none; font-weight: 700; }

.content { min-width: 0; padding: 0 32px 48px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 -32px 28px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
}
.topbar h2 { font-size: 1.5rem; margin-right: auto; }
@media (min-width: 1021px) {
  .topbar h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .top-actions { margin-left: auto; }
}
.top-actions { display: flex; align-items: center; gap: 10px; }
.top-actions input { width: min(320px, 28vw); border-radius: 999px; padding: 0 18px; }
.user-chip { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: none; }
.menu-toggle { display: none; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-weight: 700; }

.chips { display: none; gap: 8px; margin: 0 0 18px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-weight: 700; }
.chip.is-active { background: var(--mark); border-color: var(--mark); color: #1c2128; }

.app-message {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  max-width: min(92vw, 560px);
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.97rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s, transform 0.2s;
}
.app-message.show { opacity: 1; transform: translate(-50%, 0); }

.reader-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 5%, var(--panel));
  box-shadow: none;
}

.reader-player[hidden] { display: none; }
.reader-meta { display: grid; gap: 2px; min-width: 0; }
.reader-meta strong, .reader-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-meta span { color: var(--muted); font-size: 0.9rem; }
.reader-controls { display: flex; flex-wrap: wrap; gap: 7px; }
.reader-controls button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
}
.reader-controls button:hover { border-color: var(--brand); }
#readerPlay { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
#readerProgress { min-height: auto; accent-color: var(--brand); }

.page-view { display: none; max-width: 1080px; }
.page-view.is-active { display: block; }

/* ---------- Encabezados de página y secciones ---------- */
.page-head { margin-bottom: 28px; padding-left: 18px; border-left: 6px solid var(--mark); }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.page-head p { margin-top: 10px; max-width: 62ch; color: var(--muted); }
.page-head.t-red { border-left-color: var(--red); }
.page-head.t-blue { border-left-color: var(--blue); }
.page-head.t-green { border-left-color: var(--green); }
.page-head.t-violet { border-left-color: var(--violet); }
.admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.admin-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 44px 0 16px; }
.section-head h3 { font-size: 1.45rem; }
.section-head span { color: var(--muted); }

/* ---------- Inicio ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.hero-text h1 { font-size: clamp(2rem, 3.8vw, 3.1rem); max-width: 17ch; }
.hero-text p { margin-top: 18px; max-width: 46ch; font-size: 1.12rem; color: var(--muted); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.cta-link { padding: 8px 0; border: 0; background: none; color: var(--brand); font-weight: 700; text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 4px; text-underline-offset: 4px; }
.cta-link:hover { background: var(--mark-soft); }
.hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

.pulse-line { margin-top: 30px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); }
.pulse-line b { color: var(--ink); font-weight: 700; }

.topic-list { display: grid; }
.topic-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 16px 12px 16px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 5px solid var(--accent, var(--line));
  background: none;
  text-align: left;
}
.topic-row b { font-family: var(--display); font-size: 1.25rem; }
.topic-row span { color: var(--muted); }
.topic-row:hover { background: var(--mark-soft); }
.t-red { --accent: var(--red); }
.t-blue { --accent: var(--blue); }
.t-green { --accent: var(--green); }
.t-violet { --accent: var(--violet); }

.community-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.comm-item { display: grid; align-content: start; gap: 6px; padding: 0; border: 0; background: none; text-align: left; }
.comm-item b { font-family: var(--display); font-size: 1.25rem; text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 4px; text-underline-offset: 4px; width: fit-content; }
.comm-item span { color: var(--muted); }
.comm-item:hover b { background: var(--mark-soft); }

.about { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: center; margin-top: 52px; padding: 28px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
.about-logo { width: 150px; height: 150px; border-radius: 16px; object-fit: cover; }
.about h3 { font-size: 1.5rem; margin-bottom: 10px; }
.about p + p { margin-top: 10px; }
.about p { max-width: 62ch; color: var(--muted); }

.tips { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; margin: 0; }
.tips dt { font-weight: 700; }
.tips dd { margin: 2px 0 0; color: var(--muted); }

/* ---------- Noticias ---------- */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 24px; }
.news-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.news-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--line); }
.card-body { display: grid; gap: 8px; padding: 18px; }
.card-body h3 { font-size: 1.25rem; }
.card-body p { color: var(--muted); }
.card-body a { width: fit-content; font-weight: 700; }

.tag { display: inline-flex; align-items: center; gap: 7px; width: fit-content; color: var(--red); font-size: 0.9rem; font-weight: 700; }
.tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.tag.blue { color: var(--blue); }
.tag.green { color: var(--green); }
.tag.violet { color: var(--violet); }

.save-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.save-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.save-btn.is-saved { background: var(--mark); color: #1c2128; }
.save-btn.is-saved svg { fill: currentColor; }

.empty-state { grid-column: 1 / -1; padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }

/* ---------- Foro ---------- */
.forum-panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.forum-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.forum-form .full, .forum-form h3, .forum-form .muted { grid-column: 1 / -1; }
.forum-form h3 { font-size: 1.25rem; }

.forum-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 40px 0 14px; }
.forum-toolbar h3 { font-size: 1.45rem; }
.forum-toolbar button { min-height: 38px; font-size: 0.93rem; }

.forum-posts { display: grid; gap: 0; }
.post { padding: 18px 0; border-bottom: 1px solid var(--line); }
.post-header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.post-header strong { font-family: var(--display); }
.post-topic { padding: 1px 9px; border-radius: 999px; background: var(--mark-soft); font-size: 0.85rem; font-weight: 700; }
.post-time { color: var(--muted); font-size: 0.9rem; }
.post > p { margin-top: 8px; max-width: 70ch; overflow-wrap: anywhere; }
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; }
.post-actions button { padding: 4px 0; border: 0; background: none; color: var(--brand); font-weight: 700; }
.post-actions button:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-actions .link-danger { color: var(--danger); }
.post.is-reply { margin: 14px 0 0 18px; padding: 0 0 0 16px; border-bottom: 0; border-left: 3px solid var(--line); }
.reply-form { display: grid; gap: 8px; margin-top: 14px; max-width: 70ch; }
.reply-form button { justify-self: start; min-height: 40px; }

.avatar-img, .avatar-fallback { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.avatar-fallback { background: var(--brand); color: var(--brand-ink); font-family: var(--display); font-weight: 700; }
.avatar-img.sm, .avatar-fallback.sm { width: 34px; height: 34px; font-size: 0.95rem; }

/* ---------- Fuentes ---------- */
.source-list { display: grid; max-width: 720px; }
.source-list a { padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 700; text-decoration: none; }
.source-list a:hover { background: var(--mark-soft); }

/* ---------- Reels ---------- */
.fold { margin-bottom: 28px; }
.fold summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.fold form { margin-top: 18px; }

.reels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.reel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.reel-media { aspect-ratio: 9 / 14; background: #000; }
.reel-media video, .reel-media img, .reel-media iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.reel-info { display: grid; gap: 8px; padding: 14px; }
.reel-author { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reel-info p, .donation-card p { overflow-wrap: anywhere; }

/* ---------- Donaciones ---------- */
.safety-note { margin-bottom: 22px; padding: 14px 18px; border-left: 6px solid var(--mark); background: var(--mark-soft); border-radius: 0 var(--radius) var(--radius) 0; max-width: 78ch; }

.donation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 22px; }
.donation-card { display: grid; align-content: start; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.donation-card h3 { font-size: 1.25rem; }
.goal { color: var(--green); font-weight: 700; }
.donate-box { display: grid; gap: 8px; margin-top: 4px; padding: 12px; border-radius: 8px; background: var(--bg); }
.donate-box small { color: var(--muted); font-weight: 700; }
.pay-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; font-size: 0.97rem; }
.pay-line span { flex: 1 1 200px; }
.donate-btn, .copy-btn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.donate-btn:hover, .copy-btn:hover { border-color: var(--ink); }
.my-requests { display: grid; gap: 8px; }

.pay-box { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius); }
.pay-title { font-weight: 700; }
.pay-row { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr 1.1fr auto; gap: 8px; }
.pay-del { min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: none; }
.pay-del:hover { border-color: var(--danger); color: var(--danger); }
#payRows { display: grid; gap: 8px; }

/* ---------- Perfil ---------- */
.profile-card { display: flex; align-items: center; gap: 22px; padding: 4px 0 28px; }
.profile-card h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.profile-card p { margin: 2px 0 10px; color: var(--muted); overflow-wrap: anywhere; }
.avatar-wrap { position: relative; display: block; flex: 0 0 auto; cursor: pointer; }
.avatar { display: grid; place-items: center; width: 88px; height: 88px; overflow: hidden; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-family: var(--display); font-size: 2.2rem; font-weight: 700; }
.avatar .avatar-img, .avatar .avatar-fallback { width: 100%; height: 100%; font-size: 2.2rem; }
.avatar-edit { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--mark); color: #1c2128; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.role-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.9rem; font-weight: 700; }
.role-badge.is-admin { background: var(--mark); border-color: var(--mark); color: #1c2128; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.pref-panel { display: grid; align-content: start; gap: 14px; }
.pref-panel h3 { font-size: 1.25rem; }

/* ---------- Administración ---------- */
.admin-panel { display: grid; gap: 22px; max-width: 1080px; }
.admin-tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.admin-tab { flex: 0 0 auto; padding: 10px 0; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font-weight: 700; }
.admin-tab.is-active { color: var(--ink); border-bottom-color: var(--mark); }
.admin-pane { display: none; gap: 20px; }
.admin-pane.is-active { display: grid; }

.admin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.admin-form .full, .admin-actions { grid-column: 1 / -1; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.img-preview { width: 100%; max-height: 200px; border-radius: 8px; object-fit: cover; }

.admin-toolbar { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-toolbar input { flex: 1 1 220px; }
.admin-toolbar select { flex: 0 0 auto; width: auto; min-width: 150px; }

.admin-list { display: grid; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.admin-row > div:first-child { min-width: 0; }
.admin-row strong { display: block; overflow-wrap: anywhere; }
.admin-row small, .admin-row p { margin-top: 3px; color: var(--muted); font-size: 0.95rem; overflow-wrap: anywhere; }
.row-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.row-actions button, .row-actions a, .admin-row select {
  display: inline-flex; align-items: center; width: auto; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font-size: 0.93rem; font-weight: 700; text-decoration: none;
}
.row-actions button:hover, .row-actions a:hover { border-color: var(--ink); }
.row-actions .danger { border-color: var(--danger); color: var(--danger); }
.row-actions .danger:hover { background: var(--danger-soft); }

.thumb { display: grid; place-items: center; flex: 0 0 auto; width: 64px; height: 48px; border-radius: 6px; background: var(--line); color: var(--muted); font-size: 0.8rem; object-fit: cover; }
.avatar-sm { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-weight: 700; }

.status { font-weight: 700; }
.status.published, .status.visible, .status.approved { color: var(--green); }
.status.draft, .status.pending { color: #9a6b00; }
:root[data-theme="dark"] .status.draft, :root[data-theme="dark"] .status.pending { color: var(--mark); }
.status.archived, .status.closed { color: var(--muted); }
.status.hidden, .status.rejected { color: var(--danger); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.stat b { display: block; font-family: var(--display); font-size: 2rem; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 0.95rem; }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.admin-cols h3 { margin-bottom: 6px; font-size: 1.2rem; }

.cat-row { display: grid; grid-template-columns: 48px 1fr 2fr auto; gap: 10px; }
.cat-row input[type="color"] { width: 48px; padding: 2px; }

/* ---------- Navegación móvil ---------- */
.scrim { display: none; }
.bottom-nav { display: none; }

@media (max-width: 1020px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(300px, 86vw); height: 100%;
    transform: translateX(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s;
  }
  .sidebar.is-open { transform: translateX(0); visibility: visible; box-shadow: 8px 0 30px rgba(0, 0, 0, 0.25); }
  .scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .scrim.is-open { display: block; opacity: 1; pointer-events: auto; }
  .drawer-close { display: inline-flex; align-items: center; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .content { padding: 0 20px 96px; }
  .topbar { margin: 0 -20px 22px; padding: 12px 20px; flex-wrap: wrap; }
  .topbar h2 { font-size: 1.3rem; }
  .top-actions { flex: 1 1 100%; order: 3; }
  .top-actions input { width: 100%; flex: 1; }
  .chips { display: flex; }
  .app-message { bottom: 76px; }
  .hero { grid-template-columns: 1fr; }
  .hero img { order: -1; aspect-ratio: 16 / 9; }

  .bottom-nav {
    position: fixed; right: 0; bottom: 0; left: 0; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    border-top: 1px solid var(--line); background: var(--panel); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bnav-item { min-height: 54px; padding: 0 4px; border: 0; background: none; color: var(--muted); font-size: 0.88rem; font-weight: 700; }
  .bnav-item.is-active { color: var(--ink); box-shadow: inset 0 3px 0 var(--mark); }
}

@media (max-width: 760px) {
  .access-screen { grid-template-columns: 1fr; }
  .access-visual { min-height: 46vh; padding: 28px 22px; }
  .community-list, .tips, .profile-grid, .admin-cols, .about { grid-template-columns: 1fr; }
  .about-logo { width: 110px; height: 110px; }
  .topic-row { grid-template-columns: 1fr; gap: 2px; }
  .forum-form, .admin-form { grid-template-columns: 1fr; }
  .pay-row { grid-template-columns: 1fr 1fr; }
  .pay-row .pay-number, .pay-row .pay-holder { grid-column: 1 / -1; }
  .cat-row { grid-template-columns: 48px 1fr; }
  .cat-row input[data-f="description"], .cat-row button { grid-column: 1 / -1; }
  .admin-row { flex-direction: column; align-items: stretch; }
  .profile-card { flex-direction: column; align-items: flex-start; }
}

/* ---------- Pulido visual: sala de redacción ciudadana ---------- */
:root {
  --bg: #f2f5f4;
  --panel: #fff;
  --ink: #172b2d;
  --muted: #5a6c6d;
  --line: #dbe5e2;
  --brand: #145b55;
  --brand-ink: #fff;
  --mark: #f2cb58;
  --mark-soft: #fff4cf;
  --radius: 16px;
}

:root[data-theme="dark"] {
  --bg: #101918;
  --panel: #192321;
  --ink: #e8f0ed;
  --muted: #a5b7b2;
  --line: #30413d;
  --brand: #75c5b5;
  --brand-ink: #10201d;
  --mark-soft: rgba(242, 203, 88, 0.15);
}

body {
  background:
    radial-gradient(ellipse at 90% 0, color-mix(in srgb, var(--brand) 7%, transparent), transparent 34rem),
    var(--bg);
}

.access-screen { background: var(--panel); }
.access-visual { position: relative; isolation: isolate; }
.access-visual::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(115deg, rgba(10, 31, 29, 0.28), transparent 70%);
  content: "";
}
.access-card { padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: 0 24px 70px rgba(18, 43, 40, 0.09); }
.brand-logo { border-radius: 14px; }
.is-booting #accessScreen, .is-booting #appShell { visibility: hidden; }
.password-field { display: flex; align-items: center; gap: 8px; }
.password-field input { min-width: 0; }
.password-toggle, .forgot-password { padding: 8px 0; border: 0; background: none; color: var(--brand); font-size: 0.9rem; font-weight: 700; }
.password-toggle { flex: 0 0 auto; padding-inline: 8px; }
.forgot-password { justify-self: start; text-decoration: underline; text-underline-offset: 3px; }
.access-benefits { display: grid; gap: 4px; margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 7%, var(--panel)); }
.access-benefits span { color: var(--muted); font-size: 0.92rem; }
.access-note { line-height: 1.5; }


.sidebar { border-right-color: color-mix(in srgb, var(--line) 70%, transparent); }
.brand { padding: 4px 8px 10px; }
.nav-item { min-height: 42px; border-radius: 10px; }
.nav-item.is-active { box-shadow: inset 3px 0 0 var(--brand); }
.session-card { border-radius: 14px; background: color-mix(in srgb, var(--bg) 68%, var(--panel)); }

.topbar {
  border-bottom-color: color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
}
.top-actions input { min-height: 44px; border-radius: 999px; }
.user-chip { outline-offset: 3px; }
.menu-toggle, .chip { border-radius: 999px; }

.hero {
  position: relative;
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(24px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 18px 50px rgba(23, 43, 45, 0.07);
}
.hero-text h1 { letter-spacing: -0.035em; }
.hero img { aspect-ratio: 5 / 4; border-radius: 18px; box-shadow: 0 14px 34px rgba(16, 36, 34, 0.16); }
.pulse-line { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.topic-row { padding-top: 20px; padding-bottom: 20px; }
.topic-row:first-child { border-top: 1px solid var(--line); }
.topic-row:hover, .source-list a:hover { background: color-mix(in srgb, var(--mark-soft) 72%, transparent); }
.community-list { gap: 16px; }
.comm-item { min-height: 144px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); transition: transform 160ms ease, box-shadow 160ms ease; }
.comm-item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(23, 43, 45, 0.08); }
.about { border-radius: 20px; }
.tips > div { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }

.page-head { padding: 8px 0 8px 20px; }
.page-head h1, .profile-card h1 { letter-spacing: -0.025em; }
.news-grid { gap: 20px; }
.news-card { border-radius: 16px; box-shadow: 0 8px 24px rgba(23, 43, 45, 0.045); transition: transform 180ms ease, box-shadow 180ms ease; }
.news-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(23, 43, 45, 0.11); }
.news-card img { aspect-ratio: 16 / 9; }
.card-body { padding: 20px; }
.card-body h3 { letter-spacing: -0.015em; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.card-actions a { min-height: 40px; display: inline-flex; align-items: center; }
.share-btn {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-weight: 700;
}
.share-btn:hover { border-color: var(--brand); color: var(--brand); }

.forum-panel, .news-card, .donation-card, .admin-form, .stat { border-radius: 16px; }
.source-list a { border-radius: 8px; }
.profile-card { gap: 28px; padding: 10px 0 28px; }
.avatar-actions { display: grid; justify-items: center; gap: 16px; }
.avatar-wrap { margin-bottom: 8px; }
.avatar { width: 104px; height: 104px; box-shadow: 0 0 0 5px var(--panel), 0 0 0 7px var(--line); }
.avatar-edit { bottom: -8px; box-shadow: 0 2px 8px rgba(23, 43, 45, 0.16); }
.remove-avatar { min-height: 38px; padding: 0 13px; border-radius: 999px; font-size: 0.9rem; }
.remove-avatar:disabled { cursor: not-allowed; opacity: 0.55; }
.profile-grid { margin-top: 10px; }

button[type="submit"], .cta-main, .admin-actions button:not(.ghost-button), .admin-hero-actions button:not(.ghost-button), .reply-form button, .cat-row button, .btn-mark {
  border-radius: 10px;
}
input, select, textarea { border-radius: 10px; }
.bottom-nav { backdrop-filter: blur(16px); }

@media (max-width: 760px) {
  .access-panel { padding: 22px 16px; }
  .access-card { padding: 24px 20px; border-radius: 18px; }
  .hero { padding: 20px; border-radius: 18px; }
  .hero img { border-radius: 13px; }
  .comm-item { min-height: 0; }
  .profile-card { flex-direction: row; align-items: center; }
  .avatar-actions { justify-items: center; }
  .avatar { width: 84px; height: 84px; }
}

@media (max-width: 420px) {
  .profile-card { align-items: flex-start; gap: 18px; }
  .profile-card h1 { font-size: 1.6rem; overflow-wrap: anywhere; }
  .avatar { width: 70px; height: 70px; }
  .remove-avatar { padding: 0 10px; font-size: 0.82rem; }
}

/* ---------- Portada: una publicación hecha entre personas ---------- */
:root {
  --bg: #f7f3eb;
  --panel: #fffdf8;
  --ink: #292c28;
  --muted: #686b63;
  --line: #e2dbcf;
  --brand: #315b4e;
  --brand-ink: #fffdf8;
  --mark: #e5c15d;
  --mark-soft: #f5eccf;
  --red: #a94b3f;
  --blue: #426b7b;
  --green: #4a745d;
  --violet: #795d82;
  --radius: 8px;
}

:root[data-theme="dark"] {
  --bg: #191b18;
  --panel: #222520;
  --ink: #eee9dd;
  --muted: #b3b0a5;
  --line: #3b3d35;
  --brand: #9fc5ae;
  --brand-ink: #18211b;
  --mark: #ddbd62;
  --mark-soft: rgba(221, 189, 98, 0.15);
  --red: #df9585;
  --blue: #8cb9c6;
  --green: #9bc49f;
  --violet: #c1a4cb;
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 3%, transparent) 0.55px, transparent 0.55px);
  background-size: 5px 5px;
}

.sidebar { background: var(--bg); border-right: 1px solid var(--line); }
.brand { font-size: 1rem; }
.brand-logo { border-radius: 50%; }
.nav-item { border-radius: 5px; }
.nav-item.is-active { box-shadow: inset 3px 0 0 var(--brand); }
.session-card { background: transparent; border-radius: 6px; }
.topbar {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.top-actions input { border-radius: 6px; }
.user-chip { border: 1px solid var(--line); }

.hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.8fr);
  gap: clamp(30px, 7vw, 92px);
  padding: clamp(28px, 5vw, 64px) 0 38px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero-text { max-width: 620px; }
.eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}
.hero-text h1 {
  max-width: 13ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 5vw, 4.55rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.99;
}
.hero-text > p:not(.eyebrow) { max-width: 48ch; margin-top: 22px; font-size: 1.13rem; }
.hero-cta { margin-top: 28px; }
.hero-cta .cta-main { border-radius: 5px; }
.cta-link { color: var(--brand); text-decoration-thickness: 1px; }
.hero-image {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
}
.hero-image img {
  width: 100%;
  aspect-ratio: 1.04;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 8px 8px 0 var(--mark-soft);
  filter: saturate(0.83);
}
.hero-image figcaption {
  align-self: flex-end;
  max-width: 34ch;
  margin-top: 15px;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  font-style: italic;
  text-align: right;
}

.pulse-line {
  justify-content: flex-start;
  gap: 10px 0;
  margin-top: 0;
  padding: 17px 0;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.93rem;
}
.pulse-line span { padding: 0 18px; border-left: 1px solid var(--line); }
.pulse-line span:first-child { padding-left: 0; border-left: 0; }
.pulse-line b { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; }
.section-head {
  align-items: baseline;
  justify-content: space-between;
  margin: 52px 0 18px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
.section-head h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; font-weight: 400; }
.section-head span { max-width: 46ch; font-size: 0.93rem; }
.topic-row { border-left-width: 3px; }
.topic-row b { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 400; }
.topic-row:hover { background: color-mix(in srgb, var(--mark-soft) 55%, transparent); }

.reading-note {
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(24px, 6vw, 74px);
  margin-top: 54px;
  padding: clamp(22px, 4vw, 38px);
  border-left: 3px solid var(--mark);
  background: color-mix(in srgb, var(--panel) 74%, var(--mark-soft));
}
.reading-note-intro h2 {
  max-width: 12ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 400;
  line-height: 1.05;
}
.reading-note-intro > p:not(.eyebrow) { margin-top: 12px; color: var(--muted); }
.reading-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.reading-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.reading-steps li:first-child { padding-top: 0; }
.reading-steps li:last-child { padding-bottom: 0; border-bottom: 0; }
.reading-steps li > span { color: var(--red); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; font-style: italic; }
.reading-steps b { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 400; }
.reading-steps p { margin-top: 2px; color: var(--muted); font-size: 0.94rem; }

.news-grid { gap: 18px; }
.news-card {
  border-radius: 3px;
  box-shadow: none;
  transition: border-color 160ms ease;
}
.news-card:hover { transform: none; border-color: var(--brand); box-shadow: none; }
.news-card img { aspect-ratio: 16 / 10; filter: saturate(0.9); }
.card-body { gap: 9px; padding: 18px; }
.card-body h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 400; }
.card-body a { text-decoration-thickness: 1px; }
.share-btn { border-radius: 4px; }
.comm-item {
  min-height: 156px;
  gap: 7px;
  padding: 20px 18px;
  border: 0;
  border-top: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
  transition: border-color 160ms ease;
}
.comm-item:hover { transform: none; border-top-color: var(--brand); box-shadow: none; }
.comm-kicker { color: var(--red) !important; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.comm-item b { font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 400; text-decoration: none; }
.comm-item:hover b { background: none; }
.about {
  grid-template-columns: 112px 1fr;
  gap: 28px;
  margin-top: 62px;
  padding: 30px;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.about-logo { width: 92px; height: 92px; border-radius: 50%; }
.about h3 { max-width: 24ch; font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; font-weight: 400; }
.about .eyebrow { margin-bottom: 7px; }
.about p { margin-top: 10px; }
.tips { gap: 0 34px; }
.tips > div { padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.tips dt { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 400; }
.tips dd { margin-top: 4px; }

.page-head h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.forum-panel, .donation-card, .admin-form, .stat { border-radius: 5px; }
.source-list a { border-radius: 0; }
.access-screen { background: var(--bg); }
.access-card { border: 0; border-radius: 5px; background: var(--panel); box-shadow: 0 10px 36px rgba(55, 45, 29, 0.08); }
.access-copy h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.access-visual { background-image: linear-gradient(0deg, rgba(18, 26, 23, 0.82), rgba(18, 26, 23, 0.12) 85%), url("OIP.webp"); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }
  .hero-image { order: 0; }
  .hero-image img { aspect-ratio: 16 / 10; }
  .hero-text h1 { max-width: 14ch; font-size: clamp(2.55rem, 10vw, 3.5rem); }
  .pulse-line span { padding: 0 10px; }
  .reading-note { grid-template-columns: 1fr; gap: 22px; margin-top: 38px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 6px; margin-top: 38px; }
  .community-list { gap: 4px; }
  .comm-item { min-height: 0; padding: 17px 4px; }
  .about { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .about-logo { width: 70px; height: 70px; }
}

@media (max-width: 420px) {
  .hero-text h1 { font-size: 2.5rem; }
  .pulse-line { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 0; }
  .pulse-line span:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pulse-line b { display: block; }
  .reading-note { padding: 20px 16px; }
}

/* ---------- Formas vivas, profundidad y movimiento con respeto ---------- */
.hero { isolation: isolate; }
.hero::before, .hero::after {
  position: absolute;
  z-index: -1;
  display: block;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.hero::before {
  top: 6%;
  left: 48%;
  width: clamp(90px, 14vw, 190px);
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--mark) 36%, transparent);
  filter: blur(2px);
  animation: drift-orb 12s ease-in-out infinite alternate;
}
.hero::after {
  right: 3%;
  bottom: 8%;
  width: 22px;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--red) 76%, transparent);
  box-shadow: -44px -28px 0 -7px var(--blue), 25px -78px 0 -5px var(--green);
  animation: orbit-dots 10s linear infinite;
}
.hero-text, .hero-image { position: relative; z-index: 1; }
.hero-image img { border-radius: 42% 3px 3px 3px; transition: border-radius 500ms ease, transform 500ms ease; }
.hero-image:hover img { border-radius: 3px 42% 3px 3px; transform: rotate(-1deg) scale(1.015); }
.pulse-line span { transition: transform 180ms ease, color 180ms ease; }
.pulse-line span:hover { color: var(--brand); transform: translateY(-2px); }
.topic-row { position: relative; transition: padding-left 180ms ease, background-color 180ms ease; }
.topic-row:hover { padding-left: 25px; }
.topic-row::after {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  content: "";
  opacity: 0;
  transform: translate(-5px, -50%) rotate(45deg);
  transition: transform 180ms ease, opacity 180ms ease;
}
.topic-row:hover::after { opacity: 1; transform: translate(0, -50%) rotate(45deg); }
.reading-note { position: relative; overflow: hidden; border-radius: 4px 42px 4px 4px; }
.reading-note::after {
  position: absolute;
  right: -48px;
  bottom: -72px;
  width: 172px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--brand) 4%, transparent), 0 0 0 42px color-mix(in srgb, var(--red) 5%, transparent);
  content: "";
  pointer-events: none;
}
.reading-note > * { position: relative; z-index: 1; }
.news-card { border-radius: 3px 22px 3px 3px; transition: transform 200ms ease, border-radius 200ms ease, border-color 180ms ease; }
.news-card:nth-child(3n + 2) { border-radius: 22px 3px 3px 3px; }
.news-card:hover { transform: translateY(-5px) rotate(-0.3deg); }
.news-card:nth-child(3n + 2):hover { transform: translateY(-5px) rotate(0.3deg); }
.news-card img { transition: transform 400ms ease, filter 400ms ease; }
.news-card:hover img { transform: scale(1.035); filter: saturate(1.07); }
.comm-item { position: relative; }
.comm-item::after {
  position: absolute;
  top: 17px;
  right: 16px;
  width: 13px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--mark);
  content: "";
  opacity: 0.82;
  transition: transform 240ms ease;
}
.comm-item:nth-child(2)::after { background: var(--blue); }
.comm-item:nth-child(3)::after { background: var(--red); }
.comm-item:hover::after { transform: scale(1.55) rotate(20deg); }

.contribute-shortcut {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius: 999px 999px 999px 4px;
  background: var(--panel);
  color: var(--brand);
  font-size: 0.91rem;
  font-weight: 700;
  transition: transform 180ms ease, background-color 180ms ease;
}
.contribute-shortcut span { padding-left: 5px; }
.contribute-shortcut:hover { background: var(--mark-soft); transform: translateY(-2px) rotate(-1deg); }
.install-app {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 0.9rem;
  font-weight: 700;
}
.install-app:hover { filter: brightness(1.08); }
.review-hint { padding: 14px 17px; border-left: 3px solid var(--mark); background: var(--mark-soft); color: var(--ink); }

.contribution-page .page-head {
  position: relative;
  padding: 34px 0 30px 24px;
  border-left-width: 3px;
}
.contribution-page .page-head h1 {
  max-width: 15ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.04em;
}
.contribution-page .page-head p { max-width: 58ch; margin-top: 14px; }
.contribution-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(230px, 0.6fr); gap: 30px; align-items: start; }
.contribution-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: clamp(18px, 3vw, 30px); border-radius: 4px 26px 4px 4px; }
.contribution-form label { min-width: 0; }
.contribution-form input, .contribution-form textarea, .contribution-form select { border-radius: 4px; }
.contribution-form input[type="file"], .admin-form input[type="file"] { padding: 8px 10px; cursor: pointer; }
.contribution-form input[type="file"]::file-selector-button, .admin-form input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--mark);
  color: #1c2128;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.contribution-form input[type="file"]::file-selector-button:hover, .admin-form input[type="file"]::file-selector-button:hover { opacity: 0.88; }
.contribution-preview {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 12px;
  background: var(--mark-soft, rgba(0, 0, 0, 0.04));
  border-radius: 8px;
  border: 1px dashed var(--line);
}
.contribution-preview[hidden] { display: none; }
.contribution-preview img {
  max-width: 100%;
  max-height: 250px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.contribution-preview-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.contribution-preview small { color: var(--muted); font-size: 0.85rem; }
.contribution-preview .btn-remove-photo {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.contribution-preview .btn-remove-photo:hover {
  background: #fde8e8;
  color: #b91c1c;
  border-color: #fca5a5;
}
.contribution-consent { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 4px 16px 4px 4px; background: var(--mark-soft); color: var(--ink); }
.contribution-consent > span { color: var(--red); font-size: 1.3rem; }
.contribution-consent p { font-size: 0.92rem; }
.contribution-aside {
  position: sticky;
  top: 100px;
  padding: 22px 20px;
  border-top: 2px solid var(--red);
}
.contribution-aside h2 { max-width: 13ch; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 400; line-height: 1.05; }
.contribution-aside p { margin-top: 12px; color: var(--muted); }
.contribution-back { margin-top: 18px; padding: 0; border: 0; background: none; color: var(--brand); font-weight: 700; text-align: left; }
.contribution-back span { padding-left: 5px; transition: padding 160ms ease; }
.contribution-back:hover span { padding-left: 11px; }
.orbit-mark { position: relative; width: 114px; height: 100px; margin-bottom: 24px; }
.orbit-mark::before, .orbit-mark::after, .orbit-mark span, .orbit-mark i {
  position: absolute;
  display: block;
  border: 1px solid color-mix(in srgb, var(--brand) 60%, transparent);
  border-radius: 50%;
  content: "";
}
.orbit-mark::before { inset: 16px 12px; transform: rotate(35deg); }
.orbit-mark::after { inset: 16px 12px; transform: rotate(-35deg); }
.orbit-mark span { top: 31px; left: 38px; width: 38px; height: 38px; border: 0; background: var(--mark); animation: pulse-orb 3s ease-in-out infinite; }
.orbit-mark i { top: 13px; right: 10px; width: 11px; height: 11px; border: 0; background: var(--red); }

.motion-ready .reveal-on-view {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 550ms ease, transform 550ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.motion-ready .reveal-on-view.is-revealed { opacity: 1; transform: translateY(0); }
.motion-ready .topic-row, .motion-ready .news-card, .motion-ready .comm-item { transition-delay: 50ms; }

@keyframes drift-orb {
  from { transform: translate3d(-8px, 8px, 0) rotate(-8deg); }
  to { transform: translate3d(18px, -14px, 0) rotate(12deg); }
}
@keyframes orbit-dots {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.12); }
  to { transform: rotate(360deg) scale(1); }
}
@keyframes pulse-orb {
  0%, 100% { transform: scale(0.88); box-shadow: 0 0 0 0 color-mix(in srgb, var(--mark) 35%, transparent); }
  50% { transform: scale(1); box-shadow: 0 0 0 12px color-mix(in srgb, var(--mark) 0%, transparent); }
}

@media (max-width: 1020px) {
  .contribute-shortcut { min-height: 38px; }
  .top-actions { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .hero::before { left: auto; right: 8%; top: 2%; }
  .hero::after { right: 7%; }
  .hero-image img { border-radius: 34% 3px 3px 3px; }
  .topic-row:hover { padding-left: 18px; }
  .topic-row::after { display: none; }
  .contribute-shortcut { flex: 1; }
  .contribution-layout { grid-template-columns: 1fr; gap: 16px; }
  .contribution-aside { position: relative; top: auto; display: grid; grid-template-columns: 72px 1fr; gap: 0 14px; padding: 20px 0; }
  .contribution-aside .orbit-mark { grid-row: span 3; width: 72px; height: 72px; margin: 0; transform: scale(0.72); transform-origin: top left; }
  .contribution-aside .eyebrow { align-self: end; margin-bottom: 6px; }
  .contribution-aside h2 { font-size: 1.55rem; }
  .contribution-aside p, .contribution-back { grid-column: 2; }
}
@media (max-width: 540px) {
  .top-actions { gap: 7px; }
  .top-actions input { flex-basis: 100%; }
  .contribution-form { grid-template-columns: 1fr; }
  .contribution-aside { grid-template-columns: 54px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .orbit-mark span { animation: none; }
  .motion-ready .reveal-on-view { opacity: 1; transform: none; transition: none; }
  .news-card, .news-card img, .hero-image img, .comm-item::after { transition: none; }
}

/* ---------- Menú bajo demanda y contenido en bloques acogedores ---------- */
.app-shell { grid-template-columns: minmax(0, 1fr); }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 61;
  width: min(320px, 88vw);
  height: 100dvh;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 240ms;
  box-shadow: 12px 0 44px rgba(28, 42, 37, 0.17);
}
.sidebar.is-open { transform: translateX(0); visibility: visible; }
.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: block;
  background: rgba(24, 31, 28, 0.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms;
}
.scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.drawer-close { display: inline-flex; align-items: center; }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border-color: transparent;
  background: var(--mark-soft);
  color: var(--ink);
}
.menu-toggle::before { content: "\2630"; color: var(--brand); font-size: 1.05rem; }
.menu-toggle[aria-expanded="true"]::before { content: "×"; font-size: 1.35rem; }
.topbar h2 {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  margin-right: auto;
  white-space: nowrap;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 400;
}
.top-actions { margin-left: 0; }
.content { min-width: 0; }
.page-view { margin-inline: auto; }
body.menu-open { overflow: hidden; }

.page-head:not(.admin-head) {
  position: relative;
  overflow: hidden;
  padding: 23px 26px;
  border: 0;
  border-left: 4px solid var(--accent, var(--brand));
  border-radius: 4px 26px 4px 4px;
  background:
    radial-gradient(circle at 94% 12%, color-mix(in srgb, var(--accent, var(--mark)) 18%, transparent) 0 56px, transparent 58px),
    color-mix(in srgb, var(--accent, var(--mark-soft)) 9%, var(--panel));
}
.page-head:not(.admin-head)::after {
  position: absolute;
  right: 16px;
  bottom: -30px;
  width: 82px;
  height: 82px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--brand)) 18%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent, var(--brand)) 5%, transparent);
  content: "";
  pointer-events: none;
}
.page-head.t-red { --accent: var(--red); }
.page-head.t-blue { --accent: var(--blue); }
.page-head.t-green { --accent: var(--green); }
.page-head.t-violet { --accent: var(--violet); }
.page-head h1, .page-head p { position: relative; z-index: 1; }
.page-head.category-page { border-left-color: var(--category-accent, var(--brand)); }
.page-head.category-page::after { border-color: color-mix(in srgb, var(--category-accent, var(--brand)) 24%, transparent); }
.tag.category-tag { color: var(--category-accent, var(--red)); }
.category-create-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.5fr) auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px 22px 8px 8px;
  background: var(--panel);
}
.category-create-form label { min-width: 0; }
.category-create-form input[type="color"] { width: 52px; min-height: 46px; padding: 5px; }
.category-create-form button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.category-create-form button:disabled { cursor: wait; opacity: 0.65; }
.cat-row { grid-template-columns: auto minmax(120px, 0.8fr) minmax(150px, 1.5fr) auto; }
.cat-row input[type="color"] { width: 52px; min-height: 42px; padding: 4px; }

.pulse-line { gap: 12px; border: 0; }
.pulse-line span {
  flex: 1 1 155px;
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tile-accent, var(--brand));
  border-radius: 4px 18px 4px 4px;
  background: var(--panel);
}
.pulse-line span:nth-child(2) { --tile-accent: var(--red); }
.pulse-line span:nth-child(3) { --tile-accent: var(--green); }
.pulse-line span:nth-child(4) { --tile-accent: var(--violet); }
.pulse-line b { display: block; font-size: 1.65rem; }
.section-head { margin-top: 42px; }
.topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.topic-row {
  position: relative;
  min-height: 108px;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 4px;
  padding: 19px 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 4px 24px 4px 4px;
  background: var(--panel);
}
.topic-row:nth-child(2) { border-radius: 24px 4px 4px 4px; }
.topic-row:nth-child(3) { border-radius: 4px 4px 24px 4px; }
.topic-row:nth-child(4) { border-radius: 4px 4px 4px 24px; }
.topic-row:hover { padding-left: 26px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.topic-row::after { right: 20px; }

.news-card { border-radius: 4px 24px 4px 4px; }
.news-card:nth-child(3n + 2) { border-radius: 24px 4px 4px 4px; }
.news-card:nth-child(3n) { border-radius: 4px 4px 24px 4px; }
.news-card .tag { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, currentColor 11%, var(--panel)); }
.news-card .card-body { min-height: 210px; align-content: start; }
.card-actions { margin-top: auto; padding-top: 7px; }
.forum-panel {
  border-radius: 4px 24px 4px 4px;
  box-shadow: 0 12px 35px rgba(45, 57, 48, 0.055);
}
.forum-posts { gap: 12px; }
.forum-posts > .post {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--post-accent, var(--brand));
  border-radius: 4px 18px 4px 4px;
  background: var(--panel);
}
.forum-posts > .post:nth-child(3n + 2) { --post-accent: var(--red); }
.forum-posts > .post:nth-child(3n) { --post-accent: var(--violet); }
.reading-note { box-shadow: 0 12px 34px rgba(45, 57, 48, 0.045); }
.comm-item {
  min-height: 175px;
  padding: 23px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--comm-accent, var(--mark));
  border-radius: 4px 24px 4px 4px;
  background: var(--panel);
}
.comm-item:nth-child(2) { --comm-accent: var(--blue); border-radius: 24px 4px 4px 4px; }
.comm-item:nth-child(3) { --comm-accent: var(--red); border-radius: 4px 4px 24px 4px; }
.about {
  border: 1px solid var(--line);
  border-radius: 4px 28px 4px 4px;
  background: color-mix(in srgb, var(--mark-soft) 50%, var(--panel));
}
.tips > div {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 4px 18px 4px 4px;
  background: var(--panel);
}
.tips > div:nth-child(4n + 2) { border-top: 3px solid var(--red); }
.tips > div:nth-child(4n + 3) { border-top: 3px solid var(--blue); }
.tips > div:nth-child(4n + 4) { border-top: 3px solid var(--green); }
.source-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.source-list a {
  padding: 16px 19px;
  border: 1px solid var(--line);
  border-radius: 4px 16px 4px 4px;
  background: var(--panel);
}
.safety-note, .contribution-consent { border-radius: 4px 18px 4px 4px; }
.donation-card { border-radius: 4px 22px 4px 4px; box-shadow: 0 10px 30px rgba(45, 57, 48, 0.06); }
.profile-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 4px 28px 4px 4px;
  background: color-mix(in srgb, var(--brand) 6%, var(--panel));
}
.profile-grid > .forum-panel { min-height: 205px; }
.admin-tabs { gap: 18px; }
.admin-pane > .admin-list, .admin-cols > div {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 4px 20px 4px 4px;
  background: var(--panel);
}
.stat { border-top: 3px solid var(--stat-accent, var(--brand)); border-radius: 4px 18px 4px 4px; }
.stat:nth-child(3n + 2) { --stat-accent: var(--red); }
.stat:nth-child(3n) { --stat-accent: var(--violet); }

@media (max-width: 1020px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; }
  .scrim { position: fixed; inset: 0; }
  .menu-toggle { display: inline-flex; }
  .drawer-close { display: inline-flex; }
  .topbar h2 { position: static; width: auto; height: auto; clip-path: none; }
}
@media (max-width: 760px) {
  .content { padding-right: 20px; padding-left: 20px; }
  .topic-list { grid-template-columns: 1fr; }
  .topic-row, .topic-row:nth-child(n) { min-height: 92px; border-radius: 4px 20px 4px 4px; }
  .pulse-line span { flex-basis: calc(50% - 8px); padding: 12px; }
  .source-list { grid-template-columns: 1fr; }
  .forum-posts > .post { padding: 15px; }
  .admin-pane > .admin-list, .admin-cols > div { padding: 14px; }
}
@media (max-width: 540px) {
  .topbar h2 { font-size: 1.1rem; }
  .pulse-line { grid-template-columns: 1fr 1fr; }
  .profile-card { border-radius: 4px 20px 4px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .scrim { transition: none; }
}

/* Navegación rápida siempre a mano; el cajón queda para perfil y administración. */
.chips {
  position: sticky;
  top: 70px;
  z-index: 9;
  display: flex;
  gap: 5px;
  margin: -13px -32px 24px;
  padding: 9px 32px 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(10px);
}
.dynamic-category-chips { display: contents; }
.chip {
  min-height: 34px;
  padding: 0 12px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}
.chip:hover { background: var(--panel); color: var(--ink); }
.chip.is-active { border-color: color-mix(in srgb, var(--brand) 14%, var(--line)); background: var(--panel); color: var(--brand); box-shadow: 0 1px 3px rgba(35, 43, 36, 0.06); }
.content { padding-top: 0; }

/* Una estética cálida y sencilla: unos pocos acentos, sin convertir cada bloque en tarjeta. */
:root {
  --bg: #f5f6f7;
  --panel: #ffffff;
  --ink: #1c2128;
  --muted: #59636f;
  --line: #dadfe4;
  --brand: #1f4e5f;
  --brand-ink: #ffffff;
  --mark: #ffd84d;
  --mark-soft: #fff1b3;
  --red: #c1382b;
  --blue: #2b6a8c;
  --green: #2d7a5d;
  --violet: #7753a1;
}
:root[data-theme="dark"] {
  --bg: #0b1424;
  --panel: #111f33;
  --ink: #eaf2fc;
  --muted: #aabbd0;
  --line: #293b55;
  --brand: #79c9ed;
  --brand-ink: #081827;
  --mark: #f6d365;
  --mark-soft: rgba(246, 211, 101, 0.16);
  --red: #f08b79;
  --blue: #7bbce4;
  --green: #78c9b0;
  --violet: #c1a1ed;
}
.sidebar { background: var(--panel); }
.menu-toggle { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.topbar h2 { font-family: var(--display); font-weight: 600; }
.chips { top: 70px; }

.hero { min-height: 0; padding-top: 40px; padding-bottom: 34px; }
.hero-text h1 { max-width: 12ch; font-size: clamp(2.7rem, 5vw, 4.2rem); line-height: 1.03; }
.hero-text > p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; }
.hero::before { opacity: 0.5; filter: blur(5px); }
.hero::after { animation-duration: 24s; opacity: 0.65; }
.hero-image img { border-radius: 28% 4px 4px 4px; box-shadow: 5px 6px 0 var(--mark-soft); }
.hero-image:hover img { border-radius: 4px 28% 4px 4px; transform: rotate(-0.4deg); }

.section-head { margin-top: 40px; border-bottom-color: var(--line); }
.section-head h3 { font-size: 1.55rem; }
.pulse-line span {
  border-color: var(--line);
  border-left-width: 2px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 82%, var(--tile-accent));
}
.pulse-line span:first-child { padding-left: 14px; border-left: 2px solid var(--line); }
.topic-list { gap: 9px; }
.topic-row, .topic-row:nth-child(n) {
  min-height: 92px;
  padding: 17px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
}
.topic-row:hover { padding-left: 23px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.topic-row b { font-size: 1.24rem; }
.topic-row span { max-width: 48ch; color: var(--muted); }
.reading-note {
  gap: 36px;
  border-left-width: 2px;
  border-radius: 8px 24px 8px 8px;
  background: color-mix(in srgb, var(--mark-soft) 62%, var(--panel));
  box-shadow: none;
}
.reading-note::after { opacity: 0.5; }
.reading-steps li { border-bottom-color: color-mix(in srgb, var(--line) 78%, transparent); }
.news-grid { gap: 16px; }
.news-card, .news-card:nth-child(n) {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(50, 50, 40, 0.035);
}
.news-card:hover, .news-card:nth-child(n):hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(50, 50, 40, 0.08); }
.news-card img { aspect-ratio: 16 / 10; border-radius: 9px 9px 0 0; }
.card-body { gap: 10px; padding: 16px; }
.card-body h3 { font-size: 1.26rem; line-height: 1.25; }
.card-body p { font-size: 0.98rem; line-height: 1.55; }
.card-actions { align-items: center; gap: 8px 14px; padding-top: 5px; }
.share-btn { border-radius: 6px; background: transparent; }
.comm-item, .comm-item:nth-child(n) {
  min-height: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--comm-accent, var(--mark));
  border-radius: 8px;
  background: var(--panel);
}
.comm-item:hover { background: color-mix(in srgb, var(--comm-accent) 5%, var(--panel)); }
.comm-item b { font-size: 1.35rem; }
.comm-item span:last-child { color: var(--muted); }
.about {
  grid-template-columns: 94px 1fr;
  gap: 22px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px 24px 8px 8px;
  background: color-mix(in srgb, var(--brand) 5%, var(--panel));
}
.about-logo { width: 76px; height: 76px; }
.about h3 { font-size: 1.58rem; }
.tips { gap: 10px 16px; }
.tips > div, .tips > div:nth-child(n) {
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--tip-accent, var(--mark));
  border-radius: 7px;
  background: var(--panel);
}
.tips > div:nth-child(2) { --tip-accent: var(--red); }
.tips > div:nth-child(3) { --tip-accent: var(--blue); }
.tips > div:nth-child(4) { --tip-accent: var(--green); }
.tips dt { font-size: 1.04rem; }

.page-head:not(.admin-head) {
  border-radius: 8px 22px 8px 8px;
  padding: 22px 24px;
  background: color-mix(in srgb, var(--accent, var(--brand)) 7%, var(--panel));
}
.page-head:not(.admin-head)::after { opacity: 0.45; }
.forum-panel, .forum-posts > .post, .donation-card, .profile-card, .profile-grid > .forum-panel, .contribution-form {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(50, 50, 40, 0.035);
}
.forum-posts > .post { padding: 16px 18px; }
.source-list a { border-radius: 7px; }
.profile-card { background: color-mix(in srgb, var(--brand) 5%, var(--panel)); }
.contribution-aside { border-top-width: 1px; }

@media (max-width: 1020px) {
  .chips { margin-right: -20px; margin-left: -20px; padding-right: 20px; padding-left: 20px; }
}
@media (max-width: 760px) {
  .chips { top: 122px; margin-top: 0; padding-top: 8px; }
  .topic-list { grid-template-columns: 1fr; }
  .topic-row, .topic-row:nth-child(n) { min-height: 76px; }
  .community-list { gap: 9px; }
  .comm-item, .comm-item:nth-child(n) { padding: 17px; }
  .tips { grid-template-columns: 1fr; }
  .hero-image img { border-radius: 24% 4px 4px 4px; }
}
@media (max-width: 540px) {
  .topbar { gap: 9px; }
  .topbar h2 { font-size: 1.08rem; }
  .top-actions .text-btn { padding: 0 10px; }
  .chips { top: 122px; }
  .hero-text h1 { font-size: clamp(2.45rem, 11vw, 3rem); }
  .reading-note { padding: 20px 17px; }
  .pulse-line span { flex-basis: calc(50% - 7px); }
  .about { grid-template-columns: 1fr; }
  .about-logo { width: 62px; height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
  .news-card:hover, .news-card:nth-child(n):hover { transform: none; }
}

/* A little more color and warmth, without taking attention away from the stories. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body {
  background-image:
    radial-gradient(ellipse at 8% 18%, color-mix(in srgb, var(--mark) 8%, transparent), transparent 28rem),
    radial-gradient(ellipse at 92% 42%, color-mix(in srgb, var(--blue) 6%, transparent), transparent 32rem);
}
.topbar h2 { position: relative; }
.topbar h2::after {
  position: absolute;
  right: -10px;
  bottom: -3px;
  left: 0;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--mark), var(--red), transparent);
  content: "";
  transform: scaleX(0.45);
  transform-origin: left;
  transition: transform 260ms ease;
}
.topbar:focus-within h2::after { transform: scaleX(1); }
.chip { transition: color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.chip.is-active {
  border-color: color-mix(in srgb, var(--mark) 75%, var(--line));
  background: var(--mark-soft);
  color: var(--ink);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--mark) 16%, transparent);
}
.hero { border-bottom-color: color-mix(in srgb, var(--brand) 22%, var(--line)); }
.hero::before {
  background: radial-gradient(circle at 36% 34%, color-mix(in srgb, var(--mark) 66%, transparent), color-mix(in srgb, var(--mark) 14%, transparent) 68%, transparent 70%);
  animation-duration: 9s;
}
.hero::after { animation-duration: 8s; }
.hero-text .eyebrow {
  display: table;
  margin-bottom: 16px;
  padding: 6px 12px 6px 10px;
  border: 1px solid color-mix(in srgb, var(--mark) 46%, var(--line));
  border-radius: 999px 999px 999px 5px;
  background: color-mix(in srgb, var(--mark-soft) 78%, var(--panel));
  letter-spacing: 0.07em;
}
.hero-text .eyebrow::before { margin-right: 7px; color: var(--red); content: "\2733"; }
.hero-text h1 { text-wrap: balance; }
.hero-image {
  animation: image-float 7s ease-in-out infinite;
  transform-origin: center;
}
.hero-image img {
  border: 5px solid var(--panel);
  box-shadow: 9px 9px 0 color-mix(in srgb, var(--mark) 66%, transparent), 0 18px 42px rgba(51, 55, 42, 0.12);
  filter: saturate(1.02);
}
.hero-image figcaption { position: relative; padding-right: 18px; }
.hero-image figcaption::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  content: "";
  transform: translateY(-50%);
}
.hero-cta .cta-main, .hero-cta .cta-link { transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.hero-cta .cta-main { box-shadow: 0 5px 0 color-mix(in srgb, var(--brand) 28%, transparent); }
.hero-cta .cta-main:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 0 color-mix(in srgb, var(--brand) 22%, transparent); }
.hero-cta .cta-link:hover { transform: translateY(-2px); }
.pulse-line span {
  position: relative;
  overflow: hidden;
  border-radius: 7px 22px 7px 7px;
  background: color-mix(in srgb, var(--tile-accent, var(--mark)) 10%, var(--panel));
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.pulse-line span:nth-child(2) { border-radius: 22px 7px 7px 7px; }
.pulse-line span:nth-child(3) { border-radius: 7px 7px 22px 7px; }
.pulse-line span:nth-child(4) { border-radius: 7px 7px 7px 22px; }
.pulse-line span::after {
  position: absolute;
  top: -18px;
  right: -14px;
  width: 54px;
  height: 54px;
  border: 1px solid color-mix(in srgb, var(--tile-accent, var(--mark)) 34%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--tile-accent, var(--mark)) 7%, transparent);
  content: "";
  pointer-events: none;
}
.pulse-line span:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--tile-accent, var(--brand)) 14%, transparent); }
.topic-row, .topic-row:nth-child(n) {
  border-radius: 10px 26px 10px 10px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  transition: transform 200ms ease, padding-left 180ms ease, background-color 180ms ease, box-shadow 200ms ease;
}
.topic-row:nth-child(2) { border-radius: 26px 10px 10px 10px; }
.topic-row:nth-child(3) { border-radius: 10px 10px 10px 26px; }
.topic-row:nth-child(4) { border-radius: 10px 10px 26px 10px; }
.topic-row:hover { box-shadow: 0 9px 24px color-mix(in srgb, var(--accent) 13%, transparent); }
.section-head h3 { position: relative; display: inline-block; }
.section-head h3::after {
  display: block;
  width: 42%;
  height: 3px;
  margin-top: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--mark), var(--red));
  content: "";
  transition: width 240ms ease;
}
.section-head:hover h3::after { width: 76%; }
.news-card, .news-card:nth-child(n) { border-radius: 7px 24px 7px 7px; }
.news-card:nth-child(3n + 2) { border-radius: 24px 7px 7px 7px; }
.news-card:nth-child(3n) { border-radius: 7px 7px 24px 7px; }
.news-card .tag { border: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.comm-item, .comm-item:nth-child(n) { border-radius: 10px 26px 10px 10px; }
.comm-item:nth-child(2) { border-radius: 26px 10px 10px 10px; }
.comm-item:nth-child(3) { border-radius: 10px 10px 26px 10px; }
.about { border-radius: 10px 32px 10px 10px; }
.tips > div, .source-list a { border-radius: 8px 20px 8px 8px; }
.forum-posts > .post:nth-child(3n + 2) { background: color-mix(in srgb, var(--red) 6%, var(--panel)); }
.forum-posts > .post:nth-child(3n) { background: color-mix(in srgb, var(--violet) 6%, var(--panel)); }
.page-head:not(.admin-head) { border-radius: 10px 30px 10px 10px; }
.contribute-shortcut { box-shadow: 0 3px 0 color-mix(in srgb, var(--mark) 32%, transparent); transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.contribute-shortcut:hover { box-shadow: 0 5px 0 color-mix(in srgb, var(--mark) 24%, transparent); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 -32px 28px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
}
.topbar {
  position: relative;
  top: auto;
  z-index: auto;
  margin: 0;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}
.chips {
  position: static;
  top: auto;
  z-index: auto;
  margin: 0;
  padding: 0 32px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: transparent;
  backdrop-filter: none;
}
.world-section {
  position: relative;
  display: grid;
  gap: 22px;
  margin: 38px 0 46px;
  padding: clamp(22px, 4vw, 38px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
  border-radius: 10px 38px 10px 10px;
  background:
    radial-gradient(ellipse at 12% 18%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 40%),
    color-mix(in srgb, var(--blue) 4%, var(--panel));
}
.world-section::after {
  position: absolute;
  top: -70px;
  right: -60px;
  width: 190px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--mark) 30%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--mark) 5%, transparent), 0 0 0 42px color-mix(in srgb, var(--red) 4%, transparent);
  content: "";
  pointer-events: none;
}
.world-intro, .world-explorer { position: relative; z-index: 1; }
.world-intro { max-width: 62ch; }
.world-intro .eyebrow { margin-bottom: 8px; }
.world-intro h2 { max-width: 18ch; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 400; letter-spacing: -0.035em; }
.world-intro > p { margin-top: 9px; color: var(--muted); }
.world-explorer { display: grid; grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(22px, 5vw, 60px); }
.globe-wrap { width: min(100%, 390px); margin: 0 auto; text-align: center; }
.globe {
  --globe-light: #78b5c8;
  --globe-dark: #174b68;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  filter: drop-shadow(0 18px 20px color-mix(in srgb, var(--blue) 18%, transparent));
  animation: globe-float 7s ease-in-out infinite;
}
:root[data-theme="dark"] .globe { --globe-light: #36738d; --globe-dark: #0a263e; }
.globe-map { display: block; width: 100%; height: 100%; overflow: visible; }
.globe-ocean { fill: url(#globeOcean); stroke: color-mix(in srgb, var(--blue) 56%, var(--panel)); stroke-width: 1.5; }
.globe-grid ellipse, .globe-grid > path:not(.globe-land) { fill: none; stroke: rgba(220, 246, 248, 0.3); stroke-width: 1; }
.globe-grid .globe-land { fill: #9fce9a; fill-opacity: 0.9; stroke: #6aa47f; stroke-width: 1.2; stroke-linejoin: round; }
:root[data-theme="dark"] .globe-grid .globe-land { fill: #66a985; fill-opacity: 0.85; stroke: #9dd0a7; }
.globe-highlight { fill: none; stroke: rgba(230, 250, 250, 0.3); stroke-width: 8; }
.globe-markers { position: absolute; inset: 0; }
.globe-pin {
  position: absolute;
  top: var(--pin-y);
  left: var(--pin-x);
  display: grid;
  width: 38px;
  height: 38px;
  padding: 3px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 28%, transparent), 0 5px 12px rgba(12, 28, 40, 0.22);
  font-size: 0.82rem;
  font-weight: 700;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.globe-pin:hover, .globe-pin.is-selected { z-index: 2; background: var(--mark); color: var(--ink); box-shadow: 0 0 0 8px color-mix(in srgb, var(--mark) 30%, transparent), 0 5px 12px rgba(12, 28, 40, 0.22); transform: translate(-50%, -50%) scale(1.12); }
.globe-caption { margin-top: 5px; color: var(--muted); font-size: 0.88rem; }
.world-details { min-width: 0; }
.world-count { margin-bottom: 12px; color: var(--brand); font-weight: 700; }
.world-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.world-region {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px 18px 8px 8px;
  background: var(--panel);
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.world-region:hover { transform: translateY(-2px); border-color: var(--blue); }
.world-region.is-selected { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--panel)); }
.world-region span { font-size: 0.92rem; line-height: 1.2; }
.world-region b { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--blue) 16%, var(--panel)); color: var(--brand); }
.world-stories { display: grid; gap: 8px; margin-top: 14px; }
.world-stories h3 { margin-bottom: 2px; font-size: 1.05rem; }
.world-story { display: grid; gap: 4px; padding: 10px 12px; border-left: 3px solid var(--blue); border-radius: 4px 12px 4px 4px; background: var(--panel); }
.world-story .tag { font-size: 0.8rem; }
.world-story strong { font-size: 0.93rem; line-height: 1.35; }
.world-story a { width: fit-content; font-size: 0.86rem; font-weight: 700; }
.world-empty { color: var(--muted); font-size: 0.92rem; }
.news-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.story-place { display: inline-flex; width: fit-content; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line)); border-radius: 999px; color: var(--blue); font-size: 0.82rem; font-weight: 700; }
@keyframes globe-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}
@media (max-width: 1020px) {
  .site-header { margin-right: -20px; margin-left: -20px; }
  .chips { padding-right: 20px; padding-left: 20px; }
}
@keyframes image-float {
  0%, 100% { transform: translateY(0) rotate(0.4deg); }
  50% { transform: translateY(-8px) rotate(-0.5deg); }
}
@media (hover: hover) {
  .chip:hover { transform: translateY(-2px); }
  .news-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
  .comm-item:hover { transform: translateY(-4px) rotate(-0.25deg); box-shadow: 0 10px 24px rgba(50, 50, 40, 0.08); }
}
@media (max-width: 760px) {
  .site-header { margin-bottom: 12px; }
  .topbar { padding-right: 20px; padding-left: 20px; }
  .chips { margin: 0; }
  .top-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }
  .top-actions input { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .reader-player { grid-template-columns: 1fr; }
  .top-actions #quickNew, .top-actions .contribute-shortcut, .top-actions .install-app { grid-column: span 2; width: 100%; min-width: 0; justify-content: center; padding: 0 8px; }
  .top-actions .text-btn, .top-actions .user-chip { grid-column: span 1; justify-self: center; }
  .top-actions .user-chip { align-self: center; }
  .hero { gap: 22px; padding-top: 18px; padding-bottom: 24px; }
  .hero-text .eyebrow { margin-top: 0; }
  .world-section { padding: 22px 17px; }
  .world-explorer { grid-template-columns: 1fr; gap: 20px; }
  .globe-wrap { width: min(78vw, 330px); }
  .world-regions { gap: 7px; }
  .world-region { padding: 7px 9px; }
  .category-create-form { grid-template-columns: 1fr auto; }
  .category-create-form label:first-child, .category-create-form label:nth-child(2) { grid-column: 1 / -1; }
  .cat-row { grid-template-columns: auto 1fr; }
  .cat-row [data-f="description"] { grid-column: 1 / -1; }
  .hero-image { animation-duration: 9s; }
  .hero-image img { box-shadow: 6px 6px 0 color-mix(in srgb, var(--mark) 66%, transparent), 0 12px 28px rgba(51, 55, 42, 0.1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image { animation: none; }
  .globe { animation: none; }
  .chip:hover, .comm-item:hover { transform: none; }
}

/* <<< FIN: styles.css */


/* ======================================================================
   >>> INICIO: polish.css
   ====================================================================== */

/* =====================================================================
   No Cierres Los Ojos · polish.css
   Capa extra que se carga DESPUES de styles.css: footer, portada en forma
   de revista, noticias destacadas, buscador rapido, cinta de titulares y
   detalles de lectura. No reemplaza nada de styles.css: si borras este
   archivo (y su <link>), la pagina vuelve a verse como antes.
   ===================================================================== */

/* ---------- Progreso de lectura y boton de subir ---------- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 120; height: 4px; pointer-events: none; }
.read-progress i { display: block; width: 100%; height: 100%; background: var(--mark); transform: scaleX(0); transform-origin: left; }
body:has(#appShell.is-hidden) .read-progress, body:has(#appShell.is-hidden) .to-top { display: none; }
.to-top { position: fixed; right: 18px; bottom: 22px; z-index: 60; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); font-size: 1.15rem; font-weight: 700; box-shadow: 0 8px 22px rgba(20, 30, 40, 0.18); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.2s, transform 0.2s; }
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { border-color: var(--ink); }

/* ---------- Cinta de titulares ---------- */
.ticker { display: flex; align-items: stretch; margin: 0 0 22px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.ticker-label { flex: 0 0 auto; display: grid; place-items: center; padding: 0 16px; background: var(--mark); color: #1c2128; font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
.ticker-viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker-run var(--ticker-time, 60s) linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-track a { flex: 0 0 auto; padding: 12px 22px; color: var(--ink); font-size: 0.95rem; text-decoration: none; white-space: nowrap; }
.ticker-track a::before { content: "\25CF"; margin-right: 12px; color: var(--red); font-size: 0.6rem; vertical-align: middle; }
.ticker-track a:hover { text-decoration: underline; text-underline-offset: 4px; }
@keyframes ticker-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-viewport { overflow-x: auto; } .ticker-track { animation: none; } }

/* ---------- Portada en forma de revista ---------- */
/* La primera noticia es la "historia principal": ocupa todo el ancho,
   con foto grande a un lado y el titular grande al otro. */
.news-grid { align-items: start; }
@media (min-width: 1021px) {
  .news-grid:has(> .news-card:nth-child(3)) > .news-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
  .news-grid:has(> .news-card:nth-child(3)) > .news-card:first-child > img { height: 100%; min-height: 320px; aspect-ratio: 16 / 10; }
  .news-grid:has(> .news-card:nth-child(3)) > .news-card:first-child .card-body { align-content: center; gap: 14px; padding: clamp(24px, 3vw, 44px); }
  .news-grid:has(> .news-card:nth-child(3)) > .news-card:first-child h3 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.07; }
  .news-grid:has(> .news-card:nth-child(3)) > .news-card:first-child p { font-size: 1.1rem; }
  .news-grid:has(> .news-card:nth-child(3)):not(:has(> .news-card:nth-child(4))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1020px) {
  .news-grid:has(> .news-card:nth-child(3)) > .news-card:first-child { grid-column: 1 / -1; }
  .news-grid:has(> .news-card:nth-child(3)) > .news-card:first-child > img { aspect-ratio: 21 / 9; }
  .news-grid:has(> .news-card:nth-child(3)) > .news-card:first-child h3 { font-size: 1.7rem; }
}
.news-card, .post, .reel, .donation-card { content-visibility: auto; contain-intrinsic-size: auto 340px; }
.news-card:first-child { content-visibility: visible; }

/* Temas: de lista a tarjetas con color (solo en pantallas anchas) */
@media (min-width: 1021px) {
  .topic-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .topic-row, .topic-row:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 168px; padding: 22px 20px 22px; border: 1px solid var(--line); border-top: 5px solid var(--accent, var(--line)); border-left-width: 1px; border-radius: 4px 18px 4px 4px; background: var(--panel); }
  .topic-row:hover { padding-left: 20px; transform: translateY(-4px); box-shadow: 0 14px 30px rgba(23, 43, 45, 0.1); }
  .topic-row b { font-size: 1.5rem; }
  .topic-row::after { top: auto; right: 18px; bottom: 20px; opacity: 1; transform: rotate(45deg); }
  .topic-row:hover::after { transform: translate(3px, 0) rotate(45deg); }
}

/* ---------- Pie de pagina ---------- */
/* Ocupa todo el ancho de .content: los margenes negativos cancelan el padding de
   .content (32px en escritorio, 20px en tablet/celular; mas abajo se ajusta). */
.site-footer { --f-bg: var(--brand); --f-ink: var(--brand-ink); --f-muted: color-mix(in srgb, var(--brand-ink) 76%, transparent); --f-line: color-mix(in srgb, var(--brand-ink) 26%, transparent);
  position: relative; display: block; margin: 64px -32px -48px; padding: 0 32px 68px;
  border: 0; background: var(--f-bg); color: var(--f-ink); font-size: 1rem; line-height: 1.5; }
:root[data-theme="dark"] .site-footer { --f-bg: var(--panel); --f-ink: var(--ink); --f-muted: var(--muted); --f-line: var(--line); border-top: 1px solid var(--line); }
.site-footer::before { content: ""; display: block; height: 7px; margin: 0 -32px 44px; background: linear-gradient(to bottom, var(--mark) 0 3px, transparent 3px 5px, var(--mark) 5px 7px); }
.site-footer p { margin: 0; }
.site-footer :is(a, button):focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; border-radius: 4px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; max-width: 1180px; margin: 0 auto; }
.footer-brand { display: flex; gap: 16px; align-items: flex-start; }
.footer-logo { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 14px; background: #fff; object-fit: cover; }
.footer-brand strong { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 1.3rem; line-height: 1.15; }
.footer-brand p { max-width: 36ch; color: var(--f-muted); font-size: 0.97rem; }
.site-footer h4 { margin: 4px 0 10px; font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mark); }
.footer-col { display: grid; align-content: start; justify-items: start; gap: 2px; }
.footer-col > button, .footer-col > a { min-height: 40px; padding: 4px 0; border: 0; background: none; color: var(--f-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.footer-col > button:hover, .footer-col > a:hover { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.footer-col kbd { padding: 0 6px; border: 1px solid var(--f-line); border-radius: 4px; font: 700 0.78rem var(--text); color: var(--f-muted); }
.text-size { display: inline-flex; margin-bottom: 8px; border: 1px solid var(--f-line); border-radius: 8px; overflow: hidden; }
.text-size button { min-width: 48px; min-height: 40px; border: 0; border-right: 1px solid var(--f-line); background: none; color: var(--f-ink); font-weight: 700; cursor: pointer; }
.text-size button:last-child { border-right: 0; }
.text-size button:hover { background: rgba(255, 255, 255, 0.1); }
.footer-rules { max-width: 1180px; margin: 36px auto 0; padding: 16px 20px; border-left: 4px solid var(--mark); background: rgba(255, 255, 255, 0.07); border-radius: 0 10px 10px 0; color: var(--f-ink); }
.footer-rules b { color: var(--mark); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; max-width: 1180px; margin: 28px auto 0; padding-top: 20px; border-top: 1px solid var(--f-line); color: var(--f-muted); font-size: 0.92rem; }
.footer-status { display: inline-flex; align-items: center; gap: 8px; }
.status-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #9aa5ad; }
.status-dot.is-online { background: #4cd39b; box-shadow: 0 0 0 4px rgba(76, 211, 155, 0.2); }
.status-dot.is-offline { background: #ff8a78; box-shadow: 0 0 0 4px rgba(255, 138, 120, 0.2); }

/* Pie de página · estilo portada (mismo papel, marcador y regla doble que la pantalla de entrada) */
.footer-logo { border: 2px solid var(--mark); border-radius: 50%; }
.footer-brand { padding-top: 10px; }
.footer-brand strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; }
.footer-brand p { font-family: Georgia, "Times New Roman", serif; font-style: italic; }
.footer-top { counter-reset: fcol; }
.site-footer h4 { display: grid; gap: 2px; margin: 0 0 12px; padding-top: 10px; border-top: 3px double var(--f-line); font-family: Georgia, "Times New Roman", serif; font-size: 0.8rem; letter-spacing: 0.16em; color: var(--f-ink); }
.footer-col h4::before { counter-increment: fcol; content: "0" counter(fcol); color: var(--mark); font-size: 1.7rem; font-weight: 700; letter-spacing: 0; line-height: 1.1; }
.footer-rules { position: relative; margin-top: 46px; padding: 20px 150px 20px 24px; border: 2px dashed color-mix(in srgb, var(--f-ink) 55%, transparent); border-radius: 6px; background: transparent; box-shadow: 6px 6px 0 var(--mark); }
.footer-rules b { font-family: Georgia, "Times New Roman", serif; color: var(--mark); }
.footer-seal { position: absolute; top: 50%; right: 22px; display: grid; place-items: center; width: 92px; aspect-ratio: 1; border: 2px solid var(--mark); border-radius: 50%; background: var(--f-bg); transform: translateY(-50%); }
.footer-seal .ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: foot-spin 40s linear infinite; }
.footer-seal text { fill: var(--mark); font: 700 9px var(--text); text-transform: uppercase; }
.footer-seal .eye { position: relative; display: block; width: 54%; height: auto; overflow: visible; }
.footer-bottom { margin-top: 34px; padding-top: 18px; border-top: 3px double var(--f-line); font-size: 0.86rem; letter-spacing: 0.02em; }
@keyframes foot-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .footer-rules { padding-right: 24px; }
  .footer-seal { display: none; }
}
@media (prefers-reduced-motion: reduce) { .footer-seal .ring { animation: none; } }

/* ---------- Buscador rapido (Ctrl + K) ---------- */
.palette-open { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.palette-open svg { flex: 0 0 auto; }
.palette-open kbd { padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font: 700 0.72rem var(--text); }
.palette-open kbd:first-of-type { margin-left: 4px; }
.palette-open:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 760px) { .top-actions .palette-open { grid-column: span 2; width: 100%; justify-content: center; } }
.palette { position: fixed; inset: 0; z-index: 200; display: none; align-items: flex-start; justify-content: center; padding: 11vh 16px 0; background: rgba(12, 18, 24, 0.58); backdrop-filter: blur(3px); }
.palette.is-open { display: flex; }
.palette-box { width: min(660px, 100%); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.palette-box input { min-height: 60px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 1.1rem; padding: 0 20px; }
.palette-box input:focus { outline: 0; }
.palette-list { max-height: min(52vh, 420px); margin: 0; padding: 8px; overflow-y: auto; list-style: none; }
.palette-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border-radius: 8px; cursor: pointer; }
.palette-list li small { flex: 0 0 auto; color: var(--muted); font-weight: 700; font-size: 0.8rem; }
.palette-list li[aria-selected="true"] { background: var(--mark-soft); box-shadow: inset 3px 0 0 var(--mark); }
.palette-list .palette-group { padding: 10px 12px 4px; color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: default; }
.palette-empty { padding: 22px; color: var(--muted); text-align: center; }
.palette-hint { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; }
.palette-hint kbd { padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; font: 700 0.75rem var(--text); }

/* ---------- Escuchar, aviso de actualizacion y transiciones ---------- */
.listen-btn.is-speaking { border-color: var(--red); color: var(--red); }
.no-tts [data-listen] { display: none; }
.update-toast { position: fixed; left: 50%; bottom: 24px; z-index: 210; display: flex; align-items: center; gap: 14px; max-width: min(92vw, 520px); padding: 12px 14px 12px 18px; border-radius: 12px; background: var(--ink); color: var(--bg); font-weight: 700; transform: translateX(-50%); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); }
.update-toast button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--mark); color: #1c2128; font-weight: 700; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }

/* ---------- Tablet y celular ---------- */
@media (max-width: 1020px) {
  .site-footer { margin: 56px -20px -96px; padding: 0 20px calc(96px + 28px + env(safe-area-inset-bottom)); }
  .site-footer::before { margin: 0 -20px 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-brand { grid-column: 1 / -1; }
  .to-top { bottom: calc(86px + env(safe-area-inset-bottom)); right: 14px; }
  .update-toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-width: 540px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-brand { flex-direction: column; gap: 12px; }
  .ticker-label { padding: 0 12px; font-size: 0.88rem; }
  .palette { padding-top: 6vh; }
}
@media (hover: none) { .footer-col kbd, .palette-hint kbd, .palette-open kbd { display: none; } }
@media print { .site-footer, .ticker, .to-top, .read-progress, .palette { display: none !important; } }


/* ---------- Reels a pantalla completa (estilo TikTok) ---------- */
/* Al abrir Reels la pagina se convierte en una capa que cubre toda la pantalla:
   un reel por pantalla, con desplazamiento vertical que "encaja" de uno en uno.
   En computador el reel se muestra como una pantalla de celular centrada. */
#page-reels { --gap: 0px; --stage-w: min(100%, calc(100vh * 0.5625)); }
@supports (height: 100dvh) { #page-reels { --stage-w: min(100%, calc(100dvh * 0.5625)); } }
@media (min-width: 900px) and (min-height: 560px) {
  #page-reels { --gap: 14px; --stage-w: min(100%, calc((100vh - 28px) * 0.5625)); }
  @supports (height: 100dvh) { #page-reels { --stage-w: min(100%, calc((100dvh - 28px) * 0.5625)); } }
}
#page-reels.is-active { position: fixed; inset: 0; z-index: 130; display: block; max-width: none; margin: 0; background: #07090b; color: #fff; }
#page-reels > .page-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body:has(#page-reels.is-active):not(:has(#appShell.is-hidden)) { overflow: hidden; }
body:has(#page-reels.is-active) :is(.read-progress, .to-top) { display: none; }
.app-message { z-index: 230; }
.reels-wrap { position: relative; width: 100%; height: 100%; }

/* Barra superior: salir, temas y subir (ocupa el mismo ancho que el reel) */
.reels-chrome { position: absolute; top: var(--gap); left: 50%; z-index: 6; width: var(--stage-w); transform: translateX(-50%); pointer-events: none; }
.reels-top { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 22px; border-radius: calc(var(--gap) * 1.3) calc(var(--gap) * 1.3) 0 0; background: linear-gradient(rgba(0, 0, 0, 0.62), transparent); }
.reels-top > *, .reels-chrome > .reel-hint { pointer-events: auto; }
.reels-round { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.reels-round:hover { background: rgba(255, 255, 255, 0.34); }
.reel-filters { display: flex; flex: 1; gap: 8px; min-width: 0; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
.reel-filters::-webkit-scrollbar { display: none; }
.reel-filter { flex: 0 0 auto; min-height: 38px; padding: 0 15px; border: 1px solid transparent; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 700; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.reel-filter:hover { border-color: #fff; }
.reel-filter.is-active { background: #fff; color: #111; }
.reel-filter.is-author { background: var(--mark); color: #1c2128; }
.reels-upload { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--mark); color: #1c2128; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.reels-upload:hover { filter: brightness(1.06); }
.empty-state .reels-upload { padding: 0 20px; }

/* Contador "2 de 8" */
.reel-pos { position: absolute; top: calc(58px + env(safe-area-inset-top, 0px)); left: 50%; padding: 3px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 0.78rem; font-weight: 700; transform: translateX(-50%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.reel-pos[hidden] { display: none; }

/* Flecha que senala el boton de subir */
.reel-hint { position: absolute; top: calc(66px + env(safe-area-inset-top, 0px)); right: 12px; display: grid; justify-items: end; gap: 4px; padding: 0; border: 0; background: none; color: #1c2128; text-align: right; cursor: pointer; }
.reel-hint[hidden] { display: none; }
.reel-hint svg { width: 48px; height: 48px; margin-right: 20px; color: var(--mark); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); animation: hint-bounce 0.8s ease-in-out infinite alternate; }
.reel-hint .bubble { display: grid; padding: 10px 14px; border-radius: 14px 4px 14px 14px; background: var(--mark); font-weight: 700; line-height: 1.25; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.reel-hint .bubble small { font-size: 0.8rem; font-weight: 600; opacity: 0.8; }
@keyframes hint-bounce { to { transform: translateY(-10px); } }

/* Lista vertical con "encaje" de uno en uno */
.reels-grid { position: absolute; inset: 0; display: block; gap: 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.reels-grid::-webkit-scrollbar { display: none; }
.reel { position: relative; display: grid; place-items: center; height: 100%; overflow: hidden; border: 0; border-radius: 0; background: transparent; content-visibility: visible; contain-intrinsic-size: none; scroll-snap-align: start; scroll-snap-stop: always; }
.reel-stage { position: relative; width: var(--stage-w); height: calc(100% - 2 * var(--gap)); overflow: hidden; border-radius: calc(var(--gap) * 1.3); background: #000; }

.reel .reel-media { position: absolute; inset: 0; display: grid; place-items: center; aspect-ratio: auto; max-height: none; overflow: hidden; background: #000; }
.reel .reel-media video, .reel .reel-media img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.reel .reel-media :is(video, img).is-fill { object-fit: cover; }
.reel .reel-media video { cursor: pointer; }
.reel .reel-media iframe { display: block; width: 100%; height: 100%; border: 0; }
.reel .reel-media.is-wide iframe { height: auto; aspect-ratio: 16 / 9; }
/* Imagenes con barras: el fondo es la misma imagen desenfocada */
.reel .reel-media.is-image::before { content: ""; position: absolute; inset: -40px; background: var(--blur-src) center / cover; filter: blur(30px) brightness(0.5); }
.reel-error { margin: 0; padding: 28px; color: rgba(255, 255, 255, 0.85); text-align: center; }
.reel.is-paused .reel-stage::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 38px no-repeat; pointer-events: none; }
.reel-progress { position: absolute; right: 0; bottom: 0; left: 0; z-index: 5; height: 3px; background: rgba(255, 255, 255, 0.25); pointer-events: none; }
.reel-progress i { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }

/* Datos de la publicacion (abajo a la izquierda) */
.reel-shade { position: absolute; right: 0; bottom: 0; left: 0; height: 50%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.82)); pointer-events: none; }
.reel-meta { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: grid; justify-items: start; gap: 8px; padding: 0 84px calc(24px + env(safe-area-inset-bottom, 0px)) 16px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65); }
.reel-by { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.reel-by strong { font-size: 1.05rem; }
.reel-by .avatar-img, .reel-by .avatar-fallback { width: 40px; height: 40px; border: 2px solid #fff; }
.reel-time { margin-top: -4px; color: rgba(255, 255, 255, 0.82); font-size: 0.85rem; }
.reel-caption { display: -webkit-box; max-width: 46ch; margin: 0; padding: 0; overflow: hidden; overflow-wrap: anywhere; line-height: 1.45; cursor: pointer; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; }
.reel-caption.is-open { display: block; max-height: 38vh; overflow-y: auto; -webkit-line-clamp: unset; line-clamp: none; }
.reel-topic { display: inline-flex; align-items: center; margin: 0; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 0.78rem; font-weight: 700; text-shadow: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.reel-topic::before { content: ""; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--dot, var(--mark)); }
.reel-topic[data-topic="protestas"] { --dot: #ff6b5a; }
.reel-topic[data-topic="guerras"] { --dot: #6cb4ff; }
.reel-topic[data-topic="mujeres"] { --dot: #c9a2ff; }
.reel-topic[data-topic="lgbtq"] { --dot: #5fe0a6; }

/* Botones de la derecha */
.reel-rail { position: absolute; right: 10px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 4; display: grid; justify-items: center; gap: 14px; }
.rail-btn { display: grid; justify-items: center; gap: 3px; width: 60px; padding: 0; border: 0; background: none; color: #fff; font-size: 0.72rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); cursor: pointer; }
.rail-btn svg { box-sizing: content-box; width: 26px; height: 26px; padding: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: background 0.15s, transform 0.15s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rail-btn:hover svg { background: rgba(255, 255, 255, 0.34); }
.rail-btn:active svg { transform: scale(0.92); }
.rail-btn.is-on svg { color: var(--mark); fill: var(--mark); }
.rail-btn.danger:hover svg { background: var(--danger); }

/* Flechas arriba/abajo para escritorio */
.reel-nav { position: absolute; top: 50%; right: 22px; z-index: 6; display: none; flex-direction: column; gap: 12px; transform: translateY(-50%); }
@media (min-width: 900px) and (hover: hover) { .reel-nav { display: flex; } }

/* Mensajes y carga */
.reels-grid .empty-state { display: grid; align-content: center; justify-items: center; gap: 18px; height: 100%; padding: 90px 28px; border: 0; border-radius: 0; background: transparent; color: #fff; font-size: 1.1rem; }
.reels-grid .empty-state p { max-width: 36ch; margin: 0; }
.reel-skeleton { height: 100%; background: linear-gradient(110deg, #14181d 30%, #222931 50%, #14181d 70%) 0 0 / 200% 100%; animation: reel-shimmer 1.3s linear infinite; }
@keyframes reel-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .reel-skeleton, .reel-hint svg { animation: none; } }

/* Ventana para subir un reel */
.reel-sheet { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.reel-sheet::backdrop { background: rgba(0, 0, 0, 0.68); backdrop-filter: blur(3px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 4px; }
.sheet-head h2 { margin: 0; font-family: var(--display); font-size: 1.35rem; }
.sheet-head .reels-round { background: var(--bg); color: var(--ink); backdrop-filter: none; }
.reel-sheet > p { margin: 0; padding: 0 18px; }
.reel-sheet .reel-form { margin: 0; padding: 14px 18px 22px; }
.reel-form input[type="file"] { padding: 18px 14px; border: 2px dashed var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; }
.reel-form input[type="file"]:hover { border-color: var(--ink); }
.reel-form input[type="file"]::file-selector-button { margin-right: 12px; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--mark); color: #1c2128; font-weight: 700; cursor: pointer; }
.reel-form input:disabled { opacity: 0.5; cursor: not-allowed; }
.reel-preview { display: grid; justify-items: start; gap: 6px; }
.reel-preview[hidden] { display: none; }
.reel-preview video, .reel-preview img { max-width: 100%; max-height: 240px; border-radius: 12px; background: #000; }
.reel-preview small { color: var(--muted); }
.reel-count { margin-top: -8px; text-align: right; }

@media (max-width: 600px) {
  .reel-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-bottom: 0; border-radius: 18px 18px 0 0; }
}

/* <<< FIN: polish.css */


/* ======================================================================
   >>> INICIO: login.css
   ====================================================================== */

/* =========================================================
   Pantalla de entrada — No Cierres Los Ojos
   Concepto: la portada de un periódico de papel.
   Usa las variables de tu web (papel crema, verde, marcador amarillo),
   así que también respeta el tema oscuro. Va después de polish.css.
   ========================================================= */

.access-screen {
  --serif: Georgia, "Times New Roman", serif;
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}
.ax-wrap { width: min(1220px, 100%); margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }

/* ---------- Cabecera de periódico ---------- */
.ax-masthead { padding-top: 6px; }
.ax-mast-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding-top: 14px; padding-bottom: 14px;
}
.ax-mast-side { display: grid; gap: 3px; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ax-mast-right { text-align: right; }
.ax-date { color: var(--ink); font-weight: 700; }
.ax-mast-title { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ax-logo { width: clamp(38px, 5vw, 58px); height: clamp(38px, 5vw, 58px); border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); }
.ax-mast-title h2 {
  margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 4.6vw, 3.9rem);
  line-height: 1; letter-spacing: -0.02em; text-align: center; white-space: nowrap; color: var(--ink);
}

/* Cinta de secciones que se desplaza */
.ax-ticker { overflow: hidden; background: var(--brand); color: var(--brand-ink); }
.ax-ticker-track { display: flex; width: max-content; animation: ax-marquee 38s linear infinite; }
.ax-ticker-track span { padding: 8px 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: pre; }

/* ---------- Cuerpo ---------- */
.ax-page {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
  padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(28px, 4vw, 48px);
}

.ax-story { animation: ax-rise 0.8s ease-out 0.15s both; }
.ax-kicker { margin: 0 0 14px; }
.ax-kicker span {
  display: inline-block; padding: 3px 10px; background: var(--mark); color: #1c1a14;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.ax-story h1 {
  margin: 0; max-width: 17ch; font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink);
}
.ax-story mark {
  padding: 0 0.12em; background: linear-gradient(transparent 52%, var(--mark) 52% 92%, transparent 92%);
  color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ax-lead { max-width: 52ch; margin: 18px 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }

/* Escena del ojo: es la protagonista de la portada */
.ax-figure { margin: 28px 0 0; }
.ax-stage {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 10; border: 1px solid var(--ink); background: var(--panel);
}
.ax-photo { position: absolute; inset: 0; z-index: -3; }
.ax-photo img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; filter: grayscale(0.9) contrast(1.05); }
.ax-photo::after { position: absolute; inset: 0; background: var(--mark); mix-blend-mode: multiply; opacity: 0.3; content: ""; }
.ax-rays {
  position: absolute; z-index: -2; inset: -30%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--mark) 70%, transparent) 0 3deg, transparent 3deg 9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 14%, transparent 46%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 14%, transparent 46%);
  animation: ax-spin 140s linear infinite;
}
.ax-stage .eye {
  position: absolute; left: 50%; top: 50%; width: 78%; height: auto; overflow: visible;
  transform: translate(-50%, -50%); filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.35));
}
.ax-figure figcaption {
  max-width: 40ch; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ink);
  color: var(--muted); font-size: 0.82rem; font-style: italic; line-height: 1.4;
}
.ax-figure + .ax-lead { margin-top: 20px; }

/* El ojo */
.eye-open, .eye-blink { transform-box: fill-box; transform-origin: 50% 50%; }
.eye-open { animation: nclo-open 1.6s cubic-bezier(0.2, 0.85, 0.25, 1) 0.6s both; }
.eye-blink { animation: nclo-blink 7s ease-in-out 3s infinite; }
.eye-white { fill: #fbfaf5; }
.eye-line { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; }
.iris { animation: nclo-look 9s ease-in-out 2s infinite; }
.eye.is-tracking .iris { animation: none; transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: transform 0.18s ease-out; }
.iris-body { fill: var(--brand); }
.iris-ring { fill: none; stroke: var(--mark); stroke-width: 8; opacity: 0.9; }
.iris-edge { fill: none; stroke: #14110a; stroke-width: 6; }
.pupil { fill: #14110a; }
.glint { fill: #fff; }

/* ---------- Cupón del formulario ---------- */
.ax-coupon {
  position: relative; padding: clamp(26px, 3vw, 38px);
  border: 2px dashed color-mix(in srgb, var(--ink) 60%, transparent); border-radius: 6px;
  background: var(--panel); box-shadow: 8px 8px 0 var(--mark);
  animation: ax-rise 0.8s ease-out 0.35s both;
}
.ax-coupon-label {
  position: absolute; top: -13px; left: 22px; padding: 2px 10px; background: var(--bg);
  color: var(--ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}

.ax-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 24px; border: 1.5px solid var(--ink); border-radius: 6px; overflow: hidden; }
.access-screen .auth-tab {
  min-height: 0; margin: 0; padding: 11px 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--ink); font-family: var(--display); font-size: 0.98rem; font-weight: 700; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.access-screen .auth-tab + .auth-tab { border-left: 1.5px solid var(--ink); }
.access-screen .auth-tab:hover { background: var(--mark-soft); }
.access-screen .auth-tab.is-active { background: var(--brand); color: var(--brand-ink); }

.access-screen .auth-form { gap: 18px; }
.access-screen .auth-form.is-active { display: grid; animation: ax-form 0.4s ease-out; }
.access-screen .auth-form label {
  display: grid; gap: 4px; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.access-screen .auth-form label.check-row {
  display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9rem; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.access-screen .auth-form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }
.access-screen .auth-form input:not([type="checkbox"]) {
  width: 100%; padding: 10px 2px; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent;
  color: var(--ink); font-size: 1.05rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  transition: background 0.2s, border-color 0.2s, padding 0.2s;
}
.access-screen .auth-form input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.access-screen .auth-form input:not([type="checkbox"]):focus {
  outline: none; padding-inline: 8px; border-bottom-color: var(--brand); background: var(--mark-soft); box-shadow: none;
}
.access-screen .auth-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 100px var(--panel) inset; caret-color: var(--ink);
}

.access-screen .auth-form button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 0; padding: 14px 20px; border: 1.5px solid var(--ink); border-radius: 6px;
  background: var(--brand); color: var(--brand-ink); font-family: var(--display); font-size: 1.02rem; font-weight: 700; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink); transition: transform 0.15s, box-shadow 0.15s;
}
.access-screen .auth-form button[type="submit"]::after { content: "→"; }
.access-screen .auth-form button[type="submit"]:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.access-screen .auth-form button[type="submit"]:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.access-screen .auth-form .ghost-button {
  min-height: 0; padding: 12px 20px; border: 1.5px solid var(--ink); border-radius: 6px;
  background: transparent; color: var(--ink); font-weight: 700; cursor: pointer; transition: background 0.2s;
}
.access-screen .auth-form .ghost-button:hover { background: var(--mark-soft); }
.access-screen button:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }

.access-screen .access-note { margin: 22px 0 0; padding-top: 16px; border-top: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent); color: var(--muted); font-size: 0.86rem; line-height: 1.5; }

/* ---------- En esta edición ---------- */
.ax-contents { padding-bottom: clamp(28px, 4vw, 52px); animation: ax-rise 0.8s ease-out 0.55s both; }
.ax-contents h3 {
  margin: 0; padding: 10px 0; border-top: 3px double var(--ink);
  font-family: var(--serif); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
}
.ax-contents ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.ax-contents li { display: grid; gap: 6px; align-content: start; padding: 18px 18px 6px 0; }
.ax-contents li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.ax-contents b { color: var(--brand); font-family: var(--serif); font-size: 2rem; font-weight: 700; line-height: 1; }
.ax-contents strong { font-family: var(--display); font-size: 1.02rem; color: var(--ink); }
.ax-contents span { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

/* ---------- Animaciones ---------- */
@keyframes nclo-open { from { transform: scaleY(0.04); opacity: 0.4; } to { transform: scaleY(1); opacity: 1; } }
@keyframes nclo-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.06); } }
@keyframes nclo-look { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-26px, -4px); } 55% { transform: translate(24px, 6px); } 80% { transform: translate(8px, -8px); } }
@keyframes ax-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ax-form { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes ax-marquee { to { transform: translateX(-50%); } }
@keyframes ax-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ax-ticker-track, .ax-rays, .ax-story, .ax-coupon, .ax-contents,
  .eye-open, .eye-blink, .iris, .access-screen .auth-form.is-active { animation: none; }
  .access-screen .auth-form button[type="submit"], .access-screen .auth-tab { transition: none; }
}

/* ---------- Tablet y móvil ---------- */
@media (max-width: 900px) {
  .ax-mast-side { display: none; }
  .ax-mast-row { grid-template-columns: 1fr; }
  .ax-page { grid-template-columns: 1fr; gap: 44px; }
  .ax-story h1 { max-width: none; font-size: clamp(2rem, 8vw, 2.8rem); }
  .ax-figure { margin-top: 22px; }
  .ax-stage { aspect-ratio: 4 / 3; }
  .ax-stage .eye { width: 88%; }
  .ax-coupon { box-shadow: 6px 6px 0 var(--mark); }
  .ax-contents ol { grid-template-columns: 1fr 1fr; }
  .ax-contents li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ax-contents li:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 18px; }
}
@media (max-width: 480px) {
  .ax-mast-title h2 { font-size: 1.55rem; }
  .ax-contents ol { grid-template-columns: 1fr; }
  .ax-contents li, .ax-contents li + li, .ax-contents li:nth-child(3) { padding-left: 0; border-left: 0; }
  .ax-contents li + li { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 18px; }
}

/* <<< FIN: login.css */


/* ======================================================================
   >>> INICIO: editorial.css
   ====================================================================== */

/* =========================================================
   No Cierres Los Ojos · editorial.css
   Lleva a toda la app el espíritu de la portada de entrada
   (papel, tinta, marcador amarillo, sombras planas), pero en
   versión suave y moderna.

   - Se carga DESPUÉS de styles.css, polish.css y login.css.
   - Solo afecta a la app (.app-shell); la pantalla de entrada
     no se toca.
   - Usa tus variables (--ink, --mark, --brand...), así que
     respeta el tema oscuro.
   - Para quitarla: borra este archivo y su <link>.
   ========================================================= */

.app-shell {
  --ed-rule: color-mix(in srgb, var(--ink) 78%, transparent);
  --ed-rule-soft: color-mix(in srgb, var(--ink) 22%, transparent);
  --ed-serif: Georgia, "Times New Roman", serif;
}

/* ---------- Barra superior: una "cabecera" discreta ---------- */
/* El header (barra + chips) es .site-header, que es pegajoso. Le damos aire
   arriba para que no quede pegado al borde, y una sola línea de tinta abajo. */
.app-shell .site-header { padding-top: 10px; }
.app-shell .topbar { padding-top: 10px; padding-bottom: 10px; }
.app-shell .chips {
  padding-top: 6px;
  padding-bottom: 12px;
  border-bottom-color: var(--ed-rule);
}
.app-shell .topbar h2 {
  font-family: var(--ed-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Chips de sección (móvil): mismo lenguaje que las pestañas de la portada */
.app-shell .chip {
  border-color: var(--ed-rule-soft);
  border-radius: 8px;
  font-family: var(--display);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.app-shell .chip:hover { border-color: var(--ink); }
.app-shell .chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* ---------- Menú lateral ---------- */
.app-shell .sidebar { border-right-color: var(--ed-rule-soft); }
.app-shell .nav-label {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px;
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.app-shell .nav-label::after {
  flex: 1; height: 1px; content: "";
  background: var(--ed-rule-soft);
}
.app-shell .nav-item { transition: background 0.18s, color 0.18s; }
.app-shell .session-card {
  border: 1px solid var(--ed-rule-soft);
  border-top: 2px solid var(--ink);
}

/* ---------- Cabecera de cada página ---------- */
/* Se conserva el recuadro con tinte y se cambia la barra lateral por un
   filete superior del color del tema (rojo, azul, verde, violeta...). */
.app-shell .page-head:not(.admin-head) {
  margin-bottom: 32px;
  padding: 26px clamp(20px, 3vw, 32px);
  border-left: 0;
  border-top: 4px solid var(--accent, var(--brand));
  border-radius: 6px;
}
.app-shell .page-head.category-page { border-top-color: var(--category-accent, var(--brand)); }
.app-shell .page-head h1 {
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.app-shell .page-head p { max-width: 64ch; line-height: 1.6; }
.app-shell .page-head > .eyebrow { margin-bottom: 14px; }

/* ---------- Títulos de sección ---------- */
.app-shell .section-head {
  border-bottom: 1px solid var(--ed-rule);
}
.app-shell .section-head h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
}
.app-shell .section-head h3::before {
  display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em;
  content: ""; background: var(--mark); vertical-align: 0.04em;
}

/* Rótulo pequeño sobre los títulos: ahora como el "Portada" de la entrada */
.app-shell .eyebrow {
  display: block;
  width: fit-content;
  padding: 3px 10px;
  background: var(--mark);
  color: #1c1a14;
  letter-spacing: 0.1em;
}

/* Titular principal del inicio: marcador bajo la última parte */
.app-shell .hero-text h1 { text-wrap: balance; }
.app-shell .hero-image img { filter: grayscale(0.25) saturate(0.85); }
.app-shell .hero-image figcaption {
  padding-top: 8px;
  border-top: 1px solid var(--ed-rule);
}

/* Cifras */
.app-shell .pulse-line { border-top: 1px solid var(--ed-rule); border-bottom: 1px solid var(--ed-rule-soft); }
.app-shell .pulse-line span { border-left-color: var(--ed-rule-soft); }

/* ---------- Tarjetas de noticias ---------- */
.app-shell .news-card,
.app-shell .news-card:nth-child(3n + 2) {
  border-radius: 12px;
  border-color: var(--ed-rule-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, border-radius 0.2s ease;
}
.app-shell .news-card:hover,
.app-shell .news-card:nth-child(3n + 2):hover {
  border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--mark);
  transform: translate(-2px, -2px);
}
.app-shell .card-body h3 { font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Bloques de la portada ---------- */
.app-shell .topic-row { border-color: var(--ed-rule-soft); }
.app-shell .comm-item { border-color: var(--ed-rule-soft); }
.app-shell .comm-item:hover { border-color: var(--ink); }
.app-shell .reading-note,
.app-shell .about {
  border-color: var(--ed-rule-soft);
  border-top: 2px solid var(--ink);
  border-radius: 8px;
}
.app-shell .tips > div { border-bottom-color: var(--ed-rule-soft); }
.app-shell .tips dt { font-weight: 700; }

/* ---------- Formularios: la versión "cupón", más ligera ---------- */
.app-shell .forum-panel,
.app-shell .admin-form,
.app-shell .donation-card {
  border: 1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent);
  border-radius: 6px;
  box-shadow: 5px 5px 0 var(--mark-soft);
}
.app-shell .forum-panel input:focus,
.app-shell .forum-panel select:focus,
.app-shell .forum-panel textarea:focus {
  background: var(--mark-soft);
}

/* Botones de envío, igual que "Entrar" en la portada */
.app-shell form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s;
}
.app-shell form button[type="submit"]:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.app-shell form button[type="submit"]:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.app-shell form button[type="submit"]:disabled { box-shadow: none; transform: none; }

/* ---------- Foro ---------- */
.app-shell .forum-toolbar { border-bottom: 1px solid var(--ed-rule); padding-bottom: 10px; }
.app-shell .post { border-bottom-color: var(--ed-rule-soft); }
.app-shell .post-topic { background: var(--mark-soft); border-radius: 4px; }

/* ---------- Detalles ---------- */
.app-shell :focus-visible { outline-color: var(--brand); }
.app-shell .source-list a { border-color: var(--ed-rule-soft); }
.app-shell .source-list a:hover { border-color: var(--ink); background: var(--mark-soft); }

/* ---------- Móvil y accesibilidad ---------- */
@media (max-width: 760px) {
  .app-shell .news-card:hover,
  .app-shell .news-card:nth-child(3n + 2):hover { box-shadow: 3px 3px 0 var(--mark); }
  .app-shell .forum-panel,
  .app-shell .admin-form,
  .app-shell .donation-card { box-shadow: 3px 3px 0 var(--mark-soft); }
  .app-shell .site-header { padding-top: 8px; }
  .app-shell .topbar { padding-top: 8px; }
  .app-shell .page-head:not(.admin-head) { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell .news-card,
  .app-shell form button[type="submit"],
  .app-shell .chip { transition: none; }
  .app-shell .news-card:hover,
  .app-shell .news-card:nth-child(3n + 2):hover { transform: none; }
}

/* ---------- Cifras de la portada (historias, conversaciones, personas...) ---------- */
/* En el celular las casillas quedaban desiguales: unas sin margen izquierdo ni borde y el
   texto largo ("personas en la comunidad") se cortaba. Ahora es una cuadrícula que se
   adapta sola: 4 columnas en escritorio, 2 en celular y 1 en pantallas muy pequeñas. */
.app-shell .pulse-line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px 0;
}
.app-shell .pulse-line span,
.app-shell .pulse-line span:nth-child(n) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  flex: none;
  min-width: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--tile-accent, var(--brand));
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.app-shell .pulse-line b { font-size: 1.65rem; line-height: 1.1; }
@media (max-width: 760px) {
  .app-shell .pulse-line { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .app-shell .pulse-line span,
  .app-shell .pulse-line span:nth-child(n) { padding: 12px 13px; font-size: 0.88rem; }
  .app-shell .pulse-line b { font-size: 1.45rem; }
}
@media (max-width: 340px) {
  .app-shell .pulse-line { grid-template-columns: minmax(0, 1fr); }
}

/* <<< FIN: editorial.css */


/* ======================================================================
   >>> INICIO: nav-i18n.css
   ====================================================================== */

/* =========================================================
   No Cierres Los Ojos · nav-i18n.css
   Menú simplificado (grupos plegables + listas desplegables)
   y selector de idioma. Se carga DESPUÉS de editorial.css.
   Para quitarlo: borra este archivo, nav.js y su <link>.
   ========================================================= */

/* ---------- Menú lateral: grupos plegables ---------- */
.app-shell .nav-group { display: grid; gap: 2px; margin-top: 6px; }
.app-shell .nav-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 42px; margin: 0; padding: 0 12px;
  border: 0; border-radius: 5px; background: transparent; cursor: pointer;
  color: var(--ink); font-family: var(--display); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: left;
}
.app-shell .nav-toggle::after {
  flex: none; width: auto; height: auto; content: "▾"; background: none;
  color: var(--muted); font-size: 0.9rem; letter-spacing: 0; transition: transform 0.2s;
}
.app-shell .nav-group.is-open > .nav-toggle::after { transform: rotate(180deg); }
.app-shell .nav-toggle:hover { background: var(--mark-soft); }
.app-shell .nav-group.has-active > .nav-toggle { box-shadow: inset 3px 0 0 var(--mark); }
.app-shell .nav-sub { display: none; gap: 2px; margin: 0 0 6px 12px; padding-left: 8px; border-left: 1px solid var(--ed-rule-soft); }
.app-shell .nav-group.is-open > .nav-sub { display: grid; }
.app-shell .nav-sub > .nav-label { margin-top: 10px; }
.app-shell .nav-sub > div { display: grid; gap: 2px; }
.app-shell .admin-group.is-hidden { display: none; }

/* ---------- Barra del celular: listas desplegables ---------- */
.app-shell .chips { overflow: visible; flex-wrap: nowrap; gap: 8px; }
.app-shell .chips > .chip, .app-shell .dd > .chip { white-space: nowrap; }
.app-shell .dd { position: static; flex: 0 0 auto; }
.app-shell .dd-trigger::after { content: "▾"; margin-left: 6px; font-size: 0.8em; display: inline-block; transition: transform 0.2s; }
.app-shell .dd.is-open > .dd-trigger::after { transform: rotate(180deg); }
.app-shell .dd.is-open > .dd-trigger { border-color: var(--ink); }
.app-shell .dd.has-active > .dd-trigger { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.app-shell .dd-panel {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px;
  background: var(--panel); border: 1.5px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--mark);
}
.app-shell .dd.is-open > .dd-panel { display: grid; }
.app-shell .dd-panel .dynamic-category-chips { display: contents; }
.app-shell .dd-panel .chip {
  width: 100%; justify-content: flex-start; text-align: left; border-radius: 6px; min-height: 42px;
}

/* ---------- Selector de idioma ---------- */
.app-shell .side-lang { display: grid; gap: 4px; margin: 14px 0 10px; }
.app-shell .side-lang span { color: var(--muted); font-family: var(--display); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }
.lang-select {
  width: 100%; padding: 9px 10px; border: 1px solid var(--ed-rule-soft, var(--line)); border-radius: 6px;
  background: var(--panel); color: var(--ink); font: inherit; cursor: pointer;
}
.lang-select:focus-visible { outline: 3px solid var(--mark); outline-offset: 2px; }

.access-screen .ax-lang {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin: 0 0 18px;
  color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.access-screen .ax-lang .lang-select,
.access-screen .auth-form .lang-select {
  padding: 10px 2px; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: transparent;
  font-size: 1.05rem; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.access-screen .ax-lang .lang-select:focus,
.access-screen .auth-form .lang-select:focus { outline: none; border-bottom-color: var(--brand); background: var(--mark-soft); }
.access-screen .auth-form .lang-select option, .lang-select option { background: var(--panel); color: var(--ink); }

/* ---------- Selector de idioma en la barra superior ---------- */
.app-shell .top-lang { display: inline-flex; flex: 0 0 auto; }
.app-shell .top-lang .lang-select { width: auto; min-height: 38px; padding: 6px 8px; }
@media (max-width: 760px) { .app-shell .top-lang .lang-select { max-width: 112px; } }

/* ---------- Árabe (de derecha a izquierda) ---------- */
[dir="rtl"] .app-shell .nav-toggle, [dir="rtl"] .app-shell .dd-panel .chip { text-align: right; }
[dir="rtl"] .app-shell .nav-sub { margin: 0 12px 6px 0; padding: 0 8px 0 0; border-left: 0; border-right: 1px solid var(--ed-rule-soft); }
[dir="rtl"] .app-shell .dd-trigger::after { margin: 0 6px 0 0; }
[dir="rtl"] .app-shell .pulse-line span, [dir="rtl"] .app-shell .pulse-line span:nth-child(n) { text-align: right; border-left: 0; border-right: 3px solid var(--tile-accent, var(--brand)); }
[dir="rtl"] .access-screen .ax-contents li + li { padding-left: 0; padding-right: 18px; border-left: 0; border-right: 1px solid var(--line); }

/* <<< FIN: nav-i18n.css */


/* ======================================================================
   >>> INICIO: extras.css
   ====================================================================== */

/* =========================================================
   No Cierres Los Ojos · extras.css
   Temas ilustrados, mosaico de imágenes, visor de fotos,
   barra de lectura y botón de volver arriba.
   Va DESPUÉS de nav-i18n.css. Para quitarlo: borra este archivo,
   extras.js y sus líneas en index.html.
   ========================================================= */

/* ---------- "Qué cubrimos": cuatro tarjetas ilustradas ---------- */
.app-shell .topic-list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.app-shell .topic-row {
  display: grid; grid-template-columns: 1fr; align-items: start; gap: 4px; padding: 0 0 16px;
  border: 1.5px solid var(--ed-rule-soft); border-top: 4px solid var(--accent, var(--brand)); border-radius: 8px;
  background: var(--panel); overflow: hidden; text-align: left;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.app-shell .topic-row:first-child { border-top: 4px solid var(--accent, var(--brand)); }
.app-shell .topic-row:hover { border-color: var(--ink); box-shadow: 4px 4px 0 var(--mark); transform: translate(-2px, -2px); background: var(--panel); }
.app-shell .topic-row b, .app-shell .topic-row > span:not(.topic-art) { padding: 0 16px; }
.app-shell .topic-row b { margin-top: 10px; }
.app-shell .topic-art {
  display: block; height: 118px; color: var(--accent, var(--brand));
  background: color-mix(in srgb, var(--accent, var(--brand)) 13%, var(--panel));
}
.app-shell .topic-art svg, .app-shell .head-art svg { display: block; width: 100%; height: 100%; }

/* Ilustración en la cabecera de cada tema */
.app-shell .page-head[class*="t-"] { position: relative; }
.app-shell .head-art {
  position: absolute; right: clamp(16px, 3vw, 32px); bottom: 0; width: clamp(130px, 17vw, 210px); height: 110px;
  color: var(--accent, var(--brand)); pointer-events: none;
}
.app-shell .page-head.has-art { padding-right: clamp(160px, 22vw, 260px); }

/* ---------- Mosaico de historias ---------- */
.app-shell .mosaic { margin: 0 0 40px; }
.app-shell .mosaic-head { display: grid; gap: 4px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ed-rule); }
.app-shell .mosaic-head h2 { margin: 0; font-family: var(--ed-serif); font-size: clamp(1.3rem, 2.6vw, 1.8rem); letter-spacing: -0.015em; }
.app-shell .mosaic-head p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.app-shell .mosaic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 132px; gap: 8px; }
.app-shell .mosaic-tile {
  position: relative; display: block; min-width: 0; padding: 0; overflow: hidden; cursor: zoom-in;
  border: 1.5px solid var(--ink); border-radius: 6px; background: var(--line);
  transition: transform 0.15s, box-shadow 0.15s;
}
.app-shell .mosaic-tile.is-lead { grid-column: span 2; grid-row: span 2; }
.app-shell .mosaic-grid[data-count="3"] .mosaic-tile:not(.is-lead) { grid-column: span 2; }
.app-shell .mosaic-tile img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); }
.app-shell .mosaic-tile:hover { box-shadow: 4px 4px 0 var(--mark); transform: translate(-2px, -2px); }
.app-shell .mosaic-cap {
  position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px; color: #fff; font-size: 0.8rem; line-height: 1.3; text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); opacity: 0; transition: opacity 0.18s;
  display: -webkit-box; -line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.app-shell .mosaic-tile.is-lead .mosaic-cap, .app-shell .mosaic-tile:hover .mosaic-cap, .app-shell .mosaic-tile:focus-visible .mosaic-cap { opacity: 1; }
.app-shell .mosaic-tile.is-lead .mosaic-cap { font-size: 0.95rem; padding: 36px 14px 12px; }

/* ---------- Visor de imágenes ---------- */
.app-shell .news-card img, .app-shell .hero-image img { cursor: zoom-in; }
dialog.lightbox { width: min(96vw, 1100px); max-width: none; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(10, 10, 10, 0.86); }
dialog.lightbox figure { margin: 0; display: grid; gap: 10px; justify-items: center; }
dialog.lightbox img { display: block; max-width: 100%; max-height: 80vh; border: 2px solid #fff; border-radius: 4px; background: #222; }
dialog.lightbox figcaption { max-width: 70ch; font-size: 0.95rem; line-height: 1.45; text-align: center; }
dialog.lightbox .lightbox-close {
  position: absolute; top: -14px; inset-inline-end: -6px; width: 42px; height: 42px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--ink, #111); border-radius: 50%; background: var(--mark, #ffd84d); color: #1c1a14; font-size: 1.3rem; font-weight: 700; line-height: 1;
  box-shadow: 2px 2px 0 var(--ink, #111);
}
dialog.lightbox .lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Barra de lectura y volver arriba ---------- */
.read-progress {
  position: fixed; z-index: 120; top: 0; left: 0; width: 100%; height: 3px; pointer-events: none;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
}
[dir="rtl"] .read-progress { transform-origin: right; left: auto; right: 0; }
.to-top {
  position: fixed; z-index: 70; inset-inline-end: 16px; bottom: 20px; width: 46px; height: 46px; padding: 0; cursor: pointer;
  display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--mark); color: #1c1a14;
  box-shadow: 3px 3px 0 var(--ink); opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.15s;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { box-shadow: 4px 4px 0 var(--ink); }
.to-top:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* ---------- Celular y accesibilidad ---------- */
@media (max-width: 760px) {
  .app-shell .page-head.has-art { padding-right: 20px; }
  .app-shell .head-art { display: none; }
  .app-shell .topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .app-shell .topic-art { height: 88px; }
  .app-shell .topic-row b, .app-shell .topic-row > span:not(.topic-art) { padding: 0 12px; }
  .app-shell .mosaic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 118px; }
  .app-shell .mosaic-grid[data-count="3"] .mosaic-tile:not(.is-lead) { grid-column: span 1; }
  .app-shell .mosaic-cap { opacity: 1; font-size: 0.74rem; padding-top: 18px; }
  .to-top { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) { .app-shell .topic-list { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .app-shell .topic-row, .app-shell .mosaic-tile, .to-top, .app-shell .mosaic-cap { transition: none; }
  .app-shell .topic-row:hover, .app-shell .mosaic-tile:hover { transform: none; }
}
[dir="rtl"] .app-shell .topic-row { text-align: right; }
[dir="rtl"] .app-shell .mosaic-cap { text-align: right; }
/* Listas desplegables (foro, donaciones, reels, admin...): legibles en claro y oscuro */
select option,
select optgroup {
  background-color: var(--panel);
  color: var(--ink);
}
select option:checked,
select option:hover,
select option:focus {
  background-color: color-mix(in srgb, var(--mark) 32%, var(--panel));
  color: var(--ink);
}

/* <<< FIN: extras.css */


/* ======================================================================
   >>> INICIO: profile.css
   ====================================================================== */

/* =========================================================
   No Cierres Los Ojos · profile.css
   Perfil como "credencial ciudadana": tarjeta con portada de color,
   pestañas (Resumen, Editar, Preferencias, Cuenta), cifras, insignias.
   Va DESPUÉS de extras.css. Para quitarlo: borra este archivo,
   profile.js y sus líneas en index.html (y vuelve el perfil anterior).
   ========================================================= */

.app-shell .pf { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }

/* ---------- Credencial ---------- */
.app-shell .pf-card {
  position: sticky; top: 96px; overflow: hidden; padding: 0 0 18px;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 55%, transparent); border-radius: 8px;
  background: var(--panel); box-shadow: 6px 6px 0 var(--mark-soft);
}
.app-shell .pf-cover { height: 96px; border-bottom: 1.5px solid var(--ink); background: var(--cv, var(--brand)); }
.app-shell .pf-cover::after { display: block; height: 100%; content: ""; background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, 0.14) 14px 28px); }
.app-shell .pf-cover[data-cover="0"] { --cv: var(--brand); }
.app-shell .pf-cover[data-cover="1"] { --cv: var(--red); }
.app-shell .pf-cover[data-cover="2"] { --cv: var(--blue); }
.app-shell .pf-cover[data-cover="3"] { --cv: var(--green); }
.app-shell .pf-cover[data-cover="4"] { --cv: var(--violet); }
.app-shell .pf-cover[data-cover="5"] { --cv: var(--mark); }
.app-shell .pf-cover[data-cover="5"]::after { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0, 0, 0, 0.1) 14px 28px); }
.app-shell .pf-id { padding: 0 20px; }
.app-shell .pf-avatar { display: block; width: fit-content; margin: -50px 0 14px; }
.app-shell .pf-avatar .avatar-wrap { margin: 0; }
.app-shell .pf-avatar .avatar { width: 96px; height: 96px; box-shadow: 0 0 0 4px var(--panel), 0 0 0 6px var(--ink); }
.app-shell .pf-card h1 { margin: 0; font-family: var(--ed-serif); font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.app-shell .pf-card #profileEmail { margin: 4px 0 10px; color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.app-shell .pf-bio { margin: 14px 0 0; line-height: 1.55; overflow-wrap: anywhere; }
.app-shell .pf-bio.is-empty { color: var(--muted); font-style: italic; }
.app-shell .pf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.app-shell .pf-tags li { padding: 2px 10px; background: var(--mark); color: #1c1a14; font-size: 0.82rem; font-weight: 700; border-radius: 3px; }
.app-shell .pf-facts { display: grid; gap: 8px; margin: 16px 20px 0; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent); }
.app-shell .pf-facts div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; }
.app-shell .pf-facts dt { color: var(--muted); }
.app-shell .pf-facts dd { margin: 0; font-weight: 700; text-align: end; }
.app-shell .pf-card .remove-avatar { margin: 14px 20px 0; }
.app-shell .pf-strip { display: grid; gap: 4px; margin: 16px 20px 0; }
.app-shell .pf-strip i { display: block; height: 22px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 12px, transparent 12px 14px); opacity: 0.8; }
.app-shell .pf-strip small { color: var(--muted); font-size: 0.72rem; }

/* ---------- Pestañas ---------- */
.app-shell .pf-tabs { display: flex; gap: 4px; margin: 0 0 22px; border-bottom: 1.5px solid var(--ink); overflow-x: auto; scrollbar-width: none; }
.app-shell .pf-tabs::-webkit-scrollbar { display: none; }
.app-shell .pf-tab {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 6px 6px 0 0; background: transparent; cursor: pointer;
  color: var(--muted); font-family: var(--display); font-size: 0.98rem; font-weight: 700;
}
.app-shell .pf-tab:hover { color: var(--ink); background: var(--mark-soft); }
.app-shell .pf-tab[aria-selected="true"] { color: #1c1a14; background: var(--mark); }
.app-shell .pf-tab:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.app-shell .pf-pane { display: none; gap: 22px; }
.app-shell .pf-pane.is-active { display: grid; }
.app-shell .pf-status { min-height: 1.4em; margin: 0 0 8px; color: var(--brand); font-weight: 700; }
.app-shell .pf-guest { margin: 0 0 18px; padding: 14px 16px; border: 1.5px dashed var(--ink); border-radius: 6px; background: var(--mark-soft); }
.app-shell .pf.is-guest .pf-tab[data-ptab="edit"], .app-shell .pf.is-guest .pf-tab[data-ptab="account"] { display: none; }
.app-shell .pf.is-guest .pf-pane[data-ppane="edit"], .app-shell .pf.is-guest .pf-pane[data-ppane="account"] { display: none; }
.app-shell .pf-pane h3 { margin: 0; font-size: 1.15rem; letter-spacing: -0.01em; }

/* ---------- Resumen ---------- */
.app-shell .pf-meter { display: grid; gap: 8px; padding: 16px 18px; border: 1.5px solid var(--ed-rule-soft); border-radius: 8px; background: var(--panel); }
.app-shell .pf-meter-top { display: flex; align-items: baseline; gap: 10px; }
.app-shell .pf-meter-top b { font-family: var(--ed-serif); font-size: 1.8rem; line-height: 1; }
.app-shell .pf-bar { height: 10px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--bg); overflow: hidden; }
.app-shell .pf-bar i { display: block; height: 100%; width: 0; background: var(--mark); transition: width 0.5s; }
.app-shell .pf-meter p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.app-shell .pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.app-shell .pf-stat { display: grid; gap: 2px; padding: 14px 14px 12px; border: 1.5px solid var(--ed-rule-soft); border-top: 4px solid var(--tc, var(--brand)); border-radius: 6px; background: var(--panel); }
.app-shell .pf-stat:nth-child(1) { --tc: var(--blue); }
.app-shell .pf-stat:nth-child(2) { --tc: var(--red); }
.app-shell .pf-stat:nth-child(3) { --tc: var(--green); }
.app-shell .pf-stat:nth-child(4) { --tc: var(--violet); }
.app-shell .pf-stat b { font-family: var(--ed-serif); font-size: 1.9rem; line-height: 1.1; }
.app-shell .pf-stat span { color: var(--muted); font-size: 0.86rem; }
.app-shell .pf-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.app-shell .pf-badge { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px; border: 1.5px solid var(--ed-rule-soft); border-radius: 8px; background: var(--panel); }
.app-shell .pf-badge .ico { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--bg); font-size: 1.2rem; filter: grayscale(1); opacity: 0.5; }
.app-shell .pf-badge b { display: block; font-size: 0.95rem; }
.app-shell .pf-badge small { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.app-shell .pf-badge.is-on { border-color: var(--ink); background: var(--mark-soft); }
.app-shell .pf-badge.is-on .ico { background: var(--mark); color: #1c1a14; filter: none; opacity: 1; }
.app-shell .pf-badge:not(.is-on) b { color: var(--muted); }
.app-shell .pf-post { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--ed-rule-soft); }
.app-shell .pf-post small { color: var(--muted); }
.app-shell .pf-post p { margin: 0; overflow-wrap: anywhere; }
.app-shell .pf-empty { margin: 0; padding: 14px 0; color: var(--muted); }
.app-shell .pf-link { width: fit-content; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 6px; background: transparent; color: var(--ink); font-weight: 700; cursor: pointer; }
.app-shell .pf-link:hover { background: var(--mark-soft); }

/* ---------- Editar / Preferencias / Cuenta ---------- */
.app-shell .pf-form { display: grid; gap: 18px; }
.app-shell .pf-form label { display: grid; gap: 6px; }
.app-shell .pf-form fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.app-shell .pf-form legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.app-shell .pf-count { justify-self: end; color: var(--muted); font-size: 0.8rem; }
.app-shell .pf-chips, .app-shell .pf-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.app-shell .pf-chip { min-height: 38px; padding: 0 14px; border: 1.5px solid var(--ed-rule-soft); border-radius: 6px; background: var(--panel); color: var(--ink); font-weight: 700; cursor: pointer; }
.app-shell .pf-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--mark); color: #1c1a14; box-shadow: 2px 2px 0 var(--ink); }
.app-shell .pf-swatch { width: 40px; height: 40px; padding: 0; border: 2px solid var(--panel); border-radius: 50%; background: var(--sw); cursor: pointer; box-shadow: 0 0 0 1.5px var(--ed-rule-soft); }
.app-shell .pf-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); }
.app-shell .pf-swatch:focus-visible, .app-shell .pf-chip:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.app-shell .pf-swatch[data-sw="0"] { --sw: var(--brand); } .app-shell .pf-swatch[data-sw="1"] { --sw: var(--red); }
.app-shell .pf-swatch[data-sw="2"] { --sw: var(--blue); } .app-shell .pf-swatch[data-sw="3"] { --sw: var(--green); }
.app-shell .pf-swatch[data-sw="4"] { --sw: var(--violet); } .app-shell .pf-swatch[data-sw="5"] { --sw: var(--mark); }
.app-shell .pf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.app-shell .pf-size { display: inline-flex; gap: 6px; }
.app-shell .pf-size button { min-width: 46px; min-height: 40px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--panel); color: var(--ink); font-weight: 700; cursor: pointer; }
.app-shell .pf-size button:hover { background: var(--mark-soft); }
.app-shell .pf-note { margin: 0; color: var(--muted); font-size: 0.86rem; }

@media (max-width: 900px) {
  .app-shell .pf { grid-template-columns: minmax(0, 1fr); }
  .app-shell .pf-card { position: static; }
}
@media (max-width: 560px) {
  .app-shell .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .pf-card { box-shadow: 3px 3px 0 var(--mark-soft); }
}
@media (prefers-reduced-motion: reduce) { .app-shell .pf-bar i { transition: none; } }

/* ---------- Perfil de otras personas ---------- */
.app-shell .pf[hidden], .app-shell .pf-pane[hidden], .app-shell [hidden].pf-guest { display: none; }
.app-shell .u-back { margin: 0 0 16px; }
.app-shell .pf-warn { padding: 8px 12px; border: 1.5px dashed var(--red); border-radius: 6px; color: var(--red); }
.app-shell .user-link { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: start; }
.app-shell .user-link:hover strong { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.app-shell .user-link:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.app-shell .reel-prof { padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: 0.9; }
.app-shell .u-reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.app-shell .u-reel { position: relative; aspect-ratio: 9 / 12; padding: 0; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--line); cursor: zoom-in; }
.app-shell .u-reel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-shell .u-reel[data-go-reels] { cursor: pointer; background: color-mix(in srgb, var(--brand) 18%, var(--panel)); }
.app-shell .u-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.8rem; color: var(--ink); }

/* <<< FIN: profile.css */


/* ======================================================================
   >>> INICIO: fixes.css
   ====================================================================== */

/* No Cierres Los Ojos · fixes.css — cabecera del celular + botón Reportar. Va después de profile.css. */
@media (max-width: 1020px) { .app-shell .palette-open kbd { display: none; } .app-shell .top-actions { flex-wrap: wrap; } }
@media (max-width: 760px) {
  .app-shell .site-header { margin: 0 -20px 10px; padding-top: env(safe-area-inset-top, 0px); }
  .app-shell .topbar {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
    margin: 0; padding: 8px 14px; flex-wrap: nowrap;
  }
  .app-shell .topbar h2 {
    position: static; width: auto; height: auto; clip-path: none; margin: 0; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem;
  }
  .app-shell .topbar h2::after { display: none; }
  .app-shell .top-actions { display: flex; grid-column: auto; order: 0; flex: none; gap: 6px; align-items: center; }
  .app-shell .top-actions .contribute-shortcut,
  .app-shell .top-actions .install-app,
  .app-shell .top-actions #quickNew,
  .app-shell .top-actions .top-lang { display: none; }
  .app-shell .top-actions .palette-open { width: 40px; min-width: 0; height: 40px; min-height: 0; padding: 0; justify-content: center; }
  .app-shell .top-actions .palette-open span, .app-shell .top-actions .palette-open kbd { display: none; }
  .app-shell .top-actions #themeQuick { width: 40px; height: 40px; min-height: 0; padding: 0; font-size: 0; text-decoration: none; }
  .app-shell .top-actions #themeQuick::before { content: "◐"; font-size: 1.25rem; color: var(--ink); }
  .app-shell .top-actions .user-chip { width: 40px; height: 40px; }
  .app-shell .menu-toggle { padding: 0 12px; min-height: 40px; font-size: 0.92rem; }
  .app-shell .chips { top: auto; margin: 0; padding: 4px 14px 10px; }
}
@media (max-width: 380px) { .app-shell .menu-toggle { font-size: 0; padding: 0 12px; } .app-shell .menu-toggle::before { font-size: 1.2rem; } }

/* Reportar */
.app-shell .report-btn { background: none; border: 0; padding: 4px 6px; min-height: 32px; color: var(--muted); font: inherit; font-size: 0.82rem; cursor: pointer; }
.app-shell .report-btn:hover { color: var(--red); text-decoration: underline; }
.app-shell .donation-card > .report-btn { justify-self: start; margin-top: 8px; }
dialog.report-dlg { width: min(92vw, 440px); padding: 22px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--panel); color: var(--ink); box-shadow: 6px 6px 0 var(--mark); }
dialog.report-dlg::backdrop { background: rgba(10, 10, 10, 0.6); }
dialog.report-dlg h3 { margin: 0 0 4px; font-family: Georgia, serif; }
dialog.report-dlg p { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; }
dialog.report-dlg label { display: grid; gap: 6px; margin-bottom: 12px; font-weight: 700; font-size: 0.9rem; }
dialog.report-dlg select, dialog.report-dlg textarea { width: 100%; padding: 10px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 400; }
dialog.report-dlg .rp-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
dialog.report-dlg button { min-height: 42px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 6px; background: transparent; color: var(--ink); font-weight: 700; cursor: pointer; }
dialog.report-dlg button[type="submit"] { background: var(--brand); color: var(--brand-ink); box-shadow: 3px 3px 0 var(--ink); }
dialog.report-dlg .rp-msg { min-height: 1.3em; margin: 0 0 8px; font-weight: 700; color: var(--brand); }
dialog.report-dlg .rp-msg.bad { color: var(--red); }

/* Admin: reportes */
.app-shell .admin-toolbar { margin: 0 0 12px; }
.app-shell .admin-toolbar select { min-height: 42px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; }

/* Noticias expandibles, comentarios y contadores */
.app-shell .news-card[data-eng-id] { cursor: pointer; }
.app-shell .eng-line { margin: 8px 0 0; color: var(--muted); font-size: 0.8rem; }
.app-shell .eng-line.is-reel { display: block; margin-top: 6px; color: #fff; opacity: 0.85; }
dialog.eng-dlg { width: min(94vw, 760px); max-height: 92vh; padding: 0; overflow: auto; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--panel); color: var(--ink); box-shadow: 8px 8px 0 var(--mark); }
dialog.eng-dlg::backdrop { background: rgba(10, 10, 10, 0.7); }
dialog.eng-dlg .eng-close { position: sticky; top: 8px; float: right; z-index: 2; width: 40px; height: 40px; margin: 8px 8px 0 0; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--mark); color: #1c1a14; font-size: 1.3rem; font-weight: 700; cursor: pointer; }
dialog.eng-dlg .eng-hero { display: block; width: 100%; max-height: 360px; object-fit: cover; border-bottom: 1.5px solid var(--ink); background: var(--line); }
dialog.eng-dlg .eng-main { display: grid; gap: 14px; padding: 20px clamp(16px, 4vw, 30px) 28px; }
dialog.eng-dlg h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
dialog.eng-dlg h3 { margin: 0; font-size: 1.1rem; }
dialog.eng-dlg .eng-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
dialog.eng-dlg .eng-date, dialog.eng-dlg .eng-stats, dialog.eng-dlg small { color: var(--muted); font-size: 0.85rem; }
dialog.eng-dlg .eng-text, dialog.eng-dlg .eng-extra p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
dialog.eng-dlg .eng-extra { display: grid; gap: 10px; }
dialog.eng-dlg .eng-stats { margin: 0; }
dialog.eng-dlg .eng-actions { display: flex; flex-wrap: wrap; gap: 8px; }
dialog.eng-dlg .eng-btn, dialog.eng-dlg .eng-cform button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
dialog.eng-dlg .eng-btn:hover { background: var(--mark-soft); }
dialog.eng-dlg .eng-comments { display: grid; gap: 12px; padding-top: 16px; border-top: 1.5px dashed var(--ink); }
dialog.eng-dlg .eng-clist { display: grid; gap: 10px; }
dialog.eng-dlg .eng-comment { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
dialog.eng-dlg .eng-comment p { margin: 0; overflow-wrap: anywhere; }
dialog.eng-dlg .eng-chead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
dialog.eng-dlg .eng-cact { display: flex; gap: 10px; }
dialog.eng-dlg .eng-cact button { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; }
dialog.eng-dlg .eng-cact button:hover { color: var(--red); text-decoration: underline; }
dialog.eng-dlg .eng-empty { margin: 0; color: var(--muted); }
dialog.eng-dlg .eng-cform { display: grid; gap: 8px; }
dialog.eng-dlg .eng-cform[hidden] { display: none; }
dialog.eng-dlg .eng-cform textarea { width: 100%; padding: 10px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; }
dialog.eng-dlg .eng-cform button { justify-self: end; background: var(--brand); color: var(--brand-ink); box-shadow: 3px 3px 0 var(--ink); }
dialog.eng-dlg .eng-cmsg { min-height: 1.2em; margin: 0; color: var(--brand); font-weight: 700; font-size: 0.9rem; }
@media (max-width: 760px) { dialog.eng-dlg:not(.don-dlg) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border-width: 0; box-shadow: none; } }

/* Buzón (chat con el admin) */
.app-shell .bz { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 28px); align-items: start; }
.app-shell .bz[hidden], .app-shell .bz [hidden] { display: none; }
.app-shell .bz-side, .app-shell .bz-list-wrap { display: grid; gap: 12px; }
.app-shell .bz-list { display: grid; gap: 8px; max-height: 70vh; overflow: auto; }
.app-shell .bz-item { display: grid; gap: 4px; justify-items: start; padding: 12px; text-align: left; border: 1.5px solid var(--ed-rule-soft, var(--line)); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.app-shell .bz-item:hover, .app-shell .bz-item.is-on { border-color: var(--ink); background: var(--mark-soft); }
.app-shell .bz-item strong { overflow-wrap: anywhere; }
.app-shell .bz-item small { color: var(--muted); }
.app-shell .bz-kind, .app-shell .bz-badge { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 0.74rem; font-weight: 700; }
.app-shell .bz-kind { background: var(--mark); color: #1c1a14; }
.app-shell .bz-kind.is-queja { background: var(--red); color: #fff; }
.app-shell .bz-kind.is-sugerencia { background: var(--green); color: #fff; }
.app-shell .bz-badge { border: 1px solid var(--ink); }
.app-shell .bz-badge.is-open { background: var(--mark-soft); }
.app-shell .bz-badge.is-answered { background: color-mix(in srgb, var(--green) 25%, var(--panel)); }
.app-shell .bz-badge.is-closed { color: var(--muted); border-color: var(--muted); }
.app-shell .bz-main { min-width: 0; }
.app-shell .bz-form-new, .app-shell .bz-chat { display: grid; gap: 12px; padding: 16px; border: 1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 8px; background: var(--panel); }
.app-shell .bz-form-new label { display: grid; gap: 6px; font-weight: 700; }
.app-shell .bz-form-new input, .app-shell .bz-form-new select, .app-shell .bz-form-new textarea, .app-shell .bz-form textarea { width: 100%; padding: 10px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 400; }
.app-shell .bz-chead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.app-shell .bz-chead small { display: block; color: var(--muted); }
.app-shell .bz-cact { display: flex; flex-wrap: wrap; gap: 6px; }
.app-shell .bz-cact button { min-height: 36px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.app-shell .bz-back { display: none; }
.app-shell .bz-msgs { display: grid; gap: 8px; align-content: start; max-height: 52vh; min-height: 180px; overflow: auto; padding: 4px; }
.app-shell .bz-bubble { display: grid; gap: 2px; max-width: 86%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; background: var(--bg); justify-self: start; }
.app-shell .bz-bubble.is-mine { justify-self: end; border-radius: 12px 12px 3px 12px; background: var(--mark-soft); border-color: var(--ink); }
.app-shell .bz-bubble.is-team:not(.is-mine) { border-color: var(--brand); }
.app-shell .bz-bubble small { color: var(--muted); font-size: 0.74rem; }
.app-shell .bz-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.app-shell .bz-form { display: grid; gap: 8px; }
.app-shell .bz-form[hidden] { display: none; }
.app-shell .bz-form button, .app-shell .bz-form-new button[type="submit"] { justify-self: end; min-height: 42px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.app-shell .bz-msg { min-height: 1.2em; margin: 0; color: var(--brand); font-weight: 700; font-size: 0.9rem; }
.app-shell .bz-empty { margin: 0; padding: 12px 0; color: var(--muted); }
.app-shell .bz-intro { padding: 16px; border: 1.5px solid var(--ed-rule-soft, var(--line)); border-radius: 8px; background: var(--panel); }
@media (max-width: 760px) {
  .app-shell .bz { grid-template-columns: minmax(0, 1fr); }
  .app-shell .bz.is-chat > .bz-side, .app-shell .bz.is-chat > .bz-list-wrap { display: none; }
  .app-shell .bz:not(.is-chat) > .bz-main { display: none; }
  .app-shell .bz-back { display: inline-flex; align-items: center; }
  .app-shell .bz-msgs { max-height: 48vh; }
  .app-shell .bz-bubble { max-width: 94%; }
}

/* Buzón: estado "En estudio" y selector del admin */
.app-shell .bz-badge.is-reviewing { background: color-mix(in srgb, var(--blue) 25%, var(--panel)); }
.app-shell .bz-statussel { min-height: 36px; padding: 0 8px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 700; }

/* Campana y panel de notificaciones */
.app-shell .notif-bell { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer; }
.app-shell .notif-bell:hover { background: var(--mark-soft); }
.app-shell .notif-bell.is-hidden { display: none; }
.app-shell .notif-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border: 1.5px solid var(--bg); border-radius: 99px; background: var(--red); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 15px; text-align: center; }
.app-shell .notif-count[hidden] { display: none; }
dialog.notif-dlg { width: min(94vw, 440px); max-height: 82vh; margin: 64px 16px auto auto; padding: 0; overflow: auto; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--panel); color: var(--ink); box-shadow: 6px 6px 0 var(--mark); }
dialog.notif-dlg::backdrop { background: rgba(10, 10, 10, 0.5); }
dialog.notif-dlg .notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
dialog.notif-dlg h3 { margin: 0; font-family: Georgia, serif; }
dialog.notif-dlg .notif-x { width: 38px; height: 38px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--mark); color: #1c1a14; font-size: 1.2rem; font-weight: 700; cursor: pointer; }
dialog.notif-dlg .notif-toggle { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
dialog.notif-dlg .notif-toggle input { width: 20px; height: 20px; accent-color: var(--brand); }
dialog.notif-dlg .notif-state { min-height: 1.2em; margin: 0; padding: 0 16px 8px; color: var(--muted); font-size: 0.82rem; border-bottom: 1px solid var(--line); }
dialog.notif-dlg .notif-list { display: grid; margin: 0; padding: 0; list-style: none; }
dialog.notif-dlg .notif-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
dialog.notif-dlg .notif-item:hover { background: var(--mark-soft); }
dialog.notif-dlg .notif-item.is-new { background: color-mix(in srgb, var(--mark) 22%, var(--panel)); }
dialog.notif-dlg .notif-ico { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--bg); font-size: 0.95rem; }
dialog.notif-dlg .notif-txt { display: grid; gap: 2px; min-width: 0; }
dialog.notif-dlg .notif-txt small { color: var(--muted); overflow-wrap: anywhere; }
dialog.notif-dlg time { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
dialog.notif-dlg .notif-empty { padding: 20px 16px; color: var(--muted); }
@media (max-width: 760px) {
  .app-shell .top-actions .notif-bell { width: 40px; height: 40px; }
  dialog.notif-dlg { margin: 56px auto auto; }
}

/* Moderador: ve solo las pestañas de moderación */
body[data-role="moderator"] [data-admin-tab="dashboard"], body[data-role="moderator"] [data-admin-go="dashboard"],
body[data-role="moderator"] [data-admin-tab="articles"], body[data-role="moderator"] [data-admin-go="articles"],
body[data-role="moderator"] [data-admin-tab="users"], body[data-role="moderator"] [data-admin-go="users"],
body[data-role="moderator"] [data-admin-tab="categories"], body[data-role="moderator"] [data-admin-go="categories"],
body[data-role="moderator"] [data-admin-tab="inbox"], body[data-role="moderator"] [data-admin-go="inbox"] { display: none; }
.role-badge.is-mod { background: color-mix(in srgb, var(--blue) 30%, var(--panel)); border-color: var(--blue); color: var(--ink); }

/* Eliminar avisos */
dialog.notif-dlg .notif-head > .notif-clear { margin-left: auto; margin-right: 8px; padding: 0 10px; min-height: 34px; border: 1.5px solid var(--ink); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
dialog.notif-dlg .notif-clear[hidden] { display: none; }
dialog.notif-dlg .notif-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); }
dialog.notif-dlg .notif-row .notif-item { border-bottom: 0; }
dialog.notif-dlg .notif-del { align-self: center; width: 34px; height: 34px; margin-right: 8px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
dialog.notif-dlg .notif-del:hover { background: var(--mark-soft); color: var(--red); }

/* Eliminar en el Buzón */
.app-shell .bz-mdel { justify-self: end; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.74rem; cursor: pointer; }
.app-shell .bz-mdel:hover { color: var(--red); text-decoration: underline; }
.app-shell .bz-cact .bz-delchat { border-color: var(--red); color: var(--red); }

/* <<< FIN: fixes.css */
/* =====================================================================
   LIQUID GLASS · capa de estilo (va al FINAL de bundle.css)
   Vidrio translúcido, desenfoque, brillos en los bordes y fondo con luz suave.
   Para quitarlo: borra todo desde esta línea hasta el final del archivo.
   ===================================================================== */
:root {
  --lg-blur: blur(22px) saturate(175%);
  --lg-blur-soft: blur(12px) saturate(150%);
  --lg-tint: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.38));
  --lg-tint-flat: rgba(255,255,255,.52);
  --lg-tint-hover: rgba(255,255,255,.78);
  --lg-border: rgba(255,255,255,.75);
  --lg-edge: rgba(255,255,255,.95);
  --lg-shadow: 0 10px 34px rgba(35,55,95,.13), 0 2px 6px rgba(35,55,95,.07);
  --lg-shadow-hover: 0 18px 46px rgba(35,55,95,.20), 0 3px 8px rgba(35,55,95,.08);
  --lg-field: rgba(255,255,255,.55);
  --lg-r: 24px;
  --lg-r-sm: 16px;
  --lg-ink-soft: rgba(28,33,40,.62);
  --ed-serif: var(--display);
  --lg-mesh:
    radial-gradient(52vmax 46vmax at 6% 4%, rgba(125,190,255,.55), transparent 62%),
    radial-gradient(46vmax 42vmax at 96% 10%, rgba(255,196,140,.50), transparent 60%),
    radial-gradient(52vmax 46vmax at 88% 96%, rgba(190,160,255,.46), transparent 62%),
    radial-gradient(44vmax 40vmax at 8% 92%, rgba(120,225,200,.42), transparent 62%),
    linear-gradient(180deg, #eef3fb, #f6f1ec);
}
:root[data-theme="dark"] {
  --lg-tint: linear-gradient(145deg, rgba(40,60,96,.58), rgba(18,30,54,.40));
  --lg-tint-flat: rgba(24,38,66,.50);
  --lg-tint-hover: rgba(44,66,106,.62);
  --lg-border: rgba(255,255,255,.15);
  --lg-edge: rgba(255,255,255,.30);
  --lg-shadow: 0 14px 44px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
  --lg-shadow-hover: 0 22px 56px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.32);
  --lg-field: rgba(255,255,255,.07);
  --lg-ink-soft: rgba(234,242,252,.66);
  --lg-mesh:
    radial-gradient(50vmax 44vmax at 6% 4%, rgba(60,120,230,.42), transparent 62%),
    radial-gradient(44vmax 40vmax at 96% 12%, rgba(150,90,230,.34), transparent 60%),
    radial-gradient(50vmax 44vmax at 90% 96%, rgba(30,170,170,.30), transparent 62%),
    radial-gradient(40vmax 36vmax at 8% 94%, rgba(230,150,70,.20), transparent 62%),
    linear-gradient(180deg, #0a1222, #0d1326);
}

/* ---------- Fondo ---------- */
html { background: var(--bg); }
body { background: transparent !important; background-image: none !important; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--lg-mesh); pointer-events: none; }
.access-screen { background: transparent !important; }
.app-shell { background: transparent; }

/* ---------- Superficies de vidrio ---------- */
.app-shell :is(.news-card, .forum-panel, .donation-card, .comm-item, .about, .reading-note, .world-section,
  .stat, .admin-form, .pf-card, .pf-meter, .pf-stat, .reader-player, .safety-note, .contribution-aside,
  .world-region, .bz-item, .mosaic-tile, .source-list a, .tips > div, .admin-row, .cat-row, .bz-main, .bz-side,
  .pf-form, .pref-panel, .session-card, .ticker, .post, .pulse-line span, .topic-row, .admin-cols > div, .pf-badges li, .pf-guest),
.palette-box {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--lg-glow-rgb, 255 255 255) / var(--lg-glow, 0)), transparent 65%), var(--lg-tint) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border) !important;
  border-radius: var(--lg-r) !important;
  box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-edge), inset 0 -1px 0 rgba(255,255,255,.12) !important;
}
.app-shell :is(.world-region, .bz-item, .source-list a, .admin-row, .cat-row, .post, .pulse-line span, .topic-row, .tips > div, .pf-badges li, .pf-guest, .admin-cols > div) {
  border-radius: var(--lg-r-sm) !important;
}
/* filas muy repetidas: más ligeras */
.app-shell :is(.admin-row, .post, .source-list a, .cat-row) { box-shadow: inset 0 1px 0 var(--lg-edge) !important; margin-bottom: 8px; padding-left: 16px; padding-right: 16px; }
.app-shell .post.is-reply { background: var(--lg-tint-flat) !important; border-left: 3px solid color-mix(in srgb, var(--brand) 45%, transparent) !important; }
.app-shell .admin-list { gap: 0; }

/* elevación al pasar el cursor */
@media (hover: hover) {
  .app-shell :is(.news-card, .comm-item, .donation-card, .topic-row, .world-region, .bz-item) {
    transition: transform .45s cubic-bezier(.34,1.4,.5,1), box-shadow .35s, background .35s, --lg-glow .5s ease;
  }
  .app-shell :is(.news-card, .comm-item, .donation-card, .topic-row):hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--lg-shadow-hover), inset 0 1px 0 var(--lg-edge) !important;
    background: var(--lg-tint-hover) !important;
  }
}
.app-shell .news-card { overflow: hidden; padding: 0; }
.app-shell .news-card img { border-radius: 0 !important; }
.app-shell .news-card .card-body { padding: 18px 20px 20px; }
.app-shell .news-card:nth-child(3n + 2), .app-shell .news-card:nth-child(3n + 3) { transform: none; }

/* ---------- Cabecera flotante ---------- */
.app-shell .site-header {
  top: 10px !important; margin: 10px 0 22px !important; padding-top: 0 !important; z-index: 40;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--lg-glow-rgb, 255 255 255) / var(--lg-glow, 0)), transparent 65%), var(--lg-tint) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border); border-radius: 28px;
  box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-edge);
}
.app-shell .topbar { padding: 10px 16px 8px !important; background: transparent !important; border: 0 !important; }
.app-shell .chips { margin: 0 !important; padding: 2px 14px 12px !important; border: 0 !important; background: transparent !important; backdrop-filter: none !important; }
.app-shell .topbar h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.app-shell .topbar h2::after { background: linear-gradient(90deg, var(--brand), transparent) !important; }

/* píldoras de vidrio (chips, botones secundarios, buscador, menú) */
.app-shell :is(.chip, .menu-toggle, .palette-open, .contribute-shortcut, .install-app, .user-chip, .lang-select, .ghost-button,
  .forum-toolbar button, .session-card button, .pf-chip, .pf-tab, .pf-link, .report-btn) {
  background: var(--lg-field) !important;
  -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft);
  border: 1px solid var(--lg-border) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 var(--lg-edge), 0 2px 8px rgba(35,55,95,.07) !important;
  color: var(--ink);
  transition: background .25s, transform .25s, box-shadow .25s;
}
.app-shell .lang-select { padding-right: 8px; }
.app-shell :is(.chip, .menu-toggle, .palette-open, .contribute-shortcut, .ghost-button, .pf-chip, .pf-tab):hover { background: var(--lg-tint-hover) !important; }
.app-shell .chip.is-active, .app-shell .dd.has-active > .dd-trigger, .app-shell .pf-tab[aria-selected="true"], .app-shell .pf-chip[aria-pressed="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)) !important;
  color: var(--brand-ink) !important; border-color: rgba(255,255,255,.4) !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
.app-shell .text-btn { border-radius: 999px; }
.app-shell .user-chip { width: 42px; height: 42px; font-weight: 700; }
.app-shell .dd-panel {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--lg-glow-rgb, 255 255 255) / var(--lg-glow, 0)), transparent 65%), var(--lg-tint) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border) !important; border-radius: 22px !important; margin-top: 8px;
  box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-edge) !important;
}
.app-shell .dd-panel .chip { border-radius: 14px !important; }

/* ---------- Menú lateral (cajón) ---------- */
.app-shell .sidebar {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--lg-glow-rgb, 255 255 255) / var(--lg-glow, 0)), transparent 65%), var(--lg-tint) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border) !important; box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-edge);
}
@media (max-width: 1020px) { .app-shell .sidebar { border-radius: 0 28px 28px 0; background: color-mix(in srgb, var(--bg) 40%, transparent) !important; background-image: var(--lg-tint) !important; } }
.app-shell .scrim { background: rgba(20,30,50,.28) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.app-shell .nav-item, .app-shell .nav-toggle { border-radius: 14px; transition: background .2s; }
.app-shell .nav-item:hover, .app-shell .nav-toggle:hover { background: var(--lg-tint-flat); }
.app-shell .nav-item.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)) !important;
  color: var(--brand-ink) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.app-shell .session-card { padding: 14px 16px; }

/* ---------- Botones principales ---------- */
.app-shell :is(button[type="submit"], .cta-main, .admin-actions button:not(.ghost-button), .admin-hero-actions button:not(.ghost-button),
  .reply-form button, .cat-row button, .btn-mark),
.access-screen button[type="submit"] {
  border: 1px solid rgba(255,255,255,.38) !important; border-radius: 999px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)) !important;
  color: var(--brand-ink) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.5) !important;
  transition: transform .25s, box-shadow .25s, filter .25s;
}
.app-shell .btn-mark { background: linear-gradient(180deg, #ffe58a, var(--mark)) !important; color: #2a2208 !important; box-shadow: 0 8px 22px rgba(240,190,50,.40), inset 0 1px 0 rgba(255,255,255,.7) !important; }
.app-shell :is(button[type="submit"], .cta-main, .btn-mark):hover { transform: translateY(-2px); filter: brightness(1.06); }
.app-shell :is(button[type="submit"], .cta-main, .btn-mark):active { transform: scale(.97); }
.app-shell .cta-link { color: var(--brand); }
.app-shell .danger-btn, .app-shell .row-actions .danger { border-radius: 999px; background: var(--lg-field); backdrop-filter: var(--lg-blur-soft); }
.app-shell .row-actions button, .app-shell .row-actions a, .app-shell .card-actions .share-btn {
  background: var(--lg-field); border: 1px solid var(--lg-border); border-radius: 999px; box-shadow: inset 0 1px 0 var(--lg-edge);
}

/* ---------- Campos de formulario ---------- */
input, select, textarea {
  background: var(--lg-field) !important; border: 1px solid var(--lg-border) !important; border-radius: 16px !important;
  -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft);
  box-shadow: inset 0 2px 5px rgba(35,55,95,.07), inset 0 1px 0 rgba(255,255,255,.3);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:focus, select:focus, textarea:focus {
  outline: 0 !important; background: var(--lg-tint-hover) !important;
  border-color: color-mix(in srgb, var(--brand) 60%, #fff) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent), inset 0 1px 2px rgba(35,55,95,.06);
}
input[type="checkbox"], input[type="radio"], input[type="range"], input[type="color"] { backdrop-filter: none; box-shadow: none; }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { box-shadow: inset 0 2px 6px rgba(0,0,0,.28); }

/* ---------- Títulos y textos ---------- */
.app-shell :is(h1, h2, h3, h4), .app-shell :is(.pulse-line b, .topic-row b, .comm-item b, .about h3, .pf-card h1, .pf-stat b, .reading-note-intro h2,
  .mosaic-head h2, .stat b, .section-head h3, .donation-card h3, .news-card h3, .hero-text h1, .page-head h1) {
  font-family: var(--display) !important; font-weight: 700 !important; letter-spacing: -.025em;
}
.app-shell .hero-text h1 { font-weight: 800 !important; letter-spacing: -.04em; line-height: 1.04;
  background: linear-gradient(120deg, var(--ink) 30%, color-mix(in srgb, var(--brand) 85%, var(--ink)) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.app-shell .section-head { border-bottom: 0 !important; }
.app-shell .section-head h3::before, .app-shell .section-head h3::after { display: none !important; }
.app-shell .section-head h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.app-shell .eyebrow, .app-shell .hero-text .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 14px !important;
  background: var(--lg-field) !important; color: var(--brand) !important; border: 1px solid var(--lg-border);
  border-radius: 999px !important; box-shadow: inset 0 1px 0 var(--lg-edge); -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft);
  font-size: .78rem; letter-spacing: .08em;
}
.app-shell .page-head:not(.admin-head), .app-shell .admin-head {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--lg-glow-rgb, 255 255 255) / var(--lg-glow, 0)), transparent 65%), var(--lg-tint) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border) !important; border-radius: 28px !important; padding: 26px 28px !important;
  box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-edge) !important;
}
.app-shell .page-head:not(.admin-head) { border-left-width: 6px !important; }
.app-shell .page-head p, .app-shell .muted { color: var(--lg-ink-soft); }
.app-shell .safety-note { border-left: 5px solid var(--mark) !important; }
.app-shell .tag { padding: 3px 11px; background: color-mix(in srgb, currentColor 12%, transparent); border-radius: 999px; }

/* ---------- Portada ---------- */
.app-shell .hero-image img { border-radius: 34px !important; border: 1px solid var(--lg-border); box-shadow: var(--lg-shadow-hover) !important; }
.app-shell .hero-image { filter: none; }
.app-shell .hero-image figcaption { color: var(--lg-ink-soft); }
.app-shell .hero { border-bottom: 0 !important; }
.app-shell .pulse-line { border: 0 !important; background: none !important; gap: 12px; padding: 0; }
.app-shell .pulse-line span { padding: 14px 20px !important; }
.app-shell .ticker { border-radius: 999px !important; padding: 0 !important; overflow: hidden; }
.app-shell .world-section { padding: clamp(22px, 4vw, 40px); }
.app-shell .globe { filter: drop-shadow(0 18px 30px rgba(30,60,110,.28)); }
.app-shell .topic-row { border-left-width: 1px !important; }
.app-shell .comm-item { padding: 24px !important; border-top-width: 1px !important; }

/* ---------- Ventanas (diálogos, buscador, avisos) ---------- */
dialog.report-dlg, dialog.eng-dlg, dialog.notif-dlg, dialog.reel-sheet, dialog.lightbox figure {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--lg-glow-rgb, 255 255 255) / var(--lg-glow, 0)), transparent 65%), var(--lg-tint) !important; color: var(--ink);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--lg-border) !important; border-radius: 28px !important;
  box-shadow: 0 30px 80px rgba(10,20,45,.35), inset 0 1px 0 var(--lg-edge) !important;
}
dialog.lightbox figure { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog::backdrop { background: rgba(14,22,40,.36); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.palette { background: rgba(14,22,40,.36) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.palette-box { border-radius: 26px !important; }
.palette-box input { background: transparent !important; box-shadow: none !important; backdrop-filter: none; border-radius: 0 !important; }
.app-shell .app-message, .app-message {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--lg-glow-rgb, 255 255 255) / var(--lg-glow, 0)), transparent 65%), var(--lg-tint) !important; color: var(--ink) !important; border: 1px solid var(--lg-border) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); border-radius: 999px !important;
  box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-edge) !important;
}
.notif-bell { background: var(--lg-field) !important; border: 1px solid var(--lg-border) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 var(--lg-edge); }

/* ---------- Administración ---------- */
.app-shell .admin-tabs { gap: 6px; padding: 6px; border: 1px solid var(--lg-border) !important; border-radius: 999px; background: var(--lg-tint-flat); -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft); width: fit-content; max-width: 100%; }
.app-shell .admin-tab { padding: 8px 16px !important; margin: 0 !important; border: 0 !important; border-radius: 999px; }
.app-shell .admin-tab.is-active { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)); color: var(--brand-ink); box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.4); }
.app-shell .stat b { font-size: 2.2rem; }

/* ---------- Navegación móvil: barra flotante ---------- */
.bottom-nav {
  left: 12px !important; right: 12px !important; bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important;
  border: 1px solid var(--lg-border) !important; border-radius: 28px !important;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--lg-glow-rgb, 255 255 255) / var(--lg-glow, 0)), transparent 65%), var(--lg-tint) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shadow-hover), inset 0 1px 0 var(--lg-edge) !important; padding: 6px !important;
}
.bottom-nav .bnav-item { border-radius: 20px; background: transparent; box-shadow: none; min-width: 0; }
.bottom-nav .bnav-item.is-active { box-shadow: inset 0 1px 0 rgba(255,255,255,.4); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)); color: var(--brand-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }

/* ---------- Pie de página ---------- */
.app-shell .site-footer::before { display: none !important; }
.app-shell .footer-brand strong, .app-shell .pf-meter-top b { font-family: var(--display) !important; font-style: normal; }
.app-shell .site-footer {
  margin: 56px 0 20px !important; padding: 40px clamp(20px, 3.5vw, 44px) 26px !important; border: 1px solid var(--lg-border) !important; border-radius: 32px;
  background: linear-gradient(145deg, rgba(24,66,92,.88), rgba(38,44,110,.82)) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-shadow-hover), inset 0 1px 0 rgba(255,255,255,.28);
}
.app-shell .footer-rules { border-radius: 22px !important; box-shadow: none !important; }

/* ---------- Pantalla de entrada ---------- */
.access-screen .ax-coupon {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--lg-glow-rgb, 255 255 255) / var(--lg-glow, 0)), transparent 65%), var(--lg-tint) !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
}
.access-screen .ax-coupon { border: 1px solid var(--lg-border) !important; border-radius: 32px !important; box-shadow: var(--lg-shadow-hover), inset 0 1px 0 var(--lg-edge) !important; }
.access-screen .auth-form { border: 0 !important; box-shadow: none !important; }
/* pestañas Iniciar sesión / Crear cuenta: sin marco, en píldora de vidrio */
.access-screen .ax-tabs {
  gap: 4px; padding: 5px; overflow: visible;
  border: 0 !important; border-radius: 999px !important;
  background: var(--lg-field); -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft);
  box-shadow: inset 0 2px 5px rgba(35,55,95,.10), inset 0 1px 0 var(--lg-edge);
}
.access-screen .auth-tab { border: 0 !important; border-left: 0 !important; border-radius: 999px !important; padding: 11px 8px; }
.access-screen .auth-tab:hover { background: var(--lg-tint-flat); }
.access-screen .auth-tab.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)); color: var(--brand-ink);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 34%, transparent), inset 0 1px 0 rgba(255,255,255,.45);
}
/* campos y botones del formulario */
.access-screen .auth-form input:not([type="checkbox"]), .access-screen .ax-lang .lang-select, .access-screen .auth-form .lang-select {
  padding: 12px 16px !important; border: 1px solid var(--lg-border) !important; border-radius: 16px !important;
  background: var(--lg-field) !important; box-shadow: inset 0 2px 5px rgba(35,55,95,.08), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.access-screen .auth-form input:not([type="checkbox"]):focus, .access-screen .ax-lang .lang-select:focus {
  padding-inline: 16px !important; background: var(--lg-tint-hover) !important; border-color: color-mix(in srgb, var(--brand) 60%, #fff) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent) !important;
}
.access-screen .auth-form button[type="submit"] { border: 1px solid rgba(255,255,255,.4) !important; }
.access-screen .auth-form button[type="submit"]:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.5) !important; transform: translateY(-2px); }
.access-screen .auth-form button[type="submit"]:active { transform: scale(.98); }
.access-screen .auth-form .ghost-button {
  border: 1px solid var(--lg-border) !important; border-radius: 999px !important; background: var(--lg-field) !important;
  box-shadow: inset 0 1px 0 var(--lg-edge) !important; -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft);
}
.access-screen .auth-form .ghost-button:hover { background: var(--lg-tint-hover) !important; }
.access-screen .ax-coupon-label {
  background: var(--lg-field) !important; border: 1px solid var(--lg-border) !important; border-radius: 999px !important;
  -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft);
}
.access-screen .ax-stage { border: 1px solid var(--lg-border) !important; border-radius: 32px !important; overflow: hidden; box-shadow: var(--lg-shadow-hover); }
.access-screen .ax-masthead { background: transparent; }

/* ---------- Cabecera tipo periódico (login y dentro de la página) ---------- */
.ax-mast-title h2, .app-mast-name {
  font-family: var(--display) !important; font-weight: 800 !important; letter-spacing: -.035em !important;
  background: linear-gradient(120deg, var(--ink) 35%, color-mix(in srgb, var(--brand) 85%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ax-logo { border: 2px solid var(--lg-edge) !important; box-shadow: 0 6px 18px rgba(35,55,95,.25); }
.ax-ticker, .access-screen .ax-ticker {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--lg-glow-rgb, 255 255 255) / var(--lg-glow, 0)), transparent 65%), var(--lg-tint) !important; color: var(--brand) !important;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border-block: 1px solid var(--lg-border); box-shadow: inset 0 1px 0 var(--lg-edge);
}
.app-masthead {
  margin: 14px 0 0; padding: 4px clamp(14px, 2vw, 26px) 0; overflow: hidden;
  background: var(--lg-tint); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border); border-radius: 28px;
  box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-edge);
}
.app-masthead .ax-mast-row { padding-top: 12px; padding-bottom: 12px; }
.app-masthead .app-mast-name { font-size: clamp(1.5rem, 3.4vw, 2.7rem); line-height: 1.05; white-space: nowrap; }
.app-masthead .ax-logo { width: clamp(36px, 4.2vw, 54px); height: clamp(36px, 4.2vw, 54px); }
.app-masthead .ax-ticker { margin: 0 calc(-1 * clamp(14px, 2vw, 26px)); border-inline: 0; border-bottom: 0; background: var(--lg-tint-flat) !important; }
.app-shell .site-header { margin-top: 12px !important; }
@media (max-width: 900px) { .app-masthead .ax-mast-side { display: none; } .app-masthead .ax-mast-row { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .app-masthead { margin-top: 8px; border-radius: 24px; } .app-masthead .app-mast-name { font-size: 1.35rem; } }
@media (prefers-reduced-motion: reduce) { .app-masthead .ax-ticker-track { animation: none !important; } }

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .app-shell .site-header { top: 8px !important; margin: 8px 0 14px !important; border-radius: 24px; }
  .app-shell .topbar { padding: 8px 10px 4px !important; }
  .app-shell .chips { padding: 2px 10px 10px !important; }
  .app-shell :is(.page-head:not(.admin-head), .admin-head) { padding: 20px !important; border-radius: 24px !important; }
  .app-shell .pulse-line span { flex: 1 1 calc(50% - 12px); }
  .app-shell .content { padding-bottom: 110px; }
  .app-shell .chips { overflow-x: auto; scrollbar-width: none; }
  .app-shell .chips::-webkit-scrollbar { display: none; }
  .app-shell .top-actions #themeQuick { background: var(--lg-field) !important; border: 1px solid var(--lg-border) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 var(--lg-edge) !important; }
  .app-shell .top-actions #themeQuick::before {
    content: ""; display: block; width: 20px; height: 20px; margin: auto; background: var(--ink); font-size: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20V2z'/%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20V2z'/%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* ---------- Sin desenfoque (navegadores antiguos) y menos movimiento ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --lg-tint: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.86)); --lg-field: rgba(255,255,255,.9); }
  :root[data-theme="dark"] { --lg-tint: linear-gradient(145deg, rgba(30,46,76,.96), rgba(20,32,56,.94)); --lg-field: rgba(40,58,92,.9); }
}
@media (prefers-reduced-motion: reduce) { .app-shell * { transition: none !important; } }
@media (prefers-reduced-transparency: reduce) {
  :root { --lg-tint: var(--panel); --lg-field: var(--panel); --lg-tint-flat: var(--panel); --lg-tint-hover: var(--panel); }
}


/* =====================================================================
   ANIMACIONES DEL LIQUID GLASS
   (se desactivan solas si la persona tiene "reducir movimiento")
   ===================================================================== */
@property --lg-glow { syntax: "<number>"; inherits: false; initial-value: 0; }

/* 1) Fondo vivo: las luces de color se mueven despacio detrás del vidrio */
body::before { inset: -18%; will-change: transform; animation: lg-drift 36s ease-in-out infinite alternate; }
@keyframes lg-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate3d(4%, -3%, 0) rotate(6deg) scale(1.08); }
  66%  { transform: translate3d(-4%, 4%, 0) rotate(-4deg) scale(1.04); }
  100% { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.1); }
}

/* 2) Luz que sigue al cursor sobre el vidrio (el JS pone --mx y --my) */
@media (hover: hover) {
  :root { --lg-glow-on: .34; --lg-glow-rgb: 110 170 255; }
  :root[data-theme="dark"] { --lg-glow-on: .16; --lg-glow-rgb: 255 255 255; }
  .app-shell :is(.news-card, .forum-panel, .donation-card, .comm-item, .about, .reading-note, .world-section, .stat, .admin-form,
    .pf-card, .pf-meter, .pf-stat, .contribution-aside, .world-region, .bz-item, .topic-row, .page-head, .site-header, .app-masthead,
    .pulse-line span, .post, .safety-note, .session-card):hover { --lg-glow: var(--lg-glow-on); }
  .app-shell :is(.page-head, .site-header, .app-masthead, .forum-panel, .world-section, .about, .reading-note) { transition: --lg-glow .6s ease; }
}

/* 3) Entrada de las secciones: suben, crecen un poco y aparecen (con escalón entre tarjetas) */
.motion-ready .reveal-on-view {
  opacity: 0; transform: translateY(30px) scale(.97);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.9,.25,1.05), box-shadow .35s, background .35s, --lg-glow .5s ease;
}
.motion-ready .reveal-on-view.is-revealed { opacity: 1; transform: none; }
.motion-ready .news-grid > :nth-child(2), .motion-ready .topic-list > :nth-child(2), .motion-ready .community-list > :nth-child(2) { transition-delay: 90ms; }
.motion-ready .news-grid > :nth-child(3), .motion-ready .topic-list > :nth-child(3), .motion-ready .community-list > :nth-child(3) { transition-delay: 180ms; }
.motion-ready .news-grid > :nth-child(4), .motion-ready .topic-list > :nth-child(4) { transition-delay: 270ms; }
.motion-ready .news-grid > :nth-child(n+5) { transition-delay: 330ms; }

/* 4) Las cabeceras caen suavemente al cargar la página */
.app-masthead { animation: lg-drop .8s cubic-bezier(.2,.9,.25,1.05) both; }
.app-shell .site-header { animation: lg-drop .8s .12s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes lg-drop { from { opacity: 0; transform: translateY(-22px) scale(.985); } to { opacity: 1; transform: none; } }
.access-screen .ax-coupon { animation: lg-rise .9s .1s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes lg-rise { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
.ax-logo { animation: lg-breathe 5s ease-in-out infinite; }
@keyframes lg-breathe { 0%, 100% { box-shadow: 0 6px 18px rgba(35,55,95,.25), 0 0 0 0 rgba(120,190,255,.0); } 50% { box-shadow: 0 6px 22px rgba(35,55,95,.30), 0 0 0 9px rgba(120,190,255,.18); } }

/* 5) Menús y ventanas se abren con un "pop" líquido */
.app-shell .dd.is-open > .dd-panel { animation: lg-pop .32s cubic-bezier(.2,.9,.25,1.15) both; transform-origin: top center; }
dialog[open].report-dlg, dialog[open].eng-dlg, dialog[open].notif-dlg, dialog[open].reel-sheet { animation: lg-pop .4s cubic-bezier(.2,.9,.25,1.12) both; }
dialog[open]::backdrop { animation: lg-fade .3s ease both; }
.palette.is-open { animation: lg-fade .25s ease both; }
.palette.is-open .palette-box { animation: lg-pop .38s cubic-bezier(.2,.9,.25,1.12) both; }
.app-shell .app-message.show { animation: lg-pop .35s cubic-bezier(.2,.9,.25,1.2) both; }
@keyframes lg-pop { from { opacity: 0; transform: translateY(14px) scale(.93); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes lg-fade { from { opacity: 0; } to { opacity: 1; } }

/* 6) Botones principales: brillo que los recorre al pasar el cursor + rebote al pulsar */
.app-shell :is(button[type="submit"], .cta-main, .admin-actions button:not(.ghost-button), .admin-hero-actions button:not(.ghost-button),
  .reply-form button, .cat-row button),
.access-screen button[type="submit"] {
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%) no-repeat -160% 0 / 260% 100%,
              linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)) !important;
  transition: background-position .9s ease, transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, filter .25s;
}
.app-shell :is(button[type="submit"], .cta-main, .admin-actions button:not(.ghost-button), .admin-hero-actions button:not(.ghost-button),
  .reply-form button, .cat-row button):hover,
.access-screen button[type="submit"]:hover { background-position: 160% 0, 0 0 !important; }
.app-shell :is(.chip, .menu-toggle, .palette-open, .contribute-shortcut, .user-chip, .ghost-button, .pf-chip, .pf-tab, .bnav-item, .nav-item, .admin-tab, .row-actions button) {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .3s, color .2s;
}
.app-shell :is(.chip, .menu-toggle, .palette-open, .contribute-shortcut, .user-chip, .ghost-button, .pf-chip, .pf-tab, .bnav-item, .admin-tab):active { transform: scale(.93); }
@media (hover: hover) { .app-shell :is(.chip, .menu-toggle, .palette-open, .contribute-shortcut, .user-chip, .pf-chip):hover { transform: translateY(-2px); } }

/* 7) Campos: el halo crece al enfocar */
input, select, textarea { transition: border-color .25s, box-shadow .35s cubic-bezier(.2,.9,.25,1), background .25s; }

/* 8) Elementos que flotan despacio */
.app-shell .hero-image img { animation: lg-float 9s ease-in-out infinite alternate; }
.app-shell .globe-wrap { animation: lg-float 11s ease-in-out infinite alternate; }
@keyframes lg-float { from { transform: translateY(0) rotate(-.3deg); } to { transform: translateY(-9px) rotate(.3deg); } }

/* 9) Pestañas de administración y píldoras activas con luz que respira */
.app-shell .chip.is-active, .app-shell .nav-item.is-active, .app-shell .admin-tab.is-active, .bottom-nav .bnav-item.is-active { animation: lg-glow-pulse 3.6s ease-in-out infinite; }
@keyframes lg-glow-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.09); } }

@media (prefers-reduced-motion: reduce) {
  body::before, .ax-logo, .app-shell .hero-image img, .app-shell .globe-wrap, .app-masthead, .app-shell .site-header,
  .app-shell :is(.chip, .nav-item, .admin-tab).is-active, .bottom-nav .bnav-item.is-active { animation: none !important; }
  .motion-ready .reveal-on-view { opacity: 1; transform: none; }
}


/* Submenús (Temas, Comunidad, Más): fondo casi opaco para que el texto de atrás no estorbe la lectura.
   (Un vidrio dentro de otro vidrio no puede desenfocar lo que hay detrás, por eso se usa un fondo sólido.) */
.app-shell .dd-panel {
  background: var(--panel) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 22px 50px rgba(20,35,70,.28), 0 2px 8px rgba(20,35,70,.12), inset 0 1px 0 var(--lg-edge) !important;
}
.app-shell .dd-panel .chip { background: color-mix(in srgb, var(--ink) 5%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
.app-shell .dd-panel .chip:hover { background: color-mix(in srgb, var(--brand) 16%, transparent) !important; }
.app-shell .dd-panel .chip.is-active { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)) !important; }


/* ===== Documentos legales · liquid glass ===== */
.legal-open { overflow: hidden; }
.legal-modal { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(900px 500px at 15% 10%, rgba(255, 216, 77, 0.22), transparent 60%), radial-gradient(800px 520px at 90% 90%, rgba(123, 188, 208, 0.28), transparent 60%), rgba(12, 16, 22, 0.42);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.legal-modal[hidden], .legal-banner[hidden] { display: none; }
.legal-modal .legal-box { position: relative; display: flex; flex-direction: column; width: min(840px, 100%); max-height: min(88vh, 900px); min-height: 0; border-radius: 26px; color: var(--ink); overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.30));
  border: 1px solid rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.25); }
.legal-modal .legal-box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%); }
.legal-modal .legal-bar, .legal-modal .legal-tabs, .legal-modal .legal-body { position: relative; z-index: 1; }
.legal-modal .legal-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 8px; }
.legal-modal .legal-bar strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; }
.legal-modal .legal-close { flex: none; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.45); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.legal-modal .legal-tabs { flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: 8px; padding: 6px 18px 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.legal-modal .legal-tabs::-webkit-scrollbar { display: none; }
.legal-modal .legal-tabs button { flex: 0 0 auto; width: auto; min-height: 40px; padding: 0 16px; border-radius: 999px; white-space: nowrap; font: inherit; font-size: 0.9rem; color: var(--ink); cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: background 0.2s, transform 0.2s; }
.legal-modal .legal-tabs button:hover { background: rgba(255, 255, 255, 0.6); }
.legal-modal .legal-tabs button.is-active { background: linear-gradient(180deg, rgba(255, 224, 110, 0.95), rgba(255, 205, 50, 0.85)); border-color: rgba(255, 255, 255, 0.8); color: #1c2128; font-weight: 700; box-shadow: 0 4px 14px rgba(255, 190, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.legal-modal .legal-body { flex: 1 1 auto; min-height: 0; padding: 4px 24px 30px; overflow-y: auto; overscroll-behavior: contain; line-height: 1.65; border-top: 1px solid rgba(255, 255, 255, 0.5); }
.legal-body h2 { margin: 18px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; }
.legal-body h3 { margin: 22px 0 6px; font-size: 1rem; }
.legal-body p, .legal-body ul { margin: 0 0 10px; }
.legal-body ul { padding-left: 22px; }
.legal-body li { margin-bottom: 4px; }
.legal-meta { color: var(--muted); font-size: 0.88rem; }
.legal-missing { background: var(--mark-soft); border-radius: 4px; padding: 0 4px; font-weight: 700; }
.legal-link { display: inline; width: auto; min-height: 0; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; text-decoration: underline; cursor: pointer; }
.legal-check span { line-height: 1.45; }
.legal-check input { flex: none; }
.ax-legal { margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); }
.legal-callout { margin: 0 0 18px; padding: 12px 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.6); color: var(--ink); font-size: 0.93rem; line-height: 1.5;
  background: linear-gradient(135deg, rgba(255, 216, 77, 0.38), rgba(255, 255, 255, 0.28)); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1180px; margin: 22px auto 0; }
.footer-legal button { width: auto; min-height: 38px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 0.88rem; color: var(--f-ink, inherit); cursor: pointer;
  border: 1px solid var(--f-line, rgba(255, 255, 255, 0.4)); background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.footer-legal button:hover { background: rgba(255, 255, 255, 0.24); }
.legal-banner { position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 8500; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; max-width: 760px; margin: 0 auto; padding: 14px 18px; border-radius: 22px; color: var(--ink);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.34)); border: 1px solid rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.85); }
.legal-banner p { margin: 0; flex: 1 1 260px; font-size: 0.92rem; line-height: 1.45; }
.legal-banner div { display: flex; gap: 8px; }
.legal-banner button { width: auto; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.45); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.legal-banner .legal-banner-ok { background: var(--brand); border-color: transparent; color: var(--brand-ink); }

/* modo oscuro: cristal oscuro */
:root[data-theme="dark"] .legal-modal .legal-box, [data-theme="dark"] .legal-modal .legal-box, .dark .legal-modal .legal-box { background: linear-gradient(145deg, rgba(40, 48, 58, 0.72), rgba(20, 26, 32, 0.50)); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
:root[data-theme="dark"] .legal-modal .legal-box::before, [data-theme="dark"] .legal-modal .legal-box::before { background: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 38%); }
:root[data-theme="dark"] .legal-modal .legal-tabs button, :root[data-theme="dark"] .legal-modal .legal-close, [data-theme="dark"] .legal-modal .legal-tabs button, [data-theme="dark"] .legal-modal .legal-close { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
:root[data-theme="dark"] .legal-modal .legal-body, [data-theme="dark"] .legal-modal .legal-body { border-top-color: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .legal-banner, [data-theme="dark"] .legal-banner { background: linear-gradient(145deg, rgba(40, 48, 58, 0.78), rgba(20, 26, 32, 0.58)); border-color: rgba(255, 255, 255, 0.16); }
:root[data-theme="dark"] .legal-callout, [data-theme="dark"] .legal-callout { border-color: rgba(255, 255, 255, 0.16); background: linear-gradient(135deg, rgba(255, 216, 77, 0.16), rgba(255, 255, 255, 0.05)); }

@media (max-width: 600px) {
  .legal-modal { padding: 10px; align-items: end; }
  .legal-modal .legal-box { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 26px 26px 18px 18px; }
  .legal-modal .legal-body { padding: 4px 18px 28px; }
}


/* ===== Liquid glass total =====
   Capa final: extiende el vidrio a cierres (X), botones de subir, selectores, idiomas,
   ventanas, tarjetas de reels, donaciones, notificaciones y comentarios.
   Para quitarla borra desde esta línea hasta el final. */
:root {
  --lg-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231c2128' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --lg-pill: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.30));
  --lg-primary: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand));
}
:root[data-theme="dark"] {
  --lg-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e8ecf0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --lg-pill: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
}

/* ---------- Botones de cierre (X) ---------- */
html body :is(.lightbox-close, .eng-close, .notif-x, .drawer-close, .legal-close, .to-top, #reelSheetClose):not(#_) {
  background: var(--lg-pill) !important; color: var(--ink) !important;
  border: 1px solid var(--lg-border) !important; border-radius: 999px !important;
  -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft);
  box-shadow: 0 6px 18px rgba(20,35,70,.22), inset 0 1px 0 var(--lg-edge) !important;
  text-shadow: none !important; transition: transform .2s, background .2s;
}
html body :is(.lightbox-close, .eng-close, .notif-x, .drawer-close, .legal-close, .to-top, #reelSheetClose):hover:not(#_) { background: var(--lg-tint-hover) !important; transform: scale(1.06); }
html body :is(.lightbox-close, .eng-close, .notif-x, .legal-close, #reelSheetClose):not(#_) { display: inline-grid; place-items: center; width: 42px; height: 42px; min-height: 0; padding: 0; line-height: 1; font-size: 1.5rem; }

/* controles redondos de los reels (sobre el video: vidrio oscuro) */
html body .reels-wrap .reels-round:not(#_), html body .reels-chrome .reels-round:not(#_), html body .reel-nav .reels-round:not(#_) {
  background: rgba(18,24,34,.42) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; border-radius: 999px !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ---------- Botones de subir y de acción ---------- */
html body :is(.reels-upload, .empty-state .reels-upload, .donate-btn):not(#_) {
  background: linear-gradient(180deg, #ffe58a, var(--mark)) !important; color: #2a2208 !important;
  border: 1px solid rgba(255,255,255,.7) !important; border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(240,190,50,.40), inset 0 1px 0 rgba(255,255,255,.8) !important; transition: transform .2s, filter .2s;
}
html body :is(.reels-upload, .donate-btn):hover:not(#_) { transform: translateY(-2px); filter: brightness(1.06); }
html body :is(.btn-remove-photo, .pay-del, .save-btn, .bz-back, .bz-delchat, .bz-mdel, .eng-btn, .eng-cact button, .notif-clear, .notif-del, .pf-link, .text-btn, .share-btn, .post-actions button, .forum-toolbar button, .contribute-shortcut, .ghost-button, .notif-bell):not(#_) {
  background: var(--lg-pill) !important; color: var(--ink) !important;
  border: 1px solid var(--lg-border) !important; border-radius: 999px !important;
  -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft);
  box-shadow: inset 0 1px 0 var(--lg-edge) !important; transition: background .2s, transform .2s;
}
html body :is(.btn-remove-photo, .pay-del, .save-btn, .bz-back, .bz-delchat, .bz-mdel, .eng-btn, .eng-cact button, .notif-clear, .notif-del, .pf-link, .text-btn, .share-btn, .post-actions button, .forum-toolbar button, .contribute-shortcut, .ghost-button):hover:not(#_) { background: var(--lg-tint-hover) !important; transform: translateY(-1px); }
html body :is(.pf-link, .text-btn):not(#_) { padding-inline: 14px; }
/* enviar / publicar / guardar: botón principal de vidrio */
html body :is(.app-shell form button[type="submit"], dialog button[type="submit"], .eng-cform button[type="submit"], .bz-form button[type="submit"]):not(#_) {
  background: var(--lg-primary) !important; color: var(--brand-ink) !important;
  border: 1px solid rgba(255,255,255,.35) !important; border-radius: 999px !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.45) !important;
  transform: none; transition: transform .2s, filter .2s;
}
html body :is(.app-shell form button[type="submit"], dialog button[type="submit"]):hover:not(#_) { transform: translateY(-2px); filter: brightness(1.07); }
html body :is(.app-shell form button[type="submit"], dialog button[type="submit"]):active:not(#_) { transform: scale(.97); box-shadow: inset 0 1px 0 rgba(255,255,255,.45) !important; }
/* botón nativo «Elegir archivo» */
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 18px; border: 1px solid var(--lg-border); border-radius: 999px; cursor: pointer;
  background: var(--lg-pill); color: var(--ink); font: inherit; font-weight: 700; box-shadow: inset 0 1px 0 var(--lg-edge);
}
input[type="file"]::file-selector-button:hover { background: var(--lg-tint-hover); }

/* ---------- Selectores (idioma, tema del foro, donaciones, banco...) y campos ---------- */
html body select:not([multiple]):not([size]):not(#_) {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--lg-chev) no-repeat right 14px center / 16px, var(--lg-pill) !important;
  color: var(--ink) !important; border: 1px solid var(--lg-border) !important; border-radius: 999px !important;
  padding: 10px 40px 10px 16px !important; min-height: 44px;
  -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft);
  box-shadow: inset 0 1px 0 var(--lg-edge), 0 4px 14px rgba(20,35,70,.08) !important;
}
html body select:not([multiple]):not([size]):focus-visible:not(#_) { outline: 3px solid color-mix(in srgb, var(--mark) 80%, transparent); outline-offset: 2px; }
select option, select optgroup { background: var(--panel); color: var(--ink); }
html body :is(.access-screen .ax-lang .lang-select, .access-screen .auth-form .lang-select, .app-shell .lang-select):not(#_) { border-radius: 999px !important; box-shadow: inset 0 1px 0 var(--lg-edge), 0 4px 14px rgba(20,35,70,.08) !important; }
html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), textarea):not(#_) {
  background: var(--lg-field) !important; color: var(--ink) !important; border: 1px solid var(--lg-border) !important; border-radius: 16px !important;
  -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft); box-shadow: inset 0 2px 6px rgba(20,35,70,.06), inset 0 1px 0 var(--lg-edge) !important;
}
html body :is(input, textarea):focus:not(#_) { border-color: var(--brand) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 26%, transparent), inset 0 1px 0 var(--lg-edge) !important; outline: 0; }
html body .palette-box input:not(#_) { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; backdrop-filter: none; }

/* ---------- Ventanas: foto ampliada, tarjeta abierta, reportes, notificaciones ---------- */
dialog.lightbox img { border: 1px solid var(--lg-border) !important; border-radius: 24px !important; box-shadow: 0 30px 80px rgba(0,0,0,.55) !important; }
dialog.lightbox figcaption { padding: 8px 18px; border-radius: 999px; color: #fff; background: rgba(18,24,34,.46); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
html body dialog.eng-dlg .eng-hero img:not(#_), html body dialog.eng-dlg .eng-body img:not(#_) { border-radius: 20px !important; border: 1px solid var(--lg-border) !important; box-shadow: var(--lg-shadow) !important; }
html body dialog :is(button, a.btn):not(.lightbox-close):not(.eng-close):not(.notif-x):not([type="submit"]):not(.reels-round):not(.reels-upload):not(#_) {
  background: var(--lg-pill) !important; color: var(--ink) !important; border: 1px solid var(--lg-border) !important; border-radius: 999px !important;
  box-shadow: inset 0 1px 0 var(--lg-edge) !important; text-shadow: none !important;
}
html body dialog.report-dlg :is(h3, p, label):not(#_) { color: var(--ink); }
html body dialog.report-dlg .rp-row:not(#_) button { min-height: 42px; padding: 0 18px; }
html body dialog.report-dlg :is(select, textarea):not(#_) { border-radius: 16px !important; }
html body dialog.report-dlg select:not([multiple]):not(#_) { border-radius: 999px !important; }
/* tarjetas internas */
html body :is(.eng-comment, .eng-cform, .notif-item, .notif-toggle, .eng-extra, .eng-stats, .pay-row, .pay-box, .donate-box, .bz-form, .bz-form-new, .pf-strip, .pf-post, .pf-facts, .pf-warn, .forum-toolbar, .reel-preview):not(#_) {
  background: var(--lg-tint-flat) !important; border: 1px solid var(--lg-border) !important; border-radius: var(--lg-r-sm) !important;
  -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft); box-shadow: inset 0 1px 0 var(--lg-edge) !important;
}
html body :is(.eng-stats, .eng-extra):not(#_) { border: 0 !important; background: none !important; box-shadow: none !important; backdrop-filter: none; }
html body .notif-item:not(#_) { margin-bottom: 8px; }
html body .notif-head:not(#_) { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none; }

/* ---------- Reels, donaciones y foro ---------- */
html body .app-shell .reel:not(#_) {
  background: var(--lg-tint) !important; border: 1px solid var(--lg-border) !important; border-radius: var(--lg-r) !important; overflow: hidden;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-edge) !important;
}
html body .app-shell .reel-media:not(#_) { border-radius: 0 !important; }
html body .app-shell :is(.reel-info, .reel-meta, .reel-rail, .post-header, .post-actions):not(#_) { background: transparent !important; box-shadow: none !important; border-color: transparent; }
html body .app-shell .donation-card :is(.status, .tag):not(#_) { border-radius: 999px; }
html body .app-shell :is(.post-topic, .reel-by, .bz-kind, .bz-badge, .status, .pf-badge, .pf-count):not(#_) { border-radius: 999px !important; }
html body :is(.update-toast):not(#_) { background: var(--lg-tint) !important; color: var(--ink) !important; border: 1px solid var(--lg-border) !important; border-radius: 999px !important; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-shadow-hover), inset 0 1px 0 var(--lg-edge) !important; }

/* ---------- Buscador rápido ---------- */
html body .palette-list li:not(#_) { border-radius: 14px; }
html body .palette-list li[aria-selected="true"]:not(#_) { background: var(--lg-tint-hover) !important; box-shadow: inset 0 1px 0 var(--lg-edge); }
html body .palette-hint kbd:not(#_), html body :is(.palette-open) kbd:not(#_) { background: var(--lg-pill) !important; border: 1px solid var(--lg-border) !important; border-radius: 8px !important; box-shadow: inset 0 1px 0 var(--lg-edge) !important; }

/* ---------- Pantalla de entrada ---------- */
html body .access-screen :is(.ax-contents li, .ax-contents ol > li):not(#_) { background: var(--lg-tint-flat) !important; border: 1px solid var(--lg-border) !important; border-radius: var(--lg-r-sm) !important; -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft); box-shadow: inset 0 1px 0 var(--lg-edge) !important; }
html body .access-screen .ghost-button:not(#_) { border-radius: 999px !important; }


/* ===== Liquid glass · perfil, menús y espacios ===== */
/* Menú desplegable de vidrio (reemplaza la lista cuadrada del navegador) */
.gs-wrap { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.gs-wrap > select.gs-native { visibility: hidden; width: 100%; pointer-events: none; }
.gs-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 0; padding: 0 14px 0 16px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  border: 1px solid var(--lg-border); border-radius: 999px; background: var(--lg-pill);
  -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft);
  box-shadow: inset 0 1px 0 var(--lg-edge), 0 4px 14px rgba(20,35,70,.08); transition: background .2s, box-shadow .2s; }
.gs-btn:hover { background: var(--lg-tint-hover); }
.gs-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--mark) 80%, transparent); outline-offset: 2px; }
.gs-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.gs-btn svg { flex: none; transition: transform .2s; }
.gs-btn:disabled { opacity: .55; cursor: not-allowed; }
.gs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-menu { position: fixed; z-index: 10050; min-width: 180px; max-width: min(92vw, 420px); padding: 6px; overflow-y: auto; overscroll-behavior: contain; color: var(--ink);
  background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(244,247,252,.80)); border: 1px solid rgba(255,255,255,.85); border-radius: 22px;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 24px 60px rgba(10,20,45,.30), inset 0 1px 0 var(--lg-edge); animation: gs-pop .16s ease-out; }
.gs-menu[hidden] { display: none; }
.gs-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-radius: 14px; cursor: pointer; outline: 0; font-size: .95rem; line-height: 1.3; }
.gs-opt svg { flex: none; opacity: 0; color: var(--brand); }
.gs-opt:hover, .gs-opt:focus { background: var(--lg-tint-hover); box-shadow: inset 0 1px 0 var(--lg-edge); }
.gs-opt[aria-selected="true"] { font-weight: 700; }
.gs-opt[aria-selected="true"] svg { opacity: 1; }
.gs-opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.gs-group { padding: 10px 14px 4px; color: var(--lg-ink-soft); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@keyframes gs-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gs-menu { animation: none; } }

/* Espacios que mis cajas de vidrio dejaron apretados */
html body :is(.pf-facts, .pf-strip):not(#_) { padding: 14px 16px !important; margin: 16px 18px 0 !important; border-top-width: 1px !important; }
html body .pf-warn:not(#_) { padding: 10px 14px !important; }
html body .forum-toolbar:not(#_) { padding: 10px 14px !important; }
html body .pf-strip i:not(#_) { border-radius: 4px; opacity: .6; }
html body .app-shell .eyebrow:not(#_) { margin-bottom: 14px !important; }
html body .app-shell .footer-top:not(#_) { margin-bottom: 32px; }
html body .app-shell .footer-rules:not(#_) { margin-top: 12px !important; }
html body .app-shell .world-section :is(h2, h3):not(#_) { margin-top: 0; }
html body .app-shell .section-head p, html body .app-shell .section-head > span:not(#_) { margin-top: 6px; }

/* Perfil */
html body .app-shell .pf-card:not(#_) { border-radius: 30px !important; overflow: hidden; padding-bottom: 20px !important; }
html body .app-shell .pf-cover:not(#_) { position: relative; height: 112px !important; border-bottom: 0 !important; overflow: hidden;
  background: radial-gradient(120% 150% at 0% 0%, rgba(255,255,255,.60), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(255,255,255,.28), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--cv, var(--brand)) 78%, #fff), var(--cv, var(--brand))) !important; }
html body .app-shell .pf-cover:not(#_)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.38), transparent 55%) !important; }
html body .app-shell .pf-avatar .avatar:not(#_) { box-shadow: 0 0 0 4px rgba(255,255,255,.75), 0 12px 28px rgba(20,35,70,.30) !important; }
html body .app-shell .pf-id:not(#_) { padding: 0 22px !important; }
html body .app-shell .pf-card h1:not(#_) { margin-top: 2px; }
html body .app-shell .pf-tags li:not(#_) { border-radius: 999px !important; padding: 4px 12px !important; }
html body .app-shell .pf-tabs:not(#_) { gap: 4px; padding: 5px !important; width: fit-content; max-width: 100%; margin-bottom: 24px !important;
  border: 1px solid var(--lg-border) !important; border-radius: 999px !important; background: var(--lg-tint-flat) !important;
  -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft); box-shadow: inset 0 1px 0 var(--lg-edge); }
html body .app-shell .pf-tab:not(#_) { border-radius: 999px !important; min-height: 40px !important; padding: 0 18px !important; background: transparent; color: var(--ink) !important; }
html body .app-shell .pf-tab:hover:not(#_) { background: var(--lg-tint-hover) !important; }
html body .app-shell .pf-tab[aria-selected="true"]:not(#_) { background: var(--lg-primary) !important; color: var(--brand-ink) !important; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.45) !important; }
html body .app-shell .pf-meter:not(#_) { padding: 20px 22px !important; }
html body .app-shell .pf-bar:not(#_) { height: 12px !important; border: 1px solid var(--lg-border) !important; border-radius: 999px !important; background: var(--lg-field) !important; box-shadow: inset 0 2px 5px rgba(20,35,70,.12); }
html body .app-shell .pf-bar i:not(#_) { border-radius: 999px; background: linear-gradient(180deg, #ffe58a, var(--mark)) !important; box-shadow: 0 0 10px rgba(240,190,50,.55), inset 0 1px 0 rgba(255,255,255,.7); }
html body .app-shell .pf-stat:not(#_) { padding: 16px 18px !important; }
html body .app-shell .pf-badges li:not(#_) { padding: 12px 16px !important; }
html body .app-shell .pf h3:not(#_) { margin: 26px 0 12px; }
html body .app-shell .pf-swatch:not(#_) { border: 2px solid rgba(255,255,255,.8) !important; box-shadow: 0 4px 12px rgba(20,35,70,.25), inset 0 1px 0 rgba(255,255,255,.5) !important; }
html body .app-shell .pf-swatch[aria-pressed="true"]:not(#_) { box-shadow: 0 0 0 3px var(--brand), 0 6px 16px rgba(20,35,70,.3) !important; }
html body .app-shell .pf-chip[aria-pressed="true"]:not(#_) { background: linear-gradient(180deg, #ffe58a, var(--mark)) !important; color: #2a2208 !important; border-color: rgba(255,255,255,.7) !important; box-shadow: 0 6px 16px rgba(240,190,50,.40), inset 0 1px 0 rgba(255,255,255,.8) !important; }
html body .app-shell .pf-form .check-row:not(#_) { display: flex !important; align-items: flex-start; gap: 12px; }
html body .app-shell .pf-form .check-row input:not(#_) { margin-top: 3px; }
html body .app-shell .pf-form:not(#_) { padding: 24px !important; gap: 18px; }
html body .app-shell .pf-guest:not(#_) { padding: 14px 20px !important; }
html body .app-shell .avatar-edit:not(#_) { border-radius: 999px !important; border: 1px solid rgba(255,255,255,.7) !important; box-shadow: 0 4px 12px rgba(240,190,50,.40), inset 0 1px 0 rgba(255,255,255,.8) !important; }
html body .app-shell .remove-avatar:not(#_) { margin: 14px 22px 0 !important; }
:root[data-theme="dark"] .gs-menu { background: linear-gradient(145deg, rgba(38,46,58,.92), rgba(22,28,36,.88)); border-color: rgba(255,255,255,.16); }
:root[data-theme="dark"] .gs-opt:hover, :root[data-theme="dark"] .gs-opt:focus { background: rgba(255,255,255,.10); }

/* Reels (sobre el video: vidrio oscuro) */
html body .reels-top .reel-filter:not(#_) { background: rgba(18,24,34,.40) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255,255,255,.30) !important; }
html body .reels-top .reel-filter.is-active:not(#_) { background: rgba(255,255,255,.92) !important; color: #111 !important; }
html body .reels-top .reel-filter.is-author:not(#_) { background: linear-gradient(180deg, #ffe58a, var(--mark)) !important; color: #1c2128 !important; }
html body .reels-top .reel-filter:hover:not(#_) { border-color: #fff !important; transform: none; }

/* Aviso flotante: que no quede como óvalo angosto */
html body .app-message:not(#_) { width: max-content; text-align: center; border-radius: 26px !important; }


/* ===== Notificaciones · rediseño ===== */
html body dialog.notif-dlg::backdrop { background: rgba(14,20,30,.30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html body dialog.notif-dlg:not(#_):not(#__) { width: min(94vw, 420px); max-height: min(80vh, 660px); margin: 76px 20px auto auto; padding: 0 !important; border-radius: 30px !important; overflow: hidden !important;
  background: linear-gradient(160deg, rgba(255,255,255,.80), rgba(244,247,252,.62)) !important; border: 1px solid rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter: blur(32px) saturate(185%); backdrop-filter: blur(32px) saturate(185%);
  box-shadow: 0 30px 80px rgba(10,20,45,.34), inset 0 1px 0 rgba(255,255,255,.95) !important; }
html body dialog.notif-dlg[open]:not(#_):not(#__) { display: flex; flex-direction: column; }
html body dialog.notif-dlg .notif-head:not(#_):not(#__) { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 20px 20px 8px !important; }
html body dialog.notif-dlg .notif-head h3:not(#_):not(#__) { margin: 0 auto 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; letter-spacing: -.01em; }
html body dialog.notif-dlg .notif-head:not(#_):not(#__) > .notif-clear { margin: 0 !important; min-height: 36px; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none; color: var(--brand) !important; font-size: .88rem; font-weight: 700; }
html body dialog.notif-dlg .notif-head > .notif-clear:hover:not(#_):not(#__) { background: var(--lg-tint-hover) !important; transform: none; }
html body dialog.notif-dlg .notif-x:not(#_):not(#__) { width: 38px; height: 38px; font-size: 1.3rem; }
html body dialog.notif-dlg .notif-toggle:not(#_):not(#__) { flex: 0 0 auto; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 14px; margin: 6px 16px 0; padding: 14px 16px !important; border-radius: 20px !important; font-size: .93rem; font-weight: 600; }
html body dialog.notif-dlg .notif-toggle input:not(#_):not(#__) { -webkit-appearance: none; appearance: none; flex: none; width: 50px; height: 30px; margin: 0; border: 1px solid var(--lg-border) !important; border-radius: 999px !important; cursor: pointer; transition: background-position .22s, background-color .22s;
  background: radial-gradient(circle at 50% 50%, #fff 0 11px, transparent 12px) 3px 50% / 24px 24px no-repeat, rgba(120,130,150,.35) !important; box-shadow: inset 0 2px 5px rgba(20,35,70,.18) !important; backdrop-filter: none; }
html body dialog.notif-dlg .notif-toggle input:checked:not(#_):not(#__) { background: radial-gradient(circle at 50% 50%, #fff 0 11px, transparent 12px) 23px 50% / 24px 24px no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)) !important; }
html body dialog.notif-dlg .notif-toggle input:focus-visible:not(#_):not(#__) { outline: 3px solid color-mix(in srgb, var(--mark) 80%, transparent); outline-offset: 2px; }
html body dialog.notif-dlg .notif-state:not(#_):not(#__) { flex: 0 0 auto; margin: 0; padding: 8px 24px 4px !important; border: 0 !important; font-size: .8rem; line-height: 1.4; }
html body dialog.notif-dlg .notif-state:empty:not(#_):not(#__) { display: none; }
html body dialog.notif-dlg .notif-list:not(#_):not(#__) { flex: 1 1 auto; min-height: 0; display: grid; gap: 10px; align-content: start; padding: 12px 16px 18px !important; overflow-y: auto; overscroll-behavior: contain; }
html body dialog.notif-dlg .notif-row:not(#_):not(#__) { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; margin: 0 !important; border: 1px solid rgba(255,255,255,.75) !important; border-radius: 22px !important; overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.40)); box-shadow: 0 4px 14px rgba(20,35,70,.08), inset 0 1px 0 rgba(255,255,255,.9); transition: transform .18s, box-shadow .18s; }
html body dialog.notif-dlg .notif-row:hover:not(#_):not(#__) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(20,35,70,.14), inset 0 1px 0 rgba(255,255,255,.95); }
html body dialog.notif-dlg .notif-row:has(.is-new):not(#_):not(#__) { background: linear-gradient(145deg, rgba(255,226,120,.55), rgba(255,255,255,.45)); }
html body dialog.notif-dlg .notif-row .notif-item:not(#_):not(#__) { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: start; width: 100%; margin: 0 !important; padding: 14px 4px 14px 14px !important; text-align: left; cursor: pointer;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html body dialog.notif-dlg .notif-ico:not(#_):not(#__) { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.85) !important; border-radius: 50% !important; font-size: 1.05rem;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(225,232,244,.7)) !important; box-shadow: 0 4px 10px rgba(20,35,70,.12), inset 0 1px 0 #fff; }
html body dialog.notif-dlg .notif-txt:not(#_):not(#__) { gap: 3px; padding-top: 2px; }
html body dialog.notif-dlg .notif-txt strong:not(#_):not(#__) { font-size: .95rem; line-height: 1.3; }
html body dialog.notif-dlg .notif-txt small:not(#_):not(#__) { font-size: .84rem; line-height: 1.4; }
html body dialog.notif-dlg .notif-item.is-new .notif-txt strong:not(#_):not(#__)::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); vertical-align: middle; }
html body dialog.notif-dlg time:not(#_):not(#__) { padding-top: 3px; font-size: .74rem; }
html body dialog.notif-dlg .notif-del:not(#_):not(#__) { width: 32px; height: 32px; margin: 0 10px 0 0 !important; padding: 0; display: grid; place-items: center; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none; color: var(--muted) !important; font-size: 1.15rem; opacity: .65; }
html body dialog.notif-dlg .notif-del:hover:not(#_):not(#__) { background: color-mix(in srgb, var(--red) 16%, transparent) !important; color: var(--red) !important; opacity: 1; transform: none; }
html body dialog.notif-dlg .notif-empty:not(#_):not(#__) { display: grid; justify-items: center; gap: 12px; padding: 36px 16px 30px !important; text-align: center; color: var(--muted); font-size: .95rem; }
html body dialog.notif-dlg .notif-empty:not(#_):not(#__)::before { content: ""; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%2358657a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / 28px no-repeat, linear-gradient(145deg, rgba(255,255,255,.95), rgba(225,232,244,.7)); box-shadow: 0 6px 16px rgba(20,35,70,.12), inset 0 1px 0 #fff; }
.app-shell .notif-count { min-width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.9) !important; background: linear-gradient(180deg, #ff6b5e, var(--red)) !important; box-shadow: 0 4px 10px rgba(200,40,30,.4); }

:root[data-theme="dark"] body dialog.notif-dlg:not(#_):not(#__) { background: linear-gradient(160deg, rgba(36,44,56,.88), rgba(20,26,34,.80)) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14) !important; }
:root[data-theme="dark"] body dialog.notif-dlg .notif-row:not(#_):not(#__) { border-color: rgba(255,255,255,.12) !important; background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); box-shadow: 0 4px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.10); }
:root[data-theme="dark"] body dialog.notif-dlg .notif-row:has(.is-new):not(#_):not(#__) { background: linear-gradient(145deg, rgba(255,216,77,.22), rgba(255,255,255,.05)); }
:root[data-theme="dark"] body dialog.notif-dlg .notif-ico:not(#_):not(#__), :root[data-theme="dark"] body dialog.notif-dlg .notif-empty:not(#_):not(#__)::before { background-color: rgba(255,255,255,.10); background-image: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border-color: rgba(255,255,255,.16) !important; }

:root[data-theme="dark"] body dialog.notif-dlg .notif-head > .notif-clear:not(#_):not(#__) { color: #8fd3ff !important; }
:root[data-theme="dark"] body dialog.notif-dlg .notif-toggle:not(#_):not(#__) { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.14) !important; }
:root[data-theme="dark"] body dialog.notif-dlg .notif-empty:not(#_):not(#__)::before { filter: invert(.85); }
@media (max-width: 600px) {
  html body dialog.notif-dlg:not(#_):not(#__) { width: calc(100vw - 20px); max-height: 82vh; max-height: 82dvh; margin: auto auto 10px; border-radius: 30px 30px 24px 24px !important; }
  html body dialog.notif-dlg .notif-head h3:not(#_):not(#__) { font-size: 1.2rem; }
  html body dialog.notif-dlg .notif-row .notif-item:not(#_):not(#__) { grid-template-columns: 40px minmax(0,1fr); grid-template-areas: "ico txt" ". time"; column-gap: 12px; row-gap: 2px; padding-left: 12px !important; }
  html body dialog.notif-dlg .notif-ico:not(#_):not(#__) { grid-area: ico; }
  html body dialog.notif-dlg .notif-txt:not(#_):not(#__) { grid-area: txt; }
  html body dialog.notif-dlg .notif-row .notif-item time:not(#_):not(#__) { grid-area: time; padding-top: 0; }
}
dialog.notif-dlg:focus, dialog.notif-dlg:focus-visible { outline: none; }
html body dialog.notif-dlg .notif-head > .notif-clear:not(#_):not(#__) { white-space: nowrap; flex: none; }
html body dialog.notif-dlg time:not(#_):not(#__) { white-space: nowrap; }
html body dialog.notif-dlg .notif-list:not(#_):not(#__) { grid-auto-rows: max-content; }
:root[data-theme="dark"] body dialog.notif-dlg .notif-ico:not(#_):not(#__) { background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07)) !important; color: #e8ecf0; border-color: rgba(255,255,255,.18) !important; box-shadow: 0 4px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15) !important; }
:root[data-theme="dark"] body dialog.notif-dlg .notif-empty:not(#_):not(#__)::before { filter: none; border-color: rgba(255,255,255,.18); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23c9d3e3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / 28px no-repeat, linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.07)) !important; }
/* Quién subió la noticia */
.news-by { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; font-size: 0.88rem; color: var(--muted); }
.news-by .user-link { color: var(--ink); }
.news-by .user-link strong { font-weight: 700; }

/* Tarjeta de noticia abierta, reportes y avisos: fondo casi sólido para que se lea bien */
html body dialog:is(.eng-dlg, .report-dlg, .notif-dlg):not(#_) {
  background: rgba(252, 253, 255, .97) !important;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
:root[data-theme="dark"] body dialog:is(.eng-dlg, .report-dlg, .notif-dlg):not(#_) {
  background: rgba(24, 32, 46, .97) !important;
}
/* Botones de la noticia abierta: más sobrios, sin brillo de vidrio */
html body dialog.eng-dlg .eng-btn:not(#_):not(#_) {
  background: rgba(20, 30, 50, .06) !important; border: 1px solid rgba(20, 30, 50, .24) !important;
  box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body dialog.eng-dlg .eng-btn:hover:not(#_):not(#_) { background: rgba(20, 30, 50, .13) !important; transform: none; }
:root[data-theme="dark"] body dialog.eng-dlg .eng-btn:not(#_):not(#_) { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .24) !important; }
:root[data-theme="dark"] body dialog.eng-dlg .eng-btn:hover:not(#_):not(#_) { background: rgba(255, 255, 255, .16) !important; }
html body dialog.eng-dlg .eng-cact button:not(#_):not(#_) { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Perfil: el avatar queda por encima de la portada (la portada pasó a position: relative con el vidrio) */
html body .app-shell .pf-id:not(#_) { position: relative; z-index: 1; }

/* Donaciones: tarjeta que se abre, foto y porcentaje de la meta */
.donation-card.is-openable { cursor: pointer; }
.donation-card .don-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--line); }
.donation-card .don-story { display: -webkit-box; -line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.donation-card .don-open { justify-self: start; }
.don-progress-wrap { display: grid; gap: 6px; }
.don-progress { height: 12px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.don-progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--brand)); transition: width .5s ease; }
.don-progress-text { margin: 0; font-size: 0.92rem; color: var(--muted); }
.don-progress-text b { color: var(--ink); font-size: 1.05rem; }
dialog.don-dlg .don-note { margin: 0; font-size: 0.82rem; color: var(--muted); }
dialog.don-dlg .don-full { white-space: pre-line; }
dialog.don-dlg .don-raised-form { display: grid; gap: 8px; padding: 12px; border: 1px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 12px; }
dialog.don-dlg .don-raised-form label { display: grid; gap: 6px; font-weight: 700; }
dialog.don-dlg .don-raised-form input { min-height: 42px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
dialog.don-dlg .don-raised-form button { justify-self: start; }
dialog.don-dlg .pay-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* =====================================================================
   RESPONSIVE · capa final (celular, tablet y horizontal)
   Va al FINAL de bundle.css. Solo cambia medidas y distribución:
   no toca colores, textos ni la información legal (responsable, etc.).
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
img, video, canvas, iframe { max-width: 100%; }
.app-shell, .app-shell .content, .page-view { min-width: 0; max-width: 100%; }
.app-shell :is(p, h1, h2, h3, h4, li, dd, dt, strong, label) { overflow-wrap: break-word; }
.app-shell :is(input, select, textarea) { min-width: 0; max-width: 100%; }

/* Botón de actualizar del menú (ver update.js) */
.app-shell .update-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0 0 10px; padding: 0 14px;
  font: inherit; font-weight: 700; text-align: left; cursor: pointer; color: var(--ink);
  border: 1px solid var(--lg-border, var(--line)); border-radius: 999px;
  background: var(--lg-pill, var(--panel));
  box-shadow: inset 0 1px 0 var(--lg-edge, transparent);
  transition: background .2s, transform .2s;
}
.app-shell .update-btn:hover:not(:disabled) { background: var(--lg-tint-hover, var(--mark-soft)); }
.app-shell .update-btn:disabled { cursor: progress; opacity: .8; }
.app-shell .update-ico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; font-size: 1.15rem; line-height: 1; }
.app-shell .update-label { flex: 1 1 auto; min-width: 0; font-size: .93rem; line-height: 1.25; }
.app-shell .update-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); }
.app-shell .update-dot[hidden] { display: none; }
.app-shell .update-btn.is-ready { background: var(--lg-primary, var(--brand)); color: var(--brand-ink); border-color: rgba(255,255,255,.35); }
.app-shell .update-btn.is-busy .update-ico { animation: upd-spin 1s linear infinite; }
@keyframes upd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-shell .update-btn.is-busy .update-ico { animation: none; } }
/* Puntito en "Menú" cuando hay una versión nueva (sin mensajes en pantalla) */
.app-shell .menu-toggle { position: relative; }
.app-shell .menu-toggle.has-update::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--panel);
}
/* El aviso flotante de "nueva versión" ya no sale: se actualiza desde el menú */
.update-toast { display: none !important; }

/* ---------- Pantallas táctiles: sin saltos por hover pegado ---------- */
@media (hover: none) {
  .app-shell :is(.news-card, .comm-item, .donation-card, .topic-row, .world-region, .bz-item, .mosaic-tile, .chip, .menu-toggle, .palette-open, .contribute-shortcut, .user-chip, .pf-chip):hover { transform: none !important; }
  .app-shell .hero-image img, .app-shell .globe-wrap { animation: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1020px) {
  .app-shell .content { padding-inline: 20px; }
  .app-shell .sidebar { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .app-shell .world-explorer { grid-template-columns: minmax(0, 1fr); }
  .app-shell .contribution-layout { grid-template-columns: minmax(0, 1fr); }
  .app-shell .footer-top { grid-template-columns: 1fr 1fr; }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  :root { --lg-blur: blur(14px) saturate(160%); --lg-blur-soft: blur(8px) saturate(140%); }
  body::before { animation: none; inset: 0; }

  .app-shell .content { padding-inline: 14px; padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }

  /* Cabecera */
  html body .app-shell .site-header { top: calc(6px + env(safe-area-inset-top, 0px)) !important; margin: 8px 0 14px !important; border-radius: 22px; }
  html body .app-shell .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 8px 10px 4px !important; }
  html body .app-shell .topbar h2 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; }
  html body .app-shell .top-actions { display: flex; gap: 4px; flex-wrap: nowrap; }
  html body .app-shell .top-actions :is(.palette-open, .user-chip, .notif-bell) { flex: none; width: 40px; height: 40px; min-height: 0; padding: 0; }
  html body .app-shell .top-actions #themeQuick {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 !important;
    padding-inline: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
  html body .app-shell .top-actions #themeQuick::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    flex: none !important;
    background: var(--ink) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20V2z'/%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20V2z'/%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }
  html body .app-shell .menu-toggle { min-height: 40px; padding: 0 12px; }

  /* Barra de secciones: se ajusta al ancho y baja de línea en vez de cortarse */
  html body .app-shell .site-header .chips {
    display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px; overflow: visible !important;
    margin: 0 !important; padding: 2px 10px 10px !important;
  }
  html body .app-shell .site-header .chips > .chip, html body .app-shell .site-header .chips > .dd { flex: 1 1 auto; min-width: 0; }
  html body .app-shell .site-header .chips .chip {
    display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; padding: 0 12px; font-size: .9rem; white-space: nowrap;
  }
  html body .app-shell .dd-panel {
    left: 8px; right: 8px; max-height: 62vh; overflow-y: auto; overscroll-behavior: contain; z-index: 70;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Cabecera tipo periódico */
  .app-masthead { margin-top: 6px; }
  .app-masthead .ax-mast-row { padding: 8px 0; }
  .app-masthead .ax-mast-title, .ax-mast-title { gap: 10px; min-width: 0; }
  .app-masthead .app-mast-name, .ax-mast-title h2 { white-space: normal !important; min-width: 0; text-align: center; font-size: clamp(1.15rem, 6vw, 1.55rem) !important; line-height: 1.1; }
  .ax-ticker-track span { font-size: .72rem; }

  /* Portada */
  .app-shell .hero { gap: 18px; }
  .app-shell .hero-text h1 { font-size: clamp(2rem, 9vw, 2.6rem); max-width: none; }
  .app-shell .hero-cta { flex-direction: column; align-items: stretch; }
  .app-shell .hero-cta > * { width: 100%; justify-content: center; text-align: center; }
  .app-shell .pulse-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .world-section { padding: 20px 14px; border-radius: 24px; }
  .app-shell .globe-wrap { width: min(74vw, 300px); }
  .app-shell .globe-pin { width: 32px; height: 32px; font-size: .74rem; }
  .app-shell .world-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .reading-note { padding: 20px 16px; }
  .app-shell .about { padding: 20px 16px; }
  .app-shell .section-head { margin: 32px 0 14px; }
  .app-shell .section-head h3 { font-size: 1.3rem; }

  /* Tarjetas y listas */
  .app-shell .news-grid, .app-shell .donation-grid, .app-shell .source-list, .app-shell .community-list { grid-template-columns: minmax(0, 1fr); }
  .app-shell .news-card .card-body { min-height: 0; padding: 16px; }
  .app-shell .card-actions { gap: 8px; }
  .app-shell :is(.page-head:not(.admin-head), .admin-head) { padding: 18px 16px !important; }
  .app-shell .page-head h1 { font-size: clamp(1.6rem, 7.5vw, 2.1rem); }
  .app-shell .admin-head { flex-direction: column; align-items: stretch; }
  .app-shell .admin-hero-actions > * { flex: 1 1 auto; }

  /* Formularios */
  .app-shell :is(.forum-form, .admin-form, .contribution-form, .category-create-form) { grid-template-columns: minmax(0, 1fr) !important; padding: 16px; }
  .app-shell .category-create-form label { grid-column: auto !important; }
  .app-shell .form-actions, .app-shell .admin-actions { flex-direction: column; }
  .app-shell .form-actions > *, .app-shell .admin-actions > * { width: 100%; }
  .app-shell .pay-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .app-shell .admin-toolbar > * { flex: 1 1 100%; width: 100%; }
  .app-shell .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .row-actions { width: 100%; }
  .app-shell .row-actions > * { flex: 1 1 auto; justify-content: center; }
  .app-shell .admin-tabs, .app-shell .pf-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .app-shell .admin-tabs::-webkit-scrollbar, .app-shell .pf-tabs::-webkit-scrollbar { display: none; }
  .app-shell .pf-tab, .app-shell .admin-tab { flex: 0 0 auto; padding-inline: 14px !important; }
  .app-shell .pf-form { padding: 16px !important; }
  .app-shell .pf-actions > * { flex: 1 1 100%; }
  .app-shell .pf-badges { grid-template-columns: minmax(0, 1fr); }
  .app-shell .forum-toolbar { flex-direction: column; align-items: stretch; }
  .app-shell .post-actions { gap: 8px 14px; }

  /* Pie de página */
  .app-shell .site-footer { margin: 40px 0 12px !important; padding: 28px 16px 20px !important; border-radius: 26px; }
  .app-shell .footer-top { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .app-shell .footer-brand { flex-direction: row; }
  .app-shell .footer-rules { padding: 16px !important; }
  .app-shell .footer-legal { gap: 6px; }
  .app-shell .footer-legal button { flex: 1 1 auto; }
  .app-shell .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Barra inferior flotante */
  .bottom-nav { left: 10px !important; right: 10px !important; padding: 4px !important; border-radius: 24px !important; }
  .bottom-nav .bnav-item { min-height: 50px; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; border-radius: 18px; }

  /* Botones y avisos flotantes por encima de la barra inferior */
  .to-top { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  html body .app-message:not(#_) { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); max-width: 92vw; }
  .legal-banner { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  dialog:is(.report-dlg, .don-dlg) {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    width: min(calc(100vw - 24px), 560px) !important;
    max-height: 88dvh !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  dialog.lightbox { width: 100vw; }
  .reader-player { grid-template-columns: minmax(0, 1fr); }
  .palette { padding: 6vh 10px 0; }

  /* Pantalla de entrada */
  .access-screen .ax-wrap { padding-inline: 14px; }
  .ax-page { gap: 28px; padding-top: 20px; }
  .ax-story h1 { font-size: clamp(1.9rem, 8.5vw, 2.5rem); }
  .ax-coupon { padding: 26px 16px 20px; }
  .ax-lead { font-size: 1rem; }
  .ax-contents ol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Celulares estrechos ---------- */
@media (max-width: 400px) {
  .app-shell .content { padding-inline: 10px; }
  html body .app-shell .site-header .chips .chip { padding: 0 8px; font-size: .86rem; }
  .app-shell .dd-trigger::after { margin-left: 4px; }
  .app-shell .world-regions { grid-template-columns: minmax(0, 1fr); }
  .app-shell .topic-list { grid-template-columns: minmax(0, 1fr); }
  .app-shell .pulse-line span { padding: 10px 11px !important; font-size: .82rem; }
  .ax-contents ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 350px) {
  html body .app-shell .topbar h2 { display: none; }
  .bottom-nav .bnav-item { font-size: .74rem; }
  .app-shell .stat-grid, .app-shell .pf-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Celular en horizontal ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  html body .app-shell .site-header { position: static; }
  .bottom-nav { padding: 2px !important; }
  .bottom-nav .bnav-item { min-height: 40px; }
  .app-shell .content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .access-screen .ax-stage { aspect-ratio: 16 / 9; }
  dialog.eng-dlg { max-height: 100dvh; }
}


/* ---------- Aviso emergente ("Hola, nombre"): siempre centrado ----------
   La animación lg-pop dejaba transform:none y anulaba el translate(-50%),
   así que el aviso quedaba corrido a la derecha. Se centra con márgenes y
   su propia animación, sin depender de transform. */
html body .app-message:not(#_) {
  left: 0 !important; right: 0 !important; margin-inline: auto !important;
  width: max-content; max-width: min(92vw, 560px); box-sizing: border-box; text-align: center;
  transform: translateY(8px) !important; animation: none !important;
}
html body .app-message.show:not(#_) { transform: translateY(0) !important; animation: toast-in .3s cubic-bezier(.2, .9, .25, 1.15) both !important; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { html body .app-message.show:not(#_) { animation: none !important; } }


/* ---------- Ventana de bienvenida (welcome.js) ---------- */
dialog.welcome-dlg {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; overscroll-behavior: contain;
  color: var(--ink); border: 1px solid var(--lg-border, var(--line)); border-radius: 28px;
  background: var(--lg-tint, var(--panel)); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 30px 80px rgba(10, 20, 45, .35), inset 0 1px 0 var(--lg-edge, transparent);
}
dialog.welcome-dlg::backdrop { background: rgba(14, 22, 40, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog.welcome-dlg[open] { animation: toast-in .4s cubic-bezier(.2, .9, .25, 1.12) both; }
.welcome-body { display: grid; gap: 12px; padding: clamp(22px, 5vw, 34px); text-align: center; justify-items: center; }
.welcome-body p { margin: 0; max-width: 46ch; line-height: 1.6; color: var(--ink); }
.welcome-logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lg-edge, var(--line)); box-shadow: 0 6px 18px rgba(35, 55, 95, .25); }
.welcome-hello { color: var(--muted) !important; font-size: .95rem; font-weight: 700; }
.welcome-body h2 { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 7vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.welcome-sub { color: var(--brand) !important; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.welcome-lead { padding: 10px 14px; border-radius: 16px; background: var(--mark-soft); font-family: var(--display); font-weight: 700; font-size: 1.08rem; }
.welcome-end { font-family: var(--display); font-weight: 700; }
.welcome-ok {
  min-height: 48px; margin-top: 6px; padding: 0 34px; font: inherit; font-weight: 700; cursor: pointer; color: var(--brand-ink);
  border: 1px solid rgba(255, 255, 255, .38); border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.welcome-ok:active { transform: scale(.97); }
@media (max-width: 600px) { dialog.welcome-dlg { margin: auto; } .welcome-ok { width: 100%; } }
@media (prefers-reduced-motion: reduce) { dialog.welcome-dlg[open] { animation: none; } }


/* ===== Ajustes de texto, espacios y rendimiento ===== */

/* --- Textos que quedaban pegados al borde del vidrio --- */
html body .gs-wrap > .gs-btn:not(#_):not(#__):not(#___) { border: 1px solid var(--lg-border) !important; border-radius: 999px !important; background: var(--lg-pill) !important; color: var(--ink) !important; padding: 0 14px 0 16px !important; min-height: 0 !important; box-shadow: inset 0 1px 0 var(--lg-edge), 0 4px 14px rgba(20,35,70,.08) !important; font-weight: 600; }
html body .user-link:not(#_):not(#__):not(#___) { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 10px; width: auto; max-width: 100%; min-height: 0; padding: 4px 16px 4px 4px !important; text-align: start; border: 1px solid var(--lg-border) !important; border-radius: 999px !important; background: var(--lg-pill) !important; color: var(--ink) !important; box-shadow: inset 0 1px 0 var(--lg-edge) !important; cursor: pointer; }
html body .user-link strong:not(#_):not(#__):not(#___) { font-size: .95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .user-link :is(.avatar-img, .avatar-fallback):not(#_):not(#__):not(#___) { flex: none; width: 30px !important; height: 30px !important; min-width: 30px; border-radius: 50% !important; display: inline-grid; place-items: center; font-size: .85rem; object-fit: cover; }
html body :is(.post-header, .reel-author, .pf-post) .user-link:not(#_):not(#__):not(#___) { padding: 2px 12px 2px 2px !important; }
html body .news-by:not(#_):not(#__):not(#___) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 4px; }
html body .news-by-label:not(#_):not(#__):not(#___) { color: var(--muted); font-size: .88rem; }
html body .news-card .news-by:not(#_):not(#__):not(#___) { margin: 4px 0 10px; }
html body .eng-main .news-by:not(#_):not(#__):not(#___) { margin: 16px 0 10px; }

html body :is(.pf-post):not(#_):not(#__):not(#___) { padding: 14px 18px !important; margin: 0 0 10px !important; gap: 6px; }
html body .pf-post small:not(#_):not(#__):not(#___) { line-height: 1.4; }
html body .pf-post p:not(#_):not(#__):not(#___) { line-height: 1.5; }

html body .bz-bubble:not(#_):not(#__):not(#___) { gap: 6px; padding: 12px 16px 10px !important; border: 1px solid var(--lg-border) !important; background: var(--lg-tint-flat) !important; box-shadow: inset 0 1px 0 var(--lg-edge) !important; border-radius: 20px 20px 20px 6px !important; -webkit-backdrop-filter: var(--lg-blur-soft); backdrop-filter: var(--lg-blur-soft); }
html body .bz-bubble.is-mine:not(#_):not(#__):not(#___) { border-radius: 20px 20px 6px 20px !important; background: linear-gradient(145deg, rgba(255,226,120,.50), var(--lg-tint-flat)) !important; }
html body .bz-bubble.is-team:not(.is-mine):not(#_):not(#__):not(#___) { border-color: color-mix(in srgb, var(--brand) 60%, transparent) !important; }
html body .bz-bubble small:not(#_):not(#__):not(#___) { line-height: 1.3; }
html body .bz-bubble p:not(#_):not(#__):not(#___) { line-height: 1.55; }
html body .bz-mdel:not(#_):not(#__):not(#___) { justify-self: end; min-height: 28px; padding: 4px 14px !important; margin-top: 2px; font-size: .76rem; line-height: 1.2; white-space: nowrap; }
html body .bz-msgs:not(#_):not(#__):not(#___) { padding: 6px 4px !important; gap: 10px; }
html body .bz-cact:not(#_):not(#__):not(#___) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html body .bz-cact .bz-delchat:not(#_):not(#__):not(#___) { min-height: 40px; padding: 0 18px !important; white-space: nowrap; }
html body .bz-chead:not(#_):not(#__):not(#___) { gap: 12px 16px; padding-bottom: 12px; }

html body .app-shell .mosaic-head:not(#_):not(#__):not(#___) { margin-top: 40px; }
html body .app-shell .section-head:not(#_):not(#__):not(#___) { margin-top: 36px; }
html body .app-shell .stat-strip + *:not(#_):not(#__):not(#___) { margin-top: 28px; }
html body .app-shell :is(.news-card .card-body, .topic-row, .comm-item, .donation-card, .post):not(#_):not(#__):not(#___) { overflow-wrap: anywhere; }
html body .app-shell .card-body:not(#_):not(#__):not(#___) { padding: 16px 18px 18px; }
html body .app-shell .eng-tags, html body dialog.eng-dlg .eng-tags:not(#_):not(#__):not(#___) { gap: 8px 10px; }
html body dialog.eng-dlg .eng-main:not(#_):not(#__):not(#___) { padding: 22px 22px 24px; }
html body dialog.eng-dlg .eng-stats, html body dialog.eng-dlg .eng-extra:not(#_):not(#__):not(#___) { line-height: 1.5; }
html body :is(.eng-comment):not(#_):not(#__):not(#___) { padding: 12px 16px !important; }
html body :is(.notif-toggle):not(#_):not(#__):not(#___) { padding: 14px 16px !important; }
html body :is(.pay-row, .pay-box, .donate-box, .bz-form, .bz-form-new):not(#_):not(#__):not(#___) { padding: 14px 16px !important; }
html body .forum-toolbar:not(#_):not(#__):not(#___) { gap: 10px; }
html body :is(.eng-cact button, .post-actions button, .btn-remove-photo, .pay-del, .text-btn:not(#themeQuick)):not(#_):not(#__):not(#___) { padding-inline: 14px !important; min-height: 36px; white-space: nowrap; }

/* --- Rendimiento: cuando hay mucho vidrio, los celulares flojos se traban ---
   1) En celular se apagan animaciones decorativas y el desenfoque de las tarjetas repetidas.
   2) "Modo ligero" (automático o manual) apaga todo el desenfoque y las animaciones. */
@media (max-width: 760px) {
  html:not(.fx-full) :is(.app-shell .hero-image img, .app-shell .globe-wrap, .app-shell .chip.is-active, .app-shell .nav-item.is-active, .app-shell .admin-tab.is-active, .bottom-nav .bnav-item.is-active, .footer-seal .ring, .ax-logo, .hero::before, .hero::after, .orbit-mark span, .eye-blink, .iris, .ax-rays):not(#_):not(#__):not(#___) { animation: none !important; }
  html:not(.fx-full) body .app-shell *:not(.topbar):not(.bottom-nav):not(dialog):not(#_):not(#__):not(#___) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html:not(.fx-full) { --lg-tint: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.70)); --lg-tint-flat: rgba(255,255,255,.74); --lg-field: rgba(255,255,255,.78); }
  html:not(.fx-full)[data-theme="dark"] { --lg-tint: linear-gradient(145deg, rgba(40,60,96,.84), rgba(18,30,54,.74)); --lg-tint-flat: rgba(24,38,66,.72); --lg-field: rgba(255,255,255,.10); }
  html:not(.fx-full) body .app-shell :is(.news-card, .post, .donation-card, .topic-row, .comm-item) { content-visibility: auto; contain-intrinsic-size: auto 420px; }
}

html.lite { --lg-blur: none; --lg-blur-soft: none; --lg-shadow: 0 2px 8px rgba(35,55,95,.12); --lg-shadow-hover: 0 4px 12px rgba(35,55,95,.16);
  --lg-tint: linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,248,252,.92)); --lg-tint-flat: rgba(255,255,255,.92); --lg-tint-hover: #fff; --lg-field: rgba(255,255,255,.95); --lg-pill: rgba(255,255,255,.94); --lg-mesh: linear-gradient(160deg, #eef2f9, #f6f3ee); }
html.lite[data-theme="dark"] { --lg-tint: linear-gradient(145deg, rgba(34,46,72,.97), rgba(22,32,52,.95)); --lg-tint-flat: rgba(26,38,62,.94); --lg-tint-hover: rgba(44,62,98,.96); --lg-field: rgba(255,255,255,.10); --lg-pill: rgba(46,62,96,.92); --lg-mesh: linear-gradient(160deg, #0b1220, #101a2e); }
html.lite *:not(#_):not(#__):not(#___), html.lite *:not(#_):not(#__):not(#___)::before, html.lite *:not(#_):not(#__):not(#___)::after, html.lite dialog:not(#_):not(#__):not(#___)::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.lite *:not(#_):not(#__):not(#___) { box-shadow: none !important; text-shadow: none !important; }
html.lite body:not(#_):not(#__):not(#___)::before { animation: none !important; transform: none; inset: 0; will-change: auto; }
html.lite .motion-ready .reveal-on-view:not(#_):not(#__):not(#___) { opacity: 1 !important; transform: none !important; }
html.lite .app-shell :is(.news-card, .post, .reel, .donation-card, .topic-row, .comm-item, .pf-card, .pf-stat, .dd-panel, .forum-panel):not(#_):not(#__):not(#___) { box-shadow: 0 1px 4px rgba(20,35,70,.14) !important; }
html.lite :is(input, textarea):focus:not(#_):not(#__):not(#___) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent) !important; }
html.lite body .app-shell :is(.news-card, .post, .donation-card, .topic-row, .comm-item) { content-visibility: auto; contain-intrinsic-size: auto 420px; }
html.lite dialog:not(#_):not(#__):not(#___)::backdrop { background: rgba(10,16,26,.55) !important; }
html.lite dialog.notif-dlg:not(#_):not(#__):not(#___), html.lite .legal-box:not(#_):not(#__):not(#___), html.lite .gs-menu:not(#_):not(#__):not(#___) { background: var(--lg-tint) !important; }


/* ===== Novedades (changelog) ===== */
dialog.changelog-dlg:not(#_):not(#__):not(#___) { width: min(94vw, 480px); max-height: min(86vh, 700px); margin: auto; padding: 24px 24px 22px !important; border-radius: 30px !important; color: var(--ink); overflow: hidden !important;
  background: linear-gradient(160deg, rgba(255,255,255,.86), rgba(244,247,252,.70)) !important; border: 1px solid rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 30px 80px rgba(10,20,45,.34), inset 0 1px 0 rgba(255,255,255,.95) !important; }
dialog.changelog-dlg[open]:not(#_):not(#__):not(#___) { display: flex; flex-direction: column; gap: 6px; }
dialog.changelog-dlg::backdrop { background: rgba(14,20,30,.38); }
.chlog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chlog-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #2a2208;
  background: linear-gradient(180deg, #ffe58a, var(--mark)); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 4px 14px rgba(240,190,50,.40), inset 0 1px 0 rgba(255,255,255,.8); }
.chlog-badge::before { content: "\2728"; font-size: .9rem; }
.chlog-x { width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--ink);
  background: var(--lg-pill); border: 1px solid var(--lg-border); box-shadow: inset 0 1px 0 var(--lg-edge); }
dialog.changelog-dlg h2:not(#_):not(#__):not(#___) { margin: 12px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1.15; letter-spacing: -.01em; }
.chlog-sub { margin: 0; color: var(--muted); font-size: .92rem; }
.chlog-body { flex: 1 1 auto; min-height: 0; margin: 12px -6px 4px; padding: 0 6px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 14px; align-content: start; }
.chlog-rel { padding: 16px 18px; border-radius: 22px; background: var(--lg-tint-flat); border: 1px solid var(--lg-border); box-shadow: inset 0 1px 0 var(--lg-edge); }
.chlog-rel h3 { margin: 0; font-size: 1.02rem; }
.chlog-rel small { display: block; margin: 0 0 10px; color: var(--muted); font-size: .8rem; }
.chlog-rel h3 + small { margin-top: 2px; }
.chlog-rel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.chlog-rel li { position: relative; padding-left: 28px; line-height: 1.45; font-size: .94rem; }
.chlog-rel li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: var(--brand-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.chlog-ok { margin-top: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 800; color: var(--brand-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)); border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.45); }
.chlog-ok:active { transform: scale(.98); }
:root[data-theme="dark"] body dialog.changelog-dlg:not(#_):not(#__):not(#___) { background: linear-gradient(160deg, rgba(36,44,56,.92), rgba(20,26,34,.88)) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14) !important; }
html.lite dialog.changelog-dlg:not(#_):not(#__):not(#___) { background: var(--lg-tint) !important; }
@media (max-width: 600px) { dialog.changelog-dlg:not(#_):not(#__):not(#___) { width: calc(100vw - 20px); margin: auto auto 10px; max-height: 88dvh; padding: 20px 18px 18px !important; border-radius: 28px !important; } }
dialog.changelog-dlg:focus, dialog.changelog-dlg:focus-visible { outline: none; }
html body dialog.changelog-dlg .chlog-ok:not(#_):not(#__):not(#___) { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)) !important; color: var(--brand-ink) !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 999px !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.45) !important; }
html body dialog.changelog-dlg .chlog-x:not(#_):not(#__):not(#___) { background: var(--lg-pill) !important; color: var(--ink) !important; border: 1px solid var(--lg-border) !important; border-radius: 50% !important; width: 38px; height: 38px; padding: 0 !important; }

/* =====================================================================
   NUEVAS CARACTERÍSTICAS: Protección de fotos, Tarjetas de historias y Cobertura en vivo
   ===================================================================== */

/* 1. Botón y editor para difuminar fotos */
.btn-anonymize-photo {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--panel));
  color: var(--brand);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-anonymize-photo:hover {
  background: var(--brand);
  color: var(--brand-ink);
  transform: translateY(-1px);
}
.photo-protected-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #def7ec;
  color: #03543f;
  font-size: 0.78rem;
  font-weight: 700;
}
:root[data-theme="dark"] .photo-protected-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

dialog.blur-tool-dlg {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  width: min(94vw, 760px);
  max-height: 92dvh;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid var(--lg-border);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}
dialog.blur-tool-dlg[open] {
  animation: lg-pop 0.3s cubic-bezier(0.2, 0.9, 0.25, 1.12) both;
}
.blur-tool-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.blur-tool-head h3 {
  margin: 0;
  font-size: 1.28rem;
  font-family: Georgia, serif;
}
.blur-tool-head p {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.blur-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 1.3rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.blur-tool-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.blur-tool-modes {
  display: flex;
  gap: 14px;
  font-size: 0.88rem;
  font-weight: 700;
}
.blur-tool-modes label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.blur-tool-sizes {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
}
.blur-size-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}
.blur-size-btn.is-active {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--brand);
}
.blur-undo-btn {
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}
.blur-canvas-container {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: 52vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0d1217;
  border-radius: 14px;
  border: 1px solid var(--line);
  touch-action: none;
  cursor: crosshair;
}
.blur-canvas-container canvas {
  max-width: 100%;
  max-height: 52vh;
  display: block;
  object-fit: contain;
}
.blur-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.blur-save-btn {
  padding: 10px 22px;
  border-radius: 999px;
  border: 0;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
  cursor: pointer;
}

/* 2. Modal Generador de Tarjetas para Historias / Estados */
dialog.story-dlg {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
  width: min(92vw, 480px);
  max-height: 94dvh;
  padding: 20px;
  border-radius: 26px;
  border: 1px solid var(--lg-border);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}
dialog.story-dlg[open] {
  animation: lg-pop 0.3s cubic-bezier(0.2, 0.9, 0.25, 1.12) both;
}
.story-dlg-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.story-dlg-head h3 {
  margin: 0;
  font-size: 1.22rem;
  font-family: Georgia, serif;
}
.story-dlg-head p {
  margin: 3px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.story-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 1.3rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.story-preview-wrap {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: #080d0c;
  padding: 10px;
}
.story-preview-wrap canvas {
  width: auto;
  max-width: 100%;
  max-height: 58vh;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  display: block;
}
.story-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.story-share-btn {
  padding: 11px 16px;
  border-radius: 999px;
  border: 0;
  background: var(--mark);
  color: #1c2128;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.story-dl-btn {
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* 3. Cobertura Minuto a Minuto (En Vivo) */
.live-coverage {
  margin-bottom: 24px;
  border-radius: 20px;
  border: 1.5px solid rgba(220, 38, 38, 0.35);
  background: radial-gradient(400px circle at 0% 0%, rgba(220, 38, 38, 0.12), transparent 70%), var(--panel);
  box-shadow: 0 10px 30px rgba(220, 38, 38, 0.08);
  overflow: hidden;
  transition: all 250ms ease;
}
.live-coverage.is-hidden {
  display: none !important;
}
.live-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  flex-wrap: wrap;
}
.live-pulse-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.14);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #dc2626;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  flex: none;
}
:root[data-theme="dark"] .live-pulse-badge {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
}
.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 10px #dc2626;
  animation: live-dot-pulse 1.4s infinite ease-in-out;
}
@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.live-headline-wrap {
  flex: 1 1 240px;
  min-width: 0;
}
.live-title {
  margin: 0;
  font-size: 1.15rem;
  font-family: Georgia, serif;
  line-height: 1.25;
}
.live-subtitle {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 2px;
}
.live-toggle {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, 0.3);
  background: var(--bg);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 150ms ease;
  flex: none;
}
.live-toggle:hover {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
.live-feed {
  border-top: 1px solid var(--line);
  padding: 16px 20px;
  background: var(--bg);
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: max-height 300ms ease, opacity 250ms ease;
}
.live-feed.is-collapsed {
  display: none;
}
.live-stream {
  position: relative;
  display: grid;
  gap: 16px;
  padding-left: 18px;
}
.live-stream::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 2px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
}
.live-item {
  position: relative;
  display: grid;
  gap: 6px;
}
.live-item::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dc2626;
  border: 2px solid var(--panel);
}
.live-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
}
.live-time-badge {
  font-weight: 800;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
}
.live-item p {
  margin: 0;
  line-height: 1.55;
  font-size: 0.95rem;
}
.live-item img {
  max-width: min(100%, 420px);
  max-height: 240px;
  border-radius: 12px;
  object-fit: cover;
  margin-top: 4px;
}

/* Admin: Cobertura en vivo */
.live-admin-card {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}
.live-admin-card h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}
.live-admin-card p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.92rem;
}
.live-config-form, .live-update-form {
  display: grid;
  gap: 14px;
}
.live-form-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 14px;
}
@media (max-width: 650px) {
  .live-form-grid {
    grid-template-columns: 1fr;
  }
}
.live-admin-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.live-admin-item button {
  padding: 4px 10px;
  font-size: 0.8rem;
}


/* ===== Extras: protección de identidades, tarjeta para estados y cobertura en vivo ===== */
.live-item p { white-space: pre-line; overflow-wrap: anywhere; }
.live-admin-list { display: grid; gap: 10px; }
.live-admin-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; border-radius: 18px; border: 1px solid var(--lg-border); background: var(--lg-tint-flat); box-shadow: inset 0 1px 0 var(--lg-edge); }
.live-admin-row p { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .live-admin-row { grid-template-columns: minmax(0, 1fr) auto; }
  .live-admin-row .live-time-badge { grid-column: 1 / -1; justify-self: start; }
}
dialog.blur-tool-dlg:not(#_):not(#__):not(#___), dialog.story-dlg:not(#_):not(#__):not(#___) { background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(244,247,252,.72)) !important; border: 1px solid rgba(255,255,255,.85) !important; border-radius: 30px !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 30px 80px rgba(10,20,45,.34), inset 0 1px 0 rgba(255,255,255,.95) !important; }
dialog.blur-tool-dlg::backdrop, dialog.story-dlg::backdrop { background: rgba(14,20,30,.45); }
:root[data-theme="dark"] body dialog.blur-tool-dlg:not(#_):not(#__):not(#___), :root[data-theme="dark"] body dialog.story-dlg:not(#_):not(#__):not(#___) { background: linear-gradient(160deg, rgba(36,44,56,.94), rgba(20,26,34,.90)) !important; border-color: rgba(255,255,255,.16) !important; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14) !important; }
html.lite dialog.blur-tool-dlg:not(#_):not(#__):not(#___), html.lite dialog.story-dlg:not(#_):not(#__):not(#___) { background: var(--lg-tint) !important; }
dialog.blur-tool-dlg:focus, dialog.story-dlg:focus { outline: none; }

/* Arreglo: estas dos ventanas se veían aunque estuvieran cerradas (su display:flex ganaba al display:none del navegador) */
dialog.blur-tool-dlg:not([open]), dialog.story-dlg:not([open]) { display: none !important; }
.blur-tool-modes input[type="radio"]:not(#_):not(#__):not(#___) { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--brand); }


/* Botones principales de las ventanas nuevas */
html body dialog :is(.blur-save-btn, .story-share-btn):not(#_):not(#__):not(#___) { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 78%, #fff), var(--brand)) !important; color: var(--brand-ink) !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 999px !important; font-weight: 800; box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.45) !important; }
html body dialog :is(.blur-save-btn, .story-share-btn):disabled { opacity: .55; }

/* En vivo: botón para quitar la franja en este dispositivo */
.live-close { margin-inline-start: auto; flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(220,38,38,.35); background: rgba(220,38,38,.1); color: #dc2626; font-size: 1.25rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.live-close:hover { background: rgba(220,38,38,.2); }
:root[data-theme="dark"] .live-close { color: #f87171; border-color: rgba(239,68,68,.5); }