/*!
 * PetShopServ by H3ConsulTI — tema único de todas as páginas.
 * Identidade H3ConsulTI (mesmo padrão do TJM-GLMPI, Chamados e tutoriais).
 * A cor da marca muda por empresa em --marca; o restante é fixo.
 * Desenvolvido por H3ConsulTI Consultoria em TI. Todos os direitos reservados.
 */
:root {
  --navy: #1b2559;
  --deep: #2c3e7f;
  --blue: #4b5fd9;
  --yellow: #ffc107;
  --marca: var(--navy);
  --marca-texto: #ffffff;
  --acao: var(--blue);
  --acao-escura: var(--deep);
  --texto: #1d2433;
  --texto-2: #586074;
  --texto-3: #7a8296;
  --fundo: #f5f6fb;
  --superficie: #ffffff;
  --superficie-2: #eef0f6;
  --borda: #dfe3ee;
  --borda-forte: #c5cce0;
  --sucesso: #0b7a5f;
  --sucesso-fundo: #e3f4ee;
  --alerta: #8a5a00;
  --alerta-fundo: #fff4d6;
  --erro: #b42318;
  --erro-fundo: #fdecea;
  --info-fundo: #e8ecfb;
  --raio: 10px;
  --raio-p: 6px;
  --sombra: 0 1px 2px rgba(27, 37, 89, .06), 0 4px 16px rgba(27, 37, 89, .06);
  --sombra-forte: 0 12px 32px rgba(27, 37, 89, .18);
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --lateral: 248px;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --texto: #e7eaf3; --texto-2: #b3bad0; --texto-3: #8d95ad;
  --fundo: #0f1428; --superficie: #171d36; --superficie-2: #1f2645;
  --borda: #2b3358; --borda-forte: #3b4573;
  --acao: #7d8cf0; --acao-escura: #a3aef5;
  --sucesso: #4cc49b; --sucesso-fundo: #12332b; --alerta: #f2c14e; --alerta-fundo: #3a2f12;
  --erro: #ff8a7d; --erro-fundo: #3d1a17; --info-fundo: #1f2a55;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); font-size: 15px; line-height: 1.5; color: var(--texto); background: var(--fundo); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--acao); }
a:hover { color: var(--acao-escura); }
h1, h2, h3, h4 { color: var(--texto); line-height: 1.25; margin: 0 0 .5em; }
:root:not([data-tema="escuro"]) h1, :root:not([data-tema="escuro"]) h2 { color: var(--navy); }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 .75em; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oculto { display: none !important; }
.mudo { color: var(--texto-2); }
.peq { font-size: 13px; }
.direita { text-align: right; }
.nowrap { white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--yellow); color: #1b2559; padding: 8px 14px; border-radius: 6px; z-index: 100; font-weight: 600; }
.pular:focus { left: 8px; }

/* ===== Cabeçalho ===== */
.topo { background: var(--marca); color: var(--marca-texto); position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.topo-in { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 16px; }
.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.marca img { height: 38px; width: auto; max-width: 140px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; }
.marca-sigla { width: 38px; height: 38px; border-radius: 8px; background: var(--yellow); color: #1b2559; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.marca-txt { display: flex; flex-direction: column; min-width: 0; }
.marca-txt b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marca-txt span { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-esp { flex: 1; }
.idiomas { display: flex; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; overflow: hidden; }
.idiomas button { background: transparent; color: inherit; border: 0; padding: 5px 10px; font: 600 12px var(--fonte); cursor: pointer; }
.idiomas button[aria-pressed="true"] { background: var(--yellow); color: #1b2559; }
.btn-topo { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: inherit; border-radius: 8px; height: 36px; min-width: 36px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--fonte); cursor: pointer; }
.btn-topo:hover { background: rgba(255, 255, 255, .22); }
.btn-topo svg { width: 18px; height: 18px; }
.menu-btn { display: none; }
.faixa-suporte { background: var(--yellow); color: #1b2559; font-size: 13px; font-weight: 600; padding: 6px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.faixa-suporte button { margin-left: auto; }

/* ===== Corpo com menu lateral ===== */
.corpo { flex: 1; display: flex; min-height: 0; }
.lateral { width: var(--lateral); flex: none; background: var(--superficie); border-right: 1px solid var(--borda); padding: 16px 10px; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
.lateral h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); margin: 14px 10px 6px; }
.lateral a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--texto); text-decoration: none; font-weight: 500; font-size: 14px; }
.lateral a svg { width: 18px; height: 18px; color: var(--texto-2); flex: none; }
.lateral a:hover { background: var(--superficie-2); }
.lateral a[aria-current="page"] { background: var(--info-fundo); color: var(--navy); font-weight: 700; box-shadow: inset 3px 0 0 var(--marca); }
:root[data-tema="escuro"] .lateral a[aria-current="page"] { color: var(--texto); }
.lateral a .emb { margin-left: auto; font-size: 10px; background: var(--superficie-2); color: var(--texto-3); border-radius: 999px; padding: 1px 7px; font-weight: 600; }
.conteudo { flex: 1; min-width: 0; padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }
.cab-tela { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cab-tela h1 { margin: 0; flex: 1; min-width: 200px; }
.cab-tela .sub { width: 100%; margin: 4px 0 0; color: var(--texto-2); }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.escurecer { display: none; }

/* ===== Botões ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); font: 600 14px var(--fonte); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--superficie-2); color: var(--texto); }
.btn svg { width: 17px; height: 17px; }
.btn-pri { background: var(--acao); border-color: var(--acao); color: #fff; }
.btn-pri:hover { background: var(--acao-escura); border-color: var(--acao-escura); color: #fff; }
:root[data-tema="escuro"] .btn-pri { color: #0f1428; }
.btn-perigo { color: var(--erro); border-color: var(--erro); }
.btn-perigo:hover { background: var(--erro-fundo); color: var(--erro); }
.btn-txt { border-color: transparent; background: transparent; color: var(--acao); padding: 0 8px; }
.btn-txt:hover { background: var(--superficie-2); color: var(--acao-escura); }
.btn-p { min-height: 32px; padding: 0 10px; font-size: 13px; }
.btn-icone { width: 36px; min-height: 36px; padding: 0; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-bloco { width: 100%; }

/* ===== Cartões e indicadores ===== */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 20px; }
.cartao + .cartao { margin-top: 16px; }
.cartao > h2:first-child, .cartao > h3:first-child { margin-top: 0; }
.grade { display: grid; gap: 16px; }
.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)); }
.ind { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra); border-top: 4px solid var(--marca); }
.ind span { display: block; font-size: 13px; color: var(--texto-2); font-weight: 500; }
.ind b { display: block; font-size: 28px; color: var(--texto); margin-top: 4px; font-variant-numeric: tabular-nums; }
.ind small { color: var(--texto-3); }
.barras { display: flex; flex-direction: column; gap: 8px; }
.barra { display: grid; grid-template-columns: 110px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; }
.barra i { display: block; height: 12px; border-radius: 6px; background: var(--acao); min-width: 2px; }
.barra em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--texto-2); }

/* ===== Selos ===== */
.selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--superficie-2); color: var(--texto-2); white-space: nowrap; }
.selo.ok { background: var(--sucesso-fundo); color: var(--sucesso); }
.selo.al { background: var(--alerta-fundo); color: var(--alerta); }
.selo.er { background: var(--erro-fundo); color: var(--erro); }
.selo.in { background: var(--info-fundo); color: var(--acao-escura); }

/* ===== Tabelas ===== */
.barra-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.barra-filtros .campo { margin: 0; }
.barra-filtros input[type="search"] { min-width: 240px; }
.tabela-envolve { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); background: var(--superficie-2); padding: 10px 12px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--fundo); }
.tabela td.acoes-l { text-align: right; white-space: nowrap; }
.tabela .principal { font-weight: 600; }
.vazio { text-align: center; padding: 36px 16px; color: var(--texto-2); }
.vazio svg { width: 40px; height: 40px; color: var(--texto-3); display: block; margin: 0 auto 8px; }
.paginacao { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; font-size: 13px; color: var(--texto-2); }

/* ===== Formulários ===== */
.form { display: grid; gap: 14px 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.form > * { grid-column: span 12; }
.c3 { grid-column: span 3 !important; } .c4 { grid-column: span 4 !important; } .c6 { grid-column: span 6 !important; } .c8 { grid-column: span 8 !important; } .c9 { grid-column: span 9 !important; } .c2 { grid-column: span 2 !important; }
.campo { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.campo > span { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.campo > span .obr { color: var(--erro); }
.campo small { font-size: 12px; color: var(--texto-3); }
input, select, textarea { font: 15px var(--fonte); color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 8px; padding: 9px 11px; min-height: 42px; width: 100%; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px rgba(75, 95, 217, .2); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--erro); }
.erro-campo { color: var(--erro); font-size: 12px; font-weight: 600; }
.marcar { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.marcar input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--acao); }
.secao-form { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); border-bottom: 1px solid var(--borda); padding-bottom: 6px; margin-top: 6px; }
.cor-campo { display: flex; gap: 8px; } .cor-campo input[type="color"] { width: 54px; padding: 4px; }
.aviso { border-radius: 8px; padding: 12px 14px; font-size: 14px; background: var(--info-fundo); border-left: 4px solid var(--acao); }
.aviso.al { background: var(--alerta-fundo); border-color: var(--yellow); color: var(--texto); }
.aviso.er { background: var(--erro-fundo); border-color: var(--erro); }
.aviso.ok { background: var(--sucesso-fundo); border-color: var(--sucesso); }
.segredo { font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: .08em; background: var(--superficie-2); padding: 10px 14px; border-radius: 8px; word-break: break-all; user-select: all; }

/* ===== Permissões ===== */
.perm-grupo { border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.perm-grupo h4 { margin: 0 0 8px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.perm-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.perm-lista .marcar { font-size: 13px; }
.perm-lista .fase { font-size: 11px; color: var(--texto-3); }

/* ===== Abas ===== */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); margin-bottom: 16px; overflow-x: auto; }
.abas button { background: none; border: 0; padding: 10px 14px; font: 600 14px var(--fonte); color: var(--texto-2); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.abas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--marca); }

/* ===== Janela modal ===== */
.modal-fundo { position: fixed; inset: 0; background: rgba(15, 20, 40, .55); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal { background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra-forte); width: 100%; max-width: 640px; display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.modal.largo { max-width: 920px; }
.modal-cab { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--borda); }
.modal-cab h2 { margin: 0; flex: 1; font-size: 19px; }
.modal-corpo { padding: 18px 20px; overflow-y: auto; }
.modal-rodape { padding: 12px 20px 18px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--borda); }

/* ===== Avisos rápidos ===== */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: var(--sombra-forte); font-size: 14px; border-left: 5px solid var(--yellow); }
.toast.er { border-left-color: #ff6b5b; }
.toast.ok { border-left-color: #4cc49b; }

/* ===== Login ===== */
.entrada { flex: 1; display: grid; place-items: center; padding: 32px 16px; background: linear-gradient(180deg, var(--fundo), var(--superficie-2)); }
.entrada .cartao { width: 100%; max-width: 440px; padding: 28px; }
.entrada h1 { font-size: 22px; }
.entrada .form { gap: 12px; }
.qr { display: grid; place-items: center; background: #fff; padding: 10px; border-radius: 8px; width: max-content; margin: 8px auto; }
.qr svg, .qr img { width: 180px; height: 180px; }

/* ===== Rodapé H3ConsulTI ===== */
.rodape { background: var(--navy); color: #d9def0; margin-top: auto; font-size: 14px; }
.rodape-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; max-width: 1280px; margin: 0 auto; padding: 28px 24px 18px; }
.rodape-in > div { padding: 0 24px; }
.rodape-in > div + div { border-left: 1px solid rgba(255, 255, 255, .15); }
.rodape-in > div:first-child { padding-left: 0; }
.rodape h4 { color: #fff; font-size: 14px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .06em; }
.rodape p { margin: 0 0 6px; }
.rodape a { color: #fff; text-decoration: none; }
.rodape a:hover { color: var(--yellow); text-decoration: underline; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin: 0 0 6px; }
.rodape .nav2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.rodape .nav2 li { display: flex; gap: 6px; align-items: baseline; margin-bottom: 6px; }
.rodape .nav2 li::before { content: "•"; color: var(--yellow); flex: none; }
.rodape .nav2 button { background: none; border: 0; color: #fff; font: inherit; padding: 0; cursor: pointer; text-align: left; }
.rodape .nav2 button:hover { color: var(--yellow); text-decoration: underline; }
.rodape-fim { border-top: 1px solid rgba(255, 255, 255, .15); max-width: 1280px; margin: 0 auto; padding: 12px 24px 16px; display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; font-size: 13px; color: #b8c0dc; }
.rodape .h3 { color: var(--yellow); font-weight: 700; }

/* ===== Cookies ===== */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 760px; margin: 0 auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-forte); padding: 16px 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cookies p { margin: 0; flex: 1; min-width: 240px; font-size: 14px; }

/* ===== Textos legais e tutorial ===== */
.legal h3 { margin-top: 18px; }
.legal ul { padding-left: 20px; }
.legal .atualizado { font-size: 13px; color: var(--texto-3); }
.tutorial { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.tutorial nav { position: sticky; top: 80px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; }
.tutorial nav h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.tutorial nav ol { margin: 0; padding-left: 18px; font-size: 14px; }
.tutorial nav li { margin: 0 0 6px; }
.tutorial section { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px 22px; margin-bottom: 16px; scroll-margin-top: 80px; }
.tutorial section h2 { display: flex; gap: 10px; align-items: center; }
.tutorial section h2 .n { background: var(--yellow); color: #1b2559; border-radius: 999px; width: 30px; height: 30px; display: grid; place-items: center; font-size: 14px; flex: none; }
.tutorial ol.passos { padding-left: 22px; }
.tutorial ol.passos li { margin-bottom: 8px; }
.tutorial .dica { background: var(--alerta-fundo); border-left: 4px solid var(--yellow); padding: 10px 12px; border-radius: 6px; font-size: 14px; }
.tutorial .feito { margin-top: 10px; }
.ajuda-flutuante { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--yellow); color: #1b2559; font: 800 22px var(--fonte); box-shadow: var(--sombra-forte); cursor: pointer; }

/* ===== Vitrine (index e cliente) ===== */
.vitrine-topo { background: var(--marca); color: var(--marca-texto); padding: 40px 16px; }
.vitrine-topo .in { max-width: 1100px; margin: 0 auto; }
.vitrine-topo h1 { color: inherit; font-size: 32px; }
.vitrine-topo p { opacity: .9; max-width: 640px; }
.vitrine { max-width: 1100px; margin: 0 auto; padding: 24px 16px 40px; width: 100%; }
.lojas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.loja { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--texto); }
.loja:hover { border-color: var(--acao); color: var(--texto); }
.loja .logo-l { height: 56px; display: flex; align-items: center; }
.loja .logo-l img { max-height: 56px; max-width: 160px; object-fit: contain; }
.servicos { display: flex; flex-wrap: wrap; gap: 8px; }
.unidade-cartao dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin: 0; font-size: 14px; }
.unidade-cartao dt { color: var(--texto-2); }
.unidade-cartao dd { margin: 0; }
.pet-cartao { display: flex; gap: 12px; align-items: flex-start; }
.pet-cartao .av { width: 44px; height: 44px; border-radius: 50%; background: var(--info-fundo); display: grid; place-items: center; flex: none; color: var(--acao-escura); font-weight: 700; }
.em-breve { border: 1px dashed var(--borda-forte); border-radius: var(--raio); padding: 16px; color: var(--texto-2); }

/* ===== Responsivo: tablet ===== */
@media (max-width: 1100px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-btn { display: inline-flex; }
  .lateral { position: fixed; left: 0; top: 60px; z-index: 50; transform: translateX(-105%); transition: transform .2s; box-shadow: var(--sombra-forte); height: calc(100vh - 60px); }
  body.menu-aberto .lateral { transform: none; }
  body.menu-aberto .escurecer { display: block; position: fixed; inset: 60px 0 0 0; background: rgba(15, 20, 40, .4); z-index: 45; }
  .tutorial { grid-template-columns: 1fr; }
  .tutorial nav { position: static; }
}
/* ===== Responsivo: celular ===== */
@media (max-width: 700px) {
  body { font-size: 15px; }
  .conteudo { padding: 16px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .form > * { grid-column: span 12 !important; }
  .marca-txt span { display: none; }
  .btn-topo .txt { display: none; }
  .idiomas button { padding: 5px 7px; }
  .rodape-in { grid-template-columns: 1fr; padding: 22px 16px 10px; }
  .rodape-in > div { padding: 12px 0; }
  .rodape-in > div + div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .15); }
  .rodape .nav2 { grid-template-columns: 1fr; }
  .modal-fundo { padding: 0; }
  .modal { border-radius: 0; max-height: none; min-height: 100vh; }
  .barra-filtros input[type="search"] { min-width: 0; flex: 1; }
  /* Tabela vira cartões no celular */
  table.tabela.resp thead { display: none; }
  table.tabela.resp tr { display: block; border-bottom: 1px solid var(--borda); padding: 8px 4px; }
  table.tabela.resp td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 8px; text-align: right; }
  table.tabela.resp td::before { content: attr(data-rot); color: var(--texto-2); font-size: 12px; font-weight: 600; text-align: left; }
  table.tabela.resp td.acoes-l { justify-content: flex-end; }
  table.tabela.resp td.acoes-l::before { content: none; }
  .vitrine-topo h1 { font-size: 26px; }
}

/* ===== Impressão (tutorial em PDF) ===== */
@media print {
  .topo, .lateral, .rodape, .cookies, .ajuda-flutuante, .toasts, .nao-imprimir, .faixa-suporte { display: none !important; }
  body { background: #fff; }
  .conteudo { padding: 0; max-width: none; }
  .tutorial { display: block; }
  .tutorial section { break-inside: avoid; border: 0; padding: 0; }
  .modal-fundo { position: static; background: none; padding: 0; }
  .modal { box-shadow: none; max-height: none; }
}

/* Caixas de marcar e tabelas de parâmetros */
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none; accent-color: var(--acao); }
input[type="color"] { padding: 2px; width: 48px; flex: none; }
.par-grupo .tabela { table-layout: fixed; }
.par-grupo .tabela th:nth-child(1) { width: 36%; } .par-grupo .tabela th:nth-child(2) { width: 34%; }
.par-grupo .tabela th:nth-child(3) { width: 16%; } .par-grupo .tabela th:nth-child(4) { width: 14%; }
.par-grupo .servicos { gap: 6px 14px; }
@media (max-width: 760px) { .par-grupo .tabela { table-layout: auto; } .par-grupo .tabela th { width: auto !important; } }
.vitrine-topo .in h1 { color: var(--marca-texto); font-size: 32px; }
.vitrine-topo .in p { color: var(--marca-texto); }
@media (max-width: 760px) { .vitrine-topo .in h1 { font-size: 26px; } }
/* Topo compacto em celulares */
@media (max-width: 480px) {
  .topo-in { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .topo .btn-topo { padding: 0; width: 36px; min-width: 36px; height: 36px; justify-content: center; }
  .topo .btn-topo .txt { display: none; }
  .idiomas { flex: none; }
  .idiomas button { padding: 4px 6px; font-size: 12px; }
  .marca { min-width: 0; flex: 1 1 auto; gap: 8px; }
  .marca-sigla, .marca img { width: 34px; height: 34px; font-size: 13px; }
  .marca-txt { min-width: 0; }
  .marca-txt b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .marca-txt span { display: none; }
  .topo-esp { display: none; }
}