/* Componentes compartidos — BirdieLab
   Nav pública, footer público y app-shell (topbar+sidebar de las páginas internas).
   Usa las variables de tokens.css — cárgalo antes que este archivo. */

/* ── NAV PÚBLICA ── */
.bl-promo{background:var(--g);color:rgba(255,255,255,.85);text-align:center;padding:.4rem 1rem;font-size:.77rem;letter-spacing:.03em}
.bl-promo strong{color:var(--am)}
nav.bl-nav{position:sticky;top:0;z-index:200;background:rgba(250,250,248,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:0 5vw;height:62px;display:flex;align-items:center;gap:1.25rem}
.nav-logo{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.3rem;color:var(--g);text-decoration:none;white-space:nowrap;flex-shrink:0}
.nav-logo span{color:var(--am)}
.nav-startup{display:inline-block;background:var(--am);color:var(--amt);font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:.15rem .5rem;border-radius:100px;margin-left:.4rem;vertical-align:middle}
.nav-links{display:flex;gap:1.5rem;list-style:none;flex:1;justify-content:center}
.nav-links a{text-decoration:none;color:var(--muted);font-size:.88rem;font-weight:500;transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--g)}
.nav-links a.accent{color:var(--g);font-weight:700}
.nav-ctas{display:flex;gap:.6rem;flex-shrink:0;align-items:center}
.btn-n{padding:.42rem 1rem;border-radius:var(--rsm);font-size:.82rem;font-weight:600;cursor:pointer;text-decoration:none;transition:all .2s;white-space:nowrap;border:none;font-family:inherit}
.btn-n-out{border:1.5px solid var(--g);color:var(--g);background:transparent}
.btn-n-out:hover{background:var(--gm)}
.btn-n-fill{background:var(--g);color:#fff;border:none}
.btn-n-fill:hover{background:var(--gmt)}
.nav-cta-avatar{width:22px;height:22px;border-radius:50%;background:var(--g);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex-shrink:0}
.nav-cta-user{display:inline-flex;align-items:center;gap:.45rem;background:var(--gm);color:var(--g);padding:.42rem 1rem;border-radius:var(--rsm);font-size:.82rem;font-weight:700;text-decoration:none}
.nav-cta-logout{padding:.42rem .9rem;border-radius:var(--rsm);font-size:.82rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:#fff;color:var(--muted);transition:all .2s;font-family:inherit}
.nav-cta-logout:hover{color:#E24B4A;border-color:#E24B4A}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;border:none;background:none;padding:4px;flex-shrink:0}
.hamburger span{display:block;width:22px;height:2px;background:var(--gris);border-radius:2px}
@media(max-width:900px){
  .nav-links,.nav-ctas{display:none}
  .hamburger{display:flex}
}

/* ── FOOTER PÚBLICO ── */
footer.bl-footer{background:var(--gris);color:rgba(255,255,255,.6);padding:3rem 5vw 2rem}
.footer-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-logo{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.25rem;color:#fff;margin-bottom:.65rem}
.footer-logo span{color:var(--am)}
.footer-tag{font-size:.86rem;line-height:1.6;max-width:230px;margin-bottom:.9rem}
.footer-col h4{font-size:.8rem;font-weight:600;color:#fff;margin-bottom:.9rem;text-transform:uppercase;letter-spacing:.06em}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.footer-col a{color:rgba(255,255,255,.6);text-decoration:none;font-size:.86rem;transition:color .2s}
.footer-col a:hover{color:var(--g2)}
.footer-bottom{max-width:1280px;margin:1.4rem auto 0;display:flex;align-items:center;justify-content:space-between;font-size:.78rem}
@media(max-width:700px){
  .footer-inner{grid-template-columns:1fr;gap:1.75rem}
  .footer-bottom{flex-direction:column;gap:.4rem;text-align:center}
}
footer.footer-min{display:block;text-align:center;padding:1.5rem;font-size:.78rem;color:var(--muted)}
footer.footer-min a{color:var(--g);text-decoration:none}

/* ── APP SHELL (topbar + sidebar de páginas internas) ── */
.bl-topbar{background:var(--g);height:56px;display:flex;align-items:center;padding:0 1.5rem;gap:1rem;position:sticky;top:0;z-index:100}
.tb-logo{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.15rem;color:#fff;text-decoration:none;flex-shrink:0}
.tb-logo span{color:var(--am)}
.tb-spacer{flex:1}
.tb-user{display:flex;align-items:center;gap:.65rem;color:rgba(255,255,255,.85);font-size:.85rem}
.tb-avatar{width:32px;height:32px;border-radius:50%;background:var(--am);color:var(--amt);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}
.tb-name{font-weight:600}
.tb-role{font-size:.72rem;color:rgba(255,255,255,.6);margin-top:1px}
.tb-divider{width:1px;height:20px;background:rgba(255,255,255,.2)}
.tb-btn{color:rgba(255,255,255,.75);text-decoration:none;font-size:.82rem;padding:.3rem .65rem;border-radius:var(--rsm);transition:all .2s;border:1px solid transparent;cursor:pointer;background:none;font-family:inherit}
.tb-btn:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.tb-btn.danger:hover{background:#E24B4A;border-color:#E24B4A;color:#fff}
.hamburger-dash{display:none;background:none;border:none;cursor:pointer;padding:4px;flex-direction:column;gap:4px}
.hamburger-dash span{display:block;width:20px;height:2px;background:rgba(255,255,255,.8);border-radius:2px}
.bl-layout{display:flex;flex:1;min-height:0}
.bl-sidebar{width:var(--sidebar);background:#fff;border-right:1px solid var(--border);padding:1.5rem 1rem;display:flex;flex-direction:column;gap:.3rem;flex-shrink:0;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto}
.sidebar-section{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:.25rem .6rem;margin-top:1rem;margin-bottom:.25rem}
.sidebar-section:first-of-type{margin-top:0}
.nav-item{display:flex;align-items:center;gap:.65rem;padding:.62rem .75rem;border-radius:var(--rsm);color:var(--muted);text-decoration:none;font-size:.88rem;font-weight:500;transition:all .2s;cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.nav-item:hover{background:var(--humo);color:var(--gris)}
.nav-item.active{background:var(--gm);color:var(--g);font-weight:700}
.nav-item .ni-ico{font-size:1rem;flex-shrink:0;width:20px;text-align:center}
.nav-badge{margin-left:auto;background:var(--g);color:#fff;font-size:.65rem;font-weight:700;padding:.1rem .45rem;border-radius:100px}
.content{flex:1;padding:2rem;overflow-y:auto;min-width:0}
body.bl-app{font-family:'Inter',sans-serif;background:var(--fondo);color:var(--gris);min-height:100vh;display:flex;flex-direction:column;margin:0}
@media(max-width:700px){
  .bl-sidebar{display:none;position:fixed;inset:56px 0 0 0;z-index:50;width:100%;height:calc(100vh - 56px);overflow-y:auto;flex-direction:column}
  .bl-sidebar.open{display:flex}
  .hamburger-dash{display:flex}
  .bl-layout{flex-direction:column}
  .content{padding:1rem}
  .tb-name,.tb-role,.tb-divider{display:none}
  .tb-btn:not(.danger){display:none}
}
@media(max-width:400px){.bl-topbar .tb-logo{font-size:.95rem}}