/* ============================================================
   muro.css — El Muro del 20º Aniversario
   Hero con el emblema «20 años», formulario y muro de mensajes.
   Depende de tokens.css + rincon.css (.mark20__fill/.mark20__seam, .btn*).
   ============================================================ */

.muro { padding-bottom: var(--sp-8); }

/* ---------- HERO ---------- */
.muro-hero {
  border-radius: var(--r-lg, 16px);
  padding: 36px 28px 32px;
  margin: var(--sp-5) 0 var(--sp-5);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
/* lockup «20 [balón] AÑOS · de baloncesto y SuperManager» */
.muro-hero__mark {
  display: inline-flex; align-items: center; gap: 14px; text-align: left;
  animation: muro-rise .6s ease-out both;
}
.mk-lock__20 {
  font-family: var(--score); font-weight: 800; font-size: 82px; line-height: .8;
  color: var(--accent); display: inline-flex; align-items: center; gap: 2px;
}
.mk-lock__20 .mark20__ball { margin-bottom: -6px; }
.mk-lock__r { display: flex; flex-direction: column; line-height: 1; }
.mk-lock__anos {
  font-family: var(--score); font-weight: 700; font-size: 34px; letter-spacing: .02em; color: #fff;
}
.mk-lock__sub {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.65); margin-top: 6px;
  border-top: 1.5px solid var(--accent); padding-top: 5px;
}
.mk-lock__yr { letter-spacing: .18em; }

.muro-hero__title {
  font-family: var(--score); font-weight: 800; font-size: 34px; color: #fff;
  margin: 4px 0 0; text-wrap: balance;
}
.muro-hero__lede {
  color: rgba(255,255,255,.8); font-size: 15px; line-height: 1.55;
  max-width: 620px; margin: 0 auto;
}
.muro-hero__count { color: rgba(255,255,255,.9); font-size: 15px; margin: 2px 0 0; }
.muro-hero__count .score-num { color: var(--accent); font-size: 22px; margin-right: 4px; }
.muro-hero__cta { margin-top: 6px; }

@keyframes muro-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .muro-hero__mark { animation: none; } }

/* ---------- BARRA DE MODERACIÓN (admin) ---------- */
.muro-modbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--accent-soft); border: 1px solid rgba(240,162,60,.4);
  border-radius: var(--r-md, 12px); padding: 10px 14px; margin-bottom: var(--sp-4);
  font-size: 13.5px; color: var(--ink);
}
.muro-modbar a { margin-left: auto; font-weight: 600; color: var(--accent-deep); }

/* ---------- FORMULARIO ---------- */
.muro-form { padding: 22px 24px; margin-bottom: var(--sp-5); scroll-margin-top: calc(var(--header-h, 64px) + 12px); }
.muro-form__h { font-family: var(--score); font-weight: 700; font-size: 22px; margin: 0 0 14px; }
.muro-form__grid {
  display: grid; grid-template-columns: 1fr 220px; gap: 14px 16px; align-items: end;
}
.muro-field { display: flex; flex-direction: column; gap: 6px; }
.muro-field--msg { grid-column: 1 / -1; }
.muro-field--send { grid-column: 1 / -1; }
.muro-field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.muro-field input,
.muro-field select,
.muro-field textarea {
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; width: 100%;
}
.muro-field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.muro-field input:focus,
.muro-field select:focus,
.muro-field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.muro-field--send { display: flex; align-items: center; }

/* honeypot: fuera de pantalla, invisible para humanos */
.muro-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.muro-flash { border-radius: 10px; padding: 10px 14px; font-size: 14px; margin: 0 0 14px; }
.muro-flash--ok  { background: rgba(5,150,105,.12); color: #065f46; border: 1px solid rgba(5,150,105,.3); }
.muro-flash--err { background: rgba(220,80,80,.12); color: #991b1b; border: 1px solid rgba(220,80,80,.3); }

/* ---------- MURO ---------- */
.muro-wall-wrap { scroll-margin-top: calc(var(--header-h, 64px) + 12px); }
.muro-empty { text-align: center; color: var(--muted); padding: 30px 0; }
.muro-empty a { font-weight: 600; }

.muro-wall { columns: 3 280px; column-gap: 16px; }

.muro-msg {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md, 12px); padding: 16px 18px; margin: 0 0 16px;
  box-shadow: 0 1px 2px rgba(19,28,46,.04);
}
.muro-msg__text { color: var(--ink); font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; white-space: pre-line; }
.muro-msg__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.muro-msg__name { font-family: var(--score); font-weight: 700; font-size: 15px; color: var(--ink); }
.muro-msg__since {
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px;
}
.muro-msg__date { margin-left: auto; font-size: 12px; color: var(--muted); }

/* Me gusta */
.muro-like {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--muted); background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
  transition: color .12s, border-color .12s, background-color .12s;
}
.muro-like svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.muro-like:hover { color: var(--accent-deep); border-color: var(--accent); }
.muro-like.is-liked { color: var(--accent-deep); border-color: rgba(240,162,60,.55); background: var(--accent-soft); }
.muro-like.is-liked svg { fill: var(--accent); stroke: var(--accent); }
.muro-like:disabled { opacity: .6; cursor: default; }
.muro-like__n { font-variant-numeric: tabular-nums; }

/* destacado */
.muro-msg--pin {
  border-color: rgba(240,162,60,.55); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 60%);
  margin-bottom: 22px;
}
.muro-msg--pin .muro-msg__text { font-size: 16px; }
.muro-msg__flag {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-deep);
}
.muro-msg__flag svg { width: 15px; height: 15px; fill: none; stroke: var(--accent-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* retenido (vista de moderación) */
.muro-msg--held { border-style: dashed; opacity: .85; }
.muro-msg__held {
  display: inline-block; margin-bottom: 8px; font-size: 11px; font-weight: 700;
  color: #991b1b; background: rgba(220,80,80,.12); padding: 2px 8px; border-radius: 999px;
}

/* controles admin */
.muro-msg__admin { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.muro-msg__admin form { margin: 0; }
.muro-adm {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--ground); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 4px 10px;
}
.muro-adm:hover { border-color: var(--accent); }
.muro-adm--del { color: #991b1b; }
.muro-adm--del:hover { border-color: #991b1b; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .muro-hero { padding: 28px 18px; }
  .mk-lock__20 { font-size: 64px; }
  .mk-lock__anos { font-size: 27px; }
  .muro-hero__title { font-size: 27px; }
  .muro-form__grid { grid-template-columns: 1fr; }
  .muro-wall { columns: 1; }
}

/* acciones del hero: CTA principal + entrada al relato completo (historia.php) */
.muro-hero__acts {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.muro-hero__alt {
  color: var(--accent); font-size: 14.5px; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(240,162,60,.35); padding-bottom: 1px;
}
.muro-hero__alt:hover, .muro-hero__alt:focus-visible {
  color: #fff; border-bottom-color: #fff;
}

/* enlace al relato completo dentro del mensaje destacado */
.muro-msg__more {
  display: inline-block; margin: 2px 0 10px;
  font-weight: 600; font-size: 14.5px; color: var(--accent-deep); text-decoration: none;
  border-bottom: 1px solid var(--accent-soft); padding-bottom: 1px;
}
.muro-msg__more:hover, .muro-msg__more:focus-visible {
  border-bottom-color: var(--accent-deep);
}