/* ═══════════════════════════════════════════════
   mobile.css — Mobile additions for Blogify
   Loaded AFTER styles.css — only ADDS, never overrides
   ═══════════════════════════════════════════════ */

/* ── FIX: Topbar with 2 rows needs auto height (PC + mobile) ── */
.topbar[style*="flex-direction"]{
  height:auto !important;
  min-height:56px;
}

/* ── Bottom Navigation (mobile only) ── */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:60px;
  background:var(--surface,#fff);
  border-top:1px solid var(--border,#e2e8f0);
  z-index:200;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.bottom-nav-inner{
  display:flex;height:100%;align-items:stretch;
}
.bottom-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--text-2,#64748b);font-size:10px;font-weight:500;
  border:none;background:none;cursor:pointer;padding:4px 0;position:relative;
  -webkit-tap-highlight-color:transparent;
  font-family:var(--font-b,system-ui,sans-serif);
}
.bottom-nav-item.active{color:var(--accent,#0d9488);}
.bottom-nav-item.active::before{
  content:'';position:absolute;top:0;left:20%;right:20%;height:2.5px;
  background:var(--accent,#0d9488);border-radius:0 0 2px 2px;
}
.bottom-nav-icon{font-size:18px;line-height:1;}

@media(max-width:768px){
  .bottom-nav{display:block;}
  .page{padding-bottom:80px !important;}
  #v-landing .page{padding-bottom:20px !important;}
}

/* ── Mobile Menu (slide-in from "Más" button) ── */
.mobile-menu-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.mobile-menu-overlay.open{opacity:1;visibility:visible;}
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:280px;max-width:85vw;
  background:var(--surface,#fff);z-index:501;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;
  box-shadow:-4px 0 20px rgba(0,0,0,.1);
}
.mobile-menu-overlay.open .mobile-menu{transform:translateX(0);}
.mobile-menu-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border,#e2e8f0);
  flex-shrink:0;
}
.mobile-menu-header .mm-email{
  font-size:13px;color:var(--text-2,#64748b);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mm-close{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:none;background:var(--raised,#f1f5f9);color:var(--text-2);
  cursor:pointer;font-size:16px;
}
.mobile-menu-body{padding:12px;flex:1;}
.mobile-menu-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:8px;color:var(--text-1,#1a202c);
  font-size:15px;font-weight:500;cursor:pointer;
  border:none;background:none;width:100%;text-align:left;
  font-family:var(--font-b,system-ui,sans-serif);
  transition:background .15s;
}
.mobile-menu-item:hover,.mobile-menu-item:active{background:var(--raised,#f1f5f9);}
.mobile-menu-item.mm-active{background:var(--accent-bg,#ccfbf1);color:var(--accent,#0d9488);}
.mobile-menu-footer{
  padding:16px 20px;border-top:1px solid var(--border,#e2e8f0);flex-shrink:0;
}

/* ── Mobile topbar adjustments ── */
@media(max-width:768px){
  .topbar-nav{display:none !important;}
  .topbar{height:auto !important;min-height:48px;padding:8px 16px !important;flex-direction:row !important;gap:0 !important;padding-bottom:8px !important;}
  .topbar > div:first-child{padding-bottom:0 !important;}
  .topbar-brand{font-size:1rem;}
  .topbar-email{display:none;}
  .toast-zone{bottom:72px !important;}
}

body.mm-open{overflow:hidden;}

@media(max-width:768px){
  .form-input,.form-select,.form-textarea{font-size:16px !important;}
  .btn{min-height:40px;}
  .btn-sm{min-height:34px;}
}