/* ============================================================
   MedCare — Painéis clínicos (Central de Triagens + Painel de Consultas)
   Implementação dos designs importados do Claude Design:
   "Central de Triagens.dc.html" e "Consultas.dc.html" (jul/2026).

   Escopo: tudo prefixado por .cp-page (clinical panel), EXCETO os chips de
   sinais vitais (.sv-badge), que são globais de propósito — o mesmo badge é
   usado em toda tela que exiba sinais vitais, dentro ou fora do cp-page.

   Escala: o container declara .mc-scaled no markup (zoom via --mc-scale, ver
   medcare-tokens.css) e o piso 0.75 vem daqui — MESMA regra do mc-page: uma
   única composição desenhada a 1600px, sem breakpoints de largura.

   Tema escuro: pendurado no [data-theme-mode="dark"] do YNEX, com os tokens
   claro/escuro vindos direto do design.
   ============================================================ */

.cp-page {
    /* superfícies e texto */
    --app-canvas: #eef1f7;
    --app-surface: #ffffff;
    --app-surface-2: #f8fafc;
    --app-border: #e4e9f2;
    --app-border-soft: #eef2f7;
    --app-text: #334155;
    --app-text-strong: #0b1f3a;
    --app-text-muted: #64748b;
    --app-text-faint: #94a3b8;
    --app-header: #ffffff;
    --app-row-hover: #f4f8ff;
    --app-zebra: #f9fbfe;
    --app-shadow: 0 1px 2px rgba(16,33,64,.04), 0 16px 36px -18px rgba(16,33,64,.16);
    --app-shadow-sm: 0 1px 2px rgba(16,33,64,.06);
    --app-input-bg: #ffffff;
    --app-input-border: #dde5f0;
    /* tons (badges suaves) */
    --t-red-bg: #fef2f2;     --t-red-fg: #dc2626;
    --t-orange-bg: #fff7ed;  --t-orange-fg: #ea580c;
    --t-amber-bg: #fef3c7;   --t-amber-fg: #b45309;
    --t-green-bg: #ecfdf5;   --t-green-fg: #059669;
    --t-blue-bg: #eff6ff;    --t-blue-fg: #2563eb;
    --t-teal-bg: #ecfeff;    --t-teal-fg: #0891b2;
    --t-indigo-bg: #eef2ff;  --t-indigo-fg: #4f46e5;
    --t-purple-bg: #f5f3ff;  --t-purple-fg: #7c3aed;
    --t-pink-bg: #fdf2f8;    --t-pink-fg: #db2777;
    --t-slate-bg: #f1f5f9;   --t-slate-fg: #475569;
    /* botões sólidos */
    --btn-teal: #0891b2; --btn-green: #059669; --btn-amber: #d97706;
    --btn-red: #dc2626;  --btn-blue: #2563eb;  --btn-slate: #334155;
    /* pills de status (fundo sólido) */
    --st-await: #d97706; --st-done: #059669; --st-live: #0891b2; --st-undef: #1e293b;
    --kpi-num: #0b1f3a;
    /* prio box sólido (design Consultas) */
    --pr-red: #dc2626; --pr-orange: #ea580c; --pr-amber: #b45309;
    --pr-green: #16a34a; --pr-blue: #2563eb; --pr-slate: #475569;

    font-family: var(--mc-font-sans);
    color: var(--app-text);
    padding-top: 14px;
    padding-bottom: 20px;
    --mc-scale-min: .75;
}

/* Tema escuro alinhado ao padrão do sistema (medcare-tokens.css): teal-escuro
   (#070e11/#0f1a1f), NÃO navy — "cor_ideal" validada pelo usuário em 18/07/2026.
   Superfícies/texto derivam dos tokens mc; os tons de acento (t-, btn, st, pr) ficam. */
[data-theme-mode="dark"] .cp-page {
    --app-canvas: var(--mc-bg);
    --app-surface: var(--mc-surface);
    --app-surface-2: var(--mc-surface-2);
    --app-border: var(--mc-border);
    --app-border-soft: var(--mc-surface-3);
    --app-text: #c9d6da;
    --app-text-strong: var(--mc-text);
    --app-text-muted: var(--mc-text-2);
    --app-text-faint: var(--mc-text-3);
    --app-header: var(--mc-surface);
    --app-row-hover: var(--mc-surface-3);
    --app-zebra: #111d23;
    --app-shadow: 0 1px 2px rgba(0,0,0,.3), 0 20px 44px -20px rgba(0,0,0,.65);
    --app-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --app-input-bg: var(--mc-surface-2);
    --app-input-border: var(--mc-border-2);
    --t-red-bg: rgba(220,38,38,.17);   --t-red-fg: #fca5a5;
    --t-orange-bg: rgba(234,88,12,.18);--t-orange-fg: #fdba74;
    --t-amber-bg: rgba(217,119,6,.2);  --t-amber-fg: #fcd34d;
    --t-green-bg: rgba(5,150,105,.18); --t-green-fg: #6ee7b7;
    --t-blue-bg: rgba(37,99,235,.2);   --t-blue-fg: #93c5fd;
    --t-teal-bg: rgba(8,145,178,.2);   --t-teal-fg: #67e8f9;
    --t-indigo-bg: rgba(79,70,229,.22);--t-indigo-fg: #a5b4fc;
    --t-purple-bg: rgba(124,58,237,.2);--t-purple-fg: #c4b5fd;
    --t-pink-bg: rgba(219,39,119,.2);  --t-pink-fg: #f9a8d4;
    --t-slate-bg: rgba(148,163,184,.16);--t-slate-fg: #cbd5e1;
    --btn-teal: #0e7490; --btn-green: #047857; --btn-amber: #b45309;
    --btn-red: #b91c1c;  --btn-blue: #1d4ed8;  --btn-slate: #475569;
    --st-await: #b45309; --st-done: #047857; --st-live: #0e7490; --st-undef: #334155;
    --kpi-num: #f1f5f9;
}

@keyframes cpPulse { 0% { box-shadow: 0 0 0 0 rgba(5,150,105,.45); } 70% { box-shadow: 0 0 0 7px rgba(5,150,105,0); } 100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); } }
@keyframes cpPulseBlue { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,.55); } 70% { box-shadow: 0 0 0 9px rgba(37,99,235,0); } 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } }

/* Tons genéricos: componentes (.cp-ico, .cp-badge-soft, .cp-prio, .cp-dot,
   .cp-act-ico, .cp-empty-ico) consomem --tn-bg/--tn-fg. */
.cp-page .tn-red    { --tn-bg: var(--t-red-bg);    --tn-fg: var(--t-red-fg); }
.cp-page .tn-orange { --tn-bg: var(--t-orange-bg); --tn-fg: var(--t-orange-fg); }
.cp-page .tn-amber  { --tn-bg: var(--t-amber-bg);  --tn-fg: var(--t-amber-fg); }
.cp-page .tn-green  { --tn-bg: var(--t-green-bg);  --tn-fg: var(--t-green-fg); }
.cp-page .tn-blue   { --tn-bg: var(--t-blue-bg);   --tn-fg: var(--t-blue-fg); }
.cp-page .tn-teal   { --tn-bg: var(--t-teal-bg);   --tn-fg: var(--t-teal-fg); }
.cp-page .tn-indigo { --tn-bg: var(--t-indigo-bg); --tn-fg: var(--t-indigo-fg); }
.cp-page .tn-purple { --tn-bg: var(--t-purple-bg); --tn-fg: var(--t-purple-fg); }
.cp-page .tn-pink   { --tn-bg: var(--t-pink-bg);   --tn-fg: var(--t-pink-fg); }
.cp-page .tn-slate  { --tn-bg: var(--t-slate-bg);  --tn-fg: var(--t-slate-fg); }

/* ============================================================
   Cabeçalho da página
   ============================================================ */
.cp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: clamp(16px, 1.8vw, 24px);
}
.cp-title {
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    font-weight: 800;
    color: var(--app-text-strong);
    letter-spacing: -.6px;
    margin: 0;
}
.cp-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-sub { margin: 5px 0 0; color: var(--app-text-muted); font-size: .9rem; }
.cp-sub strong { color: var(--app-text-strong); }
.cp-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 50px;
    background: var(--t-green-bg);
    color: var(--t-green-fg);
    font-size: .68rem;
    font-weight: 700;
}
.cp-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--t-green-fg);
    animation: cpPulse 2s infinite;
}
.cp-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-back {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
}
.cp-back:hover { border-color: var(--t-blue-fg); color: var(--t-blue-fg); }

/* Botão primário (gradiente da marca) e botão ghost */
.cp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 17px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--mc-blue), var(--mc-blue-light));
    color: #fff;
    font: 700 .82rem var(--mc-font-sans);
    cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(13,136,140,.7);
    transition: transform .15s;
}
.cp-btn-primary:hover:not(:disabled) { transform: translateY(-2px); color: #fff; }
.cp-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.cp-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: var(--app-surface);
    color: var(--app-text);
    font: 700 .82rem var(--mc-font-sans);
    cursor: pointer;
}
.cp-btn-ghost:hover { border-color: var(--t-blue-fg); color: var(--t-blue-fg); }
.cp-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid var(--t-blue-fg);
    border-radius: 10px;
    background: transparent;
    color: var(--t-blue-fg);
    font: 700 .82rem var(--mc-font-sans);
    cursor: pointer;
}
.cp-btn-outline:hover { background: var(--t-blue-bg); color: var(--t-blue-fg); }

/* ============================================================
   KPIs
   ============================================================ */
.cp-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: clamp(10px, 1.1vw, 16px);
    margin-bottom: clamp(16px, 1.8vw, 22px);
}
.cp-kpi {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: var(--app-shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.cp-kpi-label { font-size: .74rem; font-weight: 600; color: var(--app-text-muted); }
.cp-kpi-num {
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--kpi-num);
    line-height: 1.05;
    margin-top: 6px;
    letter-spacing: -1px;
}
.cp-kpi-num.sm { font-size: 1.55rem; margin-top: 9px; letter-spacing: -.5px; }
.cp-kpi-num.f-red   { color: var(--t-red-fg); }
.cp-kpi-num.f-orange{ color: var(--t-orange-fg); }
.cp-kpi-num.f-amber { color: var(--t-amber-fg); }
.cp-kpi-num.f-green { color: var(--t-green-fg); }
.cp-kpi-num.f-teal  { color: var(--t-teal-fg); }
.cp-kpi-num.f-indigo{ color: var(--t-indigo-fg); }
.cp-kpi-sub { font-size: .7rem; color: var(--app-text-faint); margin-top: 3px; }
.cp-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--tn-bg, var(--t-blue-bg));
    color: var(--tn-fg, var(--t-blue-fg));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ============================================================
   Abas (pill tabs)
   ============================================================ */
.cp-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 16px;
}
.cp-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    background: transparent;
    color: var(--app-text-muted);
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s, box-shadow .2s;
}
.cp-tab:hover { background: var(--app-surface-2); color: var(--app-text-strong); }
.cp-tab.active {
    border-color: transparent;
    background: var(--app-surface);
    color: var(--app-text-strong);
    box-shadow: var(--app-shadow-sm);
}
.cp-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 19px;
    padding: 0 6px;
    border-radius: 50px;
    font-size: .68rem;
    font-weight: 800;
    background: var(--app-border-soft);
    color: var(--app-text-muted);
}
.cp-tab.active .cp-tab-count { background: var(--t-blue-bg); color: var(--t-blue-fg); }

/* ============================================================
   Painel de filtros
   ============================================================ */
.cp-filter {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    padding: clamp(14px, 1.4vw, 18px);
    box-shadow: var(--app-shadow-sm);
    margin-bottom: 16px;
}
.cp-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    align-items: end;
}
.cp-filter-grid.wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 14px; }
.cp-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--app-text-muted);
    margin-bottom: 6px;
    display: block;
}
.cp-page .cp-input,
.cp-page select.cp-input,
.cp-page textarea.cp-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--app-input-border);
    background: var(--app-input-bg);
    color: var(--app-text);
    font: 500 .85rem var(--mc-font-sans);
    outline: none;
    box-shadow: none;
}
.cp-page .cp-input:focus { border-color: var(--t-blue-fg); }
.cp-page .cp-input::placeholder { color: var(--app-text-faint); }
.cp-page select.cp-input { cursor: pointer; }
.cp-page textarea.cp-input { min-height: 74px; resize: vertical; line-height: 1.5; }
.cp-page .cp-input:disabled { background: var(--app-surface-2); color: var(--app-text-muted); }
[data-theme-mode="dark"] .cp-page input[type=date].cp-input::-webkit-calendar-picker-indicator { filter: invert(.85); }
[data-theme-mode="dark"] .cp-page select.cp-input option { background: var(--mc-surface); color: var(--mc-text); }
.cp-filter-row { display: flex; gap: 8px; }
.cp-filter-row .cp-input { flex: 1; min-width: 0; }
.cp-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--app-input-border);
    background: var(--app-surface-2);
    color: var(--app-text);
    font: 600 .8rem var(--mc-font-sans);
    cursor: pointer;
    white-space: nowrap;
}
.cp-mini-btn:hover { border-color: var(--t-blue-fg); color: var(--t-blue-fg); }
.cp-mini-btn.sq { width: 40px; justify-content: center; padding: 9px 0; flex-shrink: 0; font-size: 1rem; }
.cp-mini-btn.sq:hover { border-color: var(--t-red-fg); color: var(--t-red-fg); }

/* ============================================================
   Cabeçalho de seção + badges
   ============================================================ */
.cp-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-left: 2px;
}
.cp-section-left { display: flex; align-items: center; gap: 10px; }
.cp-section-left::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: var(--mc-blue-light);
}
.cp-section-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--app-text-strong);
    margin: 0;
    letter-spacing: -.3px;
}
.cp-badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    background: var(--tn-bg, var(--t-slate-bg));
    color: var(--tn-fg, var(--t-slate-fg));
}
.cp-badge-soft.upper { font-size: .63rem; letter-spacing: .7px; text-transform: uppercase; }
.cp-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 50px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    color: #fff;
    background: var(--st-undef);
}
.cp-badge-status.st-await { background: var(--st-await); }
.cp-badge-status.st-done  { background: var(--st-done); }
.cp-badge-status.st-live  { background: var(--st-live); }

/* ============================================================
   Tabela
   ============================================================ */
.cp-tablewrap {
    border: 1px solid var(--app-border);
    border-radius: 16px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    overflow: auto;
    max-height: 68vh;
    margin-bottom: 16px;
}
.cp-table { width: 100%; border-collapse: collapse; }
.cp-table th {
    padding: 11px 14px;
    text-align: left;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--app-text-muted);
    border-bottom: 1px solid var(--app-border);
    white-space: nowrap;
    background: var(--app-header);
    position: sticky;
    top: 0;
    z-index: 2;
}
.cp-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--app-border-soft);
    vertical-align: middle;
    font-size: .82rem;
    color: var(--app-text);
}
.cp-table tbody tr { transition: background .15s; }
.cp-table tbody tr:hover { background: var(--app-row-hover); }
.cp-table tbody tr:last-child td { border-bottom: none; }
/* barra de prioridade na primeira célula */
.cp-table td.acc { border-left: 3px solid var(--acc, transparent); }
.acc-red    { --acc: var(--t-red-fg); }
.acc-orange { --acc: var(--t-orange-fg); }
.acc-amber  { --acc: var(--t-amber-fg); }
.acc-green  { --acc: var(--t-green-fg); }
.acc-blue   { --acc: var(--t-blue-fg); }
.acc-slate  { --acc: var(--t-slate-fg); }

/* caixa de prioridade (número) */
.cp-prio {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .95rem;
    flex-shrink: 0;
    background: var(--tn-bg, var(--t-slate-bg));
    color: var(--tn-fg, var(--t-slate-fg));
}
/* variante sólida (painel de consultas) */
.cp-prio.solid { color: #fff; }
.cp-prio.solid.tn-red    { background: var(--pr-red); }
.cp-prio.solid.tn-orange { background: var(--pr-orange); }
.cp-prio.solid.tn-amber  { background: var(--pr-amber); }
.cp-prio.solid.tn-green  { background: var(--pr-green); }
.cp-prio.solid.tn-blue   { background: var(--pr-blue); }
.cp-prio.solid.tn-slate  { background: var(--pr-slate); }

/* célula do paciente */
.cp-patient { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
.cp-patient-name { font-weight: 700; color: var(--app-text-strong); font-size: .84rem; line-height: 1.2; }
.cp-patient-meta { display: flex; gap: 8px; font-size: .72rem; color: var(--app-text-muted); margin-top: 2px; flex-wrap: wrap; }
.cp-clamp {
    font-size: .79rem;
    color: var(--app-text);
    max-width: 280px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    white-space: normal;
}
.cp-tempo {
    color: var(--app-text-strong);
    font-weight: 700;
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.cp-tempo.t-ok   { color: var(--t-green-fg); }
.cp-tempo.t-warn { color: var(--t-amber-fg); }
.cp-tempo.t-late { color: var(--t-red-fg); }
.cp-muted-note { font-size: .72rem; color: var(--app-text-faint); font-style: italic; }
.cp-cell-sub { font-size: .7rem; color: var(--app-text-faint); margin-top: 2px; }
.cp-cell-strong { font-weight: 700; font-size: .82rem; color: var(--app-text-strong); white-space: nowrap; }

/* aviso de prioridade (estrela do atendente) */
.cp-prio-aviso {
    background: var(--t-pink-bg);
    border-left: 3px solid var(--t-pink-fg);
    border-radius: 8px;
    color: var(--t-pink-fg);
    font-size: .74rem;
    font-weight: 700;
    padding: .35rem .55rem;
    margin-top: .35rem;
    white-space: normal;
    max-width: 260px;
}
.cp-star { color: var(--t-pink-fg); font-size: 1.2rem; line-height: 1; vertical-align: middle; cursor: help; }

/* ============================================================
   Botões de ação da linha
   ============================================================ */
.cp-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.cp-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: none;
    border-radius: 9px;
    color: #fff;
    font: 600 .76rem var(--mc-font-sans);
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s;
}
.cp-act-btn:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
.cp-act-btn:disabled { opacity: .55; cursor: not-allowed; }
.cp-act-btn.b-green { background: var(--btn-green); }
.cp-act-btn.b-teal  { background: var(--btn-teal); }
.cp-act-btn.b-amber { background: var(--btn-amber); }
.cp-act-btn.b-red   { background: var(--btn-red); }
.cp-act-btn.b-blue  { background: var(--btn-blue); }
.cp-act-btn.b-slate { background: var(--btn-slate); }
.cp-act-btn.b-ghost {
    background: var(--app-surface-2);
    color: var(--app-text);
    border: 1px solid var(--app-border);
}
.cp-act-btn.b-ghost:hover { border-color: var(--t-blue-fg); color: var(--t-blue-fg); filter: none; }
.cp-act-btn.lg { padding: 10px 16px; border-radius: 10px; font-size: .82rem; font-weight: 700; }
.cp-act-ico {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--app-border);
    background: var(--tn-bg, var(--t-slate-bg));
    color: var(--tn-fg, var(--t-slate-fg));
    cursor: pointer;
    font-size: .95rem;
    flex-shrink: 0;
}
.cp-act-ico:hover { border-color: var(--tn-fg, var(--t-slate-fg)); }

/* ============================================================
   Chips de sinais vitais (GLOBAL — usado dentro e fora do cp-page)
   Paleta do design Consultas.dc.html + variantes de alerta clínico.
   ============================================================ */
.sv-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}
.sv-badge i { font-size: .82rem; }
.sv-badge small { font-weight: 600; font-size: .62rem; opacity: .75; }
.sv-pa         { background: #f5f3ff; color: #7c3aed; }
.sv-fc         { background: #fef2f2; color: #dc2626; }
.sv-fr         { background: #eef2ff; color: #4f46e5; }
.sv-temp       { background: #ecfeff; color: #0891b2; }
.sv-temp-alta  { background: #ffedd5; color: #c2410c; }
.sv-spo2       { background: #ecfdf5; color: #059669; }
.sv-spo2-baixa { background: #fee2e2; color: #b91c1c; }
.sv-hgt        { background: #fff7ed; color: #ea580c; }
.sv-dor        { background: #ecfdf5; color: #059669; }
.sv-dor-media  { background: #fef3c7; color: #b45309; }
.sv-dor-alta   { background: #fee2e2; color: #b91c1c; }
[data-theme-mode="dark"] .sv-pa         { background: rgba(124,58,237,.2);  color: #c4b5fd; }
[data-theme-mode="dark"] .sv-fc         { background: rgba(220,38,38,.17);  color: #fca5a5; }
[data-theme-mode="dark"] .sv-fr         { background: rgba(79,70,229,.22);  color: #a5b4fc; }
[data-theme-mode="dark"] .sv-temp       { background: rgba(8,145,178,.2);   color: #67e8f9; }
[data-theme-mode="dark"] .sv-temp-alta  { background: rgba(234,88,12,.25);  color: #fdba74; }
[data-theme-mode="dark"] .sv-spo2       { background: rgba(5,150,105,.18);  color: #6ee7b7; }
[data-theme-mode="dark"] .sv-spo2-baixa { background: rgba(220,38,38,.25);  color: #fca5a5; }
[data-theme-mode="dark"] .sv-hgt        { background: rgba(234,88,12,.18);  color: #fdba74; }
[data-theme-mode="dark"] .sv-dor        { background: rgba(5,150,105,.18);  color: #6ee7b7; }
[data-theme-mode="dark"] .sv-dor-media  { background: rgba(217,119,6,.2);   color: #fcd34d; }
[data-theme-mode="dark"] .sv-dor-alta   { background: rgba(220,38,38,.25);  color: #fca5a5; }
.sv-wrap { display: flex; flex-wrap: wrap; gap: 5px; max-width: 230px; }

/* ============================================================
   Ciclo de vida (TRI → CONS → AMB → MED → ALTA)
   ============================================================ */
.cp-cycle { display: flex; align-items: flex-start; min-width: 250px; }
.cp-cycle-line {
    flex: 1 1 auto;
    min-width: 12px;
    height: 3px;
    border-radius: 2px;
    background: var(--app-border);
    margin-top: 15px;
}
.cp-cycle-line.on { background: var(--t-green-fg); }
.cp-cycle-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; width: 44px; }
.cp-cycle-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: var(--app-surface);
    color: var(--app-text-faint);
    border: 2px solid var(--app-border);
}
.cp-cycle-dot.is-done { background: var(--t-green-fg); color: #fff; border-color: var(--t-green-fg); }
.cp-cycle-dot.is-live { background: var(--mc-blue-light); color: #fff; border-color: var(--mc-blue-light); animation: cpPulseBlue 1.8s infinite; }
.cp-cycle-dot.is-wait { background: var(--t-amber-bg); color: var(--t-amber-fg); border-color: var(--t-amber-fg); }
.cp-cycle-lbl { font-size: .58rem; font-weight: 700; letter-spacing: .2px; color: var(--app-text-faint); }
.cp-cycle-lbl.is-done { color: var(--app-text-muted); }
.cp-cycle-lbl.is-live { color: var(--t-blue-fg); }

/* ============================================================
   Estado vazio / sem resultado / carregar mais
   ============================================================ */
.cp-empty {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: var(--app-shadow);
    padding: 56px 24px;
    text-align: center;
    margin-bottom: 16px;
}
.cp-empty-ico {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin: 0 auto;
    background: var(--tn-bg, var(--t-slate-bg));
    color: var(--tn-fg, var(--t-slate-fg));
}
.cp-empty h4 { font-size: 1.2rem; font-weight: 800; color: var(--app-text-strong); margin: 14px 0 6px; }
.cp-empty p { color: var(--app-text-muted); font-size: .9rem; margin: 0 0 20px; }
.cp-loadmore { text-align: center; margin: 0 0 16px; }
.cp-loadmore .lbl { font-size: .78rem; color: var(--app-text-muted); margin-bottom: 10px; }
.cp-loadmore button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border: 1px solid var(--app-border);
    border-radius: 11px;
    background: var(--app-surface);
    color: var(--app-text);
    font: 700 .82rem var(--mc-font-sans);
    cursor: pointer;
}
.cp-loadmore button:hover { border-color: var(--t-blue-fg); color: var(--t-blue-fg); }

/* spinner de carregamento da página */
.cp-loading { text-align: center; padding: 64px 0; color: var(--app-text-muted); }

/* ============================================================
   Cards genéricos (form view / detail view)
   ============================================================ */
.cp-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: var(--app-shadow);
    padding: clamp(14px, 1.5vw, 20px);
    margin-bottom: 16px;
}
.cp-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 800;
    color: var(--app-text-strong);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--app-border-soft);
}
.cp-form-sec {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 800;
    color: var(--app-text-strong);
    margin: 22px 0 12px;
}
.cp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cp-form-grid.md { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cp-form-grid.sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cp-field label { font-size: .76rem; font-weight: 600; color: var(--app-text); margin-bottom: 6px; display: block; }
.cp-field .req { color: var(--t-red-fg); }
.cp-field .hint { font-size: .68rem; color: var(--app-text-faint); margin-top: 4px; }
.cp-vitals-box {
    border: 1px solid var(--app-border);
    border-radius: 12px;
    padding: 14px;
    background: var(--app-surface-2);
}
.cp-detail-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cp-detail-col1 { flex: 1 1 280px; display: flex; flex-direction: column; min-width: 0; }
.cp-detail-col2 { flex: 2 1 420px; display: flex; flex-direction: column; min-width: 0; }
.cp-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.cp-info-lbl { font-size: .7rem; color: var(--app-text-muted); margin-bottom: 3px; }
.cp-info-val { font-size: .85rem; color: var(--app-text-strong); font-weight: 600; }

/* rodapé de formulário (barra de botões) */
.cp-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--app-border-soft);
}
.cp-form-footer .note { font-size: .72rem; color: var(--app-text-faint); }

/* ============================================================
   Skin YNEX → design (telas de formulário: Triagem/Novo, Consulta)
   Mesma técnica do mc-page: reskin por herança do markup existente,
   sem reescrever formulários longos. Tudo escopado em .cp-page.
   ============================================================ */
.cp-page {
    /* O YNEX deriva botão/link/aba de --primary-rgb e as superfícies de
       --custom-white (ver mc-page.css para a justificativa completa). */
    --primary-rgb: var(--mc-brand-rgb);
    --custom-white: var(--app-surface);
}
.cp-page .card,
.cp-page .custom-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    box-shadow: var(--app-shadow-sm);
}
.cp-page .card-header {
    background: transparent;
    border-bottom: 1px solid var(--app-border-soft);
    padding: 14px 18px;
}
.cp-page .card-title { font-size: 1rem; font-weight: 800; color: var(--app-text-strong); }
.cp-page .card .card-body { padding: 18px; }
.cp-page h1, .cp-page h2, .cp-page h3, .cp-page h4, .cp-page h5, .cp-page h6 {
    font-family: var(--mc-font-sans);
    color: var(--app-text-strong);
}
.cp-page .text-muted { color: var(--app-text-muted) !important; }
.cp-page .form-label { font-size: .76rem; font-weight: 600; color: var(--app-text); margin-bottom: 6px; }
.cp-page .form-control,
.cp-page .form-select {
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--app-input-border);
    background: var(--app-input-bg);
    color: var(--app-text);
    font: 500 .85rem var(--mc-font-sans);
    box-shadow: none;
}
.cp-page .form-control:focus,
.cp-page .form-select:focus { border-color: var(--t-blue-fg); box-shadow: none; }
.cp-page .form-control::placeholder { color: var(--app-text-faint); }
.cp-page .form-control:disabled,
.cp-page .form-select:disabled { background: var(--app-surface-2); color: var(--app-text-muted); }
.cp-page .input-group-text {
    border-radius: 10px;
    border: 1px solid var(--app-input-border);
    background: var(--app-surface-2);
    color: var(--app-text-muted);
    font: 700 .72rem var(--mc-font-sans);
}
.cp-page .btn { border-radius: 10px; font-family: var(--mc-font-sans); font-weight: 600; }
.cp-page .alert { border-radius: 12px; font-family: var(--mc-font-sans); }
.cp-page .breadcrumb { font-size: .78rem; margin: 0; background: transparent; padding: 0; }
.cp-page .page-header-breadcrumb { margin-block: 0 12px !important; }

/* Tabelas YNEX herdadas (ex.: lista de /pacientes) — visual do design sem
   reescrever o markup. !important no padding porque custom-tables.css global
   força `padding: 0.75rem !important` (mesmo caso do mc-page). */
.cp-page .table {
    --bs-table-bg: transparent;
    color: var(--app-text);
    margin-bottom: 0;
    border-color: var(--app-border);
}
.cp-page .table > thead > tr > th {
    background: var(--app-header);
    color: var(--app-text-muted);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--app-border);
    padding: 11px 14px !important;
    white-space: nowrap;
}
.cp-page .table > tbody > tr > td {
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--app-border-soft);
    vertical-align: middle;
    font-size: .82rem;
    color: var(--app-text);
}
.cp-page .table > tbody > tr:last-child > td { border-bottom: 0; }
.cp-page .table > tbody > tr:hover > td {
    background: var(--app-row-hover);
    --bs-table-accent-bg: transparent;
}
.cp-page .table-responsive { border-radius: 12px; overflow-x: auto; }
.cp-page .pagination .page-link {
    border-radius: 9px;
    margin: 0 2px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    font: 600 .8rem var(--mc-font-sans);
}
.cp-page .pagination .page-item.active .page-link {
    background: var(--btn-blue);
    border-color: var(--btn-blue);
    color: #fff;
}

/* ============================================================
   Formulário 4-etapas da consulta (design Consultas.dc.html — form view)
   Reveste as abas Bootstrap existentes (data-bs-toggle continua o mesmo).
   ============================================================ */
.cp-page .cp-step-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border: 0 !important;
    padding-bottom: 4px;
}
.cp-page .cp-step-tabs .nav-item { flex: 0 0 auto; }
.cp-page .cp-step-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px !important;
    border-radius: 12px !important;
    border: 1px solid var(--app-border) !important;
    background: transparent;
    color: var(--app-text-muted);
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
}
.cp-page .cp-step-tabs .nav-link small { color: var(--app-text-faint); font-weight: 600; }
.cp-page .cp-step-tabs .nav-link:hover { background: var(--app-surface-2); color: var(--app-text-strong); }
.cp-page .cp-step-tabs .nav-link.active {
    border-color: var(--t-blue-fg) !important;
    background: var(--t-blue-bg) !important;
    color: var(--t-blue-fg);
}
.cp-page .cp-step-tabs .nav-link.active small { color: var(--t-blue-fg); opacity: .75; }

/* Barra de ferramentas do atendimento (Triagem, Exames, Internar, ...) */
.cp-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-surface);
    color: var(--app-text);
    font: 600 .78rem var(--mc-font-sans);
    cursor: pointer;
    white-space: nowrap;
}
.cp-tool-btn:hover { border-color: var(--t-blue-fg); color: var(--t-blue-fg); }
.cp-tool-btn.t-green { color: var(--t-green-fg); }
.cp-tool-btn.t-green:hover { border-color: var(--t-green-fg); }

/* Banner do Assistente de Diagnóstico com IA */
.cp-ia-banner {
    border: 1px solid var(--t-teal-fg);
    background: linear-gradient(135deg, var(--t-teal-bg), var(--t-indigo-bg));
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.cp-ia-banner .ico {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(135deg, #0891b2, #4f46e5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.cp-ia-banner .tit { font-weight: 800; font-size: .95rem; color: var(--app-text-strong); }
.cp-ia-banner .sub { font-size: .78rem; color: var(--app-text-muted); margin-top: 2px; max-width: 520px; line-height: 1.45; }
.cp-ia-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #0891b2, #4f46e5);
    color: #fff;
    font: 700 .8rem var(--mc-font-sans);
    cursor: pointer;
}
.cp-ia-btn:hover { filter: brightness(1.08); color: #fff; }

/* ============================================================
   Modais (reskin leve sobre a estrutura Bootstrap existente —
   os modais são IRMÃOS do container .mc-scaled, nunca filhos)
   ============================================================ */
.cp-modal .modal-content {
    background: var(--app-surface, #fff);
    border: 1px solid var(--app-border, #e4e9f2);
    border-radius: 16px;
    box-shadow: 0 24px 70px -24px rgba(0,0,0,.5);
    color: var(--app-text, #334155);
    font-family: var(--mc-font-sans);
}
.cp-modal .modal-header {
    border-bottom: 1px solid var(--app-border-soft, #eef2f7);
    padding: 16px 18px;
}
.cp-modal .modal-title { font-size: .95rem; font-weight: 800; color: var(--app-text-strong, #0b1f3a); }
.cp-modal .modal-footer { border-top: 1px solid var(--app-border-soft, #eef2f7); padding: 14px 18px; }
/* fora do .cp-page os tokens não existem; os fallbacks acima cobrem o claro
   e o bloco abaixo cobre o escuro. */
[data-theme-mode="dark"] .cp-modal .modal-content {
    --app-surface: var(--mc-surface); --app-border: var(--mc-border); --app-border-soft: var(--mc-surface-3);
    --app-text: #c9d6da; --app-text-strong: var(--mc-text);
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

/* ============================================================
   Impressão: sem zoom
   ============================================================ */
@media print {
    .cp-page { zoom: 1 !important; padding: 0; }
}