/* =====================================================================
   Sistema ERP Córtex Tecnologia — Design System "Vidro Cortex"
   Copiado do Gerador de Anexos VMMT (tema Vidro): cenário quente desfocado,
   janela de vidro, cartões translúcidos, botões em pílula (preto no claro,
   creme no escuro), fonte Plus Jakarta Sans, modo Claro e Escuro.
   Regras para todas as telas: ver docs/DESIGN.md
   ===================================================================== */
/* Rodada 16, item 7: fontes servidas pelo próprio sistema (sem Google Fonts). Arquivos em /fonts (licença SIL OFL 1.1, via Fontsource).
   Archivo (largura e peso variáveis) = títulos e números do "Quadro do Turno"; Plus Jakarta Sans = texto; IBM Plex Mono = códigos. */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations'), url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations'), url(/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2-variations'), url(/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2-variations'), url(/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 500 700; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

/* Rodada 2, item 20: visual mais sério — paleta neutra (grafite/cinza) com UMA cor de destaque da marca (--marca, azul aço).
   Cor forte só para alertas reais: --vermelho (erro, atraso, urgente) e --amarelo/--warn (atenção). As demais "cores" antigas
   (--roxo, --rosa, --laranja) viram tons de grafite; --azul, --turquesa e --verde viram a cor da marca. --ok = verde discreto, só para texto de "deu certo". */
:root {
  color-scheme: light;
  /* Cenário de fundo neutro (cinza claro → grafite) */
  --bg: #c6cad0;
  --cena1: #f3f4f6; --cena2: #c8ccd2; --cena3: #8a919b; --cena4: #383e47; --cena5: #b8c1cc; --sky: rgba(28, 34, 44, .2);
  /* Vidro */
  --b: 255 255 255;                      /* cor-base das superfícies (RGB), usada como rgb(var(--b) / .5) */
  --tinta: 22 26 32;                     /* cor-base de trilhos e linhas finas (RGB), usada como rgb(var(--tinta) / .1) */
  --pastel: 100%; --clarear: 0%;         /* fundos pastéis e textos escuros coloridos dos módulos se ajustam sozinhos no modo escuro */
  --glass: rgba(250, 251, 252, .2);      /* janelas grandes (menu, área de conteúdo) */
  --glass-b: rgba(255, 255, 255, .55);   /* borda do vidro */
  --surface: rgba(255, 255, 255, .5);    /* cartões */
  --surface-2: rgba(255, 255, 255, .38); /* campos, faixas internas */
  --pop: rgba(250, 251, 253, .95);       /* janelas sobrepostas (modal, sino) */
  --line: rgba(28, 36, 48, .13);
  --sh: 0 1px 1px rgba(15, 22, 32, .04), 0 8px 24px rgba(15, 22, 32, .08);
  --sh-g: 0 30px 80px rgba(12, 18, 28, .2), inset 0 1px 0 rgba(255, 255, 255, .5);
  /* Texto */
  --ink: #15181d; --texto: #15181d; --texto-2: #39404a; --texto-3: #59616c; --muted: #59616c;
  /* Destaque (botão principal, aba ativa) = grafite */
  --accent: #1c2128; --accent-ink: #ffffff; --accent-soft: rgba(28, 33, 40, .08);
  /* Cor da marca (única cor de destaque) e tons neutros para ícones/selos */
  --marca: #2a63a6; --marca-2: #1f4e86; --marca-ink: #ffffff;
  --neutro: #4b5461; --neutro-2: #2f353e; --neutro-ink: #ffffff;
  --hl1: #3170b6; --hl2: #23548f;        /* cartão em destaque e botão "verde" = degradê da marca */
  /* Cores com propósito */
  --preto: #1c2128;
  --azul: var(--marca); --azul-2: #4a80c2; --turquesa: var(--marca);
  --st-assumida: #7a4fd0; /* Rodada 21, item 18: OS Assumida = violeta (bem diferente do azul de Em Andamento) */
  --verde: var(--marca); --amarelo: #c98f1c; --laranja: #5b6470; --vermelho: #c8402a; --roxo: #5b6470; --rosa: #5b6470;
  --signal: #c8402a; --ok: #2c7a59; --warn: #9a5c08;
  /* Compatibilidade com nomes antigos */
  --vidro: var(--surface); --vidro-forte: rgba(255, 255, 255, .58); --vidro-card: rgba(255, 255, 255, .52);
  --vidro-escuro: var(--glass); --borda: var(--glass-b); --borda-forte: rgba(255, 255, 255, .7);
  --sombra: var(--sh); --sombra-p: 0 4px 12px rgba(15, 22, 32, .1);
  --texto-claro: var(--ink);
  /* Medidas (escala densa, item 31) */
  --raio: 18px; --raio-m: 14px; --raio-p: 10px;
  --menu: 250px;
  --fonte: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --anim: cubic-bezier(.2, .8, .2, 1);
  /* Rodada 16, item 7 — "Quadro do Turno": títulos/números em Archivo semicondensada, painéis planos com linha fina */
  --disp: "Archivo", "Plus Jakarta Sans", system-ui, sans-serif;
  --q-fundo: rgb(var(--b) / .38);        /* painel (sem sombra, sem desfoque) */
  --q-hair: rgb(var(--tinta) / .09);     /* linha fina entre itens e borda do painel */
  --q-tick: rgb(var(--tinta) / .2);      /* risco de prioridade/etapa neutro */
  --q-raio: 20px;
  --q-btn: var(--hl1);                   /* botão de confirmação (Aprovar, Salvar em destaque) = azul da marca */
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #0c0f13;
  --cena1: #1a1f27; --cena2: #262c36; --cena3: #141920; --cena4: #050709; --cena5: #1c2534; --sky: rgba(0, 0, 0, .55);
  --b: 46 52 62; --tinta: 236 239 243; --pastel: 20%; --clarear: 55%;
  --glass: rgba(18, 21, 26, .5); --glass-b: rgba(255, 255, 255, .11);
  --surface: rgba(38, 43, 52, .64); --surface-2: rgba(48, 54, 64, .56); --pop: rgba(24, 27, 33, .97);
  --line: rgba(255, 255, 255, .1);
  --sh: 0 1px 1px rgba(0, 0, 0, .2), 0 10px 30px rgba(0, 0, 0, .3);
  --sh-g: 0 30px 80px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
  --ink: #eceff3; --texto: #eceff3; --texto-2: #c8cdd5; --texto-3: #a3abb6; --muted: #a3abb6;
  --accent: #e4e8ed; --accent-ink: #121418; --accent-soft: rgba(255, 255, 255, .1);
  --marca: #6fa3e6; --marca-2: #4f86cc; --marca-ink: #0d1520;
  --neutro: #8c96a3; --neutro-2: #5d6673; --neutro-ink: #0f1216;
  --hl1: #3f78c0; --hl2: #2c5d9c;
  --preto: #101317;
  --azul-2: #8cb8ee;
  --st-assumida: #b89cf6;
  --amarelo: #e2ac48; --laranja: #a3acb8; --vermelho: #ff6b52; --roxo: #a3acb8; --rosa: #a3acb8;
  --signal: #ff6b52; --ok: #5cbf92; --warn: #eab35c;
  --vidro-forte: rgba(42, 48, 58, .64); --vidro-card: rgba(38, 43, 52, .62); --borda-forte: rgba(255, 255, 255, .18);
  --sombra-p: 0 4px 12px rgba(0, 0, 0, .25);
  --q-fundo: rgb(28 32 39 / .55);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
/* Páginas sem o cenário (ex.: Portal do Cliente) ainda recebem o degradê do gerador */
html:not(:has(.cena)) { background: radial-gradient(120% 90% at 85% 0%, var(--cena1) 0%, transparent 55%), linear-gradient(160deg, var(--cena2) 0%, var(--cena3) 55%, var(--cena4) 100%) fixed, var(--bg); min-height: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--fonte); color: var(--texto); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; background: transparent;
}

/* ---------- Cenário de fundo (fica fora do #raiz: não é redesenhado a cada tela) ---------- */
.cena { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 85% 0%, var(--cena1) 0%, transparent 55%), linear-gradient(160deg, var(--cena2) 0%, var(--cena3) 55%, var(--cena4) 100%); }
.cena i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; }
.cena .b1 { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: var(--cena1); }
.cena .b2 { width: 40vw; height: 40vw; right: -8vw; top: 18vh; background: var(--cena2); }
.cena .b3 { width: 36vw; height: 36vw; left: 22vw; bottom: -16vw; background: var(--cena5); opacity: .5; }
.cena .b4 { width: 28vw; height: 28vw; right: 18vw; bottom: -6vw; background: var(--cena3); }
.cena .sky { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34vh; fill: var(--sky); filter: blur(2px); }
@media (prefers-reduced-motion: no-preference) and (min-width: 821px) {
  .cena .b1 { animation: flutuar 26s ease-in-out infinite alternate; }
  .cena .b2 { animation: flutuar 32s ease-in-out infinite alternate-reverse; }
  .cena .b3 { animation: flutuar 38s ease-in-out infinite alternate; }
  @keyframes flutuar { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 4vh) scale(1.12); } }
}

a { color: var(--texto); text-decoration: none; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: 22px; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }
.muted { color: var(--texto-2); }
.fraco { color: var(--texto-3); font-size: 12.5px; }
.oculto { display: none !important; }
.txt-verde { color: var(--ok); } .txt-vermelho { color: var(--vermelho); }

/* ---------- Vidro (cartões) ---------- */
/* Só as janelas grandes usam desfoque (backdrop-filter); os cartões são translúcidos, sem desfoque: bem mais leve. */
.vidro { background: var(--surface); border: 1px solid var(--glass-b); border-radius: var(--raio); box-shadow: var(--sh); }
.vidro.claro { background: var(--vidro-forte); }
.painel { padding: 14px 16px; min-width: 0; }
.painel > h2, .painel-topo { margin-bottom: 10px; }
.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ---------- Estrutura ---------- */
.app { display: flex; min-height: 100vh; }
.menu {
  position: fixed; inset: 14px auto 14px 14px; width: var(--menu); padding: 16px 12px; z-index: 30;
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto; color: var(--texto); scrollbar-width: none;
  background: var(--glass); border: 1px solid var(--glass-b); border-radius: 26px; box-shadow: var(--sh-g);
  -webkit-backdrop-filter: blur(34px) saturate(1.15); backdrop-filter: blur(34px) saturate(1.15);
}
.menu::-webkit-scrollbar { display: none; }
.menu .logo { padding: 2px 10px 14px; }
.menu .logo img { width: 140px; }
.logo-l { display: block; } .logo-d { display: none !important; }
:root[data-tema="escuro"] .logo-l { display: none !important; } :root[data-tema="escuro"] .logo-d { display: block !important; }
.menu .secao { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); font-weight: 700; margin: 10px 12px 6px; }
.menu a.item {
  display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 999px; color: var(--texto-2);
  font-weight: 600; font-size: 13.5px; line-height: 1.2; transition: background .15s, color .15s;
}
.menu a.item:hover { background: var(--surface); color: var(--texto); }
.menu a.item.ativo { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.menu a.item.ativo .ic { color: var(--accent-ink); }
.menu a.item .ic { width: 18px; height: 18px; flex: none; }
.menu a.item .cont {
  margin-left: auto; font-size: 11px; min-width: 20px; height: 19px; padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; background: var(--surface); color: var(--texto); font-weight: 700;
}
.menu a.item .cont.alerta { background: var(--vermelho); color: #fff; }
.menu .rodape { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.menu .rodape a { color: var(--texto-2); display: grid; place-items: center; }
.menu .rodape { padding: 10px 0 0; }
.menu .rodape .fraco { color: var(--texto-2); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden;
  background: linear-gradient(150deg, var(--neutro), var(--neutro-2)); color: var(--neutro-ink); font-weight: 700; font-size: 12.5px; line-height: 1;
  box-shadow: 0 0 0 2px var(--glass-b);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.p { width: 26px; height: 26px; font-size: 10.5px; }
.avatar.g { width: 76px; height: 76px; font-size: 26px; box-shadow: 0 0 0 4px var(--glass-b), var(--sombra-p); }

/* Área de conteúdo = janela de vidro principal (como a do gerador) */
.conteudo {
  flex: 1; min-width: 0; margin: 14px 14px 14px calc(var(--menu) + 28px); padding: 12px 18px 32px;
  background: var(--glass); border: 1px solid var(--glass-b); border-radius: 28px; box-shadow: var(--sh-g);
  -webkit-backdrop-filter: blur(34px) saturate(1.15); backdrop-filter: blur(34px) saturate(1.15);
  min-height: calc(100vh - 28px);
}

/* Barra superior em pílula: busca global, Nova OS, tema, sino */
.barra-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 6px 6px 8px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--glass-b); box-shadow: var(--sh); }
.barra-topo .busca { max-width: 400px; }
.barra-topo .busca input { background: var(--surface); }
.barra-topo .espaco { flex: 1; }
.sino, .tema-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0;
  background: var(--surface); border: 1px solid var(--glass-b); color: var(--texto); transition: transform .15s var(--anim); }
.sino:hover, .tema-btn:hover { transform: translateY(-1px); }
.sino .ic, .tema-btn .ic { width: 18px; height: 18px; display: block; }
.tema-btn { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tema-btn .lua { display: none; }
:root[data-tema="escuro"] .tema-btn .sol { display: none; } :root[data-tema="escuro"] .tema-btn .lua { display: block; }
.sino .bolinha { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  background: var(--vermelho); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 0 0 2px var(--glass-b); }
.notificacoes { position: absolute; right: 0; top: 46px; width: 370px; max-width: calc(100vw - 24px); max-height: 70vh; overflow: auto;
  z-index: 80; padding: 8px; background: var(--pop); border-radius: 18px;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 18px 44px rgba(10, 14, 20, .28); animation: surge .18s var(--anim); }
.notificacoes .item-n { display: flex; gap: 10px; padding: 8px; border-radius: 12px; cursor: pointer; align-items: flex-start; }
.notificacoes .item-n:hover { background: var(--accent-soft); }
.notificacoes .item-n.novo { background: color-mix(in srgb, var(--verde) 10%, transparent); }
.notificacoes .item-n b { font-size: 13px; font-weight: 600; display: block; }
.topo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.topo .titulo { flex: 1; min-width: 200px; }
.topo .titulo h1 { color: var(--texto); font-size: 24px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.topo .titulo p { margin: 3px 0 0; color: var(--texto-2); font-size: 13px; }
.barra-baixo { display: none; }

/* ---------- Botões (só texto; texto centralizado na vertical e na horizontal) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; vertical-align: middle;
  min-height: 34px; padding: 6px 14px; line-height: 1.2; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--glass-b); background: rgb(var(--b) / .72); color: var(--texto); font-weight: 600; font-size: 13px;
  white-space: nowrap; max-width: 100%; min-width: 0; box-shadow: none;
  transition: transform .12s var(--anim), box-shadow .15s, background .15s, border-color .15s, filter .15s;
}
.btn:hover { border-color: color-mix(in srgb, var(--texto) 30%, transparent); background: rgb(var(--b) / .9); }
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primario, .btn.escuro { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px rgba(0, 0, 0, .16); }
.btn.primario:hover, .btn.escuro:hover { background: var(--accent); filter: brightness(1.15); }
.btn.verde { background: linear-gradient(135deg, var(--hl1), var(--hl2)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--marca) 28%, transparent); }
.btn.azul { background: var(--marca); border-color: var(--marca); color: var(--marca-ink); }
.btn.roxo { background: var(--neutro); border-color: var(--neutro); color: var(--neutro-ink); }
.btn.verde:hover, .btn.azul:hover, .btn.roxo:hover { filter: brightness(1.08); }
.btn.vermelho { background: color-mix(in srgb, var(--vermelho) 13%, rgb(var(--b) / .6)); border-color: color-mix(in srgb, var(--vermelho) 30%, transparent); color: var(--vermelho); }
.btn.amarelo { background: color-mix(in srgb, var(--amarelo) 18%, rgb(var(--b) / .6)); border-color: color-mix(in srgb, var(--amarelo) 35%, transparent); color: var(--warn); }
.btn.fantasma { background: transparent; border-color: var(--glass-b); color: var(--texto); }
.btn.p { min-height: 28px; padding: 4px 11px; font-size: 12px; }
.btn.g { min-height: 42px; padding: 10px 18px; font-size: 14px; width: 100%; }
/* Itens 4 e 9: nenhum ícone/símbolo dentro de botão de texto */
.btn:not(.btn-ic) > svg, .btn:not(.btn-ic) > .ic, .chip > svg, .aba > svg, .abas .aba .ic { display: none !important; }
/* Botão só de ícone (setas do mês, + e − do estoque, telefone): ícone perfeitamente centralizado */
.btn.btn-ic { width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; flex: none; gap: 0; line-height: 1; }
.btn.btn-ic.p { width: 28px; height: 28px; }
.btn.btn-ic > .ic, .btn.btn-ic > svg { width: 16px; height: 16px; display: block; margin: 0; }
.btn.btn-ic.p > .ic, .btn.btn-ic.p > svg { width: 14px; height: 14px; }
.btn.btn-ic:not(:has(svg)) { font-size: 18px; padding-bottom: 2px; }
/* Item 33: nada estoura a borda do cartão. Botões dentro de cartões quebram linha quando falta espaço. */
.vidro .btn:not(.btn-ic), .painel .btn:not(.btn-ic), .modal .btn:not(.btn-ic) { white-space: normal; }
.acoes, .botoes, .card-os .pe { flex-wrap: wrap; }

/* ---------- Campos (item 14: formulário nivelado) ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; min-width: 0; }
.campo > label, .campo > .rotulo { font-size: 12px; color: var(--texto-2); font-weight: 600; line-height: 16px; min-height: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input[type=text], input[type=password], input[type=date], input[type=search], input[type=tel], input[type=email], input[type=number], input[type=month], input[type=time], input[type=url], input[type=datetime-local], select, textarea {
  width: 100%; min-width: 0; background: var(--surface-2); border: 1px solid var(--glass-b); border-radius: 12px; color: var(--texto);
  padding: 7px 11px; font-size: 13.5px; line-height: 1.35; outline: none; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .03);
  transition: border .15s, box-shadow .15s, background .15s;
}
input[type=text], input[type=password], input[type=date], input[type=search], input[type=tel], input[type=email], input[type=number], input[type=month], input[type=time], input[type=url], input[type=datetime-local], select { height: 36px; }
input::placeholder, textarea::placeholder { color: var(--texto-3); opacity: .85; }
input:focus, select:focus, textarea:focus { background: var(--surface); border-color: color-mix(in srgb, var(--marca) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 20%, transparent); }
select option { background: var(--pop); color: var(--texto); }
/* Rodada 6, item 36: textareas sem puxador, altura fixa = o dobro da antiga (base 80 px → 160 px), rolagem interna */
textarea { resize: none !important; overflow-y: auto; --ta-base: 80px; height: calc(var(--ta-base) * 2); min-height: 0; }
.ctt-campo textarea, .rh-campos textarea { --ta-base: 52px; }
.compositor textarea { --ta-base: 64px; }
textarea[rows="4"] { --ta-base: 90px; } textarea[rows="5"] { --ta-base: 108px; } textarea[rows="6"] { --ta-base: 126px; }
textarea[rows="7"] { --ta-base: 144px; } textarea[rows="8"] { --ta-base: 162px; }
.linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; align-items: start; }
.linha-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; align-items: start; }
.linha > *, .linha-3 > * { min-width: 0; }
.check { display: flex; align-items: center; gap: 9px; cursor: pointer; margin-bottom: 12px; font-size: 13.5px; }
.check input { width: 17px; height: 17px; accent-color: var(--verde); flex: none; margin: 0; }
.busca { position: relative; flex: 1; min-width: 180px; max-width: 380px; }
.busca input { padding-left: 36px; border-radius: 999px; }
.busca .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-2); pointer-events: none; }

/* ---------- Abas e chips (pílulas, como as abas do gerador) ---------- */
.abas { display: flex; align-items: center; gap: 2px; overflow-x: auto; padding: 3px; margin-bottom: 14px; scrollbar-width: none; border-radius: 999px;
  width: fit-content; max-width: 100%; background: var(--surface); border: 1px solid var(--glass-b); box-shadow: none; }
.abas::-webkit-scrollbar { display: none; }
.aba {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 5px 13px; line-height: 1.2;
  border-radius: 999px; color: var(--texto-2); cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 12.5px; border: 0; background: none;
  transition: background .15s, color .15s;
}
.aba:hover { color: var(--texto); background: var(--surface-2); }
.aba.ativa { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.aba .n { font-size: 10.5px; min-width: 18px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.aba.ativa .n { background: color-mix(in srgb, var(--accent-ink) 22%, transparent); }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 4px 11px; line-height: 1.2;
  border-radius: 999px; border: 1px solid var(--glass-b); background: var(--surface-2); cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--texto-2); transition: background .15s, color .15s; }
.chip:hover { background: var(--surface); color: var(--texto); }
.chip.ativo { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.ativo.material { background: var(--amarelo); border-color: var(--amarelo); color: #fff; }

/* ---------- KPIs (como os "tiles" do gerador; o primeiro em destaque verde) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); position: relative; overflow: hidden; min-width: 0;
  transition: transform .15s var(--anim), box-shadow .15s; }
.kpi[data-ir] { cursor: pointer; }
.kpi[data-ir]:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(12, 18, 28, .18); }
.kpi::after, .kpi::before { content: none !important; display: none !important; }
.kpi .rot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-2); font-weight: 600; line-height: 1.25; }
.kpi .rot .ic { width: 28px; height: 28px; padding: 6px; border-radius: 50%; flex: none; display: block;
  background: rgb(var(--tinta) / .07); color: var(--texto-2); box-shadow: none; }
/* Item 20: ícones dos indicadores em tom neutro; só o de alerta (vermelho) fica colorido */
.kpi.vermelho .rot .ic { background: color-mix(in srgb, var(--cor-kpi) 15%, rgb(var(--b) / .5)); color: var(--cor-kpi); }
.kpi .val { font-size: 23px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 11.5px; color: var(--texto-3); }
.kpi.verde { --cor-kpi: var(--verde); } .kpi.amarelo { --cor-kpi: var(--amarelo); } .kpi.vermelho { --cor-kpi: var(--vermelho); }
.kpi.roxo { --cor-kpi: var(--roxo); } .kpi.turquesa { --cor-kpi: var(--turquesa); } .kpi.rosa { --cor-kpi: var(--rosa); } .kpi.laranja { --cor-kpi: var(--laranja); }
.kpis > .kpi:first-child { background: linear-gradient(150deg, var(--hl1), var(--hl2)); border-color: rgba(255, 255, 255, .35); color: #fff; box-shadow: 0 14px 30px color-mix(in srgb, var(--marca) 26%, transparent); }
.kpis > .kpi:first-child .rot, .kpis > .kpi:first-child .val, .kpis > .kpi:first-child .sub, .kpis > .kpi:first-child .sub * { color: #fff !important; }
.kpis > .kpi:first-child .rot .ic { background: rgba(255, 255, 255, .22); color: #fff; }
.kpis > .kpi:first-child .sub [class] { background: rgba(255, 255, 255, .22) !important; border-color: transparent !important; }
.kpis > .kpi:first-child .sub svg, .kpis > .kpi:first-child .sub .ic { background: rgba(255, 255, 255, .25) !important; color: #fff !important; stroke: #fff; }
.kpis > .kpi.esqueleto:first-child { background: none; box-shadow: none; }

/* ---------- Cards de OS ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.card-os { overflow: hidden; display: flex; flex-direction: column; cursor: pointer; background: var(--surface); padding: 6px; min-width: 0;
  border-radius: var(--raio); transition: transform .18s var(--anim), box-shadow .18s; }
.card-os:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(12, 18, 28, .2); }
.card-os .capa { position: relative; height: 128px; border-radius: 13px; overflow: hidden; background: linear-gradient(150deg, var(--cena2), var(--cena3)); }
.card-os .capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--anim); }
.card-os:hover .capa img { transform: scale(1.04); }
.card-os .capa .sem-foto { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .85); }
.card-os .capa .sem-foto .ic { width: 36px; height: 36px; }
.card-os .capa .selos { position: absolute; left: 7px; top: 7px; right: 7px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 6px; }
.card-os .corpo { padding: 9px 6px 6px; display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.card-os .num { font-size: 11.5px; color: var(--texto-3); font-weight: 600; font-family: var(--mono); }
.card-os .tit { font-weight: 700; font-size: 14px; line-height: 1.3; }
.card-os .cli { color: var(--texto-2); font-size: 12.5px; }
.card-os .meta { display: flex; flex-wrap: wrap; gap: 9px; font-size: 11.5px; color: var(--texto-2); margin-top: 2px; }
.card-os .meta span { display: inline-flex; align-items: center; gap: 4px; }
.card-os .meta .ic { width: 13px; height: 13px; color: var(--texto-2); }
.card-os .pe { display: flex; gap: 6px; padding: 3px; }
.card-os .pe .btn { flex: 1 1 auto; }
.selo {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; line-height: 1.2;
  border-radius: 999px; background: rgb(var(--b) / .92); color: var(--texto-2); white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* Item 20: selos neutros; cor só em alerta (urgente, ajuste) e no andamento (cor da marca) */
.selo.urgente { color: var(--vermelho); } .selo.normal { color: var(--texto-2); } .selo.baixa { color: var(--texto-3); } .selo.tempo_vago { color: var(--texto-2); }
.selo.aberta { color: var(--texto-2); } .selo.assumida { color: var(--st-assumida); } .selo.em_andamento { color: var(--marca); }
.selo.aguardando_aprovacao { color: var(--marca); } .selo.ajuste { color: var(--vermelho); } .selo.aprovada { color: var(--ok); }
.selo.lixeira { color: var(--texto-3); } .selo.validar { color: var(--warn); }
.tag-ok, .tag-alerta, .tag-erro, .tag-info { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; padding: 2px 8px; line-height: 1.3; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.tag-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.tag-alerta { background: color-mix(in srgb, var(--amarelo) 22%, transparent); color: var(--warn); }
.tag-erro { background: color-mix(in srgb, var(--vermelho) 15%, transparent); color: var(--vermelho); }
.tag-info { background: rgb(var(--tinta) / .08); color: var(--texto-2); }

/* ---------- Detalhe da OS ---------- */
.detalhe { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.cab-os { padding: 16px 18px; margin-bottom: 14px; background: var(--surface); }
.cab-os .selos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.cab-os h1 { font-size: 21px; margin-bottom: 4px; }
.cab-os .desc { white-space: pre-wrap; margin-top: 12px; }
.acoes { display: flex; gap: 6px; margin-top: 12px; }
.info-lista { display: flex; flex-direction: column; gap: 10px; }
.info-lista .i { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.info-lista .i .ic { width: 17px; height: 17px; color: var(--texto); margin-top: 1px; flex: none; }
.info-lista .i small { display: block; color: var(--texto-2); font-size: 11.5px; font-weight: 600; }
.linha-tempo { position: relative; padding-left: 22px; }
.linha-tempo::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--verde), transparent); }
.ev { position: relative; margin-bottom: 13px; }
.ev::before { content: ""; position: absolute; left: -20px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: rgb(var(--b)); border: 3px solid var(--verde); box-sizing: border-box; }
.ev.sistema::before { border-color: var(--texto-3); }
.ev.alerta::before { border-color: var(--vermelho); }
.ev.ok::before { border-color: var(--ok); }
.ev .cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; font-size: 12.5px; }
.ev .cab b { font-weight: 700; }
.ev .cab .quando { color: var(--texto-3); font-size: 11.5px; }
.ev .acao { color: var(--texto-2); }
.ev .bolha { margin-top: 5px; padding: 8px 12px; border-radius: 14px; background: rgb(var(--b) / .6); border: 1px solid var(--glass-b); white-space: pre-wrap; word-wrap: break-word; }
.ev .bolha.admin { background: color-mix(in srgb, var(--verde) 12%, rgb(var(--b) / .6)); border-color: color-mix(in srgb, var(--verde) 25%, transparent); }
.ev .bolha.material { background: color-mix(in srgb, var(--amarelo) 15%, rgb(var(--b) / .6)); border-color: color-mix(in srgb, var(--amarelo) 30%, transparent); }
.ev .bolha.alerta { background: color-mix(in srgb, var(--vermelho) 12%, rgb(var(--b) / .6)); border-color: color-mix(in srgb, var(--vermelho) 28%, transparent); }
.ev .geo { font-size: 11.5px; margin-top: 4px; display: inline-flex; gap: 4px; align-items: center; }
.ev .geo .ic { width: 13px; height: 13px; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; margin-top: 7px; }
.galeria a, .galeria .vid { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface-2); display: block; box-shadow: var(--sombra-p); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.galeria a:hover img { transform: scale(1.05); }
.galeria .vid .ic { position: absolute; inset: 0; margin: auto; width: 32px; height: 32px; color: #fff; }
.galeria .pdf { display: grid; place-items: center; font-size: 11.5px; color: var(--texto-2); text-align: center; padding: 6px; }
.compositor { padding: 12px; position: sticky; bottom: 10px; margin-top: 10px; background: var(--pop); }
.compositor textarea { margin-bottom: 8px; }
.compositor .barra { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.compositor .tipos { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.previas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.previas .pv { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; position: relative; background: var(--surface-2); display: grid; place-items: center; font-size: 11px; color: var(--texto-2); }
.previas .pv img { width: 100%; height: 100%; object-fit: cover; }
.previas .pv button .ic { width: 12px; height: 12px; }
.previas .pv button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; display: grid; place-items: center; padding: 0; }

/* ---------- Tabelas e listas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); font-weight: 700; padding: 7px 9px; border-bottom: 1px solid var(--line); background: transparent; }
.tabela td { padding: 8px 9px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tbody tr { transition: background .12s; }
.tabela tbody tr:hover td { background: var(--surface-2); }
.lista-simples { display: flex; flex-direction: column; }
.lista-simples .li { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 12px; transition: background .12s; color: inherit; min-width: 0; }
.lista-simples .li:hover { background: var(--surface-2); }
.lista-simples .li:last-child { border-bottom: 0; }
.lista-simples .li .txt { flex: 1; min-width: 0; }
.lista-simples .li .txt b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vazio { padding: 28px 16px; text-align: center; color: var(--texto-2); }
.vazio .ic { width: 38px; height: 38px; margin: 0 auto 8px; opacity: .7; display: block; }
.alerta-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgb(var(--tinta) / .07); color: var(--texto-2); }
.alerta-ic .ic { width: 16px; height: 16px; display: block; }
.alerta-ic.alto { background: color-mix(in srgb, var(--vermelho) 15%, rgb(var(--b) / .5)); color: var(--vermelho); }
.alerta-ic.medio { background: color-mix(in srgb, var(--amarelo) 20%, rgb(var(--b) / .5)); color: var(--warn); }

/* ---------- Gráficos ---------- */
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.grid-meia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.barras { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding-top: 16px; }
.barras .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.barras .b .col { width: 100%; max-width: 40px; border-radius: 99px; min-height: 4px; background: linear-gradient(180deg, var(--hl1), var(--hl2));
  transform-origin: bottom; animation: cresce .55s var(--anim) both; }
.barras .b:last-child .col { background: var(--accent); }
.barras .b .v { font-size: 11.5px; color: var(--texto); font-weight: 700; }
.barras .b .r { font-size: 11px; color: var(--texto-2); }
@keyframes cresce { from { transform: scaleY(0); } }
.medidor { display: grid; place-items: center; padding: 8px 0; }
.medidor svg { width: 150px; height: 150px; }
.medidor .legenda { text-align: center; margin-top: 6px; color: var(--texto-2); font-size: 12.5px; }
.barra-h { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12.5px; }
.barra-h .nome { width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h .trilho { flex: 1; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--texto) 9%, transparent); overflow: hidden; }
.barra-h .trilho i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hl1), var(--hl2)); animation: enche .6s var(--anim) both; transform-origin: left; }
.barra-h .v { width: 34px; text-align: right; color: var(--texto); font-weight: 700; }
@keyframes enche { from { transform: scaleX(0); } }
.dica { position: fixed; z-index: 300; pointer-events: none; background: var(--accent); color: var(--accent-ink); padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.graf-eixo { fill: var(--texto-2); font-size: 11px; font-family: var(--fonte); }
.graf-valor { fill: var(--texto); font-size: 11.5px; font-weight: 700; font-family: var(--fonte); }
.graf-grade { stroke: var(--line); stroke-dasharray: 3 5; }
.graf-centro { fill: var(--texto); font-weight: 800; font-family: var(--fonte); }
.graf-ponto { fill: rgb(var(--b)); }

/* ---------- Modal, avisos e carregamento ---------- */
.fundo-modal { position: fixed; inset: 0; z-index: 100; background: rgba(10, 14, 20, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: aparece .15s; }
.modal { width: 100%; max-width: 460px; max-height: 92vh; overflow: auto; padding: 20px; background: var(--pop); border-radius: 20px;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 16px 48px rgba(0, 0, 0, .35); animation: surge .2s var(--anim); }
.modal.largo { max-width: 740px; }
.modal h2 { margin-bottom: 8px; font-size: 17px; }
.modal p { color: var(--texto-2); margin: 0 0 12px; }
.modal .botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.aviso { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 200; padding: 10px 18px; border-radius: 18px; width: max-content;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 14px 34px rgba(0, 0, 0, .3); font-weight: 600; max-width: calc(100vw - 32px); text-align: center; animation: sobe .2s var(--anim); }
.aviso.erro { background: var(--vermelho); color: #fff; }
.aviso.ok { background: var(--accent); }
@keyframes sobe { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes surge { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } }
@keyframes sobeSuave { from { opacity: 0; transform: translateY(6px); } }
/* Entrada da tela: curta e sem atraso em cascata (navegação mais rápida, item 6) */
.conteudo > :not(.barra-topo) { animation: sobeSuave .2s var(--anim) both; }
.grade > * { animation: sobeSuave .22s var(--anim) both; }
.carregando { display: grid; place-items: center; padding: 40px; }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--texto); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.esqueleto { background: linear-gradient(90deg, rgb(var(--b) / .22) 25%, rgb(var(--b) / .5) 50%, rgb(var(--b) / .22) 75%) !important; background-size: 200% 100% !important;
  animation: brilho 1.1s infinite; border-radius: var(--raio); border: 1px solid var(--glass-b); box-shadow: none !important; }
@keyframes brilho { to { background-position: -200% 0; } }
/* Esqueleto da tela (mostrado na hora, enquanto os dados chegam). Dentro de um painel, carregando() vira só o giro. */
.carregando.tela .esqueleto { display: none; }
.conteudo > .carregando.tela { display: block; padding: 0; animation: none !important; }
.conteudo > .carregando.tela .spin { display: none; }
.conteudo > .carregando.tela .esqueleto { display: block; }
.conteudo > .carregando.tela .esq-tit { height: 30px; width: min(320px, 60%); margin: 4px 0 16px; border-radius: 999px; }
.conteudo > .carregando.tela .esq-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.conteudo > .carregando.tela .esq-kpis i { height: 82px; }
.conteudo > .carregando.tela .esq-corpo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.conteudo > .carregando.tela .esq-corpo i { height: 300px; }
.conteudo > .topo + .carregando.tela .esq-tit { display: none; }

/* ---------- Login ---------- */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.caixa-login { width: 100%; max-width: 390px; padding: 28px 24px; background: var(--glass); border-radius: 26px; box-shadow: var(--sh-g);
  -webkit-backdrop-filter: blur(34px) saturate(1.15); backdrop-filter: blur(34px) saturate(1.15); }
.caixa-login .logo { width: 190px; margin: 0 auto 8px; }
.caixa-login .sub { text-align: center; color: var(--texto-2); margin-bottom: 20px; font-size: 13.5px; font-weight: 600; }

/* ---------- Visualizador ---------- */
.visualizador { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, .9); display: grid; place-items: center; animation: aparece .15s; }
.visualizador img, .visualizador video { max-width: 96vw; max-height: 86vh; border-radius: 12px; }
.visualizador .fechar { position: absolute; top: 14px; right: 14px; }

/* ---------- Ponto (cartão) ---------- */
.ponto-cartao h2 { display: flex; align-items: center; gap: 8px; }
.ponto-cartao h2 .ic { width: 18px; height: 18px; color: var(--texto-2); }
.ponto-linha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ponto-marca { padding: 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--glass-b); text-align: center; }
.ponto-marca small { display: block; color: var(--texto-2); font-size: 11px; font-weight: 600; }
.ponto-marca b { font-size: 17px; color: var(--texto-3); }
.ponto-marca.feito { background: color-mix(in srgb, var(--ok) 13%, transparent); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.ponto-marca.feito b { color: var(--ok); }
.ponto-marca.proximo { border-color: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent); }
input[type=file] { font-size: 12.5px; color: var(--texto-2); max-width: 100%; }
input[type=file]::file-selector-button { min-height: 34px; padding: 6px 14px; margin-right: 10px; border-radius: 999px; border: 1px solid var(--glass-b); background: rgb(var(--b) / .7); color: var(--texto); font: inherit; font-weight: 700; cursor: pointer; }

/* ---------- Celular ---------- */
@media (max-width: 1100px) { .detalhe, .grid-2, .grid-meia, .grid-3 { grid-template-columns: minmax(0, 1fr); } .conteudo > .carregando.tela .esq-corpo { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .menu { display: none; }
  .conteudo { margin: 8px 8px 0; padding: 10px 10px 96px; border-radius: 22px; min-height: calc(100vh - 8px);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
  .barra-topo { margin-bottom: 10px; }
  .barra-topo .busca { display: none; }
  h1, .topo .titulo h1 { font-size: 20px; }
  .grade { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .card-os { flex-direction: row; padding: 5px; }
  .card-os .capa { width: 100px; height: auto; min-height: 108px; flex: none; }
  .card-os .capa .selos { flex-direction: column; left: 5px; top: 5px; right: auto; }
  .card-os .capa .selos .selo:last-child { display: none; }
  .card-os .capa .selos .selo { font-size: 10.5px; padding: 3px 7px; gap: 4px; }
  .card-os .corpo { padding: 5px 8px; }
  .card-os .pe { display: none; }
  .card-os .status-movel { display: inline-flex; align-self: flex-start; }
  .kpis, .conteudo > .carregando.tela .esq-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 11px; }
  .kpi .val { font-size: 20px; }
  .linha, .linha-3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .busca { max-width: none; }
  .barra-baixo { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 40; padding: 5px; justify-content: space-around; border-radius: 999px;
    background: var(--pop); border: 1px solid var(--glass-b); box-shadow: 0 12px 30px rgba(10, 14, 20, .25);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
  .barra-baixo a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; border-radius: 999px; font-size: 10.5px; color: var(--texto-2); font-weight: 600; position: relative; line-height: 1.1; }
  .barra-baixo a .ic { width: 20px; height: 20px; }
  .barra-baixo a.ativo { color: var(--accent-ink); background: var(--accent); }
  .barra-baixo a .cont { position: absolute; top: 1px; right: calc(50% - 22px); min-width: 16px; height: 16px; border-radius: 8px; font-size: 9.5px; background: var(--vermelho); color: #fff; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 4px; }
  .compositor { position: static; }
  .compositor .barra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .compositor .tipos { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .compositor .tipos .chip, .compositor .barra > .btn { width: 100%; min-height: 40px; white-space: nowrap; }
  .aviso { bottom: 92px; }
  .esconde-movel { display: none !important; }
  .ponto-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abas { width: 100%; }
  /* Rodada 4, item 2: o painel ocupa exatamente a largura da barra superior (= largura dos cartões) e é opaco,
     para nenhum cartão de trás aparecer pelas laterais ou através dele (claro e escuro) */
  .barra-topo { position: relative; }
  .notificacoes { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
  .barra-topo > .notificacoes { position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); width: auto; max-width: none;
    background: linear-gradient(var(--pop), var(--pop)), rgb(var(--b)); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 18px 44px rgba(10, 14, 20, .28); }
}
@media (min-width: 821px) { .so-movel, .card-os .status-movel { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.barra-svg { transform-origin: bottom; transform-box: fill-box; animation: cresce .55s var(--anim) both; }
.graf-linha .traco { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: desenha 1.1s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@media (hover: hover) { .fatia:hover { stroke-width: 26; } }
.fatia.dica-sel { stroke-width: 27; }
/* Impressão (relatórios, contratos): sempre papel branco, texto escuro, sem cenário — mesmo no modo escuro */
@media print {
  .cena { display: none !important; }
  html, :root[data-tema="escuro"] { background: #fff; color-scheme: light;
    --b: 255 255 255; --tinta: 22 26 32; --pastel: 100%; --clarear: 0%; --ink: #15181d; --texto: #15181d; --texto-2: #39404a; --texto-3: #59616c;
    --surface: #fff; --surface-2: #fff; --glass: #fff; --pop: #fff; --line: rgba(28, 36, 48, .18); --glass-b: rgba(28, 36, 48, .18);
    --accent: #1c2128; --accent-ink: #fff; }
  .conteudo, .menu, .caixa-login { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
  .conteudo { background: none !important; border: 0 !important; border-radius: 0 !important; min-height: 0 !important; }
}

/* =====================================================================
   Rodada 2 — Agente Visual e Núcleo
   ===================================================================== */
.menu .rodape-nome { flex: 1; min-width: 0; }
.menu .rodape-nome b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .logo .logo-mini { display: none !important; }

/* Item 20: ilustrações das capas (segmentos) mais discretas — fotos reais continuam com a cor original */
/* Ilustrações = arquivos .svg (direto em /img/capas/ ou servidos por /api/.../capa?v=...svg) */
img[src*="/img/capas/"], img[src*=".svg"], img[src*="%2Fcapas%2F"] { filter: saturate(.22) contrast(.96) brightness(1.02); }
:root[data-tema="escuro"] :is(img[src*="/img/capas/"], img[src*=".svg"], img[src*="%2Fcapas%2F"]) { filter: saturate(.2) contrast(.95) brightness(.82); }
.menu .logo img, .caixa-login .logo, .po-logo { filter: none !important; }
.card-os .capa .sem-foto { color: rgb(255 255 255 / .75); }

/* Item 10: cartão de atalho/filtro SELECIONADO sempre legível (claro e escuro): fundo de destaque + texto de destaque.
   Vale para qualquer cartão de atalho que use .ativo/.sel (Clientes, Estoque, Compras, Contratos...). */
.cli-at.ativo, .ctt-tipo.ativo, .kpi.ativo, .atalho.ativo, [data-at].ativo, [data-filtro].ativo:not(.chip):not(.aba) {
  background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink) !important;
  box-shadow: 0 10px 24px rgb(0 0 0 / .18) !important; }
.cli-at.ativo b, .cli-at.ativo small, .kpi.ativo .rot, .kpi.ativo .val, .kpi.ativo .sub, .ctt-tipo.ativo b, .ctt-tipo.ativo span { color: var(--accent-ink) !important; }
.cli-at.ativo .ico, .kpi.ativo .rot .ic { background: color-mix(in srgb, var(--accent-ink) 16%, transparent) !important; color: var(--accent-ink) !important; }
.cli-at.ativo .x { background: var(--accent-ink); color: var(--accent); }

/* Item 3: selos dentro dos cartões de números (ex.: "100% criadas vs ontem", "Precisa de atenção") nunca passam da borda */
.kpi { container-type: inline-size; }
.kpi .sub { min-width: 0; max-width: 100%; }
.kpi .sub > * { max-width: 100%; }
.kpi .variacao { max-width: 100%; white-space: normal; flex-wrap: wrap; row-gap: 0; line-height: 1.25; text-align: left; }
.kpi .variacao small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
@container (max-width: 185px) { .kpi .variacao small { display: none; } }

/* Gráficos de linha: com "reduzir movimento" ligado a animação some, então a linha precisa nascer desenhada (item 7) */
@media (prefers-reduced-motion: reduce) { .graf-linha .traco { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; } }

/* Item 14: menu lateral recolhido — só ícones; o nome aparece ao passar o mouse (core.js). Só no computador. */
.menu-recolher { margin-top: auto; width: 100%; color: var(--texto-2); background: transparent; border-color: var(--line); }
.menu-recolher + .rodape { margin-top: 10px; }
.dica-menu { transform: translateY(-50%); white-space: nowrap; z-index: 320; }
@media (min-width: 821px) {
  .menu, .conteudo { transition: width .2s var(--anim), margin .2s var(--anim), padding .2s var(--anim); }
  :root[data-menu="recolhido"] { --menu: 84px; }
  :root[data-menu="recolhido"] .menu { padding: 16px 10px; align-items: stretch; }
  :root[data-menu="recolhido"] .menu .logo { padding: 2px 0 14px; display: flex; justify-content: center; }
  :root[data-menu="recolhido"] .menu .logo .logo-l, :root[data-menu="recolhido"] .menu .logo .logo-d { display: none !important; }
  :root[data-menu="recolhido"] .menu .logo .logo-mini { display: block !important; width: 40px; height: 40px; border-radius: 12px; }
  :root[data-menu="recolhido"] .menu .secao { visibility: hidden; height: 0; margin: 6px 0; }
  :root[data-menu="recolhido"] .menu a.item { position: relative; justify-content: center; gap: 0; padding: 10px 0; }
  :root[data-menu="recolhido"] .menu a.item .nome { display: none; }
  :root[data-menu="recolhido"] .menu a.item .ic { width: 20px; height: 20px; }
  :root[data-menu="recolhido"] .menu a.item .cont { position: absolute; top: 2px; right: 6px; margin: 0; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; }
  :root[data-menu="recolhido"] .menu-recolher { font-size: 11px; line-height: 1.15; padding: 5px 4px; white-space: normal; }
  :root[data-menu="recolhido"] .menu .rodape { flex-direction: column; padding: 12px 0 0; gap: 10px; }
  :root[data-menu="recolhido"] .menu .rodape-nome { display: none; }
}

/* Rodada 2, item 5: no celular (toque) os alvos ficam maiores para o dedo; o computador mantém a escala densa. */
@media (max-width: 820px) and (pointer: coarse) {
  .btn:not(.btn-ic) { min-height: 40px; }
  .btn.p:not(.btn-ic) { min-height: 40px; font-size: 13px; }
  .btn.btn-ic, .btn.btn-ic.p { width: 40px; height: 40px; }
  .sino, .tema-btn { width: 40px; height: 40px; }
  .chip, .aba { min-height: 40px; }
  .previas .pv { width: 72px; height: 72px; }
  .previas .pv button { width: 36px; height: 36px; top: 0; right: 0; }
  input[type=text], input[type=password], input[type=date], input[type=search], input[type=tel], input[type=email], input[type=number], input[type=month], input[type=time], input[type=url], input[type=datetime-local], select { height: 40px; }
}

/* ---------- Rodada 3 (Agente Técnico) ---------- */
/* Item 13: avisos (toast) no topo da tela, compactos, nunca por cima dos botões nem da barra inferior */
.aviso, .aviso.erro, .aviso.ok { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto !important; padding: 8px 16px; font-size: 13px; border-radius: 999px;
  max-width: min(420px, calc(100vw - 32px)); line-height: 1.3; animation: desce .2s var(--anim); pointer-events: none; }
@keyframes desce { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* Itens 1 e 10: Aviso de Localização — logo e título centralizados, texto justificado com recuo */
.caixa-login .logo { display: block; margin-left: auto; margin-right: auto; }
.aviso-local h2 { text-align: center; margin: 6px 0 14px; }
.aviso-local p:not(.sair-link) { text-align: justify; text-indent: 1.5em; color: var(--texto-2); margin: 0 0 10px; line-height: 1.55; }
.aviso-local p:not(.sair-link):last-of-type { margin-bottom: 18px; }
.aviso-local #concordo { margin-top: 8px; }
/* Links de texto pequenos com área de toque ≥ 40 px */
.sair-link { text-align: center; margin: 10px 0 0; }
.sair-link a, .menu .rodape a[data-sair] { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 40px; padding: 0 14px; }
@media (pointer: coarse) {
  a.link-toque, .link-toque { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; }
}

/* ---------- Rodada 3 (Agente Marca): logo oficial "coRtex — soluções em tecnologia" ---------- */
/* logo-escura.png = preto/cinza (tema claro) · logo-clara.png = branco/cinza (tema escuro) · símbolo de rede para o menu recolhido */
.menu .logo { display: flex; justify-content: center; }
.menu .logo img.logo-l, .menu .logo img.logo-d { width: 176px; max-width: 100%; height: auto; }
.caixa-login .logo { width: 220px; max-width: 80%; height: auto; }
.menu .logo .logo-mini { content: url("/img/simbolo-escuro.png"); }
:root[data-tema="escuro"] .menu .logo .logo-mini { content: url("/img/simbolo-claro.png"); }
@media (min-width: 821px) {
  :root[data-menu="recolhido"] .menu .logo .logo-mini { width: 44px; height: 44px; border-radius: 0; object-fit: contain; }
}

/* QA C */
/* Rodada 5, itens 1 e 2: Portal do Cliente compacto e janela da mensagem (Copiar Link / Enviar Por WhatsApp / Fechar) */
.cli-portal .qc-envio { margin: 0 0 8px; }
.cli-portal .qc-envio .btn { grid-column: auto; }
.cli-portal .qc-bts.tres .cli-portal-revogar { grid-column: 1 / -1; }
.cli-portal .qc-envio .btn, .cli-portal .qc-bts .btn, .qc-msg .qc-msg-bts .btn { padding-block: 4px; padding-inline: 10px; }
.btn.qc-copiado, .btn.primario.qc-copiado { background: var(--verde); border-color: var(--verde); color: #fff; }
.qc-msg .qc-msg-texto { padding: 12px 14px; border-radius: 14px; background: rgb(var(--tinta) / .05); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; color: var(--texto); overflow-wrap: anywhere; word-break: break-word; user-select: all; -webkit-user-select: all; margin-bottom: 14px; }
.qc-msg .qc-msg-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qc-msg .qc-msg-bts .btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; line-height: 1.2; white-space: normal; text-decoration: none; }
.qc-msg .qc-msg-bts [data-fechar] { grid-column: 1 / -1; }

/* QA B */
/* Teste de usabilidade (Hoje, Dashboard, Estoque, Compras, Frota, Ponto, Equipe, barra superior): nada cortado nem escondido no celular */
.df-periodos .chip, .est-chips .chip, .cp-chips .chip, .rh-chips .chip, .seletor-pessoas .chip { white-space: nowrap; }
.dica:not(.dica-menu) { max-width: min(320px, calc(100vw - 16px)); white-space: normal; }
@media (max-width: 820px) {
  /* Abas: preenchem a largura quando cabem (sem sobra vazia na pílula); se não couberem, rolam */
  .abas > .aba { flex: 1 0 auto; }
  /* Abas em grade (telas com 3 a 6 abas): todas visíveis, mesma largura, nada cortado na borda */
  .abas.abas-grade { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 3px; border-radius: 20px; overflow: visible; }
  .abas.abas-grade > .aba { white-space: normal; text-align: center; border-radius: 16px; min-width: 0; }
  /* Linhas de chips: quebram linha em vez de esconder chips fora da tela */
  .chips-quebra { flex-wrap: wrap !important; overflow: visible !important; }
  .chips-quebra > .chip { flex: 0 0 auto; }
  /* Indicadores: rótulo com altura fixa de 2 linhas (os números ficam na mesma altura) e o último ímpar ocupa a linha inteira */
  .kpi .rot { min-height: 30px; }
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Título com 2 ou mais botões: título em cima e os botões juntos numa linha embaixo */
  .topo:has(> :not(.titulo) ~ :not(.titulo)) > .titulo { flex-basis: 100%; }
  .topo:has(> :not(.titulo) ~ :not(.titulo)) > .btn { flex: 1 1 auto; }
  /* "×" de remover foto escolhida: área de toque de 44 px sem aumentar o desenho */
  .previas .pv button::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
}

/* QA C (continuação) */
/* Teste do técnico no celular: rótulos da linha do ponto sem encostar, alvos de toque ≥ 40 px */
.linha-dia { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6px; }
.ld-passo small { line-height: 1.2; overflow-wrap: anywhere; }
.ld-mapa::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
@media (max-width: 820px) and (pointer: coarse) {
  input[type=file] { min-height: 40px; }
  input[type=file]::file-selector-button { min-height: 40px; }
  label.check { min-height: 40px; display: flex; align-items: center; }
  .modal .mat-cab, .modal .mat-linha { grid-template-columns: minmax(0, 1fr) 72px 40px; }
}
/* Coordenador: área de toque do botão de tema no celular */
@media (pointer: coarse) { .tema-btn { min-width: 40px; min-height: 40px; } }

/* =====================================================================
   Rodada 6 — Núcleo (menu, barra de baixo, campos, dicas, Ver Mais)
   ===================================================================== */
/* Item 21: grupos do menu lateral (Comercial, Operações, Administração) que abrem/fecham */
.menu-grupo { display: flex; flex-direction: column; gap: 2px; }
.menu .grupo-cab { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 32px; margin: 8px 0 0; padding: 6px 12px; border: 0; border-radius: 999px;
  background: none; color: var(--texto-3); cursor: pointer; text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
  transition: background .15s, color .15s; }
.menu .grupo-cab:hover, .menu .grupo-cab:focus-visible { background: var(--surface); color: var(--texto); outline: none; }
.menu .grupo-cab > .ic { display: none; width: 18px; height: 18px; flex: none; }
.menu .grupo-cab .nome { flex: 1; min-width: 0; }
.menu .grupo-cab .cont { margin-left: auto; font-size: 11px; min-width: 20px; height: 19px; padding: 0 6px; border-radius: 10px; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; background: var(--surface); color: var(--texto); font-weight: 700; }
.menu .grupo-cab .cont.alerta { background: var(--vermelho); color: #fff; }
.menu-grupo:not(.fechado) > .grupo-cab .cont { display: none; }
.menu-grupo.fechado > .grupo-itens { display: none; }
.menu-grupo.fechado.tem-ativo > .grupo-cab { color: var(--texto); background: var(--accent-soft); }
.grupo-itens { display: flex; flex-direction: column; gap: 2px; }
/* Menu recolhido: cada grupo vira um ícone; ao passar o mouse os itens aparecem numa janelinha ao lado */
@media (min-width: 821px) {
  :root[data-menu="recolhido"] .menu .grupo-cab { position: relative; justify-content: center; gap: 0; padding: 10px 0; margin: 4px 0 0; min-height: 40px; color: var(--texto-2); }
  :root[data-menu="recolhido"] .menu .grupo-cab > .ic { display: block; width: 20px; height: 20px; }
  :root[data-menu="recolhido"] .menu .grupo-cab .nome { display: none; }
  :root[data-menu="recolhido"] .menu .grupo-cab .cont, :root[data-menu="recolhido"] .menu-grupo:not(.fechado) > .grupo-cab .cont { display: inline-flex; position: absolute; top: 2px; right: 6px; margin: 0; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; }
  :root[data-menu="recolhido"] .menu .grupo-itens { display: none; }
  :root[data-menu="recolhido"] .menu-grupo.tem-ativo > .grupo-cab { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
}
.menu-voo, .menu-usuario { position: fixed; z-index: 330; display: flex; flex-direction: column; gap: 2px; padding: 6px; min-width: 190px;
  background: var(--pop); border: 1px solid var(--glass-b); border-radius: 16px; box-shadow: 0 18px 44px rgba(10, 14, 20, .28);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); animation: surge .15s var(--anim); }
.menu-voo .voo-tit { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); padding: 6px 12px 4px; }
.menu-voo a.item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; border-radius: 999px; color: var(--texto-2); font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.menu-voo a.item:hover { background: var(--surface); color: var(--texto); }
.menu-voo a.item.ativo { background: var(--accent); color: var(--accent-ink); }
.menu-voo a.item .cont { margin-left: auto; font-size: 11px; min-width: 20px; height: 19px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; background: var(--surface); color: var(--texto); font-weight: 700; }
.menu-voo a.item .cont.alerta { background: var(--vermelho); color: #fff; }

/* Item 3: rodapé do menu — nome/avatar abre "Meu Cadastro", "Trocar Senha" e "Sair da Conta" (sem ícone de sair) */
.menu .rodape-usuario { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin: 0; padding: 6px 8px; border: 0; border-radius: 16px;
  background: none; color: var(--texto); cursor: pointer; text-align: left; transition: background .15s; }
.menu .rodape-usuario:hover, .menu .rodape-usuario:focus-visible { background: var(--surface); outline: none; }
.menu .rodape-usuario .rodape-nome { display: block; flex: 1; min-width: 0; }
.menu .rodape-usuario .rodape-nome .fraco { display: block; }
.menu-usuario { min-width: 200px; }
.menu-usuario > a, .menu-usuario > button { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 40px; padding: 6px 14px; border: 0; border-radius: 12px;
  background: none; color: var(--texto); font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.menu-usuario > a:hover, .menu-usuario > button:hover, .menu-usuario > a:focus-visible, .menu-usuario > button:focus-visible { background: var(--accent-soft); outline: none; }
.menu-usuario > .mu-sair { color: var(--vermelho); border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; margin-top: 2px; }
@media (min-width: 821px) {
  :root[data-menu="recolhido"] .menu .rodape-usuario { justify-content: center; padding: 6px 0; }
}

/* Item 22 (Rodada 6): barra de baixo do celular menor (mais baixa e estreita) e com espaço reservado no fim da página.
   Rodada 7, item 1: abre com toque simples (sem anel de progresso). */
@media (max-width: 820px) {
  .conteudo { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .barra-baixo { left: 50%; right: auto; transform: translateX(-50%); width: min(330px, calc(100vw - 40px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding: 3px;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
  .barra-baixo a { gap: 0; padding: 3px 2px 4px; font-size: 9.5px; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
  .barra-baixo a .bb-ic { position: relative; width: 26px; height: 24px; display: grid; place-items: center; }
  .barra-baixo a .ic { width: 17px; height: 17px; }
  .barra-baixo a .cont { top: 0; right: calc(50% - 20px); }
}

/* Rodada 7, item 11: tela "Mais" com grupos (mesmos do menu lateral), lista compacta */
.lista-mais .li { padding: 6px 6px; gap: 10px; }
.lista-mais .alerta-ic { width: 28px; height: 28px; }
.lista-mais .alerta-ic .ic { width: 15px; height: 15px; }
.mais-grupo { border-bottom: 1px solid var(--line); }
.mais-grupo:last-child { border-bottom: 0; }
.lista-mais > .li + .mais-grupo, .lista-mais > .li:has(+ .mais-grupo) { border-bottom: 1px solid var(--line); }
.mais-grupo-cab { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 8px 6px; border: 0; background: none; color: var(--texto-2); font: inherit;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; border-radius: 12px; text-align: left; }
.mais-grupo-cab:focus-visible { background: var(--surface-2); outline: none; }
@media (hover: hover) { .mais-grupo-cab:hover { background: var(--surface-2); } }
.painel.mais-conta { margin-top: 12px; }
.mais-grupo-cab .nome { flex: 1; min-width: 0; }
.mais-grupo-cab .seta { font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texto-3, var(--texto-2)); }
.mais-grupo:not(.fechado) > .mais-grupo-cab .tag-alerta, .mais-grupo:not(.fechado) > .mais-grupo-cab .tag-erro { display: none; }
.mais-grupo-itens { display: flex; flex-direction: column; padding: 0 0 6px 8px; }
.mais-grupo-itens .li { border-bottom: 0; }
.mais-grupo.fechado > .mais-grupo-itens { display: none; }

/* Item 24: tema claro — campos de escrita visivelmente mais escuros que o cartão, com borda nítida (sistema e Portal) */
:where(:root:not([data-tema="escuro"])) :is(input[type=text], input[type=password], input[type=date], input[type=search], input[type=tel], input[type=email], input[type=number], input[type=month], input[type=time], input[type=url], input[type=datetime-local], input:not([type]), select, textarea) {
  background: rgb(22 26 32 / .07); border-color: rgb(28 36 48 / .3); box-shadow: inset 0 1px 2px rgb(15 22 32 / .07); }
:where(:root:not([data-tema="escuro"])) :is(input, select, textarea):focus { background: rgb(255 255 255 / .92); border-color: color-mix(in srgb, var(--marca) 70%, transparent); }
:where(:root:not([data-tema="escuro"])) :is(input, select, textarea):disabled { background: rgb(22 26 32 / .04); border-color: rgb(28 36 48 / .16); }

/* Itens 39/42: elemento com dica destacado enquanto a dica do toque está aberta */
.barra-svg.dica-sel { stroke: var(--texto); stroke-width: 2; }
.graf-ponto.dica-sel { stroke-width: 5; }
:not(svg *).dica-sel:not(.mb):not(.cl-c) { outline: 2px solid color-mix(in srgb, var(--marca) 55%, transparent); outline-offset: 2px; border-radius: 8px; }

/* Item 43: listas longas no celular = primeiros itens + "Ver Mais" (sem caixas com rolagem própria) */
@media (max-width: 820px) {
  [data-ver-mais]:not(.vm-aberto) > .vm-oculto { display: none !important; }
  .btn.ver-mais { display: flex; width: 100%; margin-top: 10px; }
}
@media (min-width: 821px) { .btn.ver-mais { display: none !important; } }

/* Rodada 13, item 9: selo da Origem do Atendimento (Vigia Mais MT / Própria do Cliente) */
.selo.origem-vmmt { color: var(--ok); font-weight: 800; }
.selo.origem-cliente { color: var(--texto-2); }
.card-os .os-origem-linha { display: flex; margin-top: 4px; }
.card-os .os-origem-linha .selo { box-shadow: none; }

/* =====================================================================
   Rodada 16, item 7 — "Quadro do Turno" (aprovado): camada comum a TODAS as telas.
   Linguagem: painéis planos com linha fina (sem sombra), títulos e números em Archivo semicondensada,
   indicadores numa faixa única com risco à esquerda (não mais grade de cartões), listas em linhas finas
   com borda de prioridade e ações à direita; grafite + azul da marca; âmbar só para decisão pendente,
   vermelho só para atraso/erro. Botões só texto, centralizados. Telas herdam daqui; ajustes de tela em css/quadro.css.
   ===================================================================== */
/* Tipografia */
.topo .titulo h1, .cab-os h1 { font-family: var(--disp); font-stretch: 84%; font-weight: 750; font-size: 30px; line-height: 1.05; letter-spacing: -.01em; }
.topo .titulo p { font-size: 13.5px; margin-top: 6px; }
.painel > h2, .painel-topo h2, .modal h2 { font-family: var(--disp); font-stretch: 88%; font-weight: 700; font-size: 19px; letter-spacing: -.005em; line-height: 1.2; }
.painel-topo h2 { display: flex; align-items: center; gap: 10px; }
.painel-topo h2 > svg.ic, .painel > h2 > svg.ic { display: none; }
.modal h2 { font-size: 21px; }
.pn-cont, .painel-topo h2 .cont { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: rgb(var(--tinta) / .08); color: var(--texto); font-family: var(--fonte); font-stretch: 100%; font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.destaque-n, .num-q { font-family: var(--disp); font-stretch: 80%; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Painéis: planos, linha fina, sem sombra */
.vidro, .vidro.claro { background: var(--q-fundo); border-color: var(--q-hair); box-shadow: none; border-radius: var(--q-raio); }
.painel { padding: 16px 18px 12px; }
.painel > h2, .painel-topo { margin-bottom: 8px; }

/* Indicadores: uma faixa só (quadro), número grande em cima, rótulo embaixo, risco colorido à esquerda */
.kpis { gap: 0; padding: 6px; background: var(--q-fundo); border: 1px solid var(--q-hair); border-radius: var(--q-raio); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpis > .kpi.kpi, .kpis > .kpi.kpi:first-child { background: transparent; border: 0; box-shadow: none; color: var(--texto); border-radius: 14px; padding: 12px 14px 12px 20px; gap: 3px; }
.kpis > .kpi.kpi::before { content: "" !important; display: block !important; position: absolute; left: 8px; top: 15px; width: 3px; height: 30px; border-radius: 2px; background: var(--q-cor, var(--q-tick)); }
.kpis > .kpi.verde, .kpis > .kpi.turquesa, .kpis > .kpi.azul-kpi { --q-cor: var(--marca); }
.kpis > .kpi.amarelo { --q-cor: var(--amarelo); }
.kpis > .kpi.vermelho { --q-cor: var(--vermelho); }
.kpi .val { order: -1; font-family: var(--disp); font-stretch: 80%; font-weight: 700; font-size: 34px; line-height: 1.02; letter-spacing: -.02em; }
.kpi .rot { font-size: 13px; color: var(--texto-2); }
.kpi .rot > svg.ic, .kpi .rot > .ic { display: none; }
.kpi .sub { color: var(--texto-2); font-size: 12px; }
.kpis > .kpi.kpi:first-child .rot, .kpis > .kpi.kpi:first-child .sub, .kpis > .kpi.kpi:first-child .sub * { color: var(--texto-2) !important; }
.kpis > .kpi.kpi:first-child .val { color: var(--texto) !important; }
.kpis > .kpi.kpi:first-child .sub [class] { background: initial !important; border-color: initial !important; }
.kpis > .kpi.kpi:first-child .sub svg, .kpis > .kpi.kpi:first-child .sub .ic { background: none !important; color: currentColor !important; stroke: currentColor; }
.kpis > .kpi.vermelho .val { color: var(--vermelho) !important; }
.kpi[data-ir]:hover { transform: none; box-shadow: none; background: rgb(var(--tinta) / .045); }
.kpi[data-ir]:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.kpis > .kpi.kpi.ativo { background: rgb(var(--tinta) / .07) !important; border-color: transparent !important; color: var(--texto) !important; box-shadow: none !important; --q-cor: var(--marca); }
.kpis > .kpi.kpi.ativo .rot, .kpis > .kpi.kpi.ativo .sub { color: var(--texto-2) !important; }
.kpis > .kpi.kpi.ativo .val { color: var(--texto) !important; }
.kpi .variacao { background: none !important; padding: 0 !important; }
.conteudo > .carregando.tela .esq-kpis { gap: 0; }

/* Botões: pílula, só texto, sem sombra; confirmação em azul da marca liso */
.btn { min-height: 36px; padding: 6px 16px; }
.btn.primario, .btn.escuro { box-shadow: none; }
.btn.verde { background: var(--q-btn); border-color: var(--q-btn); color: #fff; box-shadow: none; }
.btn.azul { box-shadow: none; }
.btn.p { min-height: 30px; padding: 4px 12px; }
.btn.g { min-height: 44px; }
.btn:focus-visible, .chip:focus-visible, .aba:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Abas e chips */
.abas { background: var(--q-fundo); border-color: var(--q-hair); }
.aba.ativa, .menu a.item.ativo, .barra-baixo a.ativo { box-shadow: none; }
.chip { background: transparent; border-color: var(--q-hair); }
.chip:hover { background: rgb(var(--tinta) / .05); }

/* Menu: grupos e seções em Iniciais Maiúsculas (sem caixa-alta espaçada) */
.menu .secao, .menu .grupo-cab, .menu-voo .voo-tit, .mais-grupo-cab { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 700; }
.menu .grupo-cab { color: var(--texto-3); }
.mais-grupo-cab { font-size: 13px; }

/* Tabelas e listas: linhas finas */
.tabela th { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; border-bottom-color: var(--q-hair); }
.tabela td { border-bottom-color: var(--q-hair); }
.tabela tbody tr:hover td { background: rgb(var(--tinta) / .035); }
.lista-simples .li { border-bottom-color: var(--q-hair); }
.lista-simples .li:hover { background: rgb(var(--tinta) / .035); }

/* Linha com borda de prioridade (qualquer lista): .q-linha + p-urgente / p-baixa / p-tempo_vago */
.q-linha { position: relative; padding-left: 14px; }
.q-linha::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--q-tick); }
.q-linha.p-urgente::before { background: var(--vermelho); }
.q-linha.p-baixa::before, .q-linha.p-tempo_vago::before { background: transparent; border-left: 1px dashed rgb(var(--tinta) / .25); width: 0; }

/* Cartões de OS: planos; prioridade urgente marca a borda esquerda do texto */
.card-os, .card-os.vidro { background: var(--q-fundo); border: 1px solid var(--q-hair); box-shadow: none; }
.card-os:hover { transform: none; box-shadow: none; background: rgb(var(--tinta) / .05); }
.card-os:hover .capa img { transform: none; }
.card-os .num { font-family: var(--fonte); font-variant-numeric: tabular-nums; color: var(--texto-2); }
.card-os .corpo { position: relative; padding-left: 12px; }
.card-os .corpo::before { content: ""; position: absolute; left: 2px; top: 10px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--q-tick); }
.card-os.p-urgente .corpo::before { background: var(--vermelho); }
.card-os.p-baixa .corpo::before, .card-os.p-tempo_vago .corpo::before { background: transparent; border-left: 1px dashed rgb(var(--tinta) / .25); width: 0; }
.selo { box-shadow: none; }

/* Detalhe da OS e linha do tempo */
.cab-os { background: var(--q-fundo); }
.linha-tempo::before { background: var(--q-hair); width: 2px; }
.ev::before { background: var(--pop); border-width: 2px; border-color: var(--marca); width: 11px; height: 11px; }
.ev.sistema::before { border-color: rgb(var(--tinta) / .3); }
.ev .cab .quando { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.ev .bolha { background: rgb(var(--tinta) / .04); border-color: var(--q-hair); }
.ev .bolha.admin { background: color-mix(in srgb, var(--marca) 9%, transparent); border-color: color-mix(in srgb, var(--marca) 22%, transparent); }

/* Modais, sino, menus suspensos: janela opaca com linha fina */
.modal { border: 1px solid var(--q-hair); }
.notificacoes, .menu-voo, .menu-usuario { border: 1px solid var(--q-hair); }

/* Barras: superior e inferior */
.barra-topo { background: var(--q-fundo); border-color: var(--q-hair); box-shadow: none; }
.vazio { color: var(--texto-2); }
.vazio .ic { opacity: .45; width: 30px; height: 30px; }

/* Login */
.caixa-login { border: 1px solid var(--q-hair); }
.caixa-login .sub { font-family: var(--disp); font-stretch: 88%; font-size: 17px; font-weight: 650; color: var(--texto); }

@media (max-width: 820px) {
  .topo .titulo h1, .cab-os h1 { font-size: 25px; }
  .painel { padding: 14px 12px 10px; border-radius: 18px; }
  .kpis, .conteudo > .carregando.tela .esq-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 4px; border-radius: 18px; }
  .kpis > .kpi.kpi, .kpis > .kpi.kpi:first-child { padding: 10px 10px 10px 18px; }
  .kpi .val { font-size: 28px; }
  .kpi .rot { min-height: 0; }
  .kpis > .kpi:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 820px) and (pointer: coarse) { .btn.p:not(.btn-ic) { min-height: 40px; } }

/* Rodada 21, item 14: olho dentro dos campos de senha (core.js põe sozinho) */
.senha-olho { position: relative; display: block; width: 100%; }
.senha-olho > input { width: 100%; padding-right: 44px; }
.senha-olho-bt { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 30px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--texto-2); cursor: pointer; display: grid; place-items: center; }
.senha-olho-bt:hover { color: var(--texto); background: rgb(var(--tinta) / .07); }
.senha-olho-bt svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
/* Central do Cliente: o "Mostrar" do Código de Acesso vira o olho */
.po-senha .po-mostrar.senha-olho-bt { min-width: 0; width: 34px; height: 30px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--texto-2); display: grid; place-items: center; }
.po-senha .po-mostrar.senha-olho-bt:hover { color: var(--texto); background: rgb(var(--tinta) / .07); }
.po-login .po-senha .po-codigo { padding-left: 44px; padding-right: 44px; }