/* ==========================================================================
   ERP Locadora - estilos globais
   ========================================================================== */

:root {
    --cor-primaria: #2d6bff;
    --cor-primaria-escura: #1f55d6;
    --cor-perigo: #d9534f;
    --cor-perigo-escura: #b9403c;
    --cor-sucesso: #2b7a3f;
    --cor-texto: #1f2933;
    --cor-texto-suave: #6b7785;
    --cor-borda: #e3e6ea;
    --cor-fundo: #f4f5f7;
    --cor-superficie: #fff;
    --cor-superficie-hover: #f8f9fb;
    /* Cores personalizáveis no cadastro da empresa (sobrescritas por Empresa::estiloTema) */
    --cor-menu-fundo: #0b1f3b;
    --cor-menu-texto: #ffffff;
    --cor-botao: #2d6bff;
    --cor-botao-texto: #ffffff;
    /* Tons derivados da cor do texto do menu, para funcionar em menus claros ou escuros */
    --cor-menu-texto-suave: color-mix(in srgb, var(--cor-menu-texto) 80%, transparent);
    --cor-menu-hover: color-mix(in srgb, var(--cor-menu-texto) 10%, transparent);
    --cor-menu-borda: color-mix(in srgb, var(--cor-menu-texto) 10%, transparent);
    --cor-botao-hover: color-mix(in srgb, var(--cor-botao) 85%, #000);
    --raio: 10px;
    --raio-pequeno: 6px;
    --sombra: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --sombra-modal: 0 20px 50px rgba(16, 24, 40, .25);
    --largura-menu: 240px;
    --largura-menu-recolhido: 64px;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    margin: 0;
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

h1 { font-size: 22px; margin: 0; }
h2 { font-size: 18px; margin: 0; }
h3 { font-size: 15px; margin: 0; }

.bi { line-height: 1; }

/* ---------- Layout / menu lateral ---------- */

.layout { display: flex; min-height: 100vh; }

main { flex: 1; min-width: 0; padding: 24px 32px; }

.menu-lateral {
    width: var(--largura-menu);
    flex-shrink: 0;
    background: var(--cor-menu-fundo);
    color: var(--cor-menu-texto-suave);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width .2s ease;
    z-index: 10;
}

.menu-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 60px;
    padding: 0 12px 0 18px;
    border-bottom: 1px solid var(--cor-menu-borda);
}

.menu-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cor-menu-texto);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
}

.menu-marca .bi { font-size: 20px; }

/* Logomarca direto sobre a cor do menu (sem caixa de fundo): use uma logo com fundo transparente */
.menu-marca.com-logo {
    flex: 1;
    min-width: 0;
    height: 44px;
    justify-content: flex-start;
}

.menu-marca.com-logo img { max-width: 100%; max-height: 40px; object-fit: contain; }

/* Menu expandido: logo no centro da largura do menu. O recuo à esquerda compensa o que fica à direita
   dela (botão de recolher + espaço + margem direita do topo) menos a margem esquerda do topo */
:root:not(.menu-recolhido) .menu-marca.com-logo {
    justify-content: center;
    padding-left: calc(36px + 8px + 12px - 18px);
}

.menu-alternar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--raio-pequeno);
    background: transparent;
    color: var(--cor-menu-texto-suave);
    font-size: 18px;
    cursor: pointer;
}

.menu-alternar:hover { background: var(--cor-menu-hover); color: var(--cor-menu-texto); }

.menu { flex: 1; padding: 12px 10px; overflow-y: auto; }

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 2px;
    border: none;
    border-radius: var(--raio-pequeno);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.menu-item > .bi:first-child { font-size: 18px; width: 20px; text-align: center; flex-shrink: 0; }
.menu-item:hover { background: var(--cor-menu-hover); color: var(--cor-menu-texto); }
.menu-item.ativo { background: var(--cor-botao); color: var(--cor-botao-texto); }
.menu-grupo.ativo > .menu-item { color: var(--cor-menu-texto); }

.menu-texto { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.menu-seta { font-size: 12px; transition: transform .2s; }
.menu-grupo.aberto .menu-seta { transform: rotate(180deg); }

.submenu { display: none; padding-left: 14px; }
.menu-grupo.aberto .submenu { display: block; }
.submenu .menu-item { padding: 8px 12px; font-size: 13px; }
.submenu .menu-item > .bi:first-child { font-size: 15px; }
.submenu-titulo { display: none; }

.menu-rodape {
    padding: 10px;
    border-top: 1px solid var(--cor-menu-borda);
}

.menu-usuario {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    color: var(--cor-menu-texto);
    white-space: nowrap;
}

.menu-usuario .bi { font-size: 18px; width: 20px; text-align: center; flex-shrink: 0; }

/* Crédito do sistema abaixo do "Sair" */
.menu-creditos {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    text-align: center;
    color: var(--cor-menu-texto-suave);
    opacity: .7;
    text-decoration: none;
    white-space: nowrap;
}

.menu-creditos:hover { opacity: 1; color: var(--cor-menu-texto); }

/* Menu recolhido: só ícones; grupos abrem um submenu flutuante ao passar o mouse */
.menu-recolhido .menu-lateral { width: var(--largura-menu-recolhido); }
.menu-recolhido .menu-texto,
.menu-recolhido .menu-seta,
.menu-recolhido .menu-marca,
.menu-recolhido .menu-creditos { display: none; }
.menu-recolhido .menu-topo { justify-content: center; padding: 0; }
.menu-recolhido .menu { overflow: visible; }
.menu-recolhido .menu-item,
.menu-recolhido .menu-usuario { justify-content: center; padding-left: 0; padding-right: 0; }

.menu-recolhido .menu-grupo { position: relative; }
.menu-recolhido .menu-grupo .submenu { display: none; }

.menu-recolhido .menu-grupo:hover .submenu,
.menu-recolhido .menu-grupo:focus-within .submenu {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
    margin-left: 8px;
    padding: 6px;
    background: var(--cor-menu-fundo);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra-modal);
}

/* "ponte" invisível para o mouse não perder o hover ao atravessar o espaço até o submenu */
.menu-recolhido .menu-grupo .submenu::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 0;
    width: 8px;
    height: 100%;
}

.menu-recolhido .submenu-titulo {
    display: block;
    padding: 8px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: color-mix(in srgb, var(--cor-menu-texto) 55%, transparent);
}

.menu-recolhido .submenu .menu-item { justify-content: flex-start; padding: 8px 12px; }
.menu-recolhido .submenu .menu-texto { display: inline; }

.topo-acoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--cor-botao);
    color: var(--cor-botao-texto);
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.2;
    transition: background .15s;
}

.btn:hover { background: var(--cor-botao-hover); }
.btn:disabled { opacity: .6; cursor: wait; }

.btn-perigo { background: var(--cor-perigo); color: #fff; }
.btn-perigo:hover { background: var(--cor-perigo-escura); }

.btn-secundario {
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border-color: var(--cor-borda);
}

.btn-secundario:hover { background: var(--cor-superficie-hover); }

.btn-sm { padding: 5px 10px; font-size: 13px; }

.acoes { display: flex; gap: 6px; flex-wrap: wrap; }

form.inline { display: inline; }

/* ---------- Alertas ---------- */

.alerta {
    padding: 12px 14px;
    border-radius: var(--raio-pequeno);
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.erro { background: #fdecea; color: #a33; border-color: #f6c9c5; }
.sucesso { background: #e6f4ea; color: var(--cor-sucesso); border-color: #c3e3cc; }

/* ---------- Busca ---------- */

.busca { display: flex; gap: 8px; margin-bottom: 16px; }
.busca input { flex: 1; margin: 0; }
.busca select { width: auto; max-width: 260px; margin: 0; }

/* ---------- Tabelas ---------- */

.tabela-container {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.tabela-rolagem { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
    vertical-align: middle;
}

th {
    background: var(--cor-superficie-hover);
    color: var(--cor-texto-suave);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--cor-superficie-hover); }

td.vazio { text-align: center; color: var(--cor-texto-suave); padding: 32px; }
th.col-acoes, td.col-acoes { width: 1%; white-space: nowrap; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge-ativo { background: #e6f4ea; color: var(--cor-sucesso); }
.badge-inativo { background: #eef0f3; color: var(--cor-texto-suave); }
.badge-neutro { background: #e8effc; color: var(--cor-primaria-escura); text-transform: capitalize; }

/* Situações de ativo: cor escolhida no cadastro (SituacaoAtivo::CORES) */
.badge-cor-verde { background: #e6f4ea; color: #2b7a3f; }
.badge-cor-azul { background: #e8effc; color: #1f56b8; }
.badge-cor-amarelo { background: #fdf6dc; color: #8a6a00; }
.badge-cor-laranja { background: #fdeee0; color: #b25a0b; }
.badge-cor-vermelho { background: #fdecea; color: #a33; }
.badge-cor-roxo { background: #f1eafb; color: #6a3fb0; }
.badge-cor-cinza { background: #eef0f3; color: var(--cor-texto-suave); }

.campo-leitura { display: flex; align-items: center; gap: 8px; min-height: 38px; }

.historico-situacoes .badge { white-space: nowrap; }
.historico-situacoes .bi-arrow-right { color: var(--cor-texto-suave); margin: 0 4px; }

.opcoes-cor { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }

/* ---------- Paginação ---------- */

.paginacao { display: flex; gap: 4px; justify-content: flex-end; margin-top: 16px; }

.paginacao a {
    min-width: 34px;
    padding: 6px 10px;
    text-align: center;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--cor-borda);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    text-decoration: none;
}

.paginacao a:hover { background: var(--cor-superficie-hover); }

.paginacao a.atual {
    background: var(--cor-botao);
    border-color: var(--cor-botao);
    color: var(--cor-botao-texto);
}

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

label { font-weight: 600; display: block; margin-bottom: 6px; font-size: 13px; }
label small { font-weight: normal; color: var(--cor-texto-suave); }

input, select, textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #cfd5dc;
    border-radius: var(--raio-pequeno);
    font-size: 14px;
    font-family: inherit;
    background: var(--cor-superficie);
    color: var(--cor-texto);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(45, 108, 223, .15);
}

input[type="checkbox"], input[type="radio"] { width: auto; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo-inteiro { grid-column: 1 / -1; }

.campo.com-erro input,
.campo.com-erro select,
.campo.com-erro textarea { border-color: var(--cor-perigo); }

.erro-campo { color: var(--cor-perigo); font-size: 12px; margin-top: 4px; }

.form-rodape {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--cor-borda);
}

/* Painel usado quando o formulário abre como página (sem JS) */
.painel {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 24px;
}

.painel > h2 { margin-bottom: 20px; }


.secao-form {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cor-texto-suave);
    margin: 24px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cor-borda);
}

.painel form > .secao-form:first-child { margin-top: 0; }

.campos-endereco { grid-template-columns: repeat(3, 1fr); }
.campo-duplo { grid-column: span 2; }

.dica { font-size: 12px; color: var(--cor-texto-suave); margin: 6px 0; }
.texto-suave { color: var(--cor-texto-suave); }

/* ---------- Upload de logomarca ---------- */

.upload-logo { display: flex; gap: 16px; align-items: flex-start; }
.upload-logo label.btn { display: inline-flex; font-weight: normal; margin: 0; }

.logo-previa {
    flex-shrink: 0;
    width: 180px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #cfd5dc;
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie-hover);
    color: var(--cor-texto-suave);
    font-size: 28px;
    padding: 8px;
}

.logo-previa img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Input de arquivo escondido; o <label class="btn"> faz o papel do botão */
.input-arquivo {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.upload-logo label.btn { position: relative; }
.upload-logo label.btn:focus-within { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* ---------- Fundo da tela de login ---------- */

.upload-fundo { display: grid; grid-template-columns: 260px 1fr; gap: 6px 16px; align-items: start; margin-bottom: 20px; }
.upload-fundo > label:first-child { grid-column: 1 / -1; }

.fundo-previa {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #cfd5dc;
    border-radius: var(--raio-pequeno);
    background: var(--cor-menu-fundo);
    color: var(--cor-menu-texto-suave);
    overflow: hidden;
}

.fundo-previa img { width: 100%; height: 100%; object-fit: cover; }
.fundo-previa img[hidden], .fundo-previa [hidden] { display: none; }

.fundo-miniatura { display: inline-block; width: 240px; aspect-ratio: 16 / 9; border-radius: var(--raio-pequeno); overflow: hidden; border: 1px solid var(--cor-borda); }
.fundo-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Aparência (cores da interface) ---------- */

.tema { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: start; }

.tema-cores { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-items: start; }
.tema-cores > .btn { grid-column: 1 / -1; justify-self: start; }

.tema-grupo { display: grid; gap: 12px; }
.tema-grupo-titulo { font-weight: 600; font-size: 13px; }
.campo-cor label { font-weight: normal; color: var(--cor-texto-suave); }

.seletor-cor { display: flex; align-items: center; gap: 10px; }

.seletor-cor input[type="color"] {
    width: 44px;
    height: 36px;
    padding: 3px;
    cursor: pointer;
}

.seletor-cor code { font-size: 13px; color: var(--cor-texto-suave); text-transform: uppercase; }

.tema-previa {
    display: flex;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    min-height: 150px;
}

.tema-previa-menu {
    width: 130px;
    padding: 8px 6px;
    background: var(--cor-menu-fundo);
    color: var(--cor-menu-texto-suave);
    font-size: 12px;
}

.tema-previa-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: var(--raio-pequeno);
    white-space: nowrap;
}

.tema-previa-item.ativo { background: var(--cor-botao); color: var(--cor-botao-texto); }

.tema-previa-conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--cor-fundo);
}

.tema-previa-conteudo .btn { pointer-events: none; }

.amostra-cor { display: flex; align-items: center; gap: 8px; }

.amostra-cor span {
    width: 22px;
    height: 22px;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--cor-borda);
}

.amostra-cor code { text-transform: uppercase; }

/* ---------- Cartões / dados ---------- */

.cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.cartao-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--cor-texto-suave); }

.estado-vazio { text-align: center; padding: 48px 24px; color: var(--cor-texto-suave); }
.estado-vazio .bi { font-size: 40px; }
.estado-vazio p { margin: 12px 0 0; }

.empresa-resumo { display: flex; align-items: center; gap: 24px; }
.empresa-resumo p { margin: 4px 0 0; }

.empresa-logo {
    flex-shrink: 0;
    width: 200px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    padding: 10px;
    color: var(--cor-texto-suave);
    font-size: 12px;
}

.empresa-logo .bi { font-size: 28px; }
.empresa-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.dados {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
    margin: 0;
}

.dados dt { font-size: 12px; color: var(--cor-texto-suave); margin-bottom: 4px; }
.dados dd { margin: 0; }
.dado-largo { grid-column: span 2; }

.pagina-login .login-logo { display: block; max-width: 220px; max-height: 80px; margin: 0 auto 20px; object-fit: contain; }

/* ---------- Permissões ---------- */

.modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

.modulo {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    padding: 12px 14px;
}

.modulo h3 { text-transform: capitalize; margin-bottom: 8px; }

.opcao {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: normal;
    padding: 4px 0;
    margin: 0;
    cursor: pointer;
}

.opcao input { margin-top: 2px; }
.opcao code { color: var(--cor-texto-suave); font-size: 11px; display: block; }

/* ---------- Abas (no estilo das nav-tabs do Bootstrap) ---------- */

.abas {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--cor-borda);
    margin-bottom: 20px;
    overflow-x: auto;
}

.aba {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0;
    background: transparent;
    color: var(--cor-texto-suave);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.aba:hover { color: var(--cor-texto); background: var(--cor-superficie-hover); }

.aba.ativo {
    color: var(--cor-texto);
    font-weight: 600;
    background: var(--cor-superficie);
    border-color: var(--cor-borda) var(--cor-borda) var(--cor-superficie);
}

.aba:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }

.aba-contador {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--cor-fundo);
    color: var(--cor-texto-suave);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

.aba-erro { color: var(--cor-perigo); }

.aba-painel[hidden] { display: none; }


.obrigatorio { color: var(--cor-perigo); }

.lista-vazia {
    padding: 20px;
    border: 1px dashed #cfd5dc;
    border-radius: var(--raio-pequeno);
    color: var(--cor-texto-suave);
    text-align: center;
    margin-bottom: 12px;
}

/* ---------- Ativos ---------- */

.ativo-basico { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }

.foto-previa { width: 180px; height: 140px; margin-bottom: 8px; }
.foto-previa img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

/* <label class="btn"> que envolve um input de arquivo escondido */
.botao-arquivo { position: relative; display: inline-flex; font-weight: normal; margin: 0; }
.botao-arquivo:focus-within { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

.opcao-compacta { display: inline-flex; align-items: center; font-size: 13px; padding: 6px 0 0; }
.opcao-compacta input { margin: 0; }

input:disabled,
select:disabled { background: var(--cor-superficie-hover); color: var(--cor-texto-suave); }

.especificacoes { margin-bottom: 12px; }

.especificacoes-cabecalho,
.especificacao-linha {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 34px;
    gap: 8px;
    align-items: center;
}

.especificacoes-cabecalho { font-size: 12px; font-weight: 600; color: var(--cor-texto-suave); margin-bottom: 6px; }
.especificacao-linha { margin-bottom: 8px; }
.especificacao-linha .erro-campo { grid-column: 1 / -1; margin-top: -4px; }

/* Linhas com alça para arrastar (cadastro de ativo) */
.especificacoes.arrastavel .especificacoes-cabecalho,
.especificacoes.arrastavel .especificacao-linha { grid-template-columns: 16px minmax(0, 2fr) minmax(0, 3fr) 34px; }
.alca-arrastar { cursor: grab; color: var(--cor-texto-suave); touch-action: none; text-align: center; }
.especificacao-linha.arrastando { opacity: .6; }
.especificacao-linha.arrastando .alca-arrastar { cursor: grabbing; }

.especificacoes:not(:has([data-especificacao])) .especificacoes-cabecalho,
.especificacoes:has([data-especificacao]) .lista-vazia { display: none; }

.btn-icone { justify-content: center; padding: 8px 0; width: 34px; }
.btn-icone:hover { color: var(--cor-perigo); }

.anexos-enviar { margin-bottom: 16px; }

.anexos-lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.anexos-lista:empty { display: none; }

.anexo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
}

.anexo-icone { font-size: 22px; color: var(--cor-texto-suave); flex-shrink: 0; }
.anexo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anexo-info .dica { margin: 2px 0 0; }
.anexo-nome { color: var(--cor-texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.anexo-nome:hover { color: var(--cor-primaria); }

.anexo-remover { padding: 0; color: var(--cor-texto-suave); flex-shrink: 0; }
.anexo:has(.anexo-remover input:checked) { background: #fdecea; border-color: #f6c9c5; }
.anexo:has(.anexo-remover input:checked) .anexo-nome { text-decoration: line-through; color: var(--cor-texto-suave); }

.anexo-novo { border-style: dashed; background: var(--cor-superficie-hover); }

/* Galeria de fotos do ativo */
.fotos-enviar { margin-bottom: 16px; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.galeria-novas { display: contents; }

.galeria-item {
    margin: 0;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    background: var(--cor-superficie);
}

.galeria-imagem {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--cor-superficie-hover);
    color: var(--cor-texto-suave);
}

.galeria-imagem img { width: 100%; height: 100%; object-fit: cover; }
.galeria-vazia { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.galeria-vazia .bi { font-size: 24px; }
.galeria-imagem img[hidden], .galeria-vazia[hidden] { display: none; }

.galeria-item figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 40px;
    padding: 6px 8px;
}

.galeria-item figcaption .dica { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galeria-item figcaption .btn-icone { padding: 4px 0; width: 28px; flex-shrink: 0; }
.galeria-principal { border-color: var(--cor-botao); }
.galeria-nova { border-style: dashed; }
.galeria-excedente { border-color: var(--cor-perigo); }
.galeria-excedente img { opacity: .35; }
.galeria-remover { padding: 0; color: var(--cor-texto-suave); }
.galeria-item:has(.galeria-remover input:checked) { border-color: #f6c9c5; }
.galeria-item:has(.galeria-remover input:checked) img { opacity: .35; }

.col-foto { width: 56px; }

tr.linha-clicavel { cursor: pointer; }
.link-linha { color: var(--cor-texto); font-weight: 600; text-decoration: none; }
.link-linha:hover { color: var(--cor-primaria); text-decoration: underline; }

/* Cabeçalho da visualização: espaço à direita para o botão de fechar do modal */
.ativo-cabecalho { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding-right: 36px; }
.ativo-cabecalho .foto-previa { margin: 0; width: 140px; height: 105px; flex-shrink: 0; }
.ativo-cabecalho p { margin: 4px 0 8px; }

.tabela-especificacoes td:first-child { font-weight: 600; width: 40%; }

.miniatura {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie-hover);
    color: var(--cor-texto-suave);
    overflow: hidden;
}

.miniatura img { width: 100%; height: 100%; object-fit: cover; }

/* Sem foto: câmera com traço diagonal (o Bootstrap Icons não tem camera-slash) */
.sem-foto { position: relative; display: inline-flex; font-size: 1.1rem; }
.sem-foto::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130%;
    height: 2px;
    background: currentColor;
    box-shadow: 0 0 0 1px var(--cor-superficie-hover);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.badge-alerta { background: #fdecea; color: #a33; }

.badges { display: flex; flex-wrap: wrap; gap: 4px; }
a.badge { text-decoration: none; }
a.badge:hover { filter: brightness(.95); text-decoration: underline; }

/* Perfis do usuário (vários por pessoa) */
.grupo-perfis { border: none; padding: 0; margin: 0; min-width: 0; }
.grupo-perfis legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; padding: 0; }
.grupo-perfis legend small { font-weight: normal; color: var(--cor-texto-suave); }
.perfis-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }

.opcao-cartao {
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
}

.opcao-cartao:has(input:checked) { border-color: var(--cor-botao); background: var(--cor-superficie-hover); }
.opcao-cartao input { margin: 0; }
[data-opcao-login][hidden], [data-requer-login][hidden] { display: none; }

.link-whatsapp { display: inline-flex; align-items: center; gap: 6px; color: var(--cor-texto); text-decoration: none; white-space: nowrap; }
.link-whatsapp .bi { color: #25d366; font-size: 15px; }
.link-whatsapp:hover { color: #128c7e; text-decoration: underline; }

/* ---------- Modal ---------- */

dialog.modal {
    border: none;
    border-radius: var(--raio);
    box-shadow: var(--sombra-modal);
    padding: 0;
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    color: var(--cor-texto);
}

dialog.modal-pequeno { width: min(420px, calc(100vw - 32px)); }
dialog.modal:has(.painel-largo) { width: min(820px, calc(100vw - 32px)); }

dialog.modal::backdrop { background: rgba(16, 24, 40, .45); }

dialog.modal[open] { animation: modal-entrar .15s ease-out; }

@keyframes modal-entrar {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

.modal-fechar {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--raio-pequeno);
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--cor-texto-suave);
    cursor: pointer;
}

.modal-fechar:hover { background: var(--cor-superficie-hover); color: var(--cor-texto); }

.modal-conteudo { padding: 24px; }

/* Dentro do modal o painel perde a "moldura", pois o modal já é a moldura */
.modal-conteudo .painel {
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: none;
}

.modal-conteudo .painel > h2 { padding-right: 36px; }

/* Foto ampliada: ocupa quase toda a tela, por cima do modal do cadastro */
/* O modal ocupa quase toda a tela e a imagem preenche a área com object-fit: contain,
   que a mantém inteira e centralizada (horizontal e vertical) em qualquer proporção. */
dialog.modal-imagem {
    width: calc(100vw - 32px);
    height: calc(100vh - 32px);
    max-width: none;
    max-height: none;
    padding: 0;
    background: #111;
    color: #fff;
    overflow: hidden;
}

dialog.modal-imagem[open] { display: flex; flex-direction: column; }

dialog.modal-imagem::backdrop { background: rgba(0, 0, 0, .8); }

.modal-imagem img {
    display: block;
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 16px 64px 0;
    object-fit: contain;
    object-position: center;
}

.modal-imagem .modal-fechar,
.imagem-navegar {
    z-index: 1;
    color: #fff;
    background: rgba(0, 0, 0, .45);
}

.modal-imagem .modal-fechar:hover,
.imagem-navegar:hover { background: rgba(0, 0, 0, .7); color: #fff; }

.imagem-navegar {
    position: absolute;
    top: calc(50% - 16px);
    transform: translateY(-50%);
    width: 40px;
    height: 56px;
    border: none;
    border-radius: var(--raio-pequeno);
    font-size: 22px;
    cursor: pointer;
}

.imagem-anterior { left: 10px; }
.imagem-proxima { right: 10px; }
.modal-imagem.uma-foto .imagem-navegar { display: none; }

.imagem-rodape {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, .75);
}

.imagem-rodape a { color: #fff; text-decoration: none; }
.imagem-rodape a:hover { text-decoration: underline; }

a[data-ampliar] { cursor: zoom-in; }
.foto-previa a[data-ampliar] { display: block; width: 100%; height: 100%; }

.modal-carregando { padding: 48px; text-align: center; color: var(--cor-texto-suave); }

.modal-confirmacao p { margin: 12px 0 0; color: var(--cor-texto-suave); }

/* ---------- Login ---------- */

.pagina-login {
    background: var(--cor-menu-fundo);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pagina-login form {
    background: var(--cor-superficie);
    padding: 32px;
    border-radius: var(--raio);
    box-shadow: var(--sombra-modal);
    width: 100%;
    max-width: 360px;
}

/* Imagem de fundo (cadastro da empresa). O véu escuro garante contraste para o formulário. */
.pagina-login.com-fundo {
    background:
        linear-gradient(rgba(16, 24, 40, .35), rgba(16, 24, 40, .35)),
        var(--fundo-login) center / cover no-repeat,
        var(--cor-menu-fundo);
}

.pagina-login h2 { margin-bottom: 20px; }
.pagina-login .campo { margin-bottom: 14px; }
.pagina-login .btn { width: 100%; justify-content: center; padding: 10px; margin-top: 6px; }

/* Assinatura da plataforma no cartão de login (o fundo do cartão é sempre claro) */
.pagina-login .login-plataforma {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--cor-borda);
    font-size: 11px;
    color: var(--cor-texto-suave);
    text-decoration: none;
    opacity: .8;
}
.pagina-login .login-plataforma:hover { opacity: 1; }
.pagina-login .login-plataforma img { height: 18px; width: auto; }

/* ---------- Responsivo ---------- */

/* Em telas estreitas o menu fica sempre recolhido (a classe é aplicada pelo JS) */
@media (max-width: 767px) {
    main { padding: 16px; }
    .menu-alternar { display: none; }
    .menu-recolhido .menu-topo .menu-marca { display: flex; }
}

@media (max-width: 640px) {
    .modal-imagem img { padding: 8px 0 0; }
    .campos,
    .campos-endereco,
    .dados { grid-template-columns: 1fr; }
    .campo-duplo,
    .dado-largo { grid-column: auto; }
    .upload-logo,
    .empresa-resumo { flex-direction: column; align-items: stretch; }
    .upload-fundo,
    .tema,
    .tema-cores,
    .ativo-basico { grid-template-columns: 1fr; }
    .ativo-cabecalho { flex-direction: column; align-items: flex-start; }
    .especificacao-linha { grid-template-columns: 1fr 34px; }
    .especificacao-linha input:nth-of-type(2) { grid-column: 1; }
    .especificacoes.arrastavel .especificacao-linha { grid-template-columns: 16px 1fr 34px; }
    .especificacoes.arrastavel .especificacao-linha .alca-arrastar { grid-row: span 2; }
    .especificacoes.arrastavel .especificacao-linha input:nth-of-type(2) { grid-column: 2; }
    .especificacoes-cabecalho { display: none; }
}

/* ---------- Ordenação de colunas ---------- */

button.ordenar {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

th a.ordenar,
button.ordenar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

th a.ordenar .bi, button.ordenar .bi { font-size: 13px; opacity: .35; }
th a.ordenar:hover, button.ordenar:hover { color: var(--cor-texto); }
th a.ordenar:hover .bi, button.ordenar:hover .bi { opacity: .7; }
th a.ordenar.ativa, button.ordenar.ativa { color: var(--cor-primaria-escura); }
th a.ordenar.ativa .bi, button.ordenar.ativa .bi { opacity: 1; }

/* ---------- Campo com unidade (ex.: contador do ativo) ---------- */

.campo-unidade { display: flex; align-items: center; gap: 8px; }
.campo-unidade input { flex: 1; min-width: 0; margin: 0; }
.campo-unidade .unidade { color: var(--cor-texto-suave); font-size: 13px; white-space: nowrap; }

/* ---------- Prefixo do identificador ---------- */

.texto-maiusculo { text-transform: uppercase; }

/* ---------- Cadastro em lote ---------- */

textarea { font: inherit; resize: vertical; }
.texto-perigo { color: var(--cor-perigo); }
.opcoes-lote { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opcoes-lote .dica { margin: 2px 0 0; }
[data-modo-painel][hidden], [data-previa-desatualizada][hidden], .btn[hidden] { display: none; }
.previa-lote .tabela-rolagem { max-height: 280px; overflow-y: auto; }
.previa-desatualizada { opacity: .45; }
.campo-unidade .unidade:empty { display: none; }

/* ---------- Lista de ativos agrupada por categoria ---------- */

.botao-grupo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.botao-grupo .seta-grupo { font-size: 12px; transition: transform .15s; }
.linha-grupo[aria-expanded="true"] .seta-grupo { transform: rotate(90deg); }
.linha-grupo[aria-expanded="true"] td { background: var(--cor-superficie-hover); }
.linha-unidade td { background: #fbfcfd; }
.linha-unidade td:nth-child(2) { padding-left: 36px; }
.busca .btn.ativo { border-color: var(--cor-botao); color: var(--cor-primaria-escura); }
.busca .btn .aba-contador { margin-left: 2px; }

/* Filtros da lista em modal (botão de lupa) e etiquetas dos filtros aplicados */
.campos-filtros { grid-template-columns: 1fr; margin-top: 16px; }
.busca dialog select { width: 100%; max-width: none; }
.filtros-ativos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -8px 0 16px; }
.filtro-ativo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    font-size: 12px;
    text-decoration: none;
}
.filtro-ativo:hover { border-color: var(--cor-perigo); color: var(--cor-perigo); }
.filtro-limpar { font-size: 12px; color: var(--cor-texto-suave); }

/* ---------- Clientes e contatos ---------- */

.texto-preformatado { white-space: pre-wrap; margin: 0; }
.opcoes-tipo-pessoa { margin-bottom: 16px; }
.opcoes-tipo-pessoa .opcao-cartao { gap: 8px; }

.contatos-acoes { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.busca-contato { position: relative; flex: 1; }
.busca-contato > .bi { position: absolute; left: 11px; top: 11px; color: var(--cor-texto-suave); pointer-events: none; }
.busca-contato input { padding-left: 32px; margin: 0; }

.sugestoes {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 100%;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra-modal);
    max-height: 300px;
    overflow-y: auto;
}
.sugestoes[hidden] { display: none; }
.sugestoes button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--raio-pequeno);
    background: none;
    color: var(--cor-texto);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sugestoes button:hover:not(:disabled),
.sugestoes button:focus-visible { background: var(--cor-superficie-hover); outline: none; }
.sugestoes button:disabled { opacity: .55; cursor: default; }
.sugestoes .dica { margin: 2px 0 0; }
.sugestao-vazia { padding: 8px 10px; color: var(--cor-texto-suave); font-size: 13px; }

.contato-cartao {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 14px;
    margin-bottom: 12px;
    background: var(--cor-superficie);
}
.contato-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.contato-compartilhado { color: #8a5a00; margin: 4px 0 0; }
.contato-telefones { margin-top: 14px; }

.telefone-linha {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 34px;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.telefone-linha input { margin: 0; }
.telefone-com-padrao { grid-template-columns: 22px minmax(0, 2fr) minmax(0, 2fr) 34px; }
.telefone-padrao { display: flex; justify-content: center; margin: 0; cursor: pointer; }
.telefone-padrao input { width: auto; }
.telefone-linha .erro-campo { grid-column: 1 / -1; margin-top: -4px; }

.contatos:has([data-contato]) .lista-vazia { display: none; }

.contatos-exibir { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contatos-exibir .contato-cartao { margin: 0; }
.contatos-exibir .contato-topo { margin-bottom: 8px; }
.contato-meios { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 14px; }

@media (max-width: 640px) {
    .contatos-acoes { flex-direction: column; align-items: stretch; }
    .contatos-exibir { grid-template-columns: 1fr; }
    .telefone-linha { grid-template-columns: minmax(0, 1fr) 34px; }
    .telefone-linha input[name$="[descricao]"] { grid-column: 1; }
    .telefone-com-padrao { grid-template-columns: 22px minmax(0, 1fr) 34px; }
    .telefone-com-padrao .telefone-padrao { grid-row: span 2; }
    .telefone-com-padrao input[name$="[descricao]"] { grid-column: 2; }
}

/* ---------- Cadastro de contatos ---------- */

.alerta.aviso-associacoes { background: #fff8e6; border-color: #f3dfa8; color: #6b4a00; }
.texto-cortado { max-width: clamp(280px, 25vw, 560px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Ajuda em balão (App\Core\Ajuda::icone) ---------- */

.ajuda {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--cor-texto-suave);
    font-size: 13px;
    font-weight: normal;
    line-height: 1;
    vertical-align: middle;
    cursor: help;
    border-radius: 50%;
    opacity: .75;
}
.ajuda:hover,
.ajuda:focus-visible { color: var(--cor-primaria); opacity: 1; outline: none; }
.ajuda:focus-visible { box-shadow: 0 0 0 3px rgba(45, 108, 223, .2); }
.ajuda[hidden] { display: none; }

.balao-ajuda {
    position: fixed;
    z-index: 1000;
    max-width: min(300px, calc(100vw - 16px));
    padding: 8px 10px;
    border-radius: var(--raio-pequeno);
    background: #1f2933;
    color: #fff;
    font-size: 12.5px;
    font-weight: normal;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .25);
    pointer-events: none;
}
.balao-ajuda::after {
    content: '';
    position: absolute;
    left: calc(var(--seta-x, 50%) - 5px);
    border: 5px solid transparent;
}
.balao-ajuda[data-posicao="acima"]::after { top: 100%; border-top-color: #1f2933; }
.balao-ajuda[data-posicao="abaixo"]::after { bottom: 100%; border-bottom-color: #1f2933; }

.campo-unidade .btn-icone { flex-shrink: 0; }

/* ---------- Campo de busca com sugestões ---------- */

.autocompletar { position: relative; }
.autocompletar input { margin: 0; }
.autocompletar.sem-selecao input[data-autocompletar-texto] { border-color: #e0a800; background: #fffaf0; }

/* ---------- Mapa de endereço (Leaflet) ---------- */

.mapa-campo { margin-bottom: 16px; }
.mapa-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.mapa-acoes .dica { margin: 0; }
.mapa {
    height: 320px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    background: var(--cor-superficie-hover);
    z-index: 0;
}
.mapa-campo.com-erro .mapa { border-color: var(--cor-perigo); }

/* ---------- Local do ativo ---------- */

.local-ativo { display: inline-flex; align-items: center; gap: 6px; }
.local-ativo .bi { color: var(--cor-texto-suave); }
.opcoes-local { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
[data-destino-local][hidden] { display: none; }

td.col-contador { white-space: nowrap; }

/* Select com botão ao lado (ex.: categoria + checklist de cadastro) */
.campo-com-acao { display: flex; gap: 6px; align-items: stretch; }
.campo-com-acao select { flex: 1; min-width: 0; }
.campo-com-acao .btn { flex-shrink: 0; }
.btn-checklist { justify-content: center; width: 40px; padding-left: 0; padding-right: 0; font-size: 16px; }
.btn-checklist[hidden] { display: none; }

/* Cliente / fornecedor */
.badge-papel-cliente { background: #e7f0fb; color: #1d5fa8; }
.badge-papel-fornecedor { background: #f3ecfb; color: #6b3fa0; }
.grupo-papeis { margin-bottom: 14px; }
.grupo-papeis .perfis-opcoes { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ---------- Painel (tela inicial) ---------- */

.painel-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.painel-kpis .cartao { margin: 0; }
.painel-kpis-pequenos { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.kpi { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--cor-texto); transition: border-color .15s, box-shadow .15s; }
.kpi:hover { border-color: var(--cor-botao); box-shadow: 0 2px 8px rgba(16, 24, 40, .08); }
.kpi-rotulo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cor-texto-suave); }
.kpi-valor { font-size: 32px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-valor small { font-size: 15px; font-weight: 600; color: var(--cor-texto-suave); margin-left: 4px; }
.kpi-detalhe { font-size: 12px; color: var(--cor-texto-suave); }
.kpi-alerta { border-left: 4px solid #c2410c; }
.kpi-alerta .kpi-detalhe { color: #9a3412; }

.painel-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.painel-grade .cartao { margin: 0; min-width: 0; }
.painel-largo-2 { grid-column: span 2; }
.painel-largo-total { grid-column: 1 / -1; }

.painel-grafico { position: relative; width: 100%; }
.painel-vazio { color: var(--cor-texto-suave); margin: 8px 0; display: flex; align-items: center; gap: 8px; }
.painel-secao { font-size: 16px; margin: 8px 0 12px; }

.painel-tabela { margin-top: 10px; font-size: 13px; }
.painel-tabela summary { cursor: pointer; color: var(--cor-texto-suave); font-size: 12px; }
.painel-tabela table { margin-top: 8px; }
.painel-tabela td, .painel-tabela th { padding: 6px 8px; }
.painel-tabela .numero { text-align: right; font-variant-numeric: tabular-nums; }

.medidor { margin-bottom: 16px; }
.medidor-topo { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 6px; }
.medidor-trilho { height: 8px; border-radius: 4px; background: #cde2fb; overflow: hidden; }
.medidor-barra { height: 100%; border-radius: 4px; background: #2a78d6; }
.medidor-detalhe { font-size: 12px; color: var(--cor-texto-suave); margin-top: 4px; }

.painel-lista { list-style: none; margin: 0; padding: 0; }
.painel-lista li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--cor-borda); font-size: 13px; }
.painel-lista li:last-child { border-bottom: none; }
.painel-lista li > .bi { color: var(--cor-texto-suave); margin-top: 2px; }

@media (max-width: 1100px) {
    .painel-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .painel-grade { grid-template-columns: minmax(0, 1fr); }
    .painel-largo-2 { grid-column: auto; }
}

/* ---------- Ordens de serviço ---------- */

/* Lista de uma coluna (tarefas): alça, texto e remover */
.especificacoes.arrastavel.lista-simples .especificacoes-cabecalho,
.especificacoes.arrastavel.lista-simples .especificacao-linha { grid-template-columns: 16px minmax(0, 1fr) 34px; }
.especificacao-linha > .dica { grid-column: 2 / -1; margin-top: -4px; }

.lista-regras { margin: 0; padding-left: 18px; font-size: 13px; }
.topo-acoes .btn.ativo { border-color: var(--cor-botao); color: var(--cor-primaria-escura); }

.ativos-escolhidos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ativo-escolhido {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    transition: background-color .3s;
}
.ativo-escolhido [data-ativo-texto] { flex: 1; min-width: 0; }
.ativo-escolhido.destaque { background: #fff8e6; }

.os-topo { align-items: flex-start; flex-wrap: wrap; }
.os-topo h1 { margin-bottom: 6px; }
.os-topo .acoes { flex-wrap: wrap; justify-content: flex-end; }
.os-secao { margin-top: 8px; }
.os-secao h2 { font-size: 18px; margin: 0; display: flex; align-items: center; gap: 8px; }
.os-pendencias ul, .alerta ul { margin: 6px 0 0; padding-left: 20px; }

.os-ativo-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.os-ativo-titulo { display: flex; gap: 12px; align-items: center; min-width: 0; }
.os-ativo-titulo h3 { margin: 0 0 4px; font-size: 16px; }
.os-ativo-campos { margin-top: 12px; }

.os-tarefas td { vertical-align: middle; }
.os-tarefas td:first-child { width: 40%; }
.os-tarefas input[type="text"] { margin: 0; }
.os-tarefas tr.tarefa-feita td:first-child { color: #2b7a3f; }
.os-tarefas tr.tarefa-nao_feita td:first-child { color: #a33; }
.os-tarefas tr.tarefa-nao_aplica td:first-child { color: var(--cor-texto-suave); }

/* Resultado da tarefa: rádios como botões lado a lado */
.segmentado { display: inline-flex; border: 1px solid var(--cor-borda); border-radius: var(--raio-pequeno); overflow: hidden; }
.segmento { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.segmento + .segmento { border-left: 1px solid var(--cor-borda); }
.segmento input { position: absolute; opacity: 0; pointer-events: none; }
.segmento:has(input:focus-visible) { outline: 2px solid var(--cor-botao); outline-offset: -2px; }
.segmento-pendente:has(input:checked) { background: var(--cor-superficie-hover); }
.segmento-feita:has(input:checked) { background: #e6f4ea; color: #2b7a3f; }
.segmento-nao_feita:has(input:checked) { background: #fdecea; color: #a33; }
.segmento-nao_aplica:has(input:checked) { background: #eef0f3; color: var(--cor-texto-suave); }

.tarefa-status { display: inline-flex; align-items: center; gap: 4px; }
.tarefa-status-feita { color: #2b7a3f; }
.tarefa-status-nao_feita { color: #a33; }
.tarefa-status-pendente, .tarefa-status-nao_aplica { color: var(--cor-texto-suave); }

td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
    .os-ativo-topo { flex-direction: column; }
    .os-tarefas td:first-child { width: auto; }
    .segmento span { display: none; }
    .segmento { padding: 6px 10px; }
}