/* ============================================================
   MedCare — Camada base de página (jul/2026)
   Aplica a identidade (tokens --mc-* de medcare-tokens.css) sobre o markup
   YNEX que JÁ existe: card, table, btn, form-control, badge, alert, nav-tabs.
   Serve as 261 telas dos menus Diagnóstico, Suprimentos, Financeiro,
   Clínica Particular, Regulação, Gestão Administrativa e Configurações.

   Por que reestilizar o markup existente em vez de reescrevê-lo:
   os sistemas bespoke (op-*, presc-*, amb-*) exigem markup próprio e custam
   ~600-1200 linhas por tela. Inviável em 261 páginas. Aqui o ganho é por
   herança: a página só recebe a classe .mc-page e adota a identidade inteira.
   Os hubs de cada menu recebem refino bespoke por cima, quando chegar a vez.

   Escopo: TUDO abaixo é prefixado por .mc-page. Sem a classe no container, o
   sistema segue com a cara YNEX original — nada vaza para telas não migradas.

   Modais: fora do escopo por decisão do usuário. Na maioria das telas o modal
   é irmão do container (não recebe .mc-page e já fica de fora), mas em 7 delas
   é descendente — por isso o .modal reverte explicitamente no fim do arquivo.

   Tema escuro: nada aqui é hardcoded. As cores saem dos tokens, que já trocam
   sozinhos no [data-theme-mode="dark"].
   ============================================================ */

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

    /* ---- Reaponta o primary do template para a marca ----
       O YNEX (assets/css/styles.css:14098) pinta os componentes com
       `background-color: rgb(var(--primary-rgb)) !important`. Contra !important
       a especificidade não resolve — só outro !important, e aí seria uma
       corrida de !important em cada componente do template.
       Redefinir a própria variável no escopo da página é mais barato e mais
       completo: tudo que o YNEX deriva de --primary-rgb (botão, link, aba
       ativa, check, progress) vira teal sozinho, inclusive o que este arquivo
       não enumera. Fora do .mc-page o template segue com o primary original. */
    --primary-rgb: var(--mc-brand-rgb);

    /* Mesma ideia para as superfícies. O YNEX pinta card/dropdown/input com
       `background-color: var(--custom-white)` (201 usos em styles.css) e troca
       essa variável no tema escuro. Ou seja: o card escuro não vinha de uma
       regra que dava para vencer por especificidade — vinha da variável.
       Medido antes: card em rgb(26,28,30), o cinza do YNEX, em vez do
       --mc-surface (#0f1a1f) da paleta. No tema claro os dois já valem #fff,
       então isto só muda o escuro. */
    --custom-white: var(--mc-surface);

    /* Bordas utilitárias Bootstrap (.border, .border-top…) usam
       --bs-border-color: #dee2e6 hardcoded — invisível/errada no escuro. */
    --bs-border-color: var(--mc-border);
}

/* Utilitários Bootstrap de cor FIXA (bg-white/bg-light/text-dark/text-black):
   hardcoded por definição, quebram o tema escuro em qualquer lista que os use.
   Dentro das páginas migradas passam pelos tokens (!important porque os
   utilitários originais também são !important). */
.mc-page .bg-white { background-color: var(--mc-surface) !important; }
.mc-page .bg-light { background-color: var(--mc-surface-2) !important; }
.mc-page .text-dark, .mc-page .text-black { color: var(--mc-text) !important; }

/* ============================================================
   Tipografia e cabeçalho
   ============================================================ */
.mc-page h1, .mc-page h2, .mc-page h3,
.mc-page h4, .mc-page h5, .mc-page h6 {
    font-family: var(--mc-font-sans);
    color: var(--mc-text);
    font-weight: var(--mc-fw-bold);
    letter-spacing: -.4px;
}
.mc-page .text-muted { color: var(--mc-text-2) !important; }

/* Cabeçalho de página do YNEX.
   margin-block com !important: o markup das telas usa utilitários Bootstrap
   (my-4 etc.), que são !important e venciam esta regra — medido em
   /farmacia/medicamentos: 22.5px acima E abaixo do título, 45px verticais
   perdidos numa tela de 728px de altura útil. O título não precisa de
   respiro acima (o container já tem padding-top). */
.mc-page .page-header,
.mc-page .page-header-breadcrumb {
    background: transparent;
    border: 0;
    padding: 0;
    margin-block: 0 12px !important;
}
.mc-page .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: .78rem;
}
.mc-page .breadcrumb a { color: var(--mc-text-2); text-decoration: none; }
.mc-page .breadcrumb a:hover { color: var(--mc-brand); }
.mc-page .breadcrumb .active { color: var(--mc-text-3); }

/* ============================================================
   Cards — a unidade visual dominante (1181 usos nas telas alvo)
   ============================================================ */
.mc-page .card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-sm);
    transition: border-color var(--mc-dur-fast) var(--mc-ease),
                box-shadow var(--mc-dur-fast) var(--mc-ease);
}
.mc-page .card:hover { border-color: var(--mc-border-2); }


.mc-page .card-header {
    background: transparent;
    border-bottom: 1px solid var(--mc-border);
    padding: 15px 18px;
    border-radius: var(--mc-radius-lg) var(--mc-radius-lg) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.mc-page .card-title {
    font-size: .95rem;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text);
    margin: 0;
    letter-spacing: -.2px;
}
.mc-page .card-body { padding: 18px; }
.mc-page .card-footer {
    background: var(--mc-surface-2);
    border-top: 1px solid var(--mc-border);
    padding: 13px 18px;
    border-radius: 0 0 var(--mc-radius-lg) var(--mc-radius-lg);
}

/* ============================================================
   Tabelas
   ============================================================ */
.mc-page .table {
    --bs-table-bg: transparent;
    color: var(--mc-text);
    margin-bottom: 0;
    border-color: var(--mc-border);

    /* Zebrado/hover do Bootstrap são PRETO hardcoded (rgba(0,0,0,.05/.075)) —
       sobre tema claro passa despercebido, sobre o escuro vira linha quase
       preta (medido em /farmacia/medicamentos dark, foto do usuário 17/07).
       Reapontar as variáveis para os tokens conserta TODA lista zebrada
       migrada de uma vez, nos dois temas. */
    --bs-table-striped-bg: var(--mc-surface-2);
    --bs-table-striped-color: var(--mc-text);
    --bs-table-hover-bg: var(--mc-surface-2);
    --bs-table-hover-color: var(--mc-text);
}
/* Não basta a variável no nível da tabela: o YNEX-dark (styles.css:260) força
   --bs-table-bg-type DIRETO na célula (rgba branca) e o custom-tables pinta o
   TR com !important — somadas, davam a listra quase preta da foto (17/07).
   Vencemos no mesmo nível (célula), nos dois temas. */
.mc-page .table-striped > tbody > tr:nth-of-type(odd) > *,
[data-theme-mode=dark] .mc-page .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: var(--mc-surface-2);
    --bs-table-color-type: var(--mc-text);
}
/* Padding 10px (era 0.75rem=11.25): numa listagem de 12 colunas são ~30px a
   menos na largura NATURAL da tabela e células mais baixas — parte do que
   decide entre caber ou cortar em 1366 (medido: a tabela de
   /farmacia/medicamentos pedia 1403px de largura natural).
   !important porque custom-tables.css (customização global do template)
   força `padding: 0.75rem !important` em todo th/td — sem isto a regra
   daqui perde mesmo com especificidade maior. */
.mc-page .table > thead > tr > th {
    background: var(--mc-surface-2);
    color: var(--mc-text-2);
    font-size: .7rem;
    font-weight: var(--mc-fw-semibold);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--mc-border);
    padding: 10px !important;
    white-space: nowrap;
}
.mc-page .table > tbody > tr > td {
    padding: 10px !important;
    border-bottom: 1px solid var(--mc-border);
    vertical-align: middle;
    font-size: .84rem;
    color: var(--mc-text);
}
.mc-page .table > tbody > tr:last-child > td { border-bottom: 0; }
.mc-page .table-hover > tbody > tr:hover > td {
    background: var(--mc-surface-2);
    --bs-table-accent-bg: transparent;
}
.mc-page .table-responsive {
    border-radius: var(--mc-radius-md);
    overflow-x: auto;
}
/* Números tabulares alinham a coluna — dinheiro, quantidade, código */
.mc-page .table .text-end,
.mc-page .table .mc-num {
    font-variant-numeric: tabular-nums;
    font-family: var(--mc-font-mono);
    font-size: .8rem;
}

/* ============================================================
   Botões
   ============================================================ */
.mc-page .btn {
    font-family: var(--mc-font-sans);
    font-weight: var(--mc-fw-semibold);
    border-radius: var(--mc-radius-sm);
    font-size: .82rem;
    padding: 8px 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color var(--mc-dur-fast) var(--mc-ease),
                border-color var(--mc-dur-fast) var(--mc-ease),
                color var(--mc-dur-fast) var(--mc-ease);
}
.mc-page .btn-sm { padding: 6px 11px; font-size: .76rem; border-radius: 7px; }
.mc-page .btn-lg { padding: 11px 20px; font-size: .9rem; border-radius: var(--mc-radius-md); }

/* O fundo do .btn-primary NÃO é definido aqui: o YNEX já o pinta com
   rgb(var(--primary-rgb)) !important, e a variável agora aponta para a marca.
   Só o hover precisa de regra própria — o do template escurece o roxo original
   por conta dele, e o resultado não é o --mc-brand-2. */
.mc-page .btn-primary:hover,
.mc-page .btn-primary:focus,
.mc-page .btn-primary:active {
    background-color: var(--mc-brand-2) !important;
    border-color: var(--mc-brand-2) !important;
    color: var(--mc-brand-ink) !important;
}
.mc-page .btn-outline-primary {
    border-color: var(--mc-border-2);
    color: var(--mc-brand);
    background: var(--mc-surface);
}
.mc-page .btn-outline-primary:hover,
.mc-page .btn-outline-primary:active {
    background: var(--mc-brand) !important;
    border-color: var(--mc-brand) !important;
    color: var(--mc-brand-ink) !important;
}
.mc-page .btn-secondary,
.mc-page .btn-light {
    background: var(--mc-surface);
    border-color: var(--mc-border);
    color: var(--mc-text);
}
.mc-page .btn-secondary:hover,
.mc-page .btn-light:hover {
    background: var(--mc-surface-2) !important;
    border-color: var(--mc-brand) !important;
    color: var(--mc-brand) !important;
}
.mc-page .btn-success { background: var(--mc-success); border-color: var(--mc-success); color: #fff; }
.mc-page .btn-danger  { background: var(--mc-danger);  border-color: var(--mc-danger);  color: #fff; }
.mc-page .btn-warning { background: var(--mc-warning); border-color: var(--mc-warning); color: #fff; }
.mc-page .btn-info    { background: var(--mc-info);    border-color: var(--mc-info);    color: #fff; }
.mc-page .btn-success:hover, .mc-page .btn-danger:hover,
.mc-page .btn-warning:hover, .mc-page .btn-info:hover { filter: brightness(.93); color: #fff; }
.mc-page .btn:disabled, .mc-page .btn.disabled { opacity: .55; }

/* ============================================================
   Formulários
   ============================================================ */
.mc-page .form-label {
    font-size: .74rem;
    font-weight: var(--mc-fw-semibold);
    color: var(--mc-text-2);
    margin-bottom: 5px;
    letter-spacing: .1px;
}
.mc-page .form-control,
.mc-page .form-select {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border-2);
    border-radius: var(--mc-radius-sm);
    color: var(--mc-text);
    font-size: .84rem;
    padding: 8px 12px;
    font-family: var(--mc-font-sans);
    transition: border-color var(--mc-dur-fast) var(--mc-ease),
                box-shadow var(--mc-dur-fast) var(--mc-ease);
}
.mc-page .form-control:focus,
.mc-page .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);
    color: var(--mc-text);
}
.mc-page .form-control::placeholder { color: var(--mc-text-3); }
.mc-page .form-control:disabled,
.mc-page .form-select:disabled { background: var(--mc-surface-3); color: var(--mc-text-3); }
.mc-page .form-control-sm, .mc-page .form-select-sm { padding: 6px 10px; font-size: .78rem; }
.mc-page .input-group-text {
    background: var(--mc-surface-2);
    border: 1px solid var(--mc-border-2);
    color: var(--mc-text-2);
    font-size: .8rem;
    border-radius: var(--mc-radius-sm);
}
.mc-page .form-check-input:checked {
    background-color: var(--mc-brand);
    border-color: var(--mc-brand);
}
.mc-page .form-check-input:focus {
    border-color: var(--mc-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-brand) 18%, transparent);
}
.mc-page .form-check-label { font-size: .84rem; color: var(--mc-text); }

/* ============================================================
   Badges — 907 usos. As cores YNEX (bg-*) viram os tons da paleta.
   ============================================================ */
.mc-page .badge {
    font-weight: var(--mc-fw-semibold);
    font-size: .68rem;
    padding: 4px 9px;
    border-radius: var(--mc-radius-pill);
    letter-spacing: .2px;
}
.mc-page .badge.bg-primary   { background: var(--mc-brand-soft) !important;   color: var(--mc-brand) !important; }
.mc-page .badge.bg-success   { background: var(--mc-success-soft) !important; color: var(--mc-success) !important; }
.mc-page .badge.bg-warning   { background: var(--mc-warning-soft) !important; color: var(--mc-warning) !important; }
.mc-page .badge.bg-danger    { background: var(--mc-danger-soft) !important;  color: var(--mc-danger) !important; }
.mc-page .badge.bg-info      { background: var(--mc-info-soft) !important;    color: var(--mc-info) !important; }
.mc-page .badge.bg-secondary { background: var(--mc-surface-3) !important;    color: var(--mc-text-2) !important; }
.mc-page .badge.bg-light     { background: var(--mc-surface-3) !important;    color: var(--mc-text-2) !important; }
.mc-page .badge.bg-dark      { background: var(--mc-text) !important;         color: var(--mc-surface) !important; }

/* ============================================================
   Alertas
   ============================================================ */
.mc-page .alert {
    border: 1px solid transparent;
    border-radius: var(--mc-radius-md);
    font-size: .84rem;
    padding: 12px 15px;
}
.mc-page .alert-primary { background: var(--mc-brand-soft);   color: var(--mc-brand-2); border-color: var(--mc-brand); }
.mc-page .alert-success { background: var(--mc-success-soft); color: var(--mc-success); border-color: var(--mc-success); }
.mc-page .alert-warning { background: var(--mc-warning-soft); color: var(--mc-warning); border-color: var(--mc-warning); }
.mc-page .alert-danger  { background: var(--mc-danger-soft);  color: var(--mc-danger);  border-color: var(--mc-danger); }
.mc-page .alert-info    { background: var(--mc-info-soft);    color: var(--mc-info);    border-color: var(--mc-info); }

/* ============================================================
   Abas e paginação
   ============================================================ */
.mc-page .nav-tabs {
    border-bottom: 1px solid var(--mc-border);
    gap: 4px;
}
.mc-page .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--mc-text-2);
    font-weight: var(--mc-fw-semibold);
    font-size: .84rem;
    padding: 9px 14px;
    border-radius: 0;
}
.mc-page .nav-tabs .nav-link:hover { color: var(--mc-brand); border-bottom-color: var(--mc-border-2); }
.mc-page .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--mc-brand);
    border-bottom-color: var(--mc-brand);
}
.mc-page .nav-pills .nav-link.active { background: var(--mc-brand); color: var(--mc-brand-ink); }
.mc-page .page-link { color: var(--mc-text-2); border-color: var(--mc-border); font-size: .8rem; }
.mc-page .page-item.active .page-link { background: var(--mc-brand); border-color: var(--mc-brand); color: var(--mc-brand-ink); }

/* Dropdowns */
.mc-page .dropdown-menu {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow);
    font-size: .84rem;
}
.mc-page .dropdown-item { color: var(--mc-text); }
.mc-page .dropdown-item:hover { background: var(--mc-surface-2); color: var(--mc-brand); }

/* Listas */
.mc-page .list-group-item {
    background: var(--mc-surface);
    border-color: var(--mc-border);
    color: var(--mc-text);
    font-size: .84rem;
}

/* ============================================================
   Escala proporcional
   A classe .mc-scaled (de medcare-tokens.css) faz o zoom; aqui só o que a
   escala precisa em volta. REF do mc-scale.js é 1600px: a tela é desenhada
   para 1600 de área útil e o zoom mantém ESSA composição em qualquer
   resolução — encolhe até 0.80 abaixo de 1600, cresce até 1.30 acima.
   Por isso NÃO há breakpoints de largura aqui — o ponto do zoom é
   justamente não reorganizar o layout entre resoluções.
   ============================================================ */
/* Espaço lateral (correção 17/07, pedido do usuário — foto de Miracema):
   o layout horizontal do YNEX dá `width: 94%` ao container (3% de margem de
   cada lado; ~41px por lado em 1366) e ainda cortava a coluna Ações.
   Nas páginas refatoradas o container vai a 100% e o padding lateral do
   .mc-page cai de 12px para 6px — sobra ~20% do espaço lateral original
   (59px/lado → ~12px/lado em 1366). Vale para TODAS as identidades novas. */
@media (min-width: 992px) {
    [data-nav-layout=horizontal] .app-content > .container-fluid:is(.mc-page, .cp-page, .dh-page, .amb-page, .int-page, .itn-page, .fmun-page) {
        width: 100%;
    }
}

.mc-page {
    /* Sem o zoom o container ainda respira igual nas duas pontas.
       Padding enxuto: em 1366 cada px lateral é área útil de tabela
       (medido: 90px somados de molduras deixavam 1051px para uma
       tabela de 1403px em /farmacia/medicamentos). */
    width: 100%;
    padding: 10px 6px 24px;

    /* Piso da escala (lido por mc-scale.js).
       Já foi 1 (nunca encolher), na premissa de que telas Bootstrap fluidas
       "cabem sozinhas em 1366". Medido que a premissa é FALSA para listagem
       larga: /farmacia/medicamentos em 1366 (sidebar vertical, 1141px úteis)
       cortava 352px de tabela em scroll e mostrava 5 linhas — o desenho de
       1600 simplesmente não cabe em escala 1.
       Com 0.75 a composição inteira encolhe junto (mesma promessa do zoom
       nas duas direções) e o desenho de 1600 cabe por inteiro em qualquer
       área útil ≥ ~1150px — cobre 1366 nas DUAS variantes de menu (medido:
       horizontal ~1348 úteis → escala 0.84; sidebar vertical 1141 → clampa
       no piso e a tabela de 1373px cabe com ~66px de folga). O que ainda
       assim não couber rola dentro do .table-responsive.
       O piso é limite de legibilidade: célula .84rem = 12.6px vai a ~9.5px
       físicos no piso — denso, mas legível; o antigo piso genérico de 0.62
       dava 6px, ilegível. Não descer de 0.75. */
    --mc-scale-min: .75;
}

/* Grid utilitário para quem já é markup novo (hubs) */
.mc-page .mc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

/* ============================================================
   Modais: FORA do escopo (decisão do usuário).
   Nas 7 telas em que o modal é descendente do container, tudo acima seria
   herdado por ele. Aqui a herança é cortada: o modal volta ao YNEX puro.
   `all: revert` desfaz as declarações desta folha sem precisar espelhar
   cada regra — o que entrar no arquivo depois já nasce coberto.
   O zoom do .mc-scaled é tratado no markup (modal movido para fora do
   container), porque zoom em ancestral desloca position:fixed e nenhuma
   regra dentro do modal desfaz isso.
   ============================================================ */
.mc-page .modal .card,
.mc-page .modal .card-header,
.mc-page .modal .card-body,
.mc-page .modal .card-footer,
.mc-page .modal .card-title,
.mc-page .modal .table,
.mc-page .modal .table > thead > tr > th,
.mc-page .modal .table > tbody > tr > td,
.mc-page .modal .btn,
.mc-page .modal .form-control,
.mc-page .modal .form-select,
.mc-page .modal .form-label,
.mc-page .modal .badge,
.mc-page .modal .alert,
.mc-page .modal .nav-tabs,
.mc-page .modal .nav-tabs .nav-link,
.mc-page .modal .dropdown-menu,
.mc-page .modal .list-group-item {
    all: revert;
}

/* ============================================================
   Impressão: a identidade é de tela. No papel, tinta mínima.
   ============================================================ */
@media print {
    .mc-page { zoom: 1 !important; padding: 0; }
    .mc-page .card { box-shadow: none; border-color: #ccc; }
}