/*
 * Sistema de diseño del CRM Aliado Visas.
 *
 * 1. Tokens: única fuente de colores, tipografía, radios y sombras (claro y oscuro).
 * 2. Componentes: clases ui-* para el marcado nuevo (botones, chips, tarjetas,
 *    tablas, encabezado de página, barra de filtros, estado vacío, modal).
 * 3. Normalización: alinea los colores de acción heredados (esmeralda, azul,
 *    índigo) con el acento de marca sin tocar el marcado de cada página.
 *
 * El tema oscuro lo activa theme.php con la clase .dark en <html>.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
    --ui-bg: #f4f7f8;
    --ui-surface: #ffffff;
    --ui-surface-2: #f8fafb;
    --ui-line: #e1e8ec;
    --ui-line-strong: #cbd7dc;
    --ui-ink: #163043;
    --ui-ink-2: #3d5566;
    --ui-muted: #63778a;
    --ui-accent: #087f83;
    --ui-accent-hover: #066b6e;
    --ui-accent-soft: #e5f4f2;
    --ui-accent-ink: #05676a;
    --ui-on-accent: #ffffff;
    --ui-navy: #102b3b;
    --ui-danger: #b42318;
    --ui-danger-soft: #fdecea;
    --ui-warn: #8f5300;
    --ui-warn-soft: #fff3d9;
    --ui-ok: #16703e;
    --ui-ok-soft: #e6f5ec;
    --ui-info: #1d5fa8;
    --ui-info-soft: #e8f1fb;
    --ui-focus: #42b9b2;

    --ui-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ui-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ui-text-xs: 12px;
    --ui-text-sm: 13px;
    --ui-text-base: 14px;
    --ui-text-md: 15px;
    --ui-text-lg: 18px;
    --ui-text-xl: 22px;

    --ui-radius-sm: 6px;
    --ui-radius: 8px;
    --ui-radius-lg: 12px;
    --ui-shadow-sm: 0 1px 2px rgba(16, 43, 59, .06);
    --ui-shadow-md: 0 6px 18px -6px rgba(16, 43, 59, .16);
    --ui-shadow-lg: 0 24px 48px -16px rgba(16, 43, 59, .32);
    --ui-control-h: 38px;
}

html.dark {
    --ui-bg: #0b1520;
    --ui-surface: #0f1c2b;
    --ui-surface-2: #132434;
    --ui-line: #253748;
    --ui-line-strong: #34495c;
    --ui-ink: #e1e9ee;
    --ui-ink-2: #bccad4;
    --ui-muted: #93a6b5;
    --ui-accent: #3eb6ae;
    --ui-accent-hover: #5cc6bf;
    --ui-accent-soft: #143439;
    --ui-accent-ink: #8bd9cd;
    --ui-on-accent: #04201f;
    --ui-navy: #0a1622;
    --ui-danger: #f4978e;
    --ui-danger-soft: #3a1915;
    --ui-warn: #f2c26b;
    --ui-warn-soft: #33270f;
    --ui-ok: #73d39c;
    --ui-ok-soft: #10301f;
    --ui-info: #8cbcf2;
    --ui-info-soft: #132b45;
    --ui-focus: #5cc6bf;
    --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --ui-shadow-md: 0 6px 18px -6px rgba(0, 0, 0, .6);
    --ui-shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, .7);
}

/* Las variables heredadas apuntan a los tokens para que todo use una sola paleta. */
:root, html.dark {
    --crm-navy: var(--ui-navy);
    --crm-teal: var(--ui-accent);
    --crm-teal-soft: var(--ui-accent-soft);
    --crm-canvas: var(--ui-bg);
    --crm-ink: var(--ui-ink);
    --crm-muted: var(--ui-muted);
    --crm-line: var(--ui-line);
    --crm-accent: var(--ui-accent);
    --crm-surface: var(--ui-surface);
    --crm-soft: var(--ui-surface-2);
}

/* ── 2. Componentes ────────────────────────────────────────────────────── */
.ui-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.ui-page-head h1 { margin: 0; font-size: var(--ui-text-xl); line-height: 1.25; font-weight: 650; color: var(--ui-ink); letter-spacing: -.01em; text-wrap: balance; }
.ui-page-head p { margin: 4px 0 0; font-size: var(--ui-text-sm); color: var(--ui-muted); max-width: 70ch; }
.ui-page-head .ui-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--ui-control-h); padding: 0 14px; border-radius: var(--ui-radius);
    border: 1px solid var(--ui-line-strong); background: var(--ui-surface); color: var(--ui-ink);
    font: 600 var(--ui-text-sm)/1 var(--ui-font); text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ui-btn:hover { background: var(--ui-surface-2); border-color: var(--ui-muted); }
.ui-btn svg { width: 16px; height: 16px; }
.ui-btn--primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-on-accent); }
.ui-btn--primary:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }
.ui-btn--danger { background: var(--ui-danger); border-color: var(--ui-danger); color: var(--ui-surface); }
.ui-btn--danger:hover { filter: brightness(.94); background: var(--ui-danger); }
.ui-btn--ghost { border-color: transparent; background: transparent; color: var(--ui-ink-2); }
.ui-btn--ghost:hover { background: var(--ui-surface-2); border-color: transparent; }
.ui-btn--sm { min-height: 30px; padding: 0 10px; font-size: var(--ui-text-xs); }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.ui-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
    font-size: var(--ui-text-xs); font-weight: 600; line-height: 1.5; white-space: nowrap;
    background: var(--ui-surface-2); color: var(--ui-ink-2); border: 1px solid var(--ui-line);
}
.ui-chip--accent { background: var(--ui-accent-soft); color: var(--ui-accent-ink); border-color: transparent; }
.ui-chip--danger { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: transparent; }
.ui-chip--warn { background: var(--ui-warn-soft); color: var(--ui-warn); border-color: transparent; }
.ui-chip--ok { background: var(--ui-ok-soft); color: var(--ui-ok); border-color: transparent; }
.ui-chip--info { background: var(--ui-info-soft); color: var(--ui-info); border-color: transparent; }

.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-sm); }
.ui-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ui-line); }
.ui-card__head h2 { margin: 0; font-size: var(--ui-text-md); font-weight: 650; color: var(--ui-ink); }
.ui-card__body { padding: 16px 18px; }

.ui-table-wrap { overflow-x: auto; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); background: var(--ui-surface); }
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--ui-text-sm); color: var(--ui-ink); }
.ui-table th { text-align: left; padding: 10px 14px; font-size: var(--ui-text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); background: var(--ui-surface-2); border-bottom: 1px solid var(--ui-line); white-space: nowrap; }
.ui-table td { padding: 12px 14px; border-bottom: 1px solid var(--ui-line); vertical-align: middle; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table tbody tr:hover { background: var(--ui-surface-2); }
.ui-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ui-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.ui-filterbar a, .ui-filterbar button.ui-filter {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--ui-line-strong); background: var(--ui-surface); color: var(--ui-ink-2);
    font-size: var(--ui-text-sm); font-weight: 500; text-decoration: none; cursor: pointer;
}
.ui-filterbar a[aria-current="true"], .ui-filterbar a[aria-current="page"], .ui-filterbar .is-active { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-on-accent); }
.ui-filterbar b { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; }

.ui-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 16px; text-align: center; color: var(--ui-muted); font-size: var(--ui-text-sm); }
.ui-empty strong { color: var(--ui-ink); font-size: var(--ui-text-md); }
.ui-empty svg { width: 28px; height: 28px; color: var(--ui-accent); }

/* Modal de confirmación (assets/js/crm-ui.js). */
.ui-modal-backdrop { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(10, 22, 34, .55); }
.ui-modal { width: min(440px, 100%); background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-lg); padding: 20px; }
.ui-modal h2 { margin: 0 0 6px; font-size: var(--ui-text-lg); font-weight: 650; }
.ui-modal p { margin: 0; font-size: var(--ui-text-base); line-height: 1.55; color: var(--ui-ink-2); white-space: pre-line; }
.ui-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@media (prefers-reduced-motion: no-preference) {
    .ui-modal { animation: ui-modal-in .14s ease-out; }
    @keyframes ui-modal-in { from { transform: translateY(6px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* ── 3. Normalización de estilos heredados ─────────────────────────────── */
/* Un solo color de acción: botones y enlaces-botón que usaban esmeralda, azul o
   índigo sólidos pasan al acento. Los fondos suaves (-50/-100) conservan su
   significado de estado y no se tocan. */
.crm-app :is(button, a, input[type="submit"], label):is(
    .bg-emerald-600, .bg-emerald-700, .bg-blue-600, .bg-blue-700, .bg-indigo-600, .bg-indigo-700, .bg-teal-600, .bg-teal-700
) { background-color: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: var(--ui-on-accent) !important; }
.crm-app :is(button, a, input[type="submit"], label):is(
    .hover\:bg-emerald-700, .hover\:bg-blue-800, .hover\:bg-indigo-700, .hover\:bg-emerald-800, .hover\:bg-indigo-800, .hover\:bg-blue-700, .hover\:bg-teal-700
):hover { background-color: var(--ui-accent-hover) !important; }
.crm-app :is(button, a, input[type="submit"]):is(.bg-slate-900, .bg-slate-800):not(.crm-mobile-menu-btn) { background-color: var(--ui-navy) !important; color: #fff !important; }
.crm-app :is(.text-indigo-600, .text-indigo-700, .text-blue-600, .text-blue-700):is(a, button) { color: var(--ui-accent-ink) !important; }
.crm-app :is(input, select, textarea):focus { outline: none; border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 22%, transparent) !important; }
.crm-app :is(.focus\:ring-indigo-500, .focus\:ring-emerald-500, .focus\:ring-blue-500):focus { --tw-ring-color: var(--ui-focus) !important; }
.crm-app input[type="checkbox"], .crm-app input[type="radio"] { accent-color: var(--ui-accent); }

/* Cuerpo de texto mínimo legible en contenido operativo. */
.crm-app main :is(.text-\[9px\], .text-\[10px\]) { font-size: 11px !important; }

/* ── 4. Shell: selector de espacio de trabajo y contadores de pestañas ── */
.crm-workspace-switch { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 0 13px 12px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(179, 205, 218, .1); }
.crm-workspace-switch a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 8px; border-radius: 7px; color: #a9c0cc; font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.crm-workspace-switch a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.crm-workspace-switch a[aria-current="page"] { background: #20525b; color: #fff; font-weight: 600; }
.crm-workspace-switch svg { width: 15px; height: 15px; }
.crm-section-views .crm-view-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--ui-warn-soft); color: var(--ui-warn); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── 5. Finanzas personales: un solo color de acción, igual que el CRM ── */
:root, html.dark { --finanzas-accent: var(--ui-accent); --finanzas-accent-text: var(--ui-on-accent); }
.btn-accent { background: var(--ui-accent); color: var(--ui-on-accent); }
.btn-accent:hover { background: var(--ui-accent-hover); }
details.finanzas-formula > summary, details.finanzas-mas > summary { list-style: none; }
details.finanzas-formula > summary::-webkit-details-marker, details.finanzas-mas > summary::-webkit-details-marker { display: none; }
details.finanzas-formula[open] .finanzas-formula__chevron, details.finanzas-mas[open] .finanzas-mas__chevron { transform: rotate(180deg); }

/* ── 6. Hoy (local-today.css) en modo oscuro ──────────────────────────── */
/* La hoja de Hoy fija colores claros; aquí se pasan a los tokens del tema. */
html.dark .lab-home, html.dark .lab-home :is(h1, h2, h3, strong) { color: var(--ui-ink); }
html.dark :is(.lab-panel, .lab-metric, .lab-task, .lab-lead, .lab-event, .lab-followup, .lab-outline, .lab-filters button, .lab-followup-filters a, .lab-complete, .lab-row-arrow, .lab-case-table td) {
    background: var(--ui-surface); border-color: var(--ui-line); color: var(--ui-ink);
}
html.dark :is(.lab-task:hover, .lab-lead:hover, .lab-case-table tr:hover td, .lab-followup-filters a:hover, .lab-complete:hover) { background: var(--ui-surface-2); }
html.dark :is(.lab-case-table th, .lab-panel-note, .lab-followup-footer, .lab-agenda-tip, .lab-icon-tile, .lab-event-date, .lab-empty, .lab-followup-explanation) { background: var(--ui-surface-2); border-color: var(--ui-line); }
html.dark :is(.lab-muted, .lab-metric-foot, .lab-metric-top, .lab-panel-head p, .lab-task p, .lab-lead p, .lab-event p, .lab-number small, .lab-person small, .lab-case-summary small, .lab-event-date small, .lab-followup-case p, .lab-followup-owner small, .lab-eyebrow, .lab-panel-note, .lab-case-table th) { color: var(--ui-muted); }
html.dark :is(.lab-filters button.is-active, .lab-followup-filters a[aria-current]) { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-on-accent); }
html.dark :is(.lab-text-link, .lab-agenda-link, .lab-event-kind, .lab-followup-footer a, .lab-lead-source) { color: var(--ui-accent-ink); }
html.dark :is(.lab-date, .lab-owner, .lab-avatar, .lab-followup-date) { background: var(--ui-surface-2); color: var(--ui-ink-2); }
html.dark :is(.lab-date.overdue, .lab-followup-date.is-vencido) { background: var(--ui-danger-soft); color: var(--ui-danger); }
html.dark :is(.lab-date.today, .lab-followup-date.is-hoy, .lab-followup-date.is-incidencia, .lab-followup-warning) { background: var(--ui-warn-soft); color: var(--ui-warn); }
html.dark :is(.lab-followup-notice, .lab-error) { background: var(--ui-surface-2); color: var(--ui-ink); border-color: var(--ui-line); }
html.dark :is(.lab-filters b, .lab-followup-filters span) { background: var(--ui-surface-2); color: var(--ui-ink-2); }
html.dark :is(.lab-filters button.is-active b, .lab-followup-filters [aria-current] span) { background: color-mix(in srgb, var(--ui-on-accent) 18%, transparent); color: var(--ui-on-accent); }

/* ── 7. Situación del expediente (ficha) ───────────────────────────────── */
.exp-situacion { display: grid; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ui-line); }
.exp-fases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: fase; }
.exp-fases li { counter-increment: fase; border-top: 4px solid var(--ui-line); padding-top: 6px; font-size: var(--ui-text-xs); color: var(--ui-muted); min-width: 0; }
.exp-fases li span { display: block; line-height: 1.35; overflow-wrap: anywhere; }
.exp-fases li span::before { content: counter(fase) ". "; font-variant-numeric: tabular-nums; }
.exp-fases li.is-done { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-line)); color: var(--ui-ink-2); }
.exp-fases li.is-now { border-color: var(--ui-accent); color: var(--ui-accent-ink); font-weight: 650; }
.exp-situacion-datos { display: grid; grid-template-columns: auto minmax(0, 2fr) auto auto; gap: 10px 28px; margin: 0; }
.exp-situacion-datos > div { display: grid; gap: 4px; min-width: 0; }
.exp-situacion-datos dt { font-size: var(--ui-text-xs); color: var(--ui-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.exp-situacion-datos dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--ui-text-sm); color: var(--ui-ink); }
.exp-situacion-datos dd a { color: var(--ui-accent-ink); font-weight: 600; }
.exp-muted { color: var(--ui-muted); }
.exp-saldo-pendiente { color: var(--ui-warn); }
.exp-quick { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) {
    .exp-situacion-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exp-situacion-datos .is-wide { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 560px) {
    .exp-fases { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
    .exp-fases li span { display: none; }
    .exp-fases li.is-now span { display: block; position: absolute; }
    .exp-fases { position: relative; padding-bottom: 18px; }
    .exp-fases li.is-now span { left: 0; bottom: 0; white-space: nowrap; }
    .exp-quick .ui-btn { flex: 1 1 calc(50% - 8px); }
}

/* ── 8. Prospectos: tablero con columnas legibles ─────────────────────── */
.lead-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.lead-board > .lead-col { flex: 0 0 272px; scroll-snap-align: start; }
@media (max-width: 640px) { .lead-board > .lead-col { flex-basis: 84%; } }
.leads-more > summary { list-style: none; }
.leads-more > summary::-webkit-details-marker { display: none; }
.leads-more > summary::after { content: " ▾"; color: var(--ui-muted); }
.leads-more[open] > summary::after { content: " ▴"; }
.tareas-more > summary { list-style: none; } .tareas-more > summary::-webkit-details-marker { display: none; } .tareas-more > summary::after { content: " ▾"; color: var(--ui-muted); } .tareas-more[open] > summary::after { content: " ▴"; }

/* ── 9. Tareas en móvil: cada fila como tarjeta ───────────────────────── */
@media (max-width: 640px) {
    .tareas-tabla thead { display: none; }
    .tareas-tabla, .tareas-tabla tbody { display: block; }
    .tareas-tabla tr { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 2px 8px; padding: 12px 12px 10px; border-bottom: 1px solid var(--ui-line); }
    .tareas-tabla td { display: block; padding: 0 !important; min-width: 0 !important; text-align: left !important; white-space: normal !important; }
    .tareas-tabla td:nth-child(1) { grid-row: 1 / span 3; }
    .tareas-tabla td:nth-child(2) { grid-column: 2 / 4; font-size: var(--ui-text-base); }
    .tareas-tabla td:nth-child(3) { grid-column: 2; }
    .tareas-tabla td:nth-child(4) { grid-column: 3; justify-self: end; }
    .tareas-tabla td:nth-child(5) { grid-column: 2 / 4; }
    .tareas-tabla td:nth-child(6) { grid-column: 2 / 4; justify-self: start; }
    .tareas-tabla td[colspan] { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .tareas-tabla-wrap { max-height: none !important; overflow: visible !important; } }

/* ── 10. Documentos · Google Drive ─────────────────────────────────────── */
.doc-drive { display: block; }
.doc-drive-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: var(--ui-text-lg); font-weight: 650; color: var(--ui-ink); }
.doc-drive-titulo svg { width: 20px; height: 20px; color: var(--ui-accent); }

/* ── 11. Form DS-160: Formularios y versiones (desde "Más") y CEAC en Datos a mano ── */
.exp-formularios-dialog { width: min(640px, calc(100vw - 32px)); max-height: 80vh; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-lg); padding: 18px 20px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-shadow-lg); }
.exp-formularios-dialog::backdrop { background: rgba(10, 22, 34, .5); }
.exp-formularios-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.exp-formularios-head h2 { margin: 0; font-size: var(--ui-text-lg); font-weight: 650; }
.av-ceac-input { width: 100%; min-width: 0; flex: 1; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-sm); padding: 4px 8px; font: 600 var(--ui-text-sm)/1.4 var(--ui-mono); background: var(--ui-surface); color: var(--ui-ink); }
.av-ceac-input:disabled { background: var(--ui-surface-2); color: var(--ui-ink-2); cursor: not-allowed; }
.av-ceac-input:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 22%, transparent); }

/* Segundo nivel de una pestaña (Contabilidad: Resumen · Pagos por revisar · Cerrar mes). */
.crm-subviews { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 20px; }
.crm-subviews > a { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: var(--ui-text-sm); color: var(--ui-ink-2); background: var(--ui-surface); border: 1px solid var(--ui-line); text-decoration: none; white-space: nowrap; }
.crm-subviews > a:hover { border-color: var(--ui-line-strong); color: var(--ui-ink); }
.crm-subviews > a[aria-current="page"] { background: var(--ui-accent-soft); border-color: transparent; color: var(--ui-accent-ink); font-weight: 600; }
.crm-subviews .crm-view-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--ui-warn-soft); color: var(--ui-warn); font-size: 11px; font-weight: 600; }
@media (max-width: 640px) { .crm-subviews { flex-wrap: nowrap; overflow-x: auto; margin-top: -10px; scrollbar-width: none; } .crm-subviews::-webkit-scrollbar { display: none; } }
@media print { .crm-subviews { display: none; } }