/* Tela do intraoperatório (UAT 2026-09-29).
   Eric: "os cards estão muito colados", "o de medicamento está muito estranho", "como vou
   saber qual é a enfermeira que está no intra". Painel da sala no topo, colunas com
   respiro entre os cartões, checklist com fases separadas e janelas de registro com
   layout próprio. Tudo em tokens — claro e escuro saem das variáveis. */

/* ---------- Cabeçalho e faixa da sala ---------- */
.intra-header__allergies {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-danger-600);
}

/* Rodada A: na faixa escura o alerta de alergia vira um selo claro sobre vermelho
   translúcido — o vermelho cheio some no azul-marinho. */
.main-content__header .intra-header__allergies {
  display: inline-flex;
  gap: 6px;
  margin-top: 10px !important;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(239, 68, 68, .18);
  color: #ffc2c2 !important;
  font-size: 13px !important;
}

.intra-header__denied { margin: 4px 0 0 !important; font-size: 13px !important; }
.intra-header__close { display: inline-flex; }

.intra-room {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-5);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-5);
}

.intra-room__block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
  min-width: 0;
}

.intra-room__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

.intra-room__meta {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.intra-room__nurse {
  font-weight: 600;
  color: var(--color-success-600, var(--color-success-500));
}

.intra-room__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.intra-room .badge {
  white-space: normal;
  text-align: left;
  max-width: 100%;
}

/* ---------- Ficha anestésica em gráfico ---------- */
.intra-chart-card {
  margin: var(--space-5) 0 0;
}

.intra-chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.intra-chart-card__header .card__title {
  margin: 0;
}

.intra-chart-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.intra-chart-card__list {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
}

.anesthesia-chart {
  position: relative;
}

.anesthesia-chart__empty {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.anesthesia-chart__scroll {
  overflow-x: auto;
}

/* O SVG é desenhado em 960 unidades e escala por igual (largura, altura e texto): em
   tela larga (sem a barra lateral, Rodada A) o texto chegava a ~2×. Limita a escala a
   ~1,4× e alinha à esquerda, junto do título do cartão (centralizado, sobravam vãos dos
   dois lados); em telas estreitas segue rolando a partir de 720px. */
.anesthesia-chart__svg {
  display: block;
  width: 100%;
  min-width: 720px;
  max-width: 1360px;
  margin-inline: 0;
  height: auto;
  font-family: inherit;
}

.anesthesia-chart__svg text {
  font-size: 12px;
  fill: var(--color-text);
}

.anesthesia-chart__svg .ac-axis {
  font-size: 11px;
  fill: var(--color-text-secondary);
}

.anesthesia-chart__svg .ac-lane-label {
  font-size: 12px;
  fill: var(--color-text-secondary);
}

.ac-grid line {
  stroke: var(--color-border-light);
  stroke-dasharray: 2 4;
}

.ac-grid .ac-grid__edge {
  stroke: var(--color-border);
  stroke-dasharray: none;
}

.ac-vitals-scale line {
  stroke: var(--color-border-light);
}

.ac-event line {
  stroke: var(--color-warning-500);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}

.ac-event circle {
  fill: var(--color-warning-500);
}

.anesthesia-chart__svg .ac-event__label {
  font-size: 11px;
}

.anesthesia-chart__svg .ac-event--auto .ac-event__label {
  fill: var(--color-text-secondary);
}

.ac-event--auto line {
  stroke: var(--color-gray-400);
}

.ac-event--auto circle {
  fill: var(--color-gray-400);
}

.ac-dose circle {
  fill: #8b5cf6;
}

.anesthesia-chart__svg .ac-dose text {
  font-size: 11px;
}

.ac-stretch {
  fill: rgba(139, 92, 246, 0.28);
  stroke: rgba(139, 92, 246, 0.55);
  stroke-width: 1;
}

.ac-stretch--b {
  fill: rgba(139, 92, 246, 0.42);
}

.ac-lane--gas .ac-stretch {
  fill: rgba(59, 130, 246, 0.26);
  stroke: rgba(59, 130, 246, 0.55);
}

.ac-lane--gas .ac-stretch--b {
  fill: rgba(59, 130, 246, 0.4);
}

.ac-lane--solucao .ac-stretch {
  fill: rgba(148, 163, 184, 0.3);
  stroke: rgba(148, 163, 184, 0.6);
}

.ac-lane--solucao .ac-stretch--b {
  fill: rgba(148, 163, 184, 0.45);
}

.ac-stretch--open {
  stroke-dasharray: 4 3;
}

.anesthesia-chart__svg .ac-stretch__label {
  font-size: 11px;
  pointer-events: none;
}

.ac-lane--open {
  cursor: pointer;
}

.ac-lane--open:hover .ac-stretch,
.ac-lane--open:focus .ac-stretch {
  stroke-width: 2;
}

.ac-lane--open:focus {
  outline: none;
}

.ac-pa {
  stroke: #ef4444;
  stroke-width: 1.5;
}

.ac-pa__cap {
  fill: none;
  stroke: #ef4444;
  stroke-width: 1.5;
}

.ac-hr {
  fill: #22c55e;
}

.ac-spo2 {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 2;
}

.ac-spo2__dot {
  fill: #3b82f6;
}

.ac-etco2 {
  fill: none;
  stroke: #f59e0b;
  stroke-width: 1.5;
}

.ac-etco2__dot {
  fill: #f59e0b;
}

.ac-temp {
  fill: none;
  stroke: #94a3b8;
  stroke-width: 1.5;
}

.ac-temp__dot {
  fill: #94a3b8;
}

.ac-now {
  stroke: var(--color-text);
  stroke-width: 1.2;
}

.anesthesia-chart__svg .ac-now__label {
  font-size: 11px;
}

.ac-cursor {
  stroke: var(--color-text-secondary);
  stroke-width: 1;
}

.anesthesia-chart__tooltip,
.anesthesia-chart__popover {
  position: absolute;
  z-index: 5;
  min-width: 190px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
}

.anesthesia-chart__tooltip {
  pointer-events: none;
}

.anesthesia-chart__tooltip[hidden],
.anesthesia-chart__popover[hidden] {
  display: none;
}

.anesthesia-chart__svg .ac-vitals-empty {
  font-size: 12px;
  fill: var(--color-text-secondary);
}

.anesthesia-chart__tooltip > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.anesthesia-chart__tooltip-time {
  font-weight: 600;
  margin-bottom: 2px;
}

.anesthesia-chart__popover {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.anesthesia-chart__popover-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.anesthesia-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.anesthesia-chart__legend .lg {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: -1px;
}

.lg--hr { background: #22c55e; }
.lg--pa { background: #ef4444; width: 3px !important; border-radius: 0 !important; }
.lg--spo2 { background: #3b82f6; height: 3px !important; border-radius: 0 !important; }
.lg--etco2 { background: #f59e0b; height: 3px !important; border-radius: 0 !important; }
.lg--temp { background: #94a3b8; height: 3px !important; border-radius: 0 !important; }
.lg--dose { background: #8b5cf6; }
.lg--band { background: rgba(139, 92, 246, 0.35); width: 18px !important; border-radius: 3px !important; }

.intra-events-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}

.intra-events-list li {
  padding: var(--space-1) 0;
}

/* ---------- Registro do anexo 8 em seções ---------- */
.intra-record__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.intra-record__header .card__title {
  margin: 0;
}

.intra-record__save {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.intra-record__save[data-kind="saved"] {
  color: var(--color-success-600, var(--color-success-500));
}

.intra-record__save[data-kind="error"] {
  color: var(--color-danger-600);
}

.intra-section {
  border-top: 1px solid var(--color-border-light);
}

.intra-section__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.intra-section__summary::-webkit-details-marker {
  display: none;
}

.intra-section__summary::before {
  content: "▸";
  margin-right: var(--space-2);
  color: var(--color-text-secondary);
  transition: transform 0.15s ease;
}

.intra-section[open] > .intra-section__summary::before {
  transform: rotate(90deg);
}

.intra-section__summary > span:first-child {
  flex: 1;
}

.intra-section__body {
  padding: 0 0 var(--space-4);
}

.intra-section__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

/* ---------- Colunas: respiro entre os cartões ---------- */
.intra-layout {
  margin-top: var(--space-5);
}

.intra-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.intra-stack > .card,
.intra-stack > div > .card {
  margin: 0;
}

.intra-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.intra-section-header .card__title {
  margin: 0;
}

/* ---------- Identificação do registro: duas colunas de pares ---------- */
.intra-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

@media (max-width: 1280px) {
  .intra-identity {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

/* ---------- Checklist: cada fase um bloco ---------- */
.checklist-phase {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border-light);
}

.checklist-phase:first-of-type {
  border-top: 0;
  padding-top: var(--space-2);
}

.checklist-phase__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  cursor: pointer;
  list-style: none;
}

.checklist-phase__header::-webkit-details-marker {
  display: none;
}

.checklist-phase:not([open]) > .checklist-phase__header {
  margin-bottom: 0;
}

.checklist-phase__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.checklist-phase__observation-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
}

.checklist-phase__observation-form .btn {
  align-self: flex-start;
}

/* ---------- Janelas de registro ---------- */

.intra-form-row {
  display: grid;
  gap: var(--space-4);
}

.intra-form-row .form-group {
  margin-bottom: var(--space-4);
  min-width: 0;
}

.intra-form-row--main {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.intra-form-row--bolus {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.6fr);
}

.intra-form-row--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intra-form-row--infusion {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
}

.intra-form-row__note {
  grid-column: 1 / -1;
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}

.intra-infusion-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.intra-rates {
  margin-bottom: var(--space-4);
}

.intra-rates .table {
  margin-bottom: var(--space-2);
}

.intra-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border-light);
}

@media (max-width: 1100px) {
  .intra-room {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intra-room__block[data-test="intra-room-checklist"] {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .intra-room,
  .intra-form-row--main,
  .intra-form-row--bolus,
  .intra-form-row--two,
  .intra-form-row--infusion {
    grid-template-columns: minmax(0, 1fr);
  }

  .intra-form-row {
    gap: 0;
  }

}

/* A etapa atual "Intraoperatório" da trilha do procedimento leva à tela dela. */
a.wizard-step-node--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.wizard-step-node--link .wizard-step-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tabela de medicações/gases/soluções do passo 5: nome com via, tipo e lote abaixo. */
.intra-agents-table td {
  vertical-align: top;
}

.intra-agents-table__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* UAT 2026-09-29: o histórico de taxas é uma lista, um trecho por linha — em linha
   única ele atravessava a coluna do horário. */
.intra-rate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Só a taxa vigente (a última) fica em destaque; as anteriores, inclusive a primeira,
   ficam apagadas — o <strong> herda a cor do item. */
.intra-rate-list li {
  color: var(--color-text-secondary);
}

.intra-rate-list li strong {
  color: inherit;
}

.intra-rate-list li:last-child {
  color: var(--color-text);
}

/* UAT 2026-09-29: campos de data/hora estouravam a borda nas seções e nas janelas —
   `1fr` é `minmax(auto, 1fr)`, e o datetime-local tem largura mínima intrínseca. */
.intra-record .grid,
.modal .grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-4);
}

.intra-record .grid > *,
.modal .grid > *,
.intra-form-row > * {
  min-width: 0;
}

.intra-record input,
.intra-record select,
.intra-record textarea,
.modal input[type="datetime-local"] {
  max-width: 100%;
  min-width: 0;
}

/* UAT 2026-09-29: o selo da fase ("Pendente") quebrava no meio da palavra — a regra
   `.triage-layout-container .badge` (da triagem) força quebra com !important. */
.intra-layout .checklist-phase__header .badge {
  white-space: nowrap !important;
  word-break: normal !important;
  flex-shrink: 0;
}

/* UAT 2026-09-29: o registro intraoperatório em LEITURA (aba de Monitoramento depois do
   intra). O <fieldset disabled> impede editar; aqui ele deixa de parecer "apagado" —
   é o prontuário, e tem de ser lido. */
.intra-readonly {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.intra-readonly input:disabled,
.intra-readonly textarea:disabled,
.intra-readonly select:disabled {
  opacity: 1;
  color: var(--color-text);
  cursor: default;
  -webkit-text-fill-color: var(--color-text);
}

.intra-readonly .choice-pill,
.intra-readonly .form-group--checkbox label {
  cursor: default;
  opacity: 1;
}

.intra-readonly .choice-pill:has(input:not(:checked)) {
  opacity: 0.55;
}

.intra-readonly-tab .intra-record {
  margin-top: 0;
}

/* ================= Rodada A, fase 2: composição à beira do leito =================
   Alergia numa faixa de largura inteira no topo, a sala no cartão de destaque escuro,
   a ficha em gráfico em largura inteira e, abaixo, o registro à esquerda com checklist
   e assinaturas numa coluna à direita. Cores dos gráficos intocadas. */
.intra-allergy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  font: 500 14px/1.35 var(--font-sans);
  color: var(--color-text);
}

.intra-allergy strong { font-weight: 700; }
.intra-allergy__icon { color: var(--ok); }
.intra-allergy--unknown .intra-allergy__icon { color: var(--color-text-secondary); }

.intra-allergy--on {
  padding: 14px 18px;
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.intra-allergy--on .intra-allergy__icon { color: #fff; }

/* Sala no destaque escuro. */
.intra-room.cx-hero {
  display: block;
  margin: 0 0 16px;
  padding: 20px 22px;
}

.intra-room__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 20px;
}

.intra-room.cx-hero .intra-room__block { gap: 6px; color: #eef1fa; font-size: 13px; }
.intra-room.cx-hero .intra-room__title { color: #8e9ac0; font-size: 11px; letter-spacing: .08em; }
.intra-room.cx-hero .intra-room__meta { color: #a9b4d6; }
.intra-room.cx-hero .intra-room__nurse { color: #3fcb8d; }

.intra-room.cx-hero [data-test="intra-room-duration"] {
  font: 700 30px/1.05 var(--font-sans);
  letter-spacing: -.015em;
  color: #fff;
}

.intra-room__facts { margin-top: 18px; }
.intra-room__fact-text { font-size: 15px; font-weight: 600; line-height: 1.3; }

/* Ficha anestésica: título com ícone, ações à direita. */
.intra-chart-card { margin: 0 0 16px; border-radius: 16px; }
.intra-chart-card__header .card__title { display: flex; align-items: center; gap: 8px; }
.intra-chart-card__header .card__title .ms { color: var(--accent); }

/* Registro | checklist + assinaturas. */
.intra-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
  align-items: start;
  margin-top: 0;
}

.intra-stack { gap: 16px; }
.intra-stack > .card,
.intra-stack > div > .card { border-radius: 16px; }

@media (max-width: 1280px) {
  .intra-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}

@media (max-width: 1100px) {
  .intra-layout { grid-template-columns: minmax(0, 1fr); }
  .intra-room__grid { grid-template-columns: 1fr 1fr; }
  .intra-room__grid > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 900px) {
  .intra-allergy { font-size: 13px; padding: 10px 14px; }
  .intra-allergy--on { font-size: 15px; }
  .intra-room.cx-hero { padding: 16px; }
  .intra-room__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .intra-room__grid > :nth-child(2) { grid-row: auto; }
  .intra-room__facts { grid-template-columns: 1fr 1fr; }
  .intra-chart-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .intra-chart-card__actions .btn { min-height: 44px; justify-content: center; }
  .intra-chart-card__actions .btn--primary { grid-column: 1 / -1; }
}

/* Conferência do paciente (enfermeiro e cirurgião, INT-02): pares em linhas. */
.intra-check__title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.intra-check__title .ms { color: var(--accent); }
.intra-check__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); font-size: 14px; }

.intra-check__grid > span {
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
  min-width: 0;
  overflow-wrap: anywhere;
}

.intra-check__grid > span:nth-child(-n+2) { border-top: 0; }
.intra-check__grid > span:nth-child(odd) { padding-right: 16px; color: var(--color-text-secondary); }
.intra-check__grid > span:nth-child(even) { text-align: right; font-weight: 500; color: var(--color-text); }
.intra-check__strong { font-weight: 700 !important; }

.intra-stack--checklist { grid-column: 1 / -1; }
.intra-stack--side .proc-blockers { margin: 0; }

/* Checklist em largura inteira: as três fases lado a lado na tela larga. */
@media (min-width: 1101px) {
  .intra-stack--checklist #intra-checklist {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 20px;
    align-items: start;
  }
  .intra-stack--checklist #intra-checklist > .card__title,
  .intra-stack--checklist #intra-checklist > :not(.checklist-phase) { grid-column: 1 / -1; }
  .intra-stack--checklist .checklist-phase,
  .intra-stack--checklist .checklist-phase:first-of-type {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    border-radius: 14px;
  }
}