/**
 * PLIN ERP — Responsive Core CSS
 * Tipografia fluida, alvos de toque, breakpoints, skeletons
 * Incluir em todas as páginas APÓS o CSS específico do módulo.
 */

/* ══ TOKENS FLUIDOS ══ */
:root {
  --fs-xs:  clamp(11px, 2.5vw, 12px);
  --fs-sm:  clamp(12px, 2.8vw, 13px);
  --fs-md:  clamp(13px, 3vw, 14px);
  --fs-lg:  clamp(15px, 3.5vw, 16px);
  --fs-xl:  clamp(18px, 4vw, 20px);
  --fs-2xl: clamp(22px, 5vw, 28px);
  --sp-xs:  clamp(4px, 1vw, 6px);
  --sp-sm:  clamp(6px, 1.5vw, 8px);
  --sp-md:  clamp(10px, 2vw, 14px);
  --sp-lg:  clamp(14px, 3vw, 20px);
  --sp-xl:  clamp(20px, 4vw, 32px);
  --touch-min: 44px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* ══ TIPOGRAFIA BASE ══ */
body { font-size: var(--fs-md); -webkit-text-size-adjust: 100%; }

/* ══ ALVOS DE TOQUE MÍNIMO ══ */
@media (pointer: coarse) {
  button, .btn, [onclick], [role="button"],
  input[type="checkbox"], input[type="radio"] {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
  }
  input[type="text"], input[type="search"], input[type="number"],
  input[type="tel"], input[type="email"], input[type="password"],
  input[type="time"], input[type="date"], textarea, select {
    min-height: 40px;
    font-size: 16px !important; /* evita zoom automático no iOS */
  }
}

/* ══ SKELETON LOADING ══ */
@keyframes skeletonPulse {
  0%, 100% { opacity: .06; }
  50% { opacity: .12; }
}
.skeleton {
  background: currentColor;
  opacity: .08;
  border-radius: var(--radius-sm);
  animation: skeletonPulse 1.5s ease-in-out infinite;
}
.skeleton-text { height: 12px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-text.w75 { width: 75%; }
.skeleton-text.w50 { width: 50%; }
.skeleton-text.w30 { width: 30%; }
.skeleton-card {
  height: 60px;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 12px;
}
.skeleton-grid .skeleton-card { height: 80px; }

/* ══ TRANSIÇÕES SUAVES ══ */
.fade-in { animation: fadeIn .2s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ══ SCROLL OTIMIZADO ══ */
.scroll-y {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.scroll-y::-webkit-scrollbar { width: 3px; }
.scroll-y::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 99px; }

/* ══ CONTENT VISIBILITY (performance em listas longas) ══ */
.cv-auto { content-visibility: auto; contain-intrinsic-size: auto 60px; }

/* ══ BREAKPOINTS ══ */

/* Mobile pequeno (360px) */
@media (max-width: 380px) {
  :root {
    --fs-xs: 10px; --fs-sm: 11px; --fs-md: 12px;
    --fs-lg: 14px; --fs-xl: 16px;
    --sp-md: 8px; --sp-lg: 12px;
  }
}

/* Mobile (até 480px) */
@media (max-width: 480px) {
  /* Tabelas responsivas */
  table { display: block; overflow-x: auto; }
  /* Cards full-width */
  .card, .sec-card { margin-left: 0; margin-right: 0; border-radius: var(--radius-sm); }
  /* Modais full-screen no mobile */
  .modal-sheet { border-radius: 0 !important; max-height: 100dvh !important; }
  /* Grids em 1 coluna quando muito estreito */
  .fgrid { grid-template-columns: 1fr !important; }
}

/* Tablet (768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .fgrid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  :root { --touch-min: 36px; }
}

/* ══ DARK SCROLLBAR GLOBAL ══ */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; }

/* ══ SAFE AREA (notch) ══ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .modal-footer, .nav-tabs, .cart-ftr, .fab {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* ══ REDUZIR MOTION ══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══ HEIGHT SEGURO (evita problemas com 100vh no mobile) ══ */
.full-h { height: 100dvh; height: 100vh; } /* dvh com fallback */