/*
  ═══════════════════════════════════════════════════════
  01-BASE.CSS
  ═══════════════════════════════════════════════════════
  Base global: reset, variáveis de tema, tipografia e classes utilitárias usadas por todo o app.

  COMO EDITAR:
  - Altere variáveis de cor, espaçamento e sombras preferencialmente em 01-base.css.
  - Evite duplicar classes: procure primeiro se já existe um componente equivalente.
  - Comentários com 'AJUSTE AQUI' indicam pontos comuns de personalização.
*/

/* ══════════════════════════════════════════════════════
   MEU MÊS — Professional Design System
   ══════════════════════════════════════════════════════ */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      /* AJUSTE AQUI: paleta, raios, sombras e medidas globais do sistema. */
      :root {
        /* Brand palette */
        --navy: #123a63;
        --navy2: #1f5f99;
        --navy3: #2f80c9;
        --teal: #3b82f6;
        --teal-d: #2563eb;
        --teal-lt: #eaf4ff;
        --teal-b: #93c5fd;
        --bg: #f4f9ff;
        --surface: #ffffff;
        --surface-2: #f8fbff;
        --grey: #5c6b7a;
        --grey-l: #d8e4f0;
        --grey-xl: #eaf1f8;
        --red: #be3a31;
        --red-t: #fef2f1;
        --amber: #a85e10;
        --amb-t: #fff6e8;
        --green: #0d7a56;
        --grn-t: #ebf8f2;
        --blue: #1d4ed8;
        --blue-t: #eff4ff;
        --cat-e: #1d4ed8;
        --cat-e-t: #eff4ff;
        --cat-p: #6d28d9;
        --cat-p-t: #f4f0ff;
        --cat-v: #0e7490;
        --cat-v-t: #e8fbff;
        --cat-f: #0d8f6e;
        --cat-f-t: #ebf8f4;
        /* Radius */
        --r: 8px;
        --r-lg: 12px;
        --r-xl: 18px;
        --r-2xl: 24px;
        /* Shadows */
        --sh:
          0 1px 3px rgba(14, 33, 64, 0.06), 0 1px 2px rgba(14, 33, 64, 0.04);
        --sh-md:
          0 4px 12px rgba(14, 33, 64, 0.08), 0 2px 4px rgba(14, 33, 64, 0.04);
        --sh-lg:
          0 12px 28px rgba(14, 33, 64, 0.1), 0 4px 8px rgba(14, 33, 64, 0.04);
        --sh-xl: 0 24px 48px rgba(14, 33, 64, 0.14);
        /* Layout */
        --sidebar: 260px;
        --trans: 0.16s ease;
      }
      html {
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      /* Corpo da aplicação: fonte padrão, fundo geral e comportamento base da página. */
      body {
        font-family: "DM Sans", system-ui, sans-serif;
        background: var(--bg);
        color: var(--navy);
        min-height: 100vh;
        overflow-x: hidden;
        line-height: 1.5;
      }
      button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        background: none;
      }
      input,
      textarea,
      select {
        font-family: inherit;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .hidden {
        display: none !important;
      }

      /* ── Typography ── */
      .display {
        font-family: "DM Serif Display", Georgia, serif;
        font-style: normal;
      }
      .eyebrow {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--teal);
        margin-bottom: 6px;
        display: block;
      }
      .label {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--grey);
        display: block;
        margin-bottom: 6px;
      }
      .body-text {
        font-size: 14px;
        color: var(--grey);
        line-height: 1.7;
        margin-bottom: 10px;
      }

      /* ── Layout Utilities ── */
      .flex {
        display: flex;
      }
      .flex-col {
        flex-direction: column;
      }
      .items-center {
        align-items: center;
      }
      .justify-between {
        justify-content: space-between;
      }
      .justify-center {
        justify-content: center;
      }
      .flex-1 {
        flex: 1;
      }
      .gap-4 {
        gap: 4px;
      }
      .gap-8 {
        gap: 8px;
      }
      .gap-12 {
        gap: 12px;
      }
      .gap-16 {
        gap: 16px;
      }
      .grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .grid-3 {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
      }
      .grid-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      .w-full {
        width: 100%;
      }
      .text-center {
        text-align: center;
      }
      .text-right {
        text-align: right;
      }
      .mt-4 {
        margin-top: 4px;
      }
      .mt-8 {
        margin-top: 8px;
      }
      .mt-12 {
        margin-top: 12px;
      }
      .mt-16 {
        margin-top: 16px;
      }
      .mt-24 {
        margin-top: 24px;
      }
      .mt-32 {
        margin-top: 32px;
      }
      .mb-4 {
        margin-bottom: 4px;
      }
      .mb-8 {
        margin-bottom: 8px;
      }
      .mb-12 {
        margin-bottom: 12px;
      }
      .mb-16 {
        margin-bottom: 16px;
      }
      .mb-24 {
        margin-bottom: 24px;
      }
      .mb-32 {
        margin-bottom: 32px;
      }
      .text-sm {
        font-size: 13px;
      }
      .text-xs {
        font-size: 11px;
      }
      .text-lg {
        font-size: 18px;
      }
      .text-xl {
        font-size: 22px;
      }
      .text-2xl {
        font-size: 28px;
      }
      .fw-600 {
        font-weight: 600;
      }
      .fw-700 {
        font-weight: 700;
      }
      .fw-800 {
        font-weight: 800;
      }
      .text-grey {
        color: var(--grey);
      }
      .text-gold {
        color: var(--teal-d);
      }
      .text-white {
        color: #fff;
      }
      .text-navy {
        color: var(--navy);
      }
      .text-green {
        color: var(--green);
      }
      .text-red {
        color: var(--red);
      }