/* ============================================================
   Foro · editorial styles layered on top of club.css
   Reuses: .section.with-topo, .section-head, .stage-strip,
           .section-eyebrow, .section-title, .watermark,
           .frame-id, .join-grid, .join-card, .join-stats,
           .field, .submit, .thread-avatar, .mito-grid, .timeline
   ============================================================ */

/* ----- Flash messages ----- */
.flash{
  margin: 0 0 24px;
  padding: 14px 18px;
  border-left: 4px solid var(--brick);
  background: var(--night-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
}
.flash.error  { border-left-color: #C8102E; background: rgba(200,16,46,.08); }
.flash.success{ border-left-color: #2ea043; background: rgba(46,160,67,.08); }
.flash.info   { border-left-color: var(--brick); background: rgba(0,58,143,.06); }

/* =====================================================
   FORO — hero CTAs, stats strip, toolbar, mid-page banner
   (these were defined in tenere.html originally; extracted
    here so the standalone PHP forum has them too)
   ===================================================== */

/* ----- Hero CTA pair (Abrir hilo + Solicitar matrícula) ----- */
.foro-hero-cta{
  margin-top: 36px;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.foro-hero-cta .btn-primary,
.foro-hero-cta .btn-ghost{ flex: 0 1 auto; min-width: 220px; }

/* ----- Stats strip (4 cells with big italic numbers) ----- */
.foro-stats-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--night-3);
}
.foro-stats-strip .cell{
  padding: 28px 26px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.foro-stats-strip .cell:last-child{ border-right: none; }
.foro-stats-strip .cell .v{
  display: block;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 56px; line-height: 1;
  color: var(--paper);
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}
.foro-stats-strip .cell .v.r{ color: var(--brick); }
.foro-stats-strip .cell .v.live{
  display: inline-flex; align-items: center; gap: 14px;
}
.foro-stats-strip .cell .v.live::before{
  content: "";
  width: 12px; height: 12px;
  background: #2ea043;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(46,160,67,.18);
  animation: pulseDotStrip 1.6s ease-in-out infinite;
}
@keyframes pulseDotStrip{
  0%,100% { box-shadow: 0 0 0 0 rgba(46,160,67,.6); }
  50%     { box-shadow: 0 0 0 7px rgba(46,160,67,0); }
}
.foro-stats-strip .cell .k{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =====================================================
   BIDS · OFERTAS in side rail (hilo.php · mercadillo)
   ===================================================== */

.rail-block-bids{
  /* sand-deeper background to differentiate from other rail blocks */
  background:
    linear-gradient(180deg, rgba(255,209,0,.12) 0%, transparent 70%),
    var(--night-2);
  border-color: var(--brick);
}
.bid-list{
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column;
}
.bid-item{
  padding: 14px 0;
  border-bottom: 1px dashed var(--rule);
}
.bid-item:first-child{ padding-top: 4px; }
.bid-item:last-child{ border-bottom: none; padding-bottom: 0; }
.bid-item.bid-status-rejected,
.bid-item.bid-status-withdrawn{
  opacity: 0.55;
}
.bid-item.bid-status-accepted{
  background: rgba(46,160,67,.08);
  border-left: 3px solid #2ea043;
  padding-left: 12px;
  margin-left: -12px;
  border-bottom: none;
}

.bid-item-head{
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.bid-item .bid-avatar{
  width: 36px; height: 36px;
  font-size: 14px;
}
.bid-who{ display: flex; flex-direction: column; min-width: 0; }
.bid-who .bid-name{
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 14px;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.bid-who .bid-name:hover{ color: var(--brick); }
.bid-who .bid-loc{
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bid-amount{
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 22px;
  color: var(--brick);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.bid-item.bid-status-accepted .bid-amount{ color: #1b5028; }
.bid-message{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(13,20,29,.78);
  font-style: italic;
  overflow-wrap: anywhere;
}
.bid-foot{
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.bid-pill{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  color: var(--muted);
}
.bid-pill-pending  { color: var(--brick); border-color: var(--brick); background: rgba(0,58,143,.06); }
.bid-pill-accepted { color: #1b5028; border-color: #2ea043; background: rgba(46,160,67,.10); }
.bid-pill-rejected { color: #C8102E; border-color: rgba(200,16,46,.55); }
.bid-pill-withdrawn{ color: var(--muted); }
.bid-action-form{ display: inline; }
.bid-btn{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid;
  cursor: pointer;
  background: transparent;
  transition: background .2s, color .2s;
}
.bid-btn-accept{ color: #1b5028; border-color: #2ea043; }
.bid-btn-accept:hover{ background: #2ea043; color: var(--paper-on-dark); }
.bid-btn-reject{ color: #C8102E; border-color: rgba(200,16,46,.5); }
.bid-btn-reject:hover{ background: #C8102E; color: var(--paper-on-dark); }
.bid-btn-withdraw{ color: var(--muted); border-color: var(--rule-strong); }
.bid-btn-withdraw:hover{ background: var(--paper); color: var(--paper-on-dark); border-color: var(--paper); }

.bid-form{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.bid-form h5{
  margin: 0 0 12px;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
}
.bid-form .price-input-wrap{ width: 100% }
.bid-form textarea{
  width: 100%;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--night);
  border: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--paper);
  resize: vertical;
  min-height: 64px;
}
.bid-form textarea:focus{ outline: none; border-color: var(--brick); }
.bid-form textarea::placeholder{ color: var(--muted); font-style: italic; }

/* =====================================================
   Inline "message sent" confirmation — replaces the form after submit
   (used by both hilo.php DM form and mensajes.php reply form)
   ===================================================== */

.msg-sent-confirm{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px;
  background:
    linear-gradient(180deg, rgba(46,160,67,.10) 0%, rgba(46,160,67,.04) 100%);
  border-left: 4px solid #2ea043;
  position: relative;
  animation: confirmIn .35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes confirmIn{
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.msg-sent-confirm .icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: #2ea043;
  color: var(--paper-on-dark);
  font-size: 22px; font-weight: 700;
  border-radius: 50%;
  margin-bottom: 4px;
}
.msg-sent-confirm .label{
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #1b5028;
  line-height: 1;
}
.msg-sent-confirm .desc{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(13,20,29,.78);
  max-width: 50ch;
  text-wrap: pretty;
}
.msg-sent-confirm a{
  margin-top: 6px;
  align-self: flex-start;
}

/* =====================================================
   DM · Mensaje privado form (hilo.php side rail)
   ===================================================== */

.dm-form textarea{
  width: 100%;
  padding: 12px 14px;
  background: var(--night);
  border: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper);
  resize: vertical;
  min-height: 96px;
}
.dm-form textarea:focus{ outline: none; border-color: var(--brick); }
.dm-form textarea::placeholder{ color: var(--muted); font-style: italic; }

/* =====================================================
   NAV — unread inbox indicator
   ===================================================== */

.nav .nav-inbox{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--brick);
  color: var(--paper-on-dark);
  text-decoration: none;
  font-size: 18px;
  border: 1px solid var(--brick);
  transition: background .2s, color .2s;
}
.nav .nav-inbox:hover{
  background: var(--navy);
  color: var(--brick);
  border-color: var(--navy);
}
.nav .nav-inbox-glyph{ line-height: 1; }
.nav .nav-inbox-count{
  position: absolute;
  top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  background: var(--navy);
  color: var(--brick);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--paper);
}

/* =====================================================
   INBOX page (mensajes.php)
   ===================================================== */

.inbox-tabs{
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 28px;
}
.inbox-tab{
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.inbox-tab:hover{ color: var(--paper); }
.inbox-tab.active{ color: var(--paper); border-bottom-color: var(--brick); }

.inbox-list{
  display: flex; flex-direction: column;
}
.msg-card{
  border-bottom: 1px solid var(--rule);
}
.msg-card.unread .msg-card-head{ background: rgba(0,58,143,.04); }
.msg-card-head{
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 18px 20px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.msg-card-head:hover{ background: rgba(0,0,0,.025); }
.msg-card .msg-avatar{
  width: 44px; height: 44px;
  font-size: 16px;
}
.msg-card-meta{ min-width: 0; }
.msg-card-name{
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 17px;
  color: var(--paper);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.msg-card.unread .msg-card-name{ font-weight: 800; }
.msg-card-snippet{
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(13,20,29,.7);
  overflow-wrap: anywhere;
}
.msg-card-thread{
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brick);
}
.msg-card-time{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.msg-card-time .unread-dot{
  width: 10px; height: 10px;
  background: var(--brick);
  border-radius: 50%;
  animation: pulseDotStrip 1.6s ease-in-out infinite;
}

.msg-card-body{
  padding: 6px 20px 24px;
  border-top: 1px dashed var(--rule);
}
.msg-card-body p{
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(13,20,29,.85);
  max-width: 64ch;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.msg-reply-form{
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.msg-reply-form textarea{
  width: 100%;
  padding: 14px 16px;
  background: var(--night-2);
  border: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--paper);
  resize: vertical;
  min-height: 96px;
}
.msg-reply-form textarea:focus{ outline: none; border-color: var(--brick); }
.msg-reply-form textarea::placeholder{ color: var(--muted); font-style: italic; }

/* =====================================================
   .field textarea — styled to match the rest of the form
   (club.css only covers input + select; textarea was left default)
   ===================================================== */
.field textarea{
  width: 100%;
  padding: 16px 18px;
  background: var(--night);
  border: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper);
  resize: vertical;
  transition: border-color .2s ease, background .2s ease;
}
/* The body field on nuevo-hilo.php gets extra room */
#body-textarea{ min-height: 260px; }
.field textarea::placeholder{
  color: var(--muted);
  font-style: italic;
}
.field textarea:focus{
  outline: none;
  border-color: var(--brick);
  background: var(--night-2);
}
.field textarea:hover:not(:focus){
  border-color: var(--rule-strong);
}

/* Live counter + format hint sitting under the textarea */
.field .textarea-meta{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field .textarea-meta .counter{ font-weight: 500; }
.field .textarea-meta .counter.warn{ color: var(--brick); }
.field .textarea-meta .counter.over{ color: #C8102E; }
.field .textarea-meta .format-hint{ color: var(--muted); font-style: italic; text-transform: none; letter-spacing: .04em; }

/* =====================================================
   Field group container — visually clusters category-specific fields
   ===================================================== */
.field-group{
  background: var(--night-3);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brick);
  padding: 24px 24px 8px;
  margin: 0 0 22px;
}
.field-group-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.field-group-label{
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
}
.field-group-hint{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =====================================================
   PRICE — three surfaces:
   1. .thread-price-tag      → big "ticket" next to title in hilo.php
   2. .thread-price-badge    → top-right corner of thread cards on foro.php
   3. .price-lower-form      → side-rail mini-form for the author
   ===================================================== */

/* (1) Big ticket-style price tag in the section-head of hilo.php */
.thread-price-tag{
  display: flex; flex-direction: column; align-items: stretch;
  min-width: 168px;
  padding: 18px 22px;
  background: var(--brick);
  color: var(--paper-on-dark);
  text-align: center;
  position: relative;
  box-shadow: 0 14px 32px rgba(0,58,143,.18);
}
.thread-price-tag .price-was{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,237,224,.55);
  text-decoration: line-through;
  margin-bottom: 8px;
}
.thread-price-tag .price-now{
  display: block;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 42px; line-height: 1;
  letter-spacing: 0.01em;
  color: var(--paper-on-dark);
}
.thread-price-tag.has-discount .price-now{
  color: var(--navy);                /* yellow when reduced */
}
.thread-price-tag .price-discount{
  display: inline-block;
  margin: 10px auto 0;
  padding: 4px 11px;
  background: var(--navy);
  color: var(--brick);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  font-weight: 700;
  text-transform: uppercase;
}
.thread-price-tag .price-meta{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(245,237,224,.3);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245,237,224,.7);
}

/* (2) Compact corner badge on foro.php thread cards */
.thread.has-price .thread-body{
  padding-right: 140px;              /* reserve room for the badge */
  position: relative;
}
.thread-price-badge{
  position: absolute;
  top: -2px; right: 0;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 5px;
  z-index: 2;
}
.thread-price-badge .was{
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-decoration: line-through;
  color: var(--muted);
}
.thread-price-badge .now{
  display: inline-block;
  padding: 6px 14px;
  background: var(--brick);
  color: var(--paper-on-dark);
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 22px; line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.thread-price-badge.has-discount .now{
  background: var(--navy);
  color: var(--brick);
}
.thread-price-badge .off{
  display: inline-block;
  padding: 3px 9px;
  background: var(--brick);
  color: var(--paper-on-dark);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* (3) Side-rail seller's price control — navy card with yellow accents.
   Shows the current price state (Precio / Precio rebajado / Precio final),
   the big italic amount, the optional struck-through "was" line, the
   discount chip, the highest pending bid, and the lower-price form. */
.rail-block-price{
  background: var(--brick);
  border: 1px solid #00255c;
  color: var(--paper-on-dark);
  box-shadow: 0 14px 36px rgba(0,58,143,.22);
}
.rail-block-price .rail-head{
  border-bottom-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.7);
}
.rail-block-price .rail-num,
.rail-block-price .rail-label{ color: rgba(255,255,255,.7); }
.rail-block-price .rail-num{ color: #FFD100; }

.rail-block-price__label{
  margin: 12px 0 6px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase;
  color: #FFD100;
}

.rail-block-price__amount{
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  margin-bottom: 14px;
}
.rail-block-price__was{
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: line-through;
  color: rgba(255,255,255,.55);
}
.rail-block-price__now{
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 52px; line-height: 1;
  letter-spacing: .005em;
  color: #FFD100;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.rail-block-price__chip{
  display: inline-block;
  margin-top: 6px;
  padding: 4px 11px;
  background: #FFD100;
  color: var(--brick);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .26em;
  font-weight: 700;
  text-transform: uppercase;
}
.rail-block-price__sold{
  display: inline-block;
  margin-top: 6px;
  padding: 4px 11px;
  background: #C8102E;          /* red Vendido tag */
  color: #fff;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .26em;
  font-weight: 700;
  text-transform: uppercase;
}

.rail-block-price__hint{
  margin: 0 0 14px;
  padding: 10px 14px;
  /* Yellow background + navy text — high contrast against the navy card. */
  background: #FFD100;
  border-left: 3px solid var(--brick);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brick);
}
.rail-block-price__hint strong{
  color: var(--brick);
  font-weight: 800;
}
.rail-block-price__hint--quiet{
  /* Softer variant for the "no bids yet" empty state — still readable. */
  background: rgba(255,209,0,.85);
  color: var(--brick);
}
.rail-block-price__hint--quiet strong{ color: var(--brick); }

/* Sold state: keep the navy card, mute the price, let the red tag pop. */
.rail-block-price.is-sold .rail-block-price__now{
  color: rgba(255,209,0,.45);
  text-decoration: line-through;
  text-shadow: none;
}
.rail-block-price.is-sold .rail-block-price__label{
  color: rgba(255,209,0,.65);
}

/* Lower-price form on the navy card */
.price-lower-form .price-input-wrap{ width: 100%; }
.rail-block-price__form{
  display: flex; align-items: stretch; gap: 8px;
  margin-top: 4px;
}
.rail-block-price__form .price-input-wrap{
  flex: 1; min-width: 0;
  position: relative;
  background: #fff;
  border: 1px solid #00255c;
  display: flex; align-items: center;
}
.rail-block-price__form .price-currency{
  padding: 0 10px 0 12px;
  font-family: var(--display); font-style: italic; font-weight: 700;
  color: var(--brick);
  font-size: 18px;
}
.rail-block-price__form .price-input-wrap input{
  flex: 1; min-width: 0;
  border: 0; outline: 0;
  padding: 11px 12px 11px 0;
  background: transparent;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 18px;
  color: var(--paper);
}
.rail-block-price__form .price-input-wrap input::placeholder{
  color: rgba(26,20,16,.35);
}
.rail-block-price__btn{
  background: #FFD100;
  color: var(--brick);
  border: 1px solid #FFD100;
  padding: 0 18px;
  font-family: var(--display); font-style: italic; font-weight: 800;
  font-size: 14px; letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rail-block-price__btn:hover{
  background: #fff; border-color: #fff; color: var(--brick);
}
.rail-block-price.is-sold .rail-block-price__form{ display: none; }

/* =====================================================
   Version chips + price input (nuevo-hilo.php form)
   ===================================================== */

.version-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.version-chip{
  position: relative;
  cursor: pointer;
  user-select: none;
  display: inline-flex; align-items: center;
  padding: 11px 18px;
  background: var(--night-3);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  transition: border-color .2s, background .2s, color .2s, transform .12s ease;
}
.version-chip input{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.version-chip:hover{ border-color: var(--brick); }
.version-chip:has(input:checked){
  background: var(--brick);
  color: var(--paper-on-dark);
  border-color: var(--brick);
}
.version-chip:has(input:focus-visible){
  outline: 2px solid var(--brick);
  outline-offset: 2px;
}

.price-input-wrap{
  display: flex;
  align-items: stretch;
}
.price-currency{
  display: flex; align-items: center; justify-content: center;
  padding: 0 18px;
  background: var(--night-3);
  border: 1px solid var(--rule);
  border-right: none;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 22px;
  color: var(--brick);
  flex-shrink: 0;
}
.price-input-wrap input{
  flex: 1;
  padding: 12px 14px;
  background: var(--night);
  border: 1px solid var(--rule);
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 18px;
  color: var(--paper);
  letter-spacing: 0.02em;
}
.price-input-wrap input:focus{
  outline: none;
  border-color: var(--brick);
}

/* =====================================================
   Chips: price + version (hilo.php meta bar)
   ===================================================== */

.thread-meta-bar .chip-price{
  background: var(--brick);
  color: var(--paper-on-dark);
  border-color: var(--brick);
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 7px 14px;
  text-transform: none;
}
.thread-meta-bar .chip-version{
  background: rgba(0,58,143,.06);
  border-color: var(--brick);
  color: var(--brick);
  font-weight: 600;
}

/* =====================================================
   Pills: price + version (foro.php thread footer)
   ===================================================== */

.r-pill.r-price{
  background: var(--brick);
  color: var(--paper-on-dark);
  border-color: var(--brick);
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  text-transform: none;
}
.r-pill.r-version{
  border-color: rgba(0,58,143,.5);
  color: var(--brick);
  font-weight: 600;
}

/* ----- Foro hero with the toolbar tucked under the section-head rule ----- */
.foro-hero{
  padding-bottom: 0;        /* toolbar sits flush at the bottom of the hero */
}
.foro-hero .section-head{
  margin-bottom: 0;          /* close the gap above the rule */
}
.foro-hero .foro-toolbar{
  margin: 0 -56px;           /* still bleed to section edges, no top/bottom margin */
  border-top: none;          /* section-head's border-bottom is the divider */
}
.foro-section-tight{
  padding-top: 48px;          /* tight gap between sticky toolbar and threads */
}

/* ----- Sticky filter/search/sort toolbar ----- */
.foro-toolbar{
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -56px 36px;
  padding: 14px 56px;
  background: var(--night);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  backdrop-filter: blur(8px);
}
.foro-toolbar .toolbar-tabs{
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}
.foro-toolbar .toolbar-tabs::-webkit-scrollbar{ display: none; }
.foro-toolbar .toolbar-tab{
  display: inline-block;
  padding: 9px 14px;
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.foro-toolbar .toolbar-tab:hover{
  color: var(--paper);
  border-color: var(--rule);
}
.foro-toolbar .toolbar-tab.active{
  color: var(--paper);
  border-color: var(--brick);
  background: rgba(0,58,143,.06);
}
.foro-toolbar .toolbar-search{
  position: relative;
  min-width: 220px;
}
.foro-toolbar .toolbar-search input{
  width: 100%;
  padding: 9px 12px 9px 32px;
  background: var(--night-3);
  border: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 13px;
  color: var(--paper);
}
.foro-toolbar .toolbar-search input::placeholder{ color: var(--muted); }
.foro-toolbar .toolbar-search input:focus{
  outline: none;
  border-color: var(--brick);
}
.foro-toolbar .toolbar-search::before{
  content: "⌕";
  position: absolute;
  left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted);
  font-size: 14px; line-height: 1;
  pointer-events: none;
}
.foro-toolbar .toolbar-sort{
  background: var(--night-3);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 9px 12px;
  cursor: pointer;
}
.foro-toolbar .toolbar-sort:focus{
  outline: none;
  border-color: var(--brick);
}
.foro-toolbar .toolbar-new{
  background: var(--brick);
  color: var(--paper-on-dark);
  border: none;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 11px 18px;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.foro-toolbar .toolbar-new:hover{
  background: var(--navy);
  color: var(--brick);
}

/* ----- Mid-page CTA banner (logged-out signup nudge) ----- */
.foro-cta-banner{
  margin: 56px 0 0;
  padding: 48px 56px;
  background: linear-gradient(95deg, var(--brick) 0%, #002b6b 100%);
  color: var(--paper-on-dark);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.foro-cta-banner::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--navy);
}
.foro-cta-banner::after{
  content: "";
  position: absolute; right: -80px; top: -40px;
  width: 320px; height: 320px;
  background: radial-gradient(circle at 50% 50%, rgba(255,209,0,.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.foro-cta-banner .eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--navy);
}
.foro-cta-banner .eyebrow::before{
  content: ""; width: 28px; height: 1px; background: var(--navy);
}
.foro-cta-banner h3{
  margin: 0 0 14px;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 44px; line-height: .98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  max-width: 22ch;
}
.foro-cta-banner h3 em{
  font-style: italic;
  color: var(--navy);
}
.foro-cta-banner p{
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245,237,224,.85);
  max-width: 50ch;
}
.foro-cta-banner .btn-cta{
  display: inline-flex; align-items: center; gap: 16px;
  padding: 18px 28px;
  background: var(--navy);
  color: var(--brick);
  text-decoration: none;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.foro-cta-banner .btn-cta:hover{
  background: var(--paper-on-dark);
  color: var(--brick);
}

/* ----- Pulso del cuaderno (stats section before footer) ----- */
.foro-pulso .foro-stats-strip{
  margin-top: 32px;
}

/* ----- Avatar image (uploaded photo) — works on every avatar size ----- */
.thread-avatar.avatar-img,
.nav .nav-user .av.avatar-img,
.perfil-card .av.avatar-img{
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent;       /* in case any text is inside */
  text-indent: -9999px;
  overflow: hidden;
}

/* ----- Post signature (below thread body in hilo.php) ----- */
.post-signature{
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  max-width: 60ch;
}
.post-signature p{
  margin: 0;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ----- Profile card — bigger avatar, cleaner layout ----- */
.perfil-card .perfil-id{
  display: flex; align-items: center; gap: 22px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.perfil-card .perfil-avatar-big,
.perfil-card .av{
  width: 128px; height: 128px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 44px;
  color: var(--paper-on-dark);
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.perfil-card .perfil-id-text{ min-width: 0; flex: 1; }

/* ----- Profile signature block (in profile card) ----- */
.perfil-signature{
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px dashed var(--rule);
}
.perfil-signature .sig-label{
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 8px;
}
.perfil-signature p{
  margin: 0;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(13,20,29,.78);
  max-width: 56ch;
  overflow-wrap: anywhere;
}

/* ----- Profile bio block (under profile card) ----- */
.perfil-bio{
  margin: 32px 0 0;
  padding: 24px 26px;
  background: var(--night-2);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brick);
}
.perfil-bio-label{
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brick);
  margin-bottom: 12px;
}
.perfil-bio p{
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(13,20,29,.82);
  max-width: 60ch;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* ----- Avatar preview block in perfil-editar.php ----- */
.perfil-avatar-preview-row .perfil-avatar-preview{
  display: flex; align-items: center; gap: 18px;
  margin: 4px 0 14px;
}
.perfil-avatar-preview-row .perfil-avatar-current{
  width: 88px; height: 88px;
  font-size: 30px;
}
.perfil-avatar-preview-row .perfil-avatar-actions{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ----- Inline link in club voice (mono uppercase, brick underline) ----- */
.auth-link{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brick);
  text-decoration: none;
  border-bottom: 1px solid var(--brick);
  padding-bottom: 3px;
}
.auth-link:hover{ color: var(--paper); border-color: var(--paper); }

/* ----- Field-level error helper ----- */
.field-error{
  display: block;
  margin-top: 6px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: #C8102E;
}

/* ----- Lede paragraph that sits above any list of fields ----- */
.section-lede{
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(13,20,29,.78);
  max-width: 56ch;
  text-wrap: pretty;
}

/* ----- Bullet list in club voice (used in nuevo-hilo, pendiente, etc.) ----- */
.tenets{
  list-style: none; padding: 0; margin: 28px 0 0;
  border-top: 1px solid var(--rule);
}
.tenets li{
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 18px;
  align-items: baseline;
}
.tenets li .num{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brick);
}
.tenets li strong{
  display: block;
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 18px;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 4px;
}
.tenets li span.body{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(13,20,29,.7);
}

/* =====================================================
   SINGLE THREAD VIEW (hilo.php)
   ── Reuses foro.php's .foro-grid + .thread cards.
   ── A few modifiers extend .thread for full-content render.
   ===================================================== */

/* Original post — featured thread card, brick left-rail.
   Card background matches the page header sand (#e8dfce / --night),
   the rule border + soft shadow do the lifting. */
.thread.thread-op{
  background: var(--night);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brick);
  padding: 32px 32px 30px;
  margin: 0 0 28px;
  border-bottom-width: 1px;
  box-shadow: 0 6px 22px rgba(26,20,16,.05);
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}
.thread.thread-op:hover{ background: var(--night); padding-left: 32px; } /* override .thread:hover slide */
.thread.thread-op .thread-avatar{
  width: 56px; height: 56px;
  font-size: 20px;
}
.thread.thread-op h4{
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  color: var(--paper);
  text-transform: none;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.thread.thread-op .thread-meta{
  margin-bottom: 12px;
}
.thread.thread-op .thread-meta .author-name{
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--paper);
}

/* Reply card — same sand-card treatment as the OP (and the sticky nav
   header) so each reply reads as its own elevated card on the page sand,
   instead of dissolving into the body. */
.thread.thread-reply{
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  padding: 22px 26px;
  margin: 0 0 14px;
  background: var(--night);
  box-shadow: 0 4px 14px rgba(26,20,16,.04);
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  align-items: flex-start;
}
.thread.thread-reply:hover{
  background: var(--night);
  padding-left: 26px;          /* override .thread:hover slide */
  border-left-color: var(--brick);
}
.thread.thread-reply:last-of-type{ margin-bottom: 0; }
.thread.thread-reply .thread-avatar{ width: 48px; height: 48px; }
.thread.thread-reply .thread-meta{
  align-items: center;
}
.thread.thread-reply .thread-meta .author-name{
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--paper);
}

/* Role badges shared between OP + replies */
.thread .thread-meta .role-mod,
.thread .thread-meta .role-admin{
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--brick);
  color: var(--brick);
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .22em;
  text-transform: uppercase;
}

/* Full body render inside a thread card */
.thread .thread-content{
  margin-top: 4px;
}
.thread .thread-content p{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(13,20,29,.82);
  max-width: 64ch;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.thread .thread-content p:last-child{ margin-bottom: 0; }
.thread.thread-op .thread-content p{
  font-size: 16px;
  line-height: 1.7;
  color: rgba(13,20,29,.85);
}

/* Replies divider — slim version between OP and reply stack */
.replies-header{
  display: flex; align-items: center; gap: 18px;
  margin: 32px 0 16px;
}
.replies-header .line{
  flex: 1; height: 1px;
  background: var(--rule);
}
.replies-header .label{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brick);
  flex-shrink: 0;
}
.replies-header .label .count{ color: var(--muted); margin-left: 8px; }

/* Reply composer — same skin as the rail-block.compose used on foro.php */
.thread-composer{
  margin-top: 32px;
  scroll-margin-top: 24px;
}
.thread-composer .rail-block{
  /* override default rail-block max-width if any was assumed */
  margin: 0;
}
.thread-composer textarea{
  width: 100%;
  min-height: 160px;
  padding: 14px 16px;
  background: var(--night);
  border: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper);
  resize: vertical;
  margin-bottom: 16px;
}
.thread-composer textarea:focus{
  outline: none;
  border-color: var(--brick);
}
.thread-composer .actions{
  display: flex; gap: 12px; justify-content: flex-end;
  flex-wrap: wrap;
}

/* Locked / pending / login-required notice — same compose-style block, lighter bg */
.thread-notice{
  margin-top: 32px;
  background: var(--night-2);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brick);
  padding: 26px 28px;
}
.thread-notice h3{
  margin: 0 0 8px;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--paper);
  letter-spacing: 0.01em;
}
.thread-notice p{
  margin: 0;
  font-size: 14px; line-height: 1.6;
  color: rgba(13,20,29,.78);
  max-width: 56ch;
}
.thread-notice .actions{
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 18px;
}

/* Side-rail author mini-card */
.rail-author-head{
  display: flex; gap: 14px; align-items: center;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.rail-author-head .thread-avatar{
  width: 52px; height: 52px;
  font-size: 18px;
}
.rail-author-head .who{ min-width: 0 }
.rail-author-head .who h4{
  margin: 0 0 4px;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 19px;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.rail-author-head .who .handle{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Crumbs in the section-head subtitle slot */
.hilo-crumbs{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.hilo-crumbs a{
  color: var(--brick);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.hilo-crumbs a:hover{ border-bottom-color: var(--brick); }
.hilo-crumbs .sep{ color: var(--rule-strong); margin: 0 8px }

/* Thread meta chip bar (replaces foro-stats-strip on hilo.php) */
.thread-meta-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 0;
}
.thread-meta-bar .chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--night-2);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}
.thread-meta-bar a.chip:hover{
  border-color: var(--brick);
  color: var(--brick);
}
.thread-meta-bar .chip-cat{
  background: var(--brick);
  color: var(--paper-on-dark);
  border-color: var(--brick);
  font-weight: 600;
}
.thread-meta-bar a.chip-cat:hover{
  background: var(--navy);
  color: var(--brick);
  border-color: var(--navy);
}
.thread-meta-bar .chip-pin{
  background: rgba(0,58,143,.06);
  border-color: var(--brick);
  color: var(--brick);
}
.thread-meta-bar .chip-warn{
  background: rgba(200,16,46,.08);
  border-color: rgba(200,16,46,.55);
  color: #C8102E;
}
.thread-meta-bar .chip-ok{
  background: rgba(46,160,67,.10);
  border-color: rgba(46,160,67,.55);
  color: #1b5028;
}
.thread-meta-bar .chip-live{
  background: rgba(255,209,0,.14);
  border-color: rgba(255,209,0,.7);
  color: #6b4f00;
}
.thread-meta-bar .chip-live::before{
  content: ""; width: 8px; height: 8px;
  background: #C8102E; border-radius: 50%;
  animation: chipPulse 1.6s ease-in-out infinite;
}
@keyframes chipPulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(200,16,46,0); }
}

/* Image gallery (OP + replies) */
.gallery{
  display: grid;
  gap: 10px;
  margin: 22px 0 4px;
  max-width: 100%;
}
.gallery-1col{ grid-template-columns: 1fr; }
.gallery-2col{ grid-template-columns: 1fr 1fr; }
.gallery-3col{ grid-template-columns: repeat(3, 1fr); }
.gallery-item{
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--night-3);
  border: 1px solid var(--rule);
}
.gallery-item img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.gallery-1col .gallery-item{
  aspect-ratio: auto;
  max-height: 720px;
}
.gallery-1col .gallery-item img{
  height: auto;
  max-height: 720px;
  object-fit: contain;
}
.gallery-item:hover img{ transform: scale(1.04); }

/* File picker — drop-zone style for new-thread + reply forms */
.field-hint{
  display: inline-block;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.file-drop{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: var(--night);
  border: 1px dashed var(--rule-strong);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
}
.file-drop:hover{ border-color: var(--brick); background: var(--night-3); }
.file-drop input[type=file]{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.file-drop-icon{
  font-size: 22px;
  flex-shrink: 0;
}
.file-drop-label{
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
  flex: 1;
}
.file-drop-hint{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}
.file-drop-compact{
  padding: 12px 14px;
  margin-bottom: 14px;
}
.file-drop-compact .file-drop-label{ font-size: 12px; }
.file-drop-compact .file-drop-icon{ font-size: 17px; }

.file-list{
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.file-list-item{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 6px 12px;
  background: var(--night-2);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--paper);
}
.file-list-item .name{ overflow-wrap: anywhere; }
.file-list-item .size{ color: var(--muted); flex-shrink: 0; }
.file-list-item.warn{
  background: rgba(200,16,46,.08);
  border-color: rgba(200,16,46,.4);
  color: #C8102E;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* =====================================================
   AUTH PAGES (login / registro / pendiente)  — uses .join-grid
   ===================================================== */

.auth-grid{ /* alias to join-grid for clarity in markup */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.auth-grid .auth-left p{
  font-size: 17px; line-height: 1.65;
  color: rgba(13,20,29,.78);
  max-width: 52ch;
  margin: 0 0 18px;
  text-wrap: pretty;
}
.auth-grid .auth-card{
  background: var(--night-2);
  border: 1px solid var(--rule);
  padding: 36px 36px 32px;
}
.auth-grid .auth-card h3{
  margin: 0 0 6px;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 28px;
  text-transform: uppercase;
  color: var(--paper);
}
.auth-grid .auth-card .lede{
  margin: 0 0 22px;
  font-size: 14px; line-height: 1.55;
  color: rgba(13,20,29,.7);
}
.auth-grid .auth-card .submit{ width: 100%; }
.auth-grid .auth-card .alt-action{
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =====================================================
   PROFILE (perfil.php) — uses mito-grid + timeline
   ===================================================== */

.perfil-card{
  position: relative;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.perfil-card .av{
  width: 96px; height: 96px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 36px;
  color: var(--paper-on-dark);
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.perfil-card .name{
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
  line-height: 1;
  margin: 0;
}
.perfil-card .handle{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.perfil-status{
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .26em;
  text-transform: uppercase;
}
.perfil-status.pending{
  background: rgba(255,209,0,.18);
  border: 1px solid var(--navy);
  color: #6b4f00;
}
.perfil-status.active{
  background: rgba(46,160,67,.12);
  border: 1px solid #2ea043;
  color: #1b5028;
}
.perfil-status.banned{
  background: rgba(200,16,46,.12);
  border: 1px solid #C8102E;
  color: #6e0d1d;
}
.perfil-stats{
  display: flex; gap: 36px;
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.perfil-stats > div{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
.perfil-stats .v{
  display: block;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 32px; line-height: 1;
  color: var(--paper);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.perfil-stats .v.r{ color: var(--brick); }
.perfil-actions{
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 24px;
}

/* Activity feed reuses .timeline pattern */
.perfil-feed h4{
  margin: 0 0 18px;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.perfil-feed h4:not(:first-child){ margin-top: 56px; }
.perfil-feed .feed-item{
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.perfil-feed .feed-item:last-child{ border-bottom: none; }
.perfil-feed .feed-item .meta{
  display: flex; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.perfil-feed .feed-item .meta .cat{ color: var(--brick); }
.perfil-feed .feed-item h5{
  margin: 0 0 6px;
  font-family: var(--display);
  font-style: italic; font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--paper);
  line-height: 1.25;
  text-transform: none;
}
.perfil-feed .feed-item h5 a{
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.perfil-feed .feed-item h5 a:hover{ border-bottom-color: var(--brick); }
.perfil-feed .feed-item p{
  margin: 0;
  font-size: 13px; line-height: 1.55;
  color: rgba(13,20,29,.65);
  max-width: 60ch;
  overflow-wrap: anywhere;
}

/* =====================================================
   NAV — login state
   ===================================================== */

.nav .nav-actions{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.nav .nav-user{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  background: rgba(13,20,29,.4);
  border: 1px solid rgba(245,237,224,.25);
  padding: 6px 14px 6px 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-on-dark);
  backdrop-filter: blur(10px);
  transition: border-color .2s;
}
.nav .nav-user:hover{ border-color: var(--brick); }
.nav .nav-user .av{
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 12px;
  color: var(--paper-on-dark);
}
.nav .nav-login{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--paper-on-dark);
  text-decoration: none;
  background: rgba(13,20,29,.4);
  border: 1px solid rgba(245,237,224,.25);
  padding: 9px 16px;
  backdrop-filter: blur(10px);
  transition: border-color .2s;
}
.nav .nav-login:hover{ border-color: var(--brick); }

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 900px){

  /* Auth grid → stacked */
  .auth-grid{
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .auth-grid .auth-left p{ font-size: 14.5px; }
  .auth-grid .auth-card{ padding: 24px 20px; }
  .auth-grid .auth-card h3{ font-size: 22px; }

  /* Single-thread layout */
  .thread.thread-op{
    padding: 22px 18px;
    grid-template-columns: 44px minmax(0,1fr);
    gap: 14px;
    margin-bottom: 22px;
  }
  .thread.thread-op .thread-avatar{ width: 44px; height: 44px; font-size: 16px; }
  .thread.thread-op h4{ font-size: 22px; line-height: 1.18; margin-bottom: 12px; }
  .thread.thread-op .thread-content p{ font-size: 15px; line-height: 1.6; }
  .thread.thread-reply{
    grid-template-columns: 36px minmax(0,1fr);
    gap: 14px;
    padding: 20px 0;
  }
  .thread.thread-reply .thread-avatar{ width: 36px; height: 36px; font-size: 14px; }
  .thread .thread-content p{ font-size: 14px; line-height: 1.55; }
  .replies-header{ margin: 22px 0 12px; }
  .thread-composer{ margin-top: 22px; }
  .thread-composer textarea{ font-size: 16px; min-height: 140px; }
  .thread-notice{ padding: 22px 18px; margin-top: 22px; }
  .thread-notice h3{ font-size: 20px; }
  .rail-author-head .thread-avatar{ width: 44px; height: 44px; font-size: 16px; }
  .rail-author-head .who h4{ font-size: 16px; }

  /* Chip bar / gallery / file inputs on mobile */
  .thread-meta-bar{ gap: 6px; margin-top: 22px; }
  .thread-meta-bar .chip{
    padding: 6px 10px;
    font-size: 9.5px;
    letter-spacing: .14em;
  }
  .gallery{ gap: 6px; margin: 16px 0 2px; }
  .gallery-2col,
  .gallery-3col{ grid-template-columns: 1fr 1fr; }
  .gallery-1col .gallery-item,
  .gallery-1col .gallery-item img{ max-height: 480px; }
  .file-drop{ flex-wrap: wrap; padding: 14px; gap: 10px; }
  .file-drop-hint{ width: 100%; text-align: left; }
  .file-drop-compact{ padding: 12px; }
  .file-list-item{ font-size: 10px; }

  /* Profile / signatures on mobile */
  .perfil-card .av,
  .perfil-card .perfil-avatar-big{ width: 88px; height: 88px; font-size: 30px; }
  .perfil-card .perfil-id{ gap: 14px; }
  .perfil-bio{ padding: 18px 18px; }
  .perfil-bio p{ font-size: 14px; line-height: 1.55; }
  .perfil-signature p{ font-size: 13px; }
  .post-signature p{ font-size: 11.5px; line-height: 1.5; }
  .perfil-avatar-preview-row .perfil-avatar-current{ width: 64px; height: 64px; font-size: 22px; }

  /* Stats strip → 2x2 on mobile */
  .foro-stats-strip{ grid-template-columns: 1fr 1fr; }
  .foro-stats-strip .cell{
    padding: 18px 16px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .foro-stats-strip .cell:nth-child(2n){ border-right: none; }
  .foro-stats-strip .cell:nth-last-child(-n+2){ border-bottom: none; }
  .foro-stats-strip .cell .v{ font-size: 32px; margin-bottom: 6px; }
  .foro-stats-strip .cell .k{ font-size: 9px; letter-spacing: .2em; }
  .foro-pulso .foro-stats-strip{ margin-top: 22px; }

  /* Hero CTAs stack full-width.
     Switching the container to column instead of relying on flex-basis 100%
     because shrink=1 was letting both buttons squeeze into one row, which
     made the longer label ("Iniciar sesión para responder") wrap to two
     lines while the short one stayed at one. */
  .foro-hero-cta{ margin-top: 22px; gap: 10px; flex-direction: column; align-items: stretch; }
  .foro-hero-cta .btn-primary,
  .foro-hero-cta .btn-ghost{ flex: 0 0 auto; width: 100%; min-width: 0; }

  /* Hero + toolbar — same tight spacing on mobile */
  .foro-hero .foro-toolbar{ margin: 0 -18px; }
  .foro-section-tight{ padding-top: 28px; }

  /* Sticky toolbar → un-sticky and stack on mobile */
  .foro-toolbar{
    position: relative;
    margin: 0 -18px 24px;
    padding: 12px 18px;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .foro-toolbar .toolbar-tabs{ margin: 0 -18px; padding: 0 18px; }
  .foro-toolbar .toolbar-search{ min-width: 0; }
  .foro-toolbar .toolbar-search input{ font-size: 16px; padding: 10px 12px 10px 32px; }
  .foro-toolbar .toolbar-sort{ font-size: 11px; padding: 10px 12px; }
  .foro-toolbar .toolbar-new{
    text-align: center;
    padding: 12px 18px;
    font-size: 11px;
  }

  /* Version chip group → wraps tightly on phones */
  .version-grid{ gap: 6px; }
  .version-chip{ padding: 9px 13px; font-size: 10px; letter-spacing: .14em; }
  .price-input-wrap input{ font-size: 16px; padding: 10px 12px; }
  .price-currency{ font-size: 18px; padding: 0 14px; }

  /* Field group container on mobile */
  .field-group{ padding: 18px 16px 4px; }
  .field-group-label{ font-size: 14px; }

  /* Price tag in hilo.php section-head — sits below title on phones */
  .thread-price-tag{
    min-width: 0;
    padding: 14px 18px;
  }
  .thread-price-tag .price-now{ font-size: 32px; }
  .thread-price-tag .price-was{ font-size: 11px; margin-bottom: 4px; }
  .thread-price-tag .price-discount{ font-size: 9px; margin-top: 8px; padding: 3px 8px; }
  .thread-price-tag .price-meta{ font-size: 8.5px; margin-top: 10px; padding-top: 10px; }

  /* Price badge in foro.php — re-flow under the meta line on phones */
  .thread.has-price .thread-body{ padding-right: 0; }
  .thread-price-badge{
    position: static;
    flex-direction: row;
    align-items: center;
    margin: 0 0 10px;
  }
  .thread-price-badge .now{ font-size: 18px; padding: 5px 11px; }
  .thread-price-badge .was{ font-size: 10px; }
  .thread-price-badge .off{ font-size: 8.5px; }

  /* Bids list on mobile */
  .bid-item-head{ grid-template-columns: 32px 1fr auto; gap: 10px; }
  .bid-item .bid-avatar{ width: 32px; height: 32px; font-size: 12px; }
  .bid-amount{ font-size: 18px; }
  .bid-who .bid-name{ font-size: 13px; }
  .bid-pill, .bid-btn{ font-size: 8.5px; letter-spacing: .18em; padding: 3px 8px; }

  /* Nav inbox badge */
  .nav .nav-inbox{ width: 36px; height: 36px; font-size: 16px; }
  .nav .nav-inbox-count{ min-width: 18px; height: 18px; font-size: 9px; top: -5px; right: -5px; }

  /* Inbox layout */
  .inbox-tabs{ overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin: 0 -18px 22px; padding: 0 18px; }
  .inbox-tabs::-webkit-scrollbar{ display: none; }
  .msg-card-head{ grid-template-columns: 36px minmax(0,1fr) auto; padding: 14px 16px; gap: 12px; }
  .msg-card .msg-avatar{ width: 32px; height: 32px; font-size: 12px; }
  .msg-card-name{ font-size: 14.5px; }
  .msg-card-snippet{ font-size: 12.5px; }
  .msg-card-time{ font-size: 9px; }
  .msg-card-body{ padding: 6px 16px 22px; }
  .msg-card-body p{ font-size: 14px; line-height: 1.55; }

  /* Mid-page CTA banner → stacked */
  .foro-cta-banner{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 32px 22px;
    margin-top: 36px;
  }
  .foro-cta-banner h3{ font-size: 28px; max-width: 100%; }
  .foro-cta-banner p{ font-size: 13.5px; max-width: 100%; }
  .foro-cta-banner .btn-cta{
    width: 100%;
    justify-content: center;
    padding: 16px 22px;
    font-size: 13px;
  }

  /* Profile */
  .perfil-card .av{ width: 72px; height: 72px; font-size: 28px; }
  .perfil-card .name{ font-size: 24px; }
  .perfil-stats{ gap: 22px; }
  .perfil-stats .v{ font-size: 24px; }
  .perfil-feed h4{ font-size: 18px; }
  .perfil-feed h4:not(:first-child){ margin-top: 36px; }
  .perfil-feed .feed-item h5{ font-size: 16px; }

  /* Nav login */
  .nav .nav-user .av{ width: 26px; height: 26px; font-size: 10px; }
  .nav .nav-login,
  .nav .nav-user{ padding: 6px 10px; font-size: 9px; letter-spacing: .14em; }

  /* Tenets list */
  .tenets li{ grid-template-columns: 28px 1fr; gap: 12px; padding: 12px 0; }
  .tenets li strong{ font-size: 16px; }
}

/* =====================================================
   Inline bid flash — solid green/red bar near the bid form.
   ===================================================== */
.bid-flash{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  margin: 0 0 16px;
  border-radius: 3px;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 16px; line-height: 1.3;
  letter-spacing: .005em;
  color: #fff;
  box-shadow: 0 6px 18px rgba(26,20,16,.12);
  animation: bid-flash-in .35s cubic-bezier(.2,.7,.2,1) both;
}
.bid-flash-icon{
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  color: #fff;
  font-family: var(--mono); font-weight: 800; font-size: 15px;
  line-height: 1;
}
.bid-flash-msg{ flex: 1; min-width: 0; }
.bid-flash-success{
  background: linear-gradient(135deg, #2fa84a 0%, #1f7a36 100%);
}
.bid-flash-error{
  background: linear-gradient(135deg, #d9263c 0%, #a01024 100%);
}

@keyframes bid-flash-in{
  from{ opacity: 0; transform: translateY(-6px); }
  to  { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .bid-flash{ animation: none; }
}

/* =========================================================
   Garage match — soft green tint on thread rows whose
   bike_versions overlap with whatever the viewer keeps in
   their garage (user_bikes + legacy users.bike_model).
   Reads "this part fits a bike I actually own" at a glance.
   ========================================================= */
.thread.matches-garage{
  /* Layer the green tint over the base card fill so the topo backdrop
     never shows through the right-hand transparent end of the gradient. */
  background:
    linear-gradient(90deg, rgba(42,143,58,.18) 0%, rgba(42,143,58,.06) 60%, transparent 100%),
    var(--night-2);
  border-left: 3px solid #2a8f3a;
  padding-left: 14px;
  position: relative;
}
/* Compatibility chip — rendered inline at the start of .thread-meta so it
   always sits in the same place (just before the category) regardless of
   whether the card also shows a price badge or any other right-side item. */
.compatible-chip{
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  background: #2a8f3a;
  color: #fff;
  border-radius: 2px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.thread.pinned .compatible-chip{
  /* Keep contrast against the navy pinned background. */
  background: #FFD100; color: var(--brick);
}
@media (max-width: 720px){
  .compatible-chip{ font-size: 9px; padding: 2px 6px; letter-spacing: .1em; }
}

/* =========================================================
   Sold (Vendido) badges — foro.php overview cards.
   Listing's price stays visible but visually retires.
   ========================================================= */
.thread-price-badge.is-sold .now{
  background: #C8102E;
  color: #fff;
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.45);
  text-decoration-thickness: 2px;
}
.thread-price-badge .sold{
  display: inline-block;
  padding: 3px 10px;
  background: #C8102E; color: #fff;
  font-family: var(--mono); font-size: 10px; letter-spacing: .26em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.thread.is-sold{
  opacity: .82;
  /* Same trick — keep the warm-cream card fill underneath the red wash. */
  background:
    linear-gradient(90deg, rgba(200,16,46,.06) 0%, transparent 60%),
    var(--night-2);
}
.thread.is-sold:hover{ opacity: 1; }

/* Collapse the hero CTA wrapper when it has no buttons (e.g. active user
   on a non-locked thread now has no Responder/Volver). Otherwise it leaves
   visible padding under the title. */
.foro-hero-cta:empty{
  display: none;
}

/* =========================================================
   mensajes.php — inbox / sent / letter view.
   The page renders a stack of "envelope" rows that expand into
   a paper letter when clicked. The full set of classes used by
   the template lives below.
   ========================================================= */

/* ---- Top stats strip ---- */
.foro-stats-strip{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin-bottom: 24px;
  background: var(--night-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.foro-stats-strip .cell{
  padding: 16px 20px;
  border-right: 1px dashed var(--rule);
}
.foro-stats-strip .cell:last-child{ border-right: 0; }
.foro-stats-strip .lbl,
.foro-stats-strip .info-label{
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.foro-stats-strip .v,
.foro-stats-strip .num{
  font-family: var(--display); font-style: italic; font-weight: 800;
  font-size: 28px; line-height: 1; color: var(--paper);
}

/* ---- Toolbar (Recibidos / Enviados tabs) ---- */
.foro-toolbar.inbox-toolbar{
  display: flex; gap: 4px;
  margin-bottom: 24px;
  padding: 6px;
  background: var(--night-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.foro-toolbar.inbox-toolbar .toolbar-tab{
  padding: 9px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none;
  color: var(--muted);
  border-radius: 3px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, color .15s;
}
.foro-toolbar.inbox-toolbar .toolbar-tab:hover{ color: var(--paper); }
.foro-toolbar.inbox-toolbar .toolbar-tab.active{
  background: var(--paper); color: var(--paper-on-dark);
}
.foro-toolbar.inbox-toolbar .toolbar-tab .count{ opacity: .55; font-weight: 400; }

/* ---- Empty state ---- */
.inbox-empty{
  padding: 48px 24px;
  text-align: center;
  background: var(--night-2);
  border: 1px dashed var(--rule-strong);
  border-radius: 4px;
  color: var(--muted);
}
.inbox-empty-icon{
  display: inline-block;
  font-size: 42px; line-height: 1;
  color: var(--brick);
  margin-bottom: 12px;
}
.inbox-empty-lede{
  margin: 0 0 6px;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 22px; color: var(--paper);
}
.inbox-empty .desc{
  font-size: 14px; line-height: 1.5; margin: 0 auto; max-width: 36em;
}

/* ---- Letter list (envelope stack) ---- */
.msg-list{ list-style: none; margin: 0; padding: 0; }

.msg-letter{
  position: relative;
  background: var(--night-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.msg-letter:hover{
  border-color: var(--rule-strong);
  box-shadow: 0 4px 12px rgba(26,20,16,.06);
}
.msg-letter.is-unread{
  background: var(--night);
  border-color: var(--brick);
  box-shadow: 0 4px 14px rgba(0,58,143,.08);
}
.msg-letter.is-open{
  border-color: var(--brick);
  background: var(--night);
}

/* Stamp = clickable envelope header */
.msg-letter-stamp{
  display: grid;
  grid-template-columns: 56px 56px 1fr auto;
  align-items: center; gap: 16px;
  padding: 14px 18px;
  text-decoration: none; color: inherit;
  position: relative;
}
.msg-letter.is-open .msg-letter-stamp{
  border-bottom: 1px dashed var(--rule);
}

.msg-letter-new{
  position: absolute; top: 8px; right: 12px;
  padding: 2px 8px;
  background: var(--brick); color: var(--paper-on-dark);
  font-family: var(--mono); font-size: 9px; letter-spacing: .26em;
  text-transform: uppercase;
  border-radius: 2px;
}

.stamp-frame{
  width: 56px; height: 56px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong);
  background:
    repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,58,143,.04) 4px 8px),
    var(--night-2);
  font-family: var(--mono); text-align: center;
  flex-shrink: 0;
}
.msg-letter.is-unread .stamp-frame{ border-color: var(--brick); }
.stamp-num{
  display: block;
  font-size: 9.5px; letter-spacing: .14em;
  color: var(--brick); font-weight: 700;
}
.stamp-dir{
  display: block;
  font-size: 8px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted);
  margin-top: 2px;
}

.msg-letter-avatar{
  width: 56px; height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}

.msg-letter-meta{ min-width: 0; }
.msg-letter-name{
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 18px; color: var(--paper);
  margin-bottom: 2px;
  letter-spacing: -.005em;
}
.msg-letter.is-unread .msg-letter-name{ color: var(--brick); }
.msg-letter-snippet{
  font-size: 13px; line-height: 1.4;
  color: rgba(26,20,16,.72);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.msg-letter-thread{
  margin-top: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
}

.msg-letter-time{
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px;
  font-family: var(--mono); white-space: nowrap;
}
.msg-letter-time .time-ago{
  font-size: 10px; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}
.msg-letter-time .time-abs{
  font-size: 11px; font-weight: 600;
  color: var(--paper);
}

/* Letter body (paper revealed on open) */
.msg-letter-body{
  padding: 18px 22px 24px;
  background:
    linear-gradient(180deg, rgba(0,58,143,.03) 0%, transparent 40%),
    var(--night-2);
}
.msg-letter-paper{
  background: #fbf6ec;
  border: 1px solid var(--rule);
  padding: 24px 28px;
  position: relative;
  box-shadow: 0 6px 18px rgba(26,20,16,.06);
}
.msg-letter-paper::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(transparent 27px, rgba(26,20,16,.05) 28px);
  background-size: 100% 28px;
  pointer-events: none;
  opacity: .35;
}

.paper-head{
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
}
.paper-from{ color: var(--paper); }
.paper-from a{ color: var(--brick); text-decoration: none; }
.paper-from a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.paper-date{ color: var(--muted); }

.paper-body{
  font-size: 15px; line-height: 1.65;
  color: var(--paper);
  font-family: var(--body);
}
.paper-body p{ margin: 0 0 14px; }
.paper-body p:last-child{ margin: 0; }

.paper-foot{
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase;
}
.paper-foot .foot-label{ color: var(--muted); }
.paper-foot .auth-link{
  color: var(--brick); text-decoration: none;
  border-bottom: 1px dashed var(--brick);
  padding-bottom: 1px;
}
.paper-foot .auth-link:hover{ border-bottom-style: solid; }

/* ---- "Mensaje enviado" inline info row ---- */
.msg-sent-info{
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(42,143,58,.08);
  border-left: 3px solid #2a8f3a;
  font-size: 13.5px; line-height: 1.5;
  color: var(--paper);
}

/* ---- Sidebar: cifras / contactos ---- */
.inbox-summary-list{
  list-style: none; margin: 0; padding: 0;
}
.inbox-summary-list li{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase;
}
.inbox-summary-list li:last-child{ border-bottom: 0; }
.inbox-summary-list .lbl{ color: var(--muted); }
.inbox-summary-list .val{
  color: var(--paper); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.inbox-summary-list .val.r{ color: var(--brick); }

.contact-list{ list-style: none; margin: 0; padding: 0; }
.contact-item{
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--rule);
  text-decoration: none; color: inherit;
}
.contact-item:last-child{ border-bottom: 0; }
.contact-item:hover .contact-name{ color: var(--brick); }
.contact-avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
}
.contact-meta{ min-width: 0; }
.contact-name{
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: 14px;
  transition: color .15s;
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contact-when{
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--muted); text-transform: uppercase;
}
.contact-arrow{
  font-family: var(--mono); color: var(--muted);
}

/* ---- Section padding modifiers used on mensajes ---- */
.foro-section.foro-section-tight{
  padding-top: 28px; padding-bottom: 28px;
}
.foro-section.foro-pulso{
  padding-top: 32px; padding-bottom: 32px;
  background: var(--night-2);
}

@media (max-width: 720px){
  .msg-letter-stamp{
    grid-template-columns: 48px 48px 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
  }
  .msg-letter-time{
    grid-column: 1 / -1;
    flex-direction: row; justify-content: flex-start; gap: 10px;
    padding-top: 4px; border-top: 1px dashed var(--rule);
    align-items: baseline;
  }
  .stamp-frame, .msg-letter-avatar{ width: 48px; height: 48px; }
  .msg-letter-paper{ padding: 18px 18px; }
  .paper-head{ flex-direction: column; gap: 4px; }
}

/* =========================================================
   Breadcrumb nav pills — used on hilo.php, mensajes.php,
   and any page that calls render_crumbs() in helpers.php.
   The trail renders as a row of dark pill-shaped chips with
   a slash separator and a brick-coloured "current" pill.
   ========================================================= */
.page-crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-bottom: 18px;
}
.page-crumb-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: var(--night-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
  transition: border-color .2s, color .2s, background .2s;
}
.page-crumb-back:hover{
  color: var(--brick);
  border-color: var(--brick);
  background: var(--night-3);
}
.page-crumb-back-arrow{
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
}
.page-crumb-back-label strong{
  font-weight: 600;
  color: var(--brick);
  letter-spacing: .22em;
}
.page-crumb-back:hover .page-crumb-back-label strong{ color: var(--paper); }

.page-crumb-trail{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
}
.page-crumb-item{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.page-crumb-link,
.page-crumb-current{
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-crumb-link{
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.page-crumb-link:hover{
  color: var(--paper);
  border-color: var(--brick);
  background: var(--night-3);
}
.page-crumb-current{
  background: var(--brick);
  border-color: var(--brick);
  color: var(--paper-on-dark, #fff);
}
.page-crumb-sep{
  color: var(--rule-strong);
  font-family: var(--mono);
  font-size: 11px;
  margin: 0 2px;
  opacity: .65;
}

@media (max-width: 720px){
  .page-crumbs{ gap: 10px 12px; margin-bottom: 14px; }
  .page-crumb-back{
    padding: 6px 12px 6px 10px;
    font-size: 9px; letter-spacing: .16em;
  }
  .page-crumb-link,
  .page-crumb-current{
    padding: 5px 10px;
    font-size: 9px;
    letter-spacing: .16em;
    max-width: 60vw;
  }
  .page-crumb-trail{ gap: 4px 2px; }
}

/* On phones, the back-pill already names the parent and the page <h2>
   sits directly below — so the parent trail + truncated current pill is
   redundant. Hide the trail when a back-pill is present so the hero
   only shows one compact row. */
@media (max-width: 560px){
  .page-crumbs:has(> .page-crumb-back) .page-crumb-trail{ display: none; }
}

/* =========================================================
   Topic page (hilo.php) — collapse the gap below the title
   so the underline of the section-head sits flush against
   the next section instead of leaving a 80px breath.
   ========================================================= */
.section.hilo-hero{ padding-bottom: 0; }
.section.hilo-hero .section-head{ margin-bottom: 0; }
.section.hilo-hero + .section.foro-section{ padding-top: 0; }

@media (max-width: 720px){
  .section.hilo-hero + .section.foro-section{ padding-top: 0; }
}

/* =========================================================
   Lightbox — multi-image gallery viewer.
   Activated by JS on .gallery-item clicks when the parent
   gallery contains 2+ items. The same overlay is reused for
   every gallery on the page.
   ========================================================= */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 6, 4, .92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 56px;
  opacity: 0;
  transition: opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.lightbox.is-open{
  display: flex;
  opacity: 1;
}
.lightbox__stage{
  position: relative;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__img{
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  display: block;
  background: var(--night-3, #181410);
  border: 1px solid var(--rule, rgba(255,255,255,.12));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(20,16,14,.8);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s, color .2s;
}
.lightbox__btn:hover{
  background: var(--brick, #c8102e);
  border-color: var(--brick, #c8102e);
  color: #fff;
}
.lightbox__btn--prev{ left: -64px; }
.lightbox__btn--next{ right: -64px; }
.lightbox__close{
  position: absolute;
  top: -56px; right: -8px;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(20,16,14,.8);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s, color .2s;
}
.lightbox__close:hover{
  background: var(--brick, #c8102e);
  border-color: var(--brick, #c8102e);
}
.lightbox__counter{
  position: absolute;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}
body.lightbox-open{ overflow: hidden; }

/* On galleries with multiple images, hint that clicking opens the lightbox */
.gallery[data-multi="1"] .gallery-item{ cursor: zoom-in; }
.gallery[data-multi="1"] .gallery-item::after{
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(20,16,14,.78) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/><line x1='11' y1='8' x2='11' y2='14'/><line x1='8' y1='11' x2='14' y2='11'/></svg>") no-repeat center / 14px 14px;
  border: 1px solid rgba(255,255,255,.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.gallery[data-multi="1"] .gallery-item:hover::after{ opacity: 1; }

@media (max-width: 720px){
  .lightbox{ padding: 18px; }
  .lightbox__btn{ width: 40px; height: 40px; font-size: 20px; }
  .lightbox__btn--prev{ left: 6px; }
  .lightbox__btn--next{ right: 6px; }
  .lightbox__close{ top: 6px; right: 6px; }
  .lightbox__counter{ bottom: 8px; }
  .lightbox__img{ max-height: calc(100vh - 80px); }
}

/* =========================================================
   Compose rail card (foro.php side rail) — radio chips that
   let the user pre-select a category before clicking
   "Abrir hilo nuevo →". Mirrors the inline styles on
   tenere.php so both pages share the same look.
   ========================================================= */
.compose-form{ margin: 0; }
.compose-cats{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 14px 0 18px;
}
.compose-cats label.compose-cat{
  position: relative;
  display: inline-block;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid var(--rule);
  color: rgba(26,20,16,.78);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  user-select: none;
}
.compose-cats label.compose-cat:hover{
  border-color: var(--brick);
  color: var(--brick);
}
.compose-cats label.compose-cat input{
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
  margin: 0;
}
.compose-cats label.compose-cat:has(input:checked){
  background: var(--brick);
  border-color: var(--brick);
  color: var(--paper-on-dark);
}
.compose-cats label.compose-cat:focus-within{
  outline: 2px solid var(--brick);
  outline-offset: 2px;
}
.rail-block.compose .compose-btn{
  display: inline-flex;
  width: 100%;
  align-items: center; justify-content: center;
  text-decoration: none;
  border: none;
}
.compose-auth-actions{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 4px;
}
.compose-btn--ghost{
  background: transparent;
  color: var(--brick);
  border: 1px solid var(--brick);
}
.compose-btn--ghost:hover{
  background: var(--brick);
  color: var(--paper-on-dark);
}
.compose-auth-note{
  margin: 14px 0 18px;
  color: var(--muted);
  font-size: 12.5px; line-height: 1.5;
}

@media (max-width: 720px){
  .compose-cats{ gap: 5px; margin: 12px 0 14px; }
  .compose-cats label.compose-cat{
    font-size: 8px;
    padding: 4px 8px;
    letter-spacing: .14em;
  }
}

/* =========================================================
   Mercadillo · sale-type + shipping pills (v9).
   Used on hilo.php meta bar, foro.php card footer, and
   the rail-block-price card on the topic page.
   ========================================================= */

/* Topic page meta bar: sale type + shipping chips */
.thread-meta-bar .chip-sale-auction{
  background: rgba(255,209,0,.12);
  border-color: rgba(255,209,0,.65);
  color: #6b4f00;
  font-weight: 600;
}
.thread-meta-bar .chip-sale-fixed{
  background: rgba(0,58,143,.06);
  border-color: rgba(0,58,143,.55);
  color: var(--navy, #003A8F);
  font-weight: 600;
}
.thread-meta-bar .chip-ship{
  background: rgba(46,160,67,.10);
  border-color: rgba(46,160,67,.45);
  color: #1b5028;
  font-weight: 600;
}

/* Foro card footer: small sale + ship pills */
.r-pill.r-sale-auction{
  border-color: rgba(255,209,0,.6);
  color: #6b4f00;
  background: rgba(255,209,0,.10);
  font-weight: 600;
}
.r-pill.r-sale-fixed{
  /* Subtle: same chrome as a default reaction pill so "Fijo" doesn't shout.
     Hard-coded navy text bypasses the global --navy token (yellow on the
     public site) so the label still reads clearly. */
  border-color: var(--rule);
  color: rgba(0,58,143,.85);
  background: rgba(0,58,143,.04);
  font-weight: 600;
}

/* Comment-count pill on the foro list — same outline as the other pills,
   but transparent inside so it reads as an icon + number rather than a chip. */
.r-pill.r-comments{
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--paper-soft, rgba(26,20,16,.78));
  font-weight: 600;
}
.r-pill.r-ship{
  border-color: rgba(46,160,67,.5);
  color: #1b5028;
  background: rgba(46,160,67,.08);
  font-weight: 600;
}

/* =========================================================
   Premium-socio name pill — rendered around the display name
   in posts, replies, overviews, inbox rows and the profile
   hero via premium_name() / premium_name_prefixed() helpers.
   Yellow background, navy text — built to read at a glance
   on both dark and light surfaces.
   ========================================================= */
.premium-name{
  display: inline-block;
  padding: 1px 7px 2px;
  border-radius: 999px;
  background: #FFD100;             /* Yamaha racing yellow */
  color: #003A8F !important;       /* Sonauto navy — overrides parent link colour */
  border: 1px solid #e5b900;
  font-weight: 600;
  letter-spacing: inherit;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.premium-name::after{
  content: " ★";
  margin-left: 1px;
  letter-spacing: 0;
  color: #003A8F;
  font-size: .9em;
}
a:hover .premium-name,
a:focus-visible .premium-name{
  background: #FFE45C;
  border-color: #d4a800;
}

/* =========================================================
   Edit-thread CTA — sits next to "Eliminar hilo" in the OP
   toolbar. Same shape as .post-delete, brick-coloured hover
   so it reads as a constructive action.
   ========================================================= */
.post-edit{
  display: inline-block;
  background: none;
  border: 1px solid var(--rule);
  color: var(--muted);
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  margin-left: auto;
}
.post-edit:hover{
  border-color: var(--brick, #C8102E);
  color: var(--brick, #C8102E);
  background: rgba(0,58,143,.04);
}
/* When both edit + delete are present, the edit link should NOT push
   delete off — they share the right side and delete keeps its own
   margin-left:auto via .post-toolbar-end. */
.post-toolbar .post-edit + .post-toolbar-end{ margin-left: 8px; }

/* =========================================================
   Existing attachments — shown in edit mode so the user can
   tick which images to remove. Click toggles the checkbox;
   the overlay flips between "Conservar" and "Eliminar".
   ========================================================= */
.existing-atts{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.existing-att{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule, rgba(255,255,255,.12));
  background: var(--night-3, #181410);
  cursor: pointer;
  user-select: none;
}
.existing-att input{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.existing-att img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .2s, transform .2s;
}
.existing-att-overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 8px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}
.existing-att-keep{ opacity: .75; }
.existing-att-remove{ display: none; color: #FFD100; font-weight: 600; }
.existing-att:has(input:checked) img{
  filter: grayscale(.85) brightness(.55);
  transform: scale(.97);
}
.existing-att:has(input:checked){
  border-color: #C8102E;
  outline: 2px solid #C8102E;
  outline-offset: -1px;
}
.existing-att:has(input:checked) .existing-att-keep{ display: none; }
.existing-att:has(input:checked) .existing-att-remove{ display: inline-block; }
.existing-att:has(input:focus-visible){
  outline: 2px solid var(--brick, #C8102E);
  outline-offset: 2px;
}

/* Star fallback (legacy nav use only — premium_star() still exists). */
.premium-star{
  display: inline-block;
  margin-left: 4px;
  color: #FFD100;
  font-size: 0.95em;
  line-height: 1;
  vertical-align: baseline;
  -webkit-user-select: none;
  user-select: none;
}

/* Rail-block price card · shipping line on the topic page */
.rail-block-price__ship{
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--rule, rgba(255,255,255,.12));
  background: var(--night-3, rgba(255,255,255,.02));
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper, #1a1410);
}
.rail-block-price__ship span:first-child{
  font-size: 14px; letter-spacing: 0;
}

/* =========================================================
   Mercadillo filter rail (foro.php sidebar) — bike vs. parts
   plus parts categories. Stays in the same rail-block style
   as the rest of the sidebar but uses chips instead of a list.
   ========================================================= */
.filter-hint{
  margin: 0 0 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter-chips{
  display: flex; flex-wrap: wrap; gap: 6px;
}
.filter-chip{
  display: inline-flex; align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,.02);
  color: var(--paper-soft, rgba(26,20,16,.78));
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-chip:hover,
.filter-chip:focus-visible{
  background: #FFD100;
  color: #003A8F;
  border-color: #003A8F;
  outline: none;
}
.filter-chip.is-active{
  background: #003A8F;
  color: #FFD100;
  border-color: #003A8F;
}
.filter-chips--small .filter-chip{
  font-size: 10px;
  padding: 4px 8px;
  letter-spacing: .1em;
}

/* =========================================================
   Sold-toggle sidebar card (hilo.php) — sits under the price
   card. Two states: "Disponible" (green hint, primary navy
   button) and "Vendido" (red hint, ghost button to reactivate).
   ========================================================= */
.rail-block-sold-toggle .sold-toggle__state{
  margin: 0 0 6px;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 26px; line-height: 1;
  letter-spacing: -0.005em;
}
.rail-block-sold-toggle.is-active .sold-toggle__state{
  color: #1b5028; /* dark green */
}
.rail-block-sold-toggle.is-sold .sold-toggle__state{
  color: #C8102E; /* brick red */
}
.sold-toggle__hint{
  margin: 0 0 14px;
  font-size: 13px; line-height: 1.5;
  color: var(--paper-soft, rgba(26,20,16,.72));
}
.sold-toggle__btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 2px solid currentColor;
  background: transparent;
  font-family: var(--display);
  font-style: italic; font-weight: 800;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sold-toggle__btn.is-mark-sold{
  background: #C8102E;
  color: #fff;
  border-color: #C8102E;
}
.sold-toggle__btn.is-mark-sold:hover,
.sold-toggle__btn.is-mark-sold:focus-visible{
  background: #fff;
  color: #C8102E;
  outline: none;
}
.sold-toggle__btn.is-reopen{
  background: transparent;
  color: #003A8F;
  border-color: #003A8F;
}
.sold-toggle__btn.is-reopen:hover,
.sold-toggle__btn.is-reopen:focus-visible{
  background: #003A8F;
  color: #FFD100;
  outline: none;
}