/* Ficha do paciente. Ver js/ui/paciente.js. */

.cabecalho-paciente {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--borda);
}
.meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.meta span {
  display: inline-flex; align-items: center;
  background: var(--fundo); border: 1px solid var(--borda);
  color: var(--texto-suave); font-size: .8rem; line-height: 1.4;
  padding: .2rem .65rem; border-radius: 999px;
}

/* ------------------------------------------------------------ Abas */
.abas { display: flex; gap: .2rem; border-bottom: 1px solid var(--borda); margin-bottom: 1.25rem; }
.aba {
  position: relative;
  background: none; border: 0; padding: .65rem 1rem;
  color: var(--texto-suave); border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: var(--raio-peq) var(--raio-peq) 0 0;
  transition: color var(--transicao), background-color var(--transicao), border-color var(--transicao);
}
.aba:hover:not(:disabled):not(.ativa) { color: var(--texto); background: var(--fundo); }
.aba.ativa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }
.aba:disabled {
  color: var(--texto-suave); opacity: .5; cursor: not-allowed;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 5px, rgba(100, 112, 125, .06) 5px, rgba(100, 112, 125, .06) 10px
  );
}
.aba:disabled::after {
  content: '🔒'; margin-left: .4rem; font-size: .7em; opacity: .75; vertical-align: middle;
}

/* ------------------------------------------------------------ Histórico / registros */
.cabecalho-registro {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .3rem 0; font-size: .92rem;
}
.registro-fechado {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .6rem .9rem; margin-bottom: .45rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.registro-fechado:hover { border-color: var(--borda-forte); }
.registro-fechado.aberto { border-color: var(--acento); box-shadow: var(--sombra-suave); }
.registro-fechado .marcador { color: var(--texto-suave); transition: transform .15s; display: inline-block; }
.registro-fechado.aberto .marcador { transform: rotate(90deg); color: var(--acento); }
.corpo-registro:not(:empty) { padding-top: .8rem; border-top: 1px solid var(--borda); margin-top: .6rem; }

.texto-registro {
  white-space: normal; line-height: 1.7; font-size: .95rem;
  max-width: 68ch; color: var(--texto);
}

/* Um adendo é um ACRÉSCIMO datado, nunca uma edição do texto original —
   por isso o bloco fica visualmente separado (fundo, borda lateral, rótulo). */
.adendo {
  border-left: 3px solid var(--acento);
  background: var(--acento-claro);
  padding: .7rem .9rem;
  border-radius: 0 var(--raio-peq) var(--raio-peq) 0;
  margin-top: 1.1rem;
}
.adendo + .adendo { margin-top: .6rem; }
.adendo .nota {
  color: var(--acento-forte); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; font-size: .72rem;
  margin: 0 0 .4rem; display: flex; align-items: center; gap: .3rem;
}
.adendo .nota::before { content: '+'; font-size: 1rem; line-height: 1; }
.adendo .texto-registro { font-size: .92rem; max-width: none; }

.rodape-registro {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: .8rem; flex-wrap: wrap;
}
.historico { margin-top: 1.4rem; }

/* ------------------------------------------------------------ Lista de pacientes */
.linha-paciente {
  display: flex; align-items: center; gap: .9rem;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .8rem 1rem; margin-bottom: .5rem; cursor: pointer;
  transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.linha-paciente:hover { border-color: var(--acento); box-shadow: var(--sombra); transform: translateY(-1px); }

.avatar-paciente {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--cor-avatar-claro, var(--acento-claro));
  color: var(--cor-avatar, var(--acento-forte));
  font-weight: 700; font-size: .92rem; letter-spacing: -.02em;
}

.info-paciente { flex: 1 1 auto; min-width: 0; }
.info-paciente strong {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.seta-direita { flex: 0 0 auto; color: var(--borda-forte); font-size: 1.2rem; transition: transform var(--transicao), color var(--transicao); }
.linha-paciente:hover .seta-direita { color: var(--acento); transform: translateX(2px); }

.busca-larga {
  width: 100%; padding: .65rem .8rem .65rem 2.3rem; margin-bottom: 1rem;
  border: 1px solid var(--borda); border-radius: var(--raio-peq);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364707d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: .75rem center; background-size: 16px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.busca-larga:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro);
}

@media (max-width: 560px) {
  .texto-registro { max-width: none; }
}