/* RoPrint v2 — componentes y overrides MudBlazor. Acabado premium moderno:
   capas con sombras suaves, radios generosos, bordes hairline y verde con presencia
   (tiles con gradiente, activos lima/bosque, focus rings verdes).
   Solo usa tokens --rp2-*. Cargado después de components.css (v1) para ganar en
   selectores Mud compartidos. */

/* =====================================================================
   1. MudBlazor globales (premium: bordes + elevación contenida)
   ===================================================================== */

/* Superficies: borde hairline + radio base; la elevación la aporta .mud-elevation-* */
.mud-paper {
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-md);
    background-color: var(--rp2-surface);
}

.mud-elevation-0 { box-shadow: none !important; }
.mud-elevation-1 { box-shadow: var(--rp2-shadow-xs) !important; }
.mud-elevation-2,
.mud-elevation-3,
.mud-elevation-4 { box-shadow: var(--rp2-shadow-sm) !important; }
.mud-elevation-5,
.mud-elevation-6,
.mud-elevation-7,
.mud-elevation-8 { box-shadow: var(--rp2-shadow-md) !important; }
.mud-elevation-9,
.mud-elevation-10,
.mud-elevation-11,
.mud-elevation-12 { box-shadow: var(--rp2-shadow-lg) !important; }
.mud-elevation-13,
.mud-elevation-14,
.mud-elevation-15,
.mud-elevation-16,
.mud-elevation-17,
.mud-elevation-18,
.mud-elevation-19,
.mud-elevation-20,
.mud-elevation-21,
.mud-elevation-22,
.mud-elevation-23,
.mud-elevation-24,
.mud-elevation-25 { box-shadow: var(--rp2-shadow-xl) !important; }

/* Botones: radio de control, altura cómoda y micro-elevación al hover */
.mud-button {
    border-radius: var(--rp2-radius-control);
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    transition: background-color var(--rp2-motion-fast) var(--rp2-easing-standard),
                border-color var(--rp2-motion-fast) var(--rp2-easing-standard),
                color var(--rp2-motion-fast) var(--rp2-easing-standard),
                box-shadow var(--rp2-motion-fast) var(--rp2-easing-standard),
                transform var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.mud-button-size-medium { min-height: 36px; padding: 0 16px; }
.mud-button-size-small { min-height: 30px; padding: 0 12px; }
.mud-button-size-large { min-height: 46px; padding: 0 24px; font-size: .9375rem; }

.mud-button-filled:not(:disabled):not(.mud-disabled) {
    box-shadow: var(--rp2-shadow-xs);
}

.mud-button-filled:not(:disabled):not(.mud-disabled):hover {
    box-shadow: var(--rp2-shadow-sm);
    transform: translateY(-1px);
}

.mud-button-filled:not(:disabled):not(.mud-disabled):active {
    box-shadow: var(--rp2-shadow-xs);
    transform: translateY(0);
}

/* Primario: gradiente de marca + glow al hover. El color de texto lo fija el tema. */
.mud-button-filled-primary {
    background: var(--rp2-gradient-primary) !important;
}

.mud-button-filled-primary:not(:disabled):not(.mud-disabled):hover {
    box-shadow: var(--rp2-shadow-brand);
    filter: brightness(1.04);
}

.mud-button-filled-primary:disabled,
.mud-button-filled-primary.mud-disabled {
    background: var(--rp2-surface-3) !important;
    color: var(--rp2-ink-faint) !important;
    box-shadow: none !important;
    filter: none;
}

.mud-button-outlined {
    border-width: 1px;
}

.mud-button-outlined-primary {
    border-color: color-mix(in srgb, var(--rp2-brand-green) 42%, transparent);
    color: var(--rp2-accent-text);
}

.mud-button-outlined-primary:not(:disabled):not(.mud-disabled):hover {
    background-color: var(--rp2-brand-lime-soft);
    border-color: var(--rp2-brand-green);
}

.mud-button-text-primary:not(:disabled):not(.mud-disabled):hover {
    background-color: color-mix(in srgb, var(--rp2-brand-green) 10%, transparent);
}

.mud-icon-button {
    border-radius: var(--rp2-radius-control);
    transition: background-color var(--rp2-motion-fast) var(--rp2-easing-standard),
                color var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.mud-icon-button:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--rp2-ink) 6%, transparent);
}

.rp2-appbar .mud-icon-button:not(:disabled):hover {
    background-color: var(--rp2-surface-2);
}

.rp2-fab .mud-fab,
.mud-fab.mud-fab-extended {
    box-shadow: var(--rp2-shadow-brand) !important;
}

.mud-fab.mud-fab-extended {
    border-radius: var(--rp2-radius-pill);
}

/* Inputs: radio de control, borde más nítido y anillo de foco verde */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--rp2-radius-control);
    border-color: var(--rp2-line-strong);
    transition: border-color var(--rp2-motion-fast) var(--rp2-easing-standard),
                box-shadow var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.mud-input.mud-input-outlined:not(.mud-disabled):hover .mud-input-outlined-border {
    border-color: color-mix(in srgb, var(--rp2-brand-green) 45%, var(--rp2-line-strong));
}

.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--rp2-brand-green);
    border-width: 1.5px;
    box-shadow: var(--rp2-focus-ring);
}

.mud-input.mud-input-outlined .mud-input-slot {
    font-size: .9375rem;
}

.mud-input-label.mud-input-label-animated.mud-input-label-text-primary,
.mud-input-label.mud-input-label-animated.mud-input-label-text-primary.mud-input-label-shrink {
    color: var(--rp2-brand-green);
}

/* Popovers (selects, autocompletes, menús): capa elevada limpia */
.mud-popover {
    border-radius: var(--rp2-radius-md);
    border: 1px solid var(--rp2-line);
    box-shadow: var(--rp2-shadow-lg);
    overflow: hidden;
}

.mud-popover .mud-list-item:hover {
    background-color: var(--rp2-surface-2);
}

.mud-popover .mud-list-item.mud-list-item-selected,
.mud-popover .mud-list-item.mud-selected-item {
    background-color: var(--rp2-brand-lime-soft);
    color: var(--rp2-accent-text);
}

/* Tablas: contenedor con borde, líneas finas, header sticky con fondo sólido,
   hover con barra lima */
.mud-table {
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-md);
    overflow: hidden;
    background-color: var(--rp2-surface);
}

.mud-table-root .mud-table-head .mud-table-cell {
    background-color: var(--rp2-surface-2);
    color: var(--rp2-ink-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rp2-line-strong);
    padding-top: 10px;
    padding-bottom: 10px;
}

.mud-table-root .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--rp2-line);
    color: var(--rp2-ink);
    padding-top: 11px;
    padding-bottom: 11px;
}

.mud-table-root .mud-table-body .mud-table-row {
    transition: background-color var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: color-mix(in srgb, var(--rp2-brand-lime) 9%, transparent);
}

.mud-table-root .mud-table-body .mud-table-row:hover > .mud-table-cell:first-child {
    box-shadow: inset 3px 0 0 0 var(--rp2-brand-lime);
}

.mud-table-root .mud-table-body .mud-table-row.mud-table-row-selected > .mud-table-cell,
.mud-table-root .mud-table-body .mud-table-row.mud-selected > .mud-table-cell {
    background-color: var(--rp2-brand-lime-soft);
}

.mud-table-root .mud-table-foot .mud-table-cell {
    background-color: var(--rp2-surface-2);
    font-weight: 600;
    border-top: 1px solid var(--rp2-line-strong);
}

/* Sticky header opcional (clase aplicable a wrapper). */
.rp2-table-sticky .mud-table-head {
    position: sticky;
    top: 0;
    z-index: var(--rp2-z-sticky);
}

.rp2-table-sticky .mud-table-head .mud-table-cell {
    box-shadow: var(--rp2-shadow-xs);
}

/* Celda de cliente enriquecida (avatar + nombre + número) */
.rp2-table-customer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rp2-table-customer__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rp2-table-customer__name {
    font-weight: 500;
    color: var(--rp2-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp2-table-customer__number {
    font-size: .75rem;
    color: var(--rp2-ink-faint);
}

/* Acciones de fila: visibles al hover (y siempre en táctil) */
.rp2-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.mud-table-row:hover .rp2-row-actions,
.rp2-row-actions:focus-within {
    opacity: 1;
}

@media (max-width: 600px) {
    .rp2-row-actions { opacity: 1; }
}

/* Densidad — afecta a TODA la página. Activado por <html class="rp-density-..."> */
.rp-density-comfortable .mud-table-cell {
    padding-top: 11px;
    padding-bottom: 11px;
}

.rp-density-compact .mud-table-cell {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Tabs minimalistas (underline puro, sin fondo) */
.rp2-tabs-minimal.mud-tabs,
.rp2-tabs-minimal .mud-tabs-toolbar,
.rp2-tabs-minimal .mud-tabs-tabbar {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--rp2-ink-muted);
    box-shadow: none !important;
    min-height: 0;
}

.rp2-tabs-minimal .mud-tab {
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 9px 14px;
    min-height: 40px;
    border-bottom: 2px solid transparent;
    color: var(--rp2-ink-muted);
    transition: color var(--rp2-motion-fast) var(--rp2-easing-standard),
                border-color var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-tabs-minimal .mud-tab:hover { color: var(--rp2-ink); }

.rp2-tabs-minimal .mud-tab.mud-tab-active {
    color: var(--rp2-accent-text);
    border-bottom-color: var(--rp2-brand-green);
}

.rp2-tabs-minimal .mud-tab-slider { display: none; }

/* === MudChip === */
.mud-chip {
    border-radius: var(--rp2-radius-sm);
    font-weight: 500;
    font-size: .8125rem;
}

/* === Dialogs === */
.mud-dialog {
    border-radius: var(--rp2-radius-lg);
    border: 1px solid var(--rp2-line);
    box-shadow: var(--rp2-shadow-xl) !important;
}

.mud-dialog-title {
    font-size: 1.125rem;
    font-weight: 600;
    padding: 20px 24px 0;
}

.mud-dialog-content {
    padding: 16px 24px;
    font-size: .9375rem;
}

.mud-dialog-actions {
    padding: 8px 20px 20px;
    gap: 8px;
}

/* === Snackbar (top-right, fuera del flujo) === */
.mud-snackbar {
    border-radius: var(--rp2-radius-md);
    border: 1px solid var(--rp2-line);
    box-shadow: var(--rp2-shadow-lg) !important;
    font-size: .875rem;
}

/* === Alertas === */
.mud-alert {
    border-radius: var(--rp2-radius-md);
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* === Progreso === */
.mud-progress-linear {
    border-radius: var(--rp2-radius-pill);
    overflow: hidden;
}

/* =====================================================================
   2. PageHeader + Breadcrumbs
   ===================================================================== */

.rp2-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rp2-space-4);
    margin-bottom: var(--rp2-space-5);
}

.rp2-page-header__title {
    font-family: var(--rp2-font-ui);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
    color: var(--rp2-ink);
}

.rp2-page-header__subtitle {
    margin: 4px 0 0;
    font-size: .875rem;
    color: var(--rp2-ink-muted);
}

.rp2-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--rp2-space-2);
    flex-shrink: 0;
}

.rp2-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 5px;
    font-size: .8125rem;
}

.rp2-breadcrumbs__crumb {
    color: var(--rp2-ink-muted);
    text-decoration: none;
    border-radius: var(--rp2-radius-xs);
    padding: 2px 4px;
    transition: color var(--rp2-motion-fast) var(--rp2-easing-standard),
                background-color var(--rp2-motion-fast) var(--rp2-easing-standard);
}

a.rp2-breadcrumbs__crumb:hover {
    color: var(--rp2-accent-text);
    background-color: color-mix(in srgb, var(--rp2-brand-green) 8%, transparent);
}

.rp2-breadcrumbs__crumb--current {
    color: var(--rp2-ink);
    font-weight: 500;
}

.rp2-breadcrumbs__sep { color: var(--rp2-ink-faint); font-size: 15px; }

/* =====================================================================
   3. StatusChip + badges
   ===================================================================== */

.rp2-cell-secondary { color: var(--rp2-ink-muted); }
.rp2-text-muted { color: var(--rp2-ink-muted); }
.rp2-cell-empty { color: var(--rp2-ink-faint); }

.rp2-select-create {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rp2-accent-text);
    font-weight: 500;
}

.rp2-trash-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--rp2-radius-sm);
    background: var(--rp2-info-soft);
    color: var(--rp2-info);
    border: 1px solid color-mix(in srgb, var(--rp2-info) 20%, transparent);
    font-size: .8125rem;
}

.rp2-qty-input {
    width: 68px;
}

.rp2-qty-input .mud-input-control { margin: 0; }

.rp2-dim-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--rp2-radius-pill);
    background: var(--rp2-surface-3);
    color: var(--rp2-ink-muted);
    font-size: .75rem;
    white-space: nowrap;
}

.rp2-discount-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--rp2-radius-pill);
    background: var(--rp2-warning-soft);
    color: var(--rp2-warning);
    border: 1px solid color-mix(in srgb, var(--rp2-warning) 22%, transparent);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.rp2-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--rp2-radius-pill);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.5;
    border: 1px solid transparent;
}

.rp2-status-chip::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}

.rp2-status--neutral {
    color: var(--rp2-ink-muted);
    background: var(--rp2-surface-3);
    border-color: color-mix(in srgb, var(--rp2-ink-muted) 18%, transparent);
}
.rp2-status--info {
    color: var(--rp2-info);
    background: var(--rp2-info-soft);
    border-color: color-mix(in srgb, var(--rp2-info) 22%, transparent);
}
.rp2-status--success {
    color: var(--rp2-success);
    background: var(--rp2-success-soft);
    border-color: color-mix(in srgb, var(--rp2-success) 22%, transparent);
}
.rp2-status--warning {
    color: var(--rp2-warning);
    background: var(--rp2-warning-soft);
    border-color: color-mix(in srgb, var(--rp2-warning) 22%, transparent);
}
.rp2-status--danger {
    color: var(--rp2-danger);
    background: var(--rp2-danger-soft);
    border-color: color-mix(in srgb, var(--rp2-danger) 22%, transparent);
}
.rp2-status--ink {
    color: var(--rp2-ink);
    background: var(--rp2-surface-3);
    border-color: color-mix(in srgb, var(--rp2-ink) 16%, transparent);
}

/* =====================================================================
   4. KPI + Trend
   ===================================================================== */

.rp2-kpi {
    position: relative;
    height: 100%;
    background: var(--rp2-surface);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-lg);
    padding: var(--rp2-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--rp2-space-2);
    box-shadow: var(--rp2-shadow-xs);
    transition: box-shadow var(--rp2-motion-base) var(--rp2-easing-standard),
                transform var(--rp2-motion-base) var(--rp2-easing-standard),
                border-color var(--rp2-motion-base) var(--rp2-easing-standard);
}

.rp2-kpi:hover {
    box-shadow: var(--rp2-shadow-md);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--rp2-brand-green) 32%, var(--rp2-line));
}

.rp2-kpi__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rp2-space-3);
}

.rp2-kpi__label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rp2-ink-muted);
}

.rp2-kpi__value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--rp2-ink);
}

.rp2-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--rp2-radius-md);
    background: var(--rp2-gradient-tile);
    color: #FFFFFF;
    box-shadow: var(--rp2-shadow-brand);
    flex-shrink: 0;
}

.rp2-kpi__caption {
    font-size: .8125rem;
    color: var(--rp2-ink-muted);
}

.rp2-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8125rem;
    font-weight: 600;
}

.rp2-trend__icon { font-size: 17px; }

.rp2-trend__value { font-family: var(--rp2-font-num); }

.rp2-trend--up   { color: var(--rp2-success); }
.rp2-trend--down { color: var(--rp2-danger); }
.rp2-trend--flat { color: var(--rp2-ink-muted); }

.rp2-trend__caption { color: var(--rp2-ink-muted); font-weight: 400; }

/* =====================================================================
   5. EmptyState + Skeleton
   ===================================================================== */

.rp2-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--rp2-space-2);
    padding: var(--rp2-space-7) var(--rp2-space-5);
}

.rp2-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: var(--rp2-ink-faint);
    background: var(--rp2-surface-3);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-lg);
    padding: var(--rp2-space-3);
}

.rp2-empty__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rp2-ink);
}

.rp2-empty__message {
    font-size: .875rem;
    color: var(--rp2-ink-muted);
    max-width: 420px;
}

.rp2-empty__actions { margin-top: var(--rp2-space-3); }

.rp2-skel {
    display: inline-block;
    background: linear-gradient(90deg, var(--rp2-surface-3) 25%, var(--rp2-line) 50%, var(--rp2-surface-3) 75%);
    background-size: 200% 100%;
    animation: rp-skel-shimmer 1.4s infinite;
    border-radius: var(--rp2-radius-xs);
}

.rp2-skel--text { height: 12px; border-radius: var(--rp2-radius-pill); }
.rp2-skel--rect { height: 80px; border-radius: var(--rp2-radius-md); }
.rp2-skel--circle { border-radius: 50%; }

/* =====================================================================
   6. FilterBar + FilterChips + FilterPills
   ===================================================================== */

.rp2-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rp2-space-2);
    margin-bottom: var(--rp2-space-4);
}

.rp2-filter-bar__search { flex: 1 1 220px; max-width: 380px; }
.rp2-filter-bar__filters { display: flex; align-items: center; gap: var(--rp2-space-2); }
.rp2-filter-bar__chips { display: flex; flex-wrap: wrap; gap: var(--rp2-space-2); }
.rp2-filter-bar__spacer { flex: 1; }
.rp2-filter-bar__toolbar { display: flex; align-items: center; gap: var(--rp2-space-2); }

.rp2-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rp2-space-2);
    width: 100%;
}

.rp2-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 5px 3px 11px;
    border-radius: var(--rp2-radius-pill);
    background: var(--rp2-brand-lime-soft);
    color: var(--rp2-accent-text);
    border: 1px solid color-mix(in srgb, var(--rp2-brand-green) 20%, transparent);
    font-size: .75rem;
    font-weight: 600;
}

.rp2-filter-chip__label { white-space: nowrap; }

.rp2-filter-chip__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: 50%;
    padding: 2px;
    transition: background var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-filter-chip__close:hover { background: color-mix(in srgb, currentColor 16%, transparent); }

/* =====================================================================
   7. ConfirmDialog
   ===================================================================== */

.rp2-confirm {
    display: flex;
    align-items: flex-start;
    gap: var(--rp2-space-4);
    padding: var(--rp2-space-2) 0;
}

.rp2-confirm__body { min-width: 0; }

.rp2-confirm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--rp2-radius-lg);
    flex-shrink: 0;
}

.rp2-confirm__icon--danger  { background: var(--rp2-danger-soft); color: var(--rp2-danger); }
.rp2-confirm__icon--warning { background: var(--rp2-warning-soft); color: var(--rp2-warning); }
.rp2-confirm__icon--success { background: var(--rp2-success-soft); color: var(--rp2-success); }
.rp2-confirm__icon--info    { background: var(--rp2-info-soft); color: var(--rp2-info); }
.rp2-confirm__icon--neutral { background: var(--rp2-surface-3); color: var(--rp2-ink-muted); }

.rp2-confirm__message { color: var(--rp2-ink); font-size: .9375rem; line-height: 1.55; }

/* =====================================================================
   8. Shell top-nav (AppBar + navegación horizontal + drawer móvil)
   ===================================================================== */

.rp2-appbar {
    background: color-mix(in srgb, var(--rp2-surface) 86%, transparent) !important;
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--rp2-line);
    box-shadow: var(--rp2-shadow-xs) !important;
}

.rp2-appbar .mud-icon-button {
    color: var(--rp2-ink-muted);
    transition: color var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-appbar .mud-icon-button:hover { color: var(--rp2-ink); }

.rp2-brand {
    display: inline-flex;
    align-items: center;
    margin-right: var(--rp2-space-3);
    flex-shrink: 0;
}

.rp2-brand__logo { height: 28px; width: auto; }

.rp2-navtop {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    overflow-x: clip;
    scrollbar-width: none;
}

.rp2-navtop::-webkit-scrollbar { display: none; }

.rp2-navtop__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: none;
    background: transparent;
    border-radius: var(--rp2-radius-pill);
    font-family: var(--rp2-font-ui);
    font-size: .875rem;
    font-weight: 500;
    color: var(--rp2-ink-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--rp2-motion-fast) var(--rp2-easing-standard),
                color var(--rp2-motion-fast) var(--rp2-easing-standard),
                box-shadow var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-navtop__item:hover {
    background: var(--rp2-surface-2);
    color: var(--rp2-ink);
}

.rp2-navtop__item--active {
    background: var(--rp2-nav-active-bg);
    color: var(--rp2-nav-active-fg);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--rp2-nav-active-ring);
}

.rp2-navtop__item--active:hover {
    background: var(--rp2-nav-active-bg);
    color: var(--rp2-nav-active-fg);
}

.rp2-navtop__item--featured {
    color: var(--rp2-accent-text);
    font-weight: 600;
}

.rp2-navtop__item--featured .mud-icon-root { color: var(--rp2-brand-green); }

.rp2-navtop__item--featured:hover {
    background: color-mix(in srgb, var(--rp2-brand-green) 10%, transparent);
    color: var(--rp2-accent-text);
}

/* Dropdown custom de Catálogo (menú inline con cierre vía JS) */
.rp2-navtop-dropdown {
    position: relative;
    display: inline-flex;
}

.rp2-navtop-dropdown__trigger--open {
    background: var(--rp2-surface-2);
    color: var(--rp2-ink);
}

.rp2-navtop-dropdown__chev {
    transition: transform var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-navtop-dropdown__trigger--open .rp2-navtop-dropdown__chev {
    transform: rotate(180deg);
}

.rp2-navtop-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--rp2-z-dropdown);
    min-width: 240px;
    background: var(--rp2-surface);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-md);
    box-shadow: var(--rp2-shadow-lg);
    padding: 6px;
    margin-top: 4px;
    animation: rp-scale-in var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-navtop-dropdown__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--rp2-radius-sm);
    font-size: .875rem;
    font-weight: 500;
    color: var(--rp2-ink);
    text-decoration: none;
    transition: background var(--rp2-motion-fast) var(--rp2-easing-standard),
                color var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-navtop-dropdown__item:hover { background: var(--rp2-surface-2); }

.rp2-navtop-dropdown__item--active {
    background: var(--rp2-nav-active-bg);
    color: var(--rp2-nav-active-fg);
    font-weight: 600;
}

.rp2-navtop-dropdown__divider {
    height: 1px;
    background: var(--rp2-line);
    margin: 4px 6px;
}

/* Variante vertical (drawer móvil) */
.rp2-navtop--vertical {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--rp2-space-2);
    overflow-x: visible;
    overflow-y: visible;
}

.rp2-navtop--vertical .rp2-navtop__item {
    justify-content: flex-start;
    padding: 10px 14px;
    border-radius: var(--rp2-radius-md);
}

.rp2-navtop-dropdown--vertical {
    display: block;
}

.rp2-navtop-dropdown--vertical .rp2-navtop-dropdown__trigger {
    width: 100%;
    justify-content: flex-start;
}

.rp2-navtop-dropdown--vertical .rp2-navtop-dropdown__menu {
    position: static;
    margin-top: 4px;
    box-shadow: none;
    border: 1px solid var(--rp2-line);
}

/* Drawer móvil (temporary, superficie neutra) */
.rp2-drawer-mobile {
    background: var(--rp2-surface) !important;
    border-right: 1px solid var(--rp2-line);
}

.rp2-drawer-mobile .mud-drawer-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.rp2-drawer-mobile .rp2-navtop--vertical { flex: 1; }

.rp2-drawer-header {
    padding: var(--rp2-space-4) var(--rp2-space-4) var(--rp2-space-2);
    border-bottom: 1px solid var(--rp2-line);
}

.rp2-drawer-footer {
    padding: var(--rp2-space-3) var(--rp2-space-4);
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--rp2-line);
    font-size: .75rem;
    color: var(--rp2-ink-muted);
}

.rp2-drawer-footer__app { font-weight: 600; color: var(--rp2-ink); }

.rp2-main {
    padding-top: var(--rp2-appbar-height);
}

.rp2-login-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--rp2-space-5);
    background:
        radial-gradient(1100px 520px at 12% 8%, color-mix(in srgb, var(--rp2-brand-lime) 12%, transparent), transparent 62%),
        radial-gradient(900px 480px at 88% 92%, color-mix(in srgb, var(--rp2-brand-green) 10%, transparent), transparent 60%),
        var(--rp2-surface-2);
}

/* =====================================================================
   9. Search trigger + Kbd (AppBar)
   ===================================================================== */

.rp2-search-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 300px;
    max-width: 40vw;
    height: 36px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-control);
    background: var(--rp2-surface-2);
    color: var(--rp2-ink-muted);
    font-family: var(--rp2-font-ui);
    font-size: .875rem;
    cursor: pointer;
    transition: border-color var(--rp2-motion-fast) var(--rp2-easing-standard),
                box-shadow var(--rp2-motion-fast) var(--rp2-easing-standard),
                background-color var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-search-trigger:hover {
    border-color: color-mix(in srgb, var(--rp2-brand-green) 40%, var(--rp2-line));
    background: var(--rp2-surface);
    box-shadow: var(--rp2-shadow-xs);
}

.rp2-search-trigger__icon { color: var(--rp2-ink-muted); }
.rp2-search-trigger__placeholder { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rp2-kbd {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    height: 21px;
    border: 1px solid var(--rp2-line-strong);
    border-bottom-width: 2px;
    border-radius: var(--rp2-radius-xs);
    background: var(--rp2-surface);
    color: var(--rp2-ink-muted);
    font-family: var(--rp2-font-num);
    font-size: .6875rem;
    line-height: 1;
}

/* =====================================================================
   10. UserPill
   ===================================================================== */

.rp2-user-pill-wrap { position: relative; }

.rp2-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: none;
    background: transparent;
    border-radius: var(--rp2-radius-pill);
    cursor: pointer;
    transition: background var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-user-pill:hover { background: var(--rp2-surface-2); }

.rp2-user-pill__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--rp2-gradient-tile);
    color: white;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 2px var(--rp2-surface), 0 0 0 3px color-mix(in srgb, var(--rp2-brand-lime) 45%, transparent);
}

.rp2-user-pill__name {
    font-size: .875rem;
    font-weight: 500;
    color: var(--rp2-ink);
}

.rp2-user-pill__chev { color: var(--rp2-ink-muted); }

.rp2-user-pill__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 230px;
    background: var(--rp2-surface);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-md);
    box-shadow: var(--rp2-shadow-lg);
    padding: 6px;
    z-index: var(--rp2-z-dropdown);
    animation: rp-scale-in var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-user-pill__header {
    padding: 8px 10px 6px;
}

.rp2-user-pill__header-name {
    font-size: .875rem;
    font-weight: 600;
    color: var(--rp2-ink);
}

.rp2-user-pill__header-mail {
    font-size: .75rem;
    color: var(--rp2-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp2-user-pill__divider {
    height: 1px;
    background: var(--rp2-line);
    margin: 4px 0;
}

.rp2-user-pill__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--rp2-radius-sm);
    font-size: .875rem;
    color: var(--rp2-ink);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--rp2-font-ui);
    transition: background var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-user-pill__item:hover { background: var(--rp2-surface-2); }

.rp2-user-pill__item--danger { color: var(--rp2-danger); }
.rp2-user-pill__item--danger:hover { background: var(--rp2-danger-soft); }

/* =====================================================================
   11. CommandPalette v2 (spotlight modal)
   ===================================================================== */

.rp2-cmdk-backdrop {
    position: fixed;
    inset: 0;
    background: var(--rp2-backdrop);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--rp2-z-modal);
    animation: rp-fade-in var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-cmdk {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 32px));
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    background: var(--rp2-surface);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-lg);
    box-shadow: var(--rp2-shadow-xl);
    z-index: var(--rp2-z-modal);
    overflow: hidden;
    animation: rp-scale-in var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-cmdk__input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rp2-line);
}

.rp2-cmdk__search-icon { color: var(--rp2-ink-muted); }

.rp2-cmdk__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--rp2-ink);
    font-family: var(--rp2-font-ui);
    font-size: 1rem;
}

.rp2-cmdk__input::placeholder { color: var(--rp2-ink-muted); }

.rp2-cmdk__esc {
    border: 1px solid var(--rp2-line-strong);
    background: var(--rp2-surface-2);
    color: var(--rp2-ink-muted);
    cursor: pointer;
    border-radius: var(--rp2-radius-xs);
}

.rp2-cmdk__results {
    overflow-y: auto;
    padding: 6px;
}

.rp2-cmdk__group-label {
    padding: 8px 10px 4px;
    color: var(--rp2-ink-muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.rp2-cmdk__row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: var(--rp2-radius-sm);
    color: var(--rp2-ink);
    text-align: left;
    cursor: pointer;
    font-family: var(--rp2-font-ui);
    font-size: .875rem;
    transition: background var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-cmdk__row:hover,
.rp2-cmdk__row--selected {
    background: var(--rp2-surface-2);
}

.rp2-cmdk__row--selected {
    background: var(--rp2-brand-lime-soft);
    box-shadow: inset 3px 0 0 0 var(--rp2-brand-lime);
}

.rp2-cmdk__row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--rp2-radius-sm);
    background: var(--rp2-surface-3);
    color: var(--rp2-ink-muted);
    flex-shrink: 0;
}

.rp2-cmdk__row--selected .rp2-cmdk__row-icon {
    background: var(--rp2-gradient-tile);
    color: #FFFFFF;
}

.rp2-cmdk__row-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rp2-cmdk__row-title { font-weight: 500; }

.rp2-cmdk__row-subtitle {
    color: var(--rp2-ink-muted);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp2-cmdk__row-arrow {
    color: var(--rp2-ink-faint);
    opacity: 0;
    transition: opacity var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-cmdk__row--selected .rp2-cmdk__row-arrow,
.rp2-cmdk__row:hover .rp2-cmdk__row-arrow { opacity: 1; }

.rp2-cmdk__hint {
    padding: 10px 12px;
    color: var(--rp2-ink-muted);
    font-size: .875rem;
}

.rp2-cmdk__footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    border-top: 1px solid var(--rp2-line);
    color: var(--rp2-ink-muted);
    font-size: .6875rem;
}

.rp2-cmdk__footer .rp2-kbd { background: var(--rp2-surface-2); }

/* =====================================================================
   12. Login v2
   ===================================================================== */

.rp2-login {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: calc(100vh - var(--rp2-space-5) * 2);
    max-width: 1120px;
    width: 100%;
    background: var(--rp2-surface);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-xl);
    overflow: hidden;
    box-shadow: var(--rp2-shadow-xl);
    margin: 0;
}

.rp2-login__aside {
    background: var(--rp2-gradient-hero);
    color: white;
    padding: var(--rp2-space-7);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.rp2-login__brand { display: inline-flex; align-items: center; }
.rp2-login__brand img { height: 36px; width: auto; }

.rp2-login__brush {
    position: absolute;
    left: -10%;
    right: -10%;
    width: 120%;
    height: 280px;
    pointer-events: none;
    transform-origin: center;
    animation: rp-brush-drift 9s ease-in-out infinite;
}

.rp2-login__brush--top { top: -40px; }

.rp2-login__brush--bottom {
    bottom: -40px;
    transform: scaleX(-1);
    animation-delay: -4.5s;
}

.rp2-login__tagline {
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    max-width: 340px;
}

.rp2-login__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rp2-space-2);
}

.rp2-login__pill {
    font-size: .75rem;
    padding: 5px 12px;
    border-radius: var(--rp2-radius-pill);
    background: color-mix(in srgb, white 12%, transparent);
    border: 1px solid color-mix(in srgb, white 22%, transparent);
    color: color-mix(in srgb, white 88%, transparent);
}

.rp2-login__panel {
    padding: var(--rp2-space-7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--rp2-surface);
}

.rp2-login__title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--rp2-ink);
    margin: 0 0 4px;
}

.rp2-login__subtitle {
    font-size: .875rem;
    color: var(--rp2-ink-muted);
    margin: 0 0 var(--rp2-space-5);
}

.rp2-login__field { position: relative; margin-bottom: var(--rp2-space-4); }

.rp2-login__field input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--rp2-line-strong);
    border-radius: var(--rp2-radius-control);
    background: var(--rp2-surface);
    color: var(--rp2-ink);
    font-family: var(--rp2-font-ui);
    font-size: .9375rem;
    transition: border-color var(--rp2-motion-fast) var(--rp2-easing-standard),
                box-shadow var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-login__field input:hover {
    border-color: color-mix(in srgb, var(--rp2-brand-green) 45%, var(--rp2-line-strong));
}

.rp2-login__field input:focus {
    outline: none;
    border-color: var(--rp2-brand-green);
    box-shadow: var(--rp2-focus-ring);
}

.rp2-login__field input::placeholder { color: var(--rp2-ink-faint); }

.rp2-login__toggle-pass {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--rp2-ink-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--rp2-radius-sm);
    transition: color var(--rp2-motion-fast) var(--rp2-easing-standard),
                background var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-login__toggle-pass:hover {
    color: var(--rp2-ink);
    background: var(--rp2-surface-2);
}

.rp2-login__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--rp2-space-4);
}

.rp2-login__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    color: var(--rp2-ink-muted);
    cursor: pointer;
    user-select: none;
}

.rp2-login__check input[type="checkbox"] {
    accent-color: var(--rp2-brand-green);
    width: 16px;
    height: 16px;
}

.rp2-login__footer {
    font-size: .75rem;
    color: var(--rp2-ink-muted);
    text-align: center;
    margin: var(--rp2-space-6) 0 0;
}

.rp2-login__error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--rp2-radius-sm);
    background: var(--rp2-danger-soft);
    color: var(--rp2-danger);
    border: 1px solid color-mix(in srgb, var(--rp2-danger) 22%, transparent);
    font-size: .875rem;
    margin-bottom: var(--rp2-space-4);
}

.rp2-login__submit {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: var(--rp2-radius-control);
    background: var(--rp2-gradient-primary);
    color: white;
    font-family: var(--rp2-font-ui);
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--rp2-shadow-xs);
    transition: filter var(--rp2-motion-fast) var(--rp2-easing-standard),
                box-shadow var(--rp2-motion-fast) var(--rp2-easing-standard),
                transform var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-login__submit:hover {
    filter: brightness(1.04);
    box-shadow: var(--rp2-shadow-brand);
    transform: translateY(-1px);
}

.rp2-login__submit:active {
    transform: translateY(0);
    box-shadow: var(--rp2-shadow-xs);
}

.rp2-login__submit:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* =====================================================================
   13. Quotes (lista)
   ===================================================================== */

.rp2-quotes-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rp2-space-3);
    margin-bottom: var(--rp2-space-3);
}

.rp2-quotes-count {
    font-size: .8125rem;
    color: var(--rp2-ink-muted);
}

/* =====================================================================
   14. QuoteEditor — líneas, acabados, totales, FAB
   ===================================================================== */

.rp2-editor-card {
    background: var(--rp2-surface);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-lg);
    padding: var(--rp2-space-5);
    box-shadow: var(--rp2-shadow-xs);
}

.rp2-editor-card__title {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rp2-ink-muted);
    margin-bottom: var(--rp2-space-3);
}

.rp2-finishings-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rp2-finishing-row {
    display: flex;
    align-items: center;
    gap: var(--rp2-space-2);
    padding: 3px 6px;
    border-radius: var(--rp2-radius-sm);
    font-size: .8125rem;
    transition: background var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-finishing-row:hover { background: var(--rp2-surface-2); }

.rp2-finishing-name {
    flex: 1;
    color: var(--rp2-ink);
}

.rp2-finishing-amount {
    font-family: var(--rp2-font-num);
    color: var(--rp2-ink-muted);
    white-space: nowrap;
}

.rp2-finishing-qty {
    font-family: var(--rp2-font-num);
    color: var(--rp2-ink-faint);
    min-width: 32px;
    text-align: right;
}

.rp2-totals-panel {
    background: var(--rp2-surface);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-lg);
    padding: var(--rp2-space-5);
    box-shadow: var(--rp2-shadow-sm);
    position: sticky;
    top: calc(var(--rp2-appbar-height) + 16px);
}

.rp2-totals-panel__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    font-size: .875rem;
    color: var(--rp2-ink-muted);
}

.rp2-totals-panel__row strong {
    font-family: var(--rp2-font-num);
    font-weight: 600;
    color: var(--rp2-ink);
}

.rp2-totals-panel__divider {
    height: 1px;
    background: var(--rp2-line);
    margin: var(--rp2-space-2) 0;
}

.rp2-totals-panel__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--rp2-space-2);
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--rp2-font-num);
    color: var(--rp2-accent-text);
}

.rp2-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: var(--rp2-z-dropdown);
}

.rp2-calculator-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--rp2-radius-pill);
    background: var(--rp2-warning-soft);
    color: var(--rp2-warning);
    border: 1px solid color-mix(in srgb, var(--rp2-warning) 22%, transparent);
    font-size: .75rem;
    font-weight: 600;
}

.rp2-calculator-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: rp-pulse 2s var(--rp2-easing-standard) infinite;
}

/* =====================================================================
   15. Reports — segmented + greeting + ranking
   ===================================================================== */

.rp2-segmented {
    display: inline-flex;
    padding: 4px;
    gap: 2px;
    background: var(--rp2-surface-3);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-md);
}

.rp2-segmented__item {
    border: none;
    background: transparent;
    padding: 5px 16px;
    border-radius: var(--rp2-radius-control);
    font-family: var(--rp2-font-ui);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--rp2-ink-muted);
    cursor: pointer;
    transition: background var(--rp2-motion-fast) var(--rp2-easing-standard),
                color var(--rp2-motion-fast) var(--rp2-easing-standard),
                box-shadow var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-segmented__item:hover { color: var(--rp2-ink); }

.rp2-segmented__item--active {
    background: var(--rp2-surface);
    color: var(--rp2-ink);
    box-shadow: var(--rp2-shadow-xs);
    font-weight: 600;
}

.rp2-hero-greeting {
    margin-bottom: var(--rp2-space-5);
}

.rp2-hero-greeting__title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.rp2-hero-greeting__sub {
    font-size: .875rem;
    color: var(--rp2-ink-muted);
    margin: 4px 0 0;
}

.rp2-ranking-bar {
    display: flex;
    align-items: center;
    gap: var(--rp2-space-2);
    font-size: .8125rem;
}

.rp2-ranking-bar__fill {
    height: 7px;
    border-radius: var(--rp2-radius-pill);
    background: var(--rp2-gradient-brand);
    min-width: 2px;
}

/* =====================================================================
   16. Dashboard v2 (/) — KPIs + kanban + actividad
   ===================================================================== */

.rp2-kpi__spark {
    width: 100%;
    height: 30px;
    margin-top: var(--rp2-space-1);
}

.rp2-kpi__spark-line {
    stroke: var(--rp2-brand-green);
    stroke-width: 1.75;
    vector-effect: non-scaling-stroke;
}

.rp2-kpi__spark-fill {
    fill: color-mix(in srgb, var(--rp2-brand-green) 16%, transparent);
    stroke: none;
}

.rp2-kanban {
    display: flex;
    gap: var(--rp2-space-3);
    overflow-x: auto;
    padding-bottom: var(--rp2-space-2);
    align-items: flex-start;
}

.rp2-kanban__col {
    flex: 1 1 0;
    min-width: 148px;
    background: var(--rp2-surface-2);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-lg);
    display: flex;
    flex-direction: column;
    max-height: 500px;
}

.rp2-kanban__col-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 12px;
    border-bottom: 1px solid var(--rp2-line);
}

.rp2-kanban__col-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rp2-kanban__col-dot--neutral { background: var(--rp2-ink-faint); }
.rp2-kanban__col-dot--info    { background: var(--rp2-info); }
.rp2-kanban__col-dot--success { background: var(--rp2-success); }
.rp2-kanban__col-dot--warning { background: var(--rp2-warning); }
.rp2-kanban__col-dot--danger  { background: var(--rp2-danger); }
.rp2-kanban__col-dot--ink     { background: var(--rp2-ink); }

.rp2-kanban__col-title {
    flex: 1;
    min-width: 0;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--rp2-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp2-kanban__col-count {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--rp2-ink-muted);
    background: var(--rp2-surface-3);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-pill);
    padding: 1px 8px;
}

.rp2-kanban__col-body {
    padding: var(--rp2-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--rp2-space-2);
    overflow-y: auto;
}

.rp2-kanban__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 89px;
    border: 1px dashed var(--rp2-line-strong);
    border-radius: var(--rp2-radius-md);
    padding: var(--rp2-space-3);
    font-size: .75rem;
    color: var(--rp2-ink-faint);
    text-align: center;
}

.rp2-kanban__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 11px 12px;
    background: var(--rp2-surface);
    border: 1px solid var(--rp2-line);
    border-left-width: 3px;
    border-radius: var(--rp2-radius-md);
    text-align: left;
    cursor: pointer;
    font-family: var(--rp2-font-ui);
    box-shadow: var(--rp2-shadow-xs);
    transition: transform var(--rp2-motion-fast) var(--rp2-easing-standard),
                box-shadow var(--rp2-motion-fast) var(--rp2-easing-standard),
                border-color var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-kanban__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rp2-shadow-md);
    border-color: color-mix(in srgb, var(--rp2-brand-green) 32%, var(--rp2-line));
}

.rp2-kanban__card--neutral { border-left-color: var(--rp2-ink-faint); }
.rp2-kanban__card--info    { border-left-color: var(--rp2-info); }
.rp2-kanban__card--success { border-left-color: var(--rp2-success); }
.rp2-kanban__card--warning { border-left-color: var(--rp2-warning); }
.rp2-kanban__card--danger  { border-left-color: var(--rp2-danger); }
.rp2-kanban__card--ink     { border-left-color: var(--rp2-ink); }

.rp2-kanban__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.rp2-kanban__card-number {
    flex: 1;
    min-width: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--rp2-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp2-kanban__card-arrow {
    flex-shrink: 0;
    color: var(--rp2-ink-faint);
    opacity: 0;
    transition: opacity var(--rp2-motion-fast) var(--rp2-easing-standard),
                color var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-kanban__card:hover .rp2-kanban__card-arrow {
    opacity: 1;
    color: var(--rp2-brand-green);
}

.rp2-kanban__card-customer {
    font-size: .875rem;
    font-weight: 500;
    color: var(--rp2-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp2-kanban__card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.rp2-kanban__card-total {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--rp2-accent-text);
}

.rp2-kanban__card-valid {
    font-size: .6875rem;
    color: var(--rp2-ink-faint);
}

.rp2-recent {
    display: flex;
    flex-direction: column;
}

.rp2-recent__row {
    display: flex;
    align-items: center;
    gap: var(--rp2-space-3);
    padding: 10px 8px;
    border-bottom: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-sm);
    text-decoration: none;
    transition: background var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-recent__row:last-child { border-bottom: none; }

.rp2-recent__row:hover { background: var(--rp2-surface-2); }

.rp2-recent__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rp2-recent__number {
    font-size: .875rem;
    font-weight: 600;
    color: var(--rp2-ink);
}

.rp2-recent__customer {
    font-size: .8125rem;
    color: var(--rp2-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp2-recent__amount {
    font-size: .875rem;
    font-weight: 600;
    color: var(--rp2-ink);
    white-space: nowrap;
}

.rp2-recent__date {
    font-size: .75rem;
    color: var(--rp2-ink-faint);
    white-space: nowrap;
}

/* =====================================================================
   16b. Stepper
   ===================================================================== */

.rp2-stepper {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.rp2-stepper__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    position: relative;
    min-width: 0;
}

.rp2-stepper__step::before {
    content: "";
    position: absolute;
    top: 13px;
    left: calc(-50% + 13px);
    right: calc(50% + 13px);
    height: 2px;
    background: var(--rp2-line-strong);
}

.rp2-stepper__step:first-child::before { display: none; }

.rp2-stepper__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--rp2-surface-3);
    color: var(--rp2-ink-faint);
    border: 1px solid var(--rp2-line-strong);
    z-index: 1;
    font-size: .75rem;
}

.rp2-stepper__num { font-family: var(--rp2-font-num); }

.rp2-stepper__label {
    font-size: .75rem;
    color: var(--rp2-ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.rp2-stepper__step--done::before { background: var(--rp2-brand-green); }

.rp2-stepper__step--done .rp2-stepper__dot {
    background: var(--rp2-gradient-brand);
    border-color: transparent;
    color: white;
}

.rp2-stepper__step--done .rp2-stepper__label { color: var(--rp2-ink-muted); }

.rp2-stepper__step--current::before { background: var(--rp2-brand-green); }

.rp2-stepper__step--current .rp2-stepper__dot {
    background: var(--rp2-surface);
    border-color: var(--rp2-brand-green);
    color: var(--rp2-accent-text);
    box-shadow: var(--rp2-shadow-glow-lime);
    font-weight: 600;
}

.rp2-stepper__step--current .rp2-stepper__label {
    color: var(--rp2-accent-text);
    font-weight: 600;
}

.rp2-stepper--terminal .rp2-stepper__step--terminal .rp2-stepper__dot {
    background: var(--rp2-danger);
    border-color: var(--rp2-danger);
    color: white;
}

.rp2-stepper--terminal .rp2-stepper__step--terminal .rp2-stepper__label {
    color: var(--rp2-danger);
    font-weight: 600;
}

/* =====================================================================
   16c. Avatar
   ===================================================================== */

.rp2-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    letter-spacing: .02em;
    flex-shrink: 0;
    user-select: none;
}

.rp2-avatar--sm { width: 30px; height: 30px; font-size: .75rem; }
.rp2-avatar--md { width: 38px; height: 38px; font-size: .8125rem; }

.rp2-avatar--0 { background: #E8F3DC; color: #33691E; }
.rp2-avatar--1 { background: #E3F0FB; color: #1A5276; }
.rp2-avatar--2 { background: #FDEEDB; color: #8C4E00; }
.rp2-avatar--3 { background: #FCE3E3; color: #9C2B2B; }
.rp2-avatar--4 { background: #EDE7F6; color: #4A2E8E; }
.rp2-avatar--5 { background: #E0F2F1; color: #00695C; }
.rp2-avatar--6 { background: #FBE9E7; color: #9C3C1B; }
.rp2-avatar--7 { background: #ECEFF1; color: #37474F; }

[data-rp-theme="dark"] .rp2-avatar--0 { background: #23331C; color: #AED581; }
[data-rp-theme="dark"] .rp2-avatar--1 { background: #14283A; color: #7EC8F5; }
[data-rp-theme="dark"] .rp2-avatar--2 { background: #3A2A12; color: #F0B35C; }
[data-rp-theme="dark"] .rp2-avatar--3 { background: #3D1B1E; color: #F0909A; }
[data-rp-theme="dark"] .rp2-avatar--4 { background: #2A2140; color: #B39DDB; }
[data-rp-theme="dark"] .rp2-avatar--5 { background: #10302C; color: #6FD3C7; }
[data-rp-theme="dark"] .rp2-avatar--6 { background: #3A211A; color: #F0A58A; }
[data-rp-theme="dark"] .rp2-avatar--7 { background: #232B2F; color: #B0BEC5; }

/* =====================================================================
   16d. Bulk bar + Filter pills
   ===================================================================== */

.rp2-bulk-bar {
    display: flex;
    align-items: center;
    gap: var(--rp2-space-2);
    padding: 9px 14px;
    margin-bottom: var(--rp2-space-3);
    background: var(--rp2-surface);
    border: 1px solid color-mix(in srgb, var(--rp2-brand-green) 45%, var(--rp2-line));
    border-radius: var(--rp2-radius-md);
    box-shadow: var(--rp2-shadow-sm);
    font-size: .875rem;
}

.rp2-bulk-bar__count { font-weight: 600; color: var(--rp2-ink); }

.rp2-bulk-bar__divider {
    width: 1px;
    height: 18px;
    background: var(--rp2-line);
}

.rp2-bulk-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--rp2-space-2);
}

.rp2-bulk-bar__spacer { flex: 1; }

.rp2-bulk-bar__clear {
    border: none;
    background: transparent;
    color: var(--rp2-ink-muted);
    font-family: var(--rp2-font-ui);
    font-size: .8125rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--rp2-radius-xs);
    transition: color var(--rp2-motion-fast) var(--rp2-easing-standard),
                background var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-bulk-bar__clear:hover {
    color: var(--rp2-ink);
    background: var(--rp2-surface-2);
}

.rp2-filter-pills {
    display: flex;
    gap: var(--rp2-space-2);
    overflow-x: auto;
    padding-bottom: 2px;
    margin-bottom: var(--rp2-space-4);
    scrollbar-width: none;
}

.rp2-filter-pills::-webkit-scrollbar { display: none; }

.rp2-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-pill);
    background: var(--rp2-surface);
    color: var(--rp2-ink-muted);
    font-family: var(--rp2-font-ui);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--rp2-motion-fast) var(--rp2-easing-standard),
                background var(--rp2-motion-fast) var(--rp2-easing-standard),
                color var(--rp2-motion-fast) var(--rp2-easing-standard),
                box-shadow var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-filter-pill:hover {
    border-color: color-mix(in srgb, var(--rp2-brand-green) 40%, var(--rp2-line));
    color: var(--rp2-ink);
    box-shadow: var(--rp2-shadow-xs);
}

.rp2-filter-pill--active {
    background: var(--rp2-brand-forest);
    border-color: var(--rp2-brand-forest);
    color: white;
    box-shadow: var(--rp2-shadow-xs);
}

.rp2-filter-pill__count {
    font-size: .6875rem;
    background: var(--rp2-surface-3);
    border-radius: var(--rp2-radius-pill);
    padding: 0 6px;
    color: var(--rp2-ink-muted);
}

.rp2-filter-pill--active .rp2-filter-pill__count {
    background: color-mix(in srgb, white 22%, transparent);
    color: white;
}

[data-rp-theme="dark"] .rp2-filter-pill--active {
    background: var(--rp2-gradient-primary);
    border-color: transparent;
    color: #0B120D;
}

[data-rp-theme="dark"] .rp2-filter-pill--active .rp2-filter-pill__count {
    background: color-mix(in srgb, black 18%, transparent);
    color: #0B120D;
}

/* =====================================================================
   16e. SectionCard (Settings)
   ===================================================================== */

.rp2-section-card {
    background: var(--rp2-surface);
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-lg);
    padding: var(--rp2-space-5);
    box-shadow: var(--rp2-shadow-xs);
}

.rp2-section-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--rp2-space-3);
    margin-bottom: var(--rp2-space-4);
}

.rp2-section-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--rp2-radius-md);
    background: var(--rp2-brand-lime-soft);
    color: var(--rp2-accent-text);
    flex-shrink: 0;
}

.rp2-section-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rp2-ink);
}

.rp2-section-card__desc {
    font-size: .8125rem;
    color: var(--rp2-ink-muted);
    margin-top: 2px;
}

/* =====================================================================
   16f. Settings left-nav
   ===================================================================== */

.rp2-settings-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rp2-settings-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: var(--rp2-radius-sm);
    font-family: var(--rp2-font-ui);
    font-size: .875rem;
    font-weight: 500;
    color: var(--rp2-ink-muted);
    text-align: left;
    cursor: pointer;
    transition: background var(--rp2-motion-fast) var(--rp2-easing-standard),
                color var(--rp2-motion-fast) var(--rp2-easing-standard),
                box-shadow var(--rp2-motion-fast) var(--rp2-easing-standard);
}

.rp2-settings-nav__item:hover {
    background: var(--rp2-surface-2);
    color: var(--rp2-ink);
}

.rp2-settings-nav__item--active {
    background: var(--rp2-nav-active-bg);
    color: var(--rp2-nav-active-fg);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--rp2-nav-active-ring);
}

.rp2-settings-nav__item .mud-icon-root { color: var(--rp2-ink-faint); }
.rp2-settings-nav__item--active .mud-icon-root { color: currentColor; }

.rp2-settings__logo-preview {
    max-height: 120px;
    max-width: 320px;
    border: 1px solid var(--rp2-line);
    border-radius: var(--rp2-radius-md);
    padding: var(--rp2-space-3);
    background: var(--rp2-surface-2);
}

.rp2-settings__logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 320px;
    max-width: 100%;
    height: 120px;
    border: 1px dashed var(--rp2-line-strong);
    border-radius: var(--rp2-radius-md);
    color: var(--rp2-ink-faint);
    font-size: .875rem;
    background: var(--rp2-surface-2);
}

/* =====================================================================
   17. Responsive ≤ 900px / ≤ 600px
   ===================================================================== */

/* Banner de error de Blazor Server (antes vivía en el scoped CSS de MainLayout v1). */
#blazor-error-ui {
    color-scheme: light only;
    background: #FFF8E1;
    color: #5D4037;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    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-ui .reload {
    color: #1B5E20;
    margin-right: 16px;
}

@media (max-width: 900px) {
    .rp2-login { grid-template-columns: 1fr; }
    .rp2-login__aside { display: none; }
}

@media (max-width: 600px) {
    .rp2-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rp2-space-2);
    }

    .rp2-search-trigger { display: none; }

    .rp2-user-pill__name { display: none; }

    .rp2-filter-bar { align-items: stretch; flex-direction: column; }
    .rp2-filter-bar__search { max-width: none; }
    .rp2-filter-bar__toolbar { justify-content: flex-end; }

    .rp2-totals-panel { position: static; }

    /* Tablas: acciones móviles inline en vez de scroll horizontal forzado */
    .rp2-mobile-actions {
        display: flex;
        gap: 4px;
        justify-content: flex-end;
    }

    .rp2-login-shell { padding: var(--rp2-space-3); }
    .rp2-login { margin: 0; border-radius: var(--rp2-radius-lg); }
    .rp2-login__panel { padding: var(--rp2-space-5); }

    .rp2-kpi__value { font-size: 1.5rem; }
    .rp2-page-header__title { font-size: 1.375rem; }
}