/* ════════════════════════════════════════════════════════
   Cirurgias: o quadro do ciclo cirúrgico.

   Uma coluna por etapa, cartões arrastáveis. As colunas são
   preenchidas em areia e os cartões em branco, sem acento
   lateral: estado selecionado é anel completo, como no resto
   do painel. Toda classe nasce com o prefixo `ciclo-`.
   ════════════════════════════════════════════════════════ */

.ciclo-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.ciclo-busca { flex: 1 1 16rem; max-width: 26rem; }
.ciclo-busca input {
  width: 100%;
  min-height: 38px;
  padding: .5rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-section);
  font: inherit;
  font-size: .88rem;
  color: var(--text-primary);
}
.ciclo-busca input:focus-visible { outline: 2px solid var(--terracota); outline-offset: 1px; }

.ciclo-quadro {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: .75rem;
  overflow: auto;
  overscroll-behavior: contain;
  padding: .2rem .2rem .6rem;
  scroll-snap-type: x proximity;
}

.ciclo-coluna {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: .7rem;
  border-radius: var(--raio);
  background: var(--bg-alt);
  scroll-snap-align: start;
  transition: box-shadow .15s ease;
}

/* Alvo do soltar: anel completo, nunca borda lateral. */
.ciclo-coluna-alvo { box-shadow: 0 0 0 2px var(--terracota); }

.ciclo-coluna-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .1rem .2rem .6rem;
}
.ciclo-coluna-topo h3 {
  margin: 0;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.ciclo-conta {
  font-size: .78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.ciclo-coluna-topo h3 { flex: 1; }
/* Cadastro direto na etapa, inclusive retroativo. Alvo de 28px desenhados. */
.ciclo-coluna-novo {
  width: 28px; height: 28px; flex: none; align-self: center;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--bg-section); color: var(--terracota-texto);
  font: 500 1rem/1 var(--f-body); cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.ciclo-coluna-novo:hover { border-color: var(--terracota); }
.ciclo-coluna-novo:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }
.ciclo-janela { margin: -.35rem .2rem .55rem; font-size: .72rem; color: var(--text-muted); }

.ciclo-cartoes {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 3rem;
  overflow-y: auto;
}

.ciclo-vazia {
  margin: 0;
  padding: .9rem .4rem;
  font-size: .8rem;
  color: var(--text-muted);
  text-align: center;
}

.ciclo-cartao {
  display: grid;
  gap: .45rem;
  padding: .7rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-section);
  cursor: pointer;
}
.ciclo-cartao:hover { border-color: var(--terracota); }
.ciclo-cartao:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }
.ciclo-cartao[draggable="true"] { cursor: grab; }
.ciclo-cartao-aberto { box-shadow: 0 0 0 1px var(--terracota); border-color: var(--terracota); }
.ciclo-cartao-arrastando { border-style: dashed; border-color: var(--terracota); background: var(--creme); }
.ciclo-cartao-voo { cursor: progress; background: var(--creme); }

.ciclo-cartao-topo { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ciclo-cartao-topo .pac-avatar { width: 32px; height: 32px; flex: none; }
.ciclo-cartao-nome { display: grid; gap: .1rem; min-width: 0; }
.ciclo-cartao-nome strong {
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.ciclo-cartao-nome span { font-size: .78rem; color: var(--text-muted); overflow-wrap: anywhere; }
.ciclo-selos { flex-wrap: wrap; }
.ciclo-cartao-dias { margin: 0; font-size: .72rem; color: var(--text-muted); }
.ciclo-cartao-cirurgia { margin: 0; font-size: .8rem; font-weight: 500; color: var(--terracota-texto); }

.ciclo-desistencias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .6rem;
}

/* ── O caso aberto, na coluna da direita ── */

.ciclo-dados { display: grid; gap: .7rem; margin: 0 0 1.4rem; }
.ciclo-dados div { display: grid; gap: .15rem; }
.ciclo-dados dt {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ciclo-dados dd { margin: 0; font-size: .92rem; color: var(--text-primary); }
.ciclo-dias { font-size: .78rem; color: var(--text-muted); }

.ciclo-bloco { margin: 0 0 1.2rem; }
.ciclo-subtitulo {
  margin: 0 0 .6rem;
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ciclo-data-fato {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem;
  font-size: .82rem; color: var(--text-muted);
}
.ciclo-data-fato input {
  padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--raio-sm);
  background: var(--bg-section); color: var(--text-primary); font: inherit; font-size: .85rem;
}
.ciclo-data-fato input:focus-visible { outline: 2px solid var(--terracota); outline-offset: 1px; }
.ciclo-editar-procedimentos { margin-left: .4rem; font-size: .8rem; }
.ciclo-mover { display: flex; flex-wrap: wrap; gap: .45rem; }
.ciclo-mover .filtro-opcao { min-height: 36px; }

.ciclo-interruptor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.4rem;
  padding: .7rem .8rem;
  border-radius: var(--raio-sm);
  background: var(--bg-alt);
  font-size: .88rem;
  color: var(--text-primary);
}

.ciclo-historico { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ciclo-historico li {
  display: grid;
  gap: .15rem;
  padding: .6rem .7rem;
  border-radius: var(--raio-sm);
  background: var(--bg-alt);
}
.ciclo-historico strong { font-size: .86rem; font-weight: 500; color: var(--text-primary); }
.ciclo-historico-meta { font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ciclo-historico-nota { font-size: .82rem; color: var(--text-primary); white-space: pre-wrap; }

@media (max-width: 900px) {
  .ciclo-quadro { grid-auto-columns: minmax(78vw, 1fr); }
}

/* O quadro rola por dentro; os controles não podem roubar metade da altura. */
.ciclo-area .secao-controles { max-height: none; }

/* A casa dá .8fr à coluna das telas operacionais; aqui o quadro precisa da
   largura, e o caso aberto cabe na medida do formulário. A regra tem uma
   classe a mais que `.area-operacional.com-acao:not(.com-detalhe)` para vencer
   por especificidade, e não pela ordem das folhas. Só acima de 1180px: abaixo
   disso vale a regra da casa, que troca o quadro pela coluna. */
@media (min-width: 1181px) {
  .area-mestre.ciclo-area.com-acao:not(.com-detalhe) {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(360px, 28vw, 440px));
  }
}

/* ── Conversa pelo cartão ── */

.ciclo-cartao-pe { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ciclo-cartao-conversa {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 30px;
  padding: .2rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}
.ciclo-cartao-conversa svg { width: 14px; height: 14px; flex: none; }
.ciclo-cartao-conversa:hover { border-color: var(--terracota); color: var(--terracota-texto); }
.ciclo-cartao-conversa:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }
.ciclo-cartao-conversa-aberta { border-color: var(--terracota); background: var(--terracota); color: var(--branco); }
.ciclo-cartao-conversa-aberta:hover { color: var(--branco); }

.ciclo-conversa { min-height: 0; }

/* A conversa abre à direita de quem a pediu: pelo cartão, entre o quadro e o
   caso; pelo botão do caso, depois dele (`.ciclo-conversa-depois`, com a
   coluna movida no DOM, para o redimensionamento seguir a ordem da tela). Só
   acima de 1180px; abaixo disso fica só a coluna mais à direita aberta. */
@media (min-width: 1181px) {
  .area-mestre.ciclo-area.ciclo-com-conversa:not(.com-acao) {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(340px, 30vw, 460px));
  }
  .area-mestre.ciclo-area.ciclo-com-conversa.com-acao {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(320px, 26vw, 420px)) minmax(0, clamp(320px, 24vw, 400px));
  }
}
@media (max-width: 1180px) {
  .area-mestre.ciclo-area.ciclo-com-conversa { grid-template-columns: minmax(0, 1fr); }
  .area-mestre.ciclo-area.ciclo-com-conversa .coluna-lista { display: none; }
  .area-mestre.ciclo-area.ciclo-com-conversa.com-acao:not(.ciclo-conversa-depois) .ciclo-conversa { display: none; }
  .area-mestre.ciclo-area.ciclo-com-conversa.ciclo-conversa-depois.com-acao .coluna-acao { display: none; }
}

/* ── Caso sugerido pela leitura das conversas, esperando a médica ── */

.selo-a-confirmar { color: var(--alerta); border-color: currentColor; border-style: dashed; }

.ciclo-sugestao {
  display: grid;
  gap: .5rem;
  margin: 0 0 1.4rem;
  padding: .8rem .9rem;
  border-radius: var(--raio-sm);
  background: var(--bg-alt);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.ciclo-sugestao p { margin: 0; }
.ciclo-sugestao-titulo {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--alerta);
}
.ciclo-sugestao-evidencia { font-style: italic; color: var(--text-muted); }
.ciclo-sugestao-espera { color: var(--text-muted); }
.ciclo-sugestao-acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }

/* ── O recorte "Para decidir" ── */

.ciclo-varredura-grupo { margin: 0 0 1.8rem; }
.ciclo-varredura-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .35rem; }
.ciclo-varredura-topo h3 {
  margin: 0;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ciclo-varredura-topo .ligacao { font-size: .8rem; }
.ciclo-varredura-porque { margin: 0 0 .8rem; max-width: 62rem; font-size: .84rem; line-height: 1.55; color: var(--text-muted); }
.ciclo-cartao-varredura { cursor: pointer; }
.ciclo-cartao-decidido { background: var(--creme); }
.ciclo-cartao-decidido .ciclo-cartao-nome strong { color: var(--text-muted); }
.ciclo-varredura-motivo { margin: 0 0 1.2rem; font-size: .88rem; line-height: 1.55; color: var(--text-primary); }
.ciclo-desistencias-a-confirmar { margin-top: 1.4rem; padding: 0 1rem; }

/* Critério de ordem dos cartões dentro da coluna. */
.ciclo-ordem { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--text-muted); }
.ciclo-ordem select {
  font: inherit;
  min-height: 38px;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--raio-sm);
  background: var(--bg-section);
  color: inherit;
}
.ciclo-ordem select:focus-visible { outline: 2px solid var(--terracota); outline-offset: 1px; }

/* "Desfazer" no aviso depois de arrastar, e na ficha do caso. */
.aviso-com-acao { align-items: center; }
.aviso-acao {
  margin-left: auto;
  font: inherit;
  font-weight: 600;
  color: var(--terracota);
  background: none;
  border: 0;
  padding: .15rem .25rem;
  cursor: pointer;
}
.aviso-acao:hover { text-decoration: underline; }
.ciclo-desfazer { margin-top: .6rem; }