:root{
  --bg:#FAF5EC;
  --bg-panel:#FFFFFF;
  --bg-panel-alt:#F3EADC;
  --navy:#26344A;
  --navy-light:#3B5175;
  --navy-pale:#EDF1F5;
  --terracotta:#D97757;
  --terracotta-light:#E8A084;
  --terracotta-dark:#B85F41;
  --terracotta-pale:#F7E3D9;
  --sage:#7C9885;
  --sage-pale:#E7EFE8;
  --gold:#CE9C4C;
  --gold-pale:#F5E9D2;
  --coral:#C1594A;
  --coral-pale:#F4E0DB;
  --ink:#2E2A24;
  --ink-dim:#6E6459;
  --ink-faint:#A79A87;
  --border:rgba(38,52,74,0.14);
  --border-soft:rgba(46,42,36,0.10);
  --radius:14px;
  --display:'Baloo 2',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }
body{ background:var(--bg); color:var(--ink); font-family:var(--body); line-height:1.55; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }
::selection{ background:var(--terracotta-pale); color:var(--terracotta-dark); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--terracotta); outline-offset:2px;
}

/* nav — la "estructura", en navy: lo que da seguridad */
.nav{ position:sticky; top:0; z-index:40; background:var(--navy); border-bottom:1px solid rgba(255,255,255,0.06); }
.nav-inner{ min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:10px 0; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand .mark{ width:20px; height:18px; position:relative; flex-shrink:0; margin-top:2px; }
.brand .mark::before{
  content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:8px solid var(--terracotta);
}
.brand .mark::after{
  content:""; position:absolute; top:0; left:1px; right:1px; bottom:0;
  background:var(--terracotta); border-radius:1px 1px 3px 3px; opacity:0.92;
}
.brand .word{ font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:0.01em; color:#FAF5EC; }
.primary-nav{ display:flex; gap:24px; }
.primary-nav a{ text-decoration:none; font-size:13.5px; color:rgba(250,245,236,0.68); font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; padding:4px 2px; border-bottom:2px solid transparent; }
.primary-nav a:hover{ color:#FAF5EC; }
.primary-nav a.active{ color:var(--terracotta-light); border-bottom-color:var(--terracotta); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.user-chip{ display:flex; align-items:center; gap:10px; font-family:var(--body); font-size:12.5px; color:rgba(250,245,236,0.7); }
.user-chip strong{ color:#FAF5EC; font-weight:600; }

.btn{ font-family:var(--body); font-weight:600; font-size:13.5px; padding:10px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; background:transparent; }
.btn-brass{ background:var(--terracotta); color:#FFFFFF; box-shadow:0 8px 20px -10px rgba(217,119,87,0.6); }
.btn-brass:hover{ background:var(--terracotta-dark); transform:translateY(-1px); }
.btn-ghost{ border-color:rgba(250,245,236,0.3); color:#FAF5EC; }
.btn-ghost:hover{ border-color:var(--terracotta-light); color:var(--terracotta-light); }
.btn-text{ color:var(--ink-dim); padding:6px 8px; }
.btn-text:hover{ color:var(--ink); }
/* dentro de tarjetas/paneles claros, .btn-ghost necesita contraste oscuro */
.gate .btn-ghost, .profile-header .btn-ghost{ border-color:var(--border); color:var(--ink); }
.gate .btn-ghost:hover, .profile-header .btn-ghost:hover{ border-color:var(--terracotta); color:var(--terracotta-dark); }

#app{ min-height:60vh; padding:48px 0 96px; }
.banner-inline{ margin-bottom:34px; }
.eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--terracotta-dark); background:var(--terracotta-pale); display:inline-block; padding:4px 12px; border-radius:999px; margin-bottom:14px; }
.banner-inline h1{ font-family:var(--display); font-weight:600; font-size:34px; line-height:1.15; max-width:640px; color:var(--navy); }

.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filter-chip{ font-family:var(--body); font-weight:500; font-size:13px; padding:8px 16px; border-radius:999px; border:1px solid var(--border); background:var(--bg-panel); color:var(--ink-dim); cursor:pointer; transition:.2s ease; }
.filter-chip:hover{ border-color:var(--terracotta-light); }
.filter-chip.active{ border-color:var(--terracotta); color:#FFFFFF; background:var(--terracotta); }

.feed{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:18px; }
.post-card-link{ text-decoration:none; color:inherit; display:block; }
.post-card{ background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:11px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; height:100%; box-shadow:0 1px 2px rgba(46,42,36,0.04); }
.post-card-link:hover .post-card{ border-color:var(--terracotta-light); box-shadow:0 16px 30px -18px rgba(217,119,87,0.35); transform:translateY(-2px); }
.post-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.chip-cat{ font-family:var(--body); font-weight:600; font-size:11px; padding:4px 11px; border-radius:999px; border:1px solid; white-space:nowrap; }
.chip-cat-estacionamiento{ color:var(--navy); background:var(--navy-pale); border-color:rgba(38,52,74,0.18); }
.chip-cat-bodega{ color:#4F6B58; background:var(--sage-pale); border-color:rgba(124,152,133,0.35); }
.chip-cat-servicio{ color:var(--terracotta-dark); background:var(--terracotta-pale); border-color:rgba(217,119,87,0.3); }
.chip-cat-aviso{ color:var(--coral); background:var(--coral-pale); border-color:rgba(193,89,74,0.3); }
.chip-cat-compra-y-venta{ color:#8A6A28; background:var(--gold-pale); border-color:rgba(206,156,76,0.4); }
.post-time{ font-family:var(--body); font-size:12px; color:var(--ink-faint); flex-shrink:0; }
.post-title{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--ink); }
.post-body{ font-size:13.5px; color:var(--ink-dim); flex:1; white-space:pre-wrap; }
.post-price{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--terracotta-dark); }
.post-meta{ font-family:var(--body); font-size:12px; color:var(--ink-faint); border-top:1px solid var(--border-soft); padding-top:11px; }
.feed-loading, .feed-empty{ color:var(--ink-faint); font-size:14px; padding:56px 0; text-align:center; grid-column:1/-1; }

/* gate — pantalla de bienvenida sin sesión */
.gate{ text-align:center; padding:88px 20px; color:var(--ink-dim); max-width:440px; margin:0 auto; }
.gate-icon{ width:68px; height:68px; margin:0 auto 26px; position:relative; }
.gate-icon::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(155deg, var(--navy), var(--navy-light));
  clip-path:polygon(50% 0%, 100% 20%, 100% 58%, 50% 100%, 0% 58%, 0% 20%);
  border-radius:8px;
}
.gate-icon::after{
  content:""; position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:26px; height:20px; background:var(--terracotta);
  clip-path:polygon(50% 0%, 100% 40%, 100% 100%, 0% 100%, 0% 40%);
  border-radius:2px;
}
.gate h2{ font-family:var(--display); font-weight:600; font-size:27px; color:var(--navy); margin-bottom:11px; }
.gate p{ font-size:14.5px; margin-bottom:26px; }
.gate-actions{ display:flex; gap:12px; justify-content:center; }

.back-link{ display:inline-flex; align-items:center; gap:6px; font-family:var(--body); font-weight:500; font-size:13px; color:var(--ink-dim); text-decoration:none; margin-bottom:24px; }
.back-link:hover{ color:var(--terracotta-dark); }
.detail-card{ background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:20px; padding:34px; max-width:640px; box-shadow:0 1px 3px rgba(46,42,36,0.05); }
.author-link{ color:var(--terracotta-dark); text-decoration:none; font-weight:600; }
.author-link:hover{ text-decoration:underline; }

.profile-header{ display:flex; align-items:center; gap:18px; padding:28px; background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:20px; margin-bottom:40px; box-shadow:0 1px 3px rgba(46,42,36,0.05); }
.profile-avatar{ width:56px; height:56px; border-radius:50%; background:linear-gradient(155deg, var(--terracotta), var(--gold)); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:21px; color:#FFFFFF; flex-shrink:0; }
.profile-info h2{ font-family:var(--display); font-weight:600; font-size:23px; color:var(--navy); }
.profile-meta{ font-family:var(--body); font-size:12.5px; color:var(--ink-faint); margin-top:3px; }
.section-title{ font-family:var(--display); font-weight:600; font-size:21px; margin:40px 0 16px; color:var(--navy); }
.section-title:first-of-type{ margin-top:0; }

/* modales */
.modal-overlay{ position:fixed; inset:0; background:rgba(38,52,74,0.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-overlay[hidden]{ display:none; }
.modal{ background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:22px; padding:34px; max-width:420px; width:100%; position:relative; max-height:90vh; overflow-y:auto; box-shadow:0 30px 60px -20px rgba(38,52,74,0.35); }
.modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; color:var(--ink-faint); font-size:22px; cursor:pointer; line-height:1; }
.modal-close:hover{ color:var(--ink); }
.modal h3{ font-family:var(--display); font-weight:600; font-size:23px; margin-bottom:20px; color:var(--navy); }
.modal-tabs{ display:flex; gap:4px; margin-bottom:22px; border-bottom:1px solid var(--border-soft); }
.tab-btn{ flex:1; background:none; border:none; color:var(--ink-faint); padding:10px; font-family:var(--body); font-weight:600; font-size:13.5px; cursor:pointer; border-bottom:2px solid transparent; }
.tab-btn.active{ color:var(--terracotta-dark); border-bottom-color:var(--terracotta); }
.auth-form{ display:flex; flex-direction:column; gap:14px; }
.auth-form[hidden]{ display:none; }
.auth-form label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink-dim); font-weight:500; }
.auth-form input, .auth-form select, .auth-form textarea{ background:var(--bg-panel-alt); border:1px solid var(--border-soft); border-radius:10px; padding:10px 13px; color:var(--ink); font-family:var(--body); font-size:14.5px; }
.auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus{ outline:none; border-color:var(--terracotta); background:#FFFFFF; }
.auth-form textarea{ resize:vertical; }
.form-error{ color:var(--coral); font-size:12.5px; min-height:16px; }
.modal-note{ margin-top:18px; font-size:11.5px; color:var(--ink-faint); text-align:center; line-height:1.5; }

footer{ padding:40px 0 60px; background:var(--navy); }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
footer .brand .word{ color:#FAF5EC; }
footer .fine{ font-size:12px; color:rgba(250,245,236,0.5); }

@media (max-width:700px){
  .wrap{ padding:0 18px; }
  .primary-nav{ gap:15px; }
  .primary-nav a{ font-size:12.5px; }
  .banner-inline h1{ font-size:27px; }
}