/* =============================================================
   Sanfarma Design System — Colors & Type
   "Cuidando bem de você"
   ============================================================= */

/* ----- Web fonts --------------------------------------------- */
/* Primary: Nunito — a rounded humanist sans, closest Google-Fonts match
   to the custom italic wordmark used across Sanfarma's sub-brands
   (Sanfarma, Cicatrisan, Saniderme, Confira).
   Secondary: Inter — clean neutral sans for dense UI and body text.
   Accent: Caveat — handwritten script, approximates the Confira / Ella
   feel for sub-brand moments. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600;1,700;1,800&family=Inter:wght@400;500;600;700&family=Caveat:wght@500;700&display=swap');

:root {
  /* ============================================================
     COLOR — Sanfarma Parent Brand (Pantone 300 C system)
     From the official brand manual — CMYK + RGB values given.
     ============================================================ */
  --sf-blue-100:  #E8F2FB;  /* pale wash */
  --sf-blue-200:  #A5CCE7;  /* C:34 M:9  — 300C @ 40% */
  --sf-blue-300:  #5AAFDD;  /* C:62 M:16 — 300C @ 60% */
  --sf-blue-500:  #2B89C9;  /* C:81 M:38 — PRIMARY, Pantone 300C */
  --sf-blue-700:  #1D6CA6;  /* deeper nav/press state */
  --sf-blue-900:  #0F4573;  /* Cicatrisan-dark / outline deep */

  /* Neutral ramp — warm-cool neutral for clinical feel */
  --sf-ink:       #1A2638;  /* body text */
  --sf-ink-2:     #3E4A5E;  /* secondary text */
  --sf-ink-3:     #6B7685;  /* tertiary/caption */
  --sf-ink-4:     #9CA5B2;  /* disabled/placeholder */
  --sf-line:      #E3E8EF;  /* borders / dividers */
  --sf-surface:   #F5F8FC;  /* app backgrounds */
  --sf-card:      #FFFFFF;  /* card / elevated surfaces */
  --sf-white:     #FFFFFF;

  /* ============================================================
     SUB-BRAND COLORS
     Each Sanfarma product line carries its own accent system,
     always paired with the Sanfarma primary blue as the anchor.
     ============================================================ */
  /* Cicatrisan — wound-care, clinical blue on white */
  --cic-blue:        #0066CC;
  --cic-blue-light:  #4FB3E6;
  --cic-blue-deep:   #003B7A;

  /* Sancare — patriotic dual, azul + vermelho */
  --san-red:         #C8102E;
  --san-red-deep:    #8F0B20;
  --san-blue:        #1F3C88;

  /* Sancare Ella — sub-line, feminine pink accent */
  --ella-pink:       #E6468A;
  --ella-black:      #111111;

  /* Doutorsan — medical authority, deep green + blue */
  --dr-green:        #1B4332;
  --dr-green-2:      #2D5A3D;
  --dr-blue:         #1E3A8A;

  /* Confira — feminine, pregnancy test, pink + blue */
  --con-pink:        #E6308A;
  --con-blue:        #1F78C8;

  /* Saniderme — skin line, cool blue (close to Sanfarma parent) */
  --der-blue:        #1D6CC9;
  --der-blue-light:  #4FB3E6;

  /* Despack — utilitarian, typographic black */
  --desp-black:      #1B1B1B;

  /* Kuradodói — playful kids, earthy gold */
  --kura-gold:       #B08A3E;
  --kura-cream:      #FFF8E7;

  /* ============================================================
     SEMANTIC COLORS — health/pharma context
     ============================================================ */
  --fg-1:            var(--sf-ink);
  --fg-2:            var(--sf-ink-2);
  --fg-3:            var(--sf-ink-3);
  --fg-muted:        var(--sf-ink-4);
  --fg-on-brand:     #FFFFFF;
  --fg-link:         var(--sf-blue-500);
  --fg-link-hover:   var(--sf-blue-700);

  --bg-app:          var(--sf-surface);
  --bg-card:         var(--sf-card);
  --bg-brand:        var(--sf-blue-500);
  --bg-brand-soft:   var(--sf-blue-100);
  --bg-inverse:      var(--sf-blue-900);

  --border:          var(--sf-line);
  --border-strong:   #C9D3E0;
  --border-brand:    var(--sf-blue-300);

  --success:         #2E8B57;
  --success-bg:      #E7F4EC;
  --warning:         #E8A317;
  --warning-bg:      #FDF3DC;
  --danger:          #C8102E;
  --danger-bg:       #FBE7EB;
  --info:            var(--sf-blue-500);
  --info-bg:         var(--sf-blue-100);

  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-display: 'Nunito', 'Helvetica Neue', Arial, sans-serif;  /* headings, brand moments */
  --font-body:    'Nunito', 'Helvetica Neue', Arial, sans-serif;  /* default body */
  --font-ui:      'Inter', 'Helvetica Neue', Arial, sans-serif;    /* dense UI: labels, tables */
  --font-script:  'Caveat', 'Brush Script MT', cursive;            /* sub-brand accents */

  /* ============================================================
     TYPE — size scale (1.125 ratio, base 16px)
     ============================================================ */
  --fs-12: 0.75rem;   /* 12 — caption, legal */
  --fs-13: 0.8125rem; /* 13 — dense ui */
  --fs-14: 0.875rem;  /* 14 — body small */
  --fs-16: 1rem;      /* 16 — body default */
  --fs-18: 1.125rem;  /* 18 — body large / lead */
  --fs-20: 1.25rem;   /* 20 — h5 */
  --fs-24: 1.5rem;    /* 24 — h4 */
  --fs-28: 1.75rem;   /* 28 — h3 */
  --fs-32: 2rem;      /* 32 — h2 */
  --fs-40: 2.5rem;    /* 40 — h1 */
  --fs-56: 3.5rem;    /* 56 — hero display */
  --fs-72: 4.5rem;    /* 72 — editorial display */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* tagline CAPS like "CUIDANDO BEM DE VOCÊ" */

  /* ============================================================
     SPACING — 4px base grid
     ============================================================ */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ============================================================
     RADIUS — soft, approachable (the brand's signature)
     The Sanfarma identity leans into rounded italic type and a
     curved S-mark. Everything UI is generously rounded.
     ============================================================ */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS — clinical / clean elevation
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(15, 69, 115, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 69, 115, 0.08), 0 1px 2px rgba(15, 69, 115, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 69, 115, 0.08), 0 2px 4px rgba(15, 69, 115, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 69, 115, 0.10), 0 4px 8px rgba(15, 69, 115, 0.05);
  --shadow-xl: 0 24px 60px rgba(15, 69, 115, 0.14), 0 8px 16px rgba(15, 69, 115, 0.06);
  --shadow-brand: 0 8px 24px rgba(43, 137, 201, 0.28);

  /* Easing */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================= */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-32);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  margin: 0;
}

.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: var(--fs-72);
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  color: var(--sf-blue-500);
}

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--sf-blue-300);
  letter-spacing: 0.01em;
}

.tagline-caps {
  /* Used on sub-brand signatures: "CUIDANDO BEM DE VOCÊ" */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-on-brand);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-2);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-ui);
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--sf-blue-500);
}

code, .code {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.9em;
  background: var(--sf-blue-100);
  color: var(--sf-blue-700);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   Mapa — Tela /app/mapa
   ══════════════════════════════════════════════════════ */

.sf-mapa { width: 100%; height: 100%; }

.sf-mapa [data-uf] {
  stroke: #fff;
  stroke-width: 1.2;
  transition: fill 0.25s ease, opacity 0.15s ease;
  cursor: pointer;
}

.sf-mapa [data-uf]:hover { opacity: 0.72; }

.sf-mapa__label {
  font-size: 10px;
  fill: #fff;
  pointer-events: none;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.sf-mapa__legenda {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.sf-mapa__legenda-item { display: flex; align-items: center; gap: 5px; }

.sf-mapa__legenda-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
   Wizard — Modal "Lançar NF"
   ══════════════════════════════════════════════════════ */

.sf-wizard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: sf-fade-in 0.15s ease;
}

@keyframes sf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sf-wizard {
  background: var(--sf-surface, #fff);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  width: 540px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui, system-ui, sans-serif);
}

.sf-wizard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--sf-border, #e5eaf0);
}

.sf-wizard__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sf-ink-1, #1a2533);
}

.sf-wizard__close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--sf-ink-4, #9aa5b4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.sf-wizard__close:hover { background: var(--sf-50, #f5f8fc); color: var(--sf-ink-1, #1a2533); }

/* Indicador de passos */
.sf-wizard__steps {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  gap: 0;
}

.sf-wizard__step-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.sf-wizard__step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--sf-border, #e5eaf0);
  background: var(--sf-surface, #fff);
  color: var(--sf-ink-4, #9aa5b4);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  position: relative;
  z-index: 1;
}

.sf-wizard__step-dot--active {
  border-color: var(--sf-primary, #2B89C9);
  background: var(--sf-primary, #2B89C9);
  color: #fff;
}

.sf-wizard__step-dot--done {
  border-color: var(--sf-green-500, #22c55e);
  background: var(--sf-green-500, #22c55e);
  color: #fff;
}

.sf-wizard__step-line {
  flex: 1;
  height: 2px;
  background: var(--sf-border, #e5eaf0);
  margin: 0 4px;
  transition: background 0.2s;
}

.sf-wizard__step-line--done {
  background: var(--sf-green-500, #22c55e);
}

/* Painéis de conteúdo */
.sf-wizard__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.sf-wizard__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sf-wizard__panel--hidden { display: none; }

/* Revisão (step 4) */
.sf-wizard__review-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 12px;
  font-size: 13px;
}
.sf-wizard__review-label {
  color: var(--sf-ink-4, #9aa5b4);
  font-weight: 500;
}
.sf-wizard__review-value {
  color: var(--sf-ink-1, #1a2533);
  font-weight: 600;
  word-break: break-word;
}

/* Erro inline */
.sf-wizard__error {
  display: none;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #dc2626;
}

/* Footer de navegação */
.sf-wizard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--sf-border, #e5eaf0);
  gap: 8px;
}

.sf-wizard__footer--end { justify-content: flex-end; }

/* =============================================================
   RESPONSIVIDADE — Mobile-first overlays
   ============================================================= */

/* ── Sidebar overlay (mobile ≤768px) ── */
@media (max-width: 768px) {
  .sb-sidebar {
    position: fixed !important;
    top: 0; left: 0;
    width: 280px !important;
    height: 100vh !important;
    z-index: 100 !important;
    transform: translateX(-100%);
    transition: transform 0.25s var(--ease-out);
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }
  .sb-sidebar.sb-open {
    transform: translateX(0);
  }
  .sb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .sb-backdrop.sb-active {
    opacity: 1;
    visibility: visible;
  }
  .sb-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--sf-ink-3, #6B7685);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
  }
  .sb-hamburger:hover {
    background: var(--sf-50, #F0F7FC);
    color: var(--sf-primary, #2B89C9);
  }
  .sb-close {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--sf-ink-4, #9CA5B2);
    margin-left: auto;
    transition: background 0.15s, color 0.15s;
  }
  .sb-close:hover {
    background: var(--sf-50, #F0F7FC);
    color: var(--sf-ink, #1A2638);
  }
  /* Esconde busca placeholder em telas muito pequenas */
  .topbar-search {
    display: none !important;
  }
  /* Reduz padding do main */
  main {
    padding: 16px !important;
  }
  /* KPI values menores */
  .sf-kpi-value {
    font-size: 1.6rem !important;
  }
  /* Tabela scroll horizontal */
  .sf-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Touch targets mínimos */
  .sf-btn, .sf-chip, .sf-input, .sf-select,
  .sb-link, button, a[href] {
    min-height: 36px;
  }
  /* Paginação mais compacta */
  .sf-page-btn {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ── Desktop (>768px) ── */
@media (min-width: 769px) {
  .sb-hamburger { display: none !important; }
  .sb-close     { display: none !important; }
  .sb-backdrop  { display: none !important; }
}

/* ── Telas muito pequenas (≤480px) ── */
@media (max-width: 480px) {
  .sf-kpi-value {
    font-size: 1.3rem !important;
  }
  .topbar-live {
    display: none !important;
  }
  .topbar-lancar span {
    display: none !important;
  }
  .topbar-lancar {
    padding: 8px 10px !important;
  }
}

/* Body mobile: previne flex row e scroll horizontal */
@media (max-width: 768px) {
  body {
    flex-direction: column !important;
    overflow-x: hidden !important;
  }
}