/* App shell aligned with the public asistenca.club visual language. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZg.ttf) format("truetype")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI6fMZg.ttf) format("truetype")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuGKYMZg.ttf) format("truetype")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYMZg.ttf) format("truetype")}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuDyYMZg.ttf) format("truetype")}
body { background:#fff; }
.app { display:block; min-height:100vh; }
.app aside {
  position:sticky;
  top:0;
  inset:auto;
  width:100%;
  height:88px;
  padding:0 max(28px,calc((100vw - 1440px)/2));
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:34px;
  color:#003d6e;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #edf0f2;
  box-shadow:0 8px 32px rgba(0,61,110,.07);
  backdrop-filter:blur(18px);
  z-index:20;
}
.app .logo { width:auto; min-width:225px; height:88px; margin:0; padding:0; border:0; gap:14px; }
.app .logo img { width:58px; height:58px; object-fit:contain; object-position:center; padding:3px; background:#ffcf00; border-radius:12px; box-shadow:0 7px 20px rgba(0,61,110,.16); }
.app .logo span { color:#003d6e; font-weight:900; font-size:15px; }
.app .logo small { color:#005b9f; font-size:8px; }
.app nav { flex:1; display:flex; align-items:center; justify-content:center; gap:4px; padding:0; }
.app nav p { display:none; }
.app nav button {
  width:auto;
  min-height:42px;
  margin:0;
  padding:10px 13px;
  border:0;
  border-radius:10px;
  color:#004578;
  background:transparent;
  font-family:Inter,Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
.app nav button span { margin-left:6px; }
.app nav button:hover { color:#003d6e; background:#fff9dc; transform:none; }
.app nav button.active { color:#003d6e; background:#ffcf00; box-shadow:none; }
.app .aside-foot {
  flex:0 0 auto;
  min-width:215px;
  margin:0;
  padding:8px 10px;
  border:1px solid #e8edf1;
  border-radius:14px;
  background:#f8fafb;
  color:#172033;
}
.app .aside-foot small { color:#667085; }
.app .avatar { width:36px; height:36px; color:#003d6e; }
.app main { min-height:calc(100vh - 88px); background:#f7f9fb; }
.app main>header {
  position:relative;
  top:auto;
  height:142px;
  padding:30px max(38px,calc((100vw - 1370px)/2));
  color:#fff;
  background:linear-gradient(110deg,#003d6e 0%,#005b9f 72%,#006db5 100%);
  box-shadow:none;
  overflow:hidden;
}
.app main>header::before { content:""; position:absolute; width:330px; height:330px; right:9%; top:-210px; border:42px solid rgba(255,207,0,.13); border-radius:50%; }
.app main>header::after { left:max(38px,calc((100vw - 1370px)/2)); bottom:25px; width:62px; height:5px; background:#ffcf00; }
.app main>header .eyebrow { color:#ffcf00; }
.app main>header h1 { color:#fff; font-size:31px; }
.app .header-right { position:relative; z-index:1; }
.app .online { color:#003d6e; background:#ffcf00; }
.app .online i { background:#25a35a; }
.app #theme { display:none; }
.content-wrap { width:min(1370px,100%); margin:0 auto; padding-top:36px; }
.welcome { background:#fff; color:#101828; box-shadow:0 10px 34px rgba(0,61,110,.08); border:1px solid #e9edf0; }
.welcome::before { background:rgba(255,207,0,.22); }
.welcome::after { color:#005b9f; opacity:.06; }
.welcome h2 { color:#003d6e; }
.welcome p { color:#667085; }
.panel,.stat { box-shadow:0 8px 28px rgba(0,61,110,.06); }
.stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#ffcf00; }

@media(max-width:1180px){
  .app aside{gap:12px;padding:0 18px}.app .logo{min-width:190px}.app nav button{padding:10px 9px}.app nav button span{display:none}.app .aside-foot{min-width:190px}
}
@media(max-width:900px){
  .app aside{position:fixed;inset:0 auto 0 0;width:280px;height:100vh;padding:22px 16px;display:flex;flex-direction:column;align-items:stretch;gap:12px;background:#003d6e;color:#fff;transform:translateX(-100%)}
  .app.menu-open aside{transform:none}.app .logo{width:100%;height:72px;min-width:0}.app .logo span{color:#fff}.app .logo small{color:#ffcf00}.app nav{width:100%;display:block}.app nav p{display:block}.app nav button{width:100%;color:#d2e1ec;text-align:left;margin:4px 0;padding:12px 15px}.app nav button span{display:inline}.app nav button.active{color:#003d6e}.app .aside-foot{width:100%;min-width:0;margin-top:auto;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);color:#fff}.app main{min-height:100vh}.app main>header{height:116px;padding:22px 20px}.app main>header::after{left:20px;bottom:17px}.app #menu{display:block;color:#fff}.content-wrap{padding-top:24px}
}