/* ============================================================
   responsive.css — Responsividade mobile e componentes extras.
   Carregado por último para refinar o comportamento em telas
   pequenas sem cortar informações, mantendo tudo alinhado.
   ============================================================ */

/* ---------- Botão WhatsApp (tabela de pacientes) ---------- */
.row-actions button.whats { color:#25d366; }
.row-actions button.whats:hover { border-color:#25d366; color:#1ebe57; background:rgba(37,211,102,0.08); }
.row-actions button.whats svg { width:16px; height:16px; }
.row-actions button[disabled] { opacity:0.35; cursor:not-allowed; }
.row-actions button[disabled]:hover { border-color:var(--border-2); color:var(--text-soft); background:none; }

/* ---------- Botão "Instalar app" (PWA) ---------- */
#pwa-install-btn {
  position:fixed; right:18px; bottom:18px; z-index:80;
  display:none; align-items:center; gap:8px;
  background:linear-gradient(135deg, var(--violet), var(--violet-mid));
  color:#fff; border:none; border-radius:40px;
  padding:12px 18px; font-size:13.5px; font-weight:600; font-family:inherit;
  box-shadow:0 8px 24px rgba(61,18,96,0.4); cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s;
}
#pwa-install-btn.show { display:inline-flex; animation: fadeUp 0.4s var(--ease); }
#pwa-install-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(61,18,96,0.5); }
#pwa-install-btn svg { width:18px; height:18px; }

/* ============================================================
   TABLETS (≤ 1024px)
   ============================================================ */
@media (max-width:1024px){
  .page { padding:22px; }
  .form-grid { gap:14px; }
}

/* ============================================================
   CELULAR (≤ 768px)
   ============================================================ */
@media (max-width:768px){
  /* Cabeçalho da página: empilha título e botão de ação */
  .page-head { flex-direction:column; align-items:stretch; gap:12px; }
  .page-head .btn { width:100%; justify-content:center; }
  .page-head h2 { font-size:21px; }

  /* Topbar mais compacta */
  .topbar { height:60px; padding:0 16px; gap:12px; }
  .topbar h1 { font-size:17px; }

  /* Conteúdo com respiro lateral menor */
  .page { padding:16px; }

  /* Cartões e tabelas ocupam a largura toda */
  .card { border-radius:14px; }

  /* ----- Tabelas viram "cartões empilhados" (sem corte) ----- */
  table.data { font-size:13px; }
  table.data thead { display:none; }                 /* esconde o cabeçalho */
  table.data, table.data tbody, table.data tr, table.data td { display:block; width:100%; }
  table.data tbody tr {
    background:var(--surface); border:1px solid var(--border);
    border-radius:12px; padding:8px 4px; margin-bottom:12px;
  }
  table.data tbody tr:hover { background:var(--surface); }
  table.data tbody td {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:9px 16px; border:none; text-align:right;
  }
  /* Rótulo de cada campo (vem do atributo data-label) */
  table.data tbody td::before {
    content: attr(data-label);
    font-size:11.5px; font-weight:700; letter-spacing:0.02em;
    color:var(--text-faint); text-transform:uppercase;
    text-align:left; margin-right:auto;
  }
  /* Campos que não têm rótulo (ex.: ações) ocupam tudo */
  table.data tbody td:not([data-label]) { justify-content:flex-end; }
  table.data tbody td .patient-cell { justify-content:flex-end; }
  .row-actions { justify-content:flex-end; }
  .row-actions button { width:38px; height:38px; }   /* alvos de toque maiores */

  /* Linha de filtros (histórico/agenda) empilha */
  .filters-row { flex-direction:column; align-items:stretch; gap:10px; }
  .filters-row .field { width:100%; }
  .filters-row .btn { width:100%; justify-content:center; }

  /* Toolbar de pacientes empilha e ocupa largura toda */
  .toolbar { flex-direction:column; align-items:stretch; }
  .toolbar .search { max-width:none; width:100%; }
  .toolbar .select { width:100%; min-width:0; }
  .toolbar .spacer { display:none; }

  /* Formulários do modal: uma coluna */
  .form-grid { grid-template-columns:1fr; }

  /* Modal quase tela cheia, rolável, sem cortar conteúdo */
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal, .modal-lg {
    max-width:none; width:100%;
    border-radius:18px 18px 0 0; max-height:92vh;
    display:flex; flex-direction:column;
  }
  .modal-body { overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .modal-foot { flex-wrap:wrap; }
  .modal-foot .btn { flex:1; justify-content:center; min-width:120px; }

  /* Paginação centralizada e com quebra */
  .pagination { flex-direction:column; gap:12px; align-items:center; }
  .pagination .pages { flex-wrap:wrap; justify-content:center; }

  /* Dashboard: KPIs 2 por linha, gráficos full e mais baixos */
  .kpi-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .kpi { padding:16px; }
  .kpi-value { font-size:23px; }
  .dash-grid, .dash-grid-2 { grid-template-columns:1fr; }
  .chart-box { height:240px; }

  /* Financeiro: KPIs 2 por linha */
  .fin-kpi-grid { grid-template-columns:1fr 1fr !important; }

  /* Configurações: grid de integrações empilha (vence o style inline) */
  .cfg-pane .dash-grid { grid-template-columns:1fr !important; }
  .cfg-tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }

  /* Botão flutuante de instalar não cobre conteúdo */
  #pwa-install-btn { right:12px; bottom:12px; padding:11px 16px; font-size:13px; }
}

/* ============================================================
   CELULAR PEQUENO (≤ 480px)
   ============================================================ */
@media (max-width:480px){
  .page { padding:13px; }
  .page-head h2 { font-size:19px; }
  .kpi-grid { grid-template-columns:1fr; }       /* 1 KPI por linha */
  .fin-kpi-grid { grid-template-columns:1fr !important; }

  /* Calendário (agenda) com células e fontes menores p/ caber */
  .cal-grid .cal-day { min-height:64px; padding:4px; }
  .cal-daynum { font-size:11px; }
  .cal-event { font-size:9.5px; padding:1px 4px; }
  .cal-weekdays span { font-size:10px; }

  /* Botão de instalar vira só ícone (economiza espaço) */
  #pwa-install-btn span { display:none; }
  #pwa-install-btn { padding:13px; border-radius:50%; }
}

/* ============================================================
   Toques gerais de usabilidade no mobile (qualquer < 768px)
   ============================================================ */
@media (max-width:768px){
  /* Evita zoom automático do iOS em inputs (fonte ≥ 16px) */
  .input, .select, .textarea { font-size:16px; }
  /* Toasts ocupam a largura com margem */
  #toast-stack { left:12px; right:12px; bottom:12px; }
  #toast-stack .toast { width:auto; }
}