/* ============================================================
   Internação (/internacao/{id}) — redesenho
   Implementa "Internação.dc.html" do projeto Claude Design.
   Prefixado com .itn- e ancorado em .itn-page. Depende de medcare-tokens.css
   (que já traz a paleta teal, o IBM Plex e o Material Symbols).
   ============================================================ */

.itn-page {
    font-family: var(--mc-font-sans);
    color: var(--mc-text);
}

/* Ícone Material Symbols — o design usa a fonte como texto (o "nome" do ícone
   é o conteúdo do elemento), não uma classe. */
.itn-page .itn-ico {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 19px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    flex: none;
}

/* ---------- Header do paciente ----------
   Faixa única de ~56px: avatar de 40px + duas linhas (nome/pills e dados), ações no
   canto superior direito sem quebrar. Antes eram 80px em 1600 e 140px em 1366. */
.itn-page .itn-head {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    padding: 7px 10px 7px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: nowrap;
}

.itn-page .itn-head-id { display: flex; gap: 10px; align-items: center; min-width: 0; flex: 1 1 auto; }

.itn-page .itn-head-txt { min-width: 0; flex: 1 1 auto; }

/* Avatar menor só no header (o "sm" de 48px dita a altura da faixa). */
.itn-page .itn-head .avatar-sm {
    width: 2.5rem !important;
    height: 2.5rem !important;
    line-height: 2.5rem !important;
    flex: none;
}
.itn-page .itn-head .avatar-sm i { font-size: 1.25rem; }
.itn-page .itn-head .avatar-paciente { border-width: 2px; }

.itn-page .itn-head-linha {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.itn-page .itn-head-linha .itn-pill { flex: none; padding: 2px 9px; }

/* Identificadores na linha do nome: encolhem antes do nome (flex-shrink alto). */
.itn-page .itn-head-ids {
    flex: 0 10 auto;
    min-width: 0;
    margin-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: var(--mc-text-2);
}
.itn-page .itn-head-ids .itn-dot { margin: 0 2px; color: var(--mc-text-3); }
.itn-page .itn-head-ids .itn-origem-link { display: inline; }

.itn-page .itn-title {
    margin: 0;
    text-decoration: none;
    font-size: 16px;
    font-weight: var(--mc-fw-bold);
    letter-spacing: -.015em;
    color: var(--mc-text);
    line-height: 1.25;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bloco (não flex) para as reticências funcionarem: com display:flex o
   text-overflow não se aplica e a linha quebrava, empurrando a altura. */
.itn-page .itn-head-meta {
    margin-top: 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 1.4;
    color: var(--mc-text-2);
}
.itn-page .itn-head-meta > * { vertical-align: middle; }
.itn-page .itn-head-meta .itn-dot { margin: 0 2px; }
.itn-page .itn-head-meta .itn-meta-item { display: inline-flex; align-items: center; gap: 3px; }
.itn-page .itn-head-meta .itn-meta-item .itn-ico { font-size: 15px; color: var(--mc-text-3); }

.itn-page .itn-head-meta .itn-dot { color: var(--mc-text-3); }

.itn-page .itn-mono { font-family: var(--mc-font-mono); font-size: 12px; }

/* ---------- Pills ---------- */
.itn-page .itn-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--mc-radius-pill);
    font-size: 11px;
    font-weight: var(--mc-fw-semibold);
    white-space: nowrap;
    background: var(--mc-surface-3);
    color: var(--mc-text-2);
}

.itn-page .itn-pill-success { background: var(--mc-success-soft); color: var(--mc-success); }
.itn-page .itn-pill-warning { background: var(--mc-warning-soft); color: var(--mc-warning); }
.itn-page .itn-pill-danger  { background: var(--mc-danger-soft);  color: var(--mc-danger); }
.itn-page .itn-pill-info    { background: var(--mc-info-soft);    color: var(--mc-info); }
.itn-page .itn-pill-brand   { background: var(--mc-brand-soft);   color: var(--mc-brand); }
.itn-page .itn-pill-neutral { background: var(--mc-surface-3);    color: var(--mc-text-2); }

.itn-page .itn-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Botões do header ---------- */
.itn-page .itn-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: var(--mc-fw-semibold);
    cursor: pointer;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border-2);
    color: var(--mc-text-2);
    transition: color .18s, border-color .18s, background .18s;
    white-space: nowrap;
}

.itn-page .itn-btn:hover { color: var(--mc-brand); border-color: var(--mc-brand); }

.itn-page .itn-btn-icon { width: 36px; padding: 0; justify-content: center; }

.itn-page .itn-btn-primary {
    background: var(--mc-brand);
    border-color: var(--mc-brand);
    color: var(--mc-brand-ink);
    padding: 0 15px;
}

.itn-page .itn-btn-primary:hover {
    background: var(--mc-brand-2);
    border-color: var(--mc-brand-2);
    color: var(--mc-brand-ink);
}

/* ---------- Abas ---------- */
.itn-page .itn-tabs {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 6px;
    border-bottom: 1px solid var(--mc-border);
    overflow-x: auto;
}

.itn-page .itn-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 2px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s, border-color .18s;
}

.itn-page .itn-tab:hover { color: var(--mc-brand); }

.itn-page .itn-tab.active {
    color: var(--mc-brand);
    border-bottom-color: var(--mc-brand);
}

.itn-page .itn-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    padding: 0 6px;
    border-radius: var(--mc-radius-pill);
    font-size: 11px;
    font-weight: var(--mc-fw-semibold);
    background: var(--mc-brand-soft);
    color: var(--mc-brand);
}

.itn-page .itn-tab-badge.itn-badge-danger { background: var(--mc-danger-soft); color: var(--mc-danger); }

/* ---------- Sub-navegação (Monitorização / Cuidados) ---------- */
.itn-page .itn-subnav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 14px 6px 0;
}

.itn-page .itn-subtab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: var(--mc-fw-semibold);
    cursor: pointer;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border-2);
    color: var(--mc-text-2);
    transition: color .18s, border-color .18s, background .18s;
    white-space: nowrap;
}

.itn-page .itn-subtab .itn-ico { font-size: 17px; }

.itn-page .itn-subtab:hover { color: var(--mc-brand); border-color: var(--mc-brand); }

.itn-page .itn-subtab.active {
    background: var(--mc-brand-soft);
    border-color: var(--mc-brand);
    color: var(--mc-brand);
}

/* ---------- Conteúdo ---------- */
.itn-page .itn-body { padding: 16px 0 0; }

/* A barra de abas fica numa faixa branca própria, encostada no canvas — é o que
   separa a navegação do conteúdo sem precisar de um card em volta de tudo. */
.itn-page .itn-tabs {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    padding: 0 14px;
    margin-top: 0;
}

.itn-page .itn-subnav { padding: 12px 0 0; }

.itn-page .itn-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    padding: 16px;
}

.itn-page .itn-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.itn-page .itn-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.itn-page .itn-card-title .itn-ico { font-size: 20px; color: var(--mc-brand); }

.itn-page .itn-card-note { font-size: 11px; color: var(--mc-text-3); font-weight: 400; }

/* ---------- KPIs ---------- */
.itn-page .itn-kpis {
    display: grid;
    /* auto-fit em vez de 4 colunas fixas: com 4 KPIs o resultado é o mesmo; paciente de
       UTI ganha um 5º (Braden) e ele entra na mesma linha em vez de cair sozinho embaixo. */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

@media (max-width: 991.98px) { .itn-page .itn-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .itn-page .itn-kpis { grid-template-columns: 1fr; } }

.itn-page .itn-kpi {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 14px;
    padding: 15px 16px;
}

.itn-page .itn-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.itn-page .itn-kpi-label {
    font-size: 11px;
    font-weight: var(--mc-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mc-text-3);
}

.itn-page .itn-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex: none;
}

.itn-page .itn-kpi-val {
    margin-top: 12px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

/* O número usa a mono do design — dígitos alinham entre os cards. */
.itn-page .itn-kpi-num {
    font-family: var(--mc-font-mono);
    font-size: 26px;
    font-weight: var(--mc-fw-semibold);
    line-height: 1;
    color: var(--mc-text);
}

.itn-page .itn-kpi-unit { font-size: 13px; font-weight: var(--mc-fw-medium); color: var(--mc-text-3); }
.itn-page .itn-kpi-sub { margin-top: 4px; font-size: 12px; color: var(--mc-text-2); }

/* Tons dos iconboxes */
.itn-page .itn-tone-brand   { background: var(--mc-brand-soft);   color: var(--mc-brand); }
.itn-page .itn-tone-success { background: var(--mc-success-soft); color: var(--mc-success); }
.itn-page .itn-tone-warning { background: var(--mc-warning-soft); color: var(--mc-warning); }
.itn-page .itn-tone-danger  { background: var(--mc-danger-soft);  color: var(--mc-danger); }
.itn-page .itn-tone-info    { background: var(--mc-info-soft);    color: var(--mc-info); }
.itn-page .itn-tone-purple  { background: var(--mc-purple-soft);  color: var(--mc-purple); }
.itn-page .itn-tone-neutral { background: var(--mc-surface-3);    color: var(--mc-text-3); }

/* ---------- Visão geral: gráfico + atividades ---------- */
.itn-page .itn-overview {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 1199.98px) { .itn-page .itn-overview { grid-template-columns: 1fr; } }

.itn-page .itn-acts { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }

.itn-page .itn-act {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--mc-border);
}

.itn-page .itn-act:last-child { border-bottom: none; }

.itn-page .itn-act-title {
    font-size: 13px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text);
    line-height: 1.3;
}

.itn-page .itn-act-sub { font-size: 11.5px; color: var(--mc-text-3); margin-top: 2px; }

.itn-page .itn-act-time { font-family: var(--mc-font-mono); font-size: 11.5px; color: var(--mc-text-3); flex: none; }

.itn-page .itn-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--mc-text-3);
    font-size: 13px;
}

.itn-page .itn-empty .itn-ico { font-size: 30px; display: block; margin: 0 auto 8px; }

/* ---------- Cabeçalho de seção ---------- */
.itn-page .itn-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.itn-page .itn-sec-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 16px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text);
}

.itn-page .itn-sec-title .itn-ico { font-size: 22px; color: var(--mc-brand); }
.itn-page .itn-sec-count { font-size: 12px; color: var(--mc-text-3); font-weight: 400; }

/* Título + badges lado a lado, ocupando o que sobra antes dos botões. */
.itn-page .itn-sec-head-main {
    display: flex;
    align-items: center;
    gap: 8px 14px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 auto;
}

/* Contadores da prescrição como badges (eram 8 cards em duas fileiras). */
.itn-page .itn-presc-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.itn-page .itn-presc-badges .itn-pill { font-size: 12px; padding: 4px 10px; font-weight: var(--mc-fw-medium); }
.itn-page .itn-presc-badges .itn-pill b { font-weight: var(--mc-fw-bold); }
.itn-page .itn-presc-badges .itn-pill .itn-ico { font-size: 14px; }

/* ---------- Separador de data ---------- */
.itn-page .itn-daysep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 10px;
}

.itn-page .itn-daysep-label {
    font-size: 11px;
    font-weight: var(--mc-fw-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mc-text-3);
}

.itn-page .itn-daysep-count {
    font-size: 11px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text-3);
    background: var(--mc-surface-3);
    padding: 1px 8px;
    border-radius: var(--mc-radius-pill);
}

.itn-page .itn-daysep-line { flex: 1; height: 1px; background: var(--mc-border); }

/* Seções sem card próprio (checklists, nutrição, AIH, exames, prescrição) ganham a
   superfície branca aqui — no design nenhuma delas fica solta no canvas. */
.itn-page .itn-body > .itn-sec-head {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    padding: 12px 16px;
    margin-bottom: 12px;
}

/* ---------- Card de evolução ---------- */
.itn-page .itn-evos { display: flex; flex-direction: column; gap: 12px; }

.itn-page .itn-evo {
    display: flex;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 14px;
    overflow: hidden;
}

/* Tarja lateral: a cor é a do tipo da evolução (médica, enfermagem...). */
.itn-page .itn-evo-bar { width: 4px; flex: none; background: var(--mc-border-2); }

.itn-page .itn-evo-body { flex: 1; min-width: 0; padding: 15px 16px; }

.itn-page .itn-evo-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
}

.itn-page .itn-evo-prof { font-size: 13.5px; font-weight: var(--mc-fw-semibold); color: var(--mc-text); line-height: 1.25; }
.itn-page .itn-evo-reg { font-size: 11.5px; color: var(--mc-text-3); }

.itn-page .itn-evo-time {
    margin-left: auto;
    font-family: var(--mc-font-mono);
    font-size: 12px;
    color: var(--mc-text-3);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.itn-page .itn-evo-text {
    margin: 11px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--mc-text-2);
    white-space: pre-wrap;
}

/* Sinais vitais como chips k/v — o valor em mono para comparar entre evoluções. */
.itn-page .itn-vitals { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.itn-page .itn-vital {
    display: flex;
    flex-direction: column;
    padding: 7px 12px;
    border-radius: 9px;
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border);
}

.itn-page .itn-vital-k {
    font-size: 10px;
    font-weight: var(--mc-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mc-text-3);
}

.itn-page .itn-vital-v {
    font-family: var(--mc-font-mono);
    font-size: 13px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text);
}

.itn-page .itn-evo-foot {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.itn-page .itn-evo-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.itn-page .itn-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 29px;
    padding: 0 11px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--mc-fw-semibold);
    cursor: pointer;
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border-2);
    color: var(--mc-text-2);
    transition: color .18s, border-color .18s;
}

.itn-page .itn-btn-sm .itn-ico { font-size: 15px; }
.itn-page .itn-btn-sm:hover { color: var(--mc-brand); border-color: var(--mc-brand); }

/* ---------- Grade de doses (aprazamento) ----------
   Cada horário é um chip: hora em mono + ícone do estado. Verde = aplicado,
   laranja = a aplicar, vermelho = passou da hora, cinza = ainda longe.
   A cor e o ícone dizem a mesma coisa — não depender só de cor. */
.itn-page .itn-doses { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.itn-page .itn-dose {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 7px;
    font-family: var(--mc-font-mono);
    font-size: 11px;
    font-weight: var(--mc-fw-semibold);
    white-space: nowrap;
    background: var(--mc-surface-3);
    color: var(--mc-text-3);
    border: 1px solid transparent;
}

.itn-page .itn-dose .itn-ico { font-size: 13px; }

.itn-page .itn-dose-done    { background: var(--mc-success-soft); color: var(--mc-success); }
/* Pendente: amarelo FORTE com texto escuro (o soft com texto âmbar sumia em
   monitores mal calibrados). Sólido funciona nos dois temas. */
.itn-page .itn-dose-pending { background: #ffb020; color: #3d2a00; border-color: #cc8500; }
.itn-page .itn-dose-late    { background: var(--mc-danger-soft);  color: var(--mc-danger); border-color: var(--mc-danger); }
.itn-page .itn-dose-none    { background: var(--mc-surface-3);    color: var(--mc-text-3); }

/* Chip clicável (aplicar/recusar aquele horário) */
.itn-page button.itn-dose { cursor: pointer; transition: filter .15s, border-color .18s; }
.itn-page button.itn-dose:hover { filter: brightness(.94); border-color: currentColor; }

/* Modo correção: a dose APLICADA vira clicável para desfazer a checagem. Mantém o verde de
   aplicada (o estado não mudou), mas ganha contorno tracejado — o pontilhado avisa que aquele
   chip agora desfaz algo, sem inventar uma quinta cor de estado na grade. */
.itn-page button.itn-dose-undo {
    border: 1px dashed var(--mc-warning);
    box-shadow: inset 0 0 0 1px var(--mc-warning-soft);
}
.itn-page button.itn-dose-undo:hover {
    background: var(--mc-warning-soft);
    color: var(--mc-warning);
    border-style: solid;
}

/* Botões amarelos (Gerar Aprazamento etc.): amarelo FORTE com texto escuro.
   O .btn-warning do template YNEX é amarelo-claro com texto BRANCO (e !important) —
   em monitor mal calibrado o botão praticamente some. O !important aqui é para
   vencer o do template. .itn-modal-apraz marca o modal de gerar aprazamento,
   que é irmão do .itn-page (fora dele). */
.itn-page .btn-warning,
.itn-modal-apraz .btn-warning {
    background: #ffb020 !important;
    border-color: #cc8500 !important;
    color: #3d2a00 !important;
    font-weight: var(--mc-fw-semibold);
}
.itn-page .btn-warning:hover,
.itn-page .btn-warning:focus,
.itn-modal-apraz .btn-warning:hover,
.itn-modal-apraz .btn-warning:focus {
    background: #f2a512 !important;
    border-color: #b37400 !important;
    color: #3d2a00 !important;
}

.itn-page .itn-dose-by {
    font-family: var(--mc-font-sans);
    font-size: 11px;
    color: var(--mc-text-3);
    white-space: nowrap;
}

/* Via de administração */
.itn-page .itn-via {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: var(--mc-fw-semibold);
    background: var(--mc-surface-3);
    color: var(--mc-text-2);
    white-space: nowrap;
}

.itn-page .itn-freq { font-family: var(--mc-font-mono); font-size: 12.5px; color: var(--mc-text-2); }

/* Blocos de texto secundário (cuidados, intercorrências, observações) */
.itn-page .itn-note { margin-top: 12px; }

.itn-page .itn-note-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: var(--mc-fw-semibold);
    margin-bottom: 3px;
}

.itn-page .itn-note-text {
    font-size: 13px;
    color: var(--mc-text-2);
    white-space: pre-wrap;
    line-height: 1.5;
    padding-left: 20px;
}

/* ============================================================
   Aproveitamento horizontal.
   O container-fluid do Bootstrap reserva 12px de cada lado (--bs-gutter-x: 1.5rem)
   e o design original ainda limitava a 1360px. Em monitor pequeno isso custa
   coluna útil, então a largura é livre e a margem lateral fica no mínimo que
   ainda descola o conteúdo da borda.
   ============================================================ */
.itn-page.container-fluid {
    max-width: 100%;
    padding: 10px;
}

@media (min-width: 1600px) {
    /* Em tela grande, um respiro a mais — sem limitar a largura. */
    .itn-page.container-fluid { padding: 16px; }
}

/* ============================================================
   Canvas.
   O design pinta o fundo no body (--bg #eef2f4) e deixa os cards brancos por
   cima — é esse contraste que faz cada bloco parecer um card. O base.css do
   design system não foi importado (resetaria o YNEX inteiro), então o fundo
   vinha branco e o efeito sumia: branco sobre branco.
   Aqui o canvas é pintado só na página, sem tocar no body.
   ============================================================ */
.itn-page.container-fluid {
    background: var(--mc-bg);
    min-height: calc(100vh - 60px);
}

/* ============================================================
   Avatares da internação
   Dobrados (sm 1.75rem -> 3.5rem, md 2.5rem -> 5rem) e com borda que identifica
   o sexo do paciente e um selo que identifica a profissão de quem registrou.
   Escopado em .itn-page: os mesmos componentes são usados em outras telas, que
   não devem mudar.
   ============================================================ */

/* ---- Tamanho: +100% ----
   O !important é obrigatório aqui: custom-font-size.css encolhe todo avatar com
   `.avatar-sm { width: calc(2rem * .75) !important }`, e !important vence
   especificidade. Sem isto o avatar fica em 22,5px e o selo cobre metade dele.
   Base real: sm 2rem*.75 = 1.5rem -> 3rem; md 3rem*.75 = 2.25rem -> 4.5rem. */
.itn-page .avatar-sm {
    width: 3rem !important;
    height: 3rem !important;
    line-height: 3rem !important;
    font-size: .95rem !important;
}

.itn-page .avatar-md {
    width: 4.5rem !important;
    height: 4.5rem !important;
    line-height: 4.5rem !important;
    font-size: 1.4rem !important;
}

.itn-page .avatar-sm i { font-size: 1.35rem; }
.itn-page .avatar-md i { font-size: 2rem; }
.itn-page .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---- Paciente: borda por sexo ----
   O AvatarPaciente já resolve o sexo nas classes bg-*-transparent; a borda usa
   as mesmas, então não há uma segunda fonte de verdade para o sexo. */
.itn-page .avatar-paciente { border-width: 3px; border-style: solid; }

.itn-page .avatar-paciente.bg-info-transparent      { border-color: var(--mc-info); }      /* M */
.itn-page .avatar-paciente.bg-pink-transparent      { border-color: var(--mc-purple); }    /* F */
.itn-page .avatar-paciente.bg-secondary-transparent { border-color: var(--mc-text-2); }    /* não informado */

/* ---- Profissional: selo da profissão ---- */
.itn-page .avatar-prof-wrap { position: relative; display: inline-block; flex: none; }

.itn-page .avatar-prof-sticker {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    border: 2px solid var(--mc-surface);
    box-shadow: var(--mc-shadow-sm);
    pointer-events: none;
}

.itn-page .avatar-prof-sticker.sticker-medico     { background: var(--mc-brand);   color: var(--mc-brand-ink); }
.itn-page .avatar-prof-sticker.sticker-enfermagem { background: var(--mc-success); color: #fff; }
.itn-page .avatar-prof-sticker.sticker-outro      { background: var(--mc-text-3);  color: #fff; }

/* O avatar maior desalinha as linhas que assumiam 28px — reancorar no topo. */
.itn-page .itn-evo-head,
.itn-page .itn-act { align-items: flex-start; }

/* ---------- AIH: pendências ----------
   Os campos faltantes vinham num string.Join(", ") dentro de um alert — uma linha
   corrida que ninguém varre. Viram lista: é o que o faturista precisa conferir. */
.itn-page .itn-aih-pend {
    background: var(--mc-warning-soft);
    border: 1px solid var(--mc-warning);
    border-radius: var(--mc-radius-md);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.itn-page .itn-aih-pend-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--mc-text);
    font-size: 13.5px;
}

.itn-page .itn-aih-pend-head > .itn-ico { font-size: 22px; color: var(--mc-warning); }

.itn-page .itn-aih-pend-sub { font-size: 12px; color: var(--mc-text-2); margin-top: 2px; }

.itn-page .itn-aih-pend-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0 0 0 32px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 4px 16px;
}

.itn-page .itn-aih-pend-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--mc-text);
}

.itn-page .itn-aih-pend-list .itn-ico { font-size: 15px; color: var(--mc-warning); }

.itn-page .itn-aih-ok {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--mc-success-soft);
    border: 1px solid var(--mc-success);
    border-radius: var(--mc-radius-md);
    padding: 11px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--mc-text);
}

.itn-page .itn-aih-ok .itn-ico { font-size: 20px; color: var(--mc-success); }

/* Avatar genérico (profissional sem foto): o ícone preenche o círculo, para não
   ficar um disco pálido vazio ao lado de quem tem foto. */
.itn-page .avatar-prof-generico {
    font-size: 1em;
    line-height: 1;
    color: var(--mc-text-3);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.itn-page .avatar-sm .avatar-prof-generico { font-size: 2.9rem; }
.itn-page .avatar-md .avatar-prof-generico { font-size: 4.4rem; }


/* ===== Ações do header =====
   No canto superior direito, numa linha que não quebra. Só de ícone (o rótulo vive
   no title/tooltip). Quadrado de 33px (eram 44) com ícone de 21px: o .btn-sm global
   aplica font-size com !important e o ícone herdava ~10px, por isso o tamanho vai
   no próprio ícone. */
.itn-page .itn-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: nowrap;
    flex: none;
    align-self: flex-start;
    margin-left: auto;
}
.itn-page .itn-abtn {
    position: relative;
    width: 33px;
    height: 33px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 8px;
}
.itn-page .itn-abtn > i { font-size: 21px; line-height: 1; }
.itn-page .itn-abtn > .spinner-border-sm { width: 16px; height: 16px; }
/* Voltar: mesmo quadrado das demais, ícone na cor da marca. */
.itn-page .itn-abtn-voltar > i { color: var(--mc-brand); }
.itn-page .itn-abtn-voltar:hover > i { color: var(--mc-brand-2, var(--mc-brand)); }
/* Separa a navegação (Voltar) das ações sobre o paciente. */
.itn-page .itn-actions-sep {
    width: 1px;
    height: 20px;
    background: var(--mc-border-2);
    margin: 0 2px;
    flex: none;
}
/* O dropdown perde a setinha: ela empurra o ícone para fora do centro. */
.itn-page .itn-abtn.dropdown-toggle::after { display: none; }
.itn-page .itn-abtn-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: .62rem;
    font-weight: var(--mc-fw-bold);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mc-surface);
}

/* Abaixo de 992px não cabem nome + 10 ações numa faixa: as ações descem para
   uma linha própria, ainda encostadas à direita. */
@media (max-width: 991.98px) {
    .itn-page .itn-head { flex-wrap: wrap; row-gap: 8px; }
    .itn-page .itn-head-id { flex-basis: 100%; }
    .itn-page .itn-actions { flex: 1 1 100%; flex-wrap: wrap; row-gap: 5px; }
}
/* No celular a linha de dados volta a quebrar: reticências cortariam quase tudo. */
@media (max-width: 575.98px) {
    .itn-page .itn-head-meta { white-space: normal; }
    .itn-page .itn-head-linha { flex-wrap: wrap; row-gap: 2px; }
    .itn-page .itn-head-ids { flex-basis: 100%; margin-left: 0; }
}

/* ---------- Pill de grau crítico ----------
   Os models de nutrição usam "dark" para o grau ACIMA de "danger" (desnutrição
   grave, risco muito alto, IMC < 16). Os pills semânticos são todos suaves, então
   mapear "dark" para qualquer um deles empataria com o danger e apagaria a
   escalada. Este é sólido — o único degrau visual acima do danger suave. */
.itn-page .itn-pill-critical { background: var(--mc-danger); color: #fff; }

/* ---------- Botão destrutivo ----------
   O design só previa o neutro e o de marca. Cancelar uma solicitação precisa se
   distinguir de "voltar" ANTES do clique, não depois dele. */
.itn-page .itn-btn-danger {
    background: var(--mc-surface);
    border-color: var(--mc-danger);
    color: var(--mc-danger);
}

.itn-page .itn-btn-danger:hover {
    background: var(--mc-danger);
    border-color: var(--mc-danger);
    color: #fff;
}

/* ---------- Estado vazio: título ----------
   O .itn-empty resolve o estado de uma linha só. Quando ele também explica o que
   fazer (Glasgow não solicitada, nenhum checklist ativo), a primeira linha precisa
   pesar mais que o corpo. */
.itn-page .itn-empty-title {
    font-size: 14px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text-2);
    margin-bottom: 4px;
}

/* ---------- Callout ----------
   Generaliza o que .itn-aih-ok / .itn-aih-pend já faziam, mas só para a AIH: uma
   faixa de aviso com ícone. É o substituto dos alert-* do Bootstrap, que trazem a
   paleta antiga para dentro da tela redesenhada. */
.itn-page .itn-callout {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border: 1px solid;
    border-radius: var(--mc-radius-md);
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mc-text);
}

.itn-page .itn-callout > .itn-ico { font-size: 19px; flex: none; }

.itn-page .itn-callout-warning { background: var(--mc-warning-soft); border-color: var(--mc-warning); }
.itn-page .itn-callout-warning > .itn-ico { color: var(--mc-warning); }

.itn-page .itn-callout-info { background: var(--mc-info-soft); border-color: var(--mc-info); }
.itn-page .itn-callout-info > .itn-ico { color: var(--mc-info); }

.itn-page .itn-callout-success { background: var(--mc-success-soft); border-color: var(--mc-success); }
.itn-page .itn-callout-success > .itn-ico { color: var(--mc-success); }

/* ---------- Glasgow: disco da pontuação ----------
   Substitui o .glasgow-point, que vivia num <style> da página e vinha com os 60px
   repetidos inline em cada item. Sólido de propósito: a cor é o grau (verde/
   amarelo/vermelho) e o número dentro dele é o dado que se procura na lista. */
.itn-page .itn-glasgow-ponto {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mc-font-mono);
    font-size: 17px;
    font-weight: var(--mc-fw-bold);
    color: #fff;
}

/* Item de lista de protocolo (ícone + texto numa linha).
   Não use .itn-note-text aqui: ela tem white-space:pre-wrap para preservar as
   quebras que o usuário digitou numa observação — num <li> isso faz a indentação
   do próprio código-fonte virar espaço visível, jogando o ícone para uma linha só
   dele e empurrando o texto. */
.itn-page .itn-proto-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mc-text-2);
}
.itn-page .itn-proto-item .itn-ico { flex: none; margin-top: 1px; }


/* ============================================================
   Modal "Nova Prescrição" (Components/ModalNovaPrescricaoInternacao.razor)
   O modal é um .modal do Bootstrap, então herda o chrome do YNEX (fundo, campos,
   botões roxos/dourados) e destoava da página já migrada. .itn-modal é o escopo do
   que só vale aqui dentro: nada disto pode vazar para as telas ainda em YNEX, que
   compartilham os mesmos componentes.

   SOBRE OS !important E O SELETOR DUPLO (.itn-page.itn-modal):
   theme-fix.css resolve o tema escuro do sistema na marra —
   `[data-theme-mode="dark"] .modal-content|.form-control|.form-label { ... !important }`.
   Sem !important aqui, no escuro o modal volta ao cinza-azulado do YNEX e a ênfase da
   observação simplesmente some. Casar as duas classes do mesmo elemento sobe a
   especificidade acima da do theme-fix, então a vitória é por especificidade e não por
   ordem de carga dos arquivos (que ninguém garante).
   ============================================================ */

/* ---------- Chrome do modal ---------- */
.itn-page.itn-modal.modal-content {
    background-color: var(--mc-surface) !important;
    color: var(--mc-text) !important;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
}

/* Blindagem do tema escuro: header/body/footer não pintam fundo (herdam o do
   .modal-content), então bastava uma regra do YNEX/theme-fix pegar um deles para o
   modal aparecer claro por dentro com a página escura. Aqui o fundo é declarado nos
   quatro, no escopo do tema — soma tema + duas classes do elemento, ganhando por
   especificidade de qualquer `[data-theme-mode="dark"] .modal-*` genérico. */
[data-theme-mode="dark"] .itn-page.itn-modal.modal-content,
[data-theme-mode="dark"] .itn-page.itn-modal .modal-header,
[data-theme-mode="dark"] .itn-page.itn-modal .modal-body,
[data-theme-mode="dark"] .itn-page.itn-modal .modal-footer {
    background-color: var(--mc-surface) !important;
    color: var(--mc-text) !important;
}

.itn-page.itn-modal .modal-header,
.itn-page.itn-modal .modal-footer {
    border-color: var(--mc-border) !important;
    color: var(--mc-text) !important;
}

.itn-page.itn-modal .modal-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text) !important;
}

.itn-page.itn-modal .modal-title .itn-ico { font-size: 21px; color: var(--mc-brand); }

/* O X do Bootstrap é um SVG preto embutido: no escuro ele desaparece. */
.itn-page.itn-modal .btn-close { opacity: .55; }
.itn-page.itn-modal .btn-close:hover { opacity: 1; }
[data-theme-mode="dark"] .itn-page.itn-modal .btn-close { filter: invert(1) grayscale(1) !important; }

/* O card interno se apoia na superfície do modal, não no canvas da página: sobe um
   tom para continuar lendo como card. */
.itn-page.itn-modal .itn-card { background: var(--mc-surface-2); }

/* ---------- Campos ---------- */
.itn-page.itn-modal .form-control,
.itn-page.itn-modal .form-select {
    background-color: var(--mc-surface) !important;
    border: 1px solid var(--mc-border-2) !important;
    border-radius: 9px;
    color: var(--mc-text) !important;
    font-family: var(--mc-font-sans);
    font-size: 13.5px;
}

.itn-page.itn-modal .form-control:focus,
.itn-page.itn-modal .form-select:focus {
    background-color: var(--mc-surface) !important;
    border-color: var(--mc-brand) !important;
    box-shadow: 0 0 0 3px var(--mc-brand-soft) !important;
    color: var(--mc-text) !important;
}

.itn-page.itn-modal .form-control::placeholder { color: var(--mc-text-3) !important; }

.itn-page.itn-modal .form-label {
    font-size: 12px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text-2) !important;
    margin-bottom: 5px;
}

/* A setinha do form-select é um SVG escuro embutido pelo Bootstrap — some sobre a
   superfície escura. */
[data-theme-mode="dark"] .itn-page.itn-modal .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a5b9c0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Asterisco de campo obrigatório (era .text-danger, da paleta antiga). */
.itn-page .itn-req { color: var(--mc-danger); font-weight: var(--mc-fw-semibold); }

/* ---------- Busca com lupa embutida ---------- */
.itn-page .itn-busca { padding-right: 44px; }

.itn-page .itn-busca-btn {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-color: transparent;
    background: transparent;
}

.itn-page .itn-busca-btn .itn-ico { font-size: 18px; }
.itn-page .itn-busca-btn:hover { background: var(--mc-brand-soft); border-color: var(--mc-brand); }

/* Caixinha de ícone do item — substitui o `avatar avatar-sm bg-*-transparent` do
   YNEX (que aqui ainda apanhava o .itn-page .avatar-sm de 3rem e ficava gigante). */
.itn-page .itn-itemico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: none;
}

.itn-page .itn-itemico .itn-ico { font-size: 18px; }

/* ---------- Lista de resultados da busca ----------
   Era .list-group do Bootstrap: fundo, borda e hover da paleta antiga. */
.itn-page .itn-reslist {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
}

.itn-page .itn-res-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    font-family: inherit;
    color: var(--mc-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background .18s, border-color .18s;
}

.itn-page .itn-res-item:hover { background: var(--mc-brand-soft); border-color: var(--mc-brand); }

/* Sem estoque: preserva o bloqueio de clique que o .list-group-item.disabled do
   Bootstrap dava (pointer-events). Sem isto o item volta a ser clicável e só o
   guard do SelecionarMedicamento barraria — com toast, mudando o comportamento. */
.itn-page .itn-res-item.itn-res-off { opacity: .6; pointer-events: none; }

.itn-page .itn-res-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.itn-page .itn-res-name {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text);
}

.itn-page .itn-res-sub { font-size: 11.5px; color: var(--mc-text-3); }

/* ---------- Observações ----------
   É instrução clínica ("diluir em 100ml", "não macerar") e vivia num input de uma
   linha no canto: passava batido. Maior, e se acende quando tem conteúdo.
   :placeholder-shown faz a ênfase em CSS puro — sem estado novo no C#, o @bind
   continua idêntico. Depende do placeholder, que os dois campos sempre têm. */
.itn-page .itn-obs {
    min-height: 76px;
    resize: vertical;
    transition: background-color .18s, border-color .18s, box-shadow .18s;
}

.itn-page.itn-modal textarea.itn-obs:not(:placeholder-shown) {
    background-color: var(--mc-warning-soft) !important;
    border-color: var(--mc-warning) !important;
    border-left: 3px solid var(--mc-warning) !important;
    color: var(--mc-text) !important;
    font-weight: var(--mc-fw-medium);
}

.itn-page.itn-modal textarea.itn-obs:not(:placeholder-shown):focus {
    border-color: var(--mc-warning) !important;
    box-shadow: 0 0 0 3px var(--mc-warning-soft) !important;
}

/* A mesma observação, já na lista de itens conferidos: a instrução tem de saltar
   na revisão, não só na digitação. */
.itn-page.itn-modal .itn-note-obs {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 9px;
    background: var(--mc-warning-soft);
    border-left: 3px solid var(--mc-warning);
    border-radius: 0 7px 7px 0;
}

.itn-page.itn-modal .itn-note-obs > .itn-ico { font-size: 15px; color: var(--mc-warning); flex: none; margin-top: 1px; }

/* .itn-note-text indenta para alinhar sob um título; aqui quem alinha é o ícone. */
.itn-page.itn-modal .itn-note-obs .itn-note-text { padding-left: 0; font-size: 12.5px; color: var(--mc-text); }

/* ---------- Botão desabilitado ----------
   .itn-btn não previa o estado, e "Adicionar" fica desabilitado até posologia (e
   via, em medicamento) estarem preenchidas — sem isto ele parece clicável. */
.itn-page .itn-btn:disabled { opacity: .5; cursor: not-allowed; }
.itn-page .itn-btn:disabled:hover { color: var(--mc-text-2); border-color: var(--mc-border-2); background: var(--mc-surface); }
.itn-page .itn-btn-primary:disabled:hover { background: var(--mc-brand); border-color: var(--mc-brand); color: var(--mc-brand-ink); }

/* ---------- ModelosPadraoBar dentro do modal ----------
   O componente é compartilhado com consulta/ambulatório/evolução, que continuam no
   YNEX — trocar as classes na fonte dele mudaria aquelas telas. Então o roxo do
   "Usar" e o dourado do "Salvar como padrão" são retonalizados só aqui dentro. */
.itn-page.itn-modal .btn-primary,
.itn-page.itn-modal .btn-warning {
    background-color: var(--mc-brand) !important;
    border-color: var(--mc-brand) !important;
    color: var(--mc-brand-ink) !important;
}

.itn-page.itn-modal .btn-primary:hover:not(:disabled),
.itn-page.itn-modal .btn-warning:hover:not(:disabled) {
    background-color: var(--mc-brand-2) !important;
    border-color: var(--mc-brand-2) !important;
}

.itn-page.itn-modal .btn-outline-warning {
    background-color: transparent !important;
    border-color: var(--mc-border-2) !important;
    color: var(--mc-text-2) !important;
}

.itn-page.itn-modal .btn-outline-warning:hover {
    background-color: var(--mc-brand-soft) !important;
    border-color: var(--mc-brand) !important;
    color: var(--mc-brand) !important;
}

.itn-page.itn-modal .btn-outline-danger {
    background-color: transparent !important;
    border-color: var(--mc-border-2) !important;
    color: var(--mc-danger) !important;
}

.itn-page.itn-modal .btn-outline-danger:hover {
    background-color: var(--mc-danger-soft) !important;
    border-color: var(--mc-danger) !important;
    color: var(--mc-danger) !important;
}

.itn-page.itn-modal .btn-light {
    background-color: var(--mc-surface-2) !important;
    border-color: var(--mc-border-2) !important;
    color: var(--mc-text-2) !important;
}

.itn-page.itn-modal .badge.bg-warning-transparent {
    background-color: var(--mc-warning-soft) !important;
    color: var(--mc-warning) !important;
}

/* ============================================================
   Aba Exames & Procedimentos — refatoração set/2026
   Implementa "Aba Exames e Procedimentos.dc.html" do Claude Design:
   toolbar de contadores-filtro + duas colunas (pedidos à esquerda em
   lista única agrupada por solicitação, resultados recebidos à direita).
   Sem media queries de largura — a escala é do modelo mc-page; o único
   responsivo daqui é o flex-wrap dos controles.
   ============================================================ */

/* ---- Toolbar: contadores que filtram + busca/selects/densidade ---- */
.itn-page .itn-exam-toolbar { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; margin-bottom: 12px; }
.itn-page .itn-exam-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.itn-page .itn-exam-chip {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 8px 14px; border-radius: 11px; cursor: pointer;
    background: var(--mc-surface-2); border: 1px solid var(--mc-border);
    font-family: inherit; text-align: left;
    transition: border-color .18s, background .18s;
}
.itn-page .itn-exam-chip:hover { border-color: var(--mc-brand); }
.itn-page .itn-exam-chip.active { border-color: var(--mc-brand); background: var(--mc-brand-soft); }
.itn-page .itn-exam-chip-n { font-size: 1.02rem; font-weight: var(--mc-fw-bold); color: var(--mc-text); }
.itn-page .itn-exam-chip-lbl { font-size: .72rem; font-weight: var(--mc-fw-semibold); color: var(--mc-text-2); text-transform: uppercase; letter-spacing: .05em; }
.itn-page .itn-exam-toolbar-sep { height: 1px; background: var(--mc-border-soft); }
.itn-page .itn-exam-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.itn-page .itn-exam-search {
    display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; height: 36px;
    background: var(--mc-surface-2); border: 1px solid var(--mc-border); border-radius: 10px; padding: 0 12px;
}
.itn-page .itn-exam-search .itn-ico { font-size: 18px; color: var(--mc-text-3); }
.itn-page .itn-exam-search input { flex: 1; min-width: 0; font: inherit; font-size: .84rem; color: var(--mc-text); background: transparent; border: 0; outline: none; }
.itn-page .itn-exam-search input::placeholder { color: var(--mc-text-3); }
.itn-page .itn-exam-select { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; background: var(--mc-surface-2); border: 1px solid var(--mc-border); border-radius: 10px; padding: 0 10px; }
.itn-page .itn-exam-select > span { font-size: .72rem; font-weight: var(--mc-fw-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--mc-text-2); }
.itn-page .itn-exam-select select { font: inherit; font-size: .82rem; font-weight: var(--mc-fw-semibold); color: var(--mc-text); background: transparent; border: 0; outline: none; cursor: pointer; }
.itn-page .itn-exam-dens { display: inline-flex; gap: 2px; background: var(--mc-surface-2); border: 1px solid var(--mc-border); border-radius: 10px; padding: 3px; }
.itn-page .itn-exam-dens button { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: .78rem; font-weight: var(--mc-fw-semibold); color: var(--mc-text-2); background: transparent; border: 0; border-radius: 8px; padding: 5px 11px; cursor: pointer; }
.itn-page .itn-exam-dens button:hover { color: var(--mc-text); }
.itn-page .itn-exam-dens button.active { background: var(--mc-surface); color: var(--mc-text); box-shadow: var(--mc-shadow-sm); }
.itn-page .itn-exam-dens .itn-ico { font-size: 16px; }

/* ---- Duas colunas (pedidos x resultados) + densidade via variável ---- */
.itn-page .itn-exam-cols {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 14px; align-items: start;
    --itn-exam-rowpad: 10px 14px;
    --itn-exam-grouppad: 12px 14px;
}
.itn-page .itn-exam-cols.itn-exam-compacto { --itn-exam-rowpad: 6px 14px; --itn-exam-grouppad: 8px 14px; }
.itn-page .itn-exam-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.itn-page .itn-exam-colhead {
    display: flex; align-items: center; gap: 8px; padding: 0 2px;
    font-size: .78rem; font-weight: var(--mc-fw-bold); text-transform: uppercase;
    letter-spacing: .06em; color: var(--mc-text-2);
}
.itn-page .itn-exam-colhead .itn-ico { font-size: 18px; color: var(--mc-brand); }
.itn-page .itn-exam-colhead::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--mc-border); }
.itn-page .itn-exam-count {
    background: var(--mc-brand-soft); color: var(--mc-brand-2);
    border-radius: var(--mc-radius-pill); padding: 1px 9px;
    font-size: .72rem; font-weight: var(--mc-fw-bold);
}

/* ---- Coluna de pedidos: um bloco por solicitação num card único ---- */
.itn-page .itn-exam-list { padding: 0; overflow: hidden; }
.itn-page .itn-exam-group + .itn-exam-group { border-top: 1px solid var(--mc-border-soft); }
.itn-page .itn-exam-group-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    padding: var(--itn-exam-grouppad, 12px 14px); background: var(--mc-surface-2);
}
.itn-page .itn-exam-group-head > .itn-ico { font-size: 18px; color: var(--mc-brand); }
.itn-page .itn-exam-group-title { font-size: .88rem; font-weight: var(--mc-fw-bold); color: var(--mc-text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itn-page .itn-exam-group-dt { font-size: .78rem; color: var(--mc-text-3); white-space: nowrap; }
.itn-page .itn-exam-group-spacer { flex: 1 1 auto; }
.itn-page .itn-exam-group-note { padding: 8px 14px 0; font-size: .78rem; color: var(--mc-text-2); }
.itn-page .itn-exam-group-note strong { color: var(--mc-text); }
.itn-page .itn-exam-group-obs {
    display: flex; gap: 8px; align-items: flex-start; margin: 8px 14px 0;
    padding: 8px 10px; border-radius: var(--mc-radius-sm);
    background: var(--mc-warning-soft); border-left: 3px solid var(--mc-warning);
    font-size: .78rem; color: var(--mc-text-2); white-space: pre-wrap;
}
.itn-page .itn-exam-group-obs .itn-ico { font-size: 15px; color: var(--mc-warning); margin-top: 1px; }
.itn-page .itn-exam-group-obs strong { color: var(--mc-text); }
.itn-page .itn-exam-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 12px; padding: var(--itn-exam-rowpad, 10px 14px);
    border-top: 1px solid var(--mc-border-soft);
}
.itn-page .itn-exam-item:first-child { border-top: 0; }
.itn-page .itn-exam-item-nome { min-width: 0; display: flex; align-items: baseline; gap: 8px; font-size: .82rem; color: var(--mc-text); }
.itn-page .itn-exam-item-nome code { font-family: var(--mc-font-mono); font-size: .76rem; color: var(--mc-info); background: none; padding: 0; white-space: nowrap; }
.itn-page .itn-exam-item-acts { display: flex; align-items: center; gap: 8px; }
.itn-page .itn-exam-item-acts .itn-btn-sm { text-decoration: none; }
.itn-page .itn-exam-coleta { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: var(--mc-fw-bold); white-space: nowrap; }
.itn-page .itn-exam-coleta .itn-ico { font-size: 14px; }
.itn-page .itn-exam-coleta-ok { color: var(--mc-success); }
.itn-page .itn-exam-coleta-pend { color: var(--mc-warning); }
.itn-page .itn-exam-group-foot {
    display: flex; align-items: center; gap: 9px; padding: 8px 14px;
    border-top: 1px dashed var(--mc-border); font-size: .74rem; color: var(--mc-text-2);
}
.itn-page .itn-exam-group-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 14px; border-top: 1px dashed var(--mc-border);
}
.itn-page .itn-exam-group-actions .itn-btn-sm { text-decoration: none; }
.itn-page .itn-exam-empty { padding: 34px 14px; text-align: center; color: var(--mc-text-3); font-size: .84rem; }
.itn-page .itn-exam-btn-warn { color: var(--mc-warning); border-color: color-mix(in srgb, var(--mc-warning) 55%, var(--mc-border)); }
.itn-page .itn-exam-btn-warn:hover { color: var(--mc-warning); border-color: var(--mc-warning); }

/* ---- Coluna de resultados ---- */
.itn-page .itn-exam-evolucao {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border-left: 3px solid var(--mc-info); cursor: pointer;
}
.itn-page .itn-exam-evolucao-tile { font-size: 26px; color: var(--mc-info); background: var(--mc-info-soft); border-radius: var(--mc-radius-md); padding: 12px; }
.itn-page .itn-exam-evolucao-meta { flex: 1 1 auto; min-width: 0; }
.itn-page .itn-exam-res {
    display: flex; align-items: center; gap: 11px;
    padding: var(--itn-exam-rowpad, 10px 14px);
    border-left: 3px solid transparent;
}
.itn-page .itn-exam-res + .itn-exam-res { border-top: 1px solid var(--mc-border-soft); }
.itn-page .itn-exam-res-atual { border-left-color: var(--mc-info); }
/* Resultado anterior à internação fica discreto — nunca escondido. */
.itn-page .itn-exam-res-antes { opacity: .82; }
.itn-page .itn-exam-res-antes:hover { opacity: 1; }
.itn-page .itn-exam-res-warn { border-left-color: var(--mc-warning); }
.itn-page .itn-exam-res-body { flex: 1 1 auto; min-width: 0; }
.itn-page .itn-exam-res-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .82rem; font-weight: var(--mc-fw-bold); color: var(--mc-text); }
.itn-page .itn-exam-res-meta { margin-top: 3px; font-size: .74rem; color: var(--mc-text-3); }
.itn-page .itn-exam-res-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.itn-page .itn-exam-periodo { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: .7rem; font-weight: var(--mc-fw-semibold); }
.itn-page .itn-exam-periodo .itn-ico { font-size: 13px; }
.itn-page .itn-exam-periodo-atual { color: var(--mc-info); }
.itn-page .itn-exam-periodo-antes { color: var(--mc-text-3); }

/* Miniatura/tile: prévia DICOM (fundo escuro de radiografia) ou tile de PDF.
   Sem prévia (404), o onerror liga -off e aparece o ícone de fallback. */
.itn-page .itn-exam-tile {
    position: relative; width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 10px; overflow: hidden; border: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.itn-page .itn-exam-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.itn-page .itn-exam-tile .itn-exam-tile-fallback { display: none; font-size: 20px; color: var(--mc-text-3); }
.itn-page .itn-exam-tile-img { background: #0c1519; }
.itn-page .itn-exam-tile-pdf { background: var(--mc-danger-soft); color: var(--mc-danger); }
.itn-page .itn-exam-tile-pdf .itn-ico { font-size: 20px; }
.itn-page .itn-exam-tile-off { background: var(--mc-surface-3); }
.itn-page .itn-exam-tile-off img { display: none; }
.itn-page .itn-exam-tile-off .itn-exam-tile-fallback { display: block; }

/* Faixa de laudos externos (Pardini) do paciente */
.itn-page .itn-exam-pardini {
    display: flex; align-items: center; gap: 8px;
    border: 1px dashed var(--mc-border-2); border-radius: var(--mc-radius-md);
    background: var(--mc-surface); padding: 10px 14px;
    font-size: .78rem; color: var(--mc-text-2);
}
.itn-page .itn-exam-pardini > .itn-ico { font-size: 17px; color: var(--mc-brand); }
.itn-page .itn-exam-pardini-lbl { flex: 1 1 auto; }

/* Estado vazio da aba */
.itn-page .itn-exam-vazio-titulo { font-size: .92rem; font-weight: var(--mc-fw-semibold); color: var(--mc-text-2); }
.itn-page .itn-exam-vazio-sub { margin-top: 4px; font-size: .78rem; color: var(--mc-text-3); }

/* Link "Triagem e consulta" na cabeceira: tem de PARECER clicável. O acesso anterior era o
   número do prontuário, que ninguém adivinhava que abria algo — por isso o histórico existia
   e quase não era usado. */
.itn-page .itn-origem-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--mc-blue);
    text-decoration: none;
    font-weight: var(--mc-fw-semibold);
    border-bottom: 1px dashed currentColor;
}
.itn-page .itn-origem-link:hover { color: var(--mc-blue-600, var(--mc-blue)); border-bottom-style: solid; }

/* ============================================================
   Aba Prescrição — refatoração out/2026, no padrão da aba Exames
   (.itn-exam-toolbar/-colhead/-list): dias como contadores que filtram e
   uma lista de cards. Os itens, as doses e o aprazamento abrem no modal
   "Ver prescrição" (Components/ModalPrescricaoDetalhe.razor).
   ============================================================ */

/* Chip de dia: contagem + dia da semana + data. Dia sem prescrição fica apagado. */
.itn-page .itn-presc-dia { flex-direction: row; align-items: baseline; }
.itn-page .itn-presc-dia-dt { font-size: .7rem; color: var(--mc-text-3); font-family: var(--mc-font-mono); }
.itn-page .itn-presc-dia.hoje { border-color: var(--mc-brand); }
.itn-page .itn-presc-dia:disabled { opacity: .45; cursor: default; }
.itn-page .itn-presc-dia:disabled:hover { border-color: var(--mc-border); }

.itn-page .itn-presc-lista { margin-top: 10px; --itn-presc-pad: 11px 14px; }
.itn-page .itn-presc-lista.itn-exam-compacto { --itn-presc-pad: 6px 14px; }

/* Separador de dia dentro da lista */
.itn-page .itn-presc-diasep {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 14px; background: var(--mc-surface-3);
    border-top: 1px solid var(--mc-border-soft);
    font-size: .72rem; font-weight: var(--mc-fw-bold); text-transform: uppercase;
    letter-spacing: .06em; color: var(--mc-text-2);
}
.itn-page .itn-presc-diasep:first-child { border-top: 0; }
.itn-page .itn-presc-diasep .itn-ico { font-size: 15px; color: var(--mc-brand); }

/* Card da prescrição: avatar de quem prescreveu | código, status e contagens | botões.
   O card inteiro abre o modal; os botões ficam numa linha só, sem cortar o rótulo. */
.itn-page .itn-presc-card {
    display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
    padding: var(--itn-presc-pad, 11px 14px);
    border-top: 1px solid var(--mc-border-soft);
    cursor: pointer; transition: background .15s;
}
.itn-page .itn-presc-diasep + .itn-presc-card { border-top: 0; }
.itn-page .itn-presc-card:hover { background: var(--mc-surface-2); }
.itn-page .itn-presc-card .avatar-sm {
    width: 2.5rem !important; height: 2.5rem !important; line-height: 2.5rem !important;
}
.itn-page .itn-presc-card .avatar-sm .avatar-prof-generico { font-size: 2.4rem; }
.itn-page .itn-presc-card-main { flex: 1 1 320px; min-width: 0; }
.itn-page .itn-presc-card-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.itn-page .itn-presc-card-cod { font-size: .9rem; font-weight: var(--mc-fw-bold); color: var(--mc-text); white-space: nowrap; }
.itn-page .itn-presc-card-hora { font-family: var(--mc-font-mono); font-size: .78rem; color: var(--mc-text-3); }
.itn-page .itn-presc-card-l2 {
    display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap;
    margin-top: 3px; font-size: .74rem; color: var(--mc-text-2);
}
.itn-page .itn-presc-card-med { font-weight: var(--mc-fw-semibold); color: var(--mc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.itn-page .itn-presc-resumo-k { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--mc-fw-semibold); white-space: nowrap; }
.itn-page .itn-presc-resumo-k .itn-ico { font-size: 14px; color: var(--mc-text-3); }
.itn-page .itn-presc-zero { color: var(--mc-text-3); }

/* Botões: um grupo que não quebra por dentro; se faltar largura, desce inteiro
   para a linha de baixo (flex-wrap do card), alinhado à direita. */
.itn-page .itn-presc-acts { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-left: auto; flex: none; }
.itn-page .itn-presc-acts .itn-btn-sm { white-space: nowrap; flex: none; }
@media (max-width: 767.98px) {
    .itn-page .itn-presc-acts { flex-wrap: wrap; margin-left: 0; }
}

/* Variações do .itn-btn-sm usadas na prescrição */
.itn-page .itn-btn-sm-brand { color: var(--mc-brand-2); border-color: color-mix(in srgb, var(--mc-brand) 45%, var(--mc-border)); background: var(--mc-brand-soft); }
.itn-page .itn-btn-sm-brand:hover { color: var(--mc-brand-ink); background: var(--mc-brand); border-color: var(--mc-brand); }
.itn-page .itn-btn-sm-danger { color: var(--mc-danger); border-color: color-mix(in srgb, var(--mc-danger) 45%, var(--mc-border)); }
.itn-page .itn-btn-sm-danger:hover { color: #fff; background: var(--mc-danger); border-color: var(--mc-danger); }

/* ---------- Menu suspenso dos .itn-btn (Imprimir das evoluções) ----------
   O dropdown do Bootstrap com a tipografia e os raios da identidade nova. */
.itn-page .itn-menu {
    font-family: var(--mc-font-sans);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-md, 0 8px 24px rgba(0,0,0,.12));
    padding: 6px;
    min-width: 200px;
}
.itn-page .itn-menu .dropdown-item {
    border-radius: 7px;
    font-size: 13px;
    font-weight: var(--mc-fw-medium);
    color: var(--mc-text);
    padding: 7px 10px;
}
.itn-page .itn-menu .dropdown-item:hover { background: var(--mc-brand-soft); color: var(--mc-brand-2); }
.itn-page .itn-menu .dropdown-item.disabled { color: var(--mc-text-3); }

/* ---------- Texto da evolução formatado como no editor do modal ----------
   Cópia das regras de .evomd-editor (css/evolucao-modal.css): mesma fonte,
   corpo, títulos de seção ("# ..." em caixa-alta azul com filete) e listas.
   O HTML vem de EvolucaoTextoFormatado (a mesma conversão do plainToHtml do
   editor). Ao mudar o editor, mudar aqui também. */
.itn-page .itn-evo-rich {
    margin: 11px 0 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15.5px;
    line-height: 1.75;
    color: #1e293b;
    overflow-wrap: anywhere;
}
.itn-page .itn-evo-rich p { margin: 0 0 .4em; }
.itn-page .itn-evo-rich h1, .itn-page .itn-evo-rich h2,
.itn-page .itn-evo-rich h3, .itn-page .itn-evo-rich h4 {
    font-family: inherit;
    font-size: .78rem; font-weight: 800; letter-spacing: 1.2px; color: #1a4a9e;
    margin: 1.5em 0 .45em; padding-bottom: .3em; border-bottom: 1px solid #e2e8f0;
    text-transform: uppercase;
    /* Título só 10% maior que o texto da evolução (15.5px → 17.05px), igual ao editor do
       modal. !important porque a regra global de h3 (custom-font-size) também usa — sem ele
       o título ficava em 17.55px. O h1..h6 global dá 1.2 de altura de linha. */
    font-size: 1.1em !important;
    line-height: 1.2;
}
/* No editor a folha tem 50px de respiro acima; no card o título de abertura
   não precisa empurrar o texto para baixo do cabeçalho do profissional. */
.itn-page .itn-evo-rich > :first-child { margin-top: 0; }
.itn-page .itn-evo-rich ul, .itn-page .itn-evo-rich ol { margin: .2em 0 .6em; padding-left: 1.4em; }

[data-theme-mode="dark"] .itn-page .itn-evo-rich { color: var(--mc-text); }
[data-theme-mode="dark"] .itn-page .itn-evo-rich h1, [data-theme-mode="dark"] .itn-page .itn-evo-rich h2,
[data-theme-mode="dark"] .itn-page .itn-evo-rich h3, [data-theme-mode="dark"] .itn-page .itn-evo-rich h4 {
    color: #8fb3f0; border-bottom-color: var(--mc-border);
}

/* ---------- Filtro por tipo de evolução, dentro do card do título ----------
   Mesmo .itn-btn do "Nova Evolução"; o ativo usa o tom suave da marca para não
   competir com o botão primário. */
.itn-page .itn-evo-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.itn-page .itn-btn-on,
.itn-page .itn-btn-on:hover { background: var(--mc-brand-soft); border-color: var(--mc-brand); color: var(--mc-brand-2); }
.itn-page .itn-btn-n {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--mc-radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: var(--mc-fw-bold);
    background: var(--mc-surface-3); color: var(--mc-text-2);
}
.itn-page .itn-btn-on .itn-btn-n { background: var(--mc-brand); color: var(--mc-brand-ink); }

/* ------------------------------------------------------------------------------------------
   Vínculo por SEMELHANÇA (03/10/2026)
   A rotina amarra sozinha o exame feito ao pedido quando o par é provável. Como é palpite, a
   tela tem de AVISAR — e avisar de um jeito que não se confunda com resultado conferido: faixa
   no topo da aba, selo no pedido e no resultado, com o motivo no title e os botões de
   confirmar/desfazer ao lado. Tom de atenção (amarelo), nunca de erro.
   ------------------------------------------------------------------------------------------ */
.itn-page .itn-exam-aviso-vinc {
    display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 10px;
    border-left: 3px solid var(--mc-warning);
    background: var(--mc-warning-soft);
}
.itn-page .itn-exam-aviso-vinc > .itn-ico { font-size: 22px; color: var(--mc-warning); }
.itn-page .itn-exam-aviso-vinc-txt { flex: 1 1 320px; min-width: 0; font-size: .78rem; color: var(--mc-text-2); line-height: 1.45; }
.itn-page .itn-exam-aviso-vinc-txt strong { color: var(--mc-text); }

/* Laudo/imagem amarrado por semelhança, mostrado DENTRO do bloco do pedido: é ali que o médico
   procura o resultado do que ele pediu. */
.itn-page .itn-exam-vinc {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 14px;
    border-top: 1px solid var(--mc-border-soft);
    border-left: 3px solid var(--mc-warning);
    background: var(--mc-warning-soft);
}
.itn-page .itn-exam-vinc-body { flex: 1 1 240px; min-width: 0; }
.itn-page .itn-exam-vinc-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .8rem; font-weight: var(--mc-fw-semibold); color: var(--mc-text); }
.itn-page .itn-exam-vinc-meta { margin-top: 3px; font-size: .73rem; color: var(--mc-text-3); }
.itn-page .itn-exam-vinc-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
   Aba UTI — Braden + checklist diário de mobilização/posicionamento (out/2026)
   Components/UtiEscalasPainel.razor. Reproduz a grade dos formulários em papel
   (linhas = itens, colunas = horários/níveis). Pensado para TABLET: célula de
   toque com 44px de altura, grade com rolagem horizontal própria quando não
   cabe, sem media queries de largura (a grade usa minmax e a página escala).
   ============================================================ */

/* ---- Cabeçalho da folha: chips Braden / Reavaliação / VM / ... ---- */
.itn-page .itn-uti-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.itn-page .itn-uti-chip {
    display: flex; flex-direction: column; gap: 4px; min-width: 120px; flex: 1 1 140px;
    padding: 9px 12px; border-radius: var(--mc-radius-md);
    background: var(--mc-surface); border: 1px solid var(--mc-border);
}
.itn-page .itn-uti-chip-k { font-size: 10.5px; font-weight: var(--mc-fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--mc-text-3); }
.itn-page .itn-uti-chip-v { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 14px; color: var(--mc-text); }
.itn-page .itn-uti-chip-v strong { font-size: 22px; font-weight: var(--mc-fw-bold); line-height: 1; }
.itn-page .itn-uti-chip-u { font-size: 12px; color: var(--mc-text-3); }
.itn-page .itn-uti-chip-v.mono { font-family: var(--mc-font-mono); font-size: 13px; }
.itn-page .itn-uti-chip-braden { cursor: pointer; border-color: var(--mc-brand); }
.itn-page .itn-uti-chip-braden:hover { background: var(--mc-brand-soft); }
.itn-page .itn-uti-chip-braden.vazio { border-style: dashed; border-color: var(--mc-warning); }

.itn-page .itn-uti-datebar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.itn-page .itn-uti-date {
    height: 36px; padding: 0 10px; border-radius: 9px; font: inherit; font-size: 13px;
    color: var(--mc-text); background: var(--mc-surface); border: 1px solid var(--mc-border-2);
}

/* Segmented (Sim/Não) */
.itn-page .itn-uti-seg { display: inline-flex; gap: 2px; background: var(--mc-surface-2); border: 1px solid var(--mc-border); border-radius: 9px; padding: 2px; }
.itn-page .itn-uti-seg button {
    min-width: 44px; height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent;
    font: inherit; font-size: 12.5px; font-weight: var(--mc-fw-semibold); color: var(--mc-text-2); cursor: pointer;
}
.itn-page .itn-uti-seg button.on { background: var(--mc-brand); color: var(--mc-brand-ink); }
.itn-page .itn-uti-seg button:disabled { cursor: default; opacity: .7; }

.itn-page .itn-uti-lvlpill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--mc-fw-semibold); }
.itn-page .itn-uti-lvlpill b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mc-brand); color: var(--mc-brand-ink); font-size: 12px; }

/* ---- Grade por horário ---- */
.itn-page .itn-uti-gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.itn-page .itn-uti-grid {
    display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(8, minmax(66px, 1fr));
    gap: 4px; min-width: 700px; align-items: stretch;
}
.itn-page .itn-uti-turnos {
    display: grid; grid-template-columns: minmax(100px, 1fr) repeat(7, minmax(70px, 1fr)) minmax(88px, 1fr) minmax(84px, .9fr) minmax(80px, .9fr);
    gap: 4px; min-width: 900px; align-items: stretch;   /* cabe num tablet em paisagem (1024) sem rolar */
}
.itn-page .itn-uti-gh {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 8px 4px; border-radius: 9px; text-align: center;
    background: var(--mc-brand-2); color: #fff; font-size: 11.5px; font-weight: var(--mc-fw-bold); letter-spacing: .02em;
}
.itn-page .itn-uti-gh-first { align-items: flex-start; padding-left: 12px; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.itn-page .itn-uti-gh.now { background: var(--mc-brand); box-shadow: 0 0 0 2px var(--mc-brand-soft); }
.itn-page .itn-uti-gh.future { background: var(--mc-surface-3); color: var(--mc-text-3); }
.itn-page .itn-uti-gh-now { font-size: 9px; font-weight: var(--mc-fw-semibold); text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.itn-page .itn-uti-gh-n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.22); font-size: 11px; }

.itn-page .itn-uti-rl {
    display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 10px;
    border-radius: 9px; background: var(--mc-surface-2); border: 1px solid var(--mc-border);
    font-size: 12.5px; font-weight: var(--mc-fw-semibold); color: var(--mc-text);
}
.itn-page .itn-uti-rl > span { display: inline-flex; align-items: center; gap: 6px; }
.itn-page .itn-uti-rl .itn-ico { font-size: 17px; color: var(--mc-brand); }
.itn-page .itn-uti-rl small { font-size: 10.5px; font-weight: 400; color: var(--mc-text-3); }
.itn-page .itn-uti-rl.now { border-color: var(--mc-brand); background: var(--mc-brand-soft); }

.itn-page .itn-uti-cellwrap { position: relative; display: flex; }
.itn-page .itn-uti-cellwrap.saving::after {
    content: ""; position: absolute; inset: 0; border-radius: 9px;
    background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(13,136,140,.12) 6px 12px);
    pointer-events: none;
}
.itn-page .itn-uti-cell {
    flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    border-radius: 9px; border: 1px solid var(--mc-border-2); background: var(--mc-surface);
    font: inherit; font-size: 14px; font-weight: var(--mc-fw-bold); color: var(--mc-text-2); cursor: pointer;
    transition: background .15s, border-color .15s, color .15s; -webkit-tap-highlight-color: transparent;
}
.itn-page .itn-uti-cell .itn-ico { font-size: 22px; }
.itn-page .itn-uti-cell:hover:not(:disabled) { border-color: var(--mc-brand); }
.itn-page .itn-uti-cell:disabled { cursor: default; background: var(--mc-surface-2); color: var(--mc-text-3); opacity: .75; }
.itn-page .itn-uti-cell.on { background: var(--mc-success-soft); border-color: var(--mc-success); color: var(--mc-success); }
.itn-page .itn-uti-cell.lvl.on { background: var(--mc-brand); border-color: var(--mc-brand); color: var(--mc-brand-ink); }
.itn-page .itn-uti-cell.nao.on { background: var(--mc-danger-soft); border-color: var(--mc-danger); color: var(--mc-danger); flex-direction: column; gap: 0; }
.itn-page .itn-uti-cell.nao.on small { font-size: 9.5px; font-weight: var(--mc-fw-semibold); line-height: 1; }
.itn-page .itn-uti-cell.tol.tol-a { background: var(--mc-success-soft); border-color: var(--mc-success); color: var(--mc-success); }
.itn-page .itn-uti-cell.tol.tol-i { background: var(--mc-danger-soft); border-color: var(--mc-danger); color: var(--mc-danger); }
.itn-page .itn-uti-cell-ph { font-size: 12px; font-weight: 400; color: var(--mc-text-3); }

.itn-page .itn-uti-sel {
    flex: 1; min-height: 44px; width: 100%; padding: 0 6px; border-radius: 9px; text-align: center;
    border: 1px solid var(--mc-border-2); background: var(--mc-surface); color: var(--mc-text-3);
    font: inherit; font-size: 13px; font-weight: var(--mc-fw-bold); cursor: pointer;
}
.itn-page .itn-uti-sel.on { background: var(--mc-brand-soft); border-color: var(--mc-brand); color: var(--mc-brand-2); }
.itn-page .itn-uti-sel:disabled { cursor: default; background: var(--mc-surface-2); opacity: .75; }

.itn-page .itn-uti-rub {
    display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px;
    border-radius: 9px; border: 1px dashed var(--mc-border-2); font-size: 11.5px; color: var(--mc-text-2);
}
.itn-page .itn-uti-rub .mono { font-family: var(--mc-font-mono); }
/* Avatar menor só na rubrica — o dobro do .itn-page não cabe na célula. */
.itn-page .itn-uti-rub .avatar-sm,
.itn-page .itn-uti-chip-v .avatar-sm { width: 1.6rem !important; height: 1.6rem !important; font-size: .7rem !important; }
/* Na célula da rubrica não cabe o selo da profissão sobre um avatar de 1,6rem. */
.itn-page .itn-uti-rub .avatar-prof-sticker { display: none; }
.itn-page .itn-uti-rub .avatar-prof-wrap.tem-sticker { margin: 0; }

.itn-page .itn-uti-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 11.5px; color: var(--mc-text-2); }
.itn-page .itn-uti-legenda b { color: var(--mc-text); margin-right: 3px; }

/* Semáforo por turno (3 bolinhas) */
.itn-page .itn-uti-sem { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 9px; border: 1px solid var(--mc-border-2); background: var(--mc-surface); padding: 0 6px; }
.itn-page .itn-uti-sem button {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--sem); background: var(--sem-soft);
    cursor: pointer; padding: 0; transition: transform .12s;
}
.itn-page .itn-uti-sem button.on { background: var(--sem); transform: scale(1.18); box-shadow: 0 0 0 3px var(--sem-soft); }
.itn-page .itn-uti-sem button:disabled { cursor: default; opacity: .6; }

.itn-page .itn-uti-motivos { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--mc-border); }

/* Folhas anteriores */
.itn-page .itn-uti-dias { display: flex; flex-wrap: wrap; gap: 8px; }
.itn-page .itn-uti-dia {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 128px;
    padding: 8px 12px; border-radius: 10px; border: 1px solid var(--mc-border); background: var(--mc-surface-2);
    font: inherit; text-align: left; cursor: pointer;
}
.itn-page .itn-uti-dia:hover { border-color: var(--mc-brand); }
.itn-page .itn-uti-dia.on { border-color: var(--mc-brand); background: var(--mc-brand-soft); }
.itn-page .itn-uti-dia-d { font-size: 13px; font-weight: var(--mc-fw-bold); color: var(--mc-text); }
.itn-page .itn-uti-dia-s { font-size: 11px; color: var(--mc-text-2); }
.itn-page .itn-uti-dia-flag { position: absolute; top: 6px; right: 8px; color: var(--mc-warning); }
.itn-page .itn-uti-dia-flag .itn-ico { font-size: 16px; }

/* ---- Braden: KPIs, faixas, histórico ---- */
.itn-page .itn-uti-kpis { margin-bottom: 14px; }
.itn-page .itn-kpi[role="button"] { cursor: pointer; }
.itn-page .itn-kpi[role="button"]:hover { border-color: var(--mc-brand); }
.itn-page .itn-uti-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.itn-page .itn-uti-chart { width: 100%; height: auto; display: block; }
.itn-page .itn-uti-faixas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.itn-page .itn-uti-faixa {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 9px;
    background: var(--faixa-soft); border: 1px solid transparent; text-align: center;
}
.itn-page .itn-uti-faixa.ativa { border-color: var(--faixa); box-shadow: 0 0 0 2px var(--faixa-soft); }
.itn-page .itn-uti-faixa-nome { font-size: 10.5px; font-weight: var(--mc-fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--faixa); }
.itn-page .itn-uti-faixa-range { font-family: var(--mc-font-mono); font-size: 13px; font-weight: var(--mc-fw-bold); color: var(--mc-text); }

.itn-page .itn-uti-medidas { display: flex; flex-wrap: wrap; gap: 6px; }
.itn-page .itn-uti-medida { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--mc-radius-pill); background: var(--mc-success-soft); color: var(--mc-success); font-size: 12px; font-weight: var(--mc-fw-semibold); }
.itn-page .itn-uti-medida .itn-ico { font-size: 15px; }

.itn-page .itn-uti-tablewrap { overflow-x: auto; }
.itn-page .itn-uti-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.itn-page .itn-uti-table th { padding: 7px 8px; background: var(--mc-surface-2); color: var(--mc-text-2); font-size: 11px; font-weight: var(--mc-fw-bold); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--mc-border); text-align: left; white-space: nowrap; }
.itn-page .itn-uti-table td { padding: 7px 8px; border-bottom: 1px solid var(--mc-border-soft); color: var(--mc-text); vertical-align: top; }
.itn-page .itn-uti-table .num { text-align: center; }
.itn-page .itn-uti-table .mono { font-family: var(--mc-font-mono); font-size: 12px; white-space: nowrap; }
.itn-page .itn-uti-table tr.obs td { background: var(--mc-surface-2); color: var(--mc-text-2); font-size: 12px; }
.itn-page .itn-uti-table-medidas td:first-child { min-width: 220px; }
.itn-page .itn-uti-td-sub { font-size: 11.5px; font-weight: 400; color: var(--mc-text-3); line-height: 1.4; }

/* ---- Modal Braden: domínios e opções ---- */
.itn-page .itn-uti-braden-dominios { display: flex; flex-direction: column; gap: 12px; }
.itn-page .itn-uti-braden-dom { padding: 10px 12px; border-radius: var(--mc-radius-md); background: var(--mc-surface-2); border: 1px solid var(--mc-border); }
.itn-page .itn-uti-braden-dom-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.itn-page .itn-uti-braden-dom-head > .itn-ico { font-size: 22px; color: var(--mc-brand); }
.itn-page .itn-uti-braden-dom-head > div { flex: 1; min-width: 0; }
.itn-page .itn-uti-braden-dom-nome { font-size: 14px; font-weight: var(--mc-fw-bold); color: var(--mc-text); }
.itn-page .itn-uti-braden-dom-def { font-size: 11.5px; color: var(--mc-text-3); }
.itn-page .itn-uti-braden-dom-pts { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mc-surface-3); color: var(--mc-text-3); font-weight: var(--mc-fw-bold); font-family: var(--mc-font-mono); }
.itn-page .itn-uti-braden-dom-pts.on { background: var(--mc-brand); color: var(--mc-brand-ink); }
.itn-page .itn-uti-braden-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; }
.itn-page .itn-uti-braden-opt {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 64px; padding: 8px 10px;
    border-radius: 9px; border: 1px solid var(--mc-border-2); background: var(--mc-surface); text-align: left; cursor: pointer;
    font: inherit; color: var(--mc-text); transition: border-color .15s, background .15s;
}
.itn-page .itn-uti-braden-opt:hover { border-color: var(--mc-brand); }
.itn-page .itn-uti-braden-opt.on { border-color: var(--mc-brand); background: var(--mc-brand-soft); box-shadow: 0 0 0 2px var(--mc-brand-soft); }
.itn-page .itn-uti-braden-opt-pts { font-family: var(--mc-font-mono); font-size: 11px; font-weight: var(--mc-fw-bold); color: var(--mc-brand-2); }
.itn-page .itn-uti-braden-opt.on .itn-uti-braden-opt-pts { color: var(--mc-brand-2); }
.itn-page .itn-uti-braden-opt-tit { font-size: 13px; font-weight: var(--mc-fw-bold); line-height: 1.2; }
.itn-page .itn-uti-braden-opt-desc { font-size: 11px; line-height: 1.35; color: var(--mc-text-2); }

.itn-page .itn-uti-braden-resumo { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-top: 12px; }
.itn-page .itn-uti-braden-total { flex: 1 1 220px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 14px; border-radius: var(--mc-radius-md); background: var(--mc-surface-2); border: 1px solid var(--mc-border); }
.itn-page .itn-uti-braden-total-k { font-size: 10.5px; font-weight: var(--mc-fw-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--mc-text-3); }
.itn-page .itn-uti-braden-total-v { font-family: var(--mc-font-mono); font-size: 34px; font-weight: var(--mc-fw-bold); line-height: 1; }
.itn-page .itn-uti-braden-total-v small { font-size: 14px; color: var(--mc-text-3); margin-left: 2px; }
.itn-page .itn-uti-braden-campos { flex: 2 1 300px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }

.itn-page .itn-uti-medidas-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px; }
.itn-page .itn-uti-medida-btn {
    display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 9px; text-align: left;
    border: 1px solid var(--mc-border-2); background: var(--mc-surface); font: inherit; color: var(--mc-text); cursor: pointer;
}
.itn-page .itn-uti-medida-btn .itn-ico { font-size: 20px; color: var(--mc-text-3); flex: none; }
.itn-page .itn-uti-medida-btn.on { border-color: var(--mc-success); background: var(--mc-success-soft); }
.itn-page .itn-uti-medida-btn.on .itn-ico { color: var(--mc-success); }
.itn-page .itn-uti-medida-btn b { display: block; font-size: 12.5px; font-weight: var(--mc-fw-semibold); }
.itn-page .itn-uti-medida-btn small { display: block; font-size: 11px; color: var(--mc-text-2); line-height: 1.35; }

/* Modal "não mobilizado" */
.itn-page .itn-uti-motivo-lista { display: flex; flex-direction: column; gap: 4px; }
.itn-page .itn-uti-motivo {
    display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 9px; text-align: left;
    border: 1px solid var(--mc-border-2); background: var(--mc-surface); font: inherit; font-size: 13px; color: var(--mc-text); cursor: pointer;
}
.itn-page .itn-uti-motivo .itn-ico { font-size: 19px; color: var(--mc-text-3); }
.itn-page .itn-uti-motivo.on { border-color: var(--mc-danger); background: var(--mc-danger-soft); }
.itn-page .itn-uti-motivo.on .itn-ico { color: var(--mc-danger); }

/* ---- Guia rápido ---- */
.itn-page .itn-uti-cuidados { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 8px; }   /* 6 cartões numa linha em 1600 */
.itn-page .itn-uti-cuidado { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--mc-radius-md); border: 1px solid var(--mc-border); background: var(--mc-surface-2); }
.itn-page .itn-uti-cuidado.destaque { border-color: var(--mc-danger); background: var(--mc-danger-soft); }
.itn-page .itn-uti-cuidado-num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mc-brand-2); color: #fff; font-weight: var(--mc-fw-bold); font-size: 15px; }
.itn-page .itn-uti-cuidado.destaque .itn-uti-cuidado-num { background: var(--mc-danger); }
.itn-page .itn-uti-cuidado-tit { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: var(--mc-fw-bold); text-transform: uppercase; letter-spacing: .03em; color: var(--mc-text); margin-bottom: 4px; }
.itn-page .itn-uti-cuidado-tit .itn-ico { font-size: 19px; color: var(--mc-brand); }
.itn-page .itn-uti-cuidado.destaque .itn-uti-cuidado-tit .itn-ico { color: var(--mc-danger); }
.itn-page .itn-uti-cuidado ul { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--mc-text-2); line-height: 1.5; }

.itn-page .itn-uti-niveis { display: flex; flex-direction: column; gap: 6px; }
.itn-page .itn-uti-nivel-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--mc-border); background: var(--mc-surface-2); }
.itn-page .itn-uti-nivel-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mc-brand); color: var(--mc-brand-ink); font-size: 12.5px; font-weight: var(--mc-fw-bold); }
.itn-page .itn-uti-nivel-nome { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: var(--mc-fw-bold); color: var(--mc-text); }
.itn-page .itn-uti-nivel-nome .itn-ico { font-size: 18px; color: var(--mc-brand); }
.itn-page .itn-uti-nivel-desc { font-size: 12px; color: var(--mc-text-2); line-height: 1.4; }
.itn-page .itn-uti-ims { font-family: var(--mc-font-mono); font-size: 10px; font-weight: var(--mc-fw-semibold); padding: 1px 6px; border-radius: var(--mc-radius-pill); background: var(--mc-info-soft); color: var(--mc-info); }
.itn-page .itn-uti-cadeia { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; padding: 8px 10px; border-radius: 9px; background: var(--mc-brand-2); color: #fff; font-size: 11px; font-weight: var(--mc-fw-bold); letter-spacing: .03em; }
.itn-page .itn-uti-cadeia .itn-ico { font-size: 14px; opacity: .8; }

.itn-page .itn-uti-semaforo-legenda { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.itn-page .itn-uti-criterios { display: flex; flex-direction: column; gap: 8px; }
.itn-page .itn-uti-criterio { display: grid; grid-template-columns: 110px repeat(3, 1fr); gap: 6px; }
.itn-page .itn-uti-criterio-sis { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: var(--mc-fw-bold); color: var(--mc-text); }
.itn-page .itn-uti-criterio-sis .itn-ico { font-size: 18px; color: var(--mc-brand); }
.itn-page .itn-uti-criterio-col { padding: 7px 9px; border-radius: 8px; background: var(--sem-soft); border-left: 3px solid var(--sem); font-size: 11.5px; line-height: 1.4; color: var(--mc-text); }
.itn-page .itn-uti-criterio-col b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--sem); margin-bottom: 2px; }