/* ============================================================
   REVENDA CALLANDRA — PEDIDOS, PAINÉIS, SWITCHER
   ============================================================ */

/* ---------------- TIMELINE PEDIDO ---------------- */
.otl{display:flex; align-items:center; gap:0; margin:8px 0 4px}
.otl-step{display:flex; align-items:center; gap:9px; color:var(--ink-3)}
.otl-step.done{color:var(--ok)} .otl-step.cur{color:var(--clay)}
.otl-dot{width:26px; height:26px; border-radius:50%; border:2px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0}
.otl-step.done .otl-dot{background:var(--ok); border-color:var(--ok); color:#fff}
.otl-step.cur .otl-dot{background:var(--clay); border-color:var(--clay); color:#fff}
.otl-step span{font-size:13.5px; font-weight:700; white-space:nowrap}
.otl-bar{width:46px; height:2px; background:var(--line); margin:0 12px}
.otl-step.done .otl-bar{background:var(--ok)}

/* ---------------- DETALHE PEDIDO ---------------- */
.od-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px}
.od-id{font-size:26px} .od-total{text-align:right} .od-total span{display:block; font-size:12px; color:var(--ink-3); font-weight:600}
.od-total b{font-family:var(--ff-disp); font-size:26px}
.od-block-title{font-size:15px; font-family:var(--ff-ui); font-weight:800; letter-spacing:.01em; margin:0 0 14px; text-transform:uppercase; color:var(--ink-2); font-size:12.5px; letter-spacing:.06em}
.od-foot-row{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap}
.od-foot-row .muted{display:inline-flex; align-items:center; gap:6px; font-size:13px}
.od-foot-totals{display:flex; gap:22px; align-items:baseline} .od-foot-totals span{font-size:13px; color:var(--ink-3)} .od-foot-totals b{color:var(--ink); margin-left:5px}
.od-grand b{font-family:var(--ff-disp); font-size:18px}
.od-empty{padding:8px 0; font-size:14px}
.count-pill{display:inline-flex; align-items:center; background:var(--cream-2); color:var(--ink-2); font-size:11px; font-weight:800; padding:2px 8px; border-radius:99px; margin-left:6px}

/* NF / boleto */
.nf-list{display:flex; flex-direction:column; gap:10px}
.nf-row{display:flex; align-items:center; gap:14px; padding:12px 14px; background:var(--cream); border-radius:11px}
.nf-ico{width:38px; height:38px; border-radius:9px; background:var(--paper); border:1px solid var(--line); color:var(--clay); display:flex; align-items:center; justify-content:center}
.nf-info{flex:1; display:flex; flex-direction:column} .nf-info b{font-size:14.5px} .nf-info span{font-size:12px}

/* títulos resumo */
.titulo-resumo{display:flex; align-items:center; gap:24px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap}
.tr-item{display:flex; flex-direction:column} .tr-item span{font-size:12px; color:var(--ink-3)} .tr-item b{font-family:var(--ff-disp); font-size:18px}
.tr-bar{flex:1; min-width:120px; height:8px; background:var(--cream-2); border-radius:99px; overflow:hidden}
.tr-bar.mini{height:5px} .tr-bar-fill{height:100%; background:var(--ok); border-radius:99px; transition:width .4s}

/* ---------------- LISTA DE PEDIDOS ---------------- */
.pedidos{padding:36px 0 72px}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.ped-list{display:flex; flex-direction:column; gap:10px}
.ped-row{display:grid; grid-template-columns:1.4fr 1fr 1.2fr auto; gap:18px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; text-align:left; width:100%}
.ped-row.static{cursor:default} .ped-row.flash{animation:flash 1.6s ease}
@keyframes flash{0%,100%{background:var(--paper)}30%{background:#EAF6F8}}
.ped-row-id{font-size:15px} .ped-row-main{display:flex; flex-direction:column; gap:5px}
.ped-row-main .muted{font-size:13px}
.ped-row-pay span,.ped-row-fin span{display:block; font-size:11.5px; color:var(--ink-3)} .ped-row-pay b{font-size:13.5px}
.ped-row-fin .muted{font-size:12px; margin-bottom:5px; display:block}
.ped-row-total{display:flex; align-items:center; gap:10px} .ped-row-total b{font-family:var(--ff-disp); font-size:18px}
.ped-list.compact .ped-row{grid-template-columns:1fr auto; padding:12px 14px}

/* ---------------- PANEL SHELL ---------------- */
.shell{display:grid; grid-template-columns:248px 1fr; min-height:100vh; background:var(--cream)}
.shell-side{position:sticky; top:0; height:100vh; isolation:isolate; overflow:hidden;
  background:var(--panel-dark); color:var(--cream); display:flex; flex-direction:column; padding:24px 16px}
.shell-side::before{content:"C"; font-family:var(--ff-brand); font-weight:600;
  font-size:clamp(220px,34vh,380px); left:-.10em; bottom:-.20em; -webkit-text-stroke-width:1.3px}
.shell-nav{overflow-y:auto}
.shell-brand{display:flex; flex-direction:column; gap:4px; padding:6px 12px 22px}
.shell-logo{font-family:var(--ff-brand); font-weight:600; font-size:33px; letter-spacing:-.01em; color:#fff; line-height:.9}
.shell-tag{font-size:9.5px; font-weight:800; letter-spacing:.22em; color:var(--gold)}
.shell-nav{display:flex; flex-direction:column; gap:3px; flex:1}
.shell-nav-item{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; border:0; background:none;
  color:rgba(247,241,231,.66); font-weight:600; font-size:14.5px; text-align:left; width:100%; transition:.15s}
.shell-nav-item:hover{background:rgba(247,241,231,.07); color:#fff}
.shell-nav-item.on{background:var(--clay); color:#fff}
.shell-sage .shell-nav-item.on{background:var(--sage)}
.shell-nav-item span{flex:1}
.shell-nav-item span.shell-nav-badge{flex:0 0 auto; background:rgba(247,241,231,.16); color:#fff; font-size:11px; font-weight:800; padding:1px 8px; border-radius:99px}
.shell-nav-item.on .shell-nav-badge{background:rgba(255,255,255,.25)}
.shell-user{display:flex; align-items:center; gap:11px; padding:14px 10px 4px; border-top:1px solid rgba(247,241,231,.12); margin-top:8px}
.shell-user .avatar{background:var(--clay)} .shell-sage .shell-user .avatar{background:var(--sage)}
.shell-user-info{display:flex; flex-direction:column; overflow:hidden}
.shell-user-info b{font-size:13.5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shell-user-info span{font-size:11.5px; color:rgba(247,241,231,.5)}
.shell-main{display:flex; flex-direction:column; min-width:0}
.shell-topbar{display:flex; align-items:center; justify-content:flex-end; gap:16px; padding:16px 32px; border-bottom:1px solid var(--line);
  background:rgba(247,241,231,.8); backdrop-filter:blur(10px); position:sticky; top:0; z-index:30; min-height:69px}
.topbar-com{display:flex; flex-direction:column; align-items:flex-end} .topbar-com span{font-size:11px; color:var(--ink-3); font-weight:600}
.topbar-com b{font-family:var(--ff-disp); font-size:18px}
.shell-content{padding:30px 32px 48px; max-width:1180px}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px}
.page-head h1{font-size:clamp(28px,3.4vw,40px); letter-spacing:-.03em; line-height:1; animation:rcUp .6s cubic-bezier(.16,1,.3,1) both}

/* two col + minis */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.carteira-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.rev-mini{background:var(--cream); border:1px solid var(--line); border-radius:11px; padding:14px; display:flex; flex-direction:column; gap:6px}
.rev-mini b{font-size:14.5px} .rev-mini .muted{font-size:12px}
.rev-mini-foot{display:flex; justify-content:space-between; margin-top:4px; font-size:12px; color:var(--ink-3)} .rev-mini-foot b{font-weight:800}
.alert-list{display:flex; flex-direction:column; gap:10px}
.alert-row{display:flex; align-items:center; gap:10px; background:#FBF3E8; border-radius:10px; padding:11px 13px; font-size:14px}
.alert-row svg{color:var(--warn); flex-shrink:0}

/* tabela com padding */
.tbl-pad{padding:6px 10px 4px} .tbl-pad th{padding-top:14px} .tbl-pad th:first-child,.tbl-pad td:first-child{padding-left:18px} .tbl-pad th:last-child,.tbl-pad td:last-child{padding-right:18px}
.prod-cell{display:flex; align-items:center; gap:12px} .prod-cell-img{width:44px; height:44px; border-radius:8px; overflow:hidden; flex-shrink:0}
.ok{color:var(--ok)} .danger{color:var(--danger)}

/* novo pedido (rep) */
.novo-grid{display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start}
.rev-selected{display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--cream); border-radius:11px; padding:14px 16px}
.rev-pick{display:flex; flex-direction:column; gap:8px; max-height:280px; overflow:auto}
.rev-pick-item{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--cream); border:1.5px solid transparent; border-radius:10px; padding:12px 14px; text-align:left; width:100%}
.rev-pick-item:hover{border-color:var(--sage); background:#fff}
.pick-list{display:flex; flex-direction:column; gap:8px; max-height:520px; overflow:auto; margin:0 -6px; padding:0 6px}
.pick-row{display:grid; grid-template-columns:48px 1fr auto; gap:13px; align-items:center; padding:9px 10px; border-radius:10px; border:1.5px solid transparent}
.pick-row.on{background:var(--sage-12); border-color:var(--sage)}
.pick-img{width:48px; height:48px; border-radius:8px; overflow:hidden} .pick-info{display:flex; flex-direction:column} .pick-info b{font-size:14px; line-height:1.25} .pick-info span{font-size:12px}

/* bars dashboard */
.bars{display:flex; flex-direction:column; gap:12px}
.bar-row{display:grid; grid-template-columns:120px 1fr 30px; gap:12px; align-items:center}
.bar-track{height:10px; background:var(--cream-2); border-radius:99px; overflow:hidden}
.bar-fill{height:100%; border-radius:99px} .bar-confirmado{background:var(--info)} .bar-faturado{background:var(--gold)} .bar-entregue{background:var(--ok)}
.bar-row b{text-align:right}

/* pagamentos admin */
.pay-admin-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.pay-admin-grid .card.off{opacity:.6}
.pay-admin-name{font-size:18px; margin:12px 0 4px; display:flex; align-items:center; gap:8px}
.pay-admin-foot{display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-2)}
.pay-add{border:2px dashed var(--line); border-radius:var(--r-md); background:var(--cream); color:var(--ink-3); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:170px; font-weight:700; font-size:14px}
.pay-add:hover{border-color:var(--clay); color:var(--clay); background:#EFF8FA}
.switch{position:relative; display:inline-block; width:42px; height:24px}
.switch input{opacity:0; width:0; height:0}
.switch span{position:absolute; inset:0; background:var(--line); border-radius:99px; transition:.2s; cursor:pointer}
.switch span:before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:var(--sh-sm)}
.switch input:checked+span{background:var(--ok)} .switch input:checked+span:before{transform:translateX(18px)}
.upload-fake{grid-column:span 2; display:flex; align-items:center; gap:10px; border:2px dashed var(--line); border-radius:10px; padding:16px; color:var(--ink-3); font-size:13.5px; font-weight:600}

/* config / integrações */
.integ-list{display:flex; flex-direction:column; gap:10px}
.integ-row{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-2)}
.integ-row:last-child{border-bottom:0}
.integ-ico{width:42px; height:42px; border-radius:11px; background:var(--cream-2); color:var(--ink-2); display:flex; align-items:center; justify-content:center}
.config-preview{background:var(--cream); border-radius:10px; padding:12px 14px; font-size:14px; color:var(--ink-2); margin-top:10px} .config-preview b{font-family:var(--ff-disp); font-size:17px; color:var(--clay)}
.range{width:100%; accent-color:var(--clay); height:6px}

/* ---------------- PERSONA SWITCHER ---------------- */
.persona{position:fixed; left:20px; bottom:20px; z-index:150; background:var(--ink); color:var(--cream); border-radius:16px; box-shadow:var(--sh-lg); overflow:hidden; width:54px; transition:width .2s}
.persona.open{width:248px}
.persona-toggle{display:flex; align-items:center; gap:9px; width:100%; background:none; border:0; color:#fff; padding:14px 16px; font-weight:800; font-size:13px; white-space:nowrap}
.persona-toggle>svg:first-child{color:var(--gold); flex-shrink:0}
.persona-list{padding:6px; display:flex; flex-direction:column; gap:2px; border-top:1px solid rgba(247,241,231,.12)}
.persona-item{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; border:0; background:none; color:rgba(247,241,231,.7); text-align:left; width:100%}
.persona-item:hover{background:rgba(247,241,231,.08); color:#fff}
.persona-item.on{background:rgba(255,255,255,.1); color:#fff}
.persona-item>svg{flex-shrink:0}
.persona-item div{flex:1; display:flex; flex-direction:column; line-height:1.2}
.persona-item b{font-size:13.5px} .persona-item span{font-size:11px; color:rgba(247,241,231,.5)}
.persona-check{color:var(--gold)}

@media (max-width:980px){
  .shell{grid-template-columns:1fr} .shell-side{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:14px}
  .shell-side::before{display:none}
  .shell-nav{flex-direction:row; flex-wrap:wrap; flex:1 1 100%; margin-top:10px} .shell-nav-item{width:auto} .shell-nav-item>span:not(.shell-nav-badge){flex:0 0 auto} .shell-user{border-top:0; margin:0; width:auto}
  .stat-row,.pay-admin-grid,.carteira-grid{grid-template-columns:repeat(2,1fr)}
  .ped-row{grid-template-columns:1fr auto}
  .shell-content{padding:22px 18px 40px}
}