/* =====================================================================
   3x0t1k -- Frag Board
   Mobile-first de verdad: todo esto se usa desde el telefono, junto al tanque.
   Solo tokens de app.css. Cero colores inventados, cero blur() grande.
   ===================================================================== */

/* ---------------------------------------------------------- cabecera */
.board-top .board-cta { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; margin-top: var(--sp-4); }
.board-top .board-cta .btn { width: 100%; justify-content: center; }
/* OJO: solo los enlaces de la linea fina. Sin el `p` esta regla pisaba el
   color del .btn-primary (el boton de publicar del visitante anonimo es un <a>)
   y dejaba la etiqueta en --ink-2 sobre el degradado cian: ilegible. */
.board-cta p a { color: var(--ink-2); }
.board-cta p a:hover { color: var(--cyan); }

.dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; vertical-align: middle; margin-inline: .5em; }

.pill-n {
  display: inline-grid; place-items: center; min-width: 1.5em; padding: 0 .4em;
  height: 1.5em; border-radius: var(--r-full);
  background: var(--magenta); color: #041014;        /* 5.46:1, blanco sobre magenta solo daba 3.53:1 */
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
}

/* ---------------------------------------------------------- filtros */
.board-filters { padding: clamp(1rem, 3vw, 1.5rem); }
.filter-search { display: flex; gap: .5rem; }
.filter-search .input { flex: 1; min-width: 0; }
.filter-search .btn { flex: none; }

.filter-chips { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: var(--sp-4); }

.filter-grid { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; margin-top: var(--sp-4); }
.filter-grid .field { margin-bottom: 0; }
.filter-grid .filter-apply { grid-column: 1 / -1; display: flex; flex-direction: column; }
.filter-grid .filter-apply .btn { width: 100%; justify-content: center; }

@media (min-width: 760px) {
  .filter-grid { grid-template-columns: repeat(5, 1fr); align-items: end; }
  /* Los dos botones caian apilados en la primera columna con cuatro columnas
     vacias al lado. Ocupan la fila entera y se alinean a la derecha, en linea. */
  .filter-grid .filter-apply {
    grid-column: 1 / -1; flex-direction: row; justify-content: flex-end;
    gap: .5rem; margin-top: .25rem;
  }
  .filter-grid .filter-apply .btn { width: auto; min-width: 9rem; }
  .filter-grid .filter-apply .mt-2 { margin-top: 0; }
  .board-top .board-cta { align-items: flex-end; margin-top: 0; }
  .board-top .board-cta .btn { width: auto; }
}

/* ---------------------------------------------------------- tarjeta */
.board-grid { align-items: stretch; }

.board-card { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; }
.board-card .shot { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--abyss); }
.board-card .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.board-card:hover .shot img { transform: scale(1.06); }
.board-card .shot-tags { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .3rem; flex-wrap: wrap; z-index: 2; }

.board-card .body { padding: .9rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.board-card .species { font-size: var(--fs-xs); font-style: italic; color: var(--ink-3); }
.board-card .name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.board-card .name a:hover { color: var(--cyan); }

.board-card .wants { color: var(--ink-2); }
.board-card .wants .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-right: .4em; }

.board-card .meta-row { display: flex; align-items: center; flex-wrap: wrap; }
.board-card .foot { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.board-card .offers { color: var(--ink-3); }

/* una ficha cerrada se apaga, no desaparece */
.board-card.is-closed { opacity: .58; }
.board-card.is-closed .shot img { filter: grayscale(.65); }
.board-card.is-closed:hover { opacity: 1; }

/* ---------------------------------------------------------- reputacion */
.rep { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.rep-name { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.rep-name:hover { color: var(--cyan); }
.rep-num { font-size: var(--fs-xs); color: var(--ink-2); }
.rep-new { color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-full); padding: .1em .6em; }
.rep-swaps { white-space: nowrap; }

.stars { display: inline-flex; gap: 1px; color: var(--amber); line-height: 0; }
.stars .star { opacity: .3; }
.stars .star.on { opacity: 1; }

/* ---------------------------------------------------------- ficha */
.post-layout { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) { .post-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; } }

.post-gallery .shot-main { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--abyss); aspect-ratio: 4 / 3; }
.post-gallery .shot-main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.thumb-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.thumb-btn { padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: none; cursor: pointer; line-height: 0; }
.thumb-btn img { width: 64px; height: 64px; object-fit: cover; }
.thumb-btn.is-on, .thumb-btn:hover { border-color: var(--cyan); }

.post-main .species-line { font-style: italic; color: var(--ink-2); font-size: var(--fs-lg); }
.post-body p { color: var(--ink-2); }

.wants-panel {
  border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: var(--r-md); padding: 1rem 1.1rem;
  background: radial-gradient(120% 140% at 0% 0%, rgba(34,232,212,.07), transparent 70%), var(--abyss);
}
.wants-panel p { color: var(--ink); }

.author-card .rep { margin-top: .3rem; }

.post-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.post-actions > .panel, .post-actions > .alert { width: 100%; }
.inline-form { display: inline-block; margin: 0; }

/* ---------------------------------------------------------- ofertas */
.offer-row .offer-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.02em; }
.offer-row .offer-title:hover { color: var(--cyan); }
.offer-row .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.offer-row .price-inline { color: var(--lime); font-weight: 700; margin-left: .5em; }
.offers-cols { align-items: start; }
.offers-cols .empty { padding: 2rem 1rem; }

/* ---------------------------------------------------------- comentarios */
.comment-list { list-style: none; padding: 0; display: grid; gap: .9rem; }
.comment { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: .85rem 1rem; background: var(--surface); }
.comment p { color: var(--ink-2); }
.comment.is-hidden { opacity: .5; }
.comment-form .field { margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------- hilo */
.thread-head .offer-summary { border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); }
.thread-head .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.thread-head .price-inline { color: var(--lime); font-weight: 700; margin-left: .5em; }

.msg-list { display: grid; gap: .8rem; }
.msg { max-width: 88%; }
.msg.is-mine { margin-left: auto; }
.msg-meta { display: flex; gap: .6rem; justify-content: space-between; margin-bottom: .25rem; }
.msg.is-mine .msg-meta { flex-direction: row-reverse; }
.msg-bubble {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
  padding: .8rem 1rem; color: var(--ink); font-size: var(--fs-sm); line-height: 1.55;
  overflow-wrap: anywhere;
}
.msg.is-mine .msg-bubble {
  border-radius: var(--r-md) var(--r-md) 4px var(--r-md);
  border-color: color-mix(in srgb, var(--cyan) 42%, transparent);
  background: rgba(34,232,212,.07);
}

.done-panel { border-color: color-mix(in srgb, var(--lime) 40%, transparent); }

/* ---------------------------------------------------------- resenas */
.review-panel .review-card { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: .85rem 1rem; background: var(--abyss); }
.star-pick { display: flex; flex-direction: column-reverse; gap: .35rem; border: 0; padding: 0; margin-bottom: var(--sp-4); }
.star-pick legend { margin-bottom: .5em; }
.star-opt { display: flex; align-items: center; gap: .6em; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.star-opt input { accent-color: var(--cyan); width: 1.05em; height: 1.05em; }
.star-opt:hover { color: var(--ink); }

/* ---------------------------------------------------------- formulario */
.board-form .kind-pick { display: grid; gap: .6rem; margin-bottom: var(--sp-4); }
@media (min-width: 600px) { .board-form .kind-pick { grid-template-columns: repeat(3, 1fr); } }
.kind-opt { position: relative; cursor: pointer; }
.kind-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.kind-face {
  display: block; padding: .85rem 1rem; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--abyss);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.kind-opt input:focus-visible + .kind-face { outline: 2px solid var(--cyan); outline-offset: 2px; }
.kind-opt input:checked + .kind-face { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 10%, var(--abyss)); }
.kind-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); }
.kind-opt input:checked + .kind-face .kind-name { color: var(--glow); }
.kind-hint { display: block; color: var(--ink-3); margin-top: .15em; line-height: 1.4; }

.board-form .field-key .label { color: var(--cyan); }
.board-form .gap-3 { gap: .75rem; }
.board-form .thumb { display: inline-grid; gap: .3rem; justify-items: center; }
.board-form .thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.board-form .thumb-del { font-size: 10px; color: var(--ink-3); display: flex; gap: .3em; align-items: center; }
.board-form input[type="file"] { padding: .6em .8em; font-size: var(--fs-sm); }

/* ---------------------------------------------------------- reglas */
.rules-list { display: grid; gap: var(--sp-5); }
.rule-item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.rule-item .rule-num { font-size: var(--fs-sm); color: var(--cyan); padding-top: .35em; opacity: .8; }
.rule-item h2 { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-lg); }
.rule-item h2 svg { color: var(--cyan); flex: none; }
.rule-item p { color: var(--ink-2); }

/* ---------------------------------------------------------- utilidades locales */
.p-board .mt-7 { margin-top: var(--sp-7); }
.p-board .mt-8 { margin-top: var(--sp-8); }
.p-board .btn-block { display: flex; width: 100%; justify-content: center; }