/* ════════════════════════════════════════════════════════════════════════
   componentes.css — las piezas que se repiten: botones, chips, tarjetas,
   formulario, avatar, burbujas de chat, avisos.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-block; border:1px solid var(--brand); background:var(--brand);
  color:var(--brand-ink); font:inherit; font-weight:600; font-size:.95rem;
  padding:.6rem 1.15rem; border-radius:999px; cursor:pointer; text-decoration:none;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5; cursor:not-allowed; filter:none}
.btn.fantasma{background:transparent; color:var(--brand)}
.btn.pequeno{padding:.35rem .8rem; font-size:.85rem}

/* ── Chips de intereses ───────────────────────────────────────────────── */
.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{
  border:1px solid var(--line); background:var(--card); color:var(--muted);
  font:inherit; font-size:.85rem; padding:.3rem .7rem; border-radius:999px;
  cursor:pointer; user-select:none;
}
.chip:hover{border-color:var(--brand); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
/* el chip que no se pulsa: solo muestra un interés en un perfil ajeno */
.chip.fijo{cursor:default; background:var(--brand-suave); border-color:transparent; color:var(--ink)}
.chip.fijo:hover{border-color:transparent}
.chip.fijo.comun{background:var(--acento-suave); box-shadow:inset 0 0 0 1px var(--acento)}

/* ── Avatar: iniciales con un color derivado del nombre ───────────────── */
.avatar{
  width:3rem; height:3rem; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:1.05rem;
  color:#fff; letter-spacing:.02em;
}
.avatar.grande{width:4.5rem; height:4.5rem; font-size:1.5rem}
.avatar.chico{width:2.25rem; height:2.25rem; font-size:.8rem}

/* ── Tarjeta de perfil ────────────────────────────────────────────────── */
.tarjeta{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radio);
  padding:1.1rem; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:.75rem;
  text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%;
}
.tarjeta:hover{border-color:var(--brand)}
.tarjeta .cabeza{display:flex; gap:.8rem; align-items:center}
.tarjeta .cabeza > div{min-width:0}
.tarjeta .nombre{font-weight:650; font-size:1.05rem}
.tarjeta .donde{color:var(--muted); font-size:.87rem}
.tarjeta .bio{
  color:var(--muted); font-size:.92rem; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.km{
  display:inline-block; background:var(--acento-suave); color:var(--acento);
  border-radius:999px; padding:.1rem .55rem; font-size:.78rem; font-weight:600;
  white-space:nowrap;
}

/* ── Formulario ───────────────────────────────────────────────────────── */
.campo{margin-bottom:1.15rem}
.campo > label{display:block; font-weight:600; font-size:.92rem; margin-bottom:.35rem}
.campo .ayuda{display:block; color:var(--muted); font-size:.83rem; margin:-.2rem 0 .45rem}
input[type=text], input[type=number], select, textarea{
  width:100%; font:inherit; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:10px; padding:.55rem .7rem;
}
textarea{resize:vertical; min-height:5.5rem}
input[type=range]{width:100%; accent-color:var(--brand)}
.dos{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
@media (max-width:34rem){ .dos{grid-template-columns:1fr} }

.error{color:#c0392b; font-size:.88rem; margin:.3rem 0 0}
@media (prefers-color-scheme:dark){ .error{color:#ff9a8f} }

/* ── Aviso (la caja que explica que esto es una demostración) ─────────── */
.aviso{
  background:var(--acento-suave); border:1px solid color-mix(in srgb,var(--acento) 30%,transparent);
  border-radius:var(--radio); padding:.9rem 1.1rem; font-size:.9rem; margin-bottom:1.5rem;
}
.aviso strong{color:var(--acento)}
.aviso p:last-child{margin-bottom:0}

/* ── Mensajería ───────────────────────────────────────────────────────── */
.conv{
  display:flex; gap:.65rem; align-items:center; width:100%; text-align:left;
  padding:.7rem .9rem; border:0; border-bottom:1px solid var(--line);
  background:none; font:inherit; color:inherit; cursor:pointer;
}
.conv:hover{background:var(--brand-suave)}
.conv[aria-current="true"]{background:var(--brand-suave); box-shadow:inset 3px 0 0 var(--brand)}
.conv .txt{min-width:0}
.conv .quien{font-weight:600; font-size:.93rem}
.conv .ultimo{color:var(--muted); font-size:.83rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.chat-cabeza{
  display:flex; gap:.65rem; align-items:center;
  padding:.7rem .9rem; border-bottom:1px solid var(--line);
}
.chat-cuerpo{flex:1; overflow-y:auto; padding:1rem .9rem; display:flex; flex-direction:column; gap:.5rem}
.burbuja{
  max-width:min(80%,26rem); padding:.5rem .8rem; border-radius:16px;
  font-size:.94rem; line-height:1.5; word-wrap:break-word;
}
.burbuja.ella{background:var(--brand-suave); align-self:flex-start; border-bottom-left-radius:5px}
.burbuja.yo{background:var(--brand); color:var(--brand-ink); align-self:flex-end; border-bottom-right-radius:5px}
.burbuja .hora{display:block; font-size:.72rem; opacity:.65; margin-top:.15rem}
.escribiendo{color:var(--muted); font-size:.85rem; align-self:flex-start; font-style:italic}

.chat-pie{display:flex; gap:.5rem; padding:.7rem .9rem; border-top:1px solid var(--line)}
.chat-pie input{flex:1}
.vacio{margin:auto; text-align:center; color:var(--muted); padding:2rem; font-size:.95rem}

/* ── Ficha de perfil (diálogo) ────────────────────────────────────────── */
dialog.ficha{
  border:1px solid var(--line); border-radius:var(--radio); background:var(--card);
  color:var(--ink); padding:0; max-width:32rem; width:calc(100% - 2rem);
}
dialog.ficha::backdrop{background:rgba(20,10,16,.5)}
dialog.ficha .contenido{padding:1.5rem}
dialog.ficha .cerrar{
  position:absolute; top:.6rem; right:.7rem; border:0; background:none;
  font-size:1.4rem; line-height:1; color:var(--muted); cursor:pointer; padding:.2rem .4rem;
}
.dato{display:flex; gap:.5rem; font-size:.92rem; margin-bottom:.35rem}
.dato .etiqueta{color:var(--muted); min-width:6.5rem}
dialog.ficha h3{margin-top:1.1rem}

/* ── Bloque plegable (los intereses del filtro) ───────────────────────── */
.plegable{margin-top:1rem; border-top:1px solid var(--line); padding-top:.85rem}
.plegable > summary{
  cursor:pointer; font-weight:600; font-size:.92rem; list-style:none;
  display:flex; align-items:center; gap:.4rem;
}
.plegable > summary::-webkit-details-marker{display:none}
.plegable > summary::before{content:'▸'; color:var(--muted); transition:transform .15s}
.plegable[open] > summary::before{transform:rotate(90deg)}
.plegable > summary span{color:var(--muted); font-weight:400}