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

/*  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 var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
#loading p{color:rgba(255,255,255,.4);font-size:var(--fs-sm);}

/*  APP SHELL  */
#app{display:none;}   /* altura e casca: .cl-app em padrao.css */
.view,.page{padding-bottom:32px;}
.view{padding-bottom:0;}

/* Selo do grupo do usuário (cabeçalho do PAD e da Administração) */
.role-tag{font-size:var(--fs-xs);font-weight:600;padding:2px 7px;border-radius:var(--r-xs);}
.r-admin{background:var(--mustard-dim);color:var(--mustard-text);}
.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);}

/* 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(--accent-dim);border-bottom:2px solid var(--accent);}
.sc-lbl{font-size:var(--fs-xs);color:var(--text2);}
.sc-val{font-family:var(--font);font-size:var(--fs-num);line-height:1;}
.sc-sub{font-size:var(--fs-xs);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:100%;width:100%;margin:0;padding:24px 28px;}