/* Tokens extraídos da referência ACERO
   Cores amostradas visualmente do print — ajuste fino se tiver o arquivo original. */

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

:root {
  /* ---- Coral (cor de ação e destaque) ---- */
  --coral-50:  #FDF1EB;
  --coral-100: #FADCCC;
  --coral-200: #F7C4AB;
  --coral-300: #F4AC8B;  /* cards e pills da referência */
  --coral-400: #F09A73;  /* ícones, botão ativo */
  --coral-500: #E5824F;  /* hover */
  --coral-700: #A85529;  /* texto sobre fundo coral claro */

  /* ---- Azul-marinho (estrutura e texto) ---- */
  --navy-900: #2A3149;
  --navy-800: #333B58;
  --navy-700: #3E4766;  /* títulos */
  --navy-600: #495376;  /* card do calendário, barras do gráfico */
  --navy-400: #7B839E;
  --navy-200: #C2C7D6;
  --navy-50:  #EEF0F5;

  /* ---- Superfícies ---- */
  --canvas:     #E9E9E5;  /* fundo fora do app */
  --app-bg:     #FAF8F5;  /* área de conteúdo */
  --sidebar-bg: #F6F4F1;
  --card-bg:    #FBFAF8;
  --white:      #FFFFFF;

  /* ---- Texto ---- */
  --text-strong: #3E4766;
  --text-body:   #565E70;
  --text-muted:  #9A9CA5;
  --text-on-coral: #3E2A1E;
  --text-on-navy:  #FFFFFF;

  /* ---- Semântico ---- */
  --success: #4C9E7A;
  --success-bg: #E4F2EC;
  --danger: #D45B4E;
  --danger-bg: #FBEAE7;
  --warning: #D99A2B;
  --warning-bg: #FBF0DC;

  /* ---- Bordas e sombras ---- */
  --border: #EDEAE5;
  --shadow-card: 0 2px 8px rgba(62, 71, 102, 0.05);
  --shadow-raised: 0 4px 16px rgba(62, 71, 102, 0.08);

  /* ---- Raio ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;   /* cards grandes — o arredondamento marcante da referência */
  --radius-pill: 999px;

  /* ---- Tipografia ---- */
  --font: 'Poppins', system-ui, -apple-system, sans-serif;
  --fs-display: 28px;  /* 600 */
  --fs-metric:  26px;  /* 600 — os números dos cards */
  --fs-h1:      22px;  /* 600 */
  --fs-h2:      18px;  /* 600 */
  --fs-body:    15px;  /* 400 */
  --fs-label:   13px;  /* 400 */
  --fs-caption: 12px;  /* 400 */

  --lh-tight: 1.25;
  --lh-body:  1.6;

  /* ---- Espaçamento (escala de 4) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  --sidebar-w: 240px;
  --topbar-h: 72px;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--app-bg);
}

h1, h2, h3 { color: var(--text-strong); font-weight: 600; line-height: var(--lh-tight); }

/* ---------------------------------------------------------------------------
   Componentes soltos da referência.

   As telas do sistema são Bootstrap, e três destes nomes de classe também são do
   Bootstrap (.card, .btn-primary/.btn-secondary, .nav-item). Onde havia colisão a
   regra foi ajustada para não brigar com ele — quem veste os componentes Bootstrap
   com estes tokens é o acero-bootstrap.css.
   --------------------------------------------------------------------------- */

/* O padding fica com o .card-body do Bootstrap; aqui só a superfície. */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.metric-card .label { font-size: var(--fs-label); color: var(--text-muted); }
.metric-card .value { font-size: var(--fs-metric); font-weight: 600; color: var(--text-strong); }

/* :not(.btn) — botão Bootstrap é vestido pelo acero-bootstrap.css, que respeita
   .btn-sm e os estados de foco/disabled. Estas duas regras valem para botão solto. */
.btn-primary:not(.btn) {
  background: var(--coral-400);
  color: var(--text-on-coral);
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-family: var(--font);
  font-size: var(--fs-label);
  font-weight: 500;
  cursor: pointer;
}
.btn-primary:not(.btn):hover { background: var(--coral-500); }

.btn-secondary:not(.btn) {
  background: transparent;
  color: var(--text-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-family: var(--font);
  font-size: var(--fs-label);
  cursor: pointer;
}

.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-success, .badge-danger {
  font-size: var(--fs-caption);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  display: inline-block;
}

/* .nav-item também é do Bootstrap (nav-tabs, navbar): escopado em .acero-nav
   para não deformar as abas das telas de cadastro. */
.acero-nav .nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4);
  border-radius: var(--radius-pill);
  color: var(--text-body);
  font-size: var(--fs-body);
}
.acero-nav .nav-item.is-active {
  background: var(--white);
  color: var(--text-strong);
  font-weight: 500;
  box-shadow: var(--shadow-card);
}

:focus-visible { outline: 2px solid var(--coral-500); outline-offset: 2px; }