/* CSS próprio do projeto (não é de terceiro, diferente de pico.min.css/
   htmx.min.js — ver comentário de static.go) — simula abas em cima do
   <nav> do Pico CSS, que não tem componente de abas nativo. Usado pelo
   módulo `visit` (plan-tabs.md) em edit.templ e show.templ, em dois
   níveis: condições de saúde (nível 1) e farmacoterapias (nível 2,
   aninhadas dentro de cada condição, diferenciadas por `.tabs--nested`).
   Só usa variáveis --pico-*, então acompanha claro/escuro automaticamente,
   sem regra própria de tema. */

.tabs {
	border-bottom: 1px solid var(--pico-muted-border-color);
	margin-bottom: 0;
}

.tabs ul {
	display: flex;
	gap: 0.25rem;
	margin-bottom: -1px; /* sobrepõe a borda do container */
	padding-left: 0;
	overflow-x: auto; /* muitas abas: rolagem horizontal, nunca quebra de linha */
	flex-wrap: nowrap;
}

.tabs li {
	list-style: none;
	flex-shrink: 0; /* não encolhe/quebra texto — força a rolagem acima */
	position: relative; /* containing block do .tab-close (position:absolute) */
}

/* × de remoção (edit.templ, buildConditionsNav/buildPharmacotherapiesNav) —
   irmão do <a role="tab"> dentro do <li>, não filho (botão dentro de <a> é
   HTML inválido). Substitui os antigos botões "Remover condição"/"Remover
   farmacoterapia" que ficavam soltos no fim de cada painel — mais perto da
   aba que a pessoa já está olhando, sem precisar rolar até o fim do
   conteúdo pra remover.
   position:absolute (relativo ao <li>, não flex-item mais) sobrepõe o × por
   cima do canto direito da PRÓPRIA caixa da aba, em vez de ficar solto do
   lado de fora dela — mesmo truque de .field-row/.field-remove mais abaixo,
   aplicado aqui a <li>/<a role="tab"> em vez de <div>/<input>. Como o botão
   sai do fluxo normal, o <li> passa a se dimensionar só pelo <a> (único
   filho que ainda conta pro tamanho) — o padding-right extra do <a> abaixo
   é o que garante que o × caia dentro da borda da aba, não além dela.
   all:unset tira a aparência de botão do Pico (bordas, fundo, padding). */
.tabs .tab-close {
	all: unset;
	cursor: pointer;
	position: absolute;
	top: 50%;
	right: 0.4rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pico-muted-color);
	line-height: 1;
	font-size: 1rem;
	border-radius: var(--pico-border-radius);
}

.tabs .tab-close:hover,
.tabs .tab-close:focus-visible {
	color: var(--pico-del-color);
	background-color: var(--pico-muted-border-color);
}

.tabs--nested .tab-close {
	right: 0.3rem;
	font-size: 0.9em;
}

.tabs a[role="tab"] {
	display: inline-block;
	padding: 0.6rem 2rem 0.6rem 1.1rem; /* padding-right maior reserva o espaço do × (.tab-close), que fica sobreposto dentro desta borda */
	color: var(--pico-muted-color);
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tabs a[role="tab"]:hover {
	color: var(--pico-color);
	background-color: var(--pico-muted-border-color);
}

.tabs a[role="tab"][aria-selected="true"] {
	color: var(--pico-primary);
	font-weight: 600;
	background-color: var(--pico-background-color);
	border-color: var(--pico-muted-border-color);
	position: relative; /* efeito de "recorte" conectando com o painel abaixo */
}

.tabs a[role="tab"][aria-selected="true"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background-color: var(--pico-background-color);
}

/* Nível 2 (farmacoterapias, aninhadas dentro de uma condição) — mesmo
   componente, levemente recuado e reduzido para não ser confundido com o
   nível 1 (condições). */
.tabs--nested {
	margin-left: 1rem;
}

.tabs--nested a[role="tab"] {
	padding: 0.4rem 1.6rem 0.4rem 0.8rem; /* padding-right maior reserva o espaço do ×, mesmo racional de .tabs a[role="tab"] acima */
	font-size: 0.9em;
}

/* Painel de conteúdo (nível 1 e nível 2 compartilham a mesma regra) */
[role="tabpanel"] {
	border: 1px solid var(--pico-muted-border-color);
	border-top: none;
	border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius);
	padding: 1.5rem;
}

[role="tabpanel"][hidden] {
	display: none;
}

/* .footer-actions (edit.templ, <footer> da tela de atendimento) — "Salvar
   agora" e o <details> de "Cancelar atendimento" lado a lado, o de cancelar
   alinhado à direita (justify-content:space-between, únicos dois filhos).
   O comportamento de abrir o formulário de cancelamento continua o mesmo
   <details>/<summary> nativo — só a POSIÇÃO dos dois gatilhos mudou, o
   <details> aberto ainda cresce pra baixo, dentro da própria largura
   (align-items:flex-start evita que ele seja esticado pra mesma altura do
   botão "Salvar agora" enquanto fechado). "Finalizar atendimento"/"Concluir
   e enviar para revisão" ficam de fora deste flex, numa linha própria
   abaixo, como já era — margin-bottom explícito aqui é o que separa essa
   linha da de baixo (antes vinha de graça da margin-bottom que o Pico dá a
   <button>, efeito colateral que sumiu quando .footer-save > * zerou essa
   margem pra resolver o desalinhamento com "Conferir pendências" — sem
   isso as duas linhas ficam coladas). */
.footer-actions {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: var(--pico-spacing);
}

/* .footer-save — "Salvar agora" e sua cópia do indicador de salvamento
   (.save-indicator, o mesmo "salvo às HH:MM"/"salvando…" que já aparecia no
   cabeçalho) lado a lado, sem precisar rolar até o topo pra ver o status. */
.footer-save {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* .footer-save > * — zera a margin-bottom que o Pico dá de graça a
   elementos de bloco (button, entre outros: var(--pico-spacing), pensada
   pra ritmo vertical de página, não pra filho de flex row). "Salvar
   agora" (<button>) herda essa margem; "Conferir pendências" (<a
   role="button">), <mark> e <span> não — nenhum dos quatro é do tipo que
   o Pico cobre. Resultado sem isso: align-items:center centra pela
   caixa-com-margem, e só o <button> fica ~10px mais alto que os outros
   três (visível, "Salvar agora" desalinhado de "Conferir pendências"). */
.footer-save > * {
	margin-bottom: 0;
}

/* .grid (Pico) não tem margin-bottom próprio — só os campos de formulário
   (input/select/textarea) têm, via var(--pico-spacing) do próprio Pico. Uma
   linha de .grid cujos filhos são <div> soltos (não <label> com campo
   dentro — Efetividade/Segurança, Medicamento+Tempo de uso etc.) fica sem
   esse respiro embutido, daí o próximo bloco (ex.: "Dificuldade de uso")
   grudar nela. Escopado a #visit-editor pra não mudar o espaçamento das
   grids de patient/form.templ (que não teve esse pedido). */
#visit-editor .grid {
	margin-bottom: var(--pico-spacing);
}

/* .field-group — mesmo respiro do .grid acima, pro mesmo tipo de bloco
   (<div> solto, sem <label>/campo de formulário que já puxaria a margem
   sozinho): o bloco "PRMs" (renderPharmacotherapy) fica colado no próximo
   campo (Conduta) do mesmo jeito que a linha de Efetividade/Segurança
   ficava colada em "Dificuldade de uso" antes do ajuste acima. */
#visit-editor .field-group {
	margin-bottom: var(--pico-spacing);
}

/* .btn-add — botão circular só com "+" (edit.templ: "Nova condição", "Nova
   farmacoterapia", "Nova conduta", notas de efetividade/segurança, "Adicionar
   PRM"). Não é exclusivo de abas (aparece dentro de <h2>/<strong> fora de
   .tabs também), por isso fica solto aqui, não aninhado em .tabs — mesmo
   arquivo por já concentrar o CSS próprio da tela de atendimento.
   font-size: inherit é o que resolve a proporcionalidade pedida: o botão ao
   lado do <h2> "Condições de saúde" herda o tamanho maior do título e fica
   visualmente maior; os que ficam ao lado de <strong> (texto de corpo) ficam
   menores — tudo automático, sem regra por contexto. all:unset tira a
   aparência de botão retangular do Pico antes de redesenhar do zero. */
.btn-add {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
	border-radius: 50%;
	background-color: var(--pico-primary);
	color: var(--pico-primary-inverse);
	flex-shrink: 0;
	vertical-align: middle;
	transition: background-color 0.15s ease;
}

.btn-add:hover,
.btn-add:focus-visible {
	background-color: var(--pico-primary-hover);
}

/* .field-row (edit.templ: renderAction/renderNote — Outras condutas,
   Efetividade, Segurança) — cada linha é um <input> com um × de remoção
   embutido nela mesma, encostado na borda direita, em vez de um <button>
   depois do input que empurra pra linha de baixo (o <input> do Pico é
   width:100% por padrão). position:relative no wrapper + position:absolute
   no botão sobrepõe o × por cima do canto direito do campo; padding-right
   no input reserva espaço pra não escrever por baixo do botão. */
.field-row {
	position: relative;
	margin-bottom: var(--pico-spacing);
}

.field-row input {
	padding-right: 2.2em;
	margin-bottom: 0;
}

.field-row .field-remove {
	all: unset;
	cursor: pointer;
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5em;
	height: 1.5em;
	line-height: 1;
	color: var(--pico-muted-color);
	border-radius: 50%;
}

.field-row .field-remove:hover,
.field-row .field-remove:focus-visible {
	color: var(--pico-del-color);
	background-color: var(--pico-muted-border-color);
}