/* ============================================================
   VETOR ENGINE — DESIGN SYSTEM v2.0
   ------------------------------------------------------------
   Arquivo único de estilos globais.
   Não duplicar regras nas páginas — use as classes daqui.
   ============================================================ */

/* -----------------------------------------------------------
   1. DESIGN TOKENS (CSS Variables)
   ----------------------------------------------------------- */
:root {
    /* Brand colors */
    --ve-primary: #3b82f6;
    --ve-primary-dark: #2563eb;
    --ve-primary-light: #60a5fa;
    --ve-primary-50: #eff6ff;
    --ve-primary-100: #dbeafe;

    --ve-secondary: #8b5cf6;
    --ve-secondary-dark: #7c3aed;
    --ve-secondary-light: #a78bfa;

    --ve-accent-warning: #f59e0b;
    --ve-accent-danger: #ef4444;
    --ve-accent-success: #10b981;
    --ve-accent-purple: #8b5cf6;
    --ve-accent-cyan: #06b6d4;

    /* Light theme surfaces */
    --ve-bg: #fafafa;
    --ve-surface: #ffffff;
    --ve-surface-elevated: #ffffff;
    --ve-border: #e5e5e5;
    --ve-border-subtle: #f0f0f0;
    --ve-text: #0a0a0a;
    --ve-text-muted: #525252;
    --ve-text-faint: #a3a3a3;

    /* Radius scale */
    --ve-radius-xs: 6px;
    --ve-radius-sm: 10px;
    --ve-radius-md: 14px;
    --ve-radius-lg: 18px;
    --ve-radius-xl: 22px;
    --ve-radius-2xl: 28px;

    /* Shadow scale (soft, modern) */
    --ve-shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
    --ve-shadow-sm: 0 2px 8px rgba(10, 10, 10, 0.05), 0 1px 2px rgba(10, 10, 10, 0.03);
    --ve-shadow-md: 0 4px 14px rgba(10, 10, 10, 0.06), 0 2px 4px rgba(10, 10, 10, 0.04);
    --ve-shadow-lg: 0 12px 32px -8px rgba(10, 10, 10, 0.12), 0 4px 12px rgba(10, 10, 10, 0.06);
    --ve-shadow-xl: 0 24px 48px -12px rgba(10, 10, 10, 0.18), 0 8px 16px rgba(10, 10, 10, 0.08);
    --ve-shadow-primary: 0 8px 24px -6px rgba(59, 130, 246, 0.35);
    --ve-shadow-primary-lg: 0 14px 36px -8px rgba(59, 130, 246, 0.45);

    /* Motion */
    --ve-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ve-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --ve-dur-fast: 150ms;
    --ve-dur: 250ms;
    --ve-dur-slow: 400ms;
}

html.dark {
    --ve-bg: #0a0a0a;
    --ve-surface: #171717;
    --ve-surface-elevated: #1f1f1f;
    --ve-border: #262626;
    --ve-border-subtle: #1a1a1a;
    --ve-text: #ffffff;
    --ve-text-muted: #a3a3a3;
    --ve-text-faint: #525252;

    --ve-primary-50: rgba(59, 130, 246, 0.08);
    --ve-primary-100: rgba(59, 130, 246, 0.16);

    --ve-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ve-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --ve-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35);
    --ve-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);
    --ve-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.85), 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* Dropdowns nativos (<select>) em dark mode: força o browser a usar o tema escuro.
   Corrige o dropdown de status do cliente e demais selects com fundo branco ilegível. */
html.dark select,
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"] {
    color-scheme: dark;
}

html.dark select option {
    background-color: #1f1f1f;
    color: #ffffff;
}

html.dark select option:checked,
html.dark select option:hover {
    background-color: #262626;
    color: #ffffff;
}

/* -----------------------------------------------------------
   2. BASE / RESET
   ----------------------------------------------------------- */
*, *::before, *::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    font-variant-ligatures: common-ligatures;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Selection */
::selection {
    background: var(--ve-primary);
    color: #ffffff;
}

/* -----------------------------------------------------------
   3. SCROLLBAR (custom, subtle)
   ----------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--ve-border);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background var(--ve-dur) var(--ve-ease);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ve-text-faint);
    background-clip: padding-box;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #333;
    background-clip: padding-box;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #555;
    background-clip: padding-box;
}

/* Utility: hide scrollbar but keep scrollable */
.no-scrollbar::-webkit-scrollbar,
.tabs-scroll::-webkit-scrollbar {
    display: none;
}

.no-scrollbar,
.tabs-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

/* -----------------------------------------------------------
   4. ANIMATIONS (keyframes + utility classes)
   ----------------------------------------------------------- */
@keyframes ve-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ve-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ve-slide-down {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes ve-slide-left {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes ve-scale-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes ve-pulse-slow {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

@keyframes ve-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@keyframes ve-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.animate-fadeIn      { animation: ve-fade-in   var(--ve-dur-slow) var(--ve-ease) both; }
.animate-slideUp     { animation: ve-slide-up  var(--ve-dur-slow) var(--ve-ease) both; }
.animate-slide-up    { animation: ve-slide-up  var(--ve-dur-slow) var(--ve-ease) both; }
.animate-slide-down  { animation: ve-slide-down var(--ve-dur-slow) var(--ve-ease) both; }
.animate-slide-left  { animation: ve-slide-left var(--ve-dur-slow) var(--ve-ease) both; }
.animate-scaleIn     { animation: ve-scale-in  var(--ve-dur) var(--ve-ease) both; }
.animate-pulse-slow  { animation: ve-pulse-slow 4s ease-in-out infinite; }
.animate-float       { animation: ve-float 6s ease-in-out infinite; }

.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-500 { animation-delay: 500ms; }

/* Theme transition */
.theme-transition,
.theme-transition * {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-duration: var(--ve-dur);
    transition-timing-function: var(--ve-ease);
}

/* -----------------------------------------------------------
   5. GLASS / BLUR EFFECTS
   ----------------------------------------------------------- */
.glass-effect {
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

html.dark .glass-card {
    background: rgba(23, 23, 23, 0.7);
    border-color: rgba(255, 255, 255, 0.06);
}

/* -----------------------------------------------------------
   6. BUTTON SYSTEM (.ve-btn)
   ----------------------------------------------------------- */
.ve-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: var(--ve-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--ve-dur-fast) var(--ve-ease),
                box-shadow var(--ve-dur) var(--ve-ease),
                background-color var(--ve-dur) var(--ve-ease),
                border-color var(--ve-dur) var(--ve-ease),
                color var(--ve-dur) var(--ve-ease);
    white-space: nowrap;
    user-select: none;
}

.ve-btn:active { transform: translateY(1px); }
.ve-btn:focus-visible {
    outline: 2px solid var(--ve-primary);
    outline-offset: 2px;
}

.ve-btn-primary {
    background: var(--ve-primary);
    color: #ffffff;
    box-shadow: var(--ve-shadow-primary);
}
.ve-btn-primary:hover {
    background: var(--ve-primary-dark);
    box-shadow: var(--ve-shadow-primary-lg);
    transform: translateY(-1px);
}

.ve-btn-secondary {
    background: var(--ve-surface);
    color: var(--ve-text);
    border-color: var(--ve-border);
    box-shadow: var(--ve-shadow-xs);
}
.ve-btn-secondary:hover {
    background: var(--ve-bg);
    border-color: var(--ve-primary);
    color: var(--ve-primary);
    transform: translateY(-1px);
}

.ve-btn-ghost {
    background: transparent;
    color: var(--ve-text-muted);
}
.ve-btn-ghost:hover {
    background: var(--ve-primary-50);
    color: var(--ve-primary);
}

.ve-btn-danger {
    background: var(--ve-accent-danger);
    color: #ffffff;
}
.ve-btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

/* Button "sweep" effect (legacy from login) */
.btn-sweep {
    position: relative;
    overflow: hidden;
}
.btn-sweep::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.6s var(--ve-ease);
}
.btn-sweep:hover::after { left: 100%; }

/* -----------------------------------------------------------
   7. CARD SYSTEM (.ve-card, .ve-stat-card)
   ----------------------------------------------------------- */
.ve-card {
    background: var(--ve-surface);
    border: 1px solid var(--ve-border);
    border-radius: var(--ve-radius-xl);
    box-shadow: var(--ve-shadow-sm);
    transition: transform var(--ve-dur) var(--ve-ease),
                box-shadow var(--ve-dur) var(--ve-ease),
                border-color var(--ve-dur) var(--ve-ease);
}

.ve-card-hoverable:hover {
    transform: translateY(-2px);
    box-shadow: var(--ve-shadow-lg);
    border-color: var(--ve-primary-light);
}

.ve-stat-card {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
}

.ve-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, var(--ve-primary-50));
    opacity: 0;
    transition: opacity var(--ve-dur) var(--ve-ease);
    pointer-events: none;
}

.ve-stat-card:hover::before { opacity: 1; }

.stat-card { transition: all var(--ve-dur) var(--ve-ease); }
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ve-shadow-lg);
}

/* -----------------------------------------------------------
   8. INPUT SYSTEM (.ve-input)
   ----------------------------------------------------------- */
.ve-input {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--ve-text);
    background: var(--ve-surface);
    border: 1.5px solid var(--ve-border);
    border-radius: var(--ve-radius-md);
    transition: border-color var(--ve-dur) var(--ve-ease),
                box-shadow var(--ve-dur) var(--ve-ease),
                background-color var(--ve-dur) var(--ve-ease);
    outline: none;
}

.ve-input::placeholder { color: var(--ve-text-faint); }

.ve-input:focus {
    border-color: var(--ve-primary);
    box-shadow: 0 0 0 4px var(--ve-primary-50);
}

.ve-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Floating label group used in login */
.input-group { position: relative; }

.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label {
    transform: translateY(-1.75rem) scale(0.85);
    color: var(--ve-primary);
}

/* -----------------------------------------------------------
   9. BADGES
   ----------------------------------------------------------- */
.ve-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--ve-radius-sm);
    border: 1px solid transparent;
}

.ve-badge-primary { background: var(--ve-primary-50);            color: var(--ve-primary);          border-color: var(--ve-primary-100); }
.ve-badge-success { background: rgba(16, 185, 129, 0.1);         color: var(--ve-accent-success);   border-color: rgba(16, 185, 129, 0.2); }
.ve-badge-warning { background: rgba(245, 158, 11, 0.1);         color: var(--ve-accent-warning);   border-color: rgba(245, 158, 11, 0.2); }
.ve-badge-danger  { background: rgba(239, 68, 68, 0.1);          color: var(--ve-accent-danger);    border-color: rgba(239, 68, 68, 0.2); }
.ve-badge-neutral { background: var(--ve-border-subtle);         color: var(--ve-text-muted);       border-color: var(--ve-border); }

/* -----------------------------------------------------------
   10. LOADING / SKELETON
   ----------------------------------------------------------- */
.ve-skeleton {
    background: linear-gradient(90deg,
        var(--ve-border-subtle) 0%,
        var(--ve-border) 50%,
        var(--ve-border-subtle) 100%);
    background-size: 200% 100%;
    animation: ve-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--ve-radius-sm);
}

.ve-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--ve-border);
    border-top-color: var(--ve-primary);
    border-radius: 50%;
    animation: ve-spin 0.8s linear infinite;
}

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

/* -----------------------------------------------------------
   11. TOAST / NOTIFICATIONS
   ----------------------------------------------------------- */
.ve-toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.ve-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    min-width: 280px;
    max-width: 420px;
    background: var(--ve-surface-elevated);
    border: 1px solid var(--ve-border);
    border-left-width: 4px;
    border-radius: var(--ve-radius-md);
    box-shadow: var(--ve-shadow-lg);
    pointer-events: auto;
    animation: ve-slide-left var(--ve-dur) var(--ve-ease-out) both;
}

.ve-toast-success { border-left-color: var(--ve-accent-success); }
.ve-toast-error   { border-left-color: var(--ve-accent-danger); }
.ve-toast-warning { border-left-color: var(--ve-accent-warning); }
.ve-toast-info    { border-left-color: var(--ve-primary); }

/* -----------------------------------------------------------
   12. FOCUS RINGS (accessibility)
   ----------------------------------------------------------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ve-primary);
    outline-offset: 2px;
    border-radius: inherit;
}

/* Remove stock outline where we handle it ourselves */
button:focus,
a:focus {
    outline: none;
}

/* -----------------------------------------------------------
   13. TYPOGRAPHY HELPERS
   ----------------------------------------------------------- */
.ve-title {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--ve-text);
}

.ve-subtitle {
    font-size: 0.9375rem;
    color: var(--ve-text-muted);
    line-height: 1.5;
}

.ve-mono {
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------
   14. LEGACY COMPAT (garantir que nada quebre)
   ----------------------------------------------------------- */
.bg-primary-dark     { background-color: var(--ve-primary-dark) !important; }
.text-primary-dark   { color: var(--ve-primary-dark) !important; }
.hover\:bg-primary-dark:hover { background-color: var(--ve-primary-dark) !important; }
.hover\:text-primary-dark:hover { color: var(--ve-primary-dark) !important; }

/* Secondary (usada em clientes.php com gradient) */
.from-primary { --tw-gradient-from: var(--ve-primary) var(--tw-gradient-from-position); --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-secondary { --tw-gradient-to: var(--ve-secondary) var(--tw-gradient-to-position); }
.bg-secondary { background-color: var(--ve-secondary); }
.text-secondary { color: var(--ve-secondary); }

/* -----------------------------------------------------------
   15. COMMAND PALETTE (Ctrl+K)
   ----------------------------------------------------------- */
.ve-palette-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 18vh;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ve-dur) var(--ve-ease);
}

.ve-palette-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ve-palette {
    width: 95%;
    max-width: 640px;
    background: var(--ve-surface);
    border: 1px solid var(--ve-border);
    border-radius: var(--ve-radius-xl);
    box-shadow: var(--ve-shadow-xl);
    overflow: hidden;
    animation: ve-scale-in var(--ve-dur) var(--ve-ease) both;
}

.ve-palette-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ve-border);
}

.ve-palette-search .material-symbols-outlined {
    color: var(--ve-text-faint);
    font-size: 22px;
}

.ve-palette-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ve-text);
    font-family: inherit;
}

.ve-palette-search input::placeholder {
    color: var(--ve-text-faint);
}

.ve-palette-results {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
}

.ve-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: var(--ve-radius-md);
    cursor: pointer;
    color: var(--ve-text);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    transition: background var(--ve-dur-fast) var(--ve-ease);
}

.ve-palette-item .material-symbols-outlined {
    color: var(--ve-text-faint);
    font-size: 20px;
    transition: color var(--ve-dur-fast) var(--ve-ease);
}

.ve-palette-item.is-active,
.ve-palette-item:hover {
    background: var(--ve-primary-50);
}

.ve-palette-item.is-active .material-symbols-outlined,
.ve-palette-item:hover .material-symbols-outlined {
    color: var(--ve-primary);
}

.ve-palette-item.is-active {
    box-shadow: inset 0 0 0 1px var(--ve-primary-100);
}

.ve-palette-label {
    flex: 1;
}

.ve-palette-arrow {
    opacity: 0;
    transform: translateX(-4px);
    transition: all var(--ve-dur-fast) var(--ve-ease);
}

.ve-palette-item.is-active .ve-palette-arrow {
    opacity: 1;
    transform: translateX(0);
}

.ve-palette-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--ve-text-faint);
    font-size: 0.875rem;
}

.ve-palette-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border-top: 1px solid var(--ve-border);
    background: var(--ve-bg);
    font-size: 0.75rem;
    color: var(--ve-text-muted);
}

.ve-palette-footer span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* -----------------------------------------------------------
   16. KEYBOARD KEY VISUAL (kbd)
   ----------------------------------------------------------- */
.ve-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 6px;
    background: var(--ve-surface);
    border: 1px solid var(--ve-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ve-text-muted);
    line-height: 1;
}

/* -----------------------------------------------------------
   17. HELP OVERLAY (Shift+?)
   ----------------------------------------------------------- */
.ve-help-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ve-dur) var(--ve-ease);
}

.ve-help-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ve-help {
    width: 100%;
    max-width: 480px;
    background: var(--ve-surface);
    border: 1px solid var(--ve-border);
    border-radius: var(--ve-radius-xl);
    box-shadow: var(--ve-shadow-xl);
    overflow: hidden;
    animation: ve-scale-in var(--ve-dur) var(--ve-ease) both;
}

.ve-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ve-border);
}

.ve-help-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ve-text);
}

.ve-help-close {
    padding: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ve-text-muted);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ve-dur-fast) var(--ve-ease);
}

.ve-help-close:hover {
    background: var(--ve-border-subtle);
    color: var(--ve-text);
}

.ve-help-list {
    list-style: none;
    margin: 0;
    padding: 12px;
    max-height: 60vh;
    overflow-y: auto;
}

.ve-help-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: var(--ve-radius-md);
    font-size: 0.875rem;
    color: var(--ve-text);
}

.ve-help-list li:hover {
    background: var(--ve-bg);
}

.ve-help-list li .ve-kbd {
    min-width: 64px;
}

/* -----------------------------------------------------------
   18. FORM VALIDATION STATES
   ----------------------------------------------------------- */
.ve-input-error {
    border-color: var(--ve-accent-danger) !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
}

.ve-input-valid {
    border-color: var(--ve-accent-success) !important;
}

.ve-field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ve-accent-danger);
    animation: ve-slide-down var(--ve-dur) var(--ve-ease) both;
}

.ve-field-error::before {
    content: '⚠';
    font-size: 0.8rem;
}

/* -----------------------------------------------------------
   19. COMPACT FORM LAYOUT — Planilhas ATC / CTP / Ágio (aba Dados)
   ------------------------------------------------------------
   Reduz o espaço vertical da aba de preenchimento de dados
   para caber o formulário inteiro sem precisar rolar.
   Escopo: SOMENTE #tab-dados-atc / #tab-dados-ctp / #tab-dados-agio.
   Não altera abas de resultados/simulações nem lógica de JS.
   ----------------------------------------------------------- */

/* Espaço entre cards (space-y-8 = 2rem -> 1rem) */
#tab-dados-atc.space-y-8 > * + *,
#tab-dados-ctp.space-y-8 > * + *,
#tab-dados-agio.space-y-8 > * + * {
    margin-top: 1rem;
}

/* Padding interno dos cards (p-6 = 1.5rem -> 1rem) */
#tab-dados-atc .p-6,
#tab-dados-ctp .p-6,
#tab-dados-agio .p-6 {
    padding: 1rem;
}

/* Títulos de seção mais compactos (text-lg -> ~1rem) */
#tab-dados-atc h3.text-lg,
#tab-dados-ctp h3.text-lg,
#tab-dados-agio h3.text-lg {
    font-size: 1rem;
    line-height: 1.35;
}

/* Margens abaixo de títulos (mb-4 -> 0.625rem) */
#tab-dados-atc .mb-4,
#tab-dados-ctp .mb-4,
#tab-dados-agio .mb-4 {
    margin-bottom: 0.625rem;
}

/* Margens de blocos internos (mb-6 -> 0.875rem) */
#tab-dados-atc .mb-6,
#tab-dados-ctp .mb-6,
#tab-dados-agio .mb-6 {
    margin-bottom: 0.875rem;
}

/* Margens pequenas auxiliares (mb-3 -> 0.5rem) */
#tab-dados-atc .mb-3,
#tab-dados-ctp .mb-3,
#tab-dados-agio .mb-3 {
    margin-bottom: 0.5rem;
}

/* Margens superiores auxiliares (mt-4 -> 0.625rem) */
#tab-dados-atc .mt-4,
#tab-dados-ctp .mt-4,
#tab-dados-agio .mt-4 {
    margin-top: 0.625rem;
}

/* Divisores verticais (my-6 hr -> reduzidos) */
#tab-dados-atc hr.my-6,
#tab-dados-ctp hr.my-6,
#tab-dados-agio hr.my-6 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Gaps entre colunas do grid (gap-6 -> 0.875rem / gap-4 -> 0.75rem) */
#tab-dados-atc .gap-6,
#tab-dados-ctp .gap-6,
#tab-dados-agio .gap-6 {
    gap: 0.875rem;
}

#tab-dados-atc .gap-4,
#tab-dados-ctp .gap-4,
#tab-dados-agio .gap-4 {
    gap: 0.75rem;
}

/* Espaço entre label e input (space-y-2 -> 0.25rem) */
#tab-dados-atc .space-y-2 > * + *,
#tab-dados-ctp .space-y-2 > * + *,
#tab-dados-agio .space-y-2 > * + * {
    margin-top: 0.25rem;
}

/* Inputs e selects mais compactos verticalmente (py-2 -> 0.375rem) */
#tab-dados-atc input.py-2,
#tab-dados-ctp input.py-2,
#tab-dados-agio input.py-2,
#tab-dados-atc select.py-2,
#tab-dados-ctp select.py-2,
#tab-dados-agio select.py-2 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

/* Caixinhas de resultado calculado (p-4 em divs com rounded-lg + borda colorida) */
#tab-dados-atc [id^="G"].p-4,
#tab-dados-atc [id^="J"].p-4,
#tab-dados-ctp [id^="G"].p-4,
#tab-dados-agio [id^="G"].p-4,
#tab-dados-agio [id^="J"].p-4 {
    padding: 0.5rem 0.75rem;
}

/* Texto destacado de resultado (text-xl -> text-base) */
#tab-dados-atc [id^="G"].text-xl,
#tab-dados-atc [id^="J"].text-xl,
#tab-dados-ctp [id^="G"].text-xl,
#tab-dados-agio [id^="G"].text-xl,
#tab-dados-agio [id^="J"].text-xl {
    font-size: 1rem;
    line-height: 1.4;
}

/* Totais azuis (N7, N12 etc) — caixa de destaque compactada */
#tab-dados-atc .p-3.rounded-lg,
#tab-dados-ctp .p-3.rounded-lg,
#tab-dados-agio .p-3.rounded-lg {
    padding: 0.5rem 0.75rem;
}

/* Formulário de novo lead com margens reduzidas */
#tab-dados-atc #lead-form-container.mt-6,
#tab-dados-ctp #lead-form-container.mt-6,
#tab-dados-agio #lead-form-container.mt-6,
#tab-dados-atc #lead-summary-container.mt-6,
#tab-dados-ctp #lead-summary-container.mt-6,
#tab-dados-agio #lead-summary-container.mt-6 {
    margin-top: 0.75rem;
}

#tab-dados-atc #lead-form-container.pt-6,
#tab-dados-ctp #lead-form-container.pt-6,
#tab-dados-agio #lead-form-container.pt-6 {
    padding-top: 0.75rem;
}

/* Grid de proponentes dentro do lead-form (gap-8 -> gap-4) */
#tab-dados-atc #proponentes-grid.gap-8,
#tab-dados-ctp #proponentes-grid.gap-8,
#tab-dados-agio #proponentes-grid.gap-8 {
    gap: 1rem;
}

/* Rodapé do lead-form (mt-8 -> mt-4 + pt-6 -> pt-3) */
#tab-dados-atc #lead-form-container .mt-8,
#tab-dados-ctp #lead-form-container .mt-8,
#tab-dados-agio #lead-form-container .mt-8 {
    margin-top: 0.875rem;
}

#tab-dados-atc #lead-form-container .pt-6,
#tab-dados-ctp #lead-form-container .pt-6,
#tab-dados-agio #lead-form-container .pt-6 {
    padding-top: 0.75rem;
}

/* Sub-espaçamento space-y-4 dentro dos forms -> 0.5rem */
#tab-dados-atc .space-y-4 > * + *,
#tab-dados-ctp .space-y-4 > * + *,
#tab-dados-agio .space-y-4 > * + * {
    margin-top: 0.5rem;
}

/* space-y-8 interno (subcontainers) -> 1rem */
#tab-dados-atc .space-y-8 > * + *,
#tab-dados-ctp .space-y-8 > * + *,
#tab-dados-agio .space-y-8 > * + * {
    margin-top: 1rem;
}

/* (bloco 19.1/19.2 removido — novo design usa layout Tailwind estilo "Resumo") */