/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* @import DEVE vir antes dos @tailwind */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --font-base: 'Inter', system-ui, -apple-system, sans-serif;

  /* Cores principais */
  --color-brand-blue:   #1E1FA0;
  --color-brand-orange: #FF7700;
  --color-surface:      #ffffff;
  --color-surface-alt:  #F8FAFC;
  --color-surface-deep: #F1F5F9;

  /* Texto */
  --color-text-primary:   #1E293B;
  --color-text-secondary: #475569;
  --color-text-muted:     #94A3B8;
  --color-text-disabled:  #CBD5E1;

  /* Bordas */
  --color-border:       #E2E8F0;
  --color-border-focus: #1E1FA0;

  /* Estados */
  --color-error:   #DC2626;
  --color-warning: #F59E0B;
  --color-success: #10B981;

  /* Tipografia */
  --fs-xs:   11px;   /* hints, badges, labels de seção */
  --fs-sm:   12px;   /* rótulos de campo, meta-texto */
  --fs-base: 13px;   /* corpo, inputs, botões */
  --fs-md:   14px;   /* subtítulos */
  --fs-lg:   16px;   /* cabeçalhos de seção */
  --fs-xl:   20px;   /* títulos de página */

  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Espaçamentos de form */
  --input-height:    40px;
  --input-px:        12px;
  --input-py:        10px;
  --input-radius:    8px;
  --input-border:    1.5px solid var(--color-border);
  --field-gap:       16px;
  --field-mb:        0px;
}

@layer base {
  * { box-sizing: border-box; }

  body {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
  }

  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: #f1f5f9; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

  /* Remove setas dos inputs number no Firefox */
  input[type=number] { -moz-appearance: textfield; }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
}

@layer components {

  /* ── Inputs & Selects ───────────────────────────────────────────────── */
  .input-rdc,
  .select-rdc {
    width: 100%;
    height: var(--input-height);
    padding: var(--input-py) var(--input-px);
    background: var(--color-surface);
    border: var(--input-border);
    border-radius: var(--input-radius);
    font-family: var(--font-base);
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
  }

  .input-rdc::placeholder {
    color: var(--color-text-muted);
    font-weight: var(--fw-normal);
  }

  .input-rdc:focus,
  .select-rdc:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px rgba(30, 31, 160, 0.08);
  }

  .input-rdc:-moz-read-only {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    cursor: default;
  }

  .input-rdc:read-only,
  .input-rdc[readonly] {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    cursor: default;
  }

  .select-rdc {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
  }

  /* ── Labels ─────────────────────────────────────────────────────────── */
  .label-rdc {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
    margin-bottom: 5px;
    font-family: var(--font-base);
  }

  .hint-rdc {
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    color: var(--color-text-muted);
    margin-top: 4px;
    line-height: 1.4;
  }

  .error-rdc {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--color-error);
    margin-top: 4px;
  }

  /* ── Botões ─────────────────────────────────────────────────────────── */
  .btn-rdc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--input-height);
    padding: 0 16px;
    background: var(--color-brand-orange);
    color: #fff;
    font-family: var(--font-base);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    border: none;
    border-radius: var(--input-radius);
    cursor: pointer;
    outline: none;
    text-decoration: none;
    transition: filter 0.15s, transform 0.1s;
    white-space: nowrap;
  }
  .btn-rdc:hover  { filter: brightness(1.08); }
  .btn-rdc:active { transform: scale(0.97); }
  .btn-rdc:disabled { opacity: 0.5; cursor: not-allowed; }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--input-height);
    padding: 0 16px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-family: var(--font-base);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border: 1.5px solid var(--color-border);
    border-radius: var(--input-radius);
    cursor: pointer;
    outline: none;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
  }
  .btn-outline:hover  { background: var(--color-surface-alt); }
  .btn-outline:active { transform: scale(0.97); }

  .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--input-height);
    padding: 0 12px;
    background: transparent;
    color: var(--color-text-muted);
    font-family: var(--font-base);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border: none;
    border-radius: var(--input-radius);
    cursor: pointer;
    outline: none;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
  }
  .btn-ghost:hover { background: var(--color-surface-deep); color: var(--color-text-primary); }

  /* ── Cards ──────────────────────────────────────────────────────────── */
  .card {
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid #E8ECF5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }

  /* ── Rótulo de seção (uppercase pequeno) ────────────────────────────── */
  .label-section {
    font-family: var(--font-base);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* ── Badge pill ─────────────────────────────────────────────────────── */
  .badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    font-family: var(--font-base);
  }

  /* ── Grids de formulário ─────────────────────────────────────────────── */
  .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr;         grid-gap: var(--field-gap);         gap: var(--field-gap); }
  .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr;     grid-gap: var(--field-gap);     gap: var(--field-gap); }
  .form-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: var(--field-gap); gap: var(--field-gap); }

  /* ── Animações ───────────────────────────────────────────────────────── */
  @keyframes spin    { to { transform: rotate(360deg); } }
  @keyframes pulse   { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
  @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  .animate-fade-in { animation: fade-in 0.22s ease both; }
}