/* ===================================================
   COE Soluções e Cálculos — Identidade Visual
   Paleta: azul predominante
   =================================================== */

/* Variáveis de cor */
:root {
    --coe-azul:          #1565C0;
    --coe-azul-escuro:   #0D47A1;
    --coe-azul-claro:    #1E88E5;
    --coe-azul-hover:    #1976D2;
    --coe-azul-fundo:    #E3F2FD;
    --coe-branco:        #FFFFFF;
    --coe-cinza-claro:   #F5F5F5;
    --coe-cinza:         #9E9E9E;
    --coe-cinza-escuro:  #424242;
    --coe-texto:         #212121;
    --coe-texto-claro:   #757575;
    --coe-sucesso:       #2E7D32;
    --coe-erro:          #C62828;
    --coe-aviso:         #F57F17;

    --menu-largura:      240px;
    --menu-recolhido:    60px;
    --header-altura:     56px;
    --sombra:            0 2px 8px rgba(0,0,0,0.15);
    --raio:              6px;
    --transicao:         0.25s ease;
}

/* ===================================================
   Reset e base
   =================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 27px;
    color: var(--coe-texto);
    background: var(--coe-cinza-claro);
    overflow: hidden;
    text-transform: uppercase;
}

/* ===================================================
   Layout principal
   =================================================== */
.coe-app {
    display: flex;
    height: 100vh;
    height: 100dvh; /* altura dinâmica: respeita a barra do navegador no celular (evita rodapé cortado) */
    width: 100vw;
    overflow: hidden;
}

.coe-conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: margin-left var(--transicao);
}

.coe-main {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: var(--coe-cinza-claro);
}

/* ===================================================
   Header
   =================================================== */
.coe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-altura);
    background: var(--coe-azul);
    color: var(--coe-branco);
    padding: 0 20px;
    box-shadow: var(--sombra);
    flex-shrink: 0;
    z-index: 100;
}

.header-titulo {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.header-direita {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Status de conexão */
.status-conexao {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
}

.status-bolinha {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status-conexao.online .status-bolinha  { background: #69F0AE; }
.status-conexao.offline .status-bolinha { background: #FF5252; }
.status-conexao.online .status-texto    { color: #69F0AE; }
.status-conexao.offline .status-texto   { color: #FF5252; }

/* ===================================================
   Menu lateral
   =================================================== */
.menu-lateral {
    display: flex;
    flex-direction: column;
    background: var(--coe-azul-escuro);
    color: var(--coe-branco);
    transition: width var(--transicao);
    overflow: hidden;
    flex-shrink: 0;
    z-index: 200;
    position: relative;
}

.menu-lateral.expandido  { width: var(--menu-largura); }
.menu-lateral.recolhido  { width: var(--menu-recolhido); }

/* Logo */
.menu-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    background: rgba(0,0,0,0.2);
    min-height: var(--header-altura);
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;          /* a logo é o botão de abrir/fechar o menu (toque grande, sempre no topo) */
    user-select: none;
}

/* Setinha indicando que tocar na logo recolhe o menu */
.logo-toggle-ind {
    margin-left: auto;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    flex-shrink: 0;
}

.logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-texto {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--coe-branco);
}

/* Itens do menu */
.menu-itens {
    flex: 0 1 auto;   /* NÃO estica: a seta de recolher fica logo abaixo do último item, não no fundo da tela */
    min-height: 0;    /* permite encolher e rolar quando há muitos itens (ex.: Administrativo aberto) */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

.menu-itens::-webkit-scrollbar { width: 4px; }
.menu-itens::-webkit-scrollbar-track { background: transparent; }
.menu-itens::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

/* Área do menu */
.menu-area-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    text-align: left;
    transition: background var(--transicao), color var(--transicao);
    white-space: nowrap;
}

.menu-area-btn:hover, .menu-area.ativa > .menu-area-btn {
    background: rgba(255,255,255,0.1);
    color: var(--coe-branco);
}

.menu-icone {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.menu-area-titulo { flex: 1; }

.menu-seta {
    font-size: 12px;
    transition: transform var(--transicao);
    display: inline-block;
}
.menu-seta.aberta { transform: rotate(90deg); }

/* Subitens */
.menu-subitens {
    overflow: hidden;
    background: rgba(0,0,0,0.15);
}

.menu-subitem {
    display: block;
    padding: 8px 12px 8px 48px;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 13px;
    transition: background var(--transicao), color var(--transicao);
    white-space: nowrap;
}

.menu-subitem:hover, .menu-subitem.ativo {
    background: rgba(255,255,255,0.12);
    color: var(--coe-branco);
}

.menu-subitem.ativo {
    border-left: 3px solid var(--coe-azul-claro);
    padding-left: 45px;
}

/* Botão toggle */
.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border: none;
    border-top: 1px solid rgba(255,255,255,0.08); /* divisor: separa a seta do último item do menu */
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 14px;
    transition: background var(--transicao), color var(--transicao);
    flex-shrink: 0;
}

.menu-toggle:hover {
    background: rgba(0,0,0,0.3);
    color: var(--coe-branco);
}

/* ===================================================
   Cards
   =================================================== */
.coe-card {
    background: var(--coe-branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 20px;
    margin-bottom: 16px;
}

.coe-card-titulo {
    font-size: 16px;
    font-weight: 600;
    color: var(--coe-azul);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--coe-azul-fundo);
}

/* ===================================================
   Botões
   =================================================== */
.btn-coe,
.btn-primario,
.btn-secundario {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 39px;
    padding: 8px 18px;
    border-radius: var(--raio);
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--transicao), transform 0.1s;
}

.btn-coe:active,
.btn-primario:active,
.btn-secundario:active { transform: scale(0.98); }

.btn-primario  { background: var(--coe-azul); color: var(--coe-branco); }
.btn-primario:hover { background: var(--coe-azul-hover); }

.btn-secundario { background: var(--coe-azul-fundo); color: var(--coe-azul); }
.btn-secundario:hover { background: #BBDEFB; }

.btn-perigo { background: var(--coe-erro); color: var(--coe-branco); }
.btn-perigo:hover { background: #B71C1C; }

.btn-acao { background: transparent; color: var(--coe-azul); border: 1px solid var(--coe-azul); }
.btn-acao:hover { background: var(--coe-azul-fundo); }
.btn-sm { padding: 5px 12px; font-size: 12px; height: auto; }

/* ===================================================
   Formulários
   =================================================== */
.form-grupo {
    margin-bottom: 14px;
}

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--coe-texto-claro);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.form-control:not([type=checkbox]):not([type=radio]),
.coe-input:not([type=checkbox]):not([type=radio]) {
    box-sizing: border-box;
    width: 100%;
    /* ⛔ CAIXA JUSTA (dono, 20/08/2026 — global, todas as telas): "o campo está grande,
       a escrita dentro está boa, só o espaço que fica está muito grande — alterar o
       INTERNO pra cinco e a caixa vai diminuir pra trinta e três". 5+5 de padding +
       21 da linha (14px x 1,5) + 2 das bordas = 33. A altura ACOMPANHA o padding:
       com height fixo, mexer só no padding não encolheria nada. */
    height: 33px;
    padding: 5px 12px;
    border: 1px solid #BDBDBD;
    border-radius: var(--raio);
    font-size: 14px;
    line-height: 1.5;
    color: var(--coe-texto);
    background: var(--coe-branco);
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.form-control:not([type=checkbox]):not([type=radio]):focus,
.coe-input:not([type=checkbox]):not([type=radio]):focus {
    outline: none;
    border-color: var(--coe-azul-claro);
    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15);
}

/* Senha INTERNA do sistema (senha administrativa) — ver Shared/InputSenhaInterna.razor.
   A máscara é feita AQUI, no CSS, e não com type="password": sem campo de senha o navegador
   não trata o valor como credencial — nada de "salvar senha", autopreenchimento nem a
   checagem de vazamento do Google. Suportado por Chrome/Edge/WebView2, Safari e Firefox 132+. */
.coe-senha-interna {
    -webkit-text-security: disc;
    text-security: disc;
}

/* Seta ▼ em todos os <select> do sistema
   !important necessário: .form-control:not() tem especificidade maior e sobrescreve background */
select.form-control,
select.coe-input,
select:not([multiple]) {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-color: var(--coe-branco) !important;
    padding-right: 30px !important;
    cursor: pointer;
}

/* Remove spinner (setas up/down) de todos os campos numéricos */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ===================================================
   Tabelas
   =================================================== */
.coe-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.coe-tabela th {
    background: var(--coe-azul);
    color: var(--coe-branco);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.coe-tabela td {
    padding: 9px 12px;
    border-bottom: 1px solid #EEEEEE;
}

.coe-tabela tr:hover td { background: var(--coe-azul-fundo); }

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

/* ===================================================
   Badge / Status
   =================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.badge-sucesso { background: #E8F5E9; color: var(--coe-sucesso); }
.badge-erro    { background: #FFEBEE; color: var(--coe-erro); }
.badge-aviso   { background: #FFFDE7; color: var(--coe-aviso); }
.badge-info    { background: var(--coe-azul-fundo); color: var(--coe-azul); }

/* ===================================================
   Spinner / Loading
   =================================================== */
.coe-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--coe-azul-fundo);
    border-top-color: var(--coe-azul);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===================================================
   Overlay de progresso GLOBAL (janela "Em evolução… aguarde")
   Padrão único do sistema — usado pelo componente CoeProgressOverlay.
   =================================================== */
.coe-progress-overlay { position: fixed; inset: 0; background: rgba(15,30,50,0.55); z-index: 2000;
    display: flex; align-items: center; justify-content: center; }
.coe-progress-card { background: var(--coe-branco); border-radius: 12px; padding: 28px 36px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35); text-align: center; min-width: 320px; max-width: 92vw; }
.coe-progress-titulo { font-weight: 700; color: var(--coe-azul-escuro); margin-top: 14px; font-size: 16px; }
.coe-progress-label { color: var(--coe-texto-claro); font-size: 13px; margin-top: 6px; min-height: 18px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coe-progress-bar { height: 10px; background: #E3E8EF; border-radius: 6px; overflow: hidden; margin-top: 14px; }
.coe-progress-fill { height: 100%; background: var(--coe-azul); transition: width 0.2s; }
.coe-progress-num { font-weight: 700; color: var(--coe-azul-escuro); margin-top: 8px; font-size: 14px; }

.coe-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
    color: var(--coe-texto-claro);
}

/* ===================================================
   Blazor error UI
   =================================================== */
#blazor-error-ui {
    background: #FFEBEE;
    border-left: 4px solid var(--coe-erro);
    border-radius: var(--raio);
    bottom: auto;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.24);
    color: var(--coe-erro);
    display: none;
    font-size: 14px;
    left: 50%;
    line-height: 1.35;
    max-width: min(640px, 90vw);
    padding: 14px 44px 14px 18px;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: pre-line;
    width: max-content;
    z-index: 2147483000;
}

#blazor-error-ui .reload { color: var(--coe-erro); font-weight: bold; }
#blazor-error-ui .dismiss {
    cursor: pointer;
    font-weight: bold;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ===================================================
   Wizard de Cálculo de Móvel
   =================================================== */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: 0;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    color: var(--coe-cinza);
    font-size: 12px;
    font-weight: 500;
}

.wizard-step.ativo { color: var(--coe-azul); font-weight: 700; }
.wizard-step.concluido { color: var(--coe-sucesso); }

.step-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--coe-cinza-claro);
    border: 2px solid var(--coe-cinza);
    font-size: 11px;
    font-weight: 700;
}

.wizard-step.ativo .step-nr {
    background: var(--coe-azul);
    border-color: var(--coe-azul);
    color: var(--coe-branco);
}

.wizard-step.concluido .step-nr {
    background: var(--coe-sucesso);
    border-color: var(--coe-sucesso);
    color: var(--coe-branco);
}

.wizard-sep {
    width: 24px;
    height: 2px;
    background: var(--coe-cinza-claro);
    margin: 0 4px;
}

/* Grid de formulário */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 16px;
    align-items: end;
}

.form-grid .full-width { grid-column: 1 / -1; }

.form-section-titulo {
    font-size: 12px;
    font-weight: 700;
    color: var(--coe-azul);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 0 4px;
    border-bottom: 1px solid var(--coe-azul-fundo);
    margin-bottom: 8px;
    grid-column: 1 / -1;
}

/* Ações do formulário */
.form-acoes {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--coe-cinza-claro);
    justify-content: flex-end;
}

/* Linha selecionada em tabelas */
.linha-selecionada td {
    background: var(--coe-azul-fundo) !important;
    font-weight: 600;
}

/* Avisos e mensagens */
.aviso {
    padding: 10px 14px;
    border-radius: var(--raio);
    margin-bottom: 12px;
    font-size: 13px;
}

.aviso-ok {
    background: #E8F5E9;
    color: var(--coe-sucesso);
    border-left: 3px solid var(--coe-sucesso);
}

.aviso-erro {
    background: #FFEBEE;
    color: var(--coe-erro);
    border-left: 3px solid var(--coe-erro);
}

.aviso-atencao,
.aviso-aviso,
.aviso-warning {
    background: #FFF3E0;
    color: var(--coe-aviso);
    border-left: 3px solid var(--coe-aviso);
}

.aviso-info {
    background: var(--coe-azul-fundo);
    color: var(--coe-azul);
    border-left: 3px solid var(--coe-azul);
}

.aviso-banner,
.aviso.aviso-ok,
.aviso.aviso-erro,
.aviso.aviso-atencao,
.aviso.aviso-aviso,
.aviso.aviso-warning,
.coe-alerta.coe-alerta-sucesso,
.coe-alerta.coe-alerta-erro,
.coe-alerta.coe-alerta-aviso,
.coe-alerta.coe-alerta-warning {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2147483000 !important;
    width: max-content !important;
    max-width: min(640px, 90vw) !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    border-radius: var(--raio) !important;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.24) !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: pre-line !important;
    pointer-events: auto !important;
}

/* ⛔ AVISO DE ESTADO PERMANENTE DA TELA (dono, 15/08/2026 — skill tela-mensagens):
   fica NO FLUXO da página e NÃO some no clique. É o oposto da mensagem de ação: não
   usa .aviso.aviso-* (o par acima vira banner flutuante central). Ex.: "limite de
   máquinas atingido" na tela de instalação. */
.coe-aviso-fixo {
    padding: 10px 14px; border-radius: var(--raio);
    margin-bottom: 12px; font-size: 13px;
}
.coe-aviso-fixo.erro  { background: #FFEBEE; color: var(--coe-erro);    border-left: 3px solid var(--coe-erro); }
.coe-aviso-fixo.aviso { background: #FFF3E0; color: var(--coe-aviso);   border-left: 3px solid var(--coe-aviso); }
.coe-aviso-fixo.ok    { background: #E8F5E9; color: var(--coe-sucesso); border-left: 3px solid var(--coe-sucesso); }

/* Avisos escondidos ao clicar em qualquer campo (via coe-mascara.js). !important vence o position:fixed acima. */
.coe-aviso-oculto { display: none !important; }

/* ⛔ AVISO PERSISTENTE DA TRAVA DE SAÍDA (dono, 25/08/2026): o MESMO padrão
   flutuante central dos banners, mas FORA do mata-mensagens do coe-mascara.js
   (que caça .aviso/.aviso-banner/.coe-alerta) — dispara no clique errado e NÃO
   some em clique nenhum; só o Finalizar tira. */
.coe-aviso-trava {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2147483000;
    width: max-content; max-width: min(640px, 90vw);
    margin: 0; padding: 14px 18px;
    border-radius: var(--raio);
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.24);
    text-align: center; font-size: 14px; line-height: 1.35;
    white-space: pre-line; pointer-events: auto; font-weight: 600;
    background: #FFEBEE; color: var(--coe-erro);
    border-left: 3px solid var(--coe-erro);
}

.aviso.aviso-ok,
.coe-alerta.coe-alerta-sucesso {
    background: #E8F5E9 !important;
    color: var(--coe-sucesso) !important;
    border-left: 4px solid var(--coe-sucesso) !important;
}

.aviso.aviso-erro,
.coe-alerta.coe-alerta-erro {
    background: #FFEBEE !important;
    color: var(--coe-erro) !important;
    border-left: 4px solid var(--coe-erro) !important;
}

.aviso.aviso-atencao,
.aviso.aviso-aviso,
.aviso.aviso-warning,
.coe-alerta.coe-alerta-aviso,
.coe-alerta.coe-alerta-warning {
    background: #FFF3E0 !important;
    color: var(--coe-aviso) !important;
    border-left: 4px solid var(--coe-aviso) !important;
}

/* Página */
.pagina { padding-bottom: 32px; }
.pagina-titulo {
    font-size: 20px;
    font-weight: 700;
    color: var(--coe-azul-escuro);
    margin-bottom: 16px;
}

/* Header row (portal de vendas e outros) */
.header-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

/* Ações do portal */
.moveis-acoes {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.acoes-divisor {
    width: 1px;
    height: 28px;
    background: var(--coe-cinza-claro);
    margin: 0 4px;
}

.acoes-wrapper { position: relative; }

.acoes-fundo {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.acoes-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--coe-branco);
    border: 1px solid #BDBDBD;
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    z-index: 100;
    min-width: 240px;
    overflow: hidden;
}

.acoes-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    background: none;
    border: none;
    font-size: 13px;
    color: var(--coe-texto);
    cursor: pointer;
    border-bottom: 1px solid var(--coe-cinza-claro);
}

.acoes-item:last-child { border-bottom: none; }
.acoes-item:hover { background: var(--coe-azul-fundo); color: var(--coe-azul); }
.acoes-item:disabled { color: var(--coe-cinza); cursor: not-allowed; }

/* Campo disabled */
.form-control:disabled, .form-control[readonly],
.coe-input:disabled, .coe-input[readonly] {
    background: var(--coe-cinza-claro);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ===================================================
   Seletores de Armário / Vão (Etapa 2 refatorada)
   =================================================== */
.selector-card {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--coe-branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 10px 16px;
    margin-bottom: 8px;
}

.selector-titulo {
    font-size: 12px;
    font-weight: 700;
    color: var(--coe-azul);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin-right: 4px;
}

.btn-selector {
    padding: 5px 14px;
    border-radius: var(--raio);
    border: 1px solid var(--coe-cinza);
    background: var(--coe-cinza-claro);
    color: var(--coe-texto);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.btn-selector:hover {
    background: var(--coe-azul-fundo);
    border-color: var(--coe-azul-claro);
    color: var(--coe-azul);
}

.btn-selector.ativo {
    background: var(--coe-azul);
    border-color: var(--coe-azul);
    color: var(--coe-branco);
    font-weight: 700;
}

.btn-selector-novo {
    border-style: dashed;
    color: var(--coe-azul);
    background: transparent;
}

.btn-selector-novo:hover {
    background: var(--coe-azul-fundo);
}

/* Vão já salvo — borda verde */
.btn-selector-salvo {
    border-color: var(--coe-sucesso);
    color: var(--coe-sucesso);
}

.btn-selector-salvo.ativo {
    background: var(--coe-sucesso);
    border-color: var(--coe-sucesso);
    color: var(--coe-branco);
}

/* Indicador de largura restante */
.info-restante {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--raio);
    font-size: 0.95rem;
    font-weight: 500;
    border-left: 3px solid currentColor;
}

.info-restante.restante-ok {
    color: var(--coe-sucesso);
    background-color: #E8F5E9;
}

.info-restante.restante-pendente {
    color: var(--coe-erro);
    background-color: #FFEBEE;
}

.restante-valor {
    font-size: 1.15rem;
}

/* Placeholder para áreas de FASE 2 */
.placeholder-fase2 {
    border: 2px dashed var(--coe-azul-claro);
    background: var(--coe-azul-fundo);
    border-radius: var(--raio);
    margin-bottom: 8px;
}

/* ===================================================
   COE Soluções 2026 — redesign global
   Camada visual aplicada sem alterar fluxos/telas.
   =================================================== */
:root {
    --coe-azul: #2F80ED;
    --coe-azul-escuro: #0F2347;
    --coe-azul-claro: #4EA1FF;
    --coe-azul-hover: #1D5FDB;
    --coe-azul-fundo: #EAF3FF;
    --coe-verde: #31D67B;
    --coe-verde-escuro: #27AE60;
    --coe-grafite: #111827;
    --coe-branco: #FFFFFF;
    --coe-cinza-claro: #F6F8FB;
    --coe-cinza: #94A3B8;
    --coe-cinza-escuro: #334155;
    --coe-texto: #0F172A;
    --coe-texto-claro: #667896;
    --coe-sucesso: #27AE60;
    --coe-erro: #D92D20;
    --coe-aviso: #B7791F;
    --coe-borda: #D9E1EC;
    --coe-borda-suave: #E8EEF6;
    --coe-gradiente: linear-gradient(135deg, #2F80ED 0%, #31D67B 100%);
    --coe-gradiente-horizontal: linear-gradient(90deg, #2F80ED 0%, #31D67B 100%);

    --menu-largura: 252px;
    --menu-recolhido: 72px;
    --header-altura: 58px;
    --sombra: 0 12px 28px rgba(15, 35, 71, 0.10);
    --sombra-card: 0 10px 26px rgba(15, 35, 71, 0.08);
    --raio: 8px;
    --transicao: 0.22s ease;
}

html,
body {
    min-height: 100%;
}

body {
    font-family: "Segoe UI", Inter, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--coe-texto);
    background:
        radial-gradient(circle at top left, rgba(47, 128, 237, 0.08), transparent 32rem),
        linear-gradient(180deg, #FBFCFE 0%, var(--coe-cinza-claro) 100%);
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}

.coe-app {
    background: var(--coe-cinza-claro);
}

.coe-conteudo {
    min-width: 0;
    background: transparent;
}

.coe-main {
    padding: 22px 24px 32px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(246,248,251,0.96) 240px),
        var(--coe-cinza-claro);
}

.coe-header {
    height: var(--header-altura);
    background: rgba(255, 255, 255, 0.88);
    color: var(--coe-texto);
    border-bottom: 1px solid var(--coe-borda-suave);
    box-shadow: 0 8px 22px rgba(15, 35, 71, 0.05);
    backdrop-filter: blur(12px);
    padding: 0 22px;
}

.header-esquerda,
.header-direita {
    min-width: 0;
}

.header-produto {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.header-produto-linha {
    display: inline-block;
    width: 82px;
    height: 3px;
    border-radius: 999px;
    background: var(--coe-gradiente-horizontal);
}

.header-produto-texto {
    color: var(--coe-texto-claro);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: lowercase;
    white-space: nowrap;
}

.header-titulo {
    color: var(--coe-azul-escuro);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
}

.status-conexao {
    gap: 8px;
    border: 1px solid var(--coe-borda-suave);
    border-radius: 999px;
    background: #FFFFFF;
    padding: 7px 10px;
    box-shadow: 0 6px 16px rgba(15, 35, 71, 0.06);
    color: var(--coe-texto-claro);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.status-bolinha {
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 4px rgba(49, 214, 123, 0.13);
}

.status-conexao.online .status-bolinha { background: var(--coe-verde); }
.status-conexao.offline .status-bolinha { background: var(--coe-erro); box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.13); }
.status-conexao.online .status-texto { color: var(--coe-verde-escuro); }
.status-conexao.offline .status-texto { color: var(--coe-erro); }

.menu-lateral {
    background:
        linear-gradient(180deg, #102A55 0%, #0F2347 42%, #0A1326 100%);
    color: #FFFFFF;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 14px 0 34px rgba(15, 35, 71, 0.18);
}

.menu-logo {
    min-height: 74px;
    gap: 12px;
    padding: 14px 14px;
    background: rgba(5, 13, 28, 0.28);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-lateral.recolhido .menu-logo {
    justify-content: center;
    padding-inline: 10px;
}

.logo-img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.logo-texto {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
}

.logo-texto strong {
    color: #FFFFFF;
    font-weight: 900;
}

.logo-texto span {
    color: #C8D4E8;
}

.menu-itens {
    padding: 12px 10px;
}

.menu-area {
    position: relative;
    margin-bottom: 4px;
}

.menu-area-btn {
    min-height: 44px;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: rgba(236, 244, 255, 0.80);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.menu-area-btn:hover,
.menu-area.ativa > .menu-area-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.menu-area.ativa > .menu-area-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 999px;
    background: var(--coe-gradiente);
}

.menu-lateral.recolhido .menu-area-btn {
    justify-content: center;
    padding: 10px;
}

.menu-lateral.recolhido .menu-area-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    z-index: 80;
    transform: translateY(-50%) translateX(-4px);
    min-width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    border: 1px solid rgba(141, 165, 208, 0.24);
    border-radius: 7px;
    background: #0F2347;
    box-shadow: 0 10px 24px rgba(5, 13, 28, 0.22);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.menu-lateral.recolhido .menu-area-btn::before {
    z-index: 1;
}

.menu-lateral.recolhido .menu-area-btn:hover::after,
.menu-lateral.recolhido .menu-area-btn:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.menu-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(244, 248, 255, 0.92);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.24);
    transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

/* Ícones do menu em SVG desenhado (19/07/2026, pedido do dono): os glifos Unicode
   rendiam diferente por sistema e não seguravam cor. Traço uniforme 1.8, cantos
   redondos, UMA COR POR ITEM (viva sobre o azul escuro do menu). O chip 28×28 fica. */
.menu-icone::before {
    content: "";
    display: block;
    width: 19px;
    height: 19px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.menu-icone-producao::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FC3F7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='5' width='16' height='15' rx='2'/><path d='M16 3v4M8 3v4M4 11h16'/></svg>"); }

.menu-icone-admin::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD54F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065z'/><circle cx='12' cy='12' r='3'/></svg>"); }

.menu-icone-automacao::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='17' r='3'/><circle cx='17' cy='17' r='3'/><path d='M9.15 14.85 18.5 4'/><path d='M5.5 4l9.35 10.85'/></svg>"); }

.menu-icone-calcular::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CE93D8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2'/><rect x='8' y='6.5' width='8' height='3.5' rx='0.8'/><path d='M8.5 14h.01M12 14h.01M15.5 14h.01M8.5 17.5h.01M12 17.5h.01M15.5 17.5h.01'/></svg>"); }

.menu-icone-vendas::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2381C784' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='6.5' cy='19' r='1.6'/><circle cx='16.5' cy='19' r='1.6'/><path d='M3.5 4h2l2 11h10l2-8H6'/></svg>"); }

.menu-icone-compras::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB74D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/><path d='M12 12l8-4.5M12 12v9M12 12L4 7.5'/><path d='M16.5 5.5l-8 4.5'/></svg>"); }

.menu-icone-clientes::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F48FB1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.5'/><path d='M5.5 20v-1.5a5 5 0 0 1 5-5h3a5 5 0 0 1 5 5V20'/></svg>"); }

.menu-icone-materia::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BCAAA4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4l8 4-8 4-8-4z'/><path d='M4 12l8 4 8-4'/><path d='M4 16l8 4 8-4'/></svg>"); }

.menu-icone-colaboradores::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234DD0E1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M3.5 20v-1.4a4.6 4.6 0 0 1 4.6-4.6h1.8a4.6 4.6 0 0 1 4.6 4.6V20'/><path d='M15.5 4.9a3.2 3.2 0 0 1 0 6.2'/><path d='M20.5 20v-1.4a4.6 4.6 0 0 0-3.2-4.4'/></svg>"); }

.menu-icone-ia::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390CAF9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v3'/><rect x='5' y='6' width='14' height='11' rx='3'/><path d='M9 10.5v1.5M15 10.5v1.5'/><path d='M9.5 14.5h5'/><path d='M3.5 10.5H5M19 10.5h1.5'/></svg>"); }

/* Janela do chat da IA: ancorada AO LADO do menu (junto do item PERGUNTAR PARA IA),
   seguindo o estado expandido/recolhido pelo container .coe-app (19/07/2026). */
.chat-ia-painel { position: fixed; bottom: 16px; z-index: 1600; }
.menu-expandido .chat-ia-painel {
    left:  calc(var(--menu-largura) + 14px);
    width: min(380px, calc(100vw - var(--menu-largura) - 28px));
}
.menu-recolhido .chat-ia-painel {
    left:  calc(var(--menu-recolhido) + 14px);
    width: min(380px, calc(100vw - var(--menu-recolhido) - 28px));
}
.menu-icone-relatorio::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0BEC5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='5' width='12' height='16' rx='2'/><path d='M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/><path d='M9 11h6M9 15h4'/></svg>"); }

.menu-area-btn:hover .menu-icone,
.menu-area.ativa > .menu-area-btn .menu-icone {
    color: #FFFFFF;
}

.menu-area.ativa .menu-icone {
    background: rgba(49, 214, 123, 0.14);
    box-shadow: inset 0 0 0 1px rgba(49, 214, 123, 0.18);
    color: #DDF8EA;
}

.menu-seta {
    color: rgba(255, 255, 255, 0.56);
}

.menu-subitens {
    margin: 4px 0 8px 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
}

.menu-subitem {
    margin: 2px 0 2px 8px;
    padding: 8px 10px;
    border-radius: 7px;
    color: rgba(236, 244, 255, 0.72);
    font-size: 12px;
    text-transform: none;
}

.menu-subitem:hover,
.menu-subitem.ativo {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.menu-subitem.ativo {
    border-left: 0;
    padding-left: 10px;
    box-shadow: inset 3px 0 0 var(--coe-verde);
}

.menu-toggle {
    min-height: 48px;
    background: rgba(5, 13, 28, 0.30);
    color: rgba(255, 255, 255, 0.72);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.menu-toggle:hover {
    background: rgba(49, 214, 123, 0.10);
    color: #FFFFFF;
}

.pagina {
    padding-bottom: 32px;
}

.pagina-titulo {
    position: relative;
    display: block;
    margin: 0 0 18px !important;
    color: var(--coe-azul-escuro) !important;
    font-size: 24px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.18;
    text-transform: none;
}

.pagina-titulo::after {
    content: "";
    display: block;
    width: 76px;
    height: 3px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--coe-gradiente-horizontal);
}

.coe-card,
.selector-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--coe-borda-suave);
    border-radius: 8px;
    box-shadow: var(--sombra-card);
}

.coe-card {
    padding: 18px;
    margin-bottom: 16px;
}

.coe-card-titulo,
.form-section-titulo,
.selector-titulo {
    color: var(--coe-azul-escuro);
    font-weight: 850;
    letter-spacing: 0.4px;
}

.coe-card-titulo {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--coe-borda-suave);
    font-size: 15px;
    text-transform: none;
}

.form-section-titulo {
    border-bottom: 1px solid var(--coe-borda-suave);
}

.form-label {
    color: var(--coe-texto-claro);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.7px;
}

.form-control:not([type=checkbox]):not([type=radio]),
.coe-input:not([type=checkbox]):not([type=radio]) {
    height: 33px;   /* mesma régua do bloco acima (dono, 20/08/2026) */
    border: 1px solid #C8D3E2;
    border-radius: 8px;
    color: var(--coe-texto);
    background: #FFFFFF;
    font-size: 14px;
    box-shadow: 0 1px 0 rgba(15, 35, 71, 0.03);
}

.form-control:not([type=checkbox]):not([type=radio]):hover,
.coe-input:not([type=checkbox]):not([type=radio]):hover {
    border-color: #AEBBD0;
}

.form-control:not([type=checkbox]):not([type=radio]):focus,
.coe-input:not([type=checkbox]):not([type=radio]):focus {
    border-color: var(--coe-azul);
    box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.15);
}

select.form-control,
select.coe-input,
select:not([multiple]) {
    border-radius: 8px !important;
    border-color: #C8D3E2 !important;
}

/* Campo de texto em CAIXA ALTA: só o que o usuário DIGITA sobe pra maiúscula.
   O placeholder é texto do sistema e fica na caixa em que foi escrito (padrão
   das listas: "Selecione o tipo de móvel"). */
.coe-caixa-alta {
    text-transform: uppercase;
}

.coe-caixa-alta::placeholder {
    text-transform: none;
}

.btn-coe,
.btn-primario,
.btn-secundario,
.coe-btn,
.coe-btn-primario {
    min-height: 38px;
    height: auto;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0;
    box-shadow: 0 6px 16px rgba(15, 35, 71, 0.08);
    transition: transform 0.12s ease, box-shadow var(--transicao), background var(--transicao), border-color var(--transicao), color var(--transicao);
}

.btn-coe:hover,
.coe-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 35, 71, 0.13);
}

.btn-coe:disabled,
.coe-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.btn-primario,
.coe-btn-primario,
.btn-destaque {
    background: var(--coe-gradiente) !important;
    color: #FFFFFF !important;
    border: 0 !important;
}

.btn-secundario,
.coe-btn:not(.coe-btn-primario) {
    background: #FFFFFF;
    color: var(--coe-azul-escuro);
    border: 1px solid #C8D3E2;
}

.btn-secundario:hover,
.coe-btn:not(.coe-btn-primario):hover {
    background: var(--coe-azul-fundo);
    border-color: #AFC5E4;
}

.btn-acao {
    background: #FFFFFF;
    color: var(--coe-azul-hover);
    border: 1px solid #B8CEF0;
}

.btn-acao:hover {
    background: var(--coe-azul-fundo);
    border-color: var(--coe-azul);
}

.btn-perigo,
.coe-btn-perigo {
    background: #D92D20 !important;
    color: #FFFFFF !important;
    border: 0 !important;
}

.btn-sm,
.btn-small {
    min-height: 32px;
    padding: 5px 12px;
    font-size: 12px;
}

.coe-tabela {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--coe-texto);
    font-size: 13px;
}

.coe-tabela th {
    background: #F1F6FD;
    color: var(--coe-azul-escuro);
    border-bottom: 1px solid var(--coe-borda);
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.5px;
}

.coe-tabela td {
    border-bottom: 1px solid var(--coe-borda-suave);
    padding: 10px 12px;
    background: #FFFFFF;
}

.coe-tabela tbody tr:hover td,
.coe-tabela tr:hover td {
    background: #F7FBFF;
}

.linha-selecionada td,
.coe-tabela tr.linha-selecionada td {
    background: #EAF8F0 !important;
    color: #176A3A;
    box-shadow: inset 3px 0 0 var(--coe-verde);
}

.badge {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 800;
}

.badge-sucesso { background: #EAF8F0; color: #176A3A; }
.badge-erro { background: #FEF3F2; color: #B42318; }
.badge-aviso { background: #FFF8E7; color: #9A6700; }
.badge-info { background: var(--coe-azul-fundo); color: var(--coe-azul-hover); }

.wizard-steps {
    background: #FFFFFF;
    border: 1px solid var(--coe-borda-suave);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: var(--sombra-card);
    flex-wrap: wrap;
}

.wizard-step {
    color: var(--coe-texto-claro);
    font-weight: 750;
}

.wizard-step.ativo {
    color: var(--coe-azul-hover);
}

.wizard-step.concluido {
    color: var(--coe-verde-escuro);
}

.step-nr {
    border-color: #C8D3E2;
    background: #FFFFFF;
}

.wizard-step.ativo .step-nr {
    background: var(--coe-gradiente);
    border-color: transparent;
}

.wizard-step.concluido .step-nr {
    background: var(--coe-verde);
    border-color: var(--coe-verde);
}

.selector-card {
    padding: 12px 14px;
}

.btn-selector {
    border-color: #C8D3E2;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--coe-texto);
    font-weight: 750;
}

.btn-selector:hover {
    background: var(--coe-azul-fundo);
    border-color: var(--coe-azul);
    color: var(--coe-azul-hover);
}

.btn-selector.ativo {
    background: var(--coe-gradiente);
    border-color: transparent;
    color: #FFFFFF;
}

.btn-selector-salvo {
    border-color: var(--coe-verde);
    color: var(--coe-verde-escuro);
}

.btn-selector-salvo.ativo {
    background: var(--coe-verde);
    border-color: var(--coe-verde);
}

.aviso,
.coe-alerta {
    border-radius: 8px;
}

.aviso-ok,
.coe-alerta.coe-alerta-sucesso {
    background: #EAF8F0 !important;
    color: #176A3A !important;
    border-left-color: var(--coe-verde) !important;
}

.aviso-info {
    background: var(--coe-azul-fundo);
    color: var(--coe-azul-hover);
    border-left-color: var(--coe-azul);
}

.acoes-dropdown {
    border: 1px solid var(--coe-borda);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(15, 35, 71, 0.16);
}

.acoes-item {
    color: var(--coe-texto);
}

.acoes-item:hover {
    background: var(--coe-azul-fundo);
    color: var(--coe-azul-hover);
}

.adm-overlay {
    background: rgba(9, 19, 38, 0.58) !important;
    backdrop-filter: blur(6px);
}

.adm-modal {
    border: 1px solid var(--coe-borda-suave);
    border-radius: 8px !important;
    box-shadow: 0 24px 64px rgba(15, 35, 71, 0.24) !important;
}

.adm-modal-titulo {
    color: var(--coe-azul-escuro) !important;
}

.coe-spinner {
    border-color: rgba(47, 128, 237, 0.16);
    border-top-color: var(--coe-verde);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #C6D2E3;
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #AEBBD0;
    border: 3px solid transparent;
    background-clip: padding-box;
}

@media (max-width: 768px) {
    :root {
        --header-altura: 54px;
    }

    .coe-main {
        padding: 16px 14px 24px;
    }

    .header-produto-texto {
        display: none;
    }

    .header-produto-linha {
        width: 54px;
    }

    .pagina-titulo {
        font-size: 21px !important;
    }

    .coe-card {
        padding: 14px;
    }

    .menu-logo {
        min-height: 64px;
    }

    /* Seta de recolher: alvo de toque maior no celular */
    .menu-toggle {
        min-height: 48px;
        font-size: 20px;
    }

    .logo-img {
        width: 38px;
        height: 38px;
    }

    .menu-subitens {
        margin-left: 34px;
    }

    .form-grid,
    .form-grid2,
    .form-grid3,
    .header-row {
        grid-template-columns: 1fr !important;
    }

    .moveis-acoes,
    .form-acoes,
    .adm-modal-acoes {
        align-items: stretch;
        flex-direction: column;
    }

    .btn-coe,
    .coe-btn {
        justify-content: center;
        width: 100%;
    }

    .coe-tabela {
        min-width: 640px;
    }
}

/* COMBO EDITÁVEL (dono, 23/07/2026): lista custom que abre SEMPRE ABAIXO do
   campo, no MESMO padrão visual dos selects — usada em Tipo de Móvel/Ambiente
   editáveis (texto livre + escolha da lista). */
.coe-combo { position: relative; }
/* A lista NÃO quebra linha (dono, 31/07/2026): opção partida em duas linhas confunde
   (parecia dois itens). Ela cresce pro lado do conteúdo — no mínimo a largura do campo
   — e o que passar do teto sai com reticências. */
.coe-combo-lista {
  position: absolute; top: 100%; left: 0; z-index: 60;
  width: max-content; min-width: 100%; max-width: 520px;
  background: var(--coe-branco, #fff);
  /* ⛔ COR EXPLÍCITA — NUNCA HERDADA (dono, 15/08/2026 — o "ofuscador" da Automação
     de Corte): a lista é BRANCA mas o texto dos itens herdava a cor do CONTEXTO do
     combo; dentro do topo escuro (.au-top color:#fff) os itens saíam BRANCOS no
     BRANCO = invisíveis. Componente global define as PRÓPRIAS cores, sempre. */
  color: var(--coe-texto, #212121);
  border: 1px solid #BDBDBD; border-radius: 6px; margin-top: 2px;
  max-height: 230px; overflow-y: auto; overflow-x: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.coe-combo-item {
  padding: 8px 12px; font-size: 14px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coe-combo-item:hover { background: #EDF2F7; }
/* Item destacado pelas setas ↑/↓ (navegação por teclado dentro da lista) */
.coe-combo-item-ativo { background: #E3EDFB; }

/* ⛔ MARCADOR DA ASSINATURA (dono, 20/08/2026) — ao lado do ONLINE, no header.
   Mesma linguagem visual do status de conexão: pílula discreta em dia, laranja faltando
   7 dias ou menos, vermelha quando vencida. */
.status-assinatura {
    display: flex; align-items: center;
    margin-right: 14px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    white-space: nowrap;
}
/* ⛔ TEXTO PRETO (dono, 20/08/2026): o header é claro — verde sobre branco não se lê.
   Os estados de alerta seguem coloridos porque precisam saltar aos olhos. */
.status-assinatura.assinatura-ok      { background: rgba(0,0,0,.06); }
.status-assinatura.assinatura-ok      .status-texto { color: #111; }
.status-assinatura.assinatura-alerta  { background: rgba(245,158,11,.18); }
.status-assinatura.assinatura-alerta  .status-texto { color: #F59E0B; }
.status-assinatura.assinatura-vencida { background: rgba(255,82,82,.18); }
.status-assinatura.assinatura-vencida .status-texto { color: #FF5252; }