/* ═══════════════════════════════════════════════════════════════════════════
   Vendou — Sistema responsivo UNIVERSAL
   Aplica em todas as frentes (marketplace, vendou.php, frente de loja,
   admin, nicho, login). Base sólida que adensa em desktop, fica perfeito
   em mobile, considera iPhone notch e dispositivos dobráveis.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Reset & Box Model ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth;
       /* Reserva a barra de rolagem dos DOIS lados: conteúdo centralizado (margin:auto)
          fica REALMENTE no meio — sem o deslocamento de ~8px pra esquerda que a barra
          causava quando o espaço era reservado só na direita. */
       scrollbar-gutter: stable both-edges; }
/* Nunca deixa estourar a largura: qualquer elemento mais largo que a tela
   geraria overflow horizontal e faria o conteúdo centralizado parecer
   "deslocado pra esquerda". overflow-x:clip mata isso em todas as frentes
   (clip é mais confiável que hidden e não cria container de rolagem). */
html, body { overflow-x: clip; max-width: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; font: inherit; }
button[disabled] { cursor: not-allowed; }
a { text-decoration: none; color: inherit; }
input, button, textarea, select { font: inherit; color: inherit; }

/* ─── 2. Container fluido com adensamento ────────────────────────────── */
.vu-container {
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
    max-width: 1400px;
}
.vu-container--narrow { max-width: 900px; }
.vu-container--wide   { max-width: 1700px; }
.vu-container--full   { max-width: none; }

/* ─── 3. Tipografia fluida (clamp escala com viewport) ───────────────── */
:root {
    --vu-fs-xs:   clamp(.72rem, .68rem + .2vw, .82rem);
    --vu-fs-sm:   clamp(.82rem, .78rem + .2vw, .92rem);
    --vu-fs-base: clamp(.94rem, .9rem + .2vw, 1.02rem);
    --vu-fs-md:   clamp(1.05rem, 1rem + .25vw, 1.15rem);
    --vu-fs-lg:   clamp(1.2rem, 1.1rem + .5vw, 1.4rem);
    --vu-fs-xl:   clamp(1.4rem, 1.25rem + .8vw, 1.8rem);
    --vu-fs-2xl:  clamp(1.7rem, 1.4rem + 1.5vw, 2.4rem);
    --vu-fs-3xl:  clamp(2rem, 1.6rem + 2.2vw, 3.4rem);
    --vu-fs-hero: clamp(2.4rem, 1.8rem + 3vw, 4.4rem);

    --vu-sp-1: clamp(4px, 1vw, 8px);
    --vu-sp-2: clamp(8px, 1.5vw, 14px);
    --vu-sp-3: clamp(12px, 2vw, 20px);
    --vu-sp-4: clamp(16px, 3vw, 28px);
    --vu-sp-5: clamp(24px, 4vw, 40px);
    --vu-sp-6: clamp(32px, 5vw, 60px);
    --vu-sp-7: clamp(40px, 7vw, 90px);

    --vu-radius-sm: 8px;
    --vu-radius:    12px;
    --vu-radius-lg: 18px;
    --vu-radius-xl: 24px;

    --vu-shadow-sm: 0 1px 3px rgba(15,23,42,.08);
    --vu-shadow:    0 8px 24px -10px rgba(15,23,42,.18);
    --vu-shadow-lg: 0 22px 50px -20px rgba(15,23,42,.30);
}

/* ─── 4. Grids que adensam sozinhos ──────────────────────────────────── */
.vu-grid {
    display: grid;
    gap: var(--vu-sp-3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.vu-grid--compact    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.vu-grid--wide       { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.vu-grid--gallery    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.vu-grid--features   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Stack utilitário (Flexbox vertical com gap fluido) */
.vu-stack { display: flex; flex-direction: column; gap: var(--vu-sp-3); }
.vu-stack--tight { gap: var(--vu-sp-2); }
.vu-stack--loose { gap: var(--vu-sp-5); }

/* Cluster (inline com wrap automático) */
.vu-cluster { display: flex; flex-wrap: wrap; gap: var(--vu-sp-2); align-items: center; }

/* Sidebar layout — uma sidebar fixa, conteúdo flui */
.vu-sidebar { display: flex; flex-wrap: wrap; gap: var(--vu-sp-4); }
.vu-sidebar > :first-child { flex-basis: 280px; flex-grow: 1; }
.vu-sidebar > :last-child  { flex-basis: 0; flex-grow: 999; min-inline-size: min(100%, 50%); }

/* ─── 5. Tabelas responsivas (scroll horizontal, sem quebra) ─────────── */
.vu-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--vu-radius);
    box-shadow: var(--vu-shadow-sm);
    background: #fff;
}
.vu-table-wrap > table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}
.vu-table-wrap th, .vu-table-wrap td {
    padding: var(--vu-sp-2) var(--vu-sp-3);
    text-align: left;
    white-space: nowrap;
}
.vu-table-wrap th { background: #F8FAFC; font-weight: 700; font-size: var(--vu-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: #475569; }
.vu-table-wrap td { border-top: 1px solid #F1F5F9; font-size: var(--vu-fs-sm); }
@media (max-width: 640px) {
    .vu-table-wrap > table { font-size: var(--vu-fs-xs); }
    .vu-table-wrap th, .vu-table-wrap td { padding: 10px 12px; }
}

/* ─── 6. Forms acessíveis (touch, sem zoom iOS) ──────────────────────── */
.vu-field { display: flex; flex-direction: column; gap: 6px; }
.vu-field > label {
    font-size: var(--vu-fs-xs);
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vu-input,
.vu-field input[type="text"],
.vu-field input[type="email"],
.vu-field input[type="tel"],
.vu-field input[type="password"],
.vu-field input[type="search"],
.vu-field input[type="url"],
.vu-field input[type="number"],
.vu-field input[type="date"],
.vu-field input[type="datetime-local"],
.vu-field input[type="time"],
.vu-field select,
.vu-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #E2E8F0;
    border-radius: var(--vu-radius-sm);
    font-size: 16px; /* IMPORTANTE: evita zoom iOS */
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    min-height: 44px; /* touch target Apple HIG */
}
.vu-field input:focus, .vu-field select:focus, .vu-field textarea:focus,
.vu-input:focus {
    border-color: var(--vu-brand, #FF6B1A);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vu-brand, #FF6B1A) 18%, transparent);
}
.vu-field textarea { min-height: 100px; resize: vertical; }
.vu-field small.hint { color: #94A3B8; font-size: var(--vu-fs-xs); }

/* Botão touch-friendly */
.vu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    min-height: 44px;
    border-radius: var(--vu-radius);
    border: 0;
    font-weight: 700;
    font-size: var(--vu-fs-sm);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s;
    background: var(--vu-brand, #FF6B1A);
    color: #fff;
    text-decoration: none;
    line-height: 1;
}
.vu-btn:hover { transform: translateY(-1px); box-shadow: var(--vu-shadow); }
.vu-btn:active { transform: translateY(0); }
.vu-btn--ghost { background: transparent; color: var(--vu-brand, #FF6B1A); border: 1.5px solid currentColor; }
.vu-btn--ghost:hover { background: color-mix(in srgb, var(--vu-brand, #FF6B1A) 10%, transparent); }
.vu-btn--block { width: 100%; }

/* ─── 7. Visibilidade utilitária por breakpoint ──────────────────────── */
@media (max-width: 599px) { .vu-hide-mobile  { display: none !important; } }
@media (min-width: 600px) { .vu-show-mobile  { display: none !important; } }
@media (max-width: 991px) { .vu-hide-tablet  { display: none !important; } }
@media (min-width: 992px) { .vu-show-tablet  { display: none !important; } }
@media (max-width:1199px) { .vu-hide-desktop { display: none !important; } }
@media (min-width:1200px) { .vu-show-desktop { display: none !important; } }

/* ─── 8. iPhone notch / safe-area ─────────────────────────────────────── */
.vu-safe-top    { padding-top:    max(var(--vu-sp-3), env(safe-area-inset-top)); }
.vu-safe-bottom { padding-bottom: max(var(--vu-sp-3), env(safe-area-inset-bottom)); }
.vu-safe-x      { padding-left:   max(var(--vu-sp-3), env(safe-area-inset-left));
                  padding-right:  max(var(--vu-sp-3), env(safe-area-inset-right)); }

/* Posicionados fixed que respeitam o notch */
.vu-fixed-bottom {
    position: fixed;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    z-index: 50;
}

/* ─── 9. Modal full-screen no mobile ─────────────────────────────────── */
.vu-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.78);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--vu-sp-3);
    animation: vuFadeIn .2s ease-out;
}
@keyframes vuFadeIn { from { opacity: 0 } to { opacity: 1 } }
.vu-modal {
    background: #fff;
    border-radius: var(--vu-radius-lg);
    max-width: 600px;
    width: 100%;
    max-height: 95dvh;
    overflow-y: auto;
    box-shadow: var(--vu-shadow-lg);
}
@media (max-width: 640px) {
    .vu-modal-overlay { padding: 0; align-items: flex-end; }
    .vu-modal { border-radius: var(--vu-radius-lg) var(--vu-radius-lg) 0 0; max-height: 92dvh; width: 100%; animation: vuSlideUp .3s ease-out; }
    @keyframes vuSlideUp { from { transform: translateY(20px) } to { transform: translateY(0) } }
}

/* ─── 10. Cards adaptativos ───────────────────────────────────────────── */
.vu-card {
    background: #fff;
    border-radius: var(--vu-radius);
    padding: var(--vu-sp-4);
    box-shadow: var(--vu-shadow-sm);
    border: 1px solid #F1F5F9;
}
.vu-card--soft   { box-shadow: none; background: #F8FAFC; }
.vu-card--hover  { transition: transform .2s, box-shadow .2s; }
.vu-card--hover:hover { transform: translateY(-3px); box-shadow: var(--vu-shadow); }

/* ─── 11. Aspect ratio helper ─────────────────────────────────────────── */
.vu-aspect-square { aspect-ratio: 1 / 1; }
.vu-aspect-video  { aspect-ratio: 16 / 9; }
.vu-aspect-card   { aspect-ratio: 4 / 3; }
.vu-cover { width: 100%; height: 100%; object-fit: cover; }

/* ─── 12. Truncate utility ────────────────────────────────────────────── */
.vu-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vu-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vu-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── 13. Scroll horizontal touch (carrosséis) ───────────────────────── */
.vu-scroll-x {
    display: flex;
    gap: var(--vu-sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
}
.vu-scroll-x::-webkit-scrollbar { display: none; }
.vu-scroll-x > * { scroll-snap-align: start; flex-shrink: 0; }

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

/* ─── 15. Dark mode hint (opcional) ──────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Ativa só quando a frente declarar suporte com .vu-dark-aware */
    .vu-dark-aware { color-scheme: dark light; }
}

/* ─── 16. Print clean ─────────────────────────────────────────────────── */
@media print {
    .vu-hide-print { display: none !important; }
    body { background: #fff !important; }
    .vu-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ─── 17. Skeleton loader genérico ───────────────────────────────────── */
.vu-skeleton {
    background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%);
    background-size: 200% 100%;
    animation: vuShimmer 1.4s infinite linear;
    border-radius: var(--vu-radius-sm);
}
@keyframes vuShimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* ─── 18. Focus visível pra acessibilidade ───────────────────────────── */
:focus-visible {
    outline: 2px solid var(--vu-brand, #FF6B1A);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─── 19. Imagens lazy com placeholder ───────────────────────────────── */
img[loading="lazy"] { background: #F1F5F9; }

/* ═══════════════════════════════════════════════════════════════════════
   r204 — RESPONSIVO PROFUNDO + ACESSIBILIDADE MOBILE
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 20. Touch targets WCAG AAA (44×44) em mobile/tablet ───────────── */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
    button, .btn, [role="button"], a.btn,
    .nav-link, .dropdown-item, .list-group-item-action,
    select, input[type="submit"], input[type="reset"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="password"], input[type="search"],
    input[type="url"], input[type="date"], textarea {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px; /* evita zoom automático do iOS em input < 16px */
    }
    .btn-sm, .btn-xs {
        min-height: 40px;
        padding-left: 14px;
        padding-right: 14px;
    }
    a, button, [role="button"] {
        -webkit-tap-highlight-color: rgba(255, 107, 26, 0.18);
    }
    button, .btn, [role="button"], .nav-link {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ─── 21. Scrolling fluido horizontal (tabs, filters, scroll-x) ─────── */
.vu-scroll-x, [data-scroll-x],
.scroll-horizontal, .tabs-scroll, .filters-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--vu-brand, #FF6B1A) transparent;
}
.vu-scroll-x::-webkit-scrollbar, [data-scroll-x]::-webkit-scrollbar { height: 4px }
.vu-scroll-x::-webkit-scrollbar-thumb { background: var(--vu-brand, #FF6B1A); border-radius: 99px }
.vu-scroll-x > * { scroll-snap-align: start }

/* ─── 22. Safe-area pra notch/dynamic island (iPhone) ────────────────── */
@supports (padding: max(0px)) {
    body.has-bnav, body.has-bottom-nav {
        padding-bottom: max(60px, calc(60px + env(safe-area-inset-bottom)));
    }
    .vu-safe-top    { padding-top:    max(0px, env(safe-area-inset-top)) }
    .vu-safe-bottom { padding-bottom: max(0px, env(safe-area-inset-bottom)) }
    .vu-safe-left   { padding-left:   max(0px, env(safe-area-inset-left)) }
    .vu-safe-right  { padding-right:  max(0px, env(safe-area-inset-right)) }
}

/* ─── 23. Reduce motion (acessibilidade) ────────────────────────────── */
@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;
    }
}

/* ─── 24. Aspect-ratio fluido em mídia ───────────────────────────────── */
.vu-aspect-1x1   { aspect-ratio: 1 / 1 }
.vu-aspect-4x3   { aspect-ratio: 4 / 3 }
.vu-aspect-16x9  { aspect-ratio: 16 / 9 }
.vu-aspect-21x9  { aspect-ratio: 21 / 9 }
.vu-aspect-1x1, .vu-aspect-4x3, .vu-aspect-16x9, .vu-aspect-21x9 {
    width: 100%;
    object-fit: cover;
}

/* ─── 25. Drawer mobile padrão (qualquer sidebar) ────────────────────── */
@media (max-width: 991px) {
    body.drawer-open .admin-sidebar,
    body.drawer-open [data-sidebar] {
        transform: translateX(0) !important;
    }
    body.drawer-open::after {
        content: '';
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, .42);
        z-index: 998;
        backdrop-filter: blur(2px);
    }
}

/* ─── 26. Performance: content-visibility em listas longas ───────────── */
.vu-cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: 0 200px;
}

/* ─── 27. Text-wrap balance pra títulos (Safari 17.4+/Chrome 114+) ──── */
h1, h2, h3, .vu-balance { text-wrap: balance }
p, .vu-pretty { text-wrap: pretty }

/* ─── 28. Touch action: melhora resposta de UI controls ──────────────── */
button, .btn, .nav-link, [role="button"] { touch-action: manipulation }
img, .map, .vu-map, .chart { touch-action: pan-x pan-y }

/* ─── 29. Image responsive auto (img sem altura definida) ─────────────
   Evita layout shift (CLS) — imgs sem width/height ganham padrão fluido */
img:not([width]):not([height]) {
    max-width: 100%;
    height: auto;
}