/* Gestão — CS5 Design System, versão mobile-first.
 *
 * Os tokens de cor e a tipografia são os mesmos de portal/static/css/base.css
 * (Inter, #003D7C, #0072CE, #00875A, #C0392B). Arquivo autocontido de
 * propósito (convenção do playground/): copiado de playground/audit/static/
 * css/audit.css, com as seções novas (dropzone, spinner, cards de paciente)
 * no fim.
 */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --primary:#003D7C;--primary-dark:#0055A5;--accent:#0072CE;--success:#00875A;
  --warning:#E5A000;--danger:#C0392B;
  --bg:#F5F7FA;--card:#FFF;--border:#E2E8F0;
  --text:#1A202C;--subtext:#718096;
  --font:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  --tap:46px;
}

html,body{font-family:var(--font);background:var(--bg);color:var(--text);
  font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}

/* ── Topo ─────────────────────────────────────────────────────────────── */
/* Uma única linha: menu ⋮ / voltar, título (trunca com "…"), início, sair.
 * Sem ícone de app nem subtítulo — informação de contexto (contagem, filtro
 * ativo etc.) mora no conteúdo da página, não na appbar. Fontes/tamanhos/
 * disposição alinhados com a appbar do app flashcardio (fundo chapado, sem
 * gradiente; botões de toque 44px; título text-lg/tracking-tight). */
.topo{position:sticky;top:0;z-index:50;
  background:var(--primary);color:#fff;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  display:flex;align-items:center;gap:8px;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.topo-titulo{flex:1;min-width:0;font-size:18px;font-weight:700;line-height:1;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Botão de ícone único (voltar/início/sair/menu) — mesmo tamanho e estado
 * ativo pra tudo que vive na appbar. */
.topo-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:44px;height:44px;border-radius:8px;color:rgba(255,255,255,.9);
  -webkit-tap-highlight-color:transparent}
.topo-btn:active{background:rgba(255,255,255,.15)}
.topo-btn svg{width:19px;height:19px}

/* ── Menu ⋮ (overflow, canto esquerdo do topo) ───────────────────────────── */
.menu-kebab{position:relative;flex-shrink:0}
.menu-kebab summary{list-style:none;cursor:pointer}
.menu-kebab summary::-webkit-details-marker{display:none}
.menu-kebab[open] summary{background:rgba(255,255,255,.18)}
.menu-kebab-lista{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.2);overflow:hidden;z-index:100}
.menu-kebab-lista a{display:block;padding:12px 16px;font-size:13.5px;font-weight:600;
  color:var(--text);-webkit-tap-highlight-color:transparent}
.menu-kebab-lista a:active{background:var(--bg)}
.menu-kebab-lista a + a{border-top:1px solid var(--border)}

/* ── Conteúdo ─────────────────────────────────────────────────────────── */
.conteudo{max-width:680px;margin:0 auto;padding:14px 12px calc(100px + env(safe-area-inset-bottom))}

.secao{margin-bottom:18px}
.secao-titulo{font-size:11.5px;font-weight:700;color:var(--primary);
  text-transform:uppercase;letter-spacing:1px;margin:0 4px 8px;
  display:flex;align-items:center;gap:8px}
.secao-titulo::after{content:'';flex:1;height:1px;background:var(--border)}

.cartao{background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);overflow:hidden}

/* ── Campos de formulário (tela de conferência) ───────────────────────── */
.campos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.campo{background:var(--card);padding:11px 13px}
.campo.largo{grid-column:1 / -1}
.campo-rotulo{font-size:10.5px;font-weight:700;color:var(--subtext);
  text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px;display:block}
.campo-valor{font-size:15px;color:var(--text);line-height:1.4;white-space:pre-wrap}
.campo-valor-grande{font-size:22px;font-weight:700;color:var(--primary);margin-top:2px}

.entrada{width:100%;font-family:var(--font);font-size:16px;   /* 16px evita zoom no iOS */
  color:var(--text);background:transparent;border:none;padding:2px 0;outline:none;resize:vertical}
.entrada::placeholder{color:#CBD5E0}

/* Campo obrigatório vazio ao tentar salvar — feedback visual próprio porque a
 * bolha nativa do HTML5 (:invalid) não aparece no Safari/iOS em modo PWA
 * standalone, o que fazia o toque em "Salvar" parecer não fazer nada. */
.campo.campo-invalido{background:#FFF5F5;box-shadow:inset 0 0 0 1px var(--danger)}
.campo.campo-invalido .campo-rotulo{color:var(--danger)}

/* ── Botões ───────────────────────────────────────────────────────────── */
.btn-enviar{min-height:var(--tap);padding:0 22px;border:none;border-radius:9px;
  background:var(--primary);color:#fff;font-family:var(--font);font-size:15px;
  font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn-enviar:active{background:#002E5E}
.btn-enviar:disabled{opacity:.75;cursor:default}
.btn-salvar{display:flex;align-items:center;justify-content:center;gap:10px}
.spinner-branco{border-color:rgba(255,255,255,.4);border-top-color:#fff}
.btn-secundario{display:inline-block;min-height:var(--tap);line-height:var(--tap);
  padding:0 24px;border:1px solid rgba(0,61,124,.2);border-radius:9px;
  background:var(--card);color:var(--primary);font-size:15px;font-weight:600}

/* ── Avisos ───────────────────────────────────────────────────────────── */
.aviso{background:#FFFAF0;border:1px solid #FBD38D;border-left:4px solid var(--warning);
  border-radius:9px;padding:12px 14px;font-size:13.5px;color:#7B341E;margin-bottom:14px}
.aviso.ruim{background:#FFF5F5;border-color:#FEB2B2;border-left-color:var(--danger);color:#822727}

/* ── Dropzone de upload ───────────────────────────────────────────────── */
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:200px;border:2px dashed var(--border);
  border-radius:12px;background:var(--bg);cursor:pointer;overflow:hidden;
  -webkit-tap-highlight-color:transparent}
.dropzone:active{background:#EDF2F7}
#dropzone-texto{display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--subtext);font-size:13.5px;font-weight:600;padding:20px}
#dropzone-texto svg{width:34px;height:34px;stroke:var(--accent)}
#preview{max-width:100%;max-height:340px;object-fit:contain}

.carregando{display:none;flex-direction:column;gap:18px}
.carregando.visivel{display:flex}
.spinner{width:34px;height:34px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--accent);
  animation:girar .8s linear infinite;flex-shrink:0}
.spinner-pequeno{width:16px;height:16px;border-width:2px}
@keyframes girar{to{transform:rotate(360deg)}}

/* Status rotativo (texto trocando por baixo do esqueleto, ver enviar.html) */
.carregando-status{display:flex;align-items:center;justify-content:center;gap:10px;
  color:var(--subtext);font-size:13.5px;font-weight:600;text-align:center}

/* ── Esqueleto (placeholder fantasma) da tela de conferência ────────────
 * Mesma grade de .campos/.campo (2 colunas), com barras cinza "brilhando"
 * no lugar dos rótulos/valores — dá uma prévia da forma do que vai chegar,
 * em vez de uma tela em branco com só um spinner. */
.esqueleto{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);
  border-radius:12px;overflow:hidden}
.esqueleto-campo{background:var(--card);padding:11px 13px}
.esqueleto-campo.largo{grid-column:1 / -1}
.esqueleto-linha{height:11px;border-radius:5px;margin-top:8px;
  background:linear-gradient(90deg,#E7ECF2 25%,#F2F5F8 37%,#E7ECF2 63%);
  background-size:400% 100%;animation:brilho 1.4s ease-in-out infinite}
.esqueleto-linha:first-child{margin-top:0}
.esqueleto-rotulo{width:36%;height:8px;opacity:.7}
@keyframes brilho{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ── Contagem (info que saiu da appbar) ──────────────────────────────────── */
.contagem{font-size:12px;color:var(--subtext);margin:0 2px 10px}

/* ── Ordenação / filtros ──────────────────────────────────────────────────
 * Uma linha só, sem quebra: se não couber tudo, rola na horizontal em vez
 * de quebrar (misturar pill ao lado e embaixo fica feio e confuso). */
.ordenar{display:flex;align-items:center;gap:7px;margin-bottom:12px;
  flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.ordenar::-webkit-scrollbar{display:none}
.ordenar-rotulo{flex-shrink:0;font-size:11px;font-weight:700;color:var(--subtext);
  text-transform:uppercase;letter-spacing:.5px}
.ordenar-pill{flex-shrink:0;white-space:nowrap;min-height:32px;display:flex;align-items:center;
  padding:0 13px;border:1.5px solid rgba(0,114,206,.2);border-radius:99px;
  background:rgba(0,114,206,.1);font-size:12.5px;font-weight:600;color:var(--primary);
  transition:background .18s,border-color .18s;-webkit-tap-highlight-color:transparent}
.ordenar-pill.ativo{background:rgba(0,114,206,.2);border-color:var(--accent);font-weight:700}

/* ── Lista de pacientes ───────────────────────────────────────────────── */
.pacientes{display:grid;gap:11px}
.paciente-card{background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);border-left:4px solid var(--accent);
  position:relative}
/* Borda lateral por unidade — mesmo slug do badge ("pill-<slug>" -> "borda-<slug>"). */
.paciente-card.borda-cti{border-left-color:var(--danger)}
.paciente-card.borda-usi{border-left-color:var(--warning)}
.paciente-card.borda-ui{border-left-color:var(--success)}
.paciente-card-link{display:block;padding:14px 52px 14px 16px;color:inherit;
  -webkit-tap-highlight-color:transparent}
.paciente-card-link:active{background:#FAFCFE}
.paciente-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.paciente-nome{font-size:16px;font-weight:700;color:var(--primary)}
.pill{background:rgba(0,114,206,.1);color:var(--primary);font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:99px;white-space:nowrap;flex-shrink:0}
/* Unidade (CTI/USI/UI) — mesma paleta de --danger/--warning/--success já usada no resto do app. */
.pill-cti{background:rgba(192,57,43,.12);color:var(--danger)}
.pill-usi{background:rgba(229,160,0,.16);color:#8A5A00}
.pill-ui{background:rgba(0,135,90,.12);color:var(--success)}
.paciente-linha{font-size:12.5px;color:var(--subtext);margin-top:4px;display:flex;gap:5px;flex-wrap:wrap}
.paciente-medico{font-size:12.5px;color:var(--subtext);margin-top:2px}

/* ── Apagar paciente ──────────────────────────────────────────────────── */
/* 44px — mesmo alvo de toque do resto do app (--tap, .topo-btn), não os
   30px de antes: ação destrutiva pequena demais era fácil de errar o toque. */
.paciente-apagar{position:absolute;top:6px;right:6px;width:44px;height:44px;z-index:2;
  display:flex;align-items:center;justify-content:center;border-radius:10px;border:none;
  background:transparent;color:#CBD5E0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.paciente-apagar:active{background:#FFF5F5;color:var(--danger)}
.modal-fundo{display:none;position:fixed;inset:0;background:rgba(26,32,44,.5);
  z-index:200;align-items:center;justify-content:center;padding:20px}
.modal-fundo.visivel{display:flex}
.modal-caixa{background:var(--card);border-radius:14px;padding:20px;max-width:340px;width:100%;
  box-shadow:0 20px 50px rgba(0,0,0,.3)}
.modal-caixa h3{font-size:16px;color:var(--text);margin-bottom:8px}
.modal-caixa p{font-size:13.5px;color:var(--subtext);line-height:1.45;margin-bottom:16px}
.modal-botoes{display:flex;gap:10px}
.modal-botoes .btn-secundario{flex:1;text-align:center}
.modal-botoes .btn-enviar{flex:1}

/* ── Rodapé fixo (lista de pacientes) ────────────────────────────────────
 * Fica FORA de <main>, então não rola com o conteúdo. `.conteudo.tem-
 * rodape-fixo` reserva espaço embaixo pra nenhum card ficar coberto —
 * precisa vencer o padding-bottom do breakpoint desktop também (por isso
 * a especificidade de duas classes, não uma regra dentro do media query). */
.conteudo.tem-rodape-fixo{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
.rodape-fixo{position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--card);border-top:1px solid var(--border);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 10px rgba(0,0,0,.06)}
.btn-rodape{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;max-width:680px;margin:0 auto;text-decoration:none}

/* ── Desktop: o app é mobile-first, mas não pode quebrar no monitor ───── */
@media (min-width:700px){
  .conteudo{padding:20px 16px 28px}
}