/* status-paciente.css: aba "Status" em Ajustes (16/10). Só tokens do marca.css; campos e opções vêm de ajustes-clinica.css (pz-*, aj-*). */

/* ---------- Cor de STATUS (Eric 16/10: "perdido é vermelho, ganho é verde, e poder escolher a cor") ----------
   Paleta própria, separada das cores do sistema: --ok (feito/pago), --atencao (precisa de você), --erro (erro) e
   --ponto (a assistente agindo) continuam com o papel delas. A cor de status só pinta a ETIQUETA DE STATUS
   (bolinha + nome que a clínica deu, .st-tag) e as bolinhas do seletor (.st-bola); nunca botão, texto solto ou aviso.
   Vermelho de status puxa para o carmim (não é o coral da assistente); amarelo puxa para o dourado (não é o âmbar
   de "precisa de você"). Chaves = as do servidor (core/status-paciente.js CORES). Por chave: forte (bolinha e
   seletor, 3:1 no cartão), -claro (fundo da etiqueta) e -texto (nome, AA 4,5:1 no fundo, no cartão e na névoa).
   Mora aqui (e não no marca.css) porque é global só a partir deste arquivo; ao portar, pode subir para o marca.css.
   Reaproveitar em Pacientes, ficha e Conversas: window.etiquetaStatus({nome, cor}) em status-paciente.js. */
body.light{
  --st-verde:#1E8A52;    --st-verde-claro:#E2F3E8;    --st-verde-texto:#14653C;
  --st-vermelho:#D1293D; --st-vermelho-claro:#FCE6E8; --st-vermelho-texto:#A51D30;
  --st-azul:#2F62E0;     --st-azul-claro:#E3EBFD;     --st-azul-texto:#2349B5;
  --st-ambar:#B8860B;    --st-ambar-claro:#FBF0CC;    --st-ambar-texto:#7A5900;
  --st-roxo:#7A4FD8;     --st-roxo-claro:#EFE8FC;     --st-roxo-texto:#5E35B8;
  --st-rosa:#C93A86;     --st-rosa-claro:#FBE6F1;     --st-rosa-texto:#A0256A;
  --st-ciano:#0F8698;    --st-ciano-claro:#DDF2F4;    --st-ciano-texto:#0B6372;
  --st-cinza:#7C776D;    --st-cinza-claro:#E6E2DA;    --st-cinza-texto:#4D4943;
  --st-ink:#FFFFFF;
}
body:not(.light){
  --st-verde:#3DBE7A;    --st-verde-claro:#123222;    --st-verde-texto:#7ADBA5;
  --st-vermelho:#F2606E; --st-vermelho-claro:#3D171C; --st-vermelho-texto:#FF9AA3;
  --st-azul:#6E8FF5;     --st-azul-claro:#1C2648;     --st-azul-texto:#A3B8FF;
  --st-ambar:#E2B33C;    --st-ambar-claro:#3A2E0F;    --st-ambar-texto:#F2D27A;
  --st-roxo:#A585F7;     --st-roxo-claro:#2C2147;     --st-roxo-texto:#CDB6FF;
  --st-rosa:#EE6BAE;     --st-rosa-claro:#3D1830;     --st-rosa-texto:#FFA3D2;
  --st-ciano:#33B8CC;    --st-ciano-claro:#0F3239;    --st-ciano-texto:#7FDCE9;
  --st-cinza:#8A8478;    --st-cinza-claro:#33302B;    --st-cinza-texto:#D2CCC1;
  --st-ink:#141312;
}
.st-cor-verde{--st-pt:var(--st-verde);--st-bg:var(--st-verde-claro);--st-tx:var(--st-verde-texto)}
.st-cor-vermelho{--st-pt:var(--st-vermelho);--st-bg:var(--st-vermelho-claro);--st-tx:var(--st-vermelho-texto)}
.st-cor-azul{--st-pt:var(--st-azul);--st-bg:var(--st-azul-claro);--st-tx:var(--st-azul-texto)}
.st-cor-ambar{--st-pt:var(--st-ambar);--st-bg:var(--st-ambar-claro);--st-tx:var(--st-ambar-texto)}
.st-cor-roxo{--st-pt:var(--st-roxo);--st-bg:var(--st-roxo-claro);--st-tx:var(--st-roxo-texto)}
.st-cor-rosa{--st-pt:var(--st-rosa);--st-bg:var(--st-rosa-claro);--st-tx:var(--st-rosa-texto)}
.st-cor-ciano{--st-pt:var(--st-ciano);--st-bg:var(--st-ciano-claro);--st-tx:var(--st-ciano-texto)}
.st-cor-cinza{--st-pt:var(--st-cinza);--st-bg:var(--st-cinza-claro);--st-tx:var(--st-cinza-texto)}

/* Etiqueta de status: pílula 12/600 com a bolinha da cor e o nome; texto longo corta com reticências (title tem o nome).
   .g = tamanho de título (lista de Ajustes, opções do Mudar status). */
.st-tag{display:inline-block;max-width:100%;box-sizing:border-box;height:24px;padding:0 10px 0 9px;border-radius:999px;
  background:var(--st-bg,var(--st-cinza-claro));color:var(--st-tx,var(--st-cinza-texto));font-size:12px;font-weight:600;
  line-height:24px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.st-tag::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--st-pt,var(--st-cinza));vertical-align:1px}
.st-tag.g{height:28px;padding:0 12px 0 11px;font-size:14px;line-height:28px}
.st-tag.g::before{width:8px;height:8px;margin-right:7px}

/* Seletor de cor: rádios de verdade (Tab entra no grupo, setas trocam), bolinha 30 px dentro de alvo de 44 px,
   escolhida com anel tinta e o ✓; o nome da cor escolhida aparece ao lado de "Cor". */
.st-paleta{display:grid;grid-template-columns:repeat(8,44px);gap:4px}
.st-bola{position:relative;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.st-bola input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.st-bola span{width:30px;height:30px;border-radius:50%;background:var(--st-pt);display:grid;place-items:center;color:transparent;transition:box-shadow .15s}
.st-bola .ic{width:15px;height:15px}
.st-bola input:checked+span{color:var(--st-ink);box-shadow:0 0 0 2px var(--cartao),0 0 0 4px var(--tinta)}
.st-bola input:focus-visible+span{outline:2px solid var(--tinta);outline-offset:6px}
@media (hover:hover){.st-bola:hover input:not(:checked)+span{box-shadow:0 0 0 2px var(--cartao),0 0 0 4px var(--tx-4)}}

/* ---------- aba Status ---------- */
.sp-lista{gap:0;padding:6px 24px}
.sp-linha{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--linha)}
.sp-linha:last-child{border-bottom:0}
.sp-t{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}
.sp-nome{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.sp-desc{font-size:13.5px;line-height:1.45;color:var(--tx-3)}
.sp-bts{display:flex;gap:8px;flex-wrap:wrap}
.sp .cx-bt .ic{width:16px;height:16px}
.sp-linha.edit{flex-direction:column;align-items:stretch;gap:4px}
/* nome e cores lado a lado quando cabem; sem espaço (painel estreito, celular) as cores descem pra baixo do nome */
.sp-ed{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-start}
.sp-ren{flex:1 1 240px;min-width:0}
.sp-ed .sp-cor{flex:0 1 auto;min-width:0}
.sp .sp-cor{display:flex;flex-direction:column;gap:6px}
.sp .sp-cor .pz-lab{min-height:21px}
.sp-cor-nome{font-weight:500;color:var(--tx-3)}
.sp-cor-nome:not(:empty)::before{content:"·";margin-right:6px}
.sp .pz-campo.sp-cor{border-top:0}
.sp-ed-pe{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.sp-prev{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;font-size:13.5px;color:var(--tx-3)}
.sp-prev-l{flex:none}
.sp-conf{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:14px 16px;border-radius:16px;background:var(--nevoa)}
.sp-conf p{margin:0;flex:1 1 240px;font-size:14px;line-height:1.5;color:var(--tx-2)}
.sp .sp-perigo{background:var(--erro)!important;color:var(--cartao)!important}
.sp-novo{min-height:88px;flex-direction:row;width:100%;margin-top:14px;font-size:15px;font-weight:600;color:var(--tx-2);background:transparent;cursor:pointer}
.sp-form{margin-top:14px;gap:18px}
.sp-form .cx-h3{font-size:16.5px}
.sp-form .sp-ed-pe{padding-top:4px}
.sp-tipos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sp-tipos .pz-op{align-items:flex-start}
.sp-tipos .pz-op small{display:block;margin-top:2px;line-height:1.4}
.sp-vazio{color:var(--tx-3);font-size:14px;padding:12px 0}
.sp-erro{align-items:flex-start}
.sp-erro p{margin:0;color:var(--tx-2)}
@media (max-width:640px){
  .sp-lista{padding:4px 16px}
  .sp-tipos{grid-template-columns:minmax(0,1fr)}
  .st-paleta{grid-template-columns:repeat(4,44px);gap:4px 12px}
  /* Editar/Apagar ficam do tamanho do texto (ação rara); largura total só na edição e na confirmação */
  .sp-conf .sp-bts,.sp-linha.edit .sp-bts,.sp-form .sp-bts{width:100%}
  .sp-conf .sp-bts .cx-bt,.sp-linha.edit .sp-bts .cx-bt,.sp-form .sp-bts .cx-bt{flex:1 1 0;justify-content:center}
}