/* Folhas de Obra — Multidigital */

:root {
    --fundo: #f4f5f7;
    --superficie: #ffffff;
    --superficie-2: #f7f8fa;
    --superficie-3: #eef0f3;
    --borda: #e3e6eb;
    --borda-forte: #cfd4dc;
    --texto: #141821;
    --texto-2: #4a5263;
    --texto-3: #7a8294;
    --acento: #2c4bd8;
    --acento-hover: #2440bf;
    --acento-suave: #eaeefd;
    --acento-texto: #ffffff;

    --vermelho: #dc2f23;
    --vermelho-texto: #b42318;
    --vermelho-suave: #fdeceb;
    --amarelo: #f2b705;
    --amarelo-texto: #8f5b00;
    --amarelo-suave: #fff5d4;
    --verde: #1f9d55;
    --verde-texto: #16733e;
    --verde-suave: #e2f5ea;
    --azul-texto: #2c4bd8;
    --azul-suave: #eaeefd;

    --raio: 14px;
    --raio-pequeno: 9px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --sombra-media: 0 4px 16px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06);
    --sombra-grande: 0 20px 50px rgba(16, 24, 40, .18);
    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
    --altura-topo: 62px;
    --nav-baixo: 0px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #0e1116;
        --superficie: #161a21;
        --superficie-2: #1b2029;
        --superficie-3: #232a35;
        --borda: #2a313d;
        --borda-forte: #3a4352;
        --texto: #e9ecf1;
        --texto-2: #b3bac7;
        --texto-3: #838c9c;
        --acento: #6d86ff;
        --acento-hover: #8397ff;
        --acento-suave: #1f2747;
        --acento-texto: #0b0f1c;

        --vermelho: #f0564b;
        --vermelho-texto: #ff8a80;
        --vermelho-suave: #3a1a19;
        --amarelo: #f5c32c;
        --amarelo-texto: #f7cf5b;
        --amarelo-suave: #36290b;
        --verde: #34c373;
        --verde-texto: #6ddb9c;
        --verde-suave: #11301f;
        --azul-texto: #93a6ff;
        --azul-suave: #1f2747;

        --sombra: 0 1px 2px rgba(0, 0, 0, .3);
        --sombra-media: 0 6px 20px rgba(0, 0, 0, .35);
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--altura-topo) + 12px); }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--nav-baixo) + env(safe-area-inset-bottom));
}

h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 1.65rem; font-weight: 700; }
h2 { font-size: 1.15rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0; }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: .9em; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.ic {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Topo ---------- */

.topo {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--superficie) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--borda);
}
.topo-in {
    max-width: 1240px; margin: 0 auto; height: var(--altura-topo);
    padding: 0 max(20px, env(safe-area-inset-left));
    display: flex; align-items: center; gap: 28px;
}
.marca { display: flex; align-items: center; gap: 11px; color: var(--texto); text-decoration: none !important; }
.marca-logo {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: linear-gradient(145deg, #3a5bf0, #1f36b0);
    color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(44, 75, 216, .35);
}
.marca-logo-grande { width: 60px; height: 60px; border-radius: 17px; font-size: 22px; }
.marca-nome { display: flex; flex-direction: column; font-weight: 700; font-size: 15px; line-height: 1.15; }
.marca-nome small { font-weight: 500; color: var(--texto-3); font-size: 12px; }

.nav { display: flex; gap: 4px; flex: 1; }
.nav-link {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px;
    color: var(--texto-2); font-weight: 550; font-size: 14.5px; white-space: nowrap;
}
.nav-link:hover { background: var(--superficie-3); color: var(--texto); text-decoration: none; }
.nav-link.ativo { background: var(--acento-suave); color: var(--acento); }
.nav-link .ic { width: 17px; height: 17px; }

.topo-acoes { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--superficie-3); color: var(--texto-2);
    font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.avatar-pequeno { width: 32px; height: 32px; font-size: 12px; }
.avatar-cliente { border-radius: 10px; background: var(--acento-suave); color: var(--acento); }

.menu-conta { position: relative; }
.menu-conta summary { list-style: none; cursor: pointer; }
.menu-conta summary::-webkit-details-marker { display: none; }
.menu-conta[open] summary { box-shadow: 0 0 0 3px var(--acento-suave); }
.menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px;
    box-shadow: var(--sombra-media); padding: 6px; z-index: 50;
}
.menu-cabecalho { padding: 10px 12px; border-bottom: 1px solid var(--borda); margin-bottom: 6px; display: flex; flex-direction: column; }
.menu-cabecalho span { color: var(--texto-3); font-size: 13px; }
.menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px;
    border: 0; background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--superficie-3); text-decoration: none; }

/* ---------- Estrutura ---------- */

.conteudo {
    max-width: 1240px; margin: 0 auto;
    padding: 28px max(20px, env(safe-area-inset-left)) 60px;
}

.cabecalho-pagina {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    margin-bottom: 22px; flex-wrap: wrap;
}
.cabecalho-pagina .sub { color: var(--texto-3); margin-top: 6px; max-width: 70ch; }

.voltar {
    display: inline-flex; align-items: center; gap: 6px; color: var(--texto-3);
    font-weight: 550; font-size: 14px; margin-bottom: 14px;
}
.voltar:hover { color: var(--texto); text-decoration: none; }
.voltar .ic { width: 16px; height: 16px; }

.cartao {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio); box-shadow: var(--sombra);
}

.seccao-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 1.05rem; }
.seccao-titulo .ic { color: var(--texto-3); }

.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.duas-colunas-iguais { grid-template-columns: 1fr 1fr; }

/* ---------- Botões ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: 10px;
    border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 14.5px;
    cursor: pointer; white-space: nowrap; text-decoration: none !important;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn .ic { width: 17px; height: 17px; }
.btn-primario { background: var(--acento); color: var(--acento-texto); box-shadow: 0 1px 2px rgba(44, 75, 216, .3); }
.btn-primario:hover:not(:disabled) { background: var(--acento-hover); }
.btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); box-shadow: var(--sombra); }
.btn-secundario:hover:not(:disabled) { background: var(--superficie-2); border-color: var(--texto-3); }
.btn-fantasma { background: transparent; color: var(--texto-2); }
.btn-fantasma:hover { background: var(--superficie-3); color: var(--texto); }
.btn-perigo { background: var(--vermelho); color: #fff; }
.btn-perigo:hover { filter: brightness(.95); }
.btn-texto-perigo { color: var(--vermelho-texto); }
.btn-verde { background: var(--verde); color: #fff; box-shadow: 0 1px 2px rgba(31, 157, 85, .3); }
.btn-verde:hover:not(:disabled) { filter: brightness(.95); }
.btn-amarelo { background: var(--amarelo); color: #3b2a00; box-shadow: 0 1px 2px rgba(242, 183, 5, .35); }
.btn-amarelo:hover { filter: brightness(.97); }
.btn-grande { height: 48px; font-size: 15.5px; border-radius: 12px; }
.btn-pequeno { height: 32px; padding: 0 11px; font-size: 13.5px; border-radius: 8px; }
.btn-bloco { width: 100%; }

.btn-icone {
    width: 36px; height: 36px; display: inline-grid; place-items: center; flex: none;
    border-radius: 9px; border: 0; background: transparent; color: var(--texto-3); cursor: pointer;
}
.btn-icone:hover { background: var(--superficie-3); color: var(--texto); }
.btn-icone-perigo:hover { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.btn-icone-pequeno { width: 30px; height: 30px; }
.btn-icone-pequeno .ic { width: 16px; height: 16px; }
.btn-icone-claro { color: rgba(255, 255, 255, .85); }
.btn-icone-claro:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------- Estados ---------- */

.pill {
    display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 9px;
    border-radius: 99px; font-weight: 650; font-size: 12.5px; white-space: nowrap;
}
.pill-ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill-vermelho { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.pill-vermelho .pill-ponto { background: var(--vermelho); }
.pill-amarelo { background: var(--amarelo-suave); color: var(--amarelo-texto); }
.pill-amarelo .pill-ponto { background: var(--amarelo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amarelo) 25%, transparent); }
.pill-verde { background: var(--verde-suave); color: var(--verde-texto); }
.pill-verde .pill-ponto { background: var(--verde); }
.pill-grande { height: 34px; padding: 0 14px 0 12px; font-size: 14px; }
.pill-grande .pill-ponto { width: 10px; height: 10px; }

.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.ponto-vermelho { background: var(--vermelho); }
.ponto-amarelo { background: var(--amarelo); }
.ponto-verde { background: var(--verde); }

.etiqueta {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px;
    font-size: 12px; font-weight: 650; white-space: nowrap;
}
.etiqueta-grande { height: 30px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.etiqueta-vermelho { background: var(--vermelho-suave); color: var(--vermelho-texto); }
.etiqueta-amarelo { background: var(--amarelo-suave); color: var(--amarelo-texto); }
.etiqueta-verde { background: var(--verde-suave); color: var(--verde-texto); }
.etiqueta-azul { background: var(--azul-suave); color: var(--azul-texto); }
.etiqueta-neutro { background: var(--superficie-3); color: var(--texto-2); }
.texto-vermelho { color: var(--vermelho-texto); font-weight: 600; }

.faixa-vermelho { --faixa: var(--vermelho); }
.faixa-amarelo { --faixa: var(--amarelo); }
.faixa-verde { --faixa: var(--verde); }

/* ---------- Avisos ---------- */

.avisos {
    position: fixed; z-index: 60; top: calc(var(--altura-topo) + 12px); right: 16px; left: 16px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none;
}
.aviso {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px;
    background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-media);
    max-width: 460px; pointer-events: auto; font-weight: 500;
    animation: entrar-aviso .25s ease-out;
}
.aviso > span { flex: 1; white-space: pre-line; }
.aviso > .ic { margin-top: 2px; }
.aviso-sucesso > .ic { color: var(--verde); }
.aviso-erro { border-color: color-mix(in srgb, var(--vermelho) 35%, var(--borda)); }
.aviso-erro > .ic { color: var(--vermelho); }
.aviso-aviso > .ic { color: var(--amarelo-texto); }
.aviso-estatico { max-width: none; box-shadow: none; animation: none; margin-bottom: 16px; }
.aviso-estatico.aviso-erro { background: var(--vermelho-suave); color: var(--vermelho-texto); border-color: transparent; }
.aviso-estatico.aviso-aviso { background: var(--amarelo-suave); color: var(--amarelo-texto); border-color: transparent; }
.aviso-fechar { border: 0; background: none; color: var(--texto-3); cursor: pointer; padding: 0; margin: 1px 0 0 4px; }
.aviso-fechar .ic { width: 16px; height: 16px; }
.aviso.a-sair { opacity: 0; transform: translateY(-6px); transition: .25s; }
@keyframes entrar-aviso { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Estatísticas e filtros ---------- */

.estatisticas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.stat {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); color: var(--texto); text-decoration: none !important;
    position: relative; overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.stat:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }
.stat-rotulo { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-weight: 600; font-size: 13.5px; }
.stat-num { font-size: 1.9rem; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat.ativo { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), var(--sombra-media); }
.stat-vermelho.ativo { border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho), var(--sombra-media); }
.stat-amarelo.ativo { border-color: var(--amarelo); box-shadow: 0 0 0 1px var(--amarelo), var(--sombra-media); }
.stat-verde.ativo { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde), var(--sombra-media); }
.stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.stat-vermelho::after { background: var(--vermelho); }
.stat-amarelo::after { background: var(--amarelo); }
.stat-verde::after { background: var(--verde); }

.ligacao-alerta { color: var(--vermelho-texto); font-weight: 600; }

.filtros { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.pesquisa { position: relative; flex: 1 1 320px; display: flex; }
.pesquisa .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.pesquisa input[type=search] { padding-left: 40px; }
.filtros select { width: auto; flex: 0 1 220px; }
.filtro-ativo { display: flex; align-items: center; gap: 8px; color: var(--vermelho-texto); font-weight: 550; margin: -6px 0 14px; }

/* ---------- Formulários ---------- */

input[type=text], input[type=search], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], select, textarea {
    width: 100%; font: inherit; font-size: 15px; color: var(--texto);
    background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: 10px;
    padding: 9px 12px; min-height: 42px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; line-height: 1.5; }
select {
    appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237a8294' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
input[readonly], textarea[readonly] { background: var(--superficie-2); color: var(--texto-2); }
input::placeholder, textarea::placeholder { color: var(--texto-3); opacity: .85; }

.formulario { padding: 24px; }
.formulario-estreito { padding: 20px; }
.formulario-estreito .grelha-campos { grid-template-columns: 1fr; }
.grelha-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.formulario > .campo + .campo { margin-top: 16px; }
.campo-largo { grid-column: 1 / -1; }
.campo-rotulo { font-weight: 600; font-size: 13.5px; color: var(--texto-2); }
.campo-rotulo em { color: var(--vermelho); font-style: normal; }
.campo-ajuda { color: var(--texto-3); font-size: 13px; }
.campo-erro { color: var(--vermelho-texto); font-size: 13px; font-weight: 550; }
.campo-invalido input, .campo-invalido select, .campo-invalido textarea { border-color: var(--vermelho); }
.campo-password { position: relative; display: flex; }
.campo-password input { padding-right: 46px; }
.campo-password .btn-icone { position: absolute; right: 3px; top: 3px; }
.caixa { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.caixa input { width: 18px; height: 18px; accent-color: var(--acento); margin: 0; }
.formulario-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.numero-fixo { font-size: 1.35rem; font-weight: 700; padding: 6px 0; }
.dica { display: flex; align-items: center; gap: 8px; color: var(--texto-3); font-size: 14px; margin-top: 14px; }
.dica .ic { width: 16px; height: 16px; }

.zona-perigo {
    margin-top: 20px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; border-color: color-mix(in srgb, var(--vermelho) 25%, var(--borda));
}
.zona-perigo h2 { font-size: 1rem; }
.zona-perigo p { color: var(--texto-3); font-size: 14px; margin-top: 4px; max-width: 60ch; }
.zona-perigo-acao { display: flex; gap: 10px; }
.zona-perigo-acao input { width: 170px; }
.eliminar-discreto { margin-top: 14px; display: flex; justify-content: flex-end; }

/* ---------- Números ---------- */

.num { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .01em; }
.num-ano { color: var(--texto-3); font-weight: 600; margin-right: 1px; }

/* ---------- Lista de folhas de obra ---------- */

.lista-ordens { display: flex; flex-direction: column; gap: 8px; }
.ordem {
    display: grid; grid-template-columns: 110px minmax(0, 1fr) auto 118px; align-items: center; gap: 18px;
    padding: 14px 18px 14px 22px; position: relative;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); color: var(--texto); text-decoration: none !important;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ordem::before {
    content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px;
    border-radius: 0 4px 4px 0; background: var(--faixa);
}
.ordem:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }
.ordem-num { font-size: 15.5px; }
.ordem-principal { min-width: 0; }
.ordem-titulo { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ordem-cliente { display: flex; align-items: center; gap: 6px; color: var(--texto-3); font-size: 13.5px; margin-top: 2px; min-width: 0; }
.ordem-cliente span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ordem-cliente .ic { width: 14px; height: 14px; }
.ordem-ref { flex: none; }
.ordem-meta { display: flex; align-items: center; gap: 14px; color: var(--texto-3); font-size: 13px; }
.meta { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.meta .ic { width: 14px; height: 14px; }
.meta-atrasada { color: var(--vermelho-texto); font-weight: 650; }
.contadores { display: inline-flex; gap: 10px; }
.contador { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.contador .ic { width: 14px; height: 14px; }
.ordem-estado { justify-self: end; }
.lista-compacta .ordem { grid-template-columns: 100px minmax(0, 1fr) 118px; }
.lista-compacta .ordem-meta { display: none; }

.paginacao { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 20px; }
.paginacao > :last-child { justify-self: end; }
.paginacao-info { color: var(--texto-3); font-size: 14px; }

/* ---------- Vazio ---------- */

.vazio { text-align: center; padding: 56px 20px; color: var(--texto-3); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vazio h1, .vazio h2 { color: var(--texto); }
.vazio p { max-width: 46ch; }
.vazio .btn { margin-top: 10px; }
.vazio-icone { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--superficie-3); margin-bottom: 6px; }
.vazio-icone .ic { width: 28px; height: 28px; stroke-width: 1.6; }
.vazio-codigo { font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.vazio-pequeno { padding: 28px 16px; flex-direction: row; justify-content: center; gap: 10px; }
.vazio-erro .vazio-icone { color: var(--vermelho); background: var(--vermelho-suave); }

/* ---------- Detalhe da folha de obra ---------- */

.ordem-cabecalho, .checklist-cabecalho { padding: 24px 26px; position: relative; overflow: hidden; margin-bottom: 20px; }
.ordem-cabecalho::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--faixa); }
.oc-topo { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.oc-identidade { min-width: 0; }
.oc-numero { display: flex; align-items: center; gap: 4px; font-size: 1.05rem; color: var(--texto-2); }
.oc-numero .ic { width: 16px; height: 16px; color: var(--texto-3); }
.oc-titulo { font-size: 1.6rem; margin: 6px 0 8px; overflow-wrap: anywhere; }
.oc-cliente { display: inline-flex; align-items: center; gap: 7px; color: var(--texto-2); font-weight: 550; }
.oc-cliente .ic { width: 16px; height: 16px; color: var(--texto-3); }
.oc-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.oc-acoes form { display: contents; }
.oc-editar { margin-left: auto; }
.sobretitulo { color: var(--texto-3); font-size: 13.5px; font-weight: 550; }
.sobretitulo a { color: var(--texto-2); }

.passos { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--borda); display: grid; grid-template-columns: repeat(3, 1fr); }
.passo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; color: var(--texto-3); min-width: 0; }
.passo:not(:last-child)::after {
    content: ""; position: absolute; left: 34px; right: 8px; top: 12px; height: 2px;
    background: var(--borda); z-index: 0;
}
.passo.feito:not(:last-child)::after { background: var(--texto-3); }
.passo-marca {
    width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
    border: 2px solid var(--borda-forte); background: var(--superficie); position: relative; z-index: 1;
}
.passo-marca .ic { width: 14px; height: 14px; stroke-width: 2.6; }
.passo-texto { display: flex; flex-direction: column; line-height: 1.25; padding-right: 8px; }
.passo-texto strong { font-size: 13.5px; color: var(--texto-2); }
.passo-texto small { font-size: 12px; }
.passo.feito .passo-marca { background: var(--texto-3); border-color: var(--texto-3); color: var(--superficie); }
.passo.atual .passo-marca { border-color: var(--faixa-passo); background: var(--faixa-passo); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--faixa-passo) 22%, transparent); }
.passo.atual strong { color: var(--texto); }
.passo-vermelho { --faixa-passo: var(--vermelho); }
.passo-amarelo { --faixa-passo: var(--amarelo); }
.passo-verde { --faixa-passo: var(--verde); }

.oc-dados { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--borda); }
.oc-dados dt { color: var(--texto-3); font-size: 12.5px; font-weight: 600; }
.oc-dados dd { margin: 2px 0 0; font-weight: 550; overflow-wrap: anywhere; }
.oc-descricao { margin-top: 18px; padding: 14px 16px; background: var(--superficie-2); border-radius: 10px; color: var(--texto-2); white-space: normal; overflow-wrap: anywhere; }

/* ---------- Separadores ---------- */

.separadores {
    display: flex; gap: 4px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--borda); position: sticky; top: var(--altura-topo); z-index: 30;
    background: var(--fundo); padding-top: 4px;
}
.separadores::-webkit-scrollbar { display: none; }
.separador {
    display: flex; align-items: center; gap: 7px; padding: 11px 14px; white-space: nowrap;
    color: var(--texto-3); font-weight: 600; font-size: 14.5px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.separador:hover { color: var(--texto); text-decoration: none; }
.separador .ic { width: 17px; height: 17px; }
.separador.ativo { color: var(--acento); border-bottom-color: var(--acento); }
.separador-n {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
    background: var(--superficie-3); color: var(--texto-2); font-size: 12px; font-variant-numeric: tabular-nums;
}
.separador.ativo .separador-n { background: var(--acento-suave); color: var(--acento); }
.painel:not(.ativo) { display: none; }
.painel { margin-bottom: 24px; }

/* ---------- Carregamento ---------- */

.carregar { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.segmentado { display: inline-flex; background: var(--superficie-3); padding: 3px; border-radius: 11px; gap: 2px; align-self: flex-start; max-width: 100%; overflow-x: auto; }
.segmento input { position: absolute; opacity: 0; pointer-events: none; }
.segmento span {
    display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px; cursor: pointer;
    font-weight: 600; font-size: 14px; color: var(--texto-2); white-space: nowrap;
}
.segmento span .ic { width: 16px; height: 16px; }
.segmento input:checked + span { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.segmento input:focus-visible + span { outline: 2px solid var(--acento); }

.zona-largar {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 26px 18px; border: 1.5px dashed var(--borda-forte); border-radius: var(--raio);
    background: var(--superficie); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.zona-largar:hover, .zona-largar.sobre { border-color: var(--acento); background: var(--acento-suave); }
.zona-largar input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zona-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); margin-bottom: 4px; }
.zona-icone .ic { width: 22px; height: 22px; }
.zona-texto { color: var(--texto-2); }
.zona-texto u { color: var(--acento); text-decoration: none; font-weight: 600; }
.zona-ajuda { color: var(--texto-3); font-size: 13px; }
.entrada-discreta { background: var(--superficie); }
.linha-campos { display: grid; grid-template-columns: 180px 1fr; gap: 10px; }
.botoes-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.botoes-foto input { display: none; }

.fila { display: flex; flex-direction: column; gap: 6px; }
.fila:empty { display: none; }
.fila-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
    padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; font-size: 14px;
}
.fila-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; }
.fila-estado { color: var(--texto-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.fila-item .progresso { grid-column: 1 / -1; }
.fila-item.erro { border-color: color-mix(in srgb, var(--vermelho) 40%, var(--borda)); }
.fila-item.erro .fila-estado { color: var(--vermelho-texto); grid-column: 1 / -1; white-space: pre-line; }
.fila-item.feito .fila-estado { color: var(--verde-texto); font-weight: 600; }

.progresso { height: 6px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; }
.progresso > span { display: block; height: 100%; border-radius: inherit; background: var(--acento); transition: width .25s ease; }
.progresso-grande { height: 10px; }
.progresso .progresso-verde { background: var(--verde); }
.progresso .progresso-vermelho { background: var(--vermelho); }
.progresso .progresso-azul { background: var(--acento); }

/* ---------- Ficheiros ---------- */

.grupo-titulo { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 14.5px; color: var(--texto-2); }
.grupo-titulo .ic { color: var(--texto-3); }
.grupo-titulo span { color: var(--texto-3); font-weight: 500; }
.ficheiros { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.ficheiro { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.ficheiro + .ficheiro { border-top: 1px solid var(--borda); }
.ficheiro-ext {
    width: 42px; height: 46px; flex: none; border-radius: 8px; display: grid; place-items: end center; padding-bottom: 7px;
    background: var(--superficie-3); color: var(--texto-2); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
}
.ext-pdf { background: #fde3e1; color: #b42318; }
.ext-doc, .ext-docx, .ext-odt, .ext-rtf { background: #e1eafd; color: #1d4ed8; }
.ext-xls, .ext-xlsx, .ext-ods, .ext-csv { background: #dcf3e5; color: #15803d; }
.ext-zip, .ext-7z { background: #fdf0d5; color: #92400e; }
.ext-dwg, .ext-dxf, .ext-step, .ext-stp, .ext-stl { background: #ede4fd; color: #6d28d9; }
@media (prefers-color-scheme: dark) {
    .ext-pdf { background: #3d1c1a; color: #ff9a90; }
    .ext-doc, .ext-docx, .ext-odt, .ext-rtf { background: #1c2847; color: #9db4ff; }
    .ext-xls, .ext-xlsx, .ext-ods, .ext-csv { background: #13301f; color: #7ddca3; }
    .ext-zip, .ext-7z { background: #362a10; color: #f5c56b; }
    .ext-dwg, .ext-dxf, .ext-step, .ext-stp, .ext-stl { background: #2a1f45; color: #c4a9ff; }
}
.ficheiro-info { flex: 1; min-width: 0; }
.ficheiro-nome { font-weight: 600; color: var(--texto); display: block; overflow-wrap: anywhere; }
.ficheiro-desc { color: var(--texto-2); font-size: 14px; }
.ficheiro-meta { color: var(--texto-3); font-size: 13px; }
.ficheiro-acoes { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.ficheiro-acoes form { display: contents; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.foto {
    aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--superficie-3);
    position: relative; display: block; box-shadow: var(--sombra);
}
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.foto:hover img { transform: scale(1.04); }
.foto-sem-miniatura { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; color: var(--texto-3); font-size: 12.5px; text-align: center; overflow-wrap: anywhere; }

.lightbox {
    position: fixed; inset: 0; z-index: 100; background: rgba(8, 10, 14, .94);
    display: flex; align-items: center; justify-content: center; touch-action: pan-y pinch-zoom;
}
.lightbox-imagem { max-width: calc(100vw - 32px); max-height: calc(100vh - 110px); object-fit: contain; border-radius: 6px; user-select: none; }
.lightbox-barra {
    position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 6px;
    padding: max(10px, env(safe-area-inset-top)) 12px 10px 18px; color: #fff;
    background: linear-gradient(rgba(0, 0, 0, .5), transparent);
}
.lightbox-legenda { flex: 1; font-size: 14px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, .22); }
.lightbox-nav .ic { width: 24px; height: 24px; }
.lightbox-anterior { left: 16px; }
.lightbox-seguinte { right: 16px; }

.firmwares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.firmware { padding: 16px 18px; }
.firmware-recente { border-color: color-mix(in srgb, var(--verde) 35%, var(--borda)); }
.firmware-topo { display: flex; align-items: center; gap: 10px; }
.firmware-versao { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; }
.firmware-nome { display: flex; align-items: center; gap: 7px; font-weight: 600; margin-top: 8px; overflow-wrap: anywhere; }
.firmware-nome .ic { color: var(--texto-3); width: 16px; height: 16px; }
.firmware-desc { color: var(--texto-2); margin-top: 2px; }
.hash { font-family: var(--mono); font-size: 12px; }
.firmware-conteudo { margin-top: 10px; font-size: 13.5px; }
.firmware-conteudo summary { cursor: pointer; color: var(--acento); font-weight: 600; }
.firmware-conteudo ul { list-style: none; padding: 8px 12px; margin: 8px 0 0; background: var(--superficie-2); border-radius: 8px; }
.firmware-conteudo li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-family: var(--mono); font-size: 12.5px; }
.firmware-conteudo li span:first-child { overflow-wrap: anywhere; }
.firmware-conteudo li span:last-child { color: var(--texto-3); white-space: nowrap; }

/* ---------- Checklists ---------- */

.nova-checklist { padding: 16px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 16px; }
.checklists { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.checklist-linha { padding: 16px; display: flex; flex-direction: column; gap: 8px; color: var(--texto); text-decoration: none !important; transition: box-shadow .15s, border-color .15s; }
.checklist-linha:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }
.checklist-linha-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }

.checklist-progresso { margin-top: 18px; }
.checklist-numeros { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--texto-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.checklist-numeros span { display: inline-flex; align-items: center; gap: 4px; }
.checklist-numeros .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.c-ok .ic { color: var(--verde); }
.c-nok .ic { color: var(--vermelho); }
.c-na .ic { color: var(--texto-3); }
.checklist-conclusao { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--texto-2); font-weight: 550; }

.itens-checklist { list-style: none; padding: 0; margin: 0 0 20px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.ck-secao {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 16px; background: var(--superficie-2); font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); border-top: 1px solid var(--borda);
}
.ck-secao:first-child { border-top: 0; }
.ck-secao form { display: contents; }
.ck-item { padding: 12px 16px; border-top: 1px solid var(--borda); position: relative; transition: background-color .2s; }
.ck-item:first-child { border-top: 0; }
.ck-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.ck-item.resultado-ok::before { background: var(--verde); }
.ck-item.resultado-nok::before { background: var(--vermelho); }
.ck-item.resultado-nok { background: color-mix(in srgb, var(--vermelho-suave) 45%, var(--superficie)); }
.ck-item.resultado-na::before { background: var(--borda-forte); }
.ck-principal { display: flex; align-items: center; gap: 12px; }
.ck-n { width: 24px; flex: none; color: var(--texto-3); font-weight: 650; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.ck-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ck-quem { color: var(--texto-3); font-size: 12px; }
.ck-quem:empty { display: none; }
.ck-botoes { display: flex; gap: 6px; flex: none; }
.ck-botao {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto-2);
    font: inherit; font-weight: 650; font-size: 13.5px; cursor: pointer; transition: all .12s;
    -webkit-tap-highlight-color: transparent;
}
.ck-botao .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.ck-botao:hover:not(:disabled) { border-color: var(--texto-3); }
.ck-botao:disabled { cursor: default; }
.ck-ok[aria-pressed=true] { background: var(--verde); border-color: var(--verde); color: #fff; }
.ck-nok[aria-pressed=true] { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.ck-na[aria-pressed=true] { background: var(--texto-3); border-color: var(--texto-3); color: var(--superficie); }
.so-leitura .ck-botao:not([aria-pressed=true]) { opacity: .45; }
.ck-extra { display: flex; align-items: center; gap: 6px; margin: 8px 0 0 36px; }
.ck-extra form { display: contents; }
.ck-obs { min-height: 34px !important; padding: 5px 10px !important; font-size: 14px !important; background: transparent !important; border-color: transparent !important; }
.ck-obs:hover { border-color: var(--borda) !important; }
.ck-obs:focus { background: var(--superficie) !important; border-color: var(--acento) !important; }
.ck-obs.guardado { box-shadow: 0 0 0 3px var(--verde-suave) !important; }
.ck-item.a-guardar { opacity: .7; }

.adicionar-itens, .nova-nota { padding: 16px; margin-bottom: 16px; }
.nova-nota .formulario-acoes, .adicionar-itens .formulario-acoes { margin-top: 10px; }
.detalhes-editar { padding: 0; }
.detalhes-editar summary { padding: 14px 18px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto-2); }
.detalhes-editar > form:first-of-type { padding: 0 18px 18px; }
.detalhes-editar .eliminar-discreto { padding: 0 18px 14px; margin: 0; }

/* ---------- Notas e histórico ---------- */

.notas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nota { display: flex; gap: 12px; padding: 14px 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.nota-corpo { flex: 1; min-width: 0; }
.nota-topo { display: flex; align-items: center; gap: 10px; }
.nota-topo time { color: var(--texto-3); font-size: 13px; }
.nota-topo form { margin-left: auto; }
.nota-texto { margin-top: 4px; color: var(--texto-2); overflow-wrap: anywhere; }

.historico { list-style: none; margin: 0; padding: 4px 0 0 6px; }
.historico li { display: flex; gap: 14px; padding-bottom: 16px; position: relative; }
.historico li:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: -2px; width: 2px; background: var(--borda); }
.historico-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--borda-forte); margin-top: 6px; flex: none; }
.historico li:first-child .historico-ponto { background: var(--acento); }
.historico small { color: var(--texto-3); }

/* ---------- Clientes, modelos, utilizadores ---------- */

.lista-simples { display: flex; flex-direction: column; gap: 8px; }
.linha-cliente { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: var(--texto); text-decoration: none !important; transition: box-shadow .15s, border-color .15s; }
.linha-cliente:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }
.linha-cliente-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.linha-cliente-info small { color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-cliente-numeros { display: flex; align-items: center; gap: 10px; color: var(--texto-2); font-size: 14px; white-space: nowrap; }
.linha-cliente-numeros small { color: var(--texto-3); }
.seta { color: var(--texto-3); }
.inativo { opacity: .6; }

.grelha-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cartao-modelo { padding: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--texto); text-decoration: none !important; transition: box-shadow .15s, border-color .15s; }
.cartao-modelo:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-media); }
.cartao-modelo p { color: var(--texto-2); font-size: 14px; }
.cartao-modelo-icone { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--verde-suave); color: var(--verde-texto); margin-bottom: 6px; }

.password-temporaria { display: flex; gap: 14px; padding: 18px 20px; margin-bottom: 18px; border-color: color-mix(in srgb, var(--amarelo) 50%, var(--borda)); background: var(--amarelo-suave); }
.password-temporaria > .ic { color: var(--amarelo-texto); margin-top: 3px; }
.password-temporaria p { color: var(--texto-2); font-size: 14px; margin: 2px 0 10px; }
.password-codigo { display: inline-block; font-size: 1.3rem; font-weight: 700; padding: 8px 14px; background: var(--superficie); border-radius: 9px; letter-spacing: .04em; cursor: copy; user-select: all; }

/* ---------- Entrar ---------- */

.pagina-simples { min-height: 100vh; min-height: 100dvh; display: flex; background: radial-gradient(1200px 600px at 50% -10%, var(--acento-suave), transparent 70%), var(--fundo); }
.simples { margin: auto; width: 100%; max-width: 420px; padding: 32px 20px; }
.entrar-marca { text-align: center; margin-bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.entrar-marca h1 { font-size: 1.6rem; }
.entrar-marca p { color: var(--texto-3); margin-top: -6px; }
.entrar-cartao { padding: 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra-media); }
.entrar-cartao .aviso { margin: 0; }
.entrar-cartao .btn { margin-top: 4px; }

/* ---------- Navegação inferior (telemóvel) ---------- */

.nav-baixo { display: none; }
.so-movel { display: none !important; }

@media (max-width: 1100px) {
    .so-desktop-largo { display: none !important; }
    .nav-link { padding: 8px 10px; }
    .nav-link .ic { display: none; }
}

@media (max-width: 860px) {
    :root { --altura-topo: 56px; --nav-baixo: 66px; }
    body { font-size: 15.5px; }
    .so-desktop { display: none !important; }
    .menu-item.so-movel { display: flex !important; }
    .sair-movel.so-movel { display: block !important; margin-top: 20px; }
    .botoes-foto.so-movel { display: grid !important; }
    .nav { display: none; }
    .topo-in { gap: 12px; }
    .marca-logo { width: 32px; height: 32px; font-size: 13px; }

    .nav-baixo {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); align-items: center;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        height: calc(var(--nav-baixo) + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
        background: color-mix(in srgb, var(--superficie) 92%, transparent);
        backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
        border-top: 1px solid var(--borda);
    }
    .nav-baixo-link {
        display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0;
        color: var(--texto-3); font-size: 11px; font-weight: 600; text-decoration: none !important;
    }
    .nav-baixo-link .ic { width: 22px; height: 22px; }
    .nav-baixo-link.ativo { color: var(--acento); }
    .nav-baixo-nova {
        justify-self: center; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
        background: linear-gradient(145deg, #3a5bf0, #1f36b0); color: #fff; margin-top: -18px;
        box-shadow: 0 6px 18px rgba(44, 75, 216, .45);
    }
    .nav-baixo-nova .ic { width: 26px; height: 26px; stroke-width: 2.3; }

    .avisos { top: auto; bottom: calc(var(--nav-baixo) + env(safe-area-inset-bottom) + 12px); align-items: stretch; }
    .aviso { max-width: none; }

    .conteudo { padding-top: 18px; padding-bottom: 32px; }
    h1 { font-size: 1.4rem; }
    .cabecalho-pagina { margin-bottom: 16px; align-items: flex-start; }

    .estatisticas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
    .stat { padding: 9px 8px 11px; align-items: center; text-align: center; border-radius: 12px; gap: 0; }
    .stat-rotulo { font-size: 11.5px; gap: 5px; white-space: nowrap; }
    .stat-rotulo .ponto { width: 7px; height: 7px; }
    .stat-num { font-size: 1.35rem; order: -1; }
    .filtros select { flex: 1 1 140px; }
    .filtros { gap: 8px; }

    .ordem {
        grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num estado" "principal principal" "meta meta";
        gap: 4px 10px; padding: 12px 14px 12px 18px;
    }
    .ordem-num { grid-area: num; }
    .ordem-estado { grid-area: estado; }
    .ordem-principal { grid-area: principal; }
    .ordem-titulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .ordem-meta { grid-area: meta; flex-wrap: wrap; gap: 4px 12px; }
    .ordem-meta:not(:has(.meta, .contador)) { display: none; }
    .lista-compacta .ordem { grid-template-columns: minmax(0, 1fr) auto; }
    .pill { height: 24px; font-size: 12px; }

    .ordem-cabecalho, .checklist-cabecalho { padding: 18px; border-radius: 16px; }
    .oc-topo { flex-direction: column-reverse; gap: 10px; }
    .oc-titulo { font-size: 1.3rem; }
    .oc-acoes { display: grid; grid-template-columns: 1fr 1fr; }
    .oc-acoes .btn { width: 100%; }
    .oc-acoes > form:first-child .btn:only-child, .oc-acoes .btn-verde, .oc-acoes .btn-amarelo { grid-column: 1 / -1; height: 48px; font-size: 15.5px; }
    .oc-editar { margin-left: 0; }
    .oc-dados { grid-template-columns: 1fr 1fr; }
    .passo-texto small { font-size: 11px; }

    .separadores { margin: 0 -20px 16px; padding: 4px 12px 0; }
    .separador { padding: 11px 10px; font-size: 14px; }

    .formulario { padding: 18px; }
    .grelha-campos, .duas-colunas, .duas-colunas-iguais { grid-template-columns: 1fr; }
    .formulario-acoes { display: grid; grid-template-columns: 1fr 1fr; }
    .formulario-acoes .btn:only-child { grid-column: 1 / -1; }
    .zona-perigo { padding: 18px; }
    .zona-perigo-acao { width: 100%; }
    .zona-perigo-acao input { flex: 1; width: auto; }

    .linha-campos { grid-template-columns: 1fr; }
    .galeria { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .foto { border-radius: 6px; box-shadow: none; }
    .lightbox-nav { display: none; }
    .lightbox-imagem { max-width: 100vw; max-height: calc(100vh - 80px); border-radius: 0; }

    .nova-checklist { grid-template-columns: 1fr; }
    .checklists { grid-template-columns: 1fr; }
    .ck-item { padding: 12px 14px; }
    .ck-principal { flex-wrap: wrap; gap: 10px; }
    .ck-n { width: auto; text-align: left; }
    .ck-texto { flex-basis: calc(100% - 40px); }
    .ck-botoes { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
    .ck-botao { justify-content: center; height: 44px; }
    .ck-extra { margin-left: 0; }
    .ck-obs { background: var(--superficie-2) !important; }

    .linha-cliente { padding: 12px 14px; }
    .linha-cliente-numeros { flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; }
    .paginacao { grid-template-columns: 1fr 1fr; }
    .paginacao-info { display: none; }
}

@media (max-width: 350px) {
    .stat-rotulo { font-size: 10.5px; }
    .ck-botao span { display: none; }
}

@media (hover: none) {
    .foto:hover img { transform: none; }
}