:root {
  --blue: #1B3A6B;
  --blue-dark: #102344;
  --blue-pale: #EEF2FF;
  --blue-mid: #B8D0F4;
  --red: #C2410C;
  --red-light: #FFF7ED;
  --yellow: #B45309;
  --yellow-light: #FFFBEB;
  --green: #0D9488;
  --green-light: #F0FDFA;
  --green-dark: #0F766E;
  --navy: #060D18;
  --navy2: #111E35;
  --gray-50: #F8FAFB;
  --gray-100: #F0F2F6;
  --gray-200: #E2E5EC;
  --gray-300: #CBD0DB;
  --gray-400: #94A1B5;
  --gray-500: #647084;
  --gray-600: #475468;
  --gray-700: #334055;
  --gray-800: #1E293B;
  --gray-900: #0F172A;
  --white: #FFFFFF;
  --shadow-xs: 0 1px 2px rgba(6,13,24,0.04);
  --shadow-sm: 0 1px 3px rgba(6,13,24,0.05),0 1px 2px rgba(6,13,24,0.02);
  --shadow-md: 0 6px 20px rgba(6,13,24,0.07),0 2px 4px rgba(6,13,24,0.02);
  --shadow-lg: 0 14px 44px rgba(6,13,24,0.10),0 4px 8px rgba(6,13,24,0.03);
  --font: 'Inter', sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --nav-h: 60px;
  --bot-h: 68px;
  --r: 8px;
  --r-lg: 16px;
  --r-xl: 26px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--gray-50);color:var(--gray-800);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-weight:400;line-height:1.5}

/* ========== LOGIN ========== */
#loginPage{
  min-height:100vh;display:flex;flex-direction:row;align-items:stretch;
  background:var(--navy);overflow:hidden;position:relative;
}
/* mobile: stack vertically */
@media(max-width:899px){
  #loginPage{ flex-direction:column; align-items:center; justify-content:center; padding:32px 20px; }
  .login-art-panel{ display:none !important; }
  .login-wrap{ max-width:380px; width:100%; }
}
/* desktop: side by side */
@media(min-width:900px){
  #loginPage {
    padding-right: 270px;  /* 5cm right of previous position */
    align-items: center;
  }
  .login-art-panel {
    flex: 1;
    align-self: stretch;
  }
  .login-wrap{
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;    /* further 30% height reduction */
    background: rgba(15,23,42,0.97);
    border-radius: 18px;
    position: relative;
    z-index: 2;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  }
  .login-brand{ margin-bottom:10px; }
  .login-brand-icon{ width:52px;height:52px; }
  .login-brand-name{ font-size:22px; }
  .login-card{ padding: 14px 16px; }
  .field{ margin-bottom: 8px; }
  .field input{ padding: 9px 12px; font-size:13px; }
  .login-btn{ padding: 11px; font-size:14px; }
}
.login-wrap{position:relative;z-index:1;width:100%;max-width:380px}
.login-brand{text-align:center;margin-bottom:32px}
.login-brand-icon{
  width:72px;height:72px;border-radius:22px;margin:0 auto 16px;
  background:#0F172A;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 32px rgba(15,23,42,0.3),0 0 0 6px rgba(15,23,42,0.08);
}
.login-brand-icon i{font-size:28px;color:white}
.login-brand-name{font-family:var(--font-display);font-size:28px;font-weight:800;color:white;letter-spacing:-0.04em}
.login-brand-name span{color:#F59E0B}
.login-brand-sub{font-size:12px;color:rgba(255,255,255,0.4);margin-top:6px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.login-card{background:white;border-radius:20px;padding:28px 24px;box-shadow:0 24px 60px rgba(0,0,0,0.3)}
.login-card-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--gray-900);margin-bottom:2px}
.login-card-sub{font-size:13px;color:var(--gray-400);margin-bottom:24px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.field-wrap{position:relative}
.field input{
  width:100%;padding:12px 14px;border:1.5px solid var(--gray-200);border-radius:var(--r);
  font-family:var(--font);font-size:14px;color:var(--gray-800);background:var(--gray-50);
  outline:none;transition:all .18s;
}
.field input:focus{border-color:var(--blue);background:white;box-shadow:0 0 0 3px rgba(27,58,107,0.1)}
.field-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray-400);font-size:14px;padding:4px}
.login-btn{
  width:100%;padding:14px;border:none;border-radius:var(--r);
  background:#0F172A;color:white;
  font-family:var(--font-display);font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 4px 16px rgba(15,23,42,0.35);transition:all .15s;letter-spacing:-.01em;
}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(15,23,42,0.45)}
.login-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(15,23,42,0.25)}
.login-err{display:none;margin-top:10px;background:var(--red-light);border:1px solid #FECACA;border-radius:var(--r);padding:10px 14px;font-size:13px;color:var(--red);font-weight:500}
.login-footer{margin-top:20px;text-align:center;font-size:11px;color:rgba(255,255,255,0.3);letter-spacing:.05em}


/* ===== LOGIN ART PANEL ===== */
.login-art-panel { position:relative; }

/* Orbs */
.lap-orb {
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:0.18; pointer-events:none;
}
.lap-orb1 {
  width:420px;height:420px;
  background:radial-gradient(circle,#0D9488,transparent);
  top:-80px;left:-80px;
  animation:lapOrb1 12s ease-in-out infinite alternate;
}
.lap-orb2 {
  width:360px;height:360px;
  background:radial-gradient(circle,#1B3A6B,transparent);
  bottom:-60px;right:-60px;
  animation:lapOrb2 15s ease-in-out infinite alternate;
}
.lap-orb3 {
  width:260px;height:260px;
  background:radial-gradient(circle,#B45309,transparent);
  top:40%;right:10%;
  animation:lapOrb3 10s ease-in-out infinite alternate;
}
.lap-orb4 {
  width:200px;height:200px;
  background:radial-gradient(circle,#C2410C,transparent);
  bottom:20%;left:15%;
  animation:lapOrb1 18s ease-in-out infinite alternate-reverse;
}
@keyframes lapOrb1 {
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(60px,40px) scale(1.2)}
}
@keyframes lapOrb2 {
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-50px,-30px) scale(1.15)}
}
@keyframes lapOrb3 {
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(30px,50px) scale(0.9)}
}

/* Floating puzzle pieces */
.lap-puzzle {
  position:absolute; opacity:0.35;
  animation:lapFloat 8s ease-in-out infinite;
  filter:drop-shadow(0 0 8px currentColor);
}
.lap-puzzle:nth-child(2){ animation-delay:-2s; animation-duration:10s; }
.lap-puzzle:nth-child(3){ animation-delay:-4s; animation-duration:7s; }
.lap-puzzle:nth-child(4){ animation-delay:-1s; animation-duration:12s; }
.lap-puzzle:nth-child(5){ animation-delay:-6s; animation-duration:9s; }
.lap-puzzle:nth-child(6){ animation-delay:-3s; animation-duration:11s; }
@keyframes lapFloat {
  0%,100%{transform:translateY(0) rotate(0deg)}
  33%{transform:translateY(-18px) rotate(8deg)}
  66%{transform:translateY(10px) rotate(-5deg)}
}

/* Ribbon icon */
.lap-ribbon {
  animation:lapRibbon 4s ease-in-out infinite;
  filter:drop-shadow(0 4px 24px rgba(27,58,107,0.4));
}
@keyframes lapRibbon {
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.08) rotate(3deg)}
}

/* Headline */
.lap-headline {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(28px,3.2vw,42px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-0.04em;
  color:white;
  margin:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.lap-word {
  display:inline-block;
  animation:lapWord 0.8s cubic-bezier(.34,1.56,.64,1) both;
  animation-fill-mode:forwards;
  opacity:0;
}
.lap-w1{animation-delay:0.1s;color:white}
.lap-w2{animation-delay:0.25s;
  background:linear-gradient(90deg,#16A34A,#2563EB);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.lap-w3{animation-delay:0.4s;color:rgba(255,255,255,.85)}
.lap-w4{animation-delay:0.55s;
  background:linear-gradient(90deg,#D97706,#DC2626);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
@keyframes lapWord {
  from{opacity:0;transform:translateY(24px) scale(0.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Bar */
.lap-bar {
  animation:lapBar 1s ease forwards;
  animation-delay:0.7s;
  opacity:0;
}
@keyframes lapBar {
  from{opacity:0;transform:scaleX(0);transform-origin:left}
  to{opacity:1;transform:scaleX(1);transform-origin:left}
}

/* Body text */
.lap-body {
  font-family:'Inter',sans-serif;
  font-size:clamp(14px,1.2vw,16px);
  line-height:1.7;
  text-align:justify;
  color:rgba(255,255,255,0.65);
  margin:0 0 14px;
  opacity:0;
  animation:lapFade 0.8s ease forwards;
}
.lap-p1{ animation-delay:0.8s; }
.lap-p2{ animation-delay:1.0s; }
@keyframes lapFade {
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* Feature pills */
.lap-pills { opacity:0; animation:lapFade .8s ease forwards; animation-delay:1.2s; }
.lap-pill {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:6px 8px; border-radius:20px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.75);
  font-family:'Inter',sans-serif; font-size:clamp(11px,0.9vw,13px); font-weight:600;
  transition:all .2s;
  cursor:default;
  flex:1;
  text-align:center;
}
}
.lap-pill i { color:var(--pc,white); font-size:11px; }
.lap-pill:hover {
  background:rgba(255,255,255,0.1);
  border-color:var(--pc,rgba(255,255,255,.3));
  color:white;
  transform:translateY(-2px);
}

/* ========== APP SHELL ========== */
#app{display:none;flex-direction:column;min-height:100vh} #app.visible{display:flex !important}

/* ========== TOPNAV ========== */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);
  background:var(--navy);display:flex;align-items:center;
  padding:0 16px;gap:12px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  box-shadow:0 2px 24px rgba(0,0,0,0.25);
}
.nav-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.nav-brand-icon{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.nav-brand-icon i{font-size:14px;color:white}
.nav-brand-name{font-family:var(--font-display);font-size:17px;font-weight:800;color:white;letter-spacing:-.03em;white-space:nowrap}
.nav-brand-name span{color:#FBBF24}
.nav-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;position:relative}
.nav-icon-btn{
  width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:14px;color:rgba(255,255,255,0.7);transition:all .15s;
  position:relative;
}
.nav-icon-btn:hover{background:rgba(255,255,255,0.12);color:white}
.notif-dot{
  position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;
  background:var(--red);border:1.5px solid var(--navy);
}

/* Dropdown */
.nav-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;width:210px;
  background:white;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,0.16),0 2px 8px rgba(0,0,0,0.08);
  border:1px solid var(--gray-200);z-index:500;overflow:hidden;
  display:none;animation:fadeIn .15s ease;
}
.nav-dropdown.open{display:block}
.nav-dd-header{padding:14px 16px 12px;background:var(--navy);color:white}
.nav-dd-name{font-family:var(--font-display);font-size:13px;font-weight:700}
.nav-dd-role{font-size:11px;opacity:.5;margin-top:2px}
.nav-dd-sep{height:1px;background:var(--gray-100);margin:4px 0}
.nav-dd-item{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  border:none;background:none;cursor:pointer;font-family:var(--font);
  font-size:13px;font-weight:500;color:var(--gray-700);width:100%;text-align:left;
  transition:background .12s;
}
.nav-dd-item:hover{background:var(--gray-50)}
.nav-dd-item i{width:14px;color:var(--gray-400);font-size:12px}
.nav-dd-item.danger{color:var(--red)}
.nav-dd-item.danger i{color:var(--red)}
.nav-dd-item.danger:hover{background:var(--red-light)}

/* ========== MAIN CONTENT ========== */
.main{padding-bottom:32px}
.page{display:none}
.page.active{display:block}

/* ========== BOTTOM NAV ========== */
.botnav{
  position:fixed;bottom:0;left:0;right:0;z-index:200;height:var(--bot-h);
  background:var(--navy);border-top:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;justify-content:space-around;
  padding:0 4px 8px;box-shadow:0 -4px 24px rgba(0,0,0,0.3);
}
.bot-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 12px;
  border-radius:10px;cursor:pointer;transition:all .15s;min-width:52px;
  border:none;background:none;color:rgba(255,255,255,0.35);font-family:var(--font);
}
.bot-item:hover{color:rgba(255,255,255,0.7)}
.bot-item.active{color:#FBBF24}
.bot-item .bi{font-size:19px;line-height:1}
.bot-item span{font-size:10px;font-weight:600;letter-spacing:.02em}

/* ========== SECTION WIDTH LIMITS ========== */
.page-content-wrap { max-width: 680px; margin: 0 auto; }
.pg-header { max-width: 680px; margin-left: auto; margin-right: auto; }
/* ========== SHARED COMPONENTS ========== */
.pg-header{padding:20px 16px 8px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pg-title{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--gray-900);letter-spacing:-.03em;line-height:1.2}
.pg-sub{font-size:13px;color:var(--gray-400);margin-top:3px;font-weight:400}
.pg-action{
  display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r);
  background:var(--navy);color:white;border:none;font-family:var(--font);
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  box-shadow:0 2px 8px rgba(6,13,24,0.25);transition:all .15s;flex-shrink:0;
}
.pg-action:hover{background:#111E35;transform:translateY(-1px)}
.pg-action:active{transform:translateY(0);box-shadow:0 1px 4px rgba(6,13,24,0.15)}
.pg-action i{font-size:12px}

.card{background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);box-shadow:var(--shadow-sm)}
.card-pad{padding:16px}

.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:64px 24px;text-align:center;
}
.empty-icon{width:64px;height:64px;border-radius:18px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.empty-icon i{font-size:26px;color:var(--gray-400)}
.empty-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--gray-700);margin-bottom:6px}
.empty-sub{font-size:14px;color:var(--gray-400);max-width:260px;line-height:1.6}
.empty-btn{
  margin-top:20px;padding:11px 22px;border-radius:var(--r);background:var(--navy);
  color:white;border:none;font-family:var(--font);font-size:14px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 2px 8px rgba(6,13,24,0.25);transition:all .15s;
}
.empty-btn:hover{background:#111E35}
.empty-btn:active{transform:scale(0.97)}
.empty-btn i{font-size:12px}

/* Form components */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--gray-600);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.form-input,.form-select,.form-textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--gray-200);border-radius:var(--r);
  font-family:var(--font);font-size:14px;color:var(--gray-800);background:white;
  outline:none;transition:all .15s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,58,107,0.1)}
.form-section-hdr{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:10px 0 0;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r) var(--r) 0 0;font-size:12px;font-weight:700;color:var(--gray-700);cursor:pointer;user-select:none;transition:background .15s}
.form-section-hdr:hover{background:var(--gray-100)}
.form-section-body{padding:10px 12px;border:1px solid var(--gray-200);border-top:none;border-radius:0 0 var(--r) var(--r);margin-bottom:2px}

.form-textarea{resize:vertical;min-height:90px;line-height:1.6}
.form-select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A1B5' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-primary{
  width:100%;padding:13px;border:none;border-radius:var(--r);
  background:var(--navy);color:white;
  font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 2px 10px rgba(6,13,24,0.2);transition:all .15s;letter-spacing:.01em;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(6,13,24,0.3)}
.btn-primary:active{transform:translateY(0);box-shadow:0 1px 4px rgba(6,13,24,0.15)}
.btn-secondary{
  width:100%;padding:12px;border:1.5px solid var(--gray-200);border-radius:var(--r);
  background:white;color:var(--gray-700);font-family:var(--font);font-size:14px;
  font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .15s;
}
.btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-300)}
.btn-secondary:active{background:var(--gray-100)}
.btn-danger{background:var(--red);color:white;border:none;padding:8px 14px;border-radius:var(--r);font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-danger:hover{background:#9A3412}
.btn-danger:active{transform:scale(0.97)}

/* Tags */
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.tag-blue{background:var(--blue-pale);color:var(--blue);border:1px solid var(--blue-mid)}
.tag-green{background:var(--green-light);color:var(--green-dark);border:1px solid #99F6E4}
.tag-red{background:var(--red-light);color:var(--red);border:1px solid #FED7AA}
.tag-yellow{background:var(--yellow-light);color:var(--yellow);border:1px solid #FDE68A}
.tag-gray{background:var(--gray-100);color:var(--gray-600);border:1px solid var(--gray-200)}

/* Progress bar */
.progress-bar{background:var(--gray-100);border-radius:4px;height:6px;overflow:hidden}
.progress-fill{height:100%;border-radius:4px;background:var(--blue);transition:width .8s ease}

/* Stat cards */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px 16px}
.stat-card{background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);padding:14px;box-shadow:var(--shadow-sm)}
.stat-num{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--gray-900);letter-spacing:-.04em;line-height:1}
.stat-label{font-size:12px;color:var(--gray-400);margin-top:4px;font-weight:500}
.stat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.stat-icon i{font-size:15px}

/* List items */
.list-item{
  background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);
  padding:14px 16px;margin:0 16px 10px;box-shadow:var(--shadow-xs);
  cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:12px;
}
.list-item:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:var(--blue-mid)}
.list-avatar{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:16px;font-weight:800;color:white;flex-shrink:0}
.list-info{flex:1;min-width:0}
.list-name{font-size:14px;font-weight:600;color:var(--gray-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-sub{font-size:12px;color:var(--gray-400);margin-top:2px;font-weight:400}
.list-end{display:flex;align-items:center;gap:8px;flex-shrink:0}
.list-chevron{font-size:12px;color:var(--gray-300)}

/* ATA Reuniões */
.ata-type-btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:20px;border:1.5px solid var(--gray-200);
  background:white;color:var(--gray-600);font-family:var(--font);
  font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:all .15s;flex-shrink:0;
}
.ata-type-btn:hover { border-color:var(--blue);color:var(--blue);background:var(--blue-pale); }
.ata-type-btn.active { background:var(--blue);border-color:var(--blue);color:white; }
.ata-card {
  background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);
  padding:14px 16px;margin-bottom:10px;cursor:pointer;
  transition:all .15s;box-shadow:var(--shadow-xs);
}
.ata-card:hover { box-shadow:var(--shadow-md);transform:translateY(-1px); }
.ata-tipo-badge {
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.06em;
}
/* Section header reutilizado dentro dos modais de ATA */
.ata-section-hdr {
  font-size:10px;font-weight:800;color:var(--gray-400);
  text-transform:uppercase;letter-spacing:.07em;
  padding:10px 0 6px;border-bottom:2px solid var(--gray-100);
  margin-bottom:12px;margin-top:18px;
  display:flex;align-items:center;gap:6px;
}
.ata-section-hdr i { color:var(--blue); }
.ata-picker-btn {
  display:flex;align-items:center;gap:12px;width:100%;
  padding:14px 16px;border-radius:14px;border:1.5px solid var(--gray-200);
  background:white;cursor:pointer;font-family:var(--font);text-align:left;
  transition:all .15s;
}
.ata-picker-btn:hover { border-color:var(--blue);box-shadow:var(--shadow-md);transform:translateY(-1px); }
.ata-pb-icon {
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.ata-pb-text { flex:1;min-width:0; }
.ata-pb-title { font-size:14px;font-weight:700;color:var(--gray-900); }
.ata-pb-sub { font-size:11px;color:var(--gray-400);margin-top:2px; }
/* Modelo G — PDI */
.mg-section-hdr {
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:13px;font-weight:800;
  color:white;background:var(--blue);
  border-radius:var(--r);padding:10px 14px;margin:18px 0 12px;
  letter-spacing:.01em;
}
.mg-section-hdr i { font-size:12px; }
.mg-eval-row {
  background:var(--gray-50);border:1px solid var(--gray-200);
  border-radius:var(--r);padding:10px 12px;
}
.mg-eval-label {
  font-size:11px;font-weight:700;color:var(--gray-600);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;
}
.mg-eval-area { min-height:58px;font-size:13px;margin:0;border:1px solid var(--gray-200) }
.mg-area-label {
  font-size:11px;font-weight:700;color:#7C3AED;
  margin-bottom:5px;padding-left:2px;
}
.mg-area-ta { min-height:60px;font-size:13px;border:1px solid var(--gray-200) }
.mg-check-label {
  display:inline-flex;align-items:center;padding:6px 10px;
  border:1.5px solid var(--gray-200);border-radius:8px;
  font-size:12px;font-weight:600;color:var(--gray-700);cursor:pointer;
  background:white;transition:all .15s;user-select:none;
}
.mg-check-label:hover { border-color:#7C3AED;background:#F5F3FF;color:#7C3AED; }
/* Modelo G list card */
.mg-card {
  background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);
  padding:14px 16px;margin-bottom:10px;cursor:pointer;
  transition:all .15s;box-shadow:var(--shadow-xs);
  display:flex;align-items:flex-start;gap:12px;
}
.mg-card:hover { box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:#C4B5FD; }

/* Atendimento da Família card */
.af-card { background:white; border-radius:var(--r-lg); border:1px solid var(--gray-200); padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:all .15s; box-shadow:var(--shadow-xs); }
.af-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:#FBCFE8; }

/* Agenda Calendar Grid */
.agenda-cal-wrap { background:white; border-radius:var(--r-lg); border:1px solid var(--gray-200); box-shadow:var(--shadow-sm); overflow:hidden; min-width:360px; }
.agenda-cal-header { display:grid; border-bottom:2px solid var(--gray-200); }
.agenda-cal-col-head { padding:8px 4px; text-align:center; font-size:10px; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:.06em; }
.agenda-cal-col-head.today { color:var(--blue); }
.agenda-cal-col-head .day-num { font-size:16px; font-weight:800; color:var(--gray-800); font-family:var(--font-display); display:block; margin-top:2px; }
.agenda-cal-col-head.today .day-num { background:var(--blue); color:white; border-radius:50%; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; margin:2px auto 0; }
.agenda-cal-body { display:grid; }
.agenda-cal-row { display:grid; border-top:1px solid var(--gray-100); }
.agenda-cal-time { padding:6px 8px; font-size:10px; font-weight:600; color:var(--gray-400); text-align:right; white-space:nowrap; border-right:1px solid var(--gray-100); min-width:44px; }
.agenda-cal-cell { border-right:1px solid var(--gray-100); min-height:36px; padding:2px; position:relative; cursor:pointer; transition:background .12s; }
.agenda-cal-cell:last-child { border-right:none; }
.agenda-cal-cell:hover { background:var(--blue-pale); }
.agenda-cal-cell.off { background:var(--gray-50); cursor:default; }
.agenda-cal-cell.off:hover { background:var(--gray-50); }
.agenda-event { background:var(--blue); color:white; border-radius:5px; padding:2px 5px; font-size:10px; font-weight:600; margin-bottom:2px; cursor:pointer; line-height:1.3; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.agenda-event:hover { opacity:.85; }
/* Equipe Paica cards */
.ep-card { background:white; border-radius:var(--r-lg); border:1px solid var(--gray-200); padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:all .15s; box-shadow:var(--shadow-xs); }
.ep-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--blue-mid); }
.ep-avatar { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:17px; font-weight:800; color:white; flex-shrink:0; }
.ep-info { flex:1; min-width:0; }
.ep-name { font-size:14px; font-weight:600; color:var(--gray-900); }
.ep-area { font-size:12px; color:var(--gray-400); margin-top:2px; }
.ep-phone { font-size:12px; color:var(--blue); margin-top:2px; display:flex; align-items:center; gap:4px; }

/* Divider */
.divider{height:1px;background:var(--gray-100);margin:8px 16px}

/* Section label */
.section-label{font-size:11px;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:.08em;padding:0 16px 8px}

/* Modal / Overlay */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.58);z-index:700;
  display:flex;align-items:flex-end;justify-content:center;backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-sheet{
  background:white;border-radius:16px;
  width:calc(100% - 32px);max-width:480px;max-height:90vh;
  overflow-y:auto;
  transform:translateY(24px) scale(0.97);
  opacity:0;
  transition:transform .22s cubic-bezier(.34,1.3,.64,1),opacity .18s;
  box-shadow:0 24px 64px rgba(0,0,0,0.22),0 4px 16px rgba(0,0,0,0.1);
}
.modal-overlay.open{align-items:center;}
.modal-overlay.open .modal-sheet{transform:translateY(0) scale(1);opacity:1}
.modal-handle{display:none}
.modal-handle{width:36px;height:4px;border-radius:2px;background:var(--gray-200);margin:12px auto 8px}
.modal-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--gray-900);padding:12px 18px;border-bottom:1px solid var(--gray-100)}
.modal-body{padding:14px 18px 18px}
.modal-body .form-group{margin-bottom:12px}
.modal-body .form-input,.modal-body .form-select,.modal-body .form-textarea{padding:9px 12px;font-size:13px}
.modal-body .form-label{font-size:10.5px;margin-bottom:4px}
.modal-body .form-row{gap:10px}

/* Full screen overlay */
.full-screen{
  position:fixed;inset:0;z-index:400;background:var(--gray-50);
  display:none;flex-direction:column;
}
.full-screen.open{display:flex}
@media(min-width:900px){
  #studentDetailScreen.open{
    align-items:center;justify-content:center;background:rgba(0,0,0,0.55);
  }
  #studentDetailScreen.open > .full-topbar{
    max-width:720px;width:100%;border-radius:16px 16px 0 0;overflow:hidden;
  }
  #studentDetailScreen.open > .full-body{
    max-width:720px;width:100%;background:var(--gray-50);
    height:calc(100vh - 54px);border-radius:0 0 16px 16px;overflow-y:auto;
  }
}
.full-topbar{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:var(--navy);border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;
}
.full-back{
  width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:white;font-size:14px;flex-shrink:0;transition:all .15s;
}
.full-back:hover{background:rgba(255,255,255,0.18)}
.full-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:white;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.full-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* Toast */
.toast{
  position:fixed;bottom:calc(var(--bot-h) + 12px);left:16px;right:16px;
  background:var(--gray-900);color:white;border-radius:12px;padding:13px 16px;
  display:flex;align-items:center;gap:10px;z-index:999;box-shadow:var(--shadow-lg);
  transform:translateY(120px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.toast.show{transform:translateY(0);opacity:1}
.toast i{font-size:15px;color:#4ADE80;flex-shrink:0}
.toast span{font-size:13px;font-weight:500}

/* Upload zone */
.upload-zone{
  border:2px dashed var(--gray-200);border-radius:var(--r-lg);padding:28px 20px;
  text-align:center;cursor:pointer;transition:all .15s;position:relative;
  background:white;
}
.upload-zone:hover,.upload-zone.drag{border-color:var(--blue);background:var(--blue-pale)}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-zone i{font-size:24px;color:var(--gray-300);display:block;margin-bottom:8px}
.upload-title{font-size:14px;font-weight:600;color:var(--gray-600);margin-bottom:4px}
.upload-sub{font-size:12px;color:var(--gray-400)}
.file-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.file-item{display:flex;align-items:center;gap:10px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r);padding:9px 12px}
.file-item i{font-size:16px;color:var(--blue)}
.file-name{flex:1;font-size:13px;font-weight:500;color:var(--gray-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-size{font-size:11px;color:var(--gray-400);flex-shrink:0}
.file-rm{background:none;border:none;cursor:pointer;color:var(--gray-400);font-size:14px;padding:2px;transition:color .12s}
.file-rm:hover{color:var(--red)}

/* Checkbox / Toggle */
.toggle-wrap{display:flex;align-items:center;gap:10px;cursor:pointer}
.toggle-input{width:40px;height:22px;border-radius:11px;background:var(--gray-300);position:relative;transition:background .2s;flex-shrink:0;border:none;cursor:pointer}
.toggle-input.on{background:var(--blue)}
.toggle-input::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:white;top:3px;left:3px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.toggle-input.on::after{transform:translateX(18px)}

/* Range slider */
.slider{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--gray-200);outline:none;cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--blue);cursor:pointer;box-shadow:0 1px 4px rgba(27,58,107,0.3)}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeIn .3s ease}

/* ========== GUARDIAN ROWS ========== */
.guardian-row { border-bottom: 1px solid var(--gray-100); padding-bottom: 6px; }
.guardian-row:last-child { border-bottom: none; }

/* ========== COMM TABS ========== */
.comm-tab-btn {
  display:flex;align-items:center;gap:6px;padding:8px 14px;border:1.5px solid #E2E5EC;
  border-radius:var(--r);background:white;font-family:var(--font);font-size:12px;
  font-weight:600;color:var(--gray-500);cursor:pointer;white-space:nowrap;
  transition:all .15s;
}
.comm-tab-btn:hover { border-color:var(--blue);color:var(--blue);background:var(--blue-pale); }
.comm-tab-btn.active { background:var(--navy);color:white;border-color:var(--navy);box-shadow:0 2px 8px rgba(6,13,24,0.2); }
.comm-tab-btn.active i { color: #93C5FD; }
.comm-tab-btn i { font-size:11px; }

/* ========== WA COMPOSER ========== */
.wa-composer-card {
  background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);
  padding:18px;box-shadow:var(--shadow-sm);margin-bottom:4px;
}
.wa-composer-header {
  display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:15px;
  font-weight:700;color:#128C7E;margin-bottom:14px;
}
.wa-composer-header i { font-size:20px; }
.wa-send-btn {
  padding:11px 16px;border-radius:var(--r);
  background:#128C7E;color:white;border:none;
  font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 2px 8px rgba(18,140,126,0.25);transition:all .15s;
}
.wa-send-btn:hover { transform:translateY(-1px);box-shadow:0 4px 14px rgba(18,140,126,0.35); }
.wa-send-btn:active { transform:scale(0.97); }
.wa-send-btn i { font-size:16px; }

/* ========== MURAL CARD ========== */
.mural-card {
  background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);
  padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-xs);
  position:relative;overflow:hidden;
  animation:muralSlideIn .4s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes muralSlideIn {
  from { opacity:0;transform:translateY(16px) scale(.97); }
  to   { opacity:1;transform:translateY(0) scale(1); }
}
.mural-card::before {
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;
}
.mural-card.info::before  { background:var(--blue); }
.mural-card.aviso::before { background:var(--yellow); }
.mural-card.urgente::before { background:var(--red); }
.mural-card-badge {
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:11px;font-weight:700;margin-bottom:7px;
}
.mural-card.info .mural-card-badge { background:var(--blue-pale);color:var(--blue); }
.mural-card.aviso .mural-card-badge { background:var(--yellow-light);color:var(--yellow); }
.mural-card.urgente .mural-card-badge { background:var(--red-light);color:var(--red); }
.mural-card-msg { font-size:14px;color:var(--gray-700);line-height:1.6; }
.mural-card-footer { font-size:11px;color:var(--gray-400);margin-top:8px;display:flex;align-items:center;gap:8px;justify-content:space-between; }

/* ========== AGENDA CARD ========== */
.agenda-card {
  background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);
  padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-xs);
  display:flex;gap:14px;align-items:flex-start;cursor:pointer;transition:all .15s;
}
.agenda-card:hover { box-shadow:var(--shadow-md);border-color:var(--blue-mid); }
.agenda-card-date {
  flex-shrink:0;width:46px;text-align:center;
  background:var(--blue-pale);border-radius:10px;padding:8px 4px;
  border:1px solid var(--blue-mid);
}
.agenda-card-day { font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--blue);line-height:1; }
.agenda-card-mon { font-size:10px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.05em;margin-top:2px; }
.agenda-card-body { flex:1;min-width:0; }
.agenda-card-title { font-size:14px;font-weight:600;color:var(--gray-900);margin-bottom:4px; }
.agenda-card-sub { font-size:12px;color:var(--gray-400); }

/* ========== WA MSG SAVED ========== */
.wa-msg-item {
  background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);
  padding:12px 14px;margin-bottom:8px;box-shadow:var(--shadow-xs);
}
.wa-msg-item-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:6px; }
.wa-msg-item-to { font-size:12px;font-weight:700;color:var(--gray-700); }
.wa-msg-item-date { font-size:11px;color:var(--gray-400); }
.wa-msg-item-body { font-size:13px;color:var(--gray-600);line-height:1.5; }

/* ========== ANIMATIONS ========== */
@keyframes muralPop {
  0%   { transform:scale(1); }
  40%  { transform:scale(1.04); }
  100% { transform:scale(1); }
}


.hero-banner{
  margin:16px;border-radius:var(--r-xl);
  background:var(--navy);
  padding:20px;color:white;position:relative;overflow:hidden;
  box-shadow:0 8px 28px rgba(15,23,42,0.4);
}
.hero-banner::after{
  content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;
  border-radius:50%;background:rgba(27,58,107,0.12);
}
.hero-banner::before{
  content:'';position:absolute;bottom:-30px;right:60px;width:100px;height:100px;
  border-radius:50%;background:rgba(251,191,36,0.06);
}
.hero-greeting{font-size:12px;font-weight:500;opacity:.55;margin-bottom:4px;text-transform:uppercase;letter-spacing:.08em}
.hero-name{font-family:var(--font-display);font-size:20px;font-weight:800;margin-bottom:18px;letter-spacing:-.03em}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative;z-index:1}
.hero-stat{background:rgba(255,255,255,0.08);border-radius:10px;padding:12px;border:1px solid rgba(255,255,255,0.1)}
.hero-stat-num{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.04em;line-height:1}
.hero-stat-label{font-size:11px;opacity:.85;margin-top:3px;font-weight:500}

/* Module grid */
.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 16px 16px}
.module-card{
  background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);
  padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;
  box-shadow:var(--shadow-xs);transition:all .15s;
}
.module-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--blue-mid)}
.module-card-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.module-card-icon i{font-size:17px}
.module-card-name{font-size:13px;font-weight:600;color:var(--gray-800);line-height:1.3}
.module-card-sub{font-size:11px;color:var(--gray-400);margin-top:2px;font-weight:400}

/* Activity log */
.act-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--gray-100)}
.act-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.act-text{font-size:13px;color:var(--gray-700);line-height:1.5}
.act-time{font-size:11px;color:var(--gray-400);margin-top:2px;font-weight:400}

/* ========== STUDENTS PAGE ========== */
.student-avatar-colors{--c0:var(--blue);--c1:var(--green);--c2:#C2410C;--c3:#B45309;--c4:#0D9488;--c5:#7C3AED;--c6:#BE185D;--c7:#0369A1}

/* ========== GOALS PAGE ========== */
.goal-card{
  background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);
  padding:14px 16px;margin:0 16px 10px;box-shadow:var(--shadow-xs);
}
.goal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:10px}
.goal-title{font-size:14px;font-weight:600;color:var(--gray-800);line-height:1.4;flex:1}
.goal-domain{font-size:11px;color:var(--gray-400);margin-top:3px;font-weight:400}
.goal-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.goal-pct{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--blue)}
.goal-deadline{font-size:11px;color:var(--gray-400)}

/* ========== REGISTER PAGE ========== */
.quick-btns{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.quick-btn{
  display:flex;align-items:center;gap:8px;padding:12px;border-radius:var(--r);
  border:1.5px solid var(--gray-200);background:white;cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:500;color:var(--gray-700);
  transition:all .15s;
}
.quick-btn:hover,.quick-btn.sel{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}
.quick-btn i{font-size:15px;flex-shrink:0}
.emoji-row{display:flex;gap:6px;flex-wrap:wrap}
.emoji-btn{
  width:44px;height:44px;border-radius:var(--r);border:2px solid var(--gray-200);
  background:white;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.emoji-btn.sel{border-color:var(--blue);background:var(--blue-pale)}

/* ========== IA PAGE ========== */
.ia-hero{
  margin:16px;border-radius:var(--r-xl);
  background:var(--navy);
  padding:20px;color:white;position:relative;overflow:hidden;
}
.ia-hero::after{content:'';position:absolute;right:-20px;top:-20px;width:100px;height:100px;border-radius:50%;background:rgba(27,58,107,0.12)}

.line 913 old:
.ia-hero::after{content:'';position:absolute;right:-20px;top:-20px;width:100px;height:100px;border-radius:50%;background:rgba(37,99,235,0.15)}
.ia-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:5px 12px;font-size:11px;font-weight:600;margin-bottom:10px;letter-spacing:.03em}
.ia-hero-title{font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.ia-hero-sub{font-size:13px;opacity:.6;line-height:1.5}
.ia-mode-row{display:flex;gap:6px;padding:0 16px 12px;overflow-x:auto;scrollbar-width:none}
.ia-mode-row::-webkit-scrollbar{display:none}
.ia-mode-btn{
  flex-shrink:0;display:flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:20px;border:1.5px solid var(--gray-200);background:white;
  font-family:var(--font);font-size:12px;font-weight:600;color:var(--gray-500);
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.ia-mode-btn:hover{border-color:var(--blue);color:var(--blue)}
.ia-mode-btn.active{background:var(--blue);color:white;border-color:var(--blue);box-shadow:0 4px 12px rgba(27,58,107,0.25)}
.ia-mode-btn i{font-size:12px}
.ia-config-card{background:white;margin:0 16px 12px;border-radius:var(--r-lg);border:1px solid var(--gray-200);padding:14px;box-shadow:var(--shadow-xs)}
.ia-config-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ia-config-row:last-child{margin-bottom:0}
.ia-config-label{font-size:11px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;width:68px;flex-shrink:0}
.ia-prompt-area{background:white;margin:0 16px 12px;border-radius:var(--r-lg);border:1px solid var(--gray-200);padding:14px;box-shadow:var(--shadow-xs)}
.ia-prompt-area textarea{
  width:100%;border:1.5px solid var(--gray-200);border-radius:var(--r);padding:11px 13px;
  font-family:var(--font);font-size:14px;resize:none;outline:none;min-height:80px;
  transition:border-color .15s;line-height:1.6;color:var(--gray-800);
}
.ia-prompt-area textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,58,107,0.08)}
.ia-prompt-row{display:flex;gap:8px;margin-top:10px;align-items:flex-start;flex-wrap:wrap}
.ia-chips{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none;padding-right:8px;min-width:0;flex-wrap:wrap;max-height:90px;overflow-y:auto}
.ia-chips::-webkit-scrollbar{display:none}
.ia-chip{
  flex-shrink:0;padding:5px 10px;border-radius:20px;border:1px solid var(--gray-200);
  background:var(--gray-50);font-family:var(--font);font-size:10px;font-weight:600;
  color:var(--gray-500);cursor:pointer;transition:all .15s;white-space:nowrap;
}
.ia-chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-pale)}
.ia-gen-btn{
  flex-shrink:0;padding:11px 18px;border-radius:var(--r);
  background:var(--navy);
  color:white;border:none;font-family:var(--font);font-size:13px;font-weight:600;
  cursor:pointer;display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 12px rgba(27,58,107,0.3);transition:all .15s;white-space:nowrap;
}
.ia-gen-btn:hover{transform:translateY(-1px)}
.ia-gen-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.ia-gen-btn i{font-size:12px}

/* IA Result */
.ia-result-header{padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--gray-100)}
.ia-result-badge{background:var(--blue);color:white;border-radius:20px;padding:3px 10px;font-size:10px;font-weight:700;letter-spacing:.04em}
.ia-result-body{padding:16px;font-size:14px;color:var(--gray-700);line-height:1.8}
.ia-result-footer{padding:12px 16px;border-top:1px solid var(--gray-100);display:flex;gap:8px;flex-wrap:wrap}
.ia-result-action{
  padding:8px 14px;border-radius:var(--r);border:1.5px solid var(--gray-200);
  background:white;font-family:var(--font);font-size:12px;font-weight:600;
  color:var(--gray-600);cursor:pointer;display:flex;align-items:center;gap:5px;
  transition:all .15s;
}
.ia-result-action:hover{border-color:var(--blue);color:var(--blue)}
.ia-result-action.primary{background:var(--blue);color:white;border-color:var(--blue);flex:1;justify-content:center}
.ia-result-action.primary:hover{background:var(--blue-dark)}

/* ========== MORE PAGE ========== */
.settings-group{background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);overflow:hidden;margin:0 16px 12px;box-shadow:var(--shadow-xs)}
.settings-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background .12s}
.settings-row:last-child{border-bottom:none}
.settings-row:hover{background:var(--gray-50)}
.settings-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.settings-icon i{font-size:14px}
.settings-label{flex:1;font-size:14px;font-weight:500;color:var(--gray-800)}
.settings-value{font-size:12px;color:var(--gray-400)}
.settings-chevron{font-size:11px;color:var(--gray-300)}

/* Report cards */
.report-card{
  background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);
  padding:14px 16px;margin:0 16px 10px;box-shadow:var(--shadow-xs);
  display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .15s;
}
.report-card:hover{box-shadow:var(--shadow-md);border-color:var(--blue-mid)}
.report-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.report-icon i{font-size:18px}
.report-info{flex:1;min-width:0}
.report-title{font-size:14px;font-weight:600;color:var(--gray-800)}
.report-sub{font-size:12px;color:var(--gray-400);margin-top:2px}
.report-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;flex-shrink:0}

/* ===== 360° STUDENT TABS ===== */
.sd-tab {
  display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;
  border:none;background:none;font-family:var(--font);font-size:12px;font-weight:600;
  color:var(--gray-400);cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;
}
.sd-tab i { font-size:11px; }
.sd-tab:hover { color:var(--blue); background:var(--blue-pale); }
.sd-tab.active { color:var(--blue); background:var(--blue-pale); }
#sd360Tabs::-webkit-scrollbar { display:none; }

/* ===== AUDIO RECORDING ===== */
.audio-item {
  display:flex;align-items:center;gap:10px;background:var(--gray-50);
  border:1px solid var(--gray-200);border-radius:var(--r);padding:10px 12px;
}
.audio-item audio { flex:1;height:32px;min-width:0; }
.audio-item-label { font-size:12px;color:var(--gray-500);font-weight:500;white-space:nowrap; }

/* ===== VIDEO ITEM ===== */
.video-item {
  background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r);
  overflow:hidden;
}
.video-item video { width:100%;max-height:200px;display:block;background:#000; }
.video-item-footer { padding:8px 12px;display:flex;align-items:center;justify-content:space-between; }
.video-item-label { font-size:12px;color:var(--gray-500);font-weight:500; }

/* ===== RECORDING PULSE ===== */
@keyframes recPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,0.4); }
  50% { box-shadow:0 0 0 8px rgba(220,38,38,0); }
}
.recording { animation:recPulse 1.2s ease infinite; }


/* ===== 360° CENTER BUTTON ===== */
.bot-360 { position:relative; margin-top:-20px; }
.bot-360-ring {
  width:52px;height:52px;border-radius:50%;
  background:var(--navy) !important;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(27,58,107,0.5),0 0 0 3px rgba(245,158,11,0.3);
  border:2px solid rgba(255,255,255,0.15);
  transition:all .2s;
}
.bot-360:hover .bot-360-ring { transform:scale(1.08); box-shadow:0 6px 24px rgba(27,58,107,0.6); }

/* ===== 360° STUDENT SELECTOR MODAL ===== */
.center360-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:350;
  display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(6px);
}
.center360-overlay.open { opacity:1;pointer-events:all; }
/* 360 sheet max-width */
@media(min-width:640px){ .center360-overlay.open { display:flex; align-items:center; justify-content:center; }
  .center360-sheet { max-width:700px; border-radius:16px 16px 0 0; } }
.center360-sheet {
  background:white;border-radius:24px 24px 0 0;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.32,0,.67,0);
  max-height:85vh;overflow-y:auto;
}
.center360-overlay.open .center360-sheet { transform:translateY(0); }
.center360-hero {
  background:var(--navy);
  padding:20px 20px 16px;text-align:center;position:relative;overflow:hidden;
}
.center360-hero::after { content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:rgba(27,58,107,0.08); }
.center360-badge {
  display:inline-flex;align-items:center;gap:6px;background:rgba(251,191,36,0.15);
  border:1px solid rgba(251,191,36,0.3);border-radius:20px;padding:5px 14px;
  font-size:11px;font-weight:700;color:#FBBF24;letter-spacing:.05em;margin-bottom:10px;
}
.center360-title { font-family:var(--font-display);font-size:18px;font-weight:800;color:white;letter-spacing:-.03em; }
.center360-sub { font-size:12px;color:rgba(255,255,255,0.5);margin-top:4px; }

/* ===== AUDIO/VIDEO RECORDING ===== */
.audio-item {
  display:flex;align-items:center;gap:10px;background:var(--gray-50);
  border:1px solid var(--gray-200);border-radius:var(--r);padding:10px 12px;
}
.audio-item audio { flex:1;height:32px;min-width:0; }
.video-item { background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r);overflow:hidden; }
.video-item video { width:100%;max-height:200px;display:block;background:#000; }
.video-item-footer { padding:8px 12px;display:flex;align-items:center;justify-content:space-between; }
.video-item-label { font-size:12px;color:var(--gray-500);font-weight:500; }

@keyframes recPulse { 0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0.4)}50%{box-shadow:0 0 0 8px rgba(220,38,38,0)} }
.recording { animation:recPulse 1.2s ease infinite; }

/* ===== 360° STUDENT TABS ===== */
.sd-tab {
  display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;
  border:none;background:none;font-family:var(--font);font-size:12px;font-weight:600;
  color:var(--gray-400);cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;
}
.sd-tab i { font-size:11px; }
.sd-tab:hover { color:var(--blue);background:var(--blue-pale); }
.sd-tab.active { color:var(--blue);background:var(--blue-pale); }
#sd360Tabs::-webkit-scrollbar { display:none; }


/* ===== TIMELINE ===== */
.tl-item { display:flex;gap:12px;padding:0 0 20px;position:relative; }
.tl-item::before { content:'';position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--gray-100); }
.tl-item:last-child::before { display:none; }
.tl-dot { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;border:2px solid white;box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.tl-content { flex:1;background:white;border-radius:var(--r);border:1px solid var(--gray-200);padding:12px;cursor:pointer;transition:all .15s; }
.tl-content:hover { border-color:var(--blue-mid);box-shadow:var(--shadow-sm); }
.tl-date { font-size:11px;color:var(--gray-400);font-weight:500;margin-bottom:3px; }
.tl-title { font-size:13px;font-weight:700;color:var(--gray-800); }
.tl-desc { font-size:12px;color:var(--gray-500);margin-top:4px;line-height:1.5; }

/* ===== SENSORIAL TAGS ===== */
.sens-tag { padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;border:1.5px solid var(--gray-200);background:white;color:var(--gray-600);display:inline-flex;align-items:center;gap:5px; }
.sens-tag.hyper.active { background:#FEF2F2;border-color:#FCA5A5;color:var(--red); }
.sens-tag.hypo.active { background:#EFF6FF;border-color:var(--blue-mid);color:var(--blue); }

/* ===== ABA RECORDS ===== */
.aba-record { background:white;border:1px solid var(--gray-200);border-radius:var(--r);padding:12px;margin-bottom:8px;cursor:pointer; }
.aba-record:hover { border-color:var(--blue-mid); }
.aba-acc { font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--blue); }

/* ===== DIARY ENTRIES ===== */
.diary-entry { background:white;border:1px solid var(--gray-200);border-radius:var(--r);padding:12px;margin-bottom:8px; }
.diary-entry-date { font-size:11px;color:var(--gray-400);font-weight:600;margin-bottom:6px; }
.mood-dot { width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px; }

/* ===== RADAR CHART ===== */
.radar-slider-group { background:var(--gray-50);border-radius:var(--r);padding:10px;border:1px solid var(--gray-100); }
.radar-slider-label { font-size:11px;font-weight:600;color:var(--gray-600);display:flex;justify-content:space-between;margin-bottom:5px; }
.radar-score-card { background:white;border-radius:var(--r);padding:12px;border:1px solid var(--gray-200);text-align:center; }
.radar-score-num { font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-.03em; }
.radar-score-label { font-size:11px;color:var(--gray-400);margin-top:2px;font-weight:500; }


/* ===== MORE MENU ===== */
/* reuses center360-overlay and center360-sheet classes */

/* ===== COMMUNICATION ===== */
.comm-card { background:white;border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:14px;margin:0 16px 10px;box-shadow:var(--shadow-xs);cursor:pointer;transition:all .15s; }
.comm-card:hover { box-shadow:var(--shadow-md);border-color:var(--blue-mid); }
.comm-origin-badge { font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.04em; }
.comm-msg { font-size:13px;color:var(--gray-700);line-height:1.6;margin-top:6px; }
.comm-date { font-size:11px;color:var(--gray-400);margin-top:5px; }

/* ===== ROTINA VISUAL ===== */
.rotina-card {
  background:white;border-radius:var(--r-xl);border:2px solid var(--gray-200);
  padding:16px;margin:0 0 10px;display:flex;align-items:center;gap:14px;
  cursor:pointer;transition:all .2s;position:relative;overflow:hidden;
}
.rotina-card:hover { transform:translateY(-2px);box-shadow:var(--shadow-md); }
.rotina-card.done { opacity:.6; }
.rotina-card.done::after { content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.5); }
.rotina-icon-wrap { width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.rotina-icon-wrap i { font-size:22px;color:white; }
.rotina-time { font-size:11px;color:var(--gray-400);font-weight:600;margin-bottom:2px; }
.rotina-title-card { font-size:15px;font-weight:700;color:var(--gray-800); }
.rotina-pts { font-size:11px;font-weight:700;color:var(--yellow);display:flex;align-items:center;gap:3px; }
.rotina-check { width:32px;height:32px;border-radius:50%;border:2.5px solid var(--gray-300);background:white;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;margin-left:auto; }
.rotina-check.done { background:var(--green);border-color:var(--green); }
.rotina-check.done i { color:white; }

/* ===== DOCUMENTS ===== */
.doc-card { background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);padding:14px;margin:0 16px 10px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-xs);transition:all .15s; }
.doc-card:hover { box-shadow:var(--shadow-md);border-color:var(--blue-mid); }
.doc-type-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.doc-type-icon i { font-size:18px; }
.doc-title-main { font-size:13px;font-weight:600;color:var(--gray-800); }
.doc-meta { font-size:11px;color:var(--gray-400);margin-top:2px; }

/* ===== BI CHARTS ===== */
.bi-kpi { background:white;border-radius:var(--r-lg);border:1px solid var(--gray-200);padding:14px;box-shadow:var(--shadow-xs); }
.bi-kpi-num { font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--gray-900); }
.bi-kpi-label { font-size:11px;color:var(--gray-400);margin-top:4px;font-weight:500; }
.bi-kpi-trend { font-size:11px;font-weight:700;display:flex;align-items:center;gap:3px;margin-top:3px; }

/* ===== PREDICTION CARDS ===== */
.pred-card { background:white;border-radius:var(--r);border-left:4px solid;padding:12px 14px;margin-bottom:8px; }
.pred-card.warning { border-color:var(--yellow);background:var(--yellow-light); }
.pred-card.alert { border-color:var(--red);background:var(--red-light); }
.pred-card.positive { border-color:var(--green);background:var(--green-light); }
.pred-card.info { border-color:var(--blue);background:var(--blue-pale); }
.pred-icon { font-size:13px;flex-shrink:0; }
.pred-text { font-size:13px;color:var(--gray-700);line-height:1.5;flex:1; }


/* ======================================================
   LAYOUT — MOBILE FIRST, DESKTOP SIDEBAR FIXED
   ====================================================== */
:root {
  --sb: 240px;   /* sidebar width */
  --tb: 54px;    /* topbar height */
}

/* ── SIDEBAR ─────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sb);
  height: 100vh;
  background: #0B1628;
  z-index: 600;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  transform: translateX(-100%);
  transition: transform .25s ease;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar.open { transform: translateX(0); }

/* ── OVERLAY (mobile only) ───────────────────────────── */
.sb-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 599;
}
.sb-overlay.on { display: block; }

/* ── TOPBAR ──────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--tb);
  background: white;
  border-bottom: 1px solid #E2E5EC;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  z-index: 500;
  box-shadow: 0 1px 4px rgba(6,13,24,.04);
}
#tbMenuBtn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: none; border: 1.5px solid #E2E5EC;
  border-radius: 8px; cursor: pointer;
  font-size: 15px; color: #475468;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: all .15s;
}
#tbMenuBtn:hover { background: #F0F2F6; }
#tbMenuBtn:active { transform: scale(0.94); }
.tb-title {
  flex: 1; min-width: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 800;
  color: #0F172A; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 8px; border: 1.5px solid #E2E5EC;
  background: white; cursor: pointer;
  font-size: 14px; color: #647084;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: all .15s;
}
.tb-btn:hover { background: #F0F2F6; }
.tb-btn:active { transform: scale(0.93); }
.tb-360 { background: var(--navy); border-color: var(--navy); color: white; }
.tb-360:hover { background: var(--navy2); }

/* ── MAIN (mobile: no left margin, just topbar offset) ── */
.main {
  margin-top: var(--tb) !important;
  margin-left: 0 !important;
  padding-bottom: 32px !important;
  min-height: calc(100vh - var(--tb));
}

/* Hide legacy nav */
.topnav, .botnav { display: none !important; }

/* ── DESKTOP ≥ 900px ─────────────────────────────────── */
@media (min-width: 900px) {
  /* Sidebar always visible — no transform needed */
  .sidebar {
    transform: translateX(0) !important;
    transition: none !important;
    z-index: 300 !important;     /* BELOW topbar & modals on desktop */
  }
  /* Overlay never shown on desktop */
  .sb-overlay { display: none !important; }
  .sb-close    { display: none !important; }
  #tbMenuBtn   { display: none !important; }
  /* Topbar starts after sidebar */
  .topbar { left: var(--sb); z-index: 400; }
  /* Main area pushed right */
  .main {
    margin-left: var(--sb) !important;
    margin-top: var(--tb) !important;
  }
}

/* ── SIDEBAR INTERNALS ───────────────────────────────── */
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.sb-logo {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: rgba(20,184,166,.15);
  display: flex; align-items: center; justify-content: center;
}
.sb-logo i { font-size: 15px; color: #14B8A6; }
.sb-title {
  font-family: 'Plus Jakarta Sans',sans-serif;
  font-size: 15px; font-weight: 800; color: white; letter-spacing: -.03em; line-height: 1.1;
}
.sb-title span { color: #14B8A6; }
.sb-sub { font-size: 10px; color: rgba(255,255,255,.25); font-weight: 500; margin-top:1px; }
.sb-close {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: rgba(255,255,255,.3);
  font-size: 17px; cursor: pointer; margin-left: auto;
  padding: 5px; border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.sb-close:hover { color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); }
.sb-sep {
  padding: 10px 16px 5px;
  font-size: 10px; font-weight: 800;
  color: #14B8A6;
  text-transform: uppercase; letter-spacing: .16em;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  transition: color .15s;
}
.sb-sep:hover { color: #5EEAD4; }
.sb-sep .sep-arrow {
  font-size: 8px;
  transition: transform .2s;
  color: rgba(20,184,166,.5);
}
.sb-sep .sep-arrow.open { transform: rotate(90deg); }
.sb-nav.collapsed { display: none !important; }
.sb-nav { display: flex; flex-direction: column; gap: 1px; padding: 2px 8px; flex-shrink: 0; }
.sb-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px; border-radius: 8px; border: none; background: none; cursor: pointer;
  font-family: 'Inter',sans-serif; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.4);
  text-align: left; width: 100%;
  white-space: nowrap; overflow: hidden;
  position: relative;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sb-btn:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); }
.sb-btn:hover .sb-icon { color: rgba(255,255,255,.6); }
.sb-btn.active {
  background: rgba(20,184,166,.1);
  color: #5EEAD4;
  font-weight: 600;
}
.sb-btn.active::before {
  content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: #14B8A6; box-shadow: 0 0 8px rgba(20,184,166,.4);
}
.sb-btn.active .sb-icon { color: #5EEAD4 !important; }
.sb-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; color: rgba(255,255,255,.25); transition: color .15s; }
.sb-footer { margin-top: auto; padding: 8px 8px 20px; border-top: 1px solid rgba(255,255,255,.04); flex-shrink: 0; }
.sb-btn.danger { color: rgba(255,153,102,.5); }
.sb-btn.danger:hover { background: rgba(194,65,12,.12); color: #FF9966; }
.sb-btn.danger .sb-icon { color: rgba(255,153,102,.35) !important; }


/* ========= CAPTAÇÃO MODULE ========= */
.capt-tab {
  display:flex;align-items:center;gap:6px;padding:12px 14px;border:none;background:none;
  font-family:var(--font);font-size:12px;font-weight:600;color:#64748B;cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.capt-tab i { font-size:11px; }
.capt-tab:hover { color:#1E293B; }
.capt-tab.active { color:#B45309;border-bottom-color:#B45309; }
.capt-panel { display:none; }
.capt-panel.active { display:block; }
.capt-item {
  background:white;border:1px solid var(--gray-200);border-radius:12px;
  padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:all .15s;
}
.capt-item:hover { box-shadow:0 4px 16px rgba(0,0,0,.08);border-color:#BFDBFE; }
.capt-status-badge {
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;
  border-radius:20px;font-size:10px;font-weight:700;
}


.pro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; padding: 0 16px 16px;
  max-width: 680px; margin: 0 auto;
}
.pro-card {
  background: white; border: 1px solid #E2E8F0; border-radius: 12px;
  padding: 15px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: border-color .14s, box-shadow .14s;
  -webkit-tap-highlight-color: transparent;
}
.pro-card:active { background: #F8FAFC; }
@media (hover: hover) {
  .pro-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: #BFDBFE; }
}
.pro-icon { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pro-icon i { font-size: 19px; }
.pro-name { font-size: 13px; font-weight: 700; color: #1E293B; }
.pro-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }

.fam-card {
  display: flex; align-items: center; gap: 13px;
  background: white; border: 1px solid #E2E8F0; border-radius: 12px;
  padding: 14px 16px; margin: 0 16px 9px;
  cursor: pointer; transition: border-color .14s, box-shadow .14s;
  -webkit-tap-highlight-color: transparent;
}
.fam-card:active { background: #F8FAFC; }
@media (hover: hover) {
  .fam-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
}
.fam-icon { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.fam-icon i { font-size: 20px; }
.fam-name { font-size: 14px; font-weight: 700; color: #1E293B; }
.fam-sub { font-size: 11px; color: #94A3B8; margin-top: 1px; }
.fam-badge { margin-left: auto; flex-shrink: 0; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }

/* ==========================================================================
   REDESIGN 2026 — camada de design system (sobrepõe o legado acima).
   Identidade: teal-petróleo (marca) + neutros quentes + âmbar (acento).
   Princípios: cor com intenção, bordas no lugar de sombra, cantos contidos,
   zero decoração genérica (orbs/blobs/glows/gradiente de texto).
   REVERSÍVEL: apague deste comentário até o fim do arquivo para voltar ao anterior.
   ========================================================================== */
:root{
  /* Marca — teal-petróleo */
  --blue:#116B63; --blue-dark:#0B3D3A; --blue-pale:#E7F0EE; --blue-mid:#A9CCC7;
  --navy:#0B3D3A; --navy2:#0E524C;
  --green:#158A80; --green-light:#E4F0EC; --green-dark:#0D5A53;
  /* Semânticas — discretas, dessaturadas */
  --red:#B23A2E; --red-light:#F6E5E2;
  --yellow:#A9761A; --yellow-light:#F6EEDC;
  /* Acento pontual — âmbar/terracota */
  --accent:#B4652A; --accent-soft:#F3E9DE;
  /* Neutros quentes (greige) */
  --gray-50:#F6F5F1; --gray-100:#EEEBE3; --gray-200:#E5E1D8; --gray-300:#D3CEC2;
  --gray-400:#9A9488; --gray-500:#6E695E; --gray-600:#544F45; --gray-700:#3B3730;
  --gray-800:#2A2721; --gray-900:#1C1A15;
  /* Cantos contidos (era 8/16/26) */
  --r:6px; --r-lg:9px; --r-xl:13px;
  /* Sombras sutis, tom quente */
  --shadow-xs:0 1px 2px rgba(28,26,21,.04);
  --shadow-sm:0 1px 3px rgba(28,26,21,.06);
  --shadow-md:0 4px 14px rgba(28,26,21,.08);
  --shadow-lg:0 14px 36px rgba(28,26,21,.12);
}
body{ background:var(--gray-50); color:var(--gray-800); }

/* ---- Sidebar: petróleo escuro coeso, sem glow neon ---- */
.sidebar{ background:#0B302D; }
.sb-logo{ background:rgba(255,255,255,.08); }
.sb-logo i,.sb-title span{ color:#7FC9C0; }
.sb-sep{ color:#6FBEB4; letter-spacing:.12em; }
.sb-sep:hover{ color:#A6DDD6; }
.sb-sep .sep-arrow{ color:rgba(127,201,192,.5); }
.sb-btn.active{ background:rgba(127,201,192,.12); color:#CDEBE6; }
.sb-btn.active::before{ background:#3E9E93; box-shadow:none; width:3px; }
.sb-btn.active .sb-icon{ color:#CDEBE6 !important; }

/* ---- Topbar ---- */
.tb-title{ color:var(--gray-900); font-weight:700; }
.tb-360{ background:var(--navy); border-color:var(--navy); }
.tb-360:hover{ background:var(--navy2); }

/* ---- Painel: hero sóbrio, sem "blobs" nem sombra pesada ---- */
.hero-banner{ background:var(--navy); border:1px solid rgba(255,255,255,.07); box-shadow:none; border-radius:var(--r-xl); padding:18px 20px; }
.hero-banner::before,.hero-banner::after{ display:none !important; }
.hero-greeting{ letter-spacing:.1em; opacity:.62; }
.hero-stat{ background:rgba(255,255,255,.06); border-radius:8px; }

/* ---- Superfícies: a borda define o card; sombra só na interação ---- */
.card,.stat-card,.list-item,.report-card,.settings-group,.bi-kpi,.capt-item,
.pro-card,.fam-card,.mg-card,.af-card,.ata-card,.rotina-card,.doc-card{
  border-radius:var(--r-lg); box-shadow:none; border:1px solid var(--gray-200);
}
.list-item:hover,.report-card:hover,.capt-item:hover,.pro-card:hover,.fam-card:hover,.mg-card:hover,.af-card:hover,.ata-card:hover{
  box-shadow:var(--shadow-sm); border-color:var(--blue-mid); transform:none;
}
.list-avatar,.report-icon,.pro-icon,.fam-icon,.doc-type-icon,.empty-icon{ border-radius:10px; }

/* ---- KPIs / stats: número manda, ícone discreto ---- */
.stat-icon{ border-radius:9px; }
.bi-kpi-num,.stat-num{ letter-spacing:-.02em; }

/* ---- Tags: suaves ---- */
.tag{ border-radius:6px; }
.tag-blue{ background:var(--blue-pale); color:var(--blue-dark); border-color:var(--blue-mid); }
.tag-green{ background:var(--green-light); color:var(--green-dark); border-color:#BFE0DA; }
.tag-red{ background:var(--red-light); color:var(--red); border-color:#E8C6C0; }
.tag-yellow{ background:var(--yellow-light); color:var(--yellow); border-color:#E7D4A8; }

/* ---- Cards de predição: acento na borda, fundo quase neutro ---- */
.pred-card{ border-radius:var(--r); }

/* ---- Botões: cantos contidos, sombra leve ---- */
.btn-primary,.pg-action,.empty-btn{ box-shadow:none; border-radius:var(--r); }
.btn-primary:hover,.pg-action:hover,.empty-btn:hover{ box-shadow:var(--shadow-sm); transform:none; }
.pg-action{ font-weight:600; }

/* ---- Foco de formulário em teal ---- */
.form-input:focus,.form-select:focus,.form-textarea:focus,.field input:focus{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(17,107,99,.12);
}
.form-label{ letter-spacing:.02em; }

/* ---- Login: fora orbs/peças/gradiente de texto; painel petróleo sóbrio ---- */
#loginPage{ background:#09211F; }
.login-art-panel{ background:linear-gradient(165deg,#0C332F 0%,#09211F 100%); }
.lap-orb,.lap-puzzle{ display:none !important; }
.lap-ribbon{ filter:none; animation:none; }
.lap-word{ animation:none; opacity:1; }
.lap-w2,.lap-w4{ -webkit-text-fill-color:#7FC9C0 !important; color:#7FC9C0 !important; background:none !important; }
.lap-w3{ color:rgba(255,255,255,.8); }
.lap-body{ text-align:left; animation:none; opacity:1; }
.lap-pills{ animation:none; opacity:1; }
.lap-pill{ border-radius:8px; }
.login-brand-name span{ color:#7FC9C0; }
.login-btn{ background:var(--navy); box-shadow:none; }
.login-btn:hover{ background:var(--navy2); box-shadow:var(--shadow-sm); transform:none; }
.login-brand-icon{ box-shadow:none; }

/* ---- Pró/família cards: alinhar aos neutros quentes ---- */
.pro-card,.fam-card{ border-color:var(--gray-200); }
.pro-name,.fam-name{ color:var(--gray-900); }
.pro-sub,.fam-sub{ color:var(--gray-400); }