/*
 * dp.css — design system do Dynne Ponto (ERP web)
 *
 * Tema "DYNNE ERP — Azul" (Claude Design, 21/09/2026; fonte em
 * _design/DYNNE ERP - Azul.html): tokens "Mesa PDV" no modo claro, fonte
 * Sora, accent #0796C4, superfícies brancas/cinza-lavanda, sidebar branca com
 * acordeão, topbar de vidro, tabela com hover accent e janela de cadastro com
 * barra de título. Densidade COMPACTA é o padrão (html[data-density]).
 *
 * Desvios conscientes em relação ao design:
 *  - janela sem minimizar/barra de tarefas e sem redimensionar (arrasta e
 *    maximiza); rail recolhido abre os subitens por clique (DP.menu), não por
 *    hover; sem fade no rodapé da tabela (há rodapé com paginação); conteúdo
 *    sem max-width; ícone global 16 px; sem color-mix() (rgba fixos, tema
 *    único claro); glow só nos primários do cabeçalho de página e da janela.
 *
 * Os nomes de classe .dp-* do protótipo foram mantidos; os tokens antigos
 * (--azul, --papel, --borda…) continuam válidos por alias, para o CSS local
 * das telas não precisar mudar. Prefixo .dp-* para componentes; utilitários
 * curtos (.row, .col, .mt-*) ficam no fim.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
:root {
  /* paleta base (navy do design, usada no login e no tema escuro) */
  --navy-950: #070C1A; --navy-900: #0C1428; --navy-800: #131F3D; --navy-700: #1C2C53; --navy-600: #243869; --navy-500: #34508F;
  --cyan-300: #5FD8FF; --cyan-400: #16BEF2; --cyan-500: #0894C6; --cyan-600: #0A78A0;

  /* superfícies e texto — modo claro */
  --bg: #ECEDF1; --surface: #FFFFFF; --surface-2: #F7F8FB; --surface-3: #EBEDF3;
  --border: #DCDFE8; --border-soft: #E9EBF1;
  --fg-1: #14274A; --fg-2: #51607C; --fg-3: #93A0B5; --fg-on-accent: #FFFFFF;
  --field-bg: #FFFFFF;

  /* accent (azul) e tints pré-calculados */
  --accent: #0796C4; --accent-hover: #0884AD; --accent-press: #066E93;
  --accent-8: rgba(7, 150, 196, .08); --accent-11: rgba(7, 150, 196, .11); --accent-12: rgba(7, 150, 196, .12);
  --accent-14: rgba(7, 150, 196, .14); --accent-16: rgba(7, 150, 196, .16); --accent-20: rgba(7, 150, 196, .20);
  --accent-22: rgba(7, 150, 196, .22); --accent-25: rgba(7, 150, 196, .25); --accent-35: rgba(7, 150, 196, .35);
  --accent-45: rgba(7, 150, 196, .45);

  /* semânticas */
  --ok: #15803D; --ok-2: #16A34A; --ok-8: rgba(21, 128, 61, .08); --ok-14: rgba(21, 128, 61, .14); --ok-25: rgba(21, 128, 61, .25);
  --warn: #B45309; --warn-8: rgba(180, 83, 9, .08); --warn-14: rgba(180, 83, 9, .14); --warn-25: rgba(180, 83, 9, .25);
  --danger: #DC2F22; --danger-2: #B61D12; --danger-8: rgba(220, 47, 34, .08); --danger-12: rgba(220, 47, 34, .12); --danger-14: rgba(220, 47, 34, .14); --danger-35: rgba(220, 47, 34, .35);
  --violet: #7C3AED; --violet-14: rgba(124, 58, 237, .14); --violet-20: rgba(124, 58, 237, .20);

  /* espaçamento (base 4 px) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* forma */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --shadow-1: 0 1px 0 0 rgba(255, 255, 255, .7) inset, 0 4px 14px -6px rgba(13, 32, 71, .12), 0 1px 3px -1px rgba(13, 32, 71, .08);
  --shadow-2: 0 1px 0 0 rgba(255, 255, 255, .7) inset, 0 14px 30px -12px rgba(13, 32, 71, .18), 0 4px 10px -4px rgba(13, 32, 71, .1);
  --shadow-3: 0 1px 0 0 rgba(255, 255, 255, .8) inset, 0 28px 56px -18px rgba(13, 32, 71, .22), 0 10px 22px -10px rgba(13, 32, 71, .14);
  --glow-accent: 0 0 18px 0 rgba(7, 150, 196, .25); --glow-accent-sm: 0 0 10px 0 rgba(7, 150, 196, .3);
  --glow-green: 0 0 18px 0 rgba(21, 128, 61, .22); --glow-danger: 0 0 18px 0 rgba(220, 47, 34, .3);
  --ring: 0 0 0 3px rgba(7, 150, 196, .22);

  /* movimento e tipografia */
  --ease-out: cubic-bezier(.2, .8, .2, 1); --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms;
  --font-sans: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* layout */
  --topbar-h: 56px; --sidebar-w: 248px; --rail-w: 78px;

  /* densidade "confortável" (o compacto redefine abaixo) */
  --fs-body: 14px; --fs-td: 13px; --fs-h1: 24px; --fs-kpi: 28px;
  --pad-input: 10px 12px; --pad-btn: 10px 16px; --pad-btn-p: 5px 10px; --pad-chip: 7px 14px;
  --pad-td: 11px 14px; --pad-th: 12px 14px; --linha-min: 44px; --avatar: 34px;
  --h-ctl: 38px; --h-busca: 40px; --pad-card: 14px 16px; --pad-kpi: var(--space-4);
  --gap-pagina: var(--space-5); --gap-form: 16px; --pad-nav: 10px 12px; --pad-nav-item: 8px 10px 8px 12px; --pad-op: 9px 10px;
}
html[data-density="compacto"] {
  --topbar-h: 50px; --space-5: 16px; --space-6: 22px; --space-7: 32px; --space-8: 44px;
  --fs-body: 13px; --fs-td: 12.5px; --fs-h1: 22px; --fs-kpi: 24px;
  --pad-input: 7px 10px; --pad-btn: 7px 12px; --pad-btn-p: 4px 9px; --pad-chip: 5px 12px;
  --pad-td: 6px 12px; --pad-th: 7px 12px; --linha-min: 36px; --avatar: 28px;
  --h-ctl: 34px; --h-busca: 34px; --pad-card: 12px 14px; --pad-kpi: 12px 14px;
  --gap-pagina: 14px; --gap-form: 12px 14px; --pad-nav: 8px 12px; --pad-nav-item: 6px 10px 6px 12px; --pad-op: 8px 10px;
}
/* tema escuro do design — tokens prontos, sem seletor por enquanto */
html[data-theme="dark"] {
  --bg: var(--navy-950); --surface: var(--navy-900); --surface-2: var(--navy-800); --surface-3: var(--navy-700);
  --border: var(--navy-700); --border-soft: var(--navy-800); --field-bg: var(--navy-950);
  --fg-1: #F1F5FF; --fg-2: #9AA8C7; --fg-3: #586484; --fg-on-accent: #07182A;
  --accent: var(--cyan-400); --accent-hover: var(--cyan-300); --accent-press: var(--cyan-500);
  --ok: #39FF8B; --warn: #FBBF24; --danger: #FF4D3D; --violet: #A78BFA;
  --shadow-1: 0 1px 0 0 rgba(255, 255, 255, .04) inset, 0 8px 24px -12px rgba(0, 0, 0, .55), 0 2px 4px -2px rgba(0, 0, 0, .4);
  --shadow-3: 0 1px 0 0 rgba(255, 255, 255, .06) inset, 0 32px 60px -20px rgba(0, 0, 0, .75), 0 8px 18px -8px rgba(0, 0, 0, .55);
}

/* aliases dos tokens do tema anterior — o CSS/JS das telas continua válido */
:root {
  --fonte: var(--font-sans); --mono: var(--font-mono);
  --azul: var(--accent); --azul-escuro: var(--accent-hover); --azul-claro: var(--cyan-300);
  --azul-suave: var(--accent-12); --azul-borda: var(--accent-35); --azul-100: var(--accent-16); --azul-200: var(--accent-45);
  --navy: var(--navy-900); --navy-2: var(--navy-800); --navy-3: var(--navy-700);
  --texto: var(--fg-1); --texto-2: var(--fg-2); --texto-3: var(--fg-2); --apagado: var(--fg-3); --apagado-2: #B0BACE;
  --borda: var(--border); --borda-suave: var(--border-soft); --borda-fina: var(--border-soft);
  --fundo: var(--bg); --papel: var(--surface); --papel-2: var(--surface-3); --chip: var(--surface-3); --chip-2: var(--surface-3);
  --ok-suave: var(--ok-14); --ok-texto: #F0FDF4;
  --atencao: var(--warn); --atencao-suave: var(--warn-14); --atencao-texto: #7C4A11;
  --erro: var(--danger); --erro-suave: var(--danger-14);
  --info: var(--accent);
  --raio: var(--radius-md); --raio-m: 8px; --raio-p: var(--radius-sm); --raio-xs: 5px; --raio-pill: var(--radius-pill);
  --sombra: var(--shadow-1); --sombra-modal: var(--shadow-3); --foco: var(--ring);
  --sidebar-l: var(--sidebar-w); --topbar-a: var(--topbar-h);
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 26px; --e7: 36px;
  --ease: var(--ease-out); --d1: var(--dur-1); --d2: var(--dur-2);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-body); }
body { margin: 0; background: var(--bg); color: var(--fg-1); font-family: var(--font-sans); line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01'; font-variant-numeric: tabular-nums; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
a.dp-item, a.dp-kpi, a.linha, a.dp-btn, a.dp-chip, a.dp-nav-btn, a.dp-nav-item, a.dp-nav-mini, a.dp-card { color: inherit; }
a.dp-item:hover, a.dp-kpi:hover, a.linha:hover, a.dp-card:hover { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
img { max-width: 100%; }
.num, .tab-num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
::selection { background: var(--accent-20); }
@keyframes dp-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes dp-fly-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes dp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes dp-spin { to { transform: rotate(360deg); } }
/* barra de rolagem fina (body continua sendo o scroll container da página) */
body, .dp-menu, .dp-modal-corpo, .ep-rolagem, .dp-tabela.rolavel, .dp-modal-abas { scrollbar-width: thin; scrollbar-color: #C9CFDB transparent; }
body::-webkit-scrollbar, .dp-menu::-webkit-scrollbar, .dp-modal-corpo::-webkit-scrollbar, .ep-rolagem::-webkit-scrollbar, .dp-tabela.rolavel::-webkit-scrollbar { width: 9px; height: 9px; }
body::-webkit-scrollbar-thumb, .dp-menu::-webkit-scrollbar-thumb, .dp-modal-corpo::-webkit-scrollbar-thumb, .ep-rolagem::-webkit-scrollbar-thumb, .dp-tabela.rolavel::-webkit-scrollbar-thumb { background: #C9CFDB; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
body::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ */
/* Ícones (Lucide)                                                     */
/* ------------------------------------------------------------------ */
.ic, [data-lucide] { width: 16px; height: 16px; stroke-width: 1.75; flex: none; vertical-align: middle; }
.ic-14 { width: 14px; height: 14px; } .ic-18 { width: 18px; height: 18px; } .ic-20 { width: 20px; height: 20px; } .ic-24 { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ */
/* Casca: sidebar branca (acordeão / rail) + topbar de vidro           */
/* ------------------------------------------------------------------ */
.dp-app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.dp-sidebar { position: sticky; top: 0; height: 100vh; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 30; }
.dp-marca { display: flex; align-items: center; justify-content: flex-start; gap: 10px; height: var(--topbar-h); padding: 0 var(--space-4); border-bottom: 1px solid var(--border); flex: none; color: var(--fg-1); }
.dp-marca-img { height: 22px; width: auto; display: block; }
.dp-logo { width: 36px; height: 36px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--cyan-400), var(--cyan-500)); color: #fff; display: none; place-items: center; font-weight: 800; font-size: 20px; letter-spacing: -.04em; flex: none; box-shadow: var(--glow-accent-sm); }
.dp-marca.sem-imagem .dp-logo { display: grid; }
.dp-marca-nome { font-size: 13.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.dp-marca-sub { font-size: 10px; color: var(--fg-3); letter-spacing: .06em; text-transform: uppercase; }
.dp-menu { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: 2px; }
.dp-nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: var(--pad-nav); border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--fg-2); font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer; position: relative; white-space: nowrap; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.dp-nav-btn .ic { width: 20px; height: 20px; }
.dp-nav-btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dp-nav-btn .seta { width: 16px; height: 16px; opacity: .7; transition: transform var(--dur-2) var(--ease-out); }
.dp-nav-btn:hover { background: var(--accent-14); color: var(--accent); }
.dp-nav-btn.ativo { background: var(--accent-22); color: var(--accent); border-color: var(--accent-45); box-shadow: var(--glow-accent-sm); }
.dp-nav-grupo.aberto > .dp-nav-btn .seta { transform: rotate(90deg); }
.dp-nav-sub { overflow: hidden; max-height: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 2px; transition: max-height var(--dur-3) var(--ease-out), padding var(--dur-3) var(--ease-out); }
.dp-nav-grupo.aberto > .dp-nav-sub { max-height: 640px; padding: 4px 0 6px 4px; }
.dp-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: var(--pad-nav-item); border-radius: var(--radius-sm); color: var(--fg-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--dur-1), color var(--dur-1); }
.dp-nav-item .pt { width: 5px; height: 5px; border-radius: 999px; background: var(--fg-3); flex: none; }
.dp-nav-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dp-nav-item:hover { background: var(--accent-12); color: var(--fg-1); }
.dp-nav-item.ativo { background: var(--accent-20); color: var(--accent); font-weight: 600; }
.dp-nav-item.ativo .pt { background: var(--accent); }
.dp-menu-badge { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--warn); color: #fff; font-size: 10.5px; font-weight: 700; flex: none; }
.dp-sidebar-rodape { border-top: 1px solid var(--border); padding: var(--space-2); flex: none; display: flex; flex-direction: column; gap: 2px; }
.dp-nav-mini { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); color: var(--fg-3); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background var(--dur-1), color var(--dur-1); }
.dp-nav-mini:hover { background: var(--surface-3); color: var(--fg-1); }
.dp-nav-mini .ic { width: 18px; height: 18px; }
/* rail (menu recolhido: só ícones; subitens abrem por clique via DP.menu) */
@media (min-width: 881px) {
  html.recolhido .dp-app { grid-template-columns: var(--rail-w) 1fr; }
  html.recolhido .dp-marca { justify-content: center; padding: 0; }
  html.recolhido .dp-marca-img, html.recolhido .dp-marca-texto { display: none; }
  html.recolhido .dp-logo { display: grid; }
  html.recolhido .dp-nav-btn { flex-direction: column; gap: 4px; padding: 8px 2px; justify-content: center; text-align: center; }
  html.recolhido .dp-nav-btn > span { flex: none; width: 100%; font-size: 9.5px; font-weight: 600; line-height: 1.1; text-align: center; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
  html.recolhido .dp-nav-btn .seta, html.recolhido .dp-nav-sub, html.recolhido .dp-nav-mini span { display: none; }
  html.recolhido .dp-nav-btn .dp-menu-badge { position: absolute; top: 4px; right: 6px; }
  html.recolhido .dp-nav-mini { justify-content: center; padding: 10px 0; }
}

.dp-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.dp-topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.dp-crumb { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dp-crumb .acima { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--fg-3); white-space: nowrap; }
.dp-titulo { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-subtitulo { display: none; }
.dp-topbar-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.dp-busca { display: flex; align-items: center; gap: 8px; background: var(--field-bg); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 0 12px; height: var(--h-busca); color: var(--fg-3); font-size: 13px; min-width: 0; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.dp-busca:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.dp-busca input { border: 0; background: transparent; outline: 0; flex: 1; min-width: 0; color: var(--fg-1); font-size: 13px; }
.dp-busca input::placeholder { color: var(--fg-3); }
.dp-busca .ic { width: 16px; height: 16px; color: var(--fg-3); }
.dp-busca kbd { font-family: inherit; font-size: 10px; font-weight: 600; color: var(--fg-3); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; line-height: 1.3; }
.dp-topbar .dp-busca { flex: 1; max-width: 400px; height: var(--h-ctl); border-radius: var(--radius-pill); padding: 0 14px; margin-left: var(--space-3); }
.dp-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ok); white-space: nowrap; }
.dp-status .pt { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); box-shadow: var(--glow-green); }
.dp-status .pt.pulsa { animation: dp-pulse 1.6s ease-in-out infinite; }
.dp-status.off { color: var(--fg-3); }
.dp-status.off .pt { background: var(--fg-3); box-shadow: none; }
/* Empresa ativa: botão na topbar, abre o menu de troca (dp.js › trocar-empresa). */
.dp-empresa { height: var(--h-ctl); padding: 0 8px 0 10px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: inherit; color: var(--fg-1); text-align: left; transition: background var(--dur-1), border-color var(--dur-1); }
.dp-empresa:hover { background: var(--surface-3); border-color: #C9CFDB; }
.dp-empresa .ic { color: var(--accent); flex: none; width: 17px; height: 17px; }
.dp-empresa .seta { color: var(--fg-3); width: 14px; height: 14px; }
.dp-empresa .corpo { display: flex; flex-direction: column; line-height: 1.15; }
.dp-empresa-nome { font-size: 12px; font-weight: 600; white-space: nowrap; }
.dp-empresa-cnpj { font-size: 10.5px; color: var(--fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-empresa.vazia { border-color: var(--warn); color: var(--warn); }
.dp-empresa.vazia .ic { color: var(--warn); }
.dp-ic-btn { width: var(--h-ctl); height: var(--h-ctl); border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; display: grid; place-items: center; position: relative; cursor: pointer; color: var(--fg-2); flex: none; transition: background var(--dur-1), color var(--dur-1); }
.dp-ic-btn:hover { background: var(--surface-3); color: var(--fg-1); }
.dp-ic-btn .ic { width: 19px; height: 19px; }
.dp-ic-btn .ponto { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 999px; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }
.dp-usuario { display: flex; align-items: center; gap: 8px; padding: 3px 6px 3px 3px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; cursor: pointer; font-family: inherit; color: var(--fg-1); text-align: left; transition: background var(--dur-1); max-width: 240px; }
.dp-usuario:hover { background: var(--surface-3); }
.dp-usuario .dp-avatar, .dp-avatar.usuario { width: 32px; height: 32px; font-size: 11.5px; font-weight: 800; background: linear-gradient(135deg, var(--cyan-400), #15C26E); color: var(--navy-950); }
.dp-usuario .corpo { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.dp-usuario-nome { font-size: 12px; font-weight: 600; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-usuario-perfil { font-size: 10px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-usuario .seta { width: 15px; height: 15px; color: var(--fg-3); }
.dp-conteudo { flex: 1; padding: var(--space-5) var(--space-5) var(--space-7); animation: dp-fade-up var(--dur-2) ease-out; display: flex; flex-direction: column; gap: var(--gap-pagina); min-width: 0; }
.dp-conteudo.estreito { max-width: 1280px; width: 100%; margin: 0 auto; }
.dp-pilha { display: flex; flex-direction: column; gap: var(--gap-pagina); min-width: 0; }
.dp-hamburger { display: none; }
.dp-scrim { display: none; }

/* ------------------------------------------------------------------ */
/* Cabeçalho de página, cartões, KPIs, seções                          */
/* ------------------------------------------------------------------ */
.dp-pagina-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dp-pagina-cab h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.dp-pagina-cab .sub { margin-top: 3px; color: var(--fg-2); font-size: 12.5px; }
.dp-pagina-cab .sub .dp-selo + .dp-selo { margin-left: 6px; }
.dp-pagina-cab .acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dp-pagina-cab .dp-btn.primario, .dp-btn.brilho { box-shadow: var(--glow-accent-sm); }
.dp-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--pad-card); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dp-card.sem-pad { padding: 0; overflow: clip; gap: 0; }   /* clip, não hidden: hidden viraria o scrollport do cabeçalho sticky */
.dp-card.ativa, .dp-card.selecionado { border-color: var(--accent-45); background: var(--accent-8); }
.dp-card-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dp-card-cab.borda { padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface-3); min-height: 42px; }
.dp-card-titulo { font-size: 13px; font-weight: 700; white-space: nowrap; }
.dp-card-sub { display: none; }
.dp-card-rodape { padding: 6px 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--fg-2); background: var(--surface-3); min-height: 38px; }
.dp-card-rodape .dp-nota { display: none; }
.dp-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.dp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); }
.dp-kpi { position: relative; padding: var(--pad-kpi); border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow-1); cursor: default; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dp-kpi > .ic { position: absolute; top: 12px; right: 14px; width: 18px; height: 18px; color: var(--accent); }
.dp-kpi .dp-rotulo { padding-right: 26px; overflow: hidden; text-overflow: ellipsis; }
.dp-kpi.ok > .ic { color: var(--ok); } .dp-kpi.atencao > .ic { color: var(--warn); } .dp-kpi.erro > .ic { color: var(--danger); } .dp-kpi.violeta > .ic { color: var(--violet); }
.dp-kpi.link { cursor: pointer; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.dp-kpi.link:hover { border-color: var(--accent-45); }
.dp-kpi-valor { font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.dp-kpi-nota { font-size: 11px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-soft { padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--border-soft); }
.dp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dp-lado { display: grid; grid-template-columns: 1fr 340px; gap: 12px; align-items: start; }
.dp-lado.estreito { grid-template-columns: 1fr 300px; }
.dp-lado.largo { grid-template-columns: 1fr 420px; }
.dp-lado-esq { grid-template-columns: 320px 1fr; }
.dp-sticky { position: sticky; top: calc(var(--topbar-h) + 14px); }

/* cor semântica */
.c-ok { color: var(--ok) !important; } .c-atencao { color: var(--warn) !important; } .c-erro { color: var(--danger) !important; } .c-azul { color: var(--accent) !important; }
.c-apagado { color: var(--fg-3) !important; } .c-texto2 { color: var(--fg-2) !important; } .c-texto3 { color: var(--fg-2) !important; } .c-texto { color: var(--fg-1) !important; }

/* ------------------------------------------------------------------ */
/* Botões                                                              */
/* ------------------------------------------------------------------ */
.dp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: var(--pad-btn); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-1); font-size: 13px; font-weight: 600; letter-spacing: -.005em; line-height: 1.25; cursor: pointer; white-space: nowrap; user-select: none; transition: background var(--dur-1) var(--ease-out), color var(--dur-1), border-color var(--dur-1), transform var(--dur-1), box-shadow var(--dur-1); }
.dp-btn:hover { background: #FCFCFE; border-color: #C9CFDB; }
.dp-btn:active { transform: scale(.97); }
.dp-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.dp-btn:disabled, .dp-btn.desabilitado { opacity: .5; cursor: not-allowed; pointer-events: none; }
.dp-btn .ic { width: 16px; height: 16px; }
.dp-btn.primario { background: var(--accent); border-color: transparent; color: var(--fg-on-accent); }
.dp-btn.primario:hover { background: var(--accent-hover); }
.dp-btn.primario:active { background: var(--accent-press); }
.dp-btn.escuro { background: var(--navy-900); border-color: transparent; color: #fff; }
.dp-btn.escuro:hover { background: var(--navy-800); }
.dp-btn.ok { background: var(--ok); border-color: transparent; color: #fff; }
.dp-btn.ok:hover { background: #166534; }
.dp-btn.perigo { background: var(--surface-2); border-color: var(--danger-35); color: var(--danger); }
.dp-btn.perigo:hover { background: var(--danger-12); }
.dp-btn.perigo.cheio { background: var(--danger); border-color: transparent; color: #fff; }
.dp-btn.perigo.cheio:hover { background: var(--danger-2); }
.dp-btn.contorno { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.dp-btn.contorno:hover { background: var(--accent-8); }
.dp-btn.fantasma { border-color: transparent; background: transparent; color: var(--fg-2); }
.dp-btn.fantasma:hover { background: var(--surface-3); color: var(--fg-1); }
.dp-btn.p { padding: var(--pad-btn-p); font-size: 12px; border-radius: var(--radius-sm); gap: 5px; }
.dp-btn.p .ic { width: 14px; height: 14px; }
.dp-btn.g { padding: 13px 22px; font-size: 15px; font-weight: 700; border-radius: var(--radius-md); }
.dp-btn.g .ic { width: 18px; height: 18px; }
.dp-btn.bloco { width: 100%; }
.dp-btn.icone { padding: 0; width: 30px; height: 30px; }
.dp-btn.icone.p { width: 28px; height: 28px; }
.dp-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dp-acoes.direita { justify-content: flex-end; }
.dp-acoes.entre { justify-content: space-between; }
.dp-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dp-toolbar .dp-busca { flex: 1; min-width: 200px; max-width: 360px; }
.dp-toolbar .fim { margin-left: auto; }
/* formulário de filtros em linha: campos lado a lado, ações no fim; no
   celular vira grade de 2 colunas (.largo ocupa a linha) com ações à direita */
.dp-filtros-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.dp-filtros-linha .dp-campo { min-width: 120px; }
.dp-filtros-linha .dp-campo.largo { min-width: 240px; }
.dp-filtros-linha .dp-campo.cresce { flex: 1; }
.dp-filtros-linha .dp-check { align-self: center; margin-top: 14px; }
.dp-filtros-linha .dp-acoes { align-self: flex-end; margin-left: auto; flex-wrap: nowrap; }
.dp-btn .n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; }
/* filtros aplicados (chips removíveis) */
.dp-filtros-ativos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dp-filtro { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 10px; border-radius: var(--radius-pill); background: var(--accent-12); border: 1px solid var(--accent-25); color: var(--accent); font-size: 11.5px; font-weight: 500; line-height: 1.3; }
.dp-filtro b { font-weight: 700; }
.dp-filtro button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--accent); display: grid; place-items: center; cursor: pointer; }
.dp-filtro button:hover { background: var(--accent); color: #fff; }
.dp-filtro button .ic { width: 12px; height: 12px; }
.dp-filtro.limpar { background: transparent; border-color: transparent; color: var(--fg-2); cursor: pointer; padding: 3px 8px; font-family: inherit; }
.dp-filtro.limpar:hover { color: var(--danger); }
.dp-por-pagina { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }
.dp-por-pagina .dp-select { width: auto; padding-right: 24px; }

/* ------------------------------------------------------------------ */
/* Chips (filtro segmentado), selos, marcações                          */
/* ------------------------------------------------------------------ */
.dp-chips { display: inline-flex; gap: 2px; background: var(--surface-3); border-radius: var(--radius-pill); padding: 3px; flex-wrap: wrap; }
.dp-chip { display: inline-flex; align-items: center; gap: 5px; padding: var(--pad-chip); border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--fg-2); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.3; transition: background var(--dur-1), color var(--dur-1), box-shadow var(--dur-1); }
.dp-chip:hover { color: var(--fg-1); }
.dp-chip.ativo { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1); }
.dp-chip.p { padding: 4px 10px; font-size: 11.5px; }
.dp-chip .n { color: var(--fg-3); font-weight: 500; }
.dp-chip.ativo .n { color: var(--accent); opacity: .75; }
.dp-selo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; background: var(--surface-3); color: var(--fg-2); width: fit-content; }
.dp-selo.ok { background: var(--ok-14); color: var(--ok); }
.dp-selo.atencao { background: var(--warn-14); color: var(--warn); }
.dp-selo.erro { background: var(--danger-14); color: var(--danger); }
.dp-selo.azul { background: var(--accent-14); color: var(--accent); }
.dp-selo.navy { background: var(--violet-14); color: var(--violet); }
.dp-selo.p { padding: 2px 8px; font-size: 10.5px; }
.dp-selo .pt { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.dp-selo .pt.pulsa { animation: dp-pulse 1.6s ease-in-out infinite; }
.dp-selo .ic { width: 13px; height: 13px; }
.dp-tag { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: var(--radius-sm); background: var(--surface-3); font-size: 11px; font-weight: 600; color: var(--fg-2); }
.dp-marc { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: var(--surface-3); border: 1px solid var(--border-soft); color: var(--fg-2); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all var(--dur-1); }
.dp-marc:hover { border-color: var(--accent-35); }
.dp-marc.escritorio { background: var(--accent-12); border-color: var(--accent-35); color: var(--accent-hover); }
.dp-marc.desconsiderada { background: var(--surface-3); color: var(--fg-3); text-decoration: line-through; }
.dp-marc.erro { background: var(--danger-12); border-color: var(--danger-35); color: var(--danger); }
.dp-marc.pendente { background: var(--warn-14); border-color: var(--warn-25); color: var(--warn); }
.dp-marc.vazio { background: transparent; border-style: dashed; color: var(--apagado-2); }
.dp-marc.selecionada { outline: 2px solid var(--accent); outline-offset: 1px; }
.dp-marc .ic { width: 11px; height: 11px; }

/* ------------------------------------------------------------------ */
/* Formulários                                                         */
/* ------------------------------------------------------------------ */
.dp-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dp-campo label, .dp-label { font-size: 12px; font-weight: 600; color: var(--fg-2); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.req, .dp-campo label .req { color: var(--danger); font-weight: 700; }
.dp-campo .ajuda { display: none; }
.dp-campo .erro-msg { font-size: 11px; color: var(--danger); }
.dp-campo .dica { font-size: 11px; color: var(--fg-3); white-space: normal; }
.dp-input, .dp-select, .dp-textarea { width: 100%; padding: var(--pad-input); border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--field-bg); font-family: var(--font-sans); font-size: 13px; line-height: 1.4; color: var(--fg-1); outline: 0; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.dp-input::placeholder, .dp-textarea::placeholder { color: var(--fg-3); }
.dp-input:focus, .dp-select:focus, .dp-textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
.dp-input:disabled, .dp-select:disabled, .dp-input[readonly] { background: var(--surface-3); color: var(--fg-3); }
.dp-input.p, .dp-select.p { padding: 5px 8px; font-size: 12px; border-radius: var(--radius-sm); }
.dp-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393A0B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
.dp-select.p { background-position: right 8px center; padding-right: 26px; }
.dp-textarea { min-height: 70px; resize: vertical; line-height: 1.45; }
.dp-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-form); align-content: start; }
.dp-form.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-form.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dp-form.doze { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.dp-form .span-2 { grid-column: span 2; } .dp-form .span-3 { grid-column: span 3; } .dp-form .span-4 { grid-column: span 4; }
.dp-form .span-5 { grid-column: span 5; } .dp-form .span-6 { grid-column: span 6; } .dp-form .span-8 { grid-column: span 8; } .dp-form .span-todos { grid-column: 1 / -1; }
.dp-form > .dp-check, .dp-form > .dp-toggle { align-self: end; margin-bottom: 6px; }
.dp-campo > .dp-check, .dp-campo > .dp-toggle { margin-top: auto; padding-bottom: 6px; gap: 10px; white-space: normal; font-weight: 500; color: var(--fg-2); }
.dp-input-grupo { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--field-bg); overflow: hidden; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.dp-input-grupo:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.dp-input-grupo .dp-input { border: 0; box-shadow: none; border-radius: 0; }
.dp-input-grupo .sufixo, .dp-input-grupo .prefixo { padding: 0 12px; color: var(--fg-3); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.dp-input-grupo .prefixo { padding-right: 0; }
.dp-check { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--fg-2); cursor: pointer; user-select: none; }
.dp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.dp-check .caixa { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--apagado-2); background: var(--field-bg); display: grid; place-items: center; flex: none; transition: all var(--dur-1); }
.dp-check .caixa .ic { width: 11px; height: 11px; color: #fff; opacity: 0; stroke-width: 3; }
.dp-check input:checked + .caixa { background: var(--accent); border-color: var(--accent); }
.dp-check input:checked + .caixa .ic { opacity: 1; }
.dp-check input:focus-visible + .caixa { box-shadow: var(--ring); }
.dp-check.radio .caixa { border-radius: 999px; }
.dp-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 12.5px; color: var(--fg-2); }
.dp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.dp-toggle .trilho { width: 42px; height: 24px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); padding: 2px; display: flex; transition: background var(--dur-2), border-color var(--dur-2); flex: none; }
.dp-toggle .trilho::after { content: ''; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--dur-2) var(--ease-out); }
.dp-toggle input:checked + .trilho { background: var(--accent); border-color: transparent; }
.dp-toggle input:checked + .trilho::after { transform: translateX(18px); }
.dp-toggle input:focus-visible + .trilho { box-shadow: var(--ring); }
.dp-toggle.p .trilho { width: 32px; height: 18px; padding: 1px; } .dp-toggle.p .trilho::after { width: 14px; height: 14px; } .dp-toggle.p input:checked + .trilho::after { transform: translateX(14px); }
.dp-segmento { display: inline-flex; background: var(--surface-3); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.dp-segmento > * { padding: 6px 14px; border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--fg-2); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--dur-1), color var(--dur-1); }
.dp-segmento > .ativo { background: var(--accent); color: var(--fg-on-accent); }
/* abas (páginas, janela) e passos da ficha compartilham o visual do design */
.dp-abas, .dp-passos, .dp-modal-abas { display: flex; gap: 2px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dp-aba, .dp-passo { padding: 10px 13px 8px; font-size: 12.5px; font-weight: 600; color: var(--fg-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: none; border-top: 0; border-left: 0; border-right: 0; border-radius: 0; transition: color var(--dur-1), border-color var(--dur-1); }
.dp-aba:hover, .dp-passo:hover { color: var(--fg-1); }
.dp-aba.ativa, .dp-passo.ativo { color: var(--accent); border-bottom-color: var(--accent); }
.dp-passo.feito { color: var(--ok); }
.dp-aba .ic, .dp-passo .ic { width: 15px; height: 15px; }
.dp-aba .n { padding: 1px 7px; border-radius: 999px; background: var(--surface-3); font-size: 11px; color: var(--fg-2); }
.dp-aba.ativa .n { background: var(--accent-14); color: var(--accent); }
.dp-modal-corpo > .dp-passos { position: sticky; top: calc(-1 * var(--space-5)); margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0; padding: 0 var(--space-4); background: var(--surface); z-index: 3; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.dp-range { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--pct, 50%), var(--border) var(--pct, 50%)); outline: 0; }
.dp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 999px; background: #fff; border: 2px solid var(--accent); cursor: pointer; }

/* ------------------------------------------------------------------ */
/* Tabelas (grid, como no design) e lista de linhas                    */
/* ------------------------------------------------------------------ */
.dp-tabela { display: flex; flex-direction: column; min-width: 0; }
.dp-tabela .cab, .dp-tabela .linha { display: grid; grid-template-columns: var(--cols, 1fr); gap: 10px; align-items: center; padding: var(--pad-td); }
.dp-tabela .linha > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-tabela .linha > .row, .dp-tabela .linha > .dp-pessoa, .dp-tabela .linha > .marcs, .dp-tabela .linha > .dp-linha-acoes { overflow: visible; }
.dp-tabela .cab { padding: var(--pad-th); border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 11px; white-space: nowrap; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); position: sticky; top: var(--topbar-h); z-index: 5; }
.dp-tabela.sem-sticky .cab { position: static; }
.dp-tabela .linha { border-bottom: 1px solid var(--border-soft); font-size: var(--fs-td); min-height: var(--linha-min); color: var(--fg-1); transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.dp-tabela .linha:hover { background: var(--accent-11); box-shadow: inset 3px 0 0 var(--accent); }
.dp-tabela .linha.clicavel { cursor: pointer; }
.dp-tabela .linha.selecionada { background: var(--accent-12); box-shadow: inset 3px 0 0 var(--accent); }
.dp-tabela .linha.inativa { opacity: .55; }
.dp-tabela .linha.erro { background: var(--danger-8); }
.dp-tabela .linha.fechada { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(20, 39, 74, .03) 8px 16px); }
.dp-tabela .linha:last-child { border-bottom: 0; }
.dp-tabela .dir { text-align: right; justify-self: end; }
.dp-tabela .centro { text-align: center; justify-self: center; }
.dp-tabela .forte { font-weight: 600; }
.dp-tabela .sub { font-size: 10.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-tabela .corta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dp-tabela.compacta .linha { padding: 5px 12px; min-height: 32px; }
.dp-tabela.compacta .cab { padding: 6px 12px; }
.dp-tabela .mais { width: 28px; height: 28px; padding: 6px; border-radius: var(--radius-sm); color: var(--fg-3); cursor: pointer; justify-self: end; transition: background var(--dur-1), color var(--dur-1); }
.dp-tabela .mais:hover { background: var(--surface-3); color: var(--accent); }
.dp-linha-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.dp-linha-btn { width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: background var(--dur-1), color var(--dur-1); }
.dp-linha-btn:hover { background: var(--surface-3); color: var(--accent); }
.dp-linha-btn .ic { width: 15px; height: 15px; }
.dp-pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dp-pessoa .corpo { min-width: 0; }
.dp-pessoa .nome { font-size: var(--fs-td); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-pessoa .sub { font-size: 10.5px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-avatar { width: var(--avatar); height: var(--avatar); border-radius: 999px; background: var(--accent-16); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--accent); flex: none; overflow: hidden; }
.dp-avatar.quad { border-radius: var(--radius-sm); }
.dp-avatar.violeta { background: var(--violet-20); color: var(--violet); }
.dp-avatar.cinza { background: var(--surface-3); color: var(--fg-2); }
.dp-avatar.p { width: 28px; height: 28px; font-size: 10.5px; } .dp-avatar.g { width: 42px; height: 42px; font-size: 14px; } .dp-avatar.gg { width: 64px; height: 64px; font-size: 20px; }
.dp-avatar.foto { background: repeating-linear-gradient(135deg, #E4E7EF 0 8px, #DADFEA 8px 16px); font: 500 8px var(--font-mono); color: var(--fg-3); }
.dp-avatar.azul { background: var(--accent-16); color: var(--accent); }
.dp-paginacao { display: flex; gap: 4px; align-items: center; }
.dp-paginacao span { min-width: 28px; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--fg-2); cursor: pointer; user-select: none; transition: background var(--dur-1), color var(--dur-1); }
.dp-paginacao span:hover { background: var(--surface-3); color: var(--fg-1); }
.dp-paginacao span.ativa { background: var(--accent-14); color: var(--accent); cursor: default; }
.dp-paginacao span.desabilitada { opacity: .4; cursor: default; pointer-events: none; }
.dp-paginacao span.reticencias { cursor: default; pointer-events: none; color: var(--fg-3); }
.dp-lista { display: flex; flex-direction: column; gap: 5px; }
.dp-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-soft); transition: border-color var(--dur-1), background var(--dur-1); }
.dp-item.suave { background: var(--surface-3); }
.dp-item.clicavel { cursor: pointer; }
.dp-item.clicavel:hover { border-color: var(--accent-35); }
.dp-item.selecionado, .dp-item.ativa { background: var(--accent-12); border-color: var(--accent-35); }
.dp-item.inativo { opacity: .6; }
.dp-item .corpo { flex: 1; min-width: 0; }
.dp-item .t { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-item .s { font-size: 10.5px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-item .barra { width: 4px; height: 24px; border-radius: 999px; flex: none; }
.dp-kv { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 12.5px; }
.dp-kv .k { color: var(--fg-2); white-space: nowrap; } .dp-kv .v { font-weight: 600; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-sep { height: 1px; background: var(--border); margin: 8px 0; }
.dp-sep.tracejada { background: none; border-top: 1px dashed var(--apagado-2); }

/* ------------------------------------------------------------------ */
/* Espelho: grade de dias                                              */
/* ------------------------------------------------------------------ */
.dp-espelho .linha, .dp-espelho .cab { --cols: 64px 2.2fr 68px 68px 68px 68px 68px 1.5fr 30px; gap: 8px; }
.dp-espelho .linha { padding: 4px 14px; min-height: 34px; }
.dp-espelho .cab { padding: 6px 14px; }
.dp-espelho .dia { font-size: 12.5px; font-weight: 600; }
.dp-espelho .dia .sem { font-size: 10.5px; color: var(--fg-3); font-weight: 500; }
.dp-espelho .linha.dsr, .dp-espelho .linha.folga { background: var(--surface-3); color: var(--fg-2); }
.dp-espelho .linha.feriado { background: rgba(220, 47, 34, .03); }
.dp-espelho .linha.aviso { background: rgba(180, 83, 9, .05); }
.dp-espelho .linha.erro { background: rgba(220, 47, 34, .05); }
.dp-espelho .marcs { display: flex; gap: 5px; flex-wrap: wrap; }
.dp-espelho .tot { font-size: 12.5px; }
.dp-espelho .tot.zero { color: var(--apagado-2); }

/* ------------------------------------------------------------------ */
/* Gráfico de barras simples, progresso, trilha                        */
/* ------------------------------------------------------------------ */
.dp-barras { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
.dp-barras .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.dp-barras .b i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: var(--accent-16); transition: height var(--dur-2); }
.dp-barras .b.alta i { background: var(--accent); } .dp-barras .b.media i { background: var(--accent-45); }
.dp-barras .b span { font-size: 10.5px; color: var(--fg-3); }
.dp-progresso { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.dp-progresso i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.dp-progresso.ok i { background: var(--ok); } .dp-progresso.atencao i { background: var(--warn); }
.dp-trilha { display: flex; flex-direction: column; gap: 7px; }
.dp-trilha .ev { display: flex; gap: 10px; }
.dp-trilha .ev .pt { width: 7px; height: 7px; border-radius: 999px; margin-top: 6px; flex: none; background: var(--fg-3); }
.dp-trilha .ev .t { font-size: 12.5px; font-weight: 500; } .dp-trilha .ev .s { font-size: 11px; color: var(--fg-3); }

/* ------------------------------------------------------------------ */
/* Avisos, vazio, carregando                                           */
/* ------------------------------------------------------------------ */
.dp-aviso { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-md); font-size: 12.5px; line-height: 1.4; background: var(--accent-8); border: 1px solid var(--accent-25); color: var(--fg-2); }
.dp-aviso .ic { width: 16px; height: 16px; color: var(--accent); }
.dp-aviso b { color: var(--fg-1); }
.dp-aviso.ok { background: var(--ok-8); border-color: var(--ok-25); color: var(--ok); }
.dp-aviso.ok .ic { color: var(--ok); }
.dp-aviso.atencao { background: var(--warn-8); border-color: var(--warn-25); color: var(--warn); }
.dp-aviso.atencao .ic { color: var(--warn); }
.dp-aviso.erro { background: var(--danger-8); border-color: var(--danger-35); color: var(--danger); }
.dp-aviso.erro .ic { color: var(--danger); }
.dp-aviso.azul { color: var(--fg-2); }
.dp-vazio { padding: var(--space-7) 16px; text-align: center; color: var(--fg-3); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dp-vazio .ic { width: 32px; height: 32px; color: var(--fg-3); }
.dp-vazio h3 { font-size: 16px; color: var(--fg-1); }
.dp-vazio p { color: var(--fg-2); max-width: 420px; }
.dp-nota { display: none; }
.dp-nota.mostrar { display: block; font-size: 11px; color: var(--fg-3); }
.dp-placeholder { border-radius: var(--radius-md); background: var(--surface-2); display: grid; place-items: center; border: 1.5px dashed var(--border); font: 500 10px var(--font-mono); color: var(--fg-3); }
.dp-qr { width: 72px; height: 72px; border-radius: 6px; background: repeating-conic-gradient(var(--navy-900) 0 25%, var(--surface-3) 0 50%) 0 0/12px 12px; flex: none; }
.dp-qr-real { width: 180px; height: 180px; padding: 10px; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-md); color: #0B1220; flex: none; }
.dp-qr-real svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }

/* ------------------------------------------------------------------ */
/* Janela modal (centralizada, barra de título, corpo rolável,         */
/* rodapé fixo; arrasta pela barra e maximiza — dp.js › DP.modal)      */
/* ------------------------------------------------------------------ */
.dp-modal-fundo { position: fixed; inset: 0; z-index: 100; background: rgba(7, 12, 26, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px; animation: dp-fade-up var(--dur-1) ease-out; }
.dp-modal { width: 640px; max-width: 100%; max-height: calc(100vh - 40px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); display: flex; flex-direction: column; overflow: hidden; }
.dp-modal.p { width: 440px; } .dp-modal.g { width: 880px; } .dp-modal.gg { width: 1040px; }
.dp-modal.arrastada { position: fixed; margin: 0; }
.dp-modal.maximizada { position: fixed; inset: 8px; left: 8px !important; top: 8px !important; width: auto !important; max-width: none; height: auto; max-height: none; }
.dp-modal-cab { height: 48px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); cursor: grab; user-select: none; }
.dp-modal.p .dp-modal-cab, .dp-modal.maximizada .dp-modal-cab, .dp-modal.fixa .dp-modal-cab { cursor: default; }
.dp-modal-cab.arrastando { cursor: grabbing; }
.dp-modal-ic { width: 28px; height: 28px; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; background: var(--accent-16); color: var(--accent); }
.dp-modal-ic .ic { width: 17px; height: 17px; }
.dp-modal-ic.perigo { background: var(--danger-12); color: var(--danger); }
.dp-modal-cab .cresce { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.dp-modal-cab h3 { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-modal-cab .sub { font-size: 11px; color: var(--fg-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-modal-cab .acoes, .dp-modal-cab [data-cab-acoes] { display: flex; align-items: center; gap: 6px; flex: none; }
.dp-modal-btn, .dp-fechar { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 0; background: transparent; display: grid; place-items: center; color: var(--fg-2); cursor: pointer; flex: none; transition: background var(--dur-1), color var(--dur-1); }
.dp-modal-btn:hover { background: var(--surface-3); color: var(--fg-1); }
.dp-fechar:hover { background: var(--danger); color: #fff; }
.dp-modal-btn .ic { width: 15px; height: 15px; }
.dp-fechar .ic { width: 18px; height: 18px; }
.dp-modal-abas { padding: 0 var(--space-4); background: var(--surface); flex: none; flex-wrap: nowrap; overflow-x: auto; }
.dp-modal-corpo { padding: var(--space-5); overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.dp-modal-rodape { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: var(--surface); flex: none; }
.dp-modal-rodape .esq { margin-right: auto; font-size: 12px; color: var(--fg-3); display: flex; align-items: center; gap: 6px; }
.dp-modal-rodape .esq .ic { width: 14px; height: 14px; }
.dp-modal-rodape .dp-btn.primario { min-width: 120px; box-shadow: var(--glow-accent-sm); }
/* Ficha do funcionário: checklist compacto no rodapé (funcionario_ficha.js). */
.dp-ficha-check { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dp-ficha-check span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fg-3); white-space: nowrap; cursor: default; }
.dp-ficha-check span.ok { color: var(--ok); font-weight: 600; }
.dp-ficha-check .ic { width: 13px; height: 13px; }

/* barra inferior das janelas minimizadas (dp.js › DP.barraJanelas) */
.dp-taskbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: none; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); box-shadow: var(--shadow-2); overflow-x: auto; }
.dp-taskbar.mostrar { display: flex; }
.dp-taskbar-rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); flex: none; padding-right: 4px; white-space: nowrap; }
.dp-taskbar-rotulo .ic { width: 14px; height: 14px; }
.dp-taskbar-itens { display: flex; align-items: center; gap: 8px; }
.dp-task { display: flex; align-items: center; gap: 8px; flex: none; padding: 6px 8px 6px 12px; border-radius: var(--radius-md); max-width: 260px; background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-1); cursor: pointer; font-size: 12.5px; font-weight: 600; transition: background var(--dur-1), border-color var(--dur-1); }
.dp-task:hover { background: var(--accent-12); border-color: var(--accent-35); color: var(--accent); }
.dp-task .ic { width: 15px; height: 15px; }
.dp-task > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-task-x { width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-3); display: grid; place-items: center; cursor: pointer; flex: none; }
.dp-task-x:hover { background: var(--danger); color: #fff; }
.dp-task-x .ic { width: 13px; height: 13px; }

/* menu suspenso (linha ⋯, usuário, empresa, flyout do rail) */
.dp-menu-sus { position: absolute; z-index: 120; /* acima da modal (100): o menu "Mais" da ficha abre dentro dela */ min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: 6px; display: flex; flex-direction: column; animation: dp-fly-in var(--dur-2) var(--ease-out); }
.dp-menu-sus .op { display: flex; align-items: center; gap: 10px; padding: var(--pad-op); border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500; color: var(--fg-1); cursor: pointer; transition: background var(--dur-1); }
.dp-menu-sus .op:hover { background: var(--surface-3); }
.dp-menu-sus .op.perigo { color: var(--danger); }
.dp-menu-sus .op.perigo:hover { background: var(--danger-12); }
.dp-menu-sus .op.desabilitado { opacity: .45; cursor: default; }
.dp-menu-sus .op.ativo { color: var(--accent); background: var(--accent-12); font-weight: 600; }
.dp-menu-sus .op .ic { width: 17px; height: 17px; color: var(--fg-2); }
.dp-menu-sus .op.perigo .ic { color: var(--danger); }
.dp-menu-sus .sep { height: 1px; background: var(--border-soft); margin: 6px 4px; }
.dp-menu-sus .cab { padding: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.dp-menu-sus.flyout .cab { color: var(--accent); }
.dp-menu-sus .cab-usuario { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; min-width: 0; }
.dp-menu-sus .cab-usuario .t { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-menu-sus .cab-usuario .s { font-size: 11px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* toast */
.dp-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.dp-toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); color: var(--fg-1); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-3); animation: dp-fade-up var(--dur-2) ease-out; max-width: 380px; }
.dp-toast .ic { width: 18px; height: 18px; color: var(--accent); }
.dp-toast.ok .ic { color: var(--ok); } .dp-toast.erro .ic { color: var(--danger); } .dp-toast.atencao .ic { color: var(--warn); }

/* ------------------------------------------------------------------ */
/* Login (painel navy à esquerda, cartão à direita)                    */
/* ------------------------------------------------------------------ */
.dp-login { min-height: 100vh; display: flex; background: var(--bg); }
.dp-login-lado { flex: 1 1 0; position: relative; overflow: hidden; background: var(--navy-900); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-8) var(--space-7); min-width: 0; }
.dp-login-lado .glow { position: absolute; width: 460px; height: 460px; border-radius: 50%; filter: blur(10px); background: radial-gradient(circle, rgba(22, 190, 242, .28), transparent 65%); pointer-events: none; }
.dp-login-lado .glow.a { top: -120px; right: -80px; }
.dp-login-lado .glow.b { bottom: -160px; left: -120px; background: radial-gradient(circle, rgba(57, 255, 139, .2), transparent 65%); }
.dp-login-lado > * { position: relative; }
.dp-login-marca { display: flex; align-items: center; gap: 12px; }
.dp-login-marca img { height: 26px; width: auto; filter: brightness(0) invert(1); }
.dp-login-marca .dp-marca-sub { color: rgba(241, 245, 255, .55); }
.dp-login-texto { max-width: 440px; }
.dp-login-texto h1 { font-size: 34px; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.dp-login-texto p { margin-top: 16px; font-size: 15px; color: rgba(241, 245, 255, .65); line-height: 1.6; }
.dp-login-pontos { display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.dp-login-pontos span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(241, 245, 255, .8); }
.dp-login-pontos .ic { width: 18px; height: 18px; color: var(--cyan-400); }
.dp-login-lado .rodape { font-size: 12px; color: rgba(241, 245, 255, .45); }
.dp-login-form { width: 460px; max-width: 100%; flex: none; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: var(--surface); }
.dp-login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: var(--space-5); }
.dp-login-card h2 { font-size: 22px; font-weight: 700; }
.dp-login-card .sub { margin-top: 6px; font-size: 13px; color: var(--fg-2); }
.dp-login-card .dp-campo { gap: 7px; }
.dp-campo-ic { display: flex; align-items: center; gap: 8px; background: var(--field-bg); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 0 12px; height: 46px; transition: border-color var(--dur-1), box-shadow var(--dur-1); }
.dp-campo-ic:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.dp-campo-ic > .ic { width: 17px; height: 17px; color: var(--fg-3); }
.dp-campo-ic input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--fg-1); font-size: 14px; }
.dp-campo-ic input::placeholder { color: var(--fg-3); }
.dp-campo-ic input:disabled { color: var(--fg-3); }
.dp-campo-ic .olho { width: 28px; height: 28px; margin-right: -6px; border: 0; background: none; color: var(--fg-3); cursor: pointer; display: grid; place-items: center; border-radius: var(--radius-sm); flex: none; }
.dp-campo-ic .olho:hover { color: var(--fg-1); background: var(--surface-3); }
.dp-campo-ic .olho .ic { width: 17px; height: 17px; }
.dp-login-card .dp-btn.g { height: 48px; box-shadow: var(--glow-accent-sm); }
.dp-login-link { color: var(--accent); font-size: 13px; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.dp-login-rodape { text-align: center; font-size: 13px; color: var(--fg-3); }
.dp-login-nota { font-size: 11.5px; color: var(--fg-3); line-height: 1.5; }

/* ------------------------------------------------------------------ */
/* Utilitários                                                         */
/* ------------------------------------------------------------------ */
.row { display: flex; align-items: center; gap: 10px; } .row.entre { justify-content: space-between; } .row.topo { align-items: flex-start; } .row.quebra { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; } .col.g6 { gap: 6px; } .col.g14 { gap: 14px; } .col.g20 { gap: 20px; }
.cresce { flex: 1; min-width: 0; } .fim { margin-left: auto; } .topo-auto { margin-top: auto; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 14px; } .mt-4 { margin-top: 20px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 14px; }
.t-11 { font-size: 11px; } .t-12 { font-size: 12px; } .t-13 { font-size: 13px; } .t-14 { font-size: 14px; } .t-16 { font-size: 16px; } .t-18 { font-size: 18px; } .t-22 { font-size: 22px; } .t-28 { font-size: 28px; }
.f-500 { font-weight: 500; } .f-600 { font-weight: 600; } .f-700 { font-weight: 700; } .f-800 { font-weight: 800; }
.centro { text-align: center; } .direita { text-align: right; }
.corta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.w-100 { width: 100%; } .oculto { display: none !important; }
.clicavel { cursor: pointer; }
.g-8 { gap: 8px; } .g-14 { gap: 14px; }

/* ------------------------------------------------------------------ */
/* Responsivo                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .dp-lado, .dp-lado.estreito, .dp-lado.largo { grid-template-columns: 1fr; }
  .dp-lado-esq { grid-template-columns: 1fr; }
  .dp-lado[style], .dp-lado-esq[style] { grid-template-columns: 1fr !important; }   /* mestre-detalhe com colunas inline (300px 1fr) */
  .dp-sticky { position: static; }
  .dp-form.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-form.doze { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dp-form.doze .span-8 { grid-column: span 6; }
}
@media (max-width: 880px) {
  .dp-app { grid-template-columns: 1fr; }
  .dp-sidebar { position: fixed; z-index: 90; left: 0; top: 0; width: min(300px, 86vw); transform: translateX(-100%); transition: transform var(--dur-3) var(--ease-out); }
  .dp-sidebar.aberta { transform: none; box-shadow: var(--shadow-3); }
  .dp-scrim { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(7, 12, 26, .55); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
  .dp-scrim.aberta { opacity: 1; pointer-events: auto; }
  .dp-hamburger { display: grid; }
  .dp-recolher { display: none; }
  .dp-topbar { padding: 0 12px; gap: 8px; }
  .dp-topbar .dp-busca, .dp-status { display: none; }
  .dp-usuario .corpo, .dp-usuario .seta { display: none; }
  .dp-empresa .dp-empresa-cnpj { display: none; }
  .dp-grid-3, .dp-grid-4 { grid-template-columns: 1fr 1fr; }
  .dp-login-lado { display: none; } .dp-login-form { width: 100%; }
  .dp-conteudo { padding: 14px 14px 32px; }
  .dp-tabela.rolavel { overflow-x: auto; }
  .dp-tabela.rolavel .cab { position: static; }
  .dp-tabela.rolavel .cab, .dp-tabela.rolavel .linha { min-width: 760px; }
  .dp-tabela.rolavel .cab > :first-child, .dp-tabela.rolavel .linha > :first-child { position: sticky; left: 0; z-index: 2; background: var(--surface-2); margin-left: -12px; padding-left: 12px; box-shadow: 1px 0 0 var(--border-soft); }
  .dp-tabela.rolavel .cab > :first-child { z-index: 3; }
  .dp-tabela.rolavel .linha:hover > :first-child { background: #E5F1F7; }
  .dp-tabela.rolavel .linha.selecionada > :first-child { background: #E4F1F7; }
  .dp-abas, .dp-passos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dp-abas::-webkit-scrollbar, .dp-passos::-webkit-scrollbar { display: none; }
  .dp-card-cab { flex-wrap: wrap; }
  /* espelho: a grade rola na horizontal com a coluna da data presa; na
     vertical acompanha a página (sem caixa própria de rolagem) */
  .ep-rolagem { max-height: none; min-height: 0; }
  .ep-tabela { min-width: 760px; }
  .ep-tabela th:first-child, .ep-tabela td:first-child { position: sticky; left: 0; z-index: 2; background-color: var(--surface); box-shadow: 1px 0 0 var(--border-soft); }
  .ep-tabela thead th:first-child, .ep-tabela tfoot td:first-child { z-index: 4; }
  .ep-tabela thead th:first-child { background: var(--surface-2); }
  .ep-tabela tbody tr.ep-linha--aberta > td:first-child { background-color: #FAF3EE; }   /* opaco: o âmbar translúcido deixaria ver o que rola por baixo */
  .ep-ficha { flex-wrap: wrap; gap: 6px 14px; }
  .ep-ficha .ep-ident { white-space: normal; flex-wrap: wrap; overflow: visible; row-gap: 2px; }
  .ep-ficha .ep-ident > * { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .ep-ficha .ep-numeros { flex-wrap: wrap; gap: 6px 14px; }
}
@media (max-width: 600px) {
  .dp-kpis, .dp-grid-2, .dp-grid-3, .dp-grid-4, .dp-form, .dp-form.tres, .dp-form.quatro, .dp-form.doze { grid-template-columns: 1fr; }
  .dp-form .span-2, .dp-form .span-3, .dp-form .span-4, .dp-form .span-5, .dp-form .span-6, .dp-form .span-8 { grid-column: span 1; }
  .dp-pagina-cab h1 { font-size: 20px; }
  .dp-pagina-cab { flex-direction: column; align-items: stretch; gap: 10px; }
  .dp-pagina-cab .acoes { justify-content: flex-end; }
  .dp-pagina-cab .acoes .dp-select { max-width: 100%; }
  .dp-empresa .corpo { display: none; }
  .dp-empresa { padding: 0 6px 0 8px; }
  .dp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dp-kpi { padding: 10px 12px; }
  .dp-kpi-valor { font-size: 20px; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
  .dp-barras { gap: 3px; }
  .dp-barras .b span { font-size: 9px; }
  .dp-kpi > .ic { top: 10px; right: 10px; width: 16px; height: 16px; }
  .dp-toolbar .dp-busca { flex: 1 1 100%; max-width: none; }
  .dp-toolbar .dp-chips { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dp-toolbar .dp-chips::-webkit-scrollbar { display: none; }
  .dp-toolbar .dp-select { flex: 1 1 auto; }
  .dp-filtros-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; align-items: end; }
  .dp-filtros-linha .dp-campo, .dp-filtros-linha .dp-campo.largo { min-width: 0; }
  .dp-filtros-linha .dp-campo.largo, .dp-filtros-linha .dp-campo.cresce, .dp-filtros-linha .dp-check, .dp-filtros-linha .dp-acoes { grid-column: 1 / -1; }
  .dp-filtros-linha .dp-check { margin-top: 2px; }
  .dp-filtros-linha .dp-acoes { justify-content: flex-end; flex-wrap: wrap; margin-left: 0; }
  .dp-card-rodape { flex-wrap: wrap; row-gap: 6px; }
  .dp-card-cab > .dp-acoes { width: 100%; justify-content: flex-end; }
  .dp-por-pagina { display: none; }
  .dp-modal-fundo { padding: 0; }
  .dp-modal, .dp-modal.g, .dp-modal.gg { height: 100%; max-height: 100%; border-radius: 0; border: 0; }
  .dp-modal.p { height: auto; align-self: end; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .dp-modal-btn { display: none; }
  .dp-modal-cab { cursor: default; }
  .dp-modal-corpo { padding: var(--space-4); }
  .dp-modal-rodape { padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
  .dp-modal-rodape .esq { flex-basis: 100%; }
  .dp-conteudo { padding: 12px 12px 32px; }
  .dp-topbar { gap: 6px; }
  .dp-empresa-nome { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
  .dp-ficha-check { display: none; }
  .dp-modal, .dp-modal.p, .dp-modal.g, .dp-modal.gg { width: 100%; }
  .dp-modal-fundo { padding: 8px; }
}

/* ------------------------------------------------------------------ */
/* Espelho de ponto — grade-planilha (portada do DynneAgro)            */
/* Célula de marcação recebe foco, anda com setas, abre para digitar,  */
/* seleciona em bloco (arrasto, shift, ctrl) e abre menu no botão      */
/* direito. Tudo inset para a linha não tremer a cada seta.            */
/* ------------------------------------------------------------------ */
.ep-ficha { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 8px; border-top: 1px solid var(--border-soft); font-size: 12px; }
.ep-ficha .ep-ident { display: flex; align-items: baseline; gap: 12px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ep-ficha .ep-nome { font-size: 13.5px; font-weight: 700; }
.ep-ficha .sub { color: var(--fg-2); font-size: 11.5px; }
.ep-ficha .ep-numeros { flex: none; display: flex; gap: 14px; }
.ep-ficha .ep-resumo { color: var(--fg-2); white-space: nowrap; }
.ep-ficha .ep-resumo strong { color: var(--fg-1); }
.ep-ficha .ep-resumo strong.ep-falta-num { color: var(--danger); }
.ep-ficha .ep-resumo strong.ep-zero { color: var(--apagado-2); font-weight: 400; }
.ep-quadro { overflow: clip; }
.ep-rolagem { overflow: auto; max-height: calc(100vh - 250px); min-height: 240px; }
.ep-tabela { width: 100%; min-width: 980px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.ep-tabela thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 6px 4px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); text-align: center; white-space: nowrap; }
.ep-tabela thead th:first-child, .ep-tabela thead th:nth-child(2) { text-align: left; }
.ep-tabela tbody td { padding: 0 3px; font-size: 11.5px; line-height: 1.7; white-space: nowrap; border-bottom: 1px solid var(--border-soft); height: 26px; }
.ep-tabela tbody tr:nth-child(even) > td { background-color: var(--surface-2); }
.ep-tabela tbody tr.ep-linha--aberta > td { background-color: rgba(180, 83, 9, .07); }
.ep-tabela tbody tr.ep-linha--repouso > td { background-color: var(--surface-3); color: var(--fg-2); }
.ep-tabela tbody tr.ep-linha--fechada > td { background-image: repeating-linear-gradient(135deg, rgba(81, 96, 124, .10) 0 2px, transparent 2px 7px); }
.ep-tabela tbody tr.ep-linha--futuro > td { color: var(--apagado-2); }
.ep-tabela tfoot td { position: sticky; bottom: 0; z-index: 3; padding: 5px 3px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #E1F1F8; border-top: 2px solid var(--accent-45); }
.ep-tabela td.num, .ep-tabela th.num { text-align: center; }
.ep-tabela td.dir { text-align: right; }
.ep-tabela td.ep-data { font-weight: 600; }
.ep-tabela td.ep-diasem { color: var(--fg-3); font-size: 11px; }
.ep-tabela td.ep-falta { color: var(--danger); font-weight: 600; }
.ep-tabela td.ep-zero { color: var(--apagado-2); font-weight: 400; }
.ep-tabela td.ep-vazio { text-align: center; color: var(--fg-3); padding: 28px 12px; }
.ep-cel { text-align: center; padding: 0 2px !important; position: relative; border-radius: 3px; user-select: none; }
.ep-cel:not(.ep-cel--travado) { cursor: cell; box-shadow: inset 0 0 0 1px var(--border-soft); }
.ep-cel:not(.ep-cel--travado):hover { box-shadow: inset 0 0 0 1px var(--accent-45); }
.ep-cel:not(.ep-cel--travado).ep-cel--sel, .ep-cel:not(.ep-cel--travado).ep-cel--sel:hover { background-color: var(--accent-12) !important; box-shadow: inset 0 0 0 1px var(--accent-45); }
.ep-cel:not(.ep-cel--travado):focus, .ep-cel:not(.ep-cel--travado).ep-cel--sel:focus { outline: 0; background-color: var(--accent-12) !important; box-shadow: inset 0 0 0 2px var(--accent); }
.ep-arrastando, .ep-arrastando * { user-select: none !important; cursor: cell !important; }
.ep-cel--livre { color: var(--apagado-2); }
.ep-cel--novo { color: var(--accent); font-weight: 700; }
.ep-cel--travado { color: var(--apagado-2); cursor: default; }
.ep-cel--fechado { cursor: default; }
.ep-arrastando .ep-cel--fechado { cursor: default !important; }
.ep-cel .ep-esc { color: var(--accent-hover); font-weight: 700; margin-left: 1px; font-size: 10px; vertical-align: top; }
.ep-cel .ep-pend { color: var(--warn); font-size: 10px; vertical-align: top; margin-left: 1px; }
.ep-edit { width: 100%; border: 0; background: transparent; padding: 0; text-align: center; font: inherit; color: inherit; user-select: text; }
.ep-edit:focus { outline: 0; }
.ep-tipo { display: inline-flex; align-items: center; gap: 4px; }
.ep-lock { width: 12px; height: 12px; color: var(--fg-2); cursor: help; }
.ep-aviso-ic { width: 12px; height: 12px; color: var(--warn); cursor: help; }
.ep-menu { position: fixed; z-index: 1080; min-width: 240px; padding: 5px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-3); font-size: 12.5px; }
.ep-menu .ep-menu-topo { padding: 3px 14px 7px; margin-bottom: 3px; color: var(--fg-3); font-size: 11px; border-bottom: 1px solid var(--border-soft); }
.ep-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 14px; border: 0; background: none; text-align: left; color: var(--fg-1); font-size: 12.5px; }
.ep-menu button:hover:not(:disabled) { background: var(--accent-12); }
.ep-menu button:disabled { color: var(--apagado-2); cursor: default; }
.ep-menu button .ic { width: 14px; height: 14px; color: var(--fg-2); }
.ep-menu button:disabled .ic { color: var(--apagado-2); }
.ep-menu .ep-menu-risco { height: 1px; margin: 4px 0; background: var(--border-soft); }

/* ------------------------------------------------------------------ */
/* Complementos                                                        */
/* ------------------------------------------------------------------ */
/* overlay de carregamento: só aparece depois de 300 ms de espera */
.dp-carregando { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; background: rgba(255, 255, 255, .35); backdrop-filter: blur(1px); }
.dp-carregando.mostrar { display: grid; }
.dp-carregando .roda { width: 34px; height: 34px; border-radius: 999px; border: 3px solid var(--border); border-top-color: var(--accent); animation: dp-spin .8s linear infinite; }
/* leitor de tela */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* balão de ajuda (?) em CSS puro */
.dp-ajuda { position: relative; display: inline-flex; align-items: center; color: var(--fg-3); cursor: help; margin-left: 4px; vertical-align: middle; }
.dp-ajuda .ic { width: 13px; height: 13px; }
.dp-ajuda::after { content: attr(data-ajuda); position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; width: max-content; max-width: 260px; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--navy-900); color: #fff; font-size: 11.5px; line-height: 1.4; font-weight: 400; white-space: normal; box-shadow: var(--shadow-3); opacity: 0; pointer-events: none; transition: opacity var(--dur-1); }
.dp-ajuda.ajuda-esq::after { left: auto; right: 0; }
.dp-ajuda:hover::after, .dp-ajuda:focus::after { opacity: 1; }
/* cabeçalho ordenável */
.dp-tabela .cab [data-ordem] { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 3px; }
.dp-tabela .cab [data-ordem]:hover { color: var(--fg-1); }
.dp-tabela .cab [data-ordem].asc::after { content: '↑'; font-size: 10px; }
.dp-tabela .cab [data-ordem].desc::after { content: '↓'; font-size: 10px; }
/* campo inválido */
.dp-input.invalido, .dp-select.invalido, .dp-textarea.invalido { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-14); }