/* CRM module specific styles — v2
 * Only layout that does NOT belong in metavoz-theme-v2.css canonical.
 * Component tokens (mv-empty-v2, mv-kpi-grid, mv-kpi, mv-btn-v2, etc.)
 * live in metavoz-theme-v2.css and are NOT duplicated here.
 * New net-new components (mv-ficha-hero, mv-schedule-list, mv-upload-zone,
 * mv-field-mapper, mv-btn-v2--success, mv-ranking-card) are added by
 * frontend-data-viz-specialist to metavoz-theme-v2.css.
 */

.mv-crm-shell {
    /* MVZ-UI-002 fix: was space-6 (24px) — reduced to space-2 (8px) to
       eliminate the 165px dead gap between topnav and CRM subnav. */
    padding: var(--mv-space-2) var(--mv-space-8);
    max-width: 1400px;
    margin: 0 auto;
}

/* Reduce shell padding on mobile so table scroll has maximum horizontal room */
@media (max-width: 767px) {
    .mv-crm-shell {
        padding: var(--mv-space-4) var(--mv-space-3);
    }
}

@media (max-width: 479px) {
    .mv-crm-shell {
        padding: var(--mv-space-3) var(--mv-space-2);
    }
}

.mv-crm-subnav {
    /* MVZ-UI-002 fix: was space-6 (24px) — reduced to space-2 (8px) to
       bring content closer to the CRM tab bar. */
    margin-bottom: var(--mv-space-2);
}

.mv-crm-content {
    /* flex/grid applied per sub-page as needed */
}

/* ───────── Sub-phase 1.9 · admin_firmas · autocomplete + modal polish ───────── */

/* Autocomplete combobox widget (used in _modal_user_assign.html). */
.mv-ac {
    position: relative;
}

.mv-ac__input {
    width: 100%;
}

.mv-ac__list {
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--mv-space-1, 4px));
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: var(--mv-space-1, 4px);
    list-style: none;
    background: var(--mv-card-bg, #fff);
    border: 1px solid var(--mv-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--mv-radius-md, 8px);
    box-shadow: var(--mv-shadow-md, 0 6px 20px rgba(0, 0, 0, 0.08));
}

.mv-ac__list[hidden] { display: none; }

.mv-ac__item {
    display: flex;
    align-items: center;
    gap: var(--mv-space-3, 12px);
    padding: var(--mv-space-2, 8px) var(--mv-space-3, 12px);
    border-radius: var(--mv-radius-sm, 6px);
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.mv-ac__item:hover:not(.mv-ac__item--disabled):not(.mv-ac__item--empty):not(.mv-ac__item--error),
.mv-ac__item--active {
    background: var(--mv-surface-hover, rgba(0, 0, 0, 0.04));
}

.mv-ac__item--disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.mv-ac__item--empty,
.mv-ac__item--error {
    color: var(--mv-fg-muted, #6e6e73);
    cursor: default;
    justify-content: center;
    gap: var(--mv-space-2, 8px);
}

.mv-ac__avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mv-primary-muted, rgba(247, 24, 131, 0.18));
    /* WCAG 2.1 AA fix (2026-04-17): primary-500 (#f71883) on muted pink bg
       was 3.1:1 (fails 4.5:1 for small text). primary-700 (#a60a56) is 5.3:1. */
    color: var(--mv-primary-700, #a60a56);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.mv-ac__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mv-ac__name {
    font-weight: 500;
    color: var(--mv-content-text, #1d1d1f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-ac__email {
    font-size: 0.8125rem;
    color: var(--mv-fg-muted, #6e6e73);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-ac__role-badge {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.75rem;
}

.mv-ac__status {
    /* sr-only aria-live region */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Skeleton shimmer rows */
.mv-ac__item--skeleton { cursor: default; }

.mv-ac__skel {
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--mv-neutral-100, rgba(0, 0, 0, 0.05)) 0%,
        var(--mv-neutral-150, rgba(0, 0, 0, 0.1)) 50%,
        var(--mv-neutral-100, rgba(0, 0, 0, 0.05)) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--mv-radius-sm, 6px);
    animation: mvAcShimmer 1.2s linear infinite;
}

.mv-ac__skel--avatar { width: 32px; height: 32px; border-radius: 50%; }
.mv-ac__skel--line   { height: 14px; flex: 1 1 auto; }

@keyframes mvAcShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mv-ac__skel { animation: none; }
}

/* Body scroll lock while any modal is open */
body.mv-modal-open {
    overflow: hidden;
}

/* Sparkline canvas inside Estadísticas KPI cards */
canvas.mv-spark {
    display: block;
    width: 120px;
    height: 32px;
    margin-top: var(--mv-space-2, 8px);
}

/* ════════════════════════════════════════════════════════════
 * Sub-phase 1.9 · filter-bar + data-table responsive fixes
 * ui-visual-qa-auditor bug #3 (P0) — 2026-04-17
 * ════════════════════════════════════════════════════════════ */

/* Filter bar form: horizontal on desktop, stack on mobile */
.mv-filter-bar__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mv-space-3, 12px);
    align-items: center;
    width: 100%;
    min-width: 0;
}

/* Let the search label/wrap grow; keep selects + button at intrinsic size */
.mv-filter-bar__form > .mv-filter-bar__search {
    flex: 1 1 240px;
    min-width: 0;
}

.mv-filter-bar__form > .mv-filter-bar__select,
.mv-filter-bar__form > select {
    flex: 0 0 auto;
    min-width: 160px;
}

.mv-filter-bar__form > .mv-btn-v2,
.mv-filter-bar__form > button[type="submit"] {
    flex: 0 0 auto;
}

.mv-filter-bar__form > .mv-filter-bar__count {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Search-icon positioning (icon INSIDE the <label class="mv-filter-bar__search">)
 * The existing §2.8 rules (metavoz-theme-v2.css:9284+) position the icon at
 * left: 0.75rem via a flex/relative wrap. This block adds a padding-left
 * guard so generic .mv-form-input placeholders don't collide with the icon
 * when the label-wrap is used with a plain .mv-input or .mv-form-input. */
.mv-filter-bar__form .mv-filter-bar__search {
    position: relative;
    display: flex;
    align-items: center;
}

.mv-filter-bar__form .mv-filter-bar__search > i,
.mv-filter-bar__form .mv-filter-bar__search > svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--mv-text-muted, #6e6e73);
    font-size: 0.875rem;
    z-index: 1;
}

.mv-filter-bar__form .mv-filter-bar__search > .mv-input,
.mv-filter-bar__form .mv-filter-bar__search > .mv-form-input,
.mv-filter-bar__form .mv-filter-bar__search > input[type="search"],
.mv-filter-bar__form .mv-filter-bar__search > input[type="text"] {
    width: 100%;
    padding-left: 2.5rem;
}

/* Optional explicit icon wrap, for templates that use a <span> instead.
 * Parent .mv-filter-bar__input-wrap must be position:relative so the icon
 * overlays the input field rather than floating as a sibling.
 * Iter-3 (2026-04-17): flex display + align-items center ensures the wrap
 * has an intrinsic height equal to the input in BOTH row (desktop) and
 * column (mobile stack) modes. Previous `display: block` collapsed to 0
 * height in certain mobile flex-column contexts, detaching the absolute
 * icon. */
.mv-filter-bar__input-wrap {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    align-items: center;
}

.mv-filter-bar__input-wrap > input.mv-filter-bar__input {
    flex: 1 1 auto;
    min-width: 0;
}

.mv-filter-bar__icon-wrap {
    position: absolute;
    left: var(--mv-space-3, 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--mv-text-muted, #6e6e73);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Input padding-left reserves 2.5rem for the overlaid icon.
 * Iter-3 (2026-04-17): raised specificity with chained selector
 * `.mv-filter-bar__input-wrap > input.mv-filter-bar__input` (0,2,1) so it
 * wins UNAMBIGUOUSLY over `.mv-form-input { padding: ... !important }`
 * (0,1,0) defined in metavoz-theme-v2.css. The `!important` is kept as
 * belt-and-suspenders against any future shorthand-padding override.
 * Bug: iter-2 used `.mv-filter-bar__input` (0,1,0) which tied with
 * `.mv-form-input`, and the shorthand `padding` won over long-hand
 * `padding-left`. */
.mv-filter-bar__input-wrap > input.mv-filter-bar__input {
    padding-left: 2.5rem !important;
}

/* Focus state: icon adopts primary color when input is focused (nice-to-have) */
.mv-filter-bar__input-wrap:focus-within .mv-filter-bar__icon-wrap {
    color: var(--mv-primary-700, #c1126a);
}

/* Mobile stack
 * Iter-3 (2026-04-17): rewrote the mobile branch. Previous iteration
 * targeted `.mv-filter-bar__search` (a class that does NOT exist in the
 * rendered template — see firmas_list.html line 40). Actual rendered
 * wrap is `.mv-filter-bar__input-wrap`. Because the target didn't exist,
 * the wrap collapsed to 0 height in column mode and the absolute-positioned
 * icon became geometrically detached — bug #2 (P0, 375×667). Now we:
 *   1. Target `.mv-filter-bar__input-wrap` explicitly
 *   2. Force `min-height: 44px` on wrap + input (WCAG tap-target)
 *   3. Stretch select / button / count to full width
 *   4. Keep position:relative on wrap (inherits from base rule above)
 *      so the icon stays overlaid on the input in column layout. */
@media (max-width: 768px) {
    .mv-filter-bar__form {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mv-space-3, 12px);
    }
    .mv-filter-bar__form > .mv-filter-bar__input-wrap {
        width: 100%;
        flex: 1 1 auto;
        min-height: 44px;
    }
    .mv-filter-bar__form > .mv-filter-bar__input-wrap > input.mv-filter-bar__input {
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
    }
    .mv-filter-bar__form > .mv-filter-bar__select,
    .mv-filter-bar__form > select,
    .mv-filter-bar__form > .mv-btn-v2,
    .mv-filter-bar__form > button[type="submit"] {
        width: 100%;
        flex: 1 1 auto;
        min-height: 44px;
        box-sizing: border-box;
    }
    .mv-filter-bar__form > .mv-filter-bar__count {
        width: 100%;
        text-align: left;
    }
}

/* Data table horizontal scroll wrap — wrap <table> inside this container
 * so narrow viewports don't force the page to scroll horizontally.
 * NOTE: metavoz-theme-v2.css:1133 already defines .mv-data-table__scroll
 * with overflow-x:auto; this rule is a defensive re-assertion guaranteeing
 * touch momentum scroll on iOS Safari. */
.mv-data-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* ════════════════════════════════════════════════════════════
 * Sub-phase 1.D · Información adicional — dynamic extra_data
 * mv-dyn-* component namespace
 * ════════════════════════════════════════════════════════════ */

.mv-dyn-shell {
    margin-top: var(--mv-space-5);
    border: 1px solid var(--mv-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--mv-radius-lg, 12px);
    overflow: hidden;
}

.mv-dyn-shell__header {
    display: flex;
    align-items: baseline;
    gap: var(--mv-space-3);
    padding: var(--mv-space-4) var(--mv-space-5);
    background: var(--mv-surface-raised, rgba(0, 0, 0, 0.02));
    border-bottom: 1px solid var(--mv-border, rgba(0, 0, 0, 0.08));
}

.mv-dyn-shell__title {
    margin: 0;
    font-size: var(--mv-text-base, 1rem);
    font-weight: var(--mv-fw-semibold, 600);
    color: var(--mv-content-text, #1d1d1f);
    display: flex;
    align-items: center;
    gap: var(--mv-space-2);
}

.mv-dyn-shell__meta {
    margin: 0;
    font-size: var(--mv-text-sm, 0.875rem);
    color: var(--mv-text-muted, #6e6e73);
}

.mv-dyn-group {
    padding: var(--mv-space-4) var(--mv-space-5);
    border-bottom: 1px solid var(--mv-border, rgba(0, 0, 0, 0.06));
}

.mv-dyn-group:last-child {
    border-bottom: none;
}

.mv-dyn-group__title {
    margin: 0 0 var(--mv-space-3) 0;
    font-size: var(--mv-text-sm, 0.875rem);
    font-weight: var(--mv-fw-semibold, 600);
    color: var(--mv-text-muted, #6e6e73);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: var(--mv-space-2);
}

.mv-dyn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mv-space-3) var(--mv-space-4);
}

@media (max-width: 768px) {
    .mv-dyn-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .mv-dyn-grid {
        grid-template-columns: 1fr;
    }
}

.mv-dyn-field {
    display: flex;
    flex-direction: column;
    gap: var(--mv-space-1);
    min-width: 0;
}

.mv-dyn-field__label {
    font-size: var(--mv-text-xs, 0.75rem);
    font-weight: var(--mv-fw-medium, 500);
    color: var(--mv-text-muted, #6e6e73);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-dyn-field__value {
    font-size: var(--mv-text-sm, 0.875rem);
    color: var(--mv-content-text, #1d1d1f);
    overflow-wrap: break-word;
    word-break: break-word;
}

.mv-dyn-field__value--empty {
    color: var(--mv-text-disabled, #aeaeb2);
    font-style: italic;
}

.mv-dyn-field__value--link {
    color: var(--mv-primary-600, #c1126a);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1);
}

.mv-dyn-field__value--link:hover {
    text-decoration: underline;
    color: var(--mv-primary-700, #a60a56);
}

.mv-dyn-field__value--bool {
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1);
    font-weight: var(--mv-fw-medium, 500);
}

.mv-dyn-field__value--bool-true {
    color: var(--mv-success-600, #1a7f3c);
}

.mv-dyn-field__value--bool-false {
    color: var(--mv-danger-600, #c0392b);
}

.mv-dyn-field__value--money {
    font-family: var(--mv-font-mono, ui-monospace, 'Cascadia Code', monospace);
    font-weight: var(--mv-fw-semibold, 600);
    color: var(--mv-primary-700, #a60a56);
}

.mv-dyn-field__value--date {
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1);
    color: var(--mv-text-secondary, #3a3a3c);
}

.mv-dyn-field__value--phone {
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-2);
}

/* ════════════════════════════════════════════════════════════
 * Sub-phase 2.B · Teléfonos tab — mv-tel-* component namespace
 * ════════════════════════════════════════════════════════════ */

.mv-tel-section {
    margin-top: var(--mv-space-5);
}

.mv-tel-section__header {
    margin-bottom: var(--mv-space-4);
}

.mv-tel-section__header h3 {
    margin: 0;
    font-size: var(--mv-text-lg, 1.125rem);
    font-weight: var(--mv-fw-semibold, 600);
    color: var(--mv-content-text, #1d1d1f);
    display: flex;
    align-items: center;
    gap: var(--mv-space-2);
}

.mv-tel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--mv-space-3);
}

.mv-tel-chip {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--mv-space-3);
    align-items: center;
    padding: var(--mv-space-3) var(--mv-space-4);
    background: var(--mv-surface, #fff);
    border: 1px solid var(--mv-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--mv-radius-md, 8px);
    transition: box-shadow 0.15s ease;
}

.mv-tel-chip:hover {
    box-shadow: var(--mv-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
}

.mv-tel-chip--primary {
    border-color: var(--mv-primary-500, #f71883);
    box-shadow: 0 0 0 1px var(--mv-primary-500, #f71883);
}

.mv-tel-chip--dead {
    opacity: 0.55;
}

.mv-tel-chip__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mv-tel-chip__number {
    font-family: var(--mv-font-mono, ui-monospace, 'Cascadia Code', monospace);
    font-weight: var(--mv-fw-semibold, 600);
    font-size: var(--mv-text-base, 1rem);
    color: var(--mv-content-text, #1d1d1f);
    letter-spacing: 0.03em;
}

.mv-tel-chip__label {
    font-size: var(--mv-text-2xs, 0.6875rem);
    text-transform: uppercase;
    color: var(--mv-text-muted, #6e6e73);
    letter-spacing: 0.07em;
    font-weight: var(--mv-fw-medium, 500);
}

.mv-tel-chip__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--mv-text-xs, 0.75rem);
    color: var(--mv-text-muted, #6e6e73);
}

.mv-tel-chip__pnn {
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1);
}

.mv-tel-chip__tipo {
    font-size: var(--mv-text-2xs, 0.6875rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mv-tel-chip__history {
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1);
}

.mv-tel-chip__invalid {
    display: inline-flex;
    align-items: center;
    gap: var(--mv-space-1);
    color: var(--mv-danger-600, #c0392b);
    font-weight: var(--mv-fw-medium, 500);
}

.mv-tel-chip__call-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

@media (max-width: 640px) {
    .mv-tel-chip {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }
    .mv-tel-chip__meta {
        grid-column: 1 / -1;
        font-size: var(--mv-text-2xs, 0.6875rem);
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--mv-space-2);
    }
}

/* ───────── Phase 2.C · Ficha rail contextual — desktop ≥1280 ───────── */

/* Default: single-column stack (mobile / tablet / narrow desktop) */
.mv-ficha-layout {
    display: block;
}

@media (min-width: 1280px) {
    .mv-ficha-layout {
        display: grid;
        grid-template-columns: 1fr 280px;
        gap: var(--mv-space-5, 20px);
        align-items: start;
    }
}

/* Rail hidden below 1280px */
.mv-ficha-rail {
    display: none;
}

@media (min-width: 1280px) {
    .mv-ficha-rail {
        display: flex;
        flex-direction: column;
        gap: var(--mv-space-4, 16px);
        /* Sticky so rail stays visible while scrolling main content */
        position: sticky;
        top: var(--mv-space-4, 16px);
    }
}

.mv-ficha-rail__loading {
    padding: var(--mv-space-3, 12px);
    text-align: center;
}

.mv-ficha-rail__card {
    background: var(--mv-surface, #fff);
    border: 1px solid var(--mv-border, rgba(0,0,0,0.08));
    border-radius: var(--mv-radius-md, 8px);
    padding: var(--mv-space-4, 16px);
}

.mv-ficha-rail__card h4 {
    font-size: var(--mv-text-2xs, 0.6875rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mv-text-muted, #6e6e73);
    margin: 0 0 var(--mv-space-3, 12px);
    font-weight: 600;
}

.mv-ficha-rail__timeline-item {
    padding: var(--mv-space-2, 8px) 0;
    border-top: 1px solid var(--mv-border-subtle, rgba(0,0,0,0.05));
    font-size: var(--mv-text-sm, 0.875rem);
}

.mv-ficha-rail__timeline-item:first-of-type {
    border-top: none;
    padding-top: 0;
}

.mv-ficha-rail__timeline-item p {
    margin: var(--mv-space-1, 4px) 0 0;
    color: var(--mv-text-muted, #6e6e73);
    font-size: var(--mv-text-xs, 0.75rem);
}

.mv-ficha-rail__timeline-item small {
    color: var(--mv-text-muted, #6e6e73);
    display: block;
    font-size: var(--mv-text-xs, 0.75rem);
    margin-top: var(--mv-space-1, 4px);
}

.mv-ficha-rail__card .mv-empty-state-inline {
    font-size: var(--mv-text-sm, 0.875rem);
    color: var(--mv-text-muted, #6e6e73);
    margin: 0;
}

/* ───────── Phase 2.C · Gestiones tab — timeline format ───────── */

.mv-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.mv-timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--mv-border, rgba(0,0,0,0.08));
}

.mv-timeline__item {
    padding-left: 48px;
    position: relative;
    margin-bottom: var(--mv-space-4, 16px);
}

.mv-timeline__item:last-child {
    margin-bottom: 0;
}

.mv-timeline__marker {
    position: absolute;
    left: 0;
    top: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mv-surface, #fff);
    border: 2px solid var(--mv-primary-500, #f71883);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mv-primary-700, #a60a56);
    font-size: 0.75rem;
    z-index: 1;
}

.mv-timeline__item--promesa .mv-timeline__marker {
    border-color: var(--mv-success, #22c55e);
    color: var(--mv-success, #22c55e);
}

.mv-timeline__item--pago .mv-timeline__marker {
    border-color: var(--mv-info, #3b82f6);
    color: var(--mv-info, #3b82f6);
}

.mv-timeline__content {
    background: var(--mv-surface, #fff);
    border: 1px solid var(--mv-border, rgba(0,0,0,0.08));
    border-radius: var(--mv-radius-md, 8px);
    padding: var(--mv-space-3, 12px) var(--mv-space-4, 16px);
}

.mv-timeline__content header {
    font-size: var(--mv-text-sm, 0.875rem);
    font-weight: 600;
    color: var(--mv-text, #1d1d1f);
    margin-bottom: var(--mv-space-1, 4px);
}

.mv-timeline__content p {
    font-size: var(--mv-text-sm, 0.875rem);
    color: var(--mv-text-secondary, #3d3d3f);
    margin: var(--mv-space-1, 4px) 0;
}

.mv-timeline__content footer {
    font-size: var(--mv-text-xs, 0.75rem);
    color: var(--mv-text-muted, #6e6e73);
    margin-top: var(--mv-space-2, 8px);
}

/* ──────────────────────────────────────────────────────────
   Fix MVZ-UI-002 / Fix 7: Ficha data grid collapses to 1-col at 480px.
   The grid uses .mv-grid-cols-2 + inline style=grid-template-columns:repeat(2,1fr).
   Inline style wins over class, so !important is needed here.
   ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .mv-grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ──────────────────────────────────────────────────────────
   Fix F-02 / Fix 8: .mv-page-header-v2 inside CRM pages should
   not be a <header> element when a banner landmark already exists
   from the topnav. CSS-only note — the template uses <div> after fix.
   This rule is a no-op here; it documents the template change.
   ────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────
   Sub-phase 1.10 · Teléfonos compact preview inside Titular card
   ────────────────────────────────────────────────────────── */
.mv-ficha__titular-contacto {
    margin-top: var(--mv-space-4);
    padding-top: var(--mv-space-3);
    border-top: 1px solid var(--mv-border-subtle);
}

.mv-heading-as-h3 {
    font-size: var(--mv-text-sm);
    font-weight: 600;
    color: var(--mv-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--mv-space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--mv-space-2);
}

.mv-tel-list--compact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mv-space-2);
}

.mv-tel-list--compact .mv-tel-chip {
    display: flex;
    align-items: center;
    gap: var(--mv-space-2);
    padding: var(--mv-space-2) var(--mv-space-3);
    border-radius: var(--mv-radius-md);
    background: var(--mv-surface-subtle, var(--mv-surface-2));
    border: 1px solid var(--mv-border-subtle);
}

.mv-tel-chip--primary {
    border-color: var(--mv-color-primary-400, var(--mv-primary));
    background: var(--mv-color-primary-50, var(--mv-surface-subtle));
}

.mv-tel-chip__main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: var(--mv-space-2);
}

.mv-tel-chip__number {
    font-family: var(--mv-font-mono);
    font-size: var(--mv-text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.mv-tel-chip__label {
    font-size: var(--mv-text-xs);
    color: var(--mv-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mv-tel-chip__meta {
    font-size: var(--mv-text-xs);
    color: var(--mv-text-muted);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--mv-space-1);
}

.mv-tel-chip__call-btn {
    flex-shrink: 0;
    padding: var(--mv-space-1) var(--mv-space-2);
    font-size: var(--mv-text-xs);
}

.mv-ficha__titular-hint {
    margin: var(--mv-space-2) 0 0;
}

.mv-empty-state-inline {
    font-size: var(--mv-text-sm);
    padding: var(--mv-space-2) 0;
}

/* ════════════════════════════════════════════════════════════
 * Ola 2B layout fixes — 2026-04-20
 * MVZ-UI-010, MVZ-UI-011, MVZ-UI-012, MVZ-UI-022
 * ════════════════════════════════════════════════════════════ */

/* MVZ-UI-010: Firma filter bar — ensure input grows, selects + button stay fixed-width */
.mv-filter-bar {
    display: flex;
    gap: var(--mv-space-3);
    align-items: center;
    flex-wrap: wrap;
}

.mv-filter-bar__input {
    flex: 1 1 320px;
    min-width: 280px;
}

.mv-filter-bar__select {
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 220px;
}

.mv-filter-bar__button {
    flex: 0 0 auto;
}

.mv-filter-bar__total {
    margin-left: auto;
    white-space: nowrap;
}

/* MVZ-UI-011: Buscar/search form — 4-col grid on desktop, single col on mobile */
.mv-search-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: var(--mv-space-3);
    align-items: end;
}

@media (max-width: 768px) {
    .mv-search-form {
        grid-template-columns: 1fr;
    }
}

/* MVZ-UI-012: Distribuir KPI cards — 3-col grid instead of stacked full-width rows */
.mv-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mv-space-4);
}

@media (max-width: 768px) {
    .mv-kpi-row {
        grid-template-columns: 1fr;
    }
}

/* MVZ-UI-022: <code> elements inside tables render primary text, not Bootstrap pink */
.mv-table__row code,
.mv-table__td code,
.mv-data-table code,
.mv-code {
    color: var(--mv-text-primary, #1c1c1e);
    background: var(--mv-bg-subtle, #f5f5f7);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--mv-font-mono, ui-monospace, 'SF Mono', Menlo, monospace);
    font-size: 0.875em;
}

/* ════════════════════════════════════════════════════════════
 * MVZ-UI-002 — Reduce page-header-v2 vertical padding inside CRM
 * The global .mv-page-header-v2 uses padding-top: space-7 (32px).
 * Inside CRM ficha the hero card immediately follows; keep it tight.
 * ════════════════════════════════════════════════════════════ */
.mv-crm-content .mv-page-header-v2 {
    padding-top: var(--mv-space-3, 12px);
    padding-bottom: var(--mv-space-3, 12px);
}

/* ════════════════════════════════════════════════════════════
 * MVZ-UI-001 — Compact single hero: hide the duplicate .mv-ficha-hero card
 * The page-header-v2 already shows name + credit number + actions.
 * The .mv-ficha-hero card below repeats name + credit ID + product badges.
 * Per spec: merge into one compact header and remove the duplicate card.
 * The hero badge content (mora, convenio, promesa, último status) is moved
 * into the page-header-v2 via template change (ficha_detail.html).
 * ════════════════════════════════════════════════════════════ */

/* Compact hero — used for the merged single hero row */
.mv-ficha-hero-compact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mv-space-3, 12px);
    padding: var(--mv-space-3, 12px) var(--mv-space-5, 20px);
    background: var(--mv-surface, #fff);
    border: 1px solid var(--mv-border, rgba(0,0,0,0.08));
    border-left: 3px solid var(--mv-primary, #f71883);
    border-radius: var(--mv-radius-md, 8px);
    margin-bottom: var(--mv-space-3, 12px);
}

.mv-ficha-hero-compact__identity {
    display: flex;
    align-items: baseline;
    gap: var(--mv-space-3, 12px);
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.mv-ficha-hero-compact__credit-id {
    font-size: var(--mv-text-xl, 1.25rem);
    font-weight: var(--mv-fw-bold, 700);
    color: var(--mv-primary, #f71883);
    font-family: var(--mv-font-mono, ui-monospace, monospace);
    white-space: nowrap;
}

.mv-ficha-hero-compact__product {
    font-size: var(--mv-text-sm, 0.875rem);
    color: var(--mv-text-muted, #6e6e73);
}

.mv-ficha-hero-compact__badges {
    display: flex;
    align-items: center;
    gap: var(--mv-space-2, 8px);
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
 * MVZ-UI-004 — 2-col grid for ALL sub-cards in datos_generales
 * Financiero + Titular already use .mv-grid-cols-2 with inline style.
 * The extra_data_groups (Cuenta, Descuentos, Fin.Compl., Comunicación,
 * Otros) render as individual full-width .mv-card blocks.
 * Wrap them in .mv-subcards-grid-2col for 2-col layout.
 * ════════════════════════════════════════════════════════════ */
.mv-subcards-grid-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--mv-space-5, 20px);
    margin-top: var(--mv-space-5, 20px);
}

/* Last child spanning 2 cols if odd number of cards */
.mv-subcards-grid-2col > .mv-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Collapse to 1-col below 1280px */
@media (max-width: 1279px) {
    .mv-subcards-grid-2col {
        grid-template-columns: 1fr;
    }
}

/* ───────── Search UX improvements (buscar v2) ───────── */
.mv-filter-bar__input-wrap { position: relative; flex: 1 1 300px; min-width: 240px; max-width: 500px; }
.mv-filter-bar__input-wrap .mv-form-input { padding-left: 36px; padding-right: 36px; }
.mv-filter-bar__icon-wrap {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--mv-text-muted); pointer-events: none;
}
.mv-filter-bar__clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; padding: 6px; cursor: pointer;
    color: var(--mv-text-muted); border-radius: var(--mv-radius-sm);
}
.mv-filter-bar__clear:hover { color: var(--mv-danger-base); background: var(--mv-neutral-100); }

.mv-results-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--mv-space-3) 0; margin-bottom: var(--mv-space-3);
    border-bottom: 1px solid var(--mv-border);
    font-size: var(--mv-text-sm); color: var(--mv-text-muted);
}
.mv-results-count strong { color: var(--mv-text); font-size: var(--mv-text-md); }
.mv-results-query { font-family: monospace; background: var(--mv-neutral-100); padding: 2px 6px; border-radius: var(--mv-radius-sm); color: var(--mv-text); }

.mv-hint-card {
    padding: var(--mv-space-7) var(--mv-space-6);
    text-align: center; background: var(--mv-neutral-50);
    border: 1px dashed var(--mv-border); border-radius: var(--mv-radius-lg);
    margin: var(--mv-space-4) 0;
}
.mv-hint-card i { font-size: 32px; color: var(--mv-text-muted); margin-bottom: var(--mv-space-3); display: block; }
.mv-hint-card h3 { margin: 0 0 var(--mv-space-2); color: var(--mv-text); font-size: var(--mv-text-lg); }
.mv-hint-card p { margin: 0; color: var(--mv-text-muted); font-size: var(--mv-text-sm); }

.mv-row-clickable:hover { background: var(--mv-neutral-50); }
.mv-row-clickable:hover td { background: inherit; }