/* ============================================================
   ValePag — Backoffice · Design System (v4 — identidade oficial)
   Brand kit ValePag (Identidade Visual/GUIA/valepag-brandkit.pdf):
     Preto  PANTONE Black 6 C  #161F28
     Verde  PANTONE 2414 C     #00DD8B
     Verde claro PANTONE 359 C #ACF684
     Tipografia de apoio: Cabin (self-hosted em bko/fonts/)
   As variaveis --navy/--gold sao mantidas como NOMES por compat
   com as classes existentes, mas apontam para as cores da marca
   (navy = preto ValePag, gold = verde ValePag).
   ============================================================ */
@font-face { font-family: 'Cabin'; src: url('../fonts/Cabin-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabin'; src: url('../fonts/Cabin-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabin'; src: url('../fonts/Cabin-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cabin'; src: url('../fonts/Cabin-Bold.ttf') format('truetype'); font-weight: 700 800; font-style: normal; font-display: swap; }

:root {
  /* Marca ValePag: Preto estrutural + Verde de destaque */
  --navy: #161F28; --navy-dark: #0B1218; --navy-light: #24303C;
  --gold: #00DD8B; --gold-dark: #00B873; --gold-light: #E3FBF1;
  --verde-claro: #ACF684; --verde-claro-bg: #F2FDE9;
  --accent: var(--gold); --accent-light: var(--gold-light);
  --primario: var(--navy); --primario-dark: var(--navy-dark);

  /* Neutros (tom neutro-frio derivado do preto #161F28) */
  --bg: #F4F7F8; --card: #FFFFFF; --borda: #E3E9EC; --borda-light: #EDF1F4;
  --texto: #161F28; --texto-sec: #57646F; --texto-muted: #84919C;
  --azul-suave: #F6FAFA; --cinza-suave: #EEF3F4;

  /* Semânticas */
  --success: #0FA968; --success-bg: #E5F9F0;
  --warning: #D97706; --warning-bg: #FEF4E6;
  --danger: #DC2626; --danger-bg: #FDECEC;
  --info: #2563EB; --info-bg: #EAF1FE;

  --shadow-sm: 0 1px 2px rgba(22,31,40,.05);
  --shadow: 0 1px 3px rgba(22,31,40,.06), 0 4px 12px rgba(22,31,40,.05);
  --shadow-md: 0 8px 24px rgba(22,31,40,.10);
  --shadow-lg: 0 18px 44px rgba(22,31,40,.18);
  --ring: 0 0 0 3px rgba(0,221,139,.25);

  --sidebar-w: 252px; --navbar-h: 60px;
  --radius: 14px; --radius-md: 10px; --radius-sm: 8px;
  --font: 'Cabin', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace; --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --trans: all .16s cubic-bezier(.4,0,.2,1);

  /* Aliases vp-* (compat com shell e telas ainda no padrao antigo) */
  --vp-primary: var(--gold); --vp-primary-dark: var(--gold-dark); --vp-primary-light: var(--gold-light);
  --vp-primary-10: rgba(0,221,139,.10); --vp-primary-15: rgba(0,221,139,.18);
  --vp-navy: var(--navy); --vp-navy-dark: var(--navy-dark); --vp-navy-light: var(--navy-light);
  --vp-bg: var(--bg); --vp-card: var(--card); --vp-border: var(--borda); --vp-border-strong: var(--borda);
  --vp-input-bg: #fff; --vp-hover: var(--cinza-suave); --vp-bg-muted: var(--cinza-suave); --vp-bg-subtle: var(--azul-suave);
  --vp-text: var(--texto); --vp-text-secondary: var(--texto-sec); --vp-text-muted: var(--texto-muted);
  --vp-success: var(--success); --vp-success-light: var(--success-bg);
  --vp-warning: var(--warning); --vp-warning-light: var(--warning-bg);
  --vp-danger: var(--danger); --vp-danger-light: var(--danger-bg);
  --vp-info: var(--info); --vp-info-light: var(--info-bg);
  --vp-gradient-primary: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  --vp-gradient-navy: linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 100%);
  --vp-shadow-sm: var(--shadow-sm); --vp-shadow: var(--shadow); --vp-shadow-md: var(--shadow-md); --vp-shadow-lg: var(--shadow-lg);
  --vp-shadow-gold: 0 4px 14px rgba(0,221,139,.30); --vp-ring: var(--ring);
  --vp-radius: var(--radius); --vp-radius-sm: var(--radius-md); --vp-radius-xs: var(--radius-sm);
  --vp-navbar-height: var(--navbar-h); --vp-sidebar-width: var(--sidebar-w);
  --vp-font: var(--font); --vp-font-heading: var(--font); --vp-font-mono: var(--font-mono); --vp-transition: var(--trans);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--texto); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--navy); text-decoration: none; }
::selection { background: rgba(0,221,139,.28); }
* { scrollbar-width: thin; scrollbar-color: #C7CEDB transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #C7CEDB; border-radius: 8px; border: 2px solid var(--bg); }
i[data-lucide], svg[data-lucide] { width: 17px; height: 17px; flex-shrink: 0; stroke-width: 2; vertical-align: -3px; }

/* ====== LAYOUT / SHELL (vp-*) ====== */
.vp-layout { display: flex; min-height: 100vh; }
.vp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vp-content, .eft-content { padding: 22px 26px; flex: 1; max-width: 1440px; width: 100%; margin: 0 auto; }

/* Sidebar NAVY (estilo Efata + marca ValePag) */
.vp-sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--navy);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.vp-sidebar-header { padding: 18px 18px 10px; }
.vp-sidebar-logo { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
/* Assinatura empilhada da marca (vale/pag + simbolo) — fundo do PNG e o mesmo #161F28 da sidebar */
.vp-sidebar-logo img { width: 100%; max-width: 132px; height: auto; object-fit: contain; }
.vp-sidebar-logo-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.vp-sidebar-logo-text { font-weight: 800; font-size: 16px; color: #fff; letter-spacing: -.02em; }
.vp-sidebar-logo-text span { color: var(--gold); }
.vp-sidebar-logo-sub { font-size: 11px; color: rgba(255,255,255,.5); }
.vp-sidebar-search { position: relative; padding: 4px 14px 12px; }
.vp-sidebar-search input { width: 100%; height: 38px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); border-radius: var(--radius-sm); padding: 0 12px 0 34px; font-size: 13px; color: #fff; outline: none; }
.vp-sidebar-search input::placeholder { color: rgba(255,255,255,.45); }
.vp-sidebar-search input:focus { border-color: var(--gold); background: rgba(255,255,255,.1); }
.vp-sidebar-search-icon { position: absolute; left: 26px; top: 11px; width: 16px; height: 16px; color: rgba(255,255,255,.45); }
.vp-sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 10px 14px; }
.vp-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-color: transparent; }
.vp-sidebar-section { margin-bottom: 12px; }
.vp-sidebar-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.4); padding: 8px 12px 4px; }
.vp-nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--radius-sm); color: rgba(255,255,255,.72); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: var(--trans); position: relative; }
.vp-nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.vp-nav-item.active { background: rgba(0,221,139,.14); color: var(--gold); font-weight: 600; }
.vp-nav-item.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--gold); border-radius: 0 3px 3px 0; }
.vp-nav-item.disabled { opacity: .4; cursor: not-allowed; }
.vp-nav-icon { display: flex; width: 18px; height: 18px; }
.vp-sidebar-footer { border-top: 1px solid rgba(255,255,255,.1); padding: 12px; }
.vp-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--radius-sm); cursor: pointer; }
.vp-sidebar-user:hover { background: rgba(255,255,255,.06); }
.vp-sidebar-user-avatar { width: 36px; height: 36px; border-radius: 9px; background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.vp-sidebar-user-name { font-size: 13px; font-weight: 600; color: #fff; }
.vp-sidebar-user-role { font-size: 11px; color: rgba(255,255,255,.45); }

/* Topbar */
.vp-topbar { height: var(--navbar-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 26px; background: #fff; border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 30; }
.vp-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vp-topbar-crumb { font-size: 11px; font-weight: 600; color: var(--texto-muted); text-transform: uppercase; letter-spacing: .04em; }
.vp-topbar-title-row { display: flex; align-items: baseline; gap: 10px; }
.vp-topbar-title { font-size: 19px; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.vp-topbar-subtitle { font-size: 13px; color: var(--texto-muted); }
.vp-topbar-right { display: flex; align-items: center; gap: 8px; }
.vp-theme-toggle, .vp-burger, .eft-mobile-toggle { width: 38px; height: 38px; border: 1px solid var(--borda); background: #fff; border-radius: var(--radius-sm); color: var(--texto-sec); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vp-theme-toggle:hover, .vp-burger:hover { background: var(--cinza-suave); }
.vp-theme-toggle .icon-dark { display: none; }
.vp-burger { display: none; }
.vp-topbar-avatar { width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; background: var(--navy); color: #fff; font-weight: 700; font-size: 13px; }

/* ====== CARDS ====== */
.vp-card, .card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-header { padding: 18px 22px 4px; }
.card-title { font-size: 15px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.card-title i[data-lucide] { color: var(--gold); }
.card-content { padding: 16px 22px 20px; }

/* ====== BOTÕES ====== */
.vp-btn, .btn, .btn-accent, .btn-editar { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: var(--trans); white-space: nowrap; text-decoration: none; }
.vp-btn:active, .btn:active, .btn-accent:active, .btn-editar:active { transform: translateY(.5px); }
.vp-btn-primary, .btn-accent, .btn-editar { background: var(--gold); color: var(--navy); }
.vp-btn-primary:hover, .btn-accent:hover, .btn-editar:hover { background: var(--gold-dark); color: var(--navy); }
.btn-primario, .btn-primary { background: var(--navy); color: #fff; }
.btn-primario:hover, .btn-primary:hover { background: var(--navy-light); }
.vp-btn-secondary, .btn-secundario, .btn-voltar { background: #fff; color: var(--texto-sec); border-color: var(--borda); }
.vp-btn-secondary:hover, .btn-secundario:hover, .btn-voltar:hover { background: var(--cinza-suave); color: var(--texto); }
.vp-btn-success { background: var(--success); color: #fff; }
.vp-btn-danger { background: var(--danger); color: #fff; }
.vp-btn-sm, .btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; gap: 5px; }
.vp-btn:disabled, .btn:disabled, .btn-accent:disabled, .btn-editar:disabled { opacity: .5; cursor: not-allowed; }
/* Remove o outline escuro padrao do navegador nos botoes (o que ficava feio nos botoes gold ao clicar) */
.vp-btn:focus, .btn:focus, .btn-accent:focus, .btn-editar:focus, .btn-icon:focus, .vp-theme-toggle:focus, .vp-topbar-avatar:focus, .vp-burger:focus, .vp-nav-item:focus { outline: none; }
.vp-btn:focus-visible, .btn:focus-visible, .btn-accent:focus-visible, .btn-editar:focus-visible, .btn-icon:focus-visible, .vp-theme-toggle:focus-visible, .vp-topbar-avatar:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--borda); color: var(--texto-sec); cursor: pointer; padding: 0; transition: var(--trans); }
.btn-icon:hover { background: var(--gold-light); border-color: var(--gold); color: var(--gold-dark); }
.btn-icon.danger { color: var(--danger); border-color: #f3c9c9; }
.btn-icon.danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-icon i[data-lucide], .btn-icon svg { width: 15px; height: 15px; }
.actions-cell { display: inline-flex; gap: 6px; }
/* Alerta inline (banner de erro/aviso no topo de telas) — distinto do .vp-toast flutuante */
.toast { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; background: var(--cinza-suave); color: var(--texto); border: 1px solid var(--borda); border-left: 4px solid var(--texto-muted); }
.toast.error { background: var(--danger-bg); color: var(--danger); border-color: #f3c9c9; border-left-color: var(--danger); }
.toast.warning { background: var(--warning-bg); color: var(--warning); border-left-color: var(--warning); }
.toast.success { background: var(--success-bg); color: var(--success); border-left-color: var(--success); }
/* Helpers de layout do shell (containers de agrupamento) */
.vp-sidebar-user-info { flex: 1; min-width: 0; }
.vp-topbar-titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* ====== INPUTS ====== */
.vp-input, .vp-select, .form-input, textarea.vp-input, select.vp-select { width: 100%; height: 40px; background: #fff; border: 1px solid var(--borda); border-radius: var(--radius-sm); padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--texto); outline: none; transition: var(--trans); }
textarea.vp-input { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
.vp-input::placeholder { color: #A8B2C6; }
.vp-input:focus, .vp-select:focus, .form-input:focus { border-color: var(--gold); box-shadow: var(--ring); }
.vp-input[readonly], .vp-input:disabled, .vp-select:disabled { background: var(--cinza-suave); color: var(--texto-muted); cursor: not-allowed; }
.vp-select, select.form-input { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B8C' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px; }
label { color: var(--texto); }

/* ====== TABELAS (cabeçalho navy + zebra — estilo Efata) ====== */
.vp-table, .data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-wrapper { overflow-x: auto; border-radius: var(--radius); }
.vp-table thead th, .data-table thead th { text-align: left; padding: 11px 14px; background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.vp-table tbody td, .data-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--borda-light); color: var(--texto); vertical-align: middle; }
.vp-table tbody tr:nth-child(even) td, .data-table tbody tr:nth-child(even) td { background: var(--azul-suave); }
.vp-table tbody tr:last-child td { border-bottom: none; }
.vp-table tbody tr:hover td, .data-table tbody tr:hover td { background: var(--cinza-suave); }
.vp-table tbody tr[onclick], .data-table tbody tr[onclick], tr[onclick] { cursor: pointer; }

/* Ordenacao: <th> clicavel gerado por vp.Ordenacao.th. Em repouso SO a coluna
   ordenada mostra seta; nas outras o icone fica transparente (ocupando o lugar,
   para o titulo nao dancar no hover) e aparece ao passar o mouse. Tamanho preso
   em 11px: o default do lucide e 24px e dominava o cabecalho de 10.5px. */
.vp-table thead th.vp-ord, .data-table thead th.vp-ord { cursor: pointer; user-select: none; }
.vp-table thead th.vp-ord:hover, .data-table thead th.vp-ord:hover { background: var(--navy-light); }
.vp-table thead th.vp-ord:focus-visible, .data-table thead th.vp-ord:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.vp-table thead th.vp-ord svg, .data-table thead th.vp-ord svg { width: 11px; height: 11px; margin-left: 4px; vertical-align: -1px; stroke-width: 2.5; opacity: 0; transition: opacity .12s ease; }
.vp-table thead th.vp-ord:hover svg, .data-table thead th.vp-ord:hover svg { opacity: .6; }
.vp-table thead th.vp-ord.is-ord svg, .data-table thead th.vp-ord.is-ord svg { opacity: 1; color: var(--gold); }

/* ====== BADGES / PILLS ====== */
.vp-badge, .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.6; background: var(--cinza-suave); color: var(--texto-sec); }
.vp-badge-success, .pill.ok { background: var(--success-bg); color: var(--success); }
.vp-badge-warning, .pill.warn { background: var(--warning-bg); color: var(--warning); }
.vp-badge-danger, .pill.danger { background: var(--danger-bg); color: var(--danger); }
.vp-badge-info, .pill.info { background: var(--info-bg); color: var(--info); }
.vp-badge-navy { background: var(--cinza-suave); color: var(--texto-sec); }
.pill.gold { background: var(--gold-light); color: var(--gold-dark); }

/* ====== EMPTY ====== */
.vp-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--texto-muted); padding: 40px; }
.vp-empty i, .vp-empty svg { color: #C7CEDB; }
.vp-empty-title { font-size: 15px; font-weight: 600; color: var(--texto); }
.vp-empty-text { font-size: 13px; color: var(--texto-muted); }

/* ====== ABAS DO DETALHE (ex.: pg_cliente) ====== */
.detail-tabs { display:flex; gap:4px; background:#fff; border:1px solid var(--borda); border-radius:var(--radius); padding:6px; margin-bottom:16px; overflow-x:auto; box-shadow:var(--shadow-sm); }
.cli-tab-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border:none; background:transparent; border-radius:var(--radius-sm); font-family:inherit; font-size:13.5px; font-weight:600; color:var(--texto-sec); cursor:pointer; white-space:nowrap; transition:var(--trans); }
.cli-tab-btn:hover { background:var(--cinza-suave); color:var(--texto); }
.cli-tab-btn.active { background:rgba(0,221,139,.14); color:var(--gold-dark); }
.cli-tab-btn.active i[data-lucide] { color:var(--gold-dark); }
.cli-tab-btn .tab-count { font-size:10.5px; font-weight:700; background:var(--cinza-suave); color:var(--texto-muted); border-radius:999px; padding:1px 7px; }
.cli-tab-btn.active .tab-count { background:rgba(0,221,139,.22); color:var(--gold-dark); }

/* ====== DETALHE EM SEÇÕES (dinâmica Efata) ====== */
.detail-topbar, .vp-toolbar-sticky { position: sticky; top: var(--navbar-h); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #fff; border: 1px solid var(--borda); border-radius: var(--radius); padding: 12px 18px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.detail-topbar .titulo { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: var(--navy); min-width: 0; }
.detail-actions { display: flex; gap: 8px; }
.detail-section { background: #fff; border: 1px solid var(--borda); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.detail-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--borda-light); }
.detail-section-header.no-border { border-bottom: none; padding-bottom: 0; }
.detail-section-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--navy); color: #fff; }
.detail-section-icon.red, .detail-section-icon.gold { background: var(--gold); color: var(--navy); }
.detail-section-icon.navy { background: var(--navy); color: #fff; }
.detail-section-icon.green { background: var(--success-bg); color: var(--success); }
.detail-section-icon.purple { background: var(--info-bg); color: var(--info); }
.detail-section-title { font-size: 15px; font-weight: 700; color: var(--navy); }
.detail-section-subtitle { font-size: 12.5px; color: var(--texto-muted); margin-top: 1px; }
.detail-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 18px; }
.detail-form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.detail-form-grid.cols-1 { grid-template-columns: 1fr; }
.detail-field { display: flex; flex-direction: column; }
.detail-field.full { grid-column: 1 / -1; }
.detail-field label { font-size: 12px; font-weight: 600; color: var(--texto-sec); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.detail-field label i[data-lucide] { width: 13px; height: 13px; color: var(--texto-muted); }
/* Inputs "puros" dentro de detail-field / modal-body herdam o visual dos vp-input */
.detail-field input:not([type=checkbox]):not([type=radio]), .detail-field select, .detail-field textarea,
.modal-body input:not([type=checkbox]):not([type=radio]), .modal-body select, .modal-body textarea { width: 100%; height: 40px; background: #fff; border: 1px solid var(--borda); border-radius: var(--radius-sm); padding: 0 12px; font-family: inherit; font-size: 14px; color: var(--texto); outline: none; transition: var(--trans); }
.detail-field textarea, .modal-body textarea { height: auto; min-height: 78px; padding: 10px 12px; resize: vertical; }
.detail-field input:focus, .detail-field select:focus, .detail-field textarea:focus,
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus { border-color: var(--gold); box-shadow: var(--ring); }
.detail-field input[readonly], .detail-field input:disabled, .detail-field select:disabled, .detail-field textarea[readonly] { background: var(--cinza-suave); color: var(--texto-muted); cursor: not-allowed; }
.detail-field select, .modal-body select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B8C' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px; }
.req { color: var(--danger); font-weight: 700; }
.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }
/* compat com a grade densa anterior */
.vp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 18px; }
.vp-form-grid .col-2 { grid-column: 1 / -1; }
.vp-fld { display: flex; flex-direction: column; }
.vp-fld label { font-size: 12px; font-weight: 600; color: var(--texto-sec); margin-bottom: 5px; }
.vp-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--navy); margin: 22px 0 10px; display: flex; align-items: center; gap: 7px; }

/* Toggle (switch) */
.detail-toggle-row { display: flex; align-items: center; gap: 12px; }
.detail-toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.detail-toggle input { opacity: 0; width: 0; height: 0; }
.detail-toggle .slider { position: absolute; cursor: pointer; inset: 0; background: #CBD3E0; border-radius: 26px; transition: .25s; }
.detail-toggle .slider:before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .25s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.detail-toggle input:checked + .slider { background: var(--gold); }
.detail-toggle input:checked + .slider:before { transform: translateX(20px); }
.detail-toggle-label { font-size: 13.5px; font-weight: 600; color: var(--texto); }
.detail-toggle-label.inactive { color: var(--texto-muted); }
.detail-toggle-hint { font-size: 12px; color: var(--texto-muted); }
/* Toggle dentro de .detail-field: os campos vizinhos da grade tem label (~22px)
   + input de 40px, e o toggle tem 26px sem label, entao ele subia para o topo da
   celula e ficava deslocado da linha. Como a celula da grid estica (align-items
   stretch), margin-top:auto encosta o toggle na base, alinhando com os inputs,
   e o min-height reserva a mesma faixa vertical. Substitui os margin-top:22px
   ad-hoc que existiam em alguns JSPs e nao em outros. */
.detail-field > .detail-toggle-row,
.detail-field > label.detail-toggle-row { min-height: 40px; margin-top: auto; margin-bottom: 0; }
/* Quando o campo reserva a linha do label com <label>&nbsp;</label> (padrao do
   pg_cliente), o auto acima nao deve empurrar duas vezes. */
.detail-field > label + .detail-toggle-row { margin-top: 0; }

/* ====== MODAL ====== */
.modal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.show { display: flex; }
.modal-box { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 540px; max-width: 100%; max-height: 90vh; overflow: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--borda); }
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--navy); }
.modal-body { padding: 22px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--borda); background: var(--azul-suave); }

/* ====== TOAST / LOADING ====== */
.vp-toast, .eft-toast { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--texto); border: 1px solid var(--borda); border-left: 4px solid var(--success); border-radius: var(--radius-sm); padding: 13px 18px; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-lg); animation: toastIn .25s ease; max-width: 420px; }
.vp-toast.error, .eft-toast.error { border-left-color: var(--danger); }
.vp-toast.warning, .eft-toast.warning { border-left-color: var(--warning); }
.eft-toast.success { border-left-color: var(--success); }
.eft-toast i[data-lucide] { color: var(--gold); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
.vp-loading, .eft-loading { width: 30px; height: 30px; border: 3px solid var(--borda); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; }
.loading-center { display: flex; align-items: center; justify-content: center; min-height: 280px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ====== MOBILE ====== */
.vp-mobile-overlay, .eft-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 39; }
.vp-mobile-overlay.show, .eft-mobile-overlay.show { display: block; }
.eft-mobile-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 41; }
@media (max-width: 1100px){ .detail-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 768px){
  .vp-sidebar { position: fixed; z-index: 40; transform: translateX(-100%); transition: transform .25s; }
  .vp-sidebar.open { transform: translateX(0); }
  .vp-burger { display: flex; }
  .vp-topbar, .vp-content, .eft-content { padding-left: 16px; padding-right: 16px; }
  .detail-form-grid, .vp-form-grid { grid-template-columns: 1fr; }
}

/* ====== UTIL ====== */
.animate-fadeIn { animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.vp-font-mono { font-family: var(--font-mono); }
.no-print { }
@media print { .no-print, .vp-sidebar, .vp-topbar, .detail-topbar { display: none !important; } }