/* ============================================================
   Harriet Turner — Estilos globales
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold:        #c9a84c;
  --gold-light:  #e8c96a;
  --gold-dim:    #7a5f28;
  --gold-glow:   rgba(201,168,76,0.15);
  --black:       #080808;
  --black-soft:  #111111;
  --black-card:  #141414;
  --black-border:#1e1e1e;
  --white-dim:   #ccc9be;
  --white-faint: #6a6760;
  --font-serif:  'Cormorant Garamond', serif;
  --font-sans:   'Montserrat', sans-serif;
  --radius:      2px;
  --transition:  0.3s ease;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white-dim);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
}

a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-light); }

img { max-width: 100%; height: auto; display: block; }

/* ── HEADER ──────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8,8,8,0.96);
  border-bottom: 1px solid var(--black-border);
  backdrop-filter: blur(8px);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo {
  width: 36px;
  height: auto;
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.3));
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 300;
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  display: block;
  padding: 6px 14px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-faint);
  transition: color var(--transition);
}
.site-nav a:hover,
.site-nav a.active { color: var(--gold-light); }

/* Acceso admin — ícono discreto */
.nav-admin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0 !important;
  color: rgba(201,168,76,.35) !important;
  transition: color var(--transition);
  vertical-align: middle;
  margin-left: 14px;
}
.nav-admin svg {
  width: 18px;
  height: 18px;
}
.nav-admin:hover {
  color: var(--gold) !important;
  background: transparent !important;
}

/* Paginador compartido del panel admin */
.admin-pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.admin-pager__btn {
  padding: 6px 16px;
  border: 1px solid var(--black-border);
  color: var(--white-faint);
  text-decoration: none;
  border-radius: var(--radius);
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: border-color var(--transition), color var(--transition);
}
.admin-pager__btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.admin-pager__info {
  font-size: .78rem;
  color: var(--white-faint);
  margin-left: auto;
}

.nav-donate {
  border: 1px solid var(--gold-dim);
  color: var(--gold) !important;
  padding: 6px 16px !important;
  transition: background var(--transition), color var(--transition) !important;
}
.nav-donate:hover {
  background: var(--gold);
  color: var(--black) !important;
  border-color: var(--gold);
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--gold);
  transition: all var(--transition);
}

/* ── MAIN ────────────────────────────────────────────── */
.site-main { min-height: calc(100vh - 68px - 180px); }

/* ── HERO (homepage) ─────────────────────────────────── */
.hero {
  text-align: center;
  padding: 80px 24px 60px;
  border-bottom: 1px solid var(--black-border);
  position: relative;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 0%, #170f02, transparent 70%);
  pointer-events: none;
}
.hero-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.hero-ornament span {
  display: block;
  width: 60px;
  height: 1px;
}
.hero-ornament .l { background: linear-gradient(to right, transparent, var(--gold-dim)); }
.hero-ornament .r { background: linear-gradient(to left,  transparent, var(--gold-dim)); }
.hero-ornament .d {
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 10px;
  position: relative;
}
.hero-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--white-faint);
  letter-spacing: 0.08em;
  position: relative;
}

/* ── NOTICIAS GRID ───────────────────────────────────── */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 8px;
}
.section-rule {
  width: 40px;
  height: 1px;
  background: var(--gold-dim);
  margin-bottom: 40px;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.post-card {
  background: var(--black-card);
  border: 1px solid var(--black-border);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.post-card:hover {
  border-color: var(--gold-dim);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.post-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.post-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.post-card:hover .post-card__img img { transform: scale(1.04); }

.post-card__img--placeholder {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #111 0%, #1a1500 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-card__img--placeholder svg {
  width: 40px;
  opacity: 0.2;
}

.post-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.post-card__date {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 10px;
}
.post-card__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--white-dim);
  line-height: 1.35;
  margin-bottom: 12px;
}
.post-card__excerpt {
  font-size: 0.85rem;
  color: var(--white-faint);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 20px;
}
.post-card__link {
  align-self: flex-start;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.post-card__link:hover { color: var(--gold-light); border-color: var(--gold-light); }

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 0.75rem;
  border: 1px solid var(--black-border);
  color: var(--white-faint);
  transition: all var(--transition);
}
.pagination a:hover { border-color: var(--gold-dim); color: var(--gold); }
.pagination span.current { border-color: var(--gold); color: var(--gold); }

/* ── SINGLE POST ─────────────────────────────────────── */
.post-single {
  max-width: 780px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
.post-single__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-faint);
  margin-bottom: 40px;
  transition: color var(--transition);
}
.post-single__back:hover { color: var(--gold); }
.post-single__date {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 16px;
}
.post-single__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: 0.06em;
  color: var(--gold-light);
  line-height: 1.2;
  margin-bottom: 32px;
}
.post-single__rule {
  width: 40px;
  height: 1px;
  background: var(--gold-dim);
  margin-bottom: 32px;
}
.post-single__entradilla {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--gold-light);
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--black-border);
}
.post-single__img {
  margin-bottom: 40px;
  border: 1px solid var(--black-border);
}
.post-single__content {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--white-dim);
}
.post-single__content h2,
.post-single__content h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--gold-light);
  margin: 40px 0 16px;
}
.post-single__content h2 { font-size: 1.7rem; }
.post-single__content h3 { font-size: 1.3rem; }
.post-single__content h4 {
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 32px 0 12px;
}
.post-single__content strong,
.post-single__content b {
  font-weight: 700;
  color: #e8e3d8;
}
.post-single__content p  { margin-bottom: 20px; }
.post-single__content ul,
.post-single__content ol { margin: 0 0 20px 24px; }
.post-single__content li { margin-bottom: 6px; }
.post-single__content a  { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }
.post-single__content a:hover { color: var(--gold-light); }
.post-single__content blockquote {
  border-left: 2px solid var(--gold-dim);
  padding-left: 20px;
  margin: 28px 0;
  color: var(--white-faint);
  font-style: italic;
}

/* Navegación anterior / siguiente */
.nota-nav {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.nota-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 1px solid var(--black-border);
  padding-top: 32px;
}
.nota-nav__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--black-card);
  border: 1px solid var(--black-border);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.nota-nav__item:hover {
  border-color: var(--gold-dim);
  background: rgba(201,168,76,0.04);
}
.nota-nav__item--next { text-align: right; }
.nota-nav__label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.nota-nav__title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--gold-light);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 600px) {
  .nota-nav__inner { grid-template-columns: 1fr; }
  .nota-nav__item--next { text-align: left; }
}

/* ── STATIC PAGES ────────────────────────────────────── */
.page-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 24px 80px;
}
.page-header {
  margin-bottom: 48px;
}
.page-header__label {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 14px;
}
.page-header__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 20px;
}
.page-header__rule {
  width: 40px;
  height: 1px;
  background: var(--gold-dim);
}
.page-content {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--white-dim);
}
.page-content h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--gold-light);
  font-size: 1.5rem;
  margin: 40px 0 14px;
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 6px;
}
.page-content h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--gold-light);
  font-size: 1.3rem;
  margin: 36px 0 12px;
}
.page-content p  { margin-bottom: 18px; }
.page-content ul { margin: 0 0 18px 22px; }
.page-content li { margin-bottom: 6px; }
.page-content strong { color: var(--gold); font-weight: 400; }

/* Links page */
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.link-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--black-border);
  background: var(--black-card);
  transition: border-color var(--transition);
  text-decoration: none;
}
.link-item:hover { border-color: var(--gold-dim); }
.link-item__icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.link-item__icon svg { width: 16px; fill: none; stroke: var(--gold); stroke-width: 1.5; }
.link-item__text { font-size: 0.85rem; color: var(--white-dim); }
.link-item__sub  { font-size: 0.7rem; color: var(--white-faint); margin-top: 2px; }

/* Contact form */
.contact-form { max-width: 560px; }
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-faint);
  margin-bottom: 8px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  background: var(--black-card);
  border: 1px solid var(--black-border);
  color: var(--white-dim);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.9rem;
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--gold-dim); }
.form-group textarea { resize: vertical; min-height: 140px; }

/* Donate */
.donate-box {
  max-width: 480px;
  border: 1px solid var(--gold-dim);
  padding: 40px;
  text-align: center;
}
.donate-box p { color: var(--white-faint); margin-bottom: 28px; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 13px 32px;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: transparent;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.btn-primary {
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  z-index: -1;
}
.btn-primary:hover { color: var(--black); border-color: var(--gold); box-shadow: 0 0 24px var(--gold-glow); }
.btn-primary:hover::after { transform: scaleX(1); }

.btn-sm { padding: 9px 20px; font-size: 0.62rem; line-height: 1; height: 36px; box-sizing: border-box; }
.btn-secondary { border: 1px solid var(--black-border); color: var(--white-dim); }
.btn-secondary:hover { border-color: var(--gold-dim); color: var(--gold-light); }
.btn-active { border-color: var(--gold); color: var(--gold); }
.btn-danger { border: 1px solid #6b1a1a; color: #c97070; }
.btn-danger:hover { color: var(--black); border-color: #c97070; }
.btn-danger::after { content: ''; position: absolute; inset: 0; background: #a03030; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); z-index: -1; }
.btn-danger:hover::after { transform: scaleX(1); }

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--black-border);
  padding: 48px 24px 32px;
  text-align: center;
}
.footer-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.footer-logo { width: 44px; opacity: 0.7; margin: 0 auto; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.footer-nav a { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-faint); }
.footer-nav a:hover { color: var(--gold); }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--black-border);
  color: var(--white-faint);
  transition: border-color var(--transition), color var(--transition);
}
.footer-social a:hover { border-color: var(--gold-dim); color: var(--gold); }
.footer-social svg { width: 14px; height: 14px; }
.footer-copy {
  font-size: 0.68rem;
  color: var(--white-faint);
  letter-spacing: 0.06em;
}

/* ── ADMIN ───────────────────────────────────────────── */
.admin-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--black-border);
}
.admin-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  color: var(--gold-light);
}
.admin-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.admin-table th {
  text-align: left;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-faint);
  border-bottom: 1px solid var(--black-border);
  padding: 10px 14px;
}
.admin-table td {
  padding: 14px;
  border-bottom: 1px solid var(--black-border);
  color: var(--white-dim);
  vertical-align: middle;
}
.admin-table__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.admin-table tr:hover td { background: rgba(255,255,255,0.02); }
.badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 20px;
}
.badge-on  { background: rgba(100,180,60,0.15); color: #88cc66; border: 1px solid rgba(100,180,60,0.3); }
.badge-off { background: rgba(150,100,50,0.15); color: #aa8855; border: 1px solid rgba(150,100,50,0.3); }

/* Admin form */
.admin-form { max-width: 760px; }
.admin-form .form-group label { color: var(--gold-dim); }
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="number"],
.admin-form input[type="file"],
.admin-form select,
.admin-form textarea {
  width: 100%;
  background: var(--black-card);
  border: 1px solid var(--black-border);
  color: var(--white-dim);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 300;
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--transition);
}
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus { border-color: var(--gold-dim); }
.admin-form textarea { min-height: 120px; resize: vertical; }
.admin-form select { appearance: none; cursor: pointer; }
.form-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

.editor-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding: 7px 10px;
  border: 1px solid var(--black-border);
  background: #101010;
  overflow-x: auto;
  scrollbar-width: none;
}
.editor-toolbar::-webkit-scrollbar { display: none; }

.editor-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  font-family: var(--font-sans);
  width: 34px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.editor-toolbar__btn:hover,
.editor-toolbar__btn:focus {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
  outline: none;
}

.editor-toolbar__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Botón dedicado H2 — más ancho para el texto "H2" */
.editor-toolbar__btn--h2 {
  width: 40px;
  font-family: var(--font-serif);
  font-size: .9rem;
  letter-spacing: .02em;
}
.editor-toolbar__btn--h2 svg {
  width: 28px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

/* Selector de formato de bloque (Párrafo / Título 1-3) */
.editor-toolbar .editor-toolbar__select {
  height: 32px;
  width: auto;
  min-width: 106px;
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0 8px;
  cursor: pointer;
  flex-shrink: 0;
  outline: none;
  transition: border-color var(--transition), color var(--transition);
}
.editor-toolbar .editor-toolbar__select:hover,
.editor-toolbar .editor-toolbar__select:focus { border-color: var(--gold); color: var(--gold); }
.editor-toolbar .editor-toolbar__select option { background: #101010; color: var(--gold-light); }

.editor-surface {
  min-height: 300px;
  width: 100%;
  background: var(--black-card);
  border: 1px solid var(--black-border);
  color: var(--white-dim);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  padding: 14px 16px;
  outline: none;
  transition: border-color var(--transition);
}

.editor-surface:focus {
  border-color: var(--gold-dim);
}

.editor-surface p,
.editor-surface ul,
.editor-surface ol,
.editor-surface blockquote,
.editor-surface h2,
.editor-surface h3,
.editor-surface h4 {
  margin-bottom: 16px;
}
/* Jerarquía visual de encabezados en el editor */
.editor-surface h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gold-light);
  border-bottom: 1px solid var(--gold-dim);
  padding-bottom: 6px;
}
.editor-surface h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--gold);
}
.editor-surface h4 {
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 600;
  color: var(--white-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.editor-surface ul,
.editor-surface ol {
  padding-left: 22px;
}

.editor-surface a {
  color: var(--gold);
  text-decoration: underline;
}

.editor-surface strong,
.editor-surface b {
  font-weight: 700;
  color: #fff;
}

.editor-surface em,
.editor-surface i {
  font-style: italic;
}

.editor-source {
  display: none;
}

/* Editor TinyMCE override */
.tox-tinymce { border-color: var(--black-border) !important; }

/* Login */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--black);
}
.login-box {
  width: 100%;
  max-width: 380px;
  background: var(--black-card);
  border: 1px solid var(--black-border);
  padding: 48px 40px;
}
.login-logo { display: block; width: 48px; margin: 0 auto 20px; }
.login-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  text-align: center;
  margin-bottom: 32px;
}
.alert {
  padding: 12px 16px;
  font-size: 0.8rem;
  margin-bottom: 24px;
  border-left: 2px solid;
}
.alert-error { border-color: #a03030; background: rgba(160,48,48,0.1); color: #c97070; }
.alert-success { border-color: var(--gold-dim); background: rgba(201,168,76,0.08); color: var(--gold); }
.alert--mt   { margin-top: 24px; }
.alert--left { text-align: left; }

/* ── DASHBOARD LAYOUT ───────────────────────────────── */
:root {
  --dash-sidebar-w: 226px;
  --dash-topbar-h:  60px;
}

body.admin-body {
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Sidebar */
.dash-sidebar {
  width: var(--dash-sidebar-w);
  flex-shrink: 0;
  background: #0b0b0b;
  border-right: 1px solid var(--black-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 200;
  overflow-y: auto;
  scrollbar-width: thin;
  transition: transform 0.25s ease;
}
.dash-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--black-border);
  flex-shrink: 0;
}
.dash-brand-logo {
  width: 28px;
  filter: drop-shadow(0 0 5px rgba(201,168,76,0.35));
}
.dash-brand-name {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 300;
}
.dash-sidebar__nav {
  flex: 1;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white-faint);
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  border-left: 2px solid transparent;
}
.dash-nav-item:hover {
  background: rgba(255,255,255,0.03);
  color: var(--white-dim);
  border-left-color: var(--gold-dim);
}
.dash-nav-item--active {
  color: var(--gold-light);
  background: rgba(201,168,76,0.07);
  border-left-color: var(--gold);
}
.dash-nav-item--active:hover { color: var(--gold-light); }
.dash-nav-item--danger { color: #7a4040; }
.dash-nav-item--danger:hover { color: #c97070; background: rgba(160,48,48,0.08); border-left-color: #6b1a1a; }
.dash-nav-icon {
  width: 15px; height: 15px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.dash-nav-icon svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.dash-nav-label { flex: 1; }
.dash-sidebar__footer {
  border-top: 1px solid var(--black-border);
  padding: 8px 0;
  flex-shrink: 0;
}

/* Content */
.dash-content {
  flex: 1;
  margin-left: var(--dash-sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Topbar */
.dash-topbar {
  height: var(--dash-topbar-h);
  background: rgba(8,8,8,0.97);
  border-bottom: 1px solid var(--black-border);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0; z-index: 100;
  gap: 16px;
  flex-shrink: 0;
}
.dash-topbar__left  { display: flex; align-items: center; gap: 14px; }
.dash-topbar__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-menu-btn {
  display: none;
  background: none; border: none;
  cursor: pointer; color: var(--white-faint);
  padding: 4px; flex-shrink: 0; align-items: center;
}
.dash-menu-btn svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round;
}
.dash-menu-btn:hover { color: var(--gold); }
.dash-topbar__title {
  font-family: var(--font-serif);
  font-weight: 300; font-size: 1.2rem;
  letter-spacing: 0.08em; color: var(--gold-light);
}
.dash-user {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white-faint);
  padding-right: 14px; border-right: 1px solid var(--black-border);
}
.dash-user svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Main content */
.dash-main {
  flex: 1;
  padding: 28px 28px 60px;
  max-width: 100%;
}

/* Stat cards */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.dash-stat {
  background: var(--black-card);
  border: 1px solid var(--black-border);
  padding: 20px 22px;
  transition: border-color var(--transition);
  display: flex; flex-direction: column; gap: 10px;
}
.dash-stat:hover { border-color: var(--gold-dim); }
.dash-stat__label {
  font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--white-faint);
}
.dash-stat__value {
  font-family: var(--font-serif);
  font-size: 2.4rem; font-weight: 300;
  color: var(--gold-light); line-height: 1;
}
.dash-stat__icon svg {
  width: 16px; height: 16px;
  fill: none; stroke: var(--gold-dim);
  stroke-width: 1.5; stroke-linecap: round; opacity: 0.6;
}

/* Overlay */
.dash-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 190;
}
.dash-overlay--visible { display: block; }

/* Section header */
.dash-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.dash-section-title {
  font-family: var(--font-serif);
  font-size: 1.05rem; font-weight: 300;
  color: var(--gold-light); letter-spacing: 0.1em;
}

/* Override inside dashboard */
body.admin-body .admin-wrap   { max-width: none; padding: 0; }
body.admin-body .admin-form   { max-width: 740px; }
body.admin-body .admin-header { display: none; }

/* Table scroll wrapper */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Fuentes admin: fila label + url */
.fuente-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.fuente-row input {
  flex: 1;
  min-width: 0;
}
.fuente-row input[type="url"] {
  flex: 1.4;
}
.fuente-remove {
  background: none;
  border: 1px solid var(--black-border);
  color: var(--white-faint);
  border-radius: 4px;
  padding: 5px 11px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}
.fuente-remove:hover {
  border-color: #c0392b;
  color: #c0392b;
}

/* Fuentes públicas al final de la nota */
.nota-fuentes {
  margin-top: 2.5em;
  padding-top: 1.2em;
  border-top: 1px solid var(--black-border);
}
.nota-fuentes__titulo {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white-faint);
  margin-bottom: .6em;
}
.nota-fuentes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nota-fuentes li {
  margin-bottom: .35em;
  font-size: .85rem;
}
.nota-fuentes a {
  color: var(--gold-dim);
  text-decoration: underline;
  word-break: break-all;
}
.nota-fuentes a:hover {
  color: var(--gold);
}
figure.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 1.6em 0;
}
figure.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
/* En el editor, el iframe no captura clics para no bloquear el cursor */
.editor-surface figure.video-embed iframe {
  pointer-events: none;
}
/* Botón borrar video */
figure.video-embed .video-embed-delete {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  background: rgba(0,0,0,.75);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
figure.video-embed:hover .video-embed-delete {
  opacity: 1;
}

/* Cita destacada en notas */
blockquote.nota-cita {
  border-left: 3px solid var(--gold);
  margin: 1.6em 0;
  padding: 14px 20px;
  background: rgba(201,168,76,0.06);
}
blockquote.nota-cita p { margin: 0; }
blockquote.nota-cita p.cita-texto {
  font-style: italic;
  font-weight: 600;
  color: var(--gold-light);
}

/* Donations split layout */
.donations-split {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr);
  gap: 24px;
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 68px;
    left: 0; right: 0;
    background: rgba(8,8,8,0.98);
    border-bottom: 1px solid var(--black-border);
    padding: 16px 0;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 12px 24px; }

  .nav-donate { padding: 10px 24px !important; display: block; width: fit-content; }
  .nav-admin  { margin-left: 0; padding: 10px 24px !important; width: auto; height: auto; justify-content: flex-start; }

  .posts-grid { grid-template-columns: 1fr; }
  .links-grid { grid-template-columns: 1fr; }
  .donate-box { padding: 28px 20px; }
  .login-box  { padding: 36px 24px; }
  .donations-split { grid-template-columns: 1fr; }
}

/* ── DASHBOARD RESPONSIVE ────────────────────────────── */
@media (max-width: 900px) {
  .dash-sidebar       { transform: translateX(-100%); }
  .dash-sidebar--open { transform: translateX(0); }
  .dash-content       { margin-left: 0; }
  .dash-menu-btn      { display: flex; }
  .dash-main          { padding: 20px 16px 48px; }
  .dash-topbar        { padding: 0 16px; }
  .dash-stats         { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dash-stats { grid-template-columns: 1fr; }
  .dash-topbar__title { font-size: 1rem; }
  .dash-user { display: none; }
  .dash-main { padding: 16px 12px 40px; }
  .dash-section-header { flex-direction: column; align-items: flex-start; }
}

/* ── FAB (botones flotantes móvil) ───────────────────── */
.fab-group {
  position: fixed;
  bottom: 24px;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  z-index: 500;
}
.fab-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--black-card);
  border: 1px solid var(--gold-dim);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 3px 14px rgba(0,0,0,0.55);
  transition: background 0.2s, border-color 0.2s;
}
.fab-btn:hover { background: rgba(201,168,76,0.13); border-color: var(--gold); }
.fab-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* scroll-to-top: oculto hasta hacer scroll */
.fab-btn--top {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s, background 0.2s, border-color 0.2s;
}
.fab-btn--top.fab-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Botón menú: solo visible en móvil */
.fab-btn--menu { display: none; }
@media (max-width: 768px) { .fab-group:not(.fab-group--admin) .fab-btn--menu { display: flex; } }
@media (max-width: 900px) { .fab-group--admin .fab-btn--menu { display: flex; } }

/* ── Ojo para campo de contraseña ────────────────────── */
.input-eye-wrap { position: relative; }
.input-eye-wrap input { padding-right: 44px !important; }
.input-eye-btn {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 42px;
  background: none; border: none;
  color: var(--white-faint);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.input-eye-btn:hover { color: var(--gold); }
.input-eye-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ── UTILIDADES (CSP: elimina unsafe-inline en style-src) ────── */

/* Botón ancho completo */
.btn--full { width: 100%; justify-content: center; }

/* Código inline */
code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 3px; font-size: .9em; }

/* Texto de ayuda bajo campos */
.form-help { color: var(--white-faint); font-size: .8rem; margin-top: 6px; line-height: 1.5; }

/* Formulario inline (display:inline para forms en áreas de acciones) */
.form-inline { display: inline; }

/* display:contents (logout en header admin) */
.d-contents { display: contents; }

/* Alturas de textarea */
.textarea-xs { min-height: 72px  !important; }
.textarea-sm { min-height: 80px  !important; }
.textarea-md { min-height: 100px !important; }
.textarea-lg { min-height: 140px !important; }

/* Form group sin margen inferior */
.form-group--mb0 { margin-bottom: 0; }

/* Form group inline (checkbox + label) */
.form-group--inline { display: flex; align-items: center; gap: 12px; }
.form-group--inline label { margin: 0; cursor: pointer; }
.form-group--inline input[type="checkbox"],
.form-group--inline input[type="radio"]   { width: auto; }

/* Admin form sin max-width */
.admin-form--full { max-width: none; }

/* Admin table: acciones sin wrapping */
.admin-table__actions--nowrap { flex-wrap: nowrap; gap: 6px; }

/* Tabla: helpers de celda */
.td-center { text-align: center; }
.td-muted  { color: var(--white-faint); }
.td-sm     { font-size: .8rem; color: var(--white-faint); }
.td-nowrap { white-space: nowrap; }

/* Vacío en tablas */
.td-empty { text-align: center; color: var(--white-faint); padding: 32px; }

/* Visitas */
.visitas-num         { font-variant-numeric: tabular-nums; font-size: .85rem; }
.visitas-num--active { color: var(--gold); }

/* Barra de orden/filtro en admin/index */
.admin-order-bar   { display: flex; gap: 8px; align-items: center; }
.admin-order-label { font-size: .8rem; color: var(--white-faint); }

/* Texto vacío */
.empty-state { color: var(--white-faint); }

/* Reglas de contraseña */
.pwd-rules    { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.pwd-rules li { font-size: .72rem; color: var(--white-faint); }

/* Intro en change-password */
.pwd-intro { color: var(--white-faint); margin-bottom: 20px; text-align: center; }

/* Login — enlace volver al sitio */
.login-back { display: block; text-align: center; margin-top: 22px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--white-faint); text-decoration: none; transition: color .2s; }
.login-back:hover { color: var(--gold); }

/* Texto dorado en label de captcha */
.captcha-gold { color: var(--gold); }

/* Label: texto opcional / requerido */
.label-opt { color: var(--white-faint); font-weight: 300; }
.label-req { color: var(--gold); font-size: .8rem; }

/* Texto resaltado en helpers */
.text-highlight { color: var(--white-main, #e8e3d8); }

/* Logout btn en header admin */
.logout-btn { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font: inherit; }

/* Encabezados de sección en admin */
.admin-section-h      { font-size: 1.1rem; margin: 0 0 20px; color: var(--gold); font-weight: 300; }
.admin-section-h--mt  { margin-top: 32px; }
.admin-section-h--smb { margin-bottom: 6px; }

/* Tarjetas con borde sólido (donations, links panel) */
.admin-card    { border: 1px solid var(--black-border); padding: 22px; background: var(--black-card); }
.admin-card h2 { font-family: var(--font-serif); font-weight: 300; color: var(--gold-light); margin-bottom: 18px; font-size: 1.1rem; }

/* Tarjeta punteada (agregar nuevo enlace) */
.admin-card--dashed    { border: 1px dashed var(--gold-dim); padding: 18px; background: rgba(201,168,76,0.03); margin-top: 18px; }
.admin-card--dashed h3 { font-family: var(--font-serif); font-weight: 300; color: var(--gold-light); margin-bottom: 14px; }

/* Lista sortable (admin/links) */
.links-sortable { display: flex; flex-direction: column; gap: 14px; }

/* Tarjeta de enlace en admin */
.link-card           { border: 1px solid var(--black-border); background: var(--black-card); padding: 16px 18px; }
.link-card__header   { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.link-card__drag     { cursor: grab; color: var(--white-faint); flex-shrink: 0; user-select: none; }
.link-card__active   { display: flex; align-items: center; gap: 8px; color: var(--white-dim); font-size: .85rem; margin: 0; cursor: pointer; }
.link-card__active   input[type="checkbox"] { width: auto; }
.link-card__active--spaced { margin-top: 14px; }

/* Mensajes — barra de filtros */
.msg-filter-bar         { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; }
.msg-filter-btn         { padding: 6px 14px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--black-border); text-decoration: none; color: var(--white-faint); background: transparent; }
.msg-filter-btn--active { color: var(--black); background: var(--gold); }
.msg-unread-badge       { background: var(--gold); color: var(--black); border-radius: 10px; padding: 0 6px; font-size: .7rem; margin-left: 4px; }

/* Mensajes — panel de detalle */
.msg-detail             { border: 1px solid var(--gold-dim); padding: 24px 28px; background: var(--black-card); margin-bottom: 28px; }
.msg-detail__header     { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.msg-detail__id         { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 6px; }
.msg-detail__name       { font-size: 1rem; color: var(--white, #fff); margin-bottom: 2px; font-weight: 400; }
.msg-detail__email      { color: var(--white-faint); font-size: .85rem; }
.msg-detail__meta       { text-align: right; font-size: .8rem; color: var(--white-faint); }
.msg-detail__ip         { margin-top: 2px; }
.msg-detail__body       { border-top: 1px solid var(--black-border); padding-top: 16px; line-height: 1.85; color: var(--white-dim); white-space: pre-wrap; font-size: .9rem; }
.msg-detail__actions    { display: flex; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--black-border); flex-wrap: wrap; }
.msg-detail__back       { margin-left: auto; }

/* Mensajes — filas de tabla */
.tr-open           { background: #161208; }
.td-name           { white-space: nowrap; }
.td-name--unread   { font-weight: 500; color: var(--white, #fff); }
.td-name--read     { font-weight: 300; color: var(--white-dim); }
.td-email          { color: var(--white-faint); font-size: .85rem; }
.td-preview        { max-width: 320px; }
.td-preview a      { color: var(--white-dim); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-date           { white-space: nowrap; color: var(--white-faint); font-size: .82rem; }
.td-date__time     { font-size: .76rem; }
.unread-dot        { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-right: 6px; vertical-align: middle; flex-shrink: 0; }

/* Donaciones — lista y tarjetas (admin) */
.donations-list        { display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.donation-card         { border: 1px solid var(--black-border); padding: 14px; background: #101010; }
.donation-card__header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.donation-card__ref    { color: var(--gold-light); font-weight: bold; }
.donation-card__status { font-size: .8rem; color: var(--white-faint); }
.donation-card__body   { font-size: .9rem; line-height: 1.7; }
.donation-card__email  { color: var(--white-faint); }
.donation-card__amount { margin-top: 6px; }
.donation-card__date   { font-size: .8rem; color: var(--white-faint); margin-top: 6px; }

/* Donaciones — página pública */
.donate-wrap            { display: flex; justify-content: center; padding-top: 80px; }
.donate-wrap .donate-box { max-width: 640px; width: 100%; }
.donate-logo            { width: 52px; margin: 0 auto 20px; opacity: .8; }
.donate-title           { font-size: 1.6rem; margin-bottom: 16px; }
.donate-amounts         { display: flex; flex-wrap: wrap; gap: 10px; }
.donate-amount-label    { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--gold-dim); padding: 10px 14px; cursor: pointer; }
.donate-amount-label input[type="radio"] { width: auto; }
.donate-form            { max-width: none; margin-top: 28px; text-align: left; }

/* Intro en páginas públicas */
.page-intro { margin-bottom: 28px; color: var(--white-faint); max-width: 620px; }

/* Honeypot (formulario de contacto) */
.field-honeypot { position: absolute; left: -9999px; opacity: 0; }

/* SEO — contador de caracteres */
.seo-char-count { float: right; font-weight: 400; font-size: .8rem; color: var(--white-faint); }

/* Input con prefijo (@twitter) */
.input-prefix-group  { display: flex; align-items: center; }
.input-prefix        { padding: 0 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-right: none; border-radius: 6px 0 0 6px; color: var(--white-faint); line-height: 40px; font-size: .9rem; white-space: nowrap; }
.input-suffix-rounded { border-radius: 0 6px 6px 0 !important; flex: 1; }

/* Input monoespaciado (GA, GSC) */
.input-mono { font-family: monospace; }

/* OG Image preview en admin/seo */
.og-preview-box   { margin-bottom: 20px; }
.og-preview-label { font-size: .8rem; color: var(--white-faint); margin: 0 0 8px; }
.og-preview-img   { max-width: 320px; width: 100%; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); }
.og-warning       { margin-bottom: 20px; padding: 14px 20px; background: rgba(255,200,0,.06); border: 1px solid rgba(255,200,0,.15); border-radius: 6px; }
.og-warning p     { font-size: .85rem; color: var(--white-faint); margin: 0; }

/* Site — logo row */
.site-logo-row      { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 24px; }
.site-logo-caption  { font-size: .8rem; color: var(--white-faint); margin: 0 0 8px; }
.site-logo-preview  { max-height: 80px; max-width: 220px; object-fit: contain; background: rgba(255,255,255,.04); border-radius: 6px; padding: 12px; border: 1px solid rgba(255,255,255,.1); }
.site-favicon-col   { flex: 1; min-width: 220px; }
.site-favicon-preview { width: 32px; height: 32px; object-fit: contain; background: rgba(255,255,255,.04); border-radius: 4px; padding: 4px; border: 1px solid rgba(255,255,255,.1); }

/* Footer admin — hint + vista previa copyright */
.admin-footer-hint    { font-size: .85rem; color: var(--white-faint); margin: -12px 0 24px; }
.admin-icon-inline    { vertical-align: middle; margin-right: 6px; }
.footer-preview-box   { margin: 0 0 32px; padding: 16px 20px; background: rgba(255,255,255,.04); border-radius: 8px; border: 1px solid rgba(255,255,255,.08); }
.footer-preview-label { font-size: .8rem; color: var(--white-faint); margin: 0 0 8px; }
.footer-preview-text  { font-size: .9rem; margin: 0; color: var(--white-dim); }

/* Editor — preview imagen destacada */
.editor-img-preview { max-height: 140px; border: 1px solid var(--black-border); }

/* Users — último login */
.user-last-login { font-size: .75rem; color: var(--white-faint); }

/* Post card — enlace de tarjeta completo */
.post-card__link-cover { color: inherit; text-decoration: none; }

/* Botón con margen izquierdo auto */
.btn--ml-auto { margin-left: auto; }

/* ── utility additions for CSP refactor ── */
.label-icon           { vertical-align: middle; margin-right: 6px; }
.textarea-xl          { min-height: 120px !important; }
.input-prefix-group input { border-radius: 0 6px 6px 0; flex: 1; }
.msg-badge            { background: var(--gold); color: var(--black); border-radius: 10px; padding: 0 6px; font-size: .7rem; margin-left: 4px; }
.admin-order-bar__label { font-size: .8rem; color: var(--white-faint); }
.seo-counter          { float: right; font-weight: 400; font-size: .8rem; color: var(--white-faint); }
.text-main            { color: var(--white-main, #e8e4da); }
.btn--mt              { margin-top: 4px; }
.btn--ml              { margin-left: 6px; }
.form-help--mt0       { margin-top: 0; }
.mb-24                { margin-bottom: 24px; }
.mb-20                { margin-bottom: 20px; }
.td-empty-pad         { padding: 32px; }

/* ── Security log ── */
.sec-tabs            { display: flex; gap: 4px; border-bottom: 1px solid var(--black-border); margin-bottom: 20px; }
.sec-tab             { padding: 10px 18px; color: var(--white-faint); text-decoration: none; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s; }
.sec-tab:hover, .sec-tab--active { color: var(--gold); border-bottom-color: var(--gold); }
.sec-search-form     { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.sec-search-input    { flex: 1; max-width: 420px; padding: 8px 12px; background: #1a1a1a; border: 1px solid var(--black-border); color: var(--white-dim); border-radius: 4px; font-size: .85rem; }
.sec-table           { width: 100%; border-collapse: collapse; font-size: .83rem; }
.sec-table th        { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--black-border); color: var(--white-faint); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; font-size: .75rem; white-space: nowrap; }
.sec-table td        { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: top; }
.sec-table tr:hover td { background: rgba(255,255,255,.025); }
.sec-badge           { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: .75rem; font-weight: 500; letter-spacing: .04em; }
.sec-badge--ok       { background: rgba(80,200,120,.15); color: #50c878; }
.sec-badge--fail     { background: rgba(220,80,80,.15); color: #e57373; }
.sec-td-id           { color: var(--white-faint); width: 50px; }
.sec-td-ip           { font-family: monospace; font-size: .8rem; white-space: nowrap; }
.sec-td-date         { font-size: .78rem; color: var(--white-faint); white-space: nowrap; }
.sec-td-details      { max-width: 280px; word-break: break-word; }
.sec-action          { background: rgba(201,168,76,.08); color: var(--gold); padding: 1px 6px; border-radius: 3px; font-size: .78rem; }