/* ============================================================================= */
/* VivverRES — composições sobre o design system Crescer                         */
/* Carregado DEPOIS de crescer-ui.css. Só compõe em cima dos blocos base e usa   */
/* exclusivamente tokens --crescer-*; nenhuma cor literal.                       */
/* ============================================================================= */

/* --- PONTE DE MIGRAÇÃO (temporária) -----------------------------------------
   As telas ainda não convertidas foram escritas para um fundo de página quase branco
   (bg-slate-50). O shell do Crescer usa um canvas cinza (--crescer-bg), onde o conteúdo
   deveria morar dentro de cards brancos. Some-se a isso o preflight do Tailwind, que
   zera o fundo de TODO controle de formulário:

     button,input,select,textarea { background-color: #0000 }

   Resultado: input, select e botão sem classe `bg-*` ficam "transparentes" sobre o
   cinza. Enquanto as views não são convertidas, damos a eles a superfície branca.

   Tudo em :where() — especificidade ZERO — para que qualquer `bg-*` do Tailwind ou
   qualquer `.crescer-btn--*` continue vencendo. APAGAR este bloco quando as views
   estiverem todas no design system. */

/* Todo o kit vive na cascade layer `crescer` — ver a ordem declarada em
   application.css. Isso deixa os utilitários do Tailwind sobreporem o kit. */
@layer crescer {
:where(.crescer-content) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select,
  textarea,
  button
) {
  background-color: var(--crescer-surface);
}

/* Links que se comportam como botão (têm borda utilitária) — um link de texto comum
   nunca tem `border-*`, então não é atingido. */
:where(.crescer-content) :where(a[class*="border-"]) {
  background-color: var(--crescer-surface);
}

/* --- Área de conteúdo do portal do cidadão -------------------------------------
   Coluna centrada e mais estreita que o painel do operador, com tipografia maior:
   público leigo, leitura em celular, e sem sidebar para dividir o espaço. */
.crescer-portal { max-width: 62rem; margin: 0 auto; padding: 28px 20px 56px; }
.crescer-cidadao .crescer-card__body { font-size: 14.5px; }
.crescer-cidadao .crescer-lista { font-size: 14.5px; }
.crescer-cidadao .crescer-lista__quando { font-size: 12.5px; }
.crescer-cidadao .crescer-titulo { font-size: 26px; }
.crescer-cidadao .crescer-subtitulo { font-size: 14.5px; }
/* Acentos teal em vez do azul institucional. */
.crescer-cidadao .crescer-card__head h2 { color: var(--crescer-accent); }
.crescer-cidadao .crescer-kpi { border-top: 3px solid var(--crescer-accent); }

/* Selos de garantia (LGPD, reversibilidade) no rodapé do portal. */
.crescer-selos {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px;
  font-size: 13px; color: var(--crescer-text-soft);
}
.crescer-selos span { display: inline-flex; align-items: center; gap: 7px; }
.crescer-selos i { color: var(--crescer-accent); }

/* --- Variante "cidadão" -----------------------------------------------------
   O portal do cidadão tem identidade própria dentro da plataforma: teal (cuidado,
   acolhimento) em vez do azul institucional, e tipografia um pouco maior — o público
   é leigo e inclui idosos. A ESTRUTURA é a mesma do login administrativo; muda só a
   tinta e a escala. */

.crescer-login--cidadao .crescer-login__brand {
  background: linear-gradient(150deg,
              var(--crescer-cat-2) 0%,
              var(--crescer-accent) 55%,
              var(--crescer-cat-6) 100%);
}

/* Alvos de toque e leitura maiores no fluxo do cidadão. */
.crescer-login--cidadao .crescer-login__lead,
.crescer-login--cidadao .crescer-login__subtitle { font-size: 14.5px; }
.crescer-login--cidadao .crescer-login__card { max-width: 380px; }
.crescer-login--cidadao .crescer-input { padding: 12px 14px; font-size: 15px; }
.crescer-login--cidadao .crescer-field label { font-size: 13.5px; }

/* Botão primário na cor do cidadão (mesma forma do .crescer-btn--primary). */
.crescer-btn--accent {
  background: var(--crescer-accent);
  border-color: var(--crescer-accent);
  color: #fff;
}
.crescer-btn--accent:hover { filter: brightness(1.08); }
.crescer-btn--accent:focus-visible { outline-color: var(--crescer-accent); }

/* Botão do Gov.BR — identidade de terceiro, não é cor de marca nossa; por isso o
   azul oficial fica isolado aqui, num token próprio, e não vaza para a paleta. */
.crescer-btn--govbr {
  --res-govbr: #1351B4;
  background: var(--res-govbr);
  border-color: var(--res-govbr);
  color: #fff;
}
.crescer-btn--govbr:hover { filter: brightness(1.1); }
.crescer-btn--govbr b { font-weight: 800; }

/* --- Barra de busca autônoma ---------------------------------------------------
   Diferente da `.crescer-toolbar` do kit, que é a barra de filtros de DENTRO de um
   card (tem fundo próprio e borda inferior). Esta fica solta sobre o canvas, acima
   do conteúdo: campo ocupando a linha inteira e o botão só com a largura que precisa.
   A margem inferior mora aqui — não em `style:` no form_with, que o Rails descarta. */
.crescer-busca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.crescer-busca__campo { flex: 1 1 260px; min-width: 0; }
.crescer-busca .crescer-btn { flex: none; }
/* Quando a busca mora dentro de um cabeçalho de seção, sem margem e sem esticar. */
.crescer-busca--inline { margin-bottom: 0; }
.crescer-busca--inline .crescer-busca__campo { flex: 0 1 auto; }

/* --- Página de formulário -------------------------------------------------------
   Formulários de cadastro ficam numa coluna estreita e centrada: linha longa demais
   prejudica o preenchimento. O `.crescer-form-grid` do kit organiza os campos dentro. */
.crescer-form-pagina { max-width: 720px; }
.crescer-form-pagina--estreita { max-width: 520px; }

/* --- Opções exclusivas com painel revelado (JS-free) ---------------------------
   Lista de rádios em que a opção marcada revela seus próprios campos. Puro CSS via
   irmão-adjacente do `:checked` — nada de Stimulus. Substitui as variantes
   `peer/<nome>` do Tailwind, que exigiam um apelido diferente por bloco. */
.crescer-opcoes { display: flex; flex-direction: column; gap: 8px; }
.crescer-opcao { border: 1px solid var(--crescer-border); border-radius: var(--crescer-radius); overflow: hidden; transition: border-color .15s ease; }
.crescer-opcao:has(.crescer-opcao__input:checked) { border-color: var(--crescer-brand); }
.crescer-opcao__input { position: absolute; opacity: 0; width: 0; height: 0; }
.crescer-opcao__rotulo { display: block; padding: 10px 12px; font-size: 13px; cursor: pointer; }
.crescer-opcao__rotulo small { color: var(--crescer-text-faint); font-weight: 400; }
.crescer-opcao__input:checked + .crescer-opcao__rotulo { background: var(--crescer-info-bg); color: var(--crescer-brand-dark); font-weight: 600; }
.crescer-opcao__input:focus-visible + .crescer-opcao__rotulo { outline: 2px solid var(--crescer-brand); outline-offset: -2px; }
.crescer-opcao__painel { display: none; padding: 10px 12px; border-top: 1px solid var(--crescer-border); font-size: 13px; color: var(--crescer-text-soft); }
.crescer-opcao__input:checked ~ .crescer-opcao__painel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Linha do editor de etapas do fluxo (campos em sequência numa caixa). */
.crescer-etapa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--crescer-border); border-radius: var(--crescer-radius);
}
.crescer-etapa__rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--crescer-text-faint); }
.crescer-etapa__remover { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--crescer-danger); cursor: pointer; }

/* --- Ações no fim da linha da tabela -------------------------------------------
   Conjunto de links/botões discretos ("Monitorar · Executar · Editar · Excluir").
   Vários são `button_to`, que gera um <form> — daí o reset de form/button aqui, para
   ficarem indistinguíveis dos links ao lado. */
.crescer-acoes { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; white-space: nowrap; }
.crescer-acoes form { display: inline; margin: 0; }
.crescer-acoes a,
.crescer-acoes button {
  padding: 0; border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 12px; line-height: 1.4; color: var(--crescer-brand-dark);
}
.crescer-acoes a:hover,
.crescer-acoes button:hover { text-decoration: underline; }
.crescer-acoes .is-neutra { color: var(--crescer-text-faint); }
.crescer-acoes .is-perigo { color: var(--crescer-danger); }

/* --- Bloco de alerta destacado -------------------------------------------------
   Mais forte que o `.crescer-callout` do kit: usado para o último erro de uma rotina,
   onde a mensagem precisa saltar. Tinge pelos pares semânticos (bg suave + cor forte). */
.crescer-alerta {
  padding: 14px 16px; border-radius: var(--crescer-radius); border: 1px solid;
  font-size: 13px;
}
.crescer-alerta__titulo { font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.crescer-alerta pre { margin: 0; font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.crescer-alerta--danger { background: var(--crescer-danger-bg); border-color: var(--crescer-danger); color: var(--crescer-danger); }
.crescer-alerta--warn   { background: var(--crescer-warn-bg);   border-color: var(--crescer-warn);   color: var(--crescer-warn); }
.crescer-alerta--info   { background: var(--crescer-info-bg);   border-color: var(--crescer-info);   color: var(--crescer-info); }

/* Bloco de código/exemplo (mesmo visual do JSON expansível, mas sempre visível). */
.crescer-bloco-codigo {
  margin: 12px 0 0; padding: 12px; border-radius: 8px; overflow-x: auto;
  font-size: 11.5px; line-height: 1.6; background: #0f172a; color: #e2e8f0;
}

/* Bloco de JSON expansível (payload FHIR bruto). Terminal escuro, largura contida. */
.crescer-json { margin-top: 6px; }
.crescer-json > summary {
  display: inline-flex; align-items: center; gap: 5px; list-style: none;
  font-size: 12px; color: var(--crescer-brand-dark); cursor: pointer;
}
.crescer-json > summary::-webkit-details-marker { display: none; }
.crescer-json > summary:hover { text-decoration: underline; }
.crescer-json__seta { font-size: 10px; transition: transform .15s ease; }
.crescer-json[open] > summary .crescer-json__seta { transform: rotate(90deg); }
.crescer-json pre {
  margin: 8px 0 0; padding: 12px; border-radius: 8px; overflow-x: auto;
  font-size: 11.5px; line-height: 1.6;
  background: #0f172a; color: #e2e8f0;
}

/* Bloco de erro expansível dentro de uma célula. */
.crescer-erro-detalhe > summary { font-size: 12px; color: var(--crescer-danger); cursor: pointer; }
.crescer-erro-detalhe > summary:hover { text-decoration: underline; }
.crescer-erro-detalhe pre {
  margin: 6px 0 0; padding: 8px; max-width: 28rem;
  font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--crescer-danger); background: var(--crescer-danger-bg);
  border: 1px solid var(--crescer-danger); border-radius: 6px;
}

/* Switch em linha própria: rótulo forte + explicação à esquerda, controle à direita.
   Para ligar/desligar uma integração inteira, onde a decisão merece destaque. */
.crescer-switch-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px 0; cursor: pointer;
}
.crescer-switch-linha__txt b { display: block; font-size: 14px; font-weight: 600; }
.crescer-switch-linha__txt span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--crescer-text-faint); }

/* Bloco "opções avançadas" recolhido. */
.crescer-detalhes { margin-top: 16px; }
.crescer-detalhes > summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none;
  font-size: 12.5px; color: var(--crescer-text-faint); cursor: pointer;
}
.crescer-detalhes > summary::-webkit-details-marker { display: none; }
.crescer-detalhes > summary:hover { color: var(--crescer-brand-dark); }
.crescer-detalhes[open] > summary { margin-bottom: 12px; color: var(--crescer-text-soft); }

/* Caixa de credencial OAuth (chave/segredo de um acesso), aninhada num card. */
.crescer-credencial {
  padding: 12px; border: 1px solid var(--crescer-border); border-radius: var(--crescer-radius);
  background: var(--crescer-surface-2);
}
.crescer-credencial__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }

/* --- Cabeçalho de página ------------------------------------------------------
   Título + subtítulo à esquerda e ações à direita. Repete-se em praticamente toda
   tela do painel, então vira composição em vez de utilitário solto por view. */
.crescer-pagina-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.crescer-pagina-head > :last-child { flex: none; }
.crescer-titulo { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--crescer-text); }
.crescer-subtitulo { margin: 4px 0 0; font-size: 13px; color: var(--crescer-text-faint); max-width: 78ch; }
.crescer-secao-titulo { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--crescer-text); }

/* Grade de cards de conteúdo (catálogos, listagens em cartão). */
.crescer-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
/* Painel largo + painel estreito lado a lado (gráfico principal + apoio). */
.crescer-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 900px) { .crescer-grid-2-1 { grid-template-columns: 1fr; } }

/* ALTURA UNIFORME NA LINHA.
   Sem isto, dois cards lado a lado têm alturas diferentes e a linha fica torta — o caso
   clássico é a legenda do donut, que em telas médias quebra para baixo do gráfico e faz
   aquele card crescer muito além do vizinho.
   `align-items: stretch` (padrão do grid) já iguala a ALTURA DA CAIXA; o que faltava era
   o conteúdo acompanhar: o card vira coluna flex e o corpo cresce para ocupar a sobra. */
/* O kit usa `align-items: start` no .crescer-grid-2 — bom para blocos de altura livre.
   Quando a linha é de CARDS, queremos o oposto: altura uniforme. */
.crescer-grid-2:has(> .crescer-card) { align-items: stretch; }

.crescer-grid-2 > .crescer-card,
.crescer-grid-2-1 > .crescer-card,
.crescer-cards > .crescer-card { display: flex; flex-direction: column; min-width: 0; }
.crescer-grid-2 > .crescer-card > .crescer-card__body,
.crescer-grid-2-1 > .crescer-card > .crescer-card__body,
.crescer-cards > .crescer-card > .crescer-card__body { flex: 1 1 auto; }

/* Área de plotagem que ocupa a altura sobrante do card (em vez de altura fixa). */
.crescer-plot { display: flex; flex-direction: column; height: 100%; }
.crescer-plot__area { flex: 1 1 auto; min-height: 190px; }

/* Bloco de KPIs que divide a linha com um gráfico: as fileiras repartem a altura da
   linha, então o conjunto de tiles termina na mesma altura do card vizinho. */
.crescer-grid-2-1 > .crescer-kpis { align-content: stretch; grid-auto-rows: 1fr; margin-bottom: 0; }

/* --- Ficha de identificação (pares rótulo/valor) -------------------------------
   Cabeçalho do prontuário e telas de detalhe: <dl> em grade, rótulo miúdo em cima
   do valor. Substitui grades de <div> com utilitário solto. */
.crescer-ficha {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 28px; margin: 14px 0 0;
}
.crescer-ficha dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--crescer-text-faint); }
.crescer-ficha dd { margin: 2px 0 0; font-size: 13.5px; color: var(--crescer-text); }

/* --- Lista de registros clínicos ----------------------------------------------
   Padrão que se repete em todo o prontuário: descrição à esquerda, data/meta à
   direita, itens separados por linha fina. Usado dentro de um crescer-card__body. */
.crescer-lista { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.crescer-lista > li { padding: 9px 0; border-bottom: 1px solid var(--crescer-border); }
.crescer-lista > li:first-child { padding-top: 0; }
.crescer-lista > li:last-child { border-bottom: 0; padding-bottom: 0; }
.crescer-lista__linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.crescer-lista__quando { flex: none; font-size: 11.5px; color: var(--crescer-text-faint); white-space: nowrap; }
.crescer-lista__meta { margin: 3px 0 0; font-size: 11.5px; color: var(--crescer-text-faint); }
.crescer-lista__acoes { display: flex; gap: 12px; margin-top: 5px; font-size: 11.5px; }
.crescer-lista__vazio { margin: 0; font-size: 13px; color: var(--crescer-text-faint); }
/* Código/qualificador secundário dentro do texto do item. */
.crescer-lista__cod { color: var(--crescer-text-faint); }

/* --- Linha do tempo (histórico de transições) ---------------------------------
   Trilho vertical com um marcador por evento. Usado no histórico de status da
   Regulação; serve para qualquer rastro cronológico. */
.crescer-timeline { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--crescer-border); }
.crescer-timeline > li { position: relative; padding: 0 0 18px; }
.crescer-timeline > li:last-child { padding-bottom: 0; }
.crescer-timeline > li::before {
  content: ""; position: absolute; left: -27px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--crescer-brand); box-shadow: 0 0 0 3px var(--crescer-surface);
}

/* --- Card do catálogo de dashboards ------------------------------------------ */
.crescer-card-dash.is-inativo { opacity: .72; }
.crescer-card-dash__nome { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.crescer-card-dash__nome a { color: var(--crescer-brand-dark); }
.crescer-card-dash__nome a:hover { text-decoration: underline; }
.crescer-card-dash__ico { color: var(--crescer-text-faint); flex: none; }

/* Estrela de favoritar — botão sem moldura, só o ícone muda de cor. */
.crescer-fav {
  flex: none; padding: 2px 4px; border: 0; background: transparent; cursor: pointer;
  color: var(--crescer-border); border-radius: 6px; transition: color .15s ease;
}
.crescer-fav:hover, .crescer-fav.is-on { color: var(--crescer-warn); }

/* --- Barra de filtros que quebra linha ---------------------------------------
   O `.crescer-segmented` do kit é uma peça única que não quebra — serve para 2–4
   opções (ex.: 7d/30d/90d). Para conjuntos longos e variáveis (as ~10 situações do
   FHIR Appointment na Regulação) usamos pílulas independentes que fluem em várias
   linhas, com os mesmos estados visuais do segmented. */
.crescer-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.crescer-filtros > a {
  padding: 7px 13px; border-radius: 8px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--crescer-border); background: var(--crescer-surface);
  color: var(--crescer-text-soft); text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.crescer-filtros > a:hover { background: var(--crescer-surface-2); color: var(--crescer-text); }
/* Ativo usa o passo escuro da marca — texto pequeno sobre fill precisa de AA. */
.crescer-filtros > a.is-active {
  background: var(--crescer-brand-dark); border-color: var(--crescer-brand-dark); color: #fff;
}
.crescer-filtros > a.is-active:hover { background: var(--crescer-brand-darker); color: #fff; }
}