/* =====================================================
   LacteA — Design System v5
   Paleta: #07447b | #98dce7 | #903611 | #dedbd6
   Fontes: Plus Jakarta Sans · Fraunces · DM Sans
   ===================================================== */

/* ─── RESET & TOKENS ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Marca */
  --azul:          #07447b;
  --azul-deep:     #053464;
  --azul-mid:      #0a5a9e;
  --azul-light:    #1a76cc;

  --celeste:       #98dce7;
  --celeste-mid:   #b8e8f0;
  --celeste-pale:  #dff5f9;
  --celeste-bg:    #eef9fb;

  --marrom:        #903611;
  --marrom-deep:   #6e2a0d;
  --marrom-light:  #b04a1a;
  --marrom-pale:   #fdf1ec;

  --cinza:         #dedbd6;
  --cinza-mid:     #ccc8c1;
  --cinza-light:   #f0eeeb;
  --cinza-bg:      #faf9f7;

  /* Neutros */
  --white:         #ffffff;
  --ink:           #1e2530;
  --ink-mid:       #3d4554;
  --ink-light:     #6b7385;
  --ink-pale:      #9ba3b4;

  /* Semânticos */
  --success:       #1b7a4e;
  --success-bg:    #ecfdf5;
  --warn:          #b45309;
  --warn-bg:       #fffbeb;
  --danger:        #b91c1c;
  --danger-bg:     #fef2f2;

  /* Tipografia */
  --font-ui:       'Plus Jakarta Sans', 'DM Sans', sans-serif;
  --font-display:  'Fraunces', Georgia, serif;

  /* Elevação */
  --shadow-xs:  0 1px 2px rgba(7,68,123,.06);
  --shadow-sm:  0 2px 8px rgba(7,68,123,.08);
  --shadow-md:  0 4px 16px rgba(7,68,123,.12);
  --shadow-lg:  0 8px 32px rgba(7,68,123,.16);
  --shadow-xl:  0 16px 48px rgba(7,68,123,.22);

  /* Radii */
  --r-sm:   0.5rem;
  --r-md:   0.875rem;
  --r-lg:   1.25rem;
  --r-xl:   1.75rem;
  --r-full: 9999px;

  /* Transition */
  --ease:  cubic-bezier(.4,0,.2,1);
  --t-fast: 150ms;
  --t-mid:  250ms;
}

html {
  scroll-behavior: smooth;
  /* Escala global de tipografia: 75% do padrão (1rem = 12px em vez de 16px).
     Todos os valores em `rem` (padding, gap, border-radius, font-size)
     escalam automaticamente sem alterar regras individuais. */
  font-size: 75%;
}

body {
  font-family: var(--font-ui);
  font-size: 0.9375rem; /* 15px → 11.25px (= 15 * 0.75) */
  line-height: 1.6;
  color: var(--ink);
  background: var(--cinza-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── UTILITÁRIOS BÁSICOS ─── */
.hidden { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ─────────────────────────────────────────────────
   LOGIN SCREEN
   ───────────────────────────────────────────────── */
#login-screen {
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(145deg, var(--azul-deep) 0%, var(--azul) 45%, #0f6ab0 100%);
  z-index: 10000;
}

.login-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .18;
}
.orb-1 { width: 480px; height: 480px; background: var(--celeste); top: -120px; right: -80px; }
.orb-2 { width: 360px; height: 360px; background: var(--marrom-light); bottom: -100px; left: -60px; }
.orb-3 { width: 280px; height: 280px; background: var(--celeste-mid); top: 50%; left: 50%; transform: translate(-50%,-50%); }

/* ─── Animação gotinhas de leite (tela de login) ─── */
@keyframes milk-drop-fall {
  0%   { transform: translateY(-30px) scaleX(.85); opacity: 0; }
  8%   { opacity: 1; }
  85%  { opacity: .45; }
  100% { transform: translateY(105vh) scaleX(1.05); opacity: 0; }
}
@keyframes milk-drop-tail {
  0%,100% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  15%      { transform: scaleY(1); transform-origin: top; opacity: .6; }
  80%      { transform: scaleY(.8); transform-origin: top; opacity: .3; }
}

/* ─── Botão Landing Page (canto superior esquerdo) ─── */
.btn-landing-home {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-full);
  color: rgba(255,255,255,.85);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--t-mid) var(--ease);
}
.btn-landing-home:hover {
  background: rgba(255,255,255,.2);
  color: var(--white);
  transform: translateY(-1px);
}
.btn-landing-home i {
  font-size: 1rem;
}
.btn-landing-label {
  display: none;
}
.btn-landing-home:hover .btn-landing-label {
  display: inline;
}

@media (min-width: 768px) {
  .btn-landing-label {
    display: inline;
  }
}

.milk-drops-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.milk-drop {
  position: absolute;
  top: -40px;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(1px);
  animation: milk-drop-fall linear infinite;
  will-change: transform, opacity;
}
.milk-drop::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 35%;
  height: 60%;
  background: rgba(255,255,255,.12);
  border-radius: 50% 50% 0 0;
  animation: milk-drop-tail linear infinite;
  animation-duration: inherit;
  animation-delay: inherit;
}

.login-card {
  position: relative;
  z-index: 10;
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 3rem 2.5rem 2rem;
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 3rem);
  margin: 1.5rem;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255,255,255,.15);
  overflow-y: auto;
  overflow-x: hidden;
}

.login-logo {
  text-align: center;
  margin-bottom: 2.25rem;
}

.login-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--azul), var(--azul-mid));
  border-radius: var(--r-lg);
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(7,68,123,.35);
}
.login-icon-wrap i { font-size: 1.75rem; color: white; }

.login-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--azul);
  letter-spacing: -.02em;
  margin-bottom: .25rem;
}
.login-subtitle {
  font-size: 0.875rem;
  color: var(--ink-light);
  font-weight: 500;
}

.login-field {
  margin-bottom: 1.25rem;
}
.login-field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--azul);
  margin-bottom: .5rem;
  letter-spacing: .01em;
}
.login-field label i { margin-right: .3rem; }

.login-input {
  width: 100%;
  padding: .8125rem 1rem;
  border: 2px solid var(--cinza);
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: 1rem; /* Mínimo 16px para prevenir zoom no iOS */
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  outline: none;
}
.login-input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(7,68,123,.12);
}
.login-input::placeholder { color: var(--ink-pale); font-weight: 400; }

.login-pass-wrap { position: relative; }
.login-eye {
  position: absolute;
  right: .75rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--ink-light);
  cursor: pointer; padding: .25rem;
  font-size: 1.05rem;
  transition: color var(--t-fast);
}
.login-eye:hover { color: var(--azul); }

.login-error {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1.5px solid #fecaca;
  border-radius: var(--r-md);
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.login-btn {
  width: 100%;
  padding: .9375rem;
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-mid) 100%);
  color: white;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-mid) var(--ease);
  box-shadow: 0 4px 16px rgba(7,68,123,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .25rem;
}
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(7,68,123,.45); }
.login-btn:active { transform: translateY(0); }

.login-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.login-hint {
  text-align: center;
  font-size: .8125rem;
  color: var(--ink-pale);
  margin-top: 1.25rem;
}
.login-footer {
  text-align: center;
  font-size: .75rem;
  color: var(--ink-pale);
  margin-top: .75rem;
}

/* ─────────────────────────────────────────────────
   NAVBAR — Desktop
   ───────────────────────────────────────────────── */
.top-navbar {
  display: none;
  background: linear-gradient(135deg, var(--azul-deep) 0%, var(--azul) 100%);
  box-shadow: 0 4px 20px rgba(7,68,123,.28);
  position: sticky; top: 0; z-index: 500;
}

@media (min-width: 1024px) {
  .top-navbar { display: block; }
  .bottom-nav { display: none !important; }
  body { padding-bottom: 0; }
  .app-main { padding: 2rem 2.5rem; max-width: 1720px; margin: 0 auto; }
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 2rem;
  gap: 1.5rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: .875rem;
  text-decoration: none;
  flex-shrink: 0;
}
.navbar-brand-icon {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.18);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.navbar-brand-icon i { font-size: 1.25rem; color: var(--celeste); }
.navbar-brand-text h1 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: white;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.navbar-brand-text p {
  font-size: .7rem;
  color: rgba(255,255,255,.65);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-wrap: wrap;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .875rem;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  color: rgba(255,255,255,.8);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  transition: all var(--t-fast) var(--ease);
  white-space: nowrap;
  font-family: var(--font-ui);
}
.nav-link:hover {
  background: rgba(255,255,255,.12);
  color: white;
  border-color: rgba(255,255,255,.2);
}
.nav-link.active {
  background: rgba(152,220,231,.2);
  color: var(--celeste-mid);
  border-color: rgba(152,220,231,.4);
}
.nav-link i { font-size: .9375rem; }

.navbar-user {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .375rem .625rem .375rem .375rem;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}
.navbar-avatar {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--celeste), var(--azul-mid));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.navbar-avatar i { font-size: .875rem; color: white; }
.navbar-user-name {
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logout-btn {
  background: none; border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer; padding: .25rem;
  font-size: 1rem;
  transition: color var(--t-fast);
  display: flex;
}
.logout-btn:hover { color: #fca5a5; }

/* ─────────────────────────────────────────────────
   BOTTOM NAV — Mobile
   ───────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 2px solid var(--cinza-light);
  box-shadow: 0 -4px 20px rgba(0,0,0,.09);
  z-index: 500;
  padding: .375rem 0 env(safe-area-inset-bottom, .375rem);
  border-radius: 1.25rem 1.25rem 0 0;
}
.bottom-nav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .4rem .5rem;
  cursor: pointer;
  color: var(--ink-light);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: none;
  border: none;
  font-family: var(--font-ui);
  border-radius: var(--r-md);
  transition: all var(--t-fast) var(--ease);
  min-width: 52px;
}
.bottom-nav-item i { font-size: 1.375rem; }
.bottom-nav-item:hover { color: var(--azul); }
.bottom-nav-item.active {
  color: var(--azul);
  background: var(--celeste-bg);
}
.bottom-nav-item.active i { color: var(--azul); }

body { padding-bottom: 72px; }

/* ─────────────────────────────────────────────────
   MAIN CONTENT AREA
   ───────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-main {
  padding: 1.5rem 1rem;
  flex: 1;
  min-height: 0;
}

/* page-section: todas hidden por padrão, a ativa fica visível */
.page-section { display: none; }
.page-section:not(.hidden-page) { display: block; }

/* compatibilidade com a classe .hidden do JS */
.page-section.hidden { display: none !important; }

/* Page header */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.page-header-left h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--azul);
  letter-spacing: -.02em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: .625rem;
}
.page-header-left h2 i { font-size: 1.5rem; color: var(--marrom); }

.page-header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.page-header-left p {
  font-size: .9rem;
  color: var(--ink-light);
  margin-top: .25rem;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────
   STAT CARDS — Dashboard
   ───────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* Desktop: limitar a 3 colunas no máximo */
@media (min-width: 1024px) {
  .stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stat-card {
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 100%);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Stat cards clicáveis */
.stat-card[onclick] { cursor: pointer; }
.stat-card[onclick]:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-lg); }
.stat-card[onclick]:active { transform: translateY(-2px) scale(0.98); }

.stat-card-azul   { background: linear-gradient(135deg, var(--azul-deep), var(--azul)); }
.stat-card-celeste { background: linear-gradient(135deg, #5bc5d5, var(--celeste)); }
.stat-card-marrom  { background: linear-gradient(135deg, var(--marrom-deep), var(--marrom)); }

.stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-icon i { font-size: 1.5rem; color: white; }

.stat-info { flex: 1; }
.stat-label {
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .25rem;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

/* ─────────────────────────────────────────────────
   CARDS GENÉRICOS
   ───────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--cinza-light);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1.5px solid var(--cinza-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.card-header h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--azul);
  display: flex; align-items: center; gap: .5rem;
}
.card-header h3 i { color: var(--marrom); }

.card-body { padding: 1.25rem 1.5rem; }

/* Patient / Baby list cards */
.item-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  border: 1.5px solid var(--cinza-light);
  box-shadow: var(--shadow-xs);
  transition: all var(--t-mid) var(--ease);
}
.item-card:hover {
  border-color: var(--celeste);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.item-card-avatar {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.avatar-azul   { background: linear-gradient(135deg, var(--azul), var(--azul-mid)); }
.avatar-celeste { background: linear-gradient(135deg, var(--celeste), #5bc5d5); }
.avatar-rosa    { background: linear-gradient(135deg, #f472b6, #ec4899); }
.avatar-marrom  { background: linear-gradient(135deg, var(--marrom-deep), var(--marrom)); }
.item-card-avatar i { font-size: 1.25rem; color: white; }

.item-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: .125rem;
}
.item-card-meta {
  font-size: .8125rem;
  color: var(--ink-light);
  font-weight: 500;
}

/* Consulta cards */
.consulta-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--cinza-light);
  border-left: 4px solid var(--azul);
  box-shadow: var(--shadow-xs);
  transition: all var(--t-fast) var(--ease);
  margin-bottom: .75rem;
}
.consulta-card:last-child { margin-bottom: 0; }
.consulta-card:hover { box-shadow: var(--shadow-md); }
.consulta-card.realizada { border-left-color: var(--celeste); }
.consulta-card.cancelada { border-left-color: var(--marrom); opacity: .65; }
.consulta-card.remarcada { border-left-color: #f59e0b; }

/* ─────────────────────────────────────────────────
   BADGES
   ───────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .7rem;
  border-radius: var(--r-full);
  font-size: .7375rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.badge-agendada  { background: #dbeafe; color: #1d4ed8; }
.badge-realizada { background: var(--celeste-bg); color: var(--azul); }
.badge-cancelada { background: var(--danger-bg); color: var(--danger); }
.badge-azul      { background: var(--celeste-bg); color: var(--azul); }
.badge-marrom    { background: var(--marrom-pale); color: var(--marrom-deep); }

/* legacy aliases */
.status-badge        { display: inline-flex; align-items: center; padding: .25rem .7rem; border-radius: var(--r-full); font-size: .7375rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.status-agendada     { background: #dbeafe; color: #1d4ed8; }
.status-realizada    { background: var(--celeste-bg); color: var(--azul); }
.status-remarcada    { background: #fef3c7; color: #92400e; }
.status-cancelada    { background: var(--danger-bg); color: var(--danger); }

/* ─────────────────────────────────────────────────
   BOTÕES
   ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6875rem 1.25rem;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all var(--t-mid) var(--ease);
  white-space: nowrap;
}

/* ─── Toggle switch ─── */
.toggle-switch { position:relative; display:inline-flex; width:48px; height:26px; cursor:pointer; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; background:var(--cinza); border-radius:13px;
  transition:background var(--t-fast);
}
.toggle-slider::before {
  content:''; position:absolute; width:20px; height:20px; left:3px; bottom:3px;
  background:white; border-radius:50%; transition:transform var(--t-fast);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background:var(--azul); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(22px); }

.btn-primary {
  background: linear-gradient(135deg, var(--azul), var(--azul-mid));
  color: white;
  box-shadow: 0 3px 12px rgba(7,68,123,.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(7,68,123,.4); }

.btn-secondary {
  background: var(--white);
  color: var(--ink-mid);
  border: 1.5px solid var(--cinza);
}
.btn-secondary:hover { background: var(--cinza-light); border-color: var(--azul); color: var(--azul); }

.btn-celeste {
  background: linear-gradient(135deg, var(--celeste), #5bc5d5);
  color: var(--azul-deep);
  box-shadow: 0 3px 12px rgba(152,220,231,.35);
}
.btn-celeste:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(152,220,231,.5); }

.btn-marrom {
  background: linear-gradient(135deg, var(--marrom-deep), var(--marrom));
  color: white;
  box-shadow: 0 3px 12px rgba(144,54,17,.3);
}
.btn-marrom:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(144,54,17,.4); }

/* aliases usados no app antigo */
.btn-gold { background: linear-gradient(135deg, var(--marrom-deep), var(--marrom)); color: white; box-shadow: 0 3px 12px rgba(144,54,17,.3); display:inline-flex;align-items:center;gap:.4rem;padding:.6875rem 1.25rem;border-radius:var(--r-md);font-family:var(--font-ui);font-size:.875rem;font-weight:700;cursor:pointer;border:none;transition:all var(--t-mid) var(--ease); }
.btn-gold:hover { transform: translateY(-2px); }

.btn-whatsapp {
  background: linear-gradient(135deg, #1da84b, #25D366);
  color: white;
  box-shadow: 0 3px 12px rgba(37,211,102,.3);
  display:inline-flex;align-items:center;gap:.4rem;padding:.6875rem 1.25rem;border-radius:var(--r-md);font-family:var(--font-ui);font-size:.875rem;font-weight:700;cursor:pointer;border:none;transition:all var(--t-mid) var(--ease);
}
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,211,102,.45); }


.btn-sm {
  padding: .35rem .65rem;
  font-size: .8125rem;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 600; cursor: pointer; border: none;
  font-family: var(--font-ui);
  transition: all var(--t-fast) var(--ease);
}
.btn-edit   { background: var(--celeste-bg); color: var(--azul); }
.btn-edit:hover { background: var(--celeste-mid); }
.btn-delete { background: var(--danger-bg); color: var(--danger); }
.btn-delete:hover { background: #fee2e2; }
.actions-cell { display: flex; gap: .375rem; justify-content: center; }

/* ─────────────────────────────────────────────────
   FORMULÁRIOS
   ───────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
}
.col-span-2 { grid-column: 1 / -1; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.form-group label {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--azul);
  letter-spacing: .01em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: .625rem .875rem;
  border: 2px solid var(--cinza);
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  outline: none;
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--cinza-mid); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(7,68,123,.1);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-pale); font-weight: 400; }
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7385' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right .75rem center;
  background-repeat: no-repeat;
  background-size: 1.125rem;
  padding-right: 2.5rem;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer;
}
.form-textarea { resize: vertical; min-height: 90px; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  padding-top: 1.25rem;
  margin-top: 1rem;
  border-top: 1.5px solid var(--cinza-light);
}

/* cep group */
.cep-input-group { display: flex; gap: .5rem; }
.cep-input-group .form-input { flex: 1; }

/* ─────────────────────────────────────────────────
   MODAIS
   ───────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(7,68,123,.45);
  backdrop-filter: blur(6px);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}
.modal.hidden { display: none !important; }

/* Modais que abrem a partir da tela de login precisam ficar acima dela (z-index: 10000) */
#modal-esqueci-senha,
#modal-solicitacao { z-index: 10001; }

.modal-content {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1.5px solid var(--celeste-mid);
}
.modal-lg { max-width: 780px; }

.modal-header {
  background: linear-gradient(135deg, var(--azul-deep), var(--azul));
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--celeste);
}
.modal-header h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: white;
  display: flex; align-items: center; gap: .5rem;
}
.modal-header h3 i { color: var(--celeste); }

.modal-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  color: white;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
  transition: background var(--t-fast);
}
.modal-close:hover { background: rgba(255,255,255,.28); }

.modal-body {
  max-height: calc(90vh - 70px);
  overflow-y: auto;
  padding: 1.75rem;
}

/* ─────────────────────────────────────────────────
   SEARCH BAR
   ───────────────────────────────────────────────── */
.search-bar {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: .875rem 1rem;
  margin-bottom: 1.25rem;
  border: 1.5px solid var(--cinza-light);
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.search-bar i { color: var(--ink-pale); font-size: 1.0625rem; flex-shrink: 0; }
.search-bar input {
  flex: 1; border: none; outline: none;
  font-family: var(--font-ui); font-size: .9375rem;
  color: var(--ink); font-weight: 500; background: transparent;
}
.search-bar input::placeholder { color: var(--ink-pale); font-weight: 400; }

/* ─────────────────────────────────────────────────
   CRESCIMENTO — Charts & Table
   ───────────────────────────────────────────────── */
.chart-container {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  border: 1.5px solid var(--cinza-light);
  box-shadow: var(--shadow-sm);
}
.chart-container h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.chart-container h4 i { color: var(--marrom); }
.chart-wrapper { position: relative; height: 280px; }

/* KPIs discretos para ficha do bebê */
.ficha-kpi-badge {
  position: relative;
  margin: -0.25rem 0 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-mid);
  background: var(--cinza-bg);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--cinza);
  display: inline-block;
}
.ficha-kpi-badge.kpi-acima { border-left-color: var(--success); color: var(--success); }
.ficha-kpi-badge.kpi-abaixo { border-left-color: var(--warn); color: var(--warn); }
.ficha-kpi-badge.kpi-alerta { border-left-color: var(--danger); color: var(--danger); }
.ficha-kpi-badge i { margin-right: 0.25rem; }

.growth-table-container {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  border: 1.5px solid var(--cinza-light);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.growth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.growth-table thead tr { background: var(--celeste-bg); }
.growth-table th {
  padding: .75rem 1rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  color: var(--azul);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 2px solid var(--celeste-mid);
  white-space: nowrap;
}
.growth-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--cinza-light);
  color: var(--ink-mid);
  font-weight: 500;
}
.growth-table tbody tr:hover { background: var(--cinza-bg); }
.growth-table tbody tr:last-child td { border-bottom: none; }

/* ─────────────────────────────────────────────────
   RELATÓRIO
   ───────────────────────────────────────────────── */
.relatorio-secao {
  border-left: 4px solid var(--celeste);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--celeste-bg);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.relatorio-secao h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--azul);
  margin-bottom: .5rem;
  display: flex; align-items: center; gap: .5rem;
}

/* ─────────────────────────────────────────────────
   TOAST
   ───────────────────────────────────────────────── */
.toast-wrap {
  position: fixed;
  top: 1.25rem; right: 1.25rem;
  z-index: 2000;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.toast-out { transform: translateX(calc(100% + 2rem)); opacity: 0; }
.toast-in  { transform: translateX(0); opacity: 1; }

/* legacy class names used in JS */
.translate-x-full { transform: translateX(calc(100% + 2rem)); opacity: 0; }
.translate-x-0    { transform: translateX(0); opacity: 1; }

.toast-body {
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xl);
  padding: .875rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 280px;
  max-width: 360px;
  border-left: 4px solid var(--azul);
}
.toast-body i { font-size: 1.25rem; color: var(--azul); flex-shrink: 0; }
.toast-body p { font-size: .9rem; font-weight: 600; color: var(--ink); }

/* ─────────────────────────────────────────────────
   LOADING
   ───────────────────────────────────────────────── */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(4px);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-overlay.hidden { display: none !important; }
.loading-inner { text-align: center; }
.loading-inner p { margin-top: .75rem; font-size: .9rem; color: var(--ink-light); font-weight: 600; }

/* Modal loading overlay */
.modal-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(3px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xl);
}
.modal-loading-overlay.hidden { display: none !important; }
.modal-loading-inner { text-align: center; }
.modal-loading-inner p { margin-top: .5rem; font-size: .875rem; color: var(--ink-light); font-weight: 600; }

.spinner {
  width: 42px; height: 42px;
  border: 3.5px solid var(--cinza);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: spin .75s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────
   SCROLLBAR
   ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cinza-light); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--azul), var(--celeste)); border-radius: 10px; }

/* ─────────────────────────────────────────────────
   LAYOUT UTILITIES
   ───────────────────────────────────────────────── */
.grid-1 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1.25rem; }

.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.flex-center  { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.flex-gap     { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────
   EMPTY STATES
   ───────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--ink-light);
}
.empty-state i { font-size: 3.5rem; color: var(--cinza-mid); display: block; margin-bottom: 1rem; }
.empty-state p { font-size: .9rem; font-weight: 500; }

/* ─────────────────────────────────────────────────
   SEÇÃO FORMULÁRIOS — campos dinâmicos
   ───────────────────────────────────────────────── */
.form-section-block {
  background: var(--celeste-bg);
  border-radius: var(--r-lg);
  padding: 1.375rem;
  border-left: 4px solid var(--azul);
  margin-bottom: 1rem;
}
.form-section-block + .form-section-block { border-left-color: var(--marrom); background: var(--marrom-pale); }
.form-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}

/* ─────────────────────────────────────────────────
   RESPONSIVE TWEAKS
   ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .page-header { flex-direction: column; align-items: flex-start; }
  .page-header .btn { width: 100%; justify-content: center; }
  .modal-body { padding: 1.25rem; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 1.75rem; }
}

/* ═══════════════════════════════════════════════════
   LacteA — ADIÇÕES v6 (não sobrescreve nada)
   ═══════════════════════════════════════════════════ */

/* ── 1. LOGIN: sem scroll, tela cheia ── */
#login-screen {
  height: 100vh;
  height: 100dvh;
  /* overflow: hidden já existia */
}
.login-card {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

/* stat card success (verde) — global */
.stat-card-success {
  background: linear-gradient(135deg, #1b7a4e, #2ecc8b);
}

/* ── 2. Desktop: app-main largo e profissional ── */
@media (min-width: 1024px) {
  .app-main {
    padding: 2rem 2.5rem;
    max-width: 1720px;
    margin: 0 auto;
  }

  /* Wrapper de páginas — ocupa toda a largura disponível */
  .page-content-wrapper {
    max-width: 100%;
    margin: 0;
  }

  /* 4 stat cards no dashboard desktop */
  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Grid de listas (pacientes, bebês) — colunas mais largas */
  .grid-3 {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
  }

  /* Calendário — altura generosa no desktop */
  #calendar-grid {
    min-height: 500px;
  }
  #calendar-grid > div {
    min-height: 64px !important;
    padding: 0.6rem 0.5rem !important;
    font-size: 0.9rem !important;
  }
  #calendar-grid > div:first-child,
  #calendar-grid > div:nth-child(2),
  #calendar-grid > div:nth-child(3),
  #calendar-grid > div:nth-child(4),
  #calendar-grid > div:nth-child(5),
  #calendar-grid > div:nth-child(6),
  #calendar-grid > div:nth-child(7) {
    min-height: auto !important;
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
  }

  /* Calendário card — sem restrição de largura */
  #calendar-container {
    max-width: 100%;
  }

  /* Ficha da mãe/bebê — sem restrição de largura */
  #ficha-mae-content .card,
  #ficha-bebe-content .card {
    max-width: 100%;
  }

  /* Search bar — sem restrição de largura */
  .search-bar {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── 3. Dashboard 2 colunas (desktop) — aside mais largo ── */
@media (min-width: 1024px) {
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 2rem;
    align-items: start;
  }
  .dashboard-main { min-width: 0; }
  .dashboard-aside { min-width: 0; display: block; }
}
/* No mobile, o aside é reordenado via mobile.css */

/* ── 4. WhatsApp button (verde correto) ── */
/* Reforço sobre o original — garante cor verde WhatsApp */
.btn-whatsapp,
a.btn-whatsapp,
button.btn-whatsapp {
  background: linear-gradient(135deg, #1da84b, #25D366) !important;
  color: white !important;
  box-shadow: 0 3px 12px rgba(37,211,102,.3) !important;
}
.btn-whatsapp:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(37,211,102,.45) !important;
  opacity: 1 !important;
}

/* ── 5. TELA JURÍDICA / TERMOS ── */
#termos-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(5,52,100,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
#termos-screen.hidden { display: none !important; }

.termos-card {
  background: var(--white);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.termos-header {
  padding: 1.75rem 2rem 1.25rem;
  border-bottom: 1.5px solid var(--cinza-light);
  background: linear-gradient(135deg, var(--azul-deep), var(--azul));
  color: white;
  flex-shrink: 0;
}
.termos-header h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  display: flex; align-items: center; gap: .625rem;
}
.termos-header p { font-size: .875rem; opacity: .85; margin-top: .375rem; }
.termos-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.75rem 2rem;
  font-size: .9rem;
  line-height: 1.75;
  color: var(--ink-mid);
}
.termos-body h3 {
  font-size: 1rem; font-weight: 700; color: var(--azul);
  margin: 1.5rem 0 .5rem;
  display: flex; align-items: center; gap: .5rem;
}
.termos-body h3:first-child { margin-top: 0; }
.termos-body p { margin-bottom: .75rem; }
.termos-body ul { padding-left: 1.25rem; margin-bottom: .75rem; }
.termos-body li { margin-bottom: .35rem; }
.termos-footer {
  padding: 1.25rem 2rem 1.5rem;
  border-top: 1.5px solid var(--cinza-light);
  background: var(--cinza-bg);
  flex-shrink: 0;
}
.termos-check-row {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: 1.125rem;
}
.termos-check-row input[type=checkbox] {
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--azul); cursor: pointer; flex-shrink: 0;
}
.termos-check-row label {
  font-size: .875rem; color: var(--ink-mid);
  cursor: pointer; line-height: 1.5;
}
.termos-actions { display: flex; gap: .75rem; justify-content: flex-end; }

/* Termos mobile */
@media (max-width: 767px) {
  #termos-screen { padding: 0; align-items: flex-end; }
  .termos-card { max-height: 95dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .termos-header { padding: 1.25rem 1.25rem 1rem; }
  .termos-body { padding: 1.25rem; }
  .termos-footer { padding: 1rem 1.25rem 1.25rem; }
  .termos-actions { flex-direction: column-reverse; }
  .termos-actions .btn { width: 100%; justify-content: center; }
}

/* ── 6. TELA DE ACESSO PACIENTE (PIN) ── */
#paciente-pin-screen {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(145deg, var(--marrom-deep) 0%, var(--marrom) 45%, #c45520 100%);
  z-index: 10000;
}
#paciente-pin-screen.hidden { display: none !important; }

.paciente-pin-card {
  position: relative; z-index: 10;
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 2.5rem 2.5rem 2rem;
  width: 100%; max-width: 400px;
  margin: 0 1.5rem;
  box-shadow: var(--shadow-xl);
  text-align: center;
}
.paciente-pin-icon {
  width: 72px; height: 72px;
  background: linear-gradient(135deg, var(--marrom-deep), var(--marrom));
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 8px 24px rgba(144,54,17,.35);
}
.paciente-pin-icon i { font-size: 2rem; color: white; }
.paciente-pin-title {
  font-family: var(--font-display);
  font-size: 1.625rem; font-weight: 700;
  color: var(--marrom-deep); margin-bottom: .5rem;
}
.paciente-pin-subtitle {
  font-size: .9rem; color: var(--ink-light); margin-bottom: 1.75rem;
}
.pin-input {
  width: 100%; padding: 1rem;
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: .3em; text-align: center; text-transform: uppercase;
  border: 2px solid var(--cinza); border-radius: var(--r-md);
  font-family: var(--font-ui); outline: none;
  transition: border-color var(--t-fast); margin-bottom: 1rem;
}
.pin-input:focus { border-color: var(--marrom); box-shadow: 0 0 0 3px rgba(144,54,17,.12); }
.btn-pin-login {
  width: 100%; padding: .875rem;
  background: linear-gradient(135deg, var(--marrom-deep), var(--marrom-light));
  color: white; border: none; border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: 1rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 16px rgba(144,54,17,.3);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: opacity var(--t-fast);
}
.btn-pin-login:hover { opacity: .9; }

/* Badge acesso temporário — compacto, cabe na navbar */
.paciente-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(253,241,236,.92); color: var(--marrom);
  border: 1px solid rgba(144,54,17,.25); border-radius: var(--r-full);
  padding: .175rem .5rem; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; flex-shrink: 0;
  /* Na navbar azul, usar contraste claro */
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
/* Quando dentro de app bar azul */
.mobile-app-bar .paciente-badge,
.navbar-inner .paciente-badge {
  background: rgba(255,255,255,.18);
  color: white;
  border-color: rgba(255,255,255,.3);
}

/* ── 7. Modal PIN display (geração de acesso) ── */
.pin-display {
  background: linear-gradient(135deg, var(--marrom-pale), #fff5f0);
  border: 2px solid rgba(144,54,17,.2);
  border-radius: var(--r-lg);
  padding: 1.5rem; text-align: center; margin: 1rem 0;
}
.pin-display .pin-value {
  font-size: 2rem; font-weight: 800;
  letter-spacing: .2em; color: var(--marrom-deep);
  font-family: var(--font-ui); text-indent: .2em;
  word-break: break-all; overflow-wrap: anywhere;
}
.pin-display .pin-label {
  font-size: .8125rem; color: var(--marrom);
  font-weight: 600; margin-top: .375rem;
}
.pin-expiry-info {
  display: flex; align-items: center; gap: .5rem;
  background: var(--warn-bg); border: 1px solid rgba(180,83,9,.2);
  border-radius: var(--r-md); padding: .625rem .875rem;
  font-size: .875rem; font-weight: 600; color: var(--warn);
  margin-bottom: 1rem;
}

/* ── 8. Desktop-only table columns ── */
.desktop-only { display: none; }
@media (min-width: 1024px) {
  .desktop-only { display: table-cell; }
}

/* ── 9. Items grid desktop ── */
@media (min-width: 1024px) {
  .items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
  }
}

/* ═══════════════════════════════════════════════════
   LacteA — ADIÇÕES v7: Configurações tabs + Planos
   ═══════════════════════════════════════════════════ */

/* ── Wrapper da página de configurações ── */
.config-page-wrap {
  max-width: 700px;
  margin: 0 auto;
}

/* ── Barra de abas ── */
.config-tabs-wrap {
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--cinza-light);
}

.config-tabs {
  display: flex;
  gap: .375rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .625rem;
}
.config-tabs::-webkit-scrollbar { display: none; }

.config-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: var(--r-full);
  border: 1.5px solid var(--cinza-light);
  background: var(--white);
  color: var(--ink-mid);
  font-family: var(--font-ui);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
  flex-shrink: 0;
  line-height: 1;
}
.config-tab i { font-size: .875rem; }
.config-tab:hover {
  border-color: var(--azul);
  color: var(--azul);
  background: var(--celeste-bg);
}
.config-tab.active {
  background: var(--azul);
  border-color: var(--azul);
  color: white;
  box-shadow: 0 2px 8px rgba(0,115,182,.25);
}

/* ── Painel de conteúdo de aba ── */
.config-tab-panel { display: block; }
.config-tab-panel.hidden { display: none !important; }

/* ── Aviso LGPD ── */
.lgpd-notice {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--cinza-bg);
  border: 1px solid var(--cinza-light);
  border-radius: var(--r-md);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: .8125rem;
  color: var(--ink-mid);
}

/* ── Item de notificação ── */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .875rem;
  background: var(--cinza-bg);
  border-radius: var(--r-md);
  border: 1px solid var(--cinza-light);
}

/* ── Planos grid — altura igual ── */
.planos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.plano-card {
  border-radius: var(--r-lg);
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.plano-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
  text-align: center;
}

.plano-card-body.featured { padding-top: 2rem; }

.plano-card-btn {
  margin-top: auto;
  width: 100%;
  white-space: nowrap;
  justify-content: center;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .config-tab {
    padding: .45rem .75rem;
    font-size: .75rem;
    gap: .3rem;
  }
  .planos-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mensagens Automáticas (Configurações) ── */
.var-chip {
  display: inline-flex;
  align-items: center;
  padding: .25rem .625rem;
  background: var(--white);
  border: 1px solid var(--cinza);
  border-radius: var(--r-sm);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .75rem;
  color: var(--azul);
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}
.var-chip:hover {
  background: var(--azul);
  color: var(--white);
  border-color: var(--azul);
}
.var-chip:active {
  transform: scale(.96);
}

.msg-card {
  border: 1px solid var(--cinza-light);
  border-radius: var(--r-md);
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--white);
  transition: border-color .2s ease;
}
.msg-card:hover {
  border-color: var(--cinza);
}
.msg-card:last-child {
  margin-bottom: 0;
}

.msg-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.msg-card-header > div {
  flex: 1;
  min-width: 0;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--cinza-light);
  color: var(--ink-light);
  padding: .375rem .5rem;
  border-radius: var(--r-sm);
  font-size: .75rem;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}
.btn-ghost:hover {
  background: var(--cinza-light);
  color: var(--ink);
}

.msg-textarea {
  width: 100%;
  padding: .75rem;
  border: 1px solid var(--cinza);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: .875rem;
  color: var(--ink);
  resize: vertical;
  line-height: 1.5;
  transition: border-color .2s ease;
}
.msg-textarea:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(76,110,245,.1);
}
.msg-textarea::placeholder {
  color: var(--ink-pale);
}

.msg-preview {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--cinza-light);
}
.msg-preview-text {
  margin-top: .375rem;
  padding: .625rem .75rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--r-sm);
  font-size: .8125rem;
  color: var(--ink-mid);
  white-space: pre-wrap;
  line-height: 1.5;
  min-height: 2.5rem;
}

/* ── Modal Preview WhatsApp ── */
.wa-preview-modal {
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10000;
}
.wa-preview-phone {
  width: 380px;
  max-width: 100%;
  height: 600px;
  max-height: 90vh;
  background: #ECE5DD;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

/* Header do WhatsApp */
.wa-header {
  background: #075E54;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}
.wa-header-back {
  color: white;
  font-size: 1.25rem;
  cursor: default;
}
.wa-header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #128C7E;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.wa-header-info {
  flex: 1;
  min-width: 0;
}
.wa-header-name {
  color: white;
  font-weight: 600;
  font-size: .9375rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-header-status {
  color: rgba(255,255,255,.7);
  font-size: .75rem;
  margin: 0;
}
.wa-header-actions {
  display: flex;
  gap: .5rem;
}
.wa-header-actions i {
  color: rgba(255,255,255,.8);
  font-size: 1.125rem;
  cursor: pointer;
}

/* Corpo da conversa */
.wa-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 20h40M20 0v40' fill='none' stroke='%23d4cfc6' stroke-width='.5' opacity='.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='60' height='60' fill='url(%23p)'/%3E%3C/svg%3E");
  background-color: #ECE5DD;
}

/* Bolha de mensagem */
.wa-bubble {
  max-width: 85%;
  padding: .5rem .75rem;
  border-radius: 8px;
  position: relative;
  word-wrap: break-word;
  line-height: 1.45;
  font-size: .875rem;
  color: #111;
  white-space: pre-wrap;
}
.wa-bubble-received {
  background: white;
  align-self: flex-start;
  border-top-left-radius: 0;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.wa-bubble-sent {
  background: #DCF8C6;
  align-self: flex-end;
  border-top-right-radius: 0;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.wa-bubble-time {
  font-size: .6875rem;
  color: rgba(0,0,0,.4);
  text-align: right;
  margin-top: .25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .25rem;
}
.wa-bubble-time .bi {
  color: #53bdeb;
  font-size: .875rem;
}

/* Label de tipo de mensagem */
.wa-type-label {
  font-size: .6875rem;
  color: rgba(0,0,0,.4);
  text-align: center;
  padding: .25rem 0;
}

/* Footer do modal */
.wa-modal-footer {
  background: #075E54;
  padding: .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.wa-modal-footer p {
  color: rgba(255,255,255,.8);
  font-size: .75rem;
  margin: 0;
}
.wa-modal-footer .btn-close-wa {
  background: rgba(255,255,255,.15);
  border: none;
  color: white;
  padding: .375rem .75rem;
  border-radius: 6px;
  font-size: .8125rem;
  cursor: pointer;
  transition: background .15s;
}
.wa-modal-footer .btn-close-wa:hover {
  background: rgba(255,255,255,.25);
}

/* ═══════════════════════════════════════════════════
   LacteA — DESKTOP LAYOUT FINAL (sempre último)
   Garante que nenhuma regra anterior limite a largura
   do conteúdo em telas ≥ 1024 px.
   ═══════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Container principal ── */
  .app-main {
    padding: 2rem 2.5rem !important;
    max-width: 1720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* ── Configurações: limitar a 1100px (legível, mas largo) ── */
  .config-page-wrap {
    max-width: 1100px !important;
    margin: 0 !important;
  }

  /* ── Calendário de consultas: largura total ── */
  #calendar-container {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── Search bars: largura total ── */
  .search-bar {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── Grids de pacientes e bebês: múltiplas colunas ── */
  .grid-3,
  #pacientes-list,
  #bebes-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── Items grid ── */
  .items-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
    max-width: 100% !important;
  }

  /* ── Fichas de mãe e bebê ── */
  #ficha-mae-content .card,
  #ficha-bebe-content .card,
  #ficha-mae-content,
  #ficha-bebe-content {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── Wrapper genérico de páginas ── */
  .page-content-wrapper {
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* ── Stat cards: sempre 4 colunas no desktop ── */
  .stat-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* ── Dashboard: aside mais largo ── */
  .dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    gap: 2rem !important;
    align-items: start !important;
  }
}

/* =====================================================
   Indicador de forca de senha
   ===================================================== */
.password-strength-indicator {
  margin-top: .75rem;
  padding: 1rem;
  background: var(--cinza-bg);
  border-radius: var(--r-md);
}
.strength-bar {
  height: 6px;
  background: var(--cinza-light);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: .5rem;
}
.strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width .3s ease, background .3s ease;
}
.strength-fill.weak        { width: 20%; background: var(--danger); }
.strength-fill.fair        { width: 40%; background: var(--warn); }
.strength-fill.good        { width: 60%; background: #eab308; }
.strength-fill.strong      { width: 80%; background: #84cc16; }
.strength-fill.very-strong { width: 100%; background: var(--success); }
.strength-label {
  font-size: .8125rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}
.strength-label.weak        { color: var(--danger); }
.strength-label.fair        { color: var(--warn); }
.strength-label.good        { color: #eab308; }
.strength-label.strong      { color: #84cc16; }
.strength-label.very-strong { color: var(--success); }
.strength-criteria {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .25rem;
}
.strength-criteria li {
  font-size: .75rem;
  color: var(--ink-mid);
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .125rem 0;
  transition: color .2s ease;
}
.strength-criteria li.pass { color: var(--success); }
.strength-criteria li.fail { color: var(--danger); }
.strength-criteria li i { font-size: .625rem; }
.strength-criteria li.pass i::before { content: "\f26a"; }
.strength-criteria li.fail i::before { content: "\f619"; }

/* =====================================================
   Login: Botões secundários
   ===================================================== */
.login-forgot-password {
  text-align: right;
  margin-top: -.5rem;
  margin-bottom: .75rem;
}
.login-forgot-password button {
  background: none;
  border: none;
  color: var(--azul-light);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-forgot-password button:hover {
  color: var(--azul-mid);
}

.login-solicitar-acesso {
  text-align: center;
  margin-top: 1rem;
}
.login-solicitar-acesso button {
  background: none;
  border: none;
  color: var(--ink-pale);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.login-solicitar-acesso button:hover {
  color: var(--azul-light);
}
.login-solicitar-acesso i {
  margin-right: .3rem;
}

.login-pin-access {
  text-align: center;
  margin-top: .75rem;
}
.login-pin-access button {
  background: none;
  border: none;
  color: var(--ink-pale);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.login-pin-access button:hover {
  color: var(--azul-light);
}
.login-pin-access i {
  margin-right: .3rem;
  color: var(--marrom);
}


/* ─── Input font-size: 1rem previne zoom no iOS ao focar ─────────────
   Em desktop, reduz visualmente para manter compacidade */
@media (min-width: 769px) {
  .form-input,
  .form-select,
  .form-textarea {
    font-size: .875rem;
  }
}