/* ==========================================================================
   TI UAI - Estilos Visuais "Eco-Tech Kraft"
   Harmonia: Verde Floresta & Esmeralda + Azul Marinho & Ciano + Textura Papel Reciclado
   ========================================================================== */

/* Variáveis de Cor e Identidade Visual */
:root {
  /* Tons de Papel Reciclado & Kraft */
  --bg-paper-light: #FAF7F0;
  --bg-paper-card: #FFFFFF;
  --bg-paper-card-alt: #F4EFE6;
  --bg-kraft: #EFE8DA;
  --border-paper: #E2D9C8;
  --border-paper-strong: #CFC2AC;
  --text-ink-dark: #192720;
  --text-ink-muted: #4F5E56;

  /* Tons de Verde (Sustentabilidade, Zero Papel & ESG) */
  --eco-forest: #123826;
  --eco-emerald: #059669;
  --eco-emerald-hover: #047857;
  --eco-jade: #10B981;
  --eco-sage: #4E6E5D;
  --eco-mint-bg: #E8F7F0;
  --eco-mint-border: #A7F3D0;

  /* Tons de Azul (Tecnologia, Engenharia & Confiabilidade) */
  --tech-navy: #0B2545;
  --tech-blue: #0284C7;
  --tech-blue-hover: #0369A1;
  --tech-cyan: #06B6D4;
  --tech-ice-bg: #F0F9FF;
  --tech-ice-border: #BAE6FD;
}

/* Fundo Geral com Textura Sutil de Fibras de Papel Reciclado */
body {
  background-color: var(--bg-paper-light);
  color: var(--text-ink-dark);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-image: 
    radial-gradient(rgba(18, 56, 38, 0.04) 1px, transparent 1px),
    radial-gradient(rgba(2, 132, 199, 0.04) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px;
  background-position: 0 0, 12px 12px;
}

/* Efeito Tátil de Cartão de Papel Reciclado / Kraft */
.paper-card {
  background: var(--bg-paper-card);
  border: 1px solid var(--border-paper);
  box-shadow: 0 4px 18px -2px rgba(18, 56, 38, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.paper-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-paper-strong);
  box-shadow: 0 12px 28px -4px rgba(18, 56, 38, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.paper-card-kraft {
  background: linear-gradient(145deg, #FBF8F2 0%, #F4ECE1 100%);
  border: 1px dashed var(--border-paper-strong);
}

/* Selo Estilo Carimbo Sustentável ("Eco Stamp") */
.eco-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  border: 1.5px dashed var(--eco-emerald);
  background-color: var(--eco-mint-bg);
  color: var(--eco-forest);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tech-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  border: 1.5px dashed var(--tech-blue);
  background-color: var(--tech-ice-bg);
  color: var(--tech-navy);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Degradê Eco-Tech Exclusivo (Verde Esmeralda para Azul Ciano) */
.text-eco-tech-gradient {
  background: linear-gradient(120deg, #059669 0%, #0284C7 60%, #0C4A6E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-eco-tech-gradient {
  background: linear-gradient(135deg, #123826 0%, #0B2545 100%);
}

.bg-eco-tech-vibrant {
  background: linear-gradient(135deg, #059669 0%, #0284C7 100%);
}

/* Botões com Toque Tátil */
.btn-primary-eco {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3);
  transition: all 0.2s ease-in-out;
}
.btn-primary-eco:hover {
  background: linear-gradient(135deg, #047857 0%, #065F46 100%);
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.45);
  transform: translateY(-1px);
}

.btn-primary-blue {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
  transition: all 0.2s ease-in-out;
}
.btn-primary-blue:hover {
  background: linear-gradient(135deg, #0369A1 0%, #075985 100%);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
  transform: translateY(-1px);
}

.btn-secondary-kraft {
  background: #FFFFFF;
  color: var(--text-ink-dark);
  border: 1px solid var(--border-paper);
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}
.btn-secondary-kraft:hover {
  background: var(--bg-paper-card-alt);
  border-color: var(--border-paper-strong);
  transform: translateY(-1px);
}

/* Tags de Fibras e Recortes Estilo Caderno / Kraft */
.tag-kraft {
  background-color: var(--bg-kraft);
  border: 1px solid var(--border-paper-strong);
  color: var(--text-ink-dark);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

/* Scrollbar com temática Kraft / Eco */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-track {
  background: var(--bg-paper-light);
}
::-webkit-scrollbar-thumb {
  background: #CBD5C0;
  border-radius: 9999px;
  border: 2px solid var(--bg-paper-light);
}
::-webkit-scrollbar-thumb:hover {
  background: #9DB4A0;
}

/* Dialog / Modal Styling Nativo */
dialog::backdrop {
  background: rgba(11, 37, 69, 0.55);
  backdrop-filter: blur(4px);
}

/* Indicadores de Status */
.status-pill-green {
  background-color: #DEF7EC;
  color: #03543F;
  border: 1px solid #BCF0DA;
}
.status-pill-blue {
  background-color: #E1EFFE;
  color: #1E429F;
  border: 1px solid #B4C6FC;
}
.status-pill-amber {
  background-color: #FEF08A;
  color: #713F12;
  border: 1px solid #FDE047;
}

/* Transição Fluida e Bonita do Menu Mobile */
#mobile-menu {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top center;
}
#mobile-menu.menu-closed {
  opacity: 0;
  max-height: 0;
  transform: translateY(-8px) scaleY(0.96);
  pointer-events: none;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-width: 0 !important;
  visibility: hidden;
}
#mobile-menu.menu-open {
  opacity: 1;
  max-height: 600px;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
  overflow: visible;
  visibility: visible;
}