:root{
  --navy:#15164f;
  --navy-2:#202369;
  --royal:#30449b;
  --sky:#79c7ed;
  --sky-soft:#eaf7fd;

  --bg:#f4f7fb;
  --surface:#ffffff;

  --text:#172033;
  --muted:#667085;

  --line:#dde5ee;

  --success:#15965b;
  --warning:#e49a27;
  --danger:#d44444;

  --radius:14px;

  --shadow:
    0 5px 18px
    rgba(20,34,66,.07);

  --sidebar:270px;
}


*{
  box-sizing:border-box;
}


html,
body{
  margin:0;
  min-height:100%;
}


body{
  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  background:var(--bg);

  color:var(--text);
}


button,
input,
select,
textarea{
  font:inherit;
}


button{
  cursor:pointer;
}


.hidden{
  display:none !important;
}


/* =========================================================
   LOGIN
========================================================= */

.login-screen{
  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:30px;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(121,199,237,.32),
      transparent 32%
    ),
    linear-gradient(
      140deg,
      #15164f 0%,
      #24327c 52%,
      #1672a5 100%
    );
}


.login-card{
  width:min(440px,100%);

  padding:36px;

  background:#fff;

  border-radius:22px;

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.23);
}


.login-logo{
  display:flex;
  align-items:center;

  gap:12px;

  margin-bottom:30px;
}


.logo-mark,
.brand-symbol{
  display:flex;
  align-items:center;
  justify-content:center;

  background:linear-gradient(
    140deg,
    var(--sky),
    var(--royal)
  );

  color:white;

  font-weight:900;
}


.logo-mark{
  width:48px;
  height:48px;

  border-radius:50%;

  font-size:24px;
}


.login-logo strong{
  display:block;

  color:var(--navy);

  font-size:25px;
}


.login-logo span{
  display:block;

  margin-top:1px;

  color:var(--muted);

  font-size:13px;
}


.login-card h1{
  margin:0 0 6px;

  color:var(--navy);
}


.login-subtitle{
  margin:0 0 26px;

  color:var(--muted);

  font-size:14px;
}


.field{
  margin-bottom:17px;
}


.field label{
  display:block;

  margin-bottom:6px;

  color:#344054;

  font-size:12px;

  font-weight:700;
}


.field input{
  width:100%;

  height:44px;

  padding:0 12px;

  border:1px solid #d5dce5;

  border-radius:9px;

  outline:none;
}


.field input:focus{
  border-color:var(--sky);

  box-shadow:
    0 0 0 3px
    rgba(121,199,237,.18);
}


.password-wrap{
  position:relative;
}


.password-wrap input{
  padding-right:50px;
}


.eye-button{
  position:absolute;

  right:4px;
  top:4px;

  width:38px;
  height:36px;

  border:0;

  background:transparent;

  border-radius:8px;
}


.btn{
  min-height:40px;

  border:0;

  border-radius:9px;

  padding:0 15px;

  font-weight:700;
}


.btn-full{
  width:100%;
}


.btn-primary{
  background:var(--royal);

  color:#fff;
}


.btn-primary:hover{
  background:var(--navy-2);
}


.btn-light{
  background:#fff;

  color:var(--navy);

  border:1px solid var(--line);
}


.btn-link{
  display:block;

  margin:14px auto 0;

  border:0;

  background:transparent;

  color:var(--royal);

  font-size:12px;

  font-weight:700;
}


.login-message{
  min-height:20px;

  margin-top:14px;

  color:var(--danger);

  text-align:center;

  font-size:12px;
}



/* =========================================================
   SHELL
========================================================= */

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


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{
  position:fixed;

  left:0;
  top:0;
  bottom:0;

  width:var(--sidebar);

  display:flex;
  flex-direction:column;

  background:
    linear-gradient(
      180deg,
      #15164f 0%,
      #202369 55%,
      #176c9b 100%
    );

  color:#fff;

  z-index:1000;

  transition:.2s ease;
}


.brand{
  min-height:85px;

  display:flex;
  align-items:center;

  gap:12px;

  padding:16px 18px;

  border-bottom:
    1px solid rgba(255,255,255,.09);
}


.brand-symbol{
  flex:0 0 43px;

  height:43px;

  border-radius:50%;
}


.brand-text strong{
  display:block;

  font-size:18px;

  letter-spacing:.8px;
}


.brand-text span{
  display:block;

  margin-top:2px;

  color:#c6dff0;

  font-size:11px;
}


.collapse-button{
  position:absolute;

  right:-15px;
  top:92px;

  width:31px;
  height:31px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid #dae3eb;

  border-radius:50%;

  background:white;

  color:var(--navy);

  box-shadow:var(--shadow);
}


.sidebar-nav{
  flex:1;

  overflow-y:auto;

  padding:12px 11px 20px;
}


.menu-group{
  margin-bottom:17px;
}


.menu-group-title{
  padding:6px 12px;

  color:#90bdd8;

  font-size:9px;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:1px;
}


.nav-item{
  width:100%;

  display:flex;
  align-items:center;

  gap:11px;

  padding:10px 11px;

  margin:2px 0;

  border:0;

  border-radius:9px;

  background:transparent;

  color:#eef7fc;

  text-align:left;

  font-size:12px;

  font-weight:650;
}


.nav-item:hover{
  background:
    rgba(255,255,255,.08);
}


.nav-item.active{
  background:var(--sky);

  color:var(--navy);

  font-weight:800;
}


.nav-icon{
  width:24px;

  flex:0 0 24px;

  text-align:center;

  font-size:12px;

  font-weight:900;
}


.sidebar-footer{
  display:flex;
  align-items:center;

  gap:9px;

  margin:10px;

  padding:12px;

  background:
    rgba(255,255,255,.07);

  border:
    1px solid rgba(255,255,255,.09);

  border-radius:12px;
}


.user-avatar{
  width:34px;
  height:34px;

  flex:0 0 34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:var(--sky);

  color:var(--navy);

  font-weight:900;
}


.user-info{
  min-width:0;

  flex:1;
}


.user-info strong,
.user-info span{
  display:block;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;
}


.user-info strong{
  font-size:11px;
}


.user-info span{
  margin-top:2px;

  color:#c8dbea;

  font-size:9px;
}


.user-menu{
  width:29px;
  height:29px;

  border:0;

  border-radius:7px;

  background:transparent;

  color:white;

  font-size:18px;
}



/* RECOLHIDO */

body.sidebar-collapsed{
  --sidebar:78px;
}


body.sidebar-collapsed .brand{
  justify-content:center;

  padding-left:10px;
  padding-right:10px;
}


body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .menu-group-title,
body.sidebar-collapsed .user-info{
  display:none;
}


body.sidebar-collapsed .nav-item{
  justify-content:center;
}


body.sidebar-collapsed .sidebar-footer{
  justify-content:center;

  padding:8px 4px;
}


body.sidebar-collapsed .user-menu{
  display:none;
}



/* =========================================================
   CONTEÚDO
========================================================= */

.main-content{
  min-height:100vh;

  margin-left:var(--sidebar);

  transition:.2s ease;
}


.topbar{
  min-height:86px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:17px 28px;

  background:#fff;

  border-bottom:1px solid var(--line);
}


.topbar h1{
  margin:0;

  color:var(--navy);

  font-size:23px;
}


.topbar p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:11px;
}


.topbar-actions{
  display:flex;
  align-items:center;

  gap:8px;
}


.top-action{
  width:39px;
  height:39px;

  border:1px solid var(--line);

  border-radius:9px;

  background:#fff;
}


.page{
  display:none;

  padding:25px 28px 50px;
}


.page.active{
  display:block;
}



/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-welcome{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin-bottom:20px;

  padding:22px 24px;

  background:
    linear-gradient(
      125deg,
      #ffffff 0%,
      #eef9fe 100%
    );

  border:1px solid var(--line);

  border-radius:var(--radius);

  box-shadow:var(--shadow);
}


.eyebrow{
  color:var(--royal);

  font-size:9px;

  font-weight:900;

  letter-spacing:1.1px;
}


.dashboard-welcome h2{
  margin:6px 0;

  color:var(--navy);

  font-size:21px;
}


.dashboard-welcome p{
  margin:0;

  color:var(--muted);

  font-size:12px;
}


.today-box{
  min-width:150px;

  padding:12px 15px;

  background:#fff;

  border:1px solid var(--line);

  border-radius:11px;
}


.today-box span,
.today-box strong{
  display:block;
}


.today-box span{
  color:var(--muted);

  font-size:10px;
}


.today-box strong{
  margin-top:4px;

  color:var(--navy);

  font-size:13px;
}


.kpi-grid{
  display:grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap:14px;

  margin-bottom:17px;
}


.kpi-card{
  padding:18px;

  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  box-shadow:var(--shadow);
}


.kpi-title{
  display:block;

  margin-bottom:9px;

  color:var(--muted);

  font-size:11px;
}


.kpi-value{
  display:block;

  color:var(--navy);

  font-size:25px;
}


.kpi-value.money{
  font-size:20px;
}


.kpi-foot{
  display:block;

  margin-top:7px;

  color:#98a2b3;

  font-size:9px;
}


.dashboard-grid{
  display:grid;

  grid-template-columns:
    1.4fr 1fr;

  gap:16px;
}


.panel{
  padding:19px;

  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  box-shadow:var(--shadow);
}


.panel.wide{
  grid-column:1/-1;
}


.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:15px;
}


.panel-header h3{
  margin:0;

  color:var(--navy);

  font-size:15px;
}


.panel-header p{
  margin:3px 0 0;

  color:var(--muted);

  font-size:10px;
}


.panel-menu{
  width:34px;
  height:34px;

  border:0;

  border-radius:8px;

  background:#f3f6f9;

  color:var(--navy);

  font-size:20px;
}


.financial-preview{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:10px;
}


.financial-preview div{
  padding:13px;

  background:#f7f9fc;

  border-radius:9px;
}


.financial-preview span,
.financial-preview strong{
  display:block;
}


.financial-preview span{
  color:var(--muted);

  font-size:10px;
}


.financial-preview strong{
  margin-top:6px;

  color:#344054;

  font-size:11px;
}


.empty-mini{
  padding:18px;

  text-align:center;

  color:var(--muted);
}


.empty-mini strong{
  display:block;

  margin:8px 0 3px;

  color:var(--navy);

  font-size:12px;
}


.empty-mini p{
  margin:0;

  font-size:10px;
}


.empty-icon{
  font-size:24px;

  color:var(--sky);
}


.priority-list{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:10px;
}


.priority-item{
  display:flex;

  gap:10px;

  padding:13px;

  background:#f7f9fc;

  border-radius:10px;
}


.priority-number{
  width:27px;
  height:27px;

  flex:0 0 27px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:var(--sky);

  color:var(--navy);

  font-size:11px;

  font-weight:900;
}


.priority-item strong{
  color:var(--navy);

  font-size:11px;
}


.priority-item p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:9px;

  line-height:1.45;
}



/* =========================================================
   PLACEHOLDER DE MÓDULOS
========================================================= */

.module-placeholder{
  min-height:420px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;

  border:1px solid var(--line);

  border-radius:var(--radius);

  box-shadow:var(--shadow);
}


.module-placeholder-inner{
  max-width:500px;

  padding:30px;

  text-align:center;
}


.module-placeholder-icon{
  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0 auto 15px;

  border-radius:16px;

  background:var(--sky-soft);

  color:var(--royal);

  font-size:24px;

  font-weight:900;
}


.module-placeholder h2{
  margin:0;

  color:var(--navy);
}


.module-placeholder p{
  color:var(--muted);

  font-size:12px;

  line-height:1.6;
}



/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width:1150px){

  .kpi-grid{
    grid-template-columns:
      repeat(2,1fr);
  }


  .priority-list{
    grid-template-columns:
      repeat(2,1fr);
  }

}


@media(max-width:800px){

  body{
    --sidebar:78px;
  }


  .brand-text,
  .nav-label,
  .menu-group-title,
  .user-info{
    display:none;
  }


  .brand,
  .nav-item,
  .sidebar-footer{
    justify-content:center;
  }


  .dashboard-grid{
    grid-template-columns:1fr;
  }


  .panel.wide{
    grid-column:auto;
  }

}


@media(max-width:600px){

  .page{
    padding:18px 14px 35px;
  }


  .topbar{
    padding:14px;
  }


  .kpi-grid,
  .financial-preview,
  .priority-list{
    grid-template-columns:1fr;
  }


  .dashboard-welcome{
    align-items:flex-start;

    flex-direction:column;
  }

}



/* =========================================================
   LOGIN OFICIAL CLIMATIKO
========================================================= */

.login-card{
  width:min(500px,94vw);
  padding:38px 42px 36px;
}

.login-logo-central{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  gap:5px;

  margin-bottom:28px;
}

.login-logo-img{
  display:block;

  width:min(330px,85%);
  max-height:120px;

  object-fit:contain;

  margin:0 auto;
}

.login-sistema-nome{
  margin-top:7px;

  color:#15164f;

  font-size:14px;
  font-weight:800;

  letter-spacing:.2px;
}

.login-perfil{
  color:#667085;

  font-size:10px;
  font-weight:600;

  text-transform:uppercase;

  letter-spacing:1px;
}

.login-card h1{
  margin-top:5px;

  text-align:left;
}

@media(max-width:600px){

  .login-card{
    padding:30px 24px;
  }

  .login-logo-img{
    width:90%;
  }

}



/* =========================================================
   IDENTIDADE OFICIAL - CLIMATIKO CENTRAL
========================================================= */

.login-brand{
  width:100% !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 auto 25px !important;

  text-align:center !important;
}

.login-brand-logo{
  display:block !important;

  width:330px !important;
  max-width:90% !important;

  height:auto !important;
  max-height:115px !important;

  object-fit:contain !important;

  margin:0 auto !important;
}

.login-brand-system{
  margin-top:9px;

  color:#15164f;

  font-size:14px;
  font-weight:800;
}

.login-brand-role{
  margin-top:3px;

  color:#667085;

  font-size:10px;
  font-weight:700;

  letter-spacing:1px;

  text-transform:uppercase;
}

@media(max-width:600px){

  .login-brand-logo{
    width:280px !important;
  }

}