/* Crystal Rede — interface */
:root{
  --bg:#F5F5F2; --surface:#FFFFFF; --surface-2:#FAFAF7; --ink:#17140C; --muted:#5F5B50; --line:#E4E1D8;
  --side:#111111; --side-ink:#D8D6D0;
  --brand:#F5C400; --on-brand:#1A1400; --brand-ink:#7A5B00; --brand-soft:#FFF4CC; --brand-mark:#B8860B;
  --ok:#1F7A4D; --ok-soft:#E6F4EC; --warn:#9A5B06; --warn-soft:#FDF3E3; --crit:#B42318; --crit-soft:#FDECEA;
  --info:#1D4E89; --info-soft:#E7EFF9;
  --radius:12px; --side-w:248px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
::placeholder{color:#A3B0BE;opacity:1;font-style:italic}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--brand-ink)}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:1.5rem;font-weight:750;letter-spacing:-.01em}
h2{font-size:1.1rem;font-weight:700}
h3{font-size:.98rem;font-weight:700}
p{margin:0}
small,.muted{color:var(--muted)}
.num,td.num,th.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.mono{font-family:var(--mono);font-size:.92em}

/* estrutura */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh;background:linear-gradient(90deg,var(--side) 0 var(--side-w),var(--bg) var(--side-w))}
.side{background:var(--side);color:var(--side-ink);padding:18px 12px 24px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 16px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px}
.brand svg{flex:none}
.brand b{display:block;font-size:19px;line-height:1.05;font-family:Georgia,"Times New Roman",serif;font-weight:600;color:var(--brand)}
.brand small{display:block;color:#A8A59C;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
.nav-group{margin-top:14px}
.nav-group p{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#8C897F;padding:0 10px 6px;font-weight:700}
.nav a,.nav button.link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:0;font:inherit;cursor:pointer;text-align:left;color:var(--side-ink);text-decoration:none;padding:7px 10px;border-radius:7px;font-size:14px}
.nav a:hover,.nav button.link:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.ativo,.nav button.link.ativo{background:var(--brand);color:var(--on-brand);font-weight:700}
.nav .pin{display:inline-flex;gap:8px;align-items:center}
.nav .pin::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.nav .badge{background:#E5484D;color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px}
.main{min-width:0;display:flex;flex-direction:column}
.top{background:var(--surface);border-bottom:1px solid var(--line);padding:10px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
.top .loja{font-weight:700}
.top .loja small{font-weight:400;margin-left:6px}
.top .esp{flex:1}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:14px;cursor:pointer;color:var(--ink)}
.content{padding:24px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:1280px;width:100%}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-head .acoes{display:flex;gap:8px;flex-wrap:wrap}

/* cartões e grades */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0;align-content:start}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.kpi{background:var(--surface);padding:14px 16px;display:grid;gap:2px}
.kpi span{font-size:12.5px;color:var(--muted)}
.kpi b{font-size:1.45rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi small{font-size:12.5px}
.kpi.alerta b{color:var(--crit)}

/* tabelas */
.tabela{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--surface-2);font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#FAFCFD}
td a.linha{font-weight:600;text-decoration:none;color:var(--ink)}
td a.linha:hover{color:var(--brand-ink)}
.vazio{padding:28px;text-align:center;color:var(--muted)}

/* etiquetas */
.tag{display:inline-block;font-size:12px;font-weight:650;padding:2px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.tag.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.tag.crit{background:var(--crit-soft);border-color:transparent;color:var(--crit)}
.tag.info{background:var(--info-soft);border-color:transparent;color:var(--info)}
.tag.brand{background:var(--brand-soft);border-color:transparent;color:var(--brand-ink)}

/* formulários */
form{margin:0}
.campos{display:grid;gap:12px;grid-template-columns:repeat(12,minmax(0,1fr))}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c6{grid-column:span 6}.c4{grid-column:span 4}.c3{grid-column:span 3}.c2{grid-column:span 2}
label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--ink)}
label small{font-weight:400}
input,select,textarea{font:inherit;font-size:14.5px;color:var(--ink);background:var(--surface);border:1px solid #C9D3DD;border-radius:8px;padding:8px 10px;width:100%;min-width:0}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-mark);outline-offset:0;border-color:var(--brand-mark)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--brand)}
.check{display:flex;align-items:center;gap:8px;font-weight:500}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:14px;font-weight:650;border-radius:8px;padding:8px 14px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.2}
.btn.pri{background:var(--brand);color:var(--on-brand)}
.btn.pri:hover{background:#E0B200}
.btn.sec{background:var(--surface);color:var(--ink);border-color:#C9D3DD}
.btn.sec:hover{border-color:var(--brand-mark);color:var(--brand-ink)}
.btn.perigo{background:var(--surface);color:var(--crit);border-color:#EBC0BB}
.btn.perigo:hover{background:var(--crit-soft)}
.btn.ok{background:var(--ok);color:#fff}
.btn.pq{padding:5px 10px;font-size:13px}
.btn:focus-visible{outline:2px solid var(--brand-mark);outline-offset:2px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.acoes-linha{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline{display:inline}

/* avisos */
.flash{border-radius:var(--radius);padding:12px 16px;font-size:14.5px;border:1px solid}
.flash.sucesso{background:var(--ok-soft);border-color:#BFE3CE;color:#12512F}
.flash.erro{background:var(--crit-soft);border-color:#F2C4BE;color:#7F1A12}
.flash.aviso{background:var(--warn-soft);border-color:#F1D9AE;color:#6B4005}
.flash ul{margin:4px 0 0;padding-left:18px}

/* receita óptica */
.rx{border:1px solid var(--line);border-radius:8px;overflow-x:auto}
.rx table{font-family:var(--mono);font-size:13.5px}
.rx th{font-family:var(--font)}
.rx td{text-align:center}
.rx td:first-child,.rx th:first-child{text-align:left;font-weight:700;font-family:var(--font)}
.rx input{min-width:64px;text-align:center;padding:6px 4px;font-family:var(--mono);font-size:13.5px}

/* etapas da OS */
.etapas{display:flex;flex-wrap:wrap;gap:4px}
.etapas span{font-size:12.5px;padding:4px 10px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
.etapas span.feita{background:var(--brand-soft);border-color:transparent;color:var(--brand-ink)}
.etapas span.atual{background:var(--brand);color:var(--on-brand);border-color:transparent;font-weight:700}

/* quadro do laboratório */
.quadro{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.coluna{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px;display:grid;gap:8px;align-content:start;min-height:200px}
.coluna h3{display:flex;justify-content:space-between;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ficha{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:10px;display:grid;gap:6px;font-size:13.5px}
.ficha.atraso{border-left:3px solid var(--crit)}
.ficha a{font-weight:700;text-decoration:none;color:var(--ink)}

/* lista de definição */
.dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:14px}
.dl dt{color:var(--muted)}
.dl dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}

/* itens da venda */
.itens-venda td{padding:6px}
.itens-venda input,.itens-venda select{padding:6px 8px;font-size:13.5px}
.resumo-venda{display:grid;gap:6px;font-size:15px}
.resumo-venda div{display:flex;justify-content:space-between;gap:10px}
.resumo-venda .total{font-size:1.3rem;font-weight:800;border-top:1px solid var(--line);padding-top:8px}

/* busca com sugestões */
.busca{position:relative}
.sugestoes{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(20,35,59,.12);max-height:300px;overflow-y:auto;margin-top:4px}
.sugestoes button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:9px 12px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.sugestoes button:hover,.sugestoes button:focus{background:var(--brand-soft)}
.sugestoes small{display:block}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(circle at 80% 0%,#3A2E00 0%,#111 55%)}
.login{background:var(--surface);border-radius:14px;padding:30px 28px;width:100%;max-width:400px;display:grid;gap:18px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login .brand{padding:0 0 14px}
.login .brand b{color:var(--ink)}
.login .brand small{color:var(--muted)}

/* impressão */
.papel{background:#fff;color:#000;max-width:800px;margin:0 auto;padding:28px;font-size:13.5px}
.papel h1{font-size:1.2rem}
.papel table{font-size:13px}
.papel th{background:#f2f2f2;color:#333}
.papel .linha-corte{border-top:1px dashed #999;margin:22px 0}
.so-tela{}
@media print{
  .so-tela,.side,.top{display:none!important}
  body{background:#fff}
  .papel{padding:0;max-width:none}
  .app{display:block}
  .content{padding:0}
}

/* transferência entre lojas (caixa e recibo) */
.repasse-destaque{border:2px solid var(--brand);background:var(--brand-soft)}
.repasse-chegando{border:2px solid #B9CFEA;background:var(--info-soft)}
.repasse-linha{display:grid;grid-template-columns:minmax(180px,1.4fr) auto minmax(170px,1fr) minmax(170px,1fr) auto;gap:10px 14px;align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-top:10px}
.repasse-quem{display:flex;flex-direction:column;gap:2px}
.repasse-quem b{font-size:1.1rem}
.repasse-valor{font-size:1.35rem;font-weight:750;white-space:nowrap;align-self:center}
.repasse-detalhe{grid-column:1/-1}
.repasse-detalhe summary{cursor:pointer;color:var(--muted);font-size:13.5px}
.repasse-recibo{display:flex;flex-direction:column;gap:10px;background:var(--brand-soft);border:2px solid var(--brand);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;font-size:14.5px}
.repasse-recibo select,.repasse-recibo input{max-width:280px}
@media (max-width:860px){.repasse-linha{grid-template-columns:1fr}.repasse-valor{align-self:start}}

/* responsivo */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr);background:var(--bg)}
  .top .busca-topo{order:5;flex-basis:100%}
  .side{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:30;transform:translateX(-100%);transition:transform .2s}
  body.menu-aberto .side{transform:none}
  .side{width:270px}
  body.menu-aberto::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:25}
  .menu-btn{display:inline-block}
  .content{padding:16px}
  .top{padding:10px 16px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .c8,.c6,.c4,.c3{grid-column:span 12}
  .c2{grid-column:span 6}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- painel: cartões com ícone ---- */
.icon{width:20px;height:20px;flex:none}
.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.cartao{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:grid;gap:6px;align-content:start;text-decoration:none;color:var(--ink)}
a.cartao:hover{border-color:var(--brand-mark)}
.cartao .ico{width:36px;height:36px;border-radius:9px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center}
.cartao .ico.crit{background:#FDE4E4;color:#B42318}
.cartao .ico.ok{background:#E3F3E9;color:#1F7A4D}
.cartao span.rot{font-size:13.5px;font-weight:600}
.cartao b{font-size:1.6rem;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cartao small{font-size:12.5px;color:var(--muted)}
.cartao small.sobe{color:#1F7A4D}.cartao small.desce{color:#B42318}
/* gráficos simples */
.barras{display:grid;gap:10px}
.barra{display:grid;grid-template-columns:minmax(90px,150px) 1fr auto;gap:10px;align-items:center;font-size:14px}
.barra .trilho{height:14px;background:var(--surface-2);border-radius:0 4px 4px 0;position:relative}
.barra .fill{position:absolute;inset:0 auto 0 0;background:var(--brand-mark);border-radius:0 4px 4px 0;min-width:2px}
.barra .val{font-variant-numeric:tabular-nums;font-weight:600;min-width:92px;text-align:right}
.barra .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colunas{display:flex;align-items:flex-end;gap:8px;height:210px;padding:8px 4px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.coluna-g{flex:1;min-width:40px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.coluna-g .v{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.coluna-g .b{width:100%;max-width:56px;background:var(--brand-mark);border-radius:4px 4px 0 0;min-height:2px}
.colunas-rot{display:flex;gap:8px;padding:6px 4px 0;overflow-x:hidden}
.colunas-rot span{flex:1;min-width:40px;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.25}
/* alertas */
.alertas{display:grid;gap:0}
.alerta-l{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px}
.alerta-l:last-child{border-bottom:0}
.alerta-l .ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.alerta-l.crit .ico{background:#FDE4E4;color:#B42318}.alerta-l.warn .ico{background:#FDF1D6;color:#8A5A00}.alerta-l.info .ico{background:#E7EFF9;color:#1D4E89}.alerta-l.ok .ico{background:#E3F3E9;color:#1F7A4D}
.alerta-l small{display:block;color:var(--muted)}
/* topo: busca e sino */
.busca-topo{flex:1;max-width:460px;min-width:260px}
.busca-topo input{border-radius:999px;padding-left:36px;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235F5B50' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") no-repeat 13px center}
.sino{position:relative}
.sino summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface)}
.sino summary::-webkit-details-marker{display:none}
.sino .n{position:absolute;top:-4px;right:-4px;background:#E5484D;color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 6px}
.sino .caixa{position:absolute;right:0;top:46px;width:340px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,.14);padding:6px 14px;z-index:40}