/* Camisa 90 — Design tokens (oklch). Dark = principal. */
:root,
.dark {
   --background: oklch(0.13 0.01 285);
   --foreground: oklch(0.98 0.005 285);
   --card: oklch(0.17 0.012 285);
   --card-foreground: oklch(0.98 0.005 285);
   --popover: oklch(0.17 0.012 285);
   --popover-foreground: oklch(0.98 0.005 285);
   --primary: oklch(0.65 0.23 6);
   --primary-foreground: oklch(0.99 0 0);
   --secondary: oklch(0.22 0.015 285);
   --secondary-foreground: oklch(0.98 0 0);
   --muted: oklch(0.22 0.015 285);
   --muted-foreground: oklch(0.7 0.02 285);
   --accent: oklch(0.27 0.02 285);
   --accent-foreground: oklch(0.98 0 0);
   --destructive: oklch(0.65 0.23 25);
   --destructive-foreground: oklch(0.99 0 0);
   --success: oklch(0.72 0.18 155);
   --success-foreground: oklch(0.13 0.01 285);
   --warning: oklch(0.8 0.16 80);
   --warning-foreground: oklch(0.13 0.01 285);
   --border: oklch(1 0 0 / 0.08);
   --input: oklch(1 0 0 / 0.1);
   --ring: oklch(0.65 0.23 6 / 0.6);
   --chart-1: oklch(0.65 0.23 6);
   --chart-2: oklch(0.72 0.18 155);
   --chart-3: oklch(0.8 0.16 80);
   --chart-4: oklch(0.6 0.2 260);
   --chart-5: oklch(0.7 0.15 320);
}


dialog {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.light {
   --background: oklch(0.99 0.003 60);
   --foreground: oklch(0.18 0.012 285);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.18 0.012 285);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.18 0.012 285);
   --primary: oklch(0.6 0.24 6);
   --primary-foreground: oklch(0.99 0 0);
   --secondary: oklch(0.96 0.005 285);
   --secondary-foreground: oklch(0.18 0.012 285);
   --muted: oklch(0.96 0.005 285);
   --muted-foreground: oklch(0.45 0.015 285);
   --accent: oklch(0.94 0.008 285);
   --accent-foreground: oklch(0.18 0.012 285);
   --destructive: oklch(0.58 0.24 25);
   --destructive-foreground: oklch(0.99 0 0);
   --success: oklch(0.62 0.17 155);
   --success-foreground: oklch(0.99 0 0);
   --warning: oklch(0.75 0.18 80);
   --warning-foreground: oklch(0.18 0.012 285);
   --border: oklch(0.9 0.005 285);
   --input: oklch(0.9 0.005 285);
   --ring: oklch(0.6 0.24 6 / 0.5);
}

html {
   color-scheme: dark;
}

.light {
   color-scheme: light;
}

* {
   border-color: var(--border);
}

body {
   background-color: var(--background);
   color: var(--foreground);
   font-family: "Inter", system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   margin: 0;
}

h1,
h2,
h3,
h4,
.font-display {
   font-family: "Bebas Neue", Impact, sans-serif;
   letter-spacing: 0.01em;
}

.text-gradient-rose {
   background: linear-gradient(135deg, oklch(0.7 0.24 6), oklch(0.6 0.26 350));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.bg-gradient-hero {
   background: linear-gradient(135deg, oklch(0.65 0.23 6 / 0.15), transparent 60%);
}

.scrollbar-thin::-webkit-scrollbar {
   width: 6px;
   height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 3px;
}

/* Form controls que combinam com o tema */
input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
   background: var(--background);
   color: var(--foreground);
   border: 1px solid var(--input);
   border-radius: 0.375rem;
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
   width: 100%;
   outline: none;
   transition: border-color .15s, box-shadow .15s;
}

input:focus,
textarea:focus,
select:focus {
   border-color: var(--ring);
   box-shadow: 0 0 0 3px var(--ring);
}

input[disabled] {
   opacity: 0.6;
   cursor: not-allowed;
}

/* File input — combina com o tema da loja */
input[type="file"] {
   width: 100%;
   background: var(--background);
   color: var(--foreground);
   border: 1px solid var(--input);
   border-radius: 0.375rem;
   padding: 0.4rem 0.5rem;
   font-size: 0.85rem;
   font-family: inherit;
   cursor: pointer;
   transition: border-color .15s, box-shadow .15s, background .15s;
}

input[type="file"]:hover {
   border-color: var(--ring);
}

input[type="file"]:focus {
   outline: none;
   border-color: var(--ring);
   box-shadow: 0 0 0 3px var(--ring);
}

input[type="file"]::file-selector-button {
   background: var(--primary);
   color: var(--primary-foreground);
   border: none;
   border-radius: 0.3rem;
   padding: 0.4rem 0.85rem;
   margin-right: 0.75rem;
   font-weight: 600;
   font-size: 0.8rem;
   font-family: inherit;
   cursor: pointer;
   transition: opacity .15s, background .15s;
}

input[type="file"]::file-selector-button:hover {
   opacity: 0.85;
}

input[type="file"]::-webkit-file-upload-button {
   background: var(--primary);
   color: var(--primary-foreground);
   border: none;
   border-radius: 0.3rem;
   padding: 0.4rem 0.85rem;
   margin-right: 0.75rem;
   font-weight: 600;
   font-size: 0.8rem;
   font-family: inherit;
   cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button:hover {
   opacity: 0.85;
}


button {
   font-family: inherit;
}

/* Botões reutilizáveis */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   padding: .5rem 1rem;
   border-radius: .375rem;
   font-weight: 500;
   font-size: .875rem;
   cursor: pointer;
   border: 1px solid transparent;
   transition: background .15s, border-color .15s, color .15s;
}

.btn-primary {
   background: var(--primary);
   color: var(--primary-foreground);
}

.btn-primary:hover {
   background: oklch(from var(--primary) calc(l - 0.05) c h);
   opacity: .9;
}

.btn-outline {
   background: transparent;
   color: var(--foreground);
   border-color: var(--input);
}

.btn-outline:hover {
   background: var(--accent);
}

.btn-ghost {
   background: transparent;
   color: var(--foreground);
}

.btn-ghost:hover {
   background: var(--accent);
}

.btn-lg {
   padding: .75rem 1.5rem;
   font-size: 1rem;
}

.btn-sm {
   padding: .25rem .75rem;
   font-size: .75rem;
}

.btn-icon {
   padding: .5rem;
}

.container {
   width: 100%;
   margin: 0 auto;
   max-width: 1280px;
}

[data-lucide] {
   width: 1em;
   height: 1em;
   display: inline-block;
   vertical-align: -0.125em;
   stroke-width: 2;
}

.slider {
   position: relative;
}

.slider-track {
   display: flex;
   height: 100%;
   transition: transform .45s cubic-bezier(.4, .0, .2, 1);
   will-change: transform;
}

.slider-slide {
   flex-shrink: 0;
   height: 100%;
   display: block;
}

.slider-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.slider-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: oklch(0 0 0 / 0.55);
   color: #fff;
   border: 1px solid var(--border);
   cursor: pointer;
   transition: background .15s, transform .15s;
   z-index: 2;
}

.slider-arrow:hover {
   background: var(--primary);
   transform: translateY(-50%) scale(1.05);
}

.slider-arrow-left {
   left: 10px;
}

.slider-arrow-right {
   right: 10px;
}

.slider-dots {
   position: absolute;
   bottom: 12px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   gap: 6px;
   z-index: 2;
}

.slider-dot {
   width: 8px;
   height: 8px;
   border-radius: 9999px;
   background: oklch(1 0 0 / 0.4);
   border: none;
   cursor: pointer;
   transition: background .15s, width .15s;
}

.slider-dot.active {
   background: var(--primary);
   width: 20px;
}

/* Animação de entrada (fade) ao trocar slide */
@keyframes slide-fade-in {
   from {
      opacity: 0;
      transform: scale(1.02);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

.slider-slide img {
   animation: slide-fade-in .35s ease-out;
}

/* ── Modal Tabela de Medidas ── */
.size-modal {
   position: fixed;
   inset: 0;
   z-index: 50;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1rem;
   animation: modal-in .2s ease-out;
}

.size-modal.hidden {
   display: none;
}

.size-modal-backdrop {
   position: absolute;
   inset: 0;
   background: oklch(0 0 0 / 0.7);
}

.size-modal-card {
   position: relative;
   max-width: 900px;
   width: 100%;
   max-height: 90vh;
   overflow: auto;
   background: var(--card);
   color: var(--card-foreground);
   border: 1px solid var(--border);
   border-radius: .75rem;
   padding: 1.5rem;
   box-shadow: 0 30px 60px oklch(0 0 0 / 0.5);
}

@keyframes modal-in {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ── Gráfico de receita (admin) ─────────────────────────────────────────────── */
.c90-chart {
   position: relative;
}

.c90-chart .c90-dot {
   transition: r .12s ease;
   cursor: pointer;
}

.c90-chart .c90-dot:hover {
   r: 5.5;
}

.c90-chart .c90-tip {
   position: absolute;
   pointer-events: none;
   z-index: 10;
   background: var(--card);
   color: var(--foreground);
   border: 1px solid var(--border);
   border-radius: .5rem;
   padding: .4rem .6rem;
   font-size: .72rem;
   line-height: 1.25;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
   transform: translate(-50%, -115%);
   white-space: nowrap;
}

.c90-chart .c90-tip b {
   color: var(--primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE MOBILE — Camisa 90
   Breakpoints: sm=480px  md=768px  lg=1024px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container padding seguro ──────────────────────────────────────────────── */
@media (max-width: 768px) {
   .container {
      padding-left: 1rem;
      padding-right: 1rem;
   }
}

/* ── Tipografia escalável ───────────────────────────────────────────────────── */
@media (max-width: 480px) {

   h1.font-display,
   .font-display.text-7xl {
      font-size: 2.5rem;
   }

   h1.font-display,
   .font-display.text-5xl {
      font-size: 2rem;
   }

   h2.font-display,
   .font-display.text-4xl {
      font-size: 1.75rem;
   }

   h2.font-display,
   .font-display.text-3xl {
      font-size: 1.5rem;
   }
}

/* ── Botões: tela cheia em mobile quando lado a lado ───────────────────────── */
@media (max-width: 480px) {
   .btn-lg {
      padding: .65rem 1.1rem;
      font-size: .9rem;
   }
}

/* ── Hero (index) ────────────────────────────────────────────────────────────
   min-h-[80vh] é do Tailwind; aqui corrigimos o texto interno. */
@media (max-width: 640px) {

   /* Faz os botões do hero empilharem verticalmente em telas muito pequenas */
   section .flex.flex-wrap.gap-3 .btn-lg {
      width: 100%;
      justify-content: center;
   }
}

/* ── Slider / Carrossel ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
   .slider-arrow {
      width: 32px;
      height: 32px;
   }

   .slider-arrow-left {
      left: 6px;
   }

   .slider-arrow-right {
      right: 6px;
   }
}

/* ── Modal Tabela de Medidas ─────────────────────────────────────────────── */
@media (max-width: 640px) {
   .size-modal {
      padding: 0.5rem;
      align-items: flex-end;
   }

   .size-modal-card {
      max-height: 85vh;
      border-radius: .75rem .75rem 0 0;
      padding: 1rem;
   }
}

/* ── Página de produto: empilha coluna de imagem e painel de compra ─────── */
@media (max-width: 767px) {

   /* grid md:grid-cols-2 → já colapsa pelo Tailwind, mas garantimos padding */
   .size-opt {
      width: 2.75rem;
      height: 2.75rem;
      font-size: .8rem;
   }

   /* Botões "Adicionar" + "Comprar agora" ficam empilhados */
   #produto-form .flex.gap-3 {
      flex-direction: column;
   }

   #produto-form .flex.gap-3 .btn {
      width: 100%;
   }
}

/* ── Carrinho ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

   /* Imagem do item no carrinho */
   .carrinho-item-img {
      width: 4rem;
      height: 4rem;
   }

   /* Resumo sai de sticky e fica abaixo dos itens */
   .sticky.top-20 {
      position: static;
   }
}

/* ── Checkout ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

   /* O grid lg:grid-cols-3 já colapsa, mas o resumo precisa de ajuste */
   #checkout-form>div:last-child .sticky {
      position: static;
   }
}

/* ── Footer: empilha colunas em mobile ───────────────────────────────────── */
@media (max-width: 767px) {
   footer .grid.md\:grid-cols-4 {
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
   }
}

@media (max-width: 400px) {
   footer .grid.md\:grid-cols-4 {
      grid-template-columns: 1fr;
   }
}

/* ── Header / Menu mobile ────────────────────────────────────────────────── */
@media (max-width: 767px) {

   /* Notif dropdown não sai da tela */
   #notif-dropdown {
      right: -4rem;
      width: calc(100vw - 2rem);
      max-width: 22rem;
   }

   /* User menu não sai da tela */
   #user-menu-dropdown {
      right: 0;
      max-width: 90vw;
   }
}

/* ── Página de conta / suporte / rastreio — seções com grid ─────────────── */
@media (max-width: 767px) {

   /* Inputs e labels mais confortáveis no touch */
   input:not([type]),
   input[type="text"],
   input[type="email"],
   input[type="password"],
   input[type="number"],
   input[type="tel"],
   input[type="search"],
   textarea,
   select {
      font-size: 1rem;
      /* evita zoom automático do iOS (mínimo 16px) */
      padding: .6rem .75rem;
   }
}

/* ── Tabelas admin: scroll horizontal ────────────────────────────────────── */
@media (max-width: 900px) {
   .overflow-x-auto table {
      min-width: 600px;
   }
}

/* ── Badges / chips compactos em mobile ──────────────────────────────────── */
@media (max-width: 480px) {
   .text-\[10px\] {
      font-size: 9px;
   }
}

/* ── Toque: aumenta área clicável de botões ícone ────────────────────────── */
@media (max-width: 767px) {
   .btn-icon {
      padding: .6rem;
      min-width: 2.5rem;
      min-height: 2.5rem;
   }
}

/* ── Safe area (iPhone com notch / Dynamic Island) ───────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
   footer {
      padding-bottom: calc(1rem + env(safe-area-inset-bottom));
   }

   header {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
   }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE MOBILE COMPLETA — Camisa 90 (adição ao styles.css)
   Breakpoints: xs=380px  sm=480px  md=768px  lg=1024px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Meta viewport helper ───────────────────────────────────────────────── */
html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   scroll-behavior: smooth;
}

/* ── Imagens responsivas por padrão ────────────────────────────────────── */
img {
   max-width: 100%;
   height: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER / NAVEGAÇÃO
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Header menor em mobile */
   header .container {
      height: 56px;
      gap: 0.5rem;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
   }

   /* Logo compacto */
   header a[href="/"] .font-display {
      font-size: 1.1rem;
   }

   /* Botões de ícone menores */
   header .btn-icon {
      padding: 0.4rem;
   }

   /* Mobile menu: links com área de toque maior */
   #mobile-menu nav a {
      padding: 0.6rem 0;
      font-size: 0.95rem;
      display: block;
      border-bottom: 1px solid var(--border);
   }

   #mobile-menu nav a:last-child {
      border-bottom: none;
   }

   #mobile-menu nav a.pl-3 {
      padding-left: 1rem;
   }

   #mobile-menu {
      height: 300px;
      max-height: 70vh;
      overflow-y: auto;
   }

   /* Dropdown de notificações: cobre a tela inteira em xs */
   #notif-dropdown {
      position: fixed;
      top: 56px;
      left: 0.5rem;
      right: 0.5rem;
      width: auto;
      max-width: 100%;
      max-height: calc(100vh - 70px);
      overflow-y: auto;
   }

   /* Dropdown de usuário */
   #user-menu-dropdown {
      position: fixed;
      top: 56px;
      right: 0.5rem;
      max-width: calc(100vw - 1rem);
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO (index.ejs)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Hero com altura menor */
   section.relative.min-h-\[80vh\] {
      min-height: 60vh;
   }

   /* Imagem de fundo: maior opacidade em mobile para legibilidade */
   section.relative.min-h-\[80vh\] .absolute img {
      opacity: 0.4;
   }

   /* Texto hero menor */
   section.relative.min-h-\[80vh\] h1.font-display {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 1rem;
   }

   /* Parágrafo hero */
   section.relative.min-h-\[80vh\]>.container>div>p {
      font-size: 0.95rem;
      margin-bottom: 1.25rem;
   }

   /* Badges hero */
   section.relative.min-h-\[80vh\] .inline-flex {
      font-size: 0.7rem;
      margin-bottom: 1rem;
   }

   /* Botões hero: empilhados e largura total */
   section.relative.min-h-\[80vh\] .flex.flex-wrap.gap-3 {
      flex-direction: column;
      gap: 0.625rem;
   }

   section.relative.min-h-\[80vh\] .flex.flex-wrap.gap-3 .btn-lg {
      width: 100%;
      justify-content: center;
   }

   /* Padding do container do hero */
   section.relative.min-h-\[80vh\] .container {
      padding-top: 2rem;
      padding-bottom: 2rem;
   }
}

@media (max-width: 380px) {
   section.relative.min-h-\[80vh\] h1.font-display {
      font-size: 2rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   SEÇÃO DE BENEFÍCIOS (cards com ícones: truck, shield-check, credit-card)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Grid de 3 colunas → 1 coluna */
   section.container.grid.grid-cols-1.md\:grid-cols-3 {
      grid-template-columns: 1fr;
      gap: 0.625rem;
   }

   section.container.grid.grid-cols-1.md\:grid-cols-3>div {
      padding: 0.75rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   CATEGORIAS (grid)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

   /* Categorias: 2 colunas em xs */
   .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.5rem;
   }

   .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 a {
      padding: 0.875rem 0.5rem;
   }

   .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 span.text-3xl {
      font-size: 1.75rem;
   }

   .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 span.font-display {
      font-size: 0.7rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   GRID DE PRODUTOS (catálogo / destaques)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

   /* 2 colunas em mobile pequeno */
   .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4 {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.625rem;
   }
}



/* Product card */
@media (max-width: 480px) {

   /* Card interno: imagem e textos menores */
   .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4 a>div,
   .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4>a {
      font-size: 0.8rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINA DE PRODUTO (produto.ejs)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Grid 2 colunas → 1 coluna */
   .grid.md\:grid-cols-2.gap-8 {
      grid-template-columns: 1fr;
      gap: 1.25rem;
   }

   /* Slider: aspect-ratio menor em mobile */
   #slider {
      aspect-ratio: 1 / 1;
   }

   /* Título produto */
   #produto-form h1.font-display,
   .grid.md\:grid-cols-2 h1.font-display {
      font-size: 1.75rem;
      margin-bottom: 0.5rem;
   }

   /* Preço */
   .text-3xl.font-bold.text-primary {
      font-size: 1.75rem;
   }

   /* Tamanhos: botões menores */
   .size-opt {
      width: 2.5rem !important;
      height: 2.5rem !important;
      font-size: 0.75rem !important;
   }

   /* Versão: empilha em xs */
   #versoes {
      flex-direction: column;
   }

   #versoes label {
      width: 100%;
   }

   /* Botões Adicionar + Comprar agora: coluna */
   #produto-form .flex.gap-3 {
      flex-direction: column;
      gap: 0.5rem;
   }

   #produto-form .flex.gap-3 .btn {
      width: 100%;
      justify-content: center;
   }

   /* Thumbnails menores */
   .thumb {
      width: 3.25rem !important;
      height: 3.25rem !important;
   }

   /* Checklist de garantias */
   #produto-form .mt-6.space-y-2 p {
      font-size: 0.8rem;
   }
}

/* ── Modal tabela de medidas: sheet bottom em mobile ─── */
@media (max-width: 640px) {
   .size-modal {
      align-items: flex-end;
      padding: 0;
   }

   .size-modal-card {
      border-radius: 1rem 1rem 0 0;
      max-height: 80vh;
      padding: 1rem;
      width: 100%;
   }

   /* Tabela de medidas: scroll horizontal */
   .size-modal-card table {
      min-width: 480px;
   }

   .size-modal-card .overflow-auto {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARRINHO (carrinho.ejs)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Grid de 3 colunas → 1 coluna */
   .grid.lg\:grid-cols-3.gap-8 {
      grid-template-columns: 1fr;
      gap: 1rem;
   }

   /* Resumo sai do sticky */
   .grid.lg\:grid-cols-3.gap-8 .sticky.top-20 {
      position: static;
   }

   /* Item do carrinho: layout mais compacto */
   .flex.gap-4.p-3.rounded-lg.border {
      gap: 0.625rem;
      padding: 0.625rem;
   }

   /* Imagem do item */
   .flex.gap-4>a.w-20.h-20 {
      width: 4rem;
      height: 4rem;
      flex-shrink: 0;
   }

   /* Nome produto no carrinho */
   .flex.gap-4 .flex-1 .font-semibold {
      font-size: 0.8rem;
   }

   /* Título da página */
   h1.font-display.text-4xl {
      font-size: 2rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT (checkout.ejs)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

   /* Grid 3 colunas → 1 coluna */
   form#checkout-form.grid.lg\:grid-cols-3 {
      grid-template-columns: 1fr;
   }

   form#checkout-form .lg\:col-span-2 {
      grid-column: span 1;
   }
}

@media (max-width: 767px) {

   /* Resumo sticky → static */
   #checkout-form>div:last-child .sticky {
      position: static;
   }

   /* Sections do checkout */
   form#checkout-form section {
      padding: 1rem;
   }

   /* Grids de endereço: 1 coluna */
   .grid.grid-cols-1.sm\:grid-cols-6 {
      grid-template-columns: 1fr;
   }

   .grid.grid-cols-1.sm\:grid-cols-6 [class*="sm:col-span"] {
      grid-column: span 1;
   }

   /* Grid de dados pessoais */
   .grid.sm\:grid-cols-2.gap-3 {
      grid-template-columns: 1fr;
   }

   .grid.sm\:grid-cols-2 [class*="sm:col-span-2"] {
      grid-column: span 1;
   }

   /* Botões do pedido pendente */
   .flex.flex-wrap.gap-2 .btn {
      width: 100%;
      justify-content: center;
   }

   /* Título checkout */
   form#checkout-form h1.font-display {
      font-size: 1.75rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   MINHA CONTA (conta.ejs)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Header da conta: empilha título e botões */
   .max-w-3xl>.flex.items-center.justify-between:first-child {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
   }

   /* Botões da conta */
   .max-w-3xl>.flex.items-center.justify-between:first-child .flex.gap-2 {
      width: 100%;
      flex-direction: column;
   }

   .max-w-3xl>.flex.items-center.justify-between:first-child .btn {
      width: 100%;
      justify-content: center;
   }

   /* Cards de segurança: 1 coluna */
   .grid.sm\:grid-cols-2.gap-3 a.rounded.border {
      padding: 0.75rem;
   }

   /* Endereços: botões em coluna */
   .rounded.border.border-border.p-3 .flex.gap-2 {
      flex-direction: column;
      align-items: flex-start;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   SUPORTE / CHAT (suporte.ejs)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Header do suporte */
   .max-w-3xl .flex.items-center.justify-between.mb-4 {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
   }

   .max-w-3xl .flex.items-center.justify-between.mb-4 .btn {
      width: 100%;
      justify-content: center;
   }

   /* Chat: ocupa mais altura em mobile */
   .rounded-lg.border.bg-card.flex.flex-col.h-\[60vh\] {
      height: 65vh;
   }

   /* Mensagens: largura máxima maior em mobile */
   .max-w-\[75\%\] {
      max-width: 88%;
   }

   /* Campo de mensagem: botão não encolhe */
   #msg-form {
      gap: 0.5rem;
   }

   #msg-form .btn {
      flex-shrink: 0;
      padding: 0.5rem 0.75rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   RASTREIO (rastreio.ejs)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Header de rastreio */
   [data-order-id]>.flex.items-center.justify-between:first-child {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
   }

   [data-order-id]>.flex.items-center.justify-between:first-child .btn {
      width: 100%;
      justify-content: center;
   }

   /* Status + badge: empilha */
   .flex.items-center.justify-between.gap-4.flex-wrap {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
   }

   #rastreio-status-label {
      font-size: 1.5rem;
   }

   /* Grid do staff: 1 coluna */
   .grid.md\:grid-cols-4.gap-3 {
      grid-template-columns: 1fr;
   }

   .grid.md\:grid-cols-4 [class*="md:col-span"] {
      grid-column: span 1;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Grid footer: 2 colunas */
   footer .container.grid {
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      padding-top: 2rem;
      padding-bottom: 2rem;
   }

   /* Logo do footer: span total */
   footer .container.grid>div:first-child {
      grid-column: span 2;
   }

   /* Redes sociais: span total */
   footer .container.grid>div:last-child {
      grid-column: span 2;
   }

   footer h4.font-display {
      font-size: 0.75rem;
      margin-bottom: 0.5rem;
   }

   footer ul.space-y-2 li {
      margin-bottom: 0.25rem;
   }
}

@media (max-width: 400px) {
   footer .container.grid {
      grid-template-columns: 1fr;
   }

   footer .container.grid>div:first-child,
   footer .container.grid>div:last-child {
      grid-column: span 1;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTENTICAÇÃO (auth.ejs)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

   /* Container de auth: padding menor */
   .max-w-md {
      padding-top: 2rem;
      padding-bottom: 2rem;
   }

   .max-w-md h1.font-display {
      font-size: 1.75rem;
      margin-bottom: 1rem;
   }

   /* Formulário compacto */
   .max-w-md .rounded-lg.border.bg-card.p-5 {
      padding: 1rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINAS SIMPLES (sobre, contato, termos, faq, feedbacks, 404)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Títulos h1 gerais */
   h1.font-display.text-3xl {
      font-size: 1.75rem;
   }

   h1.font-display.text-4xl {
      font-size: 2rem;
   }

   h1.font-display.text-5xl {
      font-size: 2.25rem;
   }

   /* py-16 → py-10 em mobile */
   .py-16 {
      padding-top: 2.5rem;
      padding-bottom: 2.5rem;
   }

   .py-12 {
      padding-top: 2rem;
      padding-bottom: 2rem;
   }

   /* Contato: form compacto */
   .max-w-xl {
      max-width: 100%;
   }

   /* Termos: texto legível */
   .prose {
      font-size: 0.9rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAINEL ADMIN
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

   /* Todas as tabelas admin: scroll horizontal */
   .overflow-x-auto {
      -webkit-overflow-scrolling: touch;
   }

   .overflow-x-auto table {
      min-width: 640px;
   }
}

@media (max-width: 767px) {
   /* Sidebar admin: oculta, abre em overlay se necessário */
   /* (admin usa layout próprio via _layout-start) */

   /* Grid de stats no admin */
   .grid.md\:grid-cols-2.gap-4,
   .grid.md\:grid-cols-3.gap-4 {
      grid-template-columns: fr;
   }

   /* Cards de stat */
   .rounded-lg.border.bg-card.p-4 {
      padding: 0.875rem;
   }
}

@media (max-width: 480px) {

   /* Financeiro / gráficos */
   .c90-chart svg {
      width: 100% !important;
      height: auto !important;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTA DISPOSITIVOS / 2FA / EMAIL / PEDIDOS / HISTÓRICO
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Dispositivos: card compacto */
   .rounded-lg.border.bg-card .flex.items-start.gap-3 {
      gap: 0.625rem;
   }

   /* Pedidos: tabela com scroll */
   .conta-pedidos-table {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   /* Histórico de conta: gap menor */
   .space-y-6>*+* {
      margin-top: 1rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   SLIDER / CARROSSEL
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
   .slider-arrow {
      width: 2rem;
      height: 2rem;
   }

   .slider-arrow-left {
      left: 4px;
   }

   .slider-arrow-right {
      right: 4px;
   }

   .slider-arrow [data-lucide] {
      width: 0.875em;
      height: 0.875em;
   }

   .slider-dots {
      bottom: 8px;
   }

   .slider-dot {
      width: 6px;
      height: 6px;
   }

   .slider-dot.active {
      width: 16px;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   UTILITÁRIOS GERAIS PARA MOBILE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Garante padding horizontal em todos os containers */
   .container {
      padding-left: 1rem;
      padding-right: 1rem;
   }

   /* Inputs e selects: fonte 16px evita zoom no iOS */
   input:not([type]),
   input[type="text"],
   input[type="email"],
   input[type="password"],
   input[type="number"],
   input[type="tel"],
   input[type="search"],
   input[type="url"],
   input[type="date"],
   input[type="time"],
   input[type="datetime-local"],
   textarea,
   select {
      font-size: 1rem;
      padding: 0.625rem 0.75rem;
   }

   /* Botões: área de toque mínima de 44px */
   .btn {
      min-height: 2.75rem;
   }

   .btn-sm {
      min-height: 2rem;
   }

   .btn-icon {
      min-width: 2.75rem;
      min-height: 2.75rem;
      padding: 0.625rem;
   }

   /* Flash/alertas: padding menor */
   [class*="rounded-lg border border-"][class*="/50"] {
      padding: 0.75rem;
   }
}

/* ── Tipografia responsiva adicional ───────────────────────────────────── */
@media (max-width: 480px) {

   h1,
   h1.font-display {
      font-size: clamp(1.5rem, 7vw, 2.5rem);
   }

   h2,
   h2.font-display {
      font-size: clamp(1.25rem, 5.5vw, 2rem);
   }

   h3,
   h3.font-display {
      font-size: clamp(1rem, 4.5vw, 1.5rem);
   }
}

/* ── Scrollbar em mobile ────────────────────────────────────────────────── */
@media (max-width: 767px) {
   .scrollbar-thin::-webkit-scrollbar {
      width: 3px;
      height: 3px;
   }
}

/* ── Evita overflow horizontal na página inteira ────────────────────────── */
@media (max-width: 767px) {
   body {
      overflow-x: hidden;
   }
}

/* ── Cookie banner: full width em mobile ────────────────────────────────── */
@media (max-width: 767px) {
   #cookie-banner {
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
      border-bottom: none;
   }

   #cookie-banner .flex.gap-2 {
      flex-direction: column;
   }

   #cookie-banner .flex.gap-2 .btn {
      width: 100%;
      justify-content: center;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT SUCESSO / ERRO / PÁGINAS DE ESTADO
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

   /* Checkout sucesso */
   .py-20 {
      padding-top: 3rem;
      padding-bottom: 3rem;
   }

   /* Ícones grandes */
   .h-16.w-16 {
      width: 3rem;
      height: 3rem;
   }

   /* 404 */
   .text-8xl {
      font-size: 4rem;
   }

   .text-9xl {
      font-size: 5rem;
   }
}


/* ══════════════════════════════════════════════════════════════════════════
   PATCH RESPONSIVO FINAL — Camisa 90
   Corrige: sidebar admin, painéis staff, meus pedidos, botões fora da tela
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Global: evita qualquer overflow horizontal ───────────────────────── */
html,
body {
   max-width: 100%;
   overflow-x: hidden;
}

* {
   min-width: 0;
}

img,
video,
canvas,
svg,
iframe {
   max-width: 100%;
}

/* ── Global: botões e .btn nunca estouram o container ─────────────────── */
.btn,
button,
.btn-primary,
.btn-outline,
.btn-ghost {
   max-width: 100%;
   white-space: nowrap;
}

@media (max-width: 480px) {
   .btn {
      font-size: 0.8rem;
      padding: 0.5rem 0.7rem;
   }

   .btn-sm {
      font-size: 0.7rem;
      padding: 0.25rem 0.55rem;
   }

   .btn-lg {
      font-size: 0.9rem;
      padding: 0.6rem 1rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN — Layout geral
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

   /* Grid principal vira coluna única */
   .container.mx-auto.px-4.py-6.grid.md\:grid-cols-\[220px_1fr\] {
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
      padding-left: 0.75rem !important;
      padding-right: 0.75rem !important;
   }

   /* Sidebar admin não fica sticky em mobile */
   .md\:sticky.md\:top-20.md\:self-start {
      position: static !important;
   }

   /* Sidebar nav: scroll horizontal com gesto, sem quebrar layout */
   aside .rounded-lg.border.bg-card.p-2 nav.flex.md\:flex-col {
      flex-direction: row !important;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
      scrollbar-width: thin;
   }

   aside .rounded-lg.border.bg-card.p-2 nav.flex.md\:flex-col>a {
      flex: 0 0 auto;
      white-space: nowrap;
      padding: 0.5rem 0.75rem;
      font-size: 0.8rem;
   }

   aside .rounded-lg.border.bg-card.p-2 p.text-xs.uppercase {
      display: none;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN — Tabelas de painel (sempre scroll horizontal seguro)
   ══════════════════════════════════════════════════════════════════════════ */
.overflow-x-auto {
   -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {

   .rounded-lg.border.bg-card .overflow-x-auto,
   .rounded-lg.border.bg-card table {
      width: 100%;
   }

   table {
      font-size: 0.8rem;
   }

   table th,
   table td {
      padding: 0.5rem !important;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN PEDIDOS — Cards <details>
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

   /* Summary: quebra em coluna */
   details.rounded-lg.border.bg-card>summary {
      flex-wrap: wrap;
      gap: 0.5rem !important;
      padding: 0.75rem !important;
   }

   details.rounded-lg.border.bg-card>summary>.flex-1 {
      flex-basis: 100%;
      min-width: 0;
   }

   details.rounded-lg.border.bg-card>summary p.font-semibold {
      font-size: 0.9rem;
   }

   details.rounded-lg.border.bg-card>summary span.w-24 {
      width: auto !important;
      text-align: left !important;
   }

   details.rounded-lg.border.bg-card>summary span.text-xs.px-2 {
      align-self: flex-start;
   }

   /* Corpo do pedido: vira coluna única */
   details.rounded-lg.border.bg-card>div.grid.md\:grid-cols-2 {
      grid-template-columns: 1fr !important;
      padding: 0.75rem !important;
      gap: 0.75rem !important;
   }

   /* Botões de status: ocupam linha inteira lado a lado */
   details.rounded-lg.border.bg-card form button {
      font-size: 0.7rem;
      padding: 0.35rem 0.55rem;
   }

   /* Formulário de checkpoint: empilha */
   details.rounded-lg.border.bg-card form.flex.flex-wrap {
      flex-direction: column;
      align-items: stretch;
   }

   details.rounded-lg.border.bg-card form.flex.flex-wrap input,
   details.rounded-lg.border.bg-card form.flex.flex-wrap button {
      min-width: 0 !important;
      width: 100%;
   }
}

/* Filtros (chips) do topo: rolam horizontalmente em telas finas */
@media (max-width: 480px) {
   .space-y-4>.flex.gap-2.flex-wrap {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
      margin-left: -0.25rem;
      margin-right: -0.25rem;
      padding-left: 0.25rem;
      padding-right: 0.25rem;
   }

   .space-y-4>.flex.gap-2.flex-wrap>a {
      flex: 0 0 auto;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   MEUS PEDIDOS (/conta/pedidos)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

   /* Header do card: empilha tudo */
   .container .rounded-lg.border.bg-card.p-4>.flex.items-center.justify-between {
      flex-wrap: wrap;
      gap: 0.5rem !important;
   }

   .container .rounded-lg.border.bg-card.p-4>.flex.items-center.justify-between>div:first-child {
      flex-basis: 60%;
      min-width: 0;
   }

   .container .rounded-lg.border.bg-card.p-4>.flex.items-center.justify-between>.btn {
      flex-basis: 100%;
      order: 5;
      justify-content: center;
   }

   /* Grid interno empilha */
   .container .rounded-lg.border.bg-card.p-4 .grid.md\:grid-cols-2 {
      grid-template-columns: 1fr !important;
   }

   /* Botão "Finalizar pagamento" preenche largura */
   .container .rounded-lg.border.bg-card.p-4 .flex.justify-end>a {
      width: 100%;
      text-align: center;
      justify-content: center;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTA — Cabeçalho com botões "Meus pedidos" / "Suporte"
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
   .container .flex.items-center.justify-between {
      flex-wrap: wrap;
      gap: 0.5rem;
   }

   .container .flex.items-center.justify-between>.flex.gap-2 {
      width: 100%;
      flex-wrap: wrap;
   }

   .container .flex.items-center.justify-between>.flex.gap-2>.btn {
      flex: 1 1 auto;
      justify-content: center;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMS COM grid sm:grid-cols-6 — em mobile vira coluna única
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
   form.grid.sm\:grid-cols-6>[class*="sm:col-span"] {
      grid-column: span 1 / span 1 !important;
   }

   form.grid.sm\:grid-cols-6 {
      grid-template-columns: 1fr !important;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   GENÉRICO — qualquer .flex com múltiplos botões e gap, vira wrap em mobile
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

   .flex.gap-2:not(.flex-col):not(.flex-nowrap),
   .flex.gap-3:not(.flex-col):not(.flex-nowrap),
   .flex.gap-4:not(.flex-col):not(.flex-nowrap) {
      flex-wrap: wrap;
   }

   /* Card interno onde "Tornar padrão" / "trash" ficam ao lado do endereço */
   .rounded.border.border-border.p-3.flex.justify-between.items-start {
      flex-direction: column;
      gap: 0.5rem;
   }

   .rounded.border.border-border.p-3.flex.justify-between.items-start .flex.gap-2 {
      width: 100%;
      justify-content: flex-end;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUTO / CHECKOUT / RASTREIO — refinamentos
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

   /* =====================================================
      Layouts cuja base já é grid-cols-1
      ===================================================== */
   .grid.grid-cols-1.md\:grid-cols-2,
   .grid.grid-cols-1.lg\:grid-cols-2 {
      grid-template-columns: 1fr;
   }

   /* =====================================================
      Catálogo / Destaques / Produtos
      Mantém 2 colunas em qualquer largura mobile
      ===================================================== */
   .grid.grid-cols-2.md\:grid-cols-3,
   .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4,
   .grid.grid-cols-2.md\:grid-cols-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }

   /* =====================================================
      Grids desktop de 3 ou 4 colunas cuja base é 1 coluna
      ===================================================== */
   .grid.grid-cols-1.md\:grid-cols-3,
   .grid.grid-cols-1.lg\:grid-cols-3,
   .grid.grid-cols-1.md\:grid-cols-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   /* =====================================================
      Containers
      ===================================================== */
   .max-w-xl,
   .max-w-2xl,
   .max-w-3xl,
   .max-w-4xl {
      max-width: 100%;
   }

   body,
   html {
      overflow-x: hidden;
   }

   .overflow-x-auto {
      -webkit-overflow-scrolling: touch;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUTO — galeria/thumbnails
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

   /* Lista de tamanhos: chips legíveis */
   .flex.flex-wrap.gap-2>button,
   .flex.flex-wrap.gap-2>label {
      flex: 0 1 auto;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER — colunas empilham
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
   footer .grid {
      grid-template-columns: 1fr !important;
      gap: 1.25rem !important;
   }

   footer .container {
      text-align: center;
   }

   footer .flex {
      justify-content: center;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   MODAIS / DIALOGS / OVERLAYS
   ══════════════════════════════════════════════════════════════════════════ */
/* @media (max-width: 640px) {

   .fixed.inset-0>.rounded-lg,
   dialog,
   [role="dialog"] {
      width: calc(100vw - 1.5rem) !important;
      max-width: calc(100vw - 1.5rem) !important;
      margin: 0.75rem !important;
   }
} */

/* ══════════════════════════════════════════════════════════════════════════
   TIPOGRAFIA mobile final
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
   h1.font-display.text-3xl {
      font-size: 1.5rem;
   }

   .text-3xl {
      font-size: 1.5rem;
   }

   .text-2xl {
      font-size: 1.25rem;
   }

   .text-xl {
      font-size: 1.1rem;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   INPUTS DENTRO DE FORMS INLINE — never overflow
   ══════════════════════════════════════════════════════════════════════════ */
input,
select,
textarea {
   max-width: 100%;
   box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN — Cards de stats e gráficos
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

   .c90-chart,
   .c90-chart svg {
      width: 100% !important;
      height: auto !important;
   }

   .grid.gap-4.md\:grid-cols-2,
   .grid.gap-4.md\:grid-cols-3,
   .grid.gap-4.md\:grid-cols-4 {
      grid-template-columns: 1fr !important;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHAT ADMIN — área de mensagens
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

   .grid.md\:grid-cols-\[280px_1fr\],
   .grid.md\:grid-cols-\[260px_1fr\],
   .grid.md\:grid-cols-\[300px_1fr\] {
      grid-template-columns: 1fr !important;
   }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE GERAL — celular / tablet / desktop / console / TV
   O layout já usa Tailwind (mobile-first) + .container com max-width.
   Esta seção cobre as pontas que faltavam: telas muito pequenas (< 360px),
   telas muito grandes (TVs 1080p/4K e monitores ultrawide) e navegação por
   controle remoto / controle de console (foco visível em vez de hover).
   ══════════════════════════════════════════════════════════════════════════ */

/* Nunca deixa nada estourar a largura da tela, em nenhum dispositivo */
html, body {
   max-width: 100%;
   overflow-x: hidden;
}

img, video, svg, canvas {
   max-width: 100%;
   height: auto;
}

/* Tabelas (admin) sempre roláveis na horizontal em vez de quebrar o layout */
table {
   max-width: 100%;
}

/* ── Celulares bem pequenos (≤ 360px): folgas e fontes reduzidas ────────── */
@media (max-width: 360px) {
   .container {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
   }
   h1.font-display,
   .font-display.text-3xl {
      font-size: 1.6rem !important;
   }
   .btn {
      padding: .5rem .75rem;
      font-size: .8rem;
   }
}

/* ── Tablets (entre celular e desktop): grades intermediárias ───────────── */
@media (min-width: 641px) and (max-width: 1024px) {
   .container {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
   }
}

/* ── Telas grandes / monitores e TVs (Full HD, 1440p, 4K) ────────────────
   Mantém o conteúdo legível e centralizado em vez de esticar texto e
   imagens por toda a largura de uma TV ou monitor ultrawide. */
@media (min-width: 1536px) {
   .container {
      max-width: 1440px;
   }
   body {
      font-size: 1.05rem;
   }
}

@media (min-width: 1920px) {
   .container {
      max-width: 1600px;
   }
   body {
      font-size: 1.1rem;
   }
}

/* Telas gigantes (TV 4K/8K vistas de longe): tudo um pouco maior, com mais
   respiro, para continuar legível à distância de um sofá. */
@media (min-width: 2560px) {
   .container {
      max-width: 1800px;
   }
   body {
      font-size: 1.25rem;
   }
   .btn {
      padding: .65rem 1.25rem;
      font-size: 1.05rem;
   }
}

/* ── Navegação por controle (console / smart TV / teclado) ───────────────
   Esses dispositivos não têm mouse: o usuário navega por foco (D-pad,
   controle de console ou teclado), então o estado :focus-visible precisa
   ficar bem visível em links, botões e cartões clicáveis. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
   outline: 3px solid var(--ring);
   outline-offset: 2px;
   border-radius: 0.25rem;
}

/* ── Dispositivos sem ponteiro fino (touch: celular/tablet) ──────────────
   Garante área de toque confortável nos controles interativos. */
@media (pointer: coarse) {
   .btn,
   button,
   a.btn,
   input[type="checkbox"],
   input[type="radio"] {
      min-height: 2.5rem;
   }
   input[type="checkbox"],
   input[type="radio"] {
      min-width: 1.25rem;
      min-height: 1.25rem;
   }
}

/* ── Suporte a "notch" / áreas seguras (celulares com entalhe) ───────────── */
@supports (padding: max(0px)) {
   body {
      padding-left: env(safe-area-inset-left, 0);
      padding-right: env(safe-area-inset-right, 0);
   }
}

/* ── Orientação paisagem em celulares (altura curta) ──────────────────────
   Evita heros/seções de altura fixa em vh ocuparem a tela toda quando o
   celular está deitado. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
   section.relative.min-h-\[80vh\] {
      min-height: auto !important;
      padding-top: 2rem;
      padding-bottom: 2rem;
   }
}
/* ── Fixes/polish para novas features (cupons + admin) ───────────── */

/* Fallback para chevron em <details> abertos: garante rotação
   mesmo sem o custom-variant group-open. Aplica no SVG que o
   lucide gera a partir de <i data-lucide="chevron-down">. */
details[open] > summary .lucide-chevron-down,
details[open] > summary svg.lucide-chevron-down {
  transform: rotate(180deg);
}
details > summary .lucide-chevron-down,
details > summary svg.lucide-chevron-down {
  transition: transform .2s ease;
}
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* Sidebar admin — melhora densidade e hover */
aside [data-nav-group] > summary {
  border-radius: 0.375rem;
}
aside [data-nav-group][open] > summary {
  color: var(--foreground);
}
aside [data-nav-item] {
  position: relative;
}
aside [data-nav-item].bg-primary {
  box-shadow: 0 1px 0 0 color-mix(in oklab, var(--primary) 40%, transparent);
}
aside input#admNavSearch::placeholder {
  color: var(--muted-foreground);
  opacity: .8;
}

/* Bloco de critérios de cupom no checkout */
#cupomChecks {
  animation: c90-fade-in .15s ease-out;
}
#cupomChecks p {
  margin: 0 0 4px;
}
#cupomChecksList li {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1.4;
  padding: 2px 4px;
  border-radius: 4px;
}
#cupomChecksList li:hover {
  background: color-mix(in oklab, var(--foreground) 4%, transparent);
}
#cupomChecksList li .font-mono {
  min-width: 12px;
  text-align: center;
  font-weight: 700;
}

/* Cupom aplicado — reforça o card de sucesso */
#cupomAplicado {
  animation: c90-fade-in .2s ease-out;
  box-shadow: 0 4px 12px -6px color-mix(in oklab, var(--success) 40%, transparent);
}
#cupomAplicado #btnRemoverCupom {
  padding: 2px 6px;
  border-radius: 4px;
  transition: background .15s ease, color .15s ease;
}
#cupomAplicado #btnRemoverCupom:hover {
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
}

/* Linha "Cupom" no resumo do pedido */
#cupom-row {
  animation: c90-fade-in .2s ease-out;
}

/* Histórico de tentativas de cupom (admin/pedidos.ejs) */
[data-coupon-attempts],
details[data-coupon-attempts] > div,
.coupon-attempts-list {
  font-size: 12px;
}
.coupon-attempt-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 10px;
  align-items: baseline;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}
.coupon-attempt-row:first-child {
  border-top: 0;
}
.coupon-attempt-row .ca-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}
.coupon-attempt-row .ca-reason {
  color: var(--muted-foreground);
}
.coupon-attempt-row.is-ok .ca-code { color: var(--success); }
.coupon-attempt-row.is-fail .ca-code { color: var(--destructive); }

/* Toast: descrição do benefício em fonte um pouco menor */
.c90-toast-desc {
  font-size: 11px;
  opacity: .9;
  padding-top: 2px;
  border-top: 1px dashed color-mix(in oklab, currentColor 25%, transparent);
  margin-top: 4px;
}

@keyframes c90-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Admin — cards de promoção: destaque para produtos selecionados */
label.produto-item:has(input.produto-check:checked) {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 8%, var(--card));
}
label.produto-item .produto-versao {
  min-height: 22px;
}

/* Responsividade: sidebar admin em telas pequenas colapsa em drawer horizontal */
@media (max-width: 767px) {
  aside .rounded-lg.border.bg-card.p-2 {
    max-height: none;
  }
  aside [data-nav-group] > summary {
    padding-block: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MELHORIAS GLOBAIS (v2) — sem tocar na paleta
   Foco: 1) fix ícones em inputs   2) responsividade mobile
         3) polish de botões/cards/tabelas   4) consistência
   ═══════════════════════════════════════════════════════════════════ */

/* 1) Fix universal: quando .hidden convive com utilitários de display
   (flex/grid/inline-flex) no mesmo elemento, garantir que "hidden"
   ganhe. Sem isso, blocos toggle-áveis nascem visíveis.                */
.hidden { display: none !important; }

/* 2) Inputs dentro de .relative com ícone à esquerda:
   garante padding-left suficiente e centraliza o ícone verticalmente,
   mesmo que o template esqueça pl-8/pl-9.                              */
.relative > i[data-lucide],
.relative > svg.lucide {
   pointer-events: none;
}
.relative > i[data-lucide][class*="absolute"][class*="left-"],
.relative > svg.lucide[class*="absolute"][class*="left-"] {
   top: 70%;
   transform: translateY(-50%);
}
/* Se houver ícone absoluto à esquerda de um input/select/textarea
   irmão dentro do mesmo .relative, reserva 2.25rem de padding-left.   */
.relative:has(> [class*="absolute"][class*="left-"]) > input,
.relative:has(> [class*="absolute"][class*="left-"]) > select,
.relative:has(> [class*="absolute"][class*="left-"]) > textarea {
   padding-left: 2.25rem;
}
.relative:has(> [class*="absolute"][class*="right-"]) > input,
.relative:has(> [class*="absolute"][class*="right-"]) > select {
   padding-right: 2.25rem;
}

/* 3) Placeholder mais suave + fonte consistente                       */
input::placeholder, textarea::placeholder {
   color: var(--muted-foreground);
   opacity: .75;
}

/* 4) Focus ring mais elegante (usa --ring já definido, sem tocar cor) */
input:focus, textarea:focus, select:focus {
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 45%, transparent);
   border-color: var(--ring);
}

/* 5) Botões — padroniza altura e feedback tátil                       */
button, .btn {
   transition: background .15s, color .15s, border-color .15s,
               transform .1s, box-shadow .15s, opacity .15s;
}
button:active:not(:disabled), .btn:active:not(:disabled) {
   transform: scale(.98);
}
button:disabled, .btn:disabled, .btn[aria-disabled="true"] {
   opacity: .55;
   cursor: not-allowed;
}

/* Classes .btn base + variantes (caso algum template use)             */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.25;
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
   white-space: nowrap;
   user-select: none;
}
.btn-sm  { padding: 0.35rem 0.7rem;  font-size: 0.8rem;   border-radius: 0.4rem; }
.btn-lg  { padding: 0.75rem 1.4rem;  font-size: 1rem;     border-radius: 0.6rem; }
.btn-primary {
   background: var(--primary); color: var(--primary-foreground);
   box-shadow: 0 1px 2px 0 color-mix(in oklab, var(--primary) 30%, transparent);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline {
   background: transparent; color: var(--foreground);
   border-color: var(--border);
}
.btn-outline:hover { background: var(--muted); border-color: var(--ring); }
.btn-ghost {
   background: transparent; color: var(--foreground); border-color: transparent;
}
.btn-ghost:hover { background: var(--muted); }
.btn-destructive {
   background: var(--destructive); color: var(--destructive-foreground);
}
.btn-destructive:hover { filter: brightness(1.05); }
.btn-success {
   background: var(--success); color: var(--success-foreground);
}

/* 6) Cards — respiro e sombra sutil                                   */
.rounded-lg.border.bg-card,
.rounded-md.border.bg-card,
.rounded-xl.border.bg-card {
   box-shadow: 0 1px 2px 0 color-mix(in oklab, #000 8%, transparent);
   transition: box-shadow .2s, transform .2s;
}

/* 7) Tabelas: torna qualquer <table> responsiva (scroll horizontal)   */
table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   font-size: 0.875rem;
}
th, td {
   padding: 0.6rem 0.75rem;
   text-align: left;
   vertical-align: middle;
   border-bottom: 1px solid var(--border);
}
th {
   font-weight: 600;
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--muted-foreground);
   background: color-mix(in oklab, var(--muted) 60%, transparent);
   position: sticky; top: 0; z-index: 1;
}
tbody tr:hover td {
   background: color-mix(in oklab, var(--muted) 40%, transparent);
}
tbody tr:last-child td { border-bottom: 0; }
/* Wrapper para scroll horizontal em mobile                            */
.table-wrap, .overflow-x-auto > table {
   min-width: 640px;
}
.table-wrap {
   overflow-x: auto;
   border: 1px solid var(--border);
   border-radius: 0.5rem;
}

/* 8) Container respirável em qualquer viewport                        */
.container {
   width: 100%;
   margin-inline: auto;
   padding-inline: 1rem;
}
@media (min-width: 640px)  { .container { max-width: 640px; padding-inline: 1.25rem; } }
@media (min-width: 768px)  { .container { max-width: 768px; padding-inline: 1.5rem;  } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1200px; } }
@media (min-width: 1536px) { .container { max-width: 1360px; } }

/* 9) Header/navbar em mobile                                          */
@media (max-width: 767px) {
   header .container,
   header > div,
   nav.container {
      gap: 0.5rem;
   }
   /* garante que ícones-badge do header (carrinho/notif) fiquem visíveis */
   header .absolute.-top-1.-right-1 { transform: none; }
}

/* 10) Grid genérico — colunas fluidas em mobile                       */
@media (max-width: 640px) {
   .grid.md\:grid-cols-2,
   .grid.md\:grid-cols-3,
   .grid.md\:grid-cols-4,
   .grid.lg\:grid-cols-3,
   .grid.lg\:grid-cols-4 { grid-template-columns: 1fr; }

   /* Formulários no admin/checkout: campos ocupam a linha inteira */
   .grid.md\:grid-cols-\[240px_1fr\] { grid-template-columns: 1fr; }
   aside.md\:sticky {
      position: relative !important;
      top: auto !important;
   }
   /* Reduz densidade em cards grandes */
   .p-6 { padding: 1rem; }
   .p-8 { padding: 1.25rem; }
   .gap-6 { gap: 1rem; }
   .gap-8 { gap: 1.25rem; }
   h1 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
   h2 { font-size: clamp(1.15rem, 5vw, 1.5rem); }
}

/* 11) Imagens fluidas por padrão                                      */
img { max-width: 100%; height: auto; }

/* 12) Product card — hover mais elegante                              */
.product-card,
a.block.group.rounded-lg.border.bg-card,
.rounded-lg.border.bg-card.overflow-hidden {
   transition: transform .2s, box-shadow .2s, border-color .2s;
}
.product-card:hover,
a.block.group.rounded-lg.border.bg-card:hover,
.rounded-lg.border.bg-card.overflow-hidden:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 24px -12px color-mix(in oklab, var(--primary) 30%, transparent);
   border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
}

/* 13) Toast — largura no mobile                                       */
@media (max-width: 480px) {
   #toast-container, .c90-toast, .toast {
      left: 0.75rem !important;
      right: 0.75rem !important;
      max-width: none !important;
   }
}

/* 14) Dropdowns do header no mobile (menu do usuário/notif)           */
@media (max-width: 480px) {
   #notif-dropdown, #user-menu-dropdown, .dropdown-menu {
      position: fixed !important;
      left: 0.75rem !important;
      right: 0.75rem !important;
      top: 4rem !important;
      width: auto !important;
      max-height: calc(100dvh - 5rem);
      overflow-y: auto;
   }
}

/* 15) Modais/dialogs — respiro em mobile                              */
.modal, dialog, .rounded-lg.border.bg-card.p-5.max-w-md,
[role="dialog"] {
   padding: clamp(1rem, 4vw, 1.5rem);
}
/* @media (max-width: 480px) {
   dialog, [role="dialog"], .modal {
      inset: 0.5rem !important;
      width: calc(100vw - 1rem) !important;
      max-width: none !important;
   }
} */

/* 16) Scrollbar mais fino no dark                                     */
* {
   scrollbar-width: thin;
   scrollbar-color: color-mix(in oklab, var(--muted-foreground) 40%, transparent) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
   background: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
   border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
   background: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
}

/* 17) Links com foco visível para acessibilidade                       */
a:focus-visible, button:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
   border-radius: 0.25rem;
}

/* 18) Selection                                                        */
::selection {
   background: color-mix(in oklab, var(--primary) 40%, transparent);
   color: var(--primary-foreground);
}

/* 19) Badges/chips utilitárias                                         */
.chip {
   display: inline-flex; align-items: center; gap: 0.25rem;
   padding: 0.15rem 0.5rem; border-radius: 999px;
   font-size: 0.7rem; font-weight: 600;
   background: color-mix(in oklab, var(--muted) 80%, transparent);
   color: var(--foreground);
   border: 1px solid var(--border);
}
.chip-success { background: color-mix(in oklab, var(--success) 20%, transparent); color: var(--success); border-color: color-mix(in oklab, var(--success) 40%, transparent); }
.chip-danger  { background: color-mix(in oklab, var(--destructive) 20%, transparent); color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }
.chip-warning { background: color-mix(in oklab, var(--warning) 25%, transparent); color: var(--warning); border-color: color-mix(in oklab, var(--warning) 50%, transparent); }
.chip-info    { background: color-mix(in oklab, var(--primary) 15%, transparent); color: var(--primary); border-color: color-mix(in oklab, var(--primary) 35%, transparent); }

/* 20) Ícones dentro de labels/spans não devem ter tamanho maior que a
      linha — impede "gigantes" enquanto o Lucide ainda não renderizou */
i[data-lucide] { display: inline-block; width: 1em; height: 1em; }
svg.lucide { flex-shrink: 0; }

/* 21) Melhorias de admin — tabelas com scroll suave                    */
main .rounded-lg.border.bg-card:has(> table),
main .rounded-md.border.bg-card:has(> table) {
   overflow-x: auto;
}

/* 22) Botão de fechar (X) em modais/toasts — área de clique maior       */
.close, [data-close], [aria-label="close"], [aria-label="Fechar"] {
   min-width: 32px; min-height: 32px;
   display: inline-flex; align-items: center; justify-content: center;
   border-radius: 999px;
}
.close:hover, [data-close]:hover {
   background: color-mix(in oklab, var(--foreground) 8%, transparent);
}

/* 23) Skeleton opcional                                                */
.skeleton {
   background: linear-gradient(90deg,
      color-mix(in oklab, var(--muted) 60%, transparent) 0%,
      color-mix(in oklab, var(--muted) 90%, transparent) 50%,
      color-mix(in oklab, var(--muted) 60%, transparent) 100%);
   background-size: 200% 100%;
   animation: c90-shimmer 1.4s ease-in-out infinite;
   border-radius: 0.375rem;
}
@keyframes c90-shimmer {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
}

/* 24) Corrige overflow horizontal geral em mobile                      */
html, body { overflow-x: hidden; max-width: 100vw; }

/* 25) Sticky bottom bar (checkout mobile) — safe area                  */
@supports (padding: max(0px)) {
   .sticky.bottom-0, .fixed.bottom-0 {
      padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
   }
}

/* ═══════════════════════════════════════════════════════════════════
   MELHORIAS v3 — AUDITORIA FINAL
   Foco: 1) inputs c/ ícones à direita   2) mensagens de erro padrão
         3) admin sidebar drawer no mobile   4) modais/dropdowns iOS
   Sem tocar na paleta.
   ═══════════════════════════════════════════════════════════════════ */

/* 26) Ícones ABSOLUTOS (à esquerda ou direita) dentro de qualquer wrapper
   .relative — não só imediatos. Cobre casos onde o ícone é filho de um
   subcontainer (ex: <div class="relative"><span><i data-lucide/></span>...) */
.relative i[data-lucide][class*="absolute"],
.relative svg.lucide[class*="absolute"] {
   pointer-events: none;
   top: 50%;
   transform: translateY(-50%);
}
/* Fallback: se o input for irmão direto de um ícone absoluto e não tiver
   pl-*, garante padding-left mínimo — impede sobreposição total. */
.relative > [class*="absolute"][class*="left-"] + input:not([class*="pl-"]),
.relative > [class*="absolute"][class*="left-"] + select:not([class*="pl-"]),
.relative > [class*="absolute"][class*="left-"] + textarea:not([class*="pl-"]) {
   padding-left: 2.25rem;
}

/* 27) Padding automático em inputs de busca (type=search) que costumam
   receber ícone — evita sobreposição quando o template esquece pl-*. */
input[type="search"]:not([class*="pl-"]) {
   padding-left: 0.75rem;
}

/* 28) MENSAGENS DE ERRO / VALIDAÇÃO — padrão único                     */
.form-error,
.field-error,
.error-message,
[data-error]:not(:empty) {
   display: flex;
   align-items: flex-start;
   gap: 0.4rem;
   margin-top: 0.35rem;
   padding: 0.4rem 0.6rem;
   font-size: 0.75rem;
   line-height: 1.35;
   color: var(--destructive);
   background: color-mix(in oklab, var(--destructive) 8%, transparent);
   border-left: 3px solid var(--destructive);
   border-radius: 0.35rem;
}
.form-error::before,
.field-error::before {
   content: "⚠";
   font-size: 0.85rem;
   line-height: 1;
   flex-shrink: 0;
}

/* Input inválido — borda destacada + ring destructive                  */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
input.is-invalid, select.is-invalid, textarea.is-invalid,
input:user-invalid, textarea:user-invalid {
   border-color: var(--destructive) !important;
}
input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
input.is-invalid:focus, select.is-invalid:focus, textarea.is-invalid:focus,
input:user-invalid:focus, textarea:user-invalid:focus {
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 30%, transparent) !important;
}

/* Estado de sucesso opcional (validação positiva)                      */
.form-success, .field-success {
   display: flex; align-items: center; gap: 0.4rem;
   margin-top: 0.35rem;
   padding: 0.35rem 0.55rem;
   font-size: 0.75rem;
   color: var(--success);
   background: color-mix(in oklab, var(--success) 10%, transparent);
   border-left: 3px solid var(--success);
   border-radius: 0.35rem;
}

/* Alerta global (flash) padronizado                                    */
.flash-msg {
   padding: 0.6rem 0.85rem;
   border-radius: 0.5rem;
   font-size: 0.85rem;
   display: flex; align-items: flex-start; gap: 0.5rem;
}

/* 29) ADMIN SIDEBAR — vira drawer horizontal colapsável em mobile      */
@media (max-width: 767px) {
   /* Botão toggle (adicionado via layout) */
   .admin-nav-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.5rem 0.85rem;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 0.5rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--foreground);
      width: 100%;
      justify-content: space-between;
      cursor: pointer;
      margin-bottom: 0.75rem;
   }
   .admin-nav-toggle i[data-lucide] { transition: transform .2s; }
   .admin-nav-toggle[aria-expanded="true"] i[data-lucide="chevron-down"] {
      transform: rotate(180deg);
   }
   /* Sidebar colapsada por padrão em mobile */
   aside.admin-sidebar[data-collapsed="true"] > .rounded-lg.border {
      display: none;
   }
   /* Densidade menor dentro do sidebar em mobile */
   aside .rounded-lg.border.bg-card.p-2 {
      padding: 0.4rem;
   }
   aside details[data-nav-group] > summary { padding-block: 0.55rem; }
}
@media (min-width: 768px) {
   .admin-nav-toggle { display: none; }
}

/* 30) DROPDOWNS — comportamento sane em telas pequenas + iOS notch     */
@media (max-width: 640px) {
   #notif-dropdown, #user-menu-dropdown, .dropdown-menu {
      position: fixed !important;
      left: env(safe-area-inset-left, 0.75rem) !important;
      right: env(safe-area-inset-right, 0.75rem) !important;
      top: 4rem !important;
      width: auto !important;
      max-height: calc(100dvh - 5rem - env(safe-area-inset-bottom, 0px));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
   }
}

/* 31) MODAIS — respeita safe-area, evita overflow, cabe no iOS         */
dialog, [role="dialog"], .modal {
   max-height: calc(100dvh - 2rem);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
   dialog #fs_estados_ui{
      display: flex;
      flex-direction: column;
   }
}
/* Backdrop mais elegante */
dialog::backdrop {
   background: color-mix(in oklab, #000 65%, transparent);
   backdrop-filter: blur(4px);
}

/* 32) iOS safe-area no header fixo                                     */
@supports (padding: max(0px)) {
   header.sticky, header.fixed {
      padding-top: max(0px, env(safe-area-inset-top));
   }
}

/* 33) Previne zoom automático no iOS ao focar inputs (<16px)           */
@media (max-width: 640px) {
   input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
   select, textarea {
      font-size: max(16px, 0.875rem);
   }
}

/* 34) Textarea — mínimo confortável e resize apenas vertical           */
textarea {
   resize: vertical;
   min-height: 5rem;
}

/* 35) Select nativo — seta consistente com o tema                      */
select:not([multiple]) {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
   background-repeat: no-repeat;
   background-position: right 0.65rem center;
   background-size: 12px;
   padding-right: 2rem;
   appearance: none;
   -webkit-appearance: none;
}