/* ============================================================
   RodoWall PAD — Estrutura Principal (Shell)
   ------------------------------------------------------------
   Loading, app shell, topbar, barra de estatísticas e conteúdo.
   ============================================================ */

/*  LOADING  */
#loading{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--mustard);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
#loading p{color:rgba(255,255,255,.4);font-size:13px;}

/*  APP SHELL  */
#app{display:none;height:100vh;flex-direction:column;overflow:hidden;}
.view,.page{padding-bottom:32px;}
.view{padding-bottom:0;}

/* TOPBAR */
.topbar{height:52px;flex-shrink:0;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 20px;gap:10px;z-index:100;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.tb-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-right:4px;}
.tb-logo-img{height:32px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(181,145,27,.4));}
.tb-brand{display:flex;flex-direction:column;line-height:1;border-left:1px solid rgba(255,255,255,.1);padding-left:10px;}
.tb-name{font-family:"Montserrat";font-size:15px;letter-spacing:3px;color:var(--mustard);}
.tb-sub{font-size:8px;color:var(--text2);letter-spacing:1px;text-transform:uppercase;}
.tb-sep{width:1px;height:20px;background:rgba(255,255,255,.1);flex-shrink:0;}
.tb-nav{display:flex;gap:1px;flex:1;overflow-x:auto;}
.tb-nav::-webkit-scrollbar{height:0;}
.tn{padding:6px 12px;border-radius:6px;border:none;background:none;color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.tn:hover{background:var(--surface2);color:var(--text);}
.tn.active{background:var(--mustard-dim);color:var(--mustard);font-weight:600;}
.tn .nb{background:var(--red);color:#fff;border-radius:9px;padding:1px 6px;font-size:9px;font-weight:700;}
.tb-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;}
.user-pill{display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:4px 10px;}
.up-name{font-size:12px;font-weight:500;color:#fff;}
.role-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;padding:2px 7px;border-radius:4px;}
.r-admin{background:var(--mustard-dim);color:var(--mustard);}
.r-torre{background:var(--blue-dim);color:var(--blue);}
.r-ssma{background:var(--green-dim);color:var(--green);}
.r-instrutor{background:var(--purple-dim);color:var(--purple);}
.r-diretoria{background:var(--gray-dim);color:var(--gray);}
.logout-btn{background:none;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:5px 10px;color:rgba(255,255,255,.45);font-size:11px;cursor:pointer;transition:all .15s;}
.logout-btn:hover{border-color:var(--red);color:#ff6b6b;}

/* STATS BAR */
.statsbar{display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-bottom:2px solid var(--border);flex-shrink:0;}
.sc{padding:12px 20px;border-right:1px solid var(--border);cursor:pointer;transition:all .15s;display:flex;flex-direction:column;gap:3px;position:relative;}
.sc:last-child{border-right:none;}
.sc:hover{background:var(--surface2);}
.sc.active-filter{background:var(--mustard-dim);border-bottom:2px solid var(--mustard);}
.sc-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text2);}
.sc-val{font-family:"Montserrat";font-size:24px;line-height:1;}
.sc-sub{font-size:10px;color:var(--text2);}

/* CONTENT */
.content{flex:1;overflow:hidden;display:flex;position:relative;}
.view{display:none;width:100%;height:100%;}
.view.active{display:flex;}
.page{display:none;width:100%;height:100%;overflow-y:auto;background:var(--bg);}
.page.active{display:block;}
.page-inner{max-width:1020px;margin:0 auto;padding:24px 28px;}