/* ============================================================
   Portal de Certificados — Laboraltec
   Design system: identidade Laboraltec (laboraltec.com.br)
   aplicada em estilo minimalista tipo Google/Material.
   Fonte: Libre Franklin · Azuis #0a366f / #0063b9 / #009fe3
   ============================================================ */
:root{
  /* Marca (extraída do site institucional) */
  --brand:#0a366f; --brand-dark:#072a58; --blue:#0063b9; --azure:#009fe3;
  --brand-50:#eef3fa; --brand-100:#d9e4f2; --azure-50:#e5f6fd;

  /* Neutros estilo Google */
  --bg:#f7f9fc; --surface:#ffffff;
  --border:#e4e8ee; --border-strong:#c9d1dc;
  --ink:#1f2124; --muted:#69727d;

  /* Semânticas */
  --ok:#188038; --ok-bg:#e6f4ea; --warn:#9a6700; --warn-bg:#fef7e0; --bad:#c5221f; --bad-bg:#fce8e6;

  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --radius:14px; --ctrl:10px;
  --shadow-1:0 1px 2px rgba(10,54,111,.05),0 1px 3px rgba(10,54,111,.08);
  --shadow-2:0 2px 6px rgba(10,54,111,.08),0 8px 24px rgba(10,54,111,.10);
  --ring:0 0 0 3px rgba(0,159,227,.25);
}
*{box-sizing:border-box}
/* hidden SEMPRE vence, mesmo em elementos com display próprio (ex.: .panel é flex) */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--azure);outline-offset:2px;border-radius:4px}

/* ---------- Topbar ---------- */
.topbar{background:var(--surface);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border)}
.topbar-in{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-logo{height:30px;width:auto;display:block}
.brand .app{font-size:14px;font-weight:600;color:var(--muted);border-left:1px solid var(--border);padding-left:12px;white-space:nowrap}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--muted)}
.topbar-right .who{text-align:right;line-height:1.3}
.topbar-right .who b{color:var(--ink);font-weight:600}
.btn-ghost{border:1px solid var(--border-strong);color:var(--brand);background:var(--surface);padding:8px 18px;border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.btn-ghost:hover{background:var(--brand-50);border-color:var(--brand)}

/* ---------- Abas (admin) ---------- */
.tabs{background:var(--surface);border-bottom:1px solid var(--border)}
.tabs-in{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;gap:4px;overflow-x:auto}
.tab{appearance:none;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--muted);padding:13px 16px 11px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s}
.tab:hover{color:var(--brand)}
.tab.on{color:var(--brand);border-bottom-color:var(--azure)}

/* ---------- Layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:32px 24px 72px}
h1{font-size:24px;font-weight:600;margin:0 0 4px;letter-spacing:-.3px}
h2{font-size:16px;font-weight:600;margin:0 0 14px;letter-spacing:-.2px}
.sub{color:var(--muted);font-size:14px;margin:0 0 26px}

/* ---------- Conta (cliente) ---------- */
.acct{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:24px;box-shadow:var(--shadow-1)}
.acct .av{width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;flex:0 0 auto;letter-spacing:.02em}
.acct .meta{line-height:1.35}
.acct .meta b{font-size:15.5px}
.acct .meta .cnpj{font-size:12.5px;color:var(--muted)}

/* ---------- Acesso ao VisCal (portal do cliente) ---------- */
.viscal-access{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,var(--brand),var(--blue));color:#fff;border-radius:var(--radius);padding:16px 20px;margin-bottom:24px;text-decoration:none;box-shadow:var(--shadow-1);transition:box-shadow .2s,transform .1s}
.viscal-access:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.viscal-access .va-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.viscal-access .va-txt{display:flex;flex-direction:column;line-height:1.4;min-width:0}
.viscal-access .va-txt b{font-size:15.5px;font-weight:600}
.viscal-access .va-txt span{font-size:12.5px;color:rgba(255,255,255,.85)}
.viscal-access .va-chev{margin-left:auto;font-size:22px;opacity:.8;flex:0 0 auto}

/* ---------- Toolbar / busca ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:0 18px;transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--azure);box-shadow:var(--ring)}
.search input{border:0;outline:0;font:inherit;padding:11px 0;width:100%;background:transparent;color:var(--ink)}
.search input::placeholder{color:#9aa5b1}
.search svg{flex:0 0 auto;color:var(--muted)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);padding:7px 16px;border-radius:999px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.on{background:var(--brand-50);border-color:var(--brand);color:var(--brand);font-weight:600}

/* ---------- Cards de certificado ---------- */
.cert{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:12px;display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:start;box-shadow:var(--shadow-1);transition:box-shadow .2s,border-color .2s}
.cert:hover{box-shadow:var(--shadow-2);border-color:var(--border-strong)}
.cert .name{font-weight:600;font-size:15.5px}
.cert .brandline{color:var(--muted);font-size:13px;margin-top:1px}
.cert .grid{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:12px}
.cert .f{font-size:12.5px}
.cert .f span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.cert .f b{font-weight:500;font-size:13px;color:var(--ink)}
.cert .right{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.pill{font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.bad{background:var(--bad-bg);color:var(--bad)}
.iso{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--blue);background:var(--azure-50);padding:4px 10px;border-radius:999px;margin-top:10px}
.empty{background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius);padding:36px 24px;text-align:center;color:var(--muted);font-size:14px}
.countline{font-size:13px;color:var(--muted);margin:8px 2px 16px}

/* ---------- Botões ---------- */
.btn{border:0;background:var(--brand);color:#fff;padding:12px 24px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;width:100%;transition:background .15s,box-shadow .15s;letter-spacing:.01em}
.btn:hover{background:var(--brand-dark);box-shadow:var(--shadow-1)}
.btn[disabled],.btn-sm[disabled],.dl[disabled]{opacity:.55;cursor:not-allowed}
.dl{border:0;background:var(--brand);color:#fff;padding:9px 18px;border-radius:999px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .15s,box-shadow .15s}
.dl:hover{background:var(--brand-dark);box-shadow:var(--shadow-1)}
.btn-sm{border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);padding:7px 14px;border-radius:999px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;width:auto;transition:all .15s}
.btn-sm:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.btn-sm.danger{border-color:var(--bad);color:var(--bad)}
.btn-sm.danger:hover{background:var(--bad-bg)}
.btn-sm.solid{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-sm.solid:hover{background:var(--brand-dark);color:#fff}

/* ---------- Admin: painéis e formulários ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-1)}
.stat .n{font-size:30px;font-weight:600;letter-spacing:-.5px;color:var(--brand)}
.stat .l{font-size:12.5px;color:var(--muted);margin-top:2px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow-1)}
.panel .btn{margin-top:auto}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select{width:100%;font:inherit;font-size:14px;padding:10px 14px;border:1px solid var(--border-strong);border-radius:var(--ctrl);background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--azure);box-shadow:var(--ring)}
.field input::placeholder{color:#9aa5b1}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.field input[readonly]{background:var(--bg);color:var(--muted);cursor:not-allowed}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.full{grid-column:1 / -1}

/* ---------- Listas (empresas) ---------- */
.list{margin-top:6px}
.li{display:flex;align-items:center;gap:12px;padding:12px 10px;border-top:1px solid var(--border)}
.li:first-child{border-top:0}
.li .av{width:36px;height:36px;border-radius:50%;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13.5px;flex:0 0 auto}
.li .info{line-height:1.35;min-width:0}
.li .info b{font-size:14px}
.li .info .cnpj{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .st{margin-left:auto;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.st.active{background:var(--ok-bg);color:var(--ok)} .st.pending{background:var(--warn-bg);color:var(--warn)}
.li.click{cursor:pointer;border-radius:var(--ctrl);transition:background .15s}
.li.click:hover{background:var(--bg)}
.li.click.sel{background:var(--brand-50)}
.li .chev{margin-left:auto;color:var(--muted);font-size:18px}

/* ---------- Admin: mestre-detalhe da aba Empresas ---------- */
.btn.btn--auto{width:auto;padding:11px 22px;flex:0 0 auto;white-space:nowrap}

/* Sub-abas do detalhe da empresa (Usuários / Certificados) */
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:4px 0 18px}
.subtab{appearance:none;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--muted);padding:11px 18px 9px;cursor:pointer;border-bottom:3px solid transparent;transition:color .15s}
.subtab:hover{color:var(--brand)}
.subtab.on{color:var(--brand);border-bottom-color:var(--azure)}

/* Cabeçalho de painel com ação à direita */
.pane-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}

/* ---------- Admin: cadastro completo da empresa ---------- */
.adm-head{display:flex;align-items:center;gap:12px;margin:2px 0 18px}
.adm-head b{font-size:16px}
.adm-emp{display:flex;flex-direction:column;line-height:1.35}
.adm-emp .cnpj{font-size:12px;color:var(--muted)}
.prof-sec{border-top:1px solid var(--border);padding-top:18px;margin-top:4px;margin-bottom:22px}
.prof-sec > .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:10px}
.user-list{margin-bottom:14px}
.user-list .li .acts{display:flex;gap:8px;flex-wrap:wrap}
/* Formulário de convite (recolhido até clicar em "Adicionar usuário") */
.user-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.user-form-grid input{font:inherit;font-size:14px;padding:9px 14px;border:1px solid var(--border-strong);border-radius:var(--ctrl);background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s;min-width:0}
.user-form-grid input:focus{outline:none;border-color:var(--azure);box-shadow:var(--ring)}
.user-form-grid .user-form-acts{grid-column:1 / -1;display:flex;gap:8px}
.user-form-grid .user-form-acts .btn-sm{padding:10px 18px}
.user-form-grid .hint{grid-column:1 / -1;margin:0}

/* Linha da equipe: nome/email à esquerda, perfil + ações agrupados à direita */
.team-row{gap:14px}
.team-row .info{flex:1;min-width:0}
.team-row .info b{font-size:15px}
.team-row .info .cnpj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.team-right{margin-left:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.team-right .acts{display:flex;gap:8px;flex-wrap:wrap}
.role-chip{font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.role-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.role-editor{background:var(--azure-50);color:var(--blue)}
.role-viewer{background:var(--bg);color:var(--muted)}
@media(max-width:720px){
  .team-right{width:100%;margin-left:56px;justify-content:flex-start}
  .team-right .acts .btn-sm{flex:1;text-align:center}
}

/* Avatares (equipe interna) */
.avatar{width:40px;height:40px;border-radius:50%;background:var(--brand-50);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex:0 0 auto;background-size:cover;background-position:center}
.avatar.has-img{color:transparent;font-size:0}
.avatar-lg{width:72px;height:72px;font-size:24px}
.team-foto-row{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.team-foto-row .btn-sm{margin-right:6px}

/* VisCal & Identidade (admin) */
.lic-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:6px}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--border-strong);border-radius:999px;transition:background .18s;cursor:pointer}
.switch .slider::before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .18s;box-shadow:var(--shadow-1)}
.switch input:checked + .slider{background:var(--ok)}
.switch input:checked + .slider::before{transform:translateX(20px)}
.switch input:focus-visible + .slider{box-shadow:var(--ring)}
.logo-preview{width:120px;height:72px;border:1px solid var(--border);border-radius:var(--ctrl);display:flex;align-items:center;justify-content:center;background:var(--bg) center/contain no-repeat;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.08em;flex:0 0 auto}
.logo-preview.has-img{color:transparent;font-size:0}

/* Perfil de visualização: esconde os pontos de escrita do painel */
.integ-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Linha da lista de OS */
.os-row .info{flex:1;min-width:0}
.os-row .info b{font-size:14.5px}
.os-row .info .cnpj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.os-date{font-size:12.5px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.os-stage{font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:999px;white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px}
.os-stage::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.os-stage.s-ok{background:var(--ok-bg);color:var(--ok)}
.os-stage.s-warn{background:var(--warn-bg);color:var(--warn)}
.os-stage.s-info{background:var(--azure-50);color:var(--blue)}
.os-stage.s-todo{background:var(--bg);color:var(--muted)}
@media(max-width:720px){
  .os-row{flex-wrap:wrap}
  .os-row .os-date{margin-left:auto}
  .os-row .info .cnpj{max-width:100%}
}

/* Paginação */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.pager-info{font-size:13px;color:var(--muted)}
.pager-btns{display:flex;gap:8px}

.os-banner{background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand);border-radius:var(--ctrl);padding:10px 14px;font-size:13px;margin-bottom:14px}
.os-banner a{color:var(--blue);font-weight:600;cursor:pointer;text-decoration:underline}
body.is-viewer #osx-sync{display:none!important}
body.is-viewer .tab[data-tab="publicar"],
body.is-viewer .tab[data-tab="integracoes"],
body.is-viewer #emp-new-btn,
body.is-viewer #eqp-add-btn,
body.is-viewer #cert-add-btn,
body.is-viewer #user-add-btn,
body.is-viewer #team-add-btn,
body.is-viewer #vc-save,
body.is-viewer #vc-ploomes,
body.is-viewer #vc-logo-btn,
body.is-viewer #vc-logo-clear,
body.is-viewer #pub-form{display:none!important}
body.is-viewer #vc-licenca{pointer-events:none;opacity:.6}

/* Edição inline de usuário */
.user-edit{border:1px solid var(--border);border-radius:var(--ctrl);padding:14px 16px;margin:8px 0;background:var(--bg)}
.user-edit .user-form-grid{margin-top:0}

/* Dropdown customizado (filtros) — substitui o <select> nativo do sistema */
.dd{position:relative;flex:0 0 auto}
.dd-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13.5px;font-weight:600;
  padding:10px 14px 10px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);
  color:var(--ink);cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s;white-space:nowrap}
.dd-btn:hover{background:var(--bg)}
.dd.open .dd-btn{border-color:var(--azure);box-shadow:var(--ring)}
.dd-chev{color:var(--muted);transition:transform .18s}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:100%;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-2);padding:6px;
  max-height:320px;overflow-y:auto;animation:dd-in .14s ease}
.dd-pop[hidden]{display:none}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.dd-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;
  font:inherit;font-size:13.5px;color:var(--ink);padding:9px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
.dd-opt:hover{background:var(--bg)}
.dd-opt.on{background:var(--brand-50);color:var(--brand);font-weight:600}
.dd-opt.on::after{content:"✓";margin-left:auto;font-size:12px}

/* Detalhe da OS: campos e ações com respiro e consistência */
.os-detail{padding:24px}
.os-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px}
.os-grid .f{font-size:13px;min-width:0}
.os-grid .f span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.os-grid .f b{font-weight:600;font-size:14.5px;color:var(--ink);overflow-wrap:break-word}
.os-detail-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.os-detail-acts .btn-sm{padding:9px 18px}

/* Paginação numerada */
.pg-btn{min-width:38px;height:38px;padding:0 10px;border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:10px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .15s}
.pg-btn:hover:not(:disabled):not(.on){border-color:var(--brand);color:var(--brand);background:var(--brand-50)}
.pg-btn.on{background:var(--brand);border-color:var(--brand);color:#fff;cursor:default}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pg-gap{padding:0 4px;color:var(--muted);align-self:flex-end}
@media(max-width:720px){ .os-grid{grid-template-columns:1fr} }

/* Equipamentos (admin): cabeçalho clicável e corpo expandido */
.eqp-card{padding:0;overflow:hidden}
.eqp-head{cursor:pointer;padding:16px 18px;transition:background .15s}
.eqp-head:hover{background:var(--bg)}
.eqp-head .chev{color:var(--muted);font-size:16px;align-self:center}
.eqp-body{padding:0 18px 16px;border-top:1px solid var(--border);padding-top:14px}

/* Histórico de calibrações (portal do cliente) */
.hist{margin-top:12px}
.hist-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.hist-i{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);border-radius:var(--ctrl);padding:8px 14px;font-size:12.5px;color:var(--ink)}

/* Grupos de certificados por OS */
.os-group{margin-bottom:20px}
.os-h{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--brand);margin-bottom:10px}
.os-h::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--azure)}
.os-h .os-n{font-weight:500;font-size:12px;color:var(--muted)}

/* ---------- Admin: gestão de certificados ---------- */
.adm-cert{border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;background:var(--surface);transition:border-color .15s}
.adm-cert:hover{border-color:var(--border-strong)}
.adm-cert .top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.adm-cert .tt{font-weight:600}
.adm-cert .meta{color:var(--muted);font-size:12.5px;margin-top:3px}
.adm-cert .acts{display:flex;gap:8px;flex-wrap:wrap}
.adm-edit{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.adm-files{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.adm-files .lbl,.adm-cert .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.file-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.file-chip{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:12.5px;max-width:100%}
.file-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.file-chip .nm{background:transparent;border:0;color:var(--ink);cursor:pointer;font:inherit;font-size:12.5px;padding:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.file-chip .nm:hover{color:var(--blue);text-decoration:underline}
.adm-cert .view-files{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.file-chip .x{border:0;background:transparent;color:var(--bad);cursor:pointer;font-size:15px;line-height:1;padding:0 2px}

/* Ações do formulário de edição: sempre no final, separadas do conteúdo */
.form-acts{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}

/* ---------- Uploads: cartão de arquivo único e dropzone ---------- */
.file-card{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--border);border-radius:var(--ctrl);padding:10px 14px;background:var(--bg)}
.file-card svg{flex:0 0 auto;color:var(--azure)}
.file-card-name{font-size:13px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis}
.file-card-name.muted{color:var(--muted)}
.file-card-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--ctrl);padding:13px 14px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--brand)}
.dropzone.drag{border-color:var(--azure);background:var(--azure-50)}
@media(max-width:720px){
  .file-card-acts{margin-left:0;width:100%}
}

/* ---------- Rastreabilidades (portal do cliente) ---------- */
.cert .rast{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.cert .rast-h{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.cert .rast-i{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;text-align:left;max-width:100%;transition:all .15s}
.cert .rast-i:hover{border-color:var(--blue);color:var(--blue)}
.cert .rast-i svg{flex:0 0 auto;color:var(--azure)}
.cert .rast-i span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Autenticação ---------- */
.auth{display:flex;align-items:center;justify-content:center;padding:56px 24px 72px;background:var(--bg);position:relative;min-height:60vh}
.auth-card{position:relative;z-index:1;width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:36px 34px 28px;box-shadow:var(--shadow-2)}
.auth-brand{display:flex;justify-content:center;margin-bottom:26px}
.auth-brand .brand-logo{height:36px;width:auto;display:block}
.auth-card h2{font-size:21px;margin:0 0 6px;text-align:center}
.auth-sub{color:var(--muted);font-size:13.5px;margin:0 0 22px;text-align:center}
.auth-row{display:flex;justify-content:flex-end;margin:-2px 0 16px}
.auth-row a,.auth-foot a{color:var(--blue);font-weight:600;text-decoration:none;cursor:pointer}
.auth-row a{font-size:12.5px}
.auth-row a:hover,.auth-foot a:hover{text-decoration:underline}
.auth-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);text-align:center;line-height:1.55}
.msg{color:var(--bad);font-size:12.5px;margin:-2px 0 12px;min-height:1em}

/* ---------- Campo de senha ---------- */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-toggle{position:absolute;top:0;right:0;height:100%;width:42px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;padding:0;cursor:pointer;color:var(--muted);border-radius:0 var(--ctrl) var(--ctrl) 0}
.pw-toggle:hover{color:var(--brand)}
.pw-toggle svg{display:block}

/* ---------- Acesso via etiqueta QR ---------- */
.qr-tag{background:var(--brand-50);color:var(--brand);padding:2px 10px;border-radius:999px;font-size:13px}
.qr-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:14px 0}
.qr-fields .f{font-size:12.5px;min-width:0}
.qr-fields .f span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.qr-fields .f b{font-weight:600;font-size:13.5px;color:var(--ink);overflow-wrap:break-word}

/* Título do instrumento + selo de status (Vigente/Vence em breve/Vencido) */
.qr-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Empresa: linha única e discreta logo abaixo do título */
.qr-emp{grid-template-columns:1fr;margin:12px 0 4px}
.qr-emp .f b{font-weight:500;font-size:13px;color:var(--muted)}

/* Dados principais: nº do certificado e datas com mais presença */
.qr-primary .f b{font-size:15.5px}

/* Dados secundários: rebaixados, separados por linha sutil */
.qr-secondary{border-top:1px solid var(--border);padding-top:14px;margin-top:16px}
.qr-secondary .f b{font-weight:500;font-size:12.5px}

.qr-actions{margin:18px 0 4px}
.qr-actions .dl{width:100%;justify-content:center}
.qr-expira{margin:8px 0 0;font-size:11.5px;color:var(--muted);text-align:center}
#qr-result .rast-sub{font-size:12px;color:var(--muted);margin:-2px 0 4px}

/* Resultado do QR — mobile-first: os blocos das duas colunas empilham
   na ordem de leitura (título → empresa → dados → botão → anexos) */
#qr-result{display:flex;flex-direction:column}
#qr-result .qr-col{display:contents}
#qr-result .qr-title{order:1}
#qr-result .qr-emp{order:2}
#qr-result .qr-primary{order:3}
#qr-result .qr-secondary{order:4}
#qr-result .qr-actions{order:5}
#qr-result .qr-trust{order:6}
#qr-result .rast{order:7}

/* Bloco de confiança (selo ISO + orientação ao cliente) */
.qr-trust{background:var(--bg);border:1px solid var(--border);border-radius:var(--ctrl);padding:14px 16px;margin-top:18px}
.qr-trust .iso{margin-top:0}
.qr-trust p{margin:9px 0 0;font-size:12px;line-height:1.65;color:var(--muted)}

/* Desktop: cartão largo com coluna A (identidade e ação) e coluna B
   (dados e anexos); rodapé segue full-width abaixo das colunas */
@media(min-width:768px){
  .auth-card.qr-card-wide{max-width:920px}
  .qr-card-wide #qr-result{display:grid;grid-template-columns:1fr 1.15fr;gap:4px 48px}
  .qr-card-wide #qr-result .qr-col{min-width:0}
  .qr-card-wide #qr-result .qr-col-b{display:block}
  /* Coluna A em flex: o bloco de confiança desce e alinha com o fim da coluna B */
  .qr-card-wide #qr-result .qr-col-a{display:flex;flex-direction:column}
  .qr-card-wide .qr-trust{margin-top:auto}
  .qr-card-wide .qr-primary{margin-top:6px}
  .qr-card-wide .qr-actions{margin-top:24px}
}
a.dl,a.rast-i{text-decoration:none}
#qr-result h2{text-align:left}
#qr-result .auth-sub{text-align:left}
#qr-result .rast{margin-top:16px;display:flex;flex-direction:column;gap:6px}
#qr-result .rast-h{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
#qr-result .rast-i{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font:inherit;font-size:12.5px;color:var(--ink);max-width:100%;transition:all .15s}
#qr-result .rast-i:hover{border-color:var(--blue);color:var(--blue)}
#qr-result .rast-i svg{flex:0 0 auto;color:var(--azure)}
#qr-result .rast-i span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#qr-result .hint{font-size:11.5px;color:var(--muted)}

/* ---------- Toast ---------- */
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#2d3136;color:#fff;padding:13px 22px;border-radius:999px;font-size:13.5px;opacity:0;transition:.25s;pointer-events:none;max-width:90vw;z-index:50;box-shadow:var(--shadow-2)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Modal (confirmação e formulários) ---------- */
.modal-back{position:fixed;inset:0;background:rgba(31,33,36,.5);display:flex;align-items:center;justify-content:center;z-index:60;padding:24px;animation:modal-in .15s ease}
.modal-back[hidden]{display:none}
@keyframes modal-in{from{opacity:0}to{opacity:1}}
.modal form .acts{margin-top:6px}
.modal{background:var(--surface);border-radius:20px;max-width:430px;width:100%;padding:26px 28px;box-shadow:var(--shadow-2)}
.modal h3{margin:0 0 10px;font-size:16px;font-weight:600;letter-spacing:-.2px}
.modal p{margin:0 0 20px;color:var(--muted);font-size:14px;overflow-wrap:break-word;line-height:1.55}
.modal .acts{display:flex;gap:10px;justify-content:flex-end}
.modal .btn-sm{padding:9px 20px;font-size:13px}

/* ---------- Menos movimento (acessibilidade) ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- Responsivo ---------- */
@media(max-width:720px){
  .toolbar .btn--auto{width:100%}
  .toolbar .dd,.toolbar .dd-btn{width:100%}
  .toolbar .dd-btn{justify-content:space-between}
  .user-form-grid{grid-template-columns:1fr}
  .subtabs{overflow-x:auto}
  .pane-actions{flex-direction:column;align-items:stretch}
  .pane-actions .btn-sm{text-align:center}
  .topbar-in{padding:12px 16px}
  .tabs-in{padding:0 12px}
  .wrap{padding:24px 16px 64px}
  .cols{grid-template-columns:1fr}.row2{grid-template-columns:1fr}.stats{grid-template-columns:1fr}
  .cert{grid-template-columns:1fr}.cert .right{grid-column:auto;grid-row:auto;align-items:flex-start;flex-direction:row;flex-wrap:wrap}
  .brand .app{display:none}
  .auth{padding:32px 16px 56px}
  .auth-card{padding:28px 22px 22px}
}