/* AvisosGratis — estilos. Sin dependencias, mobile-first. */
:root {
  --bg:#f6f7f9; --surface:#fff; --surface-2:#f1f3f7;
  --line:#e8eaf0; --fg:#0f172a; --muted:#64748b;
  --accent:#334155; --accent-2:#475569; --accent-ink:#fff;
  --ok:#334155; --danger:#dc2626;
  --r:14px; --r-sm:10px;
  --sh-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --sh-md:0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05);
  --maxw:1000px;
  color-scheme:light;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font:400 16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--fg); letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; display:block; }
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,1.4rem); }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.hdr-inner { display:flex; align-items:center; gap:.5rem; min-height:62px; flex-wrap:wrap; }
.brand { font-weight:800; font-size:1.2rem; color:var(--fg); letter-spacing:-.02em; white-space:nowrap; }
.brand:hover { text-decoration:none; opacity:.85; }
.nav { display:flex; gap:.15rem; margin-left:.4rem; }
.nav a { color:var(--muted); padding:.45rem .7rem; border-radius:999px; font-weight:600; font-size:.95rem; transition:background .15s,color .15s; }
.nav a:hover { background:var(--surface-2); color:var(--fg); text-decoration:none; }
.nav a.active { color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent); }
.hdr-auth { margin-left:auto; display:flex; align-items:center; gap:.4rem; }
.hdr-user { color:var(--muted); font-size:.9rem; font-weight:500; }
/* En escritorio el wrapper desaparece del layout: nav y auth quedan como antes. */
.hdr-menu { display:contents; }
.nav-toggle { display:none; margin-left:auto; background:transparent; border:0; color:var(--fg); font-size:1.4rem; line-height:1; padding:.35rem .55rem; border-radius:var(--r-sm); cursor:pointer; }
.nav-toggle:hover { background:var(--surface-2); }

/* ── Botones ────────────────────────────────────────────── */
.btn {
  --pad:.62rem 1rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:var(--pad); min-height:42px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--fg); font:inherit; font-size:.95rem; font-weight:600;
  transition:transform .08s ease, background .15s, border-color .15s, box-shadow .15s; white-space:nowrap;
}
.btn:hover { background:var(--surface-2); text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn.primary { background:linear-gradient(180deg,var(--accent-2),var(--accent)); border-color:transparent; color:var(--accent-ink); box-shadow:0 1px 2px rgba(15,23,42,.3); }
.btn.primary:hover { filter:brightness(1.06); background:linear-gradient(180deg,var(--accent-2),var(--accent)); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--accent); box-shadow:none; }
.btn.ghost:hover { background:color-mix(in srgb,var(--accent) 10%, transparent); }
.btn.danger { background:var(--danger); border-color:transparent; color:#fff; }
.btn.danger:hover { filter:brightness(1.06); background:var(--danger); }
/* Login social */
.auth-sep { display:flex; align-items:center; gap:.6rem; margin:1rem 0 .8rem; color:var(--muted); font-size:.85rem; }
.auth-sep::before, .auth-sep::after { content:''; flex:1; height:1px; background:var(--line); }
.gbtn { display:flex; justify-content:center; min-height:40px; }
.btn.sm { --pad:.4rem .7rem; min-height:36px; font-size:.875rem; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ── Compartir (enlace + QR) ────────────────────────────── */
.share-box { padding:0; }
.share-summary { cursor:pointer; padding:.7rem 1rem; font-weight:600; font-size:.9rem; list-style:none; }
.share-summary::-webkit-details-marker { display:none; }
.share-summary::before { content:'🔗 '; }
.share-box[open] .share-summary { border-bottom:1px solid var(--line); }
.share-body { padding:1rem; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.share-row { display:flex; gap:.5rem; flex-wrap:wrap; width:100%; }
.share-url { flex:1 1 200px; min-width:0; font-size:.82rem; }
.share-row .btn { flex:0 0 auto; }
.share-qr { width:172px; height:172px; image-rendering:pixelated; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; }

/* ── Imágenes de entidades ──────────────────────────────── */
.entity-img { display:block; width:100%; max-height:300px; object-fit:contain; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); }
.avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:1px solid var(--line); background:var(--surface); flex:0 0 auto; }
.thumb { width:56px; height:56px; border-radius:var(--r-sm); object-fit:cover; border:1px solid var(--line); flex:0 0 auto; }
.post-img { display:block; max-width:100%; max-height:360px; object-fit:contain; border:1px solid var(--line); border-radius:var(--r-sm); margin:.5rem 0; }
.img-uploader { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:.3rem 0 .4rem; }
.img-preview { width:88px; height:88px; object-fit:cover; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); }
.img-preview.circle { border-radius:50%; }
.img-preview.placeholder { display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--muted); }
.img-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.post-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem; }
.btn.ghost.danger { color:#b91c1c; }
/* Botones de contacto (WhatsApp + Teléfono) */
.contact-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem; }
.contact-actions .btn { display:inline-flex; align-items:center; gap:.35em; text-decoration:none; }
.btn.wa { background:#25d366; border-color:#25d366; color:#fff; }
.lang-select { padding:.3rem .5rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:inherit; font-size:.85rem; cursor:pointer; }
.btn.wa:hover { background:#1fb959; border-color:#1fb959; }

/* ── Reportar ───────────────────────────────────────────── */
.report-box { padding:0; }
.report-summary { cursor:pointer; padding:.7rem 1rem; font-weight:600; font-size:.9rem; list-style:none; color:var(--muted); }
.report-summary::-webkit-details-marker { display:none; }
.report-box[open] .report-summary { border-bottom:1px solid var(--line); }
.report-body { padding:1rem; }

/* ── Formularios ────────────────────────────────────────── */
label { display:block; font-size:.82rem; color:var(--muted); margin:.7rem 0 .3rem; font-weight:600; }
input,select,textarea {
  width:100%; padding:.65rem .8rem; min-height:44px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm);
  color:var(--fg); font:inherit; transition:border-color .15s, box-shadow .15s;
}
input::placeholder,textarea::placeholder { color:#9aa3b2; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
textarea { min-height:84px; resize:vertical; }
select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .85rem center; padding-right:2rem; }
.field-row { display:flex; gap:.7rem; flex-wrap:wrap; }
.field-row > * { flex:1 1 150px; min-width:0; }
.checkbox { display:flex; align-items:center; gap:.55rem; margin-top:.7rem; }
.checkbox input { width:auto; min-height:auto; }
.checkbox label { margin:0; }

/* ── Layout / tarjetas ──────────────────────────────────── */
main.container { flex:1; padding-block:clamp(1.1rem,4vw,1.8rem) 3rem; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); padding:1.15rem 1.25rem; }
.stack { display:grid; gap:1.1rem; }
.grid { display:grid; gap:1rem; }
.grid.cols-2 { grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
h1 { font-size:clamp(1.5rem,4.5vw,1.85rem); line-height:1.2; letter-spacing:-.02em; margin:.2rem 0 .5rem; }
h2 { font-size:1.2rem; letter-spacing:-.01em; margin:1.5rem 0 .7rem; }
.muted { color:var(--muted); }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position:relative; overflow:hidden; color:#fff; text-align:center;
  padding:clamp(2rem,7vw,3.2rem) 1.4rem; border-radius:20px;
  background:radial-gradient(120% 120% at 0% 0%, var(--accent-2), var(--accent) 55%, #0f172a);
  box-shadow:var(--sh-md);
}
.hero h1 { color:#fff; font-size:clamp(1.7rem,6vw,2.4rem); margin:0 0 .5rem; }
.hero p { margin:0 auto 1.4rem; max-width:34rem; opacity:.92; font-size:1.05rem; }
.hero .search { display:flex; gap:.5rem; max-width:34rem; margin-inline:auto; }
.hero .search input { flex:1; background:rgba(255,255,255,.96); border-color:transparent; }
.hero .search .btn { background:#0f172a; color:#fff; border-color:transparent; }

/* ── Listados / items ───────────────────────────────────── */
.list-item { display:flex; align-items:center; gap:.85rem; }
a.list-item { transition:transform .12s ease, box-shadow .15s, border-color .15s; }
a.list-item:hover { transform:translateY(-2px); box-shadow:var(--sh-md); border-color:color-mix(in srgb,var(--accent) 30%, var(--line)); }
.list-item .grow { flex:1; min-width:0; }
.list-item h3 { margin:0 0 .15rem; font-size:1.02rem; letter-spacing:-.01em; }
.list-item .sub { color:var(--muted); font-size:.88rem; overflow:hidden; text-overflow:ellipsis; }
.badge { display:inline-flex; align-items:center; font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; background:var(--surface-2); color:var(--muted); white-space:nowrap; }
.badge.ok { background:color-mix(in srgb,var(--ok) 14%, transparent); color:var(--ok); }
.badge.accent { background:color-mix(in srgb,var(--accent) 12%, transparent); color:var(--accent); }

/* ── Posts / eventos ────────────────────────────────────── */
.post { padding:.95rem 0; border-top:1px solid var(--line); }
.post:first-child { border-top:none; padding-top:.2rem; }
.post .text { white-space:pre-wrap; word-break:break-word; }
.post .meta { color:var(--muted); font-size:.82rem; margin-top:.3rem; display:flex; flex-wrap:wrap; gap:.1rem .15rem; align-items:baseline; }
.post .price { font-weight:800; color:var(--ok); }
.post .contacto { margin-top:.4rem; font-size:.9rem; font-weight:600; color:var(--accent); }

/* ── Tabs ───────────────────────────────────────────────── */
.tabs { display:flex; gap:.2rem; border-bottom:1px solid var(--line); margin:1.1rem 0; overflow-x:auto; }
.tabs button { background:none; border:none; padding:.65rem .95rem; cursor:pointer; color:var(--muted); font:inherit; font-weight:700; border-bottom:2.5px solid transparent; white-space:nowrap; }
.tabs button.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── Detalles colapsables (crear evento / formularios) ──── */
details.card > summary { list-style:none; }
details.card > summary::-webkit-details-marker { display:none; }
details.card[open] > summary { margin-bottom:.6rem; }

/* ── Estados ────────────────────────────────────────────── */
.spinner { color:var(--muted); padding:2.5rem 0; text-align:center; }
.errbox { background:color-mix(in srgb,var(--danger) 8%, var(--surface)); border:1px solid color-mix(in srgb,var(--danger) 30%, var(--line)); color:var(--danger); padding:.85rem 1rem; border-radius:var(--r-sm); }
.empty { color:var(--muted); padding:1.6rem 0; text-align:center; }
.content-md { line-height:1.7; }
.content-md h1 { font-size:1.7rem; } .content-md h2 { font-size:1.25rem; } .content-md li { margin:.25rem 0; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { background:var(--surface); border-top:1px solid var(--line); padding:1.2rem 0; color:var(--muted); font-size:.9rem; }
.footer-inner { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-inner nav { display:flex; gap:1.2rem; flex-wrap:wrap; }

/* ── Toast ──────────────────────────────────────────────── */
#toast {
  position:fixed; left:50%; bottom:max(1.1rem,env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(1.5rem);
  background:#0f172a; color:#fff; padding:.75rem 1.15rem; border-radius:999px; box-shadow:var(--sh-md);
  font-weight:600; font-size:.92rem; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; max-width:92vw; z-index:60;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.err { background:var(--danger); }
#toast.ok { background:var(--ok); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:560px) {
  .hdr-inner { min-height:56px; }
  .hdr-user { display:none; }
  h2 { margin-top:1.1rem; }

  /* Menú hamburguesa: el panel se despliega bajo el header. */
  .nav-toggle { display:inline-flex; }
  .hdr-menu {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:.25rem;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:.6rem 1rem; box-shadow:0 10px 24px rgba(15,23,42,.12);
  }
  .hdr-menu.open { display:flex; }
  .hdr-menu .nav { flex-direction:column; margin-left:0; gap:.1rem; }
  .hdr-menu .nav a { padding:.6rem .6rem; font-size:1rem; }
  .hdr-menu .hdr-auth { margin-left:0; flex-direction:column; align-items:stretch; gap:.45rem; margin-top:.4rem; }
  .hdr-menu .hdr-auth .btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; scroll-behavior:auto; }
}