/* Facto Base UI
   Camada visual compartilhada. Mantem as regras especificas de cada pagina e
   padroniza navegacao, formularios, botoes, cards, tabelas e modais. */
:root{
  --facto-azul-900:#0f2f4f;
  --facto-azul-800:#1a3a5c;
  --facto-azul-700:#1e5799;
  --facto-azul-500:#2989d8;
  --facto-sky:#4db3e6;
  --facto-bg:#eef4fa;
  --facto-surface:#ffffff;
  --facto-soft:#f6f9fc;
  --facto-border:#d3dfec;
  --facto-text:#102a43;
  --facto-muted:#687a91;
  --facto-green:#1a7a4c;
  --facto-red:#c0392b;
  --facto-gold:#b8830a;
  --facto-radius:8px;
  --facto-shadow:0 2px 12px rgba(16,47,79,.10);
  --facto-shadow-lg:0 12px 34px rgba(16,47,79,.18);
}

html{scroll-behavior:smooth}
body:not(.site-home){
  background:
    radial-gradient(circle at top right, rgba(77,179,230,.12), transparent 32rem),
    linear-gradient(180deg,#f4f8fc 0%,var(--facto-bg) 100%);
  color:var(--facto-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:rgba(41,137,216,.22)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#b9c8d8;border-radius:999px}
::-webkit-scrollbar-track{background:#edf3f8}

body:not(.site-home) .topbar,body:not(.site-home) .top{
  background:linear-gradient(90deg,var(--facto-azul-900),var(--facto-azul-800)) !important;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 18px rgba(16,47,79,.22) !important;
}

body:not(.site-home) .ttitle,body:not(.site-home) .topbar-brand,body:not(.site-home) .brand{
  letter-spacing:.8px !important;
}

body:not(.site-home) .bk,body:not(.site-home) .back,body:not(.site-home) .btn-sair,body:not(.site-home) .topbar .nav-btn,body:not(.site-home) .top .nav-btn,body:not(.site-home) .header .nav-btn{
  min-height:32px;
  border-radius:8px !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
  text-decoration:none !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .18s ease,transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

body:not(.site-home) .bk:hover,body:not(.site-home) .back:hover,body:not(.site-home) .btn-sair:hover,body:not(.site-home) .topbar .nav-btn:hover,body:not(.site-home) .top .nav-btn:hover,body:not(.site-home) .header .nav-btn:hover{
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.34) !important;
  transform:translateY(-1px);
}

body:not(.site-home) .content,body:not(.site-home) .wrap,body:not(.site-home) .app{
  width:min(100%,1360px);
}

body:not(.site-home) .card,body:not(.site-home) .stat,body:not(.site-home) .mcard,body:not(.site-home) .module-card,body:not(.site-home) .box,body:not(.site-home) .mod,body:not(.site-home) .modal,body:not(.site-home) .panel,body:not(.site-home) .config-box,body:not(.site-home) .ctrl-card,body:not(.site-home) .loa-card{
  border-radius:var(--facto-radius) !important;
  border-color:var(--facto-border) !important;
  box-shadow:var(--facto-shadow) !important;
}

body:not(.site-home) .card-hd,body:not(.site-home) .mhd,body:not(.site-home) .modalhd,body:not(.site-home) .modal-hd,body:not(.site-home) .tbl-head{
  border-color:var(--facto-border) !important;
}

body:not(.site-home) button,body:not(.site-home) .btn,body:not(.site-home) .bm,body:not(.site-home) .tab,body:not(.site-home) .pag-btn,body:not(.site-home) input,body:not(.site-home) select,body:not(.site-home) textarea{
  font-family:inherit;
}

body:not(.site-home) .btn,body:not(.site-home) .bm,body:not(.site-home) button[type=submit]{
  border-radius:8px !important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

body:not(.site-home) .btn:hover,body:not(.site-home) .bm:hover,body:not(.site-home) button[type=submit]:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(16,47,79,.14);
}

body:not(.site-home) input,body:not(.site-home) select,body:not(.site-home) textarea{
  border-radius:8px !important;
  border-color:var(--facto-border) !important;
}

body:not(.site-home) input:focus,body:not(.site-home) select:focus,body:not(.site-home) textarea:focus{
  border-color:var(--facto-azul-500) !important;
  box-shadow:0 0 0 3px rgba(41,137,216,.14);
}

body:not(.site-home) table{
  border-collapse:separate;
  border-spacing:0;
}

body:not(.site-home) thead th{
  background:#f7fafd !important;
  color:#60758f !important;
}

body:not(.site-home) tbody tr{
  transition:background .12s ease;
}

body:not(.site-home) tbody tr:hover{
  background:#f4f9ff !important;
}

body:not(.site-home) .badge,body:not(.site-home) .chip,body:not(.site-home) .ar-chip{
  border-radius:999px !important;
}

body:not(.site-home) .mov,body:not(.site-home) .modalov,body:not(.site-home) .overlay{
  backdrop-filter:blur(4px);
}

body:not(.site-home) .mod,body:not(.site-home) .modal{
  overflow:hidden;
}

body:not(.site-home) #toast{
  border-radius:8px !important;
  box-shadow:var(--facto-shadow-lg) !important;
}

@media (max-width:760px){
  body:not(.site-home) .topbar,body:not(.site-home) .top{gap:8px;padding-left:12px !important;padding-right:12px !important}
  body:not(.site-home) .bk,body:not(.site-home) .back,body:not(.site-home) .btn-sair,body:not(.site-home) .nav-btn{padding:5px 9px !important;font-size:11px !important}
  body:not(.site-home) .content,body:not(.site-home) .wrap,body:not(.site-home) .app{padding-left:12px !important;padding-right:12px !important}
}

@media (max-width:900px){
  body:not(.site-home) #app .layout{
    flex-direction:column;
  }
  body:not(.site-home) #app .sidebar{
    position:sticky;
    top:56px;
    z-index:90;
    width:100%;
    height:auto;
    max-height:none;
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
    gap:6px;
    padding:8px 10px;
    border-right:0;
    border-bottom:1px solid var(--facto-border);
    box-shadow:0 5px 18px rgba(16,47,79,.08);
  }
  body:not(.site-home) #app .sidebar .nav-sec{
    display:none;
  }
  body:not(.site-home) #app .sidebar .nav-btn{
    width:auto;
    flex:0 0 auto;
    white-space:nowrap;
    color:#34465c !important;
    background:#f7fafd;
    border:1px solid var(--facto-border);
    padding:9px 12px !important;
    font-size:12px !important;
  }
  body:not(.site-home) #app .sidebar .nav-btn.ativo{
    background:#dceeff;
    color:var(--facto-azul-700) !important;
  }
  body:not(.site-home) #app .content{
    padding:16px !important;
    width:100%;
  }
  body:not(.site-home) #app .pg-header,
  body:not(.site-home) #app .card-hd,
  body:not(.site-home) #app .quick-footer{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  body:not(.site-home) #app .row2,
  body:not(.site-home) #app .row3,
  body:not(.site-home) #app .quick-row{
    grid-template-columns:1fr !important;
  }
  body:not(.site-home) #app table{
    min-width:720px;
  }
  body:not(.site-home) #app .card{
    overflow-x:auto;
  }
}

/* Administrativo Facto - modernizacao visual progressiva */
body:not(.site-home) #app{
  min-height:100vh;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0) 260px),
    var(--facto-bg);
}

body:not(.site-home) #app .topbar{
  min-height:60px;
  padding-inline:22px !important;
}

body:not(.site-home) #app .topbar-logo{
  width:38px;
  height:38px;
  object-fit:contain;
  border-radius:7px;
  background:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.14);
}

body:not(.site-home) #app .topbar-brand{
  font-size:20px !important;
  line-height:1;
}

body:not(.site-home) #app .layout{
  align-items:stretch;
}

body:not(.site-home) #app .sidebar{
  width:250px !important;
  padding:18px 12px !important;
  background:rgba(255,255,255,.94) !important;
  border-right:1px solid rgba(16,47,79,.12) !important;
  box-shadow:6px 0 22px rgba(16,47,79,.05);
}

body:not(.site-home) #app .sidebar .nav-sec{
  margin:14px 10px 8px !important;
  color:#6d7f94 !important;
  font-size:11px !important;
  letter-spacing:3px !important;
}

body:not(.site-home) #app .sidebar .nav-btn{
  min-height:42px;
  display:flex !important;
  gap:11px !important;
  align-items:center;
  width:100%;
  padding:10px 12px !important;
  border:1px solid transparent !important;
  border-radius:8px !important;
  color:#263d55 !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.2;
  background:transparent !important;
}

body:not(.site-home) #app .sidebar .nav-btn:hover{
  background:#f1f6fb !important;
  border-color:#dbe7f3 !important;
  color:var(--facto-azul-900) !important;
}

body:not(.site-home) #app .sidebar .nav-btn.ativo{
  background:linear-gradient(90deg,#dceeff,#edf7ff) !important;
  border-color:#c3ddf6 !important;
  color:var(--facto-azul-700) !important;
  box-shadow:inset 3px 0 0 var(--facto-azul-700);
}

body:not(.site-home) #app .sidebar .nav-btn .ico{
  width:24px !important;
  min-width:24px !important;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:#eef4fb;
  font-size:14px !important;
}

body:not(.site-home) #app .nav-bdg{
  margin-left:auto;
  min-width:22px;
  height:20px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 7px;
  color:#fff;
  font-size:11px;
  font-weight:700;
}

body:not(.site-home) #app .content{
  padding:28px 30px !important;
  max-width:calc(100vw - 250px);
}

body:not(.site-home) #app .pg-header{
  padding-bottom:16px;
  border-bottom:1px solid rgba(16,47,79,.09);
}

body:not(.site-home) #app .pg-title{
  color:#0d3155 !important;
  letter-spacing:.7px !important;
}

body:not(.site-home) #app .pg-sub{
  color:#6b7f96 !important;
}

body:not(.site-home) #app .card,
body:not(.site-home) #app .stat{
  background:rgba(255,255,255,.96) !important;
  border:1px solid #d6e3ef !important;
}

body:not(.site-home) #app .stat{
  min-height:86px;
}

body:not(.site-home) #app .stat b,
body:not(.site-home) #app .stat .mono{
  color:#0f2f4f !important;
}

body:not(.site-home) #app .btn,
body:not(.site-home) #app .bm{
  min-height:38px;
  padding-inline:15px !important;
  font-weight:700 !important;
  letter-spacing:.25px;
}

body:not(.site-home) #app .btn-p,
body:not(.site-home) #app .btn-primary,
body:not(.site-home) #app .bm.primary{
  background:linear-gradient(180deg,#2565ad,#194a7b) !important;
  border-color:#174773 !important;
  color:#fff !important;
}

body:not(.site-home) #app .btn-s,
body:not(.site-home) #app .btn-secondary{
  background:#f5f9fd !important;
  border-color:#c9d9e8 !important;
  color:#36506b !important;
}

body:not(.site-home) #app input,
body:not(.site-home) #app select,
body:not(.site-home) #app textarea{
  background:#f8fbff !important;
  color:#20364d !important;
  min-height:40px;
}

body:not(.site-home) #app textarea{
  line-height:1.45;
}

body:not(.site-home) #app label,
body:not(.site-home) #app .f-lbl,
body:not(.site-home) #app .fld label{
  color:#6b7f96 !important;
  font-size:12px !important;
  letter-spacing:1.3px !important;
}

body:not(.site-home) #app thead th{
  height:38px;
  border-bottom:1px solid #d4e1ee !important;
}

body:not(.site-home) #app td{
  border-bottom-color:#e6edf5 !important;
}

body:not(.site-home) #app .modal-ov{
  padding:18px;
  background:rgba(5,20,35,.56) !important;
}

body:not(.site-home) #app .modal{
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:0 22px 60px rgba(5,20,35,.32) !important;
}

body:not(.site-home) #app .modal-hd{
  background:linear-gradient(90deg,var(--facto-azul-900),var(--facto-azul-800)) !important;
}

body:not(.site-home) #app .modal-ft{
  background:#f7fafd !important;
}

@media (max-width:1100px){
  body:not(.site-home) #app .sidebar{
    width:224px !important;
  }
  body:not(.site-home) #app .content{
    max-width:calc(100vw - 224px);
    padding:22px !important;
  }
}

@media (max-width:900px){
  body:not(.site-home) #app .topbar{
    min-height:58px;
    padding-inline:14px !important;
  }
  body:not(.site-home) #app .topbar-brand{
    font-size:17px !important;
  }
  body:not(.site-home) #app .topbar-user{
    display:none !important;
  }
  body:not(.site-home) #app .sidebar{
    width:100% !important;
    top:58px !important;
    padding:10px !important;
    background:rgba(255,255,255,.98) !important;
  }
  body:not(.site-home) #app .sidebar .nav-btn{
    min-height:38px;
    width:auto !important;
    flex:0 0 auto;
    padding:8px 11px !important;
    font-size:13px !important;
  }
  body:not(.site-home) #app .sidebar .nav-btn .ico{
    width:22px !important;
    min-width:22px !important;
    height:22px;
  }
  body:not(.site-home) #app .content{
    max-width:100%;
    padding:18px 14px !important;
  }
}

@media (max-width:560px){
  body:not(.site-home) #app .topbar-logo{
    width:34px;
    height:34px;
  }
  body:not(.site-home) #app .topbar-brand{
    max-width:170px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body:not(.site-home) #app .pg-title{
    font-size:28px !important;
  }
  body:not(.site-home) #app .card,
  body:not(.site-home) #app .stat{
    border-radius:8px !important;
  }
  body:not(.site-home) #app .modal{
    width:min(100%,calc(100vw - 18px)) !important;
    max-height:calc(100vh - 18px) !important;
  }
  body:not(.site-home) #app .modal-ov{
    padding:9px;
    align-items:flex-start;
  }
}