/* Shared app-shell styles: sidebar nav + topbar, used by dashboard and
   all future authenticated pages (scanner, coach, diary, progress...) */

.app-shell{display:flex;min-height:100vh;}

.sidebar{
  width:230px;flex-shrink:0;border-right:1px solid var(--glass-border);
  padding:26px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  animation:none !important; /* el sidebar comparte la clase .glass, que trae una
    animación de entrada pensada para tarjetas; esa animación pisaba la regla que
    lo oculta/muestra en móvil, así que aquí la desactivamos explícitamente */
}
.sidebar .logo{font-family:var(--font-display);font-weight:800;font-size:18px;display:flex;align-items:center;gap:8px;padding:0 8px;margin-bottom:30px;}
.sidebar .logo .dot{width:8px;height:8px;border-radius:50%;background:var(--lime);}
.sidebar nav{display:flex;flex-direction:column;gap:4px;flex:1;}
.sidebar nav a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-s);
  font-size:14.5px;color:var(--text-1);transition:all var(--dur-fast) var(--ease);
}
.sidebar nav a:hover{background:var(--glass);color:var(--text-0);}
.sidebar nav a.active{background:var(--glass-hi);color:var(--lime);font-weight:600;}
.sidebar .premium-cta{
  padding:16px;border-radius:var(--radius-m);background:linear-gradient(135deg, rgba(200,255,77,0.14), rgba(63,214,192,0.10));
  border:1px solid var(--glass-border);font-size:13px;margin-top:12px;
}
.sidebar .premium-cta a{color:var(--lime);font-weight:600;display:inline-block;margin-top:8px;}

.main-area{flex:1;padding:32px 40px;max-width:1100px;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;}
.topbar h1{font-size:24px;}
.topbar-actions{display:flex;gap:10px;align-items:center;}

.widget-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:26px;}
.widget{padding:22px;}
.widget .top-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.widget .top-row .label{font-size:13px;color:var(--text-1);font-weight:500;}
.widget .top-row .icon{font-size:18px;}
.widget .big-value{font-family:var(--font-data);font-size:28px;font-weight:600;}
.widget .sub{font-size:12.5px;color:var(--text-2);margin-top:4px;}

.mobile-topbar{
  display:none;position:fixed;top:0;left:0;right:0;height:56px;
  align-items:center;gap:14px;padding:0 18px;background:var(--bg-0);
  border-bottom:1px solid var(--glass-border);z-index:60;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.mobile-topbar-title{font-family:var(--font-display);font-weight:800;color:var(--text-0);font-size:16px;letter-spacing:0.2px;}
.mobile-menu-btn{
  background:var(--glass);border:1px solid var(--glass-border);color:var(--text-0);
  font-size:18px;line-height:1;cursor:pointer;padding:8px 11px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease;
}
.mobile-menu-btn:active{background:var(--glass-hi);}
.sidebar-overlay{display:none;}

@media (max-width:900px){
  .mobile-topbar{display:flex;}
  .sidebar{
    display:flex;position:fixed;top:0;left:0;height:100vh;width:78vw;max-width:280px;
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:80;
    background:var(--bg-0);border-right:1px solid var(--glass-border);
    box-shadow:0 0 40px rgba(0,0,0,0.35);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-overlay.open{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:70;
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    animation:fadeIn .2s ease;
  }
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
  .main-area{padding:72px 18px 22px;}
  .topbar-actions{display:none;} /* ya están en Ajustes; en móvil quitamos la barra duplicada */
}