:root {
    --azul: #2b5fa8;
    --azul-escuro: #1d4278;
    --cinza-claro: #f4f6f9;
    --cinza-borda: #d7dce3;
    --texto: #26313f;
    --erro: #c0392b;
    --verde: #2e9e4f;
    --verde-escuro: #237a3c;
    --vermelho: #c0392b;
    --vermelho-escuro: #962d20;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--texto);
    background: var(--cinza-claro);
}

/* ---- tela de login ---- */
.pagina-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cartao-login {
    background: #fff;
    padding: 32px 36px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 340px;
    text-align: center;
}

.cartao-login .logo {
    max-width: 160px;
    margin-bottom: 12px;
}

.cartao-login h1 {
    font-size: 1.2rem;
    margin: 0 0 20px;
    color: var(--azul-escuro);
}

.cartao-login form {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 4px;
}

.cartao-login label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px;
}

.cartao-login input {
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
}

.cartao-login button {
    margin-top: 20px;
    padding: 11px;
    border: none;
    border-radius: 6px;
    background: var(--azul);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.cartao-login button:hover {
    background: var(--azul-escuro);
}

.mensagem-erro {
    background: #fdecea;
    color: var(--erro);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin: 10px 0;
}

.mensagem-aviso {
    background: #eaf3ff;
    color: var(--azul-escuro);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin: 10px 0;
}

/* Verde de "deu certo". O projeto tinha so erro (vermelho) e aviso (azul):
   confirmar uma gravacao em azul faz a pessoa reler pra saber se foi. */
.mensagem-sucesso {
    background: #eaf7ee;
    color: var(--verde-escuro);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    margin: 10px 0;
}

.form-secundario {
    margin-top: 0;
}

/* ---- área logada: barra superior fixa + menu lateral (☰) ----
   A barra virou FIXA (acompanha a rolagem) pra o ☰ ficar sempre à mão,
   inclusive lá embaixo no chat. Como `position: fixed` tira a barra do
   fluxo, quem reserva a altura dela é o `.topo-espacador` logo abaixo —
   de propósito, em vez de um `padding-top` no `body`: assim a tela de
   login (que não tem barra) não é afetada. Altura fixa nos dois pra
   nunca dessincronizar. Ver src/Views/topo.php. */
.topo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 44px;
    box-sizing: border-box;
    background: var(--azul-escuro);
    color: #fff;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.topo-espacador {
    height: 44px;
}

.topo-esquerda {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.topo-titulo,
.topo-usuario {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topo a {
    color: #fff;
    text-decoration: underline;
}

/* ---- ícone ☰ ---- */
.botao-menu {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 30px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 6px;
    cursor: pointer;
}

.botao-menu span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.botao-menu:hover,
.botao-menu:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

/* ---- painel lateral ----
   A abertura é 100% CSS: o checkbox escondido (.menu-alternador) fica
   ANTES do painel e do fundo no HTML, e os seletores de irmão (`~`)
   fazem o resto. Sem JS pra dessincronizar; o pouco de JS que existe em
   topo.php é só pro Esc e pro Enter no teclado. */
.menu-alternador {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.menu-fundo {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(20, 28, 40, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.menu-alternador:checked ~ .menu-fundo {
    opacity: 1;
    visibility: visible;
}

.menu-painel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: 250px;
    max-width: 82vw;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.18);
    padding: 0 0 16px;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
}

.menu-alternador:checked ~ .menu-painel {
    transform: none;
}

.menu-painel-topo {
    height: 44px;
    padding: 0 10px 0 16px;
    background: var(--azul-escuro);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.menu-fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.menu-fechar:hover,
.menu-fechar:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

.menu-secao {
    margin: 14px 16px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a94a3;
}

.menu-item {
    display: block;
    padding: 10px 16px;
    color: var(--azul-escuro);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    border-left: 3px solid transparent;
}

.menu-item:hover {
    background: #eaf0f8;
}

/* Item da tela em que o usuário já está. */
.menu-item-atual {
    background: #eaf0f8;
    border-left-color: var(--azul);
}

.menu-item-sair {
    margin-top: 8px;
    border-top: 1px solid var(--cinza-borda);
    color: var(--erro);
}

.conteudo {
    max-width: 720px;
    margin: 16px auto;
    background: #fff;
    padding: 18px 24px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

/* "Histórico" + "Voltar" no canto direito do cabeçalho da OS. Os dois
   juntos num bloco só pra o .cabecalho-os continuar sendo dois lados
   (título | ações), e não três coisas soltas brigando pelo espaço. */
.acoes-cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
}

.link-historico {
    color: var(--azul);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.link-historico:hover {
    text-decoration: underline;
}

/* ---- historico-os.php: log de atividade da OS ---- */
/* Herda .tabela-os, que tem white-space: nowrap em toda célula — bom pras
   colunas de data e intervalo, ruim pras de texto, que precisam poder
   quebrar quando o rótulo é longo ("Relatório do Cliente — Situação").
   ⚠️ O seletor precisa das DUAS classes: `.tabela-atividade td` sozinho
   empata em especificidade com `.tabela-os td`, que está mais abaixo
   neste arquivo e ganharia por vir depois — o override não faria nada. */
.tabela-os.tabela-atividade td {
    white-space: normal;
}

/* Data e hora do movimento numa linha só — "06/09/2026 14:41" quebrado
   em duas linhas gasta altura sem ganhar nada. `:first-child` conta como
   classe, então esta regra (0,3,1) vence a de cima (0,2,1). */
.tabela-os.tabela-atividade td:first-child {
    white-space: nowrap;
}

/* Mesma armadilha, um degrau adiante: aqui quem precisa ser mais
   específico é ESTA regra, porque `.tabela-os.tabela-atividade td`
   (2 classes + elemento) vence `.tabela-atividade .celula-*`
   (2 classes). Sem as duas classes, a coluna de intervalo voltaria a
   quebrar linha no meio de "1d 3h". */
.tabela-os.tabela-atividade .celula-intervalo {
    color: #6b7785;
    white-space: nowrap;
}

.tabela-os.tabela-atividade .celula-evento {
    font-weight: 600;
}

/* Só aparece quando o movimento veio de outro sistema (o atendimento,
   quando ele passar a gravar aqui). Ver `origem` em src/Atividade.php. */
.etiqueta-origem {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--cinza-borda);
    color: var(--texto);
    font-size: 0.7rem;
    font-weight: 600;
}

/* ---- os.php: card com os dados básicos da OS ---- */
/* ---- os.php: cabeçalho compacto — título + "Voltar" na mesma linha ----
   Antes o <h1> ficava no tamanho padrão do navegador (2em) com margem
   própria e o botão numa linha separada: só isso empurrava o primeiro
   dado da OS pra quase 300px do topo. Agora os dois dividem uma linha
   só. */
.cabecalho-os {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 2px;
}

.cabecalho-os h1 {
    margin: 0;
    font-size: 1.4rem;
}

.cabecalho-os .botao-voltar {
    margin: 0;
}

.cartao-info {
    margin-top: 8px;
    background: var(--cinza-claro);
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 0 16px;
}

.tabela-info {
    border-collapse: collapse;
    width: 100%;
}

.tabela-info tr:last-child td {
    border-bottom: none;
}

.tabela-info td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--cinza-borda);
    vertical-align: middle;
    font-size: 0.95rem;
    line-height: 1.35;
}

.tabela-info td:first-child {
    font-weight: 600;
    color: var(--azul-escuro);
    padding-right: 18px;
    white-space: nowrap;
    width: 1%;
}

.botao-ver-fotos {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--azul);
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.botao-ver-fotos:hover {
    background: var(--azul-escuro);
}

/* ---- os.php: ícone/form "Alterar Técnico" na linha "Técnico:" ---- */
.detalhes-alterar-tecnico {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

.botao-alterar-tecnico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    background: var(--cinza-claro);
    color: var(--azul-escuro);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    list-style: none;
}

.botao-alterar-tecnico::-webkit-details-marker {
    display: none;
}

.botao-alterar-tecnico:hover {
    background: #eaf0f8;
    border-color: var(--azul);
}

.form-alterar-tecnico {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    background: #fff;
}

.form-alterar-tecnico select {
    padding: 7px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 0.9rem;
}

.form-alterar-tecnico button {
    padding: 7px 14px;
    border: none;
    border-radius: 6px;
    background: var(--azul);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.form-alterar-tecnico button:hover {
    background: var(--azul-escuro);
}

/* ---- os.php: card em volta do chat importado ---- */
.cartao-chat {
    margin-top: 8px;
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 12px;
    background: var(--cinza-claro);
}

.form-perfil {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 420px;
    margin-top: 20px;
}

.titulo-secao {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--cinza-borda);
    font-size: 1.05rem;
    color: var(--azul-escuro);
}

.form-perfil label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px;
}

.form-perfil input {
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
}

.form-perfil input:disabled {
    background: var(--cinza-claro);
    color: #8a94a3;
}

.form-perfil button {
    margin-top: 20px;
    padding: 11px;
    border: none;
    border-radius: 6px;
    background: var(--azul);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    align-self: flex-start;
    padding-left: 24px;
    padding-right: 24px;
}

.form-perfil button:hover {
    background: var(--azul-escuro);
}

.proximo-passo {
    margin-top: 24px;
    color: #6b7684;
    font-size: 0.9rem;
}

/* ---- menu (início) ---- */
.titulo-secao-sem-borda {
    margin-top: 28px;
    font-size: 1.05rem;
    color: var(--azul-escuro);
}

.menu-modulos {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.menu-modulos li a {
    display: inline-block;
    padding: 14px 20px;
    background: var(--cinza-claro);
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    color: var(--azul-escuro);
    text-decoration: none;
    font-weight: 600;
}

.menu-modulos li a:hover {
    background: #eaf0f8;
    border-color: var(--azul);
}

/* ---- atalhos da tela de Inicio (18/09/2026) ----
   Substituem a .menu-modulos, que era uma fila de botoes com o nome do
   modulo e mais nada. Viraram cartoes com uma linha de explicacao:
   "Consertando" e "Liberacao" nao dizem sozinhos o que tem dentro, e a
   tela de Inicio e justamente onde alguem novo procura. A lista vem de
   App\Menu, a mesma do menu lateral. */
.atalhos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin: 12px 0 22px;
}

.atalho-cartao {
    display: block;
    padding: 14px 16px;
    background: var(--cinza-claro);
    border: 1px solid var(--cinza-borda);
    border-left: 4px solid var(--azul);
    border-radius: 8px;
    color: var(--azul-escuro);
    text-decoration: none;
    transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

.atalho-cartao:hover {
    background: #eaf0f8;
    border-color: var(--azul);
}

.atalho-cartao strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.atalho-cartao span {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #5a6b7d;   /* cinza de apoio: nao existe variavel pra ele ainda */
}

/* No celular a grade vira uma coluna so — dois cartoes lado a lado a 360px
   cortam a frase de explicacao no meio. */
@media (max-width: 560px) {
    .atalhos-grade {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ---- listagens de OS ---- */
.botao-voltar {
    display: inline-block;
    margin-top: 4px;
    margin-bottom: 12px;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--cinza-claro);
    border: 1px solid var(--cinza-borda);
    color: var(--azul-escuro);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.botao-voltar:hover {
    background: #eaf0f8;
    border-color: var(--azul);
}

.botao-voltar-rodape {
    margin-top: 20px;
}

.tabela-os {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
}

.tabela-os th,
.tabela-os td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--cinza-borda);
    text-align: left;
    white-space: nowrap;
}

.tabela-os thead th {
    color: var(--azul-escuro);
    font-size: 0.8rem;
    border-bottom: 2px solid var(--cinza-borda);
}

/* Cabeçalhos ordenáveis (pedido do usuário, set/2026 — clicar em
   Data/Empresa/etc. ordena a tabela por aquela coluna, ver
   assets/js/listagem.js). "Nº" fica de fora de propósito (não tem
   `data-sort-type`, não vira clicável). */
.tabela-os th[data-sort-type] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.tabela-os th[data-sort-type]:hover {
    color: var(--azul);
}

.tabela-os th[data-sort-type]::after {
    content: '';
    display: inline-block;
    width: 0.7em;
}

.tabela-os th[aria-sort="ascending"]::after {
    content: '▲';
    font-size: 0.68em;
    margin-left: 2px;
}

.tabela-os th[aria-sort="descending"]::after {
    content: '▼';
    font-size: 0.68em;
    margin-left: 2px;
}

.tabela-os tbody tr.linha-clicavel {
    cursor: pointer;
    transition: background-color 0.1s ease-in-out;
}

.tabela-os tbody tr.linha-clicavel:hover {
    background-color: #eaf0f8;
}

.tabela-os .link-os {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.tabela-os tbody tr.linha-clicavel:hover .link-os {
    text-decoration: underline;
}

.celula-estreita {
    padding-left: 6px !important;
    padding-right: 6px !important;
    width: 1%;
}

.etiqueta-situacao {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: help;
    background: var(--cinza-claro);
    color: var(--texto);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.etiqueta-situacao-a {
    background: #fdecea;
    color: var(--erro);
}

.etiqueta-situacao-at {
    background: #eaf3ff;
    color: var(--azul-escuro);
}

.etiqueta-local {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.etiqueta-local-loja {
    background: #eafaf0;
    color: #1e7e45;
}

.etiqueta-local-sitio {
    background: #fff4e0;
    color: #a15c00;
}

.aviso-secao {
    margin-top: 28px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 1rem;
}

.aviso-secao-aprovado {
    background: #eafaf0;
    color: #1e7e45;
    border: 1px solid #bfe8cf;
}

.aviso-secao-reprovado {
    background: #fdecea;
    color: var(--erro);
    border: 1px solid #f3c6c0;
}

.aviso-secao-azul {
    background: #eaf3ff;
    color: var(--azul-escuro);
    border: 1px solid #bcd6f5;
}

/* ---- gerenciar permissões ---- */
.conteudo-larga {
    max-width: 1100px;
}

.tabela-scroll {
    overflow-x: auto;
    margin-top: 20px;
}

.tabela-permissoes {
    border-collapse: collapse;
    width: 100%;
    white-space: nowrap;
}

.tabela-permissoes th,
.tabela-permissoes td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--cinza-borda);
    text-align: left;
}

.tabela-permissoes thead th {
    color: var(--azul-escuro);
    font-size: 0.85rem;
    border-bottom: 2px solid var(--cinza-borda);
}

.tabela-permissoes .celula-checkbox {
    text-align: center;
}

.tabela-permissoes .celula-checkbox input {
    width: 18px;
    height: 18px;
}

.linha-admin td {
    color: #8a94a3;
    font-style: italic;
}

.etiqueta-admin {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--cinza-claro);
    color: var(--azul-escuro);
    font-size: 0.75rem;
    font-style: normal;
}

/* O botao de gravar. Era `.botao-salvar-permissoes`, presa a uma tela so;
   virou tambem `.botao-principal` para a proxima tela nao precisar de mais
   um nome. A classe antiga continua valendo — permissoes.php usa ela. */
.botao-salvar-permissoes,
.botao-principal {
    margin-top: 20px;
    padding: 11px 24px;
    border: none;
    border-radius: 6px;
    background: var(--azul);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.botao-salvar-permissoes:hover,
.botao-principal:hover {
    background: var(--azul-escuro);
}

/* ---- os.php: formulário Modelo/Série (AT) ---- */
.form-modelo-serie {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 460px;
    margin-top: 16px;
}

.form-modelo-serie label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 10px;
}

.linha-select-mais {
    display: flex;
    gap: 8px;
    align-items: center;
}

.linha-select-mais select {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
}

.linha-select-mais select:disabled {
    background: var(--cinza-claro);
    color: #8a94a3;
}

.botao-mais {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    background: var(--cinza-claro);
    color: var(--azul-escuro);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.botao-mais:hover:not(:disabled) {
    background: #eaf0f8;
    border-color: var(--azul);
}

.botao-mais:disabled {
    color: #b7bfc9;
    cursor: not-allowed;
}

/* Select que ocupa a linha inteira (Relatório do Cliente). O
   `.linha-select-mais select` acima é outra coisa: é o do Modelo/Série,
   que divide a linha com o botão "+" de cadastro rápido. Sem esta regra
   os selects do Relatório ficariam sem estilo nenhum, destoando dos
   campos das outras telas. */
.form-modelo-serie > select {
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}

.form-modelo-serie textarea {
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

.form-modelo-serie .botao-salvar-permissoes {
    align-self: flex-start;
    margin-top: 20px;
}

/* ---- modal de cadastro rápido ---- */
.modal-sobreposicao {
    position: fixed;
    inset: 0;
    background: rgba(20, 28, 40, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 100;
}

/* O "display: flex" acima, sozinho, vence a regra padrão do navegador
   pro atributo [hidden] (display: none) — CSS de autor sempre tem
   prioridade sobre o CSS interno do navegador, mesmo sem especificidade
   maior. Por isso o modal aparecia aberto assim que a página carregava
   (bug encontrado set/2026). Esta regra reforça o [hidden] explicitamente. */
.modal-sobreposicao[hidden] {
    display: none;
}

.modal-caixa {
    background: #fff;
    border-radius: 10px;
    padding: 24px 28px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-caixa h3 {
    margin: 0 0 16px;
    color: var(--azul-escuro);
    font-size: 1.05rem;
}

.modal-caixa form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-caixa label {
    font-size: 0.85rem;
    font-weight: 600;
}

.modal-caixa input {
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
}

.modal-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* .botao-voltar e .botao-salvar-permissoes são reaproveitados aqui de
   outros lugares da tela (link de "voltar" solto / botão de salvar
   permissões), cada um com margem e borda diferentes — sem isso os
   dois ficavam desalinhados dentro do modal (bug reportado set/2026). */
.modal-acoes .botao-voltar,
.modal-acoes .botao-salvar-permissoes {
    margin: 0;
    padding: 10px 20px;
    font-size: 0.95rem;
    line-height: 1.2;
}

.modal-acoes .botao-salvar-permissoes {
    border: 1px solid transparent;
}

/* ==================================================================
   CARTÕES DE ETAPA  (vieram do atendimento.css em 15/09/2026)
   ==================================================================
   Nasceram na tela de ENTRADA do atendimento — os seis cartões que
   ficam verdes conforme o dado existe. Ele viu os dois lados no mesmo
   dia e pediu: *"o que foi feito nas OS de entrada é muito mais
   bonito, temos como alterar?"*.

   🔥 **Moraram no `atendimento.css` e agora moram AQUI**, e isso não é
   arrumação: a tela da OS do atendimento carrega este `style.css`
   ANTES do `atendimento.css`, então uma definição só serve aos dois
   sistemas. Duas cópias é como as duas telas ficam diferentes daqui a
   seis meses sem ninguém perceber.

   ⚠️ Quem mexer aqui está mexendo NAS DUAS TELAS. É o objetivo, mas
   vale conferir as duas antes de entregar.
   ================================================================== */

/* ------------------------------------------------------------------
   Os cinco cartões da ENTRADA
   ------------------------------------------------------------------
   Cada um fica verde quando o dado dele existe, e TODOS são clicáveis —
   inclusive os verdes, que é o que faz "voltar e editar" funcionar. Por
   isso são <a> e não <div>: quem navega por teclado alcança todos, e o
   cursor já diz que dá pra clicar. */
.cartoes-entrada {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 20px;
}

.cartao-entrada {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 200px;
    min-width: 200px;
    padding: 12px 14px;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.12s ease-in-out, transform 0.12s ease-in-out;
}

.cartao-entrada:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.cartao-marca {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cinza-borda);
    color: #55606d;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.cartao-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    /* Sem isto, um detalhe comprido ("Falta: Produto, Modelo, Defeito
       reclamado") esticaria o cartão e quebraria o alinhamento da fila. */
    min-width: 0;
}

.cartao-texto small {
    color: #6b7785;
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.cartao-pronto {
    border-color: #bfe3cd;
    background: #f2fbf6;
}

.cartao-pronto .cartao-marca {
    background: #1e7e45;
    color: #fff;
}

.cartao-pronto .cartao-texto small {
    color: #2c7a52;
}

.cartao-pendente .cartao-marca {
    background: #fff;
    border: 2px solid var(--cinza-borda);
}

/* O botão de confirmar é o único da tela com esse peso, de propósito:
   é a ação que tira a OS do balcão e manda pro técnico. */
.confirmar-entrada {
    margin: 4px 0 0;
    padding: 16px;
    border: 1px solid #bfe3cd;
    border-radius: 10px;
    background: #f2fbf6;
}

.botao-confirmar-entrada {
    padding: 13px 26px;
    border: 1px solid #1a6d3c;
    border-radius: 8px;
    background: #1e7e45;
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.botao-confirmar-entrada:hover {
    background: #1a6d3c;
}

/* ⚠️ APAGADO DE VERDADE quando está desabilitado. Sem isto, o botão de
   "dar sequência" continua verde, grande e convidativo mesmo travado —
   e aí a pessoa clica, não acontece nada, e ela clica de novo achando
   que o sistema travou. Um botão que não funciona tem que PARECER que
   não funciona; a explicação do que falta fica do lado. */
.botao-confirmar-entrada[disabled],
.botao-confirmar-entrada:disabled {
    background: #e6e8ec;
    border-color: #d2d6dd;
    color: #8a93a2;
    cursor: not-allowed;
}

.botao-confirmar-entrada[disabled]:hover {
    background: #e6e8ec;
}

.confirmar-entrada .ajuda-campo {
    margin: 8px 0 0;
}

/* ------------------------------------------------------------------
   Cartão de um passo que ainda não existe (13/09/2026)
   ------------------------------------------------------------------
   A "Nota fiscal de serviço" está na tela de prontos para entrega, mas
   ainda não foi construída — o código antigo dela está em arquivos que
   não vieram na pasta de referência.

   O cartão fica lá, apagado e sem link, em vez de simplesmente não
   existir. Quem abre a tela procurando a nota precisa ver que ela está
   vindo; uma tela onde o caminho some faz a pessoa achar que esqueceram
   dela — e ir perguntar. Um cartão cinza responde sozinho.

   ⚠️ É um <span>, não um <a>: não tem para onde levar, então não pode
   parecer clicável nem receber foco pelo teclado. */
.cartao-futuro {
    border-style: dashed;
    background: #f7f8fa;
    cursor: default;
}

.cartao-futuro .cartao-marca {
    background: #fff;
    border: 2px dashed var(--cinza-borda);
    color: #8a93a2;
}

.cartao-futuro .cartao-texto strong,
.cartao-futuro .cartao-texto small {
    color: #8a93a2;
}

.cartao-futuro:hover {
    border-color: var(--cinza-borda);
    box-shadow: none;
    transform: none;
}


/* ------------------------------------------------------------------
   Cartão NEUTRO: "Ver Fotos" e "Peças" (15/09/2026)
   ------------------------------------------------------------------
   Estes dois não são ETAPA — são porta pra olhar uma coisa. Um cartão
   pendente (bolinha vazia) diria "falta fazer", e não falta: Ver Fotos
   nunca é "concluído". Por isso a marca é um símbolo azul e não um
   número, que é a mesma cor que esses dois botões já tinham no menu
   antigo — a convenção da casa continua valendo, só mudou o formato. */
/* ⚠️ Não CRESCEM como os cartões de etapa: sozinhos na última linha,
   dois cartões esticados ficavam mais pesados do que as três etapas de
   cima — o contrário da hierarquia que a tela quer mostrar. Compactos,
   eles leem como "o que mais dá pra abrir daqui". */
.cartao-neutro {
    flex-grow: 0;
}

.cartao-neutro .cartao-marca {
    background: #fff;
    border: 2px solid var(--azul);
    color: var(--azul);
    font-size: 0.8rem;
}

/* O botão grande também serve de LINK (a finalização é um link, não um
   formulário), e link não aceita o atributo `disabled`. */
.botao-confirmar-entrada {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.botao-confirmar-entrada.desabilitado,
.botao-confirmar-entrada.desabilitado:hover {
    background: #e6e8ec;
    border-color: #d2d6dd;
    color: #8a93a2;
    cursor: not-allowed;
}


/* ---- menu ANTIGO da situação T — substituído pelos cartões acima em
   15/09/2026. As regras ficam porque a tela de conferência do
   supervisor ainda pode herdar alguma; se ninguém usar em 3 meses,
   apagar. ---- */
.menu-t {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Tamanho ajustado 06/09/2026: com 6 botoes (Diagnostico, Adicionar
   Fotos, Ver Fotos, Pecas, Relatorio do Cliente, Finalizar OS) a linha
   pedia 779px dentro de um espaco de 672px (.conteudo tem max-width 720
   menos 24px de padding de cada lado) e o "Finalizar OS" caia sozinho
   numa segunda linha. Medido no Chromium com a fonte de reserva (Arial,
   mais larga que a Segoe UI do Windows): com estes valores a linha fica
   em 639px, sobrando 33px. Se um botao novo entrar aqui, MEDIR de novo —
   nao existe espaco pra um setimo botao nesta largura. */
.botao-t-menu {
    display: inline-block;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    text-align: center;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.botao-t-menu:hover {
    filter: brightness(0.92);
}

/* Verde = etapa completa (diagnóstico com causa+executado preenchidos,
   ou pelo menos 1 foto na OS) — mesma convenção de cores do sistema
   antigo. Vermelho = ainda falta preencher/anexar algo. */
.botao-t-verde {
    background: var(--verde);
}

.botao-t-verde:hover {
    background: var(--verde-escuro);
}

.botao-t-vermelho {
    background: var(--vermelho);
}

.botao-t-vermelho:hover {
    background: var(--vermelho-escuro);
}

/* Ver Fotos / Peças — ainda são só links pra uma próxima programação,
   sem estado de conclusão, por isso ficam neutras (azul), não
   vermelhas/verdes. */
.botao-t-neutro {
    background: var(--azul);
}

.botao-t-neutro:hover {
    background: var(--azul-escuro);
}

.botao-t-finalizar {
    margin-left: auto;
}

/* Em tela estreita (celular) os botoes quebram de qualquer jeito, e ai o
   margin-left:auto joga o "Finalizar OS" sozinho encostado na direita —
   exatamente o desalinhamento que este ajuste veio corrigir. Abaixo de
   700px ele volta a acompanhar a fila. */
@media (max-width: 700px) {
    .botao-t-finalizar {
        margin-left: 0;
    }
}

/* "Finalizar OS" só é um link de verdade quando Diagnóstico e Fotos
   estão os dois verdes (ver $osProntaParaFinalizar em os.php) — até lá é
   um <span>, não um <a>, e o cursor deixa isso claro. */
.botao-t-desabilitado {
    cursor: not-allowed;
    opacity: 0.85;
}

/* ---- revisão de fotos (public/fotos.php) ---- */
/* 3 colunas agora (Temporárias / Anexadas na OS / Entrada) — auto-fit
   deixa 3 lado a lado em telas largas e vai encolhendo pra 2 e depois 1
   coluna sozinho, sem precisar de mais breakpoints manuais. */
.colunas-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 12px;
}

.coluna-fotos {
    background: #fff;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    padding: 16px;
}

.foto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.foto-item {
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    overflow: hidden;
    background: var(--cinza-claro);
}

.foto-item img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.foto-acoes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.botao-foto-mover,
.botao-foto-excluir {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
}

.botao-foto-mover {
    background: var(--verde);
}

.botao-foto-mover:hover {
    background: var(--verde-escuro);
}

.botao-foto-excluir {
    background: var(--vermelho);
}

.botao-foto-excluir:hover {
    background: var(--vermelho-escuro);
}

/* ---- consulta.php: busca de OS (4 tipos) ---- */
/* Os 3 controles têm ALTURA FIXA igual (--altura-busca), em vez de cada
   um derivar a sua do próprio padding + fonte. É o único jeito
   confiável de alinhar <select>, <input> e <button> numa linha só: cada
   um deles tem métricas internas próprias do navegador, então padding
   igual NÃO dá altura igual. Com `box-sizing: border-box` (global, no
   topo deste arquivo) a borda entra dentro dos 36px. */
.form-consulta {
    --altura-busca: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 12px 0 16px;
    /* Caixa curta de propósito: o campo antes esticava até 720px e
       dominava a tela pra uma busca de 4 a 8 caracteres. */
    max-width: 560px;
}

.form-consulta select,
.form-consulta input[type="text"] {
    height: var(--altura-busca);
    padding: 0 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
    color: var(--texto);
}

.form-consulta input[type="text"] {
    flex: 1;
    min-width: 160px;
}

/* O botão reaproveita .botao-salvar-permissoes, que traz margin-top:20px
   do formulário de permissões (lá ele fica sozinho embaixo de uma
   tabela). Numa linha em flex, essa margem empurrava o botão pra baixo e
   o deixava MENOR que os outros dois — era o desalinhamento que o
   usuário viu na tela. */
.form-consulta button {
    height: var(--altura-busca);
    margin-top: 0;
    padding: 0 18px;
    font-size: 0.9rem;
    font-weight: 600;
}

.paginacao {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.paginacao-info {
    color: #6b7785;
    font-size: 0.85rem;
}

/* Linha discreta com o tempo da busca — só administrador vê. */
.rodape-tecnico {
    margin-top: 18px;
    color: #6b7785;
    font-size: 0.8rem;
}

/* ---- pecas.php: busca de peças nos 2 estoques ---- */
.form-busca-pecas {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    max-width: 480px;
}

.form-busca-pecas input[type="text"] {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
}

.form-busca-pecas button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: var(--azul);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.form-busca-pecas button:hover {
    background: var(--azul-escuro);
}

.aviso-origem {
    margin-top: 12px;
}

.peca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

/* Cor por origem — verde = estoque próprio (Eletrocan), vermelho =
   estoque externo (FFHC), igual o sistema antigo orientava ("dar
   preferência pras peças verdes"). Indisponível fica meio apagada,
   com o aviso em vermelho por cima, independente da origem. */
.peca-card {
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    padding: 14px;
    background: #fff;
}

.peca-card-proprio {
    background: #eafaf0;
    border-color: #bfe8cf;
}

.peca-card-externo {
    background: #fdecea;
    border-color: #f3c6c0;
}

.peca-card-indisponivel {
    opacity: 0.65;
}

.peca-origem {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: #fff;
}

.peca-card-proprio .peca-origem {
    background: var(--verde);
}

.peca-card-externo .peca-origem {
    background: var(--vermelho);
}

/* Altura fixa de 2 linhas (pedido do usuário, set/2026) — a descrição
   já vem cortada em 50 caracteres no PHP (pecas.php), e o clamp aqui é
   um reforço visual (caso alguma descrição curta ainda quebre em 2
   linhas por causa da largura do card) pra sempre reservar o mesmo
   espaço, senão o botão "Adicionar" ficava desalinhado entre os cards. */
.peca-descricao {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    margin: 0 0 4px;
    min-height: calc(1.3em * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.peca-detalhe {
    font-size: 0.8rem;
    color: #6b7684;
    margin: 0 0 4px;
}

.peca-indisponivel-aviso {
    color: var(--vermelho);
    font-weight: 700;
    font-size: 0.82rem;
    margin-top: 8px;
}

.form-adicionar-peca {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 10px;
}

.form-adicionar-peca input[type="number"] {
    width: 60px;
    padding: 6px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 0.9rem;
}

.form-adicionar-peca button {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: var(--azul);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.form-adicionar-peca button:hover {
    background: var(--azul-escuro);
}

/* ---- pecas.php: lista de peças já anexadas na OS ---- */
.tabela-pecas-os {
    border-collapse: collapse;
    width: 100%;
    margin-top: 12px;
    font-size: 0.9rem;
}

.tabela-pecas-os th,
.tabela-pecas-os td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--cinza-borda);
    text-align: left;
}

.tabela-pecas-os thead th {
    color: var(--azul-escuro);
    font-size: 0.8rem;
    border-bottom: 2px solid var(--cinza-borda);
}

.etiqueta-origem-proprio {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #eafaf0;
    color: #1e7e45;
}

.etiqueta-origem-externo {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #fdecea;
    color: var(--erro);
}

/* ---- lista de serviços do Relatório do Cliente (set/2026) ---- */
/* Vai no FIM do arquivo e com especificidade maior que .form-modelo-serie
   label de propósito: aquela regra deixa todo <label> em negrito com
   margem no topo, o que serve pro rótulo da pergunta e estraga o rótulo
   de cada checkbox. Override com a MESMA especificidade, colocado antes
   dela, perderia — lição já catalogada neste projeto. */
.lista-servicos {
    list-style: none;
    margin: 4px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    background: #fff;
}

.lista-servicos li {
    margin: 0;
    padding: 3px 0;
}

.form-modelo-serie .lista-servicos label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 0;
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    line-height: 1.35;
}

.form-modelo-serie .lista-servicos input[type="checkbox"] {
    margin: 2px 0 0;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.lista-servicos em {
    color: #8a94a3;
    font-size: 0.8rem;
}

/* Serviços já gravados que a lista do modelo não oferece: continuam
   valendo e não são apagados ao salvar, por isso aparecem sem checkbox —
   um checkbox marcado e desabilitado pareceria clicável e enganaria. */
.lista-servicos-travada {
    background: var(--cinza-claro);
    color: #5a6675;
    font-size: 0.9rem;
}

.form-modelo-serie .rotulo-servicos {
    margin-top: 14px;
}

.ajuda-campo {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: #5a6675;
    line-height: 1.4;
}

/* O ✏️ de "Corrigir Modelo/Série" reaproveita a caixinha do ✏️ de
   Alterar Técnico, mas ali ele é um <summary> e aqui é um <a> — sem
   isto o link herda o sublinhado azul do navegador dentro do quadrado. */
a.botao-alterar-tecnico {
    text-decoration: none;
}

/* ---- abas de seção (telas do catálogo: Marcas e Modelos | Serviços por
   Tipo | Serviços por Modelo) — src/Views/abas_catalogo.php. Existem pra o
   menu lateral ter UM item por assunto (pedido do usuário, 10/09/2026).
   Classes novas, sem herdar de nada: não briga com regra nenhuma acima. ---- */
.abas-secao {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: -4px 0 16px;
    border-bottom: 1px solid var(--cinza-borda);
}

.aba-secao {
    padding: 9px 14px;
    color: var(--azul-escuro);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.aba-secao:hover { background: #eaf0f8; }

.aba-secao-atual {
    border-bottom-color: var(--azul);
    background: #eaf0f8;
}

/* Finalizar OS — etapa 2 (acessórios), 11/09/2026: fotos de ENTRADA maiores
   (é pra comparar parafuso, fusível e conector, não só reconhecer a peça)
   e o checkbox de confirmação em destaque, com área de toque grande. */
.foto-grid-grande {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.foto-grid-grande .foto-item img {
    height: 220px;
}

.form-fechar-os {
    margin-top: 20px;
}

.confirma-acessorios {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 2px solid var(--cinza-borda);
    border-radius: 8px;
    background: var(--cinza-claro);
    font-weight: 600;
    cursor: pointer;
}

.confirma-acessorios input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    margin: 0;
}

/* Botões "Continuar →" e "FECHAR OS" da finalização (pedido do usuário,
   11/09/2026): maiores e mais afastados do conteúdo de cima — são a ação
   principal da tela e não podem se perder no meio das fotos. */
.botao-fechar-grande {
    display: inline-block;
    margin-top: 32px;
    padding: 14px 32px;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    min-width: 220px;
}

@media (max-width: 700px) {
    .botao-fechar-grande {
        display: block;
        width: 100%;
        min-width: 0;
    }
}

/* Liberação (11/09/2026): o atalho "Reabrir OS" embaixo do LIBERAR OS fica
   separado por uma linha — é a ação oposta, e não pode ser clicada por
   engano no lugar da principal. */
.bloco-reabrir {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--cinza-borda);
}

/* Aviso de correção do supervisor no topo da OS reaberta. */
.aviso-reabertura {
    font-size: 1rem;
    line-height: 1.5;
}

/* Dentro do formulário em coluna (.form-modelo-serie — Liberar e Reabrir),
   o botão grande não estica até a largura do campo: fica do tamanho dele,
   igual ao FECHAR OS. No celular continua a linha toda (regra acima). */
.form-modelo-serie .botao-fechar-grande {
    align-self: flex-start;
}

@media (max-width: 700px) {
    .form-modelo-serie .botao-fechar-grande {
        align-self: stretch;
    }
}

/* "Tirar foto" (Adicionar Fotos, 11/09/2026). O input some só visualmente
   — o <label> estilizado como botão é o que a pessoa toca. */
.bloco-camera {
    margin: 12px 0 20px;
}

.camera-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.botao-camera {
    margin-top: 8px;
}

.camera-input:disabled + .botao-camera {
    opacity: 0.6;
    cursor: wait;
}

/* Ampliar foto (assets/js/foto-zoom.js, 11/09/2026): janela que acompanha o
   mouse e tela cheia no clique/toque. A janela não pega clique — os botões
   embaixo da foto continuam funcionando. */
.foto-grid img {
    cursor: zoom-in;
}

.foto-zoom {
    position: fixed;
    z-index: 1000;
    display: none;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.foto-zoom.foto-zoom-visivel {
    display: block;
}

.foto-zoom img {
    display: block;
    max-width: min(60vw, 900px);
    max-height: 80vh;
    border-radius: 6px;
}

.foto-tela-cheia {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.88);
    cursor: zoom-out;
}

.foto-tela-cheia[hidden] {
    display: none;
}

.foto-tela-cheia img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Conferência do supervisor na tela da OS (11/09/2026): o "Erro de
   diagnóstico — Reabrir" é um <details> — o botão vermelho abre o campo do
   aviso pro técnico. Sem o marcador padrão do <details>. */
.bloco-reabrir > summary {
    display: inline-block;
    list-style: none;
    cursor: pointer;
}

.bloco-reabrir > summary::-webkit-details-marker {
    display: none;
}

.bloco-reabrir[open] > summary {
    opacity: 0.85;
}

.bloco-reabrir > summary.botao-fechar-grande {
    margin-top: 0;
}

/* Serviços executados no resumo (Finalizar / Conferência): um por linha. */
.lista-resumo {
    margin: 0;
    padding-left: 18px;
}

.lista-resumo li + li {
    margin-top: 2px;
}

/* Nível do Serviço na Conferência do supervisor (11/09/2026): obrigatório e em
   destaque — "muito importante para a geração do orçamento". */
.campo-destaque {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 2px solid var(--azul);
    border-left-width: 6px;
    border-radius: 8px;
    background: #eef3fb;
}

.campo-destaque label {
    margin-top: 0;
    font-size: 1rem;
}

.campo-destaque select {
    padding: 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}

.obrigatorio {
    color: #b3261e;
    font-weight: 600;
}

/* ------------------------------------------------------------------
   GARANTIA (12/09/2026)
   ------------------------------------------------------------------
   O ATENDIMENTO marca, na entrada da OS, se o equipamento voltou em
   garantia nossa. Ele pediu que isso ficasse explícito **também para os
   técnicos**, e o motivo é prático: garantia descoberta depois de o
   equipamento estar aberto é retrabalho e conversa difícil com o
   cliente.

   Duas regras de desenho, as duas de propósito:

   1. **Cor que nada mais usa neste sistema** (laranja forte). Verde,
      azul, amarelo e vermelho já significam outras coisas aqui — reusar
      uma delas faria a garantia se confundir com situação de OS.
   2. **Nunca só cor.** A palavra "GARANTIA" está sempre escrita. Vale
      pra impressão em preto e branco e pra quem não distingue as cores.

   Quem escreve essas colunas é o atendimento; este sistema só lê (ver
   App\GarantiaOS). */
.faixa-garantia {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 2px solid #c2410c;
    border-left-width: 8px;
    border-radius: 8px;
    background: #fff4ed;
    color: #7c2d12;
}

.faixa-garantia strong {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.faixa-garantia a {
    color: #7c2d12;
    font-weight: 700;
}

/* Selo ao lado do número da OS, nas listagens. */
.selo-garantia {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #c2410c;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

/* ------------------------------------------------------------------
   AVISO DE MENSAGENS DO CHAT (13/09/2026)
   ------------------------------------------------------------------
   Ideia dele: em vez de uma tela de notificações separada (que existia
   no sistema antigo e que ninguém lembra de visitar), o aviso vai pro
   topo das LISTAGENS — onde a pessoa já está o dia inteiro.

   Usado pelos dois sistemas, por isso mora aqui no CSS compartilhado.
   Azul, e não laranja nem vermelho: laranja já é GARANTIA e vermelho já
   é orçamento aguardando aprovação. Cor repetida vira cor sem
   significado. */
.aviso-chat {
    margin: 0 0 14px;
}

.aviso-chat-caixa {
    border: 1px solid #bfdbfe;
    border-left: 6px solid #2563eb;
    border-radius: 8px;
    background: #f0f7ff;
}

.aviso-chat-caixa > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    color: #1e3a8a;
}

.aviso-chat-caixa > summary::-webkit-details-marker { display: none; }

/* O "+"/"−" vem do CSS, igual ao "+" da garantia. */
.aviso-chat-caixa > summary::after {
    content: "+";
    margin-left: auto;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
}

.aviso-chat-caixa[open] > summary::after { content: "−"; }

.aviso-chat-contagem { font-size: 0.9rem; color: #1d4ed8; }

/* Sem nenhuma mensagem nova, o aviso fica discreto: é lembrete, não
   alarme. */
.aviso-chat:not(.aviso-chat-tem-nova) .aviso-chat-caixa {
    border-left-color: #94a3b8;
    background: #f8fafc;
}

.aviso-chat-conteudo {
    padding: 4px 14px 12px;
    max-height: 420px;
    overflow-y: auto;
}

.aviso-chat-secao {
    margin: 10px 0 6px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1e3a8a;
}

.aviso-chat-secao-fraca { color: #64748b; }

.aviso-chat-os {
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.aviso-chat-os-nova { border-left: 4px solid #2563eb; }

/* Pendência JÁ VISTA: vermelho bem claro (pedido dele, 13/09/2026 — *"pra
   ficar mais fácil de diferenciar"*). Só um fundo, sem barra lateral: a
   barra azul continua sendo a marca do que é NOVO, e duas barras brigando
   pela atenção não diferenciam nada.

   ⚠️ Vermelho aqui NÃO quer dizer financeiro (que é o uso dele no resto do
   sistema): está dentro da caixa azul do chat, e o que ele quer dizer é
   "isto está parado esperando você desde a última vez". */
.aviso-chat-os-vista {
    background: #fef2f2;
    border-color: #fecaca;
}

.aviso-chat-numero {
    font-weight: 700;
    text-decoration: none;
}

.aviso-chat-msg {
    margin: 6px 0 0;
    font-size: 0.87rem;
    line-height: 1.45;
    color: #334155;
}

.aviso-chat-msg-nova { color: #0f172a; }

.aviso-chat-quando { font-size: 0.78rem; color: #64748b; }

.aviso-chat-rodape {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

/* ==========================================================================
   OS À ESQUERDA, NOTIFICAÇÕES DO CHAT À DIREITA (13/09/2026)
   ==========================================================================
   Pedido dele, depois de eu ter entendido errado da primeira vez: *"dentro
   da OS pode manter o chat como estava, abaixo da OS.. eu falei que no lado
   da OS ficariam as NOTIFICAÇÕES do chat abertas e não o próprio chat"*.

   Faz mais sentido mesmo: o chat desta OS já está na tela, logo abaixo. O
   que falta na hora de responder é a FILA — as outras OS que também estão
   esperando resposta. Com a fila aberta do lado, a pessoa responde uma,
   olha pra direita e já vai pra próxima, sem voltar pra listagem.

   ⚠️ Grade, e não float: a coluna 2 é declarada com `grid-row: 1 / span 100`
   pra atravessar a tela inteira sem precisar EMBRULHAR todo o conteúdo da
   esquerda num <div>. Embrulhar significaria mexer no começo e no fim de um
   arquivo grande cheio de if/else de PHP — a chance de fechar uma tag no
   lugar errado não compensa. Assim, tudo que existe hoje continua sendo
   filho direto, cai sozinho na coluna 1, e a única tag nova é o <aside>.
   As linhas vazias que sobram não ocupam nada porque o espaçamento entre
   linhas é zero (o respiro vem das margens que os blocos já têm).

   ⚠️ A classe é posta pelo PHP só quando existe pendência de verdade. Sem
   ela a tela fica exatamente como era — uma coluna. Não uso `:has()` pra
   isso: o tablet do balcão não é um navegador que eu escolhi. */

/* ⚠️ 1160px, e não os 1100 de `.conteudo-larga`: com 1100 a coluna da
   esquerda ficava com 628px e a tela do técnico ENCOLHERIA 44px em relação
   aos 672 de hoje — e a fila de botões do Conserto já está no limite dessa
   largura (ver layout_os.md). Com 1160 sobram 688: a esquerda continua do
   tamanho que é, e a fila de pendências é acréscimo, não troca. */
.conteudo-larga.os-grade-com-avisos {
    max-width: 1160px;
}

.os-grade-com-avisos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 0 24px;
    align-items: start;
}

.os-grade-com-avisos > * {
    grid-column: 1;
    min-width: 0;
}

.os-grade-com-avisos > .os-coluna-avisos {
    grid-column: 2;
    grid-row: 1 / span 100;
    min-width: 0;

    /* ⚠️ `align-self: stretch` é o que faz o "grudar" funcionar, e custou um
       teste pra descobrir: a grade está com `align-items: start`, então a
       coluna nascia do tamanho exato da caixa. Grudar dentro de uma caixa do
       próprio tamanho é não grudar em lugar nenhum — ela subia junto com a
       rolagem. Esticada, a coluna tem a altura da tela toda e aí sobra por
       onde deslizar. */
    align-self: stretch;
}

/* A fila acompanha a rolagem: a OS é comprida e a próxima pendência tem que
   continuar à vista enquanto a pessoa lê esta. */
.os-coluna-avisos .aviso-chat {
    position: sticky;
    top: 16px;
    margin: 0;
}

/* Alta demais, a fila empurra o rodapé e deixa de caber na tela: daqui pra
   frente ela rola por dentro. */
.os-coluna-avisos .aviso-chat-conteudo {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

/* Tela estreita (tablet do balcão de pé, celular): volta a ser uma coluna
   só, a fila vai pro fim e para de grudar — grudada numa tela baixa, ela
   cobriria a OS inteira. */
@media (max-width: 1040px) {
    .os-grade-com-avisos {
        display: block;
    }

    .os-coluna-avisos .aviso-chat {
        position: static;
    }

    .os-coluna-avisos .aviso-chat-conteudo {
        max-height: none;
        overflow-y: visible;
    }
}

/* ---- a casca ABERTA da fila (modo lateral do aviso_chat.php) ---- */
.aviso-chat-lateral .aviso-chat-caixa {
    padding: 0;
}

.aviso-chat-titulo-lateral {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px 14px;
    border-bottom: 1px solid #bfdbfe;
}

/* A OS que já está aberta na tela: fica marcada, sem virar link pra ela
   mesma — clicar num link que recarrega a própria página é o tipo de coisa
   que faz a pessoa achar que o sistema travou. */
/* ⚠️ Vem DEPOIS do vermelho de propósito: se a OS aberta agora também for
   uma pendência já vista, ganha o azul de "você está aqui". O vermelho serve
   pra achar o que está parado — e o que está na sua frente você já achou. */
.aviso-chat-os-atual {
    background: #eff6ff;
    border-left: 3px solid #2563eb;
}

.aviso-chat-aqui {
    font-weight: normal;
    font-size: 11px;
    color: #1d4ed8;
}

/* =====================================================================
   ORDEM DE CONSERTO — a fila que o atendimento arrasta (13/09/2026).
   ===================================================================== */

.fila-contagem {
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: #5b6777;
}

.fila {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fila-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--cinza-borda);
    border-left: 4px solid var(--azul);
    border-radius: 8px;
    /* A linha arrastada usa translateY; sem isto o navegador anima a
       volta ao lugar e a fila "escorrega" depois de soltar. */
    transition: none;
}

/* A alça (⠿). `touch-action: none` não é enfeite: sem ela, o navegador
   do tablet entende o primeiro movimento do dedo como ROLAR A PÁGINA e
   cancela o arrasto no meio — e o único jeito de descobrir isso é com um
   dedo de verdade num tablet de verdade. */
.fila-pegar {
    touch-action: none;
    cursor: grab;
    user-select: none;
    color: #94a3b8;
    /* Área de toque generosa de propósito: o alvo é um POLEGAR num
       tablet, não a ponta de um mouse. Com o ⠿ em 18px e 4px de folga,
       o alvo tinha 26px de largura — metade do que uma mão acerta sem
       olhar. */
    font-size: 20px;
    line-height: 1;
    padding: 10px 9px;
}

.fila-arrastando {
    position: relative;
    z-index: 5;
    cursor: grabbing;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    border-left-color: var(--verde);
    opacity: 0.95;
}

.fila-posicao {
    flex: 0 0 auto;
    min-width: 30px;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--azul-escuro);
    background: var(--cinza-claro);
    border-radius: 6px;
    padding: 4px 6px;
}

.fila-dados {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fila-linha-principal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fila-cliente {
    font-weight: 600;
}

.fila-linha-detalhe {
    font-size: 0.85rem;
    color: #5b6777;
}

.fila-separador {
    color: #b6bfcc;
    padding: 0 2px;
}

/* Os botões ▲/▼: o caminho que funciona sem JS e com teclado. Área de
   toque grande de propósito — é um dedo num tablet, não um mouse. */
.fila-botoes {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fila-botao {
    min-width: 38px;
    padding: 5px 8px;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    background: var(--cinza-claro);
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    color: var(--azul-escuro);
}

.fila-botao:hover:not([disabled]) {
    background: #eaf0f8;
    border-color: var(--azul);
}

.fila-botao[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* ---- tela do gerente (cadastro das ordens) ---- */

.fila-cartao {
    background: #fff;
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.fila-cartao-desativada {
    background: var(--cinza-claro);
    opacity: 0.75;
}

.fila-cartao-cabecalho {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.fila-cartao-cabecalho h2 {
    margin: 0;
    font-size: 1.05rem;
}

.fila-membros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px 12px;
    margin: 8px 0 12px;
}

.fila-membro {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    cursor: pointer;
}

/* A pessoa que já está em OUTRA ordem. Marcar aqui a TIRA de lá (uma
   pessoa só pode estar numa ordem), então o aviso aparece na própria
   linha — não adianta descobrir isso só depois de gravar. */
.fila-membro-noutra {
    font-size: 0.8rem;
    color: #92400e;
    background: #fef3c7;
    border-radius: 4px;
    padding: 1px 6px;
}

.fila-etiqueta-desativada {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #6b7280;
    background: #e5e7eb;
    border-radius: 4px;
    padding: 2px 7px;
}

/* O aviso de quem tem OS em conserto e não está em ordem nenhuma. Ele é
   a contrapartida da decisão de mostrar SÓ as ordens cadastradas: a OS
   dessas pessoas não aparece em lista nenhuma, e isso precisa ficar
   visível em algum lugar — aqui, que é onde se conserta. */
.fila-orfas {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.fila-orfas h2 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: #92400e;
}

.fila-orfas ul {
    margin: 6px 0 0;
    padding-left: 20px;
}

@media (max-width: 700px) {
    .fila-item {
        flex-wrap: wrap;
    }

    .fila-dados {
        flex-basis: 100%;
        order: 3;
    }

    .fila-botoes {
        flex-direction: row;
    }
}

/* ---- formulários da tela do gerente ---- */

.fila-form-linha {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}

.fila-campo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fila-campo label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #5b6777;
}

.fila-campo input[type="text"] {
    padding: 8px 10px;
    min-width: 230px;
    font-size: 0.95rem;
    color: var(--texto);
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
}

.fila-botao-principal {
    padding: 9px 18px;
    border: none;
    border-radius: 6px;
    background: var(--azul);
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
}

.fila-botao-principal:hover {
    background: var(--azul-escuro);
}

/* Desligar a ordem é vizinho do "Gravar participantes", e os dois não
   podem parecer o mesmo par de botões: um afasta o outro. */
.fila-form-desligar {
    margin-top: 16px;
}


/* ==================================================================
   FAIXA DO "VER COMO OUTRO USUÁRIO" (15/09/2026)
   ==================================================================
   Enquanto ela estiver na tela, o sistema inteiro está em SOMENTE
   LEITURA (ver App\Auth::barrarEscritaVendoComo). Por isso ela é
   impossível de não ver: fixa no rodapé, em todas as telas dos dois
   sistemas, sem jeito de fechar — quem some com ela é o botão de voltar.

   No RODAPÉ, e não no topo: a barra de cima já é fixa, tem título e
   menu, e disputar espaço com ela quebraria o layout em tela estreita.

   A cor é escura e diferente de tudo o que o sistema usa pra aviso
   normal: a pessoa precisa perceber DE RELANCE que não está no próprio
   usuário. */
.faixa-ver-como {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    padding: 10px 16px;
    background: #7a2d1f;
    color: #fff;
    font-size: 0.92rem;
    line-height: 1.3;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
}

.faixa-ver-como a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

/* A faixa é fixa, então cobriria a última linha da tela. Este respiro
   só existe quando ela está lá — por isso o `:has`. */
body:has(.faixa-ver-como) {
    padding-bottom: 56px;
}

/* No papel a faixa não tem função nenhuma. */
@media print {
    .faixa-ver-como {
        display: none;
    }

    body:has(.faixa-ver-como) {
        padding-bottom: 0;
    }
}

/* ---------------------------------------------------------------------
   Carrinho de peças (set/2026)

   O carrinho precisa parecer INACABADO. O risco desta tela é o técnico
   montar a lista, achar que pediu, e a peça nunca chegar — por isso o
   bloco é amarelo de aviso (não verde de "pronto"), tem a frase dizendo
   que o estoque não está vendo, e o botão de confirmar é o único
   elemento chamativo da página.
   ------------------------------------------------------------------ */
.carrinho-pecas {
    margin: 18px 0 26px;
    padding: 14px 16px 16px;
    border: 2px solid #e0a800;
    border-left-width: 6px;
    border-radius: 6px;
    background: #fff9e6;
}

.carrinho-titulo {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: #7a5b00;
}

.carrinho-explicacao {
    margin: 0 0 12px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #6b5200;
}

.form-confirmar-pedido {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.botao-confirmar-pedido {
    padding: 11px 20px;
    border: 0;
    border-radius: 5px;
    background: #1e7e34;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.botao-confirmar-pedido:hover {
    background: #17692c;
}

.confirmar-observacao {
    font-size: 0.8rem;
    color: #6b5200;
}

.botao-remover-peca,
.botao-devolver-peca {
    padding: 5px 11px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}

.botao-remover-peca:hover {
    border-color: #b02a37;
    color: #b02a37;
}

.botao-devolver-peca:hover {
    border-color: #0b5ed7;
    color: #0b5ed7;
}

/* Situação lida ao vivo do estoque. Só "Entregue" é verde: é o único
   estado em que a peça está de fato na mão do técnico. */
.estado-peca-aguardando,
.estado-peca-entregue,
.estado-peca-devolucao,
.estado-peca-devolvida {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.estado-peca-aguardando {
    background: #fff3cd;
    color: #7a5b00;
}

.estado-peca-entregue {
    background: #d4edda;
    color: #14602a;
}

.estado-peca-devolucao {
    background: #cfe2ff;
    color: #0a4275;
}

.estado-peca-devolvida {
    background: #e9ecef;
    color: #555;
}

/* Peças pedidas cujo número não voltou. Vermelho, não amarelo: aqui não
   é "falta fazer", é "pode ter dado errado lá fora". Sem botão nenhum de
   propósito — clicar de novo é exatamente o que não se deve fazer. */
.pecas-travadas {
    margin: 18px 0 26px;
    padding: 14px 16px;
    border: 2px solid #b02a37;
    border-left-width: 6px;
    border-radius: 6px;
    background: #fdeaec;
}

.pecas-travadas .carrinho-titulo,
.pecas-travadas .carrinho-explicacao {
    color: #7d1d26;
}

.lista-travadas {
    margin: 0;
    padding-left: 20px;
    font-size: 0.87rem;
    color: #7d1d26;
}

/* ---- Entrada x Saída (18/09/2026) ----
   Relatório do gerente dos técnicos. A tabela reaproveita .tabela-os; o
   que muda é que as colunas são NÚMEROS, e número em coluna só se
   compara de bate-pronto quando está alinhado à direita e em largura
   fixa (senão "1417" e "149" parecem do mesmo tamanho). */
.filtro-periodo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.filtro-periodo label {
    font-weight: 600;
    color: var(--azul-escuro);
    font-size: 0.9rem;
}

.filtro-periodo select {
    padding: 6px 10px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    font-size: 0.9rem;
    background: #fff;
    color: var(--texto);
}

.tabela-entrada-saida .numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tabela-entrada-saida tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--cinza-borda);
    border-bottom: none;
}

/* As duas últimas colunas EXPLICAM o saldo, não fazem parte dele.
   Ficam mais claras de propósito pra não competir com Entraram/Saíram. */
.tabela-entrada-saida .coluna-secundaria {
    color: #6b7684;
}

/* Saldo negativo = entrou mais do que saiu = galpão enchendo.
   A cor é reforço, nunca a única pista: o sinal (+/-) carrega o
   significado sozinho pra quem não distingue as duas cores. */
.tabela-entrada-saida .saldo-negativo {
    color: var(--vermelho-escuro);
    font-weight: 700;
}

.tabela-entrada-saida .saldo-positivo {
    color: var(--verde-escuro);
    font-weight: 700;
}

/* O rótulo "Gerou Orçamento - Não está pronto." é uma frase, não um
   rótulo curto — foi escolha dele, pra tirar qualquer dúvida sobre o que
   a coluna conta. Como .tabela-os th é nowrap, sem isto ele esticaria a
   tabela inteira numa linha só. */
.tabela-entrada-saida th.coluna-quebra {
    white-space: normal;
    max-width: 130px;
    line-height: 1.25;
}

/* ---- idade da fila de aprovação, na Consertando (18/09/2026) ----
   Vem DENTRO de <details> porque é informação de apoio: quem abriu a
   tela pra trabalhar nas OS não deveria ter que rolar por cima de duas
   tabelas de contagem. Nasce aberto (`open`) — a pergunta "está
   empoçando?" é justamente o que o gerente veio ver. */
.fila-idade {
    margin: 14px 0 26px;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    background: #fff;
    padding: 0 16px;
}

.fila-idade > summary {
    cursor: pointer;
    padding: 12px 0;
    font-weight: 600;
    color: var(--azul-escuro);
    font-size: 0.95rem;
    list-style: none;
}

.fila-idade > summary::-webkit-details-marker { display: none; }

.fila-idade > summary::after {
    content: "+";
    float: right;
    font-weight: 700;
    color: var(--azul);
}

.fila-idade[open] > summary::after { content: "−"; }

.fila-idade[open] { padding-bottom: 14px; }

.fila-idade .tabela-scroll { margin-top: 6px; }

.fila-idade h3 {
    margin: 22px 0 0;
    font-size: 0.95rem;
    color: var(--azul-escuro);
}

/* ---- Entrada x Saída: colunas de fila (18/09/2026) ----
   Os dois acumulados são o que o gerente veio conferir contra a tela
   Consertando. Ficam mais escuros que as colunas de fluxo porque são
   ESTADO (quantas existem), não movimento (quantas passaram) — e ler as
   duas coisas como se fossem a mesma é o erro que esta tela inteira
   existe para evitar. */
.tabela-entrada-saida .destaque-fila {
    font-weight: 700;
    color: var(--azul-escuro);
    background: var(--cinza-claro);
}

/* O tique do mês medido. Tem `title`, e o texto de apoio explica o que
   ele quer dizer — cor sozinha não carrega significado nenhum. */
.marca-medido {
    color: var(--verde-escuro);
    font-weight: 700;
    margin-left: 4px;
}

.aviso-reconstrucao {
    margin-top: 22px;
    padding: 14px 18px;
}

.aviso-reconstrucao p {
    margin: 0 0 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 400;
}

.aviso-reconstrucao p:last-child { margin-bottom: 0; }

/* A nota que substituiu a coluna "Outros" (18/09/2026). Fica com uma
   borda à esquerda para não se perder entre os outros parágrafos de
   ajuda: ela carrega um número que mexe no acumulado da tabela. */
.nota-outros {
    border-left: 3px solid var(--cinza-borda);
    padding-left: 12px;
    margin-top: 16px;
}

/* "Serviços pendentes de conserto" — a soma das duas filas, e a linha de
   baixo da tela. Mais forte que as duas colunas que a compõem, porque é
   o número que o gerente leva para a reunião. */
.tabela-entrada-saida .destaque-total {
    font-weight: 700;
    color: #fff;
    background: var(--azul);
}

/* ---- índice dos relatórios (18/09/2026) ----
   Cartões em vez de lista de links: cada relatório precisa de uma linha
   de explicação, senão "Entrada x Saída" não diz a ninguém o que vai
   encontrar lá dentro. */
.lista-relatorios {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cartao-relatorio {
    display: block;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--cinza-borda);
    border-left: 4px solid var(--azul);
    border-radius: 8px;
    text-decoration: none;
    color: var(--texto);
}

.cartao-relatorio:hover,
.cartao-relatorio:focus-visible {
    border-color: var(--azul);
    border-left-color: var(--azul-escuro);
    background: var(--cinza-claro);
}

.cartao-relatorio-titulo {
    display: block;
    font-weight: 700;
    color: var(--azul-escuro);
    margin-bottom: 6px;
}

.cartao-relatorio-resumo {
    display: block;
    font-size: 0.88rem;
    line-height: 1.45;
}

/* ---- matriz técnico x dia (18/09/2026) ----
   31 colunas de números: só cabe se cada uma for estreita e o nome do
   técnico ficar grudado à esquerda enquanto a pessoa rola pro lado. */
.tabela-dias {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.82rem;
}

.tabela-dias th,
.tabela-dias td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--cinza-borda);
    text-align: right;
    white-space: nowrap;
}

.tabela-dias thead th {
    color: var(--azul-escuro);
    font-size: 0.78rem;
    border-bottom: 2px solid var(--cinza-borda);
}

.tabela-dias tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--cinza-borda);
    border-bottom: none;
}

/* O nome fica visível enquanto rola: sem isso, na coluna do dia 27
   ninguém sabe mais de quem é a linha. */
.tabela-dias .coluna-tecnico {
    position: sticky;
    left: 0;
    background: #fff;
    text-align: left;
    font-weight: 600;
    min-width: 150px;
    z-index: 1;
}

.tabela-dias tfoot .coluna-tecnico { background: var(--cinza-claro); }

.celula-vazia { color: #b6bfca; }

/* As não prontas: mesma célula, peso menor. A barra separa sem precisar
   de uma segunda tabela só para elas. */
.celula-nao-pronta {
    color: #a36a00;
    font-size: 0.78rem;
}

/* "Prontas sem defeito": saiu da casa, mas nao foi conserto. Cinza-azulado
   de proposito — nao e alerta (o tecnico fez o trabalho), e so uma leitura
   diferente do mesmo numero. */
.celula-sem-defeito {
    color: #4a6b8a;
    font-size: 0.78rem;
}

.exemplo-sem-defeito {
    font-weight: 600;
}

/* A dica de ordenacao fica colada na tabela de proposito: e instrucao
   daquela tabela, nao explicacao dos numeros. */
.dica-ordenacao {
    margin-top: 6px;
    margin-bottom: 14px;
}

/* Quem faz parte de cada grupo, embaixo do nome dele na tabela de totais
   (relatorio por grupo). Menor e mais claro que o nome: e contexto pra
   explicar o numero da linha, nao um dado pra ler linha a linha. */
.grupo-membros {
    display: block;
    margin-top: 3px;
    font-size: 0.76rem;
    line-height: 1.35;
    font-weight: 400;
    color: #5a6b7d;
}

.grupo-membros em {
    font-style: normal;
    color: #2b5fa8;
}

.grupo-sem-vinculo {
    color: #a36a00;
}

/* A linha curta de ressalva no topo (18/09/2026). Os avisos inteiros
   desceram para o fim da pagina a pedido dele; aqui fica so o aviso de
   uma linha, com o link que leva ate eles. Vermelho discreto: precisa
   ser visto sem tomar a tela, que era justamente o problema. */
.aviso-atalho {
    margin: 14px 0 10px;
    padding: 9px 14px;
    border-left: 4px solid var(--vermelho);
    background: #fdf3f2;
    border-radius: 0 6px 6px 0;
    font-size: 0.88rem;
    color: #8c2f22;
}

.aviso-atalho a {
    color: var(--vermelho-escuro);
    font-weight: 600;
    white-space: nowrap;
}

/* Vindo pelo link, o titulo nao pode colar na barra fixa do topo. */
#ressalvas {
    scroll-margin-top: 70px;
    margin-top: 28px;
}

/* "Entraram" fica separada das saidas por uma borda: sao conjuntos de OS
   diferentes, e colar as duas sugere que uma subtrai a outra. */
.tabela-os th.coluna-entrada,
.tabela-os td.coluna-entrada {
    border-right: 2px solid var(--cinza-borda);
    background: #fbfcfd;
}

/* Um cabecalho ordenavel pode quebrar linha: sem isto o nowrap de
   th[data-sort-type] ganha e "Liberadas / Nao prontas" estica a coluna
   inteira. Vem depois da regra .coluna-quebra para vencer no empate. */
.tabela-os th[data-sort-type].coluna-quebra {
    white-space: normal;
}

.aviso-fonte { margin: 18px 0 6px; padding: 14px 18px; }

.aviso-fonte p {
    margin: 0 0 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 400;
}

.aviso-fonte p:last-child { margin-bottom: 0; }

/* Fim de semana na matriz técnico x dia: só aparece quando houve
   movimento, e aí precisa ficar óbvio que não é um dia útil comum. */
.tabela-dias .coluna-fds {
    background: #fff7e6;
}

.tabela-dias tfoot .coluna-fds {
    background: #fdefd3;
}

.letra-semana {
    font-weight: 400;
    color: #8a94a1;
    font-size: 0.68rem;
}

.exemplo-fds {
    padding: 1px 6px;
    border-radius: 3px;
}

/* ==========================================================================
   EQUIPES — organograma + montagem (portado de eletrocan/equipe_trabalho)
   ==========================================================================
   O original vivia dentro de um Bootstrap alheio e por isso era um muro de
   !important. Aqui nao precisa: e o nosso proprio CSS. As linhas da arvore
   continuam sendo ::before/::after, que e o truque que desenha o
   organograma sem uma unica imagem nem svg.

   <div> em vez de <ul>/<li> de proposito, igual ao original: lista generica
   costuma herdar estilo de menu. */

.mapa-scroll {
    display: flex;
    overflow-x: auto;
    padding: 34px 16px;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    background: #fff;
}

.arvore,
.arvore-filhos {
    margin: 0;
    padding: 0;
    text-align: center;
}

.arvore {
    display: flex;
    gap: 40px;
    margin: 0 auto;
    flex-shrink: 0;
}

.arvore-filhos {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    position: relative;
}

.arvore-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 14px;
}

/* A vertical que desce do pai ate a fileira de filhos. */
.arvore-filhos::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 30px;
    border-left: 2px solid #b9c4cf;
}

/* A horizontal que liga os irmaos; as pontas param no meio do primeiro e
   do ultimo, e some quando o filho e unico. */
.arvore-item .arvore-item::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    height: 30px;
    border-top: 2px solid #b9c4cf;
}

.arvore-item .arvore-item:first-child::before { left: 50%; }
.arvore-item .arvore-item:last-child::before { right: 50%; }
.arvore-item .arvore-item:only-child::before { display: none; }

/* A vertical de cada filho ate a horizontal. */
.arvore-item .arvore-item::after {
    content: "";
    position: absolute;
    top: -30px;
    left: 50%;
    width: 0;
    height: 30px;
    border-left: 2px solid #b9c4cf;
}

.no-card {
    display: flex;
    flex-direction: column;
    width: 160px;
    min-width: 160px;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    font-size: 0.9rem;
    box-sizing: border-box;
}

.no-nome {
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.no-cargo {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: 2px;
    overflow-wrap: break-word;
}

/* Quem nao esta em equipe nenhuma: mesma carta, sem linhas, em grade. */
.arvore-solta {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
    margin-top: 10px;
}

.arvore-solta .no-card { opacity: 0.85; }

/* ---- a lista de quem entra na equipe ---- */
.lista-integrantes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 6px;
    margin: 10px 0 18px;
}

.integrante {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    cursor: pointer;
}

.integrante:hover { background: var(--cinza-claro); }

.integrante-nome { font-weight: 600; }

.integrante-cargo {
    font-size: 0.78rem;
    color: #5a6b7d;
}

.integrante-aviso {
    font-size: 0.74rem;
    color: #a36a00;
    margin-left: auto;
    text-align: right;
}

/* Travado: aparece, mas nao e clicavel. Some da lista seria pior — a
   pessoa procuraria o nome e nao acharia. */
.integrante-travado {
    cursor: not-allowed;
    background: #f7f8fa;
    color: #8b97a4;
}

.integrante-travado:hover { background: #f7f8fa; }

@media (max-width: 560px) {
    .lista-integrantes { grid-template-columns: 1fr; }
    .mapa-scroll { padding: 24px 10px; }
}