/* ═══════════════════════════════════════════════════════════════════════════
   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 chique (aplicado GLOBALMENTE em todo <select> + classe legada) ── */
/* Estilo padrão = qualquer <select> no painel-acompanhamento herda automaticamente.
   .ac-select é mantida como alias pra retrocompatibilidade. */
select,
.ac-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%; padding: 10px 38px 10px 14px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  font-family: inherit; font-size: 13px; color: var(--white);
  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='%239b514c' stroke-width='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;
  box-sizing: border-box;
}
select:focus,
.ac-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(155,81,76,.10);
}
select:hover,
.ac-select:hover { border-color: var(--gold-light); }
select.small,
.ac-select.small { padding: 7px 32px 7px 10px; font-size: 12px; background-position: right 10px center; }
/* Options dentro do select também ficam com fonte certa */
select option,
.ac-select option { color: var(--white); font-family: inherit; padding: 4px; }

/* ── 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(155,81,76,.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(155,81,76,.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(155,81,76,.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, #f0ede9 0%, #f7f5f3 50%, #f0ede9 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 terracota) ───────── */
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);
}