@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#f4f8fb;--panel:rgba(255,255,255,.9);--line:rgba(14,116,144,.18);--line2:rgba(15,23,42,.08);--text:#102333;--muted:#5b6f81;--navy:#0f2a44;--teal:#0f9f9a;--teal2:#2dd4bf;--blue:#2563eb;--sky:#38bdf8;--green:#16a34a;--orange:#f97316;--red:#dc2626;--purple:#7c3aed;--shadow:0 22px 60px rgba(14,65,82,.15);--radius:20px}
*{box-sizing:border-box}html{scroll-behavior:smooth}button,input,select,textarea{font:inherit}button{cursor:pointer}
body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at 12% 5%,rgba(45,212,191,.18),transparent 28%),radial-gradient(circle at 84% 7%,rgba(37,99,235,.13),transparent 30%),linear-gradient(135deg,#f8fbff 0%,#eef8f7 48%,#f7fbff 100%);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-4;background:linear-gradient(90deg,rgba(248,251,255,.98) 0%,rgba(248,251,255,.86) 38%,rgba(248,251,255,.50) 72%,rgba(248,251,255,.84) 100%),linear-gradient(0deg,rgba(248,251,255,.98) 0%,rgba(248,251,255,.36) 48%,rgba(248,251,255,.82) 100%),url("../img/contador-inteligente.webp") center/cover no-repeat;filter:saturate(.88) brightness(1.04) contrast(1.02)}
.app{display:grid;grid-template-columns:304px minmax(0,1fr);min-height:100vh}
aside{position:sticky;top:0;height:100vh;padding:22px 18px;overflow-y:auto;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(235,246,255,.86));border-right:1px solid var(--line);box-shadow:18px 0 58px rgba(14,65,82,.11);backdrop-filter:blur(18px);z-index:20}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}.brand-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),var(--teal2));color:white;font-weight:950}.brand h1{font-family:'Bebas Neue';letter-spacing:.05em;font-size:32px;margin:0;color:var(--navy);line-height:1}.brand h1 span{color:var(--teal)}.brand small{display:block;color:var(--muted);font-size:12px}
.office-card{border:1px solid var(--line);border-radius:18px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(230,247,250,.74));box-shadow:var(--shadow);margin-bottom:18px}.office-card .name{font-size:18px;font-weight:950}.office-card .meta{color:var(--muted);font-size:12px;line-height:1.5;margin-top:6px}
.mini-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}.mini-stat{padding:10px;border-radius:13px;background:rgba(15,159,154,.07);border:1px solid rgba(15,159,154,.12)}.mini-stat b{display:block;font-size:16px}.mini-stat span{font-size:10px;color:var(--muted)}
.nav-title{font-size:11px;color:#577082;font-weight:950;text-transform:uppercase;letter-spacing:.13em;margin:18px 8px 9px}.nav{display:grid;gap:7px}.nav button{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;border:1px solid transparent;background:transparent;color:#334b5c;font-weight:850;text-align:left;transition:.2s}.nav button i{width:18px;height:18px;color:var(--teal)}.nav button:hover{background:rgba(15,159,154,.07);border-color:rgba(15,159,154,.14)}.nav button.active{background:linear-gradient(90deg,rgba(15,159,154,.16),rgba(37,99,235,.08));border-color:rgba(15,159,154,.26);color:var(--navy);box-shadow:inset 3px 0 0 var(--teal)}
main{padding:24px clamp(18px,3vw,42px) 44px;min-width:0}
.topbar{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;min-height:154px;padding:22px 24px;margin-bottom:18px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(235,246,255,.68));box-shadow:var(--shadow);backdrop-filter:blur(18px)}.topbar:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(248,251,255,.97) 0%,rgba(248,251,255,.82) 45%,rgba(248,251,255,.24) 100%),linear-gradient(0deg,rgba(248,251,255,.92),rgba(248,251,255,.20)),url("../img/contador-inteligente.webp") center/cover no-repeat;opacity:.88}.topbar>*{position:relative;z-index:1}.topbar h2{margin:0;font-size:clamp(26px,3vw,42px);letter-spacing:-.035em;color:var(--navy)}.topbar p{margin:6px 0 0;color:var(--muted);max-width:760px;line-height:1.45}body.home-mode .topbar{display:none}
.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{border:0;border-radius:13px;padding:11px 14px;font-weight:950;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.22s;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#06231f;box-shadow:0 14px 30px rgba(15,159,154,.18)}.btn-blue{background:linear-gradient(135deg,var(--blue),var(--sky));color:white}.btn-dark{background:rgba(255,255,255,.70);border:1px solid var(--line);color:var(--navy);backdrop-filter:blur(10px)}.btn-small{padding:8px 10px;font-size:12px;border-radius:10px}
.content{display:none}.content.active{display:block;animation:fadeUp .34s ease both}@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.grid{display:grid;gap:16px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.split{display:grid;grid-template-columns:1.16fr .84fr;gap:16px}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(237,250,251,.70));box-shadow:var(--shadow);backdrop-filter:blur(18px);min-width:0}.card h3{margin:0 0 14px;font-size:18px;color:var(--navy)}.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.card-header h3{margin:0}.muted{color:var(--muted)}
.home-banner{min-height:178px;border-radius:28px;border:1px solid rgba(15,159,154,.25);padding:28px 30px;margin-bottom:16px;background:linear-gradient(90deg,rgba(15,42,68,.90) 0%,rgba(15,42,68,.66) 44%,rgba(15,42,68,.18) 100%),linear-gradient(0deg,rgba(15,42,68,.72),rgba(15,42,68,.08)),url("../img/contador-inteligente.webp") center/cover no-repeat;box-shadow:var(--shadow);display:flex;align-items:flex-end}.home-banner h2{margin:0;max-width:880px;font-size:clamp(34px,5vw,66px);line-height:.95;letter-spacing:-.055em;color:white;text-shadow:0 16px 40px rgba(0,0,0,.45)}.home-banner .label{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;border-radius:999px;background:rgba(45,212,191,.18);border:1px solid rgba(45,212,191,.26);color:#d7fffb;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.12em}
.ops-panel{border:1px solid var(--line);border-radius:24px;padding:18px;margin-bottom:16px;background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(235,246,255,.72));box-shadow:var(--shadow);backdrop-filter:blur(18px)}.ops-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px}.ops-head h3{margin:0;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.035em;color:var(--navy)}.ops-head p{margin:5px 0 0;color:var(--muted);max-width:850px;line-height:1.45}
.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.process-card{min-height:128px;border:1px solid rgba(15,159,154,.16);border-radius:20px;background:rgba(255,255,255,.72);color:var(--navy);padding:14px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 12px 32px rgba(14,65,82,.08);transition:.22s}.process-card:hover{transform:translateY(-3px);border-color:rgba(15,159,154,.36);background:rgba(255,255,255,.95)}.process-card i{width:28px;height:28px;color:var(--teal)}.process-card b{display:block;margin-top:8px;font-size:15px;line-height:1.15}.process-card span{display:block;margin-top:6px;color:var(--muted);font-size:12px;line-height:1.35}.process-card.orange i{color:var(--orange)}.process-card.red i{color:var(--red)}.process-card.blue i{color:var(--blue)}.process-card.green i{color:var(--green)}.process-card.purple i{color:var(--purple)}
.kpi{position:relative;overflow:hidden}.kpi:after{content:"";position:absolute;right:-28px;top:-28px;width:110px;height:110px;border-radius:50%;background:rgba(15,159,154,.08)}.kpi .icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(15,159,154,.10);border:1px solid rgba(15,159,154,.20);margin-bottom:14px;color:var(--teal)}.kpi b{display:block;font-size:30px;letter-spacing:-.04em;color:var(--navy)}.kpi span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.automation-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0}.auto-chip{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:18px;background:rgba(255,255,255,.76);border:1px solid var(--line);box-shadow:0 12px 28px rgba(14,65,82,.07)}.auto-chip i{width:22px;height:22px;color:var(--teal);flex:none}.auto-chip b{display:block;font-size:13px;color:var(--navy)}.auto-chip span{display:block;color:var(--muted);font-size:11.5px;line-height:1.3;margin-top:2px}
.services-home{margin-top:16px}.services-home-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}.services-home-header h3{margin:0;font-size:22px;color:var(--navy)}.services-home-header p{margin:4px 0 0;color:var(--muted);font-size:13px}.service-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.service-square{min-height:132px;aspect-ratio:1/1;border:1px solid rgba(15,159,154,.14);border-radius:22px;padding:14px;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(237,250,251,.66));color:var(--navy);display:flex;flex-direction:column;justify-content:space-between;text-align:left;transition:.22s;box-shadow:0 12px 32px rgba(14,65,82,.08)}.service-square:hover{transform:translateY(-4px);border-color:rgba(15,159,154,.35);background:rgba(255,255,255,.96)}.service-icon{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:rgba(15,159,154,.10);border:1px solid rgba(15,159,154,.18);color:var(--teal)}.service-square strong{display:block;font-size:13px;line-height:1.16;margin-top:11px}.service-square small{display:block;color:var(--muted);font-size:10.5px;line-height:1.25;margin-top:5px}.service-tag{align-self:flex-start;color:#0f766e;font-weight:900;font-size:10px;padding:5px 7px;border-radius:999px;background:rgba(15,159,154,.09);border:1px solid rgba(15,159,154,.12)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.field{min-width:180px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);outline:none;background:rgba(255,255,255,.74);color:var(--text)}.field::placeholder{color:#7890a0}.field:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,159,154,.12)}
.table-wrap{width:100%;overflow-x:auto;border-radius:14px;border:1px solid var(--line2)}table{width:100%;min-width:850px;border-collapse:collapse}th,td{padding:12px 10px;border-bottom:1px solid var(--line2);font-size:13px;text-align:left;vertical-align:middle;white-space:nowrap}th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#577082;background:rgba(15,159,154,.055)}tr:hover td{background:rgba(15,159,154,.035)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:950}.ok{background:rgba(22,163,74,.11);color:#166534}.warn{background:rgba(234,179,8,.13);color:#854d0e}.bad{background:rgba(220,38,38,.11);color:#991b1b}.info{background:rgba(37,99,235,.11);color:#1d4ed8}.purple{background:rgba(124,58,237,.10);color:#5b21b6}.neutral{background:rgba(15,23,42,.06);color:#334155}
.doc-list{display:grid;gap:10px}.doc{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid var(--line2);border-radius:14px;background:rgba(255,255,255,.70)}.doc-left{display:flex;align-items:center;gap:10px}.doc-left i{color:var(--teal);width:20px;height:20px;flex:none}.doc-left span,.doc span{color:var(--muted);font-size:12px;line-height:1.35}
.workflow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.step{padding:14px;border-radius:16px;background:rgba(255,255,255,.74);border:1px solid var(--line2);min-height:128px}.step i{color:var(--teal);margin-bottom:10px}.step b{display:block;font-size:14px;color:var(--navy)}.step span{display:block;color:var(--muted);font-size:11.5px;line-height:1.35;margin-top:5px}
.chat{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto}.bubble{max-width:84%;padding:10px 12px;border-radius:14px;font-size:13px;line-height:1.45}.bubble.bot{background:rgba(15,159,154,.10);border:1px solid rgba(15,159,154,.16);align-self:flex-start}.bubble.user{background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.16);align-self:flex-end}.quick-replies{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chart{height:220px;display:flex;align-items:end;gap:12px;border-bottom:1px solid var(--line2);padding:14px 6px 0}.bar{flex:1;min-width:28px;border-radius:9px 9px 0 0;background:linear-gradient(180deg,var(--teal2),var(--teal));position:relative}.bar.blue{background:linear-gradient(180deg,#60a5fa,#2563eb)}.bar.green{background:linear-gradient(180deg,#86efac,#16a34a)}.bar.orange{background:linear-gradient(180deg,#fdba74,#f97316)}.bar span{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);white-space:nowrap}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,42,68,.45);backdrop-filter:blur(10px);z-index:999;display:none;align-items:center;justify-content:center;padding:20px}.modal-backdrop.show{display:flex}.modal{width:min(940px,100%);max-height:88vh;overflow:auto;background:linear-gradient(145deg,#ffffff,#eef8f7);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 32px 90px rgba(14,65,82,.24)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.modal-head h3{margin:0}.close{border:0;background:rgba(15,159,154,.10);color:var(--navy);border-radius:12px;width:38px;height:38px}
.toast{position:fixed;right:20px;bottom:20px;z-index:1000;max-width:390px;padding:14px 16px;border-radius:16px;background:#ffffff;border:1px solid rgba(15,159,154,.28);box-shadow:var(--shadow);display:none;color:var(--navy)}.toast.show{display:flex;align-items:flex-start;gap:10px;animation:toast .3s ease both}.toast i{color:var(--teal)}@keyframes toast{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mobile-shellbar,.sidebar-overlay{display:none}
@media(max-width:1180px){.app{grid-template-columns:1fr}aside{position:relative;height:auto}.nav{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-4,.grid-3,.grid-2,.split,.workflow{grid-template-columns:1fr 1fr}.service-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.automation-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{flex-direction:column;align-items:flex-start}}
@media(max-width:860px){body{padding-top:72px}.mobile-shellbar{position:fixed;inset:0 0 auto 0;z-index:1200;height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(235,246,255,.90));border-bottom:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 18px 45px rgba(14,65,82,.12)}.mobile-brand{display:flex;align-items:center;gap:10px;min-width:0}.mobile-brand strong{display:block;font-size:14px;color:var(--navy)}.mobile-brand span{display:block;color:var(--muted);font-size:11px}.mobile-menu-btn{width:46px;height:46px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.76);color:var(--navy)}.sidebar-overlay{position:fixed;inset:0;z-index:1100;background:rgba(15,42,68,.32);backdrop-filter:blur(4px)}.sidebar-overlay.show{display:block}.app{display:block}aside{position:fixed;top:0;left:0;z-index:1250;width:min(88vw,340px);max-width:340px;height:100dvh;padding:18px 16px 24px;transform:translateX(-105%);transition:.28s cubic-bezier(.22,1,.36,1);border-radius:0 24px 24px 0}aside.open{transform:translateX(0)}.nav,.process-grid,.automation-strip,.grid-4,.grid-3,.grid-2,.split,.workflow,.service-grid{grid-template-columns:1fr}main{padding:14px 12px 30px}.home-banner{min-height:118px;border-radius:20px;padding:20px}.home-banner h2{font-size:clamp(28px,8vw,42px)}.ops-head,.services-home-header,.card-header{align-items:flex-start;flex-direction:column}.ops-head .actions,.actions .btn{width:100%}.service-square{aspect-ratio:auto;min-height:112px}.card,.ops-panel{border-radius:17px;padding:14px}.topbar{border-radius:20px;padding:18px;min-height:unset}.toolbar{display:grid;grid-template-columns:1fr}.field,.toolbar .btn{width:100%;min-width:0}.table-wrap table{min-width:760px}.modal-backdrop{padding:10px;align-items:flex-end}.modal{border-radius:22px 22px 0 0;max-height:88dvh}.toast{left:12px;right:12px;bottom:12px;max-width:none}}