@import url('https://fonts.googleapis.com/css2?family=Tahoma&family=Verdana&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --blue:    #2d6a00;
  --blue2:   #3d8c00;
  --blue3:   #66bb00;
  --light:   #ddffcc;
  --lighter: #f0ffea;
  --border:  #99cc77;
  --link:    #2d6a00;
  --hover:   #cc3300;
  --bg:      #b8e89a;
  --panel:   #ffffff;
  --orange:  #ff6600;
  --green:   #009900;
  --red:     #cc0000;
  --dark:    #222222;
  --gray:    #666666;
}

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

body {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: linear-gradient(160deg, #c8f0a0 0%, #a8d870 40%, #b8e890 70%, #d0f0b0 100%); background-attachment: fixed;
  color: var(--dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ══════════ HEADER ══════════ */
#hdr { background: linear-gradient(180deg, #1a4200 0%, #2d6a00 60%, #3d8c00 100%); border-bottom: 3px solid var(--orange); }
#hdr-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; }

#logo {
  font-size: 28px; font-weight: bold; color: #fff;
  text-shadow: 2px 2px 4px #000066; letter-spacing: -1px;
  font-style: italic; cursor: pointer; user-select: none;
}
#logo span { color: #ff9900; }

#hdr-links { color: #ccddff; font-size: 11px; }
#hdr-links a { color: #ffdd00; text-decoration: none; margin-left: 8px; }
#hdr-links a:hover { text-decoration: underline; }

#hdr-user { color: #ccddff; font-size: 11px; text-align: right; display: none; }
#hdr-user a { color: #ffdd00; text-decoration: none; }
#hdr-user a:hover { text-decoration: underline; }

/* ── NAV ── */
.nav {
  background: linear-gradient(180deg, #3d8c00 0%, #2d6a00 100%);
  border-top: 1px solid #66bb00;
  display: flex; padding: 0 12px; gap: 2px;
}
.ntab {
  color: #fff; padding: 5px 12px; font-size: 11px; font-weight: bold;
  cursor: pointer; border: 1px solid transparent; border-bottom: none;
  text-transform: uppercase; letter-spacing: .5px; border-radius: 4px 4px 0 0;
  transition: background .1s;
}
.ntab:hover { background: #4aaa00; border-color: #88dd44; }
.ntab.on { background: linear-gradient(160deg, #c8f0a0 0%, #a8d870 40%, #b8e890 70%, #d0f0b0 100%); background-attachment: fixed; color: var(--blue); border-color: #88cc44; border-bottom-color: var(--bg); }

.ntab-zipo {
  margin-left: 4px;
  text-decoration: none;
  background: linear-gradient(180deg, #7fc4f7 0%, #3f9de6 45%, #1c72c4 100%);
  border-color: #1c72c4;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
}
.ntab-zipo:hover { background: linear-gradient(180deg, #8fd0ff 0%, #4aa8f0 45%, #2280d4 100%); border-color: #4aa8f0; }

/* ══════════ PAGES ══════════ */
.page { display: none; flex: 1; flex-direction: column; }
.page.on { display: flex; }

/* ── LOGIN LAYOUT ── */
#pg-login .wrap {
  max-width: 800px; margin: 20px auto; padding: 0 8px;
  display: grid; grid-template-columns: 1fr 310px;
  gap: 12px; width: 100%; align-items: start;
}
/* ── APP LAYOUT ── */
#pg-app .wrap {
  max-width: 960px; margin: 8px auto;
  display: grid; grid-template-columns: 180px 1fr 180px;
  gap: 8px; padding: 0 8px; width: 100%;
}

/* ══════════ PANELS ══════════ */
.pnl { background: var(--panel); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.pnl-t {
  background: linear-gradient(180deg, #66cc22 0%, #3d8c00 100%);
  color: #fff; font-weight: bold; font-size: 11px;
  padding: 4px 8px; border-bottom: 1px solid #44aa00;
  text-transform: uppercase; letter-spacing: .5px;
}
.pnl-b { padding: 8px; }
.pnl-b.np { padding: 0; }

/* ══════════ FORMS ══════════ */
.f { margin-bottom: 9px; }
.f label { display: block; font-weight: bold; font-size: 11px; color: #334; margin-bottom: 3px; }
.f input, .f select, .f textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 2px;
  padding: 4px 6px; font-family: Tahoma, sans-serif;
  font-size: 12px; color: #222; background: #f5fff0;
}
.f textarea { min-height: 60px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus {
  border-color: var(--blue2); outline: none; background: #f5fff0;
}
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fsec { font-size: 12px; font-weight: bold; color: #2d6a00; border-bottom: 1px solid var(--border); padding-bottom: 4px; margin: 12px 0 8px; }
.fchk { display: flex; align-items: flex-start; gap: 5px; font-size: 11px; color: #445; margin-bottom: 9px; line-height: 1.4; }
.fchk input { margin-top: 2px; flex-shrink: 0; }
.fchk a { color: var(--link); }

/* ══════════ BUTTONS ══════════ */
.btn { padding: 3px 10px; font-size: 11px; font-family: Tahoma, sans-serif; cursor: pointer; border-radius: 3px; border: 1px solid; font-weight: bold; }
.b-bl { background: linear-gradient(180deg, #66dd22, #3d8c00); color: #fff; border-color: #2d6a00; }
.b-bl:hover { background: linear-gradient(180deg, #77ee33, #4aaa00); }
.b-gy { background: linear-gradient(180deg, #f0f0f0, #ccc); color: #333; border-color: #999; }
.b-gy:hover { background: linear-gradient(180deg, #fff, #ddd); }
.b-or { background: linear-gradient(180deg, #ffaa44, #ee6600); color: #fff; border-color: #cc4400; }
.b-rd { background: linear-gradient(180deg, #ff5555, #cc0000); color: #fff; border-color: #900; }
.b-full {
  width: 100%; padding: 6px; font-size: 12px; font-weight: bold;
  background: linear-gradient(180deg, #66dd22, #3d8c00);
  color: #fff; border: 1px solid #0033aa; border-radius: 3px;
  cursor: pointer; font-family: Tahoma, sans-serif;
}
.b-full:hover { background: linear-gradient(180deg, #77ee33, #4aaa00); }
.b-full:disabled { opacity: .6; cursor: default; }

/* ══════════ TABS ══════════ */
.tb { display: flex; border-bottom: 2px solid #3d8c00; margin-bottom: 10px; }
.atb { display: flex; background: #e8ffdd; padding: 4px 6px 0; gap: 2px; border-bottom: 2px solid var(--blue2); }
.tbtn {
  padding: 4px 12px; font-size: 11px; font-weight: bold; cursor: pointer;
  border: 1px solid var(--border); border-bottom: none;
  background: #eeffdd; color: var(--blue); border-radius: 3px 3px 0 0;
  margin-right: 2px; font-family: Tahoma, sans-serif;
  text-transform: uppercase; letter-spacing: .3px;
}
.tbtn.on { background: #fff; border-color: var(--blue2); color: #ff6600; }
.tc { display: none; }
.tc.on { display: block; }

/* ══════════ ALERTS ══════════ */
.al { padding: 5px 8px; border-radius: 2px; font-size: 11px; margin-bottom: 8px; display: none; border: 1px solid; }
.al.er { background: #fff0ee; border-color: #ffaaaa; color: var(--red); }
.al.ok { background: #eeffee; border-color: #99cc99; color: #006600; }
.al.show { display: block; }

/* ══════════ BADGE / ONLINE ══════════ */
.bdg { background: var(--orange); color: #fff; font-size: 9px; font-weight: bold; padding: 1px 4px; border-radius: 8px; margin-left: 4px; }
.dot { display: inline-block; width: 7px; height: 7px; background: #00cc00; border-radius: 50%; margin-right: 3px; box-shadow: 0 0 3px #0f0; }

/* ══════════ PROFILE SIDEBAR ══════════ */
#pp-panel { text-align: center; }
#pp-wrap {
  width: 100px; height: 100px; margin: 8px auto 6px;
  border: 3px solid #3d8c00; border-radius: 4px;
  overflow: hidden; background: #ddffcc; position: relative; cursor: pointer;
}
#pp-wrap:hover::after {
  content: "📷 Cambiar"; position: absolute; inset: 0;
  background: rgba(0,0,0,.55); color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center; font-weight: bold;
}
#pp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#pp-name { font-size: 13px; font-weight: bold; color: #2d6a00; margin-bottom: 2px; }
#pp-mood { color: #888; font-size: 10px; font-style: italic; margin-bottom: 6px; }
.pst { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; border-bottom: 1px dotted #ddd; }
.pst span:first-child { color: #555; }
.pst span:last-child { font-weight: bold; color: #3d8c00; }
.slink { display: block; padding: 4px 8px; font-size: 11px; color: var(--link); border-bottom: 1px solid #eef; cursor: pointer; }
.slink:hover { background: #e8ffdd; color: #cc3300; }

/* ══════════ POSTS ══════════ */
#post-box { border: 1px solid var(--border); border-radius: 3px; padding: 8px; background: #f2ffe8; margin-bottom: 8px; }
#post-box textarea { width: 100%; border: 1px solid var(--border); border-radius: 2px; padding: 5px; font-family: Tahoma, sans-serif; font-size: 12px; resize: vertical; min-height: 52px; color: #333; }
.p-acts { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.albl { font-size: 10px; color: var(--link); cursor: pointer; border: 1px dashed var(--border); padding: 2px 6px; border-radius: 2px; }
.albl:hover { background: #eef; }
.albl input { display: none; }

.post { border: 1px solid var(--border); border-radius: 3px; padding: 8px; background: #fff; margin-bottom: 6px; }
.ph { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pavt { width: 36px; height: 36px; border-radius: 3px; border: 2px solid var(--blue2); object-fit: cover; }
.pmeta { flex: 1; }
.pauth { font-weight: bold; color: var(--blue); font-size: 12px; }
.ptm { color: #999; font-size: 10px; }
.ptxt { font-size: 12px; line-height: 1.5; color: #333; margin-bottom: 5px; white-space: pre-wrap; word-break: break-word; }
.pmedia { margin: 5px 0; }
.pmedia img { max-width: 100%; max-height: 220px; border: 1px solid var(--border); border-radius: 2px; cursor: pointer; display: block; }
.pmedia video, .pmedia audio { max-width: 100%; margin-top: 4px; }
.pbar { display: flex; gap: 10px; font-size: 11px; border-top: 1px dotted #ddd; padding-top: 5px; margin-top: 4px; flex-wrap: wrap; }
.pa { color: var(--link); cursor: pointer; user-select: none; }
.pa:hover { color: var(--hover); text-decoration: underline; }
.pa.liked { color: var(--orange); font-weight: bold; }

/* comments */
.cmt-wrap { background: #f4f8ff; border: 1px solid #dde; border-radius: 2px; padding: 7px; margin-top: 6px; display: none; }
.cmt-wrap.open { display: block; }
.cmt-list { margin-bottom: 6px; }
.cmt { padding: 3px 0; border-bottom: 1px dotted #e0e8ff; font-size: 11px; line-height: 1.4; }
.cmt:last-child { border-bottom: none; }
.cmt-who { font-weight: bold; color: var(--link); }
.cmt-inp { display: flex; gap: 5px; margin-top: 5px; }
.cmt-inp input { flex: 1; border: 1px solid var(--border); border-radius: 2px; padding: 3px 6px; font-size: 11px; font-family: Tahoma, sans-serif; background: #fff; }
.cmt-inp input:focus { border-color: var(--blue2); outline: none; }

/* empty feed */
.empty-feed { text-align: center; padding: 30px 10px; color: #88a; font-size: 12px; }
.empty-feed .ico { font-size: 36px; margin-bottom: 8px; }

/* ══════════ USERS / FRIENDS ══════════ */
.fgrd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.fcard { text-align: center; cursor: pointer; padding: 4px; border-radius: 2px; }
.fcard:hover { background: var(--lighter); }
.fcard img { width: 44px; height: 44px; object-fit: cover; border: 2px solid var(--blue2); border-radius: 3px; display: block; margin: 0 auto 2px; }
.fcard span { font-size: 9px; color: var(--link); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px dotted #ddd; }
.ri:last-child { border-bottom: none; }
.ri img { width: 32px; height: 32px; border: 2px solid var(--blue2); border-radius: 3px; object-fit: cover; }
.rn { font-weight: bold; color: var(--link); font-size: 11px; flex: 1; }
.rbtns { display: flex; gap: 4px; }

/* ══════════ MESSAGES ══════════ */
.mi { border-bottom: 1px solid #eef; padding: 5px 8px; cursor: pointer; display: flex; gap: 6px; align-items: flex-start; }
.mi:hover { background: var(--lighter); }
.mi.unread { background: #f0f5ff; }
.mavt { width: 28px; height: 28px; border: 2px solid var(--blue2); border-radius: 2px; object-fit: cover; }
.minfo { flex: 1; }
.mfr { font-weight: bold; color: var(--blue); font-size: 11px; }
.msbj { font-size: 11px; color: #333; }
.mi.unread .msbj { font-weight: bold; }
.mtm { font-size: 10px; color: #999; white-space: nowrap; }

/* ══════════ SCRAP ══════════ */
.si { border-bottom: 1px solid #eef; padding: 5px 0; }
.si:last-child { border-bottom: none; }
.sfr { font-weight: bold; color: var(--link); font-size: 11px; }
.stx { font-size: 11px; color: #444; margin-top: 2px; }
.stm { font-size: 9px; color: #aaa; margin-top: 1px; }

/* ══════════ MODALS ══════════ */
.ov { display: none; position: fixed; inset: 0; background: rgba(0,0,40,.65); z-index: 1000; align-items: center; justify-content: center; }
.ov.on { display: flex; }
.mod { background: #fff; border: 2px solid var(--blue2); border-radius: 4px; width: 490px; max-width: 95vw; max-height: 92vh; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,80,.4); }
.mhdr { background: linear-gradient(180deg, #3d8c00, #1a4200); color: #fff; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 13px; }
.mcls { color: #ffcc00; cursor: pointer; font-size: 16px; font-weight: bold; line-height: 1; }
.mcls:hover { color: var(--orange); }
.mbdy { padding: 12px; }

/* ══════════ IMAGE VIEWER ══════════ */
#iv { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 2000; align-items: center; justify-content: center; cursor: zoom-out; }
#iv.on { display: flex; }
#iv img { max-width: 92vw; max-height: 92vh; border: 3px solid #fff; }

/* ══════════ TOAST ══════════ */
#toast {
  position: fixed; top: 58px; right: 14px;
  background: #2d6a00; color: #fff; border: 2px solid #ccff44;
  border-radius: 4px; padding: 8px 16px; font-size: 12px; font-weight: bold;
  z-index: 3000; display: none; box-shadow: 0 4px 12px rgba(0,50,0,.5); max-width: 300px;
}

/* ══════════ SHARE MODAL ══════════ */
.share-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.share-row input { flex: 1; border: 1px solid var(--border); border-radius: 2px; padding: 4px 6px; font-size: 11px; font-family: Tahoma, sans-serif; background: #f8f8f8; }
.share-opts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.share-opt { flex: 1; min-width: 90px; padding: 8px; border: 1px solid var(--border); border-radius: 4px; background: #e8ffdd; cursor: pointer; text-align: center; font-size: 11px; font-weight: bold; color: var(--link); }
.share-opt:hover { background: #ddffcc; border-color: #3d8c00; }
.share-opt .ico { font-size: 18px; display: block; margin-bottom: 4px; }

/* ══════════ REGISTER STEPS ══════════ */
.steps { display: flex; align-items: center; margin-bottom: 12px; background: #e8ffdd; border: 1px solid var(--border); border-radius: 2px; padding: 6px 8px; }
.stp { flex: 1; text-align: center; position: relative; }
.stp:not(:last-child)::after { content: ''; position: absolute; top: 11px; left: 62%; width: 76%; height: 2px; background: #ccd; z-index: 0; }
.stp.done:not(:last-child)::after { background: var(--blue2); }
.stpc { width: 22px; height: 22px; border-radius: 50%; background: #ccd; color: #fff; font-size: 11px; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; border: 2px solid #aab; }
.stp.on .stpc { background: #3d8c00; border-color: #2d6a00; }
.stp.done .stpc { background: #2d6a00; border-color: #1a4200; }
.stpl { font-size: 9px; color: #889; text-transform: uppercase; margin-top: 2px; letter-spacing: .3px; }
.stp.on .stpl { color: #3d8c00; font-weight: bold; }
.stp.done .stpl { color: #2d6a00; }
.rstep { display: none; }
.rstep.on { display: block; }

/* ══════════ PASSWORD STRENGTH ══════════ */
.pws { height: 3px; background: #dde; border-radius: 2px; overflow: hidden; display: none; margin-top: 4px; }
.pwsb { height: 100%; width: 0; border-radius: 2px; transition: width .3s, background .3s; }
.pwh { font-size: 10px; display: none; margin-top: 2px; }

/* ══════════ LOGIN PROMO ══════════ */
.promo-logo { font-size: 30px; font-weight: bold; color: #2d6a00; font-style: italic; letter-spacing: -1px; margin-bottom: 4px; }
.promo-logo span { color: var(--orange); }
.prow { display: flex; gap: 6px; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.pbox { flex: 1; text-align: center; background: #e8ffdd; border: 1px solid var(--border); border-radius: 2px; padding: 5px 3px; }
.pnum { font-size: 15px; font-weight: bold; color: #2d6a00; }
.plbl { font-size: 9px; color: #778; text-transform: uppercase; }
.fi { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #334; padding: 3px 0; border-bottom: 1px dotted #dde; }
.fi:last-child { border-bottom: none; }

/* ══════════ MISC ══════════ */
.fl { font-size: 10px; color: var(--link); cursor: pointer; float: right; }
.fl:hover { text-decoration: underline; }
.dvd { display: flex; align-items: center; gap: 6px; color: #aab; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; margin: 8px 0; }
.dvd::before, .dvd::after { content: ''; flex: 1; height: 1px; background: #aaddaa; }

/* ══════════ FOOTER ══════════ */
#ftr { text-align: center; font-size: 10px; color: #fff; background: linear-gradient(180deg, #1a4200, #2d6a00); border-top: 3px solid var(--orange); padding: 8px; margin-top: auto; }
#ftr a { color: #ffdd00; text-decoration: none; margin: 0 4px; }
#ftr a:hover { text-decoration: underline; }

/* ══════════ LOADING OVERLAY ══════════ */
#loading-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,40,0,.75); z-index: 9999;
  align-items: center; justify-content: center; flex-direction: column; gap: 12px;
}
#loading-overlay.on { display: flex; }
.spinner {
  width: 36px; height: 36px; border: 4px solid rgba(255,255,255,.3);
  border-top-color: #ccff44; border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-overlay p { color: #fff; font-size: 13px; font-weight: bold; }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 700px) {
  #pg-login .wrap, #pg-app .wrap { grid-template-columns: 1fr; }
  #promo-col { display: none; }
  #pg-app .wrap { grid-template-columns: 1fr; }
  #left-col, #right-col { display: none; }
}

/* ══════════ MÓVIL COMPLETO ══════════ */
@media (max-width: 700px) {

  /* Layout */
  #pg-login .wrap { grid-template-columns: 1fr; padding: 8px; margin: 8px auto; }
  #pg-app .wrap   { grid-template-columns: 1fr; padding: 0 6px; margin: 6px auto; }
  #promo-col, #left-col, #right-col { display: none; }

  /* Header */
  #hdr-top { padding: 5px 10px; }
  #logo { font-size: 22px; }
  #hdr-links { display: none; }
  #hdr-user { font-size: 10px; }
  #hdr-user b { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

  /* Ocultar nav top en app, usar bottom nav */
  #nav-app { display: none !important; }
  #nav-login { flex-wrap: wrap; padding: 0 6px; gap: 1px; }
  #nav-login .ntab { font-size: 9px; padding: 4px 8px; }

  /* Bottom navigation bar */
  #bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(180deg, #3d8c00, #1a4200);
    border-top: 2px solid var(--orange);
    z-index: 500;
    height: 52px;
  }
  .bnav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #aaccff; font-size: 9px; font-weight: bold;
    cursor: pointer; padding: 4px 2px;
    text-transform: uppercase; letter-spacing: .3px;
    border: none; background: none; gap: 2px;
    position: relative;
  }
  .bnav-item:active { background: rgba(255,255,255,.1); }
  .bnav-item.on { color: #ffcc00; }
  .bnav-item .bico { font-size: 18px; line-height: 1; }
  .bnav-item .bbdg {
    position: absolute; top: 4px; right: 18%;
    background: var(--orange); color: #fff;
    font-size: 8px; font-weight: bold;
    padding: 1px 3px; border-radius: 6px;
    display: none;
  }
  .bnav-item .bbdg.on { display: block; }

  /* Space for bottom nav */
  #pg-app { padding-bottom: 58px; }
  #ftr { margin-bottom: 52px; }

  /* Posts */
  .post { border-radius: 0; border-left: none; border-right: none; margin-bottom: 4px; }
  #post-box { border-radius: 0; border-left: none; border-right: none; margin-bottom: 4px; }
  #post-box textarea { min-height: 60px; font-size: 13px; }
  .pbar { gap: 6px; font-size: 12px; }
  .pa { font-size: 11px; }
  .ptxt { font-size: 13px; }
  .pmedia img { max-height: 280px; }

  /* Feed panel */
  #pg-app .pnl { border-radius: 0; border-left: none; border-right: none; }
  #center-col .pnl-t { font-size: 12px; padding: 6px 10px; }

  /* Modals full screen */
  .ov { align-items: flex-end; }
  .mod {
    width: 100% !important; max-width: 100% !important;
    max-height: 92vh; border-radius: 12px 12px 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  .mhdr { border-radius: 12px 12px 0 0; font-size: 14px; padding: 12px 16px; }

  /* Auth panel */
  .pnl { border-radius: 6px; }
  .atb { border-radius: 6px 6px 0 0; }
  .tbtn { font-size: 12px; padding: 8px 16px; }
  .b-full { padding: 10px; font-size: 13px; }
  .f input, .f select, .f textarea { font-size: 14px; padding: 8px; }
  .f label { font-size: 12px; }

  /* Profile sidebar mini */
  #pp-panel { display: none; }

  /* Toast */
  #toast { top: auto; bottom: 62px; right: 8px; left: 8px; max-width: 100%; text-align: center; }
}

/* Ocultar bottom nav en desktop */
#bottom-nav { display: none; }

/* ════════════════════════════════════════════════════════════════
   ESTILOS / ERAS — sobreescriben toda la piel visual manteniendo
   la misma estructura HTML. Se activan con body[data-era="..."].
   ════════════════════════════════════════════════════════════════ */

/* ================================================================
   AERO 2007 — idéntico a la estética de Zipo (mismos azules,
   mismo cristal, mismos brillos), con marca EggsWeb
   ================================================================ */
body[data-era="aero"] {
  font-family: "Segoe UI", "Trebuchet MS", Tahoma, sans-serif !important;
  background: radial-gradient(circle at 15% 10%, #bfe6fd 0%, transparent 40%),
              radial-gradient(circle at 90% 90%, #8fd0ff 0%, transparent 45%),
              linear-gradient(160deg,#2a6db5 0%, #123a63 55%, #081b32 100%) !important;
  background-attachment: fixed !important;
  position: relative;
}
/* orbes flotantes de brillo, igual que en Zipo */
body[data-era="aero"]::before, body[data-era="aero"]::after {
  content: ""; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.05) 60%, transparent 70%);
  filter: blur(1px); opacity: .45;
}
body[data-era="aero"]::before { width: 260px; height: 260px; top: -70px; left: -70px; }
body[data-era="aero"]::after  { width: 180px; height: 180px; bottom: 6%; right: -50px; }

body[data-era="aero"] #hdr {
  background: linear-gradient(180deg, #7fc4f7 0%, #3f9de6 42%, #1c72c4 43%, #14588f 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 3px 10px rgba(0,0,0,.3);
  position: relative; z-index: 2;
}
body[data-era="aero"] #hdr::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)); pointer-events: none;
}
body[data-era="aero"] #logo {
  font-style: normal !important; color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,20,50,.6), 0 0 10px rgba(255,255,255,.3);
  display: inline-flex; align-items: center; gap: 8px;
}
body[data-era="aero"] #logo::before {
  content: "💬"; font-size: 15px; width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(160deg, #eafff5, #3e9be8 45%, #1c72c4 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 8px rgba(111,232,92,.7), 0 1px 0 rgba(255,255,255,.6) inset;
  display: inline-flex; align-items: center; justify-content: center;
}
body[data-era="aero"] #logo span { color: #eaffea !important; }
body[data-era="aero"] .nav { background: linear-gradient(180deg, #3f9de6, #1c72c4) !important; border-top: none !important; position: relative; z-index: 2; }
body[data-era="aero"] .ntab {
  border-radius: 14px !important; margin: 4px 2px; border: 1px solid rgba(255,255,255,.3) !important;
  background: rgba(255,255,255,.08); color: #fff !important; text-shadow: 0 1px 2px rgba(0,20,50,.5);
}
body[data-era="aero"] .ntab:hover { background: rgba(255,255,255,.22) !important; }
body[data-era="aero"] .ntab.on {
  background: rgba(255,255,255,.28) !important; color: #fff !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.4);
}
body[data-era="aero"] .page, body[data-era="aero"] .wrap { position: relative; z-index: 1; }
body[data-era="aero"] .pnl {
  border-radius: 12px !important; border: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(225,241,253,.9)) !important;
  box-shadow: 0 12px 30px rgba(2,20,45,.25), 0 1px 0 rgba(255,255,255,.8) inset;
}
body[data-era="aero"] .pnl-t {
  background: linear-gradient(180deg, #9fd6ff, #3e9be8 55%, #1c72c4) !important;
  border-radius: 12px 12px 0 0; border-bottom: none !important; color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,20,50,.3);
}
body[data-era="aero"] .btn, body[data-era="aero"] .b-full { border-radius: 16px !important; border: none !important; text-shadow: 0 1px 1px rgba(0,20,50,.3); }
body[data-era="aero"] .b-bl, body[data-era="aero"] .b-full {
  background: linear-gradient(180deg, #9fd6ff, #3e9be8 55%, #1c72c4) !important;
  box-shadow: 0 2px 6px rgba(11,61,120,.3), 0 1px 0 rgba(255,255,255,.5) inset;
}
body[data-era="aero"] .b-gy { background: linear-gradient(180deg,#fff,#eaf5ff) !important; border: 1px solid rgba(11,61,120,.2) !important; }
body[data-era="aero"] .post {
  border-radius: 12px !important; border: none !important;
  background: linear-gradient(180deg, #ffffff, #f4f9ff) !important;
  box-shadow: 0 3px 10px rgba(11,61,120,.15);
}
body[data-era="aero"] .pavt, body[data-era="aero"] .fcard img, body[data-era="aero"] .ri img, body[data-era="aero"] .mavt {
  border-radius: 50% !important; border: 2px solid #3e9be8 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 2px 3px rgba(255,255,255,.5);
}
body[data-era="aero"] .mod {
  border-radius: 14px !important; border: none !important; box-shadow: 0 30px 60px rgba(2,20,45,.55), 0 2px 0 rgba(255,255,255,.8) inset;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(230,242,253,.94)) !important;
}
body[data-era="aero"] .mhdr {
  background: linear-gradient(180deg, #7fc4f7, #1c72c4) !important; border-radius: 14px 14px 0 0;
  color: #fff !important; text-shadow: 0 1px 2px rgba(0,20,50,.5);
}
body[data-era="aero"] .tbtn { border-radius: 10px 10px 0 0 !important; }
body[data-era="aero"] .tbtn.on { background: #eaf5ff !important; color: #1c72c4 !important; }
body[data-era="aero"] #ftr { background: linear-gradient(180deg, #163f66, #071c30) !important; border-top: none !important; position: relative; z-index: 2; }
body[data-era="aero"] #toast { background: linear-gradient(180deg, #3e9be8, #1c72c4) !important; border-radius: 10px; border-color: #9fd6ff !important; }
body[data-era="aero"] #pp-wrap { border-radius: 50% !important; border-color: #3e9be8 !important; }
body[data-era="aero"] .dot { box-shadow: 0 0 5px #6fe85c; }
body[data-era="aero"] .f input, body[data-era="aero"] .f select, body[data-era="aero"] .f textarea {
  border: 1px solid rgba(11,61,120,.25) !important; background: linear-gradient(180deg,#fff,#eaf5ff) !important;
  border-radius: 10px !important; box-shadow: 0 1px 2px rgba(255,255,255,.9) inset, 0 1px 3px rgba(11,61,120,.12);
}


/* ================================================================
   90s RETRO — GeoCities, tablas, biseles y Comic Sans
   ================================================================ */
body[data-era="y90s"] {
  font-family: "Comic Sans MS", "Comic Sans", cursive, Tahoma, sans-serif !important;
  background-color: #000033 !important;
  background-image:
    radial-gradient(circle, #ffffff 1px, transparent 1px),
    radial-gradient(circle, #ffffff 1px, transparent 1px) !important;
  background-size: 60px 60px, 90px 90px !important;
  background-position: 0 0, 30px 40px !important;
  background-attachment: fixed !important;
}
body[data-era="y90s"] #hdr {
  background: repeating-linear-gradient(45deg, #ff00ff, #ff00ff 10px, #00ffff 10px, #00ffff 20px) !important;
  border-bottom: 4px ridge #c0c0c0 !important;
}
body[data-era="y90s"] #logo {
  color: #ffff00 !important; text-shadow: 2px 2px 0 #ff0000, -1px -1px 0 #000 !important;
  font-style: normal !important; background:#000033; padding:2px 10px; border:2px double #ffff00;
}
body[data-era="y90s"] #logo span { color: #00ff00 !important; }
body[data-era="y90s"] #hdr-links a, body[data-era="y90s"] #hdr-user a { color: #ffff00 !important; }
body[data-era="y90s"] .nav { background: #c0c0c0 !important; border-top: 4px ridge #c0c0c0 !important; padding: 6px 8px !important; }
body[data-era="y90s"] .ntab {
  background: #ff0000 !important; color: #ffff00 !important; border: 3px outset #ffaaaa !important;
  border-radius: 4px !important; text-shadow: 1px 1px 0 #000;
}
body[data-era="y90s"] .ntab:nth-child(2n) { background: #0000cc !important; border-color: #8888ff !important; }
body[data-era="y90s"] .ntab:nth-child(3n) { background: #008000 !important; border-color: #88ff88 !important; }
body[data-era="y90s"] .ntab.on { background: #ffff00 !important; color: #000 !important; border-style: inset !important; text-shadow: none; }
body[data-era="y90s"] .pnl { background: #ffffcc !important; border: 3px double #000080 !important; border-radius: 0 !important; }
body[data-era="y90s"] .pnl-t {
  background: #000080 !important; color: #ffff00 !important; font-family: "Comic Sans MS", cursive !important;
  border-bottom: none !important;
}
body[data-era="y90s"] .btn, body[data-era="y90s"] .b-full {
  border-radius: 0 !important; font-family: "Comic Sans MS", cursive !important; text-shadow: 1px 1px 0 #000;
}
body[data-era="y90s"] .b-bl, body[data-era="y90s"] .b-full { background: #ff0000 !important; border: 3px outset #ffaaaa !important; color: #ffff00 !important; }
body[data-era="y90s"] .post { background: #fff !important; border: 3px double #000080 !important; border-radius: 0 !important; }
body[data-era="y90s"] .pauth, body[data-era="y90s"] .rn, body[data-era="y90s"] .mfr, body[data-era="y90s"] .sfr { color: #cc00cc !important; }
body[data-era="y90s"] .pavt, body[data-era="y90s"] .fcard img, body[data-era="y90s"] .ri img, body[data-era="y90s"] .mavt {
  border-radius: 0 !important; border: 2px solid #000080 !important;
}
body[data-era="y90s"] .mod { border: 4px ridge #c0c0c0 !important; border-radius: 0 !important; }
body[data-era="y90s"] .mhdr { background: repeating-linear-gradient(45deg,#ff00ff,#ff00ff 8px,#00ffff 8px,#00ffff 16px) !important; color: #000 !important; }
body[data-era="y90s"] .tbtn { border-radius: 0 !important; font-family: "Comic Sans MS", cursive !important; }
body[data-era="y90s"] #ftr { background: #000 !important; color: #888 !important; font-family: "Courier New", monospace !important; border-top: none !important; }
body[data-era="y90s"] #ftr a { color: #aaa !important; }
body[data-era="y90s"] #toast { background: #000 !important; color: #0f0 !important; font-family: "Courier New", monospace !important; border: 2px solid #0f0 !important; border-radius: 0; }
body[data-era="y90s"] #pp-wrap { border-radius: 0 !important; border: 3px solid #000080 !important; }
body[data-era="y90s"] .bdg { animation: era90sBlink 1s step-start infinite; }
@keyframes era90sBlink { 50% { opacity: 0; } }

/* ================================================================
   MINIMALISTA — paleta "huevo": crema, amarillo yema, navy oscuro
   (igual a la demo de rediseño: Inter + Space Grotesk)
   ================================================================ */
body[data-era="mini"] {
  font-family: 'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important;
  background: #fef9ec !important;
  background-attachment: fixed !important;
  color: #1a1a2e !important;
}
body[data-era="mini"] #hdr {
  background: #1a1a2e !important; border-bottom: 3px solid #f5c842 !important; box-shadow: none !important;
}
body[data-era="mini"] #logo {
  font-family: 'Space Grotesk', sans-serif !important; color: #fff !important; text-shadow: none !important;
  font-style: italic !important; font-weight: 700; letter-spacing: -0.5px;
}
body[data-era="mini"] #logo span { color: #f5c842 !important; }
body[data-era="mini"] #hdr-links a, body[data-era="mini"] #hdr-user a { color: #ccc !important; }
body[data-era="mini"] #hdr-links a:hover, body[data-era="mini"] #hdr-user a:hover { color: #f5c842 !important; }
body[data-era="mini"] .nav { background: #1a1a2e !important; border-top: none !important; }
body[data-era="mini"] .ntab {
  color: #aab !important; text-transform: uppercase !important; letter-spacing: .5px !important;
  font-weight: 600 !important; font-size: 11px !important; border-radius: 8px !important;
}
body[data-era="mini"] .ntab:hover { background: #0f3460 !important; color: #f5c842 !important; }
body[data-era="mini"] .ntab.on { background: #0f3460 !important; color: #f5c842 !important; border: none !important; }
body[data-era="mini"] .pnl { background: #fff !important; border: 1px solid #e5e0d0 !important; border-radius: 12px !important; box-shadow: 0 2px 16px rgba(26,26,46,.10) !important; }
body[data-era="mini"] .pnl-t {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%) !important; color: #f5c842 !important;
  text-transform: uppercase !important; letter-spacing: .8px !important; font-size: 11px !important;
  border-bottom: none !important; border-radius: 12px 12px 0 0;
}
body[data-era="mini"] .btn, body[data-era="mini"] .b-full { border-radius: 8px !important; border: none !important; box-shadow: none !important; text-shadow: none !important; font-weight: 700 !important; }
body[data-era="mini"] .b-bl, body[data-era="mini"] .b-full {
  background: linear-gradient(135deg, #f5c842 0%, #ff6b35 100%) !important; color: #1a1a2e !important;
}
body[data-era="mini"] .b-bl:hover, body[data-era="mini"] .b-full:hover { opacity: .88; }
body[data-era="mini"] .b-gy { background: #f0ead6 !important; color: #6b7280 !important; border: 1px solid #e5e0d0 !important; }
body[data-era="mini"] .post { background: #fff !important; border: 1px solid #e5e0d0 !important; border-radius: 12px !important; box-shadow: 0 2px 16px rgba(26,26,46,.10) !important; }
body[data-era="mini"] .post:hover { box-shadow: 0 4px 24px rgba(26,26,46,.14) !important; }
body[data-era="mini"] .pauth, body[data-era="mini"] .rn, body[data-era="mini"] .mfr, body[data-era="mini"] .sfr { color: #1a1a2e !important; font-weight: 700 !important; }
body[data-era="mini"] .pa { color: #6b7280 !important; }
body[data-era="mini"] .pavt, body[data-era="mini"] .fcard img, body[data-era="mini"] .ri img, body[data-era="mini"] .mavt {
  border-radius: 10px !important; border: 2px solid #f5c842 !important;
}
body[data-era="mini"] .mod { border: 1px solid #e5e0d0 !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(26,26,46,.18) !important; }
body[data-era="mini"] .mhdr { background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%) !important; color: #f5c842 !important; border-bottom: none !important; }
body[data-era="mini"] .mcls { color: #f5c842 !important; }
body[data-era="mini"] .tbtn { border-radius: 8px 8px 0 0 !important; background: #f0ead6 !important; color: #6b7280 !important; border: none !important; font-weight: 600; }
body[data-era="mini"] .tbtn.on { color: #1a1a2e !important; background: #fff !important; }
body[data-era="mini"] #ftr { background: #1a1a2e !important; color: #888 !important; border-top: 3px solid #f5c842 !important; }
body[data-era="mini"] #ftr a { color: #ccc !important; }
body[data-era="mini"] #toast { background: #1a1a2e !important; color: #f5c842 !important; border: none !important; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
body[data-era="mini"] #pp-wrap { border-radius: 14px !important; border: 3px solid #f5c842 !important; }
body[data-era="mini"] .dot { box-shadow: none; background: #22c55e !important; }
body[data-era="mini"] .cmt-inp { background: #f0ead6 !important; border-radius: 0 10px 10px 10px !important; }
body[data-era="mini"] .f input, body[data-era="mini"] .f select, body[data-era="mini"] .f textarea {
  border: 1.5px solid #e5e0d0 !important; background: #fef9ec !important; border-radius: 8px !important;
}
body[data-era="mini"] .f input:focus, body[data-era="mini"] .f textarea:focus { border-color: #f5c842 !important; }