/* Zuckonit — estilos principales
   Comentarios incluidos para claridad.
*/

/* CSS Variables for easy theming */
:root{
  --bg: #0f1720;
  --card: #0b1220;
  --muted: #94a3b8;
  --accent: #3b82f6;
  --glass: rgba(255,255,255,0.03);
  --text: #e6eef8;
  --soft-shadow: 0 6px 18px rgba(2,6,23,0.6);
}

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg), #071024 80%);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Topbar */
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1rem;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
  border-bottom:1px solid rgba(255,255,255,0.03);
  position:sticky;
  top:0;
  z-index:10;
}

/* Layout */
.container{
  max-width:1100px;
  margin:1rem auto;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:1rem;
  padding:0 1rem;
}

/* Sidebar items */
.sidebar{}

/* Profile card */
.profile-card{
  background:var(--card);
  padding:1rem;
  border-radius:12px;
  box-shadow:var(--soft-shadow);
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.profile-card:hover{ transform:translateY(-4px); }

.avatar-wrap{ position:relative; width:96px; height:96px; margin:0 auto 0.5rem;}
.avatar-wrap img{
  width:96px; height:96px; object-fit:cover; border-radius:50%;
  border:3px solid rgba(255,255,255,0.06);
}

/* Buttons & controls */
button{
  background:var(--glass);
  border:1px solid rgba(255,255,255,0.03);
  color:var(--text);
  padding:0.5rem 0.8rem;
  border-radius:8px;
  cursor:pointer;
  transition: transform 0.2s ease;
}
button:hover{ transform:translateY(-2px); }

/* Feed */
.feed{}

/* New post */
.new-post{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  padding:1rem; border-radius:12px; margin-bottom:1rem;
  box-shadow:var(--soft-shadow);
}
.new-post textarea{
  width:100%; min-height:80px; resize:vertical;
  background:transparent; border:1px dashed rgba(255,255,255,0.04);
  padding:0.6rem; color:var(--text); border-radius:8px;
}
.new-post .row{ display:flex; gap:0.5rem; margin-top:0.6rem; align-items:center; justify-content:space-between; }

/* Posts list */
.posts-list{ display:flex; flex-direction:column; gap:1rem; }
.post{
  background:var(--card); padding:1rem; border-radius:12px; position:relative;
  overflow:hidden; transition:transform .16s ease, box-shadow .16s ease;
}
.post:hover{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(2,6,23,0.7); }
.post .meta{ display:flex; align-items:center; gap:0.6rem; margin-bottom:0.6rem;}
.post .meta img{ width:40px; height:40px; border-radius:50%; object-fit:cover; }
.post .tags{ margin-top:0.6rem; display:flex; gap:0.4rem; flex-wrap:wrap;}
.tag{ background:rgba(255,255,255,0.03); padding:0.2rem 0.5rem; border-radius:6px; font-size:0.85rem; color:var(--muted); }

/* Post actions */
.actions{ position:absolute; right:12px; top:12px; display:flex; gap:0.4rem; }

/* Modal */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,0.6); padding:1rem; }
.hidden{ display:none; }
.modal-content{ background:var(--card); padding:1rem; border-radius:12px; width:100%; max-width:420px; }

/* Toast */
.toast{ position:fixed; right:1rem; bottom:1rem; background:rgba(10,20,30,0.8); padding:0.6rem 0.9rem; border-radius:8px; box-shadow:var(--soft-shadow); color: var(--text); font-weight: 600; }

/* Responsive */
@media (max-width:900px){
  .container{ grid-template-columns:1fr; }
  .sidebar{ order:2; }
  .feed{ order:1; }
}

/* Export styles for rendering post to image */
.export-minimal{ background:#0b1220; color:var(--text); padding:20px; border-radius:12px; width:600px; font-family: Inter, system-ui, monospace; }
.export-retro{ background:linear-gradient(135deg,#2b2b5e,#492b2b); color:#fff; font-family: "Courier New", monospace; padding:24px; width:600px; border-radius:6px; }
.export-polaroid{ background:#fff; color:#111; padding:18px; width:420px; border-radius:4px; box-shadow:0 6px 16px rgba(0,0,0,0.4); font-family: Inter, system-ui, monospace; }

/* Polaroid caption small */
.polaroid-caption{ font-size:0.85rem; color:#333; margin-top:8px; }

/* Utility */
.row{ display:flex; gap:0.6rem; align-items:center; }