/* ============================================================
   Na Escala — Portal do cliente (área logada)
   ============================================================ */

.portal{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:none; grid-template-columns:264px 1fr; grid-template-rows:64px 1fr;
  grid-template-areas:"side top" "side main";
}
.portal.open{display:grid;}

/* Sidebar */
.p-side{
  grid-area:side; background:var(--ink); color:rgba(255,255,255,.74);
  display:flex; flex-direction:column; padding:18px 16px; overflow-y:auto;
}
.p-brand{display:flex; align-items:center; gap:10px; padding:6px 8px 20px;}
.p-brand img{height:32px;}
.p-brand .bn{font-family:var(--display); font-weight:600; font-size:18px; color:#fff;}
.p-nav{display:flex; flex-direction:column; gap:3px; flex:1;}
.p-nav .grp{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.4); padding:16px 12px 7px;}
.p-link{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px;
  font-size:14.5px; font-weight:500; color:rgba(255,255,255,.74); border:none; background:none; width:100%; text-align:left;
  transition:background .15s, color .15s;
}
.p-link svg{width:19px; height:19px; flex:none;}
.p-link:hover{background:rgba(255,255,255,.07); color:#fff;}
.p-link.active{background:var(--blue); color:#fff;}
.p-link .badge{margin-left:auto; font-family:var(--mono); font-size:10px; background:var(--blue); color:#fff; padding:2px 7px; border-radius:var(--r-pill);}
.p-link.active .badge{background:rgba(255,255,255,.25);}
.p-side .logout{margin-top:8px; color:rgba(255,255,255,.6);}
.p-side .logout:hover{background:rgba(192,64,46,.18); color:#fff;}

/* Topbar */
.p-top{
  grid-area:top; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 26px; gap:16px;
}
.p-top .crumbs{font-size:14px; color:var(--ink-3);}
.p-top .crumbs b{color:var(--ink); font-family:var(--display); font-weight:600;}
.p-mobtoggle{display:none; background:none; border:none; color:var(--ink); padding:6px;}
.p-mobtoggle svg{width:24px;height:24px;}
.p-user{display:flex; align-items:center; gap:12px;}
.p-user .bell{position:relative; width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink-2);}
.p-user .bell svg{width:19px;height:19px;}
.p-user .bell::after{content:""; position:absolute; top:9px; right:10px; width:7px;height:7px;border-radius:50%;background:var(--danger); border:2px solid #fff;}
.p-user .who{display:flex; align-items:center; gap:10px; padding:5px 6px 5px 5px; border:1px solid var(--line); border-radius:var(--r-pill);}
.p-user .av{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:14px;}
.p-user .who .nm{font-size:13.5px; font-weight:600; line-height:1.2;}
.p-user .who .pl{font-size:11px; color:var(--ink-3);}

/* Main scroll area */
.p-main{grid-area:main; overflow-y:auto; padding:32px;}
.p-view{display:none;}
.p-view.active{display:block; opacity:1;}
@media (prefers-reduced-motion: no-preference){
  .p-view.active.p-enter{animation:pfade .28s ease;}
}
@keyframes pfade{from{transform:translateY(8px);} to{transform:none;}}
.p-h{font-size:28px; margin-bottom:4px;}
.p-sub{color:var(--ink-2); font-size:15px; margin-bottom:26px;}
.p-section-t{font-family:var(--display); font-weight:600; font-size:18px; margin:34px 0 16px;}

/* KPI cards */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:8px;}
.kpi{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px;}
.kpi .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.kpi .lbl{font-size:13px; color:var(--ink-3); font-weight:500;}
.kpi .ico{width:38px;height:38px;border-radius:11px;background:var(--blue-50);color:var(--blue);display:grid;place-items:center;}
.kpi .ico svg{width:19px;height:19px;}
.kpi .val{font-family:var(--display); font-weight:600; font-size:27px; letter-spacing:-.02em;}
.kpi .delta{font-size:12.5px; margin-top:6px; display:inline-flex; align-items:center; gap:5px;}
.kpi .delta.up{color:var(--ok);}
.kpi .delta.down{color:var(--danger);}

/* generic panel */
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px;}
.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
.panel-head h3{font-size:17px;}
.grid-2{display:grid; grid-template-columns:1.6fr 1fr; gap:18px;}

/* status pills */
.pill{font-family:var(--mono); font-size:11px; font-weight:600; padding:4px 11px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:6px;}
.pill::before{content:""; width:6px;height:6px;border-radius:50%; background:currentColor;}
.pill.ok{background:var(--ok-bg); color:var(--ok);}
.pill.warn{background:var(--warn-bg); color:var(--warn);}
.pill.danger{background:var(--danger-bg); color:var(--danger);}

/* tables */
.tbl{width:100%; border-collapse:collapse;}
.tbl th{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); text-align:left; font-weight:500; padding:0 14px 12px;}
.tbl td{padding:14px; border-top:1px solid var(--line-2); font-size:14px; color:var(--ink-2);}
.tbl tr:hover td{background:var(--bg);}
.tbl td .doc{font-family:var(--mono); font-size:13px; color:var(--ink);}
.tbl td.amount{font-family:var(--display); font-weight:600; color:var(--ink);}
.linkbtn{color:var(--blue); font-weight:600; font-size:13px; background:none; border:none; padding:0; display:inline-flex; align-items:center; gap:5px;}
.linkbtn svg{width:15px;height:15px;}
.linkbtn:hover{text-decoration:underline;}

/* bar chart */
.bars{display:flex; align-items:flex-end; gap:12px; height:200px; padding-top:10px;}
.bars .col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end;}
.bars .col .bar{width:100%; max-width:42px; border-radius:7px 7px 0 0; background:linear-gradient(180deg,var(--blue-3),var(--blue)); transition:height .6s cubic-bezier(.2,.8,.2,1);}
.bars .col .bar.muted{background:var(--blue-100);}
.bars .col .m{font-family:var(--mono); font-size:11px; color:var(--ink-3);}

/* donut / progress */
.fin-summary{display:flex; gap:22px; align-items:center;}
.donut{--p:72; width:128px;height:128px;border-radius:50%; flex:none;
  background:conic-gradient(var(--blue) calc(var(--p)*1%), var(--blue-100) 0);
  display:grid; place-items:center;}
.donut .hole{width:92px;height:92px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;}
.donut .hole .pp{font-family:var(--display); font-weight:600; font-size:24px;}
.donut .hole .ll{font-size:11px; color:var(--ink-3);}
.legend{display:grid; gap:12px;}
.legend .li{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-2);}
.legend .li .sw{width:11px;height:11px;border-radius:3px;}
.legend .li b{margin-left:auto; color:var(--ink); font-family:var(--display); font-weight:600;}

.alert{display:flex; gap:12px; align-items:flex-start; background:var(--warn-bg); border:1px solid #F0DDB0; border-radius:var(--r); padding:16px 18px; margin-bottom:22px;}
.alert.ok{background:var(--ok-bg); border-color:#BFE3D0;}
.alert .ic{flex:none; color:var(--warn);} .alert.ok .ic{color:var(--ok);}
.alert .ic svg{width:22px;height:22px;}
.alert .tx{font-size:14px; color:var(--ink);}
.alert .tx b{font-weight:700;}
.alert .btn{margin-left:auto; flex:none;}

/* progress bars (usage) */
.usage-row{display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--line-2);}
.usage-row:first-child{border-top:none;}
.usage-row .nm{width:210px; font-size:14px; font-weight:500; color:var(--ink); flex:none;}
.usage-row .track{flex:1; height:10px; border-radius:6px; background:var(--bg);}
.usage-row .track .fill{height:100%; border-radius:6px; background:var(--blue);}
.usage-row .vv{width:120px; text-align:right; font-family:var(--mono); font-size:13px; color:var(--ink-2); flex:none;}

/* tickets */
.ticket{display:flex; gap:14px; padding:18px; border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; align-items:flex-start; transition:border-color .15s, box-shadow .15s;}
.ticket:hover{border-color:var(--blue-200); box-shadow:var(--shadow-sm);}
.ticket .tk-ico{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--blue-50);color:var(--blue);}
.ticket .tk-ico svg{width:20px;height:20px;}
.ticket .tk-body{flex:1;}
.ticket .tk-body .tt{font-weight:600; font-size:15px; color:var(--ink); margin-bottom:3px;}
.ticket .tk-body .meta{font-size:12.5px; color:var(--ink-3); font-family:var(--mono);}
.ticket .tk-body .ds{font-size:13.5px; color:var(--ink-2); margin-top:7px;}

.support-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:18px;}
.help-list{list-style:none; padding:0; margin:0;}
.help-list li{padding:13px 0; border-top:1px solid var(--line-2); display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:14px;}
.help-list li:first-child{border-top:none;}
.help-list li a{color:var(--blue); font-weight:600;}

/* contract */
.contract-card{display:grid; grid-template-columns:1fr 1fr; gap:0;}
.contract-card .meta-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; margin-top:6px;}
.meta-item .k{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.meta-item .v{font-size:15px; font-weight:600; color:var(--ink); margin-top:4px;}
.renew-box{background:var(--blue-ink); color:#fff; border-radius:var(--r); padding:26px;}
.renew-box h3{color:#fff; font-size:19px; margin-bottom:8px;}
.renew-box p{color:rgba(255,255,255,.78); font-size:14px; margin-bottom:18px;}
.renew-box .price{font-family:var(--display); font-weight:600; font-size:32px; margin-bottom:2px;}
.renew-box .price small{font-size:14px; font-weight:400; color:rgba(255,255,255,.7);}

/* toggles in settings */
.toggle-row{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-top:1px solid var(--line-2);}
.toggle-row:first-child{border-top:none;}
.toggle-row .tl{font-size:14.5px; font-weight:500; color:var(--ink);}
.toggle-row .td{font-size:13px; color:var(--ink-3);}
.switch{width:46px;height:26px;border-radius:var(--r-pill);background:var(--line);border:none;position:relative;flex:none;transition:background .2s;cursor:pointer;}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:left .2s;}
.switch.on{background:var(--blue);} .switch.on::after{left:23px;}

/* ===== Login modal ===== */
.modal-back{position:fixed; inset:0; z-index:150; background:rgba(10,24,40,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:20px;}
.modal-back.open{display:flex; animation:pfade .2s;}
.modal{background:#fff; border-radius:var(--r-lg); width:100%; max-width:420px; box-shadow:var(--shadow-lg); overflow:hidden;}
.modal-head{padding:28px 30px 0; text-align:center;}
.modal-head img{height:46px; margin:0 auto 14px;}
.modal-head h3{font-size:23px; margin-bottom:6px;}
.modal-head p{color:var(--ink-2); font-size:14px;}
.modal-body{padding:24px 30px 30px;}
.modal .field-help{display:flex; justify-content:space-between; align-items:center; margin:-6px 0 18px;}
.modal .field-help label{display:flex; gap:7px; align-items:center; font-size:13px; color:var(--ink-2); margin:0;}
.modal .field-help a{font-size:13px; color:var(--blue); font-weight:600;}
.modal .demo-hint{margin-top:16px; text-align:center; font-size:12.5px; color:var(--ink-3); background:var(--blue-50); padding:10px; border-radius:var(--r-sm);}
.modal .demo-hint b{color:var(--blue);}
.modal-close{position:absolute; top:16px; right:18px; background:none; border:none; color:var(--ink-3); padding:4px;}
.modal-close svg{width:22px;height:22px;}
.modal-x-wrap{position:relative;}

/* ===== Mostrar/ocultar senha ===== */
.pass-wrap{position:relative;}
.pass-wrap input{padding-right:46px;}
.pass-toggle{position:absolute; top:50%; right:8px; transform:translateY(-50%); background:none; border:none; color:var(--ink-3); padding:7px; display:grid; place-items:center; cursor:pointer; border-radius:8px;}
.pass-toggle:hover{color:var(--blue); background:var(--blue-50);}
.pass-toggle svg{width:20px; height:20px;}

/* ===== Suporte modal ===== */
.support-options{display:flex; flex-direction:column; gap:12px;}
.support-opt{display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px; border:1px solid var(--line); border-radius:var(--r); background:#fff; cursor:pointer; transition:border-color .18s, box-shadow .18s, transform .18s;}
.support-opt:hover{border-color:#d3e0ec; box-shadow:var(--shadow-sm); transform:translateY(-2px);}
.support-opt .so-ico{flex:none; width:44px; height:44px; border-radius:12px; background:var(--blue-50); color:var(--blue); display:grid; place-items:center;}
.support-opt .so-ico svg{width:22px; height:22px;}
.support-opt .so-tx{display:flex; flex-direction:column; gap:2px;}
.support-opt .so-tx b{font-size:15px; color:var(--ink); font-weight:600;}
.support-opt .so-tx small{font-size:12.5px; color:var(--ink-3); line-height:1.4;}
.support-opt .so-arrow{width:18px; height:18px; color:var(--ink-3); margin-left:auto; flex:none;}
.support-actions{display:flex; gap:10px; margin-top:6px;}
.support-actions .btn{flex:1; justify-content:center;}
#supportForm .field input[type=file]{font-size:13px; color:var(--ink-2);}
#supportForm .modal-body{max-height:64vh; overflow-y:auto;}
.ok-ico{width:54px; height:54px; border-radius:50%; background:var(--ok, #16a34a); color:#fff; display:grid; place-items:center;}
.ok-ico svg{width:26px; height:26px;}

@media (max-width:900px){
  .kpis{grid-template-columns:1fr 1fr;}
  .grid-2,.support-grid,.contract-card{grid-template-columns:1fr;}
  .portal{grid-template-columns:1fr; grid-template-areas:"top" "main";}
  .p-side{position:fixed; inset:0 auto 0 0; width:264px; z-index:210; transform:translateX(-100%); transition:transform .25s;}
  .p-side.open{transform:translateX(0); box-shadow:var(--shadow-lg);}
  .p-mobtoggle{display:inline-flex;}
  .p-backdrop{position:fixed; inset:0; background:rgba(10,24,40,.4); z-index:205; display:none;}
  .p-backdrop.show{display:block;}
}
@media (max-width:560px){
  .kpis{grid-template-columns:1fr;}
  .p-user .who .info{display:none;}
  .usage-row{flex-wrap:wrap;} .usage-row .nm{width:100%;}
  .tbl .hide-sm{display:none;}
}