/* =====================================================================
  Design System v3 — Portal Andradina Visual
  ---------------------------------------------------------------------
  - Paleta: laranja + preto grafite + branco
  - Tipografia: Poppins (display) + Inter (body)
  - Sombras suaves e componentes arredondados
  ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Marca — laranja profissional */
  --primary: 16 92% 52%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 24 100% 60%;
  --primary-dark: 14 88% 43%;

  /* Superfícies */
  --background: 30 25% 98%;
  --foreground: 222 47% 8%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 8%;
  --card-hover: 24 100% 98%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 39% 11%;

  /* Neutros */
  --secondary: 24 45% 96%;
  --secondary-foreground: 222 47% 8%;

  --muted: 24 35% 95%;
  --muted-foreground: 220 10% 42%;

  /* Acento institucional em preto grafite */
  --accent: 222 47% 8%;
  --accent-foreground: 0 0% 100%;
  --accent-light: 220 20% 18%;

  --destructive: 0 78% 55%;
  --destructive-foreground: 0 0% 100%;
  --success: 148 58% 38%;
  --success-foreground: 0 0% 100%;

  --border: 24 28% 88%;
  --input: 24 28% 88%;
  --ring: 16 92% 52%;

  --radius: 0.85rem;

  /* Gradientes de marca */
  --gradient-primary: linear-gradient(135deg, hsl(16 92% 52%) 0%, hsl(24 100% 58%) 100%);
  --gradient-primary-soft: linear-gradient(135deg, hsl(24 100% 97%) 0%, hsl(0 0% 100%) 100%);
  --gradient-accent: linear-gradient(135deg, hsl(222 47% 8%) 0%, hsl(220 24% 16%) 100%);
  --gradient-hero: radial-gradient(1200px 500px at 15% -10%, hsl(16 92% 52% / 0.14) 0%, transparent 62%),
                   radial-gradient(900px 400px at 90% 10%, hsl(222 47% 8% / 0.08) 0%, transparent 60%),
                   linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(30 25% 98%) 100%);
  --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(24 100% 99%) 100%);
  --gradient-dark: linear-gradient(180deg, hsl(222 47% 11%) 0%, hsl(222 47% 8%) 100%);

  /* Sombras em camadas */
  --shadow-sm: 0 1px 2px hsl(222 32% 12% / 0.05), 0 1px 3px hsl(16 92% 52% / 0.04);
  --shadow-md: 0 4px 12px -2px hsl(222 32% 12% / 0.08), 0 2px 8px -3px hsl(16 92% 52% / 0.10);
  --shadow-lg: 0 12px 32px -8px hsl(222 32% 12% / 0.12), 0 8px 18px -10px hsl(16 92% 52% / 0.20);
  --shadow-xl: 0 24px 60px -16px hsl(222 32% 12% / 0.22);
  --shadow-glow: 0 0 0 1px hsl(var(--primary) / 0.12), 0 14px 42px -16px hsl(var(--primary) / 0.48);
  --shadow-inner-soft: inset 0 1px 0 hsl(0 0% 100% / 0.6);

  /* Transições */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: hsl(var(--foreground));
}

.font-display { font-family: 'Poppins', 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; }

/* Seleção de texto na cor da marca */
::selection { background: hsl(var(--primary) / 0.18); color: hsl(var(--foreground)); }

/* Foco acessível */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.55);
  outline-offset: 2px;
  border-radius: calc(var(--radius) - 4px);
}

/* Scrollbar refinada */
* { scrollbar-width: thin; scrollbar-color: hsl(var(--muted-foreground) / 0.35) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.28); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Container */
.container { width: 100%; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1400px) { .container { max-width: 1400px; } }

/* ---------- Utilitários ---------- */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

.gradient-primary      { background: var(--gradient-primary); }
.gradient-primary-soft { background: var(--gradient-primary-soft); }
.gradient-hero         { background: var(--gradient-hero); }
.gradient-accent       { background: var(--gradient-accent); }
.gradient-dark         { background: var(--gradient-dark); }

.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shadow-card       { box-shadow: var(--shadow-md); }
.shadow-card-hover { box-shadow: var(--shadow-lg); }
.shadow-elevated   { box-shadow: var(--shadow-xl); }
.shadow-glow       { box-shadow: var(--shadow-glow); }

/* Glassmorphism sutil */
.glass {
  background: hsl(0 0% 100% / 0.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid hsl(0 0% 100% / 0.6);
  box-shadow: var(--shadow-md);
}
.glass-dark {
  background: hsl(222 32% 10% / 0.62);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid hsl(0 0% 100% / 0.06);
}

/* Cartão moderno reutilizável */
.card-modern {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-md);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.card-modern:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / 0.25);
  box-shadow: var(--shadow-lg);
}

/* Divisor com brilho */
.hr-soft {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, hsl(var(--border)), transparent);
}

/* Botões modernos */
.btn-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.25rem;
  border-radius: calc(var(--radius) - 0.15rem);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1;
  transition: transform .2s var(--ease-out), box-shadow .3s var(--ease-out), background .2s var(--ease-out), color .2s;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
}
.btn-modern:active { transform: translateY(1px); }
.btn-primary {
  background: var(--gradient-primary);
  color: hsl(var(--primary-foreground));
  box-shadow: 0 8px 20px -8px hsl(var(--primary) / 0.6), var(--shadow-inner-soft);
}
.btn-primary:hover { box-shadow: 0 14px 30px -10px hsl(var(--primary) / 0.7), var(--shadow-inner-soft); }
.btn-accent {
  background: var(--gradient-accent);
  color: hsl(var(--accent-foreground));
  box-shadow: 0 8px 20px -8px hsl(var(--accent) / 0.55), var(--shadow-inner-soft);
}
.btn-outline {
  background: hsl(var(--card));
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.4);
}
.btn-outline:hover { background: hsl(var(--primary) / 0.06); border-color: hsl(var(--primary) / 0.7); }
.btn-ghost { background: transparent; color: hsl(var(--muted-foreground)); }
.btn-ghost:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

/* Chips / Badges */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .75rem; font-weight: 600;
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.18);
}
.chip-accent { background: hsl(var(--accent) / 0.12); color: hsl(30 90% 30%); border-color: hsl(var(--accent) / 0.3); }
.chip-success{ background: hsl(var(--success) / 0.12); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.28); }
.chip-danger { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.3); }
.chip-muted  { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }

/* Inputs modernos (aplica-se aos formulários sem quebrar estilos utilitários) */
.input-modern,
form .input-modern {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: calc(var(--radius) - 0.2rem);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--input));
  color: hsl(var(--foreground));
  font-size: .925rem;
  transition: border-color .2s, box-shadow .25s var(--ease-out), background .2s;
  box-shadow: var(--shadow-sm);
}
.input-modern:hover { border-color: hsl(var(--primary) / 0.5); }
.input-modern:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.15);
  background: hsl(var(--card));
}

/* Melhora inputs padrão (rounded-lg + border-input) já usados no projeto */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"], input[type="date"],
input[type="time"], select, textarea {
  transition: border-color .2s, box-shadow .25s var(--ease-out), background .2s;
}
input:where([type="text"], [type="email"], [type="url"], [type="tel"], [type="password"], [type="search"], [type="number"], [type="date"], [type="time"]):focus,
select:focus, textarea:focus {
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.14);
}

/* Sidebar do painel — refinamento visual sem quebrar classes utilitárias */
aside.bg-gray-900 {
  background: linear-gradient(180deg, hsl(222 40% 11%) 0%, hsl(222 40% 8%) 100%) !important;
  box-shadow: inset -1px 0 0 hsl(0 0% 100% / 0.04), var(--shadow-xl);
}
aside .sidebar-section-title { color: hsl(220 15% 55%) !important; }
aside a.bg-gray-800 {
  background: linear-gradient(90deg, hsl(var(--primary) / 0.22), hsl(var(--primary) / 0.08)) !important;
  box-shadow: inset 2px 0 0 hsl(var(--primary));
  color: #fff !important;
}

/* Line-clamp helpers */
.line-clamp-1, .line-clamp-2, .line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

/* Autocomplete existente */
.busca-ac-mark {
  padding: 0; margin: 0; border: 0; display: inline;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: hsl(var(--accent) / 0.35);
  border-radius: 3px;
}
.busca-ac-panel {
  background-color: hsl(var(--card));
  box-shadow: var(--shadow-lg);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius));
}

/* ---------- Animações ---------- */
@keyframes float        { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulse-soft   { 0%,100%{opacity:1} 50%{opacity:.7} }
@keyframes slide-up     { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-in      { from{opacity:0} to{opacity:1} }
@keyframes slide-in-bot { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes shimmer      { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.animate-float           { animation: float 3s ease-in-out infinite; }
.animate-pulse-soft      { animation: pulse-soft 2s ease-in-out infinite; }
.animate-slide-up        { animation: slide-up .55s var(--ease-out) forwards; }
.animate-fade-in         { animation: fade-in .3s var(--ease-out) forwards; }
.animate-slide-in-bottom { animation: slide-in-bot .45s var(--ease-out) forwards; }

.stagger-1 { animation-delay: .08s; }
.stagger-2 { animation-delay: .16s; }
.stagger-3 { animation-delay: .24s; }
.stagger-4 { animation-delay: .32s; }
.stagger-5 { animation-delay: .40s; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / 0.6) 37%, hsl(var(--muted)) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: calc(var(--radius) - 0.3rem);
}

/* Reduz motion para usuários que preferem */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}