/* ==========================================================================
   COMPONENTES — Sebo Bar ERP (Etapa 4, entrega 3)
   Definição única de botão, badge, tabela, card, gaveta, modal, toast, tabs,
   accordion, filtros, estado vazio, paginação, cabeçalho de página e formulário.
   Só consome tokens de tokens.css. Carregar depois de style_v2.css.
   ========================================================================== */

/* ---------- Foco visível (acessibilidade) ---------- */
:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 2px; }
.nav-icon:focus-visible, .unifi-nav-item:focus-visible, .menu-item:focus-visible { outline-offset: -2px; }
button.nav-icon, button.avatar-container { background: transparent; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-2); padding: 6px 14px; font-size: var(--fonte-md); font-weight: var(--peso-medio); font-family: var(--font-family-ui); line-height: 1.4; border: 1px solid transparent; border-radius: var(--raio-sm); text-decoration: none; cursor: pointer; white-space: nowrap; transition: var(--transicao-padrao); }
.btn:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 2px; }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background-color: var(--cor-acao); color: #FFFFFF; border-color: var(--cor-acao); }
.btn-secondary { background-color: transparent; color: var(--texto-secundario); border-color: var(--cor-borda); }
.btn-secondary:hover { color: var(--texto-principal); background-color: var(--fundo-secundario); }
.btn-danger { background-color: var(--cor-erro); color: #FFFFFF; border-color: var(--cor-erro); }
.btn-sucesso, .btn-success { background-color: var(--cor-sucesso); color: #FFFFFF; border-color: var(--cor-sucesso); }
.btn-ghost-acao { background: transparent; color: var(--cor-acao); border-color: var(--cor-acao); }
.btn-ghost-acao:hover { background-color: color-mix(in srgb, var(--cor-acao) 8%, transparent); }
.btn-ghost-secundario { background: transparent; color: var(--texto-secundario); border-color: transparent; }
.btn-ghost-secundario:hover { color: var(--texto-principal); background-color: var(--fundo-secundario); }
.btn-sm { padding: 3px 10px; font-size: var(--fonte-sm); }
.btn-lg { padding: 10px 20px; font-size: var(--fonte-lg); }
.btn-block, .btn-full { width: 100%; }
.btn-min-100 { min-width: 100px; }
.btn-icone { width: 32px; height: 32px; padding: 0; border-radius: var(--raio-sm); }
.btn-icone.btn-redondo { border-radius: var(--raio-redondo); }

/* ---------- Badges de status ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--raio-redondo); font-size: var(--fonte-xs); font-weight: var(--peso-forte); line-height: 1.5; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; background: var(--fundo-secundario); color: var(--texto-secundario); border: 1px solid var(--cor-borda); }
.badge-sucesso { background: color-mix(in srgb, var(--cor-sucesso) 12%, transparent); color: var(--cor-sucesso); border-color: color-mix(in srgb, var(--cor-sucesso) 40%, transparent); }
.badge-erro { background: color-mix(in srgb, var(--cor-erro) 12%, transparent); color: var(--cor-erro); border-color: color-mix(in srgb, var(--cor-erro) 40%, transparent); }
.badge-atencao { background: color-mix(in srgb, var(--cor-atencao) 14%, transparent); color: var(--cor-atencao); border-color: color-mix(in srgb, var(--cor-atencao) 40%, transparent); }
.badge-info, .badge-acao { background: color-mix(in srgb, var(--cor-acao) 12%, transparent); color: var(--cor-acao); border-color: color-mix(in srgb, var(--cor-acao) 40%, transparent); }
.badge-neutro { background: var(--fundo-secundario); color: var(--texto-secundario); }
.badge-contador { min-width: 18px; height: 18px; padding: 0 6px; justify-content: center; border-radius: var(--raio-redondo); background: var(--cor-erro); color: #FFFFFF; border: none; font-size: 10px; }

/* ---------- Cabeçalho de página e estado vazio ---------- */
.cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); margin-bottom: var(--espaco-5); flex-wrap: wrap; }
.cabecalho-pagina .titulo { font-size: var(--fonte-xl); font-weight: var(--peso-forte); margin: 0; color: var(--texto-principal); }
/* Dados de contexto do registro (data, vínculo…) na mesma linha do título — nunca um subtítulo abaixo dele */
.titulo-meta { margin-left: var(--espaco-2); color: var(--texto-secundario); font-size: var(--fonte-sm); font-weight: var(--peso-normal); }
.titulo-meta i { margin-right: 2px; }
.titulo-meta > span + span { margin-left: var(--espaco-2); }
.cabecalho-pagina .acoes { display: flex; gap: var(--espaco-2); align-items: center; flex-wrap: wrap; }
.estado-vazio { padding: var(--espaco-6) var(--espaco-4); text-align: center; color: var(--texto-secundario); border: 1px dashed var(--cor-borda); border-radius: var(--raio-lg); }
.estado-vazio i { font-size: 28px; color: var(--cor-borda2); display: block; margin-bottom: var(--espaco-3); }
.estado-vazio .titulo { font-weight: var(--peso-forte); color: var(--texto-principal); margin: 0 0 var(--espaco-1) 0; }
.estado-vazio .acoes { margin-top: var(--espaco-4); }

/* ---------- Paginação ---------- */
.paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); padding: var(--espaco-3) var(--espaco-4); border-top: 1px solid var(--cor-borda); font-size: var(--fonte-sm); color: var(--texto-secundario); flex-wrap: wrap; }
.paginacao .paginas { display: flex; gap: 4px; }
/* Base (topbar e modais globais) — antes eram style="" inline na base.html */
.logo-topbar { max-height: 30px; display: block; }
.icone-home { font-size: 1.2rem; }
.icone-svg-18 { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.theme-wrapper { position: relative; margin-right: 5px; }
.notification-wrapper { position: relative; margin-right: 15px; }
.avatar-container { position: relative; }
.menu-suspenso.menu-medio { min-width: 220px; }
.modal-centrado { text-align: center; }
.modal-icone { margin-bottom: 15px; }
.modal-titulo { margin-top: 0; font-size: 16px; }
.modal-texto { color: var(--texto-secundario); margin-bottom: 15px; }
.modal-texto-espacado { margin-bottom: 25px; }
.modal-acoes { display: flex; justify-content: center; gap: 10px; }
.lista-impactos { text-align: left; color: var(--cor-erro); font-weight: 600; background: color-mix(in srgb, var(--cor-erro) 6%, transparent); padding: 12px 12px 12px 25px; border-radius: var(--raio-sm); margin-bottom: 25px; }
.paginacao-total { padding: var(--espaco-2) var(--espaco-4); font-size: var(--fonte-sm); margin: 0; }
/* Busca das listas (componentes/busca.html, Q25; padrão único desde 2026-10-13): uma linha só,
   lupa à direita dentro do campo, "limpar" (×) também dentro. Servidor (?q=) ou local (data-busca-local). */
.busca-lista { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; margin: 0; }
.busca-lista input[type="search"] { flex: 1 1 auto; width: 100%; min-width: 0; height: 32px; box-sizing: border-box; padding: 0 60px 0 var(--espaco-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--fundo-principal); color: var(--texto-principal); font: inherit; font-size: var(--fonte-md); }
.busca-lista input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.busca-lista input[type="search"]:focus { outline: none; border-color: var(--cor-acao); background: var(--fundo-principal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-acao) 20%, transparent); }
.busca-lista .busca-botao, .busca-lista .busca-limpar { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: var(--raio-sm); background: transparent; color: var(--texto-secundario); font-size: var(--fonte-sm); text-decoration: none; cursor: pointer; }
.busca-lista .busca-botao { right: 3px; }
.busca-lista .busca-limpar { right: 29px; }
.busca-lista .busca-botao:hover, .busca-lista .busca-limpar:hover { color: var(--cor-acao); background: var(--fundo-secundario); }
.busca-lista .busca-limpar[hidden] { display: none; }
.busca-lista input[type="search"]:disabled { opacity: 0.6; cursor: not-allowed; }
.busca-lista span.busca-botao { cursor: default; pointer-events: none; }
/* Linhas escondidas pela busca local (erp.js): classe própria para somar aos filtros da página */
tr.oculta-busca, .oculta-busca { display: none; }
/* Topo da área principal de uma lista: título à esquerda, busca à direita, numa linha só */
.lista-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); margin-bottom: var(--espaco-4); flex-wrap: wrap; }
.lista-topo .main-title, .lista-topo .titulo { margin: 0; }
.lista-topo .busca-lista { flex: 0 1 360px; }
.lista-topo > .linha-flex { flex: 0 1 auto; min-width: 0; }
.lista-topo > .linha-flex .busca-lista { flex: 0 1 300px; width: 300px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.paginacao a, .paginacao span.pagina { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--raio-sm); color: var(--texto-secundario); text-decoration: none; border: 1px solid transparent; }
.paginacao a:hover { background: var(--fundo-secundario); color: var(--texto-principal); }
.paginacao span.pagina.atual { background: var(--cor-acao); color: #FFFFFF; font-weight: var(--peso-forte); }
.paginacao a.desabilitado { opacity: 0.4; pointer-events: none; }

/* ---------- Toasts ---------- */
#toast-container { position: fixed; bottom: var(--espaco-6); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--espaco-2); z-index: 999999; width: min(420px, 92vw); pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--espaco-3); padding: 12px 16px; border-radius: var(--raio-md); background: var(--fundo-modal); color: var(--texto-modal); border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-acao); box-shadow: var(--sombra-3); font-size: var(--fonte-md); font-weight: var(--peso-medio); opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: auto; cursor: pointer; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast i { flex-shrink: 0; font-size: 16px; }
.toast-success { border-left-color: var(--cor-sucesso); } .toast-success i { color: var(--cor-sucesso); }
.toast-error { border-left-color: var(--cor-erro); } .toast-error i { color: var(--cor-erro); }
.toast-warning { border-left-color: var(--cor-atencao); } .toast-warning i { color: var(--cor-atencao); }
.toast-info { border-left-color: var(--cor-acao); } .toast-info i { color: var(--cor-acao); }

/* ---------- Menus suspensos da topbar (tema, notificações, usuário) ---------- */
.menu-suspenso { display: none; position: absolute; right: 0; top: 100%; z-index: 9999; background: var(--fundo-modal); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); box-shadow: var(--sombra-2); padding: var(--espaco-2) 0; min-width: 160px; overflow: hidden; }
.menu-suspenso.menu-largo { min-width: 300px; padding: 0; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--texto-principal); text-decoration: none; font-size: var(--fonte-md); }
.menu-item:hover { background: var(--fundo-secundario); }
.menu-item i { width: 16px; text-align: center; color: var(--texto-secundario); }
.menu-item.perigo { color: var(--cor-erro); font-weight: var(--peso-forte); } .menu-item.perigo i { color: var(--cor-erro); }
.menu-separador { height: 1px; background: var(--cor-borda); margin: 6px 0; }
.menu-rotulo { padding: 6px 16px 2px 16px; font-size: 10px; text-transform: uppercase; color: var(--texto-secundario); font-weight: 700; letter-spacing: 0.5px; }
.menu-cabecalho { padding: 10px 15px; border-bottom: 1px solid var(--cor-borda); font-weight: var(--peso-forte); color: var(--texto-principal); background: var(--fundo-secundario); }
.notif-list { max-height: 350px; overflow-y: auto; }
.notif-item { position: relative; padding: 12px 40px 12px 15px; border-bottom: 1px solid var(--cor-borda); cursor: pointer; }
.notif-item.unread { background: color-mix(in srgb, var(--cor-acao) 5%, transparent); }
.notif-item .notif-titulo { font-weight: var(--peso-forte); color: var(--texto-principal); margin-bottom: 4px; }
.notif-item .notif-texto { font-size: var(--fonte-sm); color: var(--texto-secundario); line-height: 1.4; }
.notif-item .notif-quando { font-size: 10px; color: var(--texto-secundario); margin-top: 5px; display: block; }
.notif-delete-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--cor-erro); background: transparent; border: none; cursor: pointer; opacity: 0; transition: opacity 0.2s; font-size: 1.1rem; padding: 5px; }
.notif-item:hover .notif-delete-btn, .notif-delete-btn:focus-visible { opacity: 1; }
.notif-vazio { padding: 20px; text-align: center; color: var(--texto-secundario); font-size: var(--fonte-sm); }
.notification-badge { position: absolute; top: 0; right: 0; background: var(--cor-erro); color: #FFFFFF; border-radius: var(--raio-redondo); padding: 2px 6px; font-size: 10px; font-weight: 700; }
.avatar-topbar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--fundo-secundario); border: 1px solid var(--cor-borda); overflow: hidden; }
.avatar-topbar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-topbar i { font-size: 12px; color: var(--texto-secundario); }
.avatar-topbar i.coroa { color: var(--cor-atencao); }
.icone-18 { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ---------- Formulário ---------- */
.form-group { margin-bottom: var(--espaco-4); }
.form-group label, .unifi-label { display: block; margin-bottom: 4px; font-size: var(--fonte-xs); font-weight: var(--peso-forte); color: var(--texto-secundario); text-transform: uppercase; letter-spacing: 0.3px; }
.form-ajuda { display: block; margin-top: 4px; font-size: var(--fonte-xs); color: var(--texto-secundario); }
.form-erro { display: block; margin-top: 4px; font-size: var(--fonte-xs); color: var(--cor-erro); font-weight: var(--peso-medio); }
.form-control.erro, .unifi-input.erro { border-color: var(--cor-erro); }
.form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--espaco-3); }
input[type="checkbox"].unifi-checkbox, #wrapper-permissoes input[type="checkbox"] { accent-color: var(--cor-acao); cursor: pointer; }

/* ---------- Formulários inteiros (inputs sem classe nos widgets) e caixas de aviso ---------- */
.formulario input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
.formulario select, .formulario textarea { width: 100%; padding: 6px 10px; font-size: var(--fonte-md); font-family: var(--font-family-ui); color: var(--texto-principal); background-color: var(--fundo-principal); border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); box-sizing: border-box; min-height: 32px; transition: var(--transicao-padrao); }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--cor-acao); background-color: var(--fundo-principal); }
.formulario input[type=file] { font-size: var(--fonte-sm); }
.formulario input.erro, .formulario .tem-erro input, .formulario .tem-erro select { border-color: var(--cor-erro); }
.formulario input[readonly], .formulario input.input-calculado { background: var(--fundo-principal); border-style: dashed; color: var(--texto-secundario); cursor: not-allowed; }
.secao-form { font-size: var(--fonte-md); font-weight: var(--peso-forte); color: var(--texto-principal); border-bottom: 1px solid var(--cor-borda); padding-bottom: 6px; margin: var(--espaco-5) 0 var(--espaco-3) 0; display: flex; align-items: center; gap: var(--espaco-2); }
.secao-form:first-child { margin-top: 0; }
.secao-form i { color: var(--cor-acao); }
.bloco-form { background: var(--fundo-secundario); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); padding: var(--espaco-4); margin-bottom: var(--espaco-4); }
.bloco-form[hidden] { display: none; }
.rodape-form { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-3); border-top: 1px solid var(--cor-borda); padding-top: var(--espaco-4); margin-top: var(--espaco-5); flex-wrap: wrap; }
.rodape-form .acoes { display: flex; gap: var(--espaco-2); margin-left: auto; }
.aviso { --cor-aviso: var(--cor-acao); background: color-mix(in srgb, var(--cor-aviso) 8%, transparent); border-left: 4px solid var(--cor-aviso); padding: var(--espaco-3) var(--espaco-4); border-radius: var(--raio-sm); margin-bottom: var(--espaco-4); font-size: var(--fonte-md); color: var(--texto-principal); }
.aviso.atencao { --cor-aviso: var(--cor-atencao); } .aviso.erro { --cor-aviso: var(--cor-erro); } .aviso.sucesso { --cor-aviso: var(--cor-sucesso); }
/* Unidade (R$, %) fica no rótulo, nunca dentro do campo (2026-10-14): o antigo .prefixo-moeda saiu. */
.card-limite { max-width: 900px; margin: 0 auto; padding: var(--espaco-5); }

/* ---------- Painel de módulo (cartões de atalho) e cartões de métrica ---------- */
.painel-modulo { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--espaco-4); }
.card-modulo { display: flex; flex-direction: column; gap: var(--espaco-2); padding: var(--espaco-4); background: var(--fundo-principal); border: 1px solid var(--cor-borda); border-radius: var(--raio-lg); text-decoration: none; color: inherit; transition: var(--transicao-padrao); box-shadow: var(--sombra-1); }
.card-modulo:hover { border-color: var(--cor-acao); transform: translateY(-2px); box-shadow: var(--sombra-2); }
.card-modulo .card-modulo-topo { display: flex; align-items: center; gap: var(--espaco-3); }
.card-modulo .card-modulo-icone { width: 40px; height: 40px; border-radius: var(--raio-md); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--cor-acao) 10%, transparent); color: var(--cor-acao); font-size: 18px; flex-shrink: 0; }
.card-modulo .card-modulo-icone svg { width: 22px; height: 22px; }
.card-modulo h3 { margin: 0; font-size: var(--fonte-lg); font-weight: var(--peso-forte); color: var(--texto-principal); flex: 1; }
.card-modulo p { margin: 0; color: var(--texto-secundario); font-size: var(--fonte-md); line-height: 1.4; }
.card-modulo.alerta { border-color: color-mix(in srgb, var(--cor-erro) 50%, transparent); }
.card-modulo.alerta .card-modulo-icone { background: color-mix(in srgb, var(--cor-erro) 10%, transparent); color: var(--cor-erro); }
.cartoes-metrica { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espaco-4); margin-bottom: var(--espaco-5); }
.cartao-metrica { --cor-cartao: var(--cor-acao); padding: var(--espaco-4); background: var(--fundo-principal); border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-cartao); border-radius: var(--raio-lg); }
.cartao-metrica.sucesso { --cor-cartao: var(--cor-sucesso); } .cartao-metrica.atencao { --cor-cartao: var(--cor-atencao); } .cartao-metrica.erro { --cor-cartao: var(--cor-erro); }
.cartao-metrica .rotulo { font-size: var(--fonte-xs); text-transform: uppercase; color: var(--texto-secundario); font-weight: var(--peso-forte); letter-spacing: 0.3px; }
.cartao-metrica .valor { font-size: 26px; font-weight: 700; color: var(--cor-cartao); margin-top: 4px; }
.filtros-pilula { display: flex; gap: var(--espaco-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--espaco-4); }
.filtros-pilula .rotulo { font-size: var(--fonte-xs); text-transform: uppercase; color: var(--texto-secundario); font-weight: var(--peso-forte); }
.pilula { background: var(--fundo-secundario); border: 1px solid var(--cor-borda); color: var(--texto-secundario); padding: 5px 14px; border-radius: var(--raio-redondo); font-size: var(--fonte-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-family-ui); }
.pilula:hover { color: var(--texto-principal); }
.pilula.active { background: var(--cor-acao); color: #FFFFFF; border-color: var(--cor-acao); font-weight: var(--peso-forte); }
.texto-sucesso { color: var(--cor-sucesso); } .texto-atencao { color: var(--cor-atencao); } .texto-erro { color: var(--cor-erro); } .texto-acao { color: var(--cor-acao); } .texto-secundario { color: var(--texto-secundario); }
.alinhar-direita { text-align: right; } .alinhar-centro { text-align: center; }
.avatar-lista { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--cor-borda); background: var(--fundo-secundario); display: inline-flex; align-items: center; justify-content: center; color: var(--texto-secundario); flex-shrink: 0; }
.barra-progresso { display: flex; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; background: var(--fundo-secundario); }
.barra-progresso > span { display: block; height: 100%; }
.barra-progresso .sucesso { background: var(--cor-sucesso); } .barra-progresso .neutro { background: var(--cor-borda2); } .barra-progresso .atencao { background: var(--cor-atencao); } .barra-progresso .erro { background: var(--cor-erro); }

/* ---------- Modo quiosque (totem) ---------- */
body.kiosk .topbar, body.kiosk .sidebar { display: none; }
body.kiosk .app-layout { grid-template-columns: 1fr; grid-template-rows: 1fr; }
body.kiosk .main-content { margin: 0; padding: 0; height: 100vh; }

/* ==========================================================================
   REGRAS MOVIDAS DO style_v2.css (seções 4, 6, 7 e 8), inalteradas
   ========================================================================== */
.form-control, .unifi-input { width: 100%; padding: 6px 10px; font-size: 13px; color: var(--texto-principal); background-color: var(--fundo-principal); border: 1px solid var(--cor-borda); border-radius: 4px; transition: var(--transicao-padrao); box-sizing: border-box; min-height: 32px; }
.form-control:focus, .unifi-input:focus { outline: none; border-color: var(--cor-acao); background-color: var(--fundo-principal); }


.erp-switch-wrapper { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
.erp-switch { position: relative; width: 36px; height: 20px; }
.erp-switch input { opacity: 0; width: 0; height: 0; position: absolute;}
.erp-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--cor-borda); transition: .3s; border-radius: 20px; }
.erp-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; }
.erp-switch input:checked + .erp-slider { background-color: var(--cor-acao); }
.erp-switch input:checked + .erp-slider:before { transform: translateX(16px); }


/* ==========================================================================
   6. COMPONENTES: ACCORDIONS, CARDS E TABELAS
   ========================================================================== */
.unifi-card, .unifi-accordion { background-color: var(--fundo-principal); border: 1px solid var(--cor-borda); border-radius: 8px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.02); overflow: hidden; width: 100%; }

.unifi-accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; cursor: pointer; user-select: none; background-color: var(--fundo-principal); transition: background-color 0.2s ease; border-bottom: 1px solid transparent; }
.unifi-accordion-header:hover { background-color: var(--fundo-secundario); }
.unifi-accordion-header .title-group { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--texto-principal); }
.unifi-accordion-header .title-group i { color: var(--cor-acao); font-size: 16px; width: 20px; text-align: center; }
.unifi-accordion-header .chevron { color: var(--texto-secundario); transition: transform 0.3s ease; font-size: 14px; }
.unifi-accordion.open .chevron { transform: rotate(180deg); }
.unifi-accordion.open .unifi-accordion-header { border-bottom-color: var(--cor-borda); }
.unifi-accordion-body { display: none; padding: 0; }
.unifi-accordion.open .unifi-accordion-body { display: block; }

.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.unifi-table, .unifi-accordion-body .unifi-table { width: 100%; border-collapse: collapse; margin: 0; }
.unifi-table th { padding: 10px 20px; font-size: 11px; font-weight: 600; color: var(--texto-secundario); background: var(--fundo-principal); border-bottom: 1px solid var(--cor-borda); text-align: left; text-transform: uppercase; letter-spacing: 0.5px; }
.unifi-table td { padding: 10px 20px; font-size: 13px; color: var(--texto-principal); border-bottom: 1px solid var(--cor-borda); vertical-align: middle; }
.unifi-table tr:last-child td { border-bottom: none; }
.unifi-table tbody tr.unifi-row-clickable { cursor: pointer; transition: background-color 0.15s ease; }
.unifi-table tbody tr.unifi-row-clickable:hover td { background-color: var(--fundo-secundario); }
.unifi-table tbody tr.unifi-row-clickable.selected-row td { background-color: color-mix(in srgb, var(--cor-acao) 8%, transparent) !important; }

.unifi-card-actions, .table-actions-footer { padding: 14px 20px; background-color: var(--fundo-principal); border-top: 1px solid var(--cor-borda); display: flex; gap: 16px; align-items: center; }
.unifi-action-text, .footer-link { color: var(--cor-acao); font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.2s ease; user-select: none; }
.unifi-action-text:hover, .footer-link:hover { filter: brightness(0.8); }
.footer-link.danger { color: var(--cor-erro); }
.footer-divider { color: var(--cor-borda); }

/* NOSSO NOVO PADRÃO: Link Desabilitado Inteligente */
.footer-link.disabled-link, .criar-novo.disabled-link {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
    filter: grayscale(100%);
}

/* ==========================================================================
   7. GAVETAS LATERAIS (Drawers) E MODAIS
   ========================================================================== */
.unifi-drawer { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 500px !important; background-color: var(--fundo-principal); box-shadow: -15px 0 35px rgba(0, 0, 0, 0.15) !important; border-left: 1px solid var(--cor-borda); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; z-index: 1000 !important; display: flex !important; flex-direction: column; }
.unifi-drawer.open { transform: translateX(0) !important; }
.unifi-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 24px; border-bottom: 1px solid var(--cor-borda); font-weight: 600; font-size: 15px; background-color: var(--fundo-secundario); min-height: 55px; }
.unifi-drawer-close { cursor: pointer; color: var(--texto-secundario); background: none; border: none; font-size: 16px; padding: 5px; }
.unifi-drawer-close:hover { color: var(--cor-erro); }
.unifi-drawer-body { flex-grow: 1; overflow-y: auto; padding: 20px 24px; }
.unifi-drawer-footer { padding: 12px 24px; border-top: 1px solid var(--cor-borda); background-color: var(--fundo-secundario); display: flex; justify-content: flex-end; gap: 10px; }
.unifi-drawer .form-group { margin-bottom: 12px !important; }
.unifi-drawer .form-group label { margin-bottom: 4px !important; font-size: 11px !important; font-weight: 600; display: block; color: var(--texto-secundario); text-transform: uppercase;}
.unifi-inner-card { background-color: var(--fundo-principal); border: 1px solid var(--cor-borda); border-radius: 6px; padding: 12px; margin-bottom: 15px; }

.unifi-status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.unifi-status-dot.online { background-color: var(--cor-sucesso); }
.unifi-status-dot.alert { background-color: var(--cor-erro); }
.unifi-status-dot.offline { background-color: var(--texto-secundario); opacity: 0.6; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); display: flex; justify-content: center; align-items: center; z-index: 2000; opacity: 0; visibility: hidden; transition: var(--transicao-padrao); }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { background-color: var(--fundo-modal); color: var(--texto-modal); padding: 24px; border-radius: 8px; border: 1px solid var(--cor-borda); box-shadow: 0 10px 30px rgba(0,0,0,0.2); max-width: 450px; width: 90%; }
.unifi-input-error { border-color: var(--cor-erro) !important; background-color: color-mix(in srgb, var(--cor-erro) 2%, var(--fundo-principal)) !important; }
.unifi-error-message { color: var(--cor-erro) !important; font-size: 11px !important; font-weight: 500 !important; margin-top: 4px !important; display: block !important; line-height: 1.3 !important; animation: unifiFadeIn 0.2s ease-in-out; }
@keyframes unifiFadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   8. TABELAS COMPACTAS E LAYOUTS EXTRAS
   ========================================================================== */
.unifi-table-compact th { padding: 6px 12px !important; font-size: 11px !important; white-space: nowrap; }
.unifi-table-compact td { padding: 4px 12px !important; height: 32px !important; font-size: 12px !important; white-space: nowrap; }

.col-checkbox { width: 40px; text-align: center !important; display: none; }
.unifi-checkbox { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1px solid var(--cor-borda); border-radius: 3px; background-color: var(--fundo-principal); cursor: pointer; position: relative; display: inline-block; vertical-align: middle; transition: all 0.2s; margin: 0; flex-shrink: 0; }
.unifi-checkbox:checked { background-color: var(--cor-acao); border-color: var(--cor-acao); }
.unifi-checkbox:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.modal-overlay-custom { z-index: 100000; }
.modal-content-alert { text-align: center; max-width: 400px; }
.alert-icon { font-size: 32px; color: var(--cor-atencao); margin-bottom: 15px; }
.alert-title { margin-top: 0; color: var(--texto-principal); font-size: 16px; }
.alert-message { color: var(--texto-secundario); margin-bottom: 25px; font-size: 13px; }
.alert-actions { display: flex; justify-content: center; gap: 15px; }
.btn-min-100 { min-width: 100px; }

.nav-panel-padding { padding: 0 20px 15px 20px; }
.nav-toggle-group { display: flex; background-color: var(--fundo-secundario); border: 1px solid var(--cor-borda); border-radius: 6px; padding: 2px; }
.nav-btn { flex: 1; border: none; padding: 6px; border-radius: 4px; font-size: 12px; }
.nav-btn-inactive { background: transparent; font-weight: 500; color: var(--texto-secundario); }
.nav-btn-active { background: var(--fundo-principal); font-weight: 600; color: var(--texto-principal); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.nav-icon-margin { margin-right: 5px; }
.nav-icon-active { color: var(--cor-acao); }
.nav-search-disabled { opacity: 0.6; }
.nav-action-padding { padding: 0 20px 20px 20px; }
.nav-btn-new { width: 100%; border: 1px solid var(--cor-acao); color: var(--cor-acao); background: transparent; font-weight: 600; padding: 8px; border-radius: 4px; font-size: 13px; }
.sidebar-category-title { padding: 15px 20px 5px 20px; font-size: 11px; font-weight: 600; color: var(--texto-principal); text-transform: uppercase; }
.sidebar-icon-wrapper { width: 16px; height: 16px; margin-right: 12px; display: inline-flex; align-items: center; justify-content: center; }

.main-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.main-title { font-size: 20px; font-weight: 600; margin: 0; }
.loading-row { text-align: center; padding: 40px; color: var(--texto-secundario); }
.loading-icon { font-size: 24px; color: var(--cor-acao); margin-bottom: 10px; display: block; }
.drawer-header-custom { position: relative; min-height: 65px; }
.drawer-title { font-weight: 600; font-size: 15px; color: var(--texto-principal); }
.drawer-close-btn { text-decoration: none; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }

.section-title { font-weight: 600; margin-bottom: 15px; font-size: 14px; color: var(--texto-principal); }
.section-title-mt { margin-top: 15px; }
.field-hint { color: var(--texto-secundario); display: block; margin-top: 4px; font-size: 11px; }
.label-icon { color: var(--texto-secundario); margin-right: 5px; }
.form-group-hidden { display: none !important; animation: unifiFadeIn 0.3s ease; }
.form-group-margin { margin-bottom: 25px; }
.checkbox-wrapper-custom { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; width: 100%; }
.checkbox-text-container { flex-grow: 1; }
.checkbox-title { font-weight: 600; color: var(--texto-principal); font-size: 13px; display: block; }
.label-uppercase { font-weight: 600; text-transform: uppercase; margin-bottom: 8px; }

.unifi-drawer-body input[type="text"],
.unifi-drawer-body select,
.unifi-drawer-body textarea { width: 100%; padding: 8px 12px; font-size: 13px; color: var(--texto-principal); background-color: var(--fundo-principal); border: 1px solid var(--cor-borda); border-radius: 4px; transition: all 0.2s; outline: none; box-sizing: border-box; }
.unifi-drawer-body input[type="text"]:focus,
.unifi-drawer-body select:focus,
.unifi-drawer-body textarea:focus { border-color: var(--cor-acao); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cor-acao) 20%, transparent); }
textarea[name="icone_svg"] { font-family: monospace; font-size: 11px; background-color: var(--fundo-principal) !important; border: 1px dashed var(--cor-borda) !important; min-height: 80px; }

.avatar-btn-wrapper { width: 90px; height: 90px; border-radius: 50%; border: 2px dashed var(--cor-borda); display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--fundo-secundario); flex-shrink: 0; position: relative; transition: border-color 0.2s; cursor: pointer; }
.avatar-btn-wrapper:hover { border-color: var(--cor-acao); }
.avatar-btn-wrapper .avatar-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.avatar-btn-wrapper:hover .avatar-overlay { opacity: 1; }
.avatar-btn-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.camera-icon { position: absolute; color: var(--texto-secundario); font-size: 24px; }

/* Abas (componente único; em gaveta ficam fixas no topo do corpo que rola — ERP.abas em erp.js).
   Marcação: <div class="unifi-tabs" role="tablist"><button type="button" class="unifi-tab active" role="tab" data-aba="id">…</button></div>
   + <div id="id" class="unifi-tab-content active" role="tabpanel">. Na gaveta, a .unifi-tabs é o 1º filho rolável de .unifi-drawer-body. */
.unifi-tabs { display: flex; border-bottom: 1px solid var(--cor-borda); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.unifi-tabs::-webkit-scrollbar { display: none; }
.unifi-tab { flex: 0 0 auto; padding: 10px 12px; margin: 0 0 -1px 0; cursor: pointer; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-family: var(--font-family-ui); font-weight: var(--peso-forte); color: var(--texto-secundario); font-size: var(--fonte-xs); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; transition: var(--transicao-padrao); }
.unifi-tab:hover { color: var(--texto-principal); }
.unifi-tab.active { color: var(--cor-acao); border-bottom-color: var(--cor-acao); }
.unifi-tab i { margin-right: 4px; }
.unifi-tab-content { display: none; }
.unifi-tab-content.active { display: block; animation: unifiFadeIn 0.3s ease; }
.unifi-drawer-body { --gaveta-recuo-x: 24px; }
.unifi-drawer .unifi-tabs { position: sticky; top: 0; z-index: 5; flex-shrink: 0; background: var(--fundo-principal); margin: 0 calc(-1 * var(--gaveta-recuo-x, 0px)) var(--espaco-4); padding: 0 var(--gaveta-recuo-x, 0px); }
/* Sem fresta acima da barra presa: corpo que começa pelas abas perde o recuo do topo, e a sombra
   sólida (cor do fundo) cobre o recuo restante quando a barra gruda abaixo de outro conteúdo */
.unifi-drawer-body:has(> .unifi-tabs:first-child) { padding-top: 0; }
.unifi-drawer .unifi-tabs { box-shadow: 0 -24px 0 0 var(--fundo-principal); }


/* ==========================================================================
   MOBILE (≤768): gavetas em tela cheia, modais quase totais, menus estreitos.
   Fica aqui, depois das regras base, porque a largura da gaveta usa !important.
   ========================================================================== */
@media (max-width: 768px) {
    .unifi-drawer, .unifi-drawer.unifi-drawer-wide { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important; width: 100vw !important; max-width: 100vw !important; transform: translateX(100%); }
    .unifi-drawer.open { transform: translateX(0) !important; }
    .unifi-drawer-body { padding: var(--espaco-4); --gaveta-recuo-x: var(--espaco-4); }
    .lista-topo .busca-lista, .lista-topo > .linha-flex, .lista-topo > .linha-flex .busca-lista { flex: 1 1 100%; width: 100%; }
    .unifi-drawer-footer { padding-bottom: calc(var(--espaco-3) + env(safe-area-inset-bottom)); }
    .modal-content { width: 95%; max-width: none; padding: var(--espaco-4); }
    .menu-suspenso.menu-largo { min-width: 0; width: min(360px, 92vw); }
}

/* ---- Lote 6 da Etapa 5: consolidação do que os CSS de página repetiam ---- */
/* Elementos de ação renderizados como <button> (acessibilidade) com a aparência de link/item */
button.footer-link, button.unifi-action-text { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
button.footer-link { color: var(--cor-acao); }
button.footer-link.danger { color: var(--cor-erro); }
button.unifi-nav-item { width: 100%; background: none; border: none; border-left: 3px solid transparent; font: inherit; text-align: left; cursor: pointer; }
button.unifi-accordion-header { width: 100%; background: none; border: none; font: inherit; color: inherit; text-align: left; }
.unifi-table td .estado-vazio { border: none; }
.texto-pequeno { font-size: var(--fonte-xs); }
.linha-flex { display: flex; align-items: center; gap: var(--espaco-2); }
.empurrar-direita { margin-left: auto; }
.aviso-atencao { background: color-mix(in srgb, var(--cor-atencao) 10%, transparent); border: 1px solid color-mix(in srgb, var(--cor-atencao) 30%, transparent); padding: 10px; border-radius: var(--raio-sm); margin-bottom: 10px; font-size: var(--fonte-sm); }
.aviso-atencao strong { color: var(--cor-atencao); font-size: 11px; }
/* Gaveta de formulário que estende uma lista (documentos, reservas): tamanhos e layout interno.
   O `!important` só existe aqui porque a regra base de `.unifi-drawer` (acima) já o usa. */
.unifi-drawer.unifi-drawer-media { width: 600px !important; max-width: 100vw; }
.unifi-drawer.unifi-drawer-larga { width: 900px !important; max-width: 100vw; }
.unifi-drawer.unifi-drawer-tela-cheia { position: fixed !important; top: 0 !important; height: 100vh !important; z-index: 1000; }
.drawer-form-layout { display: flex; flex-direction: column; flex: 1; overflow: hidden; height: 100%; position: relative; }
.unifi-drawer-body-scrollable { overflow-y: auto; flex: 1; padding: 20px; --gaveta-recuo-x: 20px; }
.unifi-drawer .tox-tinymce { border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); }
.drawer-backdrop { position: fixed; inset: 0; background: transparent; z-index: 100; cursor: not-allowed; }
.titulo-secao-gaveta { color: var(--texto-secundario); font-size: 11px; font-weight: var(--peso-forte); text-transform: uppercase; border-bottom: 1px solid var(--cor-borda); padding-bottom: 5px; margin: 20px 0 15px; }
.titulo-secao-gaveta.primeiro { margin-top: 0; }
.titulo-secao-gaveta.atencao { color: var(--cor-atencao); }
.rodape-gaveta-direita { justify-content: flex-end; gap: 20px; }
.col-dupla { flex: 2; }
.col-estreita { flex: 0 0 120px; }
.campo-crescer { display: flex; flex-direction: column; flex: 1; margin-top: 15px; }
.rotulo-com-nota { display: flex; align-items: center; justify-content: space-between; }
.rotulo-com-nota small { font-weight: normal; color: var(--cor-acao); font-size: 11px; }
.lista-checkboxes { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); padding: 10px; max-height: 300px; overflow-y: auto; background: var(--fundo-secundario); }
.lista-checkboxes.com-erro { border-color: var(--cor-erro); }
.lista-checkboxes label { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--texto-principal); font-size: 13px; margin: 0; padding: 4px 8px; border-radius: var(--raio-sm); transition: var(--transicao-padrao); }
.lista-checkboxes label:hover { background: color-mix(in srgb, var(--texto-principal) 5%, transparent); }
.lista-checkboxes input[type="checkbox"] { accent-color: var(--cor-acao); cursor: pointer; width: 14px; height: 14px; margin: 0; }

/* ==========================================================================
   LISTAS PADRÃO (2026-10-13): barra de filtros, "Criar novo(a)", rodapé fixo
   ========================================================================== */
/* Barra de filtros (aside.unifi-nav-panel): nenhum link sublinhado, nem no hover */
.unifi-nav-panel a, .unifi-nav-panel a:hover, .unifi-nav-panel a:focus, .unifi-nav-panel a:visited { text-decoration: none; }

/* Opção de filtro (componentes/filtro_opcao.html): sempre com aparência de checkbox.
   - <a class="filtro-opcao [active]" href="?…"> e <button type="button" class="filtro-opcao [active]" aria-pressed>:
     a caixa é desenhada pelo ::before e fica marcada com .active / aria-pressed="true" / aria-current;
   - <label class="filtro-opcao"><input type="checkbox" class="unifi-checkbox"> texto</label>: checkbox real. */
.filtro-grupo { display: flex; flex-direction: column; padding-bottom: var(--espaco-1); }
.filtro-opcao { position: relative; display: flex; align-items: center; gap: var(--espaco-2); width: 100%; box-sizing: border-box; min-height: 26px; margin: 0; padding: 3px 20px; border: none; border-radius: 0; background: none; color: var(--texto-principal); font-family: var(--font-family-ui); font-size: var(--fonte-md); font-weight: var(--peso-normal, 400); line-height: 1.3; text-align: left; text-decoration: none; cursor: pointer; user-select: none; transition: background-color 0.15s; }
.filtro-opcao:hover, .filtro-opcao:focus-visible { background-color: var(--fundo-secundario); color: var(--texto-principal); text-decoration: none; }
.filtro-opcao:focus-visible { outline-offset: -2px; }
a.filtro-opcao::before, button.filtro-opcao::before { content: ''; flex: 0 0 14px; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid var(--cor-borda2); border-radius: 3px; background: var(--fundo-principal) no-repeat center / 10px 10px; transition: background-color 0.15s, border-color 0.15s; }
.filtro-opcao.active::before, .filtro-opcao[aria-pressed="true"]::before, .filtro-opcao[aria-current="true"]::before { background-color: var(--cor-acao); border-color: var(--cor-acao); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.filtro-opcao.active, .filtro-opcao[aria-pressed="true"], .filtro-opcao[aria-current="true"] { font-weight: var(--peso-medio); }
.filtro-opcao input[type="checkbox"] { flex: 0 0 14px; width: 14px; height: 14px; margin: 0; }
.filtro-opcao input.unifi-checkbox:checked::after { left: 4px; top: 1px; width: 3px; height: 7px; }
.filtro-opcao:has(input:checked) { font-weight: var(--peso-medio); }
.filtro-opcao .filtro-opcao-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-opcao .filtro-opcao-extra { margin-left: auto; color: var(--texto-secundario); font-size: var(--fonte-xs); }
.filtro-opcao .filtro-cor { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--texto-secundario); }
.filtro-opcao .avatar-micro { flex-shrink: 0; }
.unifi-nav-panel .sidebar-category-title + .filtro-grupo, .unifi-nav-panel .sidebar-category-title + .filtro-opcao { margin-top: 2px; }

/* "Criar novo(a)" (componentes/criar_novo.html): link único de criação, no rodapé da lista */
.criar-novo { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: none; background: none; color: var(--cor-acao); font-family: var(--font-family-ui); font-size: var(--fonte-md); font-weight: var(--peso-forte); line-height: 1.4; text-decoration: none; white-space: nowrap; cursor: pointer; }
.criar-novo:hover, .criar-novo:focus-visible { color: var(--cor-acao); filter: brightness(0.85); text-decoration: none; }
.criar-novo i { font-size: var(--fonte-sm); }
.criar-novo:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(100%); }
/* Rodapé de lista: sempre visível — fica preso à base da área que rola quando a lista é longa,
   e aparece mesmo com 0 itens (o template não o põe dentro de {% if %}) */
.rodape-lista { position: sticky; bottom: 0; z-index: 3; flex-wrap: wrap; }
.unifi-card:has(> .rodape-lista), .unifi-card:has(> form > .rodape-lista) { overflow: clip; }

/* ===== Padrão das gavetas (2026-10-13): uma largura, título sem ícone, rodapé Cancelar/Salvar à direita =====
   Variantes antigas (-wide, -media, -larga) valem a mesma largura; no mobile (≤768) a gaveta ocupa a tela. */
:root { --gaveta-largura: 600px; }
.unifi-drawer, .unifi-drawer.unifi-drawer-wide, .unifi-drawer.unifi-drawer-media, .unifi-drawer.unifi-drawer-larga { width: min(var(--gaveta-largura), 100vw) !important; max-width: 100vw; }
.unifi-drawer-header .drawer-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--texto-principal); }
.unifi-drawer-footer { justify-content: flex-end; align-items: center; flex-shrink: 0; }
.unifi-drawer-footer .btn { min-width: 100px; justify-content: center; }

/* ===== Padrão "Gerenciar" (2026-10-13): no modo gerenciar só "Cancelar" aparece até haver seleção ===== */
#manageActions.sem-selecao > :not([data-gerenciar="0"]), [data-acoes-gerenciar].sem-selecao > :not([data-gerenciar="0"]) { display: none !important; }
.footer-link.secundario, button.footer-link.secundario { color: var(--texto-secundario); }

/* ===== Filtro vindo de tabela com muitas opções (.filtro-grupo[data-filtro-tabela], erp.js) ===== */
.filtro-opcao[hidden] { display: none; }
.filtro-caixa { margin: var(--espaco-1) 12px var(--espaco-2); border: 1px solid var(--cor-borda); border-radius: var(--raio-md); background: var(--fundo-principal); overflow: hidden; }
.filtro-caixa-busca { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--cor-borda); background: transparent; color: var(--texto-principal); font-family: var(--font-family-ui); font-size: var(--fonte-md); outline: none; }
.filtro-caixa-busca:focus-visible { box-shadow: inset 0 -2px 0 var(--cor-acao); }
.filtro-caixa-contagem { padding: 6px 10px; border-bottom: 1px solid var(--cor-borda); color: var(--texto-secundario); font-size: var(--fonte-xs); }
.filtro-caixa-lista { max-height: 210px; overflow-y: auto; padding: 4px 0; }
.filtro-caixa .filtro-opcao { padding-left: 10px; padding-right: 10px; }
/* Ações extras de uma gaveta (ex.: "Imprimir", "Gerar contrato"): links de texto no topo do corpo, nunca no rodapé */
.gaveta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-4); margin-bottom: var(--espaco-4); }
/* Gaveta secundária aberta por cima de outra (ex.: "Adicionar Pessoas" na montagem do time) */
.unifi-drawer.unifi-drawer-sobreposta { z-index: 1010 !important; }
/* Extras da opção de filtro (tag filtro_opcao: cor=… e pessoa=…) */
.filtro-opcao svg.filtro-cor { background: none; border-radius: 0; flex: 0 0 10px; width: 10px; height: 10px; }
.filtro-opcao svg.filtro-cor circle { stroke: var(--cor-borda2); stroke-width: 1; } /* cor clara (ex.: branco) continua visível */
.filtro-opcao .filtro-avatar { width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--fundo-secundario); border: 1px solid var(--cor-borda); color: var(--texto-secundario); font-size: 8px; font-weight: var(--peso-forte); }
.filtro-opcao .filtro-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Interruptor (erp-switch) dentro de .form-group de gaveta: a regra de rótulo de campo acima (11px, maiúsculas, block,
   com !important) cortava o texto e escondia o interruptor ("ATI"). O rótulo do interruptor volta ao normal. */
.unifi-drawer .form-group label.erp-switch-wrapper { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 0 !important; font-size: var(--fonte-md) !important; font-weight: var(--peso-normal, 400); text-transform: none; color: var(--texto-principal); }
/* ===== Campos com o mesmo fundo em todo o sistema (pedido do dono, 2026-10-14) =====
   Fundo cinza fazia o campo parecer desabilitado. Todo campo (texto, número, data, hora, seleção, área de texto,
   inclusive somente leitura) usa --fundo-principal; desabilitado só fica com o texto mais claro e o cursor de bloqueio. */
.unifi-app-container input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]):not([type=range]),
.unifi-app-container select, .unifi-app-container textarea,
.unifi-drawer input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]):not([type=range]),
.unifi-drawer select, .unifi-drawer textarea, .form-control, .unifi-input { background-color: var(--fundo-principal); }
.form-control:disabled, .unifi-input:disabled, .unifi-drawer input:disabled, .unifi-drawer select:disabled, .unifi-drawer textarea:disabled,
.unifi-app-container input:disabled, .unifi-app-container select:disabled { background-color: var(--fundo-principal); color: var(--texto-secundario); cursor: not-allowed; }