/* ============================================================
   Centro de Atendimento Ambulatorial — redesenho
   Implementa "Centro Ambulatorial.dc.html" do projeto Claude Design
   ("Redesenho de apresentação de informações").

   Tudo prefixado com .amb- e ancorado em .amb-page: o /ambulatorio
   divide componentes com o resto do sistema, então nada aqui pode
   vazar para fora da página.
   Depende de medcare-tokens.css.
   ============================================================ */

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

    /* Esta tela é composição FIXA desenhada em 1600px, então pode (e deve)
       encolher para caber inteira — comportamento original do mc-scale.js,
       cujo piso padrão passou a ser 1 quando a escala foi estendida às telas
       Bootstrap fluidas (.mc-page), que não devem encolher. */
    --mc-scale-min: 0.62;

    /* Densidade escolhida em uso real (0.7 e 0.85 ficaram pequenos): o conteúdo
       renderiza a 90% com o navegador em 100% (ver densidade() em mc-scale.js).
       O piso acima segue protegendo a legibilidade em monitores estreitos. */
    --mc-scale-fator: 0.9;
}

/* ---------- Cabeçalho ---------- */
.amb-page .amb-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: var(--mc-fw-extrabold);
    letter-spacing: -.6px;
    color: var(--mc-ink);
    line-height: 1.2;
}

.amb-page .amb-subtitle {
    margin: 0;
    font-size: .9rem;
    color: var(--mc-gray-500);
}

.amb-page .amb-crumb {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: var(--mc-gray-400);
}

.amb-page .amb-crumb .amb-crumb-current {
    color: var(--mc-blue);
    font-weight: var(--mc-fw-semibold);
}

/* ---------- Superfície base dos blocos ---------- */
.amb-page .amb-surface {
    background: var(--mc-surface);
    border: 1px solid var(--mc-gray-200);
    border-radius: 14px;
    box-shadow: var(--mc-shadow-sm);
}

/* ---------- Faixa de indicadores ---------- */
.amb-page .amb-stats {
    display: grid;
    /* auto-fit: os 4 indicadores refluem sozinhos (4 → 3 → 2 → 1) conforme a
       largura, sem depender de breakpoints em degrau. min(220px,100%) evita
       estouro horizontal quando a tela é mais estreita que um card. */
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 16px;
}

.amb-page .amb-stat {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.amb-page .amb-stat-label {
    font-size: .7rem;
    font-weight: var(--mc-fw-bold);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--mc-gray-500);
}

.amb-page .amb-stat-value {
    font-size: 1.9rem;
    font-weight: var(--mc-fw-extrabold);
    line-height: 1;
}

.amb-page .amb-iconbox {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Card do paciente selecionado — o único em gradiente da faixa.
   Os brancos daqui para baixo são literais de propósito: assentam sobre --mc-grad-deep,
   que é escuro nos dois temas. Trocá-los por token (--mc-brand-ink e afins) inverteria
   a cor no escuro e apagaria o texto. */
.amb-page .amb-stat-sel {
    background: var(--mc-grad-deep);
    border: none;
    border-radius: 14px;
    box-shadow: var(--mc-shadow-sm);
}

.amb-page .amb-stat-sel .amb-stat-label { color: rgba(255, 255, 255, .7); }

.amb-page .amb-stat-sel-name {
    font-size: .98rem;
    font-weight: var(--mc-fw-bold);
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amb-page .amb-stat-sel-sub { font-size: .72rem; color: rgba(255, 255, 255, .65); }

.amb-page .amb-stat-sel .amb-iconbox {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* ---------- Barra de ferramentas ---------- */
.amb-page .amb-toolbar {
    padding: 14px 18px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.amb-page .amb-search { position: relative; flex: 1; min-width: 240px; }

.amb-page .amb-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mc-gray-400);
    pointer-events: none;
}

.amb-page .amb-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px 11px 40px;
    border: 1px solid var(--mc-gray-200);
    border-radius: 11px;
    font-size: .9rem;
    font-family: var(--mc-font-sans);
    color: var(--mc-gray-700);
    outline: none;
    background: var(--mc-gray-50);
}

.amb-page .amb-select {
    padding: 10px 34px 10px 14px;
    border: 1px solid var(--mc-gray-200);
    border-radius: 11px;
    font-size: .88rem;
    font-family: var(--mc-font-sans);
    color: var(--mc-gray-700);
    background: var(--mc-surface);
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* A seta é um data URI: não aceita var(), então o tema escuro troca a imagem inteira
   (mesmo desenho, stroke em --mc-text-2) em vez de recolorir. */
[data-theme-mode="dark"] .amb-page .amb-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a5b9c0' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
}

.amb-page .amb-search input:focus,
.amb-page .amb-select:focus {
    border-color: var(--mc-blue);
    box-shadow: 0 0 0 3px var(--mc-blue-100);
}

.amb-page .amb-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 6px;
    border-left: 1px solid var(--mc-gray-200);
}

.amb-page .amb-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--mc-gray-500);
}

.amb-page .amb-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- Divisão principal ---------- */
.amb-page .amb-split {
    display: grid;
    grid-template-columns: minmax(380px, 440px) 1fr;
    gap: 18px;
    align-items: start;
}

/* ---------- Toggle Fila / Paciente (só em telas estreitas) ----------
   Acima do breakpoint o zoom do .mc-scaled mantém as duas colunas lado a lado
   (mesma composição de 1366px pra cima). Abaixo dele, em vez de empilhar as
   duas colunas — o que gerava uma rolagem longuíssima nos monitores menores —
   mostramos UM painel por vez, com um toggle no topo. Assim a experiência do
   monitor menor fica igual à do grande: você vê a fila OU o paciente inteiro,
   sem espremer nem rolar sem fim. */
.amb-page .amb-toggle-mobile {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.amb-page .amb-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    border-radius: 11px;
    border: 1px solid var(--mc-gray-200);
    background: var(--mc-surface);
    color: var(--mc-gray-500);
    font-weight: var(--mc-fw-semibold);
    font-size: .85rem;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}

.amb-page .amb-toggle-btn i { font-size: .95rem; }

.amb-page .amb-toggle-btn.active {
    background: var(--mc-blue);
    border-color: var(--mc-blue);
    color: #fff;
}

@media (max-width: 1199.98px) {
    /* uma coluna só; o toggle decide qual painel aparece */
    .amb-page .amb-split { grid-template-columns: 1fr; }
    .amb-page .amb-toggle-mobile { display: grid; }
    .amb-page .amb-split.amb-vista-fila .amb-panel-detalhe { display: none; }
    .amb-page .amb-split.amb-vista-paciente .amb-panel-lista { display: none; }
    /* na visão de um painel só, a lista pode usar toda a altura da tela */
    .amb-page .amb-split.amb-vista-fila .amb-list { max-height: calc(100vh - 220px); }
}

/* Sem overflow:hidden aqui: ele recortava o dropdown "Ações" sempre que o menu
   passava da altura do painel (o caso clássico é o paciente sem prescrição, que
   deixa o painel curto). Os cantos arredondados não dependem dele — nada dentro
   tem fundo próprio que vaze — e os filhos que precisam recortar (a lista, o card
   do paciente) têm o seu. */
.amb-page .amb-panel {
    background: var(--mc-surface);
    border: 1px solid var(--mc-gray-200);
    border-radius: 16px;
    box-shadow: var(--mc-shadow-sm);
    display: flex;
    flex-direction: column;
}

/* O menu precisa passar por cima do que vier depois no fluxo. */
.amb-page .amb-panel .dropdown-menu { z-index: 1056; }

/* ---------- Abas ---------- */
.amb-page .amb-tabs {
    display: flex;
    border-bottom: 1px solid var(--mc-gray-100);
    padding: 0 6px;
}

.amb-page .amb-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 16px;
    font-size: .9rem;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-gray-400);
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .18s;
}

.amb-page .amb-tab:hover { color: var(--mc-gray-600); }

.amb-page .amb-tab.active {
    font-weight: var(--mc-fw-bold);
    color: var(--mc-blue);
    border-bottom-color: var(--mc-blue);
}

.amb-page .amb-tab-count {
    background: var(--mc-gray-100);
    color: var(--mc-gray-500);
    font-size: .72rem;
    font-weight: var(--mc-fw-bold);
    padding: 2px 8px;
    border-radius: var(--mc-radius-pill);
}

.amb-page .amb-tab.active .amb-tab-count {
    background: var(--mc-blue-50);
    color: var(--mc-blue);
}

/* ---------- Lista de pacientes ---------- */
.amb-page .amb-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
}

.amb-page .amb-list::-webkit-scrollbar { width: 10px; }

.amb-page .amb-list::-webkit-scrollbar-thumb {
    background: var(--mc-gray-300);
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.amb-page .amb-list::-webkit-scrollbar-thumb:hover {
    background: var(--mc-gray-400);
    background-clip: padding-box;
}

.amb-page .amb-pcard {
    flex-shrink: 0;
    cursor: pointer;
    background: var(--mc-surface);
    border: 1px solid var(--mc-gray-200);
    box-shadow: var(--mc-shadow-sm);
    border-radius: 14px;
    display: flex;
    overflow: hidden;
    transition: transform .2s var(--mc-ease), box-shadow .2s, border-color .2s;
}

.amb-page .amb-pcard:hover {
    transform: translateY(-2px);
    box-shadow: var(--mc-shadow);
    border-color: var(--mc-blue-200);
}

.amb-page .amb-pcard.selected {
    border-color: var(--mc-blue);
    box-shadow: 0 0 0 3px var(--mc-blue-100);
}

.amb-page .amb-pcard-main {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-left: 4px solid var(--mc-gray-300);
    justify-content: center;
}

.amb-page .amb-pcard-name {
    font-size: .86rem;
    font-weight: var(--mc-fw-bold);
    color: var(--mc-ink);
    letter-spacing: -.2px;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.amb-page .amb-pcard-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 11px;
    font-size: .72rem;
    color: var(--mc-gray-500);
    padding-left: 44px;
}

.amb-page .amb-pcard-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.amb-page .amb-pcard-meta i { color: var(--mc-gray-400); }

/* Badge SOS destacado na lista de medicamentos prescritos: maior que os demais
   selos de propósito — diferencia à primeira vista o "se necessário" da
   medicação de horário fixo */
.amb-page .amb-sos-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 3px 10px;
    border-radius: 7px;
    background: var(--mc-warning-soft);
    color: var(--mc-warning);
    border: 1.5px solid var(--mc-warning);
    font-size: .78rem;
    font-weight: var(--mc-fw-bold);
    letter-spacing: .6px;
    vertical-align: middle;
}

.amb-page .amb-sos-badge i { font-size: .9rem; }

.amb-page .amb-sep {
    width: 1px;
    height: 11px;
    background: var(--mc-gray-200);
}

.amb-page .amb-sexbox {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
}

/* Painel lateral do card: resumo das medicações */
.amb-page .amb-pcard-side {
    width: 132px;
    flex-shrink: 0;
    padding: 10px 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.amb-page .amb-pcard-side-label {
    font-size: .6rem;
    font-weight: var(--mc-fw-bold);
    letter-spacing: .5px;
    text-transform: uppercase;
}

.amb-page .amb-pcard-side-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--mc-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}

.amb-page .amb-pcard-side-text {
    font-size: .76rem;
    font-weight: var(--mc-fw-bold);
    color: var(--mc-gray-700);
    line-height: 1.15;
}

/* Acentos por situação das medicações */
.amb-page .amb-tone-red    { --amb-accent: var(--mc-red);    --amb-accent-bg: var(--mc-red-50); }
.amb-page .amb-tone-orange { --amb-accent: var(--mc-orange); --amb-accent-bg: var(--mc-orange-50); }
.amb-page .amb-tone-green  { --amb-accent: var(--mc-green);  --amb-accent-bg: var(--mc-green-50); }

.amb-page .amb-tone-red .amb-pcard-main,
.amb-page .amb-tone-orange .amb-pcard-main,
.amb-page .amb-tone-green .amb-pcard-main { border-left-color: var(--amb-accent); }

.amb-page .amb-tone-red .amb-pcard-side,
.amb-page .amb-tone-orange .amb-pcard-side,
.amb-page .amb-tone-green .amb-pcard-side { background: var(--amb-accent-bg); }

.amb-page .amb-tone-red .amb-pcard-side-label,
.amb-page .amb-tone-orange .amb-pcard-side-label,
.amb-page .amb-tone-green .amb-pcard-side-label { color: var(--amb-accent); }

.amb-page .amb-tone-red .amb-pcard-side-icon,
.amb-page .amb-tone-orange .amb-pcard-side-icon,
.amb-page .amb-tone-green .amb-pcard-side-icon { color: var(--amb-accent); }

/* Tempos do card.
   São dois tempos diferentes (desde a entrada x desde o último registro) e antes
   apareciam só como dois números com ícones distintos — indistinguíveis sem tooltip.
   Grid de 3 colunas com os filhos diretos: ícone, rótulo e valor de cada linha caem
   na mesma coluna, então os dois ficam alinhados e legendados. */
/* Convênio: primeira coisa do card, no topo à esquerda. */
.amb-page .amb-pcard-conv { align-self: flex-start; }

/* O badge herda .text-primary do YNEX, cujo azul (58,88,146) é o mesmo nos dois temas:
   sobre o card claro dá 6:1, sobre o escuro cai para 2.4:1. Aqui ele passa a usar o token
   de info, que mantém o azul mas clareia no escuro. Só o escuro é tocado — no claro o
   YNEX continua mandando. !important porque .text-primary do Bootstrap também é.
   A variante .text-secondary (sem convênio) é ciano claro e já passa no escuro. */
[data-theme-mode="dark"] .amb-page .amb-pcard-conv.text-primary {
    background: var(--mc-info-soft) !important;
    color: var(--mc-info) !important;
}

/* Coluna 2 é `auto`: as duas linhas compartilham a largura do rótulo mais longo, então
   os valores começam exatamente no mesmo x e ficam alinhados verticalmente. */
.amb-page .amb-times {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 2px 6px;
    align-items: center;
    padding-left: 44px;
    font-size: .72rem;
}

.amb-page .amb-times > i { color: var(--mc-gray-400); font-size: .8rem; }

.amb-page .amb-time-label { color: var(--mc-gray-400); }

.amb-page .amb-time-value { font-weight: var(--mc-fw-bold); }

.amb-page .amb-clock { color: var(--amb-accent, var(--mc-gray-600)); }

.amb-page .amb-pulse { color: var(--mc-teal); }
.amb-page .amb-times > i.amb-pulse-icon { color: var(--mc-teal); }

.amb-page .amb-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--mc-gray-400);
    font-size: .88rem;
}

.amb-page .amb-empty i {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 8px;
}

/* ---------- Detalhe ---------- */
/* Header do detalhe.
   Altura casada com a barra de abas da lista (.amb-tab: 15px+15px+~20px = 51px), para os
   dois painéis alinharem no topo. Por isso é uma linha só: avatar + nome + ações.
   A meta do paciente (idade/CPF/prontuário/convênio) desceu para a linha das abas, que
   tinha espaço livre à direita. */
.amb-page .amb-detail-head {
    padding: 8px 16px 8px 20px;
    min-height: 51px;
    border-bottom: 1px solid var(--mc-gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.amb-page .amb-detail-name {
    font-size: .98rem;
    font-weight: var(--mc-fw-extrabold);
    color: var(--mc-ink);
    letter-spacing: -.3px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amb-page .amb-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: .74rem;
    color: var(--mc-gray-500);
}

.amb-page .amb-detail-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.amb-page .amb-detail-meta i { color: var(--mc-gray-400); }

.amb-page .amb-detail-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid var(--mc-gray-100);
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.amb-page .amb-detail-tabs .amb-tab { padding: 11px 14px; font-size: .88rem; }

/* ---------- Tabela de medicações ---------- */
.amb-page .amb-medtable { padding: 6px 20px 4px; overflow-x: auto; }

.amb-page .amb-medtable-inner { min-width: 780px; }

/* Sem coluna "Prescrito por": ela comia largura e a informação cabe melhor embaixo do
   horário de prescrição, no mesmo padrão do "Aplicado / por Fulano".
   A coluna de ações é mais larga que no design: lá era um menu "...", aqui ela abriga
   a lista de horários aprazados com os botões de aplicar/recusar por horário. */
.amb-page .amb-medhead,
.amb-page .amb-medrow {
    display: grid;
    grid-template-columns: minmax(240px, 2.4fr) 1.5fr 130px 156px;
    gap: 14px;
    align-items: start;
}

.amb-page .amb-medhead { align-items: center; }

/* Observação médica.
   Antes era uma caixa dentro da 1ª coluna: estourava a altura da linha e desalinhava as
   outras colunas. Agora a linha ganha só um chip, e o texto abre em largura total abaixo
   dela — a altura da linha não muda. */
.amb-page .amb-obs-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.amb-page .amb-obs {
    grid-column: 1 / -1;
    margin: -1px 4px 10px;
    padding: 10px 12px;
    border: 1px solid var(--mc-orange);
    border-left-width: 3px;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-orange-50);
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: .78rem;
    color: var(--mc-gray-700);
}

.amb-page .amb-obs > i { color: var(--mc-orange); font-size: .95rem; margin-top: 1px; }

.amb-page .amb-obs-title {
    font-weight: var(--mc-fw-bold);
    color: var(--mc-orange);
    display: block;
    margin-bottom: 2px;
}

.amb-page .amb-obs-text { white-space: pre-wrap; }

/* Ações: o "Gerar Aprazamento" e os botões de aplicação única dividem o mesmo container,
   então ficam alinhados igual. */
.amb-page .amb-actions {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: wrap;
}

.amb-page .amb-medhead {
    padding: 12px 4px;
    border-bottom: 1px solid var(--mc-gray-200);
    font-size: .68rem;
    font-weight: var(--mc-fw-bold);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--mc-gray-400);
}

.amb-page .amb-medrow {
    padding: 14px 4px;
    border-bottom: 1px solid var(--mc-gray-100);
    border-radius: 8px;
    transition: background .15s;
}

.amb-page .amb-medrow:hover { background: var(--mc-gray-50); }

.amb-page .amb-med-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.amb-page .amb-med-name {
    font-size: .86rem;
    font-weight: var(--mc-fw-bold);
    color: var(--mc-ink);
    line-height: 1.25;
}

.amb-page .amb-med-sub {
    font-size: .74rem;
    color: var(--mc-gray-500);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.amb-page .amb-med-sub i { color: var(--mc-gray-400); }

.amb-page .amb-med-via {
    font-size: .74rem;
    color: var(--mc-blue-light);
    font-weight: var(--mc-fw-semibold);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.amb-page .amb-med-presc {
    font-size: .8rem;
    color: var(--mc-gray-600);
    line-height: 1.3;
}

/* Prescrito x Aplicado.
   Antes a coluna mostrava um dos dois sem dizer qual — "14/07 22:11" tanto podia ser
   a hora da prescrição quanto a da aplicação. Agora os dois aparecem rotulados, e o
   grid alinha rótulo e valor em coluna. */
.amb-page .amb-when {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 6px;
    align-items: center;
}

.amb-page .amb-when-label {
    font-size: .68rem;
    font-weight: var(--mc-fw-bold);
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--mc-gray-400);
}

.amb-page .amb-med-when {
    font-size: .8rem;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-gray-700);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.amb-page .amb-med-when.amb-when-done { color: var(--mc-green); }

.amb-page .amb-med-by {
    font-size: .72rem;
    color: var(--mc-gray-400);
    grid-column: 2;
}

/* Horários aprazados (coluna de ações) */
.amb-page .amb-slots {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 7px;
    align-items: center;
    font-size: .72rem;
}

.amb-page .amb-slot-time {
    font-weight: var(--mc-fw-bold);
    color: var(--mc-gray-600);
    font-variant-numeric: tabular-nums;
}

.amb-page .amb-slot-time.amb-slot-late { color: var(--mc-red); }

.amb-page .amb-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .74rem;
    font-weight: var(--mc-fw-bold);
    padding: 5px 11px;
    border-radius: var(--mc-radius-pill);
    white-space: nowrap;
}

.amb-page .amb-chip-red    { background: var(--mc-red-50);    color: var(--mc-red); }
.amb-page .amb-chip-orange { background: var(--mc-orange-50); color: var(--mc-orange); }
.amb-page .amb-chip-green  { background: var(--mc-green-50);  color: var(--mc-green); }
.amb-page .amb-chip-gray   { background: var(--mc-gray-100);  color: var(--mc-gray-500); }

.amb-page .amb-medfoot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 4px;
    font-size: .8rem;
    color: var(--mc-gray-500);
    flex-wrap: wrap;
}

.amb-page .amb-medfoot i { color: var(--mc-gray-400); }

.amb-page .amb-medfoot .amb-bullet { color: var(--mc-gray-300); }

/* ============================================================
   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.
   ============================================================ */
.amb-page.container-fluid {
    max-width: 100%;
    padding: 10px;
}

@media (min-width: 1600px) {
    /* Em tela grande, um respiro a mais — sem limitar a largura. */
    .amb-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.
   ============================================================ */
.amb-page.container-fluid {
    background: var(--mc-bg);
    min-height: calc(100vh - 60px);
}

/* ============================================================================
   CAMADA DE IDENTIDADE — botões de ação + modais (design Ambulatorio Responsivo)
   Escopo: .amb-root (envelope da página, inclui .amb-page E os modais irmãos).
   Reveste o markup Bootstrap/YNEX existente por herança — sem reescrever os 16
   modais. Fora do .amb-root nada muda. Tokens --mc-* trocam sozinhos no escuro.
   !important onde o YNEX (styles.css/custom-tables.css) também usa !important.
   ============================================================================ */

/* ---------- Botões de ação do painel de detalhe (pílulas do design) ---------- */
.amb-root .amb-detail-head .btn {
    border-radius: 9px !important;
    font-weight: var(--mc-fw-semibold);
    font-size: .78rem;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-width: 1px;
    box-shadow: none;
}
.amb-root .amb-detail-head .btn-group { gap: 7px; }
.amb-root .amb-detail-head .btn-group > .btn {
    border-radius: 9px !important;   /* desfaz o "colar" do btn-group; vira pílulas soltas */
}
/* Nova Evolução: índigo do design (distingue da marca e do verde de Prescrever) */
.amb-root .amb-detail-head .btn-primary {
    background: #4553b8 !important;
    border-color: #4553b8 !important;
    color: #fff !important;
}
[data-theme-mode="dark"] .amb-root .amb-detail-head .btn-primary {
    background: #5d6ada !important;
    border-color: #5d6ada !important;
}
.amb-root .amb-detail-head .btn-success {
    background: var(--mc-success) !important;
    border-color: var(--mc-success) !important;
    color: #fff !important;
}
.amb-root .amb-detail-head .btn-outline-info {
    background: var(--mc-info-soft) !important;
    border-color: color-mix(in srgb, var(--mc-info) 35%, transparent) !important;
    color: var(--mc-info) !important;
}
.amb-root .amb-detail-head .btn-outline-success {
    background: transparent !important;
    border-color: var(--mc-success) !important;
    color: var(--mc-success) !important;
}
.amb-root .amb-detail-head .btn-outline-primary,
.amb-root .amb-detail-head .btn-outline-secondary {
    background: var(--mc-surface-2) !important;
    border-color: var(--mc-border-2) !important;
    color: var(--mc-text-2) !important;
}

/* ---------- Modais: casca ---------- */
.amb-root .modal-content {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-lg);
    overflow: hidden;                 /* mantém os cantos arredondados no header/footer */
}
.amb-root .modal-header {
    border-bottom: 1px solid var(--mc-border);
    padding: 14px 18px;
    align-items: center;
}
.amb-root .modal-title {
    font-weight: var(--mc-fw-bold);
    font-size: 1rem;
    letter-spacing: -.2px;
    color: var(--mc-text);
}
.amb-root .modal-body { padding: 16px 18px; color: var(--mc-text); }
.amb-root .modal-footer {
    border-top: 1px solid var(--mc-border);
    padding: 12px 18px;
    gap: 8px;
}
.amb-root .modal .btn-close { opacity: .7; }
.amb-root .modal .btn-close:hover { opacity: 1; }

/* Cabeçalhos tintados que os modais já usam — refinados para o tom da paleta */
.amb-root .modal-header.bg-primary-transparent,
.amb-root .modal-header.bg-primary { background: var(--mc-brand-soft) !important; }
.amb-root .modal-header.bg-primary .modal-title,
.amb-root .modal-header.bg-primary .btn-close { color: var(--mc-brand) !important; filter: none; }
.amb-root .modal-header.bg-success-transparent { background: var(--mc-success-soft) !important; }
.amb-root .modal-header.bg-info-transparent { background: var(--mc-info-soft) !important; }
.amb-root .modal-header.bg-warning-transparent,
.amb-root .modal-header.bg-warning { background: var(--mc-warning-soft) !important; }
.amb-root .modal-header.bg-danger-transparent { background: var(--mc-danger-soft) !important; }
.amb-root .modal-header.bg-secondary-transparent { background: var(--mc-surface-2) !important; }

/* ---------- Modais: campos de formulário ---------- */
.amb-root .modal .form-control,
.amb-root .modal .form-select {
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border-2);
    border-radius: var(--mc-radius-sm);
    color: var(--mc-text);
    font-weight: var(--mc-fw-medium);
}
.amb-root .modal .form-control::placeholder { color: var(--mc-text-3); }
.amb-root .modal .form-control:focus,
.amb-root .modal .form-select:focus {
    border-color: var(--mc-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-brand) 18%, transparent);
    background: var(--mc-surface);
}
.amb-root .modal .form-label {
    font-weight: var(--mc-fw-semibold);
    font-size: .82rem;
    color: var(--mc-text-2);
    margin-bottom: 5px;
}
.amb-root .modal .form-check-input:checked {
    background-color: var(--mc-brand);
    border-color: var(--mc-brand);
}

/* ---------- Modais: botões ---------- */
.amb-root .modal .btn {
    border-radius: var(--mc-radius-sm);
    font-weight: var(--mc-fw-semibold);
    box-shadow: none;
}
.amb-root .modal .btn-primary {
    background: var(--mc-brand); border-color: var(--mc-brand); color: var(--mc-brand-ink);
}
.amb-root .modal .btn-success { background: var(--mc-success); border-color: var(--mc-success); color: #fff; }
.amb-root .modal .btn-warning { background: var(--mc-warning); border-color: var(--mc-warning); color: #fff; }
.amb-root .modal .btn-danger { background: var(--mc-danger); border-color: var(--mc-danger); color: #fff; }
.amb-root .modal .btn-info { background: var(--mc-info); border-color: var(--mc-info); color: #fff; }
.amb-root .modal .btn-secondary,
.amb-root .modal .btn-light {
    background: var(--mc-surface-2); border-color: var(--mc-border-2); color: var(--mc-text-2);
}

/* ---------- Modais: cards internos, badges, tabelas, list-group ---------- */
.amb-root .modal .card,
.amb-root .modal .custom-card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: none;
}
.amb-root .modal .card-header {
    background: var(--mc-surface-2);
    border-bottom: 1px solid var(--mc-border);
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text);
}
.amb-root .modal .card.border-primary { border-color: color-mix(in srgb, var(--mc-brand) 45%, transparent) !important; }
.amb-root .modal .list-group-item {
    background: var(--mc-surface);
    border-color: var(--mc-border);
    color: var(--mc-text);
    border-radius: var(--mc-radius-sm);
}
.amb-root .modal .list-group-item-action:hover { background: var(--mc-surface-2); }
.amb-root .modal .table { color: var(--mc-text); border-color: var(--mc-border); }
.amb-root .modal .table > :not(caption) > * > * { border-color: var(--mc-border); }
.amb-root .modal .alert { border-radius: var(--mc-radius-md); }
.amb-root .modal .prescription-selected-item,
.amb-root .modal .medication-search-item {
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    padding: 12px;
}

/* ============================================================
   Modal de Prescrição — redesenho ModalPrescricao.dc.html
   (projeto Claude Design). Markup próprio (.amb-rx-*), irmão do
   .mc-scaled (sem zoom). Tema escuro herda dos tokens --mc-*.
   ============================================================ */
/* .amb-rx-dialog na classe (não no id): o MESMO shell serve ao #modalMedicacao do
   /ambulatorio e ao modal de prescrição do /consulta — dimensões, zoom e tipografia
   idênticos por construção.

   --rx-zoom vem do mc-scale.js: min(0.9, largura/1060, altura/780). Em monitor
   grande fica na densidade 0.9; em resolução menor a composição INTEIRA encolhe
   junto para caber — mesma experiência (lista de posologias visível) em qualquer
   tela, em vez de cortar o que fica embaixo. As divisões por var(--rx-zoom) em
   width/height devolvem ao layout os px que o zoom tira, mantendo a composição
   de 1060x780 sempre que couber. */
.amb-root .modal-dialog.amb-rx-dialog {
    max-width: min(1060px, calc((100vw - 16px) / var(--rx-zoom, 0.9)));
    margin-left: auto;
    margin-right: auto;
    /* O modal fica fora do .mc-scaled (position:fixed), então recebe o zoom
       aqui. Zoom no próprio elemento não desloca nada — o problema é só em
       ancestral. */
    zoom: var(--rx-zoom, 0.9);
}

.amb-root .amb-rx-dialog .modal-content {
    height: min(780px, calc((100dvh - 16px) / var(--rx-zoom, 0.9)));
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-lg);
    overflow: hidden;
    /* Tipografia do desenho — o modal não herda do .amb-page (é irmão dele) */
    font-family: var(--mc-font-sans);
    font-size: 14px;
    line-height: 1.45;
    color: var(--mc-text);
}

@keyframes ambRxUp {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.amb-root .modal.show .amb-rx-dialog .modal-content { animation: ambRxUp .3s var(--mc-ease); }

@media (prefers-reduced-motion: reduce) {
    .amb-root .modal.show .amb-rx-dialog .modal-content { animation: none; }
}

/* ---------- Cabeçalho ---------- */
.amb-root .amb-rx-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--mc-border);
    flex: 0 0 auto;
}

.amb-root .amb-rx-head-ico {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--mc-brand-soft);
    color: var(--mc-brand);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.amb-root .amb-rx-head-tit { margin-right: auto; min-width: 0; }

.amb-root .amb-rx-title {
    font-weight: var(--mc-fw-bold);
    font-size: 15px;
    letter-spacing: -.3px;
    color: var(--mc-text);
}

.amb-root .amb-rx-sub { font-size: 11.5px; color: var(--mc-text-2); }

.amb-root .amb-rx-mono { font-family: var(--mc-font-mono); }

.amb-root .amb-rx-x {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--mc-border);
    background: var(--mc-surface-2);
    color: var(--mc-text-2);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.amb-root .amb-rx-x:hover { color: var(--mc-danger); border-color: var(--mc-danger); }

/* ---------- Corpo em duas colunas ---------- */
.amb-root .amb-rx-body { flex: 1 1 auto; min-height: 0; display: flex; }

.amb-root .amb-rx-col {
    flex: 1 1 50%;
    min-width: 0;
    overflow-y: auto;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.amb-root .amb-rx-col-buscar { border-right: 1px solid var(--mc-border); }

.amb-root .amb-rx-col-atual { background: var(--mc-surface-2); gap: 10px; }

/* ---------- Campos ---------- */
.amb-root .amb-rx-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text-2);
    margin: 0;
}

.amb-root .amb-rx-input { font-size: 13px; }

/* Selo dentro do rótulo do campo (ex.: "Última utilizada" na Posologia) */
.amb-root .amb-rx-label .amb-rx-flag { margin-left: 6px; }

/* ---------- Resultados da busca ---------- */
.amb-root .amb-rx-sec {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text-2);
    margin-bottom: 8px;
}

.amb-root .amb-rx-sec i { color: var(--mc-success); }

.amb-root .amb-rx-count-ok {
    background: var(--mc-success-soft);
    color: var(--mc-success);
    border-radius: var(--mc-radius-pill);
    font-size: 11px;
    font-weight: var(--mc-fw-bold);
    padding: 1px 7px;
    font-family: var(--mc-font-mono);
}

.amb-root .amb-rx-results { display: flex; flex-direction: column; gap: 8px; }

.amb-root .amb-rx-result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--mc-border);
    border-radius: 10px;
    background: var(--mc-surface);
    cursor: pointer;
    transition: border-color .15s;
}

.amb-root .amb-rx-result:hover { border-color: var(--mc-brand); }

/* Sem estoque continua clicável de propósito: o clique explica o bloqueio */
.amb-root .amb-rx-result.off { opacity: .6; cursor: not-allowed; }
.amb-root .amb-rx-result.off:hover { border-color: var(--mc-border); }

.amb-root .amb-rx-pill-ico {
    width: 32px;
    height: 32px;
    border-radius: var(--mc-radius-pill);
    background: var(--mc-brand-soft);
    color: var(--mc-brand);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.amb-root .amb-rx-result-main { flex: 1 1 auto; min-width: 0; }

.amb-root .amb-rx-result-nome { font-weight: var(--mc-fw-semibold); font-size: 13px; color: var(--mc-text); }

.amb-root .amb-rx-result-forma { font-size: 11px; color: var(--mc-text-3); }

.amb-root .amb-rx-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.amb-root .amb-rx-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: var(--mc-fw-semibold);
    border-radius: 6px;
    padding: 1px 8px;
    letter-spacing: .3px;
}

.amb-root .amb-rx-flag-ctrl { color: var(--mc-danger); background: var(--mc-danger-soft); }
.amb-root .amb-rx-flag-anti { color: var(--mc-warning); background: var(--mc-warning-soft); }
.amb-root .amb-rx-flag-pref { color: var(--mc-success); background: var(--mc-success-soft); }
.amb-root .amb-rx-flag-info { color: var(--mc-info); background: var(--mc-info-soft); }
.amb-root .amb-rx-flag-sos {
    color: var(--mc-warning);
    background: var(--mc-warning-soft);
    border: 1px solid var(--mc-warning);
    font-weight: var(--mc-fw-bold);
}

.amb-root .amb-rx-result-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.amb-root .amb-rx-tuss { font-size: 10px; color: var(--mc-text-3); font-family: var(--mc-font-mono); }

.amb-root .amb-rx-disp {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: var(--mc-fw-semibold);
    border-radius: var(--mc-radius-pill);
    padding: 2px 9px;
}

.amb-root .amb-rx-disp.ok { color: var(--mc-success); background: var(--mc-success-soft); }
.amb-root .amb-rx-disp.err { color: var(--mc-danger); background: var(--mc-danger-soft); }

/* ---------- Medicamento selecionado + formulário ---------- */
.amb-root .amb-rx-sel-row { display: flex; gap: 8px; align-items: stretch; }

.amb-root .form-control.amb-rx-sel {
    flex: 1 1 auto;
    min-width: 0;
    border-color: var(--mc-brand);
    background: var(--mc-brand-soft);
    font-weight: var(--mc-fw-semibold);
}

.amb-root .amb-rx-trocar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: var(--mc-radius-sm);
    border: 1px solid var(--mc-border-2);
    background: var(--mc-surface-2);
    color: var(--mc-text-2);
    font-size: 12px;
    font-weight: var(--mc-fw-semibold);
    cursor: pointer;
    flex: 0 0 auto;
}

.amb-root .amb-rx-trocar:hover { border-color: var(--mc-brand); color: var(--mc-brand); background: var(--mc-brand-soft); }

/* Posologias cadastradas: lista de 1 clique (mockup), filtrada pelo campo Posologia */
.amb-root .amb-rx-posos {
    border: 1px solid var(--mc-border);
    border-radius: 10px;
    background: var(--mc-surface);
    overflow: hidden;
}

.amb-root .amb-rx-posos-tit {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 11.5px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text-2);
    background: var(--mc-surface-2);
    border-bottom: 1px solid var(--mc-border);
}

.amb-root .amb-rx-posos-tit i { color: var(--mc-brand); }

.amb-root .amb-rx-posos-hint {
    margin-left: auto;
    font-weight: var(--mc-fw-medium);
    font-size: 10.5px;
    color: var(--mc-text-3);
}

.amb-root .amb-rx-posos-list { max-height: 220px; overflow-y: auto; }

/* Cabeçalho de grupo dentro da lista (Usadas neste medicamento / Catálogo padrão) */
.amb-root .amb-rx-posos-grp {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px 4px;
    font-size: 10px;
    font-weight: var(--mc-fw-bold);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--mc-text-3);
    background: var(--mc-surface-2);
    border-bottom: 1px solid var(--mc-border);
    position: sticky;
    top: 0;
}

.amb-root .amb-rx-posos-grp i { color: var(--mc-brand); font-size: 12px; }

.amb-root .amb-rx-poso {
    width: 100%;
    display: flex;
    /* flex-wrap + nome com quebra: posologias longas (as "usadas" vêm do texto
       livre dos médicos) descem de linha em vez de serem CORTADAS na borda */
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--mc-border);
    background: var(--mc-surface);
    text-align: left;
    cursor: pointer;
    font-size: 12px;
}

.amb-root .amb-rx-poso:last-child { border-bottom: none; }

.amb-root .amb-rx-poso:hover { background: var(--mc-brand-soft); }

/* Item atualmente selecionado (é o valor confirmado do campo Posologia) */
.amb-root .amb-rx-poso.sel {
    background: var(--mc-brand-soft);
    box-shadow: inset 3px 0 0 var(--mc-brand);
}

.amb-root .amb-rx-poso.sel .amb-rx-poso-nome { color: var(--mc-brand); }

/* Busca sem resultado: a caixa continua visível em vez de sumir */
.amb-root .amb-rx-posos-vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 12px;
    font-size: 12px;
    color: var(--mc-text-3);
}

.amb-root .amb-rx-poso-nome {
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text);
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.amb-root .amb-rx-poso-desc {
    color: var(--mc-text-3);
    font-size: 11.5px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amb-root .amb-rx-poso-freq {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-info);
    background: var(--mc-info-soft);
    border-radius: var(--mc-radius-pill);
    padding: 1px 8px;
}

/* ---------- Se necessário (SOS) ---------- */
.amb-root .amb-rx-sos {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border: 1px solid var(--mc-border-2);
    border-radius: var(--mc-radius-sm);
    background: var(--mc-surface-2);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text-2);
    margin: 0;
}

.amb-root .amb-rx-sos:hover { border-color: var(--mc-warning); }

.amb-root .amb-rx-sos.on { border-color: var(--mc-warning); background: var(--mc-warning-soft); }

.amb-root .amb-rx-sos input {
    width: 16px;
    height: 16px;
    accent-color: var(--mc-warning);
    cursor: pointer;
    margin: 0;
    flex: 0 0 auto;
}

.amb-root .amb-rx-sos-tit { display: flex; align-items: center; gap: 6px; }
.amb-root .amb-rx-sos-tit i { color: var(--mc-warning); }

.amb-root .amb-rx-sos-hint {
    margin-left: auto;
    font-weight: var(--mc-fw-medium);
    font-size: 11px;
    color: var(--mc-text-3);
}

.amb-root .amb-rx-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.amb-root .amb-rx-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px;
    border-radius: var(--mc-radius-sm);
    border: none;
    background: var(--mc-grad-primary);
    color: #fff;
    font-size: 13px;
    font-weight: var(--mc-fw-semibold);
    cursor: pointer;
    box-shadow: var(--mc-shadow-sm);
    transition: transform .15s, filter .15s;
}

.amb-root .amb-rx-add:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.amb-root .amb-rx-add:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Prescrição atual ---------- */
.amb-root .amb-rx-atual-tit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--mc-fw-bold);
    color: var(--mc-text);
}

.amb-root .amb-rx-atual-tit i { color: var(--mc-brand); }

.amb-root .amb-rx-count-brand {
    background: var(--mc-brand);
    color: var(--mc-brand-ink);
    border-radius: var(--mc-radius-pill);
    font-size: 11px;
    font-weight: var(--mc-fw-bold);
    padding: 1px 8px;
    font-family: var(--mc-font-mono);
}

.amb-root .amb-rx-empty {
    text-align: center;
    padding: 26px 14px;
    color: var(--mc-text-3);
    font-size: 12.5px;
    border: 1px dashed var(--mc-border-2);
    border-radius: 10px;
    background: var(--mc-surface);
}

.amb-root .amb-rx-empty i { font-size: 22px; }

.amb-root .amb-rx-item {
    border: 1px solid var(--mc-border);
    border-radius: 10px;
    background: var(--mc-surface);
    padding: 12px 14px;
    box-shadow: var(--mc-shadow-sm);
}

.amb-root .amb-rx-item-top { display: flex; align-items: flex-start; gap: 10px; }

.amb-root .amb-rx-item-main { flex: 1 1 auto; min-width: 0; }

.amb-root .amb-rx-item-nome {
    font-weight: var(--mc-fw-semibold);
    font-size: 13.5px;
    color: var(--mc-text);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.amb-root .amb-rx-item-forma { font-size: 11px; color: var(--mc-text-3); }

.amb-root .amb-rx-del {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--mc-danger-soft);
    background: var(--mc-danger-soft);
    color: var(--mc-danger);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.amb-root .amb-rx-del:hover { background: var(--mc-danger); color: #fff; }

/* Botão de editar item (irmão do amb-rx-del, em tom neutro) */
.amb-root .amb-rx-editbtn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--mc-border-2);
    background: var(--mc-surface-2);
    color: var(--mc-text-2);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.amb-root .amb-rx-editbtn:hover { border-color: var(--mc-brand); color: var(--mc-brand); background: var(--mc-brand-soft); }

.amb-root .amb-rx-item-pos { margin-top: 8px; font-size: 12px; color: var(--mc-text-2); }
.amb-root .amb-rx-item-pos b { color: var(--mc-text-3); font-size: 11px; }

.amb-root .amb-rx-item-meta {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mc-border);
    font-size: 12px;
    flex-wrap: wrap;
    color: var(--mc-text-2);
}

.amb-root .amb-rx-item-meta i.ri-drop-line { color: var(--mc-info); }
.amb-root .amb-rx-item-meta i.ri-hashtag { color: var(--mc-warning); }

.amb-root .amb-rx-item-obs { margin-top: 6px; font-size: 12px; color: var(--mc-text-2); }
.amb-root .amb-rx-item-obs i { color: var(--mc-purple); }

/* ---------- Rodapé ---------- */
.amb-root .amb-rx-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--mc-border);
    flex: 0 0 auto;
    background: var(--mc-surface-2);
    flex-wrap: wrap;
}

.amb-root .amb-rx-foot-msg { font-size: 12px; color: var(--mc-text-3); margin-right: auto; }
.amb-root .amb-rx-foot-msg.ok { color: var(--mc-success); }

.amb-root .amb-rx-cancel {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--mc-radius-sm);
    border: 1px solid var(--mc-border-2);
    background: var(--mc-surface);
    color: var(--mc-text-2);
    font-size: 13px;
    font-weight: var(--mc-fw-semibold);
    cursor: pointer;
}

.amb-root .amb-rx-cancel:hover { border-color: var(--mc-danger); color: var(--mc-danger); }

.amb-root .amb-rx-save {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--mc-radius-sm);
    border: none;
    background: var(--mc-grad-primary);
    color: #fff;
    font-size: 13px;
    font-weight: var(--mc-fw-semibold);
    cursor: pointer;
    box-shadow: var(--mc-shadow-sm);
    transition: transform .15s, filter .15s;
}

.amb-root .amb-rx-save:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.amb-root .amb-rx-save:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Abas de categoria (sempre visíveis — /consulta: Medicamentos ·
   Procedimentos · Exames de Imagem). Mesmo desenho das abas mobile. ---------- */
.amb-root .amb-rx-cat-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mc-border);
    flex: 0 0 auto;
}

.amb-root .amb-rx-cat-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--mc-border-2);
    background: var(--mc-surface-2);
    color: var(--mc-text-2);
    font-size: 12.5px;
    font-weight: var(--mc-fw-semibold);
    cursor: pointer;
}

.amb-root .amb-rx-cat-tab.active { border-color: var(--mc-brand); background: var(--mc-brand-soft); color: var(--mc-brand); }

.amb-root .amb-rx-cat-tab .amb-rx-tab-badge { margin-left: 2px; }

/* ---------- Abas (só < 760px) ---------- */
.amb-root .amb-rx-tabs {
    display: none;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mc-border);
    flex: 0 0 auto;
}

.amb-root .amb-rx-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--mc-border-2);
    background: var(--mc-surface-2);
    color: var(--mc-text-2);
    font-size: 12.5px;
    font-weight: var(--mc-fw-semibold);
    cursor: pointer;
}

.amb-root .amb-rx-tab.active { border-color: var(--mc-brand); background: var(--mc-brand-soft); color: var(--mc-brand); }

.amb-root .amb-rx-tab-badge {
    background: var(--mc-brand);
    color: var(--mc-brand-ink);
    border-radius: var(--mc-radius-pill);
    font-size: 11px;
    font-weight: var(--mc-fw-bold);
    padding: 0 7px;
    font-family: var(--mc-font-mono);
}

@media (max-width: 759.98px) {
    .amb-root .amb-rx-tabs { display: flex; }
    .amb-root .amb-rx-body.amb-rx-ver-buscar .amb-rx-col-atual { display: none; }
    .amb-root .amb-rx-body.amb-rx-ver-atual .amb-rx-col-buscar { display: none; }
    .amb-root .amb-rx-col-buscar { border-right: none; }
}