/* ═══════════════════════════════════════════════════════════════════════════
   ACOMPANHAMENTO.CSS — estilos próprios do diário clínico
   Carregado DEPOIS de form-style.css em todas as páginas que precisarem.
   Não toca classes do form-style.css (compartilhado com painel-operacao).
═══════════════════════════════════════════════════════════════════════════ */

/* ── Wider container (desktop usa mais a tela) ───────────────────────────── */
.ac-wide { max-width: 1480px; margin: 0 auto; padding: 28px 36px 80px; box-sizing: border-box; }
@media (max-width: 880px) { .ac-wide { padding: 18px 14px 60px; } }

/* ── Select clean (aplicado GLOBALMENTE em todo <select> + classe legada) ── */
/* Visual padrão da marca: fundo branco, borda sutil, seta vinho, hover suave.
   Qualquer <select> no painel-acompanhamento herda automaticamente. */
select,
.ac-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; padding: 11px 40px 11px 14px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  font-family: inherit; font-size: 14px; color: var(--white);
  line-height: 1.3;
  outline: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A65F6B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color .15s, box-shadow .15s, background-color .1s;
  box-sizing: border-box;
}
select:hover,
.ac-select:hover {
  border-color: var(--gold-light);
  background-color: #FBFAF3;
}
select:focus,
.ac-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(166,95,107,.12);
}
select:disabled,
.ac-select:disabled {
  background: #F3EFE2; color: var(--muted); cursor: not-allowed;
  border-color: var(--card-border);
}
/* Variação compacta usada em listas inline */
select.small,
.ac-select.small {
  padding: 7px 32px 7px 12px;
  font-size: 13px;
  border-radius: 8px;
  background-position: right 10px center;
}
/* Options dentro do select: fonte do projeto, padding confortável */
select option,
.ac-select option {
  color: var(--white);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
}
select option:checked,
.ac-select option:checked {
  background: rgba(166,95,107,.08);
  color: var(--gold);
  font-weight: 600;
}

/* iOS Safari: font-size <16px no mobile causa zoom automático ao focar */
@media (max-width: 768px) {
  select, .ac-select, .ac-input,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="date"], input[type="password"], input[type="number"],
  textarea {
    font-size: 16px !important;
  }
}

/* ── Inputs alinhados ao mesmo padrão ────────────────────────────────────── */
.ac-input {
  width: 100%; padding: 10px 14px; background: #fff;
  border: 1px solid var(--card-border); border-radius: 8px;
  font-family: inherit; font-size: 13px; color: var(--white); outline: none;
  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
.ac-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(166,95,107,.10); }

/* ── Collapsible (menu suspenso para blocos longos) ──────────────────────── */
.ac-collapse { background: #fff; border: 1px solid var(--card-border); border-radius: 14px; margin-bottom: 14px; overflow: hidden; }
.ac-collapse .ac-collapse-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; cursor: pointer; user-select: none;
  background: transparent; border: 0; width: 100%; font-family: inherit;
}
.ac-collapse .ac-collapse-h h3 { font-family: var(--serif); font-size: 18px; color: var(--white); font-weight: 600; margin: 0; }
.ac-collapse .ac-collapse-h .ac-chev {
  width: 22px; height: 22px; color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s;
}
.ac-collapse.open .ac-collapse-h .ac-chev { transform: rotate(180deg); }
.ac-collapse .ac-collapse-b { display: none; padding: 0 20px 20px; }
.ac-collapse.open .ac-collapse-b { display: block; }

/* ── Icon button compacto (substitui texto longo no header de panels) ────── */
.ac-iconbtn {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--gold); color: #fff; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .15s, transform .1s;
}
.ac-iconbtn:hover { opacity: .92; }
.ac-iconbtn:active { transform: scale(.95); }
.ac-iconbtn.ghost { background: transparent; color: var(--gold); border: 1px solid var(--card-border); }
.ac-iconbtn.ghost:hover { border-color: var(--gold); background: rgba(166,95,107,.06); }

/* ── Plano editor — item linha ───────────────────────────────────────────── */
.plano-item {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 1.1fr auto;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.plano-item input { width: 100%; padding: 9px 12px; border: 1px solid var(--card-border); border-radius: 8px; font-family: inherit; font-size: 13px; outline: none; background: #fff; color: var(--white); box-sizing: border-box; }
.plano-item input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(166,95,107,.10); }
.plano-item .rm { background: transparent; border: 0; color: var(--danger); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 6px; opacity: .55; }
.plano-item .rm:hover { opacity: 1; }
@media (max-width: 680px) {
  .plano-item { grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; }
  .plano-item input:nth-child(1), .plano-item input:nth-child(2), .plano-item .ac-select { grid-column: 1 / 2; }
  .plano-item .rm { grid-column: 2 / 3; grid-row: 1 / 4; }
}

/* ── Tratamento row (nome + tentativas) ──────────────────────────────────── */
.trat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #fff; border: 1px solid var(--card-border);
  border-radius: 8px; margin-bottom: 6px;
}
.trat-row > label { flex: 1; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--white); }
.trat-row input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; }
.trat-row .ac-select { max-width: 150px; }

/* ── Anamnese label/value layout ─────────────────────────────────────────── */
.anam-kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; padding: 4px 0; font-size: 13px; }
.anam-kv .k { color: var(--white); font-weight: 600; }
.anam-kv .v { color: var(--text); word-break: break-word; }
@media (max-width: 680px) { .anam-kv { grid-template-columns: 1fr; gap: 2px 0; } .anam-kv .v { padding-bottom: 6px; } }
.anam-grupo { margin: 16px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 700; }

/* ── Skeleton loading (placeholders animados enquanto carrega) ──────────── */
.ac-skel {
  background: linear-gradient(90deg, #ECE8DA 0%, #F3EFE2 50%, #ECE8DA 100%);
  background-size: 200% 100%;
  animation: ac-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes ac-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ac-skel-bar { height: 14px; margin-bottom: 8px; }
.ac-skel-title { height: 26px; width: 60%; margin-bottom: 12px; }
.ac-skel-card { background: #fff; border: 1px solid var(--card-border); border-radius: 14px; padding: 22px; margin-bottom: 14px; }

/* ── Container ajustado para inputs respirarem ───────────────────────────── */
.field input, .field select, .field textarea { box-sizing: border-box; max-width: 100%; }
.card { overflow: visible; }

/* ── Botão "+ adicionar X" clean (sem borda, só texto vinho) ───────── */
button.add-row,
.add-row {
  background: transparent;
  border: 0;
  color: var(--gold);
  padding: 10px 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  width: auto;
  margin-bottom: 10px;
  transition: opacity .15s, color .15s;
}
button.add-row:hover,
.add-row:hover {
  opacity: .8;
  background: transparent;
  border: 0;
  color: var(--gold-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE REFINEMENTS (<=640px): toque confortável, sem scroll horizontal,
   fontes legíveis, respeito a safe-area do iPhone (notch).
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Container usa toda a largura, com padding de respiro */
  .ac-wide { padding: 16px 14px 40px; max-width: 100%; }

  /* Touch targets: todo botão/link primário com min-height confortável */
  button, .btn, a.btn, a.card-btn, button.card-btn,
  input[type="button"], input[type="submit"] {
    min-height: 44px;
  }
  /* Exceto os ícones pequenos (ac-iconbtn), removedores (.rm) e X minimalista do editor */
  button.ac-iconbtn, .ac-iconbtn, button.rm, .rm,
  .plano-item .rm, .item-row .rm, .rm-ic, button.rm-ic {
    min-height: auto;
  }

  /* Inputs: fonte 16px pra evitar zoom automático do iOS Safari */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="date"], input[type="password"], input[type="number"],
  input[type="search"], textarea, select, .ac-input, .ac-select {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* Grids que forçam 2+ colunas no desktop: viram 1 coluna no mobile */
  .grid-2, .grid-3, .grid-4, .grid2 {
    grid-template-columns: 1fr !important;
  }

  /* Collapsibles com padding ajustado */
  .ac-collapse .ac-collapse-h { padding: 14px 16px; }
  .ac-collapse .ac-collapse-h h3 { font-size: 15px; }
  .ac-collapse .ac-collapse-b { padding: 0 14px 14px; }

  /* Cards com padding menor pra caber na tela */
  .card { padding: 16px 14px; }
  .panel { padding: 16px 14px; }

  /* Modais não colam nas bordas e respeitam safe-area */
  .modal-c, .modal-ed {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  /* Topbar/headers em mobile não deixam zoom horizontal */
  body { overflow-x: hidden; }

  /* Textarea mais alta no mobile pra escrever confortável */
  textarea { min-height: 90px; }

  /* Botões em linhas (.actions) viram vertical no mobile */
  .actions { flex-direction: column-reverse; }
  .actions .btn,
  .actions button { width: 100%; }
}

/* Safe-area pra iPhones com notch (todas as larguras) */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}