:root {
  --grafite: #23262b; --grafite-2: #2e3238; --grafite-3: #383c43;
  --papel: #f6f3ec; --papel-2: #ffffff;
  --ambar: #e8862c; --ambar-escuro: #c46b1c;
  --verde: #4c9a6a; --vermelho: #c1503f; --azul: #0d6efd;
  --linha: #454952; --linha-clara: #e2ddd1;
  --texto-claro: #f2ede4; --texto-suave: #b3aea3;
  --texto-escuro: #2b2823; --texto-medio: #6b6558;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--papel); color: var(--texto-escuro); }
a { color: inherit; text-decoration: none; }

.tela-cheia-escura { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--grafite); padding: 20px; }
.cartao-escuro { background: var(--grafite-2); border: 1px solid var(--linha); border-radius: 6px; padding: 40px; width: 420px; max-width: 100%; color: var(--texto-claro); }
.cartao-escuro .eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ambar); margin-bottom: 6px; }
.cartao-escuro h1 { font-family: Georgia, serif; font-size: 22px; margin: 0 0 24px; }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 12px; color: var(--texto-suave); margin-bottom: 4px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 10px; background: var(--grafite-3); border: 1px solid var(--linha); border-radius: 4px;
  color: var(--texto-claro); font-size: 16px;
}
.campo textarea { resize: vertical; min-height: 60px; }

.abas-acesso { display: flex; margin-bottom: 22px; border-radius: 4px; overflow: hidden; border: 1px solid var(--linha); }
.aba-acesso { flex: 1; text-align: center; padding: 10px; font-size: 13px; cursor: pointer; color: var(--texto-suave); background: var(--grafite-3); }
.aba-acesso.ativa { background: var(--ambar); color: #1c1a17; font-weight: 600; }
.pagina-acesso { display: none; }
.pagina-acesso.ativa { display: block; }
.grid-dois { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .grid-dois, .grid-tres { grid-template-columns: 1fr; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 4px; border: none; background: var(--ambar); color: #1c1a17; font-weight: 600; font-size: 13px; cursor: pointer; }
.btn:hover { background: var(--ambar-escuro); }
.btn.secundario { background: transparent; border: 1px solid var(--linha-clara); color: var(--texto-escuro); }
.btn.claro { background: var(--texto-escuro); color: #fff; }
.btn.perigo { background: var(--vermelho); color: #fff; border: none; }
.btn.sucesso { background: var(--verde); color: #fff; border: none; }
.btn.largo { width: 100%; }
.btn-mini { padding: 6px 10px; font-size: 12px; border-radius: 4px; border: none; cursor: pointer; }

.mensagem-erro { color: var(--vermelho); font-size: 13px; margin: 12px 0 0; }
.mensagem-sucesso { color: var(--verde); font-size: 13px; margin: 12px 0 0; }

.flash { padding: 12px 16px; border-radius: 4px; font-size: 13px; margin-bottom: 18px; }
.flash.sucesso { background: #e6f4ea; color: #1e6b3a; border: 1px solid #b7ddc4; }
.flash.erro { background: #fbe9e7; color: #8c3627; border: 1px solid #f0bdb4; }

.layout { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: var(--grafite); color: var(--texto-claro); padding: 22px 0; flex-shrink: 0; }
.sidebar .marca { padding: 0 22px 22px; border-bottom: 1px solid var(--linha); margin-bottom: 12px; }
.sidebar .marca .eyebrow { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ambar); }
.sidebar .marca .nome { font-family: Georgia, serif; font-size: 16px; margin-top: 4px; }
.nav-item { display: block; padding: 11px 22px; font-size: 13px; color: var(--texto-suave); border-left: 3px solid transparent; }
.nav-item:hover { color: var(--texto-claro); }
.nav-item.ativo { color: var(--texto-claro); border-left-color: var(--ambar); background: var(--grafite-2); }
.acoes-rapidas{position:sticky;top:0;z-index:800;display:flex;gap:8px;overflow-x:auto;padding:9px 18px;background:rgba(17,24,39,.97);border-bottom:1px solid rgba(255,255,255,.10);scrollbar-width:thin}.acoes-rapidas a{flex:0 0 auto;padding:7px 11px;border:1px solid rgba(255,255,255,.15);border-radius:8px;color:#e5e7eb;text-decoration:none;font-size:12px;font-weight:600}.acoes-rapidas a:hover{background:#374151;color:#fff;border-color:#f59e0b}@media(max-width:700px){.acoes-rapidas{top:64px;padding:8px 10px;gap:6px}.acoes-rapidas a{padding:7px 9px;font-size:11px}}

.conteudo { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; background: var(--papel-2); border-bottom: 1px solid var(--linha-clara); flex-wrap: wrap; gap: 10px; }
.topbar h2 { margin: 0; font-family: Georgia, serif; font-size: 20px; }
.topbar .usuario { font-size: 12px; color: var(--texto-medio); display: flex; align-items: center; gap: 14px; }
.topbar-ajuda{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #cbd5e1;border-radius:999px;color:#1d4ed8;background:#eff6ff;text-decoration:none;font-weight:800}.topbar-ajuda:hover{background:#dbeafe}
.sair { cursor: pointer; color: var(--vermelho); font-size: 12px; }
.orientacao-faixa{padding:12px 28px 0;background:var(--papel);}.orientacao-contextual{max-width:1180px;margin:0 auto;border:1px solid #bfdbfe;border-radius:12px;background:#f8fbff;box-shadow:0 1px 0 rgba(30,64,175,.04)}.orientacao-contextual>summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none}.orientacao-contextual>summary::-webkit-details-marker{display:none}.orientacao-selo{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:5px 7px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.orientacao-contextual summary strong{display:block;color:#172554;font-size:13px}.orientacao-contextual summary small{display:block;margin-top:2px;color:#64748b;font-size:11px}.orientacao-acao{margin-left:auto;color:#1d4ed8;font-size:12px;font-weight:800;white-space:nowrap}.orientacao-corpo{padding:0 14px 14px 98px;color:#334155;font-size:13px}.orientacao-objetivo{margin:0 0 9px;line-height:1.45}.orientacao-corpo ol{margin:0 0 10px;padding-left:19px;display:grid;gap:4px}.orientacao-atencao{margin:0 0 10px;padding:8px 10px;border-left:3px solid #f59e0b;border-radius:0 7px 7px 0;background:#fffbeb;color:#78350f;font-size:12px;line-height:1.4}.orientacao-proximo{display:inline-flex;align-items:center;gap:5px;color:#1d4ed8;font-size:12px;font-weight:800;text-decoration:none}.orientacao-proximo:hover{text-decoration:underline}@media(max-width:700px){.orientacao-faixa{padding:9px 12px 0}.orientacao-contextual>summary{align-items:flex-start}.orientacao-selo{min-width:0}.orientacao-acao{font-size:11px}.orientacao-corpo{padding:0 13px 13px}.topbar-ajuda{padding:5px 7px}.topbar .usuario{gap:8px}}
.painel { padding: 24px 28px; }

.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--papel-2); border-radius: 6px; overflow: hidden; min-width: 560px; }
th, td { text-align: left; padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--linha-clara); }
th { color: var(--texto-medio); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }
tr:last-child td { border-bottom: none; }
tr.linha-clicavel:hover { background: #faf8f3; cursor: pointer; }
.vazio { text-align: center; padding: 40px 20px; color: var(--texto-medio); font-size: 13px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; border: 1px solid var(--cor, var(--ambar)); color: var(--cor, var(--ambar)); }
.badge .ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--cor, var(--ambar)); }
.badge-status { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-status.ativa { background: #e6f4ea; color: var(--verde); }
.badge-status.bloqueada { background: #fbe9e7; color: var(--vermelho); }

.cartoes-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--papel-2); border-radius: 6px; padding: 16px 18px; border-left: 3px solid var(--ambar); }
.kpi .valor { font-family: Georgia, serif; font-size: 26px; }
.kpi .rotulo { font-size: 11px; color: var(--texto-medio); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

.barra-acoes { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.filtros select, .filtros input { padding: 8px 10px; border: 1px solid var(--linha-clara); border-radius: 4px; font-size: 13px; background: var(--papel-2); }

.cartao-claro { background: var(--papel-2); border-radius: 6px; padding: 24px; max-width: 700px; }
.campo-claro { margin-bottom: 12px; }
.campo-claro label { display: block; font-size: 12px; color: var(--texto-medio); margin-bottom: 4px; }
.campo-claro input, .campo-claro select, .campo-claro textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--linha-clara); border-radius: 4px; font-size: 16px; }
.campo-claro textarea { resize: vertical; min-height: 70px; }
.orientacao-form{margin:0 0 14px;padding:10px 12px;border-left:3px solid #2563eb;border-radius:0 9px 9px 0;background:#eff6ff;color:#1e3a5f;font-size:12px;line-height:1.45}.orientacao-form strong{display:block;margin-bottom:2px}.orientacao-campo{display:block;margin-top:4px;color:#64748b;font-size:11px;line-height:1.35}

.linha-tempo { position: relative; padding-left: 22px; margin: 16px 0; }
.linha-tempo::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: var(--linha-clara); }
.evento { position: relative; padding-bottom: 16px; font-size: 13px; }
.evento .marco { position: absolute; left: -22px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--cor, var(--texto-medio)); }
.evento .data { color: var(--texto-medio); font-size: 11px; }
.evento .obs { color: var(--texto-medio); font-style: italic; margin-top: 2px; }

.galeria-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
.galeria-fotos figure { margin: 0; }
.galeria-fotos .foto-link { display: block; cursor: zoom-in; border-radius: 4px; overflow: hidden; }
.galeria-fotos .foto-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.galeria-fotos .foto-link img { display: block; transition: transform .18s ease; }
.galeria-fotos .foto-link:hover img { transform: scale(1.03); }
.galeria-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; border: 1px solid var(--linha-clara); }
.galeria-fotos figcaption { font-size: 10px; text-transform: uppercase; color: var(--texto-medio); text-align: center; margin-top: 4px; }

.tabela-itens input { width: 100%; padding: 6px 8px; border: 1px solid var(--linha-clara); border-radius: 4px; font-size: 13px; }
.tabela-itens td { padding: 6px 8px; }

html, body { overflow-x: hidden; }
@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; display: flex; overflow-x: auto; padding: 10px 0; }
  .sidebar .marca { display: none; }
  .nav-item { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; }
  .nav-item.ativo { border-left: none; border-bottom-color: var(--ambar); }
  .cartoes-kpi { grid-template-columns: 1fr 1fr; }
}

/* ================= Acesso / cadastro — mesmo padrão visual da landing ================= */
.tela-cheia-clara {
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 82% 8%, rgba(242,139,50,.18), transparent 32%),
    linear-gradient(180deg,#0f1318,#151b22);
  padding:32px 16px; color:#f5f7fa;
}
.cartao-acesso {
  background:#1b222b; border:1px solid #2c3540; border-radius:18px; padding:36px 32px;
  width:480px; max-width:100%; color:#f5f7fa;
  box-shadow:0 28px 80px rgba(0,0,0,.34);
}
.cartao-acesso .marca-topo{text-align:center;margin-bottom:22px}
.cartao-acesso .marca-topo::before{
  content:"OS"; width:46px; height:46px; margin:0 auto 13px; border-radius:12px;
  display:grid; place-items:center; background:linear-gradient(135deg,#f28b32,#ffad66);
  color:#21160d; font-weight:900; font-size:15px; box-shadow:0 10px 25px rgba(242,139,50,.18);
}
.cartao-acesso .marca-topo .eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#ffad66;font-weight:800}
.cartao-acesso h1{font-size:24px;margin:6px 0 0;color:#fff;text-align:center;letter-spacing:-.4px}
.cartao-acesso .subtitulo{color:#aab4c0;text-align:center;font-size:14px;margin:7px 0 0}
.abas-acesso-claro{display:flex;margin:22px 0;border-radius:11px;overflow:hidden;background:#151b22;padding:4px;border:1px solid #2c3540}
.aba-acesso-claro{flex:1;text-align:center;padding:10px;font-size:13px;font-weight:700;cursor:pointer;color:#aab4c0;border-radius:8px;transition:.18s ease}
.aba-acesso-claro:hover{color:#fff}.aba-acesso-claro.ativa{background:#f28b32;color:#21160d;box-shadow:0 4px 14px rgba(242,139,50,.18)}
.campo-moderno{margin-bottom:18px}.campo-moderno label{display:block;font-size:14px;font-weight:700;color:#e8edf2;margin-bottom:8px}
.campo-moderno label .obrigatorio{color:#ff9b8d;margin-left:2px}
.campo-moderno input,.campo-moderno select{
 width:100%;padding:13px 15px;border:1.5px solid #35404c;border-radius:10px;font-size:16px;
 color:#f5f7fa;background:#202833;opacity:1;
}
.campo-moderno input::placeholder{color:#84909d;opacity:1}
.campo-moderno input:focus,.campo-moderno select:focus{outline:none;border-color:#f28b32;box-shadow:0 0 0 3px rgba(242,139,50,.12)}
.grupo-telefone{display:flex;gap:10px}.selo-pais{display:flex;align-items:center;gap:6px;padding:0 12px;border:1.5px solid #35404c;border-radius:10px;font-size:16px;color:#e8edf2;background:#202833;white-space:nowrap}.grupo-telefone input{flex:1;min-width:0}
.campo-senha{position:relative}.campo-senha input{padding-right:48px}.botao-olho{position:absolute;right:11px;bottom:10px;background:transparent;border:0;cursor:pointer;color:#aab4c0;padding:6px;line-height:1}
.select-moderno-wrap{position:relative}.select-moderno-wrap select{appearance:none;-webkit-appearance:none;padding-right:40px;color-scheme:dark}.select-moderno-wrap::after{content:"▾";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#aab4c0;pointer-events:none}
.linha-botoes-acesso{display:flex;gap:12px;margin-top:8px}.btn-voltar,.btn-continuar,.btn-entrar-claro{min-height:47px;border-radius:10px;font-weight:800;font-size:14px;cursor:pointer}
.btn-voltar{flex:0 0 auto;padding:12px 20px;border:1px solid #3c4651;background:transparent;color:#e8edf2}.btn-voltar:hover{background:#202833}
.btn-continuar{flex:1;padding:12px 20px;border:0;background:#f28b32;color:#21160d;display:flex;align-items:center;justify-content:center;gap:8px}.btn-continuar:hover,.btn-entrar-claro:hover{background:#ffad66}
.btn-entrar-claro{width:100%;padding:12px 20px;border:0;background:#f28b32;color:#21160d}
.rodape-acesso{text-align:center;margin-top:20px;font-size:13px;color:#aab4c0}.rodape-acesso a{color:#ffad66;font-weight:800;cursor:pointer}.rodape-acesso a:hover{color:#fff}
.cartao-acesso .mensagem-erro{margin-top:14px;padding:10px 12px;border-radius:9px;background:rgba(193,80,63,.13);border:1px solid rgba(193,80,63,.38);color:#ffb0a5}
.passo-cadastro{display:none}.passo-cadastro.ativo{display:block}
@media(max-width:560px){
 .tela-cheia-clara{align-items:flex-start;padding:18px 12px}
 .cartao-acesso{padding:25px 18px;border-radius:15px}
 .cartao-acesso h1{font-size:21px}
 .linha-botoes-acesso{flex-direction:column-reverse}.btn-voltar,.btn-continuar{width:100%}
 .grupo-telefone{gap:7px}.selo-pais{padding:0 9px;font-size:14px}
}
/* ================= Homologação Fase 10 — responsividade/navegadores ================= */
img, svg, video, canvas { max-width: 100%; height: auto; }
input, select, textarea, button { font: inherit; max-width: 100%; }
input, select, textarea { min-width: 0; }
button, .btn, .btn-mini { touch-action: manipulation; }
.tabela-wrap { width: 100%; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; }
.cartao-claro { width: 100%; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros input, .filtros select { min-height: 40px; }

.menu-mobile-btn {
  display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linha-clara);
  border-radius: 8px; background: var(--papel-2); color: var(--texto-escuro); cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px; flex: 0 0 44px;
}
.menu-mobile-btn span { width: 20px; height: 2px; border-radius: 2px; background: currentColor; display: block; }
.menu-mobile-marca { display: none; min-width: 0; }
.menu-mobile-marca .eyebrow { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ambar-escuro); }
.menu-mobile-marca .nome { font-family: Georgia, serif; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Firefox: campos claros e escuros com cores explícitas */
.campo-claro input, .campo-claro select, .campo-claro textarea,
.filtros input, .filtros select, .tabela-itens input {
  color: var(--texto-escuro); background-color: var(--papel-2); opacity: 1;
}
.campo-claro input::placeholder, .filtros input::placeholder, .tabela-itens input::placeholder { color: #777166; opacity: 1; }
.campo input::placeholder { color: #c4bfb5; opacity: 1; }
select { color-scheme: light; }
.campo select { color-scheme: dark; }

@media (max-width: 820px) {
  html, body { width: 100%; max-width: 100%; }
  .layout { display: block; min-height: 100vh; }
  .conteudo { width: 100%; }
  .sidebar {
    display: none; position: fixed; z-index: 1000; top: 65px; left: 12px; right: 12px; width: auto;
    max-height: calc(100vh - 82px); overflow-y: auto; overflow-x: hidden; padding: 8px;
    border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.28);
  }
  .sidebar.aberta { display: block; }
  .sidebar .marca { display: none; }
  .nav-item { white-space: normal; border-left: none; border-bottom: 1px solid var(--linha); border-radius: 6px; padding: 12px 14px; }
  .nav-item:last-child { border-bottom: 0; }
  .nav-item.ativo { border-left: none; border-bottom-color: var(--linha); background: var(--grafite-2); box-shadow: inset 3px 0 0 var(--ambar); }
  .topbar { position: sticky; top: 0; z-index: 900; padding: 10px 14px; min-height: 64px; flex-wrap: nowrap; }
  .topbar h2 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
  .topbar .usuario { gap: 8px; flex: 0 0 auto; }
  .topbar .usuario span { display: none; }
  .menu-mobile-btn, .menu-mobile-marca { display: flex; }
  .menu-mobile-marca { flex-direction: column; margin-right: 4px; max-width: 120px; }
  .painel { padding: 18px 14px 28px; }
  .cartao-claro { padding: 18px; max-width: none !important; }
  .barra-acoes { align-items: stretch; }
  .barra-acoes > * { max-width: 100%; }
  .filtros { width: 100%; }
  .filtros input, .filtros select { flex: 1 1 150px; width: auto; }
  .linha-botoes-acesso { flex-wrap: wrap; }
  .galeria-fotos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

@media (max-width: 560px) {
  .painel { padding: 14px 10px 24px; }
  .topbar { padding: 9px 10px; }
  .topbar h2 { font-size: 16px; }
  .menu-mobile-marca { max-width: 92px; }
  .cartoes-kpi { grid-template-columns: 1fr; gap: 10px; }
  .kpi { padding: 14px 16px; }
  .cartao-claro { padding: 15px 13px; }
  .cartao-escuro { padding: 24px 18px; }
  .cartao-acesso { padding: 26px 18px; border-radius: 12px; }
  .tela-cheia-clara, .tela-cheia-escura { align-items: flex-start; padding: 14px 10px; }
  .grupo-telefone { flex-wrap: wrap; }
  .selo-pais { min-height: 46px; }
  .linha-botoes-acesso > * { flex: 1 1 100%; width: 100%; }
  .btn, .btn-mini { min-height: 42px; }
  .barra-acoes .btn { width: 100%; }
  .filtros input, .filtros select { flex-basis: 100%; width: 100%; }
  table { min-width: 520px; }
  th, td { padding: 10px 11px; }
  .galeria-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  form[style*="display:flex"] { flex-wrap: wrap; }
  form[style*="display:flex"] > input:not([type="hidden"]),
  form[style*="display:flex"] > select { flex: 1 1 100%; width: 100%; }
  div[style*="display:flex"] { flex-wrap: wrap; }
}

@media (min-width: 1440px) {
  .painel { padding-left: 36px; padding-right: 36px; }
  .conteudo { max-width: calc(100vw - 220px); }
}


/* Fase 11 - paginação / listas extensas */
.paginacao{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px 0 4px;font-size:13px;color:var(--texto-medio)}
.paginacao .btn-mini{min-width:92px;text-align:center}
@media (max-width:480px){.paginacao{justify-content:space-between}.paginacao span{width:100%;text-align:center;order:-1}}

.rel-titulo{margin:24px 0 10px;font-size:15px;}
@media print{.sidebar,.topbar,.acoes-rapidas,.filtros,.flash{display:none!important}.conteudo,.painel{margin:0!important;padding:0!important;width:100%!important}.tabela-wrap{overflow:visible!important}body{background:#fff!important}.cartoes-kpi{break-inside:avoid}table{font-size:10pt}}

.empresa-logo-menu{display:block;max-width:120px;max-height:58px;object-fit:contain;margin:0 0 8px;}


/* ORDEMIX v55 — ícones de e-mail e senha alinhados à esquerda */
.campo-moderno:has(input[name="email"]),
.campo-moderno:has(input[name="admin_email"]),
.campo-moderno:has(input[name="senha"]),
.campo-moderno:has(input[name="admin_senha"]){position:relative}
.campo-moderno:has(input[name="email"])::after,
.campo-moderno:has(input[name="admin_email"])::after{
 content:"✉";position:absolute;left:14px;bottom:13px;color:#aab4c0;font-size:17px;line-height:1;pointer-events:none;z-index:2
}
.campo-moderno:has(input[name="senha"])::after,
.campo-moderno:has(input[name="admin_senha"])::after{
 content:"🔒";position:absolute;left:13px;bottom:12px;font-size:15px;line-height:1;pointer-events:none;z-index:2;filter:grayscale(1)
}
.campo-moderno input[name="email"],
.campo-moderno input[name="admin_email"],
.campo-moderno input[name="senha"],
.campo-moderno input[name="admin_senha"]{padding-left:43px}
.campo-moderno .campo-senha input[name="senha"],
.campo-moderno .campo-senha input[name="admin_senha"]{padding-left:43px;padding-right:48px}
@media(max-width:560px){
 .campo-moderno:has(input[name="email"])::after,
 .campo-moderno:has(input[name="admin_email"])::after{left:13px}
}


/* ORDEMIX v62 — menu lateral organizado por categorias */
.nav-grupo{margin:0 0 15px;padding:0}
.nav-grupo-titulo{
  padding:8px 18px 6px;
  font-size:10px;
  line-height:1.2;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight:800;
  color:var(--texto-suave,#8f9aa6);
  opacity:.88;
}
.nav-grupo + .nav-grupo{border-top:1px solid rgba(255,255,255,.07);padding-top:10px}
.sidebar .nav-grupo .nav-item{margin-bottom:2px}
.sidebar .nav-secao{display:block;padding:11px 18px 4px;color:rgba(203,213,225,.58);font-size:9px;font-weight:700;letter-spacing:1.05px;text-transform:uppercase}
@media(max-width:760px){
 .nav-grupo{margin-bottom:12px}
 .nav-grupo-titulo{padding-left:16px;padding-top:7px}
}


/* ORDEMIX v75 — menu lateral com categorias e cores alternadas */
.sidebar .nav-grupo{
  position:relative;
  margin:0 10px 12px;
  padding:9px 7px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.018);
}
.sidebar .nav-grupo::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:rgba(255,255,255,.16);
}
.sidebar .nav-grupo-titulo{
  padding:3px 10px 7px 13px;
  font-size:10px;
  letter-spacing:1.45px;
  font-weight:900;
  opacity:.95;
}
.sidebar .nav-grupo .nav-item{
  position:relative;
  margin:2px 0;
  border-radius:8px;
  padding-left:13px;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.sidebar .nav-grupo .nav-item:hover{transform:translateX(2px)}
.sidebar .nav-operacao{background:rgba(242,139,50,.045)}
.sidebar .nav-operacao::before,.sidebar .nav-operacao .nav-grupo-titulo{color:#f2a25a;background-color:transparent}
.sidebar .nav-operacao::before{background:#f2a25a}

.sidebar .nav-financeiro{background:rgba(70,170,115,.04)}
.sidebar .nav-financeiro::before{background:#64b88a}
.sidebar .nav-financeiro .nav-grupo-titulo{color:#7ac79d}

.sidebar .nav-config{background:rgba(86,135,195,.04)}
.sidebar .nav-config::before{background:#6f9fd5}
.sidebar .nav-config .nav-grupo-titulo{color:#88afe0}

.sidebar .nav-conta{background:rgba(160,120,210,.035)}
.sidebar .nav-conta::before{background:#a58bd3}
.sidebar .nav-conta .nav-grupo-titulo{color:#b6a0df}

.sidebar .nav-saas{background:rgba(242,139,50,.045)}
.sidebar .nav-saas::before{background:#f2a25a}
.sidebar .nav-saas .nav-grupo-titulo{color:#f2a25a}
.sidebar .nav-admin{background:rgba(86,135,195,.04)}
.sidebar .nav-admin::before{background:#6f9fd5}
.sidebar .nav-admin .nav-grupo-titulo{color:#88afe0}
.sidebar .nav-sistema{background:rgba(70,170,115,.04)}
.sidebar .nav-sistema::before{background:#64b88a}
.sidebar .nav-sistema .nav-grupo-titulo{color:#7ac79d}

.sidebar .nav-grupo .nav-item.ativo{
  background:rgba(255,255,255,.09);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
}
.sidebar .nav-grupo + .nav-grupo{
  border-top:1px solid rgba(255,255,255,.055);
  padding-top:9px;
}
@media(max-width:760px){
  .sidebar .nav-grupo{margin:0 8px 10px;padding:8px 6px 9px}
  .sidebar .nav-grupo .nav-item{min-height:42px;display:flex;align-items:center}
  .sidebar .nav-grupo-titulo{padding-left:12px}
}

/* ORDEMIX v77 — enquadramento responsivo da logomarca da empresa */
.empresa-logo-menu{
  display:block;
  width:auto;
  height:auto;
  max-width:168px;
  max-height:58px;
  object-fit:contain;
  object-position:left center;
  flex:0 1 auto;
}
.sidebar-topo,.sidebar-brand,.brand-area{
  min-width:0;
}
@media(max-width:760px){
  .empresa-logo-menu{max-width:142px;max-height:48px}
}

/* ORDEMIX v80 — otimização vertical do menu */
.sidebar .nav-grupo{margin-bottom:8px;padding-top:7px;padding-bottom:8px}
.sidebar .nav-grupo-titulo{padding-top:2px;padding-bottom:5px}
.sidebar .nav-grupo .nav-item{padding-top:7px;padding-bottom:7px;line-height:1.2}
@media(max-height:800px) and (min-width:761px){
 .sidebar .marca{padding-top:12px;padding-bottom:10px}
 .sidebar .empresa-logo-menu{max-height:44px}
 .sidebar .nav-grupo{margin-bottom:5px;padding-top:5px;padding-bottom:6px}
 .sidebar .nav-grupo .nav-item{padding-top:6px;padding-bottom:6px;font-size:13px}
 .sidebar .nav-grupo-titulo{padding-bottom:3px}
}


/* =====================================================================
   ORDEMIX V141 — PADRÃO PROFISSIONAL GLOBAL DAS TELAS INTERNAS
   ===================================================================== */
.app-interna{background:#f5f6f8;color:#111827}
.app-interna .painel{width:100%;max-width:1480px;margin:0 auto;padding:24px 28px 34px}
.app-interna .padrao-intro-global{
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start;
  margin:0 0 18px;padding:18px 20px;background:#111827;color:#fff;
  border-radius:14px;border-left:5px solid #f97316;box-shadow:0 4px 14px rgba(17,24,39,.08)
}
.app-interna .padrao-intro-global h2{margin:0 0 5px;font-size:20px;line-height:1.2;color:#fff}
.app-interna .padrao-intro-global p{margin:0;color:#d1d5db;font-size:13px;line-height:1.45;max-width:820px}
.app-interna .padrao-intro-marca{
  flex:0 0 auto;padding:7px 10px;border:1px solid rgba(255,255,255,.16);
  border-radius:8px;color:#fdba74;font-size:10px;font-weight:900;letter-spacing:1.5px
}

/* cartões e seções antigas passam a seguir o novo padrão */
.app-interna .cartao-claro{
  width:100%;max-width:none;background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.035);margin-bottom:14px
}
.app-interna .cartao-claro > h2:first-child,
.app-interna .cartao-claro > h3:first-child,
.app-interna .cartao-claro > h4:first-child{margin-top:0;color:#111827}
.app-interna .painel > h3:not(.rel-titulo),
.app-interna .painel > h2:not(.padrao-titulo){
  color:#111827;margin:26px 0 10px;padding:0 2px 8px;border-bottom:2px solid #111827
}
.app-interna .rel-titulo{color:#111827}

/* campos */
.app-interna .campo-claro label,
.app-interna .filtros label{font-size:12px;font-weight:700;color:#4b5563}
.app-interna .campo-claro input,
.app-interna .campo-claro select,
.app-interna .campo-claro textarea,
.app-interna .filtros input,
.app-interna .filtros select{
  min-height:42px;background:#fff;color:#111827;border:1px solid #d1d5db;border-radius:8px;
  padding:9px 11px;transition:border-color .15s ease,box-shadow .15s ease
}
.app-interna .campo-claro textarea{min-height:92px}
.app-interna .campo-claro input:focus,
.app-interna .campo-claro select:focus,
.app-interna .campo-claro textarea:focus,
.app-interna .filtros input:focus,
.app-interna .filtros select:focus{
  outline:none;border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.10)
}
.app-interna .grid-dois,.app-interna .grid-tres{gap:12px}
.app-interna .filtros{
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;
  margin-bottom:18px;box-shadow:0 2px 8px rgba(0,0,0,.03);align-items:flex-end
}

/* botões */
.app-interna .btn{
  border-radius:8px;background:#f97316;color:#fff;border:1px solid #f97316;
  font-weight:800;text-decoration:none;box-shadow:none
}
.app-interna .btn:hover{background:#ea580c;border-color:#ea580c}
.app-interna .btn.secundario{
  background:#fff;color:#111827;border-color:#d1d5db
}
.app-interna .btn.secundario:hover{border-color:#f97316;color:#c2410c;background:#fff7ed}
.app-interna .btn-mini{
  border-radius:7px;font-weight:700;text-decoration:none
}
.app-interna .btn-mini.perigo,.app-interna .btn.perigo{background:#fff;color:#b91c1c;border:1px solid #fecaca}
.app-interna .btn-mini.perigo:hover,.app-interna .btn.perigo:hover{background:#fef2f2;border-color:#ef4444}

/* barras de ações */
.app-interna .barra-acoes{
  background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;
  margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.025)
}

/* tabelas globais */
.app-interna .tabela-wrap{
  width:100%;max-width:100%;background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  overflow:auto;box-shadow:0 2px 8px rgba(0,0,0,.035);margin-bottom:18px
}
.app-interna .tabela-wrap table{
  background:#fff;border-radius:0;border-collapse:separate;border-spacing:0;min-width:680px
}
.app-interna .tabela-wrap thead th{
  position:sticky;top:0;z-index:2;background:#111827;color:#fff;
  font-size:11px;text-transform:uppercase;letter-spacing:.025em;padding:11px 10px;
  white-space:nowrap;border-bottom:0
}
.app-interna .tabela-wrap tbody td{padding:10px;border-bottom:1px solid #eef0f2;vertical-align:middle}
.app-interna .tabela-wrap tbody tr:nth-child(even){background:#fafafa}
.app-interna .tabela-wrap tbody tr:hover{background:#fff7ed}
.app-interna .tabela-wrap tbody tr:last-child td{border-bottom:0}
.app-interna .vazio{padding:28px!important;text-align:center;color:#6b7280!important}

/* KPIs legados */
.app-interna .cartoes-kpi{gap:10px;margin-bottom:20px}
.app-interna .kpi{
  background:#fff;border:1px solid #e5e7eb;border-left:0;border-top:3px solid #f97316;
  border-radius:11px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.03)
}
.app-interna .kpi .valor{font-family:inherit;font-size:21px;font-weight:800;color:#111827}
.app-interna .kpi .rotulo{font-size:12px;color:#6b7280;text-transform:none;letter-spacing:0;margin-top:5px}

/* badges, abas, painéis e timeline */
.app-interna .badge{background:#fff;border-radius:999px}
.app-interna [class*="-tab"],.app-interna .os-tab{border-radius:8px}
.app-interna .os-section,.app-interna [class*="-panel"]{border-radius:12px}
.app-interna .linha-tempo{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 16px 4px 38px}
.app-interna .flash{border-radius:10px;margin-bottom:14px}

/* Superadmin e páginas densas */
.app-interna .mon-kpi,.app-interna .pay-card,.app-interna .ass-card{
  border-radius:12px!important;box-shadow:0 2px 8px rgba(0,0,0,.035)
}

/* responsividade global */
@media(max-width:1100px){
  .app-interna .painel{padding:20px 20px 30px}
}
@media(max-width:820px){
  .app-interna .painel{padding:16px 14px 28px}
  .app-interna .padrao-intro-global{padding:15px}
  .app-interna .padrao-intro-marca{display:none}
  .app-interna .grid-tres{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .app-interna .painel{padding:12px 10px 24px}
  .app-interna .padrao-intro-global{margin-bottom:14px;border-radius:11px}
  .app-interna .padrao-intro-global h2{font-size:18px}
  .app-interna .cartao-claro{padding:14px 12px;border-radius:10px}
  .app-interna .grid-dois,.app-interna .grid-tres{grid-template-columns:1fr}
  .app-interna .filtros{padding:10px}
  .app-interna .barra-acoes{padding:10px}
  .app-interna .tabela-wrap{border-radius:9px}
}


/* ORDEMIX V143 — categorias do menu lateral */
.sidebar .nav-relatorios{background:rgba(14,165,233,.038)}
.sidebar .nav-relatorios::before{background:#38bdf8}
.sidebar .nav-relatorios .nav-grupo-titulo{color:#7dd3fc}

.sidebar .nav-integracoes{background:rgba(168,85,247,.035)}
.sidebar .nav-integracoes::before{background:#a78bfa}
.sidebar .nav-integracoes .nav-grupo-titulo{color:#c4b5fd}

.sidebar .nav-admin{background:rgba(100,116,139,.045)}
.sidebar .nav-admin::before{background:#94a3b8}
.sidebar .nav-admin .nav-grupo-titulo{color:#cbd5e1}

/* melhora leitura sem aumentar muito a altura */
.sidebar .nav-grupo-titulo{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.sidebar .nav-grupo .nav-item{
  font-size:12.5px;
}
@media(max-height:820px) and (min-width:821px){
  .sidebar .nav-grupo{margin-bottom:5px;padding-top:5px;padding-bottom:6px}
  .sidebar .nav-grupo-titulo{font-size:9px;letter-spacing:1.2px}
  .sidebar .nav-grupo .nav-item{padding-top:5px;padding-bottom:5px;font-size:12px}
}

/* ORDEMIX V381 — grupos recolhíveis e navegação por área */
.sidebar{overflow-y:auto;overscroll-behavior:contain}
.sidebar details.nav-grupo{overflow:hidden}
.sidebar .nav-grupo-titulo{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;user-select:none}
.sidebar .nav-grupo-titulo::-webkit-details-marker{display:none}
.sidebar .nav-grupo-titulo::after{content:'›';font-size:18px;line-height:10px;font-weight:400;transform:rotate(0deg);transition:transform .18s ease;color:currentColor}
.sidebar details[open]>.nav-grupo-titulo::after{transform:rotate(90deg)}
.sidebar .nav-grupo-itens{animation:menuGrupoAbrir .16s ease-out}
.sidebar .nav-compras{background:rgba(16,185,129,.045)}
.sidebar .nav-compras::before{background:#34d399}
.sidebar .nav-compras .nav-grupo-titulo{color:#6ee7b7}
.sidebar .nav-estoque{background:rgba(245,158,11,.045)}
.sidebar .nav-estoque::before{background:#fbbf24}
.sidebar .nav-estoque .nav-grupo-titulo{color:#fde68a}
@keyframes menuGrupoAbrir{from{opacity:.35;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
 .sidebar .nav-grupo-titulo{min-height:35px;padding-top:7px;padding-bottom:7px}
 .sidebar .nav-grupo-titulo::after{font-size:20px}
}

/* ORDEMIX V455 - acabamento global de telas internas */
.app-interna{background:#f6f7f9;color:#1f2937}.app-interna .painel{isolation:isolate}.app-interna :focus-visible{outline:3px solid rgba(245,158,11,.48);outline-offset:2px}.app-interna .padrao-intro-global{border-radius:14px;border:1px solid #e5e7eb;box-shadow:0 5px 18px rgba(15,23,42,.045)}.app-interna .cartao-claro,.app-interna .card,.app-interna .panel,.app-interna .painel>section{border-radius:12px}.app-interna .cartao-claro,.app-interna .card{border:1px solid #e5e7eb;box-shadow:0 3px 12px rgba(15,23,42,.035)}.app-interna .btn,.app-interna .btn-mini{border-radius:8px;min-height:36px;transition:transform .14s ease,box-shadow .14s ease,background .14s ease}.app-interna .btn:hover,.app-interna .btn-mini:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(15,23,42,.14)}.app-interna input,.app-interna select,.app-interna textarea{transition:border-color .15s ease,box-shadow .15s ease}.app-interna .tabela-wrap{border:1px solid #e6e9ee;border-radius:10px;background:#fff}.app-interna .tabela-wrap table{margin:0}.app-interna .tabela-wrap thead th{white-space:nowrap}.app-interna .flash{border-radius:10px;box-shadow:0 2px 8px rgba(15,23,42,.04)}.app-interna .barra-acoes{padding:4px 0}.app-interna h1,.app-interna h2,.app-interna h3{letter-spacing:-.015em}@media(max-width:760px){.app-interna .painel{padding:14px 12px 30px}.app-interna .btn{min-height:42px}.app-interna .barra-acoes>.btn,.app-interna .barra-acoes>form{max-width:100%}.app-interna .tabela-wrap{border-radius:8px}.app-interna .padrao-intro-global{padding:16px}.app-interna .cartao-claro{padding:16px}}@media print{.app-interna .painel{max-width:none!important}.app-interna .cartao-claro,.app-interna .card{box-shadow:none!important}.app-interna .tabela-wrap{border-color:#cbd5e1}}

/* ORDEMIX V490 — menu profissional por função de trabalho */
.sidebar{width:248px}
.sidebar .perfil-menu{display:inline-flex;align-items:center;margin-top:8px;padding:4px 7px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#cbd5e1;background:rgba(255,255,255,.045);font-size:10px;font-weight:700;line-height:1.1}
.sidebar .nav-inicio{display:flex;align-items:center;gap:9px;margin:0 10px 10px;padding:10px 12px;border:1px solid rgba(251,191,36,.3);border-radius:10px;background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.06));color:#fef3c7;font-size:13px;font-weight:800;text-decoration:none;transition:transform .16s ease,background .16s ease}
.sidebar .nav-inicio>span{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.13);font-size:17px;line-height:1}
.sidebar .nav-inicio:hover,.sidebar .nav-inicio.ativo{transform:translateY(-1px);background:linear-gradient(135deg,rgba(245,158,11,.34),rgba(245,158,11,.12));color:#fff}
.sidebar .nav-grupo-titulo .nav-grupo-rotulo{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sidebar .nav-grupo-icone{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border:1px solid currentColor;border-radius:6px;font-size:10px;letter-spacing:0;text-transform:none;line-height:1;background:rgba(255,255,255,.045)}
.sidebar details.nav-grupo[open]{box-shadow:0 7px 18px rgba(0,0,0,.1);border-color:rgba(255,255,255,.1)}
.sidebar .nav-vendas{background:rgba(14,165,233,.045)}.sidebar .nav-vendas::before{background:#38bdf8}.sidebar .nav-vendas .nav-grupo-titulo{color:#7dd3fc}
.sidebar .nav-fiscal{background:rgba(139,92,246,.045)}.sidebar .nav-fiscal::before{background:#a78bfa}.sidebar .nav-fiscal .nav-grupo-titulo{color:#c4b5fd}
.sidebar .nav-grupo .nav-secao:first-child{padding-top:5px}
@media(max-width:760px){.sidebar .perfil-menu{display:none}.sidebar .nav-inicio{min-height:42px;margin:0 8px 10px;padding:10px 12px}.sidebar .nav-grupo-icone{width:22px;height:22px;flex-basis:22px}}