/* =====================================================================
   Refrigere — tema principal (mobile-first)
   Cores extraídas da logo: marinho #0B4F82, índigo #2E3B96, gelo #62A6DE
   ===================================================================== */

:root {
    --marinho: #0B4F82;
    --marinho-escuro: #083A60;
    --indigo: #2E3B96;
    --gelo: #62A6DE;
    --gelo-claro: #E6F1FB;

    --fundo: #F2F7FB;
    --superficie: #FFFFFF;
    --superficie-2: #F7FAFD;
    --borda: #DCE6F0;
    --borda-forte: #C3D3E3;
    --texto: #0F2740;
    --texto-2: #52687F;
    --texto-3: #8497AB;

    --primaria: var(--marinho);
    --primaria-hover: var(--marinho-escuro);
    --primaria-suave: #E3EEF8;
    --sobre-primaria: #FFFFFF;
    --foco: rgba(98, 166, 222, .45);

    --sucesso: #0E9F6E;   --sucesso-suave: #E3F6EE;
    --aviso: #C27C0E;     --aviso-suave: #FDF3E1;
    --perigo: #D93A3F;    --perigo-suave: #FDE8E8;
    --info: #2F7FC4;      --info-suave: #E5F0FB;

    --raio: 12px;
    --raio-sm: 8px;
    --raio-lg: 18px;
    --sombra-1: 0 1px 2px rgba(15, 39, 64, .06), 0 1px 3px rgba(15, 39, 64, .05);
    --sombra-2: 0 8px 24px rgba(15, 39, 64, .10);
    --sombra-3: 0 18px 48px rgba(15, 39, 64, .18);

    --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fonte-titulo: 'Montserrat', var(--fonte);

    --sidebar-w: 264px;
    --topbar-h: 60px;
    --nav-inferior-h: 64px;
    --seguro-baixo: env(safe-area-inset-bottom, 0px);

    color-scheme: light;
}

:root[data-tema="escuro"] {
    --fundo: #0B1422;
    --superficie: #111D2E;
    --superficie-2: #16243A;
    --borda: #22344D;
    --borda-forte: #2E4563;
    --texto: #E7EEF6;
    --texto-2: #9FB2C7;
    --texto-3: #6F849B;

    --primaria: #4F9BE0;
    --primaria-hover: #6BAEEA;
    --primaria-suave: #16304D;
    --sobre-primaria: #06121F;
    --gelo-claro: #16304D;

    --sucesso: #34C38F;   --sucesso-suave: #10302A;
    --aviso: #F0B44C;     --aviso-suave: #33280F;
    --perigo: #F2686C;    --perigo-suave: #3A1A1D;
    --info: #63AEF0;      --info-suave: #142C45;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
    --sombra-2: 0 8px 24px rgba(0, 0, 0, .35);
    --sombra-3: 0 18px 48px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--fonte-titulo); line-height: 1.25; margin: 0 0 .5em; color: var(--texto); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.ti { font-size: 1.25em; line-height: 1; }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Logo por tema */
.logo-tema-escuro { display: none !important; }
:root[data-tema="escuro"] .logo-tema-claro { display: none !important; }
:root[data-tema="escuro"] .logo-tema-escuro { display: block !important; }
.icone-tema-escuro { display: none; }
:root[data-tema="escuro"] .icone-tema-claro { display: none; }
:root[data-tema="escuro"] .icone-tema-escuro { display: inline-block; }

/* ---------------------------------------------------------------------
   Estrutura: sidebar + topbar + conteúdo + navegação inferior
   --------------------------------------------------------------------- */
.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    width: min(86vw, var(--sidebar-w));
    display: flex; flex-direction: column;
    background: var(--superficie);
    border-right: 1px solid var(--borda);
    transform: translateX(-100%);
    transition: transform .25s ease;
}
body.menu-aberto .sidebar { transform: none; box-shadow: var(--sombra-3); }
.sidebar-fundo {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(6, 18, 31, .45);
    opacity: 0; pointer-events: none; transition: opacity .25s;
}
body.menu-aberto .sidebar-fundo { opacity: 1; pointer-events: auto; }
body.menu-aberto { overflow: hidden; }

.sidebar-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 10px 20px; }
.sidebar-logo img { height: 46px; width: auto; }
.sidebar-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 6px 12px 16px; }
.sidebar-grupo {
    margin: 18px 10px 6px; font-size: .7rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3);
}
.sidebar-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin: 2px 0; border-radius: var(--raio-sm);
    color: var(--texto-2); font-weight: 500;
}
.sidebar-link:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.sidebar-link.ativo { background: var(--primaria-suave); color: var(--primaria); font-weight: 600; }
.sidebar-link.ativo .ti { color: var(--primaria); }
.sidebar-link.desabilitado { opacity: .55; }
.selo-breve {
    margin-left: auto; font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; flex-shrink: 0;
    padding: 2px 6px; border-radius: 99px; background: var(--superficie-2); color: var(--texto-3); border: 1px solid var(--borda);
}
.sidebar-rodape { border-top: 1px solid var(--borda); padding: 12px; }
.sidebar-usuario { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--raio-sm); color: var(--texto); }
.sidebar-usuario:hover { background: var(--superficie-2); text-decoration: none; }
.sidebar-usuario-info { display: flex; flex-direction: column; min-width: 0; }
.sidebar-usuario-info strong { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-usuario-info small { color: var(--texto-3); font-size: .78rem; }

.principal { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 40;
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px 0 16px;
    background: color-mix(in srgb, var(--superficie) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--borda);
}
.topbar-logo img { height: 38px; width: auto; }
/* Botão voltar: no celular só a seta; no computador seta + nome da tela de destino */
.topbar-voltar {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
    min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px;
    color: var(--texto-2); font-weight: 600; font-size: .88rem;
}
.topbar-voltar:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }
.topbar-voltar .ti { font-size: 1.3rem; }
.topbar-voltar-texto { display: none; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-titulo { display: none; margin: 0; font-size: 1.1rem; }
.topbar-voltar + .topbar-logo { display: none; }
.topbar-voltar ~ .topbar-titulo { display: block; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-acoes { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.topbar-avatar { background: none; border: 0; padding: 4px; cursor: pointer; border-radius: 99px; }

/* Conteúdo fluido: ocupa toda a largura disponível (sem faixas vazias em telas largas) */
.conteudo {
    flex: 1; width: 100%; margin: 0;
    padding: 16px 16px calc(var(--nav-inferior-h) + var(--seguro-baixo) + 24px);
}

.nav-inferior {
    position: fixed; inset: auto 0 0 0; z-index: 50;
    display: flex; justify-content: space-around;
    height: calc(var(--nav-inferior-h) + var(--seguro-baixo));
    padding-bottom: var(--seguro-baixo);
    background: var(--superficie);
    border-top: 1px solid var(--borda);
    box-shadow: 0 -4px 18px rgba(15, 39, 64, .06);
}
.nav-inferior-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; cursor: pointer;
    color: var(--texto-3); font-size: .72rem; font-weight: 600;
    position: relative;
}
.nav-inferior-item .ti { font-size: 1.5rem; }
.nav-inferior-item:hover { text-decoration: none; color: var(--texto-2); }
.nav-inferior-item.ativo { color: var(--primaria); }
.nav-inferior-item.ativo::before {
    content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--primaria);
}
.nav-inferior-item.desabilitado { opacity: .45; }

@media (min-width: 1024px) {
    .sidebar { transform: none; width: var(--sidebar-w); }
    .sidebar .sidebar-fechar, .sidebar-fundo { display: none; }
    .principal { margin-left: var(--sidebar-w); }
    .topbar { padding: 0 24px 0 28px; height: 64px; }
    .topbar-logo { display: none; }
    .topbar-titulo, .topbar-voltar ~ .topbar-titulo { display: block; font-size: 1.15rem; }
    .topbar .topbar-voltar {
        border: 1px solid var(--borda); background: var(--superficie); padding: 0 12px 0 10px; margin-right: 6px;
    }
    .topbar .topbar-voltar:hover { border-color: var(--borda-forte); background: var(--superficie-2); }
    .topbar-voltar-texto { display: inline; }
    .conteudo { padding: 28px 28px 48px; }
    .nav-inferior { display: none; }
}
/* Telas bem largas: margens um pouco maiores para respirar */
@media (min-width: 1600px) {
    .conteudo { padding: 32px 40px 56px; }
}

/* ---------------------------------------------------------------------
   Componentes
   --------------------------------------------------------------------- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gelo), var(--marinho));
    color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .02em;
}
.avatar-lg { width: 84px; height: 84px; font-size: 1.8rem; box-shadow: 0 8px 24px rgba(11, 79, 130, .3); }
.avatar-sm { width: 30px; height: 30px; font-size: .72rem; }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.avatar:has(img) { background: var(--superficie-2); overflow: hidden; }

.btn-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    background: none; border: 0; cursor: pointer; color: var(--texto-2);
}
.btn-icone:hover { background: var(--superficie-2); color: var(--texto); text-decoration: none; }

/* Botões */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 18px;
    border-radius: var(--raio-sm); border: 1px solid transparent;
    font-weight: 600; font-size: .94rem; line-height: 1.2;
    cursor: pointer; text-decoration: none !important; white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.carregando { opacity: .65; pointer-events: none; }
.btn-primario { background: var(--primaria); color: var(--sobre-primaria); box-shadow: 0 4px 12px rgba(11, 79, 130, .22); }
.btn-primario:hover { background: var(--primaria-hover); }
.btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); }
.btn-secundario:hover { background: var(--superficie-2); }
.btn-fantasma { background: transparent; color: var(--texto-2); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.btn-perigo { background: var(--perigo); color: #fff; }
.btn-perigo:hover { filter: brightness(.94); }
.btn-perigo-suave { background: var(--perigo-suave); color: var(--perigo); }
.btn-sucesso { background: var(--sucesso); color: #fff; }
.btn-bloco { width: 100%; }
.btn-lg { min-height: 52px; font-size: 1rem; border-radius: var(--raio); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: .85rem; }
.btn.carregando::after {
    content: ''; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Cartões */
.cartao {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio); box-shadow: var(--sombra-1);
}
.cartao-corpo { padding: 18px; }
.cartao-cabecalho {
    display: flex; align-items: center; gap: 10px; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--borda);
}
.cartao-cabecalho h2, .cartao-cabecalho h3 { margin: 0; font-size: 1rem; }
.cartao-rodape { padding: 14px 18px; border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 var(--raio) var(--raio); }
/* Rodapé com o mesmo recuo lateral do corpo: botões alinham com os campos */
@media (min-width: 768px) { .cartao-corpo { padding: 24px; } .cartao-rodape { padding: 16px 24px; } }

/* Cabeçalho da página */
.pagina-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 18px; }
.pagina-cabecalho h1 { margin: 0; font-size: 1.35rem; }
.pagina-cabecalho p { margin: 2px 0 0; color: var(--texto-2); font-size: .92rem; }
.pagina-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* Seção com título (padrão do relatório) */
.secao-titulo {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--fonte); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--marinho); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--gelo-claro);
}
:root[data-tema="escuro"] .secao-titulo { color: var(--gelo); }

/* Formulários */
.form-grade { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
    .form-grade.cols-2 { grid-template-columns: repeat(2, 1fr); }
    .form-grade.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .col-todas { grid-column: 1 / -1; }
}
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .rotulo { font-size: .85rem; font-weight: 600; color: var(--texto); }
.campo .obrig { color: var(--perigo); }
.campo-ajuda { font-size: .8rem; color: var(--texto-3); }
.campo-erro { font-size: .8rem; color: var(--perigo); display: flex; align-items: center; gap: 4px; }
.entrada, select.entrada, textarea.entrada {
    width: 100%; min-height: 46px; padding: 10px 14px;
    font: inherit; font-size: 16px; /* 16px evita zoom no iPhone */
    color: var(--texto); background: var(--superficie);
    border: 1px solid var(--borda-forte); border-radius: var(--raio-sm);
    transition: border-color .15s, box-shadow .15s;
    appearance: none; -webkit-appearance: none;
}
textarea.entrada { min-height: 96px; resize: vertical; }
select.entrada {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238497AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.entrada::placeholder { color: var(--texto-3); }
.entrada:focus { outline: none; border-color: var(--gelo); box-shadow: 0 0 0 4px var(--foco); }
.entrada.invalido, .invalido .entrada { border-color: var(--perigo); }
.entrada[readonly], .entrada:disabled { background: var(--superficie-2); color: var(--texto-2); }
.entrada-grupo { position: relative; display: flex; align-items: center; }
.entrada-grupo > .ti:first-child { position: absolute; left: 14px; color: var(--texto-3); pointer-events: none; }
.entrada-grupo > .ti:first-child + .entrada { padding-left: 44px; }
.entrada-grupo .entrada-acao {
    position: absolute; right: 4px; width: 40px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; color: var(--texto-3); border-radius: 6px;
}
.entrada-grupo .entrada-acao:hover { color: var(--texto); }
.entrada-grupo:has(.entrada-acao) .entrada { padding-right: 48px; }

.checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .92rem; user-select: none; }
.checkbox input { width: 20px; height: 20px; accent-color: var(--primaria); }

/* Interruptor (ativo/inativo) */
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .92rem; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor-trilho {
    width: 44px; height: 26px; border-radius: 99px; background: var(--borda-forte);
    position: relative; transition: background .2s; flex-shrink: 0;
}
.interruptor-trilho::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; box-shadow: var(--sombra-1); transition: transform .2s;
}
.interruptor input:checked + .interruptor-trilho { background: var(--sucesso); }
.interruptor input:checked + .interruptor-trilho::after { transform: translateX(18px); }
.interruptor input:focus-visible + .interruptor-trilho { outline: 3px solid var(--foco); outline-offset: 2px; }

.form-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 8px; }
@media (max-width: 639px) {
    .form-acoes { flex-direction: column-reverse; }
    .form-acoes .btn { width: 100%; }
}

/* Alertas */
.alerta {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin-bottom: 16px; border-radius: var(--raio-sm);
    font-size: .92rem; border: 1px solid transparent;
    animation: surgir .25s ease;
}
.alerta > .ti { margin-top: 1px; }
.alerta > div { flex: 1; }
.alerta-fechar { background: none; border: 0; cursor: pointer; opacity: .6; padding: 0; color: inherit; }
.alerta-fechar:hover { opacity: 1; }
.alerta-sucesso { background: var(--sucesso-suave); color: var(--sucesso); border-color: color-mix(in srgb, var(--sucesso) 25%, transparent); }
.alerta-erro { background: var(--perigo-suave); color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 25%, transparent); }
.alerta-aviso { background: var(--aviso-suave); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 25%, transparent); }
.alerta-info { background: var(--info-suave); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.alerta a { color: inherit; font-weight: 600; text-decoration: underline; word-break: break-all; }
@keyframes surgir { from { opacity: 0; transform: translateY(-4px); } }

/* Selos (badges) */
.selo {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 99px;
    font-size: .76rem; font-weight: 600; white-space: nowrap;
    background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda);
}
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo-sem-ponto::before { display: none; }
.selo-sucesso { background: var(--sucesso-suave); color: var(--sucesso); border-color: transparent; }
.selo-perigo { background: var(--perigo-suave); color: var(--perigo); border-color: transparent; }
.selo-aviso { background: var(--aviso-suave); color: var(--aviso); border-color: transparent; }
.selo-info { background: var(--info-suave); color: var(--info); border-color: transparent; }
.selo-primario { background: var(--primaria-suave); color: var(--primaria); border-color: transparent; }

/* Filtros / busca */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.filtros .entrada-grupo { flex: 1 1 240px; }
.filtros select.entrada { flex: 0 1 180px; }
@media (max-width: 639px) { .filtros select.entrada { flex: 1 1 45%; } }

/* Abas tipo "pílula" */
.pilulas { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; margin-bottom: 16px; scrollbar-width: none; }
.pilulas::-webkit-scrollbar { display: none; }
.pilula {
    padding: 7px 14px; border-radius: 99px; white-space: nowrap;
    font-size: .85rem; font-weight: 600; color: var(--texto-2);
    background: var(--superficie); border: 1px solid var(--borda);
}
.pilula:hover { text-decoration: none; border-color: var(--borda-forte); color: var(--texto); }
.pilula.ativo { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.pilula .contador { opacity: .7; margin-left: 4px; font-weight: 500; }

/* Tabela (desktop) que vira lista de cartões (celular) */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th {
    text-align: left; padding: 12px 16px; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3);
    background: var(--superficie-2); border-bottom: 1px solid var(--borda);
}
.tabela td { padding: 14px 16px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-2); }
.tabela .acoes { text-align: right; white-space: nowrap; }
.celula-pessoa { display: flex; align-items: center; gap: 12px; }
.celula-pessoa strong { display: block; }
.celula-pessoa small { color: var(--texto-3); }
.texto-suave { color: var(--texto-2); }
/* Linha inteira da tabela clicável (data-href) */
.tabela-clicavel tbody tr[data-href] { cursor: pointer; }
.link-forte { color: var(--texto); font-weight: 600; display: block; overflow-wrap: anywhere; }
.link-forte:hover { color: var(--primaria); }
.celula-pessoa small { display: block; }
.avatar-cliente { border-radius: 12px; background: var(--primaria-suave); color: var(--primaria); font-size: 1.1rem; }
.avatar-cliente.pf { background: var(--sucesso-suave); color: var(--sucesso); }
.texto-fraco { color: var(--texto-3); }
.texto-perigo { color: var(--perigo) !important; }

@media (max-width: 767px) {
    .tabela-responsiva thead { display: none; }
    .tabela-responsiva, .tabela-responsiva tbody, .tabela-responsiva tr, .tabela-responsiva td { display: block; width: 100%; }
    .tabela-responsiva tr { padding: 14px 16px; border-bottom: 1px solid var(--borda); position: relative; }
    .tabela-responsiva tr:last-child { border-bottom: 0; }
    .tabela-responsiva td { padding: 3px 0; border: 0; }
    .tabela-responsiva td[data-rotulo]::before {
        content: attr(data-rotulo) ': '; color: var(--texto-3); font-size: .8rem; font-weight: 600;
    }
    .tabela-responsiva td.td-principal { padding-bottom: 8px; padding-right: 48px; }
    .tabela-responsiva td.acoes { position: absolute; top: 12px; right: 8px; padding: 0; }
}

/* Estado vazio */
.vazio {
    text-align: center; padding: 48px 20px; color: var(--texto-2);
    border: 1.5px dashed var(--borda-forte); border-radius: var(--raio); background: var(--superficie);
}
.vazio > .ti { font-size: 2.8rem; color: var(--texto-3); display: block; margin: 0 auto 10px; }
.vazio p { margin: 0 0 4px; }

/* Paginação */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--borda); font-size: .88rem; color: var(--texto-2); }
.paginacao nav { display: flex; gap: 4px; }
.paginacao a, .paginacao span.atual {
    min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; padding: 0 10px; border: 1px solid var(--borda); color: var(--texto-2); background: var(--superficie);
}
.paginacao a:hover { text-decoration: none; background: var(--superficie-2); }
.paginacao span.atual { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); font-weight: 600; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
    min-width: 230px; padding: 6px;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra-2);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all .15s;
}
.dropdown.aberto .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.dropdown-menu a, .dropdown-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px; border-radius: 8px; border: 0; background: none; cursor: pointer;
    color: var(--texto); font-size: .92rem; text-align: left;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--superficie-2); text-decoration: none; }
.dropdown-menu form { margin: 0; }
.dropdown-cabecalho { padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; }
.dropdown-cabecalho small { color: var(--texto-3); }

/* Toast */
.toast-area {
    position: fixed; left: 50%; transform: translateX(-50%); z-index: 100;
    bottom: calc(var(--nav-inferior-h) + var(--seguro-baixo) + 14px);
    display: flex; flex-direction: column; gap: 8px; width: min(92vw, 380px); pointer-events: none;
}
@media (min-width: 1024px) { .toast-area { bottom: 24px; left: auto; right: 24px; transform: none; } }
.toast {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: #10233A; color: #fff; border-radius: var(--raio-sm); box-shadow: var(--sombra-3);
    font-size: .9rem; animation: surgir .2s ease; pointer-events: auto;
}

/* Modal de confirmação (celular: sobe de baixo; desktop: centralizado) */
.modal-fundo {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 12px 12px calc(12px + var(--seguro-baixo));
    background: rgba(6, 18, 31, .55);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .18s ease;
}
.modal-fundo.aberto { opacity: 1; }
body.modal-aberto { overflow: hidden; }
.modal {
    width: 100%; max-width: 420px; padding: 24px 20px 18px; text-align: center;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: 20px; box-shadow: var(--sombra-3);
    transform: translateY(24px); transition: transform .2s ease;
}
.modal-fundo.aberto .modal { transform: none; }
.modal h2 { font-size: 1.12rem; margin: 0 0 6px; }
.modal p { color: var(--texto-2); font-size: .94rem; margin: 0 0 22px; overflow-wrap: break-word; text-wrap: pretty; }
.modal-icone {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.modal-icone-perigo { background: var(--perigo-suave); color: var(--perigo); }
.modal-icone-primario { background: var(--primaria-suave); color: var(--primaria); }
.modal-acoes { display: flex; flex-direction: column-reverse; gap: 10px; }
.modal-acoes .btn { width: 100%; min-height: 48px; }
@media (min-width: 640px) {
    .modal-fundo { align-items: center; }
    .modal { padding: 28px 28px 22px; transform: scale(.96); }
    .modal-acoes { flex-direction: row; justify-content: center; }
    .modal-acoes .btn { width: auto; min-width: 130px; }
}

/* Grade de indicadores (painel) */
/* Todos os indicadores na mesma linha, com larguras iguais (qualquer quantidade) */
.grade-kpi { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 20px; }
@media (min-width: 640px) { .grade-kpi { gap: 16px; } }
.kpi { display: flex; align-items: center; gap: 12px; padding: 14px; min-width: 0; }
.kpi > div { min-width: 0; }
.kpi-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Texto alternativo por tamanho de tela: <span class="so-celular">Coord.</span><span class="so-desktop">Coordenadores</span> */
.so-celular { display: none; }
@media (max-width: 639px) { .so-celular { display: inline; } .so-desktop { display: none; } }
/* Celular: cartão compacto e centralizado (ícone, número, rótulo) */
@media (max-width: 639px) {
    .kpi { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 2px 10px; }
    .kpi > div { display: flex; flex-direction: column-reverse; align-items: center; width: 100%; }
    .grade-kpi .kpi-icone { width: 34px; height: 34px; border-radius: 10px; font-size: 1.05rem; }
    .grade-kpi .kpi-valor { font-size: 1.3rem; }
    .grade-kpi .kpi-rotulo {
        font-size: .62rem; letter-spacing: 0; line-height: 1.2; margin-top: 3px; max-width: 100%;
        white-space: normal; overflow-wrap: normal; min-height: 2.4em; display: block;
    }
}
.kpi-icone {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    background: var(--primaria-suave); color: var(--primaria);
}
.kpi-icone.sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.kpi-icone.aviso { background: var(--aviso-suave); color: var(--aviso); }
.kpi-icone.perigo { background: var(--perigo-suave); color: var(--perigo); }
.kpi-rotulo { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.kpi-valor { font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 700; line-height: 1.1; }

/* Boas-vindas */
.boas-vindas {
    position: relative; overflow: hidden;
    padding: 22px; margin-bottom: 20px; border-radius: var(--raio-lg);
    color: #fff; background: linear-gradient(125deg, var(--marinho) 0%, var(--indigo) 100%);
    box-shadow: 0 12px 30px rgba(11, 79, 130, .28);
}
.boas-vindas h1 { color: #fff; font-size: 1.35rem; margin-bottom: 4px; }
.boas-vindas p { margin: 0; opacity: .85; font-size: .94rem; }
.boas-vindas::after {
    content: ''; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(98, 166, 222, .45), transparent 70%);
}
.boas-vindas .floco { position: absolute; right: 18px; bottom: -14px; font-size: 7rem; opacity: .12; }

/* Lista de linhas tipo "rótulo: valor" */
.lista-dados { display: grid; gap: 14px 24px; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 640px) { .lista-dados { grid-template-columns: repeat(2, 1fr); } }
.lista-dados dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin-bottom: 2px; }
.lista-dados dd { margin: 0; font-weight: 500; }

/* Perfil */
.perfil-topo { text-align: center; padding: 28px 18px 22px; }
.perfil-topo .avatar { margin: 0 auto 14px; }
.perfil-topo h2 { margin: 0; font-size: 1.3rem; }
.perfil-topo .perfil-sub { color: var(--primaria); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }

/* Grades utilitárias */
.grade { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
/* Itens de grade/flex não podem crescer além da tela por causa de texto longo */
.grade > *, .pilha > *, .cartao { min-width: 0; }
@media (min-width: 900px) { .grade-2-1 { grid-template-columns: 2fr 1fr; } .grade-1-2 { grid-template-columns: 1fr 2fr; } .grade-2 { grid-template-columns: 1fr 1fr; } }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: 16px; } .mb-2 { margin-bottom: 16px; }
.pilha > * + * { margin-top: 16px; }
.linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.espaco { flex: 1; }

/* ---------------------------------------------------------------------
   Telas de acesso (login / recuperar senha)
   --------------------------------------------------------------------- */
.layout-simples { background: var(--fundo); }
.acesso { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.acesso-marca { display: none; }
.acesso-painel {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px 16px calc(20px + var(--seguro-baixo));
    background:
        radial-gradient(1200px 400px at 50% -200px, rgba(98, 166, 222, .25), transparent 70%),
        var(--fundo);
}
.acesso-cartao {
    width: 100%; max-width: 420px;
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: 20px; box-shadow: var(--sombra-2);
    padding: 28px 22px;
}
.acesso-logo { display: flex; justify-content: center; margin: 0 auto 22px; }
.acesso-logo img { width: 210px; height: auto; }
.acesso-cartao h1 { font-size: 1.3rem; text-align: center; margin-bottom: 4px; }
.acesso-sub { text-align: center; color: var(--texto-2); font-size: .92rem; margin-bottom: 22px; }
.acesso-rodape { margin: 18px 0 0; font-size: .8rem; color: var(--texto-3); }
.acesso-links { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; font-size: .9rem; }

@media (min-width: 960px) {
    .acesso { grid-template-columns: 1.05fr 1fr; }
    .acesso-marca {
        display: flex; align-items: center; position: relative; overflow: hidden;
        padding: 56px; color: #fff;
        background: linear-gradient(150deg, #0B4F82 0%, #123F80 45%, #2E3B96 100%);
    }
    .acesso-marca-conteudo { position: relative; z-index: 1; max-width: 440px; }
    .acesso-marca-icone { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
    .acesso-marca h2 { color: #fff; font-size: 2rem; line-height: 1.15; margin-bottom: 14px; }
    .acesso-marca p { opacity: .82; font-size: 1.02rem; margin-bottom: 28px; }
    .acesso-marca ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
    .acesso-marca li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
    .acesso-marca li .ti {
        width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255, 255, 255, .12); color: #9FD0F7; font-size: 1.15rem;
    }
    /* "Flocos" decorativos inspirados na logo */
    .acesso-flocos {
        position: absolute; inset: 0; opacity: .14;
        background-image:
            radial-gradient(circle at 85% 18%, #62A6DE 0 2px, transparent 3px),
            radial-gradient(circle at 70% 80%, #62A6DE 0 2px, transparent 3px);
        background-size: 46px 46px, 64px 64px;
        mask-image: linear-gradient(120deg, transparent 30%, #000 100%);
        -webkit-mask-image: linear-gradient(120deg, transparent 30%, #000 100%);
    }
    .acesso-cartao { padding: 40px 36px; }
}

/* Páginas de erro */
.erro-pagina { text-align: center; padding: 40px 16px; }
.erro-pagina .erro-codigo { font-family: var(--fonte-titulo); font-size: 4.5rem; font-weight: 800; color: var(--gelo); line-height: 1; }
.erro-pagina p { color: var(--texto-2); }

/* Opção em cartão (radio) */
.opcao-cartao {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    border: 1.5px solid var(--borda); border-radius: var(--raio); background: var(--superficie);
    transition: border-color .15s, background .15s;
}
.opcao-cartao:hover { border-color: var(--borda-forte); }
.opcao-cartao input { position: absolute; opacity: 0; }
.opcao-cartao strong { display: block; font-size: .94rem; }
.opcao-cartao small { display: block; color: var(--texto-2); font-size: .8rem; line-height: 1.35; }
.opcao-cartao-icone {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: var(--superficie-2); color: var(--texto-2);
}
.opcao-cartao:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.opcao-cartao:has(input:checked) .opcao-cartao-icone { background: var(--primaria); color: var(--sobre-primaria); }
.opcao-cartao:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
@media (max-width: 479px) { .oculto-mobile { display: none; } }

/* Formulário em linha (adicionar/editar item de lista) */
.form-adicionar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.form-adicionar > .btn { min-height: 46px; }
@media (max-width: 639px) { .form-adicionar > .btn { width: 100%; } }

/* Lista de itens com edição no lugar */
.lista-itens { list-style: none; margin: 0; padding: 0; }
.lista-itens > li + li { border-top: 1px solid var(--borda); }
.lista-itens details > summary { list-style: none; }
.lista-itens details > summary::-webkit-details-marker { display: none; }
.lista-item-linha {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer;
    min-height: 54px;
}
.lista-item-linha:hover { background: var(--superficie-2); }
.lista-item-linha.inativo .lista-item-nome { color: var(--texto-3); text-decoration: line-through; }
.lista-item-nome { flex: 1; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.lista-item-editar { color: var(--texto-3); display: flex; }
details[open] > .lista-item-linha { background: var(--primaria-suave); }
details[open] .lista-item-editar { color: var(--primaria); }
.lista-item-edicao {
    padding: 16px 18px; background: var(--superficie-2); border-top: 1px dashed var(--borda);
    display: flex; flex-direction: column; gap: 10px;
}
.lista-item-edicao > form:last-child { align-self: flex-start; }

/* Grade de cartões */
.grade-cartoes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rotulo-secao { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin-bottom: 6px; }
.texto-aviso { color: var(--aviso); }

/* Cartão-atalho (central de configurações) */
.cartao-atalho { display: flex; align-items: flex-start; gap: 14px; padding: 18px; color: var(--texto); transition: border-color .15s, box-shadow .15s, transform .15s; }
.cartao-atalho:hover { text-decoration: none; border-color: var(--gelo); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.cartao-atalho.desabilitado { opacity: .6; }
.cartao-atalho-icone {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: var(--primaria-suave); color: var(--primaria); font-size: 1.2rem;
}
.cartao-atalho-texto { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cartao-atalho-texto strong { font-size: .98rem; }
.cartao-atalho-texto small { color: var(--texto-2); font-size: .84rem; line-height: 1.4; }
.cartao-atalho-texto > span { margin-top: 4px; }
.cartao-atalho-seta { color: var(--texto-3); align-self: center; }

/* Cartão de tipo de serviço */
.cartao-servico { display: flex; align-items: flex-start; gap: 14px; padding: 18px; color: var(--texto); border-left: 4px solid var(--cor-servico); transition: box-shadow .15s, transform .15s; }
.cartao-servico:hover { text-decoration: none; box-shadow: var(--sombra-2); transform: translateY(-1px); }
.cartao-servico.inativo { opacity: .6; }
.cartao-servico-icone {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    background: color-mix(in srgb, var(--cor-servico) 14%, transparent); color: var(--cor-servico);
}
:root[data-tema="escuro"] .cartao-servico-icone { background: color-mix(in srgb, var(--cor-servico) 32%, transparent); color: #fff; }
.cartao-servico-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cartao-servico-texto small { color: var(--texto-2); font-size: .84rem; line-height: 1.4; }

/* Cabeçalho do montador de checklist */
.cabecalho-servico { border-top: 4px solid var(--cor-servico); }
.cabecalho-servico-topo { display: flex; align-items: flex-start; gap: 14px; padding: 18px 14px 14px 18px; }
.cabecalho-servico-topo h1 { font-size: 1.2rem; margin: 0 0 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cabecalho-servico-topo p { margin: 0; color: var(--texto-2); font-size: .9rem; }
.cabecalho-servico-resumo {
    display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px;
    border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 var(--raio) var(--raio);
    font-size: .85rem; color: var(--texto-2);
}
.cabecalho-servico-resumo span { display: inline-flex; align-items: center; gap: 5px; }
.cabecalho-servico-resumo strong { color: var(--texto); }

/* Seções e perguntas do checklist */
.bloco-secao-topo { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 8px; border-bottom: 1px solid var(--borda); }
.bloco-secao-topo h2 { flex: 1; margin: 0; font-family: var(--fonte); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--marinho); }
:root[data-tema="escuro"] .bloco-secao-topo h2 { color: var(--gelo); }
.alca {
    display: flex; align-items: center; justify-content: center; width: 32px; height: 40px; flex-shrink: 0;
    color: var(--texto-3); cursor: grab; touch-action: none; border-radius: 6px;
}
.alca:hover { background: var(--superficie-2); color: var(--texto-2); }
.alca:active { cursor: grabbing; }
.lista-perguntas { list-style: none; margin: 0; padding: 0; }
.pergunta-item { display: flex; align-items: flex-start; gap: 4px; padding: 10px 6px 10px 8px; border-bottom: 1px solid var(--borda); background: var(--superficie); }
.pergunta-item:last-child { border-bottom: 0; border-radius: 0 0 var(--raio) var(--raio); }
.pergunta-item:target { animation: destaque 2s ease; }
@keyframes destaque { 0%, 40% { background: var(--primaria-suave); } }
.pergunta-item .alca { margin-top: 2px; }
.pergunta-num {
    width: 26px; height: 26px; margin-top: 7px; flex-shrink: 0; border-radius: 7px; font-size: .75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; background: var(--marinho); color: #fff;
}
.pergunta-corpo { flex: 1; min-width: 0; padding: 6px 6px; color: var(--texto); display: flex; flex-direction: column; gap: 3px; border-radius: 8px; }
.pergunta-corpo:hover { text-decoration: none; background: var(--superficie-2); }
.pergunta-corpo strong { font-weight: 600; font-size: .94rem; overflow-wrap: anywhere; }
.pergunta-ajuda { color: var(--texto-3); font-size: .8rem; }
.pergunta-opcoes { color: var(--texto-2); font-size: .8rem; }
.pergunta-selos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.pergunta-selos .selo { font-size: .72rem; padding: 2px 8px; }
.pergunta-item .dropdown { margin-top: 2px; }
.arrastando { opacity: .45; background: var(--primaria-suave) !important; }

/* Formulário de pergunta */
.grade-tipos { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .grade-tipos { grid-template-columns: repeat(3, 1fr); } }
.opcao-cartao-compacta { padding: 10px; gap: 10px; align-items: flex-start; }
.opcao-cartao-compacta .opcao-cartao-icone { width: 34px; height: 34px; border-radius: 9px; }
.opcao-cartao-compacta strong { font-size: .86rem; }
.opcao-cartao-compacta small { font-size: .74rem; }
@media (max-width: 479px) { .opcao-cartao-compacta small { display: none; } .opcao-cartao-compacta { align-items: center; } }
.lista-opcoes { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.lista-opcoes li { display: flex; align-items: center; gap: 6px; }
.lista-opcoes li::marker { color: var(--texto-3); font-size: .85rem; }

/* Prévia "como o técnico verá" */
.previa-coluna { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .previa-coluna { position: sticky; top: 84px; align-self: start; } }
.previa-celular {
    padding: 14px; border-radius: 26px; background: var(--fundo);
    border: 8px solid #10233A; box-shadow: var(--sombra-2);
}
:root[data-tema="escuro"] .previa-celular { border-color: #000; }

/* Cartão de resposta do checklist (prévia e, depois, o app do técnico) */
.resp-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px; }
.resp-topo { display: flex; gap: 10px; align-items: flex-start; }
.resp-topo .pergunta-num { margin-top: 0; }
.resp-topo strong { font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
.resp-topo .selo { font-size: .66rem; padding: 1px 7px; vertical-align: 2px; }
.resp-topo small { display: block; color: var(--texto-3); font-size: .76rem; margin-top: 2px; }
.resp-topo .resp-ajuda { color: var(--info); }
.resp-area { margin: 12px 0 0 36px; display: flex; flex-direction: column; gap: 8px; }
.resp-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.resp-btn {
    flex: 1; min-width: 70px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1.5px solid var(--borda-forte); border-radius: 10px; font-weight: 600; font-size: .9rem; color: var(--texto-2); background: var(--superficie);
}
.resp-sim { border-color: color-mix(in srgb, var(--sucesso) 50%, transparent); color: var(--sucesso); }
.resp-nao { border-color: color-mix(in srgb, var(--perigo) 50%, transparent); color: var(--perigo); }
.resp-texto { min-height: 64px; padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: 10px; color: var(--texto-3); font-size: .9rem; }
.resp-opcao { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; font-size: .9rem; }
.resp-opcao .ti { color: var(--texto-3); }
.resp-numero { display: flex; align-items: center; border: 1px solid var(--borda-forte); border-radius: 10px; overflow: hidden; }
.resp-numero span { flex: 1; padding: 11px 12px; color: var(--texto-3); }
.resp-numero b { padding: 11px 14px; background: var(--superficie-2); border-left: 1px solid var(--borda); font-size: .88rem; min-width: 52px; text-align: center; }
.resp-foto {
    height: 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 2px dashed var(--borda-forte); border-radius: 12px; color: var(--primaria); font-weight: 600; font-size: .88rem;
}
.resp-foto .ti { font-size: 1.8rem; }

/* Grade de ícones (radio) */
.grade-icones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao-icone { cursor: pointer; }
.opcao-icone input { position: absolute; opacity: 0; }
.opcao-icone span {
    width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
    border: 1.5px solid var(--borda); color: var(--texto-2); background: var(--superficie);
}
.opcao-icone input:checked + span { border-color: var(--primaria); background: var(--primaria); color: var(--sobre-primaria); }
.opcao-icone input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }

/* Entrada + select colados (ex.: capacidade + unidade) */
.entrada-composta { display: flex; }
.entrada-composta .entrada:first-child { border-radius: var(--raio-sm) 0 0 var(--raio-sm); flex: 1; min-width: 0; }
.entrada-composta select.entrada { width: auto; border-radius: 0 var(--raio-sm) var(--raio-sm) 0; border-left: 0; background-color: var(--superficie-2); }
/* Chips de atalho */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 4px 10px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie);
    color: var(--texto-2); font-size: .8rem; font-weight: 600; cursor: pointer;
}
.chip:hover { border-color: var(--borda-forte); color: var(--texto); }
.chip.ativo { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }

/* Barra de seleção em lote (lista de equipamentos) */
.barra-selecao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--borda); background: var(--superficie-2); border-radius: var(--raio) var(--raio) 0 0; }
.entrada-sm { min-height: 34px; padding: 4px 36px 4px 10px; font-size: .85rem; width: auto; background-position: right 10px center; }
.td-selecao input { width: 20px; height: 20px; accent-color: var(--primaria); }
.linha-inativa { opacity: .55; }
@media (max-width: 767px) {
    .tabela-responsiva tr:has(.td-selecao) { padding-left: 52px; }
    .tabela-responsiva td.td-selecao { position: absolute; left: 16px; top: 16px; width: auto; padding: 0; }
    .barra-selecao .entrada-sm { flex: 1; }
}

/* QR Code na ficha */
.qr-caixa { width: 200px; max-width: 100%; margin: 0 auto; padding: 10px; background: #fff; border-radius: 12px; border: 1px solid var(--borda); }
.qr-caixa svg { display: block; width: 100%; height: auto; }
.codigo-grande { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; letter-spacing: .04em; }
@media (min-width: 640px) { .lista-dados-3 { grid-template-columns: repeat(3, 1fr); } }

/* Ficha (cliente / equipamento) */
.ficha-cabecalho-topo { display: flex; align-items: flex-start; gap: 16px; padding: 18px 14px 14px 18px; }
.ficha-cabecalho-topo h1 { font-size: 1.3rem; margin: 0 0 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ficha-cabecalho-topo .avatar-lg { width: 60px; height: 60px; font-size: 1.6rem; box-shadow: none; }
.ficha-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 8px 0 0; font-size: .86rem; color: var(--texto-2); }
.acoes-rapidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; padding: 0 18px 18px; }
.acao-rapida {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 12px;
    border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie-2);
    color: var(--texto); font-weight: 600; font-size: .88rem; min-width: 0;
}
.acao-rapida span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acao-rapida .ti { font-size: 1.25rem; color: var(--primaria); flex-shrink: 0; }
.acao-rapida:hover { text-decoration: none; border-color: var(--borda-forte); }
.acao-rapida.zap .ti { color: #25D366; }
.acao-rapida.destaque { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.acao-rapida.destaque .ti { color: inherit; }
.ficha-obs { margin: 0 18px 18px; padding: 10px 14px; border-radius: var(--raio-sm); background: var(--aviso-suave); color: var(--texto); font-size: .9rem; }
.ficha-obs .ti { color: var(--aviso); }

/* Lista em blocos (locais, contatos) */
.lista-blocos { list-style: none; margin: 0; padding: 0; }
.lista-blocos > li { padding: 14px 18px; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 4px; }
.lista-blocos > li:last-child { border-bottom: 0; }
.lista-blocos > li.inativo { opacity: .6; }

/* Equipamentos agrupados por local */
.grupo-local {
    padding: 10px 18px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--marinho); background: var(--superficie-2); border-bottom: 1px solid var(--borda);
}
:root[data-tema="escuro"] .grupo-local { color: var(--gelo); }
.lista-equipamentos { list-style: none; margin: 0; padding: 0; }
.lista-equipamentos li { border-bottom: 1px solid var(--borda); }
.lista-equipamentos li.inativo { opacity: .55; }
.equip-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--texto); }
.equip-item:hover { background: var(--superficie-2); text-decoration: none; }
.equip-icone {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: var(--primaria-suave); color: var(--primaria); font-size: 1.15rem;
}
.equip-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.equip-texto strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equip-texto small { color: var(--texto-2); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equip-codigo { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; color: var(--texto-3); text-align: right; flex-shrink: 0; }

/* Cartão de equipe */
.cartao-equipe { border-top: 4px solid var(--cor-equipe); overflow: hidden; }
.cartao-equipe.inativo { opacity: .6; }
.cartao-equipe-topo { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--borda); }
.cartao-equipe-topo h2 { margin: 0; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-equipe-topo small { color: var(--texto-3); }
.cartao-equipe-icone {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--cor-equipe) 14%, transparent); color: var(--cor-equipe);
}
:root[data-tema="escuro"] .cartao-equipe-icone { background: color-mix(in srgb, var(--cor-equipe) 30%, transparent); color: #fff; }
.lista-membros { list-style: none; margin: 0; padding: 0; }
.lista-membros li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.lista-membros-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.lista-membros .btn-icone { width: 34px; height: 34px; }

/* Paleta de cores */
.paleta { display: flex; flex-wrap: wrap; gap: 10px; }
.paleta-cor { cursor: pointer; }
.paleta-cor input { position: absolute; opacity: 0; }
.paleta-cor span {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--cor); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); transition: transform .1s;
}
.paleta-cor span .ti { opacity: 0; font-size: 1.1rem; }
.paleta-cor input:checked + span { transform: scale(1.1); box-shadow: 0 0 0 3px var(--superficie), 0 0 0 5px var(--cor); }
.paleta-cor input:checked + span .ti { opacity: 1; }
.paleta-cor input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 4px; }

/* Lista de seleção com checkbox (integrantes) */
.lista-selecao { display: grid; gap: 8px; max-height: 460px; overflow-y: auto; }
@media (min-width: 640px) { .lista-selecao { grid-template-columns: 1fr 1fr; } }
.lista-selecao-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
    border: 1.5px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie);
}
.lista-selecao-item input { width: 20px; height: 20px; accent-color: var(--primaria); flex-shrink: 0; }
.lista-selecao-item:has(input:checked) { border-color: var(--primaria); background: var(--primaria-suave); }
.lista-selecao-texto { display: flex; flex-direction: column; min-width: 0; }
.lista-selecao-texto strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-selecao-texto small { color: var(--texto-3); font-size: .78rem; }

/* Rodapé de cartão com ações (Excluir à esquerda; Cancelar/Salvar à direita) */
.rodape-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rodape-acoes .rodape-info { flex: 1 1 auto; white-space: nowrap; }
/* Botões sempre juntos, à direita; se faltar espaço, descem juntos */
.rodape-botoes { display: flex; gap: 10px; margin-left: auto; flex-shrink: 0; }
@media (max-width: 639px) {
    .rodape-acoes { flex-direction: column-reverse; align-items: stretch; }
    .rodape-botoes { flex-direction: column-reverse; margin-left: 0; }
    .rodape-acoes .btn { width: 100%; }
}
/* Texto informativo no lado esquerdo do rodapé */
.rodape-info { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; color: var(--texto-3); line-height: 1.4; min-width: 0; }
.rodape-info strong { color: var(--texto-2); font-weight: 600; }
.rodape-info .ti { margin-right: 4px; }
kbd {
    font-family: var(--fonte); font-size: .74rem; font-weight: 600; padding: 1px 6px; border-radius: 5px;
    border: 1px solid var(--borda-forte); border-bottom-width: 2px; background: var(--superficie); color: var(--texto-2);
}
@media (max-width: 1023px) { .so-teclado { display: none; } }
@media (max-width: 639px) { .rodape-acoes .rodape-info { flex: none; text-align: center; align-items: center; } }

/* Interruptor dentro de uma caixa (alinha opções lado a lado) */
.caixa-opcao { align-items: flex-start; padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie-2); }
.caixa-opcao .interruptor-trilho { margin-top: 2px; }

/* Lista de dicas com ícones */
.lista-dicas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: var(--texto-2); font-size: .92rem; }
.lista-dicas li { display: flex; gap: 10px; align-items: flex-start; }
.lista-dicas .ti { flex-shrink: 0; margin-top: 1px; color: var(--sucesso); }
.lista-dicas .ti-x { color: var(--perigo); }
.lista-dicas .ti-device-mobile { color: var(--info); }

/* Prévia de logo (fundo quadriculado para ver transparência) */
.logo-previa {
    display: flex; align-items: center; justify-content: center; height: 140px; padding: 16px;
    border-radius: var(--raio-sm); border: 1px solid var(--borda);
    background: #fff repeating-conic-gradient(#EEF3F8 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}
.logo-previa img { max-height: 100%; max-width: 100%; object-fit: contain; }
@media (max-width: 639px) { .form-grade.cols-3 .campo[style*="span 2"] { grid-column: auto !important; } }

/* Indicador de força de senha */
.forca-senha { height: 6px; border-radius: 99px; background: var(--borda); overflow: hidden; }
.forca-senha span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .25s, background .25s; }

/* ---------- Ordens de serviço ---------- */
.os-status-baixo { display: none; margin-top: 4px; }
@media (max-width: 639px) {
    .lista-os .equip-item { padding: 12px 14px; }
    .lista-os .os-status-lado { display: none; }
    .lista-os .os-status-baixo { display: block; }
    .ficha-cabecalho-topo { padding: 14px 8px 12px 14px; gap: 12px; }
    .ficha-cabecalho-topo h1 { font-size: 1.12rem; }
    .linha-tempo { padding: 12px 14px 14px; }
}
/* ---------- Painel: indicadores ---------- */
.mini-indicadores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-indicadores > * { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--raio-sm); background: var(--superficie-2); color: var(--texto); }
.mini-indicadores a:hover { text-decoration: none; filter: brightness(.97); }
.mini-indicadores strong { font-family: var(--fonte-titulo); font-size: 1.35rem; line-height: 1.1; }
.mini-indicadores span { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); }
.mini-indicadores .alerta { background: var(--perigo-suave); }
.mini-indicadores .alerta strong { color: var(--perigo); }
.grafico-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 140px; }
.grafico-semana-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.grafico-semana-dia .valor { font-size: .78rem; font-weight: 700; color: var(--texto-2); min-height: 1em; }
.grafico-semana-dia .barra { flex: 1; width: 100%; max-width: 34px; display: flex; align-items: flex-end; background: var(--superficie-2); border-radius: 8px; overflow: hidden; }
.grafico-semana-dia .barra span { display: block; width: 100%; min-height: 0; background: var(--primaria); border-radius: 8px; transition: height .4s; }
.grafico-semana-dia.hoje .barra span { background: var(--sucesso); }
.grafico-semana-dia .rotulo { font-size: .72rem; font-weight: 700; color: var(--texto-3); }
.grafico-semana-dia.hoje .rotulo { color: var(--sucesso); }
.barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.barras li { display: flex; align-items: center; gap: 10px; }
.barras-icone { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--superficie-2); font-size: 1.05rem; }
.barras-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.barras-topo { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; }
.barras-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barras-trilho { height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.barras-trilho span { display: block; height: 100%; border-radius: 99px; background: var(--primaria); }

/* ---------- Notificações ---------- */
.sino { position: relative; }
.sino-contador {
    position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
    background: var(--perigo); color: #fff; font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center;
    border: 2px solid var(--superficie);
}
.menu-notif { width: 360px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
@media (max-width: 639px) {
    /* Celular: painel ocupa a largura da tela, logo abaixo do topo */
    .dropdown-notif { position: static; }
    .menu-notif { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none; }
}
.menu-notif-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--borda); }
.dropdown-menu .link-acao, .link-acao { width: auto; padding: 0; background: none; border: 0; color: var(--primaria); font-size: .82rem; font-weight: 600; cursor: pointer; }
.dropdown-menu .link-acao:hover { background: none; text-decoration: underline; }
#menu-notif-lista { max-height: min(60vh, 420px); overflow-y: auto; }
.menu-notif-vazio { padding: 22px 14px; margin: 0; text-align: center; font-size: .9rem; }
.dropdown-menu .menu-notif-rodape { justify-content: center; border-top: 1px solid var(--borda); border-radius: 0; font-weight: 600; color: var(--primaria); }
.lista-notif { list-style: none; margin: 0; padding: 0; }
.lista-notif li + li { border-top: 1px solid var(--borda); }
.notif-item, .dropdown-menu .notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 0; color: var(--texto); }
.notif-item:hover { background: var(--superficie-2); text-decoration: none; }
.notif-item.nao-lida { background: var(--primaria-suave); }
.notif-item.nao-lida strong::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--primaria); vertical-align: middle; }
.notif-icone { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.notif-icone.primario { background: var(--primaria-suave); color: var(--primaria); }
.notif-icone.sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.notif-icone.aviso { background: var(--aviso-suave); color: var(--aviso); }
.notif-icone.perigo { background: var(--perigo-suave); color: var(--perigo); }
.notif-icone.info { background: var(--info-suave); color: var(--info); }
.notif-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-texto strong { font-size: .9rem; font-weight: 600; }
.notif-texto small { color: var(--texto-2); font-size: .82rem; overflow-wrap: anywhere; }
.notif-texto .notif-quando { color: var(--texto-3); font-size: .74rem; }

/* ---------- Perfil: foto e assinatura ---------- */
.perfil-foto { position: relative; display: inline-block; }
.perfil-foto-botao {
    position: absolute; right: -4px; bottom: -4px; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--primaria); color: var(--sobre-primaria); border: 3px solid var(--superficie); font-size: 1rem;
}
.perfil-foto-botao:hover { filter: brightness(1.08); }
.assinatura-salva { background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 10px; text-align: center; }
.assinatura-salva img { max-width: 100%; max-height: 140px; }
.aviso-perfil { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--raio); background: var(--info-suave); color: var(--texto); }
.aviso-perfil:hover { text-decoration: none; }
.aviso-perfil .ti { font-size: 1.4rem; color: var(--info); flex: none; }
.aviso-perfil span { flex: 1; font-size: .9rem; }

/* ---------- Relatório ---------- */
button.acao-rapida { font: inherit; cursor: pointer; width: 100%; text-align: left; }
.acoes-relatorio { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .acoes-relatorio { grid-template-columns: 2fr 1fr; } }

/* ---------- Offline ---------- */
.status-conexao { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--raio-sm); font-size: .88rem; }
.status-conexao .ti { font-size: 1.15rem; flex: none; margin-top: 1px; }
.status-conexao.offline { background: var(--aviso-suave); color: var(--texto); border: 1px solid var(--aviso); }
.status-conexao.offline .ti { color: var(--aviso); }
.status-conexao.sincronizando { background: var(--info-suave); color: var(--texto); }
.status-conexao.sincronizando .ti { color: var(--info); }
.offline-dica { font-size: .8rem; margin: -8px 0 14px; }
.foto-na-fila { position: absolute; left: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--aviso); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; }
.selo-fila { background: var(--aviso-suave); color: var(--aviso); border-color: transparent; }

/* ---------- App do técnico ---------- */
.titulo-secao { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 4px 0 12px; }
.titulo-secao .ti { color: var(--primaria); }
.lista-cartoes-os { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.cartao-os { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; color: var(--texto); border-left: 4px solid var(--primaria); }
.cartao-os:hover { text-decoration: none; border-color: var(--borda-forte); border-left-color: var(--primaria); }
.cartao-os.em-execucao { border-left-color: var(--sucesso); background: linear-gradient(90deg, var(--sucesso-suave), transparent 60%), var(--superficie); }
.cartao-os-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.cartao-os-topo .cartao-os-hora { margin-right: auto; }
.cartao-os-hora { font-size: .84rem; font-weight: 700; color: var(--texto-2); }
.cartao-os-cliente { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-os-linha { font-size: .86rem; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-grande { min-height: 54px; font-size: 1.05rem; }
.barra-fixa {
    position: sticky; z-index: 20; bottom: calc(var(--nav-inferior-h) + var(--seguro-baixo) + 8px);
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; text-align: center;
    padding: 8px; margin-top: 8px; border-radius: 16px;
    background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-3);
}
.barra-fixa .btn-expandir, .barra-fixa .btn-bloco { flex: 1; }
.barra-fixa small { flex-basis: 100%; }
@media (min-width: 1024px) { .barra-fixa { bottom: 16px; } }

.progresso-os { padding: 12px 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda); display: flex; flex-direction: column; gap: 6px; }
.progresso-trilho { height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.progresso-trilho span { display: block; height: 100%; background: var(--sucesso); border-radius: 99px; transition: width .3s; }
.girando { display: inline-block; animation: girar 1s linear infinite; }

.lista-perguntas-campo { display: flex; flex-direction: column; }
.pergunta-campo { padding: 14px 16px; border-top: 1px solid var(--borda); display: flex; flex-direction: column; gap: 10px; }
.pergunta-campo.sem-borda { padding: 0; border: 0; }
.pergunta-campo-topo { display: flex; gap: 10px; align-items: flex-start; }
.pergunta-enunciado { margin: 0; font-weight: 600; font-size: .95rem; }
.pergunta-status { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--borda-forte); display: flex; align-items: center; justify-content: center; font-size: .8rem; color: transparent; }
.pergunta-campo.respondida .pergunta-status { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.pergunta-campo-resposta { display: flex; flex-direction: column; gap: 8px; padding-left: 32px; }
.pergunta-campo.na .pergunta-campo-resposta > :not(.opcao-na) { opacity: .4; pointer-events: none; }
@media (max-width: 639px) { .pergunta-campo-resposta { padding-left: 0; } }
.botoes-resposta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.botoes-resposta.quebra { display: flex; flex-wrap: wrap; }
.botao-resposta { cursor: pointer; }
.botao-resposta input { position: absolute; opacity: 0; pointer-events: none; }
.botao-resposta span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 8px 14px; border-radius: var(--raio-sm); border: 1.5px solid var(--borda-forte); background: var(--superficie); font-weight: 600; font-size: .92rem; text-align: center; }
.botao-resposta input:checked + span { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.botao-resposta.sim input:checked + span { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.botao-resposta.nao input:checked + span { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.botao-resposta input:focus-visible + span { outline: 2px solid var(--primaria); outline-offset: 2px; }
.entrada-numero { display: flex; align-items: center; gap: 8px; max-width: 240px; }
.entrada-numero .entrada { font-size: 1.1rem; font-weight: 600; }
.entrada-unidade { font-weight: 700; color: var(--texto-2); }
.aviso-faixa { display: none; color: var(--aviso); font-weight: 600; }
.aviso-faixa.visivel { display: block; }

.fotos-grade { display: flex; flex-wrap: wrap; gap: 8px; }
.foto-mini, .foto-adicionar { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; flex: none; }
.foto-mini { background: var(--superficie-2); display: flex; align-items: center; justify-content: center; }
.foto-mini img { width: 84px; height: 84px; object-fit: cover; display: block; }
.foto-remover { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.foto-adicionar { border: 2px dashed var(--borda-forte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; color: var(--primaria); font-size: .8rem; font-weight: 600; }
.foto-adicionar .ti { font-size: 1.6rem; }

.equip-campo > summary { list-style: none; cursor: pointer; }
.equip-campo > summary::-webkit-details-marker { display: none; }
.seta-details { color: var(--texto-3); transition: transform .2s; }
.equip-campo[open] .seta-details { transform: rotate(180deg); }
.adicionar-equip { border-style: dashed; }
.adicionar-equip > summary { list-style: none; border: 0; }
.adicionar-equip > summary::-webkit-details-marker { display: none; }

.linha-material { display: grid; gap: 6px; align-items: center; grid-template-columns: minmax(0, 1fr) 80px 64px 40px; }
.linha-material.gas { grid-template-columns: minmax(0, 1fr) 80px 40px; }
@media (max-width: 639px) {
    /* Celular: nome do material ocupa a linha inteira; quantidade e unidade embaixo */
    .linha-material { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; padding-bottom: 8px; border-bottom: 1px dashed var(--borda); }
    .linha-material > :first-child { grid-column: 1 / -1; }
    .linha-material.gas { grid-template-columns: minmax(0, 1fr) 90px 40px; }
    .linha-material.gas > :first-child { grid-column: auto; }
}

.dialogo-largo { max-width: 560px; }
.assinatura-caixa { position: relative; margin-top: 8px; }
.assinatura-caixa canvas { display: block; width: 100%; height: 200px; border-radius: 12px; border: 1.5px dashed var(--borda-forte); background: #fff; touch-action: none; }
.assinatura-limpar { position: absolute; top: 6px; right: 6px; background: rgba(255,255,255,.9); color: #333; }
.pendente-destaque { animation: pendente-pisca 1.6s ease; }
@keyframes pendente-pisca { 0%, 60% { background: var(--aviso-suave); box-shadow: inset 4px 0 0 var(--aviso); } 100% { background: transparent; box-shadow: none; } }
.assinatura-img { display: block; max-width: 320px; width: 100%; margin: 0 auto 6px; background: #fff; border-radius: 10px; border: 1px solid var(--borda); }

.lista-respostas { margin: 0; display: flex; flex-direction: column; }
.resposta-linha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--borda); }
.resposta-linha:last-child { border-bottom: 0; }
.resposta-linha dt { font-size: .86rem; color: var(--texto-2); }
.resposta-linha dd { margin: 0; font-weight: 600; }
@media (min-width: 640px) { .resposta-linha { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; } }
.resp-sim { color: var(--sucesso); }
.resp-nao { color: var(--perigo); }
.lista-materiais-resumo { list-style: none; margin: 0; padding: 0; }
.lista-materiais-resumo li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--borda); font-size: .92rem; }

.kpi-link { color: inherit; transition: border-color .15s, transform .15s; }
.kpi-link:hover { text-decoration: none; border-color: var(--borda-forte); transform: translateY(-1px); }
.os-numero { font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.servico-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; }
.servico-tag i { color: var(--cor); font-size: 1.05rem; }
.rotulo { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 6px; }
.pilula-radio { cursor: pointer; }
.pilula-radio input { position: absolute; opacity: 0; pointer-events: none; }
.pilula-radio:has(input:checked) { background: var(--primaria); border-color: var(--primaria); color: var(--sobre-primaria); }
.pilula-radio:has(input:focus-visible) { outline: 2px solid var(--primaria); outline-offset: 2px; }
.lista-marcar { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.item-marcar { align-items: flex-start; padding: 8px 10px; border-radius: var(--raio-sm); }
.item-marcar:hover { background: var(--superficie-2); }
.item-marcar:has(input:checked) { background: var(--primaria-suave); }
.item-marcar[hidden] { display: none; }
.ponto-cor { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.lista-perguntas-os { margin: 0 0 8px; padding-left: 22px; font-size: .9rem; }
.lista-perguntas-os li { margin-bottom: 4px; }
.linha-tempo { list-style: none; margin: 0; padding: 14px 18px 18px; }
.linha-tempo li { display: flex; gap: 12px; position: relative; padding-bottom: 14px; font-size: .9rem; }
.linha-tempo li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--borda); }
.linha-tempo-icone { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--superficie-2); color: var(--texto-2); }
.dialogo { width: calc(100% - 24px); max-width: 440px; padding: 24px 20px 18px; border: 1px solid var(--borda); border-radius: 20px; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-3); }
.dialogo::backdrop { background: rgba(6, 18, 31, .55); backdrop-filter: blur(3px); }
.dialogo h3 { margin: 0 0 6px; font-size: 1.12rem; }
.dialogo-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}