

:root {

  --brown:    #5C3D1E;

  --brown-d:  #3D2810;

  --brown-l:  #7A5235;

  --gold:     #E8A000;

  --gold-d:   #A06800;

  --gold-l:   #FEE060;

  --cream:    #FAF6F1;

  --cream-2:  #F0E8DC;

  --cream-3:  #E0D0BC;

  --white:    #FFFFFF;

  --text:     #1C0E00;

  --text-2:   #6B4A2A;

  --text-3:   #A07850;

  --green:    #1A6640;

  --green-l:  #E8F5EE;

  --red:      #A82020;

  --red-l:    #FCEAEA;

  --blue:     #1850A0;

  --blue-l:   #E8EFFE;

  --orange:   #B85000;

  --orange-l: #FEF0E4;

  --purple:   #6030A0;

  --purple-l: #F2ECFE;

  --sw: 240px;

  --th: 58px;

}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{font-family:'Inter',sans-serif;background:var(--cream);color:var(--text);min-height:100vh}

/* LOGIN */

#login-screen{

  position:fixed;inset:0;z-index:999;

  background:var(--brown-d);

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

}

.login-card{

  background:var(--white);

  border-radius:18px;

  width:380px;

  box-shadow:0 24px 64px rgba(0,0,0,0.45);

  overflow:hidden;

}

.lc-top{

  background:var(--brown-d);

  padding:32px 36px 28px;

  display:flex;flex-direction:column;align-items:center;

  border-bottom:3px solid var(--gold);

}

.ls-mark{

  width:60px;height:60px;

  background:var(--brown);

  border-radius:14px;

  border:2px solid rgba(242,180,1,0.5);

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

  margin-bottom:14px;

  font-family:'Playfair Display',serif;

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

  color:var(--white);

  letter-spacing:1px;

}

.lc-name{

  font-family:'Playfair Display',serif;

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

  color:var(--white);

  letter-spacing:0.5px;

}

.lc-sub{

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

  letter-spacing:2.5px;text-transform:uppercase;

  color:var(--gold);

  margin-top:3px;opacity:0.85;

}

.lc-body{padding:28px 36px 32px;}

.l-err{

  background:var(--red-l);border:1px solid rgba(168,32,32,0.2);

  border-radius:9px;color:var(--red);

  font-size:13px;font-weight:500;

  padding:10px 14px;margin-bottom:16px;display:none;

}

.l-field{margin-bottom:14px;}

.l-field label{

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

  letter-spacing:1.2px;text-transform:uppercase;

  color:var(--text-2);margin-bottom:5px;

}

.l-wrap{position:relative;}

.l-icon{

  position:absolute;left:12px;top:50%;transform:translateY(-50%);

  width:15px;height:15px;color:var(--text-3);pointer-events:none;

}

.l-input{

  width:100%;height:44px;

  border:1.5px solid var(--cream-3);border-radius:10px;

  padding:0 12px 0 38px;

  font-size:13.5px;font-family:'Inter',sans-serif;

  color:var(--text);background:var(--cream);

  outline:none;transition:all 0.15s;

}

.l-input:focus{border-color:var(--gold);background:var(--white);box-shadow:0 0 0 3px rgba(242,180,1,0.12);}

.l-eye{

  position:absolute;right:12px;top:50%;transform:translateY(-50%);

  background:none;border:none;cursor:pointer;

  color:var(--text-3);display:flex;padding:3px;transition:color 0.15s;

}

.l-eye:hover{color:var(--text-2);}

.l-eye svg{width:15px;height:15px;}

.l-btn{

  width:100%;height:46px;

  background:var(--brown-d);

  color:var(--gold);

  border:none;border-radius:10px;

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

  font-family:'Inter',sans-serif;letter-spacing:0.5px;

  cursor:pointer;margin-top:6px;

  transition:all 0.18s;

  position:relative;overflow:hidden;

}

.l-btn:hover{background:var(--brown);}

.l-btn:disabled{opacity:0.6;cursor:not-allowed;}

/* SIDEBAR */

.sidebar{

  width:var(--sw);background:var(--brown-d);

  position:fixed;left:0;top:0;bottom:0;

  display:flex;flex-direction:column;z-index:100;

}

.sb-brand{

  padding:18px 14px 14px;

  border-bottom:1px solid rgba(255,255,255,0.07);

  display:flex;align-items:center;gap:10px;

}

.sb-mark{

  width:38px;height:38px;background:var(--brown);

  border-radius:9px;border:1.5px solid rgba(242,180,1,0.4);

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

  font-family:'Playfair Display',serif;

  font-size:14px;font-weight:800;color:var(--white);flex-shrink:0;

}

.sb-info{flex:1;min-width:0;}

.sb-name{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:var(--white);line-height:1.1;}

.sb-sub{font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:rgba(242,180,1,0.55);margin-top:2px;}

.sb-nav{flex:1;padding:10px 8px;overflow-y:auto;}

.sb-sec{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.22);padding:14px 10px 5px;}

.sb-item{

  display:flex;align-items:center;gap:9px;

  padding:9px 12px;border-radius:8px;

  cursor:pointer;color:rgba(255,255,255,0.5);

  font-size:13px;font-weight:500;

  transition:all 0.15s;border:1px solid transparent;

  text-decoration:none;margin-bottom:1px;

}

.sb-item:hover{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.8);}

.sb-item.on{background:rgba(242,180,1,0.12);color:var(--gold);border-color:rgba(242,180,1,0.2);font-weight:600;}

.sb-item svg{width:15px;height:15px;flex-shrink:0;}

.sb-foot{padding:10px 8px;border-top:1px solid rgba(255,255,255,0.07);}

.u-tile{

  display:flex;align-items:center;gap:9px;

  padding:9px 10px;border-radius:8px;

  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);

}

.u-av{

  width:30px;height:30px;background:var(--gold);

  border-radius:7px;display:flex;align-items:center;justify-content:center;

  font-family:'Playfair Display',serif;font-size:12px;font-weight:800;

  color:var(--brown-d);flex-shrink:0;

}

.u-info{flex:1;min-width:0;}

.u-nm{font-size:12px;font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.u-rl{font-size:10px;color:rgba(242,180,1,0.55);margin-top:1px;}

.btn-out{background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.25);padding:3px;border-radius:5px;display:flex;transition:color 0.15s;}

.btn-out:hover{color:var(--red);}

.btn-out svg{width:14px;height:14px;}

/* TOPBAR */

.topbar{

  position:fixed;left:var(--sw);right:0;top:0;height:var(--th);

  background:rgba(250,246,241,0.95);backdrop-filter:blur(10px);

  border-bottom:1px solid var(--cream-3);

  display:flex;align-items:center;padding:0 26px;

  z-index:50;justify-content:space-between;

}

.pg-title{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:var(--brown-d);}

.top-r{display:flex;align-items:center;gap:10px;}

.pill-live{

  display:flex;align-items:center;gap:5px;

  background:var(--green-l);border:1px solid rgba(26,102,64,0.15);

  color:var(--green);font-size:11px;font-weight:600;

  padding:4px 10px;border-radius:20px;

}

.dot{width:5px;height:5px;background:var(--green);border-radius:50%;animation:dp 2s infinite;}

@keyframes dp{0%,100%{opacity:1}50%{opacity:0.3}}

.clock{font-size:12px;font-weight:500;color:var(--text-3);}

/* MAIN */

.main{margin-left:var(--sw);padding-top:var(--th);min-height:100vh;}

.pad{padding:22px 26px;}

.screen{display:none;}

.screen.on{display:block;}

/* KPI */

.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:22px;}

.kpi{background:var(--white);border:1px solid var(--cream-3);border-radius:13px;padding:17px 18px;position:relative;overflow:hidden;transition:transform 0.15s,box-shadow 0.15s;}

.kpi:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(61,40,16,0.09);}

.kpi-bar{position:absolute;top:0;left:0;right:0;height:3px;border-radius:13px 13px 0 0;}

.kpi.gd .kpi-bar{background:var(--gold);}

.kpi.gn .kpi-bar{background:var(--green);}

.kpi.rd .kpi-bar{background:var(--red);}

.kpi.bl .kpi-bar{background:var(--blue);}

.kpi-ic{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:11px;}

.kpi.gd .kpi-ic{background:#FEF9DC;color:var(--gold-d);}

.kpi.gn .kpi-ic{background:var(--green-l);color:var(--green);}

.kpi.rd .kpi-ic{background:var(--red-l);color:var(--red);}

.kpi.bl .kpi-ic{background:var(--blue-l);color:var(--blue);}

.kpi-ic svg{width:17px;height:17px;}

.kpi-n{font-family:'Playfair Display',serif;font-size:26px;font-weight:800;color:var(--text);line-height:1;}

.kpi-l{font-size:11px;font-weight:500;color:var(--text-3);margin-top:4px;}

/* PANEL */

.panel{background:var(--white);border:1px solid var(--cream-3);border-radius:13px;overflow:hidden;}

.ph{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--cream-2);}

.pt{display:flex;align-items:center;gap:7px;font-family:'Playfair Display',serif;font-size:13.5px;font-weight:700;color:var(--brown-d);}

.pt svg{width:14px;height:14px;color:var(--gold);}

.pc{font-size:11.5px;font-weight:500;color:var(--text-3);}

/* FILTERS */

.fbar{background:var(--white);border:1px solid var(--cream-3);border-radius:11px;padding:13px 16px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:13px;}

.fg{display:flex;flex-direction:column;gap:4px;}

.fg label{font-size:9.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);}

.fg input,.fg select{height:33px;border:1px solid var(--cream-3);border-radius:7px;padding:0 9px;font-size:12.5px;font-family:'Inter',sans-serif;color:var(--text);background:var(--cream);outline:none;transition:border-color 0.15s;}

.fg input:focus,.fg select:focus{border-color:var(--gold);background:var(--white);}

.btn{height:33px;padding:0 15px;border-radius:7px;font-size:12.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;border:none;display:flex;align-items:center;gap:5px;transition:all 0.15s;white-space:nowrap;}

.btn svg{width:12px;height:12px;}

.btn-p{background:var(--brown-d);color:var(--gold);}

.btn-p:hover{background:var(--brown);}

.btn-g{background:var(--cream-2);color:var(--text-2);border:1px solid var(--cream-3);}

.btn-g:hover{background:var(--cream-3);}

/* TABLE */

.ttool{padding:11px 16px;border-bottom:1px solid var(--cream-2);display:flex;align-items:center;justify-content:space-between;}

.ti{font-size:11.5px;font-weight:500;color:var(--text-3);}

.sw{position:relative;display:flex;align-items:center;}

.sw svg{position:absolute;left:8px;width:12px;height:12px;color:var(--text-3);pointer-events:none;}

.sq{height:31px;border:1px solid var(--cream-3);border-radius:7px;padding:0 9px 0 26px;font-size:12px;font-family:'Inter',sans-serif;background:var(--cream);color:var(--text);outline:none;width:190px;transition:border-color 0.15s;}

.sq:focus{border-color:var(--gold);background:var(--white);}

table{width:100%;border-collapse:collapse;}

thead tr{background:var(--cream);border-bottom:1px solid var(--cream-3);}

th{padding:9px 15px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;color:var(--text-3);white-space:nowrap;}

tbody tr{border-bottom:1px solid var(--cream-2);transition:background 0.1s;}

tbody tr:last-child{border-bottom:none;}

tbody tr:hover{background:#FDFAF6;}

td{padding:10px 15px;font-size:12.5px;color:var(--text);}

.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:0.2px;white-space:nowrap;}

.bs{background:var(--red-l);color:var(--red);}

.be{background:var(--green-l);color:var(--green);}

.bp{background:var(--orange-l);color:var(--orange);}

.bst{background:var(--blue-l);color:var(--blue);}

.btr{background:var(--purple-l);color:var(--purple);}

.br{background:var(--orange-l);color:var(--orange);}

.bn{background:var(--green-l);color:var(--green);}

.ac{font-size:11px;font-weight:600;background:var(--cream-2);color:var(--brown-l);padding:2px 6px;border-radius:4px;}

.qn{color:var(--red);font-weight:600;}

.qp{color:var(--green);font-weight:600;}

/* STATE */

.sb{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px;gap:9px;color:var(--text-3);}

.sb p{font-size:13px;}

.sb svg{width:34px;height:34px;opacity:0.22;}

.spin{width:30px;height:30px;border:2.5px solid var(--cream-3);border-top-color:var(--gold);border-radius:50%;animation:sp 0.7s linear infinite;}

@keyframes sp{to{transform:rotate(360deg)}}

/* SALDO */

.sg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px;padding:16px;}

.sc{background:var(--white);border:1px solid var(--cream-3);border-radius:11px;padding:13px 15px;transition:all 0.15s;}

.sc:hover{border-color:rgba(242,180,1,0.4);box-shadow:0 3px 12px rgba(61,40,16,0.07);transform:translateY(-1px);}

.sch{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;}

.scp{font-family:'Playfair Display',serif;font-size:12.5px;font-weight:700;color:var(--brown-d);}

.scl{font-size:10px;font-weight:700;background:#FEF9DC;color:var(--gold-d);padding:2px 7px;border-radius:4px;border:1px solid rgba(242,180,1,0.2);}

.scn{font-size:11px;color:var(--text-3);margin-bottom:11px;line-height:1.4;}

.scv{display:flex;align-items:baseline;gap:4px;}

.scnum{font-family:'Playfair Display',serif;font-size:26px;font-weight:800;color:var(--text);line-height:1;}

.scnum.z{color:var(--cream-3);}

.scu{font-size:11px;color:var(--text-3);}

/* SECTION */

.sr{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}

.sl{display:flex;align-items:center;gap:7px;font-family:'Playfair Display',serif;font-size:13.5px;font-weight:700;color:var(--brown-d);}

.sl svg{width:13px;height:13px;color:var(--gold);}

/* TOAST */

.tt{position:fixed;bottom:18px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:6px;}

.toast{background:var(--brown-d);color:var(--white);padding:10px 15px;border-radius:9px;font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:7px;max-width:280px;animation:ti 0.2s ease;border-left:3px solid var(--gold);}

.toast.ok{border-left-color:var(--green);}

.toast.er{border-left-color:var(--red);}

.toast svg{width:13px;height:13px;flex-shrink:0;}

@keyframes ti{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

#app{display:none;flex:1;}



/* ===== bloco separado ===== */



/* =========================================================

   LASANTE — CAMADA VISUAL PREMIUM

   Mantém os IDs, funções e integração original da API.

   ========================================================= */

:root{

  --brown:#5B3827;

  --brown-d:#181210;

  --brown-l:#8B5E46;

  --gold:#D9A441;

  --gold-d:#A56C16;

  --gold-l:#F5D99C;

  --cream:#F5F3EF;

  --cream-2:#ECE8E1;

  --cream-3:#DCD5CA;

  --white:#FFFFFF;

  --text:#201B18;

  --text-2:#655A53;

  --text-3:#998D84;

  --green:#19724D;

  --green-l:#E8F5EF;

  --red:#B33A3A;

  --red-l:#FCECEC;

  --blue:#2A66B7;

  --blue-l:#EAF1FC;

  --orange:#B96619;

  --orange-l:#FFF0E3;

  --purple:#7650A8;

  --purple-l:#F2EDFA;

  --sw:264px;

  --th:72px;

  --shadow-sm:0 1px 2px rgba(26,18,14,.04),0 8px 24px rgba(26,18,14,.05);

  --shadow-md:0 20px 60px rgba(30,20,15,.12);

}

html{scroll-behavior:smooth}

body{

  font-family:'Inter',sans-serif;

  background:

    radial-gradient(circle at 90% 0%,rgba(217,164,65,.08),transparent 28%),

    linear-gradient(180deg,#F8F7F4 0%,#F2F0EC 100%);

  color:var(--text);

  letter-spacing:-.01em;

}

button,input,select{font:inherit}

.brand-symbol{width:100%;height:100%;display:block}

/* LOGIN */

#login-screen{

  background:

    radial-gradient(circle at 15% 15%,rgba(217,164,65,.24),transparent 26%),

    radial-gradient(circle at 88% 84%,rgba(118,80,168,.12),transparent 23%),

    linear-gradient(135deg,#15100E 0%,#281B16 52%,#17110F 100%);

  padding:24px;

}

#login-screen:before{

  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;

  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),

  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);

  background-size:34px 34px;

}

.login-card{

  position:relative;

  width:min(430px,100%);

  border-radius:28px;

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

  box-shadow:0 34px 100px rgba(0,0,0,.48);

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

  overflow:hidden;

}

.login-card:after{

  content:"";position:absolute;inset:0;pointer-events:none;

  box-shadow:inset 0 1px rgba(255,255,255,.8);

  border-radius:28px;

}

.lc-top{

  position:relative;

  background:

    radial-gradient(circle at 50% -30%,rgba(217,164,65,.28),transparent 55%),

    linear-gradient(145deg,#201714,#2D1F19);

  padding:40px 40px 34px;

  border-bottom:1px solid rgba(217,164,65,.34);

}

.ls-mark{

  width:78px;height:78px;padding:5px;

  border-radius:24px;border:1px solid rgba(255,255,255,.12);

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

  box-shadow:0 18px 42px rgba(0,0,0,.3);

  margin-bottom:18px;

}

.lc-name{

  font-family:'Playfair Display',serif;

  font-size:31px;line-height:1;font-weight:800;letter-spacing:.2px;

}

.lc-sub{

  margin-top:9px;

  color:#EBC678;

  font-size:10px;letter-spacing:2.1px;

}

.lc-welcome{

  margin-top:20px;color:rgba(255,255,255,.55);

  font-size:12px;font-weight:500;

}

.lc-body{padding:34px 40px 40px}

.l-field{margin-bottom:18px}

.l-field label{

  font-size:10px;letter-spacing:1.35px;color:#71645C;margin-bottom:8px

}

.l-input{

  height:50px;border-radius:13px;

  background:#F8F6F2;border:1px solid #E2DBD1;

  padding-left:43px;font-size:14px;

}

.l-input:hover{border-color:#CFC5B9}

.l-input:focus{

  border-color:#C78A2C;background:#fff;

  box-shadow:0 0 0 4px rgba(217,164,65,.13)

}

.l-icon{left:15px;width:16px;height:16px}

.l-eye{right:14px}

.l-btn{

  height:52px;border-radius:13px;margin-top:8px;

  background:linear-gradient(135deg,#251A16,#17110F);

  color:#F4C96E;box-shadow:0 12px 24px rgba(30,20,15,.18);

}

.l-btn:hover{background:linear-gradient(135deg,#33231C,#211713);transform:translateY(-1px)}

.l-btn:active{transform:translateY(0)}

.l-err{border-radius:12px;padding:12px 14px}

/* SIDEBAR */

.sidebar{

  background:

    radial-gradient(circle at 50% 0%,rgba(217,164,65,.13),transparent 30%),

    linear-gradient(180deg,#1E1714 0%,#15100E 100%);

  border-right:1px solid rgba(255,255,255,.05);

  box-shadow:12px 0 40px rgba(28,19,15,.06);

}

.sb-brand{padding:19px 18px 18px;gap:12px}

.sb-mark{

  width:44px;height:44px;padding:2px;

  border-radius:14px;border:none;background:transparent;

}

.sb-name{font-family:'Inter',sans-serif;font-size:15px;font-weight:750;letter-spacing:-.2px}

.sb-sub{margin-top:4px;color:rgba(235,198,120,.62);font-size:8px;letter-spacing:1.75px}

.sb-nav{padding:12px 12px}

.sb-sec{

  color:rgba(255,255,255,.25);font-size:8px;letter-spacing:1.8px;

  padding:18px 12px 7px

}

.sb-item{

  min-height:43px;border-radius:11px;padding:10px 12px;

  color:rgba(255,255,255,.56);gap:11px;font-size:12.8px

}

.sb-item svg{width:17px;height:17px;stroke-width:1.8}

.sb-item:hover{background:rgba(255,255,255,.065);color:#fff}

.sb-item.on{

  background:linear-gradient(90deg,rgba(217,164,65,.18),rgba(217,164,65,.07));

  border-color:rgba(217,164,65,.19);

  color:#F3C76E;

  box-shadow:inset 3px 0 #D9A441;

}

.sb-foot{padding:14px 12px 16px}

.u-tile{

  border-radius:13px;padding:10px;

  background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.075)

}

.u-av{

  width:34px;height:34px;border-radius:10px;

  background:linear-gradient(135deg,#F1C76E,#C98A28)

}

.u-nm{font-size:11.8px}

.u-rl{font-size:9.5px}

/* TOPBAR */

.topbar{

  background:rgba(248,247,244,.84);

  border-bottom:1px solid rgba(120,100,88,.12);

  backdrop-filter:blur(18px) saturate(140%);

  padding:0 30px;

}

.top-title-wrap{display:flex;flex-direction:column;gap:2px}

.pg-title{

  font-family:'Inter',sans-serif;font-size:17px;font-weight:750;

  color:#231C18;letter-spacing:-.35px

}

.pg-subtitle{font-size:10.5px;color:var(--text-3);font-weight:500}

.pill-live{

  background:#EBF6F0;border-color:#CEE8DB;color:#176544;

  padding:6px 11px;font-size:10.5px

}

.clock{font-size:11.5px;color:#7B7069}

/* MAIN */

.main{background:transparent}

.pad{padding:28px 30px 40px}

/* KPI */

.kpi-row{gap:16px;margin-bottom:25px}

.kpi{

  border:1px solid rgba(126,105,93,.13);

  border-radius:18px;padding:20px 20px 18px;

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

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

}

.kpi:hover{

  transform:translateY(-3px);

  box-shadow:0 16px 34px rgba(54,37,29,.1)

}

.kpi-bar{height:0}

.kpi-ic{

  width:40px;height:40px;border-radius:12px;margin-bottom:16px;

  border:1px solid rgba(0,0,0,.035)

}

.kpi-ic svg{width:18px;height:18px}

.kpi-n{

  font-family:'Inter',sans-serif;

  font-size:29px;font-weight:800;letter-spacing:-1.2px

}

.kpi-l{font-size:11px;margin-top:6px;color:#897D75}

/* Panels, filters and tables */

.panel{

  border:1px solid rgba(126,105,93,.13);

  border-radius:18px;box-shadow:var(--shadow-sm);

  background:rgba(255,255,255,.94)

}

.ph{padding:16px 20px}

.pt,.sl{

  font-family:'Inter',sans-serif;font-weight:750;color:#2E241F;

  letter-spacing:-.2px

}

.sr{margin-bottom:14px}

.fbar{

  border:1px solid rgba(126,105,93,.13);

  border-radius:16px;padding:15px 17px;gap:12px;

  box-shadow:var(--shadow-sm);background:rgba(255,255,255,.92)

}

.fg label{color:#8A7E76;font-size:8.8px}

.fg input,.fg select{

  height:38px;border-radius:10px;background:#F7F5F1;

  border-color:#DED7CD;padding:0 11px

}

.fg input:focus,.fg select:focus{

  border-color:#C68B31;box-shadow:0 0 0 3px rgba(217,164,65,.1)

}

.btn{

  height:38px;border-radius:10px;padding:0 16px;font-size:11.8px

}

.btn-p{

  background:linear-gradient(135deg,#2A1D18,#18110F);

  color:#F2C56B;box-shadow:0 8px 16px rgba(36,24,19,.12)

}

.btn-p:hover{transform:translateY(-1px);background:#35251E}

.btn-g{background:#F3F0EA;border-color:#DED6CB}

.ttool{padding:14px 18px}

.sq{height:35px;border-radius:9px;background:#F7F5F1}

table{min-width:760px}

th{

  padding:11px 16px;font-size:8.8px;letter-spacing:.9px;color:#8A7E76

}

td{padding:12px 16px;font-size:12px}

thead tr{background:#F8F6F2}

tbody tr:hover{background:#FCFAF7}

.badge{padding:4px 8px;font-size:9px}

.ac{border-radius:6px;padding:4px 7px;background:#F1EDE7}

/* Balance cards */

.sg{gap:14px;padding:18px}

.sc{

  border-radius:15px;padding:16px;

  border-color:rgba(126,105,93,.13);box-shadow:0 5px 18px rgba(49,34,26,.04)

}

.sc:hover{box-shadow:0 12px 28px rgba(49,34,26,.08)}

.scp{font-family:'Inter',sans-serif;font-weight:750}

.scnum{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-1px}

/* States and toast */

.sb p{font-size:12px}

.toast{border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.2)}

/* Scrollbars */

*{scrollbar-width:thin;scrollbar-color:#CFC6BC transparent}

::-webkit-scrollbar{width:8px;height:8px}

::-webkit-scrollbar-thumb{background:#CFC6BC;border-radius:99px}

::-webkit-scrollbar-track{background:transparent}

/* RESPONSIVE */

@media(max-width:980px){

  :root{--sw:220px}

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

}

@media(max-width:760px){

  :root{--th:64px}

  .sidebar{

    width:78px;

  }

  .sb-brand{justify-content:center;padding:13px 8px}

  .sb-info,.sb-sec,.sb-item span,.u-info,.btn-out{display:none}

  .sb-item{justify-content:center;padding:11px}

  .sb-item svg{width:19px;height:19px}

  .sb-foot{padding:10px}

  .u-tile{justify-content:center;padding:8px}

  .topbar{left:78px;padding:0 16px}

  .main{margin-left:78px}

  .pad{padding:18px 14px 30px}

  .kpi-row{gap:10px}

  .kpi{padding:16px}

  .fbar{align-items:stretch}

  .fg{flex:1 1 140px}

  .fg input,.fg select{width:100%!important}

}

@media(max-width:520px){

  #login-screen{padding:12px}

  .login-card{border-radius:22px}

  .lc-top{padding:32px 24px 28px}

  .lc-body{padding:27px 24px 30px}

  .kpi-row{grid-template-columns:1fr}

  .pg-subtitle,.clock{display:none}

  .topbar{padding:0 12px}

  .pill-live{padding:5px 8px}

}



/* ===== bloco separado ===== */



/* =========================================================

   LASANTE — IDENTIDADE VISUAL OFICIAL

   Baseada no ícone original: marrom café, branco e amarelo.

   ========================================================= */

:root{

  --ls-brown-950:#2A1308;

  --ls-brown-900:#3B1D0F;

  --ls-brown-800:#512915;

  --ls-brown-700:#64381F;

  --ls-brown-600:#7A4A2C;

  --ls-yellow-500:#F5B900;

  --ls-yellow-400:#FFC928;

  --ls-yellow-100:#FFF4C7;

  --ls-paper:#F7F4EF;

  --ls-surface:#FFFFFF;

  --ls-line:#E7DED4;

  --ls-text:#241913;

  --ls-muted:#74655D;

  --brown:var(--ls-brown-700);

  --brown-d:var(--ls-brown-950);

  --brown-l:var(--ls-brown-600);

  --gold:var(--ls-yellow-500);

  --gold-d:#B97800;

  --gold-l:var(--ls-yellow-400);

  --cream:var(--ls-paper);

  --cream-2:#F0EAE3;

  --cream-3:var(--ls-line);

  --text:var(--ls-text);

  --text-2:var(--ls-muted);

  --text-3:#9A8D85;

}

body{

  background:

    radial-gradient(circle at 88% 5%,rgba(245,185,0,.10),transparent 24%),

    linear-gradient(180deg,#FAF8F5 0%,#F3EFEA 100%) !important;

}

/* Exact official icon handling */

.brand-logo-img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  border-radius:inherit;

}

/* Login aligned to the icon */

#login-screen{

  background:

    radial-gradient(circle at 18% 14%,rgba(245,185,0,.20),transparent 28%),

    radial-gradient(circle at 80% 80%,rgba(122,74,44,.22),transparent 30%),

    linear-gradient(135deg,var(--ls-brown-950),var(--ls-brown-800) 58%,var(--ls-brown-950)) !important;

}

#login-screen::after{

  content:"";

  position:absolute;

  left:0;right:0;bottom:0;

  height:10px;

  background:linear-gradient(90deg,#E7A900,var(--ls-yellow-400),#E7A900);

  box-shadow:0 -6px 24px rgba(245,185,0,.18);

}

.login-card{

  border-radius:26px !important;

  border:1px solid rgba(255,255,255,.14) !important;

}

.lc-top{

  background:

    linear-gradient(180deg,rgba(255,255,255,.035),transparent),

    linear-gradient(145deg,var(--ls-brown-800),var(--ls-brown-950)) !important;

  border-bottom:4px solid var(--ls-yellow-500) !important;

}

.ls-mark{

  width:92px !important;

  height:92px !important;

  padding:0 !important;

  border-radius:22px !important;

  overflow:hidden;

  background:transparent !important;

  border:1px solid rgba(255,255,255,.14) !important;

  box-shadow:0 18px 45px rgba(0,0,0,.35) !important;

}

.lc-name{

  font-family:'Inter',sans-serif !important;

  font-size:29px !important;

  font-weight:800 !important;

  letter-spacing:-.8px !important;

}

.lc-sub{

  color:var(--ls-yellow-400) !important;

  letter-spacing:1.9px !important;

}

.lc-welcome{

  color:rgba(255,255,255,.60) !important;

}

.l-input:focus{

  border-color:var(--ls-yellow-500) !important;

  box-shadow:0 0 0 4px rgba(245,185,0,.14) !important;

}

.l-btn{

  background:linear-gradient(135deg,var(--ls-brown-800),var(--ls-brown-950)) !important;

  color:#FFF6D7 !important;

  border:1px solid rgba(245,185,0,.22) !important;

}

.l-btn:hover{

  background:linear-gradient(135deg,var(--ls-brown-700),var(--ls-brown-900)) !important;

  box-shadow:0 14px 28px rgba(59,29,15,.24) !important;

}

/* Sidebar follows the official icon */

.sidebar{

  background:

    radial-gradient(circle at 50% 0%,rgba(245,185,0,.10),transparent 26%),

    linear-gradient(180deg,var(--ls-brown-950),#1F0F08 100%) !important;

}

.sb-brand{

  border-bottom:1px solid rgba(255,255,255,.07) !important;

}

.sb-mark{

  width:48px !important;

  height:48px !important;

  padding:0 !important;

  overflow:hidden;

  border-radius:13px !important;

  border:1px solid rgba(255,255,255,.12) !important;

  background:transparent !important;

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

}

.sb-name{

  color:#fff !important;

  font-weight:800 !important;

  letter-spacing:-.25px !important;

}

.sb-sub{

  color:rgba(255,201,40,.67) !important;

}

.sb-item.on{

  color:#FFF1B4 !important;

  border-color:rgba(245,185,0,.23) !important;

  background:linear-gradient(90deg,rgba(245,185,0,.18),rgba(245,185,0,.06)) !important;

  box-shadow:inset 3px 0 var(--ls-yellow-500) !important;

}

.sb-item:hover{

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

  color:#fff !important;

}

.u-av{

  color:var(--ls-brown-950) !important;

  background:linear-gradient(135deg,var(--ls-yellow-400),var(--ls-yellow-500)) !important;

}

/* Topbar and dashboard */

.topbar{

  background:rgba(250,248,245,.90) !important;

  border-bottom:1px solid rgba(100,56,31,.10) !important;

}

.pg-title{

  color:var(--ls-brown-950) !important;

}

.kpi{

  border-top:3px solid transparent !important;

}

.kpi.gd{border-top-color:var(--ls-yellow-500) !important}

.kpi.gn{border-top-color:var(--green) !important}

.kpi.rd{border-top-color:var(--red) !important}

.kpi.bl{border-top-color:var(--blue) !important}

.kpi.gd .kpi-ic{

  background:var(--ls-yellow-100) !important;

  color:var(--gold-d) !important;

}

.panel,.fbar,.kpi,.sc{

  border-color:rgba(100,56,31,.11) !important;

}

.btn-p{

  background:linear-gradient(135deg,var(--ls-brown-800),var(--ls-brown-950)) !important;

  color:#FFF0B2 !important;

}

.btn-p:hover{

  background:linear-gradient(135deg,var(--ls-brown-700),var(--ls-brown-900)) !important;

}

.pt svg,.sl svg{

  color:var(--ls-yellow-500) !important;

}

.dot{

  background:#1A7C52 !important;

}

.toast{

  background:var(--ls-brown-950) !important;

  border-left-color:var(--ls-yellow-500) !important;

}

/* Branded accent line */

.topbar::after{

  content:"";

  position:absolute;

  left:0;right:0;bottom:-1px;

  height:1px;

  background:linear-gradient(90deg,transparent,rgba(245,185,0,.38),transparent);

}

/* Mobile logo remains clear */

@media(max-width:760px){

  .sb-mark{width:44px !important;height:44px !important}

}

/* ── Leitura de dados: zebra striping + números em destaque ── */
tbody tr:nth-child(even){background:rgba(100,56,31,0.045) !important;}
tbody tr:hover{background:rgba(245,185,0,0.10) !important;}
.qp,.qn{display:inline-block;padding:2px 9px;border-radius:6px;font-weight:700;}
.qp{background:var(--green-l);color:var(--green);}
.qn{background:var(--red-l);color:var(--red);}
thead tr{background:var(--cream-2) !important;border-bottom:2px solid var(--ls-line) !important;}
th{color:var(--ls-brown-900) !important;}
/* ── Sidebar minimizável ── */
.sb-toggle{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.7);border-radius:7px;padding:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background 0.15s,transform 0.2s;
}
.sb-toggle:hover{background:rgba(255,255,255,0.12);color:#fff;}
.sb-toggle svg{width:15px;height:15px;transition:transform 0.2s;}
body.sidebar-collapsed .sb-toggle svg{transform:rotate(180deg);}
.sidebar{transition:width 0.2s ease;}
.topbar{transition:left 0.2s ease;}
.main{transition:margin-left 0.2s ease;}
body.sidebar-collapsed{--sw:76px !important;}
body.sidebar-collapsed .sb-info,
body.sidebar-collapsed .sb-label,
body.sidebar-collapsed .sb-sec,
body.sidebar-collapsed .u-info,
body.sidebar-collapsed .btn-out{display:none !important;}
body.sidebar-collapsed .sb-brand{justify-content:center;padding:16px 8px;}
body.sidebar-collapsed .sb-item{justify-content:center;padding:10px;gap:0;}
body.sidebar-collapsed .u-tile{justify-content:center;padding:8px;}

/* ── Seletor de temas ── */
.theme-switcher{position:relative;margin-bottom:8px;}
.theme-gear{
  display:flex;align-items:center;gap:8px;width:100%;
  background:linear-gradient(135deg,var(--ls-brown-800,#512915),var(--ls-brown-950,#2A1308));
  border:1px solid rgba(245,185,0,.22);border-radius:9px;padding:10px 12px;
  color:#FFF6D7;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background 0.15s,box-shadow 0.15s;
}
.theme-gear:hover{
  background:linear-gradient(135deg,var(--ls-brown-700,#64381F),var(--ls-brown-900,#3B1D0F));
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.theme-gear svg{width:15px;height:15px;flex-shrink:0;}
body.sidebar-collapsed .theme-gear .sb-label{display:none;}
body.sidebar-collapsed .theme-gear{justify-content:center;padding:10px;}
#theme-menu{
  display:none;position:absolute;bottom:calc(100% + 6px);left:0;right:0;
  background:var(--ls-brown-950,#2A1308);border:1px solid rgba(255,255,255,0.1);
  border-radius:9px;padding:5px;box-shadow:0 12px 32px rgba(0,0,0,.4);z-index:200;
}
#theme-menu.open{display:block;}
.theme-opt{
  display:block;width:100%;text-align:left;padding:7px 9px;border-radius:6px;
  border:none;background:none;color:rgba(255,255,255,.65);font-size:12px;cursor:pointer;
  transition:background 0.15s,color 0.15s;
}
.theme-opt:hover{background:rgba(255,255,255,.08);color:#fff;}
.theme-opt.active{background:rgba(245,185,0,.14);color:#FFC928;font-weight:600;}
body.sidebar-collapsed #theme-menu{left:70px;bottom:auto;top:0;width:150px;}

/* ── TEMA MÉDIO ── */
body[data-theme="medio"]{
  --cream:#E7E2DA;--cream-2:#DDD7CD;--cream-3:#CBC3B6;--white:#F2EFE9;
  --text:#2B2420;--text-2:#5C5248;--text-3:#8B8176;
}
body[data-theme="medio"]{background:#E7E2DA !important;}
body[data-theme="medio"] .topbar{background:rgba(231,226,218,.95) !important;}

/* ── TEMA ESCURO ── */
body[data-theme="escuro"]{
  --cream:#1C1712;--cream-2:#241D17;--cream-3:#362C22;--white:#221B15;
  --text:#EDE6DC;--text-2:#C9BDAF;--text-3:#8F8172;
}
body[data-theme="escuro"]{background:#1C1712 !important;}
body[data-theme="escuro"] .topbar{background:rgba(28,23,18,.92) !important;border-bottom-color:#362C22 !important;}
body[data-theme="escuro"] .pg-title{color:#F3E9C8 !important;}
body[data-theme="escuro"] thead tr{background:#241D17 !important;border-bottom-color:#362C22 !important;}
body[data-theme="escuro"] th{color:#C9BDAF !important;}
body[data-theme="escuro"] tbody tr:nth-child(even){background:rgba(255,255,255,0.03) !important;}
body[data-theme="escuro"] tbody tr:hover{background:rgba(245,185,0,0.08) !important;}
body[data-theme="escuro"] .fg input,body[data-theme="escuro"] .fg select,body[data-theme="escuro"] .sq{
  background:#241D17 !important;color:#EDE6DC !important;border-color:#362C22 !important;
}
