/* ============================================================
   base.css — Variables globales, reset y estilos fundamentales
   Modificar aquí: colores, tipografía, tema oscuro/claro
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Colores principales */
  --bg:#000;
  --surface:#0a0a0a;
  --surface2:#111;
  --surface3:#1c1c1c;

  /* Bordes */
  --border:rgba(255,255,255,.1);
  --border2:rgba(255,255,255,.2);

  /* Texto */
  --text:#e7e9ea;
  --text2:#71767b;
  --text3:#3e4144;

  /* Acento principal */
  --accent:#1d9bf0;
  --accent-h:#1a8cd8;
  --accent-bg:rgba(29,155,240,.12);

  /* Acciones de posts */
  --like:#f91880;
  --like-bg:rgba(249,24,128,.12);
  --dislike:#ff6b35;
  --dislike-bg:rgba(255,107,53,.12);
  --share:#00ba7c;
  --share-bg:rgba(0,186,124,.12);

  /* Redactor */
  --mod:#a855f7;
  --mod-bg:rgba(168,85,247,.12);

  /* Utilidades */
  --gold:#f59e0b;
  --green:#22c55e;
  --green-bg:rgba(34,197,94,.12);

  /* Layout */
  --radius:16px;

  /* Tipografía */
  --fh:'Inter',sans-serif;
  --fb:'Inter',sans-serif;
}

/* ── Tema claro (body.light) ── */
body.light {
  --bg:#f7f9fa;
  --surface:#ffffff;
  --surface2:#f0f3f4;
  --surface3:#e1e8ed;
  --border:rgba(0,0,0,.1);
  --border2:rgba(0,0,0,.2);
  --text:#0f1419;
  --text2:#536471;
  --text3:#aab8c2;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--fb);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:9999px}

button{font-family:var(--fb);cursor:pointer}
a{color:inherit;text-decoration:none}

/* ── Screens ── */
.screen{display:none;min-height:100vh}
.screen.active{display:block}

/* ── Loading overlay ── */
#loadingOverlay{
  position:fixed;inset:0;background:var(--bg);z-index:9999;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:20px;
}
#loadingOverlay.hidden{display:none}
.ld-logo{font-family:var(--fh);font-size:34px;font-weight:700;color:var(--accent);letter-spacing:-.5px}
.ld-spin{
  width:26px;height:26px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
}

/* ── Toast ── */
#toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--text);color:var(--bg);padding:10px 20px;border-radius:9999px;
  font-size:14px;font-weight:600;opacity:0;transition:all .25s;pointer-events:none;z-index:999;white-space:nowrap;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Animations ── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes popIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── Banner de invitado (vista pública sin login) ─────────────────────── */
#guestBanner {
  display: none;
  position: sticky;
  top: 0;
  z-index: 200;
  background: linear-gradient(90deg, var(--accent) 0%, #a855f7 100%);
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#guestBanner.visible { display: flex; }
#guestBanner .gb-text { opacity: .92; }
#guestBanner .gb-btn {
  background: #fff;
  color: var(--accent);
  border: none;
  border-radius: 9999px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--fh);
  transition: opacity .15s;
  white-space: nowrap;
}
#guestBanner .gb-btn:hover { opacity: .85; }
#guestBanner .gb-close {
  position: absolute;
  right: 14px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
#guestBanner .gb-close:hover { color: #fff; }

/* ── Mensaje fin de feed (scroll infinito) ─────────────────────────────── */
.feed-end-msg {
  text-align: center;
  padding: 20px 16px;
  font-size: 13px;
  color: var(--text3, #888);
  letter-spacing: .03em;
}