@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
:root {
/*
* Tema clínico Rossol — light, na nova identidade: petróleo #00585d
* (primary) e dourado #c6ac64 (família accent). São as mesmas duas cores
* que o laudo impresso usa (`Views::Laudos::Pdf#estilos`) e que o logo
* carrega, para que tela e papel não falem línguas diferentes.
*
* Os neutros ficam no hue 201 do petróleo — o tingimento é sutil, mas é o
* que impede o cinza de brigar com a marca. Tons derivados para contraste.
*/
--background: oklch(0.99 0.002 201);
--foreground: oklch(0.2 0.015 201);
--card: oklch(1 0 0);
--card-foreground: oklch(0.2 0.015 201);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.2 0.015 201);
--primary: oklch(0.419 0.071 201); /* #00585d */
--primary-foreground: oklch(0.995 0.005 201);
--secondary: oklch(0.96 0.015 201);
--secondary-foreground: oklch(0.4 0.06 201);
--muted: oklch(0.965 0.005 201);
--muted-foreground: oklch(0.53 0.015 201);
--accent: oklch(0.94 0.03 90); /* dourado claro, base #c6ac64 */
--accent-foreground: oklch(0.45 0.075 90);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.925 0.008 201);
--input: oklch(0.905 0.01 201);
--ring: oklch(0.419 0.071 201);
--chart-1: oklch(0.419 0.071 201); /* petróleo */
--chart-2: oklch(0.752 0.097 90); /* #c6ac64 */
--chart-3: oklch(0.62 0.06 201);
--chart-4: oklch(0.55 0.08 90);
--chart-5: oklch(0.85 0.035 201);
--radius: 0.625rem;
--sidebar: oklch(0.985 0.005 201);
--sidebar-foreground: oklch(0.2 0.015 201);
--sidebar-primary: oklch(0.419 0.071 201);
--sidebar-primary-foreground: oklch(0.995 0.005 201);
--sidebar-accent: oklch(0.94 0.03 90);
--sidebar-accent-foreground: oklch(0.45 0.075 90);
--sidebar-border: oklch(0.925 0.008 201);
--sidebar-ring: oklch(0.419 0.071 201);
/* ruby_ui specific */
--warning: oklch(0.72 0.09 90); /* dourado, base #c6ac64 */
--warning-foreground: oklch(0.99 0.005 90);
--success: oklch(0.63 0.13 157); /* verde: é semântico, não é marca */
--success-foreground: oklch(0.995 0.005 157);
/* Seta do conector da composição, no tom do protótipo rev04 — o mesmo
* #CEE5E2 do CSS embutido do PDF (`.conector`): tela e papel iguais. */
--conector: #cee5e2;
/* Zebra das tabelas do laudo, o mesmo #E8F8F3 de `--menta` no CSS embutido
* do PDF: a tabela na tela é a tabela do papel. */
--menta: #e8f8f3;
/* O lustre dourado das réguas do impresso, medido no material rev05 e
* idêntico ao `--lustre` do CSS embutido do PDF. As paradas ficam separadas
* da direção para os dois sentidos saírem da mesma lista. */
--lustre: #856b3a 0%, #856b3a 17%, #d8bd88 34%, #7d6537 52%, #b09359 76%, #7d6537 93%;
--dourado-lustre: linear-gradient(90deg, var(--lustre));
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.145 0 0);
--popover-foreground: oklch(0.985 0 0);
/* O app é light-only; o bloco existe por herança do RubyUI. Só primary e
accent acompanham a marca, para ele não ficar incoerente se for usado. */
--primary: oklch(0.72 0.075 201);
--primary-foreground: oklch(0.145 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.35 0.05 90);
--accent-foreground: oklch(0.88 0.055 90);
--destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
--ring: oklch(0.439 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.439 0 0);
/* ruby_ui specific */
--warning: hsl(38 92% 50%);
--warning-foreground: hsl(0 0% 100%);
--success: hsl(84 81% 44%);
--success-foreground: hsl(0 0% 100%);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-conector: var(--conector);
--color-menta: var(--menta);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
/* ruby_ui specific */
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
}
/* Container settings */
@utility container {
margin-inline: auto;
padding-inline: 2rem;
max-width: 1400px;
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
/* Editor Tiptap (Components::CampoMarkdown). O ProseMirror aplica a classe
.tiptap ao editable; os estilos usam só tokens do tema. */
@layer components {
.tiptap {
@apply min-h-36 text-sm leading-relaxed text-foreground outline-none;
}
.tiptap p {
@apply mb-2;
}
.tiptap h1,
.tiptap h2,
.tiptap h3 {
@apply mt-3 mb-1.5 font-semibold text-foreground;
}
.tiptap h1 {
@apply text-lg;
}
.tiptap h2 {
@apply text-base;
}
.tiptap ul {
@apply mb-2 list-disc pl-5;
}
.tiptap ol {
@apply mb-2 list-decimal pl-5;
}
.tiptap blockquote {
@apply mb-2 border-l-2 border-border pl-3 text-muted-foreground;
}
.tiptap code {
@apply rounded bg-muted px-1 font-mono text-xs;
}
.tiptap pre {
@apply mb-2 rounded-md bg-muted p-3 font-mono text-xs;
}
/* Tabela no editor: espelha a de .prosa-tela, que por sua vez espelha a
`.prosa` do PDF — cabeçalho petróleo e zebra menta, para o que a médica vê
ser o que o papel imprime. A grade vertical é a exceção, e é do gesto: ver
o bloco da divisória abaixo. `table-fixed` é o que faz a
repartição das colunas valer: a largura sai do `` que o servidor
desenha (LarguraDasColunas) e que o node view do editor reescreve em
porcentagem. `relative` sustenta o realce da célula selecionada. */
.tiptap table {
@apply mb-3 w-full table-fixed border-collapse;
}
.tiptap td,
.tiptap th {
@apply relative border-b border-background px-2 py-1 align-middle break-words;
}
.tiptap th {
@apply bg-primary font-semibold text-primary-foreground;
}
/* A divisória entre colunas existe só no editor, e existe para o gesto: sem
ela a médica tem de adivinhar onde a coluna termina para pegar a divisa. É
por isso que ela para na penúltima — a última divisa não se arrasta
(`lastColumnResizable: false`), e linha desenhada onde não há gesto
mentiria. O papel e a prévia seguem sem grade, como o rev04. */
.tiptap td:not(:last-child) {
@apply border-r border-border;
}
.tiptap th:not(:last-child) {
@apply border-r border-primary-foreground/30;
}
/* O ProseMirror não separa thead: o cabeçalho é a primeira `tr` do tbody, e
`nth-child(even)` sozinho inverteria a zebra em relação ao papel, onde a
contagem começa na primeira linha de dado. */
.tiptap tbody tr:nth-child(odd):not(:first-child) {
@apply bg-menta;
}
.tiptap td:first-child {
@apply font-semibold;
}
/* A célula tem um parágrafo só (ver tiptap_controller): sem isto ele
carrega a margem de baixo e a linha fica torta. */
.tiptap td > p,
.tiptap th > p {
@apply mb-0;
}
/* A alça de reordenar a linha flutua na calha que JÁ existe à esquerda do
texto: 12px do `px-3` do container do editor mais 8px do `px-2` da célula.
Por isso a tabela do editor não muda de geometria e continua idêntica à de
`.prosa-tela` e à do papel — que é o ponto do bloco acima. A célula já é
`relative`, e é ela que ancora a alça. */
.tiptap .grip-de-linha {
@apply absolute top-1/2 -left-2 -translate-y-1/2 cursor-grab touch-none select-none
text-muted-foreground/60 opacity-0 transition-opacity;
}
.tiptap tbody tr:hover .grip-de-linha,
.tiptap .grip-de-linha[data-arrastando] {
@apply opacity-100;
}
.tiptap .grip-de-linha[data-arrastando] {
@apply cursor-grabbing text-primary;
}
/* Sem hover não há como descobrir a alça: em toque ela fica sempre à vista. */
@media (hover: none) {
.tiptap .grip-de-linha {
@apply opacity-100;
}
}
/* A divisa arrastável entre colunas, que o prosemirror-tables desenha como
widget dentro da célula — a célula já é `relative`, e é ela que a ancora.
Sem estas duas regras a alça existe e é invisível, e recurso que ninguém
vê não existe. O cursor entra no próprio editable enquanto o gesto corre,
daí `.tiptap.resize-cursor` sem espaço. */
.tiptap .column-resize-handle {
@apply pointer-events-none absolute inset-y-0 -right-px z-20 w-0.5 bg-primary;
}
.tiptap.resize-cursor {
@apply cursor-col-resize;
}
/* `.tableWrapper` é do node view do Tiptap (TableView), e o pacote ignora por
contrato as mutações que acontecem nele fora do ``: é o único lugar
dentro do editable onde o filete de destino pode entrar sem o DOMObserver
mandar reparsear a tabela. */
.tiptap .tableWrapper {
@apply relative;
}
.tiptap .alvo-da-linha {
@apply pointer-events-none absolute inset-x-0 h-0.5 -translate-y-px rounded-full bg-primary;
}
/* Classe do prosemirror-tables — sem ela a seleção de células é invisível. */
.tiptap .selectedCell:after {
@apply pointer-events-none absolute inset-0 bg-primary/10 content-[''];
}
}
/* Markdown renderizado em tela (Components::Markdown, classe prosa-tela).
A variante de impressão (.prosa) vive no CSS embutido do PDF. */
@layer components {
.prosa-tela {
@apply text-sm leading-relaxed text-foreground;
}
.prosa-tela p {
@apply mb-2;
}
.prosa-tela h1,
.prosa-tela h2,
.prosa-tela h3 {
@apply mt-3 mb-1.5 font-semibold;
}
.prosa-tela h1 {
@apply text-base;
}
.prosa-tela ul {
@apply mb-2 list-disc pl-5;
}
.prosa-tela ol {
@apply mb-2 list-decimal pl-5;
}
.prosa-tela table {
@apply mb-3 w-full table-fixed border-collapse text-sm;
}
.prosa-tela td,
.prosa-tela th {
@apply border-b border-background px-2 py-1 align-middle break-words;
}
.prosa-tela th {
@apply bg-primary font-semibold text-primary-foreground;
}
.prosa-tela tbody tr:nth-child(even) {
@apply bg-menta;
}
.prosa-tela td:first-child {
@apply font-semibold;
}
.prosa-tela code {
@apply rounded bg-muted px-1 font-mono text-xs;
}
.prosa-tela blockquote {
@apply mb-2 border-l-2 border-border pl-3 text-muted-foreground;
}
}
/* Alinhamento das colunas das tabelas do laudo. A unidade é a coluna, e ela
viaja no atributo `align` — o mesmo que o Commonmarker emite a partir do
delimitador do markdown e que o Tiptap escreve de volta (ver
tiptap_controller). O padrão é à esquerda como no protótipo; o seletor de
atributo tem especificidade maior que `.classe elemento`, então a ordem
destas regras não importa. Um `text-left` no `@apply` das células, que é
como isto já foi escrito, ganha do atributo e apaga o alinhamento em
silêncio: a médica alinha a coluna e a tela não muda. */
@layer components {
.tiptap th,
.tiptap td,
.prosa-tela th,
.prosa-tela td {
text-align: left;
}
.tiptap [align="center"],
.prosa-tela [align="center"] {
text-align: center;
}
.tiptap [align="right"],
.prosa-tela [align="right"] {
text-align: right;
}
}
/* A régua dourada no pé da tarja de descrição da composição: o mesmo lustre que
o PDF imprime, para a médica editar a tarja na cor em que ela sai. Fora de
`@layer` de propósito — a camada de utilities do Tailwind vem depois da de
componentes, e o `border` do markup do editor ganharia da régua ali dentro.
Zerar as três outras larguras é o que mantém `border-image` só na base: a
propriedade vale para os quatro lados, e o lado sem largura não pinta. */
.cartao-legenda-regua {
border-width: 0 0 2px;
border-style: solid;
border-color: transparent;
border-image: var(--dourado-lustre) 1;
}
/* A legenda de marcadores, na mesma proporção em que o PDF a imprime. Os três
emissores do DOM — Components::Laudos::LegendaDeMarcadores, o
esquema_controller (que o reconstrói à mão, porque a resposta durante a
marcação é 204) e o quadro/legenda.jsx — carregam só as classes semânticas:
o visual mora aqui e no CSS embutido de Views::Laudos::Pdf, e não em três
listas de utilitários que divergem em silêncio.
A moldura é o módulo: borda, raio, corpo do texto e os dois vãos são frações
dela, as MESMAS do papel. Só o `--moldura` muda de escala — 2rem na tela
contra os 8,13mm do impresso —, e é isso que faz a legenda da médica ser a
legenda que a paciente recebe. Os números literais são de
Components::Laudos::LegendaDeMarcadores (CSS não interpola Ruby): mudou lá,
muda aqui, e spec/components/laudos/legenda_de_marcadores_spec.rb cobra. */
@layer components {
.legenda-marcadores {
--moldura: 2rem;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: center;
gap: calc(var(--moldura) * 0.276) 1.25rem;
color: var(--color-foreground);
font-size: calc(var(--moldura) * 0.391);
}
.legenda-marcador {
display: flex;
align-items: center;
gap: calc(var(--moldura) * 0.281);
}
.legenda-marcador-moldura {
display: flex;
height: var(--moldura);
aspect-ratio: 1.302;
flex: none;
align-items: center;
justify-content: center;
border: calc(var(--moldura) * 0.073) solid #808080;
border-radius: calc(var(--moldura) * 0.135);
}
.legenda-marcador-moldura > span {
display: flex;
align-items: center;
justify-content: center;
}
.legenda-marcador-moldura svg {
width: 100%;
height: 100%;
}
}
/* Barra de marcadores das etapas de desenho. Os dois emissores —
Components::Laudos::BarraDeMarcadores (Anatomia) e
quadro/paleta_de_marcadores.jsx (Composição) — carregam só estas classes, e
o visual mora aqui, como na legenda.
Fixa no topo: abaixo do header de h-14, que só existe no celular. O z-20
fica sobre o rodapé da etapa (z-10) e sob as gavetas (z-40) e o zoom (z-50);
o -mx-6/px-6 sangra de ponta a ponta como o rodapé.
O modal "Todos" é um