/* ?? YNEX CSS Variables ??????????????????????????????????????? */
:root {
    --ynex-sidebar-bg: #111c43;
    --ynex-sidebar-width: 240px;
    --ynex-sidebar-text: #9ba8c0;
    --ynex-sidebar-text-active: #ffffff;
    --ynex-sidebar-active-bg: rgba(106, 70, 193, 0.18);
    --ynex-sidebar-active-indicator: #6a46c1;
    --ynex-sidebar-section-label: #5a6a85;
    --ynex-appbar-bg: #ffffff;
    --ynex-appbar-text: #333c4e;
    --ynex-appbar-height: 60px;
    --ynex-appbar-shadow: 0 2px 8px rgba(0,0,0,0.06);
    --ynex-body-bg: #f3f5f9;
    --ynex-accent: #6a46c1;
    --ynex-font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --vp-grid-label-color: #333c4e;
    --vp-material-purple: #9c27b0;
}

/* ?? Reset / Base ????????????????????????????????????????????? */
html, body {
    font-family: var(--ynex-font-family);
    background: var(--ynex-body-bg);
    margin: 0;
    padding: 0;
}

body, .mud-typography, .mud-button-root, .mud-input, .mud-table, .mud-list {
    font-family: var(--ynex-font-family) !important;
}

h1:focus { outline: none; }

a, .btn-link { color: #0071c1; }

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content { padding-top: 1.1rem; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid red; }
.validation-message { color: red; }



/* ?? Blazor error / loading ??????????????????????????????????? */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9QuIuOTk2IDk3LjA6NyAxMjYgOCAxMjYgOSAxMjUuOTkyIDQyLjAxMiA2OS4yMzcgMjAuMTg2IDY5LjI1MiAzMC40NTIgNjkuMjUyIDUwIDUwIDUwLjA3MiAxMDYuNzQyIDUwLjA3MiAxMzYuMzU2IDUwLjA3MiAxNDAuMjA1IDQyLjA9OSAxMjMuMDUyIDY5LjM2MyA6MEQ3Ljk2MyAyNjMuNTg6IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEumme2IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA6byYjY2FnZXNvLg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ?? Loading progress ????????????????????????????????????????? */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}
.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: #6a46c1;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

code { color: #c02d76; }

/* ?? YNEX AppBar ?????????????????????????????????????????????? */
.mud-appbar {
    background-color: var(--ynex-appbar-bg) !important;
    color: var(--ynex-appbar-text) !important;
    box-shadow: var(--ynex-appbar-shadow) !important;
    border-bottom: 1px solid #e8ecf3;
}

.mud-appbar .mud-icon-button {
    color: var(--ynex-appbar-text) !important;
}

/* ?? YNEX Drawer / Sidebar ???????????????????????????????????? */
.mud-drawer {
    background-color: var(--ynex-sidebar-bg) !important;
    border-right: none !important;
}

.mud-drawer-content {
    background-color: var(--ynex-sidebar-bg) !important;
}

@media (min-width: 960px) {
    .vp-layout-expanded .mud-appbar {
        margin-left: 240px !important;
        width: calc(100% - 240px) !important;
    }

    .vp-layout-collapsed .mud-appbar {
        margin-left: 88px !important;
        width: calc(100% - 88px) !important;
    }

    .vp-layout-expanded .mud-main-content {
        margin-left: 240px !important;
        transition: none;
    }

    .vp-layout-collapsed .mud-main-content {
        margin-left: 88px !important;
        transition: none;
    }

    .vp-layout-expanded .mud-drawer,
    .vp-layout-expanded .vp-drawer-expanded {
        width: 240px !important;
    }

    .vp-layout-collapsed .mud-drawer,
    .vp-layout-collapsed .vp-drawer-collapsed {
        width: 88px !important;
    }

    .vp-layout-collapsed .vp-navmenu-collapsed .mud-nav-link span {
        display: none !important;
    }
}

/* ?? Mobile drawer behavior ?????????????????????????????????? */
@media (max-width: 1279px) {
    /* On mobile/tablet the drawer is hidden by default, main content full width */
    .vp-layout-collapsed .mud-appbar,
    .vp-layout-expanded .mud-appbar {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .vp-layout-collapsed .mud-main-content,
    .vp-layout-expanded .mud-main-content {
        margin-left: 0 !important;
    }
}

/* ?? YNEX Logo box ???????????????????????????????????????????? */
.vp-brand-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 16px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
    margin-bottom: 0 !important;
}

.vp-brand-logo {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #6a46c1, #9b72ef);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

.vp-brand-logo .mud-icon-root {
    font-size: 1.05rem !important;
    color: #fff !important;
}

.vp-brand-name {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.vp-brand-subtitle {
    color: var(--ynex-sidebar-section-label) !important;
    font-size: 0.7rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* ?? YNEX Nav section labels ?????????????????????????????????? */
.vp-nav-section-label {
    color: rgba(255,255,255,0.45) !important;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 16px 16px 8px 16px;
    display: block;
}

.vp-nav-section-label-collapsed {
    padding: 0 !important;
    min-height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.vp-nav-section-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.5);
    background-color: transparent;
    display: inline-block;
    box-sizing: border-box;
}

/* ?? YNEX Nav links ??????????????????????????????????????????? */
.mud-nav-link {
    border-radius: 10px !important;
    margin: 2px 10px !important;
    color: rgba(255,255,255,0.92) !important;
    font-size: 0.92rem !important;
    font-weight: 600;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    padding: 10px 12px !important;
}

.mud-nav-link:hover {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

.mud-nav-link.active {
    background-color: rgba(106, 70, 193, 0.28) !important;
    color: #ffffff !important;
    border-left: 3px solid #8c6cff !important;
    padding-left: 9px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.mud-nav-link .mud-nav-link-icon {
    color: #ffffff !important;
    opacity: .95;
    font-size: 1.12rem !important;
}

.mud-nav-link.active .mud-nav-link-icon {
    color: #ffffff !important;
    opacity: 1;
}

/* ?? YNEX Nav group headers ??????????????????????????????????? */
.mud-nav-group .mud-nav-group-header {
    color: var(--ynex-sidebar-text) !important;
    font-size: 0.875rem !important;
    font-weight: 500;
    border-radius: 8px !important;
    margin: 1px 8px !important;
    padding: 8px 12px !important;
}

.mud-nav-group .mud-nav-group-header:hover {
    background-color: rgba(255,255,255,0.06) !important;
    color: var(--ynex-sidebar-text-active) !important;
}

@media (min-width: 960px) {
    .vp-brand-box-collapsed,
    .vp-drawer-collapsed .vp-brand-box {
        justify-content: center;
        padding: 18px 8px 16px 8px !important;
    }

    .vp-navmenu-collapsed .mud-tooltip-root {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .vp-navmenu-collapsed .mud-nav-link {
        margin: 5px 12px !important;
        padding: 11px 0 !important;
        min-height: 42px;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .vp-navmenu-collapsed .mud-nav-link .mud-nav-link-icon {
        margin-right: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .vp-navmenu-collapsed .mud-nav-link.active {
        border-left: none !important;
        border-right: 3px solid #8c6cff !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .vp-navmenu-collapsed .vp-nav-section-label {
        width: 100%;
        margin: 0 auto;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .vp-navmenu-collapsed .vp-nav-section-dot {
        margin: 0 auto;
        transform: none;
    }
}

/* ?? YNEX Main content ???????????????????????????????????????? */
.vp-main-content {
    background: var(--ynex-body-bg);
    min-height: 100vh;
}

.vp-page-container {
    padding: 1.25rem 1.5rem;
    position: relative;
}

/* ?? YNEX AppBar right-side icons ????????????????????????????? */
.vp-appbar-icon {
    color: var(--ynex-appbar-text) !important;
    opacity: 0.75;
}

.vp-appbar-icon:hover {
    opacity: 1;
}

.vp-appbar-avatar {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s;
}

.vp-appbar-avatar:hover {
    background: rgba(0,0,0,0.05);
}

.vp-appbar-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ynex-appbar-text);
    line-height: 1.2;
}

.vp-appbar-user-role {
    font-size: 0.72rem;
    color: #8a94a6;
    line-height: 1.2;
}

/* ?? Page header helpers ?????????????????????????????????????? */
.vp-page-header { gap: .75rem; }
.vp-page-header-actions { gap: .5rem; }
.vp-table-wrap { overflow-x: auto; }

/* Barra de carga global para navegación entre páginas */
.vp-page-loading-bar {
    height: 3px !important;
    border-radius: 2px !important;
}

/* ?? Breadcrumbs (Ynex-style) ????????????????????????????????? */
.vp-breadcrumbs {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 500;
    justify-content: flex-end;
    flex-wrap: wrap;
    pointer-events: auto;
    margin-bottom: 0.25rem;
}

.vp-breadcrumb-link {
    color: var(--mud-palette-primary, #6a46c1);
    text-decoration: none;
    transition: color .15s ease;
}

.vp-breadcrumb-link:hover {
    color: var(--mud-palette-secondary, #9b72ef);
    text-decoration: underline;
}

.vp-breadcrumb-separator {
    color: var(--mud-palette-text-disabled, #adb5bd);
    font-size: .85rem !important;
    margin: 0 .05rem;
}

.vp-breadcrumb-current {
    color: var(--mud-palette-text-secondary, #6c757d);
}

/* ?? YNEX list design (global) ???????????????????????????????? */
.mud-list {
    border: 1px solid #e8ecf3;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(17, 25, 40, 0.05);
    overflow: hidden;
}

.mud-list-item {
    min-height: 50px;
    border-bottom: 1px solid #edf1f7;
    transition: background-color .15s ease;
}

.mud-list-item:last-child {
    border-bottom: none;
}

.mud-list-item:hover {
    background: #f7f7ff;
}

.mud-list-item .mud-list-item-text .mud-typography {
    color: #2f3a4d;
    font-weight: 500;
}

/* ?? YNEX table design (global) ??????????????????????????????? */
.vp-main-content .mud-table,
.vp-page-container .mud-table,
.mud-table.vp-grid-table,
.mud-table {
    border: 1px solid #e8ecf3 !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(17, 25, 40, 0.05) !important;
    overflow: hidden;
}

.vp-main-content .mud-table-container,
.vp-page-container .mud-table-container,
.mud-table .mud-table-container,
.mud-table-container {
    border-radius: 14px !important;
}

.vp-main-content .mud-table thead .mud-table-cell,
.vp-page-container .mud-table thead .mud-table-cell,
.mud-table thead .mud-table-cell,
.mud-table thead th {
    background: #f8f9fd !important;
    color: #333c4e !important;
    font-weight: 600 !important;
    font-size: 0.86rem !important;
    letter-spacing: 0.01em;
    text-transform: none;
    border-bottom: 1px solid #e8ecf3 !important;
    padding-top: 0.95rem !important;
    padding-bottom: 0.95rem !important;
}

.vp-main-content .mud-table tbody .mud-table-cell,
.vp-page-container .mud-table tbody .mud-table-cell,
.mud-table tbody .mud-table-cell,
.mud-table tbody td {
    border-bottom: 1px solid #edf1f7 !important;
    color: #2f3a4d !important;
    font-size: 0.92rem;
    font-weight: 500;
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}

.mud-table tbody tr:last-child .mud-table-cell,
.mud-table tbody tr:last-child td {
    border-bottom: none !important;
}

.vp-main-content .mud-table tbody tr:hover,
.vp-page-container .mud-table tbody tr:hover,
.mud-table tbody tr:hover {
    background: #f7f7ff !important;
}

.vp-main-content .mud-table .mud-table-pagination,
.vp-page-container .mud-table .mud-table-pagination,
.mud-table .mud-table-pagination {
    border-top: 1px solid #e8ecf3 !important;
    background: #fcfdff !important;
}

.mud-table .mud-chip,
.mud-chip {
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* ?? Home info banner + KPI cards (YNEX-like) ????????????????? */
.vp-info-banner {
    border: none !important;
    border-radius: 12px !important;
    background: linear-gradient(90deg, #4f8df7 0%, #3b82f6 45%, #6a46c1 100%) !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.24);
    font-weight: 600;
}

.vp-info-banner-warning {
    border-radius: 12px !important;
    border-color: #f7c97a !important;
    background: #fff8ea !important;
}

.vp-kpi-cards {
    margin-top: .1rem;
    margin-bottom: .9rem !important;
    row-gap: .45rem;
}

.vp-kpi-item {
    display: flex;
    justify-content: center;
}

.vp-kpi-item .vp-kpi-card {
    width: 100%;
    max-width: none;
}

@media (max-width: 1200px) {
    .vp-kpi-item {
        justify-content: center;
    }
}

@media (max-width: 960px) {
    .vp-kpi-item .vp-kpi-card {
        max-width: none;
    }
}

.vp-kpi-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px !important;
    border: 1px solid #e6ebf3 !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
    box-shadow: 0 6px 16px rgba(17, 25, 40, 0.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-height: 108px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100% !important;
    box-sizing: border-box;
}

.vp-kpi-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--vp-kpi-accent, #94a3b8);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.vp-kpi-card::after {
    content: "";
    position: absolute;
    right: -18px;
    top: -18px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    opacity: .16;
    background: var(--vp-kpi-accent, #94a3b8);
}

.vp-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(17, 25, 40, 0.12);
    border-color: #d5deee !important;
}

/* Fuerza que MudTooltip (wrapper) ocupe todo el ancho del MudItem
   para homologar las tarjetas KPI de Procesamientos. */
.vp-kpi-cards .mud-tooltip-root,
.vp-kpi-cards > .mud-grid-item > .mud-tooltip-root {
    display: block !important;
    width: 100% !important;
}

/* Color accents per state */
.vp-kpi-card-pending     { --vp-kpi-accent: #9575cd; }
.vp-kpi-card-processing  { --vp-kpi-accent: #4fc3f7; }
.vp-kpi-card-completed   { --vp-kpi-accent: #66bb6a; }
.vp-kpi-card-observed    { --vp-kpi-accent: #ffca28; }
.vp-kpi-card-error       { --vp-kpi-accent: #e57373; }

.vp-kpi-card-title {
    color: #6b778d !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.vp-kpi-card-value {
    color: #1f2a3d;
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    line-height: 1;
    margin-top: 4px;
    letter-spacing: -0.02em;
}

.vp-kpi-card-sub {
    color: #8695ac !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;
    margin-top: 2px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-kpi-card-bar {
    position: relative;
    height: 4px;
    margin-top: 10px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.vp-kpi-card-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .35s ease;
    background: var(--vp-kpi-accent, #94a3b8);
}

.vp-kpi-card-bar-pending    { background: linear-gradient(90deg, #b39ddb, #7e57c2); }
.vp-kpi-card-bar-processing { background: linear-gradient(90deg, #4fc3f7, #0288d1); }
.vp-kpi-card-bar-completed  { background: linear-gradient(90deg, #66bb6a, #43a047); }
.vp-kpi-card-bar-error      { background: linear-gradient(90deg, #ef5350, #c62828); }

.vp-kpi-card-badge {
    display: none !important;
}

.vp-kpi-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}

.vp-kpi-card-icon .mud-icon-root {
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.vp-kpi-card-icon-pending    { background: linear-gradient(135deg, #b39ddb, #7e57c2); }
.vp-kpi-card-icon-processing { background: linear-gradient(135deg, #4fc3f7, #0288d1); }
.vp-kpi-card-icon-completed  { background: linear-gradient(135deg, #81c784, #43a047); }
.vp-kpi-card-icon-error      { background: linear-gradient(135deg, #ef5350, #c62828); }

/* Dashboard moderno */
.vp-dashboard-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #5f43c6 0%, #7a5fe0 55%, #8d73ef 100%);
    border-radius: 16px;
    color: #fff;
    padding: 1rem 1.1rem;
    box-shadow: 0 10px 24px rgba(98, 74, 199, 0.28);
}

.vp-dashboard-hero-title {
    color: #fff !important;
    font-weight: 700 !important;
}

.vp-dashboard-hero-subtitle,
.vp-dashboard-hero-meta {
    color: rgba(255,255,255,0.9) !important;
}

.vp-dashboard-hero-progress {
    position: relative;
    min-width: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vp-dashboard-ring {
    transform: scale(1.1);
}

.vp-dashboard-ring-text {
    position: absolute;
    color: #fff !important;
    font-weight: 700 !important;
}

.vp-dashboard-target-card {
    border-radius: 14px !important;
    border: 1px solid #d8cdf8 !important;
    background: linear-gradient(135deg, #7151d8 0%, #8a70ef 100%) !important;
    box-shadow: 0 10px 24px rgba(98, 74, 199, 0.24) !important;
}

.vp-dashboard-target-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.vp-dashboard-target-subtitle,
.vp-dashboard-target-meta {
    color: rgba(255,255,255,0.9) !important;
}

.vp-dashboard-target-progress {
    min-width: 74px;
    height: 74px;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vp-dashboard-target-progress span {
    position: absolute;
    color: #fff;
    font-weight: 700;
}

.vp-dashboard-kpi {
    display: flex;
    align-items: center;
    gap: .8rem;
    border-radius: 14px;
    padding: .9rem 1rem;
    color: #fff;
    box-shadow: 0 6px 16px rgba(17, 25, 40, 0.12);
}

.vp-dashboard-kpi .mud-icon-root {
    font-size: 1.7rem;
    opacity: .95;
}

.vp-dashboard-kpi-label {
    font-size: .78rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .9;
}

.vp-dashboard-kpi-value {
    font-size: 1.6rem;
    line-height: 1.1;
    font-weight: 800;
}

.vp-dashboard-kpi-total { background: #9575cd; }
.vp-dashboard-kpi-completed { background: #66bb6a; }
.vp-dashboard-kpi-processing { background: #4fc3f7; }
.vp-dashboard-kpi-issues { background: #e57373; }

.vp-dashboard-card {
    border-radius: 14px !important;
    border: 1px solid #e6ebf3 !important;
    box-shadow: 0 6px 18px rgba(17, 25, 40, 0.06) !important;
}

.vp-dashboard-status-card {
    height: 100%;
}

.vp-dashboard-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .3rem;
    color: #4a5771;
    font-size: .9rem;
}

.vp-dashboard-status-row strong {
    color: #25344d;
}

.vp-dashboard-card-side {
    min-height: 280px;
}

.vp-dashboard-pill {
    background: #f5f7fc;
    border: 1px solid #e6ebf3;
    border-radius: 10px;
    padding: .7rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.vp-dashboard-pill span {
    color: #7a879c;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.vp-dashboard-pill strong {
    color: #27344a;
    font-size: 1.12rem;
}

.vp-dashboard-run-id {
    font-family: Consolas, 'Courier New', monospace;
    color: #50607a;
    font-weight: 700;
}

.vp-dashboard-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #edf1f7;
    padding: .52rem 0;
    gap: .75rem;
}

.vp-dashboard-summary-item:last-child {
    border-bottom: none;
}

.vp-dashboard-summary-item span {
    color: #6b778d;
    font-size: .85rem;
}

.vp-dashboard-summary-item strong {
    color: #26354d;
}

.vp-dashboard-timeline {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.vp-dashboard-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.vp-dashboard-timeline-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 6px;
    background: #7b5de1;
    box-shadow: 0 0 0 4px rgba(123, 93, 225, 0.13);
}

.vp-dashboard-timeline-title {
    color: #2f3b51;
    font-weight: 700;
    font-size: .9rem;
}

.vp-dashboard-timeline-sub {
    color: #7f8ca2;
    font-size: .8rem;
}

/* Dashboard refresh */
.vp-dashboard-hero-modern {
    border-radius: 16px !important;
    border: 1px solid #ded6fa !important;
    background: linear-gradient(135deg, #6b4fd4 0%, #7d64e2 52%, #8d76ef 100%) !important;
    box-shadow: 0 14px 30px rgba(93, 70, 198, 0.28) !important;
}

.vp-dashboard-hero-modern-row {
    gap: 1rem;
}

.vp-dashboard-hero-modern-title {
    color: #fff !important;
    font-weight: 800 !important;
}

.vp-dashboard-hero-modern-subtitle,
.vp-dashboard-hero-modern-meta {
    color: rgba(255,255,255,0.92) !important;
}

.vp-dashboard-hero-modern-progress {
    width: 82px;
    height: 82px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vp-dashboard-hero-modern-progress .mud-progress-circular {
    color: #ffffff !important;
}

.vp-dashboard-hero-modern-progress span {
    position: absolute;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
}

.vp-dashboard-metric-card {
    border-radius: 14px !important;
    border: 1px solid #e5eaf4 !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(17, 25, 40, 0.07) !important;
    transition: transform .16s ease, box-shadow .16s ease;
}

.vp-dashboard-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(17, 25, 40, 0.11) !important;
}

.vp-dashboard-metric-label {
    color: #72819a !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.vp-dashboard-metric-value {
    margin-top: .12rem;
    color: #24344d !important;
    font-weight: 800 !important;
    line-height: 1.05;
}

.vp-dashboard-metric-period {
    color: #8a97ab !important;
    margin-top: .18rem;
}

.vp-dashboard-metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vp-dashboard-metric-icon .mud-icon-root {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) !important;
    display: block !important;
    margin: 0 !important;
    line-height: 1 !important;
    color: #fff !important;
}

.vp-dashboard-metric-total { background: #9575cd; }
.vp-dashboard-metric-ok { background: #66bb6a; }
.vp-dashboard-metric-observed { background: #ffca28; }
.vp-dashboard-metric-revision { background: #4fc3f7; }
.vp-dashboard-metric-issues { background: #e57373; }

.vp-dashboard-refresh-chip {
    font-size: .75rem !important;
    color: #9e9e9e !important;
    opacity: .8;
}
.vp-dashboard-metric-pendientes { background: #90a4ae; }

/* Dashboard compact */
.vp-dashboard-compact-kpis .mud-card-content {
    padding: 1rem !important;
}

.vp-dashboard-compact-kpis .vp-kpi-card-title {
    font-size: 1.06rem !important;
    font-weight: 800 !important;
}

.vp-dashboard-compact-kpis .vp-kpi-card-value {
    font-size: 1.7rem !important;
    font-weight: 800 !important;
}

.vp-dashboard-compact-card .mud-card-content {
    padding: .85rem .95rem !important;
}

.vp-dashboard-compact-card .vp-dashboard-section-title {
    font-size: 1.02rem !important;
    margin-bottom: .6rem !important;
}

.vp-chart-wrap {
    width: 100%;
    overflow: hidden;
}

.vp-chart-wrap-line,
.vp-chart-wrap-bar {
    height: 250px;
}

.vp-chart-wrap-donut {
    height: 220px;
}

.vp-chart-wrap .mud-chart {
    height: 100% !important;
}

.vp-chart-wrap-donut .mud-chart {
    max-width: 300px;
    margin: 0 auto;
}

.vp-dashboard-compact-kpis .vp-dashboard-metric-value {
    margin-top: .12rem;
}

/* Home/Procesamiento: estado con tonos pastel (scoped) */
.vp-home-estado-chip {
    border: none !important;
}

.vp-home-estado-chip .mud-chip-content {
    font-weight: 700;
}

.vp-home-estado-chip.mud-chip-color-success {
    background-color: #C8E6C9 !important;
    color: #1B5E20 !important;
}

.vp-home-estado-chip.mud-chip-color-info {
    background-color: #BBDEFB !important;
    color: #0D47A1 !important;
}

.vp-home-estado-chip.mud-chip-color-warning {
    background-color: #FFE0B2 !important;
    color: #E65100 !important;
}

.vp-home-estado-chip.mud-chip-color-error {
    background-color: #FFCDD2 !important;
    color: #B71C1C !important;
}

.vp-home-estado-chip.mud-chip-color-secondary {
    background-color: #E1BEE7 !important;
    color: #4A148C !important;
}

.vp-home-estado-chip.mud-chip-color-default {
    background-color: #ECEFF1 !important;
    color: #37474F !important;
}

/* Chips de estado Material pastel (scope por clase) */
.vp-status-chip-material {
    border: none !important;
}

.vp-status-chip-material .mud-chip-content {
    font-weight: 700;
}

.vp-status-chip-material.mud-chip-color-success {
    background-color: #DFF3E6 !important;
    color: #2E7D32 !important;
}

.vp-status-chip-material.mud-chip-color-info {
    background-color: #DFF1FF !important;
    color: #1E88E5 !important;
}

.vp-status-chip-material.mud-chip-color-warning {
    background-color: #FFF1D6 !important;
    color: #C77800 !important;
}

.vp-status-chip-material.mud-chip-color-error {
    background-color: #FFE4E1 !important;
    color: #F4511E !important;
}

.vp-status-chip-material.mud-chip-color-secondary {
    background-color: #EFE5FF !important;
    color: #7E57C2 !important;
}

.vp-status-chip-material.mud-chip-color-default {
    background-color: #EEF2F6 !important;
    color: #455A64 !important;
}

/* ?? Upload modal polish ??????????????????????????????????? */
.vp-home-upload-modal {
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(17, 25, 40, 0.18) !important;
}

.vp-upload-file-card {
    border-radius: 12px !important;
    border-color: #e6ecf5 !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.vp-upload-file-card:hover {
    border-color: #c5cee0 !important;
    box-shadow: 0 2px 8px rgba(17, 25, 40, 0.06);
}

.vp-upload-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vp-upload-avatar.vp-upload-avatar-excel {
    background: linear-gradient(135deg, #6a9f6e, #4a8a50);
    box-shadow: 0 3px 10px rgba(74, 138, 80, 0.25);
}

.vp-upload-avatar.vp-upload-avatar-zip {
    background: linear-gradient(135deg, #7a6fc7, #5f4fb5);
    box-shadow: 0 3px 10px rgba(95, 79, 181, 0.25);
}

.vp-upload-avatar .mud-icon-root {
    color: #fff !important;
}

.vp-upload-file-label {
    font-weight: 600 !important;
    color: #2f3b51 !important;
}

.vp-upload-file-name {
    color: #6b778d !important;
    font-weight: 500;
}

.vp-upload-file-card .form-control {
    border: 1px solid #dce3ef;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.88rem;
    color: #4a5771;
    background: #f8f9fd;
    transition: border-color .2s ease;
}

.vp-upload-file-card .form-control:hover {
    border-color: #b3bdd2;
}

.vp-upload-file-card .form-control:focus {
    border-color: var(--ynex-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 70, 193, 0.10);
}

.vp-upload-file-card .form-control::file-selector-button {
    background: #f0f2f8;
    border: 1px solid #dce3ef;
    border-radius: 6px;
    padding: 5px 14px;
    font-weight: 600;
    font-size: 0.84rem;
    color: #4a5771;
    cursor: pointer;
    transition: all .15s ease;
    margin-right: 10px;
}

.vp-upload-file-card .form-control::file-selector-button:hover {
    background: #e4e8f2;
    border-color: #b3bdd2;
    color: #2f3b51;
}

/* ?? Global UI polish — form controls, buttons, filter bars ??? */

/* Outlined inputs: softer borders, rounded, subtle focus ring */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: 10px !important;
    border-color: #dce3ef !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #b3bdd2 !important;
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.mud-input.mud-input-focused .mud-input-outlined-border {
    border-color: var(--ynex-accent) !important;
    box-shadow: 0 0 0 3px rgba(106, 70, 193, 0.10) !important;
}

.mud-input-label {
    color: #6b778d !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
}

/* Select dropdowns: rounded popover */
.mud-popover.mud-popover-open .mud-list {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(17, 25, 40, 0.12) !important;
}

/* Buttons: consistent rounded + shadow */
.mud-button-root {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: all .18s ease;
}

.mud-button-root.mud-button-outlined.mud-button-outlined-default {
    border-color: #dce3ef !important;
    color: #4a5771 !important;
}

.mud-button-root.mud-button-outlined.mud-button-outlined-default:hover {
    border-color: var(--ynex-accent) !important;
    color: var(--ynex-accent) !important;
    background: rgba(106, 70, 193, 0.04) !important;
}

.mud-button-root.mud-button-filled {
    box-shadow: 0 2px 8px rgba(17, 25, 40, 0.10);
}

.mud-button-root.mud-button-filled:hover {
    box-shadow: 0 4px 14px rgba(17, 25, 40, 0.16);
}

/* Filter bars: consistent appearance */
.vp-filter-bar {
    border-radius: 14px !important;
    border-color: #e6ecf5 !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
    box-shadow: 0 2px 8px rgba(17, 25, 40, 0.03);
}

/* Page headers: consistent spacing */
.vp-page-header .mud-typography-h4 {
    font-weight: 700 !important;
    color: #1f2a3d !important;
    font-size: 1.65rem !important;
}

.vp-page-header .text-secondary {
    color: #7a879c !important;
    font-size: 0.88rem !important;
}

/* Cards: softer shadows and rounded */
.mud-card {
    border-radius: 14px !important;
    border: 1px solid #e6ecf5 !important;
    box-shadow: 0 4px 14px rgba(17, 25, 40, 0.05) !important;
}

.mud-card-header {
    border-bottom: 1px solid #edf1f7;
    padding: 0.85rem 1rem !important;
}

.mud-card-header .mud-typography-h6 {
    font-weight: 700 !important;
    color: #2f3b51 !important;
    font-size: 1rem !important;
}

/* Detail panel text styling */
.vp-detail-label {
    color: #6b778d !important;
    font-size: 0.82rem !important;
}

.vp-detail-label b {
    color: #43536d !important;
    font-weight: 600;
}

/* DatePicker: rounded */
.mud-picker .mud-picker-input-text .mud-input-outlined-border {
    border-radius: 10px !important;
}

/* MudSimpleTable inside cards: cleaner */
.vp-grid-table-nested {
    border: none !important;
    box-shadow: none !important;
}

.vp-grid-table-nested thead th {
    background: #f8f9fd !important;
    font-weight: 600 !important;
    color: #6b778d !important;
    font-size: 0.82rem !important;
    padding: 0.65rem 0.75rem !important;
    border-bottom: 1px solid #e8ecf3 !important;
}

.vp-grid-table-nested tbody td {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.88rem !important;
    color: #2f3a4d !important;
    border-bottom: 1px solid #edf1f7 !important;
}

.vp-grid-table-nested tbody tr:last-child td {
    border-bottom: none !important;
}

/* Responsive filter actions */
@media (max-width: 959px) {
    .vp-page-header-actions,
    .vp-resultados-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .vp-page-header-actions .mud-button-root,
    .vp-resultados-actions .mud-button-root {
        flex: 1 1 auto;
        min-width: 120px;
    }
}

/* ?? Resultados KPI cards and icons ???????????????????????????? */

/* Fuerza que MudTooltip (span wrapper) ocupe todo el ancho del MudItem
   para homologar el tamaño de las tarjetas KPI. */
.vp-resultados-kpi-cards .mud-tooltip-root,
.vp-resultados-kpi-cards > .mud-grid-item > .mud-tooltip-root {
    display: block !important;
    width: 100% !important;
}

.vp-resultados-kpi {
    border-radius: 16px !important;
    border: 1px solid #e6ecf5 !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
    box-shadow: 0 6px 16px rgba(17, 25, 40, 0.06);
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor: default;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100% !important;
    box-sizing: border-box;
}

.vp-resultados-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--vp-kpi-accent, #94a3b8);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.vp-resultados-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(17, 25, 40, 0.12);
    border-color: #d5deee !important;
}

.vp-resultados-kpi-ok          { --vp-kpi-accent: #66bb6a; }
.vp-resultados-kpi-observado   { --vp-kpi-accent: #ffca28; }
.vp-resultados-kpi-error       { --vp-kpi-accent: #e57373; }
.vp-resultados-kpi-revpendiente{ --vp-kpi-accent: #7c8ea8; }
.vp-resultados-kpi-llaves      { --vp-kpi-accent: #f9a825; }
.vp-resultados-kpi-upr         { --vp-kpi-accent: #4fc3f7; }

.vp-resultados-kpi-body {
    min-width: 0;
    flex: 1 1 auto;
}

.vp-resultados-kpi-title {
    color: #6b778d !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.15 !important;
}

.vp-resultados-kpi-value {
    color: #23324a !important;
    font-weight: 800 !important;
    font-size: 1.75rem !important;
    line-height: 1 !important;
    margin-top: 4px !important;
    letter-spacing: -0.02em;
}

.vp-resultados-kpi-sub {
    color: #8695ac !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-resultados-kpi-bar {
    position: relative;
    height: 4px;
    margin-top: 10px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.vp-resultados-kpi-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .35s ease;
    background: var(--vp-kpi-accent, #94a3b8);
}

.vp-resultados-kpi-bar-ok          { background: linear-gradient(90deg, #66bb6a, #43a047); }
.vp-resultados-kpi-bar-observado   { background: linear-gradient(90deg, #ffd54f, #f9a825); }
.vp-resultados-kpi-bar-error       { background: linear-gradient(90deg, #ef5350, #c62828); }
.vp-resultados-kpi-bar-revpendiente{ background: linear-gradient(90deg, #94a3b8, #475569); }
.vp-resultados-kpi-bar-llaves      { background: linear-gradient(90deg, #ffb74d, #ef6c00); }
.vp-resultados-kpi-bar-upr         { background: linear-gradient(90deg, #4fc3f7, #0288d1); }

.vp-resultados-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}

.vp-resultados-kpi-icon .mud-icon-root {
    color: #fff !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.vp-resultados-kpi-icon-ok          { background: linear-gradient(135deg, #81c784, #43a047); }
.vp-resultados-kpi-icon-observado   { background: linear-gradient(135deg, #ffd54f, #f9a825); }
.vp-resultados-kpi-icon-error       { background: linear-gradient(135deg, #ef5350, #c62828); }
.vp-resultados-kpi-icon-revpendiente{ background: linear-gradient(135deg, #94a3b8, #475569); }
.vp-resultados-kpi-icon-llaves      { background: linear-gradient(135deg, #ffb74d, #ef6c00); }
.vp-resultados-kpi-icon-upr         { background: linear-gradient(135deg, #4fc3f7, #0288d1); }

/* Run unified card */
.vp-run-card {
    border-radius: 14px !important;
    border: 1px solid #e2e9f4 !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(17, 25, 40, 0.05);
}

.vp-run-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    background: linear-gradient(90deg, #f8f9fd 0%, #f3f5fa 100%);
    border-bottom: 1px solid #edf1f7;
}

.vp-run-card-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.vp-run-card-lote {
    font-weight: 700;
    color: #2f3a4d;
    font-size: 0.92rem;
}

.vp-run-card-sep {
    color: #c5cdd8;
}

.vp-run-card-file {
    color: #5a6a85;
    font-weight: 500;
    font-size: 0.84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 360px;
}

.vp-run-card-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
}

.vp-run-card-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vp-run-card-estado {
    font-weight: 600;
    color: #43536d;
}

.vp-run-card-meta {
    color: #8a94a6;
    font-weight: 400;
}

/* KPI badges row — grid of vertical mini-cards */
.vp-run-card-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr) auto;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    align-items: stretch;
}

.vp-run-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: #f5f7fc;
    border: 1px solid #e6ecf5;
    border-radius: 12px;
    padding: 0.55rem 0.5rem;
    transition: background 0.15s, transform 0.15s;
    text-align: center;
    min-height: 58px;
}

.vp-run-kpi:hover {
    background: #eef0fa;
    transform: translateY(-1px);
}

.vp-run-kpi-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    padding: 0 10px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
}

.vp-run-kpi-label {
    font-size: 0.72rem;
    color: #6b778d;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.vp-run-kpi-ok  .vp-run-kpi-badge, .vp-run-kpi-badge.vp-run-kpi-ok  { background: rgba(76,175,80,0.12); color: #2e7d32; }
.vp-run-kpi-obs .vp-run-kpi-badge, .vp-run-kpi-badge.vp-run-kpi-obs { background: rgba(255,152,0,0.12); color: #e65100; }
.vp-run-kpi-err .vp-run-kpi-badge, .vp-run-kpi-badge.vp-run-kpi-err { background: rgba(244,67,54,0.10); color: #c62828; }
.vp-run-kpi-key .vp-run-kpi-badge, .vp-run-kpi-badge.vp-run-kpi-key { background: rgba(255,193,7,0.14); color: #f57f17; }
.vp-run-kpi-upr .vp-run-kpi-badge, .vp-run-kpi-badge.vp-run-kpi-upr { background: rgba(33,150,243,0.12); color: #1565c0; }

.vp-run-kpi-spacer {
    display: none;
}

.vp-run-kpi-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-left: 0;
    background: #f0f2f8;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    min-height: 58px;
}

.vp-run-kpi-count-value {
    font-weight: 800;
    font-size: 1rem;
    color: #2f3a4d;
}

.vp-run-kpi-count-label {
    font-size: 0.68rem;
    color: #8a94a6;
    font-weight: 700;
    text-transform: uppercase;
}

.vp-run-kpi-count-sep {
    color: #c5cdd8;
    margin: 0 1px;
    font-size: 0.78rem;
}

/* ?? Snackbar YNEX theme — softer, rounded ????????????????? */
.vp-snackbar-provider .mud-snackbar {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(17, 25, 40, 0.14) !important;
    font-weight: 500;
    font-size: 0.9rem;
}

.vp-snackbar-provider .mud-snackbar.mud-alert-filled-success {
    background: rgba(102, 187, 106, 0.92) !important;
    border: 1px solid rgba(76, 175, 80, 0.25) !important;
}

.vp-snackbar-provider .mud-snackbar.mud-alert-filled-error {
    background: rgba(229, 115, 115, 0.92) !important;
    border: 1px solid rgba(244, 67, 54, 0.25) !important;
}

.vp-snackbar-provider .mud-snackbar.mud-alert-filled-warning {
    background: rgba(255, 183, 77, 0.92) !important;
    border: 1px solid rgba(255, 152, 0, 0.25) !important;
}

.vp-snackbar-provider .mud-snackbar.mud-alert-filled-info {
    background: rgba(79, 195, 247, 0.92) !important;
    border: 1px solid rgba(41, 182, 246, 0.25) !important;
}

.vp-snackbar-provider .mud-snackbar .mud-snackbar-content-message {
    color: #fff !important;
}

.vp-snackbar-provider .mud-snackbar .mud-alert-icon {
    opacity: 0.9;
}

.vp-snackbar-provider .mud-snackbar .mud-icon-button {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ?? Mobile-responsive filter actions ????????????????????????? */

/* Dates side-by-side on mobile */
.vp-filter-dates-row {
    display: flex;
    gap: 8px;
}

.vp-filter-dates-row > * {
    flex: 1 1 0;
    min-width: 0;
}

/* Action buttons group: centered on mobile, icon-only for secondary */
.vp-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

/* Hide button text on mobile, show only icon */
.vp-btn-label {
    display: inline;
}

@media (max-width: 959px) {
    /* Center the actions row */
    .vp-filter-actions {
        justify-content: center;
    }

    /* Secondary buttons: icon-only on mobile */
    .vp-filter-actions .vp-btn-secondary .vp-btn-label {
        display: none;
    }

    .vp-filter-actions .vp-btn-secondary {
        min-width: 40px !important;
        padding: 6px 8px !important;
    }

    .vp-filter-actions .vp-btn-secondary .mud-button-icon-start {
        margin-right: 0 !important;
    }

    /* Primary buttons keep text but more compact */
    .vp-filter-actions .vp-btn-primary {
        font-size: 0.82rem;
        padding: 6px 14px !important;
    }

    /* Filter bar: slightly less padding */
    .vp-filter-bar {
        padding: 12px !important;
    }

    /* Dates in a row even on mobile */
    .vp-filter-dates-row {
        display: flex;
        gap: 8px;
    }
}

@media (max-width: 599px) {
    /* Very small screens: all buttons compact */
    .vp-filter-actions .vp-btn-primary .vp-btn-label {
        display: none;
    }

    .vp-filter-actions .vp-btn-primary {
        min-width: 40px !important;
        padding: 6px 8px !important;
    }

    .vp-filter-actions .vp-btn-primary .mud-button-icon-start {
        margin-right: 0 !important;
    }

    /* Dropdown items de Estado: truncar textos largos como REQUIERE_REVISION_HUMANA */
    .mud-select-popover .mud-list-item-text,
    .mud-popover-overflow-y-auto .mud-list-item .mud-typography {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.82rem;
    }
}

/* ?? Dashboard bottom panels (violations + team) ?????????????????? */
.vp-dashboard-table {
    font-size: 0.85rem;
}

.vp-dashboard-table th {
    font-weight: 600 !important;
    color: #8a94a6 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #e8ecf1 !important;
    padding: 8px 12px !important;
}

.vp-dashboard-table td {
    padding: 6px 12px !important;
    vertical-align: middle !important;
}

.vp-violation-code {
    font-family: 'Cascadia Code', 'Fira Code', monospace !important;
    font-size: 0.82rem !important;
    color: #5f4fb5;
    word-break: break-all;
}

.vp-violation-bar {
    border-radius: 4px;
}

/* ?? Confirm Dialog – Ynex slide-in-right ?? */
@keyframes vp-slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(60px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.vp-confirm-slide-in-right.mud-dialog {
    animation: vp-slide-in-right 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(95, 79, 181, 0.18), 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    min-width: 380px;
    max-width: 460px;
}

.vp-confirm-dialog .mud-dialog-title {
    padding: 24px 24px 8px 24px !important;
    background: linear-gradient(135deg, #f8f6ff 0%, #eef0ff 100%);
    border-bottom: none !important;
}

.vp-confirm-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vp-confirm-icon {
    background: rgba(95, 79, 181, 0.10);
    border-radius: 12px;
    padding: 8px;
}

.vp-confirm-dialog .mud-dialog-content {
    padding: 16px 24px 8px 24px !important;
}

.vp-confirm-message {
    color: #6b778d;
    line-height: 1.6;
}

.vp-confirm-dialog .mud-dialog-actions {
    padding: 12px 24px 20px 24px !important;
    gap: 8px;
}

.vp-confirm-btn-cancel {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    padding: 6px 20px !important;
}

.vp-confirm-btn-accept {
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    padding: 6px 24px !important;
    box-shadow: 0 4px 14px rgba(95, 79, 181, 0.25) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.vp-confirm-btn-accept:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(95, 79, 181, 0.35) !important;
}

/* ?? Mobile responsive fixes ????????????????????????????? */
@media (max-width: 959px) {
    /* Breadcrumbs: reflow under header instead of absolute overlap */
    .vp-breadcrumbs {
        justify-content: flex-start;
        margin-bottom: 0.5rem;
    }

    /* Page container: less padding on mobile */
    .vp-page-container {
        padding: 1rem 0.75rem;
    }

    /* Dashboard page header: stack vertically */
    .vp-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .vp-page-header .mud-typography-h4 {
        font-size: 1.3rem !important;
    }

    .vp-page-header .text-secondary {
        font-size: 0.8rem !important;
    }

    /* Refresh chip: align left */
    .vp-dashboard-refresh-chip {
        align-self: flex-start;
    }
}

@media (max-width: 599px) {
    .vp-page-container {
        padding: 0.75rem 0.5rem;
    }

    .vp-page-header .mud-typography-h4 {
        font-size: 1.15rem !important;
    }
}

/* Top Observaciones: card layout on mobile */
.vp-obs-card-list {
    display: none;
}

@media (max-width: 959px) {
    .vp-obs-table-desktop {
        display: none !important;
    }

    .vp-obs-card-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .vp-obs-card {
        background: #f8f9fd;
        border-radius: 10px;
        padding: 0.75rem 1rem;
        border: 1px solid #e8ecf3;
        overflow: hidden;
    }

    .vp-obs-card-rank {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6a46c1, #9b72ef);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 700;
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

    .vp-obs-card-header {
        display: flex;
        align-items: center;
        margin-bottom: 0.4rem;
        overflow: hidden;
    }

    .vp-obs-card-header .vp-violation-code {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .vp-obs-card-stats {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 0.82rem;
        color: #6b778d;
    }

    .vp-obs-card-stats strong {
        color: #2f3a4d;
    }

    .vp-obs-card-bar {
        flex: 1;
        min-width: 60px;
    }
}

/* ?? Procesamientos: KPIs compactos en grilla 2×2 en móvil ??? */
@media (max-width: 959px) {
    .vp-proc-kpis {
        row-gap: 0.35rem !important;
    }

    .vp-proc-kpi-card {
        padding: 0.6rem 0.75rem !important;
    }

    .vp-proc-kpi-card .vp-kpi-card-icon {
        width: 32px;
        height: 32px;
    }

    .vp-proc-kpi-card .vp-kpi-card-icon .mud-icon-root {
        font-size: 1rem !important;
    }

    .vp-proc-kpi-card .vp-kpi-card-title {
        font-size: 0.75rem !important;
    }

    .vp-proc-kpi-card .vp-kpi-card-value {
        font-size: 1.3rem !important;
    }
}

@media (max-width: 599px) {
    .vp-proc-kpi-card .vp-kpi-card-value {
        font-size: 1.15rem !important;
    }

    .vp-proc-kpi-card .vp-kpi-card-title {
        font-size: 0.7rem !important;
    }
}

/* ?? MudTable mobile rows: card-style separation ???????????? */
@media (max-width: 959px) {
    .vp-grid-table .mud-table-container > table > tbody > tr {
        display: block;
        background: #fff;
        border: 1px solid #e6ecf5;
        border-radius: 12px;
        margin-bottom: 0.6rem;
        padding: 0.5rem 0.75rem;
        box-shadow: 0 2px 8px rgba(17, 25, 40, 0.04);
    }

    .vp-grid-table .mud-table-container > table > tbody > tr:hover {
        box-shadow: 0 4px 14px rgba(17, 25, 40, 0.10) !important;
    }

    .vp-grid-table .mud-table-container > table > tbody > tr > td {
        border-bottom: none !important;
        padding: 0.25rem 0 !important;
    }

    .vp-grid-table .mud-table-container > table > tbody > tr > td::before {
        font-weight: 700 !important;
        color: #6b778d !important;
        font-size: 0.78rem !important;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .vp-grid-table .mud-table-container > table > tbody {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem;
    }
}

/* ?? Resultados: run-card mobile layout ?????????????????????? */
@media (max-width: 959px) {
    /* Header: stack vertically */
    .vp-run-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.65rem 0.85rem;
    }

    .vp-run-card-header-left {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }

    .vp-run-card-file {
        max-width: 100%;
        white-space: normal;
        word-break: break-all;
    }

    .vp-run-card-header-right {
        flex-wrap: wrap;
        gap: 4px;
        font-size: 0.75rem;
    }

    /* KPI badges: 3-column grid on mobile */
    .vp-run-card-kpis {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.35rem;
        padding: 0.65rem 0.85rem;
    }

    .vp-run-kpi {
        min-height: 50px;
        padding: 0.4rem 0.35rem;
        border-radius: 10px;
    }

    .vp-run-kpi-badge {
        min-width: 26px;
        height: 26px;
        font-size: 0.92rem;
    }

    .vp-run-kpi-label {
        font-size: 0.64rem;
    }

    .vp-run-kpi-count {
        grid-column: 1 / -1;
        flex-direction: row;
        min-height: auto;
        padding: 0.35rem 0.5rem;
        gap: 3px;
    }

    /* Resultados empty-state KPIs: compact icon + text */
    .vp-resultados-kpi-icon {
        width: 32px;
        height: 32px;
    }

    .vp-resultados-kpi-icon .mud-icon-root {
        font-size: 1rem !important;
    }

    .vp-resultados-kpi-title {
        font-size: 0.72rem !important;
    }

    .vp-resultados-kpi-value {
        font-size: 1.2rem !important;
    }

    .vp-resultados-kpi {
        padding: 0.6rem 0.75rem !important;
    }
}

/* ?? Child/expanded rows + nested tables: fit mobile ???????? */
@media (max-width: 959px) {
    /* Child row container: remove overflow, full width */
    .vp-grid-table .mud-table-container > table > tbody > tr > td[colspan] {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: hidden;
    }

    /* Paper inside child row: less padding/margin */
    .vp-grid-table td[colspan] > .mud-paper {
        margin: 0.35rem 0 !important;
        padding: 0.6rem !important;
        overflow: hidden;
    }

    /* Nested table: remove min-widths, full width */
    .vp-grid-table-nested .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .vp-grid-table-nested .mud-table-container > table {
        min-width: 0 !important;
    }

    .vp-grid-table-nested th,
    .vp-grid-table-nested td {
        min-width: 0 !important;
        white-space: normal !important;
        word-break: break-word;
    }

    /* Nested table in card mode: compact card rows */
    .vp-grid-table-nested .mud-table-container > table > tbody > tr {
        display: block;
        background: #fbfcff;
        border: 1px solid #edf1f7;
        border-radius: 10px;
        margin-bottom: 0.4rem;
        padding: 0.4rem 0.6rem;
    }

    .vp-grid-table-nested .mud-table-container > table > tbody > tr > td {
        display: block;
        border-bottom: none !important;
        padding: 0.2rem 0 !important;
        font-size: 0.82rem !important;
    }

    .vp-grid-table-nested .mud-table-container > table > tbody > tr > td::before {
        font-weight: 700 !important;
        color: #8a94a6 !important;
        font-size: 0.72rem !important;
        text-transform: uppercase;
    }

    .vp-grid-table-nested .mud-table-container > table > thead {
        display: none;
    }

    .vp-grid-table-nested .mud-table-container > table > tbody {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0.25rem 0;
    }
}

/* ?? Campos modal — Ynex styled ????????????????????????????? */
.vp-campos-modal {
    border-radius: 16px !important;
    border: 1px solid #e2e9f4 !important;
    box-shadow: 0 16px 48px rgba(17, 25, 40, 0.18) !important;
    overflow: hidden;
}

.vp-campos-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    background: linear-gradient(135deg, #f8f6ff 0%, #eef0ff 100%);
    border-bottom: 1px solid #e8ecf3;
    flex-shrink: 0;
}

.vp-campos-modal-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.vp-campos-modal-title {
    font-weight: 700 !important;
    color: #2f3a4d !important;
    font-size: 1.05rem !important;
}

.vp-campos-modal-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vp-campos-modal-chip {
    font-size: 0.75rem !important;
    height: 22px !important;
}

.vp-campos-modal-run {
    font-size: 0.72rem;
    color: #8a94a6;
    font-weight: 500;
}

.vp-campos-modal-action {
    background: rgba(76, 175, 80, 0.08) !important;
    border-radius: 8px !important;
}

.vp-campos-modal-close {
    background: rgba(0, 0, 0, 0.04) !important;
    border-radius: 8px !important;
}

.vp-campos-modal-alerts {
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-shrink: 0;
}

.vp-campos-modal-alerts:empty {
    display: none;
}

.vp-campos-modal-alerts > * {
    margin-top: 0.5rem;
}

.vp-campos-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem 1rem 1rem;
    min-height: 0;
}

.vp-campos-search {
    padding: 0.65rem 0;
}

.vp-campos-tabs .mud-tab {
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

/* Mobile card list: hidden on desktop, shown on mobile */
.vp-campos-card-list {
    display: none;
}

.vp-campos-table-desktop {
    display: block;
}

/* Campo card styles (for mobile) */
.vp-campo-card {
    background: #fff;
    border: 1px solid #e6ecf5;
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    transition: box-shadow 0.15s ease;
}

.vp-campo-card:hover {
    box-shadow: 0 2px 10px rgba(17, 25, 40, 0.08);
}

.vp-campo-card-missing {
    border-left: 3px solid #e57373;
    background: #fef8f8;
}

.vp-campo-card-edited {
    border-left: 3px solid #42a5f5;
    background: #f6faff;
}

/* Flash breve tras guardado exitoso. CSS puro, se reproduce una vez, muy rápido (0.18s). */
@keyframes vp-field-flash-kf {
    0%   { background-color: #fff59d; box-shadow: 0 0 0 2px rgba(255, 235, 59, 0.6); }
    50%  { background-color: #c8e6c9; box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.45); }
    100% { background-color: transparent; box-shadow: none; }
}

.vp-field-flash {
    animation: vp-field-flash-kf 0.18s ease-out 1;
}


.vp-campo-card-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: #5f4fb5;
    margin-bottom: 0.35rem;
    word-break: break-all;
}

.vp-campo-card-icon {
    color: #9b72ef !important;
    font-size: 0.9rem !important;
    flex-shrink: 0;
}

.vp-campo-card-value {
    margin-bottom: 0.35rem;
}

.vp-campo-card-display {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.vp-campo-card-val {
    font-size: 0.92rem;
    font-weight: 600;
    color: #2f3a4d;
    word-break: break-word;
}

.vp-campo-card-edit {
    display: flex;
    flex-direction: column;
}

.vp-campo-edit-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d0d7e2;
    border-radius: 8px;
    font-size: 0.88rem;
    background: #fff;
}

.vp-campo-card-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vp-campo-card-conf {
    font-size: 0.72rem;
    color: #8a94a6;
    font-weight: 600;
}

.vp-campo-card-page {
    font-size: 0.72rem;
    color: #8a94a6;
    font-weight: 500;
}

@media (max-width: 959px) {
    .vp-campos-modal {
        margin: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    .vp-campos-modal-header {
        padding: 0.65rem 0.75rem;
    }

    .vp-campos-modal-title {
        font-size: 0.95rem !important;
    }

    .vp-campos-modal-body {
        padding: 0 0.65rem 0.65rem 0.65rem;
    }

    .vp-campos-table-desktop {
        display: none !important;
    }

    .vp-campos-card-list {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .vp-campos-search {
        padding: 0.5rem 0;
    }
}

/* ?? Historial detail modal — Ynex styled ??????????????????? */
.vp-historial-modal {
    border-radius: 16px !important;
    border: 1px solid #e2e9f4 !important;
    box-shadow: 0 16px 48px rgba(17, 25, 40, 0.18) !important;
}

.vp-historial-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    background: linear-gradient(135deg, #f8f6ff 0%, #eef0ff 100%);
    border-bottom: 1px solid #e8ecf3;
    flex-shrink: 0;
}

.vp-historial-modal-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.vp-historial-modal-title {
    font-weight: 700 !important;
    color: #2f3a4d !important;
    font-size: 1.05rem !important;
}

.vp-historial-modal-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vp-historial-modal-lote {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5a6a85;
}

.vp-historial-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.1rem 1.1rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.vp-historial-section {
    background: #fbfcff;
    border: 1px solid #edf1f7;
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
}

.vp-historial-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #5f4fb5;
    margin-bottom: 0.65rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #edf1f7;
}

.vp-historial-section-title .mud-icon-root {
    color: #9b72ef !important;
    font-size: 1.1rem !important;
}

/* Detail grid: 2 columns */
.vp-historial-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
}

.vp-historial-detail-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vp-historial-detail-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8a94a6;
    letter-spacing: 0.02em;
}

.vp-historial-detail-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: #2f3a4d;
}

.vp-historial-detail-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stats grid: colored mini-cards */
.vp-historial-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.4rem;
}

.vp-historial-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #fff;
    border: 1px solid #e8ecf3;
    border-radius: 8px;
    padding: 0.45rem 0.35rem;
    text-align: center;
}

.vp-historial-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #2f3a4d;
    line-height: 1.1;
}

.vp-historial-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #8a94a6;
    letter-spacing: 0.02em;
}

.vp-historial-stat-ok { border-left: 3px solid #66bb6a; }
.vp-historial-stat-ok .vp-historial-stat-value { color: #2e7d32; }

.vp-historial-stat-warn { border-left: 3px solid #ffca28; }
.vp-historial-stat-warn .vp-historial-stat-value { color: #f57f17; }

.vp-historial-stat-info { border-left: 3px solid #42a5f5; }
.vp-historial-stat-info .vp-historial-stat-value { color: #1565c0; }

.vp-historial-stat-err { border-left: 3px solid #e57373; }
.vp-historial-stat-err .vp-historial-stat-value { color: #c62828; }

@media (max-width: 959px) {
    .vp-historial-modal {
        margin: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    .vp-historial-modal-header {
        padding: 0.65rem 0.75rem;
    }

    .vp-historial-modal-body {
        padding: 0.5rem 0.65rem 0.65rem;
    }

    .vp-historial-detail-grid {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .vp-historial-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .vp-historial-section {
        padding: 0.6rem 0.65rem;
    }
}

/* ???????????????????????????????????????????????????????????????
   THEME SWITCHER POPOVER
   ??????????????????????????????????????????????????????????????? */
.vp-theme-menu {
    padding: 0.5rem 0;
    min-width: 180px;
}

.vp-theme-menu-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a94a6;
    padding: 0.25rem 1rem 0.5rem;
}

.vp-theme-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    color: #333c4e;
    transition: background 0.15s;
}

.vp-theme-option:hover {
    background: #f3f0ff;
}

.vp-theme-option.active {
    background: #f3f0ff;
    font-weight: 600;
    color: #6a46c1;
}

.vp-theme-check {
    margin-left: auto;
    color: #6a46c1 !important;
}

.vp-theme-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    flex-shrink: 0;
}

.vp-swatch-default {
    background: linear-gradient(135deg, #f3f5f9 50%, #6a46c1 50%);
}

.vp-swatch-dark {
    background: linear-gradient(135deg, #0f1729 50%, #7c5ce7 50%);
    border-color: #444;
}

.vp-swatch-indigo {
    background: linear-gradient(135deg, #eef1f8 50%, #3f51b5 50%);
}

/* ???????????????????????????????????????????????????????????????
   DARK THEME OVERRIDES (data-theme="dark")
   ??????????????????????????????????????????????????????????????? */
body[data-theme="dark"] {
    --ynex-sidebar-bg: #0b1120;
    --ynex-sidebar-text: #8896b0;
    --ynex-sidebar-text-active: #e0e6f0;
    --ynex-sidebar-active-bg: rgba(124, 92, 231, 0.18);
    --ynex-sidebar-active-indicator: #7c5ce7;
    --ynex-sidebar-section-label: #556078;
    --ynex-appbar-bg: #131b30;
    --ynex-appbar-text: #c8d1e0;
    --ynex-appbar-shadow: 0 2px 8px rgba(0,0,0,0.3);
    --ynex-body-bg: #0f1729;
    --ynex-accent: #7c5ce7;
    --vp-grid-label-color: #c8d1e0;
}

body[data-theme="dark"] .mud-appbar {
    border-bottom-color: rgba(255,255,255,0.06);
}

body[data-theme="dark"] .mud-table,
body[data-theme="dark"] .mud-table.vp-grid-table {
    border-color: rgba(255,255,255,0.08) !important;
    background: #1a2340 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
}

body[data-theme="dark"] .mud-table thead .mud-table-cell,
body[data-theme="dark"] .mud-table thead th {
    background: #151d35 !important;
    color: #c8d1e0 !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

body[data-theme="dark"] .mud-table tbody .mud-table-cell,
body[data-theme="dark"] .mud-table tbody td {
    border-bottom-color: rgba(255,255,255,0.06) !important;
    color: #b8c4d8 !important;
}

body[data-theme="dark"] .mud-table tbody tr:hover {
    background: rgba(124, 92, 231, 0.08) !important;
}

body[data-theme="dark"] .mud-table .mud-table-pagination {
    border-top-color: rgba(255,255,255,0.08) !important;
    background: #151d35 !important;
    color: #8896b0 !important;
}

body[data-theme="dark"] .mud-paper {
    background: #1a2340 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .mud-card {
    background: #1a2340 !important;
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .mud-input,
body[data-theme="dark"] .mud-input-control .mud-input-label,
body[data-theme="dark"] .mud-select {
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .mud-list-item:hover {
    background: rgba(124, 92, 231, 0.1);
}

body[data-theme="dark"] .mud-list-item .mud-list-item-text .mud-typography {
    color: #c8d1e0;
}

body[data-theme="dark"] .vp-appbar-avatar:hover {
    background: rgba(255,255,255,0.06);
}

body[data-theme="dark"] .vp-appbar-user-role {
    color: #6a7a94;
}

body[data-theme="dark"] .vp-theme-menu-title {
    color: #6a7a94;
}

body[data-theme="dark"] .vp-theme-option {
    color: #c8d1e0;
}

body[data-theme="dark"] .vp-theme-option:hover,
body[data-theme="dark"] .vp-theme-option.active {
    background: rgba(124, 92, 231, 0.12);
    color: #a78bfa;
}

body[data-theme="dark"] .vp-theme-check {
    color: #a78bfa !important;
}

body[data-theme="dark"] .vp-breadcrumbs a,
body[data-theme="dark"] .vp-breadcrumbs span {
    color: #8896b0;
}

body[data-theme="dark"] .mud-dialog {
    background: #1a2340 !important;
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .vp-kpi-card-title {
    color: #8896b0 !important;
}

body[data-theme="dark"] .vp-kpi-card-value {
    color: #e0e6f0 !important;
}

body[data-theme="dark"] .vp-kpi-card {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

body[data-theme="dark"] .vp-kpi-card:hover {
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

body[data-theme="dark"] .vp-kpi-card-sub {
    color: #7e8ba5 !important;
}

body[data-theme="dark"] .vp-kpi-card-bar {
    background: rgba(255,255,255,0.08);
}

body[data-theme="dark"] .vp-dashboard-metric-period {
    color: #6a7a94 !important;
}

body[data-theme="dark"] .vp-dashboard-metric-card {
    border-color: rgba(255,255,255,0.06) !important;
}

/* ???????????????????????????????????????????????????????????????
   INDIGO THEME OVERRIDES (data-theme="indigo")
   ??????????????????????????????????????????????????????????????? */
body[data-theme="indigo"] {
    --ynex-sidebar-bg: #1a237e;
    --ynex-sidebar-text: #b0bec5;
    --ynex-sidebar-text-active: #ffffff;
    --ynex-sidebar-active-bg: rgba(92, 107, 192, 0.2);
    --ynex-sidebar-active-indicator: #5c6bc0;
    --ynex-sidebar-section-label: #7986cb;
    --ynex-appbar-bg: #ffffff;
    --ynex-appbar-text: #1a237e;
    --ynex-appbar-shadow: 0 2px 8px rgba(26, 35, 126, 0.08);
    --ynex-body-bg: #eef1f8;
    --ynex-accent: #3f51b5;
    --vp-grid-label-color: #263238;
}

body[data-theme="indigo"] .mud-appbar {
    border-bottom-color: #c5cae9;
}

body[data-theme="indigo"] .mud-table thead .mud-table-cell,
body[data-theme="indigo"] .mud-table thead th {
    background: #e8eaf6 !important;
    color: #1a237e !important;
    border-bottom-color: #c5cae9 !important;
}

body[data-theme="indigo"] .mud-table,
body[data-theme="indigo"] .mud-table.vp-grid-table {
    border-color: #c5cae9 !important;
}

body[data-theme="indigo"] .mud-table tbody .mud-table-cell,
body[data-theme="indigo"] .mud-table tbody td {
    border-bottom-color: #e8eaf6 !important;
    color: #263238 !important;
}

body[data-theme="indigo"] .mud-table tbody tr:hover {
    background: #e8eaf6 !important;
}

body[data-theme="indigo"] .mud-table .mud-table-pagination {
    border-top-color: #c5cae9 !important;
    background: #f5f6fc !important;
}

body[data-theme="indigo"] .vp-theme-option.active {
    background: #e8eaf6;
    color: #3f51b5;
}

body[data-theme="indigo"] .vp-theme-check {
    color: #3f51b5 !important;
}

/* ???????????????????????????????????????????????????????????????
   DARK THEME — EXTENDED OVERRIDES
   ??????????????????????????????????????????????????????????????? */

/* ?? Generic overlays / modals / paper ?? */
body[data-theme="dark"] .mud-overlay .mud-paper {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    color: #c8d1e0 !important;
}

/* ?? Filter bar ?? */
body[data-theme="dark"] .vp-filter-bar {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ?? Page header text ?? */
body[data-theme="dark"] .vp-page-header .mud-typography-h4 {
    color: #e0e6f0 !important;
}

body[data-theme="dark"] .vp-page-header .text-secondary {
    color: #6a7a94 !important;
}

/* ?? Inputs / labels in dark ?? */
body[data-theme="dark"] .mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(255,255,255,0.12) !important;
}

body[data-theme="dark"] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(255,255,255,0.2) !important;
}

body[data-theme="dark"] .mud-input-label {
    color: #6a7a94 !important;
}

body[data-theme="dark"] .mud-input-slot,
body[data-theme="dark"] .mud-input input,
body[data-theme="dark"] .mud-input textarea {
    color: #c8d1e0 !important;
}

/* ?? Outlined buttons ?? */
body[data-theme="dark"] .mud-button-root.mud-button-outlined.mud-button-outlined-default {
    border-color: rgba(255,255,255,0.12) !important;
    color: #b8c4d8 !important;
}

body[data-theme="dark"] .mud-button-root.mud-button-outlined.mud-button-outlined-default:hover {
    border-color: #7c5ce7 !important;
    color: #a78bfa !important;
    background: rgba(124,92,231,0.08) !important;
}

/* ?? Popover / select dropdowns ?? */
body[data-theme="dark"] .mud-popover {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

body[data-theme="dark"] .mud-popover-open .mud-list {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

/* ?? Run card (Resultados) ?? */
body[data-theme="dark"] .vp-run-card {
    background: #1a2340 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

body[data-theme="dark"] .vp-run-card-header {
    background: linear-gradient(90deg, #151d35 0%, #1a2340 100%) !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

body[data-theme="dark"] .vp-run-card-lote {
    color: #e0e6f0 !important;
}

body[data-theme="dark"] .vp-run-card-sep {
    color: #556078 !important;
}

body[data-theme="dark"] .vp-run-card-file {
    color: #8896b0 !important;
}

body[data-theme="dark"] .vp-run-card-estado {
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .vp-run-card-meta {
    color: #6a7a94 !important;
}

body[data-theme="dark"] .vp-run-card-kpis {
    background: #1a2340 !important;
}

body[data-theme="dark"] .vp-run-kpi {
    background: #151d35 !important;
    border-color: rgba(255,255,255,0.06) !important;
}

body[data-theme="dark"] .vp-run-kpi:hover {
    background: rgba(124,92,231,0.08) !important;
}

body[data-theme="dark"] .vp-run-kpi-label {
    color: #6a7a94 !important;
}

body[data-theme="dark"] .vp-run-kpi-count {
    background: #151d35 !important;
    border-color: rgba(255,255,255,0.06) !important;
}

body[data-theme="dark"] .vp-run-kpi-count-value {
    color: #e0e6f0 !important;
}

body[data-theme="dark"] .vp-run-kpi-count-label {
    color: #6a7a94 !important;
}

/* ?? Resultados KPI cards ?? */
body[data-theme="dark"] .vp-resultados-kpi {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

body[data-theme="dark"] .vp-resultados-kpi:hover {
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

body[data-theme="dark"] .vp-resultados-kpi-title {
    color: #8896b0 !important;
}

body[data-theme="dark"] .vp-resultados-kpi-value {
    color: #e0e6f0 !important;
}

body[data-theme="dark"] .vp-resultados-kpi-sub {
    color: #7e8ba5 !important;
}

body[data-theme="dark"] .vp-resultados-kpi-bar {
    background: rgba(255,255,255,0.08);
}

/* ?? Nested tables ?? */
body[data-theme="dark"] .vp-grid-table-nested {
    background: transparent !important;
}

body[data-theme="dark"] .vp-grid-table-nested thead th {
    background: #151d35 !important;
    background-color: #151d35 !important;
    color: #8896b0 !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

body[data-theme="dark"] .vp-grid-table-nested tbody td {
    color: #b8c4d8 !important;
    border-bottom-color: rgba(255,255,255,0.04) !important;
}

/* ?? Chips outlined ?? */
body[data-theme="dark"] .mud-chip.mud-chip-outlined {
    border-color: rgba(255,255,255,0.15) !important;
}

/* ?? Alerts outlined ?? */
body[data-theme="dark"] .mud-alert-outlined {
    border-color: rgba(255,255,255,0.12) !important;
}

body[data-theme="dark"] .mud-alert-outlined .mud-alert-message {
    color: #c8d1e0 !important;
}

/* ?? Confirm dialog ?? */
body[data-theme="dark"] .vp-confirm-dialog .mud-dialog-title {
    background: linear-gradient(135deg, #1e2a48 0%, #1a2340 100%) !important;
}

body[data-theme="dark"] .vp-confirm-message {
    color: #8896b0 !important;
}

/* ???????????????????????????????????????????????????????????????
   DARK THEME — Status chips (Ynex-style translucent)
   ??????????????????????????????????????????????????????????????? */
body[data-theme="dark"] .vp-status-chip-material.mud-chip-color-success {
    background-color: rgba(102,187,106,0.15) !important;
    color: #81c784 !important;
}

body[data-theme="dark"] .vp-status-chip-material.mud-chip-color-warning {
    background-color: rgba(255,183,77,0.15) !important;
    color: #ffb74d !important;
}

body[data-theme="dark"] .vp-status-chip-material.mud-chip-color-error {
    background-color: rgba(229,115,115,0.15) !important;
    color: #ef9a9a !important;
}

body[data-theme="dark"] .vp-status-chip-material.mud-chip-color-info {
    background-color: rgba(79,195,247,0.15) !important;
    color: #4fc3f7 !important;
}

body[data-theme="dark"] .vp-status-chip-material.mud-chip-color-secondary {
    background-color: rgba(167,139,250,0.15) !important;
    color: #a78bfa !important;
}

body[data-theme="dark"] .vp-status-chip-material.mud-chip-color-default {
    background-color: rgba(144,164,174,0.15) !important;
    color: #90a4ae !important;
}

/* Home estado chips */
body[data-theme="dark"] .vp-home-estado-chip.mud-chip-color-success {
    background-color: rgba(102,187,106,0.15) !important;
    color: #81c784 !important;
}

body[data-theme="dark"] .vp-home-estado-chip.mud-chip-color-info {
    background-color: rgba(79,195,247,0.15) !important;
    color: #4fc3f7 !important;
}

body[data-theme="dark"] .vp-home-estado-chip.mud-chip-color-warning {
    background-color: rgba(255,183,77,0.15) !important;
    color: #ffb74d !important;
}

body[data-theme="dark"] .vp-home-estado-chip.mud-chip-color-error {
    background-color: rgba(229,115,115,0.15) !important;
    color: #ef9a9a !important;
}

body[data-theme="dark"] .vp-home-estado-chip.mud-chip-color-secondary {
    background-color: rgba(167,139,250,0.15) !important;
    color: #a78bfa !important;
}

body[data-theme="dark"] .vp-home-estado-chip.mud-chip-color-default {
    background-color: rgba(144,164,174,0.15) !important;
    color: #90a4ae !important;
}

/* Run card KPI badges — brighter text for dark */
body[data-theme="dark"] .vp-run-kpi-ok .vp-run-kpi-badge,
body[data-theme="dark"] .vp-run-kpi-badge.vp-run-kpi-ok {
    background: rgba(102,187,106,0.18) !important;
    color: #81c784 !important;
}

body[data-theme="dark"] .vp-run-kpi-obs .vp-run-kpi-badge,
body[data-theme="dark"] .vp-run-kpi-badge.vp-run-kpi-obs {
    background: rgba(255,183,77,0.18) !important;
    color: #ffb74d !important;
}

body[data-theme="dark"] .vp-run-kpi-err .vp-run-kpi-badge,
body[data-theme="dark"] .vp-run-kpi-badge.vp-run-kpi-err {
    background: rgba(229,115,115,0.16) !important;
    color: #ef9a9a !important;
}

body[data-theme="dark"] .vp-run-kpi-key .vp-run-kpi-badge,
body[data-theme="dark"] .vp-run-kpi-badge.vp-run-kpi-key {
    background: rgba(255,202,40,0.18) !important;
    color: #ffd54f !important;
}

body[data-theme="dark"] .vp-run-kpi-upr .vp-run-kpi-badge,
body[data-theme="dark"] .vp-run-kpi-badge.vp-run-kpi-upr {
    background: rgba(79,195,247,0.18) !important;
    color: #4fc3f7 !important;
}

/* Generic MudBlazor filled chips in dark — softer */
body[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-success {
    background-color: rgba(102,187,106,0.18) !important;
    color: #81c784 !important;
}

body[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-warning {
    background-color: rgba(255,183,77,0.18) !important;
    color: #ffb74d !important;
}

body[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-error {
    background-color: rgba(229,115,115,0.18) !important;
    color: #ef9a9a !important;
}

body[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-info {
    background-color: rgba(79,195,247,0.18) !important;
    color: #4fc3f7 !important;
}

body[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-primary {
    background-color: rgba(124,92,231,0.20) !important;
    color: #a78bfa !important;
}

body[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-secondary {
    background-color: rgba(167,139,250,0.18) !important;
    color: #b39ddb !important;
}

body[data-theme="dark"] .mud-chip.mud-chip-filled.mud-chip-color-default {
    background-color: rgba(144,164,174,0.15) !important;
    color: #90a4ae !important;
}

/* ???????????????????????????????????????????????????????????????
   DARK THEME — Historial modal
   ??????????????????????????????????????????????????????????????? */
body[data-theme="dark"] .vp-historial-modal,
body[data-theme="dark"] .vp-historial-modal.mud-paper {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .vp-historial-modal .vp-historial-modal-header,
body[data-theme="dark"] .vp-historial-modal-header {
    background: linear-gradient(135deg, #1e2a48 0%, #1a2340 100%) !important;
    background-color: #1a2340 !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

body[data-theme="dark"] .vp-historial-modal .vp-historial-modal-title,
body[data-theme="dark"] .vp-historial-modal-title {
    color: #e0e6f0 !important;
}

body[data-theme="dark"] .vp-historial-modal-lote {
    color: #8896b0 !important;
}

body[data-theme="dark"] .vp-historial-modal .vp-historial-modal-body,
body[data-theme="dark"] .vp-historial-modal-body {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
}

body[data-theme="dark"] .vp-historial-section {
    background: #151d35 !important;
    background-color: #151d35 !important;
    border-color: rgba(255,255,255,0.06) !important;
}

body[data-theme="dark"] .vp-historial-section-title {
    color: #a78bfa !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

body[data-theme="dark"] .vp-historial-section-title .mud-icon-root {
    color: #a78bfa !important;
}

body[data-theme="dark"] .vp-historial-detail-label {
    color: #6a7a94 !important;
}

body[data-theme="dark"] .vp-historial-detail-value {
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .vp-historial-stat {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

body[data-theme="dark"] .vp-historial-stat-value {
    color: #e0e6f0 !important;
}

body[data-theme="dark"] .vp-historial-stat-label {
    color: #6a7a94 !important;
}

body[data-theme="dark"] .vp-historial-stat-ok .vp-historial-stat-value { color: #66bb6a !important; }
body[data-theme="dark"] .vp-historial-stat-warn .vp-historial-stat-value { color: #ffca28 !important; }
body[data-theme="dark"] .vp-historial-stat-info .vp-historial-stat-value { color: #4fc3f7 !important; }
body[data-theme="dark"] .vp-historial-stat-err .vp-historial-stat-value { color: #e57373 !important; }

/* Historial modal close button */
body[data-theme="dark"] .vp-historial-modal .vp-campos-modal-close {
    background: rgba(255,255,255,0.06) !important;
    color: #8896b0 !important;
}

/* Historial nested table */
body[data-theme="dark"] .vp-historial-modal .mud-table,
body[data-theme="dark"] .vp-historial-modal .mud-table.vp-grid-table-nested {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}

body[data-theme="dark"] .vp-historial-modal .mud-table-container {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
}

body[data-theme="dark"] .vp-historial-modal .mud-table thead .mud-table-cell,
body[data-theme="dark"] .vp-historial-modal .mud-table thead th {
    background: #151d35 !important;
    background-color: #151d35 !important;
    color: #8896b0 !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

body[data-theme="dark"] .vp-historial-modal .mud-table tbody .mud-table-cell,
body[data-theme="dark"] .vp-historial-modal .mud-table tbody td {
    color: #b8c4d8 !important;
    border-bottom-color: rgba(255,255,255,0.04) !important;
}

body[data-theme="dark"] .vp-historial-modal .mud-table tbody tr:hover {
    background: rgba(124,92,231,0.08) !important;
}

body[data-theme="dark"] .vp-historial-modal .mud-table .mud-table-pagination {
    background: #151d35 !important;
    border-top-color: rgba(255,255,255,0.06) !important;
    color: #8896b0 !important;
}

/* ???????????????????????????????????????????????????????????????
   DARK THEME — Campos modal (force overrides)
   ??????????????????????????????????????????????????????????????? */
body[data-theme="dark"] .vp-campos-modal,
body[data-theme="dark"] .vp-campos-modal.mud-paper {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .vp-campos-modal .vp-campos-modal-header,
body[data-theme="dark"] .vp-campos-modal-header {
    background: linear-gradient(135deg, #1e2a48 0%, #1a2340 100%) !important;
    background-color: #1a2340 !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

body[data-theme="dark"] .vp-campos-modal .vp-campos-modal-title,
body[data-theme="dark"] .vp-campos-modal-title {
    color: #e0e6f0 !important;
}

body[data-theme="dark"] .vp-campos-modal .vp-campos-modal-run,
body[data-theme="dark"] .vp-campos-modal-run {
    color: #6a7a94 !important;
}

body[data-theme="dark"] .vp-campos-modal .vp-campos-modal-body,
body[data-theme="dark"] .vp-campos-modal-body {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
}

body[data-theme="dark"] .vp-campos-modal .vp-campos-modal-close,
body[data-theme="dark"] .vp-campos-modal-close {
    background: rgba(255,255,255,0.06) !important;
    color: #8896b0 !important;
}

body[data-theme="dark"] .vp-campos-modal .vp-campos-modal-action,
body[data-theme="dark"] .vp-campos-modal-action {
    background: rgba(76,175,80,0.12) !important;
}

/* Tabs inside campos modal */
body[data-theme="dark"] .vp-campos-modal .mud-tabs,
body[data-theme="dark"] .vp-campos-modal .mud-tabs-toolbar,
body[data-theme="dark"] .vp-campos-tabs .mud-tabs-toolbar {
    background: #151d35 !important;
    background-color: #151d35 !important;
}

body[data-theme="dark"] .vp-campos-modal .mud-tabs-panels,
body[data-theme="dark"] .vp-campos-tabs .mud-tabs-panels {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
}

body[data-theme="dark"] .vp-campos-modal .mud-tab,
body[data-theme="dark"] .vp-campos-tabs .mud-tab {
    color: #8896b0 !important;
}

body[data-theme="dark"] .vp-campos-modal .mud-tab.mud-tab-active,
body[data-theme="dark"] .vp-campos-tabs .mud-tab.mud-tab-active {
    color: #a78bfa !important;
}

body[data-theme="dark"] .vp-campos-modal .mud-tab-slider,
body[data-theme="dark"] .vp-campos-tabs .mud-tab-slider {
    background: #7c5ce7 !important;
}

/* Search input inside campos modal */
body[data-theme="dark"] .vp-campos-modal .vp-campos-search .mud-input-outlined .mud-input-outlined-border,
body[data-theme="dark"] .vp-campos-search .mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(255,255,255,0.12) !important;
}

body[data-theme="dark"] .vp-campos-modal .vp-campos-search .mud-input-label,
body[data-theme="dark"] .vp-campos-search .mud-input-label {
    color: #6a7a94 !important;
}

body[data-theme="dark"] .vp-campos-modal .vp-campos-search .mud-input-slot,
body[data-theme="dark"] .vp-campos-modal .vp-campos-search input,
body[data-theme="dark"] .vp-campos-search .mud-input-slot,
body[data-theme="dark"] .vp-campos-search input {
    color: #c8d1e0 !important;
}

/* Table inside campos modal */
body[data-theme="dark"] .vp-campos-modal .mud-table,
body[data-theme="dark"] .vp-campos-modal .mud-table.vp-grid-table,
body[data-theme="dark"] .vp-campos-modal .mud-table.vp-grid-table-nested {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}

body[data-theme="dark"] .vp-campos-modal .mud-table-container {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
}

body[data-theme="dark"] .vp-campos-modal .mud-table thead .mud-table-cell,
body[data-theme="dark"] .vp-campos-modal .mud-table thead th {
    background: #151d35 !important;
    background-color: #151d35 !important;
    color: #8896b0 !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

body[data-theme="dark"] .vp-campos-modal .mud-table tbody .mud-table-cell,
body[data-theme="dark"] .vp-campos-modal .mud-table tbody td {
    color: #b8c4d8 !important;
    border-bottom-color: rgba(255,255,255,0.04) !important;
}

body[data-theme="dark"] .vp-campos-modal .mud-table tbody tr:hover {
    background: rgba(124,92,231,0.08) !important;
}

body[data-theme="dark"] .vp-campos-modal .mud-table .mud-table-pagination {
    background: #151d35 !important;
    border-top-color: rgba(255,255,255,0.06) !important;
    color: #8896b0 !important;
}

/* Chips & icons inside campos modal */
body[data-theme="dark"] .vp-campos-modal .mud-chip.mud-chip-outlined {
    border-color: rgba(255,255,255,0.15) !important;
    color: #b8c4d8 !important;
}

body[data-theme="dark"] .vp-campos-modal .mud-icon-button {
    color: #8896b0 !important;
}

/* Alerts inside campos modal */
body[data-theme="dark"] .vp-campos-modal .mud-alert-outlined {
    border-color: rgba(255,255,255,0.12) !important;
}

body[data-theme="dark"] .vp-campos-modal .mud-alert-outlined .mud-alert-message {
    color: #c8d1e0 !important;
}

/* ?? Campo cards (mobile) ?? */
body[data-theme="dark"] .vp-campo-card {
    background: #151d35 !important;
    border-color: rgba(255,255,255,0.06) !important;
}

body[data-theme="dark"] .vp-campo-card-missing {
    background: rgba(229,115,115,0.06) !important;
    border-left-color: #e57373 !important;
}

body[data-theme="dark"] .vp-campo-card-edited {
    background: rgba(66,165,245,0.06) !important;
    border-left-color: #42a5f5 !important;
}

body[data-theme="dark"] .vp-campo-card-val {
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .vp-campo-card-conf,
body[data-theme="dark"] .vp-campo-card-page {
    color: #556078 !important;
}

/* Mobile: KPI mini-cards inside run-card, match dark */
@media (max-width: 959px) {
    body[data-theme="dark"] .vp-run-kpi {
        background: #151d35 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }

    body[data-theme="dark"] .vp-run-kpi-count {
        background: #151d35 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }

    body[data-theme="dark"] .vp-grid-table .mud-table-container > table > tbody > tr {
        background: #1a2340 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }

    body[data-theme="dark"] .vp-grid-table .mud-table-container > table > tbody > tr:hover {
        box-shadow: 0 4px 14px rgba(0,0,0,0.3) !important;
    }

    body[data-theme="dark"] .vp-grid-table .mud-table-container > table > tbody > tr > td::before {
        color: #6a7a94 !important;
    }
}

/* ???????????????????????????????????????????????????????????????
   YNEX-STYLE TABLE ACTION ICON BUTTONS
   — Translucent rounded square backgrounds with soft colors
   ??????????????????????????????????????????????????????????????? */

/* Base: all icon buttons inside tables get a subtle rounded-square bg */
.mud-table .mud-icon-button {
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    transition: background 0.15s ease, transform 0.15s ease;
}

.mud-table .mud-icon-button:hover {
    transform: translateY(-1px);
}

.mud-table .mud-icon-button .mud-icon-root {
    font-size: 1.05rem !important;
}

/* Color-specific translucent backgrounds — light theme */
.mud-table .mud-icon-button.mud-icon-button-color-secondary {
    background: rgba(156, 39, 176, 0.08) !important;
    color: #9c27b0 !important;
}
.mud-table .mud-icon-button.mud-icon-button-color-secondary:hover {
    background: rgba(156, 39, 176, 0.16) !important;
}

.mud-table .mud-icon-button.mud-icon-button-color-error {
    background: rgba(244, 67, 54, 0.08) !important;
    color: #e53935 !important;
}
.mud-table .mud-icon-button.mud-icon-button-color-error:hover {
    background: rgba(244, 67, 54, 0.16) !important;
}

.mud-table .mud-icon-button.mud-icon-button-color-info {
    background: rgba(33, 150, 243, 0.08) !important;
    color: #1e88e5 !important;
}
.mud-table .mud-icon-button.mud-icon-button-color-info:hover {
    background: rgba(33, 150, 243, 0.16) !important;
}

.mud-table .mud-icon-button.mud-icon-button-color-warning {
    background: rgba(255, 152, 0, 0.08) !important;
    color: #f57c00 !important;
}
.mud-table .mud-icon-button.mud-icon-button-color-warning:hover {
    background: rgba(255, 152, 0, 0.16) !important;
}

.mud-table .mud-icon-button.mud-icon-button-color-success {
    background: rgba(76, 175, 80, 0.08) !important;
    color: #43a047 !important;
}
.mud-table .mud-icon-button.mud-icon-button-color-success:hover {
    background: rgba(76, 175, 80, 0.16) !important;
}

.mud-table .mud-icon-button.mud-icon-button-color-primary {
    background: rgba(106, 70, 193, 0.08) !important;
    color: #6a46c1 !important;
}
.mud-table .mud-icon-button.mud-icon-button-color-primary:hover {
    background: rgba(106, 70, 193, 0.16) !important;
}

.mud-table .mud-icon-button.mud-icon-button-color-default {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #6b778d !important;
}
.mud-table .mud-icon-button.mud-icon-button-color-default:hover {
    background: rgba(0, 0, 0, 0.10) !important;
    color: #4a5771 !important;
}

/* ???????????????????????????????????????????????????????????????
   YNEX-STYLE STATUS CHIPS — Translucent bg, colored text
   ??????????????????????????????????????????????????????????????? */

/* Override for status chips inside tables: compact pill shape */
.mud-table .vp-status-chip-material {
    height: 26px !important;
    font-size: 0.73rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    padding: 0 12px !important;
    border-radius: 5px !important;
}

.mud-table .vp-status-chip-material .mud-chip-content {
    padding: 0 !important;
}

/* Ynex-style: translucent bg + colored text */
.mud-table .vp-status-chip-material.mud-chip-color-success {
    background-color: rgba(38, 191, 111, 0.12) !important;
    color: #26bf6f !important;
}

.mud-table .vp-status-chip-material.mud-chip-color-warning {
    background-color: rgba(245, 166, 35, 0.12) !important;
    color: #f5a623 !important;
}

.mud-table .vp-status-chip-material.mud-chip-color-error {
    background-color: rgba(229, 83, 61, 0.12) !important;
    color: #e5533d !important;
}

.mud-table .vp-status-chip-material.mud-chip-color-info {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #3b82f6 !important;
}

.mud-table .vp-status-chip-material.mud-chip-color-secondary {
    background-color: rgba(139, 92, 246, 0.12) !important;
    color: #8b5cf6 !important;
}

.mud-table .vp-status-chip-material.mud-chip-color-default {
    background-color: rgba(107, 119, 141, 0.12) !important;
    color: #6b778d !important;
}

/* Home estado chips: same Ynex pill style */
.mud-table .vp-home-estado-chip {
    height: 26px !important;
    font-size: 0.73rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    padding: 0 12px !important;
    border-radius: 5px !important;
}

.mud-table .vp-home-estado-chip .mud-chip-content {
    padding: 0 !important;
}

.mud-table .vp-home-estado-chip.mud-chip-color-success {
    background-color: rgba(38, 191, 111, 0.12) !important;
    color: #26bf6f !important;
}

.mud-table .vp-home-estado-chip.mud-chip-color-info {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #3b82f6 !important;
}

.mud-table .vp-home-estado-chip.mud-chip-color-warning {
    background-color: rgba(245, 166, 35, 0.12) !important;
    color: #f5a623 !important;
}

.mud-table .vp-home-estado-chip.mud-chip-color-error {
    background-color: rgba(229, 83, 61, 0.12) !important;
    color: #e5533d !important;
}

.mud-table .vp-home-estado-chip.mud-chip-color-secondary {
    background-color: rgba(139, 92, 246, 0.12) !important;
    color: #8b5cf6 !important;
}

.mud-table .vp-home-estado-chip.mud-chip-color-default {
    background-color: rgba(107, 119, 141, 0.12) !important;
    color: #6b778d !important;
}

/* ???????????????????????????????????????????????????????????????
   YNEX-STYLE "Resultados" BUTTON IN TABLE
   — Translucent pill with icon, not solid filled
   ??????????????????????????????????????????????????????????????? */
.mud-table .mud-button-root.mud-button-filled.mud-button-filled-secondary {
    background-color: rgba(139, 92, 246, 0.10) !important;
    color: #7c3aed !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    padding: 4px 14px !important;
    height: 30px !important;
}

.mud-table .mud-button-root.mud-button-filled.mud-button-filled-secondary:hover {
    background-color: rgba(139, 92, 246, 0.18) !important;
    color: #6d28d9 !important;
}

.mud-table .mud-button-root.mud-button-filled.mud-button-filled-secondary .mud-icon-root {
    font-size: 0.95rem !important;
}

/* ???????????????????????????????????????????????????????????????
   DARK THEME — Table icon buttons overrides
   ??????????????????????????????????????????????????????????????? */
body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-secondary {
    background: rgba(167, 139, 250, 0.12) !important;
    color: #a78bfa !important;
}
body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-secondary:hover {
    background: rgba(167, 139, 250, 0.22) !important;
}

body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-error {
    background: rgba(239, 154, 154, 0.12) !important;
    color: #ef9a9a !important;
}
body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-error:hover {
    background: rgba(239, 154, 154, 0.22) !important;
}

body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-info {
    background: rgba(79, 195, 247, 0.12) !important;
    color: #4fc3f7 !important;
}
body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-info:hover {
    background: rgba(79, 195, 247, 0.22) !important;
}

body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-warning {
    background: rgba(255, 183, 77, 0.12) !important;
    color: #ffb74d !important;
}
body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-warning:hover {
    background: rgba(255, 183, 77, 0.22) !important;
}

body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-success {
    background: rgba(129, 199, 132, 0.12) !important;
    color: #81c784 !important;
}
body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-success:hover {
    background: rgba(129, 199, 132, 0.22) !important;
}

body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-primary {
    background: rgba(124, 92, 231, 0.12) !important;
    color: #a78bfa !important;
}
body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-primary:hover {
    background: rgba(124, 92, 231, 0.22) !important;
}

body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-default {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #8896b0 !important;
}
body[data-theme="dark"] .mud-table .mud-icon-button.mud-icon-button-color-default:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #c8d1e0 !important;
}

/* Dark: status chips — translucent bg, brighter text */
body[data-theme="dark"] .mud-table .vp-status-chip-material.mud-chip-color-success {
    background-color: rgba(38, 191, 111, 0.15) !important;
    color: #34d399 !important;
}
body[data-theme="dark"] .mud-table .vp-status-chip-material.mud-chip-color-warning {
    background-color: rgba(245, 166, 35, 0.15) !important;
    color: #fbbf24 !important;
}
body[data-theme="dark"] .mud-table .vp-status-chip-material.mud-chip-color-error {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}
body[data-theme="dark"] .mud-table .vp-status-chip-material.mud-chip-color-info {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}
body[data-theme="dark"] .mud-table .vp-status-chip-material.mud-chip-color-secondary {
    background-color: rgba(139, 92, 246, 0.15) !important;
    color: #a78bfa !important;
}
body[data-theme="dark"] .mud-table .vp-status-chip-material.mud-chip-color-default {
    background-color: rgba(148, 163, 184, 0.15) !important;
    color: #94a3b8 !important;
}

/* Dark: home estado chips — translucent bg, brighter text */
body[data-theme="dark"] .mud-table .vp-home-estado-chip.mud-chip-color-success {
    background-color: rgba(38, 191, 111, 0.15) !important;
    color: #34d399 !important;
}
body[data-theme="dark"] .mud-table .vp-home-estado-chip.mud-chip-color-info {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}
body[data-theme="dark"] .mud-table .vp-home-estado-chip.mud-chip-color-warning {
    background-color: rgba(245, 166, 35, 0.15) !important;
    color: #fbbf24 !important;
}
body[data-theme="dark"] .mud-table .vp-home-estado-chip.mud-chip-color-error {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}
body[data-theme="dark"] .mud-table .vp-home-estado-chip.mud-chip-color-secondary {
    background-color: rgba(139, 92, 246, 0.15) !important;
    color: #a78bfa !important;
}
body[data-theme="dark"] .mud-table .vp-home-estado-chip.mud-chip-color-default {
    background-color: rgba(148, 163, 184, 0.15) !important;
    color: #94a3b8 !important;
}

/* Dark: "Resultados" button */
body[data-theme="dark"] .mud-table .mud-button-root.mud-button-filled.mud-button-filled-secondary {
    background-color: rgba(167, 139, 250, 0.12) !important;
    color: #b39ddb !important;
}
body[data-theme="dark"] .mud-table .mud-button-root.mud-button-filled.mud-button-filled-secondary:hover {
    background-color: rgba(167, 139, 250, 0.22) !important;
    color: #d1c4e9 !important;
}

/* ???????????????????????????????????????????????????????????????
   DARK THEME — MudList, Usuarios & Roles page fixes
   ??????????????????????????????????????????????????????????????? */

/* MudList: dark mode */
body[data-theme="dark"] .mud-list {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    border-color: rgba(255,255,255,0.06) !important;
}

body[data-theme="dark"] .mud-list-item {
    border-bottom-color: rgba(255,255,255,0.06) !important;
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .mud-list-item:hover {
    background: rgba(124,92,231,0.08) !important;
}

body[data-theme="dark"] .mud-list-item .mud-list-item-text .mud-typography {
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .mud-list-item.mud-selected-item,
body[data-theme="dark"] .mud-list-item.mud-primary-text {
    background: rgba(124,92,231,0.12) !important;
}

body[data-theme="dark"] .mud-list-item .text-secondary,
body[data-theme="dark"] .mud-list-item .mud-typography-caption {
    color: #6a7a94 !important;
}

/* Checkbox inside roles panel: dark text */
body[data-theme="dark"] .mud-checkbox .mud-typography {
    color: #b8c4d8 !important;
}

body[data-theme="dark"] .mud-divider {
    border-color: rgba(255,255,255,0.08) !important;
}

/* Page header layout */
.vp-page-header {
    position: relative;
}

/* MudOverlay modal: ensure select dropdown is visible */
.mud-overlay .vp-campos-modal {
    overflow: visible !important;
}

/* MudSelect/MudPopover: ensure dropdowns appear above overlays (z-index 2000) */
.mud-popover-provider {
    z-index: 2100 !important;
}

.mud-popover.mud-popover-open {
    z-index: 2100 !important;
}

/* MudDialog: ensure dialogs appear above IA Fotos overlay (z-index 2000) */
.mud-dialog-provider {
    position: relative;
    z-index: 2200 !important;
}

.mud-overlay.mud-overlay-dialog {
    z-index: 2200 !important;
}

.mud-dialog-container {
    z-index: 2200 !important;
}

/* Ensure the MudDialogProvider overlay + backdrop are fully interactive above custom overlays */
.mud-overlay.mud-overlay-dialog .mud-overlay-scrim {
    z-index: 2200 !important;
}

.mud-overlay.mud-overlay-dialog .mud-overlay-content {
    z-index: 2201 !important;
}

.mud-dialog {
    z-index: 2201 !important;
    pointer-events: auto !important;
}

/* MudSwitch dark mode */
body[data-theme="dark"] .mud-switch .mud-switch-track {
    background: rgba(255,255,255,0.15) !important;
}

body[data-theme="dark"] .mud-input-adorment .mud-icon-root,
body[data-theme="dark"] .mud-select .mud-icon-root {
    color: #8896b0 !important;
}

/* ???????????????????????????????????????????????????????????????
   404 PAGE — Ynex style
   ??????????????????????????????????????????????????????????????? */
.vp-404-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 2rem;
}

.vp-404-code {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #6a46c1 0%, #9b72ef 50%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    letter-spacing: -0.04em;
}

.vp-404-title {
    color: #333c4e;
    font-weight: 700 !important;
    margin-bottom: 0.35rem !important;
}

.vp-404-subtitle {
    color: #8a94a6;
    max-width: 400px;
}

/* Dark mode 404 */
body[data-theme="dark"] .vp-404-code {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 50%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-theme="dark"] .vp-404-title {
    color: #e0e6f0 !important;
}

body[data-theme="dark"] .vp-404-subtitle {
    color: #6a7a94;
}

/* ???????????????????????????????????????????????????????????????
   IA FOTOS MODAL — Light theme
   ??????????????????????????????????????????????????????????????? */
.vp-ia-fotos-modal {
    border-radius: 16px !important;
    border: 1px solid #e2e9f4 !important;
    box-shadow: 0 16px 48px rgba(17, 25, 40, 0.18) !important;
    overflow: hidden;
}

/* IA Fotos Header — flat, clean */
.vp-ia-fotos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: transparent;
}

/* Status badge — flat label, not a button */
.vp-ia-fotos-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    height: 26px;
    pointer-events: none;
    user-select: none;
    background: rgba(107, 119, 141, 0.12);
    color: #6b778d;
}

.vp-status-ok {
    background: rgba(38, 191, 111, 0.12);
    color: #26bf6f;
}

.vp-status-observado {
    background: rgba(245, 166, 35, 0.12);
    color: #f5a623;
}

.vp-status-requiere-revision-humana {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.vp-status-error {
    background: rgba(229, 83, 61, 0.12);
    color: #e5533d;
}

.vp-status-en-proceso {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.vp-status-pendiente {
    background: rgba(107, 119, 141, 0.12);
    color: #6b778d;
}

/* Dark theme overrides */
body[data-theme="dark"] .vp-ia-fotos-status-badge {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

body[data-theme="dark"] .vp-status-ok {
    background: rgba(38, 191, 111, 0.15);
    color: #34d399;
}

body[data-theme="dark"] .vp-status-observado {
    background: rgba(245, 166, 35, 0.15);
    color: #fbbf24;
}

body[data-theme="dark"] .vp-status-requiere-revision-humana {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

body[data-theme="dark"] .vp-status-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

body[data-theme="dark"] .vp-status-en-proceso {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

body[data-theme="dark"] .vp-status-pendiente {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.vp-ia-foto-fit {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.vp-ia-foto-fit img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.vp-ia-fotos-tabs {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.vp-ia-fotos-tabs .mud-tabs-panels {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.vp-ia-fotos-tabs .mud-tabs-panels > .mud-tabpanel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: auto;
}

.vp-ia-fotos-tabs .mud-tabs-panels > .mud-tabpanel > .mud-table,
.vp-ia-fotos-tabs .mud-tabs-panels > .mud-tabpanel > .mud-simple-table {
    flex-shrink: 0;
}

.vp-ia-fotos-tabs .mud-tabs-panels > .mud-tabpanel > .mud-simple-table > .mud-table-container {
    overflow-x: auto;
}

.vp-ia-fotos-modal .mud-alert {
    font-size: 0.82rem;
}

/* Pastel status tags for IA modal */
.vp-ia-status-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    line-height: 1.6;
    white-space: nowrap;
}

.vp-ia-tag-ok {
    background: #e8f5ed;
    color: #3d7a56;
}

.vp-ia-tag-warn {
    background: #fdf0e0;
    color: #8a6530;
}

.vp-ia-tag-neutral {
    background: #f0f2f5;
    color: #6b7a99;
}

/* Canvas container */
.vp-ia-fotos-canvas-wrap {
    display: flex;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 8px;
    min-height: 400px;
    max-height: 60vh;
    overflow: auto;
}

.vp-ia-fotos-canvas-wrap canvas {
    max-width: 100%;
    height: auto;
}

/* IA Fotos — Formulario Material pastel (inspirado en Ynex) */
.vp-ia-section {
    border-radius: 10px;
    padding: 10px 14px 12px 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid transparent;
    transition: box-shadow 0.2s ease;
}

.vp-ia-section:hover {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

/* Pastel variants */
.vp-ia-section-primary {
    background: rgba(103, 80, 164, 0.05);
    border-color: rgba(103, 80, 164, 0.12);
}

.vp-ia-section-success {
    background: rgba(46, 125, 50, 0.05);
    border-color: rgba(46, 125, 50, 0.12);
}

.vp-ia-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.vp-ia-section-header .mud-icon-root {
    opacity: 0.7;
}

.vp-ia-section-body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: flex-start;
}

/* Form field: label arriba, valor abajo */
.vp-ia-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
    padding: 4px 6px 4px 8px;
    border-left: 3px solid transparent;
    border-radius: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vp-ia-field:hover {
    background: rgba(255, 255, 255, 0.6);
}

.vp-ia-field-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.02em;
}

.vp-ia-field-label .mud-icon-root {
    font-size: 1rem !important;
    opacity: 0.65;
}

.vp-ia-field-value {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
}

.vp-ia-value-chip {
    font-weight: 600 !important;
    min-width: 42px;
    justify-content: center;
}

/* Pastel overrides — verde menos saturado para no hostigar la vista */
.vp-ia-value-chip.mud-chip-color-success.mud-chip-filled {
    background-color: #c8e6c9 !important;
    color: #2e7d32 !important;
}

.vp-ia-value-chip.mud-chip-color-primary.mud-chip-filled {
    background-color: #e1d5f5 !important;
    color: #4a2e7a !important;
}

.vp-ia-value-chip.mud-chip-color-warning.mud-chip-filled {
    background-color: #ffe0b2 !important;
    color: #b26a00 !important;
}

.vp-ia-value-chip.mud-chip-color-default.mud-chip-filled {
    background-color: #eceff1 !important;
    color: #546e7a !important;
}

/* Dark theme — pastel más profundo pero aún suave */
body[data-theme="dark"] .vp-ia-value-chip.mud-chip-color-success.mud-chip-filled {
    background-color: rgba(129, 199, 132, 0.22) !important;
    color: #a5d6a7 !important;
}

body[data-theme="dark"] .vp-ia-value-chip.mud-chip-color-primary.mud-chip-filled {
    background-color: rgba(179, 157, 219, 0.22) !important;
    color: #d1c4e9 !important;
}

body[data-theme="dark"] .vp-ia-value-chip.mud-chip-color-warning.mud-chip-filled {
    background-color: rgba(255, 183, 77, 0.22) !important;
    color: #ffcc80 !important;
}

body[data-theme="dark"] .vp-ia-value-chip.mud-chip-color-default.mud-chip-filled {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.vp-ia-field-edit {
    opacity: 0;
    transition: opacity 0.15s ease;
    padding: 2px !important;
}

.vp-ia-field:hover .vp-ia-field-edit {
    opacity: 0.5;
}

.vp-ia-field-edit:hover {
    opacity: 1 !important;
}

/* Slot con ancho fijo para el icono de ManualOverride (evita layout shift al guardar) */
.vp-ia-override-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
}

.vp-ia-section-action {
    margin-left: auto;
    align-self: flex-end;
    padding-top: 4px;
}

/* Dark theme — pastel más sutil */
body[data-theme="dark"] .vp-ia-section-primary {
    background: rgba(179, 157, 219, 0.08);
    border-color: rgba(179, 157, 219, 0.18);
}

body[data-theme="dark"] .vp-ia-section-success {
    background: rgba(129, 199, 132, 0.08);
    border-color: rgba(129, 199, 132, 0.18);
}

body[data-theme="dark"] .vp-ia-field:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Tabla de accesorios en modal IA — asegurar que la última fila sea visible */
.vp-ia-accesorios-table .mud-table-container {
    padding-bottom: 16px;
    scrollbar-gutter: stable;
}

.vp-ia-accesorios-table tbody tr:last-child td {
    padding-bottom: 10px;
}

/* Resaltar campos con mismatch acta ? IA en panel superior */
.vp-ia-field-mismatch {
    background: rgba(255, 152, 0, 0.06) !important;
    border-left-color: #ffb74d !important;
}

body[data-theme="dark"] .vp-ia-field-mismatch {
    background: rgba(255, 183, 77, 0.08) !important;
    border-left-color: #ffcc80 !important;
}

/* Decision buttons — pastel flat style (Ynex) */
.vp-decision-btn-ok {
    background-color: #DFF3E6 !important;
    color: #2E7D32 !important;
    box-shadow: none !important;
}

.vp-decision-btn-ok:hover {
    background-color: #C8E6C9 !important;
}

.vp-decision-btn-ok .mud-icon-root {
    color: #2E7D32 !important;
}

.vp-decision-btn-obs {
    background-color: #FFF1D6 !important;
    color: #C77800 !important;
    box-shadow: none !important;
}

.vp-decision-btn-obs:hover {
    background-color: #FFE0B2 !important;
}

.vp-decision-btn-obs .mud-icon-root {
    color: #C77800 !important;
}

body[data-theme="dark"] .vp-decision-btn-ok {
    background-color: rgba(102, 187, 106, 0.18) !important;
    color: #81c784 !important;
}

body[data-theme="dark"] .vp-decision-btn-ok:hover {
    background-color: rgba(102, 187, 106, 0.28) !important;
}

body[data-theme="dark"] .vp-decision-btn-ok .mud-icon-root {
    color: #81c784 !important;
}

body[data-theme="dark"] .vp-decision-btn-obs {
    background-color: rgba(255, 183, 77, 0.18) !important;
    color: #ffb74d !important;
}

body[data-theme="dark"] .vp-decision-btn-obs:hover {
    background-color: rgba(255, 183, 77, 0.28) !important;
}

body[data-theme="dark"] .vp-decision-btn-obs .mud-icon-root {
    color: #ffb74d !important;
}

.vp-decision-btn-reprocess {
    background-color: #DFF1FF !important;
    color: #1565c0 !important;
    box-shadow: none !important;
}

.vp-decision-btn-reprocess:hover {
    background-color: #BBDEFB !important;
}

.vp-decision-btn-reprocess .mud-icon-root {
    color: #1565c0 !important;
}

body[data-theme="dark"] .vp-decision-btn-reprocess {
    background-color: rgba(79, 195, 247, 0.18) !important;
    color: #4fc3f7 !important;
}

body[data-theme="dark"] .vp-decision-btn-reprocess:hover {
    background-color: rgba(79, 195, 247, 0.28) !important;
}

body[data-theme="dark"] .vp-decision-btn-reprocess .mud-icon-root {
    color: #4fc3f7 !important;
}

/* Contenedor de botones de decisión (Aprobar / Observar) */
.vp-decision-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}



/* ???????????????????????????????????????????????????????????????
   Configuración / Reglas — Matriz de casos UPR
   ??????????????????????????????????????????????????????????????? */
.vp-rules-matrix-panel .mud-expand-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: rgba(103, 80, 164, 0.03);
}

.vp-rules-matrix-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 10px 12px;
    background: var(--mud-palette-background-grey, #f7f9fc);
    border-radius: 8px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.vp-rules-matrix-legend code {
    background: var(--mud-palette-background, #fff);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 0.72rem;
}

.vp-rules-matrix-table code {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.78rem;
    background: var(--mud-palette-background-grey, #f3f5fa);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--mud-palette-text-primary);
}

/* Matriz de casos — celdas numéricas tipo "test matrix" */
.vp-rules-matrix-table tbody td.vp-rules-matrix-num {
    text-align: center;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

.vp-rules-matrix-table tbody td.vp-rules-matrix-val {
    text-align: center;
    padding: 4px 8px;
}

.vp-rules-matrix-cell-val {
    display: inline-block;
    min-width: 32px;
    padding: 2px 10px;
    border-radius: 6px;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-weight: 600;
    font-size: 0.82rem;
    background: var(--mud-palette-background-grey, #f3f5fa);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.vp-rules-matrix-dash {
    color: var(--mud-palette-text-secondary);
    opacity: 0.4;
    font-weight: 500;
}

.vp-rules-matrix-rulecode {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(103, 80, 164, 0.08);
    color: #4a2e7a;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(103, 80, 164, 0.15);
}

/* Badges de estado (ícono + texto) */
.vp-rules-matrix-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.vp-rules-matrix-estado .mud-icon-root {
    font-size: 1rem !important;
}

.vp-rules-matrix-estado-ok {
    background: #c8e6c9;
    color: #2e7d32;
}

.vp-rules-matrix-estado-obs {
    background: #ffe0b2;
    color: #b26a00;
}

.vp-rules-matrix-estado-rev {
    background: #e1d5f5;
    color: #4a2e7a;
}

.vp-rules-matrix-estado-off {
    background: #eceff1;
    color: #546e7a;
}

.vp-rules-matrix-comment {
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
    font-size: 0.78rem;
}

/* Dark theme */
body[data-theme="dark"] .vp-rules-matrix-cell-val {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

body[data-theme="dark"] .vp-rules-matrix-rulecode {
    background: rgba(179, 157, 219, 0.15);
    color: #d1c4e9;
    border-color: rgba(179, 157, 219, 0.25);
}

body[data-theme="dark"] .vp-rules-matrix-estado-ok {
    background: rgba(129, 199, 132, 0.2);
    color: #a5d6a7;
}

body[data-theme="dark"] .vp-rules-matrix-estado-obs {
    background: rgba(255, 183, 77, 0.2);
    color: #ffcc80;
}

body[data-theme="dark"] .vp-rules-matrix-estado-rev {
    background: rgba(179, 157, 219, 0.2);
    color: #d1c4e9;
}

body[data-theme="dark"] .vp-rules-matrix-estado-off {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
}

body[data-theme="dark"] .vp-rules-matrix-panel .mud-expand-panel {
    background: rgba(179, 157, 219, 0.06);
}

body[data-theme="dark"] .vp-rules-matrix-legend {
    background: rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .vp-rules-matrix-legend code,
body[data-theme="dark"] .vp-rules-matrix-table code {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ???????????????????????????????????????????????????????????????
   Responsive — IA Summary panel
   ??????????????????????????????????????????????????????????????? */

/* Tablet — reduce gap y ancho mínimo de campo */
@media (max-width: 960px) {
    .vp-ia-section {
        padding: 10px 12px;
    }

    .vp-ia-section-body {
        gap: 8px 14px;
    }

    .vp-ia-field {
        min-width: 100px;
    }
}

/* Mobile — campos full width, stack vertical, botón full width */
@media (max-width: 599px) {
    .vp-ia-section {
        padding: 10px;
    }

    .vp-ia-section-header {
        font-size: 0.68rem;
    }

    .vp-ia-section-body {
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
    }

    .vp-ia-field {
        min-width: 0;
        width: 100%;
        padding: 6px 8px;
        background: rgba(255, 255, 255, 0.35);
        border: 1px solid rgba(0, 0, 0, 0.04);
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .vp-ia-field-label {
        flex: 1;
        min-width: 0;
    }

    .vp-ia-field-label span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .vp-ia-field-value {
        flex-shrink: 0;
    }

    /* En móvil el ícono edit siempre visible, no por hover */
    .vp-ia-field-edit {
        opacity: 0.55;
    }

    .vp-ia-section-action {
        margin-left: 0;
        align-self: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .vp-ia-section-action .mud-button-root {
        width: auto;
    }

    body[data-theme="dark"] .vp-ia-field {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.06);
    }
}

/* ???????????????????????????????????????????????????????????????
   Responsive — IA Fotos modal (header, toolbars, búsqueda)
   ??????????????????????????????????????????????????????????????? */

@media (max-width: 599px) {
    .vp-ia-fotos-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    /* Toolbar superior de fotos: apilar */
    .vp-ia-fotos-modal .mud-stack-row {
        flex-wrap: wrap;
    }

    /* Canvas/imagen visor: reducir max-height para dar espacio al header */
    .vp-ia-fotos-modal [class*="vp-ia-foto-fit"],
    .vp-ia-fotos-modal canvas {
        max-height: 50vh !important;
    }

    /* Campo buscar accesorios: full width */
    .vp-ia-fotos-modal .mud-input-control[style*="max-width:280px"] {
        max-width: 100% !important;
    }

    /* Tabla accesorios en mobile: recalcular altura con offset mayor */
    .vp-ia-accesorios-table .mud-table-container {
        max-height: calc(100vh - 420px) !important;
    }
}


/* Thumbnail strip */
.vp-ia-fotos-thumbs {
    overflow-x: auto;
    padding: 4px 0;
}




/* ???????????????????????????????????????????????????????????????
   IA FOTOS MODAL — Dark theme
   ??????????????????????????????????????????????????????????????? */
body[data-theme="dark"] .vp-ia-fotos-modal,
body[data-theme="dark"] .vp-ia-fotos-modal.mud-paper {
    background: #1a2340 !important;
    background-color: #1a2340 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45) !important;
}

body[data-theme="dark"] .vp-ia-fotos-modal .mud-text {
    color: #c8d1e0 !important;
}

body[data-theme="dark"] .vp-ia-fotos-modal .mud-typography-h6 {
    color: #e0e6f0 !important;
}

/* Header border */
body[data-theme="dark"] .vp-ia-fotos-modal > div:first-child {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    background: #151d35 !important;
}

/* Close button */
body[data-theme="dark"] .vp-ia-fotos-modal .mud-icon-button {
    color: #8896b0 !important;
}

body[data-theme="dark"] .vp-ia-fotos-modal .mud-icon-button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Resumen IA panel */
body[data-theme="dark"] .vp-ia-fotos-modal .mud-paper-outlined {
    background: #151d35 !important;
    background-color: #151d35 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

body[data-theme="dark"] .vp-ia-fotos-modal .mud-typography-subtitle2 {
    color: #a78bfa !important;
}

body[data-theme="dark"] .vp-ia-fotos-modal .mud-typography-caption {
    color: #6a7a94 !important;
}

body[data-theme="dark"] .vp-ia-fotos-modal .mud-typography-body1 {
    color: #e0e6f0 !important;
}

body[data-theme="dark"] .vp-ia-fotos-modal .mud-typography-body2 {
    color: #b8c4d8 !important;
}

/* Canvas wrap dark */
body[data-theme="dark"] .vp-ia-fotos-modal .vp-ia-fotos-canvas-wrap,
body[data-theme="dark"] .vp-ia-fotos-modal div[style*="background:#f5f5f5"] {
    background: #111827 !important;
}

/* Input fields in IA edit */
body[data-theme="dark"] .vp-ia-fotos-modal .mud-input-control .mud-input {
    color: #e0e6f0 !important;
}

body[data-theme="dark"] .vp-ia-fotos-modal .mud-input-control .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Alert dark */
body[data-theme="dark"] .vp-ia-fotos-modal .mud-alert-outlined-error {
    background: rgba(229, 115, 115, 0.08) !important;
    border-color: rgba(229, 115, 115, 0.25) !important;
    color: #e57373 !important;
}

/* Empty state */
body[data-theme="dark"] .vp-ia-fotos-modal .mud-icon-root.mud-icon-size-large {
    color: #4a5568 !important;
}

/* IA Fotos responsive */
@media (max-width: 768px) {
    .vp-ia-fotos-modal {
        width: 98vw !important;
        margin: 1vh auto !important;
        max-height: 98vh !important;
    }
}

/* ============================================================
   CV Bounding Box Overlay
   ============================================================ */
.cv-overlay-container {
    position: relative;
    display: inline-block;
}

.cv-bbox {
    position: absolute;
    border: 3px solid #00e676;
    border-radius: 4px;
    background: rgba(0, 230, 118, 0.12);
    pointer-events: auto;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
    z-index: 2;
}

.cv-bbox:hover {
    background: rgba(0, 230, 118, 0.25);
    border-width: 4px;
}

.cv-bbox-dismissed {
    border-style: dashed !important;
    opacity: 0.6;
}

.cv-bbox-dismissed:hover {
    opacity: 0.9;
    background: rgba(0, 0, 0, 0.1);
}

.cv-bbox-label {
    position: absolute;
    top: -22px;
    left: -1px;
    background: #00e676;
    color: #000;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}


/* ============================================================== */
/* IA Review — Full-screen takeover (3 zones)                     */
/* ============================================================== */
.vp-ia-review-shell {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: var(--mud-palette-background, #f5f7fb);
    display: flex;
    flex-direction: column;
    outline: none;
    animation: vpIaReviewIn 140ms ease-out;
}
@keyframes vpIaReviewIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
body[data-theme="dark"] .vp-ia-review-shell {
    background: #10141b;
}

.vp-ia-review-surface {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.vp-ia-review-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--mud-palette-surface, #fff);
    border-bottom: 1px solid var(--mud-palette-lines-default, #e8ecf2);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
body[data-theme="dark"] .vp-ia-review-header {
    background: #181d27;
    border-bottom-color: #2a2f3c;
}

.vp-ia-review-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 360px;
    grid-template-areas: "thumbs main side";
    gap: 10px;
    padding: 10px 12px 12px 12px;
    overflow: hidden;
}

/* Miniaturas (izquierda) */
.vp-ia-review-thumbs {
    grid-area: thumbs;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, #e8ecf2);
    border-radius: 8px;
    overflow: hidden;
}
body[data-theme="dark"] .vp-ia-review-thumbs {
    background: #181d27;
    border-color: #2a2f3c;
}
.vp-ia-review-thumbs-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default, #e8ecf2);
    background: rgba(0,0,0,0.02);
}
body[data-theme="dark"] .vp-ia-review-thumbs-header {
    border-bottom-color: #2a2f3c;
    background: rgba(255,255,255,0.03);
}
.vp-ia-review-thumbs-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vp-ia-review-thumb {
    appearance: none;
    border: 2px solid transparent;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 120ms, transform 120ms;
}
.vp-ia-review-thumb:hover { transform: translateY(-1px); border-color: var(--mud-palette-primary-lighten, #9fa8da); }
.vp-ia-review-thumb.active { border-color: var(--mud-palette-primary, #6366f1); box-shadow: 0 0 0 2px rgba(99,102,241,0.18); }
.vp-ia-review-thumb.maestra { border-left: 3px solid #ffb300; }
.vp-ia-review-thumb.maestra.active { border-left-color: #ffb300; }
.vp-ia-review-thumb-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #eceff4;
}
body[data-theme="dark"] .vp-ia-review-thumb-img { background-color: #21262f; }
.vp-ia-review-thumb-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    background: rgba(0,0,0,0.02);
}
body[data-theme="dark"] .vp-ia-review-thumb-cap { background: rgba(255,255,255,0.04); }

/* Centro (foto) */
.vp-ia-review-main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vp-ia-review-main .vp-ia-fotos-tabs,
.vp-ia-review-tabs {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.vp-ia-review-tabs .mud-tabs-tabbar { flex-shrink: 0; }
.vp-ia-review-tabs .mud-tabs-panels,
.vp-ia-review-tabs .mud-tab-panel,
.vp-ia-review-tabs [role="tabpanel"] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.vp-ia-review-tabs .mud-paper {
    flex: 1;
    min-height: 0;
}

/* Visor de foto */
.vp-ia-review-viewer {
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 6px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
    position: relative;
}
body[data-theme="dark"] .vp-ia-review-viewer {
    background: #0b0e14;
    border-color: #2a2f3c;
}
.vp-ia-review-viewer.vp-ia-foto-fit {
    display: flex;
    align-items: center;
    justify-content: center;
}
.vp-ia-review-viewer img { user-select: none; -webkit-user-drag: none; }

/* Panel derecho */
.vp-ia-review-side {
    grid-area: side;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}
.vp-ia-review-side .vp-ia-review-side-grid {
    margin: 0 !important;
    width: 100% !important;
}
.vp-ia-review-side .vp-ia-review-side-grid > .mud-grid-item {
    padding: 0 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
}
.vp-ia-review-side .vp-ia-review-side-grid > .mud-grid-item + .mud-grid-item { margin-top: 10px; }

/* Flash de fila al volver */
.vp-row-focus-flash {
    animation: vpRowFlash 1.4s ease-out;
}
@keyframes vpRowFlash {
    0%   { background-color: rgba(99,102,241,0.25); }
    100% { background-color: transparent; }
}

/* Responsive */
@media (max-width: 1279px) {
    .vp-ia-review-body {
        grid-template-columns: 160px minmax(0, 1fr) 320px;
    }
}
@media (max-width: 1023px) {
    .vp-ia-review-body {
        grid-template-columns: 120px minmax(0, 1fr);
        grid-template-areas:
            "thumbs main"
            "side   side";
    }
    .vp-ia-review-side { max-height: 40vh; }
}
@media (max-width: 767px) {
    /* En mobile el shell scrollea como página normal */
    .vp-ia-review-shell { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .vp-ia-review-surface { overflow: visible; }
    .vp-ia-review-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "main"
            "thumbs"
            "side";
        overflow: visible;
        padding: 8px;
        gap: 8px;
    }
    /* Aislar zonas para evitar z-index bleeding */
    .vp-ia-review-main,
    .vp-ia-review-thumbs,
    .vp-ia-review-side { position: relative; isolation: isolate; }
    .vp-ia-review-main  { min-height: 55vh; overflow: hidden; }
    .vp-ia-review-viewer { min-height: 48vh; }
    .vp-ia-review-side  { max-height: none; overflow: visible; }
    /* Thumbnails: strip horizontal compacta debajo del visor */
    .vp-ia-review-thumbs {
        max-height: 100px;
        overflow: hidden;
        border-radius: 8px;
        border: 1px solid var(--mud-palette-lines-default, #e4e4e4);
        background: var(--mud-palette-surface, #fff);
    }
    body[data-theme="dark"] .vp-ia-review-thumbs {
        background: #181d27;
        border-color: #2a2f3c;
    }
    .vp-ia-review-thumbs-header { display: none !important; }
    .vp-ia-review-thumbs-list {
        flex-direction: row !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px;
        gap: 6px;
        height: 100%;
    }
    .vp-ia-review-thumb { min-width: 68px; max-width: 68px; flex-shrink: 0; }
    .vp-ia-review-thumb-img { aspect-ratio: 3 / 4; }

    /* ?? Header: breadcrumb + close ???????????????????????? */
    .vp-ia-review-header {
        flex-wrap: nowrap;
        align-items: center;
        padding: 6px 8px;
        gap: 6px;
    }
    .vp-ia-review-header > .mud-stack {
        flex: 1 1 0;
        min-width: 0;
        flex-wrap: wrap;
        row-gap: 2px;
        column-gap: 4px;
    }
    .vp-ia-review-header .mud-divider-vertical { display: none !important; }
    .vp-ia-review-header .mud-typography-caption { display: none !important; }
    .vp-ia-review-header .mud-typography-subtitle1,
    .vp-ia-review-header .mud-typography-body2 { white-space: nowrap; }
    /* Badge: truncar con ellipsis, no desbordarse */
    .vp-ia-review-header .vp-ia-fotos-status-badge {
        flex-shrink: 1;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
    .vp-ia-review-header > .mud-icon-button { flex-shrink: 0; }

    /* ?? Decision banner ??????????????????????????????????? */
    .vp-decision-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 8px 10px !important;
    }
    .vp-decision-banner > .mud-icon-root { align-self: flex-start; }
    /* Botones en la misma fila */
    .vp-decision-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px;
        width: 100%;
    }
    .vp-decision-actions .mud-tooltip-root {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
    }
    .vp-decision-actions .mud-button-root {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        justify-content: center;
    }
    .vp-decision-actions .mud-button-label { white-space: nowrap; font-size: 0.78rem; }

    /* ?? Toolbar del visor de fotos: 2 filas ??????????????? */
    .vp-ia-fotos-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
    }
    .vp-ia-fotos-nav {
        justify-content: center !important;
        flex-wrap: wrap;
    }
    .vp-ia-fotos-controls {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 2px !important;
        align-items: center !important;
    }
    .vp-ia-fotos-nav .mud-typography-body2 { white-space: nowrap; }

    /* ?? ACCESORIOS tab: tabla ? tarjetas ?????????????????? */
    .vp-ia-accesorios-table .mud-table-container {
        max-height: none !important;
        overflow-x: visible !important;
    }
    .vp-ia-accesorios-table thead { display: none !important; }
    .vp-ia-accesorios-table table,
    .vp-ia-accesorios-table tbody { display: block !important; width: 100% !important; }
    /* Cada fila ? tarjeta */
    .vp-ia-accesorios-table tr {
        display: grid !important;
        grid-template-columns: 22px 1fr auto;
        grid-template-rows: auto auto auto;
        column-gap: 6px;
        row-gap: 4px;
        background: var(--mud-palette-surface, #fff);
        border: 1px solid var(--mud-palette-lines-default, #e4e4e4);
        border-radius: 8px;
        padding: 8px !important;
        margin-bottom: 6px;
    }
    body[data-theme="dark"] .vp-ia-accesorios-table tr {
        background: #181d27;
        border-color: #2a2f3c;
    }
    .vp-ia-accesorios-table td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        font-size: 0.82rem;
        overflow: visible !important;
    }
    .vp-ia-accesorios-table td::before { display: none !important; }
    /* # - col 1, fila 1 */
    .vp-ia-accesorios-table td:nth-child(1) {
        grid-column: 1; grid-row: 1;
        display: flex !important; align-items: center;
        font-size: 0.7rem; color: var(--mud-palette-text-secondary); font-weight: 500;
    }
    /* Campo - col 2-3, fila 1 */
    .vp-ia-accesorios-table td:nth-child(2) {
        grid-column: 2 / 4; grid-row: 1;
        display: flex !important; align-items: center;
        font-weight: 600; font-size: 0.85rem;
    }
    /* ACTA (valor + edit) - col 1-2, fila 2 */
    .vp-ia-accesorios-table td:nth-child(3) {
        grid-column: 1 / 3; grid-row: 2;
        display: flex !important; align-items: center; gap: 4px;
        min-width: 0; overflow: visible !important;
    }
    .vp-ia-accesorios-table td:nth-child(3) .mud-input-control {
        min-width: 90px !important; max-width: none !important; flex: 1;
    }
    .vp-ia-accesorios-table td:nth-child(3) .mud-stack { flex-wrap: wrap; justify-content: flex-start; }
    /* IA Visión - col 3, fila 2 */
    .vp-ia-accesorios-table td:nth-child(4) {
        grid-column: 3; grid-row: 2;
        display: flex !important; align-items: center; justify-content: flex-end;
    }
    /* Estado - col 1-3, fila 3 */
    .vp-ia-accesorios-table td:nth-child(5) {
        grid-column: 1 / 4; grid-row: 3;
        display: flex !important; align-items: center; margin-top: 2px;
    }
    .vp-ia-accesorios-table .vp-rules-matrix-estado { padding: 2px 6px !important; font-size: 0.72rem !important; gap: 3px; }
    .vp-ia-accesorios-table .vp-rules-matrix-estado span { font-size: 0.72rem !important; }
    .vp-ia-fotos-modal .mud-input-control[style*="max-width:280px"] { max-width: 100% !important; }

    /* ?? Panel lateral IA (vp-ia-section) ????????????????? */
    .vp-ia-section { padding: 10px 12px; }
    .vp-ia-section-body { gap: 8px 12px; }
    .vp-ia-field { min-width: 100px; }

    /* Tabs: que los paneles no intenten usar flex:1 (rompe en mobile) */
    .vp-ia-review-tabs .mud-tabs-panels,
    .vp-ia-review-tabs .mud-tab-panel,
    .vp-ia-review-tabs [role="tabpanel"] {
        flex: initial;
        min-height: 40vh;
    }
}