/*
 * VitaTrack — tema visual global.
 * Espelha wwwroot/design/vitatrack-palette.json como CSS custom properties.
 * Esta é a camada que a UI consome. Mantenha em sincronia com o JSON.
 */

:root {
    /* Brand */
    --vt-primary-accent: #CCFC20;
    --vt-primary-accent-hover: #B8E619;
    --vt-sidebar-bg: #0D1418;
    --vt-sidebar-secondary: #111B20;
    --vt-bg: #F7F8FA;
    --vt-surface: #FFFFFF;
    --vt-surface-muted: #F3F5F7;

    /* Text */
    --vt-text-primary: #101418;
    --vt-text-secondary: #5D6673;
    --vt-text-muted: #8A94A3;
    --vt-text-inverse: #FFFFFF;

    /* Border */
    --vt-border: #E3E7EC;
    --vt-border-strong: #C9D0D8;

    /* Status */
    --vt-success: #34C759;
    --vt-warning: #FF9F0A;
    --vt-danger: #FF5A5F;
    --vt-info: #2F80ED;
    --vt-teal: #22C7B8;

    /* Clinical semantic tokens */
    --vt-clinical-normal: #34C759;
    --vt-clinical-low: #FF9F0A;
    --vt-clinical-high: #FF9F0A;
    --vt-clinical-critical: #FF5A5F;
    --vt-clinical-pending: #FF9F0A;
    --vt-clinical-active: #34C759;
    --vt-clinical-closed: #8A94A3;
    --vt-clinical-document: #2F80ED;
    --vt-clinical-consultation: #34C759;
    --vt-clinical-prescription: #FF9F0A;
    --vt-clinical-exam: #7B61FF;
    --vt-clinical-return: #22C7B8;

    /* Soft tints for badge / pill backgrounds (12% of the hue) */
    --vt-tint-success: rgba(52, 199, 89, 0.12);
    --vt-tint-warning: rgba(255, 159, 10, 0.14);
    --vt-tint-danger: rgba(255, 90, 95, 0.12);
    --vt-tint-info: rgba(47, 128, 237, 0.12);
    --vt-tint-teal: rgba(34, 199, 184, 0.12);
    --vt-tint-exam: rgba(123, 97, 255, 0.12);
    --vt-tint-accent: rgba(148, 197, 20, 0.18);
    --vt-tint-neutral: rgba(138, 148, 163, 0.14);

    /* Radius */
    --vt-radius-sm: 8px;
    --vt-radius-md: 12px;
    --vt-radius-lg: 18px;
    --vt-radius-xl: 24px;
    --vt-radius-pill: 999px;

    /* Shadow */
    --vt-shadow-card: 0 8px 24px rgba(16, 20, 24, 0.06);
    --vt-shadow-soft: 0 4px 14px rgba(16, 20, 24, 0.05);

    /* Scrim: escurece a página atrás de popovers (filtros, período, referência, perfil),
       destacando o painel aberto. Mais suave que o backdrop de modal (0.55). */
    --vt-scrim-popover: rgba(16, 20, 24, 0.32);

    /* Layout metrics */
    --vt-sidebar-width: 264px;
    --vt-topbar-height: 72px;
    --vt-content-max: 1120px;

    --vt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Base ---- */
html, body {
    font-family: var(--vt-font);
    background-color: var(--vt-bg);
    color: var(--vt-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    letter-spacing: -0.01em;
}

a {
    color: var(--vt-info);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ---- Design primitives (reusable across components) ---- */

.vt-card {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-lg);
    box-shadow: var(--vt-shadow-soft);
}

/* Pill badge; color set by modifier classes below */
.vt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--vt-radius-pill);
    white-space: nowrap;
}

.vt-badge .vt-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

.vt-badge--success { color: #1f8f45; background: var(--vt-tint-success); }
.vt-badge--warning { color: #b26a00; background: var(--vt-tint-warning); }
.vt-badge--danger  { color: #c22d31; background: var(--vt-tint-danger); }
.vt-badge--info    { color: #1f5fb8; background: var(--vt-tint-info); }
.vt-badge--teal    { color: #148b81; background: var(--vt-tint-teal); }
.vt-badge--exam    { color: #5a44c9; background: var(--vt-tint-exam); }
.vt-badge--neutral { color: var(--vt-text-secondary); background: var(--vt-tint-neutral); }
.vt-badge--accent  { color: #4f6b00; background: var(--vt-tint-accent); }
.vt-badge--outline { color: var(--vt-text-secondary); background: var(--vt-surface); border: 1px solid var(--vt-border); }
.vt-badge--dark    { color: var(--vt-text-inverse); background: #3b444f; }

/* ---- Botões (vocabulário canônico) ----
 * Regra: toda ação primária usa .vt-btn--primary (lime). Nunca use os botões crus do Bootstrap
 * (btn-primary/btn-warning/…) em telas de produto — eles trazem cores fora da paleta VitaTrack.
 *
 *   .vt-btn                 base obrigatória (reset + layout); combine com um modificador
 *   .vt-btn--primary        ação primária / CTA (lime) — ex.: "Novo episódio", "Salvar", "Buscar"
 *   .vt-btn--ghost          ação secundária / neutra (superfície com borda)
 *   .vt-btn--warning        ação de atenção que reaponta/consolida dados — ex.: "Unificar", "Reprocessar"
 *   .vt-btn--danger         ação destrutiva confirmada (o "Sim" de um excluir em dois passos)
 *   .vt-btn--danger-outline ação destrutiva de primeiro passo (o "Excluir" antes da confirmação)
 *   .vt-btn--sm             modificador de tamanho compacto
 *
 * Para seletores segmentados (filtros com estado ativo/inativo) use .vt-seg / .vt-seg__item — não
 * empilhe .vt-btn--primary com btn-outline-primary. */
.vt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.65rem 1.15rem;
    border-radius: var(--vt-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.vt-btn:hover { text-decoration: none; }

.vt-btn--primary {
    background: var(--vt-primary-accent);
    color: var(--vt-text-primary);
}

.vt-btn--primary:hover {
    background: var(--vt-primary-accent-hover);
    color: var(--vt-text-primary);
}

.vt-btn--ghost {
    background: var(--vt-surface);
    border-color: var(--vt-border);
    color: var(--vt-text-primary);
}

.vt-btn--ghost:hover {
    background: var(--vt-surface-muted);
    color: var(--vt-text-primary);
}

.vt-btn--sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
}

/* Um vt-btn desabilitado era indistinguível de um ativo. Sem pointer-events:none, porque é justamente o
   title de um botão desabilitado que explica o que falta para habilitá-lo. */
.vt-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Ação destrutiva confirmada (o "Sim" de um excluir em dois passos). */
.vt-btn--danger {
    background: var(--vt-danger);
    color: var(--vt-text-inverse);
}

.vt-btn--danger:hover {
    background: var(--vt-danger);
    color: var(--vt-text-inverse);
    filter: brightness(0.92);
}

.vt-btn--primary:disabled:hover { background: var(--vt-primary-accent); }
/* Ação destrutiva de primeiro passo (o "Excluir perfil" antes da confirmação). */
.vt-btn--danger-outline {
    background: var(--vt-surface);
    border-color: color-mix(in srgb, var(--vt-danger) 45%, var(--vt-border));
    color: var(--vt-danger);
}
.vt-btn--danger-outline:hover {
    background: var(--vt-tint-danger);
    color: var(--vt-danger);
}

/* Ação de atenção que reaponta/consolida dados (unificar laboratórios, reprocessar) — token de aviso. */
.vt-btn--warning {
    background: var(--vt-warning);
    color: var(--vt-text-primary);
}
.vt-btn--warning:hover {
    background: var(--vt-warning);
    color: var(--vt-text-primary);
    filter: brightness(0.95);
}

/* ---- Seletor segmentado (filtros / alternância de modo) ----
   Substitui o btn-group do Bootstrap (btn-primary + btn-outline-primary), que trazia o azul cru. */
.vt-seg {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.2rem;
    background: var(--vt-surface-muted);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
}
.vt-seg__item {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.4rem 0.8rem;
    border: none;
    background: transparent;
    color: var(--vt-text-secondary);
    border-radius: calc(var(--vt-radius-md) - 4px);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.vt-seg__item:hover { color: var(--vt-text-primary); }
.vt-seg__item.is-active {
    background: var(--vt-surface);
    color: var(--vt-text-primary);
    box-shadow: var(--vt-shadow-soft);
}

/* ---- Modal de confirmação (reutilizável) ---- */
.vt-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(16, 20, 24, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: vt-modal-fade 0.15s ease-out;
}
.vt-modal {
    position: relative;
    width: 100%;
    max-width: 27rem;
    background: var(--vt-surface);
    border-radius: var(--vt-radius-xl);
    box-shadow: 0 18px 48px rgba(16, 20, 24, 0.24);
    padding: 1.9rem 1.75rem 1.5rem;
    text-align: center;
    animation: vt-modal-pop 0.16s ease-out;
}
.vt-modal__close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    border: none;
    background: transparent;
    color: var(--vt-text-muted);
    cursor: pointer;
    line-height: 0;
    padding: 0.25rem;
}
.vt-modal__close:hover { color: var(--vt-text-primary); }
.vt-modal__close:disabled { opacity: 0.5; cursor: not-allowed; }
.vt-modal__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    margin: 0 auto 0.9rem;
    background: var(--vt-tint-neutral);
    color: var(--vt-text-primary);
}
.vt-modal__ico--danger { background: var(--vt-tint-danger); color: var(--vt-danger); }
.vt-modal__title { font-size: 1.2rem; font-weight: 700; color: var(--vt-text-primary); margin: 0 0 0.5rem; }
.vt-modal__msg { color: var(--vt-text-secondary); line-height: 1.5; margin: 0 0 1.35rem; }
.vt-modal__error {
    background: var(--vt-tint-danger);
    color: #c22d31;
    border-radius: var(--vt-radius-sm);
    padding: 0.55rem 0.8rem;
    font-size: 0.85rem;
    margin: 0 0 1rem;
}
.vt-modal__actions { display: flex; gap: 0.6rem; justify-content: center; }
.vt-modal__actions .vt-btn { min-width: 9rem; }

@keyframes vt-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes vt-modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .vt-modal__actions { flex-direction: column-reverse; }
    .vt-modal__actions .vt-btn { width: 100%; }
}
.vt-btn--ghost:disabled:hover { background: var(--vt-surface); }
.vt-btn--danger:disabled:hover { background: var(--vt-danger); filter: none; }

/* Icon button (topbar notifications, card overflow) */
.vt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--vt-radius-md);
    border: 1px solid var(--vt-border);
    background: var(--vt-surface);
    color: var(--vt-text-secondary);
    cursor: pointer;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vt-icon-btn:hover {
    background: var(--vt-surface-muted);
    color: var(--vt-text-primary);
}

/* Filter chip */
.vt-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: var(--vt-radius-pill);
    border: 1px solid var(--vt-border);
    background: var(--vt-surface);
    color: var(--vt-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vt-chip:hover {
    background: var(--vt-surface-muted);
}

.vt-chip--active {
    background: var(--vt-primary-accent);
    border-color: var(--vt-primary-accent);
    color: var(--vt-text-primary);
    font-weight: 600;
}

/* Muted helper text */
.vt-muted { color: var(--vt-text-muted); }
.vt-secondary { color: var(--vt-text-secondary); }

/* Small linear icon sizing helper */
.vt-ico {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
}

.vt-ico svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke-width: 1.7;
}

/* =========================================================
   Sidebar (global: contains <NavLink> child components)
   ========================================================= */
.sidebar {
    display: flex;
    flex-direction: column;
    width: var(--vt-sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    background: var(--vt-sidebar-bg);
    color: #cdd5dd;
    padding: 0.5rem 0.75rem 1rem;
    overflow-y: auto;
}

.sb-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 0.6rem 1.1rem;
}

.sb-logo {
    display: inline-flex;
    align-items: baseline;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
}

.sb-logo:hover { text-decoration: none; }

.sb-logo-accent {
    color: var(--vt-primary-accent);
    font-size: 1.6rem;
    line-height: 0;
    margin-left: 2px;
}

.sb-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #8a94a3;
    border-radius: var(--vt-radius-sm);
    cursor: pointer;
    transform: rotate(45deg);
}

.sb-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sb-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.7rem;
    border-radius: var(--vt-radius-md);
    color: #aab3bd;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sb-link:hover {
    background: var(--vt-sidebar-secondary);
    color: #fff;
    text-decoration: none;
}

.sb-link .sb-ico {
    display: inline-flex;
    flex: none;
    color: #7c8894;
    transition: color 0.15s ease;
}

.sb-link:hover .sb-ico { color: #cdd5dd; }

.sb-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Active nav item: lime text, subtle lime wash, left accent bar */
.sb-link.active {
    background: rgba(204, 252, 32, 0.12);
    color: var(--vt-primary-accent);
    font-weight: 600;
}

.sb-link.active .sb-ico { color: var(--vt-primary-accent); }

.sb-link.active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--vt-primary-accent);
}

.sb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--vt-radius-pill);
    background: var(--vt-primary-accent);
    color: var(--vt-sidebar-bg);
    font-size: 0.72rem;
    font-weight: 700;
}

.sb-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 0.85rem 0.4rem;
}

.sb-nav--secondary .sb-link {
    font-size: 0.86rem;
}

/* Rótulo de agrupamento (ex.: "Compartilhar acesso") — aproxima itens afins sem fundi-los. */
.sb-group-label {
    padding: 0.35rem 0.75rem 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
}

.sb-footer {
    margin-top: auto;
    padding-top: 1rem;
}

.sb-trust {
    display: flex;
    gap: 0.6rem;
    padding: 0.85rem;
    background: var(--vt-sidebar-secondary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--vt-radius-md);
    margin-bottom: 0.5rem;
}

.sb-trust-ico {
    color: var(--vt-primary-accent);
    display: inline-flex;
    flex: none;
    margin-top: 1px;
}

.sb-trust-title {
    font-size: 0.78rem;
    line-height: 1.35;
    color: #cdd5dd;
}

.sb-trust-link {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vt-primary-accent);
}

.sb-trust-link:hover { text-decoration: underline; color: var(--vt-primary-accent); }

.sb-help {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--vt-radius-md);
    color: #aab3bd;
    font-size: 0.86rem;
    font-weight: 500;
    text-decoration: none;
}

.sb-help:hover { background: var(--vt-sidebar-secondary); color: #fff; text-decoration: none; }
.sb-help .sb-ico { color: #7c8894; }

.sb-logout-form { margin: 0.25rem 0 0; }

.sb-logout {
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.7rem;
    background: none;
    border: none;
    color: #7c8894;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--vt-radius-md);
}

.sb-logout:hover { background: var(--vt-sidebar-secondary); color: #fff; }

/* Mobile trigger (hidden on desktop) */
.sb-mobile-trigger {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 45;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--vt-sidebar-bg);
    color: #fff;
    border: none;
    border-radius: var(--vt-radius-md);
    box-shadow: var(--vt-shadow-card);
    cursor: pointer;
}

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--vt-shadow-card);
    }

    .sidebar.is-open { transform: translateX(0); }
    .sb-close { display: inline-flex; }
    .sb-mobile-trigger { display: inline-flex; }
}

/* =========================================================
   Page header (shared)
   ========================================================= */
.vt-page-head { margin-bottom: 1.25rem; }

.vt-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--vt-text-primary);
    margin: 0 0 0.35rem;
}

.vt-page-subtitle {
    font-size: 0.95rem;
    color: var(--vt-text-secondary);
    max-width: 640px;
    margin: 0;
    line-height: 1.5;
}

/* Barra título + ações (slot Actions do PageHeader) */
.vt-page-head__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.vt-page-head__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Link "‹ Voltar" canônico (componente BackLink) — neutro e theme-aware */
.vt-back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vt-text-secondary);
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.vt-back:hover { color: var(--vt-text-primary); text-decoration: none; }

/* =========================================================
   Timeline page
   ========================================================= */
.tl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.75rem;
    align-items: start;
}

.tl-main { min-width: 0; }

.tl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.tl-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tl-period {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.75rem;
    height: 40px;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    color: var(--vt-text-secondary);
}

.tl-period-select {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vt-text-primary);
    outline: none;
    cursor: pointer;
}

.tl-empty {
    padding: 2rem;
    color: var(--vt-text-secondary);
    text-align: center;
}

/* --- Timeline stream (rail + node) --- */
.tl-stream { display: flex; flex-direction: column; }

.tl-row {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0.75rem;
}

.tl-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0.75rem;
    text-align: left;
}

/* Vertical connector line running through the rail */
.tl-rail::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -1.5rem;
    left: 5px;
    width: 2px;
    background: var(--vt-border);
}

.tl-row:last-child .tl-rail::before { bottom: 50%; }

.tl-rail-year {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--vt-text-primary);
    padding-left: 1rem;
}

.tl-rail-month {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6f9400;
    padding-left: 1rem;
    margin-bottom: 0.15rem;
}

.tl-rail-dot {
    position: absolute;
    top: 0.85rem;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--vt-primary-accent);
    border: 3px solid var(--vt-bg);
    box-shadow: 0 0 0 1px var(--vt-border);
}

.tl-node { padding-bottom: 1rem; min-width: 0; }

/* --- Episode card --- */
.ep-card { overflow: hidden; }

.ep-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.ep-medallion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: var(--vt-radius-md);
    background: var(--vt-tint-accent);
    color: #4f6b00;
}

.ep-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-width: 0;
}

.ep-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vt-text-primary);
    letter-spacing: -0.01em;
}

/* Episode period in the header — matches the "Data clínica" footer text. */
.ep-period {
    font-size: 0.8rem;
    color: var(--vt-text-muted);
}

.ep-header-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex: none;
}

.ep-chevron { color: var(--vt-text-muted); display: inline-flex; }

.ep-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    gap: 1.5rem;
    padding: 0.25rem 1.25rem 1.25rem;
    border-top: 1px solid var(--vt-border);
    margin-top: 0.1rem;
    padding-top: 1.25rem;
}

.ep-context {
    border-left: 1px solid var(--vt-border);
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.ep-context-block { display: flex; flex-direction: column; gap: 0.35rem; }

.ep-context-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vt-text-muted);
}

.ep-context-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--vt-text-primary);
}

.ep-context-muted { font-size: 0.9rem; color: var(--vt-text-muted); }

.ep-context-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--vt-info);
}

.ep-context-link:hover { text-decoration: none; }

.ep-context-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.ep-doc-markers { display: flex; flex-direction: column; gap: 0.6rem; }
.ep-doc-marker { display: flex; flex-direction: column; gap: 0.3rem; }
.ep-doc-marker-name {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vt-text-primary);
    text-decoration: none;
}
.ep-doc-marker-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--vt-text-primary);
    text-decoration: none;
}
.ep-doc-marker-title:hover { text-decoration: underline; }
.ep-doc-marker-physician {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--vt-text-secondary);
    flex: none;
}

/* Exams & alterations section, shown in the left/center event column (not the right panel). */
.ep-exams {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vt-border);
}

.ep-open { margin-top: auto; }

.ep-footer {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.25rem;
    border-top: 1px solid var(--vt-border);
    background: var(--vt-surface-muted);
    font-size: 0.8rem;
    color: var(--vt-text-muted);
}

/* --- Episode internal mini timeline --- */
.mini-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.mini-tl-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.75rem;
    position: relative;
    padding-bottom: 1.1rem;
}

.mini-tl-item::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: -2px;
    width: 2px;
    background: var(--vt-border);
}

.mini-tl-item:last-child { padding-bottom: 0; }
.mini-tl-item:last-child::before { display: none; }

.mini-tl-medallion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    z-index: 1;
}

.mini-tl-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.1rem;
}

.mini-tl-date { font-size: 0.8rem; font-weight: 600; color: var(--vt-text-primary); }
.mini-tl-type { font-size: 0.75rem; color: var(--vt-text-muted); }
.mini-tl-title { display: flex; align-items: center; gap: 0.3rem; font-size: 0.88rem; color: var(--vt-text-secondary); }
.mini-tl-title-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
.mini-tl-title-link:hover { text-decoration: underline; }
.mini-tl-desc { font-size: 0.82rem; color: var(--vt-text-muted); margin-top: 0.15rem; }
.mini-tl-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }

/* --- Compact document card --- */
.tl-item-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.25rem;
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tl-item-card:hover {
    text-decoration: none;
    box-shadow: var(--vt-shadow-card);
    border-color: var(--vt-border-strong);
}

.tl-item-medallion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--vt-radius-md);
}

.tl-item-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1; }

.tl-item-headline { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }

.tl-item-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vt-text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
}
.tl-item-title:hover { text-decoration: underline; }

.tl-item-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tl-item-date { font-size: 0.8rem; }
.tl-item-physician { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; flex: none; white-space: nowrap; }

.tl-item-status { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; }
.tl-item-chevron { color: var(--vt-text-muted); display: inline-flex; }

/* Marker alteration badges shown on document cards and inside episode documents. */
.tl-alterations { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }

/* Conjuntos de exames do documento: atalhos para a lista de marcadores filtrada por aquele conjunto. */
.tl-panels { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.35rem; color: var(--vt-text-muted); }
.tl-panel-link {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: var(--vt-radius-pill);
    background: var(--vt-tint-exam);
    color: var(--vt-clinical-exam);
    text-decoration: none;
}
.tl-panel-link:hover { text-decoration: underline; }

/* =========================================================
   Timeline summary panel
   ========================================================= */
.tl-summary {
    position: sticky;
    top: calc(var(--vt-topbar-height) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.tl-summary-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vt-text-primary);
    margin-bottom: 0.15rem;
}

.tl-metrics { display: flex; flex-direction: column; gap: 0.65rem; }

.vt-metric {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    box-shadow: var(--vt-shadow-soft);
}

.vt-metric-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--vt-radius-md);
}

.vt-metric-ico--success { color: #1f8f45; background: var(--vt-tint-success); }
.vt-metric-ico--warning { color: #b26a00; background: var(--vt-tint-warning); }
.vt-metric-ico--danger  { color: #c22d31; background: var(--vt-tint-danger); }
.vt-metric-ico--info    { color: #1f5fb8; background: var(--vt-tint-info); }
.vt-metric-ico--teal    { color: #148b81; background: var(--vt-tint-teal); }
.vt-metric-ico--neutral { color: var(--vt-text-secondary); background: var(--vt-tint-neutral); }

.vt-metric-body { display: flex; flex-direction: column; }
.vt-metric-label { font-size: 0.82rem; color: var(--vt-text-secondary); }
.vt-metric-value { font-size: 1.35rem; font-weight: 700; color: var(--vt-text-primary); line-height: 1.1; }

.tl-summary-card { padding: 1rem 1.15rem; }
.tl-summary-card-title { font-size: 0.92rem; font-weight: 700; color: var(--vt-text-primary); }

.vt-actions { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.vt-action { display: flex; align-items: flex-start; gap: 0.5rem; }
.vt-action-ico { color: var(--vt-success); display: inline-flex; flex: none; margin-top: 1px; }
.vt-action-text { font-size: 0.85rem; color: var(--vt-text-secondary); line-height: 1.35; }

.tl-trust-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; }
.tl-trust-ico { color: var(--vt-text-secondary); display: inline-flex; }
.tl-trust-text { font-size: 0.85rem; color: var(--vt-text-secondary); line-height: 1.4; margin: 0 0 0.4rem; }
.tl-trust-link { font-size: 0.85rem; font-weight: 600; color: var(--vt-info); }

/* --- Timeline responsive --- */
@media (max-width: 1180px) {
    .tl-layout { grid-template-columns: minmax(0, 1fr); }
    .tl-summary { position: static; flex-direction: row; flex-wrap: wrap; }
    .tl-summary-title { width: 100%; }
    .tl-metrics { flex-direction: row; flex-wrap: wrap; flex: 1; }
    .vt-metric { flex: 1 1 180px; }
    .tl-summary-card { flex: 1 1 240px; }
}

@media (max-width: 720px) {
    .ep-body { grid-template-columns: minmax(0, 1fr); }
    .ep-context { border-left: none; border-top: 1px solid var(--vt-border); padding-left: 0; padding-top: 1rem; }
    .tl-row { grid-template-columns: 70px minmax(0, 1fr); }
}

/* Narrow screens: keep the episode header from overflowing (long type badge must be allowed to wrap). */
@media (max-width: 560px) {
    .ep-header { align-items: flex-start; padding: 0.9rem 1rem; }
    .ep-heading { flex: 1 1 auto; min-width: 0; }
    .ep-heading .vt-badge { white-space: normal; }
    .ep-title { font-size: 0.98rem; }
    .ep-header-right { flex-direction: column; align-items: flex-end; gap: 0.4rem; }
}

/* Lupa button that opens the original-document viewer (timeline items). */
.doc-lupa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--vt-text-muted);
    cursor: pointer;
    flex: none;
    line-height: 0;
}
.doc-lupa:hover { color: var(--vt-text-primary); }

/* Original-document viewer modal */
.vt-viewer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    outline: none;
}

.vt-viewer {
    background: var(--vt-surface);
    border-radius: var(--vt-radius-lg, 12px);
    box-shadow: var(--vt-shadow-card);
    /* Ocupa 90% do espaço disponível da página (o backdrop já tem um respiro de padding). */
    width: 90vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vt-viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--vt-border);
}

.vt-viewer-title {
    font-weight: 600;
    color: var(--vt-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vt-viewer-body {
    flex: 1;
    min-height: 0;
    background: var(--vt-bg, #f5f6f8);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.vt-viewer-frame { width: 100%; height: 100%; border: 0; }
.vt-viewer-image { max-width: 100%; max-height: 100%; object-fit: contain; }
.vt-viewer-fallback { text-align: center; padding: 2rem; color: var(--vt-text-secondary); }

/* Inline drag-and-drop upload zone (document library) */
.vt-dropzone {
    position: relative;
    border: 2px dashed var(--vt-border-strong);
    border-radius: var(--vt-radius-lg);
    background: var(--vt-surface-muted);
    padding: 1.75rem 1.25rem;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

.vt-dropzone--over {
    border-color: var(--vt-primary-accent);
    background: rgba(204, 252, 32, 0.10);
}

.vt-dropzone--busy {
    opacity: .75;
}

/* The real file input covers the whole zone (invisible) so both a click and a native file drop work. */
.vt-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.vt-dropzone--busy .vt-dropzone-input { cursor: default; }

.vt-dropzone-inner {
    position: relative;
    z-index: 1;
    pointer-events: none; /* let clicks/drops fall through to the input above */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: var(--vt-text-secondary);
}

.vt-dropzone-hint { font-size: .8rem; color: var(--vt-text-secondary); }

/* =========================================================
   Markers page (/marcadores)
   ========================================================= */

/* ---- Summary cards ---- */
.mk-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.mk-summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-lg);
    box-shadow: var(--vt-shadow-soft);
    min-height: 84px;
}

/* Clickable count cards filter the list down to what they count. */
.mk-summary-card--clickable {
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.mk-summary-card--clickable:hover {
    border-color: var(--vt-primary-accent);
    box-shadow: var(--vt-shadow-md, var(--vt-shadow-soft));
}

.mk-summary-card--clickable:active { transform: translateY(1px); }

.mk-summary-card--clickable:focus-visible {
    outline: 2px solid var(--vt-primary-accent);
    outline-offset: 2px;
}

.mk-summary-card--active {
    border-color: var(--vt-primary-accent);
    box-shadow: inset 0 0 0 1px var(--vt-primary-accent);
}

.mk-summary-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--vt-radius-md);
}

.mk-summary-ico--info    { color: #1f5fb8; background: var(--vt-tint-info); }
.mk-summary-ico--warning { color: #b26a00; background: var(--vt-tint-warning); }
.mk-summary-ico--danger  { color: #c22d31; background: var(--vt-tint-danger); }
.mk-summary-ico--neutral { color: var(--vt-text-secondary); background: var(--vt-tint-neutral); }

.mk-summary-body { display: flex; flex-direction: column; min-width: 0; gap: 0.1rem; }
.mk-summary-value { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--vt-text-primary); }
.mk-summary-label { font-size: 0.82rem; color: var(--vt-text-secondary); }
.mk-summary-period { font-size: 0.95rem; font-weight: 700; color: var(--vt-text-primary); }
.mk-summary-period-note { font-size: 0.78rem; color: var(--vt-text-muted); }

/* ---- Filter panel ---- */
.mk-filters { padding: 1.15rem 1.25rem; margin-bottom: 1rem; }

.mk-filters-search { margin-bottom: 1rem; }
.mk-filters-search .mk-search { display: flex; max-width: 24rem; }

.mk-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    align-items: flex-start;
}

.mk-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vt-text-secondary);
    margin-bottom: 0.35rem;
}

/* Multiselect field */
.mk-select { position: relative; flex: 1 1 240px; min-width: 0; }

.mk-select-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.35rem 0.6rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mk-select.is-open .mk-select-control,
.mk-select-control:hover { border-color: var(--vt-border-strong); }

.mk-select.is-open .mk-select-control {
    box-shadow: 0 0 0 3px var(--vt-tint-accent);
    border-color: var(--vt-primary-accent);
}

.mk-select-placeholder { color: var(--vt-text-muted); font-size: 0.85rem; }
.mk-select-caret { margin-left: auto; color: var(--vt-text-muted); display: inline-flex; }

.mk-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: var(--vt-radius-pill);
    background: var(--vt-surface-muted);
    border: 1px solid var(--vt-border);
    color: var(--vt-text-primary);
}

.mk-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }

.mk-tag-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--vt-text-muted);
    cursor: pointer;
    border-radius: 50%;
}

.mk-tag-x:hover { background: var(--vt-tint-danger); color: #c22d31; }

.mk-tag--more { background: var(--vt-tint-accent); border-color: transparent; color: #4f6b00; font-weight: 600; }

/* Dropdown */
.mk-dropdown-backdrop { position: fixed; inset: 0; z-index: 40; }

.mk-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    box-shadow: var(--vt-shadow-card);
    overflow: hidden;
}

.mk-dropdown-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--vt-border);
    color: var(--vt-text-muted);
}

.mk-dropdown-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--vt-text-primary);
}

.mk-dropdown-list { max-height: 260px; overflow-y: auto; padding: 0.3rem; }

.mk-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: none;
    background: transparent;
    border-radius: var(--vt-radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--vt-text-primary);
    text-align: left;
    cursor: pointer;
}

.mk-option:hover { background: var(--vt-surface-muted); }

.mk-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: none;
    border: 1.5px solid var(--vt-border-strong);
    border-radius: 5px;
    color: var(--vt-text-primary);
}

.mk-option.is-selected .mk-option-check {
    background: var(--vt-primary-accent);
    border-color: var(--vt-primary-accent);
}

.mk-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-dropdown-empty { padding: 0.75rem; text-align: center; color: var(--vt-text-muted); font-size: 0.85rem; }
.mk-dropdown-foot { padding: 0.4rem 0.6rem; border-top: 1px solid var(--vt-border); }

.mk-clear-link {
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vt-info);
    cursor: pointer;
}

.mk-clear-link:hover { text-decoration: underline; }

/* Period range */
.mk-period { flex: 1 1 340px; min-width: 0; }
.mk-period-inputs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.mk-date {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.6rem;
    height: 44px;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    color: var(--vt-text-muted);
}

.mk-date input {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--vt-text-primary);
}

.mk-period-preset {
    height: 44px;
    padding: 0 0.7rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    background: var(--vt-surface);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--vt-text-primary);
    cursor: pointer;
}

/* Filter footer + advanced */
.mk-filters-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vt-border);
}

.mk-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vt-text-secondary);
    cursor: pointer;
}

.mk-advanced-toggle:hover { color: var(--vt-text-primary); }

.mk-active-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--vt-radius-pill);
    background: var(--vt-primary-accent);
    color: var(--vt-text-primary);
    font-size: 0.7rem;
    font-weight: 700;
}

.mk-filters-actions { display: inline-flex; align-items: center; gap: 0.85rem; min-height: 1.2rem; }
.mk-active-hint { font-size: 0.8rem; color: var(--vt-text-muted); }

/* Selo neutro de heterogeneidade da série (mistura de método/material/unidade). Informativo, não alarmante. */
.mk-het-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; line-height: 1; white-space: nowrap;
    padding: 0.16rem 0.4rem; border-radius: 999px;
    background: var(--vt-tint-accent); color: var(--vt-text-muted);
    border: 1px solid var(--vt-border);
}
.mk-scope-select { display: inline-flex; flex-direction: column; gap: 0.25rem; }
.mk-scope-select > select { padding: 0.35rem 0.5rem; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm, 6px); background: var(--vt-surface); color: var(--vt-text); }

.mk-advanced {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--vt-border);
}

.mk-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--vt-text-primary);
    cursor: pointer;
}

.mk-check input { width: 16px; height: 16px; accent-color: var(--vt-primary-accent); cursor: pointer; }

/* ---- Toolbar (local search + export) ---- */
.mk-search {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 260px;
    max-width: 24rem;
    height: 42px;
    padding: 0 0.85rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    color: var(--vt-text-muted);
}

.mk-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--vt-text-primary);
}

/* ---- Grid ---- */
.mk-grid-card { padding: 0; overflow: hidden; }
.mk-grid-wrap { overflow-x: auto; }

.mk-grid { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

.mk-grid thead th {
    padding: 0.75rem 1rem;
    background: var(--vt-surface-muted);
    border-bottom: 1px solid var(--vt-border);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vt-text-secondary);
    text-align: left;
    white-space: nowrap;
}

.mk-grid tbody td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--vt-border);
    vertical-align: middle;
    color: var(--vt-text-primary);
}

.mk-grid tbody tr:last-child td { border-bottom: none; }
.mk-grid tbody tr.mk-row { cursor: pointer; }
.mk-grid tbody tr:hover { background: var(--vt-surface-muted); }

.mk-center { text-align: center; }
.mk-nowrap { white-space: nowrap; }

.mk-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vt-text-secondary);
    cursor: pointer;
}

.mk-sort:hover { color: var(--vt-text-primary); }
.mk-sort .vt-ico { color: var(--vt-text-muted); opacity: 0.5; }
.mk-sort.is-active { color: var(--vt-text-primary); }
.mk-sort.is-active .vt-ico { opacity: 1; color: var(--vt-text-primary); }

.mk-col-star, .mk-col-actions { width: 40px; text-align: center; }

.mk-star {
    display: inline-flex;
    padding: 0.2rem;
    border: none;
    background: none;
    color: var(--vt-text-muted);
    cursor: pointer;
    line-height: 0;
    opacity: 0.55;
}

.mk-star:hover { opacity: 1; color: var(--vt-warning); }
.mk-star.is-on { opacity: 1; color: var(--vt-warning); }
.mk-star.is-on svg path { fill: currentColor; }

.mk-marker-name { font-weight: 600; color: var(--vt-info); }
.mk-specimen { color: var(--vt-text-muted); font-size: 0.8rem; margin-left: 0.3rem; }

/* Célula do nome do marcador: nome na primeira linha, método • material na segunda (estilo Visão médica). */
.mk-marker-cell { display: flex; flex-direction: column; gap: 2px; }
.mk-marker-headline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mk-marker-sub { font-size: 0.72rem; color: var(--vt-text-muted); line-height: 1.35; }

/* Cabeçalho de seção quando a lista está agrupada (categoria / conjunto de exames). */
.mk-group-row td {
    background: var(--vt-surface-muted);
    padding: 8px 14px;
    border-top: 1px solid var(--vt-border);
}
.mk-group-head { display: flex; align-items: center; gap: 0.55rem; }
.mk-group-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--vt-surface); border: 1px solid var(--vt-border);
    color: var(--vt-text-secondary); flex: 0 0 auto;
}
.mk-group-name {
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--vt-text-primary);
}
.mk-group-count {
    font-size: 0.72rem; font-weight: 600; color: var(--vt-text-muted);
    padding: 1px 8px; border-radius: var(--vt-radius-pill); background: var(--vt-surface);
    border: 1px solid var(--vt-border);
}

.mk-pending {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: var(--vt-radius-pill);
    color: #b26a00;
    background: var(--vt-tint-warning);
}

/* Variante clicável do badge (admin): leva à revisão do marcador no catálogo do backoffice. */
a.mk-pending--link { text-decoration: none; cursor: pointer; }
a.mk-pending--link:hover { text-decoration: underline; }

.mk-value { font-weight: 600; }
.mk-readings { color: var(--vt-text-secondary); }
.mk-lastdate { color: var(--vt-text-secondary); }
.mk-dash { color: var(--vt-text-muted); }

.mk-var { font-weight: 700; color: var(--vt-text-muted); }
/* A seta é tingida pela classificação na referência ativa (mesmas cores do badge da grade). */
.mk-var--normal { color: var(--vt-success); }
.mk-var--high { color: var(--vt-warning); }
.mk-var--low { color: var(--vt-info); }
.mk-var--critical { color: var(--vt-danger); }
.mk-var--none { color: var(--vt-text-muted); }

/* Largura FIXA: o conteúdo da coluna muda com a referência ativa (badge de classificação ↔
   traço "—" ↔ link de admin "Definir referência →"). Sem fixar, o table-layout auto remede a
   coluna a cada troca e reflui a grade inteira (sensação de "flicker" nos dados). O link de admin
   quebra em duas linhas em vez de esticar a coluna (ver regra abaixo). */
.mk-col-class { width: 118px; min-width: 118px; max-width: 118px; }
.mk-col-class .mk-catalog-link { white-space: normal; }

.mk-trend { width: 110px; }

.mk-row-more {
    display: inline-flex;
    padding: 0.2rem;
    border: none;
    background: none;
    color: var(--vt-text-muted);
    cursor: pointer;
    line-height: 0;
    border-radius: var(--vt-radius-sm);
}

.mk-row-more:hover { background: var(--vt-surface-muted); color: var(--vt-text-primary); }

/* ---- Pagination ---- */
.mk-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--vt-border);
}

.mk-pagination-count { font-size: 0.82rem; color: var(--vt-text-secondary); }
.mk-pagination-controls { display: inline-flex; align-items: center; gap: 0.75rem; }

.mk-page-size {
    height: 36px;
    padding: 0 0.6rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    background: var(--vt-surface);
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--vt-text-primary);
    cursor: pointer;
}

.mk-pager { display: inline-flex; align-items: center; gap: 0.25rem; }

.mk-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.4rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-sm);
    background: var(--vt-surface);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vt-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mk-page-btn:hover:not(:disabled):not(.is-active) { background: var(--vt-surface-muted); color: var(--vt-text-primary); }
.mk-page-btn:disabled { opacity: 0.45; cursor: default; }

.mk-page-btn.is-active {
    background: var(--vt-primary-accent);
    border-color: var(--vt-primary-accent);
    color: var(--vt-text-primary);
}

.mk-page-ellipsis { padding: 0 0.25rem; color: var(--vt-text-muted); }

/* ---- States ---- */
.mk-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--vt-text-secondary);
}

.mk-disclaimer { margin-top: 0.85rem; font-size: 0.8rem; color: var(--vt-text-muted); line-height: 1.5; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .mk-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .mk-summary { grid-template-columns: minmax(0, 1fr); }
    .mk-filters-row { flex-direction: column; }
    .mk-select, .mk-period { flex: 1 1 auto; width: 100%; }
    .mk-period-inputs { flex-direction: column; align-items: stretch; }
    .mk-date, .mk-period-preset { width: 100%; }
    .mk-filters-foot { flex-direction: column; align-items: stretch; }
    .mk-filters-actions { justify-content: space-between; }
}

/* =========================================================
   Document detail page (DocumentView)
   Reuses mk-grid / vt-card / vt-btn primitives; dv-* covers
   layout specific to the document detail screen.
   ========================================================= */
.dv-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.dv-head-actions { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.dv-section { margin-top: 1.75rem; }

.dv-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 0.85rem;
}

.dv-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--vt-text-primary);
    margin: 0;
}

.dv-card-body { padding: 1.35rem 1.4rem; }

/* Definition grid for document metadata */
.dv-meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.7rem 1.75rem;
    margin: 0;
    align-items: baseline;
}

.dv-meta dt { color: var(--vt-text-secondary); font-weight: 600; font-size: 0.85rem; }
.dv-meta dd { margin: 0; color: var(--vt-text-primary); font-size: 0.9rem; min-width: 0; }

/* Rótulo do tipo de documento — destaque leve por ser o atributo mais relevante do card. */
.dv-doctype { font-size: 0.98rem; margin-right: 0.4rem; }

@media (max-width: 640px) {
    .dv-meta { grid-template-columns: minmax(0, 1fr); gap: 0.2rem 0; }
    .dv-meta dt { margin-top: 0.65rem; }
}

/* Small inline text buttons (edit / remove / cancel) */
.dv-link-btn {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vt-info);
    cursor: pointer;
}

.dv-link-btn:hover { text-decoration: underline; }
.dv-link-btn:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
.dv-link-btn--danger { color: #c22d31; }

.dv-hint { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: var(--vt-text-muted); line-height: 1.45; }
.dv-empty { color: var(--vt-text-secondary); margin: 0; }

/* Note banners (info / warning), softer than Bootstrap alerts */
.dv-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: var(--vt-radius-md);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.dv-note--info { background: var(--vt-tint-info); color: #1f5fb8; }
.dv-note--warning { background: var(--vt-tint-warning); color: #b26a00; }
.dv-note a { color: inherit; font-weight: 600; }
.dv-note-link { margin-left: 0.4rem; white-space: nowrap; }
.dv-note-actions { margin-left: auto; display: inline-flex; gap: 0.5rem; align-items: center; white-space: nowrap; }

/* Lists (files in a container, related episodes) inside a grid card */
.dv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.dv-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--vt-border);
}

.dv-list-item:last-child { border-bottom: none; }
.dv-list-item:hover { background: var(--vt-surface-muted); }
.dv-list-main { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.dv-list-main a { font-weight: 600; }

/* Editing rows + associate/link forms */
.dv-form-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.dv-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.dv-field label { font-size: 0.78rem; font-weight: 600; color: var(--vt-text-secondary); }

.dv-input, .dv-select {
    height: 38px;
    padding: 0 0.7rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    background: var(--vt-surface);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--vt-text-primary);
}

.dv-select { cursor: pointer; }
.dv-input:focus, .dv-select:focus { outline: none; border-color: var(--vt-primary-accent); }

/* Raw extracted text */
.dv-raw { margin-top: 1.75rem; }

.dv-raw summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--vt-text-primary);
    padding: 0.4rem 0;
}

.dv-raw pre {
    white-space: pre-wrap;
    max-height: 420px;
    overflow: auto;
    background: var(--vt-surface-muted);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    padding: 1rem;
    font-size: 0.82rem;
    margin-top: 0.5rem;
}

.dv-disclaimer { margin-top: 0.85rem; font-size: 0.8rem; color: var(--vt-text-muted); line-height: 1.5; }

/* =========================================================
   Marker timeline / detail page (/marcadores/{code})
   Reuses vt-card / mk-grid / dv-* primitives; mt-* covers the
   layout specific to a single marker's history screen.
   ========================================================= */
.mt-head { margin-bottom: 1.25rem; }

.mt-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Favorite (star) toggle next to the marker title. */
.mt-star {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem;
    border: none;
    background: none;
    color: var(--vt-text-muted);
    cursor: pointer;
    line-height: 0;
    opacity: 0.6;
    border-radius: var(--vt-radius-sm);
    transition: color 0.15s ease, opacity 0.15s ease;
}

.mt-star:hover { opacity: 1; color: var(--vt-warning); }
.mt-star.is-on { opacity: 1; color: var(--vt-warning); }
.mt-star.is-on svg path { fill: currentColor; }

.mt-subtitle { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--vt-text-secondary); }
.mt-subtitle .mt-sep { color: var(--vt-text-muted); margin: 0 0.5rem; }
/* Linha "Conjunto de Exames" do cabeçalho: ícone alinhado ao texto + atalhos de comparação por conjunto. */
.mt-subtitle svg { vertical-align: -2px; margin-right: 0.35rem; }
.mt-panel-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

/* ---- Controls: four-card row ---- */
/* auto-fit em vez de um número fixo de colunas: a contagem de cards varia por tela e por estado (a
   comparação mostra a escala do eixo Y só no modo sobreposto), e o grid se acomoda sozinho — inclusive
   nos tamanhos que antes precisavam de media query. */
.mt-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
    align-items: stretch;
}

.mt-control-card { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.1rem 1.15rem; }

.mt-control-label { font-size: 0.78rem; font-weight: 600; color: var(--vt-text-secondary); }

.mt-select {
    width: 100%;
    height: 40px;
    padding: 0 0.7rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    background: var(--vt-surface);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--vt-text-primary);
    cursor: pointer;
}

.mt-select:focus { outline: none; border-color: var(--vt-primary-accent); box-shadow: 0 0 0 3px var(--vt-tint-accent); }

/* ---- Seletor global de referência (cabeçalho) ----
   Único seletor de "Referência" da aplicação. As páginas só exibem o indicador discreto (.ref-indicator),
   que abre este seletor. */
.ref-selector { position: relative; flex: none; }

.ref-trigger {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.6rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ref-trigger:hover { border-color: var(--vt-border-strong); }
.ref-selector.is-open .ref-trigger { border-color: var(--vt-border-strong); box-shadow: var(--vt-shadow-soft); }

.ref-trigger__meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.ref-trigger__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vt-text-muted); }
.ref-trigger__value { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.86rem; font-weight: 600; color: var(--vt-text-primary); white-space: nowrap; }
.ref-trigger__ico { display: inline-flex; color: var(--vt-text-secondary); }
.ref-trigger__caret { color: var(--vt-text-muted); display: inline-flex; }

/* Camada que escurece a página e fecha o menu ao clicar fora dele. */
.ref-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--vt-scrim-popover); animation: vt-modal-fade 0.15s ease-out; }

.ref-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-width: 88vw;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    box-shadow: var(--vt-shadow-card);
    padding: 0.4rem;
    z-index: 50;
}

.ref-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.65rem;
    background: none;
    border: none;
    border-radius: var(--vt-radius-sm);
    cursor: pointer;
    text-align: left;
}
.ref-option:hover { background: var(--vt-surface-muted); }
.ref-option.is-active { background: var(--vt-tint-accent); }
.ref-option__ico { display: inline-flex; flex: none; margin-top: 1px; color: var(--vt-text-secondary); }
.ref-option.is-active .ref-option__ico { color: #4f6b00; }
.ref-option__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ref-option__title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; color: var(--vt-text-primary); }
.ref-option__tag {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: lowercase;
    color: #4f6b00;
    background: var(--vt-tint-accent);
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
}
.ref-option__desc { font-size: 0.78rem; line-height: 1.35; color: var(--vt-text-muted); }
.ref-option__check { margin-left: auto; flex: none; color: #4f6b00; display: inline-flex; }

/* Confirmação discreta (snackbar) após trocar a referência. */
.ref-toast {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 360px;
    padding: 0.75rem 0.9rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-success);
    border-left: 4px solid var(--vt-success);
    border-radius: var(--vt-radius-md);
    box-shadow: var(--vt-shadow-card);
    animation: ref-toast-in 0.2s ease;
}
.ref-toast__ico { color: var(--vt-success); display: inline-flex; flex: none; margin-top: 1px; }
.ref-toast__body { display: flex; flex-direction: column; gap: 0.1rem; }
.ref-toast__title { font-size: 0.88rem; font-weight: 600; color: var(--vt-text-primary); }
.ref-toast__text { font-size: 0.8rem; color: var(--vt-text-muted); }
@keyframes ref-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Seletor global de Período histórico (cabeçalho) ─────────────────────────────────────────────
   Terceiro contexto da aplicação, ao lado de Perfil e Referência. Gatilho compacto quando fechado;
   popover de duas colunas (atalhos | navegação temporal) quando aberto. */
.period-selector { position: relative; flex: none; }

.period-trigger {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.6rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.period-trigger:hover { border-color: var(--vt-border-strong); }
.period-selector.is-open .period-trigger { border-color: var(--vt-border-strong); box-shadow: var(--vt-shadow-soft); }

.period-trigger__ico { display: inline-flex; color: var(--vt-text-secondary); flex: none; }
.period-trigger__meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.period-trigger__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vt-text-muted); }
.period-trigger__value { font-size: 0.86rem; font-weight: 600; color: var(--vt-text-primary); white-space: nowrap; }
.period-trigger__caret { color: var(--vt-text-muted); display: inline-flex; }
/* Rótulo curto do período: escondido no desktop; o intervalo completo (.period-trigger__value) é o normal. */
.period-trigger__short { display: none; font-size: 0.82rem; font-weight: 600; color: var(--vt-text-primary); white-space: nowrap; }

/* ── Cabeçalho compacto (≤900px, onde a busca central já desaparece) ──────────────────────────────
   Os gatilhos de Período e Referência são os maiores consumidores de largura e, cheios, esmagam o
   seletor de perfil à esquerda (a ponto de o subtítulo quebrar linha e vazar para baixo da barra).
   Aqui eles encolhem: o período troca o intervalo completo por um rótulo curto ("6 meses") e a referência
   fica só com o ícone (o valor por extenso é lido ao abrir o menu). O CTA "Novo episódio" só vira ícone
   nos celulares (≤640px), no CSS da própria TopBar, onde o espaço realmente aperta. */
@media (max-width: 900px) {
    /* Altura uniforme (40px de borda a borda) para os gatilhos ficarem alinhados com o restante da
       fileira (perfil, ícone, CTA). border-box porque o projeto não tem reset de box-sizing. */
    .period-trigger { gap: 0.3rem; padding: 0.3rem 0.5rem; height: 40px; box-sizing: border-box; }
    .period-trigger__meta { display: none; }
    .period-trigger__short { display: inline; }
    .period-trigger__caret { display: none; }

    .ref-trigger { gap: 0.3rem; padding: 0.3rem 0.5rem; height: 40px; box-sizing: border-box; }
    .ref-trigger__label { display: none; }
    .ref-trigger__text { display: none; }
    .ref-trigger__caret { display: none; }
}

.period-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--vt-scrim-popover); animation: vt-modal-fade 0.15s ease-out; }

.period-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 760px;
    max-width: 93vw;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: 16px;
    box-shadow: var(--vt-shadow-card);
    padding: 1.4rem 1.6rem 1.5rem;
    z-index: 50;
}
.period-popover__title { font-size: 1rem; font-weight: 700; color: var(--vt-text-primary); margin-bottom: 1.1rem; }
.period-popover__grid { display: grid; grid-template-columns: 216px 1fr; gap: 2rem; }

/* Coluna de atalhos. */
.period-presets { display: flex; flex-direction: column; gap: 0.5rem; }
.period-preset {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: 999px;
    cursor: pointer;
    text-align: left;
    font-size: 0.86rem;
    color: var(--vt-text-secondary);
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.period-preset:hover:not(:disabled):not(.period-preset--custom) { background: var(--vt-surface-muted); color: var(--vt-text-primary); }
.period-preset:disabled { opacity: 0.5; cursor: default; }
.period-preset.is-locked { cursor: pointer; opacity: 0.75; }
.period-preset.is-active { background: var(--vt-tint-accent); border-color: var(--vt-primary-accent); color: var(--vt-text-primary); font-weight: 600; }
.period-preset__ico { display: inline-flex; color: var(--vt-text-muted); flex: none; }
.period-preset.is-active .period-preset__ico { color: #4f6b00; }
.period-preset__label { min-width: 0; }
.period-preset__check { margin-left: auto; color: #4f6b00; display: inline-flex; flex: none; }
.period-preset__lock { margin-left: auto; color: var(--vt-text-muted); display: inline-flex; flex: none; }

.period-preset--custom { margin-top: 0.5rem; border-style: dashed; cursor: default; }
.period-preset--custom.is-active { border-style: solid; }
.period-preset__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--vt-primary-accent); flex: none; }
.period-preset__pencil { margin-left: auto; color: var(--vt-text-muted); display: inline-flex; flex: none; }

/* Área principal. */
.period-main { display: flex; flex-direction: column; min-width: 0; }
.period-main__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.2rem; }
.period-main__title { font-size: 0.9rem; font-weight: 600; color: var(--vt-text-primary); }
.period-main__range { font-size: 0.8rem; color: var(--vt-text-muted); white-space: nowrap; }

.period-empty { font-size: 0.84rem; color: var(--vt-text-muted); padding: 1.4rem 0; text-align: center; }

/* Navegador temporal + a dica "?" ancorada no canto inferior direito, como na referência. */
.period-nav { position: relative; }
.period-nav__help {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    color: var(--vt-text-muted);
    cursor: help;
}
.period-nav__help:hover { color: var(--vt-text-secondary); }

.period-dates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0.9rem; margin-top: 1.3rem; }
.period-date { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.period-date label { font-size: 0.8rem; font-weight: 600; color: var(--vt-text-secondary); }
.period-date__input { display: flex; }
.period-date__input input {
    width: 100%;
    padding: 0.6rem 0.7rem;
    font-size: 0.9rem;
    color: var(--vt-text-primary);
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: 10px;
}
.period-date__input input:hover { border-color: var(--vt-border-strong); }
.period-date__input input:focus-visible { outline: 2px solid var(--vt-primary-accent); outline-offset: 1px; }
/* Campos limpos como na referência: sem os steppers nativos; o glifo de calendário fica discreto à direita. */
.period-date__input input::-webkit-inner-spin-button,
.period-date__input input::-webkit-clear-button { display: none; -webkit-appearance: none; }
.period-date__input input::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
.period-date__input input::-webkit-calendar-picker-indicator:hover { opacity: 0.8; }
.period-dates__sep { font-size: 0.85rem; color: var(--vt-text-muted); padding-bottom: 0.7rem; }

.period-duration {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 1.3rem auto 0;
    padding: 0.45rem 0.95rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: #4f6b00;
    background: var(--vt-tint-accent);
    border-radius: 999px;
}
.period-duration .vt-ico { color: #4f6b00; }

.period-footer { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.5rem; }

@media (max-width: 720px) {
    /* No celular o popover não pende da alça (que fica no meio da barra e transbordaria para fora da tela):
       fixa-se à viewport, logo abaixo da barra superior, ocupando a largura com folga e rolando se preciso. */
    .period-popover {
        position: fixed;
        top: calc(var(--vt-topbar-height) + 6px);
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - var(--vt-topbar-height) - 16px);
        overflow-y: auto;
        padding: 1rem 1.1rem 1.15rem;
    }
    .period-popover__title { margin-bottom: 0.9rem; }
    .period-popover__grid { grid-template-columns: 1fr; gap: 1.2rem; }
    .period-presets { flex-flow: row wrap; }
    .period-preset { width: auto; }
    .period-preset--custom { margin-top: 0; }
    .period-dates { grid-template-columns: 1fr; }
    .period-dates__sep { display: none; }
}

/* ---------- PeriodPickerPopover reusável (popover de período ancorado a qualquer gatilho) ----------
   Reaproveita todo o visual .period-* (presets/navegador/campos/rodapé); só troca a ancoragem: em vez de pender
   da barra superior, posiciona-se em relação ao elemento que o abriu (envolto num .pp-anchor). */
.pp-anchor { position: relative; display: inline-block; }
.pp-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--vt-scrim-popover); animation: vt-modal-fade 0.15s ease-out; }
.period-popover__grid--single { grid-template-columns: 1fr; }

@media (min-width: 721px) {
    /* Sem coluna de presets o popover é estreito; com presets, alarga para caber os dois blocos. */
    .pp-popover { width: 460px; }
    .pp-popover--wide { width: 720px; }
    /* Ancoragem em relação ao gatilho (o .period-popover base ancora à direita da barra superior). */
    .pp-popover--below-left { top: calc(100% + 8px); left: 0; right: auto; }
    .pp-popover--below-right { top: calc(100% + 8px); right: 0; left: auto; }
    .pp-popover--right { top: 0; left: calc(100% + 8px); right: auto; }
}

/* Right-aligned row above the markers grid (hosts the "Comparar marcadores" action). */
.mk-reference-bar { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; }

/* Seletor "Agrupar por" à esquerda da barra (empurra o restante para a direita com margin-right auto). */
.mk-group-select { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: auto; }
.mk-group-select .mk-field-label { margin: 0; white-space: nowrap; }
.mk-group-select .cf-filter-select { width: auto; padding: 0.4rem 0.55rem; font-size: 0.84rem; }

/* ---- Barra do modo de comparação ----
   Toma o lugar do botão "Comparar marcadores" e se destaca do resto da tela de propósito: enquanto ela
   estiver aí, a grade se comporta de outro jeito (a linha marca em vez de abrir o marcador), e isso precisa
   ser evidente.

   Fundo escuro, e não o tint do acento: o botão principal É o acento lime, e lime sobre lime não se separa.
   Escuro + lime é o par de maior contraste da marca — o mesmo da barra lateral —, então a barra se distingue
   de tudo à volta e o CTA salta dentro dela. */
.mk-compare-bar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.8rem 1rem;
    margin-bottom: 0.85rem;
    background: var(--vt-sidebar-bg);
    border-radius: var(--vt-radius-md);
    box-shadow: var(--vt-shadow-soft);
}

.mk-compare-icon { display: inline-flex; flex: none; color: var(--vt-primary-accent); }
.mk-compare-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.mk-compare-text strong { font-size: 0.9rem; color: var(--vt-text-inverse); }
.mk-compare-hint { font-size: 0.78rem; color: rgba(255, 255, 255, 0.65); line-height: 1.4; }

/* O ghost padrão é branco sobre claro; aqui competiria com o lime pela atenção. Sobre o escuro ele vira
   contorno, deixando o CTA ser o único elemento cheio da barra. */
.mk-compare-bar .vt-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--vt-text-inverse);
}

.mk-compare-bar .vt-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--vt-text-inverse);
}

/* Empurra as ações para a direita e mantém-nas juntas ao quebrar a linha no celular. */
.mk-compare-actions { display: flex; gap: 0.5rem; margin-left: auto; flex: none; }

/* ---- Coluna de seleção da grade (só no modo de comparação) ---- */
.mk-col-check { width: 42px; text-align: center; }
.mk-check { width: 16px; height: 16px; accent-color: var(--vt-primary-accent); cursor: pointer; margin: 0; }

/* Linha marcada: o mesmo acento da barra, para o que está escolhido se ler de relance. */
.mk-grid tbody tr.mk-row.is-selected { background: var(--vt-tint-accent); }
.mk-grid tbody tr.mk-row.is-selected:hover { background: rgba(148, 197, 20, 0.28); }

@media (max-width: 640px) {
    /* Num card estreito as ações caem para a linha de baixo e ocupam a largura toda. */
    .mk-compare-actions { margin-left: 0; width: 100%; }
    .mk-compare-actions .vt-btn { flex: 1 1 auto; justify-content: center; }
}

/* Admin-only shortcut shown (in catalog reference mode) where a marker has no approved catalog range. */
.mk-catalog-link { font-size: 0.8rem; font-weight: 600; color: var(--vt-primary-accent); text-decoration: none; white-space: nowrap; }
.mk-catalog-link:hover { text-decoration: underline; }

.mt-control-hint { font-size: 0.8rem; color: var(--vt-text-muted); line-height: 1.45; }

.mt-control-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vt-info);
    cursor: pointer;
}

.mt-control-link:hover { text-decoration: underline; }

/* ---- Legenda do gráfico ----
   Faixas de referência e episódios na mesma tira, logo abaixo do gráfico: explicam o mesmo desenho, então
   ficam onde o desenho está — antes as referências moravam num card no topo da página, longe do que
   descreviam. Cada entrada é um chip; a explicação longa vai no title. */
.mt-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
    margin-top: 0.75rem;
}

.mt-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.45rem;
    border: none;
    border-radius: var(--vt-radius-sm);
    background: none;
    font: inherit;
    font-size: 0.78rem;
    color: var(--vt-text-secondary);
    cursor: help;
}

/* Chip que também é um controle (os episódios: apontar destaca a linha, clicar fixa o destaque). */
.mt-legend-chip--action { cursor: pointer; }
.mt-legend-chip--action:hover,
.mt-legend-chip--action.is-active { background: var(--vt-surface-muted); color: var(--vt-text-primary); }
.mt-legend-chip:focus-visible { outline: 2px solid var(--vt-text-primary); outline-offset: 1px; }

/* Traço tracejado igual ao desenhado no gráfico, para a ligação ser imediata. */
.mt-legend-dash {
    width: 18px;
    height: 0;
    flex: none;
    border-top: 2px dashed currentColor;
}

/* Retângulo sólido esmaecido, como a faixa sombreada do gráfico. */
.mt-legend-band {
    width: 18px;
    height: 10px;
    flex: none;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.25;
}

.mt-legend-ico { display: inline-flex; flex: none; }

/* Separador entre os grupos da legenda (referências | episódios). */
.mt-legend-sep {
    width: 1px;
    align-self: stretch;
    margin: 0.1rem 0.25rem;
    background: var(--vt-border);
}

/* ---- Resumo card ---- */
.mt-summary { gap: 1rem; }

.mt-summary-count { display: flex; align-items: baseline; gap: 0.4rem; }
.mt-summary-count-val { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--vt-text-primary); }
.mt-summary-count-label { font-size: 0.85rem; color: var(--vt-text-secondary); }

.mt-summary-dates { display: flex; flex-direction: column; gap: 0.6rem; }
.mt-summary-date { display: flex; align-items: center; gap: 0.55rem; }
.mt-summary-date-ico { color: var(--vt-text-muted); display: inline-flex; flex: none; }
.mt-summary-date-val { font-size: 0.95rem; font-weight: 700; color: var(--vt-text-primary); line-height: 1.15; }
.mt-summary-date-label { font-size: 0.74rem; color: var(--vt-text-muted); }

/* ---- Collapsible episode-grid panel ---- */
.mt-panel { margin-bottom: 1.25rem; padding: 0; overflow: hidden; }

.mt-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    /* O triângulo nativo do <summary> daria dois indicadores de abrir/fechar; o chevron à direita é o do
       design system. Precisa das duas regras: a padrão e a do WebKit. */
    list-style: none;
}

.mt-panel-head::-webkit-details-marker { display: none; }
.mt-panel-head:hover { background: var(--vt-surface-muted); }
.mt-panel-head:focus-visible { outline: 2px solid var(--vt-text-primary); outline-offset: -2px; }

.mt-panel-head-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.mt-panel-title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.98rem; font-weight: 700; color: var(--vt-text-primary); }
.mt-panel-sub { font-size: 0.8rem; color: var(--vt-text-muted); line-height: 1.4; }
.mt-panel-chevron { color: var(--vt-text-muted); display: inline-flex; flex: none; transition: transform 0.15s ease; }
.mt-panel-body { border-top: 1px solid var(--vt-border); }

/* Um só glifo (chevron-down) girado pelo estado do <details>, em vez de trocar de ícone: assim a seta
   anima entre os dois sentidos e o markup não precisa saber se está aberto. */
details[open] > .mt-panel-head .mt-panel-chevron { transform: rotate(180deg); }

/* Corpo das seções que trazem o seu próprio respiro (os cards de gráfico, que antes eram .mt-chart-card). */
.mt-panel-body--pad { padding: 1.25rem 1.4rem; }

/* Nota/aviso dentro de um corpo sem padding (o disclaimer sob uma tabela colada às bordas do card). */
.mt-panel-note { margin: 0; padding: 0.85rem 1.25rem 1rem; }

/* ---- Legenda das séries do gráfico sobreposto (comparação) ----
   Só o sobreposto precisa dela: é onde as linhas dividem um eixo. No modo separado cada sub-painel já se
   identifica no próprio cabeçalho. */
.cmp-series-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0.15rem 0 0.6rem; font-size: 0.75rem; }

.cmp-series-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: default;
    transition: opacity 0.12s;
}

.cmp-series-dot { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* ---- Chips dos marcadores comparados ---- */
.cmp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.cmp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-pill);
    font-size: 0.8rem;
    cursor: default;
    transition: opacity 0.12s;
}

.cmp-chip .mt-chip-x {
    display: inline-flex;
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    color: var(--vt-text-muted);
    cursor: pointer;
}

.cmp-chip .mt-chip-x:hover { color: var(--vt-danger); }
.cmp-add { max-width: 260px; }

@media (prefers-reduced-motion: reduce) {
    .cmp-chip { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cmp-series-legend-item { transition: none; }
}

/* ---- Sub-painel: um gráfico dentro do card que agrupa todos (comparação, modo separado) ----
   Não é um card: já está dentro de um. É um bloco separado por uma linha, com o mesmo cabeçalho clicável.
   O raio e a transição servem ao anel de destaque do marcador sob o cursor (veja MarkerCardStyle). */
.mt-subpanel {
    border-top: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    transition: box-shadow 0.12s, opacity 0.12s;
}

.mt-subpanel:first-of-type { border-top: none; }
.mt-subpanel > .mt-panel-head { padding: 0.7rem 0.25rem; }
.mt-subpanel > .mt-panel-body { border-top: none; padding-bottom: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
    .mt-panel-chevron,
    .mt-subpanel { transition: none; }
}

/* ---- Checkbox + type-dot inside the episode grid ---- */
.mt-check { width: 16px; height: 16px; accent-color: var(--vt-primary-accent); cursor: pointer; margin: 0; }
.mt-type { display: inline-flex; align-items: center; gap: 0.4rem; }
.mt-type-dot { width: 0.6rem; height: 0.6rem; border-radius: 3px; flex: none; }
.mt-col-check { width: 3rem; text-align: center; }

/* Cross-highlight row (chart <-> grid / table) */
.mk-grid tbody tr.mt-row-active { background: var(--vt-tint-accent); }

/* ---- Chart ---- */
.mt-chart-unit { font-size: 0.8rem; color: var(--vt-text-muted); }
.mt-chart svg { width: 100%; height: auto; display: block; }
.mt-chart-empty { color: var(--vt-text-secondary); font-size: 0.9rem; margin: 0; }
.mt-chart-note { margin: 0.65rem 0 0; font-size: 0.8rem; color: var(--vt-text-muted); line-height: 1.5; }

/* Estado "a janela não contém leituras": ocupa a altura do gráfico para o navegador abaixo não saltar. */
.mt-chart-void {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    padding: 1rem;
    text-align: center;
    background: var(--vt-surface-muted);
    border-radius: var(--vt-radius-md);
}

/* Orientação discreta no cabeçalho do gráfico — nunca concorrendo com o título. */
.mt-chart-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--vt-text-muted);
    cursor: help;
}

/* ---- Atalhos de período ----
   Compartilhados pelo gráfico de marcador e pelo período analisado dos índices derivados (dxp): mudar aqui
   muda as duas telas. */
.mt-period { position: relative; margin-bottom: 0.9rem; }

.mt-period-shortcuts { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.mt-period-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 32px;
    padding: 0 0.75rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-pill);
    background: var(--vt-surface);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--vt-text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mt-period-btn:hover { background: var(--vt-surface-muted); color: var(--vt-text-primary); }
.mt-period-btn:focus-visible { outline: 2px solid var(--vt-text-primary); outline-offset: 2px; }

.mt-period-btn.is-active {
    background: var(--vt-primary-accent);
    border-color: var(--vt-primary-accent);
    color: #2c3a00;
}

.mt-period-btn.is-active:hover { background: var(--vt-primary-accent-hover); }

/* ---- Seletor de intervalo personalizado ---- */
.mt-period-picker {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.4rem);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 280px;
    padding: 0.9rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    box-shadow: 0 8px 24px rgba(16, 20, 24, 0.12);
}

.mt-period-picker-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.mt-period-picker-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
.mt-period-picker-error { margin: 0; font-size: 0.76rem; color: var(--vt-danger); line-height: 1.4; }

/* ---- Navegador temporal ---- */
.mt-nav { margin-top: 0.5rem; }

.mt-nav-track {
    position: relative;
    height: 48px;
    background: var(--vt-surface-muted);
    border-radius: var(--vt-radius-sm);
    /* O arraste é do navegador: sem isto o gesto de um dedo vira rolagem vertical da página. */
    touch-action: none;
    overflow: hidden;
}

/* transform-origin à esquerda: o zoom escala/desloca o sparkline a partir da borda esquerda da trilha,
   coerente com a conta de paintView() em marker-navigator.js. */
.mt-nav-spark { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: left center; }

/* O zoom (aproximar/afastar a visão) interpola; o arraste, não — durante o arraste a janela precisa colar
   no ponteiro sem atraso. Por isso a transição só existe enquanto a classe is-zooming está presente, que o
   JS acrescenta apenas pela duração da animação de zoom. */
.mt-nav.is-zooming .mt-nav-spark { transition: transform 0.3s ease; }
.mt-nav.is-zooming .mt-nav-window { transition: left 0.3s ease, width 0.3s ease; }
.mt-nav.is-zooming .mt-nav-axis-tick { transition: transform 0.3s ease, opacity 0.3s ease; }

.mt-nav-window {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    /* Piso visual: numa década de histórico, uma janela de poucos dias renderizaria com um punhado de
       pixels e as duas alças não caberiam nela. Espelha MIN_WINDOW_PX em marker-navigator.js. */
    min-width: 34px;
    background: var(--vt-tint-accent);
    border: 1px solid var(--vt-primary-accent);
    border-radius: var(--vt-radius-sm);
    /* A sombra externa escurece tudo o que está fora da seleção sem elementos próprios — assim as regiões
       atenuadas nunca podem sair de sincronia com a faixa durante o arraste. */
    box-shadow: 0 0 0 2000px rgba(16, 20, 24, 0.06);
    cursor: grab;
}

/* grabbing só quando é a faixa que está sendo arrastada; num arraste de alça o cursor certo é o ew-resize
   da própria alça. */
.mt-nav.is-move .mt-nav-window { cursor: grabbing; }
.mt-nav.is-dragging .mt-nav-window { border-color: var(--vt-primary-accent-hover); }

.mt-nav-body {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: inherit;
}

.mt-nav-body:focus-visible { outline: 2px solid var(--vt-text-primary); outline-offset: -2px; }

.mt-nav-handle {
    flex: none;
    /* Largura confortável para o mouse; o pseudo-elemento abaixo estende a área de toque sem engordar
       visualmente a alça. */
    width: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    border: none;
    border-radius: var(--vt-radius-sm);
    background: var(--vt-primary-accent);
    cursor: ew-resize;
    transition: background 0.15s ease;
}

.mt-nav-handle::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -8px;
    right: -8px;
}

.mt-nav-handle:hover { background: var(--vt-primary-accent-hover); }
.mt-nav-handle:focus-visible { outline: 2px solid var(--vt-text-primary); outline-offset: 1px; z-index: 1; }
.mt-nav.is-start .mt-nav-handle--start,
.mt-nav.is-end .mt-nav-handle--end { background: var(--vt-primary-accent-hover); }

/* Indicador de arraste: duas barras verticais paralelas ("||"), centradas na alça. */
.mt-nav-grip {
    width: 2px;
    height: 14px;
    background: currentColor;
    color: #6b8000;
    box-shadow: 3px 0 0 currentColor;
    transform: translateX(-1.5px);
    border-radius: 1px;
}

.mt-nav-axis { position: relative; height: 1.1rem; margin-top: 0.3rem; }

.mt-nav-axis-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.68rem;
    color: var(--vt-text-muted);
    white-space: nowrap;
}

.mt-nav.is-disabled { opacity: 0.5; pointer-events: none; }

/* Quem opera o navegador por teclado não vê a faixa: este texto anuncia o período selecionado. */
.vt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sem animação para quem pediu menos movimento — o arraste continua respondendo, só não interpola.
   O zoom também salta em vez de interpolar (o JS nem chega a pôr is-zooming nesse caso). */
@media (prefers-reduced-motion: reduce) {
    .mt-period-btn,
    .mt-nav-handle,
    .mt-nav.is-zooming .mt-nav-spark,
    .mt-nav.is-zooming .mt-nav-window,
    .mt-nav.is-zooming .mt-nav-axis-tick { transition: none; }
}

@media (max-width: 640px) {
    /* Atalhos em rolagem horizontal própria: nunca a página inteira. */
    .mt-period-shortcuts {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .mt-period-picker { left: 0; right: 0; min-width: 0; }
    .mt-period-picker-fields { grid-template-columns: 1fr; }

    /* Alvo de toque maior no celular, onde a precisão é menor — sem passar do piso de 34px da janela,
       que as duas alças precisam caber. O ::after estende a área de toque para além do desenho. */
    .mt-nav-track { height: 56px; }
    .mt-nav-handle { width: 16px; }
    .mt-nav-handle::after { left: -10px; right: -10px; }
}

/* Aviso de que a grade está recortada pelo período do gráfico, com o atalho de volta ao histórico completo.
   Fica no cabeçalho da seção, ao lado do título, para a filtragem nunca ser silenciosa. */
.mt-filter-note {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--vt-text-muted);
}

.mt-filter-note > svg,
.mt-filter-note .vt-ico { flex: none; }

/* ---- Section heading count chip ---- */
.mt-count {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vt-text-secondary);
    background: var(--vt-surface-muted);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-pill);
    padding: 0.05rem 0.55rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

/* ---- Associate-episode form ---- */
/* Vive dentro do corpo de um card recolhível, então traz o seu próprio padding e não precisa de margem
   acima (o cabeçalho do card já a separa do que vem antes). */
.mt-associate {
    display: flex;
    gap: 0.85rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 1.1rem 1.25rem;
}

.mt-associate .dv-field { flex: 1 1 220px; }

.mt-disclaimer { margin-top: 0.85rem; font-size: 0.8rem; color: var(--vt-text-muted); line-height: 1.5; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .mt-associate .dv-field { flex: 1 1 auto; width: 100%; }
}

/* =========================================================================================
   Tela inicial (.home-*)
   Um único conjunto de classes atende a Home do paciente e a do gestor: os mesmos cartões
   são reaproveitados, mudando apenas a composição. Layout fluido, sem implementação separada
   para mobile.
   ========================================================================================= */

.home {
    /* Ocupa toda a largura da área de conteúdo (.vt-content), como a linha do tempo e os marcadores. */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ---- Cabeçalho ---- */
.home-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
}

.home-head__main { min-width: 0; }

.home-head__identity,
.home-head__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin: .5rem 0 0;
    font-size: .9rem;
    color: var(--vt-text-secondary);
}

.home-head__name { font-weight: 600; color: var(--vt-text-primary); }

.home-head__stats { font-size: .85rem; color: var(--vt-text-muted); }

.home-head__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
}

.home-head__plan {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .15rem;
    font-size: .85rem;
}

.home-head__plan-name { font-weight: 600; color: var(--vt-text-primary); }

.home-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- Alerta crítico ----
   Presente sem transformar a tela inteira em vermelho: tinta suave e barra lateral. */
.home-critical {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--vt-tint-danger);
    border-color: transparent;
    border-left: 4px solid var(--vt-clinical-critical);
}

.home-critical__ico { color: var(--vt-clinical-critical); display: inline-flex; flex: 0 0 auto; }

.home-critical__body { flex: 1 1 auto; min-width: 0; }

.home-critical__title { margin: 0; font-weight: 600; color: var(--vt-text-primary); }

.home-critical__text { margin: .15rem 0 0; font-size: .9rem; color: var(--vt-text-secondary); }

.home-critical__action {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 44px;
    padding: 0 .5rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--vt-clinical-critical);
    text-decoration: none;
    white-space: nowrap;
}

.home-critical__action:hover { text-decoration: underline; }

/* ---- Barra da referência ativa ---- */
.home-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

/* ---- Resumo por situação ---- */
.home-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.home-summary__tile {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem;
}

.home-summary__body { display: flex; flex-direction: column; min-width: 0; }

/* Tile clicável: leva à lista de marcadores filtrada por esta situação. */
.home-summary__tile--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}

.home-summary__tile--link:hover {
    border-color: var(--vt-border-strong);
    box-shadow: var(--vt-shadow-card);
    transform: translateY(-1px);
}

.home-summary__tile--link:focus-visible {
    outline: 2px solid var(--vt-primary-accent);
    outline-offset: 2px;
}

/* Seta à direita: empurrada para o fim do tile, esmaecida, realça no hover. */
.home-summary__chevron { margin-left: auto; color: var(--vt-text-muted); display: inline-flex; }

.home-summary__tile--link:hover .home-summary__chevron { color: var(--vt-text-primary); }

.home-summary__label { font-size: .82rem; color: var(--vt-text-secondary); }

.home-summary__value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--vt-text-primary); }

.home-summary__unit { font-size: .75rem; color: var(--vt-text-muted); }

/* ---- Grade principal ---- */
.home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.25rem;
    align-items: start;
}

.home-grid__main,
.home-grid__aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* ---- Cartão genérico da Home ---- */
.home-panel { padding: 1.15rem 1.25rem; }

.home-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.home-panel__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--vt-text-primary); }

.home-panel__link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--vt-text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.home-panel__link:hover { color: var(--vt-text-primary); text-decoration: underline; }

.home-panel__empty,
.home-panel__hint {
    margin: 0;
    font-size: .88rem;
    color: var(--vt-text-secondary);
}

.home-panel__hint { margin-bottom: .6rem; color: var(--vt-text-muted); font-size: .82rem; }

/* ---- Listas ---- */
.home-list { list-style: none; margin: 0; padding: 0; }

.home-list__item { border-top: 1px solid var(--vt-border); }

.home-list__item:first-child { border-top: none; }

.home-list__link,
.home-list__item.home-task {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    padding: .7rem 0;
    text-decoration: none;
    color: inherit;
}

.home-list__link:hover { background: var(--vt-surface-muted); }

.home-list__ico {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--vt-text-muted);
}

.home-list__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }

.home-list__name { font-weight: 600; font-size: .92rem; color: var(--vt-text-primary); }

.home-list__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    font-size: .82rem;
    color: var(--vt-text-secondary);
}

.home-list__value { font-variant-numeric: tabular-nums; }

.home-list__spark { flex: 0 0 auto; display: inline-flex; }

.home-list__chevron { flex: 0 0 auto; color: var(--vt-text-muted); display: inline-flex; }

/* ---- Mudanças entre medições ---- */
.home-change__values {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-variant-numeric: tabular-nums;
}

.home-change__arrow { color: var(--vt-text-muted); }

.home-change__to { font-weight: 600; color: var(--vt-text-primary); }

/* ---- Tarefas ---- */
.home-task__group {
    margin: .9rem 0 .3rem;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vt-text-muted);
}

.home-task__actions { display: flex; flex-wrap: wrap; gap: .4rem; flex: 0 0 auto; }

/* ---- Favoritos ---- */
.home-favorites {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .9rem;
}

.home-favorite {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .85rem .9rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
}

.home-favorite__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }

.home-favorite__name {
    font-weight: 600;
    font-size: .9rem;
    color: var(--vt-text-primary);
    text-decoration: none;
}

.home-favorite__name:hover { text-decoration: underline; }

.home-favorite__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -.6rem -.5rem -.6rem 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--vt-warning);
}

.home-favorite__star:disabled { opacity: .5; cursor: default; }

.home-favorite__value { margin: 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.home-favorite__unit { font-size: .85rem; font-weight: 500; color: var(--vt-text-muted); }

.home-favorite__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8rem; }

/* ---- Última coleta ---- */
.home-collection__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    margin: 0 0 .75rem;
    font-size: .88rem;
}

.home-collection__date { font-weight: 600; color: var(--vt-text-primary); }

.home-collection__counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: .6rem;
    margin: 0;
}

.home-collection__count { display: flex; flex-direction: column; gap: .1rem; }

.home-collection__count dt { font-size: .75rem; color: var(--vt-text-muted); }

.home-collection__count dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--vt-text-primary);
}

.home-collection__count--critical dd { color: var(--vt-clinical-critical); }

/* ---- Exames recentes (grade de cartões) ---- */
.home-exams { margin: 0; }

.home-exams__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin: 0 0 1rem;
}

.home-exams__heading { display: flex; flex-direction: column; gap: .2rem; }

.home-exams__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vt-text-primary);
}

.home-exams__title-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--vt-radius-md);
    background: var(--vt-tint-exam);
    color: var(--vt-clinical-exam);
}

.home-exams__subtitle { margin: 0; font-size: .85rem; color: var(--vt-text-muted); }

.home-exams__all { flex-shrink: 0; }

.home-exams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

/* Cartão de exame: coluna, para o rodapé assentar embaixo mesmo com contagens de alturas diferentes. */
.home-exam {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.1rem 1.15rem;
}

.home-exam__top { display: flex; align-items: flex-start; gap: .6rem; }

.home-exam__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--vt-radius-md);
    background: var(--vt-tint-exam);
    color: var(--vt-clinical-exam);
}

/* min-width:0 permite que o nome do arquivo trunque em vez de esticar o cartão. */
.home-exam__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }

.home-exam__date { font-size: .95rem; font-weight: 700; color: var(--vt-text-primary); }

.home-exam__source {
    display: block;
    max-width: 100%;
    font-size: .8rem;
    color: var(--vt-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menu de ações (<details>): esconde o marcador nativo e vira um botão-ícone. */
.home-exam__menu { position: relative; flex-shrink: 0; }

.home-exam__menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--vt-radius-sm);
    color: var(--vt-text-muted);
    cursor: pointer;
    list-style: none;
}

.home-exam__menu-btn::-webkit-details-marker { display: none; }

.home-exam__menu-btn:hover { background: var(--vt-surface-muted); color: var(--vt-text-primary); }

.home-exam__menu-list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding: .3rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    box-shadow: var(--vt-shadow-card);
}

.home-exam__menu-list a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .55rem;
    border-radius: var(--vt-radius-sm);
    font-size: .85rem;
    color: var(--vt-text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.home-exam__menu-list a:hover { background: var(--vt-surface-muted); }

.home-exam__counts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: .5rem;
    margin: 0;
}

.home-exam__count { display: flex; flex-direction: column; gap: .15rem; }

.home-exam__count dt { font-size: .72rem; color: var(--vt-text-muted); }

.home-exam__count dd {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--vt-text-primary);
}

.home-exam__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.home-exam__dot--total { background: var(--vt-clinical-exam); }
.home-exam__dot--ok    { background: var(--vt-success); }
.home-exam__dot--warn  { background: var(--vt-warning); }
.home-exam__dot--crit  { background: var(--vt-danger); }

/* Barra de proporção de alterados — informativa, na cor de exame. */
.home-exam__bar { display: flex; flex-direction: column; gap: .3rem; }

.home-exam__bar-track {
    height: 6px;
    border-radius: var(--vt-radius-pill);
    background: var(--vt-surface-muted);
    overflow: hidden;
}

.home-exam__bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--vt-clinical-exam);
    transition: width .2s ease;
}

.home-exam__bar-label { font-size: .74rem; color: var(--vt-text-muted); }

.home-exam__foot { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }

.home-exam__btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }

/* Cartão-lugar: mesma silhueta, borda tracejada, conteúdo centralizado. */
.home-exam--empty {
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 190px;
    text-align: center;
    background: transparent;
    border-style: dashed;
    border-color: var(--vt-border-strong);
    box-shadow: none;
}

.home-exam__empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--vt-radius-md);
    background: var(--vt-surface-muted);
    color: var(--vt-text-muted);
}

.home-exam__empty-title { font-weight: 600; color: var(--vt-text-secondary); }

.home-exam__empty-text { max-width: 24ch; font-size: .8rem; color: var(--vt-text-muted); }

/* ---- Métricas complementares ---- */
.home-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

/* ---- Primeiros passos ---- */
.home-steps__progress {
    height: 6px;
    border-radius: var(--vt-radius-pill);
    background: var(--vt-surface-muted);
    overflow: hidden;
    margin-bottom: .9rem;
}

.home-steps__bar { display: block; height: 100%; background: var(--vt-primary-accent); }

.home-steps { list-style: none; margin: 0; padding: 0; }

.home-steps__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    border-top: 1px solid var(--vt-border);
}

.home-steps__item:first-child { border-top: none; }

.home-steps__ico { display: inline-flex; color: var(--vt-text-muted); }

.home-steps__item.is-done .home-steps__ico { color: var(--vt-success); }

.home-steps__link { flex: 1 1 auto; font-size: .92rem; color: var(--vt-text-primary); text-decoration: none; }

.home-steps__link:hover { text-decoration: underline; }

.home-steps__state { font-size: .8rem; color: var(--vt-text-muted); }

.home-steps__cta { margin-top: 1rem; align-self: flex-start; }

/* ---- Prévia de exemplo ----
   Cinza, opaca e sem interação por requisito de segurança: nada aqui pode ser confundido com
   um dado real do usuário. */
.home-sample { display: flex; flex-direction: column; gap: .6rem; }

.home-sample__head { display: flex; align-items: center; gap: .6rem; }

.home-sample__disclaimer { margin: 0; font-size: .82rem; color: var(--vt-text-muted); }

.home-sample__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    filter: grayscale(1);
    opacity: .45;
    pointer-events: none;
    user-select: none;
    cursor: default;
}

.home-sample__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.home-sample__tile,
.home-sample__panel { padding: 1rem 1.1rem; }

.home-sample__tile { display: flex; flex-direction: column; }

.home-sample__label { font-size: .82rem; color: var(--vt-text-secondary); }

.home-sample__value { font-size: 1.6rem; font-weight: 700; color: var(--vt-text-primary); }

.home-sample__unit { font-size: .75rem; color: var(--vt-text-muted); }

.home-sample__panel-title { font-weight: 600; font-size: .95rem; }

.home-sample__list { list-style: none; margin: .6rem 0 0; padding: 0; }

.home-sample__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
    border-top: 1px solid var(--vt-border);
    font-size: .85rem;
}

.home-sample__marker { flex: 1 1 auto; }

/* ---- Rodapé de responsabilidade ---- */
.home-disclaimer {
    margin: 0;
    padding-top: .5rem;
    font-size: .8rem;
    color: var(--vt-text-muted);
}

/* ---- Responsivo ---- */
@media (max-width: 1180px) {
    .home-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
    .home-summary,
    .home-metrics,
    .home-sample__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .home { gap: 1.15rem; }

    .home-head { flex-direction: column; align-items: stretch; }

    .home-head__aside { align-items: stretch; }

    .home-head__plan { align-items: flex-start; }

    .home-head__actions .vt-btn { flex: 1 1 auto; justify-content: center; }

    .home-summary,
    .home-metrics,
    .home-sample__grid { grid-template-columns: minmax(0, 1fr); }

    .home-critical { flex-wrap: wrap; }

    .home-critical__action { padding-left: 0; }

    /* A tendência sai no mobile: uma sparkline espremida não é interpretável. */
    .home-list__spark { display: none; }

    .home-list__item.home-task { flex-wrap: wrap; }

    .home-task__actions { width: 100%; padding-left: 1.65rem; }

    .home-favorites { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .home-list__link { transition: none; }
}

/* ---- Acessos ao perfil (.home-access-*) ---- */
.home-access__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
}

.home-access__field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: .85rem;
    color: var(--vt-text-secondary);
}

.home-access__field--grow { flex: 1 1 18rem; }

.home-access__field select,
.home-access__field input {
    min-height: 44px;
    padding: 0 .7rem;
    border: 1px solid var(--vt-border-strong);
    border-radius: var(--vt-radius-sm);
    background: var(--vt-surface);
    color: var(--vt-text-primary);
    font: inherit;
}

/* O código é segredo portador e aparece uma única vez; destaque neutro, sem cor semântica clínica. */
.home-access__code {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border: 1px dashed var(--vt-border-strong);
    border-radius: var(--vt-radius-md);
    background: var(--vt-surface-muted);
}

.home-access__code-label { margin: 0 0 .5rem; font-size: .82rem; color: var(--vt-text-secondary); }

.home-access__code-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    word-break: break-all;
    color: var(--vt-text-primary);
}

.home-access__status { margin: .85rem 0 0; font-size: .88rem; }

.home-access__ok {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--vt-text-primary);
}

.home-access__error { margin: .75rem 0 0; font-size: .88rem; color: var(--vt-danger); }

/* Linha do código gerado: o valor à esquerda, o botão "Copiar" à direita. */
.home-access__code-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

.home-access__code-row .home-access__code-value { flex: 1 1 auto; }

.home-access__code-expiry { margin: .6rem 0 0; font-size: .8rem; color: var(--vt-text-secondary); }

/* Confirmação de resgate: reaproveita o cartão neutro do código, agora com acento de sucesso. */
.home-access__code--ok {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-style: solid;
    border-color: var(--vt-success);
    background: var(--vt-tint-accent);
}

.home-access__code--ok .home-access__ok { color: var(--vt-success); }

/* Frase de apoio no topo de um painel, antes do formulário. */
.home-panel__lead {
    margin: -.25rem 0 .9rem;
    font-size: .88rem;
    color: var(--vt-text-secondary);
}

/* ---- Alternador de intenção (conceder × resgatar) ---- */
.acc-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.acc-mode {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1rem;
    text-align: left;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.acc-mode:hover { border-color: var(--vt-border-strong); }
.acc-mode:focus-visible { outline: 2px solid var(--vt-text-primary); outline-offset: 2px; }

/* Aba ativa: borda de destaque + fundo tingido, alinhado ao card-filtro da Home. */
.acc-mode.is-active {
    border-color: var(--vt-primary-accent);
    box-shadow: inset 0 0 0 1px var(--vt-primary-accent);
    background: var(--vt-tint-accent);
}

.acc-mode__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--vt-radius-sm);
    background: var(--vt-surface-muted);
    color: var(--vt-text-secondary);
}

.acc-mode.is-active .acc-mode__ico { color: #2c3a00; background: var(--vt-primary-accent); }

.acc-mode__text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.acc-mode__title { font-size: .95rem; font-weight: 600; color: var(--vt-text-primary); }
.acc-mode__hint { font-size: .8rem; color: var(--vt-text-secondary); }

/* Estado vazio de "quem tem acesso": ícone discreto + frase. */
.acc-empty {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--vt-text-muted);
}

.acc-empty__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: var(--vt-surface-muted);
    color: var(--vt-text-secondary);
}

.acc-empty .home-panel__empty { margin: 0; }

@media (max-width: 640px) {
    .home-access__form { flex-direction: column; align-items: stretch; }
    .home-access__form .vt-btn { justify-content: center; }
    .acc-modes { grid-template-columns: 1fr; }
}

/* =========================================================================================
   Home do gestor (.home-portfolio-*, .home-active-*, .home-detail-*)
   ========================================================================================= */

/* ---- Barra de resumo da carteira ---- */
.home-portfolio__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.home-portfolio__tile {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.1rem;
    text-align: left;
    cursor: pointer;
    background: var(--vt-surface);
    transition: border-color .12s ease;
}

.home-portfolio__tile:hover { border-color: var(--vt-border-strong); }

/* Card ativo como filtro: borda de destaque além da cor do medalhão, mais o estado aria-pressed. */
.home-portfolio__tile.is-active {
    border-color: var(--vt-primary-accent);
    box-shadow: inset 0 0 0 1px var(--vt-primary-accent);
}

.home-portfolio__tile-body { display: flex; flex-direction: column; min-width: 0; }

.home-portfolio__tile-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--vt-text-primary); }

.home-portfolio__tile-label { font-size: .82rem; color: var(--vt-text-secondary); }

/* ---- Controles: busca + abas ---- */
.home-portfolio__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .85rem;
}

.home-portfolio__search {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 16rem;
    min-height: 44px;
    padding: 0 .75rem;
    border: 1px solid var(--vt-border-strong);
    border-radius: var(--vt-radius-sm);
    color: var(--vt-text-muted);
}

.home-portfolio__search input {
    flex: 1 1 auto;
    border: none;
    background: none;
    font: inherit;
    color: var(--vt-text-primary);
    outline: none;
}

.home-portfolio__tabs { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---- Lista de perfis ---- */
.home-portfolio__list { list-style: none; margin: 0; padding: 0; }

.home-portfolio__row { border-top: 1px solid var(--vt-border); }

.home-portfolio__row:first-child { border-top: none; }

.home-portfolio__row.is-active { background: var(--vt-tint-accent); }

.home-portfolio__select {
    display: grid;
    grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1.6fr) auto auto;
    align-items: center;
    gap: .9rem;
    width: 100%;
    min-height: 56px;
    padding: .7rem .5rem;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}

.home-portfolio__select:hover { background: var(--vt-surface-muted); }

.home-portfolio__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--vt-radius-pill);
    background: var(--vt-surface-muted);
    font-size: .82rem;
    font-weight: 600;
    color: var(--vt-text-secondary);
}

.home-portfolio__identity { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }

.home-portfolio__name { font-weight: 600; color: var(--vt-text-primary); }

.home-portfolio__demo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
    font-size: .8rem;
    color: var(--vt-text-secondary);
}

.home-portfolio__reason { display: flex; align-items: center; gap: .5rem; min-width: 0; }

.home-portfolio__reason-ico { flex: 0 0 auto; color: var(--vt-text-muted); display: inline-flex; }

.home-portfolio__reason-text { display: block; font-size: .82rem; color: var(--vt-text-secondary); margin-top: .15rem; }

.home-portfolio__last { display: flex; flex-direction: column; font-size: .82rem; color: var(--vt-text-primary); text-align: right; }

.home-portfolio__chevron { color: var(--vt-text-muted); display: inline-flex; }

/* ---- Separação carteira / paciente ativo ---- */
.home-detail-region {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: .5rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--vt-border-strong);
}

/* Faixa persistente do paciente ativo: sticky abaixo da topbar global, sem conflitar com ela. */
.home-active-banner {
    position: sticky;
    top: calc(var(--vt-topbar-height) + .5rem);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.1rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-left: 4px solid var(--vt-primary-accent);
    border-radius: var(--vt-radius-md);
    box-shadow: var(--vt-shadow-soft);
}

.home-active-banner__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--vt-radius-pill);
    background: var(--vt-surface-muted);
    font-weight: 600;
    color: var(--vt-text-secondary);
}

.home-active-banner__identity { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.home-active-banner__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vt-text-muted); }

.home-active-banner__name { font-size: 1.1rem; font-weight: 700; color: var(--vt-text-primary); }

.home-active-banner__demo { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .8rem; color: var(--vt-text-secondary); }

.home-detail { display: flex; flex-direction: column; gap: 1.25rem; }

.home-detail__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- Responsivo ---- */
@media (max-width: 1024px) {
    .home-portfolio__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    /* Com pouca largura a tabela vira cartão empilhado: identidade, motivo e último exame um sob o outro. */
    .home-portfolio__select {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "avatar identity chevron"
            "avatar reason   chevron"
            "avatar last     chevron";
        row-gap: .35rem;
    }

    .home-portfolio__avatar { grid-area: avatar; }
    .home-portfolio__identity { grid-area: identity; }
    .home-portfolio__reason { grid-area: reason; }
    .home-portfolio__last { grid-area: last; text-align: left; flex-direction: row; gap: .4rem; }
    .home-portfolio__chevron { grid-area: chevron; }
}

@media (max-width: 640px) {
    .home-portfolio__summary { grid-template-columns: minmax(0, 1fr); }

    .home-active-banner { top: 0; }

    .home-portfolio__controls { flex-direction: column; align-items: stretch; }
}

/* ===========================================================================
   Resultado cumulativo (visão médica) — matriz densa marcadores × datas.
   Reaproveita os tokens de status clínico; a densidade e a coluna fixa são o
   que difere da grade de marcadores comum.
   =========================================================================== */

.cf-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    justify-content: start;
    gap: 12px;
    margin: 0 0 14px;
}

.cf-metric {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    padding: 0.75rem 0.95rem;
}

.cf-metric--danger { background: var(--vt-tint-danger); border-color: color-mix(in srgb, var(--vt-danger) 30%, transparent); }

.cf-metric__label { display: block; font-size: 0.78rem; color: var(--vt-text-secondary); }

.cf-metric__value {
    display: block;
    margin-top: 2px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--vt-text-primary);
}

.cf-metric--danger .cf-metric__value { color: #c22d31; }

.cf-metric__value--sm { font-size: 0.98rem; }

.cf-metric__unit { font-size: 0.78rem; font-weight: 400; color: var(--vt-text-muted); }

.cf-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

.cf-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--vt-text-primary);
    cursor: pointer;
}

.cf-controls__note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--vt-text-muted);
    text-decoration: none;
}

.cf-controls__actions { margin-left: auto; }

/* ── Cartões de controle da Visão médica ──────────────────────────────────────────────────
   Cada bloco é um CARTÃO próprio (como na referência): PERÍODO (datas + navegador visual),
   COLETAS exibidas nas colunas e a barra de FILTROS. Não é um card único — são três, empilhados. */
.cf-card { padding: 1.15rem 1.3rem; margin-bottom: 0.9rem; }

.cf-toolbar__period { display: flex; flex-direction: column; gap: 0.6rem; }
.cf-toolbar__row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Rótulo curto de seção/campo, comum às seções (mesma linguagem do card de período dos índices). */
.cf-toolbar__label {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--vt-text-muted);
}

.cf-toolbar__divider { height: 1px; background: var(--vt-border); }

/* Coletas exibidas: cabeçalho (rótulo + dica) acima do seletor de chips, largo. */
.cf-toolbar__collections { display: flex; flex-direction: column; gap: 0.5rem; }
.cf-collections-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.cf-collections-hint { font-size: 0.78rem; color: var(--vt-text-muted); }
.cf-dates { max-width: 640px; }
.cf-dates .mk-select { flex: 1 1 auto; }

/* Barra de filtros: grade de campos (lab/unidade/método/busca) + linha de alternadores/ações. */
.cf-toolbar__filters { display: flex; flex-direction: column; gap: 0.85rem; }
.cf-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem 0.9rem;
    align-items: end;
}
.cf-filter { min-width: 0; }
.cf-filter .mk-select { flex: 1 1 auto; }
/* Rótulos vazios (quando o hospedeiro desenha o próprio cabeçalho) não deixam vão. */
.cf-filter .mk-field-label:empty,
.cf-dates .mk-field-label:empty { display: none; }
/* Busca por marcador: fica numa LINHA (não coluna), senão o `flex: 1 1 260px` do .mk-search vira base de
   ALTURA (260px) dentro do flex-column e o campo estica numa caixa gigante. */
.cf-filter--search { display: flex; flex-direction: row; align-items: center; }

/* Campo de busca por marcador (mesmo desenho do mk-search da lista, com botão de limpar). */
.cf-search { position: relative; flex: 1 1 auto; }
.cf-search input { padding-right: 2rem; }
.cf-search__clear {
    position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--vt-text-muted); cursor: pointer;
    padding: 0.2rem; border-radius: var(--vt-radius-pill);
}
.cf-search__clear:hover { color: var(--vt-text-primary); background: var(--vt-surface-muted); }

/* Linha de alternadores + ações à direita. */
.cf-filters-toggles { display: flex; align-items: center; gap: 0.85rem 1.25rem; flex-wrap: wrap; }
.cf-toolbar__actions { margin-left: auto; }

.cf-select-inline {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.88rem; color: var(--vt-text-primary);
}
.cf-select-inline select {
    border: 1px solid var(--vt-border-strong); border-radius: var(--vt-radius-sm);
    padding: 0.3rem 0.55rem; font-size: 0.85rem; background: var(--vt-surface); color: var(--vt-text-primary);
}
.cf-clear-link {
    border: none; background: transparent; color: var(--vt-info); cursor: pointer;
    font-size: 0.85rem; font-weight: 600; padding: 0;
}
.cf-clear-link:hover { text-decoration: underline; }

/* ── Cartões de coleta (colunas exibidas) ── */
.cf-collect-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.cf-collect-card {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--vt-border-strong); border-radius: var(--vt-radius-md);
    background: var(--vt-surface);
    font-size: 0.85rem; font-weight: 600; color: var(--vt-text-primary);
    font-variant-numeric: tabular-nums;
}
.cf-collect-card .vt-ico { color: var(--vt-text-muted); flex: 0 0 auto; }
.cf-collect-card--recent {
    border-color: color-mix(in srgb, var(--vt-success) 45%, transparent);
    background: color-mix(in srgb, var(--vt-success) 10%, var(--vt-surface));
}
.cf-collect-card--recent .vt-ico { color: var(--vt-success); }
/* Estrela de destaque (lado oposto ao "x"): cinza por padrão; laranja e preenchida quando é o destaque
   manual. As regras vêm DEPOIS das do cartão para vencerem por ordem de origem (mesma especificidade) e o
   ícone da estrela não herdar o verde do cartão em destaque. */
.cf-collect-star {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer;
    padding: 1px; border-radius: var(--vt-radius-pill);
}
.cf-collect-star .vt-ico { color: var(--vt-text-muted); }
.cf-collect-star:hover .vt-ico { color: var(--vt-warning); }
.cf-collect-star--on .vt-ico { color: var(--vt-warning); }
.cf-collect-star--on .vt-ico svg { fill: color-mix(in srgb, var(--vt-warning) 85%, transparent); }
/* Coleta selecionada que caiu FORA do período analisado: borda laranja de aviso. */
.cf-collect-card--out {
    border-color: var(--vt-warning);
    border-width: 1.5px;
    background: color-mix(in srgb, var(--vt-warning) 9%, var(--vt-surface));
    color: #9a5b00;
}
.cf-collect-card--out .vt-ico { color: var(--vt-warning); }
.cf-collect-date { line-height: 1; }
.cf-collect-tag {
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em; color: #1c7a3a;
    background: color-mix(in srgb, var(--vt-success) 18%, transparent);
    padding: 2px 7px; border-radius: var(--vt-radius-pill);
}
.cf-collect-x {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: var(--vt-text-muted); cursor: pointer;
    padding: 1px; border-radius: var(--vt-radius-pill);
}
.cf-collect-x:hover { color: var(--vt-danger); background: var(--vt-tint-danger); }
.cf-collect-add {
    appearance: none; -webkit-appearance: none;
    border: 1px dashed var(--vt-border-strong); border-radius: var(--vt-radius-md);
    background: var(--vt-surface); color: var(--vt-info); cursor: pointer;
    padding: 0.42rem 0.8rem; font-size: 0.83rem; font-weight: 600;
    font-family: inherit;
}
.cf-collect-add:hover { border-color: var(--vt-info); background: var(--vt-tint-info); }
.cf-collect-clear {
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: none; background: transparent; color: var(--vt-text-secondary); cursor: pointer;
    font-size: 0.82rem; font-weight: 600; margin-left: auto;
}
.cf-collect-clear:hover { color: var(--vt-danger); }
.cf-collect-clear .vt-ico { color: currentColor; }

/* ── Estado "Nenhum resultado encontrado" + "melhores datas" (Visão médica) ── */

/* Cabeçalho do cartão de coletas sob "melhores datas": rótulo do marcador + ação de voltar. */
.cf-collections-hint--best { color: var(--vt-info); font-weight: 600; }
.cf-best-restore {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.35rem;
    border: none; background: transparent; color: var(--vt-info); cursor: pointer;
    font-size: 0.82rem; font-weight: 600; font-family: inherit; padding: 0;
}
.cf-best-restore:hover { text-decoration: underline; }
.cf-best-restore .vt-ico { color: currentColor; }

/* Realce breve do cartão de coletas quando o usuário clica "Escolher datas" (rola até ele). */
.cf-card--flash { animation: cf-card-flash 1.3s ease-out; }
@keyframes cf-card-flash {
    0%, 100% { box-shadow: none; }
    18% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vt-info) 40%, transparent); }
}

/* Faixa horizontal (largura da grade) com mensagem + ações. Fixa à esquerda para acompanhar a rolagem. */
.cf-empty-band-row td { padding: 0; background: var(--vt-surface); position: sticky; left: 0; }
.cf-empty-band {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--vt-surface);
    border-top: 1px dashed var(--vt-border);
}
.cf-empty-band--discover {
    background: var(--vt-surface-muted);
    /* Linha interna acima da faixa "Há outros resultados…": tracejada e fina, como as demais linhas internas. */
    border-top-style: dashed; border-top-color: color-mix(in srgb, var(--vt-border) 70%, transparent);
}
.cf-empty-band__msg { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.cf-empty-band__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
    background: var(--vt-surface); border: 1px solid var(--vt-border); color: var(--vt-info);
}
.cf-empty-band__text { display: flex; flex-direction: column; gap: 1px; font-size: 0.84rem; }
.cf-empty-band__text strong { color: var(--vt-text-primary); font-weight: 700; }
.cf-empty-band__sub { color: var(--vt-text-muted); font-size: 0.78rem; }
.cf-empty-band__actions { display: flex; align-items: center; gap: 0.55rem; margin-left: auto; flex-wrap: wrap; }

/* Ações da faixa: primária (azul, cheia) e secundária (contorno) — azul de ação da própria barra de coletas. */
.cf-best-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.42rem 0.85rem; border-radius: var(--vt-radius-md);
    border: 1px solid var(--vt-border-strong); background: var(--vt-surface); color: var(--vt-text-primary);
    font-size: 0.83rem; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cf-best-btn:hover { border-color: var(--vt-info); color: var(--vt-info); background: var(--vt-tint-info); }
.cf-best-btn .vt-ico { color: currentColor; }
.cf-best-btn--primary { background: var(--vt-info); border-color: var(--vt-info); color: #fff; }
.cf-best-btn--primary:hover {
    background: color-mix(in srgb, var(--vt-info) 88%, #000);
    border-color: color-mix(in srgb, var(--vt-info) 88%, #000);
    color: #fff;
}
.cf-best-btn--primary .vt-ico { color: #fff; }

/* ── Blocos de marcador SEM tonalidade: o fundo de todo o bloco (linha principal, sub-linhas, timeline e barra)
   é TRANSPARENTE — herda o cartão da grade, sem "zebra" nem cinza. A única exceção é a coluna "Marcador"
   congelada, que precisa de um fundo OPACO (surface) para cobrir as coletas que rolam sob ela na rolagem
   horizontal. As células semânticas (recente/crítico/alto/baixo) mantêm a tinta própria no <td>, por cima. ── */
tr.cf-block--w, tr.cf-block--a, tr.cf-block--b { background: transparent; }

.cf-block--w.cf-subrow > td, .cf-block--a.cf-subrow > td, .cf-block--b.cf-subrow > td,
.cf-block--w.cf-empty-band-row > td, .cf-block--a.cf-empty-band-row > td, .cf-block--b.cf-empty-band-row > td,
.cf-block--w .cf-empty-band, .cf-block--a .cf-empty-band, .cf-block--b .cf-empty-band { background: transparent; }

/* Coluna "Marcador" congelada (linha principal e sub-linha): opaca para as coletas não vazarem por baixo. */
.cf-block--w .cf-col-marker, .cf-block--a .cf-col-marker, .cf-block--b .cf-col-marker,
.cf-block--w.cf-subrow .cf-col-marker, .cf-block--a.cf-subrow .cf-col-marker, .cf-block--b.cf-subrow .cf-col-marker {
    background: var(--vt-surface);
}

/* Espaçamento entre blocos (SÓ na Visão médica — escopo pelas classes cf-block--*; PDF/link compartilhado
   intactos): as linhas internas do bloco (sub-linha, barra) não repetem a borda; a linha principal separa um
   marcador (e seus sub-itens) do próximo com uma borda DISCRETA, cinza-clara, quase transparente. */
.cf-block--w > td, .cf-block--a > td, .cf-block--b > td { border-top: none; }
.cf-block--w.cf-row--main > td, .cf-block--a.cf-row--main > td, .cf-block--b.cf-row--main > td {
    border-top: 1px solid color-mix(in srgb, var(--vt-border) 60%, transparent); padding-top: 14px;
}
/* Linhas INTERNAS do bloco (entre a linha principal e as sub-linhas, e entre sub-linhas): tracejadas e finas,
   bem mais discretas que o separador (sólido) que fecha um marcador e abre o próximo. O tracejado vem da borda
   do <tr> (o "sólido" do .cf-row perderia para nada, mas ganharia do tracejado no modelo colapsado — por isso a
   dashed é aplicada aqui, com especificidade maior, e não no <td>). */
.cf-block--w.cf-subrow, .cf-block--a.cf-subrow, .cf-block--b.cf-subrow {
    border-top: 1px dashed color-mix(in srgb, var(--vt-border) 70%, transparent);
}
.cf-block--w.cf-empty-band-row > td, .cf-block--a.cf-empty-band-row > td, .cf-block--b.cf-empty-band-row > td {
    padding-bottom: 8px;
}

/* Explicação das "melhores datas" abaixo da grade (só quando ativas). */
.cf-best-info {
    display: flex; align-items: flex-start; gap: 0.8rem;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--vt-info) 6%, var(--vt-surface));
    border: 1px solid color-mix(in srgb, var(--vt-info) 22%, var(--vt-border));
}
.cf-best-info__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
    background: var(--vt-surface); border: 1px solid var(--vt-border); color: var(--vt-info);
}
.cf-best-info__body { flex: 1 1 auto; min-width: 0; }
.cf-best-info__text { margin: 0; font-size: 0.85rem; color: var(--vt-text-secondary); line-height: 1.5; }
.cf-best-info__text strong { color: var(--vt-text-primary); }
.cf-best-info__more { margin: 6px 0 0; font-size: 0.8rem; color: var(--vt-text-muted); line-height: 1.5; }
.cf-best-info__btn { flex: 0 0 auto; align-self: center; }

/* ── Controles de filtro rotulados (estilo select da referência) ── */
.cf-filter-select {
    width: 100%;
    border: 1px solid var(--vt-border-strong); border-radius: var(--vt-radius-sm);
    padding: 0.5rem 0.6rem; font-size: 0.88rem; font-family: inherit;
    background: var(--vt-surface); color: var(--vt-text-primary); cursor: pointer;
}
.cf-filter-select--on {
    border-color: color-mix(in srgb, var(--vt-warning) 55%, transparent);
    background: var(--vt-tint-warning); color: #b26a00; font-weight: 600;
}

/* Linha da busca por marcador + ações (limpar / exportar) à direita. */
.cf-filters-searchrow { display: flex; align-items: center; gap: 0.85rem 1.1rem; flex-wrap: wrap; }
.cf-filters-searchrow .cf-filter--search { flex: 1 1 320px; min-width: 220px; }
.cf-searchrow-actions { display: flex; align-items: center; gap: 0.9rem; margin-left: auto; }

.cf-grid-card { padding: 0.6rem 0.65rem 0.6rem; }

.cf-grid-wrap { overflow-x: auto; }

/* Visão médica: o cabeçalho da grade (thead) fica fixo no topo da PÁGINA, logo abaixo da topbar, enquanto se
   rola para ver todos os marcadores — e só desgruda ao rolar de volta para cima e passar por ele. Para isso o
   thead precisa ser sticky em relação à página; um contêiner com rolagem horizontal (overflow-x:auto) capturaria
   o sticky, então na grade logada o wrapper deixa de rolar (overflow visível) e o thead gruda na página. */
.cf-grid-wrap--sticky { overflow: visible; }
.cf-grid-wrap--sticky .cf-grid thead th { top: var(--vt-topbar-height); }

/* Responsividade da grade no celular (≤ 820px): o desktop segue com a apresentação atual (grade grudando o
   cabeçalho na página e rolando na própria página). No mobile, a grade passa a rolar HORIZONTALMENTE dentro do
   próprio cartão e a coluna de AÇÕES (botão ⋮ "Comparar em gráfico") fica CONGELADA à direita — espelhando a
   coluna "Marcador" congelada à esquerda —, para o botão ficar sempre alcançável sem rolar a página inteira.
   O thead deixa de grudar na página (top da topbar) e passa a grudar no topo do contêiner de rolagem. */
@media (max-width: 820px) {
    .cf-grid-wrap--sticky { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
    .cf-grid-wrap--sticky .cf-grid thead th { top: 0; }

    /* Coluna de ações congelada à direita: acompanha a rolagem horizontal das coletas. Fundo opaco para as
       células que rolam por baixo não vazarem; sombra sutil à esquerda reforça que ela está "colada". */
    .cf-col-actions {
        position: sticky;
        right: 0;
        background: var(--vt-surface);
        z-index: 1;
        box-shadow: -8px 0 8px -8px rgba(16, 20, 24, 0.18);
    }
    .cf-grid thead th.cf-col-actions { z-index: 3; }

    /* Revela a dica de arraste também nesta faixa (não só ≤640px). */
    .cf-scroll-hint { display: inline-flex; }
}

/* Dica de arraste das coletas: escondida no desktop (as colunas cabem); revelada no mobile, onde a grade
   rola sob a coluna "Marcador" congelada. Ver a regra no media query mais abaixo. */
.cf-scroll-hint {
    display: none;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 0.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--vt-text-muted);
}
.cf-scroll-hint .vt-ico { color: var(--vt-info); }

.cf-grid {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.cf-grid th,
.cf-grid td { padding: 11px 14px; white-space: nowrap; vertical-align: middle; }

.cf-grid thead th {
    position: sticky;
    top: 0;
    background: var(--vt-surface);
    border-bottom: 1px solid var(--vt-border-strong);
    text-align: right;
    vertical-align: top;
    padding-top: 11px;
    padding-bottom: 11px;
    z-index: 2;
}

/* Cabeçalho em duas linhas: rótulo principal + subtítulo (fontes distintas). */
.cf-th-main {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--vt-text-primary);
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}
.cf-th-sub {
    display: block;
    margin-top: 3px;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--vt-text-muted);
    letter-spacing: 0.01em;
    text-transform: none;
}

.cf-grid thead th.cf-col-marker,
.cf-grid thead th.cf-col-ref { text-align: left; }

/* Coluna do marcador: fixa à esquerda para o nome acompanhar a rolagem horizontal das coletas. */
.cf-col-marker {
    position: sticky;
    left: 0;
    background: var(--vt-surface);
    text-align: left;
    z-index: 1;
    min-width: 236px;
    max-width: 300px;
    white-space: normal;
}

.cf-grid thead th.cf-col-marker { z-index: 3; }

/* Largura FIXA (min = max): o conteúdo desta coluna muda ao alternar entre a faixa
   padronizada e a do laudo; sem fixar, a coluna se remede a cada troca e reflui a
   grade inteira (sensação de "flicker" nos dados). A pílula de faixa trunca com
   reticências (ver .cf-ref-band) para nunca ultrapassar esta largura. */
.cf-col-ref { text-align: left; width: 156px; min-width: 156px; max-width: 156px; }

.cf-col-date { text-align: right; min-width: 68px; }

.cf-col-trend { text-align: center; min-width: 124px; }
.cf-col-trend svg { display: inline-block; vertical-align: middle; }

/* Também fixa: o veredito de tendência varia com a referência ativa (inclusive o
   texto longo "Sem tendência calculável"), então a largura precisa ser estável. */
.cf-col-tendency { text-align: right; width: 180px; min-width: 180px; max-width: 180px; }

/* Coluna de ações (Visão médica): botão ⋮ "Comparar em gráfico", só na linha principal do marcador. */
.cf-col-actions { width: 52px; min-width: 52px; text-align: center; vertical-align: middle; }
.cf-actions-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border: 1px solid var(--vt-tint-info); border-radius: var(--vt-radius-sm);
    background: var(--vt-surface); color: var(--vt-info); cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.cf-actions-btn:hover, .cf-actions-btn.is-open { background: var(--vt-tint-info); border-color: var(--vt-info); }

/* Coluna de coleta mais recente: encabeça (à esquerda), com estrela + selo verde e fundo de destaque. */
.cf-date-val { display: block; }
.cf-date-star { color: var(--vt-success); margin-right: 3px; font-size: 0.78rem; }
.cf-th-sub.cf-date-recent { color: #1c7a3a; font-weight: 700; }

/* ── Cabeçalho de grupo clínico: ícone + nome + contagem + "Ver todos" ── */
.cf-group-row td {
    background: transparent;
    padding: 8px 14px;
    position: sticky;
    left: 0;
    border-top: 1px solid color-mix(in srgb, var(--vt-border) 60%, transparent);
}

.cf-group-head { display: flex; align-items: center; gap: 0.55rem; }

.cf-group-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--vt-surface); border: 1px solid var(--vt-border);
    color: var(--vt-text-secondary); flex: 0 0 auto;
}

.cf-group-name {
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--vt-text-primary);
}

.cf-group-count {
    font-size: 0.72rem; font-weight: 600; color: var(--vt-text-muted);
    padding: 1px 8px; border-radius: var(--vt-radius-pill); background: var(--vt-surface);
    border: 1px solid var(--vt-border);
}

.cf-group-tag {
    font-size: 0.72rem; color: var(--vt-text-muted); font-weight: 400;
    text-transform: none; letter-spacing: 0;
}

.cf-group-more {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.25rem;
    border: none; background: transparent; cursor: pointer;
    font-size: 0.76rem; font-weight: 600; color: var(--vt-info);
    text-transform: none; letter-spacing: 0;
}
.cf-group-more:hover { text-decoration: underline; }

.cf-more-row td { padding: 0; background: var(--vt-surface); position: sticky; left: 0; }
.cf-group-more--foot {
    margin: 0; width: 100%; justify-content: center;
    padding: 8px 14px; color: var(--vt-text-secondary);
    background: var(--vt-surface); border-top: 1px dashed var(--vt-border);
}
.cf-group-more--foot:hover { background: var(--vt-surface-muted); color: var(--vt-info); text-decoration: none; }

/* ── Linha de marcador ── */
.cf-row { border-top: 1px solid var(--vt-border); }

/* Realce de linha inteira ao passar o mouse (rastrear onde o cursor está para ler a linha de ponta a ponta):
   uma camada translúcida por cima do fundo de CADA célula, via box-shadow inset. Tinge a linha toda de forma
   uniforme — inclusive a coluna congelada "Marcador", a coleta "mais recente" (verde) e as células
   classificadas (crítico/alto/baixo) — sem apagar as cores clínicas por baixo. Vale para a linha principal e
   para cada sub-linha (o realce é só da linha sob o cursor). */
.cf-grid tbody tr.cf-row:hover > td {
    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--vt-info) 16%, transparent);
}

.cf-marker-cell { display: flex; flex-direction: column; gap: 2px; }
/* Nome + selo de contexto analítico (métodos/materiais das coletas em exibição) na mesma linha, o selo à frente. */
.cf-marker-headline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Estrela de favoritar por linha (a página Marcadores herdou da antiga lista). Espelha .mt-star. */
.cf-fav {
    display: inline-flex; align-items: center; padding: 0.1rem; border: none; background: none;
    color: var(--vt-text-muted); cursor: pointer; line-height: 0; opacity: 0.55;
    border-radius: var(--vt-radius-sm); transition: color 0.15s ease, opacity 0.15s ease; flex: none;
}
.cf-fav:hover { opacity: 1; color: var(--vt-warning); }
.cf-fav.is-on { opacity: 1; color: var(--vt-warning); }
.cf-fav.is-on svg path { fill: currentColor; }
.cf-marker-context { flex: 0 0 auto; }
.cf-marker { font-weight: 600; color: var(--vt-info); text-decoration: none; font-size: 0.92rem; }
.cf-marker:hover { text-decoration: underline; }
.cf-marker--plain { color: var(--vt-text-primary); }
.cf-marker-sub { font-size: 0.72rem; color: var(--vt-text-muted); line-height: 1.35; }
.cf-marker-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }

.cf-pending {
    padding: 1px 6px;
    border-radius: var(--vt-radius-pill);
    background: var(--vt-tint-warning);
    color: #b26a00;
    font-size: 0.68rem;
    font-weight: 600;
}

/* Variante clicável do selo (admin): leva à revisão do marcador no catálogo do backoffice. */
a.cf-pending--link { text-decoration: none; cursor: pointer; }
a.cf-pending--link:hover { text-decoration: underline; }

/* ══ Grade expansível (Visão médica): linha principal + sub-linhas por configuração analítica ══ */

/* Linha principal: chevron à esquerda do nome; o bloco nome+selo à direita dele. */
.cf-marker-cell--expandable { flex-direction: row; align-items: flex-start; gap: 7px; }
.cf-marker-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cf-chevron {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-top: 1px; padding: 0;
    border: 1px solid var(--vt-border); border-radius: 6px;
    background: var(--vt-surface); color: var(--vt-text-secondary);
    cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cf-chevron:hover { background: var(--vt-surface-muted); color: var(--vt-info); border-color: var(--vt-info); }
.cf-row--main.cf-row--expanded .cf-chevron {
    color: var(--vt-info);
    border-color: color-mix(in srgb, var(--vt-info) 45%, var(--vt-border));
    background: var(--vt-tint-info);
}

/* Selo de contagem de configurações à frente do nome (ex.: "3 métodos • 2 materiais"). */
.cf-config-badge {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    padding: 1px 8px; border-radius: var(--vt-radius-pill);
    background: var(--vt-tint-warning); color: #9a6a00;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
}

/* Espaçador no lugar do chevron (marcador de contexto único, sem expansão): mantém o alinhamento dos nomes. */
.cf-chevron--placeholder { visibility: hidden; cursor: default; pointer-events: none; }

/* Pílula de contexto analítico (multi-contexto): rótulo do trio EM EXIBIÇÃO (material · método · unidade) +
   troca de contexto a cada clique. Substitui o selo estático — o valor de topo é sempre um contexto nomeado. */
.cf-ctx-pill {
    flex: 0 1 auto; min-width: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border-radius: var(--vt-radius-pill);
    border: 1px solid var(--vt-border); background: var(--vt-surface-muted); color: var(--vt-text-secondary);
    font-size: 0.7rem; font-weight: 600; line-height: 1.4; cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.cf-ctx-pill:hover { border-color: var(--vt-border-strong); color: var(--vt-text-primary); background: var(--vt-surface); }
.cf-ctx-pill__dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.cf-ctx-pill__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-ctx-pill__count {
    flex: 0 0 auto; font-size: 0.64rem; font-weight: 700; color: var(--vt-info);
    background: var(--vt-tint-info); padding: 0 5px; border-radius: var(--vt-radius-pill);
}

/* Micro-tira acima das sub-linhas: avisa que os contextos irmãos não são diretamente comparáveis. */
.cf-subrow-note > td { background: transparent; }
.cf-subrow-note__cell { padding-top: 3px !important; padding-bottom: 3px !important; }
.cf-subrow-note__inner {
    display: inline-flex; align-items: center; gap: 6px;
    padding-left: 34px; font-size: 0.72rem; color: var(--vt-text-muted);
}

/* Sub-linha: fundo TRANSPARENTE (pertence ao marcador acima) + tipografia secundária. O realce de hover da
   linha inteira (regra .cf-grid tbody tr.cf-row:hover > td) cobre a sub-linha por cima. A coluna "Marcador"
   congelada segue opaca (surface) para não deixar as coletas vazarem por baixo na rolagem horizontal. */
.cf-subrow > td { background: transparent; }
.cf-subrow .cf-cell { font-size: 0.86rem; }

/* Trilho em árvore ligando as sub-linhas ao marcador pai. O TRONCO vertical e os NÓS são desenhados no próprio
   <td> congelado (::before / ::after) — e NÃO no trilho interno —, para a linha atravessar também o padding da
   célula e ficar CONTÍNUA entre as sub-linhas empilhadas (com border-collapse as bordas das células coincidem).
   Desenhado no trilho, o tronco "quebrava" no vão de padding entre linhas e os pontos ficavam soltos. */
.cf-subrow .cf-col-marker { background: var(--vt-surface); position: relative; }
/* Tronco vertical discreto (cinza-claro), do topo à base da célula. */
.cf-subrow .cf-col-marker::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 33px;
    border-left: 1.5px solid var(--vt-border-strong);
}
/* Última sub-linha do marcador (não seguida por outra sub-linha): o tronco vira canto "└" — desce só até o nó. */
.cf-subrow:not(:has(+ .cf-subrow)) .cf-col-marker::before { bottom: auto; height: 50%; }
/* Nó PRETO do sub-item, centrado no tronco, com um anel branco para a linha "passar por trás" limpa. */
.cf-subrow .cf-col-marker::after {
    content: ""; position: absolute; top: 50%; left: 29.75px; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--vt-text-primary); box-shadow: 0 0 0 3px var(--vt-surface);
}

/* Célula do marcador na sub-linha: o trilho vira só um ESPAÇADOR que mantém o recuo das legendas (o desenho
   da árvore está no <td>, acima). */
.cf-subrow-cell { display: flex; align-items: stretch; gap: 9px; padding-left: 6px; }
.cf-subrow-rail { flex: 0 0 auto; width: 10px; margin-left: 9px; }
.cf-subrow-labels { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; min-width: 0; }
.cf-subrow-material { font-size: 0.82rem; font-weight: 600; color: var(--vt-text-primary); }
/* Leitura sem material/apresentação: rótulo esmaecido em itálico, sinalizando lacuna e não um dado real. */
.cf-subrow-material--missing { font-weight: 500; font-style: italic; color: var(--vt-text-muted); }
.cf-subrow-method { font-size: 0.72rem; color: var(--vt-text-muted); }
/* Valor + sinalizador na mesma célula, alinhados à direita. Na linha principal, quando a coleta tem outras
   leituras, o valor e o indicador empilham — o indicador fica discreto, logo abaixo do valor. */
.cf-cell__wrap { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; }
.cf-cell__wrap--stacked { flex-direction: column; align-items: flex-end; gap: 2px; }
.cf-cell__val { display: inline-block; }

/* Indicador discreto e não interativo da linha principal: "＋ N leitura(s)". Apenas sinaliza que a coleta tem
   outras leituras (outros métodos/materiais), visíveis ao expandir o marcador. */
.cf-more-hint {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.68rem; font-weight: 600; color: var(--vt-text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1;
}
.cf-more-hint__ic {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--vt-text-muted) 42%, transparent);
    color: var(--vt-text-muted);
}
.cf-more-badge {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; height: 16px; padding: 0 5px;
    border: none; border-radius: var(--vt-radius-pill);
    background: color-mix(in srgb, var(--vt-info) 16%, transparent); color: var(--vt-info);
    font-size: 0.64rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer;
    transition: background 0.12s;
}
.cf-more-badge:hover { background: color-mix(in srgb, var(--vt-info) 30%, transparent); }

/* Popover com todos os resultados da coleta (material/método/unidade/valor/faixa/classificação). */
.cf-cell--pop-open { position: relative; z-index: 60; }
.cf-pop-backdrop { position: fixed; inset: 0; z-index: 55; background: transparent; }
.cf-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 61;
    min-width: 246px; max-width: 322px;
    padding: 10px 12px; text-align: left; white-space: normal; cursor: default;
    background: var(--vt-surface); border: 1px solid var(--vt-border-strong);
    border-radius: var(--vt-radius-md); box-shadow: var(--vt-shadow-md);
}
.cf-pop__head {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid var(--vt-border);
}
.cf-pop__date { font-size: 0.78rem; font-weight: 700; color: var(--vt-text-primary); font-variant-numeric: tabular-nums; }
.cf-pop__marker { font-size: 0.72rem; color: var(--vt-text-muted); }
.cf-pop__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cf-pop__item {
    display: flex; flex-direction: column; gap: 2px;
    padding-bottom: 9px; border-bottom: 1px dashed var(--vt-border);
}
.cf-pop__item:last-child { padding-bottom: 0; border-bottom: none; }
.cf-pop__value {
    align-self: flex-start;
    font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums;
    padding: 1px 7px; border-radius: 6px; white-space: nowrap;
    background: var(--vt-surface-muted); color: var(--vt-text-primary);
}
.cf-pop__value.cf-cell--critical { background: var(--vt-tint-danger); color: #c22d31; }
.cf-pop__value.cf-cell--high { background: var(--vt-tint-warning); color: #b26a00; }
.cf-pop__value.cf-cell--low { background: var(--vt-tint-info); color: #1f5fb8; }
.cf-pop__unit { font-weight: 500; font-size: 0.72rem; color: var(--vt-text-muted); margin-left: 3px; }
.cf-pop__cfg { font-size: 0.78rem; font-weight: 600; color: var(--vt-text-secondary); }
.cf-pop__ref { font-size: 0.72rem; color: var(--vt-text-muted); }
.cf-chip--sm { align-self: flex-start; padding: 1px 8px; font-size: 0.68rem; margin-top: 1px; }
/* Evidência da leitura: link discreto para o laudo de origem, no rodapé de cada item do popover. */
.cf-pop__doc {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 4px;
    margin-top: 2px; color: var(--vt-text-muted);
}
.cf-pop__doc:hover { color: var(--vt-text-primary); }

/* ── "O que este exame diz" — resumo leigo no topo do documento (doc 14) ── */
.dls {
    background: var(--vt-surface); border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-lg); padding: 14px 18px; margin: 0 0 14px;
}
.dls__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dls__ico { display: inline-flex; color: var(--vt-text-secondary); }
.dls__title { font-weight: 700; font-size: .92rem; color: var(--vt-text-primary); }
.dls__counts { margin: 0 0 6px; font-size: .88rem; color: var(--vt-text-secondary); }
.dls__list { margin: 0 0 8px; padding-left: 18px; font-size: .85rem; color: var(--vt-text-primary); display: flex; flex-direction: column; gap: 2px; }
.dls__actions { display: flex; gap: 8px; margin-bottom: 6px; }
.dls__note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .76rem; color: var(--vt-text-muted); }

/* ── Aviso de audiência (chegada da visão simplificada a uma tela técnica, doc 14 §49) ── */
.tvn {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 14px; margin: 0 0 12px;
    background: var(--vt-surface-muted); border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md); font-size: .82rem; color: var(--vt-text-secondary);
}
.tvn__ico { display: inline-flex; color: var(--vt-text-muted); }
.tvn__back { font-weight: 600; white-space: nowrap; }

/* ── Coluna Unidade · Faixa ── */
.cf-unit-val { display: block; font-size: 0.8rem; color: var(--vt-text-secondary); font-weight: 500; }
.cf-ref-band {
    display: inline-block; margin-top: 3px;
    max-width: 100%; box-sizing: border-box;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
    font-size: 0.72rem; color: var(--vt-text-muted);
    padding: 1px 7px; border-radius: var(--vt-radius-pill);
    background: var(--vt-surface-muted);
}

/* ── Células de valor ── */
.cf-cell { text-align: right; color: var(--vt-text-primary); }
.cf-cell--empty { color: var(--vt-text-muted); }

/* Coluna mais recente: SÓ o cabeçalho (a data) recebe o fundo verde-claro de acento; as células de valor da
   mesma coluna ficam com fundo TRANSPARENTE — mantêm apenas o peso em negrito para destacar os valores mais
   recentes, sem tingir a coluna. Uma célula fora da faixa (crítico/alto/baixo) mantém o tom clínico por cima. */
.cf-cell--recent { font-weight: 700; }
.cf-grid thead th.cf-col-date--recent { background: color-mix(in srgb, var(--vt-success) 13%, var(--vt-surface)); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--vt-success) 22%, transparent), inset -1px 0 0 color-mix(in srgb, var(--vt-success) 22%, transparent); }

.cf-cell--critical { background: var(--vt-tint-danger); color: #c22d31; font-weight: 600; }
.cf-cell--high { background: var(--vt-tint-warning); color: #b26a00; font-weight: 600; }
.cf-cell--low { background: var(--vt-tint-info); color: #1f5fb8; font-weight: 600; }
.cf-cell--recent.cf-cell--critical,
.cf-cell--recent.cf-cell--high,
.cf-cell--recent.cf-cell--low { font-weight: 700; }

/* Resultados textuais (Positivo/Negativo, Reagente…): chip discreto no lugar do número. */
.cf-cell--text { text-align: right; }
.cf-chip {
    display: inline-block; padding: 2px 10px; border-radius: var(--vt-radius-pill);
    font-size: 0.8rem; font-weight: 600; line-height: 1.4;
}
.cf-chip--neutral { background: var(--vt-surface-muted); color: var(--vt-text-secondary); }
.cf-chip--normal { background: var(--vt-tint-success); color: #1c7a3a; }
.cf-chip--high { background: var(--vt-tint-warning); color: #b26a00; }
.cf-chip--low { background: var(--vt-tint-info); color: #1f5fb8; }
.cf-chip--critical { background: var(--vt-tint-danger); color: #c22d31; }

.cf-spark-empty { color: var(--vt-text-muted); }

/* ── Coluna de tendência (melhora / piora / estável / oscilando) ── */
.cf-trend {
    display: inline-flex; align-items: baseline; gap: 0.3rem; justify-content: flex-end;
    font-size: 0.82rem; font-weight: 600;
}
.cf-trend__arrow { font-size: 0.9rem; line-height: 1; }
.cf-trend__pct { font-variant-numeric: tabular-nums; }
.cf-trend__word { font-weight: 600; }
.cf-trend--melhora { color: var(--vt-success); }
.cf-trend--piora { color: var(--vt-warning); }
.cf-trend--oscila { color: var(--vt-info); }
.cf-trend--estavel { color: var(--vt-text-muted); font-weight: 500; }
.cf-trend--none { color: var(--vt-text-muted); font-weight: 400; font-size: 0.76rem; }

/* ══ Painéis de Série (Visão médica · Direção 3) ══════════════════════════════════════════════════
   Alternativa à grade densa: um painel por marcador, alinhado em colunas (marcador · resultado ·
   mini-timeline · variação · ações), isolado por padrão e expansível para a matriz de coletas + a
   comparação de contextos. Reaproveita cf-ctx-pill/cf-trend/cf-actions-btn/cf-best-btn; só o miolo do
   painel é novo (prefixo cfp-). Ligado por PanelLayout no FlowsheetGrid. */
.cfp-group { margin-bottom: 18px; }

/* Cabeçalho do grupo clínico: ícone + nome + contagem + (recolhível) "Ver menos". */
.cfp-group__head { display: flex; align-items: center; gap: 0.55rem; margin: 4px 2px 10px; flex-wrap: wrap; }
.cfp-group__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
    background: var(--vt-surface); border: 1px solid var(--vt-border); color: var(--vt-text-secondary);
}
.cfp-group__name {
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--vt-text-primary);
}
.cfp-group__count {
    font-size: 0.72rem; font-weight: 600; color: var(--vt-text-muted);
    padding: 1px 8px; border-radius: var(--vt-radius-pill); background: var(--vt-surface); border: 1px solid var(--vt-border);
}
.cfp-group__tag { font-size: 0.72rem; color: var(--vt-text-muted); font-weight: 400; }
.cfp-group__more {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 0.25rem;
    border: none; background: transparent; cursor: pointer;
    font-size: 0.76rem; font-weight: 600; color: var(--vt-info);
}
.cfp-group__more:hover { text-decoration: underline; }
.cfp-group__morefoot {
    width: 100%; justify-content: center;
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 9px 14px; margin-top: 2px; cursor: pointer;
    border: 1px dashed var(--vt-border); border-radius: var(--vt-radius-md);
    background: var(--vt-surface); color: var(--vt-text-secondary);
    font-size: 0.78rem; font-weight: 600;
}
.cfp-group__morefoot:hover { background: var(--vt-surface-muted); color: var(--vt-info); }

/* Painel: grade de colunas alinhadas (marcador · resultado · mini · variação · ações). */
.cfp-panel {
    display: grid;
    grid-template-columns: minmax(200px, 1.4fr) minmax(140px, 1fr) 160px minmax(150px, 1.2fr) 44px;
    gap: 14px; align-items: center;
    padding: 12px 14px; margin-bottom: 8px;
    background: var(--vt-surface); border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md); box-shadow: var(--vt-shadow-soft);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.cfp-panel:hover { border-color: var(--vt-border-strong); }
.cfp-panel--open { border-color: color-mix(in srgb, var(--vt-info) 40%, var(--vt-border)); }

/* Painel compacto: marcador SEM leitura na janela — linha achatada e discreta (2 colunas: marcador + hint),
   sem cartão nem mini-timeline, para não empilhar dezenas de painéis altos vazios em janelas esparsas. */
.cfp-panel--compact {
    grid-template-columns: minmax(200px, 1.4fr) 1fr;
    padding: 6px 14px; margin-bottom: 2px;
    background: transparent; border-color: transparent; box-shadow: none;
}
.cfp-panel--compact:hover { background: var(--vt-surface-muted); border-color: var(--vt-border); }
.cfp-panel__empty {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--vt-text-muted); font-size: 0.85rem;
}

/* Col A — Marcador. */
.cfp-panel__mk { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cfp-mk__row { display: flex; align-items: center; gap: 8px; }
.cfp-chev {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: 6px; background: transparent; color: var(--vt-text-muted); cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.cfp-chev:hover { background: var(--vt-surface-muted); color: var(--vt-text-primary); }
.cfp-chev .vt-ico { transition: transform 0.15s; }
.cfp-chev--open { color: var(--vt-info); }
.cfp-chev--open .vt-ico { transform: rotate(90deg); }
.cfp-chev--placeholder { visibility: hidden; pointer-events: none; }
.cfp-mk__name { font-weight: 700; font-size: 0.92rem; color: var(--vt-info); text-decoration: none; min-width: 0; }
.cfp-mk__name:hover { text-decoration: underline; }
.cfp-mk__name--plain { color: var(--vt-text-primary); }
/* Pílula/rótulo de contexto recuados sob o nome (passam o chevron). */
.cfp-mk__pill { align-self: flex-start; margin-left: 30px; max-width: calc(100% - 30px); }
/* Rótulo estático do trio (contexto único): pílula não interativa, espelha a .ctx-chip do design-alvo. */
.cfp-mk__ctx {
    align-self: flex-start; margin-left: 30px; max-width: calc(100% - 30px);
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: var(--vt-radius-pill);
    border: 1px solid var(--vt-border); background: var(--vt-surface-muted);
    font-size: 0.7rem; font-weight: 600; color: var(--vt-text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfp-mk__badges { margin-left: 30px; }

/* Col B — Resultado. */
.cfp-panel__result { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cfp-val {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
    color: var(--vt-text-primary); font-variant-numeric: tabular-nums;
}
.cfp-val--high { color: #b26a00; }
.cfp-val--low { color: #1f5fb8; }
.cfp-val--critical { color: #c22d31; }
.cfp-val--empty { color: var(--vt-text-muted); font-weight: 700; }
.cfp-unit { font-size: 0.74rem; color: var(--vt-text-muted); font-weight: 600; }
.cfp-result__hint { font-size: 0.72rem; color: var(--vt-text-muted); }
/* Data da coleta do valor de topo: quebra para a própria linha, abaixo do valor+chip (o painel não tem colunas de data). */
.cfp-date { flex-basis: 100%; font-size: 0.72rem; color: var(--vt-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 1px; }

/* Chip de status (ícone + rótulo) — status nunca é só cor. */
.cfp-chip {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 0.72rem; font-weight: 700; line-height: 1.4;
    padding: 2px 9px; border-radius: var(--vt-radius-pill);
}
.cfp-chip--success { background: var(--vt-tint-success); color: #1f8f43; }
.cfp-chip--warning { background: var(--vt-tint-warning); color: #a5670a; }
.cfp-chip--danger { background: var(--vt-tint-danger); color: #c0353a; }
.cfp-chip--neutral { background: var(--vt-tint-neutral); color: var(--vt-text-secondary); }

/* Col C — Mini-timeline. */
.cfp-panel__mini { display: flex; align-items: center; min-height: 40px; }

/* Col D — Variação / tendência (a palavra + a linha de delta). */
.cfp-panel__trend { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.cfp-panel__trend .cf-trend { justify-content: flex-start; }
.cfp-delta { font-size: 0.76rem; color: var(--vt-text-secondary); font-variant-numeric: tabular-nums; }

/* Col E — Ações. */
.cfp-panel__actions { display: flex; align-items: center; justify-content: flex-end; }

/* Expandido: ocupa a largura toda do painel. */
.cfp-expando {
    grid-column: 1 / -1;
    margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--vt-border);
}
.cfp-expando__title {
    margin: 0 0 8px; font-size: 0.7rem; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--vt-text-muted); font-weight: 700;
}
.cfp-expando__title + .cfp-expando__title { margin-top: 14px; }

/* Coletas — cartõezinhos data → valor da série principal (destaque na coleta mais recente). */
.cfp-coletas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.cfp-coleta {
    display: flex; flex-direction: column; gap: 2px; min-width: 74px;
    padding: 6px 10px; border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm);
    background: var(--vt-surface-muted);
}
.cfp-coleta--recent {
    border-color: color-mix(in srgb, var(--vt-success) 40%, var(--vt-border));
    background: color-mix(in srgb, var(--vt-success) 10%, var(--vt-surface));
}
.cfp-coleta__date { font-size: 0.66rem; color: var(--vt-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.cfp-coleta__val { font-size: 0.92rem; font-weight: 700; color: var(--vt-text-primary); font-variant-numeric: tabular-nums; }
/* Valor + ações de procedência na mesma linha (ícones ao lado do valor, não embaixo). */
.cfp-coleta__line { display: flex; align-items: center; gap: 6px; }
/* Ações de procedência de cada coleta: lupa (laudo original) + ícone de documento (página completa). */
.cfp-coleta__origin { display: flex; align-items: center; gap: 2px; }
.cfp-coleta__doc {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 0; background: transparent; color: var(--vt-text-muted);
    cursor: pointer; flex: none; line-height: 0;
}
.cfp-coleta__doc:hover { color: var(--vt-text-primary); }

/* Modal da página completa do documento (iframe de 90%): abre pelo ícone de documento de uma coleta.
   Deixa ~10% de borda do fundo visível, como o viewer de laudo original (.vt-viewer). */
.cf-docpage-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    outline: none;
}
.cf-docpage {
    position: relative;
    width: 90vw;
    height: 90vh;
    background: var(--vt-surface);
    border-radius: var(--vt-radius-lg, 12px);
    box-shadow: var(--vt-shadow-card);
    overflow: hidden;
}
/* Miolo rolável do modal: o visualizador embutido é renderizado aqui e rola dentro dos 90% da tela. */
.cf-docpage__scroll { width: 100%; height: 100%; overflow: auto; padding: 1.75rem 2rem; }
@media (max-width: 900px) {
    .cf-docpage__scroll { padding: 1rem; }
}
.cf-docpage__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--vt-border);
    border-radius: 50%;
    background: var(--vt-surface);
    color: var(--vt-text-secondary);
    cursor: pointer;
    box-shadow: var(--vt-shadow-card);
}
.cf-docpage__close:hover { color: var(--vt-text-primary); background: var(--vt-surface-muted); }

/* Comparar contextos — cada trio como série SEPARADA (pílula + valor + mini própria). */
.cfp-compare {
    background: var(--vt-surface-muted); border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md); padding: 6px 12px;
}
.cfp-cmprow {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 2px; border-bottom: 1px solid var(--vt-border);
}
.cfp-cmprow:last-child { border-bottom: 0; }
.cfp-cmprow__pill { min-width: 200px; cursor: default; }
.cfp-cmprow__val { font-weight: 700; font-size: 0.9rem; color: var(--vt-text-primary); font-variant-numeric: tabular-nums; }
.cfp-cmprow__mini { margin-left: auto; display: inline-flex; align-items: center; }

/* Aviso de séries separadas. */
.cfp-warn {
    display: flex; gap: 8px; align-items: center; margin-top: 8px;
    padding: 7px 10px; border-radius: var(--vt-radius-sm);
    background: var(--vt-tint-warning); color: #a5670a; font-size: 0.76rem;
}
.cfp-warn .vt-ico { flex: 0 0 auto; }

/* Faixa de descoberta (coletas fora da janela): espelha o ActionsBand da grade. */
.cfp-discover {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding: 10px 12px;
    background: var(--vt-surface-muted); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-md);
}
.cfp-discover__msg { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cfp-discover__ico { color: var(--vt-info); flex: 0 0 auto; display: inline-flex; }
.cfp-discover__text { font-size: 0.82rem; color: var(--vt-text-secondary); }
.cfp-discover__text strong { color: var(--vt-text-primary); font-weight: 700; }
.cfp-discover__sub { display: block; font-size: 0.76rem; color: var(--vt-text-muted); }
.cfp-discover__actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 720px) {
    .cfp-panel { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cfp-panel__actions { justify-content: flex-start; }
    .cfp-cmprow__pill { min-width: 0; }
}

/* ── Legenda + ressalva ── */
.cf-legend {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    padding: 12px 6px 4px;
    font-size: 0.78rem;
    color: var(--vt-text-secondary);
}
.cf-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.cf-legend__sep { width: 1px; height: 14px; background: var(--vt-border); }
.cf-legend__hint { margin-left: auto; color: var(--vt-text-muted); }
.cf-legend__trend { font-weight: 600; }
.cf-legend__trend::before { content: ""; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 2px; }
.cf-legend__trend--piora { color: var(--vt-warning); }
.cf-legend__trend--piora::before { background: var(--vt-warning); }
.cf-legend__trend--melhora { color: var(--vt-success); }
.cf-legend__trend--melhora::before { background: var(--vt-success); }
.cf-legend__trend--estavel { color: var(--vt-text-muted); }
.cf-legend__trend--estavel::before { background: var(--vt-text-muted); }

.cf-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cf-swatch--critical { background: var(--vt-tint-danger); }
.cf-swatch--high { background: var(--vt-tint-warning); }
.cf-swatch--low { background: var(--vt-tint-info); }

/* Ressalva final como faixa discreta com ícone. */
.cf-disclaimer {
    display: flex; align-items: flex-start; gap: 0.6rem;
    margin-top: 0.75rem; padding: 0.85rem 1rem;
    background: var(--vt-surface-muted); border-radius: var(--vt-radius-md);
    color: var(--vt-text-secondary); font-size: 0.8rem; line-height: 1.5;
}
.cf-disclaimer .vt-ico { color: var(--vt-text-muted); flex: 0 0 auto; margin-top: 1px; }

/* Gate de plano: amostra desfocada do layout real + overlay de upgrade (mesmo padrão da comparação). */
.cf-preview {
    position: relative;
    margin-top: 1rem;
    border: 1px solid var(--vt-border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--vt-bg);
}

.cf-sample {
    padding: 1rem;
    filter: blur(2.5px);
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
}

.cf-preview-scrim {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--vt-bg) 25%, transparent),
        color-mix(in srgb, var(--vt-bg) 65%, transparent));
}

.cf-preview-card {
    max-width: 28rem;
    text-align: center;
    padding: 1.75rem 1.75rem 1.5rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: 16px;
    box-shadow: var(--vt-shadow-card);
}

.cf-locked-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    margin-bottom: 1rem;
    background: color-mix(in srgb, var(--vt-primary-accent) 22%, transparent);
    color: var(--vt-text-primary);
}

.cf-locked-title { font-size: 1.25rem; font-weight: 700; color: var(--vt-text-primary); margin: 0 0 0.5rem; }

.cf-locked-msg { color: var(--vt-text-secondary); line-height: 1.45; margin: 0 0 1.4rem; }

@media (max-width: 640px) {
    .cf-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .cf-legend__hint { margin-left: 0; }

    .cf-dates { max-width: none; }

    /* Barra de filtros em coluna; cada campo/ação ocupa a linha inteira e nada é empurrado à direita. */
    .cf-filters-grid { grid-template-columns: 1fr; }
    .cf-filters-toggles { align-items: stretch; }
    .cf-toolbar__actions { margin-left: 0; width: 100%; }
    .cf-toolbar__actions .vt-btn { width: 100%; justify-content: center; }

    /* Revela a dica de arraste das coletas (escondida no desktop). */
    .cf-scroll-hint { display: inline-flex; }

    /* Enxuga a coluna "Marcador" congelada e a de unidade para que a 1ª coleta apareça já na borda —
       reforçando que a grade rola. O nome do marcador segue legível (quebra em várias linhas). */
    .cf-col-marker { min-width: 150px; max-width: 60vw; }
    /* No mobile a coluna encolhe, mas segue fixa para não refluir na troca de referência;
       valores longos truncam na pílula (texto completo no title/tooltip). */
    .cf-col-ref { width: 104px; min-width: 104px; max-width: 104px; }
}

/* ── Índices clínicos derivados (Visão médica): seção + cartões de detalhe ──────────────
   Valores calculados na leitura (TFG, FIB-4, HOMA-IR, não-HDL) com fórmula e procedência à
   mostra. Apenas apresentação — nunca um diagnóstico. */
.di-section { margin-top: 1.75rem; }

.di-section__head { margin-bottom: 0.9rem; }

.di-section__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vt-text-primary);
    margin: 0 0 0.25rem;
}

.di-section__sub { font-size: 0.85rem; color: var(--vt-text-secondary); line-height: 1.45; margin: 0; max-width: 100%; display: block; }

.di-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.9rem;
}

.di-card {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    padding: 1rem 1.1rem;
    box-shadow: var(--vt-shadow-soft);
}

.di-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.di-card__title { font-size: 0.92rem; font-weight: 700; color: var(--vt-text-primary); }

.di-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: var(--vt-radius-pill);
    white-space: nowrap;
}

.di-badge--success { background: var(--vt-tint-success); color: #1c7a34; }
.di-badge--warning { background: var(--vt-tint-warning); color: #b26a00; }
.di-badge--danger { background: var(--vt-tint-danger); color: #c22d31; }
.di-badge--neutral { background: var(--vt-tint-neutral); color: var(--vt-text-secondary); }

.di-card__hero {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.di-card__value { font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--vt-text-primary); }

.di-card__unit { font-size: 0.8rem; color: var(--vt-text-secondary); line-height: 1.3; padding-bottom: 0.2rem; }

.di-card__delta { color: var(--vt-text-muted); font-weight: 600; }

.di-card__spark { margin-left: auto; padding-bottom: 0.1rem; }

.di-card__detail { border-top: 1px solid var(--vt-border); padding-top: 0.7rem; }

.di-card__formula-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vt-text-muted);
    margin-bottom: 0.2rem;
}

.di-card__formula {
    display: block;
    font-size: 0.78rem;
    color: var(--vt-text-primary);
    background: var(--vt-surface-muted);
    border-radius: var(--vt-radius-sm);
    padding: 0.4rem 0.55rem;
    margin-bottom: 0.7rem;
    overflow-x: auto;
    white-space: nowrap;
}

.di-inputs { list-style: none; margin: 0 0 0.7rem; padding: 0; }

.di-inputs__item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--vt-text-secondary);
    line-height: 1.6;
}

.di-inputs__item strong { color: var(--vt-text-primary); font-weight: 600; }

.di-inputs__unit { color: var(--vt-text-muted); }

.di-inputs__meta { color: var(--vt-text-muted); font-size: 0.78rem; }

.di-card__source {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--vt-text-secondary);
}

.di-card__safety { font-size: 0.72rem; color: var(--vt-text-muted); line-height: 1.4; margin: 0.4rem 0 0; }

@media (max-width: 640px) {
    .di-grid { grid-template-columns: 1fr; }
}

/* Índices derivados destacados DENTRO da grade (mesma faixa de acento do esboço). A faixa e o leve tom nas
   linhas usam o acento "exam" (violeta), distinto das cores de classificação; o tom fica no <tr> para que as
   células classificadas (alto/baixo/crítico) pintem por cima e mantenham sua cor. */
.cf-group-row--derived td {
    background: var(--vt-tint-exam);
    border-top: 1px solid color-mix(in srgb, #7b61ff 30%, transparent);
}
.cf-group-row--derived .cf-group-name { color: #4a35c7; }
.cf-group-row--derived .cf-group-ico {
    background: color-mix(in srgb, #7b61ff 16%, var(--vt-surface));
    border-color: color-mix(in srgb, #7b61ff 35%, transparent);
    color: #4a35c7;
}
.cf-group-row--derived .cf-group-count {
    color: #4a35c7;
    border-color: color-mix(in srgb, #7b61ff 30%, transparent);
}
.cf-group-row--derived .cf-group-tag { color: color-mix(in srgb, #4a35c7 70%, transparent); }

.cf-row--derived { background: color-mix(in srgb, var(--vt-tint-exam) 55%, transparent); }
.cf-row--derived .cf-col-marker {
    border-left: 2px solid #7b61ff;
    background: color-mix(in srgb, var(--vt-tint-exam) 55%, var(--vt-surface));
}

/* Conta — perfil profissional (sou médico + curadoria de índices derivados) */
.acc-section-title { font-size: 1.05rem; font-weight: 700; color: var(--vt-text-primary); margin: 0 0 0.75rem; }
.acc-subtitle { font-size: 0.9rem; font-weight: 600; color: var(--vt-text-primary); margin: 0.75rem 0 0.25rem; }

.acc-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--vt-text-primary);
    cursor: pointer;
}

.acc-index-list { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }

.acc-index {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    cursor: pointer;
}

.acc-index:hover { border-color: var(--vt-border-strong); }
.acc-index input { margin-top: 0.15rem; }
.acc-index__body { display: flex; flex-direction: column; gap: 0.1rem; }
.acc-index__name { font-size: 0.9rem; font-weight: 600; color: var(--vt-text-primary); }
.acc-index__meta { font-size: 0.78rem; color: var(--vt-text-muted); }

.acc-note {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--vt-text-secondary);
    margin: 0.5rem 0 0;
}

.acc-actions { margin-top: 1rem; }

/* Conta — gestão de conta & direitos LGPD (senha, consentimento, export, exclusão) */

/* Formulário vertical das subpáginas (senha, exclusão, reaceite) */
.acc-manage-form { display: flex; flex-direction: column; gap: 0.85rem; max-width: 26rem; }
.acc-manage-form .home-access__field { width: 100%; }
.acc-manage-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }

/* Aviso do fluxo de exclusão */
.acc-danger-note { margin-bottom: 1.1rem; font-size: 0.9rem; color: var(--vt-text-secondary); }
.acc-danger-note ul { margin: 0.4rem 0 0.6rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.acc-danger-note strong { color: var(--vt-text-primary); }
.acc-danger-note code {
    padding: 0.05rem 0.35rem;
    border-radius: var(--vt-radius-sm);
    background: var(--vt-surface-muted);
    font-size: 0.85em;
}

/* Selo de estado (consentimento em dia / pendente) */
.acc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 0.4rem;
}
.acc-badge--warn { background: color-mix(in srgb, var(--vt-warning) 22%, var(--vt-surface)); color: var(--vt-warning); }
.acc-badge--ok { background: color-mix(in srgb, var(--vt-success) 18%, var(--vt-surface)); color: var(--vt-success); }

/* Cabeçalho do card de consentimento (versões + selo) */
.acc-consent-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Histórico de aceites */
.acc-consent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.acc-consent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
}
.acc-consent-item__main { display: flex; flex-direction: column; gap: 0.1rem; }
.acc-consent-item__date { font-size: 0.9rem; font-weight: 600; color: var(--vt-text-primary); }
.acc-consent-item__meta { font-size: 0.78rem; color: var(--vt-text-muted); }
.acc-consent-item__ip { font-size: 0.78rem; color: var(--vt-text-muted); font-variant-numeric: tabular-nums; }

/* Grade de ações de segurança/privacidade no hub */
.acc-actions-grid { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.acc-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    text-decoration: none;
    color: var(--vt-text-primary);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.acc-action:hover { border-color: var(--vt-border-strong); background: var(--vt-surface-muted); }
.acc-action__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: var(--vt-radius-sm);
    background: var(--vt-surface-muted);
    color: var(--vt-text-secondary);
}
.acc-action__body { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; }
.acc-action__title { font-size: 0.92rem; font-weight: 600; }
.acc-action__desc { font-size: 0.8rem; color: var(--vt-text-muted); }
.acc-action--danger .acc-action__ico { color: var(--vt-danger); }
.acc-action--danger:hover { border-color: var(--vt-danger); }

/* Popover de confirmação de exclusão (API nativa de popover, sem JS) — tons de alerta */
.acc-confirm-pop {
    max-width: 30rem;
    width: calc(100% - 2rem);
    margin: auto;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--vt-danger);
    border-top: 4px solid var(--vt-danger);
    border-radius: var(--vt-radius-md);
    background: var(--vt-surface);
    color: var(--vt-text-primary);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.acc-confirm-pop::backdrop { background: rgba(0, 0, 0, 0.55); }

.acc-confirm-pop__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--vt-danger);
}
.acc-confirm-pop__body { margin-top: 0.75rem; font-size: 0.9rem; color: var(--vt-text-secondary); line-height: 1.5; }
.acc-confirm-pop__body p { margin: 0 0 0.5rem; }
.acc-confirm-pop__body ul { margin: 0 0 0.5rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.acc-confirm-pop__body strong { color: var(--vt-text-primary); }
.acc-confirm-pop__final {
    margin-top: 0.6rem !important;
    padding: 0.6rem 0.7rem;
    border-radius: var(--vt-radius-sm);
    background: color-mix(in srgb, var(--vt-danger) 12%, var(--vt-surface));
}
.acc-confirm-pop__final strong { color: var(--vt-danger); }
.acc-confirm-pop__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem; }

/* Páginas legais (Termos/Privacidade) — texto corrido */
.acc-legal { font-size: 0.92rem; color: var(--vt-text-secondary); line-height: 1.55; }
.acc-legal h2 { font-size: 1rem; font-weight: 700; color: var(--vt-text-primary); margin: 1.25rem 0 0.4rem; }
.acc-legal p { margin: 0 0 0.6rem; }
.acc-legal ul { margin: 0 0 0.6rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
.acc-legal strong { color: var(--vt-text-primary); }

/* Visão médica — convite para escolher índices (recurso no plano, sem seleção) */
.di-invite {
    margin-top: 1.75rem;
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.di-invite__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--vt-tint-exam);
    color: #4a35c7;
}

.di-invite__title { font-size: 1.05rem; font-weight: 700; color: var(--vt-text-primary); margin: 0 0 0.25rem; }
.di-invite__msg { font-size: 0.9rem; color: var(--vt-text-secondary); line-height: 1.5; margin: 0 0 0.9rem; max-width: 60ch; }

/* Índice derivado pedido mas não calculável com as datas em tela (mesmo cartão, estado vazio) */
.di-card--empty { border-style: dashed; }
.di-card__empty-body { display: flex; flex-direction: column; gap: 0.4rem; }
.di-card__empty-msg {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--vt-text-secondary);
    margin: 0;
}
.di-card__empty-hint { font-size: 0.82rem; color: var(--vt-text-muted); line-height: 1.45; margin: 0; }

/* Conta — linha de índice com destaque opcional na home */
.acc-index { align-items: center; justify-content: space-between; cursor: default; }
.acc-index--on { border-color: var(--vt-border-strong); }
.acc-index__pick { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; flex: 1; }
.acc-index__home {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--vt-text-secondary);
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-pill);
    cursor: pointer;
    white-space: nowrap;
}
.acc-index__home--on { color: #4a35c7; border-color: #7b61ff; background: var(--vt-tint-exam); }

/* ── Cartão de índice clínico derivado (dirigido por metadados, progressive disclosure) ── */
.dix-card {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    padding: 1rem 1.15rem;
    box-shadow: var(--vt-shadow-soft);
    /* Impede que a mini-tendência (sparkline) vaze para fora do card em larguras estreitas. */
    overflow: hidden;
}
.dix-card--empty { border-style: dashed; }

.dix-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.dix-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dix-name { font-size: 0.98rem; font-weight: 700; color: var(--vt-text-primary); }
.dix-method { font-size: 0.76rem; color: var(--vt-text-muted); }
.dix-date { font-size: 0.78rem; color: var(--vt-text-muted); white-space: nowrap; }

.dix-hero { display: flex; align-items: flex-end; gap: 0.75rem; margin: 0.6rem 0 0.5rem; }
/* O bloco do valor mantém a largura natural (o número não encolhe); a sparkline ocupa o resto e encolhe. */
.dix-value-block { display: flex; align-items: baseline; gap: 0.35rem; flex: 0 0 auto; }
.dix-value { font-size: 2.15rem; font-weight: 700; line-height: 1; color: var(--vt-text-primary); }
.dix-unit { font-size: 0.82rem; color: var(--vt-text-secondary); }
.dix-spark { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; overflow: hidden; padding-bottom: 0.15rem; }
.dix-spark svg { max-width: 100%; display: block; }

.dix-class { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: var(--vt-radius-pill); }
.dix-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dix-class--success { background: var(--vt-tint-success); color: #1c7a34; }
.dix-class--success .dix-dot { background: var(--vt-success); }
.dix-class--warning { background: var(--vt-tint-warning); color: #b26a00; }
.dix-class--warning .dix-dot { background: var(--vt-warning); }
.dix-class--danger { background: var(--vt-tint-danger); color: #c22d31; }
.dix-class--danger .dix-dot { background: var(--vt-danger); }
.dix-class--neutral { background: var(--vt-tint-neutral); color: var(--vt-text-secondary); }
.dix-class--neutral .dix-dot { background: var(--vt-text-muted); }

.dix-evolution { font-size: 0.85rem; color: var(--vt-text-secondary); margin: 0.5rem 0 0; font-weight: 600; }

/* Ressalva calma (não alarmista): a série do índice combina métodos analíticos diferentes. */
.dix-methodmix { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--vt-text-secondary); background: var(--vt-surface-muted); border-radius: 8px; padding: 0.28rem 0.55rem; margin: 0.5rem 0 0; line-height: 1.3; }
.dix-methodmix svg { color: var(--vt-text-muted); flex-shrink: 0; }

.dix-block { margin-top: 0.9rem; }
.dix-block-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vt-text-muted); margin-bottom: 0.35rem; }
.dix-params { display: flex; flex-direction: column; gap: 0.3rem; }
.dix-param { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.86rem; border-bottom: 1px solid var(--vt-border); padding-bottom: 0.3rem; }
.dix-param:last-child { border-bottom: 0; padding-bottom: 0; }
.dix-param-label { color: var(--vt-text-secondary); }
.dix-param-value { color: var(--vt-text-primary); font-weight: 600; text-align: right; }
.dix-param-link { margin-left: 0.4rem; font-weight: 400; font-size: 0.8rem; color: var(--vt-info); }

.dix-disclose { margin-top: 0.7rem; border-top: 1px solid var(--vt-border); padding-top: 0.55rem; }
.dix-disclose > summary { font-size: 0.85rem; color: var(--vt-info); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.3rem; }
.dix-disclose > summary::before { content: "\25B8"; font-size: 0.7rem; transition: transform 0.15s; }
.dix-disclose[open] > summary::before { transform: rotate(90deg); }
.dix-disclose > summary::-webkit-details-marker { display: none; }

.dix-formula { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--vt-text-primary); background: var(--vt-surface-muted); border-radius: var(--vt-radius-sm); padding: 0.5rem 0.6rem; overflow-x: auto; white-space: nowrap; }

.dix-steps { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.dix-step { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.84rem; color: var(--vt-text-secondary); }
.dix-step span:last-child { color: var(--vt-text-primary); font-variant-numeric: tabular-nums; }
.dix-step--result { border-top: 1px solid var(--vt-border); padding-top: 0.3rem; margin-top: 0.15rem; font-weight: 700; }

.dix-reference { margin-top: 0.5rem; font-size: 0.82rem; color: var(--vt-text-secondary); line-height: 1.5; }
.dix-reference a, .dix-param-link { text-decoration: none; }
.dix-reference a:hover, .dix-param-link:hover { text-decoration: underline; }
.dix-notes { margin-top: 0.5rem; font-size: 0.82rem; color: var(--vt-text-secondary); line-height: 1.5; }

.dix-footer { margin-top: 0.9rem; font-size: 0.72rem; color: var(--vt-text-muted); line-height: 1.45; }

.dix-empty-msg { display: flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; font-weight: 600; color: var(--vt-text-secondary); margin: 0.6rem 0 0.3rem; }
.dix-empty-hint { font-size: 0.82rem; color: var(--vt-text-muted); line-height: 1.45; margin: 0; }

/* Gatilho "ver original" em texto (usado nos parâmetros do índice derivado) */
.doc-orig-link {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 0.4rem;
    font-size: 0.8rem;
    color: var(--vt-info);
    cursor: pointer;
    text-decoration: none;
}
.doc-orig-link:hover { text-decoration: underline; }

/* Selos de metadado do índice derivado (categoria clínica + nível de evidência) */
.dix-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.dix-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--vt-radius-pill);
    background: var(--vt-surface-muted);
    color: var(--vt-text-secondary);
    border: 1px solid var(--vt-border);
}
.dix-tag--strong { background: var(--vt-tint-success); color: #1c7a34; border-color: transparent; }
.dix-tag--mid { background: var(--vt-tint-info); color: #1f5fb8; border-color: transparent; }
.dix-tag--soft { background: var(--vt-surface-muted); color: var(--vt-text-muted); }
.dix-specialties { margin-top: 0.35rem; font-size: 0.78rem; color: var(--vt-text-muted); }

/* Página de gestão de perfil */
.pm-section { margin-bottom: 1.1rem; }
.pm-title { font-size: 1.05rem; font-weight: 700; color: var(--vt-text-primary); margin: 0 0 0.4rem; }
.pm-hint { font-size: 0.85rem; color: var(--vt-text-secondary); line-height: 1.5; margin: 0 0 0.8rem; max-width: 70ch; }
.pm-grid { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 0.9rem; }
.pm-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--vt-text-secondary); }
.pm-field input, .pm-field select { min-width: 12rem; }
.pm-metric-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 0.9rem; }
.pm-table { margin-top: 0.5rem; }
.pm-alert { padding: 0.7rem 1rem; margin-bottom: 0.9rem; }
.pm-alert--error { border-left: 3px solid var(--vt-danger); color: #c22d31; }
.pm-alert--ok { border-left: 3px solid var(--vt-success); color: #1c7a34; }
.pm-danger { border-color: color-mix(in srgb, var(--vt-danger) 40%, var(--vt-border)); }
.pm-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--vt-text-primary); }

/* =========================================================
   Profile forms — Gerenciar perfil / Gestações
   Cartão com "trilho" à esquerda (ícone + título + descrição) e corpo de formulário à direita.
   ========================================================= */
.pf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pf-head__ident { display: flex; align-items: flex-start; gap: 0.9rem; }
.pf-head__ico { width: 46px; height: 46px; margin-top: 0.15rem; }

.pf-help-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--vt-text-secondary);
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-pill);
    padding: 0.35rem 0.8rem;
    cursor: pointer;
}
.pf-help-btn:hover { background: var(--vt-surface-muted); }

/* Cartão-bloco com trilho + corpo + ação */
.pf-block {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.35rem 1.6rem;
    margin-bottom: 1.1rem;
}
.pf-block--danger { border-color: color-mix(in srgb, var(--vt-danger) 30%, var(--vt-border)); }

.pf-rail { flex: 0 0 212px; max-width: 212px; display: flex; align-items: flex-start; gap: 0.8rem; }
.pf-rail__ico {
    width: 40px; height: 40px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.pf-rail__text { min-width: 0; }
.pf-rail__title { font-size: 1rem; font-weight: 700; color: var(--vt-text-primary); margin: 0.15rem 0 0.25rem; }
.pf-rail__desc { font-size: 0.82rem; color: var(--vt-text-secondary); line-height: 1.5; margin: 0; }

/* Tons pastel dos ícones do trilho */
.pf-ico--green  { background: var(--vt-tint-success); color: #1c7a34; }
.pf-ico--teal   { background: var(--vt-tint-teal);    color: #12897e; }
.pf-ico--purple { background: var(--vt-tint-exam);    color: #5a45c7; }
.pf-ico--red    { background: var(--vt-tint-danger);  color: #c22d31; }
.pf-ico--amber  { background: var(--vt-tint-warning); color: #a86a00; }

.pf-body { flex: 1 1 auto; min-width: 0; }
.pf-action { flex: none; margin-left: auto; align-self: flex-start; }

/* Tabela dos formulários de perfil (cabeçalho em maiúsculas discreto) */
.pf-table { margin: 0.35rem 0 0; }
.pf-table thead th {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--vt-text-muted);
    border-bottom: 1px solid var(--vt-border);
    padding-bottom: 0.55rem;
}
.pf-table tbody td { vertical-align: middle; color: var(--vt-text-primary); border-color: var(--vt-border); }
.pf-bmi { font-weight: 600; margin-right: 0.5rem; }

/* Botão de ação em ícone (editar / remover) dentro das tabelas */
.pf-icobtn {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--vt-radius-sm);
    border: 1px solid var(--vt-border);
    background: var(--vt-surface);
    color: var(--vt-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.pf-icobtn + .pf-icobtn { margin-left: 0.35rem; }
.pf-icobtn:hover { border-color: var(--vt-border-strong); background: var(--vt-surface-muted); }
.pf-icobtn:disabled { opacity: 0.5; cursor: not-allowed; }
.pf-icobtn--danger { color: var(--vt-danger); border-color: color-mix(in srgb, var(--vt-danger) 28%, var(--vt-border)); }
.pf-icobtn--danger:hover { background: var(--vt-tint-danger); border-color: color-mix(in srgb, var(--vt-danger) 45%, var(--vt-border)); }

.pf-foot-note {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; color: var(--vt-text-muted);
    margin: 0.6rem 0 0;
}
.pf-danger-text { font-size: 0.9rem; color: var(--vt-danger); line-height: 1.5; margin: 0.2rem 0 0; max-width: 60ch; }

/* Painel simples (histórico), sem trilho */
.pf-panel { padding: 1.35rem 1.6rem; margin-bottom: 1.1rem; }
.pf-panel__title { font-size: 1.05rem; font-weight: 700; color: var(--vt-text-primary); margin: 0 0 0.6rem; }

/* Notas informativas */
.pf-inline-note {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.83rem; color: #1c7a34;
    margin: -0.4rem 0 1.1rem;
}
.pf-note {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.85rem 1.1rem; margin-bottom: 1.1rem;
    font-size: 0.86rem; line-height: 1.5; color: var(--vt-text-secondary);
}
.pf-note--info { background: var(--vt-tint-info); border-color: color-mix(in srgb, var(--vt-info) 22%, var(--vt-border)); }
.pf-note--teal { background: var(--vt-tint-teal); border-color: color-mix(in srgb, var(--vt-teal) 24%, var(--vt-border)); }
.pf-note .vt-ico { flex: none; color: var(--vt-text-muted); margin-top: 0.05rem; }

@media (max-width: 820px) {
    .pf-block { flex-direction: column; gap: 1rem; }
    .pf-rail { flex-basis: auto; max-width: none; }
    .pf-action { margin-left: 0; width: 100%; }
    .pf-action .vt-btn { width: 100%; }
}

/* Card consolidado de índices ainda não calculados */
.dix-missing { margin-top: 0.9rem; border-style: dashed; }
.dix-missing__head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 700; color: var(--vt-text-primary); }
.dix-missing__sub { font-size: 0.82rem; color: var(--vt-text-secondary); margin: 0.3rem 0 0.6rem; }
.dix-missing__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.dix-missing__list li { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.85rem; align-items: baseline; }
.dix-missing__name { font-weight: 600; color: var(--vt-text-primary); }
.dix-missing__needs { color: var(--vt-text-muted); }

/* Convite para a página dedicada de índices derivados (Visão médica) */
.di-cta {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.35rem 1.5rem;
    /* Preenchimento lavanda uniforme (não desbota até o botão) sobre o branco do card. */
    background: color-mix(in srgb, #7b61ff 7%, var(--vt-surface));
    border-color: color-mix(in srgb, #7b61ff 22%, var(--vt-border));
}
.di-cta__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 50%;
    background: color-mix(in srgb, #7b61ff 15%, var(--vt-surface));
    color: #5a44c9;
}
.di-cta__body { flex: 1 1 auto; min-width: 0; }
.di-cta__title { font-size: 1.05rem; font-weight: 700; color: var(--vt-text-primary); margin: 0 0 0.25rem; }
.di-cta__msg { font-size: 0.88rem; color: var(--vt-text-secondary); line-height: 1.5; margin: 0; max-width: 62ch; }
/* Botão escuro coeso com o acento violeta do card (em vez do lima padrão). */
.di-cta__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    padding: 0.65rem 1.15rem;
    border-radius: var(--vt-radius-md);
    font-weight: 600;
    background: var(--vt-text-primary);
    color: var(--vt-surface);
    border: 0;
}
.di-cta__btn:hover { background: var(--vt-text-primary); filter: brightness(1.35); }

@media (max-width: 640px) {
    .di-cta { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .di-cta__btn { width: 100%; justify-content: center; }
}

/* Data do card de índice: data exata + tempo relativo (humanizer) abaixo */
.dix-date { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.dix-date-rel { font-size: 0.72rem; color: var(--vt-text-muted); font-weight: 400; }

/* =========================================================
   Índices clínicos derivados — página mestre-detalhe (dxp-*)
   Tudo tinge por classificação clínica (sucesso/atenção/perigo/neutro) usando os tokens do tema; nenhuma
   cor codificada fora dos --vt-*. Acento lima reservado só para a ação primária e o filtro selecionado.
   ========================================================= */
.dxp-page { display: flex; flex-direction: column; gap: 1rem; }

/* Barra superior: título à esquerda, período à direita */
.dxp-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.dxp-head { min-width: 0; }
.dxp-head__title { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.dxp-head__info { display: inline-flex; color: var(--vt-text-muted); cursor: help; }
.dxp-head__sub { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--vt-text-secondary); }
.dxp-head__more { color: var(--vt-info); font-weight: 600; text-decoration: none; margin-left: 0.25rem; }
.dxp-head__more:hover { text-decoration: underline; }

/* Filtro de período analisado — datas sempre visíveis, como na referência. */
.dxp-period {
    display: flex; flex-direction: column; gap: 0.45rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-lg);
    box-shadow: var(--vt-shadow-soft);
    padding: 0.75rem 0.9rem;
}
.dxp-period__label { font-size: 0.75rem; font-weight: 600; color: var(--vt-text-secondary); }
.dxp-date-range { display: flex; align-items: center; gap: 0.65rem; }
.dxp-date-range__field { position: relative; display: inline-flex; align-items: center; }
.dxp-date-range__field > .vt-ico {
    position: absolute; right: 0.65rem; color: var(--vt-text-secondary); pointer-events: none;
}
.dxp-date-range__input {
    width: 142px; height: 34px; padding: 0 2rem 0 0.75rem;
    border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm);
    background: var(--vt-surface); color: var(--vt-text-primary);
    font: inherit; font-size: 0.82rem; font-variant-numeric: tabular-nums;
}
.dxp-date-range__input:focus { border-color: var(--vt-border-strong); outline: 2px solid var(--vt-tint-info); outline-offset: 1px; }
.dxp-date-range__input[aria-invalid="true"] { border-color: var(--vt-danger); }
.dxp-date-range__input::-webkit-calendar-picker-indicator {
    position: absolute; inset: 0 0 0 auto; width: 2rem; height: 100%; opacity: 0; cursor: pointer;
}
.dxp-date-range__separator { font-size: 0.78rem; color: var(--vt-text-muted); }
.dxp-date-range__apply { min-height: 34px; }
.dxp-date-range__error { margin: 0; font-size: 0.74rem; color: var(--vt-danger); }

/* "Definir visualmente" — toggle no cabeçalho do card e o card aninhado do navegador temporal. */
.dxp-period__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.dxp-period__visual { gap: 0.35rem; white-space: nowrap; }
.dxp-period__visual.is-active { background: var(--vt-tint-info); border-color: var(--vt-border-strong); }
/* Com o navegador aberto o card toma a linha inteira do topbar (que quebra linha), dando largura ao trilho. */
.dxp-period--visual { flex: 1 1 100%; }
.dxp-period__nav {
    display: flex; flex-direction: column; gap: 0.35rem;
    background: var(--vt-surface-muted);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    padding: 0.6rem 0.75rem;
}
.dxp-period__nav-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.dxp-period__nav-label { font-size: 0.75rem; font-weight: 600; color: var(--vt-text-secondary); }
.dxp-period__nav-range { font-size: 0.78rem; color: var(--vt-text-muted); font-variant-numeric: tabular-nums; }
.dxp-period__nav-hint { margin: 0; font-size: 0.74rem; color: var(--vt-text-muted); }
/* O navegador cola no card aninhado sem o respiro que ele traz do gráfico de marcador. */
.dxp-period__nav .mt-nav { margin-top: 0.15rem; }

/* Aviso: índices do catálogo fora da curadoria (informativo — usa o acento, nunca cores clínicas) */
.dxp-notice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-left: 3px solid var(--vt-primary-accent);
    border-radius: var(--vt-radius-lg);
    box-shadow: var(--vt-shadow-soft);
    padding: 0.85rem 2.4rem 0.85rem 1.1rem;
}
.dxp-notice__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--vt-tint-accent);
    color: #4f6b00;
}
.dxp-notice__body { flex: 1 1 auto; min-width: 0; }
.dxp-notice__title { font-size: 0.92rem; font-weight: 700; color: var(--vt-text-primary); margin: 0; }
.dxp-notice__text { font-size: 0.83rem; color: var(--vt-text-secondary); line-height: 1.45; margin: 0.15rem 0 0; }
.dxp-notice__actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.dxp-notice__link { font-size: 0.83rem; font-weight: 600; color: var(--vt-info); text-decoration: none; white-space: nowrap; }
.dxp-notice__link:hover { text-decoration: underline; }
.dxp-notice__close {
    position: absolute;
    top: 0.5rem;
    right: 0.55rem;
    display: inline-flex;
    border: 0;
    background: transparent;
    color: var(--vt-text-muted);
    cursor: pointer;
    padding: 0.2rem;
    line-height: 0;
}
.dxp-notice__close:hover { color: var(--vt-text-primary); }

@media (max-width: 720px) {
    .dxp-notice { flex-wrap: wrap; }
    .dxp-notice__actions { width: 100%; }
    .dxp-notice__actions .vt-btn { flex: 1 1 auto; justify-content: center; }
}

/* Resumo executivo por área — card "O que seus exames indicam hoje", layout do mockup:
   uma linha de itens (disco de estado + conclusão em negrito + interpretação discreta) e o
   "Ver detalhes" na ponta direita. */
.dxp-summary { padding: 1.05rem 1.3rem 1.1rem; }
.dxp-summary__title { font-size: 1rem; font-weight: 700; color: var(--vt-text-primary); margin: 0 0 0.95rem; }
.dxp-summary__row { display: flex; align-items: center; gap: 1.5rem; }
.dxp-summary__grid { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.9rem 1.5rem; }
.dxp-summary__cta { flex: none; white-space: nowrap; align-self: center; }
.dxp-summary__item {
    display: flex; align-items: center; gap: 0.75rem;
    background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; width: 100%;
    border-radius: var(--vt-radius-md);
}
.dxp-summary__item:hover .dxp-summary__headline { text-decoration: underline; }
.dxp-summary__ico {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.35rem; height: 2.35rem; border-radius: 50%;
}
/* O estado nunca é só cor: o glifo muda junto (check/exclamação). Traço mais grosso que o padrão
   do vt-ico para o disco ler bem de longe, como no mockup. */
.dxp-summary__ico svg { stroke-width: 2.2; }
.dxp-summary__ico--success { background: var(--vt-tint-success); color: var(--vt-success); }
.dxp-summary__ico--warning { background: var(--vt-tint-warning); color: var(--vt-warning); }
.dxp-summary__ico--danger  { background: var(--vt-tint-danger); color: var(--vt-danger); }
.dxp-summary__ico--neutral { background: var(--vt-tint-neutral); color: var(--vt-text-secondary); }
.dxp-summary__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.dxp-summary__headline { font-size: 0.88rem; font-weight: 700; color: var(--vt-text-primary); line-height: 1.3; }
.dxp-summary__sub { font-size: 0.8rem; color: var(--vt-text-muted); line-height: 1.35; }

/* Filtros + legenda */
.dxp-filters { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dxp-chips { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dxp-chip__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.15rem; height: 1.15rem; padding: 0 0.32rem;
    font-size: 0.72rem; font-weight: 700; border-radius: var(--vt-radius-pill);
    background: var(--vt-surface-muted); color: var(--vt-text-secondary);
}
.vt-chip--active .dxp-chip__count { background: rgba(16, 20, 24, 0.14); color: var(--vt-text-primary); }
.dxp-legend { display: flex; align-items: center; gap: 0.9rem; }
.dxp-legend__item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--vt-text-secondary); }
.dxp-legend__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.dxp-legend__dot--success { background: var(--vt-success); }
.dxp-legend__dot--warning { background: var(--vt-warning); }
.dxp-legend__dot--danger { background: var(--vt-danger); }

/* Corpo mestre-detalhe */
.dxp-body { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 1rem; align-items: start; }

/* Lista lateral de índices */
.dxp-list {
    background: var(--vt-surface); border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-lg); box-shadow: var(--vt-shadow-soft);
    padding: 0.9rem; position: sticky; top: 1rem;
}
.dxp-list__title { font-size: 0.95rem; font-weight: 700; color: var(--vt-text-primary); margin: 0 0 0.7rem; padding: 0 0.25rem; }
.dxp-list__mobile { display: none; }
.dxp-list__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }

.dxp-item {
    display: flex; align-items: center; gap: 0.65rem; width: 100%;
    background: none; border: 1px solid transparent; border-radius: var(--vt-radius-md);
    padding: 0.6rem 0.65rem; cursor: pointer; text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dxp-item:hover { background: var(--vt-surface-muted); }
.dxp-item--active { background: var(--vt-tint-success); border-color: transparent; }
.dxp-item:focus-visible { outline: 2px solid var(--vt-info); outline-offset: 1px; }
.dxp-item__ico {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2rem; height: 2rem; color: var(--vt-text-secondary);
}
.dxp-item__ico--green { color: var(--vt-success); }
.dxp-item__ico--red { color: var(--vt-danger); }
.dxp-item__ico--neutral { color: var(--vt-text-secondary); }
.dxp-item__body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; flex: 1 1 auto; }
.dxp-item__name { font-size: 0.88rem; font-weight: 600; color: var(--vt-text-primary); line-height: 1.25; }
.dxp-item__state { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.76rem; font-weight: 600; }
.dxp-item__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none; }
.dxp-item__chev { color: var(--vt-text-muted); flex: none; }
.dxp-item__state--success { color: #1c7a34; }
.dxp-item__state--success .dxp-item__dot { background: var(--vt-success); }
.dxp-item__state--warning { color: #b26a00; }
.dxp-item__state--warning .dxp-item__dot { background: var(--vt-warning); }
.dxp-item__state--danger { color: #c22d31; }
.dxp-item__state--danger .dxp-item__dot { background: var(--vt-danger); }
.dxp-item__state--neutral { color: var(--vt-text-muted); }
.dxp-item__state--neutral .dxp-item__dot { background: var(--vt-text-muted); }

/* Índices não calculados (expansão discreta) */
.dxp-notcalc { margin-top: 0.7rem; border-top: 1px solid var(--vt-border); padding-top: 0.6rem; }
.dxp-notcalc > summary {
    font-size: 0.82rem; color: var(--vt-text-secondary); cursor: pointer; list-style: none;
    display: flex; align-items: center; gap: 0.35rem; padding: 0 0.25rem; font-weight: 600;
}
.dxp-notcalc > summary::-webkit-details-marker { display: none; }
.dxp-notcalc > summary::before { content: "\25B8"; font-size: 0.7rem; transition: transform 0.15s; }
.dxp-notcalc[open] > summary::before { transform: rotate(90deg); }
.dxp-notcalc__list { list-style: none; margin: 0.5rem 0 0; padding: 0 0.25rem; display: flex; flex-direction: column; gap: 0.45rem; }
.dxp-notcalc__list li { display: flex; flex-direction: column; gap: 0.1rem; }
.dxp-notcalc__name { font-size: 0.83rem; font-weight: 600; color: var(--vt-text-secondary); }
.dxp-notcalc__needs { font-size: 0.78rem; color: var(--vt-text-muted); }

/* Nota clínica do rodapé da página */
.dxp-page__note {
    display: flex; align-items: flex-start; gap: 0.5rem;
    background: var(--vt-tint-info); border: 1px solid color-mix(in srgb, var(--vt-info) 22%, var(--vt-border));
    border-radius: var(--vt-radius-md); padding: 0.75rem 1rem;
    font-size: 0.85rem; color: var(--vt-text-secondary); line-height: 1.5; margin: 0;
}
.dxp-page__note .vt-ico { color: var(--vt-info); flex: none; margin-top: 0.05rem; }

/* ── Detalhe do índice ── */
.dxp-detail {
    background: var(--vt-surface); border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-lg); box-shadow: var(--vt-shadow-soft);
    padding: 1rem; display: flex; flex-direction: column; gap: 0.9rem;
}
.dxp-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dxp-detail__ident { display: flex; align-items: flex-start; gap: 0.85rem; min-width: 0; }
.dxp-detail__ico {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.9rem; height: 2.9rem; border-radius: 50%;
    background: var(--vt-surface); border: 1px solid var(--vt-border);
    color: var(--vt-text-secondary);
}
.dxp-detail__ico--green { color: var(--vt-success); }
.dxp-detail__ico--red { color: var(--vt-danger); }
.dxp-detail__ico--neutral { color: var(--vt-text-secondary); }
.dxp-detail__area { border: 0; }
.dxp-detail__area--success { background: var(--vt-tint-success); color: var(--vt-success); }
.dxp-detail__area--warning { background: var(--vt-tint-warning); color: #8a5700; }
.dxp-detail__area--danger { background: var(--vt-tint-danger); color: var(--vt-danger); }
.dxp-detail__area--neutral { background: var(--vt-surface-muted); color: var(--vt-text-secondary); }
.dxp-detail__name { font-size: 1.2rem; font-weight: 700; color: var(--vt-text-primary); margin: 0.1rem 0 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dxp-detail__method { font-size: 0.95rem; font-weight: 500; color: var(--vt-text-secondary); }
.dxp-detail__area { align-self: center; }
.dxp-detail__desc { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--vt-text-secondary); line-height: 1.5; max-width: 60ch; }
.dxp-detail__dates { display: flex; gap: 1.5rem; margin: 0; }
.dxp-detail__dates div { display: flex; flex-direction: column; gap: 0.15rem; }
.dxp-detail__dates dt { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--vt-text-muted); }
.dxp-detail__dates dd { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--vt-text-primary); }

.dxp-detail__cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0.75rem; align-items: stretch; }
.dxp-detail__left { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* Painel genérico interno do detalhe */
.dxp-panel { background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-md); padding: 1rem 1.1rem; }
.dxp-panel__title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 700; color: var(--vt-text-primary); margin: 0 0 0.75rem; }

/* Interpretação em linguagem simples (destaque tingido pelo estado) */
.dxp-verdict { display: flex; align-items: center; gap: 1rem; border: 1px solid transparent; border-radius: var(--vt-radius-md); padding: 1.2rem; min-height: 7.2rem; }
.dxp-verdict__ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%; color: var(--vt-text-inverse); }
.dxp-verdict__text { flex: 1 1 auto; min-width: 0; }
.dxp-verdict__headline { font-size: 1.05rem; font-weight: 700; color: var(--vt-text-primary); margin: 0; line-height: 1.35; }
.dxp-verdict__sub { font-size: 0.88rem; color: var(--vt-text-secondary); line-height: 1.5; margin: 0.3rem 0 0; }
.dxp-verdict__official { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.15rem; align-self: stretch; flex: none; padding: 0.55rem 0.9rem; border-radius: var(--vt-radius-sm); background: rgba(255, 255, 255, 0.58); border: 1px solid var(--vt-border); min-width: 8rem; }
.dxp-verdict__official-cap { font-size: 0.68rem; font-weight: 600; color: var(--vt-text-secondary); }
.dxp-verdict__official-code { font-size: 1.5rem; font-weight: 800; color: var(--vt-text-primary); line-height: 1.1; }
.dxp-verdict__official-desc { font-size: 0.72rem; color: var(--vt-text-secondary); line-height: 1.3; }
.dxp-verdict--success { background: var(--vt-tint-success); border-color: color-mix(in srgb, var(--vt-success) 15%, var(--vt-border)); }
.dxp-verdict--success .dxp-verdict__ico { background: var(--vt-success); }
.dxp-verdict--success .dxp-verdict__official-code,
.dxp-verdict--success .dxp-verdict__official-desc { color: var(--vt-success); }
.dxp-verdict--warning { background: var(--vt-tint-warning); border-color: color-mix(in srgb, var(--vt-warning) 18%, var(--vt-border)); }
.dxp-verdict--warning .dxp-verdict__ico { background: var(--vt-warning); }
.dxp-verdict--warning .dxp-verdict__official-code { color: #8a5700; }
.dxp-verdict--danger { background: var(--vt-tint-danger); border-color: color-mix(in srgb, var(--vt-danger) 15%, var(--vt-border)); }
.dxp-verdict--danger .dxp-verdict__ico { background: var(--vt-danger); }
.dxp-verdict--danger .dxp-verdict__official-code { color: var(--vt-danger); }
.dxp-verdict--neutral { background: var(--vt-surface-muted); }
.dxp-verdict--neutral .dxp-verdict__ico { background: var(--vt-text-muted); }

/* Resultado + evolução */
.dxp-result-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.dxp-result { display: flex; flex-direction: column; gap: 0.55rem; }
.dxp-result__value { display: flex; align-items: baseline; gap: 0.4rem; }
.dxp-result__num { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--vt-text-primary); font-variant-numeric: tabular-nums; }
.dxp-result__unit { font-size: 0.85rem; color: var(--vt-text-secondary); }
.dxp-result__evolution { display: flex; align-items: flex-start; gap: 0.3rem; font-size: 0.83rem; color: var(--vt-text-secondary); line-height: 1.45; margin: 0.15rem 0 0; }
.dxp-result__evolution .vt-ico { color: var(--vt-text-muted); flex: none; margin-top: 0.1rem; }

/* Chip de classificação (reutilizável no detalhe) */
.dxp-chip { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; font-size: 0.82rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: var(--vt-radius-pill); }
.dxp-chip__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.dxp-chip--success { background: var(--vt-tint-success); color: #1c7a34; }
.dxp-chip--success .dxp-chip__dot { background: var(--vt-success); }
.dxp-chip--warning { background: var(--vt-tint-warning); color: #b26a00; }
.dxp-chip--warning .dxp-chip__dot { background: var(--vt-warning); }
.dxp-chip--danger { background: var(--vt-tint-danger); color: #c22d31; }
.dxp-chip--danger .dxp-chip__dot { background: var(--vt-danger); }
.dxp-chip--neutral { background: var(--vt-tint-neutral); color: var(--vt-text-secondary); }
.dxp-chip--neutral .dxp-chip__dot { background: var(--vt-text-muted); }

/* Linhas de painéis auxiliares (dados usados / técnico / evidência / referência) */
.dxp-meta-grid { display: grid; grid-template-columns: minmax(220px, 1.35fr) minmax(170px, 1fr) minmax(145px, 0.72fr) minmax(190px, 1fr); gap: 0.75rem; align-items: stretch; }
.dxp-meta-grid > .dxp-panel { min-width: 0; }
.dxp-inputs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; }
.dxp-input { display: flex; flex-direction: column; gap: 0.15rem; background: var(--vt-surface-muted); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); padding: 0.55rem 0.65rem; }
.dxp-input__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--vt-text-muted); }
.dxp-input__label--link { color: var(--vt-info); text-decoration: none; cursor: pointer; }
.dxp-input__label--link:hover { text-decoration: underline; }
.dxp-input__value { font-size: 0.95rem; font-weight: 700; color: var(--vt-text-primary); }
.dxp-input__meta { font-size: 0.74rem; color: var(--vt-text-muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; }
.dxp-input__prov { font-size: 0.72rem; font-style: italic; color: var(--vt-text-muted); }
.dxp-inputs__note { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--vt-text-muted); margin: 0.7rem 0 0; }

/* Detalhes técnicos (expansão) */
.dxp-tech { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.dxp-disclose > summary { font-size: 0.9rem; font-weight: 600; color: var(--vt-info); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.35rem; }
.dxp-disclose > summary::-webkit-details-marker { display: none; }
.dxp-disclose > summary::before { content: "\25B8"; font-size: 0.7rem; transition: transform 0.15s; }
.dxp-disclose[open] > summary::before { transform: rotate(90deg); }
.dxp-tech__body { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.75rem; }
.dxp-tech__block { display: flex; flex-direction: column; gap: 0.3rem; }
.dxp-tech__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vt-text-muted); }
.dxp-tech__text { font-size: 0.84rem; color: var(--vt-text-secondary); line-height: 1.5; margin: 0; }
.dxp-formula { display: block; font-size: 0.8rem; color: var(--vt-text-primary); background: var(--vt-surface-muted); border-radius: var(--vt-radius-sm); padding: 0.5rem 0.6rem; overflow-x: auto; white-space: nowrap; }
.dxp-steps { display: flex; flex-direction: column; gap: 0.28rem; }
.dxp-step { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.84rem; color: var(--vt-text-secondary); }
.dxp-step span:last-child { color: var(--vt-text-primary); font-variant-numeric: tabular-nums; }
.dxp-step--result { border-top: 1px solid var(--vt-border); padding-top: 0.3rem; margin-top: 0.15rem; font-weight: 700; }

/* Nível de evidência */
.dxp-evidence { display: flex; flex-direction: column; gap: 0.35rem; }
.dxp-stars { display: inline-flex; gap: 0.15rem; color: var(--vt-border-strong); }
.dxp-star { display: inline-flex; }
.dxp-star--on { color: var(--vt-warning); }
.dxp-evidence__blurb { font-size: 0.92rem; font-weight: 700; color: var(--vt-text-primary); margin: 0.1rem 0 0; }
.dxp-evidence__src { font-size: 0.8rem; color: var(--vt-text-muted); margin: 0; line-height: 1.45; }

/* Referência científica */
.dxp-reference__cite { font-size: 0.84rem; color: var(--vt-text-secondary); line-height: 1.5; margin: 0 0 0.5rem; }
.dxp-reference__link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.84rem; font-weight: 600; color: var(--vt-info); text-decoration: none; }
.dxp-reference__link:hover { text-decoration: underline; }

/* Como interpretar (faixas) */
.dxp-detail__right { position: sticky; top: 1rem; }
.dxp-bands__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.dxp-band { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.5rem 0.55rem; border-radius: var(--vt-radius-sm); }
.dxp-band--active { background: var(--vt-surface-muted); }
.dxp-band__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; margin-top: 0.28rem; }
.dxp-band__dot--success { background: var(--vt-success); }
.dxp-band__dot--warning { background: var(--vt-warning); }
.dxp-band__dot--danger { background: var(--vt-danger); }
.dxp-band__dot--neutral { background: var(--vt-text-muted); }
.dxp-band__body { flex: 1 1 auto; min-width: 0; }
.dxp-band__label { font-size: 0.82rem; color: var(--vt-text-secondary); line-height: 1.4; }
.dxp-band--active .dxp-band__label { color: var(--vt-text-primary); font-weight: 600; }
.dxp-band__code { font-weight: 700; color: var(--vt-text-primary); margin-right: 0.3rem; }
.dxp-band__range { font-size: 0.8rem; font-weight: 600; color: var(--vt-text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; margin-top: 0.05rem; }
.dxp-bands__unit { font-size: 0.75rem; color: var(--vt-text-muted); margin: 0.6rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--vt-border); }
.dxp-bands__none { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.83rem; color: var(--vt-text-secondary); line-height: 1.5; margin: 0; }
.dxp-bands__none .vt-ico { color: var(--vt-text-muted); flex: none; margin-top: 0.1rem; }

/* ── Gráfico de evolução ── */
.dxp-chart { display: flex; flex-direction: column; gap: 0.6rem; }
.dxp-chart__shortcuts { display: flex; gap: 0.3rem; flex-wrap: wrap; align-self: flex-end; }
.dxp-chart__shortcut {
    font-family: inherit; font-size: 0.76rem; font-weight: 600; color: var(--vt-text-secondary);
    background: var(--vt-surface); border: 1px solid var(--vt-border); border-radius: var(--vt-radius-pill);
    padding: 0.25rem 0.7rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.dxp-chart__shortcut:hover { background: var(--vt-surface-muted); }
.dxp-chart__shortcut--active { background: var(--vt-surface-muted); border-color: var(--vt-border-strong); color: var(--vt-text-primary); }
.dxp-chart__svg { width: 100%; height: auto; display: block; }
.dxp-chart__grid { stroke: var(--vt-border); stroke-width: 1; }
.dxp-chart__ref { stroke: var(--vt-border-strong); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; }
.dxp-chart__ylabel { fill: var(--vt-text-muted); font-size: 11px; text-anchor: end; }
.dxp-chart__xlabel { fill: var(--vt-text-muted); font-size: 11px; text-anchor: middle; }
.dxp-chart__area { opacity: 0.35; }
.dxp-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dxp-chart__dot { stroke: var(--vt-surface); stroke-width: 1.5; }
.dxp-chart__empty { display: flex; align-items: flex-start; gap: 0.5rem; background: var(--vt-surface-muted); border-radius: var(--vt-radius-md); padding: 1.1rem 1.2rem; }
.dxp-chart__empty .vt-ico { color: var(--vt-text-muted); flex: none; margin-top: 0.1rem; }
.dxp-chart__empty-title { font-size: 0.88rem; font-weight: 600; color: var(--vt-text-primary); margin: 0; }
.dxp-chart__empty-sub { font-size: 0.82rem; color: var(--vt-text-secondary); line-height: 1.5; margin: 0.2rem 0 0; }

/* Acessível-oculto (fallback caso o utilitário do framework não esteja presente) */
.dxp-list .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Responsivo ── */
@media (max-width: 1280px) {
    .dxp-detail__cols { grid-template-columns: 1fr; }
    .dxp-detail__right { position: static; }
    .dxp-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .dxp-body { grid-template-columns: 240px minmax(0, 1fr); }
    .dxp-result-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .dxp-topbar { flex-direction: column; }
    .dxp-period { width: 100%; }
    .dxp-date-range { flex-wrap: wrap; }
    .dxp-date-range__field { flex: 1 1 135px; }
    .dxp-date-range__input { width: 100%; }
    .dxp-summary__row { flex-direction: column; align-items: stretch; }
    .dxp-summary__cta { align-self: flex-start; }
    .dxp-body { grid-template-columns: 1fr; }
    .dxp-list { position: static; }
    .dxp-list__items { display: none; }
    .dxp-list__mobile { display: block; }
    .dxp-notcalc { border-top: 0; padding-top: 0; }
    .dxp-detail__head { flex-direction: column; }
    .dxp-detail__dates { gap: 1.25rem; }
    .dxp-verdict { flex-wrap: wrap; }
    .dxp-verdict__official { margin-left: 3.45rem; }
    .dxp-meta-grid { grid-template-columns: 1fr; }
    .dxp-result__num { font-size: 2.2rem; }
    .dxp-chart__shortcuts { align-self: flex-start; }
}

/* =====================================================================================
   Telemetria de IA (tlx-) — página admin /admin/telemetria-ia
   Layout no espírito da página de índices derivados (dxp-): topbar com cluster de
   período, cards de métricas, gráfico SVG, paleta de campos drag-and-drop e pivot
   hierárquico. Reusa tokens --vt-* e primitivas vt-btn/vt-badge/vt-card/mt-period-btn.
   ===================================================================================== */

.tlx-page { display: flex; flex-direction: column; gap: 1rem; }

.tlx-topbar { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.tlx-head { max-width: 46rem; }
.tlx-head__title { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.15rem; }
.tlx-head__sub { margin: 0 0 0.5rem; color: var(--vt-text-secondary); font-size: 0.92rem; }
.tlx-head__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.tlx-periodbox {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-lg);
    padding: 0.75rem 0.9rem;
    box-shadow: var(--vt-shadow-card);
    min-width: 21rem;
}
.tlx-periodbox__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vt-text-muted);
    margin-bottom: 0.45rem;
}
.tlx-period { display: flex; flex-direction: column; gap: 0.55rem; }

.tlx-banner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--vt-radius-md);
    background: var(--vt-tint-warning);
    border: 1px solid rgba(255, 159, 10, 0.35);
    color: var(--vt-text-primary);
    font-size: 0.88rem;
}
.tlx-banner .vt-btn { margin-left: auto; white-space: nowrap; }

.tlx-loading { color: var(--vt-text-muted); font-size: 0.9rem; margin: 0.5rem 0; }

.tlx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 2.2rem 1.5rem;
    color: var(--vt-text-secondary);
}
.tlx-empty h2 { font-size: 1.05rem; margin: 0; color: var(--vt-text-primary); }
.tlx-empty p { margin: 0; max-width: 34rem; font-size: 0.9rem; }

/* Cards de métricas do período. */
.tlx-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

/* Gráfico de série temporal. */
.tlx-chartcard { padding: 1rem 1.1rem 0.8rem; }
.tlx-chartcard__head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.tlx-chartcard__toggles { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.tlx-section-title { font-size: 1rem; font-weight: 650; margin: 0; }
.tlx-chart__svg { width: 100%; height: auto; display: block; }
.tlx-chart__tick { font-size: 9px; fill: var(--vt-text-muted); }
.tlx-chart__empty { color: var(--vt-text-muted); font-size: 0.88rem; margin: 0.75rem 0; }
.tlx-chart__legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.5rem; }
.tlx-chart__legend-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--vt-text-secondary); }
.tlx-chart__legend-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.tlx-chart__legend-value { color: var(--vt-text-muted); font-variant-numeric: tabular-nums; }

/* Rankings top-N. */
.tlx-ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; }
.tlx-rank__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; counter-reset: tlx-rank; }
.tlx-rank__item {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.3rem 0.2rem; border-bottom: 1px dashed var(--vt-border);
    font-size: 0.88rem;
}
.tlx-rank__item::before {
    counter-increment: tlx-rank;
    content: counter(tlx-rank) "º";
    color: var(--vt-text-muted);
    font-size: 0.75rem;
    min-width: 1.4rem;
}
.tlx-rank__item:last-child { border-bottom: 0; }
.tlx-rank__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlx-rank__value { font-variant-numeric: tabular-nums; color: var(--vt-text-secondary); white-space: nowrap; }
.tlx-rank__empty { color: var(--vt-text-muted); font-size: 0.85rem; margin: 0; }

/* Paleta de campos + zonas de arrasto. */
.tlx-pivotcard { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.tlx-pivotcard__head { display: flex; flex-direction: column; gap: 0.15rem; }
.tlx-pivotcard__hint { margin: 0; color: var(--vt-text-muted); font-size: 0.83rem; }

.tlx-fields { display: flex; flex-direction: column; gap: 0.55rem; }
.tlx-fields__label {
    display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--vt-text-muted); margin-bottom: 0.3rem;
}
.tlx-fields__palette { padding-bottom: 0.2rem; }
.tlx-fields__chips, .tlx-zone__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; min-height: 2rem; }

.tlx-chip-wrap { position: relative; display: inline-flex; }
.tlx-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border: 1px solid var(--vt-border);
    background: var(--vt-surface);
    border-radius: var(--vt-radius-pill);
    padding: 0.28rem 0.7rem;
    font-size: 0.82rem;
    color: var(--vt-text-primary);
    cursor: grab;
    user-select: none;
    touch-action: none; /* o arrasto por ponteiro controla o gesto (sem scroll acidental no touch) */
    transition: background 120ms ease, border-color 120ms ease;
}
.tlx-chip:hover { background: var(--vt-surface-muted); }
.tlx-chip:focus-visible { outline: 2px solid var(--vt-text-primary); outline-offset: 2px; }
.tlx-chip--used { border-style: dashed; color: var(--vt-text-secondary); }
.tlx-chip--zone { cursor: grab; background: var(--vt-tint-accent); border-color: transparent; }
.tlx-chip--filter { background: var(--vt-tint-info); }
.tlx-chip__flag { display: inline-flex; color: var(--vt-text-muted); }
.tlx-chip__order { font-size: 0.7rem; font-weight: 700; color: var(--vt-text-muted); }
.tlx-chip__body { border: 0; background: transparent; padding: 0; display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; color: inherit; cursor: pointer; }
.tlx-chip__count {
    background: var(--vt-surface); border-radius: var(--vt-radius-pill);
    font-size: 0.72rem; font-weight: 700; padding: 0.02rem 0.42rem;
}
.tlx-chip__btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; padding: 0.1rem; margin: 0 -0.15rem;
    color: var(--vt-text-muted); cursor: pointer; border-radius: 50%;
}
.tlx-chip__btn:hover:not(:disabled) { color: var(--vt-text-primary); background: rgba(16, 20, 24, 0.06); }
.tlx-chip__btn:disabled { opacity: 0.35; cursor: default; }
.tlx-chip__btn--close:hover { color: var(--vt-danger); }
.tlx-chip__menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    display: flex; flex-direction: column; min-width: 13rem;
    background: var(--vt-surface); border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md); box-shadow: var(--vt-shadow-card); padding: 0.25rem;
}
.tlx-chip__menu-item {
    border: 0; background: transparent; text-align: left; font-size: 0.83rem;
    padding: 0.4rem 0.55rem; border-radius: 8px; cursor: pointer; color: var(--vt-text-primary);
}
.tlx-chip__menu-item:hover:not(:disabled) { background: var(--vt-surface-muted); }
.tlx-chip__menu-item:disabled { color: var(--vt-text-muted); cursor: default; }

.tlx-zone {
    border: 1.5px dashed var(--vt-border);
    border-radius: var(--vt-radius-md);
    padding: 0.55rem 0.75rem;
    transition: border-color 120ms ease, background 120ms ease;
}
.tlx-zone--group { background: rgba(204, 252, 32, 0.05); }
.tlx-zone--filter { background: rgba(10, 132, 255, 0.04); }
.tlx-zone--over { border-color: var(--vt-primary-accent-hover); background: var(--vt-tint-accent); }
.tlx-zone__hint { color: var(--vt-text-muted); font-size: 0.82rem; }
.tlx-zone__arrow { display: inline-flex; color: var(--vt-text-muted); }

/* Fantasma do chip durante o arrasto (pintado pelo JS; posição via transform). */
.tlx-chip-ghost {
    position: fixed; top: 0; left: 0; z-index: 999;
    pointer-events: none; opacity: 0.9;
    box-shadow: var(--vt-shadow-card);
    background: var(--vt-surface);
}
body.tlx-dragging { cursor: grabbing; }
body.tlx-dragging .tlx-chip { cursor: grabbing; }

/* Seletor de valores de filtro. */
.tlx-picker {
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    background: var(--vt-surface);
    box-shadow: var(--vt-shadow-card);
    padding: 0.7rem 0.8rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    max-width: 30rem;
}
.tlx-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.tlx-picker__search {
    border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm);
    padding: 0.25rem 0.5rem; font-size: 0.83rem; min-width: 11rem;
}
.tlx-picker__list { max-height: 14rem; overflow: auto; display: flex; flex-direction: column; gap: 0.1rem; }
.tlx-picker__item {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.86rem; padding: 0.22rem 0.3rem; border-radius: 6px; cursor: pointer;
}
.tlx-picker__item:hover { background: var(--vt-surface-muted); }
.tlx-picker__hint { color: var(--vt-text-muted); font-size: 0.83rem; margin: 0; }
.tlx-picker__actions { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; }
.tlx-picker__count { margin-right: auto; color: var(--vt-text-muted); font-size: 0.8rem; }

/* Tabela pivot hierárquica. */
.tlx-pivot__scroll { overflow-x: auto; }
.tlx-pivot { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tlx-pivot th {
    text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--vt-text-muted); font-weight: 600; padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--vt-border); white-space: nowrap;
}
.tlx-pivot td { padding: 0.42rem 0.55rem; border-bottom: 1px solid var(--vt-border); vertical-align: middle; }
.tlx-pivot .text-end { text-align: right; font-variant-numeric: tabular-nums; }
.tlx-pivot__group-col { min-width: 16rem; }
.tlx-pivot__indent { display: inline-flex; align-items: center; gap: 0.35rem; padding-left: calc(var(--tlx-depth, 0) * 1.25rem); }
.tlx-pivot__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.35rem; height: 1.35rem; border: 0; background: transparent;
    color: var(--vt-text-secondary); cursor: pointer; border-radius: 6px;
}
.tlx-pivot__toggle:hover { background: var(--vt-surface-muted); color: var(--vt-text-primary); }
.tlx-pivot__leaf-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--vt-border); margin: 0 0.55rem 0 0.4rem; }
.tlx-pivot__label { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; }
.tlx-pivot__flag { margin-left: 0.35rem; }
.tlx-pivot__bad { color: var(--vt-danger); font-weight: 600; }
.tlx-pivot__muted { color: var(--vt-text-muted); }
.tlx-pivot__brl { display: block; font-size: 0.74rem; color: var(--vt-text-muted); }
.tlx-pivot__row--depth-0 > td { background: rgba(16, 20, 24, 0.015); }
.tlx-pivot__row--drill > td { background: var(--vt-tint-accent); }
.tlx-pivot__row:hover > td { background: var(--vt-surface-muted); }
.tlx-pivot__total td { font-weight: 650; border-top: 2px solid var(--vt-border); border-bottom: 0; }
.tlx-pivot__drill-btn { white-space: nowrap; opacity: 0.65; }
.tlx-pivot__row:hover .tlx-pivot__drill-btn { opacity: 1; }
.tlx-pivot__empty { color: var(--vt-text-muted); font-size: 0.88rem; margin: 0.5rem 0; }

/* Drill de chamadas individuais. */
.tlx-drill { padding: 1rem 1.1rem; }
.tlx-drill__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.tlx-drill__crumbs { display: flex; gap: 0.3rem; flex-wrap: wrap; flex: 1; }
.tlx-calls__row { cursor: pointer; }
.tlx-calls__row:focus-visible { outline: 2px solid var(--vt-text-primary); outline-offset: -2px; }

/* Modal de detalhe da chamada. */
.tlx-detail { max-width: 56rem; width: min(94vw, 56rem); max-height: 88vh; overflow: auto; }
.tlx-detail__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tlx-detail__title { display: flex; align-items: center; gap: 0.55rem; font-size: 1.05rem; margin: 0; }
.tlx-detail__when { color: var(--vt-text-secondary); font-size: 0.85rem; margin: 0.2rem 0 0.8rem; }
.tlx-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem; }
.tlx-detail__section h3 {
    font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--vt-text-muted); margin: 0 0 0.35rem;
}
.tlx-detail__section dl { display: grid; grid-template-columns: auto 1fr; gap: 0.18rem 0.6rem; margin: 0; font-size: 0.85rem; }
.tlx-detail__section dt { color: var(--vt-text-muted); white-space: nowrap; }
.tlx-detail__section dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tlx-detail__id { font-size: 0.76rem; overflow-wrap: anywhere; }
.tlx-detail__muted { color: var(--vt-text-muted); }
.tlx-detail__note { margin: 0.9rem 0 0; color: var(--vt-text-muted); font-size: 0.8rem; }

.tlx-footnote { color: var(--vt-text-muted); font-size: 0.8rem; margin: 0.25rem 0 1rem; }

@media (max-width: 900px) {
    .tlx-topbar { flex-direction: column; }
    .tlx-periodbox { min-width: 0; width: 100%; }
    .tlx-pivot__group-col { min-width: 12rem; }
    .tlx-detail__section dl { grid-template-columns: 1fr; }
}

/* ===== Telemetria de IA — visão geral (tlx-stats / tlx-overview / tlx-donut / tlx-optable) ===== */
/* Topo no estilo "painel executivo": cards de indicador com tendência vs período anterior, linha de
   evolução do custo + donut por operação lado a lado, e a tabela de detalhamento por operação. */

.tlx-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.tlx-stat {
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    box-shadow: var(--vt-shadow-card);
    padding: 0.7rem 0.85rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.tlx-stat__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vt-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tlx-stat__value {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--vt-text-primary);
    white-space: nowrap;
}

.tlx-stat__delta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tlx-stat__arrow { font-size: 0.6rem; }
.tlx-stat__vs { font-weight: 500; color: var(--vt-text-muted); }
.tlx-stat__delta--good { color: var(--vt-success); }
.tlx-stat__delta--bad { color: var(--vt-danger); }
.tlx-stat__delta--flat { color: var(--vt-text-muted); }

.tlx-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}

.tlx-overview__chart,
.tlx-overview__donut {
    padding: 0.9rem 1rem;
    min-width: 0;
}

.tlx-overview__donut .tlx-section-title { margin-bottom: 0.6rem; }

.tlx-linechart__svg { width: 100%; height: auto; display: block; }

.tlx-donut {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.tlx-donut__svg {
    width: 168px;
    height: 168px;
    flex: 0 0 auto;
}

.tlx-donut__total {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    fill: var(--vt-text-primary);
}

.tlx-donut__caption {
    font-size: 10px;
    fill: var(--vt-text-muted);
}

.tlx-donut__legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    min-width: 0;
    flex: 1;
}

.tlx-donut__item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    min-width: 0;
}

.tlx-donut__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.tlx-donut__label {
    color: var(--vt-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tlx-donut__value {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--vt-text-primary);
    white-space: nowrap;
}

.tlx-optablecard { padding: 0.9rem 1rem; margin-bottom: 0.9rem; }
.tlx-optablecard .tlx-section-title { margin-bottom: 0.55rem; }

.tlx-optable__op {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.tlx-optable__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid var(--vt-border);
    margin-top: 0.35rem;
    padding-top: 0.55rem;
}

.tlx-optable__period {
    font-size: 0.75rem;
    color: var(--vt-text-muted);
}

@media (max-width: 980px) {
    .tlx-overview { grid-template-columns: 1fr; }
    .tlx-donut { flex-wrap: wrap; justify-content: center; }
}

/* -------------------------------------------------------------------------
   Wrapper de rolagem para tabelas Bootstrap (mesma ideia de .cf-grid-wrap).
   Tabelas largas (ex.: /documentos ~610px) precisam rolar DENTRO de si em
   telas estreitas (~390px), sem alargar a página. O gradiente à direita
   sinaliza que há conteúdo além da borda (affordance de rolagem) e some
   quando a tabela chega ao fim do scroll (background-attachment: local).
   ------------------------------------------------------------------------- */
.vt-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Sombra de rolagem: fica visível só enquanto houver conteúdo à direita. */
    background:
        linear-gradient(to left, var(--vt-surface), transparent 24px) right center / 40px 100% no-repeat,
        radial-gradient(farthest-side at right center, color-mix(in srgb, var(--vt-text-primary) 12%, transparent), transparent) right center / 14px 100% no-repeat;
    background-attachment: local, scroll;
}

/* A tabela dentro do wrapper não precisa da margem inferior padrão do Bootstrap:
   a folga fica a cargo do container da página. */
.vt-table-scroll > .table { margin-bottom: 0; }

/* ==========================================================================
   FilterEditor — editor global de filtros (barra fixa + popover).
   Reaproveita os tokens --vt-* e as formas de .mk-* (opções/checkbox). O
   componente fica logo abaixo do cabeçalho global; o popover é uma extensão
   do cabeçalho, nunca um modal.
   ========================================================================== */
.fe-wrap { position: relative; z-index: 20; }
/* Popover aberto: sobe acima do cabeçalho fixo (.topbar, z 30) para que o scrim (z 40, filho
   deste contexto) também escureça as UIs do topo — perfil, busca, seletores. Só enquanto aberto:
   permanente faria a barra cobrir o cabeçalho fixo ao rolar. */
.fe-wrap--open { z-index: 40; }

.fe-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.7rem 2rem;
    background: var(--vt-surface);
    border-bottom: 1px solid var(--vt-border);
}

/* Botão "Filtros (N)" */
.fe-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 0.9rem;
    border: 1px solid var(--vt-border-strong);
    border-radius: var(--vt-radius-pill);
    background: var(--vt-surface);
    color: var(--vt-text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.fe-filters-btn:hover { border-color: var(--vt-text-muted); }
.fe-filters-btn.is-open {
    border-color: var(--vt-primary-accent);
    box-shadow: 0 0 0 3px var(--vt-tint-accent);
}
.fe-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--vt-radius-pill);
    background: var(--vt-primary-accent);
    color: var(--vt-text-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

/* Seletor de conjunto ativo */
.fe-set { position: relative; }
.fe-set-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 38px;
    padding: 0 0.75rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    background: var(--vt-surface-muted);
    color: var(--vt-text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    max-width: 280px;
}
.fe-set-btn:hover { border-color: var(--vt-border-strong); }
.fe-set-btn--head { background: var(--vt-surface); }
.fe-set-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Estado default "Nenhum Conjunto Definido" no seletor: itálico + tom apagado, distinto dos conjuntos criados. */
.fe-set-name--none { font-style: italic; color: var(--vt-text-muted); }
.fe-set-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--vt-warning); flex: 0 0 auto;
}

/* Lista de conjuntos (dropdown) */
.fe-set-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    box-shadow: var(--vt-shadow-card);
    padding: 6px;
    z-index: 60;
}
.fe-set-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: none;
    border-radius: var(--vt-radius-sm);
    background: transparent;
    color: var(--vt-text-primary);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}
.fe-set-item:hover { background: var(--vt-surface-muted); }
.fe-set-item.is-active { font-weight: 600; }
.fe-set-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-set-item--new { color: var(--vt-info); border-top: 1px solid var(--vt-border); border-radius: 0; margin-top: 4px; }
/* Rótulo de estado "Nenhum Conjunto Definido": itálico + tom apagado, não selecionável (não é botão). */
.fe-set-item--none { cursor: default; font-style: italic; color: var(--vt-text-muted); }
.fe-set-item--none:hover { background: transparent; }
/* Última opção: desmarca filtros ativos e volta ao estado "Nenhum Conjunto Definido". */
.fe-set-clear {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem 0.6rem 0.35rem;
    margin-top: 4px;
    border: none;
    border-top: 1px solid var(--vt-border);
    border-radius: 0;
    background: transparent;
    color: var(--vt-info);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}
.fe-set-clear:hover { text-decoration: underline; }
.fe-set-swatch, .fe-swatch { --fe-swatch: var(--vt-text-muted); }
.fe-set-swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--fe-swatch); flex: 0 0 auto; }

/* Chips de filtros ativos */
.fe-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.fe-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 30px;
    padding: 0 0.3rem 0 0.6rem;
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-pill);
    background: var(--vt-surface);
    font-size: 0.84rem;
    max-width: 260px;
}
.fe-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-chip-key { color: var(--vt-text-secondary); font-weight: 600; }
.fe-chip-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border: none; border-radius: 50%;
    background: transparent; color: var(--vt-text-muted); cursor: pointer; flex: 0 0 auto;
}
.fe-chip-x:hover { background: var(--vt-tint-danger); color: var(--vt-danger); }
.fe-chip--more { cursor: pointer; padding: 0 0.7rem; color: var(--vt-text-secondary); font-weight: 600; }
.fe-chip--more:hover { border-color: var(--vt-border-strong); }

/* Limpar tudo (empurra para a direita) */
.fe-clear {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin-left: auto;
    padding: 0 0.5rem; height: 32px;
    border: none; background: transparent;
    color: var(--vt-text-secondary); font-size: 0.86rem; font-weight: 600; cursor: pointer;
}
.fe-clear:hover { color: var(--vt-text-primary); }

/* Backdrops (clique fora fecha) */
.fe-pop-backdrop { position: fixed; inset: 0; z-index: 40; background: var(--vt-scrim-popover); animation: vt-modal-fade 0.15s ease-out; }
/* Variante "nua": backdrop de sub-dropdowns aninhados que ficam ACIMA do popover (z 55 > 50);
   escurecê-los cobriria o próprio painel, então segue invisível. */
.fe-backdrop--bare { z-index: 55; background: transparent; animation: none; }

/* Popover de edição */
.fe-pop {
    position: absolute;
    top: calc(100% - 1px);
    left: 1rem;
    right: 1rem;
    z-index: 50;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-lg);
    box-shadow: var(--vt-shadow-card);
    padding: 1.25rem 1.5rem;
    max-height: calc(100vh - var(--vt-topbar-height) - 2rem);
    overflow-y: auto;
}

.fe-pop-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding-bottom: 1rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--vt-border);
}
.fe-pop-head-left { display: flex; align-items: center; gap: 0.75rem; }
.fe-pop-head-label { color: var(--vt-text-muted); font-size: 0.8rem; font-weight: 600; }
.fe-pop-head-actions { display: flex; align-items: center; gap: 0.5rem; }
.fe-flash { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--vt-success); font-size: 0.84rem; font-weight: 600; }
.fe-menu-btn { width: 38px; height: 38px; }

/* Menu ⋯ */
.fe-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 190px;
    background: var(--vt-surface);
    border: 1px solid var(--vt-border);
    border-radius: var(--vt-radius-md);
    box-shadow: var(--vt-shadow-card);
    padding: 6px; z-index: 60;
}
.fe-menu-item {
    display: flex; align-items: center; gap: 0.55rem;
    width: 100%; padding: 0.5rem 0.6rem;
    border: none; border-radius: var(--vt-radius-sm);
    background: transparent; color: var(--vt-text-primary);
    font-size: 0.9rem; text-align: left; cursor: pointer;
}
.fe-menu-item:hover:not(:disabled) { background: var(--vt-surface-muted); }
.fe-menu-item:disabled { color: var(--vt-text-muted); cursor: not-allowed; }
.fe-menu-item--danger { color: var(--vt-danger); }
.fe-menu-item--danger:hover:not(:disabled) { background: var(--vt-tint-danger); }

/* Grade de colunas: cada coluna cresce para preencher a largura, mas nunca encolhe abaixo de um mínimo
   legível — quando todas juntas não cabem, a faixa rola horizontalmente em vez de espremer o conteúdo. */
.fe-cols {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
}
/* Seletor em cascata reutilizável (CascadeMarkerSelector): reaproveita as colunas .fe-col do editor. */
.cms-cols {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
}
.cms--loading { opacity: 0.6; pointer-events: none; }
.cms-note {
    display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem;
    color: var(--vt-warning, var(--vt-text-secondary)); font-size: 0.82rem; font-weight: 600;
}
.fe-col { flex: 1 0 232px; min-width: 232px; }
.fe-col-title { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--vt-text-secondary); margin-bottom: 0.6rem; }
.fe-col-title-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-col-count { color: var(--vt-info); font-size: 0.78rem; font-weight: 600; flex: 0 0 auto; }

/* Accordeons do editor de filtros (uma categoria por linha; vários podem ficar abertos). */
.fe-acc { display: flex; flex-direction: column; gap: 0.5rem; }
.fe-acc-item { border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); background: var(--vt-surface); overflow: hidden; }
.fe-acc-head {
    display: flex; align-items: center; gap: 0.55rem; width: 100%;
    padding: 0.7rem 0.9rem; border: none; background: transparent; cursor: pointer;
    color: var(--vt-text-primary); font-size: 0.9rem; text-align: left;
}
.fe-acc-head:hover { background: var(--vt-surface-muted); }
.fe-acc-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-acc-count { color: var(--vt-text-muted); font-size: 0.82rem; font-weight: 600; flex: 0 0 auto; }
.fe-acc-item.is-open > .fe-acc-head { border-bottom: 1px solid var(--vt-border); }
/* Chevron do cabeçalho (último ícone .vt-ico): gira ao abrir. */
.fe-acc-head > .vt-ico:last-child { transition: transform 0.15s ease; color: var(--vt-text-muted); flex: 0 0 auto; }
.fe-acc-item.is-open > .fe-acc-head > .vt-ico:last-child { transform: rotate(180deg); }
.fe-acc-body { padding: 0.85rem 0.9rem; }
.fe-acc-single .fe-col { flex: 1 1 auto; min-width: 0; max-width: 460px; }
.fe-acc-empty { color: var(--vt-text-muted); font-size: 0.84rem; padding: 0.2rem; }

/* Contexto POR MARCADOR: cada marcador selecionado abre um expansor com suas colunas de material/método/etc. */
.fe-massays { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px dashed var(--vt-border); }
.fe-massays-hint { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--vt-text-muted); font-size: 0.8rem; }
.fe-massay { border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm); background: var(--vt-surface-muted); overflow: hidden; }
.fe-massay-head {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.55rem 0.75rem; border: none; background: transparent; cursor: pointer;
    color: var(--vt-text-primary); font-size: 0.86rem; text-align: left;
}
.fe-massay-head:hover { background: var(--vt-surface); }
.fe-massay-title { font-weight: 600; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-massay-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vt-info); font-size: 0.8rem; font-weight: 600; }
.fe-massay-summary.is-any { color: var(--vt-text-muted); font-weight: 500; font-style: italic; }
.fe-massay-head > .vt-ico:last-child { transition: transform 0.15s ease; color: var(--vt-text-muted); flex: 0 0 auto; }
.fe-massay.is-open > .fe-massay-head > .vt-ico:last-child { transform: rotate(180deg); }
.fe-massay.is-open > .fe-massay-head { border-bottom: 1px solid var(--vt-border); }
.fe-massay-body { padding: 0.75rem 0.8rem; background: var(--vt-surface); }
.fe-massay-body .fe-col { flex: 1 0 200px; min-width: 200px; }
.fe-col-search {
    display: flex; align-items: center; gap: 0.4rem;
    height: 36px; padding: 0 0.6rem; margin-bottom: 0.5rem;
    border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm);
    background: var(--vt-surface-muted); color: var(--vt-text-muted);
}
.fe-col-search input { border: none; background: transparent; outline: none; width: 100%; font-size: 0.86rem; color: var(--vt-text-primary); }
.fe-col-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.fe-col-empty { color: var(--vt-text-muted); font-size: 0.84rem; padding: 0.4rem 0.2rem; }
.fe-col-more { align-self: flex-start; margin-top: 0.4rem; padding: 0.2rem 0; border: none; background: transparent; color: var(--vt-info); font-size: 0.84rem; font-weight: 600; cursor: pointer; }

/* Opção com contagem (estende .mk-option) */
.fe-option { justify-content: flex-start; }
.fe-option .mk-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-option-count { color: var(--vt-text-muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 0.5rem; flex: 0 0 auto; }
.fe-option.is-selected .fe-option-count { color: var(--vt-text-secondary); }
/* Opção selecionada que ficou incompatível com o prefixo da cascata: visível, apagada, só para remover. */
.fe-option.is-stale { opacity: 0.55; }
.fe-option.is-stale .mk-option-label { text-decoration: line-through; }
/* Linha "Todos os X": em negrito, como a seleção-mestre da coluna (igual à referência). */
.fe-option--all .mk-option-label, .fe-option--all .fe-option-count { font-weight: 600; }

/* Rodapé */
.fe-pop-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding-top: 1rem; margin-top: 1rem;
    border-top: 1px solid var(--vt-border);
}
.fe-pop-foot-left { color: var(--vt-text-secondary); font-size: 0.9rem; }
.fe-total { color: var(--vt-text-primary); font-weight: 700; }
.fe-pruned-note { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.6rem; color: var(--vt-warning, var(--vt-text-secondary)); font-size: 0.82rem; font-weight: 600; }
.fe-pop-foot-right { display: flex; align-items: center; gap: 1rem; }
.fe-reset-link { border: none; background: transparent; color: var(--vt-info); font-size: 0.9rem; font-weight: 600; cursor: pointer; }

/* Formulário dos diálogos (salvar como / renomear) */
.fe-form { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; margin-top: 0.5rem; }
.fe-form-label { font-size: 0.82rem; font-weight: 600; color: var(--vt-text-secondary); margin-top: 0.4rem; }
.fe-req { color: var(--vt-danger); }
.fe-form-input {
    height: 40px; padding: 0 0.75rem;
    border: 1px solid var(--vt-border); border-radius: var(--vt-radius-sm);
    background: var(--vt-surface); font-size: 0.9rem; color: var(--vt-text-primary);
}
.fe-form-input:focus { outline: none; border-color: var(--vt-primary-accent); box-shadow: 0 0 0 3px var(--vt-tint-accent); }
.fe-swatches { display: flex; gap: 0.5rem; margin-top: 0.2rem; }
.fe-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; background: var(--fe-swatch); cursor: pointer; }
.fe-swatch.is-active { border-color: var(--vt-text-primary); }

@media (max-width: 900px) {
    .fe-bar { padding: 0.6rem 1rem; }
    .fe-pop { left: 0.5rem; right: 0.5rem; padding: 1rem; }
}