/* ═══════════════════════════════════════════════════════════════════════════
   Samara — PWA (D-032) + responsivo/celular (D-033)
   Carregado DEPOIS de app.css em todos os layouts. Tudo que só existe por causa do
   celular ou do app instalado mora aqui, pra app.css continuar sendo só tema + componentes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PWA: instalar app (D-032) ─────────────────────────────────────────── */
.btn-instalar {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 8px; white-space: nowrap;
  background: var(--yellow-muted); border: 1px solid var(--border-yellow); color: var(--text-yellow);
  font-size: 0.78rem; font-weight: 700; transition: all var(--transition);
}
.btn-instalar:hover { background: var(--yellow); color: var(--yellow-texto); }
.btn-instalar[hidden], .convite-instalar[hidden], .modal-fundo[hidden], .btn-instalar-grande[hidden] { display: none !important; }
.btn-instalar-grande { padding: 13px; font-size: 0.95rem; margin-bottom: 8px; }
.convite-instalar { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 0.8rem; }
.link-instalar { background: none; border: none; color: var(--text-yellow); font-weight: 600; font-size: 0.82rem; padding: 6px 4px; }
.link-instalar:hover { text-decoration: underline; }
.auth-wrap .convite-instalar { margin-top: 0; }
/* já roda instalado: nenhum gatilho faz sentido (o JS também esconde; CSS cobre o primeiro paint) */
@media (display-mode: standalone) { .btn-instalar, .convite-instalar, .btn-instalar-grande { display: none !important; } }

.modal-fundo {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(3px);
}
.modal {
  position: relative; width: 100%; max-width: 400px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 24px; box-shadow: var(--shadow-modal);
  display: flex; flex-direction: column; gap: 14px;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.modal-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.modal-cabecalho h3 { font-size: 1.15rem; font-weight: 800; }
.modal-fechar { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; line-height: 1; padding: 0 4px; }
.modal-fechar:hover { color: var(--text-primary); }
.passos-instalar { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.passos-instalar li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; line-height: 1.45; }
.passos-instalar strong { display: block; color: var(--text-primary); }
.passos-instalar small { display: block; color: var(--text-secondary); font-size: 0.78rem; margin-top: 2px; }
.passo-n {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow-muted); color: var(--text-yellow); font-size: 0.75rem; font-weight: 700;
}
details.colapsavel > div .passos-instalar { padding-top: 4px; }

.toast-atualizar {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 900; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-md); font-size: 0.85rem; white-space: nowrap;
  background: var(--bg-elevated); border: 1px solid var(--border-yellow); box-shadow: var(--shadow-modal);
}

/* ─── Responsivo (D-033) ────────────────────────────────────────────────── */
/* `screen and`: a folha A4 tem ~794px e sem isso a impressão em retrato pegaria as regras do tablet. */
@media screen and (max-width: 1024px) {
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 768px) {
  /* ── Estrutura ── */
  .so-mobile { display: inline-flex !important; }
  .so-desktop-inline { display: none; }
  .conteudo { padding: 12px 12px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .cartao { padding: 14px; border-radius: var(--radius-md); }
  .cartao.compacto { padding: 12px; }
  .cartao + .cartao { margin-top: 12px; }
  .cartao-cabecalho { margin-bottom: 12px; }
  .grade { gap: 10px; }
  /* !important: alguns formulários trazem grid-template-columns inline (2fr 1fr) e o celular não tem largura pra isso */
  .grade-2, .grade-3, .grade-4, .grade-auto { grid-template-columns: 1fr !important; }
  /* KPIs: 2 por linha — grade-3/4 são as fileiras de indicadores; qualquer outra grade (2/auto) só
     quando os filhos são KPIs (:has), senão cartões ficam em 1 coluna */
  .grade-3, .grade-4, .grade:has(> .kpi), .grade:has(> .kpi-link) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpi { padding: 12px 14px; }
  .kpi::after { width: 70px; height: 70px; }
  .kpi-rotulo { font-size: 0.66rem; letter-spacing: 0.04em; }
  .kpi-valor { font-size: 1.45rem; }
  .kpi-sub { font-size: 0.72rem; }
  .grafico-wrap, .grafico-wrap.rosca, .disc-grafico, .rel-grafico-360, .rel-grafico-disc { height: 240px !important; }

  /* ── Sidebar (overlay) ── */
  .sidebar { display: none; position: fixed; }
  .app.sidebar-mobile .sidebar {
    display: flex; width: min(var(--sidebar-w-aberta), 86vw); min-width: 0; height: 100dvh; z-index: 51;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 8px 0 30px rgba(0,0,0,0.5);
  }
  .app.sidebar-mobile .sidebar .nav-rotulo, .app.sidebar-mobile .logo-texto, .app.sidebar-mobile .usuario-info,
  .app.sidebar-mobile .nav-cat-titulo span:first-child { display: inline; }
  .app.sidebar-mobile .usuario-info, .app.sidebar-mobile .logo-texto { display: flex; }
  .app.sidebar-mobile .nav-cat-titulo { justify-content: space-between; padding: 8px 12px; }
  .app.sidebar-mobile .nav-cat-titulo::before { display: none; }
  .app.sidebar-mobile .nav-cat-titulo .nav-cat-chevron { display: flex; }
  .app.sidebar-mobile .nav-cat-lista { margin-left: 14px; padding-left: 8px; border-left: 1.5px dashed rgba(251,191,36,0.22); }
  .app.sidebar-mobile .nav-item { padding: 11px 14px; } /* alvo de toque ≥ 44px */
  .app.sidebar-mobile ~ .sidebar-overlay, .sidebar-overlay.visivel { display: block; }
  .sidebar-toggle { display: none; }

  /* ── Topbar compacta: [☰] [título] [instalar][tema]; ações da página descem pra 2ª linha ── */
  .topbar { min-height: 52px; gap: 8px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); flex-wrap: wrap; }
  .topbar-titulo h1 { font-size: 1.05rem; }
  .breadcrumb { display: none; }
  .btn-icone { width: 38px; height: 38px; }
  .topbar-acoes-pagina { order: 5; flex: 1 1 100%; justify-content: stretch; gap: 8px; }
  .topbar-acoes-pagina .btn { flex: 1 1 auto; padding: 8px 10px; font-size: 0.8rem; }
  .topbar-acoes-pagina form { flex: 1 1 auto; display: flex; }
  .topbar-acoes-pagina form .btn { width: 100%; }
  /* menos de 5 palavras no título do botão 📱 (o topbar já tem 3 controles) */
  .btn-instalar { padding: 6px 9px; font-size: 0.74rem; }

  /* ── Flash fixo no topo (abaixo do topbar), com fundo opaco por cima do conteúdo ── */
  /* --topbar-real: altura medida pelo app.js (o topbar pode ter 2 linhas quando a página tem ações) */
  body.painel .flash-lista {
    position: fixed; z-index: 45; left: 10px; right: 10px;
    top: calc(var(--topbar-real, 52px) + 8px); margin: 0;
  }
  body.painel .flash-lista .flash { box-shadow: var(--shadow-modal); }
  body.painel .flash-lista .flash-sucesso { background: linear-gradient(var(--success-bg), var(--success-bg)), var(--bg-elevated); }
  body.painel .flash-lista .flash-erro    { background: linear-gradient(var(--danger-bg),  var(--danger-bg)),  var(--bg-elevated); }
  body.painel .flash-lista .flash-aviso   { background: linear-gradient(var(--warning-bg), var(--warning-bg)), var(--bg-elevated); }
  body.painel .flash-lista .flash-info    { background: linear-gradient(var(--info-bg),    var(--info-bg)),    var(--bg-elevated); }
  .flash-fechar { padding: 4px 6px; min-width: 32px; }

  /* ── Tabelas: rolagem lateral com dica + coluna de ações grudada à direita e empilhada ── */
  .tabela-dica { display: block; }
  .tabela-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .tabela th, .tabela td { padding: 9px 10px; }
  .tabela td.acoes, .tabela th.acoes {
    position: sticky; right: 0; z-index: 1;
    background: var(--bg-card); box-shadow: -8px 0 10px -6px rgba(0,0,0,0.55);
    white-space: normal; min-width: 96px; max-width: 132px;
  }
  .tabela th.acoes { background: var(--bg-elevated); z-index: 2; }
  .tabela tbody tr:hover td.acoes { background: var(--bg-card-hover); }
  .tabela td.acoes form { display: block; }
  .tabela td.acoes .btn { display: flex; width: 100%; margin: 0 0 4px !important; padding: 7px 8px; }
  .tabela td.acoes .btn:last-child, .tabela td.acoes form:last-child .btn { margin-bottom: 0 !important; }
  .tabela td.acoes .reagendar-form { display: flex; flex-wrap: wrap; }

  /* ── Formulários: 1 coluna, botões cheios, fonte 16px (iOS não dá zoom no foco) ── */
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-grid .col-1, .form-grid .col-2 { grid-column: 1 / -1; }
  /* time/tel (hora do disparo, telefone) e .link-copiar .input (campos de link, que o app.css põe em
     0.8rem com especificidade maior que .input) também: o iOS dá zoom em qualquer campo < 16px, até readonly. */
  .campo input[type="text"], .campo input[type="email"], .campo input[type="password"], .campo input[type="number"],
  .campo input[type="date"], .campo input[type="time"], .campo input[type="tel"], .campo input[type="search"], .campo input[type="url"],
  .campo select, .campo textarea, .input, .link-copiar .input,
  .reagendar-form input[type="date"] { font-size: 16px; padding: 11px 12px; min-height: 46px; }
  .campo select { padding-right: 34px; }
  .campo textarea { min-height: 96px; }
  .form-rodape { flex-direction: column-reverse; gap: 8px; }
  .form-rodape .btn { width: 100%; padding: 12px; font-size: 0.9rem; }
  .filtros { gap: 8px; }
  .filtros .campo { flex: 1 1 100%; min-width: 0; }
  .filtros .campo.curto { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .filtros .campo .btn { width: 100%; min-height: 46px; }
  .link-copiar { flex-wrap: wrap; }
  .link-copiar .btn { flex: 1 1 100%; }
  .cartao-cabecalho .acoes { width: 100%; }
  .cartao-cabecalho .acoes .btn { flex: 1 1 auto; }
  .btn { min-height: 40px; }
  .btn-pequeno { min-height: 34px; }

  /* ── Abas, paginação, diversos ── */
  .abas { gap: 0; margin: 0 -12px 14px; padding: 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .abas::-webkit-scrollbar { display: none; }
  .abas a { padding: 10px 12px; font-size: 0.82rem; flex-shrink: 0; }
  .paginacao { flex-wrap: wrap; justify-content: center; }
  .paginacao a, .paginacao span { padding: 8px 12px; min-width: 38px; text-align: center; }
  .vazio { padding: 28px 12px; }
  .aviso-caixa { font-size: 0.8rem; }
  details.colapsavel summary { padding: 12px; }
  .rel-seletor select { min-width: 0; width: 100%; }
  .rel-cabecalho { flex-direction: column; }

  /* ── Formulários públicos: escala confortável pro dedo (≥ 44px), cabeçalho e rodapé enxutos ── */
  .publico-conteudo { padding: 14px 12px 40px; }
  .publico h1 { font-size: 1.15rem; }
  .publico .intro { font-size: 0.85rem; }
  .pergunta { padding: 14px 12px; border-radius: var(--radius-md); }
  .escala { gap: 5px; }
  .escala span { height: 46px; font-size: 1rem; }
  .escala .na span { font-size: 0.72rem; }
  .escala-legenda { font-size: 0.64rem; }
  .publico .envio-fixo { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }

  /* ── Login / páginas do PWA ── */
  body.auth { padding: calc(16px + env(safe-area-inset-top, 0px)) 14px calc(24px + env(safe-area-inset-bottom, 0px)); align-items: flex-start; }
  .auth-cartao { padding: 20px 16px; }
  .auth-marca h1 { font-size: 1.4rem; }
  .modal { padding: 20px 16px; border-radius: var(--radius-lg); }
  .toast-atualizar { left: 12px; right: 12px; transform: none; justify-content: space-between; white-space: normal; }
}
/* Telas bem estreitas (≤ 400px): título do botão instalar só com o ícone quando há ações na página */
@media screen and (max-width: 400px) {
  .topbar-titulo h1 { font-size: 0.98rem; }
  .kpi-valor { font-size: 1.3rem; }
}
/* Landscape do celular: barra de progresso e envio fixo roubariam a tela inteira — soltam. */
@media screen and (max-width: 900px) and (max-height: 450px) and (orientation: landscape) {
  .progresso-fixo, .publico .envio-fixo { position: static; }
}