/* ============================================================
   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 ---------- */
.itn-page .itn-head {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

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



.itn-page .itn-title {
    margin: 0;
    text-decoration: none;
    font-size: 19px;
    font-weight: var(--mc-fw-bold);
    letter-spacing: -.02em;
    color: var(--mc-text);
    line-height: 1.2;
}

.itn-page .itn-head-meta {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--mc-text-2);
}

.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;
    grid-template-columns: repeat(4, 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; }

/* ---------- 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); }
.itn-page .itn-dose-pending { background: var(--mc-warning-soft); color: var(--mc-warning); }
.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; }

.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 topo e encostadas à direita. Só de ícone (o rótulo vive no title/tooltip):
   com texto, as 9 ações quebravam para uma segunda linha e respondiam sozinhas
   por ~1/3 da altura do card. */
.itn-page .itn-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: auto;
}
.itn-page .itn-abtn {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
}
/* O dropdown perde a setinha: com 32px 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: -5px;
    right: -5px;
    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);
}

/* ---------- 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);
}

.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;
}