:root{
  --green-950:#063c2c;
  --green-900:#0a4d38;
  --green-800:#116344;
  --green-700:#3f7d24;
  --green-100:#eaf5ef;
  --blue:#005ba4;
  --blue-100:#eaf3fb;
  --wine:#5f100f;
  --wine-100:#f8eceb;
  --bg:#f5f7f6;
  --card:#fff;
  --text:#1d2b27;
  --muted:#6a7772;
  --line:#e2e9e5;
  --danger:#b42318;
  --success:#067647;
  --warning:#a15c00;
  --radius:16px;
  --shadow:0 8px 28px rgba(15,50,38,.07);
}
*{box-sizing:border-box}
body{margin:0;font-family:Manrope,Inter,system-ui,sans-serif;background:var(--bg);color:var(--text)}
body:before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--wine) 0 34%,var(--green-700) 34% 67%,var(--blue) 67% 100%)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.auth{min-height:calc(100vh - 3px);display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 80% 15%,#2b7a5d 0,transparent 28%),linear-gradient(135deg,var(--green-950),var(--green-900) 55%,#073c31)}
.auth-card{width:min(450px,100%);background:#fff;border-radius:26px;padding:34px;box-shadow:0 28px 80px rgba(0,0,0,.25)}
.auth-brand{text-align:center}.auth-brand img{width:min(270px,78%);height:auto;display:block;margin:0 auto 6px}.product-name{font-size:12px;letter-spacing:.2em;font-weight:800;color:var(--green-900);text-transform:uppercase}.auth .sub{color:var(--muted);margin:8px 0 26px;text-align:center}
.brand{font-weight:800;letter-spacing:.04em;color:var(--green-900);font-size:24px}.sub{color:var(--muted);margin:7px 0 26px}
.field{display:grid;gap:7px;margin:14px 0}.field label{font-size:12px;font-weight:800;color:#42514c}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 12px;outline:none;background:#fff;color:var(--text)}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green-700);box-shadow:0 0 0 3px #3f7d2418}
.btn{border:0;border-radius:11px;padding:11px 15px;font-weight:800;transition:.18s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--green-900);color:#fff}.btn-primary:hover{background:var(--green-800)}.btn-secondary{background:#edf2ef;color:var(--green-900)}.btn-danger{background:#fff0ee;color:var(--danger)}.btn-success{background:var(--green-100);color:var(--success)}
.error{color:var(--danger);font-size:13px;margin:10px 0}
.layout{min-height:calc(100vh - 3px);display:grid;grid-template-columns:258px 1fr}.sidebar{background:linear-gradient(180deg,var(--green-950),var(--green-900));color:#fff;padding:18px 15px;position:sticky;top:0;height:calc(100vh - 3px);overflow:auto;box-shadow:10px 0 30px rgba(7,55,40,.08)}
.logo{padding:4px 5px 20px}.logo-card{background:#fff;border-radius:15px;padding:9px 10px;margin-bottom:12px}.logo-card img{width:100%;display:block}.logo .product-name{color:#fff;font-size:11px;letter-spacing:.18em;text-align:center}.logo .product-caption{text-align:center;color:#b8d7c9;font-size:11px;margin-top:5px}
.nav{display:grid;gap:5px;margin-top:8px}.nav button{background:transparent;color:#dbeae3;border:0;text-align:left;padding:12px 13px;border-radius:11px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:9px}.nav button:before{content:"";width:5px;height:5px;border-radius:50%;background:#8db6a5;opacity:.55}.nav button.active,.nav button:hover{background:#ffffff12;color:#fff}.nav button.active:before{background:#b7df8f;opacity:1;box-shadow:0 0 0 4px #b7df8f18}
.sidebar-foot{position:absolute;bottom:18px;left:15px;right:15px;padding-top:14px;border-top:1px solid #ffffff18}.user-mini{font-size:12px;color:#c3d9d0;margin-bottom:10px;word-break:break-word;line-height:1.55}
.main{padding:30px;max-width:1600px;width:100%;margin:auto}.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.top h1{font-size:28px;letter-spacing:-.03em;margin:0;color:#17382c}.top p{margin:6px 0 0;color:var(--muted);font-size:13px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.metric{font-size:30px;font-weight:900;margin-top:8px;color:var(--green-900)}.metric-label{font-size:12px;color:var(--muted);font-weight:700}.cards .card:nth-child(3n+2){border-top:3px solid var(--blue)}.cards .card:nth-child(3n+3){border-top:3px solid var(--green-700)}
.section{margin-top:20px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}.section-head h2{font-size:18px;margin:0;color:#17382c}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);font-size:13px}th{color:#718078;font-size:11px;background:#f7faf8;text-transform:uppercase;letter-spacing:.04em}tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfdfc}
.pill{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;background:#eef2f8;color:#344054}.pill.green{background:#eaf5ef;color:var(--success)}.pill.red{background:#fef3f2;color:var(--danger)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap}.search{max-width:360px}.empty{padding:34px;text-align:center;color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(4,43,31,.62);display:grid;place-items:center;padding:20px;z-index:10}.modal{background:#fff;width:min(620px,100%);max-height:90vh;overflow:auto;border-radius:20px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.24)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.modal-head h3{margin:0;color:var(--green-900)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions{display:flex;gap:7px;justify-content:flex-end}.muted{color:var(--muted)}.toast{position:fixed;right:20px;bottom:20px;background:var(--green-950);color:#fff;padding:13px 16px;border-radius:11px;box-shadow:0 12px 30px #0003;z-index:20}
.client-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 18px}.mini-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 17px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow)}.mini-card span{font-size:12px;color:var(--muted)}.mini-card b{font-size:22px;color:var(--green-900)}.client-toolbar{margin-bottom:14px}.filter-select{border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px 12px;color:var(--text)}.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.modal-large{width:min(900px,100%)}.modal-xl{width:min(1100px,100%)}.modal-small{width:min(500px,100%)}.modal-sub{margin:3px 0 0;font-size:13px}.form-section{border:1px solid var(--line);border-radius:13px;margin:14px 0;padding:16px;background:#fbfcfe}.form-section-title{font-size:14px;font-weight:900;margin-bottom:10px;color:var(--green-900)}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.span2{grid-column:span 2}.check-line{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:700;margin:10px 0}.check-line input{width:17px;height:17px}.disabled-section{opacity:.55}.detail-hero{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px;background:#f2f7f4;border-radius:13px;margin-bottom:14px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.detail-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}.detail-card h4{margin:0 0 12px;font-size:16px}.detail-card p{margin:9px 0;font-size:13px}.detail-card p span{display:inline-block;color:var(--muted);min-width:150px}.contact-row{display:grid;grid-template-columns:1.4fr 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.contact-row:last-child{border-bottom:0}.contact-row span:not(.pill){display:block;color:var(--muted);font-size:12px;margin-top:3px}.notes-text{white-space:pre-wrap}
@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{position:static;height:auto;padding:12px}.logo{padding:4px 4px 12px}.logo-card{max-width:220px}.nav{display:flex;overflow:auto}.sidebar-foot{position:static;margin-top:10px}.cards{grid-template-columns:repeat(2,1fr)}.main{padding:18px}}
@media(max-width:560px){.cards,.grid2,.client-summary,.detail-grid,.grid3{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}.main{padding:14px}.span2{grid-column:auto}.contact-row{grid-template-columns:1fr}.auth-card{padding:24px}}
/* HJ Operações v1.2 refinements */
@media(max-width:700px){
  .sidebar{background:linear-gradient(180deg,var(--green-950),var(--green-900));}
  .nav{gap:4px}.nav button{white-space:nowrap;padding:10px 11px}
  .nav button:before{display:none}
  .table-wrap table{min-width:680px}
  .modal-backdrop{padding:8px}.modal{max-height:94vh;border-radius:16px;padding:18px}
  .modal-xl{width:100%}.actions{flex-wrap:wrap}.actions .btn{flex:1;min-width:130px}
  .cards{gap:10px}.card{padding:16px}.metric{font-size:25px}
}


/* HJ Operações v1.6 — Premium 3D / SaaS visual */
:root{
  --green-950:#063b2c;
  --green-900:#07533d;
  --green-800:#0b6a4b;
  --green-700:#2f7d32;
  --green-500:#4da85b;
  --blue:#0b67b2;
  --wine:#741311;
  --bg:#f3f6f5;
  --card:#ffffff;
  --text:#18332a;
  --muted:#72807a;
  --line:#e6ece9;
  --shadow-soft:0 14px 35px rgba(18,54,42,.07);
  --shadow-3d:0 24px 60px rgba(19,63,48,.11), 0 4px 12px rgba(19,63,48,.06);
  --radius:20px;
}
html,body{min-height:100%;background:var(--bg)}
body:before{height:3px;background:linear-gradient(90deg,var(--wine) 0 34%,var(--green-700) 34% 67%,var(--blue) 67% 100%)}
.layout{grid-template-columns:280px minmax(0,1fr);min-height:calc(100vh - 3px);background:var(--bg)}
.sidebar{background:rgba(255,255,255,.94);color:var(--text);padding:18px 16px 14px;position:sticky;top:0;height:calc(100vh - 3px);overflow:hidden;border-right:1px solid #e8eeeb;box-shadow:8px 0 28px rgba(24,51,42,.035);backdrop-filter:blur(18px)}
.logo{padding:2px 7px 12px}.logo-card{background:transparent;border:0;border-radius:0;padding:0;margin:0 auto 7px;max-width:225px}.logo-card img{width:100%;display:block}.logo .product-name{color:var(--green-900);font-size:11px;letter-spacing:.22em;text-align:center;font-weight:900}.logo .product-caption{text-align:center;color:#81918a;font-size:11px;margin-top:4px}
.nav{display:grid;gap:5px;margin-top:15px;overflow:auto;height:calc(100vh - 265px);padding:2px 0 8px}.nav button{position:relative;background:transparent;color:#385149;border:0;text-align:left;padding:12px 14px;border-radius:14px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:12px;transition:.2s ease}.nav button:before{content:"";width:28px;height:28px;border-radius:9px;background:#eef5f1;box-shadow:inset 0 1px 0 #fff;flex:0 0 28px}.nav button:after{content:"";position:absolute;left:23px;width:10px;height:10px;border-radius:3px;border:1.8px solid #5b756b;transform:rotate(-8deg);opacity:.9}.nav button.active{background:linear-gradient(135deg,#07533d,#0b6a4b);color:#fff;box-shadow:0 12px 25px rgba(7,83,61,.18),inset 0 1px 0 rgba(255,255,255,.16)}.nav button.active:before{background:rgba(255,255,255,.16);box-shadow:none}.nav button.active:after{border-color:#fff}.nav button:hover:not(.active){background:#f3f7f5;transform:translateX(2px)}
.sidebar-foot{position:absolute;bottom:14px;left:16px;right:16px;padding-top:12px;border-top:1px solid #e8eeeb;background:rgba(255,255,255,.95)}.user-mini{font-size:12px;color:#53675f;margin:0 4px 10px;line-height:1.5}.sidebar-foot .btn{border-radius:14px;background:#f2f5f4;color:#b02b25;border:1px solid #e7ecea;box-shadow:none}
.main{padding:28px 34px 42px;max-width:none;width:100%;margin:0;background:radial-gradient(circle at 90% 0%,rgba(73,161,116,.08),transparent 24%),var(--bg)}
.app-topbar{display:flex;align-items:center;gap:18px;margin-bottom:28px}.global-search{height:48px;flex:1;max-width:760px;background:#edf2f0;border:1px solid #e2e9e6;border-radius:15px;padding:0 18px;color:#50615a;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}.top-user{margin-left:auto;display:flex;align-items:center;gap:11px}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#dcefe4,#c9e1d3);color:var(--green-900);font-weight:900;box-shadow:0 6px 18px rgba(12,83,61,.12)}.top-user strong{display:block;font-size:13px;color:#18372c}.top-user span{display:block;font-size:11px;color:#7a8882;margin-top:2px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}.top h1{font-size:34px;line-height:1.1;letter-spacing:-.045em;margin:0;color:#123a2d}.top p{margin:8px 0 0;color:#718079;font-size:14px}.top .btn{box-shadow:0 10px 24px rgba(7,83,61,.16)}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.card{background:rgba(255,255,255,.92);border:1px solid rgba(220,231,225,.9);border-radius:20px;padding:20px;box-shadow:var(--shadow-3d);position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:-45% auto auto -20%;width:150px;height:150px;background:radial-gradient(circle,rgba(74,168,91,.12),transparent 68%);pointer-events:none}.metric{font-size:34px;font-weight:900;margin-top:8px;color:#123d30;letter-spacing:-.04em}.metric-label{font-size:12px;color:#718079;font-weight:800}.cards .card:nth-child(1):after,.cards .card:nth-child(5):after{content:"";position:absolute;right:16px;bottom:16px;width:54px;height:28px;border-bottom:2px solid #39a263;border-radius:50%;transform:rotate(-7deg);opacity:.45}.cards .card:nth-child(2):after{content:"";position:absolute;right:16px;bottom:16px;width:54px;height:28px;border-bottom:2px solid #4d8ed1;border-radius:50%;transform:rotate(8deg);opacity:.4}.cards .card:nth-child(3):after{content:"";position:absolute;right:16px;bottom:16px;width:54px;height:28px;border-bottom:2px solid #e5ae35;border-radius:50%;transform:rotate(-5deg);opacity:.4}
.section{margin-top:18px}.section-head h2{font-size:17px;margin:0;color:#153a2e}.table-wrap{overflow:auto;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft)}th{background:#f7faf8;color:#74817c}.pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.btn{border-radius:13px;padding:11px 16px;font-weight:800;border:1px solid transparent;transition:.18s ease;box-shadow:0 6px 16px rgba(16,54,41,.05)}.btn-primary{background:linear-gradient(135deg,#07533d,#0c7654);color:#fff;box-shadow:0 10px 22px rgba(7,83,61,.17)}.btn-primary:hover{background:linear-gradient(135deg,#064a37,#0a674b)}.btn-secondary{background:#f1f5f3;color:#245044;border-color:#e3ebe7}.btn-danger{background:#fff4f2;color:#b42318;border-color:#f3d7d3}.btn-success{background:#eaf7ef;color:#087443;border-color:#d4eddf}
.modal-backdrop{background:rgba(8,44,34,.42);backdrop-filter:blur(6px)}.modal{border-radius:24px;box-shadow:0 35px 100px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.75)}
/* premium dashboard */
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.7fr);gap:18px;margin-top:20px}.hero-panel{min-height:260px;border-radius:24px;padding:30px;position:relative;overflow:hidden;background:linear-gradient(135deg,#07533d 0%,#0b6a4b 62%,#1f7b52 100%);box-shadow:0 24px 55px rgba(7,83,61,.22);color:#fff}.hero-panel:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;right:-100px;top:-130px;background:radial-gradient(circle at 40% 45%,rgba(255,255,255,.24),rgba(255,255,255,0) 65%);transform:rotate(18deg)}.hero-panel:after{content:"";position:absolute;width:190px;height:300px;right:35px;bottom:-145px;border-radius:70% 10% 70% 10%;background:linear-gradient(145deg,rgba(150,222,116,.45),rgba(255,255,255,0));transform:rotate(25deg)}.hero-panel h2{position:relative;z-index:2;font-size:32px;line-height:1.12;letter-spacing:-.04em;max-width:520px;margin:0 0 12px}.hero-panel p{position:relative;z-index:2;max-width:520px;color:#dcefe6;line-height:1.55;margin:0 0 22px}.hero-panel .btn{position:relative;z-index:2;background:#fff;color:#0a543e;border:0;box-shadow:0 12px 30px rgba(0,0,0,.14)}.side-panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow-3d)}.side-panel h3{margin:0 0 16px;font-size:17px}.activity{display:grid;gap:12px}.activity-item{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:11px;border-radius:14px;background:#fafcfb}.activity-icon{width:38px;height:38px;border-radius:12px;background:#eaf5ef;display:grid;place-items:center;color:#087047;font-weight:900}.activity-item strong{font-size:12px;display:block}.activity-item small{font-size:10px;color:#7a8781;display:block;margin-top:3px}.activity-item .pill{font-size:9px;padding:4px 7px}
.dashboard-bottom{display:grid;grid-template-columns:1.1fr 1.1fr 1fr;gap:18px;margin-top:18px}.dash-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow-soft)}.dash-card h3{margin:0;font-size:16px}.donut{width:150px;height:150px;border-radius:50%;background:conic-gradient(#0b6a4b 0 62%,#f3b31c 62% 89%,#2b6cb0 89% 100%);display:grid;place-items:center;margin:18px auto}.donut:after{content:"52\A Total";white-space:pre;text-align:center;width:94px;height:94px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:900;color:#153a2e;box-shadow:inset 0 1px 0 #fff}.bars{display:grid;gap:15px;margin-top:20px}.bar-row{display:grid;grid-template-columns:120px 1fr 30px;gap:10px;align-items:center;font-size:12px}.bar{height:10px;border-radius:999px;background:#edf3ef;overflow:hidden}.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#9fcfb2,#0b6a4b)}
@media(max-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr}.dashboard-bottom{grid-template-columns:1fr 1fr}.nav{height:calc(100vh - 255px)}}
@media(max-width:760px){.layout{display:block}.sidebar{position:relative;height:auto;overflow:visible;border-right:0}.nav{height:auto;display:flex;overflow:auto;padding-bottom:5px}.sidebar-foot{position:static;margin-top:10px}.main{padding:20px}.app-topbar{display:none}.cards{grid-template-columns:repeat(2,1fr)}.dashboard-bottom{grid-template-columns:1fr}.hero-panel h2{font-size:27px}}
@media(max-width:520px){.cards{grid-template-columns:1fr}.hero-panel{padding:24px}.hero-panel h2{font-size:25px}}
/* HJ Operações v1.7 — Floating Premium / Green + Earth Brown */
:root{
  --earth-brown:#7a4a2a;
  --earth-brown-dark:#60361f;
  --earth-brown-soft:#f5eee8;
  --floating-shadow:0 10px 24px rgba(22,55,43,.07),0 2px 6px rgba(22,55,43,.04);
  --floating-shadow-hover:0 18px 38px rgba(22,55,43,.12),0 5px 12px rgba(22,55,43,.06);
}

/* Clean, floating surfaces */
.card,.mini-card,.dash-card,.side-panel,.detail-card,.table-wrap,.modal,.form-section{
  box-shadow:var(--floating-shadow);
  border-color:#e5ebe7;
}
.card,.mini-card,.dash-card,.side-panel,.detail-card{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover,.mini-card:hover,.dash-card:hover,.side-panel:hover,.detail-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--floating-shadow-hover);
  border-color:#dbe5df;
}

/* Softer metric cards — no heavy halo */
.card:before{background:radial-gradient(circle,rgba(74,168,91,.07),transparent 68%)}
.cards .card:nth-child(1):after,.cards .card:nth-child(5):after{opacity:.28}
.cards .card:nth-child(2):after{opacity:.25}
.cards .card:nth-child(3):after{border-color:var(--earth-brown);opacity:.26}

/* Modern buttons: dark green + warm earth brown */
.btn{
  border-radius:14px;
  padding:11px 17px;
  min-height:42px;
  box-shadow:0 7px 16px rgba(22,55,43,.07);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(22,55,43,.11)}
.btn:active{transform:translateY(0);box-shadow:0 5px 12px rgba(22,55,43,.08)}
.btn-primary{
  background:linear-gradient(135deg,#064632,#0a684b);
  border-color:#064632;
  box-shadow:0 10px 22px rgba(6,70,50,.18);
}
.btn-primary:hover{background:linear-gradient(135deg,#053c2b,#075a42)}
.btn-secondary{
  background:linear-gradient(135deg,#fbf7f3,#f2e9e1);
  color:var(--earth-brown-dark);
  border-color:#e5d7cb;
}
.btn-secondary:hover{background:linear-gradient(135deg,#f7efe8,#eadccf);border-color:#d9c7b8}
.btn-success{box-shadow:0 8px 18px rgba(8,116,67,.09)}

/* Brown accent for secondary/action controls */
.actions .btn-secondary{color:var(--earth-brown-dark)}

/* Floating inputs */
.field input,.field select,.field textarea,.filter-select,.global-search{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 10px rgba(22,55,43,.025);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:#2f7d32;
  box-shadow:0 0 0 3px rgba(47,125,50,.10),0 7px 18px rgba(22,55,43,.05);
  transform:translateY(-1px);
}

/* More elegant table container */
.table-wrap{box-shadow:var(--floating-shadow);overflow:hidden}
tbody tr{transition:background .15s ease}
tbody tr:hover{background:#f8fbf9}

/* Floating modal with softer depth */
.modal{box-shadow:0 28px 70px rgba(10,45,34,.20);border-color:#e6eee9}
.modal-backdrop{background:rgba(8,44,34,.36);backdrop-filter:blur(8px)}

/* Warm earth accent for small status/detail elements */
.form-section{background:linear-gradient(180deg,#fff,#fdfbf9)}
.form-section-title{color:var(--earth-brown-dark)}

/* Sidebar action stays light but gains a floating feel */
.sidebar-foot .btn{box-shadow:0 7px 16px rgba(22,55,43,.05)}

/* Hero remains the visual anchor, but with restrained depth */
.hero-panel{box-shadow:0 20px 44px rgba(7,83,61,.17)}
.side-panel{background:rgba(255,255,255,.96)}

@media(max-width:760px){
  .card:hover,.mini-card:hover,.dash-card:hover,.side-panel:hover,.detail-card:hover{transform:none}
} /* HJ Operações — identidade visual com imagens */
.hero-panel{
  position:relative;
  overflow:hidden;
  min-height:260px;
  border-radius:24px;
  background-image:
    linear-gradient(90deg,rgba(4,45,30,.92) 0%,rgba(4,45,30,.68) 42%,rgba(4,45,30,.12) 100%),
    url("assets/hero-dashboard.jpg");
  background-size:cover;
  background-position:center;
  box-shadow:0 18px 45px rgba(7,45,30,.16);
  color:#fff;
}

.hero-panel > *{
  position:relative;
  z-index:2;
}

.hero-panel::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.18) 100%);
  pointer-events:none;
}

.card,
.mini-card,
.kpi-card,
.dash-card,
.detail-card{
  border-radius:20px;
  box-shadow:0 12px 30px rgba(15,45,32,.08);
  border:1px solid rgba(15,45,32,.06);
  transition:transform .2s ease,box-shadow .2s ease;
}

.card:hover,
.mini-card:hover,
.kpi-card:hover,
.dash-card:hover,
.detail-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(15,45,32,.12);
}

/* HJ Operações — Correção de visualização mobile */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .layout {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .sidebar {
    width: 100%;
    min-width: 0;
    padding: 12px;
  }

  .main {
    width: 100%;
    min-width: 0;
    padding: 14px;
    overflow-x: hidden;
  }

  .top {
    flex-wrap: wrap;
    gap: 12px;
  }

  .top h1 {
    font-size: 25px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .section,
  .section-head,
  .card,
  .table-wrap {
    max-width: 100%;
    min-width: 0;
  }

  .section-head {
    flex-wrap: wrap;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table {
    min-width: 600px;
  }

  .btn {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    touch-action: manipulation;
  }

  .modal-backdrop {
    padding: 8px;
    align-items: center;
  }

  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 16px;
  }

  .actions {
    flex-wrap: wrap;
  }

  .actions .btn {
    flex: 1 1 130px;
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  .main {
    padding: 10px;
  }

  .sidebar {
    padding: 10px;
  }

  .nav button {
    flex-shrink: 0;
  }

  .card {
    padding: 14px;
  }

  .section-head h2 {
    font-size: 16px;
  }
}

/* Cartões das OS no celular */
.leader-os-list {
  display: grid;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.leader-os-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 18px;
  border: 1px solid #dfe9e4;
  border-radius: 18px;
  background: #fff;
  overflow-wrap: anywhere;
}

.leader-os-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.4;
}

.leader-os-card p {
  white-space: normal;
  line-height: 1.5;
}

.leader-os-info {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  line-height: 1.5;
}

.leader-os-execute {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 16px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-align: center;
  writing-mode: horizontal-tb;
  font-size: 16px;
}

@media (max-width: 760px) {
  #content,
  .section,
  .table-wrap {
    min-width: 0;
    max-width: 100%;
  }

  .leader-os-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Correção definitiva da tabela de OS no celular */
@media (max-width: 760px) {
  .table-wrap {
    overflow: visible !important;
  }

  .table-wrap table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .table-wrap th,
  .table-wrap td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .table-wrap button {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 8px !important;
    white-space: normal !important;
    word-break: normal !important;
    writing-mode: horizontal-tb !important;
  }
}


/* Menu sem símbolos: somente os nomes */
.nav button span[aria-hidden="true"],
.nav button svg,
.nav button i {
  display: none !important;
}

.nav button span {
  margin-left: 0 !important;
}

/* Remove os símbolos quadrados do menu */
.nav button::before,
.nav button::after {
  display: none !important;
  content: none !important;
}

.nav button {
  padding-left: 14px !important;
  gap: 0 !important;
}


/* Menu HJ: verde ao selecionar ou passar o mouse */
.nav button:hover,
.nav button:focus,
.nav button:focus-visible,
.nav button.active {
  background-color: #075c43 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Mantém o texto branco nesses estados */
.nav button:hover *,
.nav button:focus *,
.nav button:focus-visible *,
.nav button.active * {
  color: #ffffff !important;
}

/* Transição suave */
.nav button {
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* Corrige o botão Continuar no celular */
@media (max-width: 760px) {
  .table-wrap td:last-child button,
  .table-wrap button[data-start],
  button.leader-os-execute {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 125px !important;
    max-width: none !important;
    min-height: 46px !important;
    padding: 12px 18px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    writing-mode: horizontal-tb !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }
}

/* Menu HJ: verde ao selecionar ou passar o mouse */
.nav button:hover,
.nav button:focus,
.nav button:focus-visible,
.nav button.active {
  background-color: #075c43 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Mantém o texto branco nesses estados */
.nav button:hover *,
.nav button:focus *,
.nav button:focus-visible *,
.nav button.active * {
  color: #ffffff !important;
}

/* Transição suave */
.nav button {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Botão Fechar do modal no celular */
.modal-head button,
.modal-header button {
  min-width: 100px !important;
  width: auto !important;
  min-height: 48px !important;
  padding: 12px 18px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
  flex-shrink: 0 !important;
}

/* Ajuste da tabela de OS no celular */
@media (max-width: 760px) {
  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap table {
    width: 100%;
    min-width: 720px;
    table-layout: auto;
  }

  .table-wrap th,
  .table-wrap td {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    vertical-align: middle;
    padding: 12px;
  }

  .table-wrap td button {
    min-width: 100px;
    white-space: normal;
    word-break: normal;
  }
}

/* Corrige a tabela de OS no celular */
@media screen and (max-width: 760px) {
  .section.table-wrap {
    display: none !important;
  }

  .wo-cards {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* HJ Operações — ajuste visual clean, sem sombras e menu responsivo */
:root {
  --green-950: #063c2c;
  --green-900: #0a4d38;
  --green-800: #116344;
  --green-700: #3f7d24;
  --green-100: #eaf5ef;
  --bg: #f5f7f6;
  --card: #ffffff;
  --text: #1d2b27;
  --muted: #6a7772;
  --line: #e2e9e5;
  --radius: 12px;
  --shadow: none;
  --shadow-soft: none;
  --shadow-3d: none;
  --floating-shadow: none;
  --floating-shadow-hover: none;
}

/* Evita o menu encobrir os últimos itens e mantém a área principal flexível */
html, body {
  min-height: 100%;
  width: 100%;
}
body {
  overflow-x: hidden;
}
.layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
  width: 100%;
}
.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 248px;
  height: 100vh;
  padding: 16px 14px 12px;
  overflow: hidden;
  background: #fff;
  color: var(--text);
  border-right: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: none;
}
.logo {
  flex: 0 0 auto;
  padding: 2px 6px 10px;
}
.logo-card {
  max-width: 205px;
}
.nav {
  display: grid;
  grid-auto-rows: min-content;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  margin-top: 10px;
  padding: 4px 0 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav button {
  min-height: 42px;
  padding: 10px 12px !important;
  border-radius: 9px;
  color: #385149;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  background: transparent;
  box-shadow: none !important;
  transform: none !important;
}
.nav button:hover,
.nav button:focus-visible,
.nav button.active {
  background: var(--green-900) !important;
  color: #fff !important;
}
.nav button::before,
.nav button::after {
  display: none !important;
  content: none !important;
}
.sidebar-foot {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  margin-top: auto;
  padding: 10px 0 0;
  background: #fff;
  border-top: 1px solid var(--line);
}
.sidebar-foot .btn {
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  border-radius: 9px;
  background: #f5f7f6;
  border: 1px solid var(--line);
  color: var(--green-900);
  box-shadow: none !important;
}
.main {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 28px;
  background: var(--bg);
}
#content, .section, .cards, .dashboard-grid, .dashboard-bottom {
  min-width: 0;
  max-width: 100%;
}

/* Superfícies planas: sem sombras, halos ou movimento */
.card, .mini-card, .dash-card, .side-panel, .detail-card,
.table-wrap, .modal, .form-section, .auth-card, .hero-panel {
  box-shadow: none !important;
}
.card, .mini-card, .dash-card, .side-panel, .detail-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .15s ease, background-color .15s ease;
}
.card::before, .card::after {
  display: none !important;
  content: none !important;
}
.card:hover, .mini-card:hover, .dash-card:hover, .side-panel:hover, .detail-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #cbd9d1;
}
.btn {
  min-height: 42px;
  border-radius: 9px;
  padding: 10px 15px;
  font-weight: 700;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover, .btn:active {
  box-shadow: none !important;
  transform: none !important;
}
.btn-primary {
  color: #fff;
  background: var(--green-900);
  border: 1px solid var(--green-900);
}
.btn-primary:hover {
  background: var(--green-800);
  border-color: var(--green-800);
}
.btn-secondary {
  color: var(--green-900);
  background: #fff;
  border: 1px solid #cbd9d1;
}
.btn-secondary:hover {
  background: var(--green-100);
}
.btn-danger {
  color: #a62b25;
  background: #fff;
  border: 1px solid #e7cecb;
}
.field input, .field select, .field textarea, .filter-select, .global-search {
  box-shadow: none !important;
  border-radius: 9px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 2px #0a4d3820 !important;
  transform: none !important;
}
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.modal {
  border-radius: 14px;
  box-shadow: none !important;
}
.modal-backdrop {
  backdrop-filter: none;
}
.hero-panel {
  border-radius: 14px;
  box-shadow: none !important;
}
.side-panel, .dash-card {
  background: #fff;
}

/* Breakpoints: menu completo no desktop e navegação adaptada em telas menores */
@media (max-width: 1050px) {
  .layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .sidebar {
    width: 220px;
  }
  .main {
    padding: 22px;
  }
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .layout {
    display: block;
  }
  .sidebar {
    position: relative;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 12px;
  }
  .logo {
    padding-bottom: 8px;
  }
  .logo-card {
    max-width: 180px;
  }
  .nav {
    display: flex;
    flex: none;
    height: auto;
    margin-top: 8px;
    padding: 4px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .nav button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .sidebar-foot {
    position: static;
    margin-top: 8px;
  }
  .main {
    padding: 16px;
  }
  .dashboard-grid, .dashboard-bottom {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-topbar {
    display: none;
  }
}
@media (max-width: 520px) {
  .cards, .grid2, .client-summary, .detail-grid, .grid3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .main {
    padding: 12px;
  }
}

/* HJ Operações — cartões uniformes e minimalistas */
.cards .card,
.card,
.mini-card,
.dash-card,
.side-panel,
.detail-card {
  border: 1px solid #e2e9e5 !important;
  box-shadow: none !important;
  transform: none !important;
}

.cards .card:nth-child(n) {
  border-top: 1px solid #e2e9e5 !important;
}

.cards .card::before,
.cards .card::after {
  display: none !important;
}

.card:hover,
.mini-card:hover,
.dash-card:hover,
.side-panel:hover,
.detail-card:hover {
  box-shadow: none !important;
  transform: none !important;
  border-color: #d4dfd9 !important;
}

/* HJ Operações — padrão oficial de botões */
.btn,
button.btn,
.actions button,
.row-actions button,
.table-wrap button,
.leader-os-execute,
.modal-head button,
.modal-header button,
.sidebar-foot .btn {
  background: #07533d !important;
  color: #ffffff !important;
  border: 1px solid #07533d !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  font-weight: 700;
  transition: background-color 0.18s ease,
              border-color 0.18s ease;
}

.btn:hover,
button.btn:hover,
.actions button:hover,
.row-actions button:hover,
.table-wrap button:hover,
.leader-os-execute:hover,
.modal-head button:hover,
.modal-header button:hover,
.sidebar-foot .btn:hover {
  background: #06432f !important;
  border-color: #06432f !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn:focus-visible,
button:focus-visible {
  outline: 2px solid #07533d;
  outline-offset: 3px;
}
/* HJ Operações — refinamento visual leve e consistente
   Cole este bloco no FINAL de styles.css.
   Objetivo: tipografia confortável, hierarquia discreta e botões verdes sem sombras.
*/

/* Tipografia global */
:root {
  --hj-green: #07533d;
  --hj-green-hover: #06432f;
  --hj-text: #20332c;
  --hj-muted: #687871;
  --hj-line: #e1e8e4;
  --hj-surface: #ffffff;
  --hj-background: #f5f7f6;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--hj-text) !important;
  background: var(--hj-background) !important;
  font-weight: 400 !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--hj-text);
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

h1 { font-size: 26px !important; }
h2 { font-size: 21px !important; }
h3 { font-size: 17px !important; }
h4 { font-size: 15px !important; }

p, label, li, td, th, small, .muted {
  line-height: 1.5;
}

p {
  margin-top: 8px;
  margin-bottom: 10px;
}

/* Área de conteúdo: menos espaço desperdiçado */
.main {
  padding: 24px 28px 32px !important;
  max-width: 1600px;
}

.top {
  margin-bottom: 18px !important;
}

.top h1 {
  font-size: 26px !important;
  font-weight: 650 !important;
}

.top p {
  font-size: 13px !important;
  margin-top: 5px !important;
}

/* Cartões e indicadores: superfície limpa e uniforme */
.card,
.mini-card,
.dash-card,
.side-panel,
.detail-card,
.table-wrap,
.form-section {
  box-shadow: none !important;
  border: 1px solid var(--hj-line) !important;
  border-radius: 12px !important;
  background: var(--hj-surface);
  transform: none !important;
}

.card,
.mini-card,
.dash-card,
.side-panel,
.detail-card {
  transition: border-color .15s ease !important;
}

.card:hover,
.mini-card:hover,
.dash-card:hover,
.side-panel:hover,
.detail-card:hover {
  box-shadow: none !important;
  transform: none !important;
  border-color: #ccd9d2 !important;
}

.card::before,
.card::after {
  display: none !important;
  content: none !important;
}

.metric {
  font-size: 28px !important;
  font-weight: 750 !important;
  letter-spacing: -0.03em;
}

.metric-label {
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Ordens de Serviço: títulos e textos mais equilibrados */
.leader-os-list {
  gap: 12px !important;
}

.leader-os-card {
  padding: 16px !important;
  border: 1px solid var(--hj-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.leader-os-card h1,
.leader-os-card h2,
.leader-os-card h3,
.leader-os-card h4 {
  font-size: 17px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  margin: 0 0 8px !important;
}

.leader-os-card p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 7px 0 !important;
  overflow-wrap: anywhere;
}

.leader-os-info {
  gap: 6px !important;
  margin: 12px 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.leader-os-card strong,
.leader-os-info strong {
  font-weight: 650 !important;
}

.leader-os-execute {
  font-size: 13px !important;
  min-height: 38px !important;
  padding: 9px 13px !important;
}

/* Botões: padrão HJ verde-escuro, sem sombra ou movimento.
   Inclui botões genéricos, ações de OS, modais e listas. */
button,
.btn,
.actions button,
.row-actions button,
.table-wrap button,
.leader-os-execute,
.modal-head button,
.modal-header button,
.sidebar-foot .btn {
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}

.btn,
button.btn,
.actions button,
.row-actions button,
.table-wrap button,
.leader-os-execute,
.modal-head button,
.modal-header button,
.sidebar-foot .btn {
  background: var(--hj-green) !important;
  color: #fff !important;
  border: 1px solid var(--hj-green) !important;
}

.btn:hover,
button.btn:hover,
.actions button:hover,
.row-actions button:hover,
.table-wrap button:hover,
.leader-os-execute:hover,
.modal-head button:hover,
.modal-header button:hover,
.sidebar-foot .btn:hover {
  background: var(--hj-green-hover) !important;
  border-color: var(--hj-green-hover) !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn:active,
button.btn:active {
  transform: none !important;
  box-shadow: none !important;
}

button:focus-visible,
.btn:focus-visible {
  outline: 2px solid #75a994 !important;
  outline-offset: 2px !important;
}

/* Inputs e filtros: discretos, com foco visível */
.field input,
.field select,
.field textarea,
.filter-select,
.global-search {
  border: 1px solid #d8e2dc !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  min-height: 40px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--hj-green) !important;
  box-shadow: 0 0 0 2px rgba(7, 83, 61, .10) !important;
  transform: none !important;
}

/* Tabelas e status */
th {
  font-size: 11px !important;
  font-weight: 650 !important;
}

td {
  font-size: 13px !important;
}

.pill {
  font-size: 11px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

/* Menu: tipografia mais leve e rodapé sem sobrepor os itens */
.sidebar {
  box-shadow: none !important;
}

.nav {
  min-height: 0;
  scrollbar-width: thin;
}

.nav button {
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  transform: none !important;
}

.sidebar-foot .btn {
  min-height: 38px !important;
}

/* Modais: sem excesso de sombra, títulos moderados */
.modal {
  border-radius: 14px !important;
  box-shadow: 0 10px 35px rgba(20, 40, 30, .12) !important;
}

.modal-head h3,
.modal-header h3 {
  font-size: 17px !important;
  font-weight: 650 !important;
}

.form-section-title {
  font-size: 13px !important;
  font-weight: 650 !important;
}

/* Responsivo */
@media (min-width: 761px) {
  .layout {
    grid-template-columns: 250px minmax(0, 1fr) !important;
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .nav {
    flex: 1 1 auto;
    height: auto !important;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .sidebar-foot {
    position: static !important;
    flex: 0 0 auto;
    margin-top: auto;
  }
}

@media (max-width: 760px) {
  .main {
    padding: 16px !important;
  }

  .top h1,
  h1 {
    font-size: 23px !important;
  }

  h2 {
    font-size: 19px !important;
  }

  .leader-os-card {
    padding: 14px !important;
  }

  .leader-os-card h1,
  .leader-os-card h2,
  .leader-os-card h3,
  .leader-os-card h4 {
    font-size: 16px !important;
  }
}

/* Banner principal — corrigir contraste do título */
.hero-panel h2 {
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
  text-shadow: none !important;
}

.hero-panel p {
  color: #f2f7f4 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.hero-panel .btn {
  background: #07533d !important;
  color: #ffffff !important;
  border: 1px solid #07533d !important;
  box-shadow: none !important;
}

.hero-panel .btn:hover {
  background: #06432f !important;
  border-color: #06432f !important;
}