/* =====================================================
   LacteA — Mobile Design v3
   ===================================================== */

.mobile-app-bar { display: none; }

@media (max-width: 767px) {

  /* Inputs com a mesma fonte do restante da UI (igual ao desktop: 0.9375rem = 11.25px).
     Zoom automático do iOS já está bloqueado via meta viewport (maximum-scale=1.0, user-scalable=no). */
  input, select, textarea {
    font-size: 1rem;
  }

  /* ── BASE ── */
  body {
    font-size: 1rem; /* +20% em relação ao desktop */
    padding-bottom: 68px;
  }

  /* Critical fix: #app must be flex column for sticky header to work */
  #app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .app-main {
    padding: 0.75rem;
    flex: 1;
    /* DO NOT set overflow:hidden — breaks sticky */
  }

  /* ── MOBILE APP BAR — sticky top ── */
  .mobile-app-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.45rem 0.875rem;
    background: linear-gradient(135deg, var(--azul-deep) 0%, var(--azul) 100%);
    box-shadow: 0 2px 12px rgba(7,68,123,.22);
    position: sticky; top: 0; z-index: 500;
    flex-shrink: 0; /* don't shrink in flex column */
  }
  .mobile-app-bar-brand { display: flex; align-items: center; gap: 0.5rem; }
  .mobile-app-bar-icon {
    width: 30px; height: 30px; background: rgba(255,255,255,.16);
    border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  }
  /* Logo image in header */
  .mobile-app-bar-logo {
    width: 26px; height: 26px; border-radius: 6px; object-fit: contain;
  }
  .mobile-app-bar-icon i { font-size: 1.0625rem; color: var(--celeste); }
  .mobile-app-bar-title {
    font-family: var(--font-display); font-size: 1.0625rem;
    font-weight: 700; color: white; letter-spacing: -0.01em;
  }
  .mobile-app-bar-user { display: flex; align-items: center; gap: 0.5rem; }
  .mobile-app-bar-avatar {
    width: 26px; height: 26px;
    background: linear-gradient(135deg, var(--celeste), var(--azul-mid));
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
  }
  .mobile-app-bar-avatar i { font-size: 0.7rem; color: white; }
  .mobile-logout-btn {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--r-sm); color: rgba(255,255,255,.8);
    padding: 0.275rem 0.5rem; font-size: 0.7rem; cursor: pointer;
    font-family: var(--font-ui); font-weight: 600;
    display: flex; align-items: center; gap: 0.25rem; transition: all 0.15s;
  }

  /* ── PAGE HEADER — 2 colunas: título à esquerda, botões empilhados à direita ── */
  .page-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    flex-wrap: nowrap;
  }
  .page-header-left { flex: 1 1 auto; min-width: 0; }
  .page-header-left h2 {
    font-size: 1.1rem; gap: 0.35rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .page-header-left h2 i { font-size: 1rem; }
  .page-header-left p {
    font-size: 0.7rem; margin-top: 0.1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Actions wrapper — botões lado a lado */
  .page-header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
  }

  /* Botões dentro das actions (excluindo ficha-mae e ficha-bebe): ícone apenas */
  .page-header-actions:not(#ficha-mae-actions):not(#ficha-bebe-actions) .btn,
  .page-header .btn:not(#ficha-mae-actions .btn):not(#ficha-bebe-actions .btn) {
    padding: 0.475rem 0.55rem;
    min-width: 36px; min-height: 36px;
    justify-content: center;
    border-radius: var(--r-sm); gap: 0; flex-shrink: 0;
  }
  .page-header-actions:not(#ficha-mae-actions):not(#ficha-bebe-actions) .btn i,
  .page-header .btn:not(#ficha-mae-actions .btn):not(#ficha-bebe-actions .btn) i { font-size: 1rem; }
  .page-header-actions:not(#ficha-mae-actions):not(#ficha-bebe-actions) .btn .btn-label,
  .page-header .btn:not(#ficha-mae-actions .btn):not(#ficha-bebe-actions .btn) .btn-label { display: none; }

  /* Ficha actions (PDF + WhatsApp + Acesso) — lado a lado */
  #ficha-mae-actions,
  #ficha-bebe-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.375rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
  #ficha-mae-actions .btn,
  #ficha-bebe-actions .btn {
    padding: 0.55rem 0.75rem;
    min-width: 36px; min-height: 36px;
    gap: 0.35rem; flex-shrink: 0;
    width: auto;
    justify-content: center;
  }
  #ficha-mae-actions .btn i,
  #ficha-bebe-actions .btn i { font-size: 1rem; }
  #ficha-mae-actions .btn .btn-label,
  #ficha-bebe-actions .btn .btn-label { display: none; }

  /* ── STAT CARDS (3 col, sem ícone) ── */
  .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 0.35rem; margin-bottom: 0.875rem; }
  .stat-card {
    padding: 0.5rem 0.25rem; gap: 0;
    border-radius: var(--r-md); flex-direction: column; align-items: center; text-align: center;
  }
  .stat-icon { display: none; }
  .stat-info { width: 100%; }
  .stat-label { font-size: 0.52rem; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat-value { font-size: 1.25rem; line-height: 1.1; }
  #page-dashboard .card { margin-bottom: 0.75rem; }

  /* ── CARDS ── */
  .card { border-radius: var(--r-md); border-width: 1px; }
  .card-header { padding: 0.7rem 0.875rem; flex-wrap: wrap; gap: 0.35rem; }
  .card-header h3 { font-size: 1rem; gap: 0.3rem; }
  .card-header .btn { padding: 0.3rem 0.575rem; font-size: 0.75rem; }
  .card-body { padding: 0.7rem 0.875rem; }

  /* ── FICHA DO BEBÊ ── */
  #ficha-bebe-content [style*="width:64px;height:64px"] {
    width: 38px !important; height: 38px !important; border-radius: var(--r-sm) !important;
  }
  #ficha-bebe-content [style*="width:64px;height:64px"] i { font-size: 1.1rem !important; }
  #ficha-nome { font-size: 1.05rem !important; }
  #ficha-info { font-size: 0.7rem !important; margin-top: 0.1rem !important; }
  #ficha-bebe-content [style*="grid-template-columns:repeat(auto-fit,minmax(140px"] {
    grid-template-columns: repeat(2, 1fr) !important; gap: 0.375rem !important;
  }
  #ficha-bebe-content [style*="grid-template-columns:repeat(auto-fit,minmax(140px"] > div { padding: 0.45rem 0.3rem !important; }
  #ficha-bebe-content [style*="grid-template-columns:repeat(auto-fit,minmax(140px"] p:first-child { font-size: 0.58rem !important; }
  #ficha-idade, #ficha-peso, #ficha-peso-nasc, #ficha-ganho { font-size: 0.875rem !important; margin-top: 0.1rem !important; }
  #ficha-chart-peso, #ficha-chart-altura, #ficha-chart-pc { max-height: 155px; }
  #ficha-tabela-pesos-body td { font-size: 0.72rem !important; padding: 0.35rem 0.4rem !important; }

  /* ── FICHA DA MÃE ── */
  #ficha-mae-content [style*="width:64px;height:64px"] {
    width: 38px !important; height: 38px !important; border-radius: var(--r-sm) !important;
  }
  #ficha-mae-content [style*="width:64px;height:64px"] i { font-size: 1.1rem !important; }
  #ficha-mae-nome { font-size: 1.05rem !important; }
  #ficha-mae-info { font-size: 0.7rem !important; }
  #ficha-mae-content [style*="grid-template-columns:repeat(auto-fit,minmax(140px"] {
    grid-template-columns: repeat(3, 1fr) !important; gap: 0.375rem !important;
  }
  #ficha-mae-content [style*="grid-template-columns:repeat(auto-fit,minmax(140px"] > div { padding: 0.45rem 0.2rem !important; }
  #ficha-mae-content [style*="grid-template-columns:repeat(auto-fit,minmax(140px"] p:first-child { font-size: 0.58rem !important; }
  #ficha-mae-total-consultas, #ficha-mae-total-avaliacoes, #ficha-mae-total-bebes { font-size: 0.9rem !important; margin-top: 0.1rem !important; }
  #ficha-mae-content .card, #ficha-bebe-content .card { margin-bottom: 0.75rem; }

  /* ── ITEM CARDS ── */
  .item-card { padding: 0.7rem; border-radius: var(--r-md); border-width: 1px; }
  .item-card-avatar { width: 34px; height: 34px; border-radius: var(--r-sm); }
  .item-card-avatar i { font-size: 0.875rem; }
  .item-card-name { font-size: 1rem; }
  .item-card-meta { font-size: 0.75rem; }
  #pacientes-list, #bebes-list { grid-template-columns: 1fr; gap: 0.5rem; }

  /* ── SEARCH BAR ── */
  .search-bar { padding: 0.525rem 0.875rem; margin-bottom: 0.7rem; border-radius: var(--r-md); gap: 0.4rem; }
  .search-bar i { font-size: 0.875rem; }
  .search-bar input { font-size: 0.8125rem; }

  /* ── BUTTONS ── */
  .btn { padding: 0.5rem 0.875rem; font-size: 0.9375rem; border-radius: var(--r-sm); gap: 0.3rem; }
  .btn-sm { padding: 0.275rem 0.5rem; font-size: 0.75rem; }
  .btn-whatsapp { padding: 0.5rem 0.875rem; font-size: 0.9375rem; box-shadow: none; }

  /* ── CONSULTA CARDS ── */
  .consulta-card { padding: 0.6rem 0.875rem; border-radius: var(--r-sm); margin-bottom: 0.375rem; }

  /* ── MODAIS ── */
  .modal { padding: 1rem; align-items: center; }
  .modal-content {
    max-width: 100%; max-height: 90dvh;
    border-radius: var(--r-xl);
    overflow: hidden;
    display: flex; flex-direction: column;
    animation: slideUp 0.25s cubic-bezier(.4,0,.2,1);
  }
  .modal-lg { max-width: 100%; }
  .modal-header { padding: 0.875rem 1.125rem; flex-shrink: 0; }
  .modal-header h3 { font-size: 0.9375rem; }
  .modal-body { padding: 1rem; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
  .modal-footer { flex-shrink: 0; }
  #modal-ficha-seio .modal-content, #modal-ficha-nota .modal-content, #modal-ficha-peso .modal-content { max-height: 85dvh; }
  @keyframes slideUp { from { transform: translateY(20px); opacity: 0.8; } to { transform: translateY(0); opacity: 1; } }

  /* ── FORMS ── */
  .form-grid { grid-template-columns: 1fr !important; gap: 0.6rem; }
  .col-span-2 { grid-column: 1 / -1; }
  .form-input, .form-select, .form-textarea { padding: 0.55rem 0.875rem; font-size: 0.875rem; border-radius: var(--r-sm); }
  .form-actions { gap: 0.5rem; padding-top: 0.875rem; flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* ── BOTTOM NAV ── */
  .bottom-nav { padding: 0.2rem 0 env(safe-area-inset-bottom, 0.2rem); border-radius: 1rem 1rem 0 0; }
  .bottom-nav-item { font-size: 0.65rem; padding: 0.3rem 0.375rem; min-width: 44px; gap: 0.1rem; }
  .bottom-nav-item i { font-size: 1.45rem; }

  /* ── TOAST ── */
  .toast-wrap { top: auto; bottom: 76px; right: 0.75rem; left: 0.75rem; }
  .toast-body { min-width: unset; max-width: 100%; padding: 0.6rem 0.875rem; border-radius: var(--r-md); }
  .toast-body p { font-size: 0.8rem; }

  /* ── MISC ── */
  .badge, .status-badge { padding: 0.175rem 0.5rem; font-size: 0.6rem; letter-spacing: 0.02em; }
  .empty-state { padding: 1.5rem 1rem; }
  .empty-state i { font-size: 2.25rem; margin-bottom: 0.5rem; }
  .empty-state p { font-size: 0.8rem; }
  .grid-2 { grid-template-columns: 1fr; gap: 0.6rem; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  #formularios-list { grid-template-columns: 1fr; gap: 0.5rem; }
  .flex-between { gap: 0.4rem; }
  .chart-container { padding: 0.875rem; border-radius: var(--r-md); }
  .chart-wrapper { height: 185px; }
  .growth-table-container { padding: 0.75rem; border-radius: var(--r-md); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .growth-table th, .growth-table td { padding: 0.4rem 0.5rem; font-size: 0.75rem; }
  #calendar-grid { gap: 0.1rem; }
  #calendar-grid > div { min-height: 38px !important; font-size: 0.75rem !important; }
  .relatorio-secao { padding: 0.625rem 0.875rem; margin-bottom: 0.75rem; }
  .spinner { width: 32px; height: 32px; }
  .page-section:not(.hidden) { animation: fadeIn 0.18s ease; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
}

/* EXTRA SMALL */
@media (max-width: 359px) {
  .stat-card { padding: 0.5rem 0.3rem; }
  .stat-value { font-size: 1.2rem; }
  .stat-label { font-size: 0.525rem; }
  .bottom-nav-item span { display: none; }
  .bottom-nav-item { padding: 0.5rem 0.25rem; }
  .bottom-nav-item i { font-size: 1.55rem; }
}

/* ═══════════════════════════════════════════════════
   LacteA — Mobile Adições v4
   ═══════════════════════════════════════════════════ */

/* ── Safe area: barra de status iOS/Android ── */
/* Aplica padding-top no app bar para não sobrepor hora/rede */
@media (max-width: 1023px) {
  .mobile-app-bar {
    padding-top: calc(0.45rem + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ── Login: sem scroll em nenhum tamanho de tela ── */
#login-screen {
  height: 100dvh !important;
  min-height: unset !important;
}

@media (max-width: 767px) {
  /* Login card cabe na tela */
  .login-card {
    padding: 1.75rem 1.375rem 1.375rem !important;
    margin: 0 1rem !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2rem) !important;
    overflow-y: auto !important;
  }
  .login-logo { margin-bottom: 1.25rem !important; }
  .login-icon-wrap { width: 52px !important; height: 52px !important; margin-bottom: .75rem !important; }
  .login-icon-wrap i { font-size: 1.375rem !important; }
  .login-title { font-size: 1.5rem !important; }

  /* PIN screen mobile */
  #paciente-pin-screen {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .paciente-pin-card {
    padding: 2rem 1.5rem 1.75rem !important;
    margin: 0 1rem !important;
  }
}

/* ── Tablet (768–1023): também usa mobile app bar ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .top-navbar { display: none !important; }
  .mobile-app-bar { display: flex !important; }
  body { padding-bottom: 68px; }
}

/* ── Dashboard: reordenar no mobile ── */
/* Ordem desejada: 1.Hoje 2.Ações Rápidas 3.Próximas 4.Últimas */
@media (max-width: 1023px) {
  .dashboard-grid {
    display: flex !important;
    flex-direction: column;
  }
  /* Fazer filhos diretos de dashboard-grid participarem do flex */
  .dashboard-main  { display: contents !important; }
  .dashboard-aside { display: contents !important; margin: 0 !important; }

  /* Ordenar cards individualmente */
  .dashboard-main > .card:nth-child(1) { order: 1; } /* Hoje */
  .dashboard-aside > .card             { order: 2; } /* Ações Rápidas */
  .dashboard-main > .card:nth-child(2) { order: 3; } /* Próximas Consultas */
  .dashboard-main > .card:nth-child(3) { order: 4; } /* Últimas Realizadas */

  .dashboard-aside .card { margin-bottom: 0.75rem; }
}

/* ── Mensagens Automáticas: ajustes mobile ── */
@media (max-width: 1023px) {
  .msg-card { padding: .75rem; }
  .msg-card-header { flex-direction: column; align-items: stretch; gap: .5rem; }
  .msg-card-header > div { margin-bottom: 0; }
  .msg-textarea { font-size: .8125rem; padding: .625rem; }
  .var-chip { font-size: .6875rem; padding: .2rem .5rem; }

  /* Preview WhatsApp: ocupar tela toda no mobile */
  .wa-preview-phone {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .wa-preview-modal {
    padding: 0;
  }
}

/* ── Extra small: 4 stat cards ficam muito espremidos < 360px ── */
@media (max-width: 380px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
  .stat-value { font-size: 1.4rem; }
  .stat-label { font-size: 0.575rem; }
}

/* ── Badge de acesso temporário na navbar mobile ── */
@media (max-width: 1023px) {
  .mobile-app-bar .paciente-badge {
    font-size: .625rem;
    padding: .15rem .4rem;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Reorganizar app-bar quando badge presente */
  .mobile-app-bar-brand + .paciente-badge {
    order: 2;
    flex: 1;
    justify-content: center;
    max-width: none;
    text-align: center;
  }
}

/* ── PIN display — não vazar no mobile ── */
@media (max-width: 767px) {
  .pin-display { padding: 1rem; }
  .pin-display .pin-value { font-size: 1.625rem; letter-spacing: .15em; text-indent: .15em; }
  .pin-display .pin-label { font-size: .75rem; }
  .pin-expiry-info { font-size: .8rem; padding: .5rem .75rem; }
}

/* ── Sobrescrever regra do style.css que força column no page-header em telas pequenas ── */
@media (max-width: 480px) {
  .page-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  .page-header .btn {
    width: auto !important;
  }
}