/* /Layout/LoginLayout.razor.rz.scp.css */
.login-page[b-79ofzm1ezl] {
    min-height: 100vh;
    min-height: var(--app-100vh, 100vh);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a3a5c 0%, #2D5A8E 60%, #3d7ab5 100%);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 1.5rem;
    /* Honor safe-area en iOS notch */
    padding-top: max(1.5rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* ── Loading screen (mientras se carga usuario) ───────────────────────────── */
.layout-loading[b-z9uf19yfum] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: var(--app-100vh);
    background: var(--color-bg);
    gap: 24px;
}

.layout-loading__logo[b-z9uf19yfum] {
    height: 48px;
    object-fit: contain;
    opacity: 0.85;
}

.layout-loading__spinner[b-z9uf19yfum] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: layout-spin-b-z9uf19yfum 0.8s linear infinite;
}

@keyframes layout-spin-b-z9uf19yfum {
    to { transform: rotate(360deg); }
}

/* ── Layout principal ──────────────────────────────────────────────────────── */
.layout[b-z9uf19yfum] {
    display: flex;
    /* Fallback vh + dvh real cuando la barra de URL está retraída/expandida.
       Crítico en iOS/Android: el layout ahora se reajusta solo. */
    height: 100vh;
    height: var(--app-100vh);
    overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.sidebar[b-z9uf19yfum] {
    display: none;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    height: var(--app-100vh);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    transition: width 300ms ease;
    overflow: hidden;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    /* Jerarquía explícita: sidebar 30 < topbar 40 < dropdowns 50 < modales 1050+ */
    z-index: 30;
}

.sidebar--collapsed[b-z9uf19yfum] {
    width: var(--sidebar-collapsed);
}

.sidebar__header[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--topbar-height);
    padding: 0 12px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.sidebar--collapsed .sidebar__header[b-z9uf19yfum] {
    justify-content: center;
}

.sidebar__logo-img[b-z9uf19yfum] {
    flex: 1;
    min-width: 0;
    height: 40px;
    object-fit: contain;
    object-position: left center;
    margin-right: 8px;
}

.sidebar__logo-img--small[b-z9uf19yfum] {
    flex: none;
    height: 36px;
    width: 44px;
    margin-right: 0;
    object-position: center center;
}

.sidebar__toggle[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, color 200ms;
    flex-shrink: 0;
}
.sidebar__toggle:hover[b-z9uf19yfum] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.sidebar__toggle-icon[b-z9uf19yfum] {
    transition: transform 300ms ease;
    font-size: 20px;
}
.sidebar__toggle-icon--rotated[b-z9uf19yfum] {
    transform: rotate(180deg);
}

.sidebar__menu[b-z9uf19yfum] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

.sidebar__footer[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.sidebar__version[b-z9uf19yfum] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    padding: 2px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

/* Pill de la versión del backend. Mismo aspecto que la del frontend pero
   tintada con el accent (--color-accent) para distinguir de un vistazo. */
.sidebar__version--back[b-z9uf19yfum] {
    color: var(--color-accent);
    background: rgba(201, 147, 90, 0.12);
}

.sidebar__info-icon[b-z9uf19yfum] {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* ── Main area ────────────────────────────────────────────────────────────── */
.layout__main[b-z9uf19yfum] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    height: var(--topbar-height);
    padding: 0 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
    gap: 12px;
    z-index: 40;
}

.topbar__menu-btn[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--color-bg);
    border-radius: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, color 200ms;
}
.topbar__menu-btn:hover[b-z9uf19yfum] {
    background: var(--color-border);
    color: var(--color-text);
}

.topbar__spacer[b-z9uf19yfum] {
    flex: 1;
}

.topbar__icon-btn[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 200ms, color 200ms;
}
.topbar__icon-btn:hover[b-z9uf19yfum] {
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
}
.topbar__icon-btn .material-symbols-outlined[b-z9uf19yfum] {
    font-size: 20px;
}

.topbar__profile[b-z9uf19yfum] {
    position: relative;
    cursor: pointer;
}

.topbar__avatar[b-z9uf19yfum] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: box-shadow 200ms;
    overflow: hidden;
}
.topbar__avatar:hover[b-z9uf19yfum] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.topbar__avatar-icon[b-z9uf19yfum] {
    font-size: 20px;
    color: var(--color-text-secondary);
}

.topbar__avatar-img[b-z9uf19yfum] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.topbar__status-dot[b-z9uf19yfum] {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: var(--color-success);
    border: 2px solid var(--color-surface);
    border-radius: 50%;
}

/* ── Language Selector ────────────────────────────────────────────────────── */
.topbar__lang-selector[b-z9uf19yfum] {
    position: relative;
}

.topbar__lang-code[b-z9uf19yfum] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: inherit;
}

.topbar__icon-btn[b-z9uf19yfum] {
    border: none;
    background: transparent;
    cursor: pointer;
}

.lang-dropdown[b-z9uf19yfum] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 180px;
    max-width: calc(100vw - 24px);   /* no se sale del viewport en móviles estrechos */
    background: var(--color-surface);
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    border: 1px solid var(--color-border);
    z-index: 50;
    overflow: hidden;
    animation: dropdown-in-b-z9uf19yfum 150ms ease-out;
    padding: 4px;
}

.lang-dropdown__item[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text);
    transition: background 150ms;
}
.lang-dropdown__item:hover[b-z9uf19yfum] {
    background: var(--color-bg);
}
.lang-dropdown__item--active[b-z9uf19yfum] {
    background: var(--color-primary-light);
    font-weight: 600;
}
.lang-dropdown__item--active .lang-dropdown__code[b-z9uf19yfum] {
    color: var(--color-primary);
}

.lang-dropdown__code[b-z9uf19yfum] {
    font-size: 0.75rem;
    font-weight: 700;
    width: 24px;
    text-align: center;
}

.lang-dropdown__name[b-z9uf19yfum] {
    flex: 1;
}

/* ── Profile Dropdown ─────────────────────────────────────────────────────── */
.profile-dropdown[b-z9uf19yfum] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 240px;
    max-width: calc(100vw - 24px);   /* no se sale del viewport en móviles estrechos */
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    border: 1px solid var(--color-border);
    z-index: 50;
    overflow: hidden;
    animation: dropdown-in-b-z9uf19yfum 150ms ease-out;
}

@keyframes dropdown-in-b-z9uf19yfum {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.profile-dropdown__header[b-z9uf19yfum] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--color-border);
}

.profile-dropdown__avatar[b-z9uf19yfum] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.profile-dropdown__avatar .material-symbols-outlined[b-z9uf19yfum] {
    font-size: 22px;
    color: var(--color-text-secondary);
}
.profile-dropdown__avatar-img[b-z9uf19yfum] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-dropdown__info[b-z9uf19yfum] {
    min-width: 0;
}

.profile-dropdown__name[b-z9uf19yfum] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-dropdown__email[b-z9uf19yfum] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 2px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-dropdown__role[b-z9uf19yfum] {
    font-size: 0.625rem;
    color: var(--color-text-secondary);
    margin: 4px 0 0 0;
}
.profile-dropdown__role strong[b-z9uf19yfum] {
    color: var(--color-text);
}

.profile-dropdown__menu[b-z9uf19yfum] {
    list-style: none;
    margin: 0;
    padding: 8px;
}

.profile-dropdown__item[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.profile-dropdown__item:hover[b-z9uf19yfum] {
    background: var(--color-bg);
    color: var(--color-text);
}
.profile-dropdown__item .material-symbols-outlined[b-z9uf19yfum] {
    font-size: 18px;
}

/* ── Profile dropdown: empresa ────────────────────────────────────────────── */
.profile-dropdown__company[b-z9uf19yfum] {
    font-size: 0.625rem;
    color: var(--color-primary);
    margin: 3px 0 0 0;
    font-weight: 500;
}

.profile-dropdown__companies[b-z9uf19yfum] {
    padding: 8px 14px;
    border-bottom: 1px solid var(--color-border);
}

.profile-dropdown__section-title[b-z9uf19yfum] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0 0 6px 0;
}

.profile-dropdown__company-item[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 150ms;
}
.profile-dropdown__company-item:hover[b-z9uf19yfum] {
    background: var(--color-bg);
}
.profile-dropdown__company-item--active[b-z9uf19yfum] {
    background: var(--color-primary-light);
}
.profile-dropdown__company-item--active .material-symbols-outlined[b-z9uf19yfum] {
    color: var(--color-primary);
}

.profile-dropdown__company-name[b-z9uf19yfum] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
    display: block;
}

.profile-dropdown__company-role[b-z9uf19yfum] {
    font-size: 0.65rem;
    color: var(--color-text-secondary);
    display: block;
}

/* ── Company Picker (post-login) ─────────────────────────────────────────── */
.company-picker[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    min-height: 60dvh;
    padding: 24px;
}

.company-picker__card[b-z9uf19yfum] {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    padding: 32px 24px;
    text-align: center;
}

.company-picker__icon[b-z9uf19yfum] {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.company-picker__title[b-z9uf19yfum] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px 0;
}

.company-picker__subtitle[b-z9uf19yfum] {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 24px 0;
}

.company-picker__list[b-z9uf19yfum] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.company-picker__item[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 200ms, box-shadow 200ms, background 200ms;
    text-align: left;
}
.company-picker__item:hover[b-z9uf19yfum] {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(45,90,142,0.1);
    background: var(--color-primary-light);
}
.company-picker__item .material-symbols-outlined[b-z9uf19yfum] {
    color: var(--color-text-secondary);
    font-size: 18px;
    transition: color 200ms, transform 200ms;
}
.company-picker__item:hover .material-symbols-outlined[b-z9uf19yfum] {
    color: var(--color-primary);
    transform: translateX(2px);
}

.company-picker__item-info[b-z9uf19yfum] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.company-picker__item-name[b-z9uf19yfum] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}

.company-picker__item-role[b-z9uf19yfum] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* ── Mobile menu: empresa ────────────────────────────────────────────────── */
.mobile-menu__user-company[b-z9uf19yfum] {
    font-size: 0.7rem;
    color: var(--color-primary);
    margin: 3px 0 0 0;
    font-weight: 500;
}

.mobile-menu__companies[b-z9uf19yfum] {
    padding: 8px 20px 12px;
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu__section-title[b-z9uf19yfum] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    margin: 0 0 6px 0;
}

.mobile-menu__company-item[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text);
    transition: background 150ms;
}
.mobile-menu__company-item:hover[b-z9uf19yfum] {
    background: var(--color-bg);
}
.mobile-menu__company-item--active[b-z9uf19yfum] {
    background: var(--color-primary-light);
    font-weight: 600;
}
.mobile-menu__company-item--active .material-symbols-outlined[b-z9uf19yfum] {
    color: var(--color-primary);
}

.mobile-menu__company-role[b-z9uf19yfum] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    margin-left: auto;
}

/* ── Contenido ────────────────────────────────────────────────────────────── */
.layout__content[b-z9uf19yfum] {
    flex: 1;
    min-width: 0;                /* evita que flex items hijos rompan el contenedor */
    overflow-y: auto;
    overflow-x: hidden;          /* el scroll horizontal queda dentro de wrappers .table-responsive / .inner-table-wrapper */
    padding: 16px;
    padding-bottom: calc(var(--bottomnav-height) + 16px);
}

/* ── Mobile Menu Overlay ──────────────────────────────────────────────────── */
.mobile-overlay[b-z9uf19yfum] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 80;
    animation: fade-in-b-z9uf19yfum 200ms ease;
}

@keyframes fade-in-b-z9uf19yfum {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.mobile-menu[b-z9uf19yfum] {
    position: fixed;
    top: 0;
    left: 0;
    /* En tablet horizontal 768px, el 75% antiguo ocupaba 576px — demasiado.
       Usamos min(85vw, 320px) para que nunca exceda 320px ni 85% del viewport. */
    width: min(85vw, 320px);
    height: 100%;
    background: var(--color-surface);
    z-index: 90;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    animation: slide-in-left-b-z9uf19yfum 250ms ease-out;
}

@keyframes slide-in-left-b-z9uf19yfum {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

.mobile-menu__header[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu__logo-img[b-z9uf19yfum] {
    flex: 1;
    min-width: 0;
    height: 40px;
    object-fit: contain;
    object-position: left center;
    margin-right: 8px;
}

.mobile-menu__close[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 200ms, transform 200ms;
}
.mobile-menu__close:hover[b-z9uf19yfum] {
    background: var(--color-bg);
    transform: rotate(90deg);
}

.mobile-menu__user[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu__user-avatar[b-z9uf19yfum] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    overflow: hidden;
}
.mobile-menu__user-avatar .material-symbols-outlined[b-z9uf19yfum] {
    font-size: 22px;
    color: var(--color-text-secondary);
}
.mobile-menu__user-avatar-img[b-z9uf19yfum] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mobile-menu__user-info[b-z9uf19yfum] {
    min-width: 0;
}

.mobile-menu__user-name[b-z9uf19yfum] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.mobile-menu__user-email[b-z9uf19yfum] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 2px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-menu__nav[b-z9uf19yfum] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* ── Bottom Navigation (mobile only) ─────────────────────────────────────── */
.bottomnav[b-z9uf19yfum] {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottomnav-height);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: 40;
    overflow-x: hidden;          /* los labels ya son cortos; por si un item se alarga */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottomnav__item[b-z9uf19yfum] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: color 200ms;
    padding: 4px 0;
    font-size: inherit;
}
.bottomnav__item:hover[b-z9uf19yfum] {
    color: var(--color-primary);
    text-decoration: none;
}
.bottomnav__item--active[b-z9uf19yfum] {
    color: var(--color-primary);
    font-weight: 600;
}
.bottomnav__item--active .material-symbols-outlined[b-z9uf19yfum] {
    font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.bottomnav__item .material-symbols-outlined[b-z9uf19yfum] {
    font-size: 22px;
}

.bottomnav__label[b-z9uf19yfum] {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
}
.bottomnav__item--active .bottomnav__label[b-z9uf19yfum] {
    font-weight: 600;
}

/* ── Tablet horizontal & desktop (>=992px): sidebar visible ────────────────── */
@media (min-width: 992px) {
    .sidebar[b-z9uf19yfum] {
        display: flex;
    }

    .topbar__menu-btn[b-z9uf19yfum] {
        display: none;
    }

    .mobile-overlay[b-z9uf19yfum],
    .mobile-menu[b-z9uf19yfum] {
        display: none !important;
    }
}

/* ── Tablet horizontal / desktop pequeño (992–1279.98 px) ──────────────────
   Auto-colapsa el sidebar a 70 px (sin override manual) y mantiene el
   bottomnav visible como navegación complementaria. Garantiza que a 1180×820
   (iPad Air horizontal) la ficha de usuarios y otros listados tengan espacio
   útil suficiente. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .sidebar[b-z9uf19yfum] {
        width: var(--sidebar-collapsed);
    }
    .sidebar__header[b-z9uf19yfum] {
        justify-content: center;
        padding: 0 8px;
    }
    .sidebar__logo-img[b-z9uf19yfum] {
        flex: none;
        height: 36px;
        width: 44px;
        margin-right: 0;
        object-position: center center;
    }
    /* El toggle y el label de versión quedan fuera: no se necesitan en este
       rango porque el colapso es automático, no opt-in. */
    .sidebar__toggle[b-z9uf19yfum],
    .sidebar__version[b-z9uf19yfum] {
        display: none;
    }
    .sidebar__footer[b-z9uf19yfum] {
        height: 28px;
    }

    /* Espacio reservado para el bottomnav, que sigue visible en este rango. */
    .layout__content[b-z9uf19yfum] {
        padding-bottom: calc(var(--bottomnav-height) + 16px);
    }
}

/* ── Portátil 13-14" / desktop pequeño (1280-1439 px) ──────────────────────
   Sidebar expandido pero a ancho estándar (208 px), no XL (256 px). En un
   1366×768 la diferencia son 48 px de ancho útil que se notan en listados
   con muchas columnas. Bottomnav oculto a partir de 1280, ya hay sidebar. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
    .bottomnav[b-z9uf19yfum] {
        display: none;
    }
    .layout__content[b-z9uf19yfum] {
        padding-bottom: 16px;
    }
    .sidebar:not(.sidebar--collapsed)[b-z9uf19yfum] {
        width: var(--sidebar-width);
    }
}

/* ── Desktop estándar (≥1440 px): sidebar XL ──────────────────────────────
   Pantallas grandes: portátil 15"+, monitores externos. El sidebar puede
   permitirse más anchura para acomodar labels largos sin truncar. */
@media (min-width: 1440px) {
    .bottomnav[b-z9uf19yfum] {
        display: none;
    }

    .layout__content[b-z9uf19yfum] {
        padding-bottom: 16px;
    }

    .sidebar:not(.sidebar--collapsed)[b-z9uf19yfum] {
        width: var(--sidebar-width-xl);
    }
}

/* ── Impersonación: marco fino marrón en el borde de la web ─────────────── */
/* Pseudo-elemento fijo encima del viewport: 4 bordes finos marrones que
   recuerdan visualmente que el Owner está viendo como otro usuario sin
   robar espacio del layout (pointer-events: none para no bloquear clicks). */
.layout--impersonating[b-z9uf19yfum]::before {
    content: "";
    position: fixed;
    inset: 0;
    border: 2px solid var(--color-accent);
    pointer-events: none;
    z-index: 1000;
}

/* ── Pill "Viendo como …" en el topbar ──────────────────────────────────── */
.topbar__impersonation[b-z9uf19yfum] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: none;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 16px;
    cursor: pointer;
    transition: background 150ms, box-shadow 150ms;
    max-width: 280px;
    min-width: 0;
    flex-shrink: 1;
}
.topbar__impersonation:hover[b-z9uf19yfum] {
    background: #b3814b;
    box-shadow: 0 2px 8px rgba(201,147,90,0.3);
}

.topbar__impersonation-eye[b-z9uf19yfum],
.topbar__impersonation-close[b-z9uf19yfum] {
    font-size: 16px;
    flex-shrink: 0;
}

.topbar__impersonation-text[b-z9uf19yfum] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── Mobile (<992px) ──────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .topbar[b-z9uf19yfum] {
        position: sticky;
        top: 0;
    }

    /* En móvil estrecho la pill se compacta a icono + close (oculta el nombre)
       para no comerse el espacio de los demás iconos del topbar. */
    .topbar__impersonation[b-z9uf19yfum] {
        max-width: none;
    }

    /* En tablet horizontal 10.1" (1280×800 con sidebar visible 70 px) o
       cualquier viewport con poca altura (<700 px), reducimos padding del
       contenido y altura del topbar para liberar verticales. */
    .layout__content[b-z9uf19yfum] {
        padding: 12px;
        padding-bottom: calc(var(--bottomnav-height) + 12px);
    }
}

/* ── Pantallas con poco alto (≤720 px, típico tablet horizontal o portátil
   13" 1366×768) ──────────────────────────────────────────────────────────── */
@media (max-height: 720px) {
    .layout__content[b-z9uf19yfum] {
        padding: 12px;
    }
}

@media (max-width: 575.98px) {
    .topbar__impersonation-text[b-z9uf19yfum] {
        display: none;
    }
}

/* ── Notifications (topbar bell + dropdown) ──────────────────────────────── */
.topbar__notif[b-z9uf19yfum] {
    position: relative;
    display: inline-flex;
}

.topbar__notif .topbar__icon-btn[b-z9uf19yfum] {
    position: relative;
}

.topbar__notif-badge[b-z9uf19yfum] {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--color-surface);
}

.topbar__cart-btn[b-z9uf19yfum] { position: relative; }
.topbar__cart-badge[b-z9uf19yfum] {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--color-success);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--color-surface);
}

.notif-dropdown[b-z9uf19yfum] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 340px;
    max-width: calc(100vw - 24px);
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    border: 1px solid var(--color-border);
    z-index: 50;
    overflow: hidden;
    animation: dropdown-in-b-z9uf19yfum 150ms ease-out;
    display: flex;
    flex-direction: column;
}

.notif-dropdown__header[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
}

.notif-dropdown__title[b-z9uf19yfum] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
}

.notif-dropdown__mark-all[b-z9uf19yfum] {
    border: none;
    background: transparent;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 150ms;
}
.notif-dropdown__mark-all:hover[b-z9uf19yfum] {
    background: var(--color-bg);
}

/* Cluster de acciones en la cabecera de la campana — agrupa "Nuevo aviso"
   y "Marcar todo como leído" alineados a la derecha. */
.notif-dropdown__actions[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.notif-dropdown__compose[b-z9uf19yfum] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 150ms;
}
.notif-dropdown__compose:hover[b-z9uf19yfum] { background: var(--color-bg); }
.notif-dropdown__compose .material-symbols-outlined[b-z9uf19yfum] { font-size: 16px; }

/* En móvil estrecho ocultamos el texto y dejamos solo el icono — el dropdown
   ya es estrecho (max-width: calc(100vw - 24px)) y no entra todo. */
@media (max-width: 380px) {
    .notif-dropdown__compose-text[b-z9uf19yfum] { display: none; }
}

/* Toast efímero post-envío. Fijo en la parte baja, encima de la bottomnav.
   Auto-dismiss a los 4s desde @code (cancellable). */
.notif-sent-toast[b-z9uf19yfum] {
    position: fixed;
    left: 50%;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    background: var(--color-text);
    color: #fff;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1200;
    max-width: calc(100vw - 24px);
}
.notif-sent-toast .material-symbols-outlined[b-z9uf19yfum] {
    color: var(--color-success);
    font-size: 20px;
}

@media (min-width: 1280px) {
    .notif-sent-toast[b-z9uf19yfum] { bottom: 24px; }
}

.notif-dropdown__list[b-z9uf19yfum] {
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
}

/* Cuerpo de un Message en la campana — clamp a 3 líneas para que un aviso largo
   no infle el dropdown. El usuario lee el resto haciendo scroll en una vista
   futura, o se conforma con el resumen. */
.notif-item__message-body[b-z9uf19yfum] {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
}

.notif-dropdown__empty[b-z9uf19yfum] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 14px;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    text-align: center;
}
.notif-dropdown__empty .material-symbols-outlined[b-z9uf19yfum] {
    font-size: 32px;
    color: var(--color-text-secondary);
    opacity: 0.6;
}

.notif-dropdown__spinner[b-z9uf19yfum] {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-z9uf19yfum 600ms linear infinite;
}

@keyframes spin-b-z9uf19yfum {
    to { transform: rotate(360deg); }
}

.notif-item[b-z9uf19yfum] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    transition: background 150ms;
}
.notif-item:last-child[b-z9uf19yfum] {
    border-bottom: none;
}
.notif-item:hover[b-z9uf19yfum] {
    background: var(--color-bg);
}

.notif-item--unread[b-z9uf19yfum] {
    background: rgba(45, 90, 142, 0.04);
}

.notif-item__icon[b-z9uf19yfum] {
    font-size: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}
.notif-item--overdue .notif-item__icon[b-z9uf19yfum] {
    color: var(--color-danger);
}

.notif-item__body[b-z9uf19yfum] {
    flex: 1;
    min-width: 0;
}

.notif-item__title[b-z9uf19yfum] {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    word-break: break-word;
}

.notif-item__subtitle[b-z9uf19yfum] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-item__meta[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.notif-item__chip[b-z9uf19yfum] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.notif-item__chip--due[b-z9uf19yfum] {
    background: rgba(224, 155, 48, 0.15);
    color: #B5781D;
}
.notif-item__chip--overdue[b-z9uf19yfum] {
    background: rgba(204, 51, 51, 0.12);
    color: var(--color-danger);
}

/* ── Profile dropdown: settings (reminder days ahead) ─────────────────────── */
.profile-dropdown__settings[b-z9uf19yfum] {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
}

.profile-dropdown__field[b-z9uf19yfum] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.profile-dropdown__field-label[b-z9uf19yfum] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    flex: 1;
}

.profile-dropdown__field-input[b-z9uf19yfum] {
    width: 60px;
    padding: 4px 6px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.8rem;
    text-align: center;
    color: var(--color-text);
    background: var(--color-surface);
}
.profile-dropdown__field-input:focus[b-z9uf19yfum] {
    outline: none;
    border-color: var(--color-primary);
}

/* ─── Cart dropdown ─────────────────────────────────────────────────────── */

.topbar__cart[b-z9uf19yfum] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.cart-dropdown[b-z9uf19yfum] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 380px;
    max-width: calc(100vw - 24px);
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    border: 1px solid var(--color-border);
    z-index: 50;
    overflow: hidden;
    animation: dropdown-in-b-z9uf19yfum 150ms ease-out;
    display: flex;
    flex-direction: column;
}

.cart-dropdown__header[b-z9uf19yfum] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
}

.cart-dropdown__header-main[b-z9uf19yfum] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.cart-dropdown__title[b-z9uf19yfum] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-dropdown__customer[b-z9uf19yfum] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-dropdown__count[b-z9uf19yfum] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.cart-dropdown__list[b-z9uf19yfum] {
    max-height: 50vh;
    max-height: 50dvh;
    overflow-y: auto;
}

.cart-dropdown__empty[b-z9uf19yfum] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 14px;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    text-align: center;
}
.cart-dropdown__empty .material-symbols-outlined[b-z9uf19yfum] {
    font-size: 32px;
    color: var(--color-text-secondary);
    opacity: 0.6;
}

.cart-dropdown__spinner[b-z9uf19yfum] {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-z9uf19yfum 600ms linear infinite;
}

.cart-item[b-z9uf19yfum] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
}
.cart-item:last-child[b-z9uf19yfum] {
    border-bottom: none;
}

.cart-item__body[b-z9uf19yfum] {
    flex: 1;
    min-width: 0;
}

.cart-item__title[b-z9uf19yfum] {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cart-item__meta[b-z9uf19yfum] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.cart-item__ref[b-z9uf19yfum] {
    font-variant-numeric: tabular-nums;
}

.cart-item__chip[b-z9uf19yfum] {
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.cart-item__chip--free[b-z9uf19yfum] {
    background: rgba(46, 158, 90, 0.12);
    color: var(--color-success);
}
/* Chip "-X%" cuando la línea tiene descuento del cliente (v0.37.x+).
   Verde sólido para que destaque entre los chips secundarios — coincide
   con el badge `.discount-badge` del catálogo y de la cesta. */
.cart-item__chip--discount[b-z9uf19yfum] {
    background: var(--color-success);
    color: #fff;
}

.cart-item__side[b-z9uf19yfum] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.cart-item__qty[b-z9uf19yfum] {
    font-size: 0.825rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.cart-item__total[b-z9uf19yfum] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
/* Precio bruto tachado encima del neto cuando la línea tiene descuento (v0.37.2). */
.cart-item__gross[b-z9uf19yfum] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    opacity: 0.75;
}

.cart-dropdown__footer[b-z9uf19yfum] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.cart-dropdown__total[b-z9uf19yfum] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
/* Subtotal bruto encima del Total cuando hay descuento aplicado (v0.37.2).
   Tipografía secundaria para no competir con el Total. */
.cart-dropdown__gross[b-z9uf19yfum] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: -4px; /* acerca al .cart-dropdown__total para que se lean como par */
}
.cart-dropdown__gross-value[b-z9uf19yfum] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.cart-dropdown__total-label[b-z9uf19yfum] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cart-dropdown__total-value[b-z9uf19yfum] {
    font-size: 1rem;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.cart-dropdown__view-btn[b-z9uf19yfum] {
    display: block;
    padding: 8px 12px;
    background: var(--color-primary);
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-size: 0.825rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms;
}
.cart-dropdown__view-btn:hover[b-z9uf19yfum] {
    background: #23476f;
    color: #fff;
}

.cart-dropdown__view-link[b-z9uf19yfum] {
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
.cart-dropdown__view-link:hover[b-z9uf19yfum] {
    text-decoration: underline;
}

/* ── RGPD: pantalla de cuenta eliminada (v0.23.0) ────────────────────────── */
/* Bloquea por completo la app cuando /api/auth/me devuelve 403 con cuerpo
   { error, deletedAt, scheduledHardDeleteAt }. El usuario solo puede leer
   el motivo y cerrar sesión. */
.account-deleted[b-z9uf19yfum] {
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000;
}

.account-deleted__panel[b-z9uf19yfum] {
    width: min(480px, 100%);
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.account-deleted__logo[b-z9uf19yfum] {
    height: 36px;
    margin-bottom: 24px;
    opacity: 0.85;
}

.account-deleted__icon[b-z9uf19yfum] {
    font-size: 56px;
    color: var(--color-danger);
    margin-bottom: 12px;
}

.account-deleted__title[b-z9uf19yfum] {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.account-deleted__lead[b-z9uf19yfum] {
    margin: 0 0 16px 0;
    color: var(--color-text-secondary);
    font-size: 0.925rem;
    line-height: 1.5;
}

.account-deleted__meta[b-z9uf19yfum] {
    margin: 4px 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.account-deleted__hint[b-z9uf19yfum] {
    margin: 16px 0 24px 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.account-deleted__logout[b-z9uf19yfum] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* ── Menu Groups ──────────────────────────────────────────────────────────── */
.menu-group[b-co30u4uulh] {
    padding: 8px 8px 0;
}

.menu-group__label[b-co30u4uulh] {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    opacity: 0.6;
    padding: 4px 12px 6px;
    text-transform: uppercase;
}

.menu-separator[b-co30u4uulh] {
    border: none;
    border-top: 1px dashed var(--color-border);
    margin: 4px 16px;
}

/* ── Skeleton loading ────────────────────────────────────────────────────── */
.menu-skeleton[b-co30u4uulh] {
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-skeleton__item[b-co30u4uulh] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}

.menu-skeleton__icon[b-co30u4uulh] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--color-border);
    opacity: 0.5;
    animation: skeleton-pulse-b-co30u4uulh 1.2s ease-in-out infinite;
}

.menu-skeleton__label[b-co30u4uulh] {
    height: 14px;
    width: 100px;
    border-radius: 4px;
    background: var(--color-border);
    opacity: 0.4;
    animation: skeleton-pulse-b-co30u4uulh 1.2s ease-in-out infinite;
    animation-delay: 0.1s;
}

@keyframes skeleton-pulse-b-co30u4uulh {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* ── Auto-colapsado en tablet horizontal / desktop pequeño (992–1279.98 px) ──
   Oculta los labels de grupo y del skeleton para adecuar el menú al sidebar
   de 70 px. En >=1280 px, el usuario controla el colapso manualmente. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .menu-group[b-co30u4uulh] {
        padding: 4px 6px 0;
    }
    .menu-group__label[b-co30u4uulh],
    .menu-skeleton__label[b-co30u4uulh] {
        display: none;
    }
    .menu-separator[b-co30u4uulh] {
        margin: 4px 8px;
    }
}
/* /Layout/NavMenuItem.razor.rz.scp.css */
/* ── Menu Item ────────────────────────────────────────────────────────────── */
.menu-item[b-xm0qnc7vio] {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms, color 150ms;
    position: relative;
}
.menu-item:hover[b-xm0qnc7vio] {
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
}

.menu-item--active[b-xm0qnc7vio] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}
.menu-item--active:hover[b-xm0qnc7vio] {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.menu-item__icon[b-xm0qnc7vio] {
    font-size: 20px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.menu-item__icon--active[b-xm0qnc7vio] {
    color: var(--color-primary);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.menu-item__label[b-xm0qnc7vio] {
    margin-left: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Colapsado manual (prop Collapsed=true desde MainLayout) ──────────────── */
.menu-item--collapsed[b-xm0qnc7vio] {
    justify-content: center;
    padding: 0 10px;
}
.menu-item--collapsed .menu-item__label[b-xm0qnc7vio] {
    display: none;
}

/* ── Auto-colapsado en tablet horizontal / desktop pequeño (992–1279.98 px) ──
   El sidebar se reduce a 70 px automáticamente (ver MainLayout.razor.css). El
   mobile-menu se oculta en >=992 px, así que no le afecta aunque use el mismo
   componente. Labels quedan ocultos; el atributo title= da tooltip nativo. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .menu-item[b-xm0qnc7vio] {
        justify-content: center;
        padding: 0 10px;
    }
    .menu-item__label[b-xm0qnc7vio] {
        display: none;
    }
}
/* /Pages/Admin/Configuration.razor.rz.scp.css */
/* Estilos específicos de /admin/configuration con edición inline (v0.25.1).
   La tabla `.inline-edit-table` reusa la base de `.users-table` pero rebaja
   los inputs/selects para que parezcan parte de la celda hasta que reciben
   foco. */

.admin-header[b-lfzemqbwrn] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-title[b-lfzemqbwrn] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}

.admin-subtitle[b-lfzemqbwrn] {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    max-width: 60ch;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */

.admin-tabs[b-lfzemqbwrn] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
    overflow-x: auto;
}

.admin-tab[b-lfzemqbwrn] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.admin-tab:hover[b-lfzemqbwrn] {
    color: var(--color-text);
}

.admin-tab.is-active[b-lfzemqbwrn] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.admin-tab__count[b-lfzemqbwrn] {
    background: var(--color-bg);
    border-radius: 999px;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.admin-tab.is-active .admin-tab__count[b-lfzemqbwrn] {
    background: rgba(45, 90, 142, 0.12);
    color: var(--color-primary);
}

/* ── Tabla con edición inline ─────────────────────────────────────────────── */

.users-table-wrapper[b-lfzemqbwrn] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Indicador de scroll horizontal — espejo del patrón global aplicado a
       .table-scroll en components.css. Esta tabla usa wrapper propio porque
       lleva sombra/borde más visibles que el resto de listas. */
    background-image:
        linear-gradient(to right, var(--color-surface) 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-surface) 70%),
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

.users-table[b-lfzemqbwrn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 720px;
}

.users-table thead[b-lfzemqbwrn] {
    background: var(--color-bg);
}

.users-table th[b-lfzemqbwrn] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border);
}

.users-table td[b-lfzemqbwrn] {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}

.users-table tbody tr:last-child td[b-lfzemqbwrn] {
    border-bottom: none;
}

/* Celdas con input/select inline — bordes invisibles hasta hover/focus para
   que la tabla parezca de solo lectura hasta que el usuario interacciona. */
.inline-edit-table input[type="text"][b-lfzemqbwrn],
.inline-edit-table input[type="url"][b-lfzemqbwrn],
.inline-edit-table input[type="password"][b-lfzemqbwrn],
.inline-edit-table select[b-lfzemqbwrn] {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
    font-family: inherit;
    /* 16px mínimo para evitar zoom forzado de Safari iOS al focus. */
    font-size: 1rem;
    color: var(--color-text);
    outline: none;
    transition: border-color 0.12s, background-color 0.12s;
    min-width: 0;
}

.inline-edit-table input:hover:not(:disabled)[b-lfzemqbwrn],
.inline-edit-table select:hover:not(:disabled)[b-lfzemqbwrn] {
    border-color: var(--color-border);
    background: #FAFBFF;
}

.inline-edit-table input:focus:not(:disabled)[b-lfzemqbwrn],
.inline-edit-table select:focus:not(:disabled)[b-lfzemqbwrn] {
    border-color: var(--color-primary);
    background: var(--color-surface);
}

.inline-edit-table input:disabled[b-lfzemqbwrn],
.inline-edit-table select:disabled[b-lfzemqbwrn] {
    color: var(--color-text-secondary);
    cursor: default;
    background: transparent;
}

.inline-edit-table input[b-lfzemqbwrn]::placeholder {
    color: #A0A6B5;
    font-style: italic;
}

/* Fila ghost de "nueva fila" — destacada con un fondo muy sutil para que
   visualmente quede claro que está separada de los registros existentes. */
.row-new[b-lfzemqbwrn] {
    background: linear-gradient(0deg, rgba(45, 90, 142, 0.025), rgba(45, 90, 142, 0.025));
}

.row-new td[b-lfzemqbwrn] {
    border-top: 1px dashed var(--color-border);
    border-bottom: none;
}

/* Fila guardando — feedback visual sutil */
.row-saving[b-lfzemqbwrn] {
    opacity: 0.7;
}

/* Fila de error inline — ocupa el ancho completo bajo la fila correspondiente */
.row-error td[b-lfzemqbwrn] {
    background: rgba(204, 51, 51, 0.06);
    color: var(--color-danger);
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-border);
}

/* ── Columna de acciones ──────────────────────────────────────────────────── */

.col-actions[b-lfzemqbwrn] {
    width: 120px;
    text-align: right;
    white-space: nowrap;
}

.col-actions .btn-icon + .btn-icon[b-lfzemqbwrn] {
    margin-left: 0.15rem;
}

/* Variantes del .btn-icon de components.css */
.btn-icon--save[b-lfzemqbwrn] {
    color: var(--color-primary);
}

.btn-icon--save:hover:not(:disabled)[b-lfzemqbwrn] {
    background: rgba(45, 90, 142, 0.08);
}

.btn-icon--add[b-lfzemqbwrn] {
    color: var(--color-success);
}

.btn-icon--add:hover:not(:disabled)[b-lfzemqbwrn] {
    background: rgba(46, 158, 90, 0.08);
}

.btn-icon--danger[b-lfzemqbwrn] {
    color: var(--color-danger);
}

.btn-icon--danger:hover:not(:disabled)[b-lfzemqbwrn] {
    background: rgba(204, 51, 51, 0.08);
}

.btn-icon:disabled[b-lfzemqbwrn] {
    color: var(--color-text-secondary);
    opacity: 0.4;
    cursor: default;
}

.btn-icon:disabled:hover[b-lfzemqbwrn] {
    background: transparent;
}

.col-url[b-lfzemqbwrn] {
    min-width: 280px;
    max-width: 480px;
}

.col-url input[b-lfzemqbwrn] {
    font-family: ui-monospace, "Cascadia Mono", "Source Code Pro", monospace;
    font-size: 0.82rem;
}

/* Spinner inline para el estado de guardado */
.col-actions .spin[b-lfzemqbwrn] {
    display: inline-block;
    color: var(--color-primary);
    font-size: 22px;
}

/* ── Estado denegado (replicado de Users) ─────────────────────────────────── */

.access-denied[b-lfzemqbwrn] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    max-width: 520px;
    margin: 3rem auto;
}

.access-denied h3[b-lfzemqbwrn] {
    color: var(--color-danger);
    margin: 0 0 0.5rem;
}

.access-denied p[b-lfzemqbwrn] {
    color: var(--color-text-secondary);
    margin: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .col-url[b-lfzemqbwrn] {
        min-width: 200px;
    }
}

@media (max-width: 767.98px) {
    .users-table[b-lfzemqbwrn] {
        min-width: 560px;
    }
    .col-actions[b-lfzemqbwrn] {
        width: 90px;
    }
}
/* /Pages/Admin/ConfirmDeleteModal.razor.rz.scp.css */
/* Estilos del modal de confirmación destructiva con typed-input. */

.modal-message[b-11wrlqu867] {
    margin: 0;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.45;
}

.modal-message + .modal-message[b-11wrlqu867] {
    color: var(--color-text-secondary);
    font-size: 0.88rem;
}
/* /Pages/Admin/Database.razor.rz.scp.css */
/* /admin/database — métricas en vivo de Azure SQL.
   Reutiliza .admin-page / .admin-header / .form-alert / .btn-secondary de
   components.css. Las clases .db-* son únicas de esta página. */

.admin-header__actions[b-mp3p05nq9t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.db-fetched-at[b-mp3p05nq9t] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Grid 2 columnas en desktop, 1 en tablet/móvil.
   La card "wide" (top tablas) ocupa siempre el ancho completo. */
.db-grid[b-mp3p05nq9t] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.db-card--wide[b-mp3p05nq9t] {
    grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
    .db-grid[b-mp3p05nq9t] {
        grid-template-columns: 1fr;
    }
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.db-card[b-mp3p05nq9t] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.db-card__header[b-mp3p05nq9t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
}

.db-card__header .material-symbols-outlined[b-mp3p05nq9t] {
    color: var(--color-primary);
    font-size: 1.25rem;
}

.db-card__title[b-mp3p05nq9t] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.db-card__footer[b-mp3p05nq9t] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.db-card__footer-sep[b-mp3p05nq9t] {
    opacity: 0.6;
}

/* ── KPI grande (% de uso) ───────────────────────────────────────────────── */

.db-kpi[b-mp3p05nq9t] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.db-kpi__value[b-mp3p05nq9t] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.db-kpi__value--warn[b-mp3p05nq9t]   { color: var(--color-warning); }
.db-kpi__value--danger[b-mp3p05nq9t] { color: var(--color-danger); }

.db-kpi__label[b-mp3p05nq9t] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

/* ── Progress bar ────────────────────────────────────────────────────────── */

.db-progress[b-mp3p05nq9t] {
    width: 100%;
    height: 12px;
    background: var(--color-bg);
    border-radius: 999px;
    overflow: hidden;
}

.db-progress--thin[b-mp3p05nq9t] {
    height: 8px;
}

.db-progress__bar[b-mp3p05nq9t] {
    height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.db-progress__bar--warn[b-mp3p05nq9t]   { background: var(--color-warning); }
.db-progress__bar--danger[b-mp3p05nq9t] { background: var(--color-danger); }

/* ── Meta (definition list label/value) ──────────────────────────────────── */

.db-meta[b-mp3p05nq9t] {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1rem;
    row-gap: 0.4rem;
    font-size: 0.875rem;
}

.db-meta dt[b-mp3p05nq9t] {
    color: var(--color-text-secondary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    align-self: center;
}

.db-meta dd[b-mp3p05nq9t] {
    margin: 0;
    color: var(--color-text);
    word-break: break-word;
}

/* Variante 3-cols horizontales (Storage: Used / Allocated / Max). */
.db-meta--columns[b-mp3p05nq9t] {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem 1rem;
}

.db-meta--columns dt[b-mp3p05nq9t] {
    grid-row: 1;
}

.db-meta--columns dd[b-mp3p05nq9t] {
    grid-row: 2;
    font-weight: 600;
}

/* ── Pills (status / tier) ───────────────────────────────────────────────── */

.db-pill[b-mp3p05nq9t] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.db-pill--ok[b-mp3p05nq9t] {
    background: color-mix(in srgb, var(--color-success) 14%, transparent);
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 26%, transparent);
}

.db-pill--warn[b-mp3p05nq9t] {
    background: color-mix(in srgb, var(--color-warning) 14%, transparent);
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 26%, transparent);
}

.db-pill--danger[b-mp3p05nq9t] {
    background: color-mix(in srgb, var(--color-danger) 14%, transparent);
    color: var(--color-danger);
    border-color: color-mix(in srgb, var(--color-danger) 26%, transparent);
}

/* ── Resource bars (Avg/Max por métrica) ─────────────────────────────────── */

.db-bar-row[b-mp3p05nq9t] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.db-bar-row__header[b-mp3p05nq9t] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
}

.db-bar-row__label[b-mp3p05nq9t] {
    color: var(--color-text);
    font-weight: 500;
}

.db-bar-row__values[b-mp3p05nq9t] {
    color: var(--color-text);
    font-size: 0.825rem;
}

.db-bar-row__values strong[b-mp3p05nq9t] {
    font-weight: 700;
}

/* ── Tabla de top tablas ─────────────────────────────────────────────────── */

.db-table-wrap[b-mp3p05nq9t] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.db-table[b-mp3p05nq9t] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.db-table thead th[b-mp3p05nq9t] {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.db-table tbody td[b-mp3p05nq9t] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.db-table tbody tr:last-child td[b-mp3p05nq9t] {
    border-bottom: none;
}

.db-table .num[b-mp3p05nq9t] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.db-mono[b-mp3p05nq9t] {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

/* ── Form alerts: variante info y soporte de icono ───────────────────────── */

.form-alert--info[b-mp3p05nq9t] {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 26%, transparent);
    color: var(--color-text);
}

[b-mp3p05nq9t] .form-alert {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* ── Nota de backups al pie ──────────────────────────────────────────────── */

.db-note[b-mp3p05nq9t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.db-note .material-symbols-outlined[b-mp3p05nq9t] {
    color: var(--color-primary);
    font-size: 1.1rem;
}

/* Utilidad local — el proyecto no expone un .text-muted reusable. */
.text-muted[b-mp3p05nq9t] {
    color: var(--color-text-secondary);
}

/* Spin del icono refresh — reusa el keyframe de components.css si existe; si no,
   declárase aquí defensivamente. */
.spin[b-mp3p05nq9t] {
    animation: db-spin-b-mp3p05nq9t 1s linear infinite;
}

@keyframes db-spin-b-mp3p05nq9t {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* /Pages/Admin/Users.razor.rz.scp.css */
.admin-header[b-4xq7fbccz1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}
.admin-title[b-4xq7fbccz1] { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.25rem; }
.admin-subtitle[b-4xq7fbccz1] { color: var(--color-text-secondary); font-size: 0.9rem; margin: 0; }

.users-table-wrapper[b-4xq7fbccz1] { overflow-x: auto; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.users-table[b-4xq7fbccz1] { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: 0.9rem; }
.users-table thead tr[b-4xq7fbccz1] { background: var(--color-bg); }
.users-table th[b-4xq7fbccz1] { padding: 0.875rem 1rem; text-align: left; font-weight: 600; color: var(--color-text-secondary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--color-border); }
.users-table td[b-4xq7fbccz1] { padding: 0.875rem 1rem; border-bottom: 1px solid #F0F2F8; vertical-align: middle; }
.users-table tbody tr:hover[b-4xq7fbccz1] { background: var(--color-bg-hover); }
.users-table tbody tr:last-child td[b-4xq7fbccz1] { border-bottom: none; }
.editing-row[b-4xq7fbccz1] { background: var(--color-primary-light) !important; }

.user-cell[b-4xq7fbccz1] { display: flex; align-items: center; gap: 0.75rem; }
.user-avatar[b-4xq7fbccz1] { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.user-name[b-4xq7fbccz1] { font-weight: 600; color: var(--color-text); }
.user-email[b-4xq7fbccz1] { font-size: 0.8rem; color: var(--color-text-secondary); }

.role-badge[b-4xq7fbccz1] { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.role-owner[b-4xq7fbccz1] { background: #EEF2FF; color: var(--color-primary); }
.role-salespersonmanager[b-4xq7fbccz1] { background: #FFF4E5; color: var(--color-accent); }
.role-salesperson[b-4xq7fbccz1] { background: #E8F5EE; color: var(--color-success); }
.role-marketing[b-4xq7fbccz1] { background: #F3E8FF; color: #7C3AED; }
.role-cliente[b-4xq7fbccz1] { background: #F0F2F8; color: var(--color-text-secondary); }
.role-[b-4xq7fbccz1] { background: #FFF0F0; color: var(--color-danger); }

.status-badge[b-4xq7fbccz1] { padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600; border: none; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
.status-badge:hover[b-4xq7fbccz1] { opacity: 0.8; }
.status-active[b-4xq7fbccz1] { background: #E8F5EE; color: var(--color-success); }
.status-inactive[b-4xq7fbccz1] { background: #FFF0F0; color: var(--color-danger); }

.date-cell[b-4xq7fbccz1] { color: var(--color-text-secondary); font-size: 0.85rem; white-space: nowrap; }

.action-buttons[b-4xq7fbccz1] { display: flex; gap: 0.5rem; }
.btn-edit[b-4xq7fbccz1], .btn-save[b-4xq7fbccz1], .btn-cancel[b-4xq7fbccz1], .btn-delete[b-4xq7fbccz1] { padding: 0.3rem 0.75rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; cursor: pointer; border: 1px solid; font-family: inherit; transition: background 0.15s; }
.btn-edit[b-4xq7fbccz1] { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary); }
.btn-edit:hover[b-4xq7fbccz1] { background: var(--color-primary-light); }
.btn-save[b-4xq7fbccz1] { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.btn-save:hover[b-4xq7fbccz1] { background: var(--color-primary-dark); }
.btn-cancel[b-4xq7fbccz1] { background: var(--color-surface); color: var(--color-text-secondary); border-color: var(--color-border); }
.btn-cancel:hover[b-4xq7fbccz1] { background: var(--color-bg); }
.btn-delete[b-4xq7fbccz1] { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger); }
.btn-delete:hover[b-4xq7fbccz1] { background: #fff0f0; }
.btn-impersonate[b-4xq7fbccz1] { display: inline-flex; align-items: center; gap: 4px; padding: 0.3rem 0.75rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; cursor: pointer; border: 1px solid var(--color-accent); background: var(--color-surface); color: var(--color-accent); font-family: inherit; transition: background 0.15s; }
.btn-impersonate:hover[b-4xq7fbccz1] { background: #fdf6ee; }
.btn-impersonate .material-symbols-outlined[b-4xq7fbccz1] { font-size: 15px; }

.edit-select[b-4xq7fbccz1], .edit-input[b-4xq7fbccz1] { padding: 0.3rem 0.5rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.85rem; background: var(--color-surface); width: 100%; font-family: inherit; }
.edit-input[b-4xq7fbccz1] { width: 120px; }

.loading-state[b-4xq7fbccz1], .empty-state[b-4xq7fbccz1], .access-denied[b-4xq7fbccz1] { padding: 2rem; text-align: center; color: var(--color-text-secondary); }
.access-denied h3[b-4xq7fbccz1] { color: var(--color-danger); }

/* Botón añadir usuario */
.btn-add-user[b-4xq7fbccz1] { padding: 0.5rem 1.25rem; background: var(--color-primary); color: white; border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.btn-add-user:hover[b-4xq7fbccz1] { background: var(--color-primary-dark); }

/* Modal */
.modal-backdrop[b-4xq7fbccz1] { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1050; display: flex; align-items: center; justify-content: center; }
.modal-panel[b-4xq7fbccz1] { background: var(--color-surface); border-radius: 12px; width: 540px; max-width: 95vw; max-height: 85vh; max-height: min(85dvh, calc(var(--app-100vh) - 24px)); display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,0.18); }
.modal-header[b-4xq7fbccz1] { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); }
.modal-header h2[b-4xq7fbccz1] { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--color-text); }
.modal-close[b-4xq7fbccz1] { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--color-text-secondary); padding: 0.25rem 0.5rem; line-height: 1; }
.modal-close:hover[b-4xq7fbccz1] { color: var(--color-danger); }
.modal-body[b-4xq7fbccz1] { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1; }
.modal-footer[b-4xq7fbccz1] { padding: 1rem 1.5rem; border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: 0.75rem; }
.modal-hint[b-4xq7fbccz1] { color: var(--color-text-secondary); font-size: 0.875rem; margin-bottom: 1rem; }

/* Búsqueda en tenant */
.search-row[b-4xq7fbccz1] { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.search-input[b-4xq7fbccz1] { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.875rem; font-family: inherit; }
.search-input:focus[b-4xq7fbccz1] { outline: none; border-color: var(--color-primary); }
.btn-search[b-4xq7fbccz1] { padding: 0.5rem 1rem; background: var(--color-primary); color: white; border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }
.btn-search:disabled[b-4xq7fbccz1] { opacity: 0.6; cursor: default; }
.search-error[b-4xq7fbccz1] { color: var(--color-danger); font-size: 0.875rem; padding: 0.5rem 0; }
.loading-hint[b-4xq7fbccz1] { color: var(--color-text-secondary); font-size: 0.85rem; font-style: italic; padding: 0.5rem 0; }

.tenant-results[b-4xq7fbccz1] { border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.tenant-user-row[b-4xq7fbccz1] { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; cursor: pointer; transition: background 0.12s; border-bottom: 1px solid #F0F2F8; }
.tenant-user-row:last-child[b-4xq7fbccz1] { border-bottom: none; }
.tenant-user-row:hover[b-4xq7fbccz1] { background: var(--color-primary-light); }
.tenant-user-info[b-4xq7fbccz1] { flex: 1; min-width: 0; }
.user-jobtitle[b-4xq7fbccz1] { color: var(--color-accent); }
.btn-select[b-4xq7fbccz1] { font-size: 0.8rem; color: var(--color-primary); font-weight: 600; white-space: nowrap; }

/* Paso de configuración */
.selected-user-banner[b-4xq7fbccz1] { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; background: var(--color-primary-light); border-radius: 8px; margin-bottom: 1.25rem; border: 1px solid #E0E7F5; }
.user-avatar.small[b-4xq7fbccz1] { width: 28px; height: 28px; font-size: 0.65rem; }
.user-avatar.large[b-4xq7fbccz1] { width: 44px; height: 44px; font-size: 0.85rem; }

.form-field[b-4xq7fbccz1] { margin-bottom: 1rem; }
.form-field label[b-4xq7fbccz1] { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.04em; }
.full-width[b-4xq7fbccz1] { width: 100% !important; }
.checkbox-label[b-4xq7fbccz1] { display: flex !important; align-items: center; gap: 0.5rem; text-transform: none !important; letter-spacing: 0 !important; color: var(--color-text) !important; font-size: 0.875rem !important; cursor: pointer; }

/* Access badges en tabla */
.access-badges[b-4xq7fbccz1] { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.access-badge[b-4xq7fbccz1] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; background: var(--color-primary-light); border-radius: 20px; font-size: 0.75rem; border: 1px solid #E0E7F5; }
.access-badge.empty[b-4xq7fbccz1] { color: var(--color-text-secondary); background: var(--color-bg); border-color: var(--color-border); }
.access-company[b-4xq7fbccz1] { color: var(--color-text-secondary); }

/* Modal de gestión de accesos */
.modal-lg[b-4xq7fbccz1] { width: 680px; }
.access-table[b-4xq7fbccz1] { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-bottom: 1.5rem; }
.access-table th[b-4xq7fbccz1] { padding: 0.5rem 0.75rem; text-align: left; font-weight: 600; color: var(--color-text-secondary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--color-border); }
.access-table td[b-4xq7fbccz1] { padding: 0.6rem 0.75rem; border-bottom: 1px solid #F0F2F8; vertical-align: middle; }
.access-table tbody tr:last-child td[b-4xq7fbccz1] { border-bottom: none; }
.access-table .editing-row[b-4xq7fbccz1] { background: var(--color-primary-light); }

/* Formulario añadir acceso */
.add-access-section[b-4xq7fbccz1] { border-top: 1px solid var(--color-border); padding-top: 1.25rem; }
.add-access-title[b-4xq7fbccz1] { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.05em; }
.add-access-form[b-4xq7fbccz1] { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.add-access-form .edit-select[b-4xq7fbccz1] { flex: 1; min-width: 140px; }
.add-access-form .edit-input[b-4xq7fbccz1] { flex: 1; min-width: 120px; width: auto; }

.empty-state.small[b-4xq7fbccz1] { padding: 1rem; font-size: 0.875rem; }

/* Formulario multi-acceso en modal de creación */
.pending-access-form[b-4xq7fbccz1] { margin-top: 1rem; padding: 1rem; background: var(--color-bg); border-radius: 8px; border: 1px solid var(--color-border); }
.pending-access-row[b-4xq7fbccz1] { display: flex; gap: 0.75rem; align-items: flex-end; }
.pending-access-form .form-field[b-4xq7fbccz1] { margin-bottom: 0.75rem; }
.pending-access-form .form-field:last-of-type[b-4xq7fbccz1] { margin-bottom: 0; }
.btn-add-access[b-4xq7fbccz1] { margin-top: 0.75rem; padding: 0.4rem 1rem; background: var(--color-surface); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: 6px; font-size: 0.825rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; width: 100%; }
.btn-add-access:hover[b-4xq7fbccz1] { background: var(--color-primary-light); }
.btn-add-access:disabled[b-4xq7fbccz1] { opacity: 0.5; cursor: default; }

@media (max-width: 576px) {
    .pending-access-row[b-4xq7fbccz1] { flex-direction: column; }
}

/* ── Tablet horizontal y desktop pequeño (<1280 px) ─────────────────────────
   En este rango el sidebar se auto-colapsa a 70 px (ver MainLayout.razor.css),
   pero la tabla tiene 5 columnas + badges de acceso + action buttons. Reducimos
   paddings, escondemos la columna "Creado" (la fecha no es crítica para
   gestión diaria) y compactamos los botones de acción. */
@media (max-width: 1279.98px) {
    .admin-header[b-4xq7fbccz1] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .admin-title[b-4xq7fbccz1] { font-size: 1.25rem; }

    .users-table[b-4xq7fbccz1] { font-size: 0.85rem; }
    .users-table th[b-4xq7fbccz1],
    .users-table td[b-4xq7fbccz1] {
        padding: 0.625rem 0.5rem;
    }
    /* Columna "Creado" (4ª) */
    .users-table th:nth-child(4)[b-4xq7fbccz1],
    .users-table td:nth-child(4)[b-4xq7fbccz1] {
        display: none;
    }

    .action-buttons[b-4xq7fbccz1] { flex-wrap: wrap; gap: 0.3rem; }
    .btn-edit[b-4xq7fbccz1],
    .btn-delete[b-4xq7fbccz1],
    .btn-impersonate[b-4xq7fbccz1] {
        padding: 0.28rem 0.55rem;
        font-size: 0.75rem;
    }
    .access-badge[b-4xq7fbccz1] { font-size: 0.7rem; padding: 0.18rem 0.45rem; }
}

/* ── Móvil y tablet vertical (<768 px) ──────────────────────────────────────
   Ocultamos además la columna "Accesos" (la gestión está en el modal) y
   compactamos el avatar + nombre. */
@media (max-width: 767.98px) {
    .users-table th:nth-child(2)[b-4xq7fbccz1],
    .users-table td:nth-child(2)[b-4xq7fbccz1] {
        display: none;
    }
    .user-avatar[b-4xq7fbccz1] { width: 30px; height: 30px; font-size: 0.7rem; }
    .user-cell[b-4xq7fbccz1] { gap: 0.5rem; }
    .user-email[b-4xq7fbccz1] { font-size: 0.72rem; }
}

/* ── RGPD: papelera de usuarios (v0.23.0) ─────────────────────────────────── */

.admin-header__actions[b-4xq7fbccz1] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.users-toggle[b-4xq7fbccz1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.825rem;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    transition: background 120ms, color 120ms, border-color 120ms;
}
.users-toggle:hover[b-4xq7fbccz1] {
    background: #f4f6fa;
    color: var(--color-text);
}
.users-toggle input[type=checkbox][b-4xq7fbccz1] {
    margin: 0;
    accent-color: var(--color-primary);
}
.users-toggle .material-symbols-outlined[b-4xq7fbccz1] {
    font-size: 18px;
}

.user-row--deleted[b-4xq7fbccz1] {
    background: rgba(204, 51, 51, 0.04);
}
.user-row--deleted .user-name[b-4xq7fbccz1] {
    text-decoration: line-through;
    color: var(--color-text-secondary);
}

.user-deleted-meta[b-4xq7fbccz1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--color-text-secondary);
}
.user-deleted-meta .material-symbols-outlined[b-4xq7fbccz1] {
    font-size: 14px;
    color: var(--color-danger);
}

.user-deleted-pill[b-4xq7fbccz1] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    background: #fef2f2;
    color: #b91c1c;
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1.3;
}
.user-deleted-pill--urgent[b-4xq7fbccz1] {
    background: var(--color-danger);
    color: #fff;
}

/* B2B Guest invitations (v0.36.0) — pill junto al nombre.
   Guest = pill ámbar (info) | Pending = pill amarillo (acción pendiente). */
.user-guest-pill[b-4xq7fbccz1],
.user-pending-pill[b-4xq7fbccz1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1.3;
    vertical-align: middle;
}
.user-guest-pill[b-4xq7fbccz1] {
    background: #fef3c7;
    color: #92400e;
}
.user-pending-pill[b-4xq7fbccz1] {
    background: #fef9c3;
    color: #854d0e;
    border: 1px dashed #ca8a04;
}
.user-guest-pill .material-symbols-outlined[b-4xq7fbccz1],
.user-pending-pill .material-symbols-outlined[b-4xq7fbccz1] {
    font-size: 13px;
}

/* Botón secundario "Invitar externo" — mismo padding que el primario pero
   con borde y fondo neutro para no competir con la acción principal. */
.btn-invite-external[b-4xq7fbccz1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.btn-invite-external:hover[b-4xq7fbccz1] {
    background: var(--color-primary);
    color: #fff;
}
.btn-invite-external .material-symbols-outlined[b-4xq7fbccz1] {
    font-size: 18px;
}

.status-badge.status-deleted[b-4xq7fbccz1] {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
    cursor: default;
}

.btn-restore[b-4xq7fbccz1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.32rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--color-success);
    background: #fff;
    color: var(--color-success);
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.btn-restore:hover[b-4xq7fbccz1] {
    background: var(--color-success);
    color: #fff;
}
.btn-restore .material-symbols-outlined[b-4xq7fbccz1] {
    font-size: 16px;
}
/* /Pages/Catalog/CatalogItemDetailModal.razor.rz.scp.css */
/* ── Backdrop + panel ─────────────────────────────────────────────────── */
/* z-index alineado con la estrategia de Shared/ModalShell (components.css):
   default backdrop 1050 / panel 1060, stacked 1100 / 1110. Este modal
   nunca abre otro encima, así que se queda en el rango default. */
.catalog-modal-backdrop[b-supm8kfbn1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
}

.catalog-modal-panel[b-supm8kfbn1] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(95vw, 960px);
    max-height: 90vh;
    max-height: min(90dvh, calc(var(--app-100vh) - 24px));
    background: var(--color-surface);
    border-radius: 0.75rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.catalog-modal-header[b-supm8kfbn1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.header-title-wrap[b-supm8kfbn1] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.catalog-modal-title[b-supm8kfbn1] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    word-break: break-word;
}
.header-customer[b-supm8kfbn1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--color-text);
    font-weight: 500;
}
.header-customer .material-symbols-outlined[b-supm8kfbn1] {
    font-size: 18px;
    color: var(--color-text-secondary);
}
.btn-icon[b-supm8kfbn1] {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    display: inline-flex;
    border-radius: 6px;
    flex-shrink: 0;
}
.btn-icon:hover[b-supm8kfbn1] {
    background: var(--color-border);
    color: var(--color-text);
}
.btn-icon .material-symbols-outlined[b-supm8kfbn1] { font-size: 20px; }

/* ── Body scroll ──────────────────────────────────────────────────────── */
.catalog-modal-body[b-supm8kfbn1] {
    padding: 1.25rem;
    overflow-y: auto;
    min-width: 0;
}

/* ── Grid imagen + info ───────────────────────────────────────────────── */
.detail-body[b-supm8kfbn1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    min-width: 0;
}
@media (min-width: 768px) {
    .detail-body[b-supm8kfbn1] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
        gap: 1.5rem;
    }
}

/* ── Imagen ───────────────────────────────────────────────────────────── */
.detail-image[b-supm8kfbn1] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border-radius: 0.5rem;
    overflow: hidden;
    min-height: 220px;
    max-height: 360px;
}
.detail-image img[b-supm8kfbn1] {
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: contain;
    display: block;
}
.image-placeholder[b-supm8kfbn1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 220px;
    color: var(--color-primary);
}
.image-placeholder .material-symbols-outlined[b-supm8kfbn1] { font-size: 64px; }

/* ── Info + tabs ──────────────────────────────────────────────────────── */
.detail-info[b-supm8kfbn1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.tabs-bar[b-supm8kfbn1] {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}
.tab[b-supm8kfbn1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.6rem 0.85rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
}
.tab:hover[b-supm8kfbn1] { color: var(--color-primary); }
.tab.active[b-supm8kfbn1] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.tab .material-symbols-outlined[b-supm8kfbn1] { font-size: 18px; }

/* ── Grid de campos ───────────────────────────────────────────────────── */
.field-grid[b-supm8kfbn1] {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 1rem;
}
@media (min-width: 520px) {
    .field-grid[b-supm8kfbn1] { grid-template-columns: 1fr 1fr; }
}
.field[b-supm8kfbn1] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.field-wide[b-supm8kfbn1] { grid-column: 1 / -1; }
.field dt[b-supm8kfbn1] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.field dd[b-supm8kfbn1] {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-text);
    word-break: break-word;
}
.value-price[b-supm8kfbn1] { font-weight: 700; }

/* Badge "-X%" junto al precio efectivo cuando hay descuento del cliente (v0.37.0+). */
.discount-badge[b-supm8kfbn1] {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--color-success);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Notas olfativas ──────────────────────────────────────────────────── */
.olfactive-text[b-supm8kfbn1] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.55;
    white-space: pre-line;
    text-align: justify;
}

.empty-inline[b-supm8kfbn1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}
.empty-inline.centered[b-supm8kfbn1] {
    justify-content: center;
    padding: 2.5rem 1rem;
}
.empty-inline .material-symbols-outlined[b-supm8kfbn1] { font-size: 18px; }

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.skeleton[b-supm8kfbn1] {
    display: inline-block;
    background: linear-gradient(90deg, #EEF0F5 0%, #F7F8FB 50%, #EEF0F5 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse-b-supm8kfbn1 1.2s ease-in-out infinite;
    border-radius: 4px;
}
.skeleton-img[b-supm8kfbn1] {
    display: block;
    width: 100%;
    height: 220px;
    border-radius: 0.5rem;
}
@keyframes skeleton-pulse-b-supm8kfbn1 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Añadir a cesta (solo con cesta activa) ───────────────────────────── */
.cart-add-section[b-supm8kfbn1] {
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    background: var(--color-bg);
    min-width: 0;
}
.cart-add-title[b-supm8kfbn1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.6rem;
}
.cart-add-title .material-symbols-outlined[b-supm8kfbn1] {
    font-size: 18px;
    color: var(--color-primary);
}
.cart-add-fields[b-supm8kfbn1] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.5rem 0.6rem;
    align-items: end;
    min-width: 0;
}
.cart-add-fields .qty-field[b-supm8kfbn1] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.cart-add-fields .qty-field label[b-supm8kfbn1] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1;
}
.cart-add-fields .qty-input[b-supm8kfbn1] {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-surface);
    font-family: inherit;
    box-sizing: border-box;
    text-align: center;
}
.cart-add-fields .qty-input:focus[b-supm8kfbn1] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 90, 142, 0.15);
}
.cart-add-fields .qty-input:disabled[b-supm8kfbn1] {
    opacity: 0.55;
    cursor: default;
}
.cart-add-fields .qty-input--free[b-supm8kfbn1] {
    border-color: var(--color-warning);
    color: var(--color-warning);
}
.cart-add-fields .qty-input--free:focus[b-supm8kfbn1] {
    box-shadow: 0 0 0 2px rgba(224, 155, 48, 0.15);
}
.cart-add-fields .btn-cart-add[b-supm8kfbn1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    transition: background 0.12s, border-color 0.12s, opacity 0.12s;
    font-family: inherit;
    min-width: 0;
    height: 38px;
    white-space: nowrap;
}
.cart-add-fields .btn-cart-add:hover:not(:disabled)[b-supm8kfbn1] {
    background: #24456d;
    border-color: #24456d;
}
.cart-add-fields .btn-cart-add:disabled[b-supm8kfbn1] {
    opacity: 0.5;
    cursor: default;
    background: var(--color-primary);
}
.cart-add-fields .btn-cart-add .material-symbols-outlined[b-supm8kfbn1] { font-size: 18px; }
.cart-add-fields .btn-cart-label[b-supm8kfbn1] { display: inline; }

/* Anim. spin para el icono de carga en el botón de añadir. */
.cart-add-fields .spin[b-supm8kfbn1] {
    animation: cart-spin-b-supm8kfbn1 0.8s linear infinite;
}
@keyframes cart-spin-b-supm8kfbn1 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .catalog-modal-panel[b-supm8kfbn1] {
        width: 100vw;
        max-height: 100vh;
        max-height: var(--app-100vh);
        height: var(--app-100vh);
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }
    .catalog-modal-body[b-supm8kfbn1] { padding: 1rem; }
    .catalog-modal-header[b-supm8kfbn1] {
        flex-direction: row;
        align-items: flex-start;
        padding: 0.85rem 1rem;
    }
    .catalog-modal-title[b-supm8kfbn1] { font-size: 1rem; }
    .detail-image[b-supm8kfbn1] { min-height: 180px; }
    .skeleton-img[b-supm8kfbn1] { height: 180px; }
    .image-placeholder[b-supm8kfbn1] { min-height: 180px; }

    /* Añadir a cesta: el botón pasa a ocupar toda la fila debajo de los inputs
       para no apretar en viewports estrechos (<400 px de área útil). */
    .cart-add-fields[b-supm8kfbn1] {
        grid-template-columns: 1fr 1fr;
    }
    .cart-add-fields .btn-cart-add[b-supm8kfbn1] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 359.98px) {
    /* Muy estrecho (feature phones / iPhone SE 1ª gen): una columna. */
    .cart-add-fields[b-supm8kfbn1] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Catalog/CatalogItemList.razor.rz.scp.css */
/* ── Card contenedora ─────────────────────────────────────────────────── */
.catalog-card[b-29gte7ah3d] {
    background: var(--color-surface);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    min-width: 0;
}

/* ── Caption (cabecera) ───────────────────────────────────────────────── */
.catalog-caption[b-29gte7ah3d] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.caption-left[b-29gte7ah3d] {
    min-width: 0;
    flex: 1;
}
.caption-title[b-29gte7ah3d] {
    margin: 0;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.caption-subtitle[b-29gte7ah3d] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.subtitle-sep[b-29gte7ah3d] {
    margin: 0 0.35rem;
    color: var(--color-text-secondary);
    opacity: 0.6;
}
.caption-actions[b-29gte7ah3d] {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}

.btn-primary[b-29gte7ah3d],
.btn-secondary[b-29gte7ah3d] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
}
.btn-primary[b-29gte7ah3d] {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}
.btn-primary:hover[b-29gte7ah3d] { background: #24456d; border-color: #24456d; }
.btn-secondary[b-29gte7ah3d] {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn-secondary:hover[b-29gte7ah3d] { border-color: var(--color-primary); color: var(--color-primary); }
.btn-primary .material-symbols-outlined[b-29gte7ah3d],
.btn-secondary .material-symbols-outlined[b-29gte7ah3d] { font-size: 18px; }
.btn-label[b-29gte7ah3d] { display: inline; }

.btn-link[b-29gte7ah3d] {
    background: none;
    border: none;
    padding: 0.2rem 0.35rem;
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.82rem;
}
.btn-link:hover[b-29gte7ah3d] { text-decoration: underline; }

.btn-action[b-29gte7ah3d] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-action:hover[b-29gte7ah3d] {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: #FAFBFF;
}
.btn-action .material-symbols-outlined[b-29gte7ah3d] { font-size: 20px; }

/* ── Toolbar con búsqueda + filtro de categorías ──────────────────────── */
.toolbar[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.search-box[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    flex: 1;
    min-width: 200px;
    max-width: 480px;
}
.search-box:focus-within[b-29gte7ah3d] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 90, 142, 0.12);
}
.search-box input[b-29gte7ah3d] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    min-width: 0;
    color: var(--color-text);
}
.search-box .material-symbols-outlined[b-29gte7ah3d] {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* ── Filtro de categorías (desplegable multi-selección) ───────────────── */
.category-filter[b-29gte7ah3d] {
    position: relative;
    min-width: 0;
}
.category-filter-toggle[b-29gte7ah3d] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    min-width: 180px;
    max-width: 260px;
}
.category-filter-toggle:hover[b-29gte7ah3d],
.category-filter-toggle.open[b-29gte7ah3d] {
    border-color: var(--color-primary);
    background: #FAFBFF;
}
.category-filter-toggle .material-symbols-outlined[b-29gte7ah3d] { font-size: 18px; color: var(--color-text-secondary); }
.category-filter-toggle.open .chev[b-29gte7ah3d] { transform: rotate(180deg); }
.category-filter-toggle .chev[b-29gte7ah3d] { margin-left: auto; transition: transform 0.15s; }
.category-filter-label[b-29gte7ah3d] {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-dropdown[b-29gte7ah3d] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-width: calc(100vw - 24px);
    max-height: 340px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 40;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.category-dropdown-head[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.category-dropdown-title[b-29gte7ah3d] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.category-dropdown-list[b-29gte7ah3d] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    flex: 1;
}
.category-dropdown-item[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.88rem;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}
.category-dropdown-item:hover[b-29gte7ah3d] { background: #FAFBFF; }
.category-dropdown-item input[type="checkbox"][b-29gte7ah3d] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}
.category-dropdown-item-label[b-29gte7ah3d] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.category-dropdown-item-count[b-29gte7ah3d] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    padding: 0.1rem 0.45rem;
    background: var(--color-bg);
    border-radius: 10px;
}
.category-dropdown-empty[b-29gte7ah3d] {
    padding: 1rem 0.85rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

/* ── Banner cesta activa ──────────────────────────────────────────────── */
.cart-lock-banner[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: rgba(46, 158, 90, 0.08);
    color: var(--color-text);
    font-size: 0.85rem;
}
.cart-lock-banner .material-symbols-outlined[b-29gte7ah3d] {
    color: var(--color-success);
    font-size: 20px;
}
.cart-lock-text[b-29gte7ah3d] { font-weight: 600; }
.cart-lock-readonly[b-29gte7ah3d] {
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: rgba(107, 113, 134, 0.15);
    color: var(--color-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cart-lock-actions[b-29gte7ah3d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}
.cart-lock-actions .btn-link[b-29gte7ah3d] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.cart-lock-actions .btn-link:hover[b-29gte7ah3d] {
    background: rgba(45, 90, 142, 0.08);
    border-color: rgba(45, 90, 142, 0.2);
}
.cart-lock-actions .btn-link .material-symbols-outlined[b-29gte7ah3d] {
    color: var(--color-primary);
    font-size: 18px;
}
@media (max-width: 575.98px) {
    .cart-lock-actions[b-29gte7ah3d] {
        margin-left: 0;
        width: 100%;
    }
    .cart-lock-actions .btn-link[b-29gte7ah3d] { flex: 1 1 auto; justify-content: center; }
}

/* ── Controles de "añadir a cesta" (tarjeta y fila) ──────────────────── */
/* Layout en card: dos inputs lado a lado + botón ancho debajo. En grid
   para que los botones nunca desborden el contenedor de la tarjeta y los
   inputs compartan ancho a 50/50. */
.cart-actions[b-29gte7ah3d] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.4rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    min-width: 0;
}
.qty-field[b-29gte7ah3d] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.qty-field label[b-29gte7ah3d] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1;
}
.qty-input[b-29gte7ah3d] {
    width: 100%;
    min-width: 0;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-surface);
    font-family: inherit;
    box-sizing: border-box;
    text-align: center;
}
.qty-input:focus[b-29gte7ah3d] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 90, 142, 0.15);
}
.qty-input:disabled[b-29gte7ah3d] { opacity: 0.55; cursor: default; }
.qty-input[b-29gte7ah3d]::-webkit-outer-spin-button,
.qty-input[b-29gte7ah3d]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    opacity: 0.6;
}

.btn-cart-add[b-29gte7ah3d] {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
    font-family: inherit;
    min-width: 0;
}
.btn-cart-add:hover:not(:disabled)[b-29gte7ah3d] { background: #24456d; border-color: #24456d; }
.btn-cart-add:disabled[b-29gte7ah3d] {
    opacity: 0.5;
    cursor: default;
    background: var(--color-primary);
}
.btn-cart-add .material-symbols-outlined[b-29gte7ah3d] { font-size: 16px; flex-shrink: 0; }
.btn-cart-label[b-29gte7ah3d] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* En la tabla: inputs ultra-compactos + icono add a la derecha del chevron. */
.row-actions[b-29gte7ah3d] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    flex-wrap: nowrap;
}
.qty-input--row[b-29gte7ah3d] {
    width: 52px;
    padding: 0.25rem 0.35rem;
    font-size: 0.8rem;
}
.qty-input--free[b-29gte7ah3d] {
    border-color: var(--color-warning);
    color: var(--color-warning);
}
.qty-input--free:focus[b-29gte7ah3d] {
    box-shadow: 0 0 0 2px rgba(224, 155, 48, 0.15);
}
.btn-row-action--add[b-29gte7ah3d] {
    color: var(--color-primary);
    border: 1px solid transparent;
}
.btn-row-action--add:hover:not(:disabled)[b-29gte7ah3d] {
    background: rgba(45, 90, 142, 0.08);
    border-color: var(--color-primary);
}
.btn-row-action--add:disabled[b-29gte7ah3d] { opacity: 0.4; cursor: default; }
.btn-row-action:disabled[b-29gte7ah3d] { opacity: 0.5; cursor: default; }

.spin[b-29gte7ah3d] { animation: spin-b-29gte7ah3d 1s linear infinite; }
@keyframes spin-b-29gte7ah3d { 100% { transform: rotate(360deg); } }

/* Chips de filtros activos */
.active-filters[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    background: #FAFBFF;
    font-size: 0.82rem;
}
.active-filters-label[b-29gte7ah3d] {
    color: var(--color-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    margin-right: 0.15rem;
}
.active-chip[b-29gte7ah3d] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.35rem 0.2rem 0.6rem;
    border-radius: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.8rem;
    white-space: nowrap;
}
.chip-close[b-29gte7ah3d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.chip-close:hover[b-29gte7ah3d] { background: var(--color-border); color: var(--color-text); }
.chip-close .material-symbols-outlined[b-29gte7ah3d] { font-size: 14px; }

/* ── Modal picker de cliente ──────────────────────────────────────────── */
.modal-backdrop[b-29gte7ah3d] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
}
.modal-panel[b-29gte7ah3d] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(95vw, 560px);
    max-height: 90vh;
    max-height: min(90dvh, calc(var(--app-100vh) - 24px));
    background: var(--color-surface);
    border-radius: 0.75rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-header[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.modal-header h3[b-29gte7ah3d] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}
.btn-icon[b-29gte7ah3d] {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border-radius: 6px;
}
.btn-icon:hover[b-29gte7ah3d] { background: #F5F6FA; color: var(--color-text); }
.modal-body[b-29gte7ah3d] {
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
}
.modal-hint[b-29gte7ah3d] {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.picker-search[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.picker-search input[b-29gte7ah3d] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    min-width: 0;
}
.picker-search .material-symbols-outlined[b-29gte7ah3d] {
    font-size: 18px;
    color: var(--color-text-secondary);
}
.picker-list[b-29gte7ah3d] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
}
.picker-row[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
    min-width: 0;
}
.picker-row:hover[b-29gte7ah3d] {
    background: #FAFBFF;
    border-color: var(--color-primary);
}
.picker-row.skeleton-row[b-29gte7ah3d] { cursor: default; }
.picker-main[b-29gte7ah3d] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.picker-no[b-29gte7ah3d] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.picker-name[b-29gte7ah3d] {
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.picker-arrow[b-29gte7ah3d] {
    color: var(--color-text-secondary);
    font-size: 18px;
    flex-shrink: 0;
}

/* ── Grid de artículos ────────────────────────────────────────────────── */
.items-grid[b-29gte7ah3d] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
}
@media (min-width: 576px) {
    .items-grid[b-29gte7ah3d] { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .items-grid[b-29gte7ah3d] { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
@media (min-width: 1280px) {
    .items-grid[b-29gte7ah3d] { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
}

.item-card[b-29gte7ah3d] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    cursor: pointer;
    text-align: left;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    min-width: 0;
}
.item-card:hover:not(.skeleton-card)[b-29gte7ah3d] {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(45, 90, 142, 0.12);
    border-color: var(--color-primary);
}
.item-body[b-29gte7ah3d] {
    margin-top: 0.75rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.item-title[b-29gte7ah3d] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.item-ref[b-29gte7ah3d] {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.item-notes[b-29gte7ah3d] {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.item-footer[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
}
.cart-icon[b-29gte7ah3d] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F5F6FA;
    color: var(--color-primary);
    font-size: 18px !important;
}
.item-price[b-29gte7ah3d] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

/* Badge de descuento del cliente para este item (v0.37.0+).
   Aparece junto al precio efectivo cuando BC devuelve `lineDiscountPct > 0`. */
.discount-badge[b-29gte7ah3d] {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--color-success);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Vista tabla ──────────────────────────────────────────────────────── */
.table-scroll[b-29gte7ah3d] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 72vh;
    max-height: 72dvh;
}
.crm-table[b-29gte7ah3d] {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.crm-table thead[b-29gte7ah3d] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-bg);
}
.crm-table th[b-29gte7ah3d] {
    padding: 0.7rem 0.875rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.crm-table td[b-29gte7ah3d] {
    padding: 0.65rem 0.875rem;
    border-bottom: 1px solid #F0F2F8;
    vertical-align: middle;
    color: var(--color-text);
    white-space: nowrap;
}
.crm-table tbody tr:last-child td[b-29gte7ah3d] { border-bottom: none; }
.data-row[b-29gte7ah3d] {
    cursor: pointer;
    transition: background 0.12s;
}
.data-row:hover[b-29gte7ah3d] { background: #FAFBFF; }
.col-actions[b-29gte7ah3d] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    padding-right: 0.5rem !important;
}
.col-price[b-29gte7ah3d] {
    font-weight: 600;
    color: var(--color-text);
}
.btn-row-action[b-29gte7ah3d] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color 0.15s;
}
.data-row:hover .btn-row-action[b-29gte7ah3d] { color: var(--color-primary); }
.btn-row-action .material-symbols-outlined[b-29gte7ah3d] { font-size: 20px; }

.table-scroll[b-29gte7ah3d]::-webkit-scrollbar { width: 3px; height: 3px; }
.table-scroll[b-29gte7ah3d]::-webkit-scrollbar-thumb { background: lightgray; }
.table-scroll[b-29gte7ah3d]::-webkit-scrollbar-thumb:active { background: #000; }

/* ── Vista tablet horizontal: ocultar categoría ───────────────────────── */
@media (max-width: 991.98px) {
    .crm-table .col-category[b-29gte7ah3d] { display: none; }
}

/* ── Vista móvil: tabla reducida ──────────────────────────────────────── */
@media (max-width: 575.98px) {
    .table-scroll[b-29gte7ah3d] { overflow-x: hidden; }
    .crm-table[b-29gte7ah3d] { min-width: 0; table-layout: auto; }
    /* Ocultar Categoría y Precio en móvil (si están presentes). Referencia,
       Producto y Acciones permanecen visibles; cuando hay cesta activa las
       acciones contienen el selector de cantidades. */
    .crm-table .col-category[b-29gte7ah3d],
    .crm-table .col-price[b-29gte7ah3d] { display: none; }
    /* En modo tabla móvil, el input de cantidad por fila + botón rápido se
       ocultan: el usuario debe abrir la ficha del producto y añadir desde el
       modal (allí hay espacio suficiente para los dos inputs + botón). El
       chevron para abrir la ficha permanece visible. */
    .crm-table .qty-input--row[b-29gte7ah3d],
    .crm-table .btn-row-action--add[b-29gte7ah3d] { display: none; }
    .crm-table td[b-29gte7ah3d] {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .crm-table .col-actions[b-29gte7ah3d] {
        width: 1%;
        white-space: nowrap;
        text-align: right;
    }
}

/* ── Estados ──────────────────────────────────────────────────────────── */
.empty-card[b-29gte7ah3d],
.empty-cell[b-29gte7ah3d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--color-text-secondary);
    text-align: center;
}
.empty-card .material-symbols-outlined[b-29gte7ah3d],
.empty-cell .material-symbols-outlined[b-29gte7ah3d] {
    font-size: 32px;
    color: var(--color-text-secondary);
}
.primary-link[b-29gte7ah3d] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.primary-link:hover[b-29gte7ah3d] { text-decoration: underline; }

.loading-state[b-29gte7ah3d] {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.skeleton[b-29gte7ah3d] {
    display: inline-block;
    background: linear-gradient(90deg, #EEF0F5 0%, #F7F8FB 50%, #EEF0F5 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse-b-29gte7ah3d 1.2s ease-in-out infinite;
    border-radius: 4px;
}
.skeleton-img[b-29gte7ah3d] {
    display: block;
    width: 100%;
    height: 140px;
    border-radius: 0.5rem;
}
.skeleton-card[b-29gte7ah3d] { cursor: default; }
.skeleton-card:hover[b-29gte7ah3d] { transform: none; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.skeleton-row[b-29gte7ah3d] { cursor: default; }
.skeleton-row:hover[b-29gte7ah3d] { background: transparent; }

@keyframes skeleton-pulse-b-29gte7ah3d {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Paginación ───────────────────────────────────────────────────────── */
.pagination-bar[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}
.pagination-info[b-29gte7ah3d] {
    font-weight: 500;
    color: var(--color-text);
}
.pagination-controls[b-29gte7ah3d] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.page-size[b-29gte7ah3d] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    margin-right: 0.5rem;
}
.page-size select[b-29gte7ah3d] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.25rem 1.4rem 0.25rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.82rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7186' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
}
.page-size select:focus[b-29gte7ah3d] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 90, 142, 0.15);
}
.btn-page[b-29gte7ah3d] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-page:hover:not(:disabled)[b-29gte7ah3d] {
    background: #FAFBFF;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-page:disabled[b-29gte7ah3d] {
    opacity: 0.35;
    cursor: default;
}
.btn-page .material-symbols-outlined[b-29gte7ah3d] { font-size: 18px; }
.page-indicator[b-29gte7ah3d] {
    padding: 0 0.45rem;
    white-space: nowrap;
    color: var(--color-text);
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .pagination-bar[b-29gte7ah3d] { justify-content: center; padding: 0.6rem 0.7rem; }
    .pagination-info[b-29gte7ah3d] { width: 100%; text-align: center; }
    .page-size[b-29gte7ah3d] { margin-right: 0.2rem; }
}

/* ── Responsividad ────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .catalog-caption[b-29gte7ah3d] {
        flex-direction: column;
        align-items: stretch;
        padding: 0.9rem 1rem;
    }
    .caption-actions[b-29gte7ah3d] { justify-content: flex-start; }
    .caption-title[b-29gte7ah3d] { font-size: 1rem; white-space: normal; }
    .toolbar[b-29gte7ah3d] { padding: 0.75rem 1rem; gap: 0.5rem; }
    .search-box[b-29gte7ah3d] { max-width: none; }
    .category-filter-toggle[b-29gte7ah3d] { min-width: 0; max-width: none; width: 100%; }
    .category-filter[b-29gte7ah3d] { flex: 1; }
    .items-grid[b-29gte7ah3d] { padding: 1rem; }
}
@media (max-width: 479.98px) {
    .btn-label[b-29gte7ah3d] { display: none; }
    .btn-primary[b-29gte7ah3d], .btn-secondary[b-29gte7ah3d] { padding: 0.5rem; }
    .active-filters[b-29gte7ah3d] { padding: 0.55rem 1rem; }
}
/* /Pages/Catalog/CatalogItemThumbnail.razor.rz.scp.css */
.item-img[b-p2s9fl2b96] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    background: #F5F6FA;
    border-radius: 0.5rem;
    color: var(--color-primary);
    overflow: hidden;
}
.item-img img[b-p2s9fl2b96] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
}
.item-img .material-symbols-outlined[b-p2s9fl2b96] { font-size: 48px; }
@media (max-width: 767.98px) {
    .item-img[b-p2s9fl2b96] { height: 120px; }
}
/* /Pages/Customers/CustomerDetail.razor.rz.scp.css */
/* ── Botón volver ──────────────────────────────────────────────────────── */
.btn-back-link[b-l4y0f33b10] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-family: inherit;
    margin-bottom: 0.875rem;
    padding: 0;
    transition: color 0.15s;
}
.btn-back-link:hover[b-l4y0f33b10] { color: var(--color-primary); }
.btn-back-link .material-symbols-outlined[b-l4y0f33b10] { font-size: 16px; }

/* ── Header del cliente ────────────────────────────────────────────────── */
.client-header[b-l4y0f33b10] {
    background: var(--color-surface);
    border-radius: 14px;
    border: 1px solid var(--color-border);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.125rem;
}
.client-header__title-row[b-l4y0f33b10] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.client-name[b-l4y0f33b10] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.client-header__meta[b-l4y0f33b10] {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}
.meta-item[b-l4y0f33b10] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.meta-icon[b-l4y0f33b10] {
    font-size: 13px;
}

/* Badge de cliente bloqueado en la cabecera (BC: blocked != " "). */
.blocked-badge[b-l4y0f33b10] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: rgba(204, 51, 51, 0.1);
    color: var(--color-danger);
    border: 1px solid rgba(204, 51, 51, 0.35);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
}
.blocked-badge__icon[b-l4y0f33b10] {
    font-size: 14px !important;
}

/* Importes en la pestaña General (CreditLimit / Balance). */
.kv-amount[b-l4y0f33b10] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.kv-amount--due[b-l4y0f33b10] {
    color: var(--color-danger);
}

/* ── Barra de pestañas (TabBar) ────────────────────────────────────────── */
.tab-bar[b-l4y0f33b10] {
    display: flex;
    gap: 0;
    margin-bottom: 1.125rem;
    border-bottom: 2px solid var(--color-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tab-item[b-l4y0f33b10] {
    padding: 0.65rem 1.25rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.tab-item:hover[b-l4y0f33b10] {
    color: var(--color-primary);
}
.tab-item.active[b-l4y0f33b10] {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom-color: var(--color-primary);
}

/* ── Layouts de tabs ───────────────────────────────────────────────────── */
.tab-grid[b-l4y0f33b10] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
/* Los hijos de grid necesitan min-width: 0 explícito. Sin esto, si un descendiente
   tiene min-width o white-space: nowrap (p. ej. la tabla interna de pedidos),
   el grid "blow-out" expande la columna y fuerza scroll horizontal de toda la
   página. Con min-width: 0 el wrapper interno (.inner-table-wrapper) puede
   scrollearse sin empujar el layout. */
.tab-grid > *[b-l4y0f33b10] {
    min-width: 0;
}
.tab-content-single[b-l4y0f33b10] {
    max-width: 100%;
    min-width: 0;
}

/* ── Cards de información ──────────────────────────────────────────────── */
.info-card[b-l4y0f33b10] {
    background: var(--color-surface);
    border-radius: 14px;
    border: 1px solid var(--color-border);
    padding: 1.125rem 1.375rem;
}
.info-card__title[b-l4y0f33b10] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ── Key-value rows ────────────────────────────────────────────────────── */
.kv-row[b-l4y0f33b10] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F0F2F8;
}
.kv-row:last-child[b-l4y0f33b10] { border-bottom: none; }
.kv-label[b-l4y0f33b10] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}
.kv-value[b-l4y0f33b10] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text);
    text-align: right;
}

/* ── Contact rows ──────────────────────────────────────────────────────── */
.contact-row[b-l4y0f33b10] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #F0F2F8;
}
.contact-row:last-child[b-l4y0f33b10] { border-bottom: none; }
.contact-icon[b-l4y0f33b10] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-icon .material-symbols-outlined[b-l4y0f33b10] {
    font-size: 14px;
    color: var(--color-primary);
}
.contact-label[b-l4y0f33b10] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}
.contact-value[b-l4y0f33b10] {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text);
}

/* ── Info banner (sugerencias) ─────────────────────────────────────────── */
.info-banner[b-l4y0f33b10] {
    padding: 0.875rem 1.125rem;
    background: var(--color-primary-light);
    border-radius: 10px;
    border: 1px solid rgba(45, 90, 142, 0.12);
}
.info-banner__title[b-l4y0f33b10] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}
.info-banner__desc[b-l4y0f33b10] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* ── Card table header ─────────────────────────────────────────────────── */
.card-table-header[b-l4y0f33b10] {
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid #F0F2F8;
}
.card-table-header__title[b-l4y0f33b10] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}

/* ── Inner tables ──────────────────────────────────────────────────────── */
.inner-table-wrapper[b-l4y0f33b10] {
    max-width: 100%;       /* no crecer más que la tarjeta contenedora */
    overflow-x: auto;      /* si la tabla es más ancha, scroll queda aquí (no en la página) */
    -webkit-overflow-scrolling: touch;
}
.inner-table[b-l4y0f33b10] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    /* En móvil (≤480px) dejamos la tabla fluir; en el resto mantenemos un ancho
       mínimo para que las columnas sean legibles y, si no cabe, el wrapper scrollea. */
    min-width: 480px;
}
@media (max-width: 480px) {
    .inner-table[b-l4y0f33b10] {
        min-width: 0;
    }
}
.inner-table th[b-l4y0f33b10] {
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    background: var(--color-bg);
}
.inner-table td[b-l4y0f33b10] {
    padding: 0.688rem 1rem;
    border-bottom: 1px solid #F0F2F8;
    color: var(--color-text);
}
.empty-td[b-l4y0f33b10] {
    padding: 1.875rem 1rem !important;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
}

/* ── Sub-tabs dentro de una card (tab Albaranes — envío / devolución) ──── */
.card-table-header--with-tabs[b-l4y0f33b10] {
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.5rem;
}
.inner-tab-bar[b-l4y0f33b10] {
    display: inline-flex;
    gap: 0.25rem;
    background: var(--color-bg);
    padding: 0.2rem;
    border-radius: 8px;
}
.inner-tab[b-l4y0f33b10] {
    border: none;
    background: transparent;
    padding: 0.4rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.inner-tab:hover[b-l4y0f33b10] {
    color: var(--color-text);
}
.inner-tab--active[b-l4y0f33b10] {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* ── Celda ship-to en la tabla de albaranes ───────────────────────────── */
.shipto-cell[b-l4y0f33b10] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.shipto-code[b-l4y0f33b10] {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.78rem;
}
.shipto-name[b-l4y0f33b10] {
    color: var(--color-text-secondary);
    font-size: 0.74rem;
}
.shipto-muted[b-l4y0f33b10] {
    color: var(--color-text-secondary);
    font-style: italic;
    font-size: 0.78rem;
}

/* ── Upload area (Tab 5 — Documentos) ──────────────────────────────────── */
.upload-row[b-l4y0f33b10] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.upload-field[b-l4y0f33b10] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 220px;
    min-width: 200px;
}
.upload-field__label[b-l4y0f33b10] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}
.upload-field__select[b-l4y0f33b10] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s;
}
.upload-field__select:focus[b-l4y0f33b10] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 90, 142, 0.12);
}
.upload-field__select:disabled[b-l4y0f33b10] {
    opacity: 0.5;
    cursor: default;
}
.upload-btn[b-l4y0f33b10] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-surface);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    height: 40px;
}
.upload-btn:hover:not(.upload-btn--disabled)[b-l4y0f33b10] {
    background: var(--color-primary-dark, #1D4A7E);
}
.upload-btn .material-symbols-outlined[b-l4y0f33b10] {
    font-size: 18px;
}
.upload-btn input[type="file"][b-l4y0f33b10] {
    display: none;
}
.upload-btn--disabled[b-l4y0f33b10] {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

/* ── Documentos (Tab 5) ────────────────────────────────────────────────── */
.upload-hint[b-l4y0f33b10] {
    font-size: 0.76rem;
    color: var(--color-text-secondary);
    margin-top: 0.75rem;
    text-align: center;
}
.doc-alert[b-l4y0f33b10] {
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}
.doc-alert--error[b-l4y0f33b10] {
    background: rgba(204, 51, 51, 0.08);
    border: 1px solid rgba(204, 51, 51, 0.3);
    color: var(--color-danger);
}
.doc-alert--success[b-l4y0f33b10] {
    background: rgba(46, 158, 90, 0.1);
    border: 1px solid rgba(46, 158, 90, 0.3);
    color: var(--color-success);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.doc-progress[b-l4y0f33b10] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(45, 90, 142, 0.06);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--color-primary);
}
.doc-progress__icon[b-l4y0f33b10] {
    font-size: 16px;
    animation: doc-spin-b-l4y0f33b10 1s linear infinite;
}
@keyframes doc-spin-b-l4y0f33b10 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.doc-category .info-card__title[b-l4y0f33b10] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.doc-list[b-l4y0f33b10] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.doc-item[b-l4y0f33b10] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    transition: border-color 0.15s, background 0.15s;
}
.doc-item:hover[b-l4y0f33b10] {
    border-color: var(--color-primary);
    background: rgba(45, 90, 142, 0.03);
}
.doc-item__icon[b-l4y0f33b10] {
    font-size: 22px;
    color: var(--color-primary);
    flex-shrink: 0;
}
.doc-item__main[b-l4y0f33b10] {
    flex: 1;
    min-width: 0;
}
.doc-item__name[b-l4y0f33b10] {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-item__meta[b-l4y0f33b10] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-item__action[b-l4y0f33b10] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 6px;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.doc-item__action:hover:not(:disabled)[b-l4y0f33b10] {
    color: var(--color-primary);
    background: rgba(45, 90, 142, 0.08);
}
.doc-item__action:disabled .material-symbols-outlined[b-l4y0f33b10] {
    animation: doc-spin-b-l4y0f33b10 1s linear infinite;
}
.doc-item__action .material-symbols-outlined[b-l4y0f33b10] {
    font-size: 18px;
}

/* ── Empty / loading / not found ───────────────────────────────────────── */
.empty-msg[b-l4y0f33b10] {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    padding: 1rem;
}
.loading-state[b-l4y0f33b10] {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}
.not-found-state[b-l4y0f33b10] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem;
    text-align: center;
}
.not-found-icon[b-l4y0f33b10] {
    font-size: 56px;
    color: var(--color-text-secondary);
    opacity: 0.4;
    margin-bottom: 1rem;
}
.not-found-state h3[b-l4y0f33b10] {
    margin: 0 0 0.5rem;
    color: var(--color-text);
    font-size: 1.2rem;
}
.not-found-state p[b-l4y0f33b10] {
    margin: 0 0 1.5rem;
    color: var(--color-text-secondary);
}
.btn-back[b-l4y0f33b10] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn-back:hover[b-l4y0f33b10] { background: var(--color-primary-dark); }
.btn-back .material-symbols-outlined[b-l4y0f33b10] { font-size: 18px; }

/* ── Helpers de grid y tipografía ──────────────────────────────────────── */
.tab-grid-span-2[b-l4y0f33b10] {
    grid-column: span 2;
}
.kv-mono[b-l4y0f33b10] {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}
.info-icon[b-l4y0f33b10] {
    font-size: 16px;
    color: var(--color-primary);
}

/* ── Listado de direcciones (envío y facturación) ──────────────────────── */
.address-list[b-l4y0f33b10] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.address-card[b-l4y0f33b10] {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.75rem 0.875rem;
    background: var(--color-bg);
    transition: border-color 0.15s;
}
.address-card:hover[b-l4y0f33b10] {
    border-color: var(--color-primary);
}
.address-card--default[b-l4y0f33b10] {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}
.address-card__header[b-l4y0f33b10] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}
.address-code[b-l4y0f33b10] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0.02em;
}
.address-badge[b-l4y0f33b10] {
    font-size: 0.68rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 20px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.address-badge--default[b-l4y0f33b10] {
    background: var(--color-primary);
    color: var(--color-surface);
    border-color: var(--color-primary);
}
.address-line[b-l4y0f33b10] {
    font-size: 0.8rem;
    color: var(--color-text);
    line-height: 1.35;
}
.address-line--muted[b-l4y0f33b10] {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    margin-top: 0.125rem;
}

/* ── Condiciones de preparación ────────────────────────────────────────── */
.prep-list[b-l4y0f33b10] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}
.prep-card[b-l4y0f33b10] {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.75rem 0.875rem;
    background: var(--color-bg);
}
.prep-card__header[b-l4y0f33b10] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-border);
}
.prep-tipo[b-l4y0f33b10] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}
.prep-code[b-l4y0f33b10] {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.prep-comment[b-l4y0f33b10] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.375rem 0;
}
.prep-comment__label[b-l4y0f33b10] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}
.prep-comment__value[b-l4y0f33b10] {
    font-size: 0.8rem;
    color: var(--color-text);
    white-space: pre-wrap;
}
.prep-comment--empty[b-l4y0f33b10] {
    font-size: 0.76rem;
    font-style: italic;
    color: var(--color-text-secondary);
}

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Tablet (horizontal y vertical): sin sidebar pero con espacio para 2 cols.
   Reducimos paddings de las tarjetas y hacemos el tab-bar más compacto para
   que 6 pestañas entren sin forzar scroll horizontal en la propia barra. */
@media (max-width: 991.98px) {
    .client-header[b-l4y0f33b10] {
        padding: 1rem 1.125rem;
    }
    .tab-item[b-l4y0f33b10] {
        padding: 0.55rem 0.95rem;
        font-size: 0.8rem;
    }
    .info-card[b-l4y0f33b10] {
        padding: 1rem 1.125rem;
    }
}

/* Móvil estricto: 1 columna en todas las cuadrículas. */
@media (max-width: 767px) {
    .tab-grid[b-l4y0f33b10] {
        grid-template-columns: 1fr;
    }
    .tab-grid-span-2[b-l4y0f33b10] {
        grid-column: span 1;
    }
    .client-header[b-l4y0f33b10] {
        padding: 1rem;
    }
    .client-name[b-l4y0f33b10] {
        font-size: 1rem;
    }
    .tab-item[b-l4y0f33b10] {
        padding: 0.5rem 0.875rem;
        font-size: 0.78rem;
    }
    .info-card[b-l4y0f33b10] {
        padding: 0.875rem 1rem;
    }
    .upload-row[b-l4y0f33b10] {
        flex-direction: column;
        align-items: stretch;
    }
    .upload-btn[b-l4y0f33b10] {
        justify-content: center;
    }
    .address-list[b-l4y0f33b10],
    .prep-list[b-l4y0f33b10] {
        grid-template-columns: 1fr;
    }
}

/* ── Recordatorios ─────────────────────────────────────────────────────── */
.reminders-pane[b-l4y0f33b10] {
    max-width: 100%;
}

.reminders-card[b-l4y0f33b10] {
    padding: 1.25rem;
}

.reminders-header[b-l4y0f33b10] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.reminders-header__title[b-l4y0f33b10] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.reminders-header__icon[b-l4y0f33b10] {
    color: var(--color-primary);
    font-size: 20px;
}

.reminders-header__count[b-l4y0f33b10] {
    color: var(--color-text-secondary);
    font-weight: 400;
    font-size: 0.875rem;
}

.reminders-add-btn[b-l4y0f33b10] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.reminders-add-btn:hover:not(:disabled)[b-l4y0f33b10] {
    background: #244a74;
}

.reminders-add-btn:disabled[b-l4y0f33b10] {
    opacity: 0.5;
    cursor: not-allowed;
}

.reminders-add-btn .material-symbols-outlined[b-l4y0f33b10] {
    font-size: 18px;
}

/* Form */
.reminder-form[b-l4y0f33b10] {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reminder-form__row[b-l4y0f33b10] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reminder-form__label[b-l4y0f33b10] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.reminder-form__input[b-l4y0f33b10],
.reminder-form__textarea[b-l4y0f33b10] {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.5rem 0.625rem;
    font-family: inherit;
    font-size: 0.9rem;
    background: #fff;
    color: var(--color-text);
    width: 100%;
    min-width: 0;
}

.reminder-form__input:focus[b-l4y0f33b10],
.reminder-form__textarea:focus[b-l4y0f33b10] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 90, 142, 0.15);
}

.reminder-form__input--date[b-l4y0f33b10] {
    max-width: 200px;
}

.reminder-form__textarea[b-l4y0f33b10] {
    resize: vertical;
    min-height: 60px;
}

.reminder-form__actions[b-l4y0f33b10] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-ghost[b-l4y0f33b10],
.btn-primary[b-l4y0f33b10] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    border: 1px solid transparent;
}

.btn-ghost[b-l4y0f33b10] {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.btn-ghost:hover:not(:disabled)[b-l4y0f33b10] {
    background: var(--color-bg);
    color: var(--color-text);
}

.btn-primary[b-l4y0f33b10] {
    background: var(--color-primary);
    color: #fff;
}

.btn-primary:hover:not(:disabled)[b-l4y0f33b10] {
    background: #244a74;
}

.btn-ghost:disabled[b-l4y0f33b10],
.btn-primary:disabled[b-l4y0f33b10] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primary .material-symbols-outlined[b-l4y0f33b10] {
    font-size: 18px;
}

.reminder-spin[b-l4y0f33b10] {
    animation: reminder-rotate-b-l4y0f33b10 1s linear infinite;
}

@keyframes reminder-rotate-b-l4y0f33b10 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Listado */
.reminder-list[b-l4y0f33b10] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reminder-item[b-l4y0f33b10] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.reminder-item:hover[b-l4y0f33b10] {
    background: #FAFBFF;
}

.reminder-item--done[b-l4y0f33b10] {
    background: #F7F9FA;
    border-color: #E5E9ED;
}

.reminder-item--done .reminder-title[b-l4y0f33b10] {
    text-decoration: line-through;
    color: var(--color-text-secondary);
}

.reminder-item--done .reminder-notes[b-l4y0f33b10] {
    text-decoration: line-through;
    color: #9AA0B3;
}

.reminder-check[b-l4y0f33b10] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 0;
}

.reminder-check:hover[b-l4y0f33b10] {
    background: #EEF2F6;
}

.reminder-check .material-symbols-outlined[b-l4y0f33b10] {
    font-size: 22px;
}

.reminder-check--on[b-l4y0f33b10] {
    color: var(--color-success);
}

.reminder-body[b-l4y0f33b10] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reminder-title[b-l4y0f33b10] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    word-break: break-word;
}

.reminder-notes[b-l4y0f33b10] {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.reminder-meta[b-l4y0f33b10] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    align-items: center;
}

.reminder-meta__chip[b-l4y0f33b10] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    background: #EEF4FC;
    color: var(--color-primary);
}

.reminder-meta__chip--due .material-symbols-outlined[b-l4y0f33b10] {
    font-size: 14px;
}

.reminder-meta__chip--shipto[b-l4y0f33b10] {
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    color: var(--color-accent);
}

.reminder-meta__chip--shipto .material-symbols-outlined[b-l4y0f33b10] {
    font-size: 14px;
}

.reminder-meta__author[b-l4y0f33b10],
.reminder-meta__done[b-l4y0f33b10] {
    font-size: 0.72rem;
}

.reminder-meta__done[b-l4y0f33b10] {
    color: var(--color-success);
}

.reminder-actions[b-l4y0f33b10] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.25rem;
}

.reminder-action[b-l4y0f33b10] {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.reminder-action:hover[b-l4y0f33b10] {
    background: var(--color-bg);
    color: var(--color-text);
}

.reminder-action--danger:hover[b-l4y0f33b10] {
    color: var(--color-danger);
}

.reminder-action--calendar:hover[b-l4y0f33b10] {
    color: var(--color-primary);
}
.reminder-action[disabled][b-l4y0f33b10] {
    cursor: progress;
    opacity: 0.7;
}

.reminder-action .material-symbols-outlined[b-l4y0f33b10] {
    font-size: 18px;
}

.reminders-empty[b-l4y0f33b10] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.reminders-empty__icon[b-l4y0f33b10] {
    display: block;
    font-size: 36px;
    opacity: 0.35;
    margin: 0 auto 0.5rem;
}

.reminders-empty__hint[b-l4y0f33b10] {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    opacity: 0.8;
}

@media (max-width: 767.98px) {
    .reminder-item[b-l4y0f33b10] {
        flex-wrap: wrap;
    }
    .reminder-actions[b-l4y0f33b10] {
        order: 3;
        width: 100%;
        justify-content: flex-end;
    }
    .reminder-form__input--date[b-l4y0f33b10] {
        max-width: 100%;
    }
}

/* ── Tabla de cestas del cliente (tab 5) ───────────────────────────────── */
.customer-carts-table[b-l4y0f33b10] { width: 100%; }
.customer-carts-table .col-center[b-l4y0f33b10] { text-align: center; }
.customer-carts-table .col-right[b-l4y0f33b10] { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.customer-carts-table .col-actions[b-l4y0f33b10] { width: 90px; text-align: right; }
.customer-carts-table .col-name[b-l4y0f33b10] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.customer-carts-table .data-row[b-l4y0f33b10] { cursor: pointer; transition: background 0.12s; }
.customer-carts-table .data-row:hover[b-l4y0f33b10] { background: #FAFBFF; }
.customer-carts-table .data-row.row-active[b-l4y0f33b10] { background: rgba(46, 158, 90, 0.08); }
.customer-carts-table .data-row.row-active:hover[b-l4y0f33b10] { background: rgba(46, 158, 90, 0.15); }
.active-dot[b-l4y0f33b10] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    flex-shrink: 0;
}

/* Badges de tipo / estado de cesta */
.badge[b-l4y0f33b10] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.badge--sale[b-l4y0f33b10] {
    background: rgba(45, 90, 142, 0.1);
    color: var(--color-primary);
}
.badge--return[b-l4y0f33b10] {
    background: rgba(224, 155, 48, 0.15);
    color: var(--color-warning);
}
.badge--open[b-l4y0f33b10] {
    background: rgba(46, 158, 90, 0.1);
    color: var(--color-success);
}
.badge--confirmed[b-l4y0f33b10] {
    background: rgba(107, 113, 134, 0.15);
    color: var(--color-text-secondary);
}
.badge--submitted[b-l4y0f33b10] {
    background: rgba(224, 155, 48, 0.15);
    color: var(--color-warning);
}
.badge--editing[b-l4y0f33b10] {
    background: rgba(45, 90, 142, 0.12);
    color: var(--color-primary);
}
.badge--processed[b-l4y0f33b10] {
    background: rgba(46, 158, 90, 0.12);
    color: var(--color-success);
}
.bc-doc-tag-small[b-l4y0f33b10] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

/* Acciones por fila */
.row-actions[b-l4y0f33b10] {
    display: inline-flex;
    gap: 0.25rem;
    justify-content: flex-end;
}
.btn-row-action[b-l4y0f33b10] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-row-action:hover[b-l4y0f33b10] { background: var(--color-bg); }
.btn-row-action .material-symbols-outlined[b-l4y0f33b10] { font-size: 18px; }
.btn-row-action--success[b-l4y0f33b10] { color: var(--color-success); }
.btn-row-action--success:hover[b-l4y0f33b10] {
    background: rgba(46, 158, 90, 0.1);
    border-color: var(--color-success);
}
.btn-row-action--muted[b-l4y0f33b10] { color: var(--color-success); opacity: 0.85; }

/* En tablet horizontal, las columnas auxiliares se compactan un poco */
@media (max-width: 767.98px) {
    .customer-carts-table th[b-l4y0f33b10],
    .customer-carts-table td[b-l4y0f33b10] {
        padding: 0.55rem 0.5rem;
        font-size: 0.82rem;
    }
}


/* ── Visitas ────────────────────────────────────────────────────────────── */
.visit-list[b-l4y0f33b10] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.visit-item[b-l4y0f33b10] {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.visit-item:hover[b-l4y0f33b10] { border-color: #C9D5E6; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.visit-item--future[b-l4y0f33b10] { background: #FAFCFF; border-color: #D5E1F0; }

.visit-item__type-pill[b-l4y0f33b10] {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #FFFFFF;
}
.visit-item__type-pill .material-symbols-outlined[b-l4y0f33b10] { font-size: 20px; }
.visit-type--commercial[b-l4y0f33b10] { background: var(--color-primary); }
.visit-type--technical[b-l4y0f33b10]  { background: var(--color-accent); }
.visit-type--courtesy[b-l4y0f33b10]   { background: var(--color-success); }
.visit-type--other[b-l4y0f33b10]      { background: var(--color-text-secondary); }

.visit-body[b-l4y0f33b10] {
    flex: 1;
    min-width: 0;
}

.visit-title[b-l4y0f33b10] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-weight: 700;
    color: var(--color-text);
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.visit-status-tag[b-l4y0f33b10] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}
.visit-status-tag--past[b-l4y0f33b10]   { background: rgba(46, 158, 90, 0.12); color: var(--color-success); }
.visit-status-tag--future[b-l4y0f33b10] { background: rgba(45, 90, 142, 0.12); color: var(--color-primary); }

.visit-meta[b-l4y0f33b10] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.visit-meta__chip[b-l4y0f33b10] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
}
.visit-meta__chip .material-symbols-outlined[b-l4y0f33b10] { font-size: 14px; }
.visit-meta__chip--attachments[b-l4y0f33b10] { color: var(--color-primary); }

.visit-line[b-l4y0f33b10] {
    font-size: 0.85rem;
    color: var(--color-text);
    margin-bottom: 0.25rem;
}
.visit-line__label[b-l4y0f33b10] {
    color: var(--color-text-secondary);
    font-weight: 600;
    margin-right: 0.3rem;
}
.visit-line--next[b-l4y0f33b10] {
    background: rgba(201, 147, 90, 0.08);
    border-left: 3px solid var(--color-accent);
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    margin-top: 0.35rem;
}

.visit-notes[b-l4y0f33b10] {
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-bg);
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    margin: 0.4rem 0;
    white-space: pre-wrap;
}

.visit-author[b-l4y0f33b10] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

.visit-actions[b-l4y0f33b10] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (max-width: 575.98px) {
    .visit-item[b-l4y0f33b10] { padding: 0.7rem 0.8rem; flex-wrap: wrap; }
    .visit-item__type-pill[b-l4y0f33b10] { width: 32px; height: 32px; }
    .visit-item__type-pill .material-symbols-outlined[b-l4y0f33b10] { font-size: 18px; }
    .visit-actions[b-l4y0f33b10] { flex-direction: row; width: 100%; justify-content: flex-end; }
}
/* /Pages/Customers/CustomerList.razor.rz.scp.css */
/* ── Card contenedora de la tabla (simula p-table con caption) ─────────── */
.table-card[b-wpp29r2qht] {
    background: var(--color-surface);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* ── Caption (cabecera sobre la tabla) ─────────────────────────────────── */
.table-caption[b-wpp29r2qht] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.caption-title[b-wpp29r2qht] {
    margin: 0;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-text);
}
.caption-actions[b-wpp29r2qht] {
    display: flex;
    gap: 0.4rem;
}
.btn-action[b-wpp29r2qht] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-action:hover:not(:disabled)[b-wpp29r2qht] {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-action:disabled[b-wpp29r2qht] {
    opacity: 0.35;
    cursor: default;
}
.btn-action .material-symbols-outlined[b-wpp29r2qht] {
    font-size: 20px;
}

/* ── Scroll container ──────────────────────────────────────────────────── */
.table-scroll[b-wpp29r2qht] {
    overflow-x: auto;
    max-height: 76vh;
    max-height: 76dvh;
    overflow-y: auto;
}

/* ── Tabla principal ───────────────────────────────────────────────────── */
.crm-table[b-wpp29r2qht] {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
@media (min-width: 576px) {
    .crm-table[b-wpp29r2qht] { width: 100%; }
}

/* ── Vista móvil: solo Nº + Nombre ─────────────────────────────────────────
   En <576 px el listado se limita a dos columnas (Nº y Nombre) para que quepa
   entero en la pantalla sin scroll horizontal. El resto de columnas (Cif,
   Dirección, Email, Teléfono y la flecha de acciones) se ocultan. La fila
   sigue siendo clickable → abre la ficha donde están todos los datos.
   Orden actual de columnas: 1=No 2=Cif 3=Name 4=Address 5=Email 6=Phone 7=Actions. */
@media (max-width: 575.98px) {
    .table-scroll[b-wpp29r2qht] {
        overflow-x: hidden;
    }
    .crm-table[b-wpp29r2qht] {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }
    .crm-table th:nth-child(2)[b-wpp29r2qht],
    .crm-table td:nth-child(2)[b-wpp29r2qht],
    .crm-table th:nth-child(4)[b-wpp29r2qht],
    .crm-table td:nth-child(4)[b-wpp29r2qht],
    .crm-table th:nth-child(5)[b-wpp29r2qht],
    .crm-table td:nth-child(5)[b-wpp29r2qht],
    .crm-table th:nth-child(6)[b-wpp29r2qht],
    .crm-table td:nth-child(6)[b-wpp29r2qht],
    .crm-table th:nth-child(7)[b-wpp29r2qht],
    .crm-table td:nth-child(7)[b-wpp29r2qht] {
        display: none;
    }
    .crm-table th:nth-child(1)[b-wpp29r2qht],
    .crm-table td:nth-child(1)[b-wpp29r2qht] {
        width: 35%;
    }
    .crm-table th:nth-child(3)[b-wpp29r2qht],
    .crm-table td:nth-child(3)[b-wpp29r2qht] {
        width: 65%;
    }
    .crm-table td[b-wpp29r2qht] {
        white-space: normal;
        overflow-wrap: anywhere;
        padding: 0.55rem 0.6rem;
    }
    .th-content[b-wpp29r2qht] {
        padding: 0.5rem 0.6rem 0.2rem;
    }
    .col-filter[b-wpp29r2qht] {
        padding: 0.15rem 0.6rem 0.4rem;
    }
    .empty-cell[b-wpp29r2qht] {
        padding: 2rem 0.75rem !important;
    }
}

/* ── Encabezados ───────────────────────────────────────────────────────── */
.crm-table thead[b-wpp29r2qht] {
    position: sticky;
    top: 0;
    z-index: 2;
}
.crm-table th[b-wpp29r2qht] {
    background: var(--color-bg);
    padding: 0;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    user-select: none;
    vertical-align: top;
}
.th-content[b-wpp29r2qht] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.65rem 0.875rem 0.25rem;
    cursor: pointer;
    white-space: nowrap;
}
.th-content:hover[b-wpp29r2qht] {
    color: var(--color-primary);
}

/* Sort icon */
.sort-icon[b-wpp29r2qht] {
    font-size: 16px;
    opacity: 0.25;
    transition: opacity 0.15s;
}
.th-content:hover .sort-icon[b-wpp29r2qht] { opacity: 0.5; }
.sort-asc .sort-icon[b-wpp29r2qht],
.sort-desc .sort-icon[b-wpp29r2qht] {
    opacity: 1;
    color: var(--color-primary);
}

/* Filtro de columna */
.col-filter[b-wpp29r2qht] {
    padding: 0.2rem 0.875rem 0.5rem;
}
.col-filter input[b-wpp29r2qht] {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    outline: none;
    transition: border-color 0.15s;
}
.col-filter input:focus[b-wpp29r2qht] {
    border-color: var(--color-primary);
}
.col-filter input[b-wpp29r2qht]::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

/* Columna acciones */
.col-actions[b-wpp29r2qht] {
    width: 50px;
    text-align: center;
    padding: 0.5rem !important;
}

/* Columnas compactas de icono (email/teléfono).
   Se renderizan como ancla con mailto:/tel: + tooltip nativo (title=) para
   ahorrar espacio en pantallas pequeñas sin scroll horizontal. */
.col-icon[b-wpp29r2qht] {
    width: 44px;
    text-align: center;
    padding: 0.35rem !important;
}
.contact-icon[b-wpp29r2qht] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.contact-icon:hover[b-wpp29r2qht] {
    background: var(--color-bg);
    color: var(--color-primary);
}
.contact-icon .material-symbols-outlined[b-wpp29r2qht] {
    font-size: 18px;
}

/* Indicador de bloqueo en la columna compacta (BC: blocked != " "). */
.blocked-icon[b-wpp29r2qht] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--color-danger);
    background: rgba(204, 51, 51, 0.1);
}
.blocked-icon .material-symbols-outlined[b-wpp29r2qht] {
    font-size: 16px;
}
.th-content--icon[b-wpp29r2qht] {
    justify-content: center;
    padding: 0.6rem 0.25rem 0.6rem;
    color: var(--color-text-secondary);
}
.th-content--icon .material-symbols-outlined[b-wpp29r2qht] {
    font-size: 18px;
}

/* ── Cuerpo ────────────────────────────────────────────────────────────── */
.crm-table td[b-wpp29r2qht] {
    padding: 0.6rem 0.875rem;
    border-bottom: 1px solid #F0F2F8;
    vertical-align: middle;
    color: var(--color-text);
    white-space: nowrap;
}
.crm-table tbody tr:last-child td[b-wpp29r2qht] {
    border-bottom: none;
}

/* Fila clickable */
.data-row[b-wpp29r2qht] {
    cursor: pointer;
    transition: background 0.12s;
}
.data-row:hover[b-wpp29r2qht] {
    background: var(--color-bg-hover, #FAFBFF);
}

/* Botón de fila */
.btn-row-action[b-wpp29r2qht] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color 0.15s;
}
.data-row:hover .btn-row-action[b-wpp29r2qht] {
    color: var(--color-primary);
}
.btn-row-action .material-symbols-outlined[b-wpp29r2qht] {
    font-size: 20px;
}

/* ── Skeleton loading ─────────────────────────────────────────────────── */
.skeleton-row td[b-wpp29r2qht] {
    padding: 0.8rem 0.875rem;
}
.skeleton[b-wpp29r2qht] {
    height: 1rem;
    width: 100%;
    background: linear-gradient(90deg, #F0F2F8 25%, #E8EAF0 50%, #F0F2F8 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse-b-wpp29r2qht 1.5s ease-in-out infinite;
    border-radius: 4px;
}
@keyframes skeleton-pulse-b-wpp29r2qht {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.empty-cell[b-wpp29r2qht] {
    text-align: center;
    padding: 2.5rem 1rem !important;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}
.empty-cell .material-symbols-outlined[b-wpp29r2qht] {
    vertical-align: middle;
    margin-right: 0.35rem;
    font-size: 18px;
}

/* ── Loading state ────────────────────────────────────────────────────── */
.loading-state[b-wpp29r2qht] {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}

/* ── Scrollbar dentro de la tabla ─────────────────────────────────────── */
.table-scroll[b-wpp29r2qht]::-webkit-scrollbar { width: 3px; height: 3px; }
.table-scroll[b-wpp29r2qht]::-webkit-scrollbar-thumb { background: lightgray; }
.table-scroll[b-wpp29r2qht]::-webkit-scrollbar-thumb:active { background: #000; }

/* ── Modal Nuevo Cliente ──────────────────────────────────────────────── */
.modal-backdrop[b-wpp29r2qht] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
}
.modal-panel[b-wpp29r2qht] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 1001;
    width: min(720px, 95vw);
    max-height: 90vh;
    max-height: min(90dvh, calc(var(--app-100vh) - 24px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-header[b-wpp29r2qht] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.modal-header h3[b-wpp29r2qht] {
    margin: 0;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text);
}
.modal-body[b-wpp29r2qht] {
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-width: 0;
}
.modal-footer[b-wpp29r2qht] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.btn-icon[b-wpp29r2qht] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-icon:hover[b-wpp29r2qht] { background: var(--color-bg); color: var(--color-text); }
.btn-icon.btn-danger:hover[b-wpp29r2qht] { color: var(--color-danger); }

.btn-primary[b-wpp29r2qht], .btn-secondary[b-wpp29r2qht] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid transparent;
}
.btn-primary[b-wpp29r2qht] {
    background: var(--color-primary);
    color: #fff;
}
.btn-primary:hover:not(:disabled)[b-wpp29r2qht] { filter: brightness(0.9); }
.btn-primary:disabled[b-wpp29r2qht] { opacity: 0.65; cursor: progress; }
.btn-secondary[b-wpp29r2qht] {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled)[b-wpp29r2qht] { background: var(--color-bg); }
.btn-sm[b-wpp29r2qht] { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
.spin[b-wpp29r2qht] {
    animation: spin-b-wpp29r2qht 1s linear infinite;
    font-size: 18px;
}
@keyframes spin-b-wpp29r2qht { to { transform: rotate(360deg); } }

.form-section[b-wpp29r2qht] { margin-bottom: 1.1rem; }
.form-section:last-child[b-wpp29r2qht] { margin-bottom: 0; }
.form-section-head[b-wpp29r2qht] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.55rem;
}
.form-section-title[b-wpp29r2qht] {
    margin: 0 0 0.55rem 0;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.form-section-head .form-section-title[b-wpp29r2qht] { margin-bottom: 0; }
.form-grid[b-wpp29r2qht] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 0.9rem;
}
.form-grid > .field[b-wpp29r2qht] { min-width: 0; }
.field[b-wpp29r2qht] { display: flex; flex-direction: column; }
.field--wide[b-wpp29r2qht] { grid-column: 1 / -1; }
.field > label[b-wpp29r2qht] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}
.field .req[b-wpp29r2qht] { color: var(--color-danger); margin-left: 0.15rem; }
.field input[type="text"][b-wpp29r2qht],
.field input[type="tel"][b-wpp29r2qht],
.field input[type="email"][b-wpp29r2qht] {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    font-size: 0.9rem;
    background: var(--color-surface);
    color: var(--color-text);
}
.field input:focus[b-wpp29r2qht] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45,90,142,0.15);
}
.field input[readonly][b-wpp29r2qht] { background: var(--color-bg); color: var(--color-text-secondary); }
.field .input-error[b-wpp29r2qht] {
    border-color: var(--color-danger);
}
.field-error[b-wpp29r2qht] {
    font-size: 0.75rem;
    color: var(--color-danger);
    margin-top: 0.2rem;
}
.form-alert[b-wpp29r2qht] {
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.8rem;
    font-size: 0.88rem;
}
.form-alert--error[b-wpp29r2qht] {
    background: #fdecec;
    color: var(--color-danger);
    border: 1px solid #f5c2c2;
}
.empty-hint[b-wpp29r2qht] {
    padding: 0.6rem 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    background: var(--color-bg);
    border-radius: 6px;
}

.subform-card[b-wpp29r2qht] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.7rem;
    background: var(--color-bg);
}
.subform-head[b-wpp29r2qht] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}
.subform-title[b-wpp29r2qht] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text);
    flex: 1;
}
.subform-default[b-wpp29r2qht] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

@media (max-width: 767.98px) {
    .modal-panel[b-wpp29r2qht] {
        width: 100vw;
        height: var(--app-100vh);
        max-height: 100vh;
        max-height: var(--app-100vh);
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
    }
    .modal-body[b-wpp29r2qht] { padding: 0.9rem 1rem; }
    .form-grid[b-wpp29r2qht] { grid-template-columns: 1fr; gap: 0.55rem; }
    .field--wide[b-wpp29r2qht] { grid-column: 1; }
    .modal-footer[b-wpp29r2qht] {
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
    }
    .modal-footer .btn-primary[b-wpp29r2qht], .modal-footer .btn-secondary[b-wpp29r2qht] {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }
}

/* ── Barra de paginación ────────────────────────────────────────────────── */
.pagination-bar[b-wpp29r2qht] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
}
.pagination-info[b-wpp29r2qht] {
    font-weight: 500;
    color: var(--color-text);
}
.pagination-controls[b-wpp29r2qht] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.page-size[b-wpp29r2qht] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    margin-right: 0.5rem;
}
.page-size select[b-wpp29r2qht] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.25rem 1.4rem 0.25rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.82rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7186' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
}
.page-size select:focus[b-wpp29r2qht] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 90, 142, 0.15);
}
.btn-page[b-wpp29r2qht] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-page:hover:not(:disabled)[b-wpp29r2qht] {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-page:disabled[b-wpp29r2qht] {
    opacity: 0.35;
    cursor: default;
}
.btn-page .material-symbols-outlined[b-wpp29r2qht] {
    font-size: 18px;
}
.page-indicator[b-wpp29r2qht] {
    padding: 0 0.45rem;
    white-space: nowrap;
    color: var(--color-text);
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .pagination-bar[b-wpp29r2qht] {
        justify-content: center;
        padding: 0.6rem 0.7rem;
    }
    .pagination-info[b-wpp29r2qht] { width: 100%; text-align: center; }
    .page-size[b-wpp29r2qht] { margin-right: 0.2rem; }
}

/* ── Selectores con alineación de guión (métodos/términos de pago) ──────────
   Los <option> se rellenan con NBSP en el código (ver FormatCodeOption en el
   .razor) para que "CODE — Descripción" tenga el guión en la misma columna
   en todas las filas. Esa técnica solo funciona si cada glifo ocupa el mismo
   ancho, así que forzamos una pila monospace tanto en el <select> (texto
   seleccionado visible) como en los <option> (lista desplegada). */
.aligned-select[b-wpp29r2qht],
.aligned-select option[b-wpp29r2qht] {
    font-family: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-variant-numeric: tabular-nums;
}
/* /Pages/Customers/CustomerVisitModal.razor.rz.scp.css */
/* Layout del formulario — 2 columnas en desktop, 1 columna en móvil. */
.visit-form-grid[b-fc73lauzvk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.field--span-2[b-fc73lauzvk] {
    grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
    .visit-form-grid[b-fc73lauzvk] {
        grid-template-columns: 1fr;
    }
}

/* ── Sección de adjuntos ─────────────────────────────────────────────── */
.visit-attachments[b-fc73lauzvk] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.visit-attachments__header[b-fc73lauzvk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.visit-attachments__header h4[b-fc73lauzvk] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.visit-attachments__header .material-symbols-outlined[b-fc73lauzvk] {
    font-size: 18px;
    color: var(--color-primary);
}

.visit-attachments__count[b-fc73lauzvk] {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
}

.visit-attachments__progress[b-fc73lauzvk] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: #FAFBFF;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
}

/* Lista de adjuntos */
.visit-attachment-list[b-fc73lauzvk] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.visit-attachment-item[b-fc73lauzvk] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.visit-attachment-item__icon[b-fc73lauzvk] {
    color: var(--color-primary);
    font-size: 22px;
    flex-shrink: 0;
}

.visit-attachment-item__main[b-fc73lauzvk] {
    flex: 1;
    min-width: 0;
}

.visit-attachment-item__name[b-fc73lauzvk] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.visit-attachment-item__meta[b-fc73lauzvk] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.1rem;
}

[b-fc73lauzvk] .btn-icon--danger {
    color: var(--color-danger);
}
[b-fc73lauzvk] .btn-icon--danger:hover:not(:disabled) {
    background: rgba(204, 51, 51, 0.08);
}

/* Botón "Subir" en cabecera de adjuntos — el InputFile interno se oculta visualmente.
   Reutiliza .btn-secondary del components.css global. */
[b-fc73lauzvk] .visit-attachments .btn-secondary input[type=file] {
    display: none;
}

[b-fc73lauzvk] .btn-secondary--disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spin reutilizado de components.css. Aquí no hace falta redefinirlo, pero
   sí asegurar que funcione dentro del modal. */
.spin[b-fc73lauzvk] {
    animation: visit-spin-b-fc73lauzvk 1s linear infinite;
}
@keyframes visit-spin-b-fc73lauzvk {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* /Pages/Dashboards/SalesDashboard.razor.rz.scp.css */
/* Sales dashboard — UI/UX premium con neumorfismo Soft Saphir.
   v0.41.0+ (rediseño visual). El layout y los componentes los aporta MudBlazor
   (MudGrid, MudPaper, MudChart, MudList…). Aquí solo viven los estilos
   específicos del dashboard:
     - Cards con dual shadow (luz fría arriba-izquierda, sombra azul Saphir
       abajo-derecha) sobre fondo casi idéntico al de la página → look
       neumórfico sin recurrir a tono frío extremo.
     - Hero card (SalesPersonCode) con gradiente azul Saphir, glow halo,
       patrón diagonal sutil y avatar con anillo luminoso.
     - Avatares de los demás KPI cards en pills neumórficas con shadow ring.
     - Top clientes: rank pill (oro al #1, azul al resto) y barra de progreso
       con gradient azul→accent sobre well inset.
     - Animación de entrada fade-up con stagger por orden de aparición.
     - Ambient blobs decorativos detrás del dashboard para profundidad.

   Convención: cualquier estilo que tenga que penetrar al árbol de MudBlazor
   usa `::deep` (sin él el CSS scoped no llega a clases generadas por la
   librería). El `!important` se reserva para sobrescribir reglas inline que
   MudBlazor aplica desde `MudBlazor.min.css`. */

/* ── Patrón --fill — el dashboard ocupa el alto exacto del viewport ─────
   v0.47.0+: layout de 3 filas (header / KPIs / panel-grid) donde la
   tercera fila ocupa el espacio sobrante (1fr) y el chart se redimensiona
   a ese alto disponible. Sin scroll a nivel de página — solo la lista
   de top clientes scroleará si supera el alto del panel. */
.sd-root[b-8pw4wmtkph] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    height: 100%;
    min-height: 0;
    padding: 0;
    min-width: 0;
    position: relative;
}

/* Grid de 6 KPIs con breakpoints duros — v0.55.6.
   Antes usaba `auto-fit, minmax(170px, 1fr)`, lo que dejaba 1 o 2 KPIs
   huérfanos en la última fila en muchas resoluciones intermedias
   (tablet horizontal, portátil estrecho, móvil) → cards descentradas.
   Ahora pasamos a número de columnas explícito por viewport para que
   las filas SIEMPRE queden completas: 6×1 en desktop ≥1280, 3×2 en
   tablet 768-1279, 2×3 en móvil grande, 1×6 en móvil estrecho.
   `minmax(0, 1fr)` previene grid blow-out cuando una card tiene
   contenido largo (importes, fechas). */
.sd-kpi-grid[b-8pw4wmtkph] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    flex-shrink: 0;
}

@media (max-width: 1279.98px) {
    /* Tablet horizontal / portátil pequeño con sidebar colapsado (70 px).
       3 columnas × 2 filas — cada KPI ~280-340 px, perfecto para
       resoluciones 1024-1279 px. */
    .sd-kpi-grid[b-8pw4wmtkph] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    /* Móvil grande / tablet vertical pequeña — 2 columnas × 3 filas. */
    .sd-kpi-grid[b-8pw4wmtkph] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
    /* Móvil estrecho — 1 columna apilada. */
    .sd-kpi-grid[b-8pw4wmtkph] { grid-template-columns: minmax(0, 1fr); }
}

/* Grid de los 3 paneles (chart 2fr + actividad 1.1fr + top clientes 1fr) que
   ocupa el resto del alto. `min-height: 0` es OBLIGATORIO en flex children
   que tienen scroll/grow interior — sin él, los hijos no respetan flex:1
   y se desbordan. v0.42.0+: añadida la columna de "Actividad reciente".

   v0.55.1: cap del alto en desktop. Sin él, en monitores 1080p+ el chart
   crecía a ~500-600 px de alto (todo el viewport restante tras header +
   KPIs), lo que rompía la proporción visual. `min(380px, 50vh)` deja un
   chart legible (260-320 px efectivos tras padding del panel) y acepta
   espacio en blanco abajo en monitores muy altos. En tablet horizontal
   (<1280 px) el grid pasa a 2 filas; el cap se relaja allí porque cada
   fila tiene contenido distinto. */
.sd-panel-grid[b-8pw4wmtkph] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(380px, 50vh);
    display: grid;
    grid-template-columns: 2fr 1.1fr 1fr;
    gap: 0.7rem;
}

/* Tablet horizontal / desktop pequeño — la columna de actividad pasa a una
   segunda fila ocupando todo el ancho. Mantiene la legibilidad del chart en
   portátiles 13-14" sin perder el feed.
   v0.55.6: filas con alturas explícitas. Antes solo el `min-height` de
   activity (240 px) restaba alto al chart en tablet 1024×768 dejando el
   bar chart con ~200 px → barras aplastadas. Ahora las dos filas son
   `auto minmax(180px, 280px)` así que el chart respira y la activity
   tiene siempre un mínimo de 180 px (no 240) con tope 280. */
@media (max-width: 1279.98px) {
    .sd-panel-grid[b-8pw4wmtkph] {
        max-height: none;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: minmax(240px, 1fr) minmax(180px, 280px);
        grid-template-areas:
            "chart top"
            "activity activity";
    }
    .sd-panel-cell--chart[b-8pw4wmtkph]    { grid-area: chart; min-height: 0; }
    .sd-panel-cell--top[b-8pw4wmtkph]      { grid-area: top; min-height: 0; }
    .sd-panel-cell--activity[b-8pw4wmtkph] { grid-area: activity; min-height: 0; }
}

/* Celda del grid de paneles — contiene a uno solo (chart, activity o top).
   En desktop el cell es flex column para que el `.sd-panel` interior pueda
   estirar a 100% del alto (el grid padre da altura concreta vía
   `max-height: min(380px, 50vh)`). `overflow: hidden` + `isolation: isolate`
   son red de seguridad contra solapes verticales.

   IMPORTANTE: esta regla BASE debe estar ANTES de los media queries
   que la sobrescriben (línea ~115). Si se moviese DESPUÉS, ganaría por
   orden y el override de móvil (display:block + altura fija) se perdería
   → bug v0.55.5-v0.55.12. Mantener el orden. */
.sd-panel-cell[b-8pw4wmtkph] {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}

@media (max-width: 991.98px) {
    /* En tablet vertical y móvil, los paneles apilan en 1 columna.
       v0.55.14: el panel-grid pasa a FLEX COLUMN en lugar de CSS Grid.
       Razón: v0.55.13 solo arregló el orden de reglas, pero el
       `grid-area: chart/activity/top` heredado del media query
       @1279.98 seguía aplicándose en <992 px porque ese media query
       también matchea. En algunos motores (DevTools responsive,
       WebKit móvil) esa combinación con `grid-template-areas: none`
       impedía que las celdas tomaran su `height` declarado en este
       breakpoint → chart y actividad colapsaban a 0 px (su
       contenido depende de `height: 100%` recursivo), mientras que
       Top Clientes sí se veía porque su contenido (MudList) tiene
       altura natural. Cambiando a FLEX eliminamos el grid por
       completo: `grid-area`, `grid-template-*` y demás propiedades
       del grid quedan inertes en un contexto flex y no hay
       ambigüedad posible. */
    .sd-panel-grid[b-8pw4wmtkph] {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        /* Reset defensivo de propiedades grid heredadas. No estrictamente
           necesario en flex, pero documenta la intención y evita
           confusión si alguien debugea las computed styles. */
        grid-template-columns: initial;
        grid-template-rows: initial;
        grid-template-areas: initial;
    }
    .sd-panel-cell[b-8pw4wmtkph] {
        display: block;
        overflow: visible;
        isolation: auto;
        /* Reset explícito del grid-area heredado de @1279.98. En contexto
           flex es ignorado, pero el reset evita interferencias si el
           usuario amplía/reduce el viewport en vivo (DevTools). */
        grid-area: auto;
        /* Como flex items, no encoger; ancho total del contenedor. */
        flex-shrink: 0;
        width: 100%;
    }
    .sd-panel-cell--chart[b-8pw4wmtkph]    { height: 280px; }
    .sd-panel-cell--activity[b-8pw4wmtkph] { height: 360px; }
    .sd-panel-cell--top[b-8pw4wmtkph]      { height: 320px; }
    .sd-root[b-8pw4wmtkph] {
        height: auto;
    }
}

/* Móvil horizontal — vista panorámica corta de alto. Reducimos las
   alturas para que las 3 cards entren sin obligar a scroll excesivo. */
@media (max-width: 991.98px) and (max-height: 500px) {
    .sd-panel-cell--chart[b-8pw4wmtkph]    { height: 220px; }
    .sd-panel-cell--activity[b-8pw4wmtkph] { height: 280px; }
    .sd-panel-cell--top[b-8pw4wmtkph]      { height: 240px; }
}

/* Ambient gradient blobs — pintan profundidad detrás del contenido sin
   robar foco. Solo se activan en pantallas grandes (≥1440 px de ancho Y
   ≥900 px de alto) para no añadir paint inútil en portátiles 13-14".
   `pointer-events:none` y z-index bajo para que no estorben. */
@media (min-width: 1440px) and (min-height: 900px) {
    .sd-root[b-8pw4wmtkph]::before,
    .sd-root[b-8pw4wmtkph]::after {
        content: '';
        position: absolute;
        pointer-events: none;
        z-index: 0;
        filter: blur(70px);
        opacity: 0.55;
    }
    .sd-root[b-8pw4wmtkph]::before {
        top: -30px;
        left: 4%;
        width: 380px;
        height: 380px;
        background: radial-gradient(circle, rgba(45, 90, 142, 0.30), transparent 70%);
    }
    .sd-root[b-8pw4wmtkph]::after {
        top: 220px;
        right: 4%;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(201, 147, 90, 0.22), transparent 70%);
    }
}

/* Todos los hijos directos por encima del ambiente decorativo. */
.sd-root > *[b-8pw4wmtkph] {
    position: relative;
    z-index: 1;
}

/* ── Header — compacto, todo en una línea ──────────────────────────── */
.sd-header[b-8pw4wmtkph] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.25rem;
    flex-shrink: 0;
}
.sd-header > div[b-8pw4wmtkph] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex: 1 1 auto;
}

/* Subtítulo: truncado con ellipsis si no cabe en una línea — evita que
   "Actualizado el dd/MM/yyyy HH:mm" empuje al botón refresh fuera del
   viewport en móvil estrecho (<360 px). Aplica con ::deep porque el
   MudText interno renderiza un <p>/<span>. */
[b-8pw4wmtkph] .sd-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-8pw4wmtkph] .sd-title {
    margin: 0 !important;
    font-weight: 800 !important;
    font-size: 1.25rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    /* Texto en gradiente: oscuro a primario para que el título cante sin
       inundar de color. Webkit prefix mantiene compat con Safari. */
    background: linear-gradient(135deg, #1A1D2B 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

[b-8pw4wmtkph] .sd-subtitle {
    margin: 0.1rem 0 0 !important;
    color: var(--color-text-secondary) !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
}

/* Refresh: pill neumorfística flotante. Hover invierte la sombra (efecto
   "presionado"). Al estar dentro de MudIconButton necesita ::deep. */
.sd-header[b-8pw4wmtkph]  .mud-icon-button {
    background: var(--color-bg) !important;
    border-radius: 12px !important;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    box-shadow:
        -3px -3px 8px rgba(255, 255, 255, 0.95),
        3px 3px 10px rgba(45, 90, 142, 0.14) !important;
    transition: box-shadow 0.25s ease, transform 0.18s ease, color 0.18s ease !important;
    color: var(--color-primary) !important;
}
.sd-header[b-8pw4wmtkph]  .mud-icon-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        -2px -2px 6px rgba(255, 255, 255, 0.9),
        2px 2px 8px rgba(45, 90, 142, 0.18) !important;
}
.sd-header[b-8pw4wmtkph]  .mud-icon-button:active:not(:disabled),
.sd-header[b-8pw4wmtkph]  .mud-icon-button:disabled {
    box-shadow:
        inset -2px -2px 6px rgba(255, 255, 255, 0.85),
        inset 2px 2px 6px rgba(45, 90, 142, 0.14) !important;
    transform: none;
}

/* ── KPI cards estándar ─────────────────────────────────────────────── */

[b-8pw4wmtkph] .sd-kpi {
    background: var(--color-bg) !important;
    border-radius: 14px !important;
    padding: 0.7rem 0.9rem !important;
    height: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid transparent !important;
    /* Dual shadow Soft Saphir: luz neutra arriba-izquierda, sombra tintada
       de azul abajo-derecha. Las dos cantidades crean el relieve sutil. */
    box-shadow:
        -5px -5px 12px rgba(255, 255, 255, 0.95),
        5px 5px 14px rgba(45, 90, 142, 0.10) !important;
    transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
    animation: sd-fade-up-b-8pw4wmtkph 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Stagger del fade-up: cada card entra escalonada para dar sensación
   de "construcción" del dashboard al primer paint. */
[b-8pw4wmtkph] .sd-kpi:nth-of-type(1) { animation-delay: 0.05s; }
[b-8pw4wmtkph] .sd-kpi:nth-of-type(2) { animation-delay: 0.10s; }
[b-8pw4wmtkph] .sd-kpi:nth-of-type(3) { animation-delay: 0.15s; }
[b-8pw4wmtkph] .sd-kpi:nth-of-type(4) { animation-delay: 0.20s; }
[b-8pw4wmtkph] .sd-kpi:nth-of-type(5) { animation-delay: 0.25s; }

@keyframes sd-fade-up-b-8pw4wmtkph {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

[b-8pw4wmtkph] .sd-kpi:hover {
    transform: translateY(-3px);
    box-shadow:
        -9px -9px 22px rgba(255, 255, 255, 1),
        9px 9px 28px rgba(45, 90, 142, 0.18) !important;
}

/* Sliver decorativo arriba-derecha en cada card: gradiente radial muy
   sutil que da textura sin distraer. */
[b-8pw4wmtkph] .sd-kpi::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle at top right,
        rgba(45, 90, 142, 0.10),
        transparent 70%);
    pointer-events: none;
}

/* ── Layout interno de la card ──────────────────────────────────────── */
[b-8pw4wmtkph] .sd-kpi__inner {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 50px;
    position: relative;
    z-index: 1;
}

/* Avatares: pill cuadrada redondeada con dual shadow (relieve neumorfístico)
   y glow ring. */
[b-8pw4wmtkph] .sd-kpi__avatar {
    flex: 0 0 auto;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    border-radius: 10px !important;
    box-shadow:
        -3px -3px 8px rgba(255, 255, 255, 0.95),
        3px 3px 10px rgba(45, 90, 142, 0.12),
        inset 0 -1px 2px rgba(45, 90, 142, 0.08) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
[b-8pw4wmtkph] .sd-kpi:hover .sd-kpi__avatar {
    transform: scale(1.05);
}

[b-8pw4wmtkph] .sd-kpi__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

[b-8pw4wmtkph] .sd-kpi__label {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.2;
}

[b-8pw4wmtkph] .sd-kpi__value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

[b-8pw4wmtkph] .sd-kpi__hint {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
}

[b-8pw4wmtkph] .sd-kpi__hint {
    font-size: 0.73rem;
    color: var(--color-text-secondary);
    margin-top: 0.2rem;
}
[b-8pw4wmtkph] .sd-kpi__hint--warn {
    color: var(--color-warning);
    font-weight: 700;
}

/* Skeleton de MudBlazor: tono neumórfico (sin saturar) + radius coherente. */
[b-8pw4wmtkph] .sd-kpi .mud-skeleton {
    background-color: rgba(45, 90, 142, 0.08) !important;
    border-radius: 6px !important;
    height: 1.5rem !important;
}

/* ── Paneles (chart + top clientes) ─────────────────────────────────── */
[b-8pw4wmtkph] .sd-panel {
    background: var(--color-bg) !important;
    border-radius: 16px !important;
    padding: 0.85rem 1rem 0.95rem !important;
    /* `flex: 1 1 auto` hace que el panel ESTIRE para llenar el cell (que
       es flex column). Sin esto, en móvil/tablet (donde el cell solo
       tiene `min-height` y no `height` fijo), el `height: 100%` no se
       resuelve, el panel colapsa a su altura natural y el `overflow:
       hidden` del cell (v0.55.8) esconde lo poco que quedaba — el feed
       parecía invisible. v0.55.9. */
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    min-width: 0;
    position: relative;
    /* Cada panel es flex column: header arriba (auto), body crece (1fr). */
    display: flex !important;
    flex-direction: column;
    box-shadow:
        -5px -5px 12px rgba(255, 255, 255, 0.95),
        5px 5px 14px rgba(45, 90, 142, 0.10) !important;
    animation: sd-fade-up-b-8pw4wmtkph 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: 0.35s;
    overflow: hidden;
}

[b-8pw4wmtkph] .sd-panel__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(45, 90, 142, 0.10);
    flex-shrink: 0;
}

[b-8pw4wmtkph] .sd-panel__title {
    color: var(--color-text) !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    letter-spacing: -0.01em !important;
}

/* Body del panel: ocupa el resto del alto del panel. El chart vive aquí
   con height: 100% y se redimensiona al espacio disponible.
   IMPORTANTE: `::deep` es OBLIGATORIO aquí — el componente RecentActivity
   reutiliza estas clases desde su propio scope (sub-componente), y sin
   `::deep` el CSS isolation de Blazor no propagaría las reglas al árbol
   del hijo. Sin esto, el body del feed perdía `overflow:auto` y la
   timeline se derramaba fuera del panel solapando con Top Clientes
   en formato vertical (bug v0.55.6). */
[b-8pw4wmtkph] .sd-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Body con scroll para listas largas (top clientes, actividad reciente). */
[b-8pw4wmtkph] .sd-panel__body--scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

[b-8pw4wmtkph] .sd-panel__empty {
    color: var(--color-text-secondary) !important;
    text-align: center;
    padding: 1.5rem 0 !important;
    font-style: italic;
    font-size: 0.88rem;
    margin: auto;
}

/* MudChart ocupa todo el body — clave para que el patrón --fill funcione. */
[b-8pw4wmtkph] .sd-panel--chart .mud-chart {
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    height: 100% !important;
}
[b-8pw4wmtkph] .sd-panel--chart .mud-chart > svg {
    width: 100% !important;
    height: 100% !important;
}

/* ── Polish del bar chart (v0.55.4) ──────────────────────────────────────
   Aprendizaje de v0.55.3: MudBlazor 9.x renderiza cada barra del bar
   chart como un `<line>` SVG vertical con un `stroke-width` grueso
   (no como `<rect>`/`<polygon>`). Cualquier regla CSS que toque
   `line` globalmente o `stroke-width` con `!important` adelgaza las
   barras hasta hacerlas invisibles — fue lo que pasó en v0.55.3.

   Ahora SOLO tocamos:
     - El color de las barras vía `.mud-chart-line` (clase que MudBlazor
       pone al `<line>` de cada barra) — sin sobrescribir `stroke-width`,
       que viene calculado dinámicamente por el chart en función del
       ancho disponible.
     - El hover sobre la misma clase (cambia stroke al cobre Saphir).
     - Una sombra muy sutil al SVG completo para dar relieve.

   Los ejes, ticks y números siguen con el render por defecto de
   MudBlazor — sobre `--color-bg` se ven bien y NO merece la pena
   arriesgar a romper algo intentando re-tintarlos. */
[b-8pw4wmtkph] .sd-panel--chart .mud-chart .mud-chart-line {
    transition: stroke 0.18s ease;
}
[b-8pw4wmtkph] .sd-panel--chart .mud-chart .mud-chart-line:hover {
    stroke: var(--color-accent) !important;
}

/* Sombra de drop sutil al SVG completo para separar el chart del fondo
   neumórfico del panel. No afecta al rendering de las barras (es un
   filter sobre el SVG entero). */
[b-8pw4wmtkph] .sd-panel--chart .mud-chart svg {
    filter: drop-shadow(0 2px 6px rgba(45, 90, 142, 0.08));
}

/* MudSkeleton dentro del panel — coherente con los KPIs. */
[b-8pw4wmtkph] .sd-panel .mud-skeleton {
    background-color: rgba(45, 90, 142, 0.07) !important;
    border-radius: 10px !important;
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Top clientes — ranking premium ─────────────────────────────────── */
[b-8pw4wmtkph] .sd-toplist {
    padding: 0;
    background: transparent !important;
}

[b-8pw4wmtkph] .sd-toprow {
    padding: 0.85rem 0 !important;
    background: transparent !important;
}
[b-8pw4wmtkph] .sd-toprow:not(:last-child) {
    border-bottom: 1px solid rgba(45, 90, 142, 0.07);
}

[b-8pw4wmtkph] .sd-toprow__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

[b-8pw4wmtkph] .sd-toprow__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

/* Rank pill: oro al #1 (gradient accent), azul Saphir al resto. */
[b-8pw4wmtkph] .sd-toprow__rank {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    background: linear-gradient(135deg, var(--color-primary), #21456E);
    border-radius: 9px;
    box-shadow: 0 4px 10px -2px rgba(45, 90, 142, 0.35);
}
[b-8pw4wmtkph] .sd-toprow:first-child .sd-toprow__rank {
    background: linear-gradient(135deg, #D6A06A, #A87642);
    box-shadow: 0 4px 12px -2px rgba(201, 147, 90, 0.45);
}

[b-8pw4wmtkph] .sd-toprow__name {
    flex: 1;
    color: var(--color-text);
    font-size: 0.93rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

[b-8pw4wmtkph] .sd-toprow__total {
    flex: 0 0 auto;
    color: var(--color-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
}

/* Barra de progreso: well inset + barra con gradient azul→accent. */
[b-8pw4wmtkph] .sd-toprow__bar {
    width: 100%;
    height: 8px !important;
    border-radius: 6px !important;
    background: rgba(45, 90, 142, 0.08) !important;
    box-shadow: inset 1px 1px 3px rgba(45, 90, 142, 0.14) !important;
    overflow: hidden;
}
[b-8pw4wmtkph] .sd-toprow__bar .mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 4px rgba(45, 90, 142, 0.30);
}

/* ── Móvil estrecho — compactar avatares, tipografía, paddings ──────── */
@media (max-width: 600px) {
    .sd-root[b-8pw4wmtkph] {
        padding: 0.5rem 0.25rem 1.25rem;
        gap: 0.85rem;
    }
    .sd-root[b-8pw4wmtkph]::before,
    .sd-root[b-8pw4wmtkph]::after {
        display: none;  /* Los blobs no se ven en móvil y consumen pintura */
    }
    [b-8pw4wmtkph] .sd-title { font-size: 1.25rem !important; }

    [b-8pw4wmtkph] .sd-kpi {
        padding: 0.85rem 0.95rem !important;
        border-radius: 14px !important;
        box-shadow:
            -4px -4px 10px rgba(255, 255, 255, 0.9),
            4px 4px 12px rgba(45, 90, 142, 0.10) !important;
    }
    [b-8pw4wmtkph] .sd-kpi__inner { min-height: 56px; gap: 0.75rem; }
    [b-8pw4wmtkph] .sd-kpi__avatar {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        min-height: 40px;
        border-radius: 11px !important;
    }
    [b-8pw4wmtkph] .sd-kpi__value { font-size: 1.3rem; }

    [b-8pw4wmtkph] .sd-panel {
        padding: 1rem !important;
        border-radius: 16px !important;
    }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    [b-8pw4wmtkph] .sd-kpi,
    [b-8pw4wmtkph] .sd-panel {
        animation: none !important;
    }
    [b-8pw4wmtkph] .sd-kpi:hover,
    .sd-header[b-8pw4wmtkph]  .mud-icon-button:hover:not(:disabled) {
        transform: none;
    }
    [b-8pw4wmtkph] .sd-kpi:hover .sd-kpi__avatar { transform: none; }
}

/* MudAlert de error — alinear al radio de los paneles. */
.sd-error[b-8pw4wmtkph] {
    border-radius: 14px !important;
}
/* /Pages/DeliveryNotes/DeliveryNoteDetailModal.razor.rz.scp.css */
/* CSS isolation: estilos del modal de detalle de albaranes. */

.doc-detail[b-wsz15p1z6x] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.doc-meta-grid[b-wsz15p1z6x] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.doc-meta-grid > div[b-wsz15p1z6x] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.meta-label[b-wsz15p1z6x] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.meta-value[b-wsz15p1z6x] {
    color: var(--color-text);
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.cust-no[b-wsz15p1z6x] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.cust-name[b-wsz15p1z6x] {
    font-size: 0.92rem;
    color: var(--color-text);
}

.section-title[b-wsz15p1z6x] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.table-scroll[b-wsz15p1z6x] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.crm-table[b-wsz15p1z6x] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.crm-table thead th[b-wsz15p1z6x] {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.crm-table tbody td[b-wsz15p1z6x] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}
.crm-table tfoot td[b-wsz15p1z6x] {
    padding: 0.65rem 0.75rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}
.col-center[b-wsz15p1z6x] { text-align: center; }
.col-right[b-wsz15p1z6x]  { text-align: right; }

.bc-doc-tag-small[b-wsz15p1z6x] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: rgba(45, 90, 142, 0.08);
    color: var(--color-primary);
    border-radius: 5px;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.78rem;
    font-weight: 600;
}

.empty-cell[b-wsz15p1z6x] {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 2rem 1rem;
    font-style: italic;
}

@media (max-width: 575.98px) {
    .doc-meta-grid[b-wsz15p1z6x] { grid-template-columns: 1fr; gap: 0.5rem; }
}
/* /Pages/DeliveryNotes/DeliveryNoteList.razor.rz.scp.css */
/* CSS isolation: estilos del listado de albaranes. Patrón calcado de
   CustomerList/CatalogItemList — adaptaciones mínimas. */

.table-card[b-ox4qw82kcn] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.table-caption[b-ox4qw82kcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.caption-title[b-ox4qw82kcn] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}

.caption-actions[b-ox4qw82kcn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.caption-search[b-ox4qw82kcn] {
    width: 280px;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.caption-search:focus[b-ox4qw82kcn] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 90, 142, 0.15);
}

/* ── Tabs venta / devolución ─────────────────────────────────────────────── */
.tab-bar[b-ox4qw82kcn] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    overflow-x: auto;
}
.tab-btn[b-ox4qw82kcn] {
    padding: 0.7rem 1.2rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover[b-ox4qw82kcn] {
    color: var(--color-text);
}
.tab-btn--active[b-ox4qw82kcn] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: var(--color-surface);
}

/* ── Tabla ──────────────────────────────────────────────────────────────── */
.table-scroll[b-ox4qw82kcn] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.crm-table[b-ox4qw82kcn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.crm-table thead th[b-ox4qw82kcn] {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.crm-table tbody td[b-ox4qw82kcn] {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}
.crm-table tbody tr:last-child td[b-ox4qw82kcn] {
    border-bottom: none;
}
.col-center[b-ox4qw82kcn] { text-align: center; }
.col-right[b-ox4qw82kcn]  { text-align: right; }

.data-row[b-ox4qw82kcn] {
    cursor: pointer;
    transition: background 0.12s;
}
.data-row:hover[b-ox4qw82kcn] {
    background: #FAFBFF;
}

.cust-cell[b-ox4qw82kcn] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1.2;
}
.cust-no[b-ox4qw82kcn] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.cust-name[b-ox4qw82kcn] {
    font-size: 0.88rem;
    color: var(--color-text);
}

.bc-doc-tag[b-ox4qw82kcn] {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    background: rgba(45, 90, 142, 0.08);
    color: var(--color-primary);
    border-radius: 6px;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Columna de acciones rápidas (Ver / Descargar / Email) por fila. */
.col-actions[b-ox4qw82kcn] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.row-actions[b-ox4qw82kcn] {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}
.btn-row-action[b-ox4qw82kcn] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-row-action:hover:not(:disabled)[b-ox4qw82kcn] {
    background: rgba(45, 90, 142, 0.08);
    color: var(--color-primary);
    border-color: rgba(45, 90, 142, 0.18);
}
.btn-row-action:disabled[b-ox4qw82kcn] {
    opacity: 0.45;
    cursor: default;
}
.btn-row-action .material-symbols-outlined[b-ox4qw82kcn] {
    font-size: 18px;
}

.skeleton-row td[b-ox4qw82kcn] { padding: 0.75rem 0.9rem; }
.skeleton[b-ox4qw82kcn] {
    height: 14px;
    background: linear-gradient(90deg, #ECEEF5 25%, #F5F6FA 50%, #ECEEF5 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-ox4qw82kcn 1.4s infinite;
    border-radius: 4px;
}
@keyframes skeleton-shimmer-b-ox4qw82kcn {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.empty-cell[b-ox4qw82kcn] {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 2.5rem 1rem;
    font-style: italic;
}
.empty-cell .material-symbols-outlined[b-ox4qw82kcn] {
    vertical-align: middle;
    margin-right: 0.4rem;
    font-size: 18px;
}

.empty-card[b-ox4qw82kcn] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}
.empty-card .material-symbols-outlined[b-ox4qw82kcn] {
    display: block;
    margin: 0 auto 0.5rem;
    font-size: 32px;
    color: var(--color-primary);
}

/* ── Paginación ─────────────────────────────────────────────────────────── */
.pagination-bar[b-ox4qw82kcn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}
.page-info[b-ox4qw82kcn] {
    font-weight: 500;
    color: var(--color-text);
}
.page-controls[b-ox4qw82kcn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-size[b-ox4qw82kcn] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.25rem 1.4rem 0.25rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.82rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7186' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
}

.modal-backdrop[b-ox4qw82kcn] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Tablet horizontal (sidebar auto-colapsado) — quitamos comercial y líneas:
   No / Fecha / Cliente / Acciones bastan para identificar y operar el
   albarán. Buscador a 100 % para que respire. */
@media (max-width: 991.98px) {
    .caption-search[b-ox4qw82kcn] { width: 100%; }
    /* Cols (1) No, (2) Date, (3) Customer, (4) Sp, (5) Lines, (6) Actions */
    .crm-table thead th:nth-child(4)[b-ox4qw82kcn],
    .crm-table tbody td:nth-child(4)[b-ox4qw82kcn],
    .crm-table thead th:nth-child(5)[b-ox4qw82kcn],
    .crm-table tbody td:nth-child(5)[b-ox4qw82kcn] { display: none; }
}

@media (max-width: 575.98px) {
    .table-caption[b-ox4qw82kcn] { padding: 0.75rem; }
    .crm-table thead th[b-ox4qw82kcn],
    .crm-table tbody td[b-ox4qw82kcn] { padding: 0.55rem 0.6rem; font-size: 0.82rem; }
    .pagination-bar[b-ox4qw82kcn] { justify-content: center; }
    .col-actions[b-ox4qw82kcn] { width: auto; }
    /* Touch primary: 38×38 deja a los 3 iconos en una fila tappeable sin
       forzar scroll horizontal a 375 px (38·3 + 0.25rem·2 ≈ 122 px). */
    .btn-row-action[b-ox4qw82kcn] { width: 38px; height: 38px; }
    .cust-name[b-ox4qw82kcn] { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
}
/* /Pages/Home.razor.rz.scp.css */
.welcome-header[b-xn0oc55l80] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.welcome-title[b-xn0oc55l80] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.25rem;
}

.welcome-email[b-xn0oc55l80] {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.welcome-actions[b-xn0oc55l80] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-shrink: 0;
}

.btn-switch[b-xn0oc55l80], .btn-logout[b-xn0oc55l80] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid;
    transition: background 0.15s, color 0.15s;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.btn-switch[b-xn0oc55l80] {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-switch:hover[b-xn0oc55l80] {
    background: var(--color-primary-light);
}

.btn-logout[b-xn0oc55l80] {
    background: var(--color-surface);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-logout:hover[b-xn0oc55l80] {
    background: #fff0f0;
}

.welcome-subtitle[b-xn0oc55l80] {
    color: var(--color-text-secondary);
}
/* /Pages/Invoices/InvoiceDetailModal.razor.rz.scp.css */
/* CSS isolation: estilos del modal de detalle de albaranes. */

.doc-detail[b-qxjo8ikoyx] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.doc-meta-grid[b-qxjo8ikoyx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.doc-meta-grid > div[b-qxjo8ikoyx] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.meta-label[b-qxjo8ikoyx] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.meta-value[b-qxjo8ikoyx] {
    color: var(--color-text);
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.cust-no[b-qxjo8ikoyx] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.cust-name[b-qxjo8ikoyx] {
    font-size: 0.92rem;
    color: var(--color-text);
}

.section-title[b-qxjo8ikoyx] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.table-scroll[b-qxjo8ikoyx] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.crm-table[b-qxjo8ikoyx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.crm-table thead th[b-qxjo8ikoyx] {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.crm-table tbody td[b-qxjo8ikoyx] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}
.crm-table tfoot td[b-qxjo8ikoyx] {
    padding: 0.65rem 0.75rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}
.col-center[b-qxjo8ikoyx] { text-align: center; }
.col-right[b-qxjo8ikoyx]  { text-align: right; }

.bc-doc-tag-small[b-qxjo8ikoyx] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: rgba(45, 90, 142, 0.08);
    color: var(--color-primary);
    border-radius: 5px;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.78rem;
    font-weight: 600;
}

.empty-cell[b-qxjo8ikoyx] {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 2rem 1rem;
    font-style: italic;
}

@media (max-width: 575.98px) {
    .doc-meta-grid[b-qxjo8ikoyx] { grid-template-columns: 1fr; gap: 0.5rem; }
}
/* /Pages/Invoices/InvoiceList.razor.rz.scp.css */
/* CSS isolation: estilos del listado de albaranes. Patrón calcado de
   CustomerList/CatalogItemList — adaptaciones mínimas. */

.table-card[b-r3bnr5unc7] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.table-caption[b-r3bnr5unc7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.caption-title[b-r3bnr5unc7] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}

.caption-actions[b-r3bnr5unc7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.caption-search[b-r3bnr5unc7] {
    width: 280px;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.caption-search:focus[b-r3bnr5unc7] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 90, 142, 0.15);
}

/* ── Tabs venta / devolución ─────────────────────────────────────────────── */
.tab-bar[b-r3bnr5unc7] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    overflow-x: auto;
}
.tab-btn[b-r3bnr5unc7] {
    padding: 0.7rem 1.2rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover[b-r3bnr5unc7] {
    color: var(--color-text);
}
.tab-btn--active[b-r3bnr5unc7] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: var(--color-surface);
}

/* ── Tabla ──────────────────────────────────────────────────────────────── */
.table-scroll[b-r3bnr5unc7] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.crm-table[b-r3bnr5unc7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.crm-table thead th[b-r3bnr5unc7] {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.crm-table tbody td[b-r3bnr5unc7] {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}
.crm-table tbody tr:last-child td[b-r3bnr5unc7] {
    border-bottom: none;
}
.col-center[b-r3bnr5unc7] { text-align: center; }
.col-right[b-r3bnr5unc7]  { text-align: right; }

.data-row[b-r3bnr5unc7] {
    cursor: pointer;
    transition: background 0.12s;
}
.data-row:hover[b-r3bnr5unc7] {
    background: #FAFBFF;
}

.cust-cell[b-r3bnr5unc7] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1.2;
}
.cust-no[b-r3bnr5unc7] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.cust-name[b-r3bnr5unc7] {
    font-size: 0.88rem;
    color: var(--color-text);
}

.bc-doc-tag[b-r3bnr5unc7] {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    background: rgba(45, 90, 142, 0.08);
    color: var(--color-primary);
    border-radius: 6px;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Columna de acciones rápidas (Ver / Descargar / Email) por fila. */
.col-actions[b-r3bnr5unc7] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.row-actions[b-r3bnr5unc7] {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
}
.btn-row-action[b-r3bnr5unc7] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-row-action:hover:not(:disabled)[b-r3bnr5unc7] {
    background: rgba(45, 90, 142, 0.08);
    color: var(--color-primary);
    border-color: rgba(45, 90, 142, 0.18);
}
.btn-row-action:disabled[b-r3bnr5unc7] {
    opacity: 0.45;
    cursor: default;
}
.btn-row-action .material-symbols-outlined[b-r3bnr5unc7] {
    font-size: 18px;
}

.skeleton-row td[b-r3bnr5unc7] { padding: 0.75rem 0.9rem; }
.skeleton[b-r3bnr5unc7] {
    height: 14px;
    background: linear-gradient(90deg, #ECEEF5 25%, #F5F6FA 50%, #ECEEF5 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-r3bnr5unc7 1.4s infinite;
    border-radius: 4px;
}
@keyframes skeleton-shimmer-b-r3bnr5unc7 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.empty-cell[b-r3bnr5unc7] {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 2.5rem 1rem;
    font-style: italic;
}
.empty-cell .material-symbols-outlined[b-r3bnr5unc7] {
    vertical-align: middle;
    margin-right: 0.4rem;
    font-size: 18px;
}

.empty-card[b-r3bnr5unc7] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}
.empty-card .material-symbols-outlined[b-r3bnr5unc7] {
    display: block;
    margin: 0 auto 0.5rem;
    font-size: 32px;
    color: var(--color-primary);
}

/* ── Paginación ─────────────────────────────────────────────────────────── */
.pagination-bar[b-r3bnr5unc7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}
.page-info[b-r3bnr5unc7] {
    font-weight: 500;
    color: var(--color-text);
}
.page-controls[b-r3bnr5unc7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-size[b-r3bnr5unc7] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.25rem 1.4rem 0.25rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.82rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7186' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
}

.modal-backdrop[b-r3bnr5unc7] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Tablet horizontal — quitamos comercial y líneas: No / Fecha / Cliente /
   Acciones bastan para identificar y operar la factura. */
@media (max-width: 991.98px) {
    .caption-search[b-r3bnr5unc7] { width: 100%; }
    /* Cols (1) No, (2) Date, (3) Customer, (4) Sp, (5) Lines, (6) Actions */
    .crm-table thead th:nth-child(4)[b-r3bnr5unc7],
    .crm-table tbody td:nth-child(4)[b-r3bnr5unc7],
    .crm-table thead th:nth-child(5)[b-r3bnr5unc7],
    .crm-table tbody td:nth-child(5)[b-r3bnr5unc7] { display: none; }
}

@media (max-width: 575.98px) {
    .table-caption[b-r3bnr5unc7] { padding: 0.75rem; }
    .crm-table thead th[b-r3bnr5unc7],
    .crm-table tbody td[b-r3bnr5unc7] { padding: 0.55rem 0.6rem; font-size: 0.82rem; }
    .pagination-bar[b-r3bnr5unc7] { justify-content: center; }
    .col-actions[b-r3bnr5unc7] { width: auto; }
    .btn-row-action[b-r3bnr5unc7] { width: 38px; height: 38px; }
    .cust-name[b-r3bnr5unc7] { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
}
/* /Pages/Login.razor.rz.scp.css */
/* Layout de dos columnas */
.login-container[b-h130whvfxt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    max-width: 960px;
    width: 100%;
}

/* Columna izquierda */
.login-left[b-h130whvfxt] {
    color: white;
}

.login-logo[b-h130whvfxt] {
    width: 200px;
    margin-bottom: 2rem;
    display: block;
}

.login-title[b-h130whvfxt] {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: white;
}

.login-subtitle[b-h130whvfxt] {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
}

/* Columna derecha: tarjeta */
.login-card[b-h130whvfxt] {
    background: var(--color-surface);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 100%;
    margin-left: auto;
}

.login-card-title[b-h130whvfxt] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.login-card-subtitle[b-h130whvfxt] {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

/* Botón Microsoft */
.btn-microsoft[b-h130whvfxt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.btn-microsoft:hover[b-h130whvfxt] {
    background: var(--color-primary-dark);
}

.btn-microsoft:active[b-h130whvfxt] {
    transform: scale(0.98);
}

/* Estado cargando */
.login-loading[b-h130whvfxt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.85rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.login-spinner[b-h130whvfxt] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-h130whvfxt 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-h130whvfxt {
    to { transform: rotate(360deg); }
}

/* Error */
.login-error[b-h130whvfxt] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #fff0f0;
    border: 1px solid var(--color-danger);
    border-radius: 8px;
    color: var(--color-danger);
    font-size: 0.85rem;
}

/* Auth checking (App.razor) */
:global(.auth-checking)[b-h130whvfxt] {
    min-height: 100vh;
    min-height: var(--app-100vh, 100vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--color-text-secondary);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

:global(.auth-spinner)[b-h130whvfxt] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-h130whvfxt 0.7s linear infinite;
}

/* Responsive: móvil */
@media (max-width: 640px) {
    .login-container[b-h130whvfxt] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .login-left[b-h130whvfxt] {
        text-align: center;
    }

    .login-logo[b-h130whvfxt] {
        margin: 0 auto 1.5rem;
        width: 160px;
    }

    .login-title[b-h130whvfxt] {
        font-size: 1.75rem;
    }

    .login-card[b-h130whvfxt] {
        margin: 0 auto;
    }
}
/* /Pages/Messages/MessagesPage.razor.rz.scp.css */
/* MessagesPage — centro de mensajes (/messages).
   Estilo coherente con CustomerList/OrderList: fondo neutro, cards con
   sombra ligera, tabs subrayadas. La expansión inline del lote enviado
   crece el card sin saltos verticales. */

.msg-page[b-jkbouxnrcg] {
    padding: 1rem 1.25rem 2rem;
    max-width: 980px;
    margin: 0 auto;
}

@media (max-width: 575.98px) {
    .msg-page[b-jkbouxnrcg] { padding: 0.75rem 0.75rem 6rem; }
}

.msg-page__header[b-jkbouxnrcg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.msg-page__title[b-jkbouxnrcg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.msg-page__title h1[b-jkbouxnrcg] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.msg-page__title .material-symbols-outlined[b-jkbouxnrcg] {
    font-size: 28px;
    color: var(--color-primary);
}

@media (max-width: 575.98px) {
    .msg-page__title h1[b-jkbouxnrcg] { font-size: 1.2rem; }
    .msg-page__title .material-symbols-outlined[b-jkbouxnrcg] { font-size: 24px; }
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.msg-tabs[b-jkbouxnrcg] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.msg-tab[b-jkbouxnrcg] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color 150ms, border-color 150ms;
}

.msg-tab:hover[b-jkbouxnrcg] { color: var(--color-text); }

.msg-tab--active[b-jkbouxnrcg] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.msg-tab .material-symbols-outlined[b-jkbouxnrcg] { font-size: 18px; }

.msg-tab__badge[b-jkbouxnrcg] {
    background: var(--color-danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 0.2rem;
}

/* ── Lista vacía ──────────────────────────────────────────────────────── */
.msg-empty[b-jkbouxnrcg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-secondary);
}

.msg-empty .material-symbols-outlined[b-jkbouxnrcg] {
    font-size: 56px;
    color: var(--color-border);
    margin-bottom: 0.5rem;
}

.msg-empty p[b-jkbouxnrcg] {
    margin: 0.25rem 0;
    font-size: 1rem;
    color: var(--color-text);
}

.msg-empty__hint[b-jkbouxnrcg] { font-size: 0.85rem !important; color: var(--color-text-secondary) !important; }

/* ── Lista de cards ───────────────────────────────────────────────────── */
.msg-list[b-jkbouxnrcg] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.msg-card[b-jkbouxnrcg] {
    display: flex;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    position: relative;
    transition: border-color 120ms, box-shadow 120ms;
    text-align: left;
}

.msg-card:hover[b-jkbouxnrcg] {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(45, 90, 142, 0.08);
}

.msg-card--unread[b-jkbouxnrcg] {
    border-left: 3px solid var(--color-primary);
    padding-left: calc(1rem - 3px);
}

.msg-card__avatar[b-jkbouxnrcg],
.msg-card__sent-icon[b-jkbouxnrcg] {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg-card__avatar img[b-jkbouxnrcg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-card__avatar .material-symbols-outlined[b-jkbouxnrcg],
.msg-card__sent-icon .material-symbols-outlined[b-jkbouxnrcg] {
    font-size: 24px;
    color: var(--color-text-secondary);
}

.msg-card--sent .msg-card__sent-icon[b-jkbouxnrcg] {
    background: #ECF4FF;
}
.msg-card--sent .msg-card__sent-icon .material-symbols-outlined[b-jkbouxnrcg] {
    color: var(--color-primary);
}

.msg-card__body[b-jkbouxnrcg] {
    flex: 1;
    min-width: 0;
}

.msg-card__head[b-jkbouxnrcg] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}

.msg-card__sender[b-jkbouxnrcg] {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--color-text);
}

.msg-card__sender-name[b-jkbouxnrcg] { font-weight: 600; }
.msg-card__sender-meta[b-jkbouxnrcg] { color: var(--color-text-secondary); }

.msg-card__time[b-jkbouxnrcg] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.msg-card__title[b-jkbouxnrcg] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0.1rem 0 0.3rem;
    line-height: 1.3;
}

.msg-card--unread .msg-card__title[b-jkbouxnrcg] { color: var(--color-primary); }

.msg-card__text[b-jkbouxnrcg] {
    font-size: 0.875rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.msg-card__company[b-jkbouxnrcg] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.msg-card__company .material-symbols-outlined[b-jkbouxnrcg] {
    font-size: 14px;
}

.msg-card__unread-dot[b-jkbouxnrcg] {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* ── Cards de Enviados — counts y expansión ─────────────────────────── */
.msg-card__counts[b-jkbouxnrcg] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.msg-count[b-jkbouxnrcg] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--color-bg);
    color: var(--color-text-secondary);
}

.msg-count .material-symbols-outlined[b-jkbouxnrcg] { font-size: 14px; }

.msg-count--read[b-jkbouxnrcg]   { background: #E5F5EC; color: #1F7A3D; }
.msg-count--unread[b-jkbouxnrcg] { background: #FCEFE0; color: #8A5C20; }

.msg-card__chevron[b-jkbouxnrcg] {
    color: var(--color-text-secondary);
    flex: 0 0 auto;
    align-self: center;
    transition: color 150ms;
}

.msg-card:hover .msg-card__chevron[b-jkbouxnrcg] { color: var(--color-primary); }

.msg-card__detail[b-jkbouxnrcg] {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--color-border);
    cursor: default;
}

.msg-card__full-body[b-jkbouxnrcg] {
    font-size: 0.875rem;
    color: var(--color-text);
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-bg);
    border-radius: 8px;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
}

.msg-card__detail-title[b-jkbouxnrcg] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin: 0 0 0.5rem;
}

.msg-card__detail-loading[b-jkbouxnrcg] {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--color-border);
}

/* ── Lista de destinatarios ──────────────────────────────────────────── */
.recipients[b-jkbouxnrcg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 360px;
    overflow-y: auto;
}

.recipient[b-jkbouxnrcg] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.6rem;
    background: var(--color-bg);
    border-radius: 8px;
}

.recipient--read[b-jkbouxnrcg] { background: #F4FBF6; }

.recipient__avatar[b-jkbouxnrcg] {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.recipient__avatar img[b-jkbouxnrcg] { width: 100%; height: 100%; object-fit: cover; }
.recipient__avatar .material-symbols-outlined[b-jkbouxnrcg] {
    font-size: 18px;
    color: var(--color-text-secondary);
}

.recipient__main[b-jkbouxnrcg] {
    flex: 1;
    min-width: 0;
}

.recipient__name[b-jkbouxnrcg] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipient__meta[b-jkbouxnrcg] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.recipient__badge[b-jkbouxnrcg] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.recipient__badge .material-symbols-outlined[b-jkbouxnrcg] { font-size: 13px; }

.recipient__badge--pending[b-jkbouxnrcg] { background: #FCEFE0; color: #8A5C20; }
.recipient__badge--read[b-jkbouxnrcg]    { background: #D6EFDD; color: #1F7A3D; cursor: help; }

@media (max-width: 480px) {
    .recipient__meta[b-jkbouxnrcg] { display: none; }
    .recipient__badge .material-symbols-outlined[b-jkbouxnrcg] { display: none; }
}

/* ── Paginación ───────────────────────────────────────────────────────── */
.msg-pager[b-jkbouxnrcg] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.btn-secondary--small[b-jkbouxnrcg] {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.85rem !important;
}

.btn-secondary--small .material-symbols-outlined[b-jkbouxnrcg] {
    font-size: 18px !important;
}

/* ── Toast ───────────────────────────────────────────────────────────── */
.msg-toast[b-jkbouxnrcg] {
    position: fixed;
    left: 50%;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    background: var(--color-text);
    color: #fff;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1200;
    max-width: calc(100vw - 24px);
}

.msg-toast .material-symbols-outlined[b-jkbouxnrcg] {
    color: var(--color-success);
    font-size: 20px;
}

@media (min-width: 1280px) {
    .msg-toast[b-jkbouxnrcg] { bottom: 24px; }
}
/* /Pages/Notifications/SendNotificationModal.razor.rz.scp.css */
/* SendNotificationModal — composición de avisos manager→equipo.
   Reusa primitivas de components.css (.field, .btn-*, .form-alert, .spin)
   y solo añade estilos exclusivos del modal: lista de grupos, resultados de
   búsqueda, chips y avatar con dot online. */

.send-notif__section[b-eq1ze612yx] {
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--color-border);
}

.send-notif__section:last-of-type[b-eq1ze612yx] {
    border-bottom: none;
    padding-bottom: 0.25rem;
}

.send-notif__section-title[b-eq1ze612yx] {
    margin: 0 0 0.6rem 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

/* ── Botón Everyone (broadcast cross-empresa para super-admins) ───── */
.send-notif__everyone[b-eq1ze612yx] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.85rem;
    background: linear-gradient(135deg, var(--color-primary), #1f426b);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 3px 10px rgba(45, 90, 142, 0.25);
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.send-notif__everyone:hover:not(:disabled)[b-eq1ze612yx] {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(45, 90, 142, 0.35);
}

.send-notif__everyone--added[b-eq1ze612yx] {
    background: var(--color-success);
    cursor: default;
    box-shadow: none;
    transform: none;
}

.send-notif__everyone-icon[b-eq1ze612yx] {
    font-size: 24px !important;
    flex: 0 0 auto;
}

.send-notif__everyone-text[b-eq1ze612yx] {
    flex: 1;
    min-width: 0;
}

.send-notif__everyone-label[b-eq1ze612yx] {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.send-notif__everyone-count[b-eq1ze612yx] {
    display: block;
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 0.15rem;
}

.send-notif__everyone .material-symbols-outlined:last-child[b-eq1ze612yx] {
    font-size: 22px;
    flex: 0 0 auto;
    opacity: 0.9;
}

/* ── Etiquetas de entorno / empresa para Owner ──────────────────────── */
.send-notif__env-label[b-eq1ze612yx],
.send-notif__company-label[b-eq1ze612yx] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.65rem 0 0.4rem;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.send-notif__env-label .material-symbols-outlined[b-eq1ze612yx],
.send-notif__company-label .material-symbols-outlined[b-eq1ze612yx] {
    font-size: 14px;
    color: var(--color-primary);
}

.send-notif__env-label[b-eq1ze612yx] {
    margin-top: 0.85rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(90deg, rgba(45,90,142,0.08), transparent);
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.send-notif__company-label[b-eq1ze612yx] {
    margin-left: 0.4rem;
}

/* Si dos secciones consecutivas comparten env (vacío), suprimir hueco extra */
.send-notif__env-label + .send-notif__company-label[b-eq1ze612yx],
.send-notif__company-label:first-of-type[b-eq1ze612yx] {
    margin-top: 0.25rem;
}

/* ── Toolbar sobre la lista de resultados ───────────────────────────── */
.send-notif__results-toolbar[b-eq1ze612yx] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    margin-bottom: 0.3rem;
}

.send-notif__results-toolbar .btn-secondary--small[b-eq1ze612yx] {
    padding: 0.3rem 0.65rem !important;
    font-size: 0.78rem !important;
}

.send-notif__results-toolbar .btn-secondary--small .material-symbols-outlined[b-eq1ze612yx] {
    font-size: 16px !important;
    margin-right: 0.25rem;
}

.send-notif__result-env[b-eq1ze612yx] {
    color: var(--color-text-secondary);
}

/* ── Bloque grupos rápidos ────────────────────────────────────────────── */
.send-notif__group-buttons[b-eq1ze612yx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 0.5rem;
}

.send-notif__group-btn[b-eq1ze612yx] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.send-notif__group-btn:hover:not(:disabled)[b-eq1ze612yx] {
    border-color: var(--color-primary);
    background: #F4F8FD;
}

.send-notif__group-btn--added[b-eq1ze612yx] {
    background: #ECF4FF;
    border-color: var(--color-primary);
    cursor: default;
    opacity: 0.85;
}

.send-notif__group-btn .material-symbols-outlined[b-eq1ze612yx] {
    color: var(--color-primary);
    font-size: 22px;
    flex: 0 0 auto;
}

.send-notif__group-btn-text[b-eq1ze612yx] {
    flex: 1;
    min-width: 0;
}

.send-notif__group-btn-label[b-eq1ze612yx] {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.send-notif__group-btn-count[b-eq1ze612yx] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.1rem;
}

.send-notif__group-btn-add[b-eq1ze612yx] { color: var(--color-text-secondary) !important; }
.send-notif__group-btn-check[b-eq1ze612yx] { color: var(--color-success) !important; }

/* ── Buscador ─────────────────────────────────────────────────────────── */
.send-notif__search[b-eq1ze612yx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: border-color 0.12s ease;
}

.send-notif__search:focus-within[b-eq1ze612yx] {
    border-color: var(--color-primary);
    background: var(--color-surface);
}

.send-notif__search > .material-symbols-outlined[b-eq1ze612yx] {
    color: var(--color-text-secondary);
    font-size: 18px;
}

.send-notif__search-input[b-eq1ze612yx] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.9rem;
    color: var(--color-text);
    min-width: 0;
}

.send-notif__search-spin[b-eq1ze612yx] {
    width: 14px;
    height: 14px;
}

.send-notif__results[b-eq1ze612yx] {
    max-height: 240px;
    overflow-y: auto;
    margin-top: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.send-notif__result[b-eq1ze612yx] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    background: var(--color-surface);
    border: none;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    text-align: left;
}

.send-notif__result:last-child[b-eq1ze612yx] { border-bottom: none; }

.send-notif__result:hover:not(:disabled)[b-eq1ze612yx] {
    background: #F4F8FD;
}

.send-notif__result--added[b-eq1ze612yx] {
    background: #ECF4FF;
    cursor: default;
}

.send-notif__avatar[b-eq1ze612yx] {
    position: relative;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.send-notif__avatar img[b-eq1ze612yx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.send-notif__avatar > .material-symbols-outlined[b-eq1ze612yx] {
    color: var(--color-text-secondary);
    font-size: 22px;
}

.send-notif__online-dot[b-eq1ze612yx] {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-success);
    border: 2px solid var(--color-surface);
}

.send-notif__result-body[b-eq1ze612yx] {
    flex: 1;
    min-width: 0;
}

.send-notif__result-name[b-eq1ze612yx] {
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.send-notif__result-meta[b-eq1ze612yx] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.send-notif__result-sep[b-eq1ze612yx] { padding-inline: 0.25rem; }

.send-notif__result-email[b-eq1ze612yx] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.send-notif__result-add[b-eq1ze612yx] {
    color: var(--color-text-secondary);
    flex: 0 0 auto;
}

.send-notif__result--added .send-notif__result-add[b-eq1ze612yx] { color: var(--color-success); }

.send-notif__empty-results[b-eq1ze612yx] {
    margin-top: 0.6rem;
    padding: 0.75rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    border-radius: 8px;
}

/* ── Chips de destinatarios añadidos ─────────────────────────────────── */
.send-notif__chips[b-eq1ze612yx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.send-notif__chip[b-eq1ze612yx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem 0.25rem 0.6rem;
    background: #ECF4FF;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 16px;
    font-size: 0.8rem;
}

.send-notif__chip--group[b-eq1ze612yx] {
    background: #FBF1E6;
    border-color: var(--color-accent);
    color: #8A5C20;
}

.send-notif__chip-icon[b-eq1ze612yx] { font-size: 16px !important; }
.send-notif__chip-text[b-eq1ze612yx] { line-height: 1; }

.send-notif__chip-remove[b-eq1ze612yx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.send-notif__chip-remove:hover[b-eq1ze612yx] { background: rgba(0, 0, 0, 0.08); }
.send-notif__chip-remove .material-symbols-outlined[b-eq1ze612yx] { font-size: 14px; }

.send-notif__empty-recipients[b-eq1ze612yx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--color-bg);
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.send-notif__empty-recipients .material-symbols-outlined[b-eq1ze612yx] { font-size: 18px; }

/* ── Contador de caracteres ──────────────────────────────────────────── */
.send-notif__counter[b-eq1ze612yx] {
    display: block;
    text-align: right;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Responsive: en móvil reducimos altura de la lista para que el modal full
   screen no quede sin scroll de body. */
@media (max-width: 575.98px) {
    .send-notif__results[b-eq1ze612yx] { max-height: 180px; }
    .send-notif__group-buttons[b-eq1ze612yx] { grid-template-columns: 1fr; }
}
/* /Pages/Orders/OrderDetailModal.razor.rz.scp.css */
/* CSS isolation: estilos del modal de detalle de albaranes. */

.doc-detail[b-1pjjbjuyuq] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.doc-meta-grid[b-1pjjbjuyuq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.doc-meta-grid--four[b-1pjjbjuyuq] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767.98px) {
    .doc-meta-grid--four[b-1pjjbjuyuq] { grid-template-columns: repeat(2, 1fr); }
}
/* Variante de 5 columnas para incorporar el albarán cruzado (v0.54.0+).
   En desktop entran las 5 holgadas; en tablet se reparten 3+2 (tablet
   horizontal típico 1024 px) o 2+2+1 (tablet vertical); en móvil
   apilamos en una columna como el resto de variantes. */
.doc-meta-grid--five[b-1pjjbjuyuq] { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 991.98px) {
    .doc-meta-grid--five[b-1pjjbjuyuq] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
    .doc-meta-grid--five[b-1pjjbjuyuq] { grid-template-columns: repeat(2, 1fr); }
}

.status-pill[b-1pjjbjuyuq] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(107, 113, 134, 0.12);
    color: var(--color-text-secondary);
}
.status-pill--open[b-1pjjbjuyuq]       { background: rgba(46, 158, 90, 0.12); color: var(--color-success); }
.status-pill--released[b-1pjjbjuyuq]   { background: rgba(45, 90, 142, 0.12); color: var(--color-primary); }
.status-pill--pending-approval[b-1pjjbjuyuq] { background: rgba(224, 155, 48, 0.15); color: var(--color-warning); }
.doc-meta-grid > div[b-1pjjbjuyuq] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.meta-label[b-1pjjbjuyuq] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.meta-value[b-1pjjbjuyuq] {
    color: var(--color-text);
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.cust-no[b-1pjjbjuyuq] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.cust-name[b-1pjjbjuyuq] {
    font-size: 0.92rem;
    color: var(--color-text);
}

.section-title[b-1pjjbjuyuq] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.table-scroll[b-1pjjbjuyuq] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.crm-table[b-1pjjbjuyuq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.crm-table thead th[b-1pjjbjuyuq] {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.crm-table tbody td[b-1pjjbjuyuq] {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}
.crm-table tfoot td[b-1pjjbjuyuq] {
    padding: 0.65rem 0.75rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}
.col-center[b-1pjjbjuyuq] { text-align: center; }
.col-right[b-1pjjbjuyuq]  { text-align: right; }

.bc-doc-tag-small[b-1pjjbjuyuq] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: rgba(45, 90, 142, 0.08);
    color: var(--color-primary);
    border-radius: 5px;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.78rem;
    font-weight: 600;
}

.empty-cell[b-1pjjbjuyuq] {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 2rem 1rem;
    font-style: italic;
}

@media (max-width: 575.98px) {
    .doc-meta-grid[b-1pjjbjuyuq] { grid-template-columns: 1fr; gap: 0.5rem; }
}
/* /Pages/Orders/OrderList.razor.rz.scp.css */
/* CSS isolation: estilos del listado de albaranes. Patrón calcado de
   CustomerList/CatalogItemList — adaptaciones mínimas. */

.table-card[b-m9rusq6wwc] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.table-caption[b-m9rusq6wwc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.caption-title[b-m9rusq6wwc] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}

.caption-actions[b-m9rusq6wwc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.caption-search[b-m9rusq6wwc] {
    width: 280px;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.caption-search:focus[b-m9rusq6wwc] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(45, 90, 142, 0.15);
}

/* ── Tabs venta / devolución ─────────────────────────────────────────────── */
.tab-bar[b-m9rusq6wwc] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    overflow-x: auto;
}
.tab-btn[b-m9rusq6wwc] {
    padding: 0.7rem 1.2rem;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover[b-m9rusq6wwc] {
    color: var(--color-text);
}
.tab-btn--active[b-m9rusq6wwc] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: var(--color-surface);
}

/* ── Tabla ──────────────────────────────────────────────────────────────── */
.table-scroll[b-m9rusq6wwc] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.crm-table[b-m9rusq6wwc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.crm-table thead th[b-m9rusq6wwc] {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.crm-table tbody td[b-m9rusq6wwc] {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}
.crm-table tbody tr:last-child td[b-m9rusq6wwc] {
    border-bottom: none;
}
.col-center[b-m9rusq6wwc] { text-align: center; }
.col-right[b-m9rusq6wwc]  { text-align: right; }

.data-row[b-m9rusq6wwc] {
    cursor: pointer;
    transition: background 0.12s;
}
.data-row:hover[b-m9rusq6wwc] {
    background: #FAFBFF;
}

.cust-cell[b-m9rusq6wwc] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    line-height: 1.2;
}
.cust-no[b-m9rusq6wwc] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.cust-name[b-m9rusq6wwc] {
    font-size: 0.88rem;
    color: var(--color-text);
}

.bc-doc-tag[b-m9rusq6wwc] {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    background: rgba(45, 90, 142, 0.08);
    color: var(--color-primary);
    border-radius: 6px;
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Status pill (Open / Released / Pending Approval) */
.status-pill[b-m9rusq6wwc] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(107, 113, 134, 0.12);
    color: var(--color-text-secondary);
}
.status-pill--open[b-m9rusq6wwc]       { background: rgba(46, 158, 90, 0.12); color: var(--color-success); }
.status-pill--released[b-m9rusq6wwc]   { background: rgba(45, 90, 142, 0.12); color: var(--color-primary); }
.status-pill--pending-approval[b-m9rusq6wwc] { background: rgba(224, 155, 48, 0.15); color: var(--color-warning); }

.skeleton-row td[b-m9rusq6wwc] { padding: 0.75rem 0.9rem; }
.skeleton[b-m9rusq6wwc] {
    height: 14px;
    background: linear-gradient(90deg, #ECEEF5 25%, #F5F6FA 50%, #ECEEF5 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-m9rusq6wwc 1.4s infinite;
    border-radius: 4px;
}
@keyframes skeleton-shimmer-b-m9rusq6wwc {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.empty-cell[b-m9rusq6wwc] {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 2.5rem 1rem;
    font-style: italic;
}
.empty-cell .material-symbols-outlined[b-m9rusq6wwc] {
    vertical-align: middle;
    margin-right: 0.4rem;
    font-size: 18px;
}

.empty-card[b-m9rusq6wwc] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}
.empty-card .material-symbols-outlined[b-m9rusq6wwc] {
    display: block;
    margin: 0 auto 0.5rem;
    font-size: 32px;
    color: var(--color-primary);
}

/* ── Paginación ─────────────────────────────────────────────────────────── */
.pagination-bar[b-m9rusq6wwc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}
.page-info[b-m9rusq6wwc] {
    font-weight: 500;
    color: var(--color-text);
}
.page-controls[b-m9rusq6wwc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-size[b-m9rusq6wwc] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.25rem 1.4rem 0.25rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.82rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7186' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
}

.modal-backdrop[b-m9rusq6wwc] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Tablet horizontal (sidebar auto-colapsado a 70 px) — quitamos comercial y
   nº de líneas: la fecha + cliente + status + importe ya basta para ubicar
   el documento. Buscador a 100 % para que no quede comprimido en la fila. */
@media (max-width: 991.98px) {
    .caption-search[b-m9rusq6wwc] { width: 100%; }
    /* Cols (1) No, (2) Date, (3) Customer, (4) Sp, (5) Status, (6) Amount, (7) Lines */
    .crm-table thead th:nth-child(4)[b-m9rusq6wwc],
    .crm-table tbody td:nth-child(4)[b-m9rusq6wwc],
    .crm-table thead th:nth-child(7)[b-m9rusq6wwc],
    .crm-table tbody td:nth-child(7)[b-m9rusq6wwc] { display: none; }
}

/* Tablet vertical / móvil grande — además ocultamos el status pill: el
   importe sigue siendo el dato decisivo y deja sitio al cliente. */
@media (max-width: 767.98px) {
    .crm-table thead th:nth-child(5)[b-m9rusq6wwc],
    .crm-table tbody td:nth-child(5)[b-m9rusq6wwc] { display: none; }
}

@media (max-width: 575.98px) {
    .table-caption[b-m9rusq6wwc] { padding: 0.75rem; }
    .crm-table thead th[b-m9rusq6wwc],
    .crm-table tbody td[b-m9rusq6wwc] { padding: 0.55rem 0.6rem; font-size: 0.82rem; }
    .pagination-bar[b-m9rusq6wwc] { justify-content: center; }
    .cust-name[b-m9rusq6wwc] { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
}
/* /Pages/OrderTemplates/ApplyOrderTemplateModal.razor.rz.scp.css */
/* Estilos específicos de ApplyOrderTemplateModal — picker de cliente.
   Modal/btn/field/form-alert/spin/customer-hint viven en
   `wwwroot/css/components.css`; backdrop+panel+header+footer en `Shared/ModalShell`. */


/* ── Customer picker (trigger inline en el formulario) ────────────────────── */
.customer-picker[b-xwcnmii5da] {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    min-height: 41px;
    display: flex;
    align-items: center;
    padding: 0 0.25rem 0 0.5rem;
}
.customer-picker.input-error[b-xwcnmii5da] { border-color: var(--color-danger); }

.btn-open-picker[b-xwcnmii5da] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    padding: 0.45rem 0.3rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.88rem;
    font-family: inherit;
    width: 100%;
    justify-content: flex-start;
}
.btn-open-picker:hover[b-xwcnmii5da] { color: var(--color-primary); }
.btn-open-picker .material-symbols-outlined[b-xwcnmii5da] { font-size: 18px; }

.customer-selected[b-xwcnmii5da] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem 0.2rem;
    min-width: 0;
}
.cust-no[b-xwcnmii5da] {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.cust-name[b-xwcnmii5da] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-clear-customer[b-xwcnmii5da] {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.btn-clear-customer:hover[b-xwcnmii5da] {
    background: var(--color-bg);
    color: var(--color-danger);
}
.btn-clear-customer .material-symbols-outlined[b-xwcnmii5da] { font-size: 16px; }


/* ── Picker popup (modal de tercer nivel — z-index 1130/1140) ─────────────── */
.picker-backdrop[b-xwcnmii5da] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1130;
}
.picker-panel[b-xwcnmii5da] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 480px);
    max-height: 70vh;
    max-height: min(70dvh, calc(var(--app-100vh) - 24px));
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1140;
}
.picker-header[b-xwcnmii5da] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-border);
}
.picker-header h4[b-xwcnmii5da] { margin: 0; font-size: 0.95rem; font-weight: 700; }

.picker-search[b-xwcnmii5da] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}
.picker-search input[b-xwcnmii5da] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.88rem;
    color: var(--color-text);
    background: transparent;
    font-family: inherit;
}
.picker-search .material-symbols-outlined[b-xwcnmii5da] { font-size: 18px; }

.picker-list[b-xwcnmii5da] { flex: 1; overflow-y: auto; padding: 0.3rem 0; }
.picker-loading[b-xwcnmii5da],
.picker-empty[b-xwcnmii5da] {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
}
.picker-item[b-xwcnmii5da] {
    width: 100%;
    padding: 0.55rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
    font-family: inherit;
}
.picker-item:hover[b-xwcnmii5da] { background: var(--color-bg); }
.item-no[b-xwcnmii5da] { font-weight: 600; color: var(--color-text); font-size: 0.8rem; }
.item-name[b-xwcnmii5da] {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/OrderTemplates/CartToTemplateModal.razor.rz.scp.css */
/* Sin estilos propios — el componente delega 100 % en `Shared/ModalShell` y en
   las primitivas de `wwwroot/css/components.css` (.btn-primary, .btn-secondary,
   .field, .form-alert, .spin, .req, .customer-hint). */
/* /Pages/OrderTemplates/IncomingShareModal.razor.rz.scp.css */
/* z-index alineado con la estrategia de Shared/ModalShell (components.css):
   default backdrop 1050 / panel 1060. */
.detail-backdrop[b-lrerq5409k] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
}
.detail-panel[b-lrerq5409k] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(96vw, 880px);
    max-height: 92vh;
    max-height: min(92dvh, calc(var(--app-100vh) - 24px));
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1060;
}

/* Header */
.detail-header[b-lrerq5409k] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}
.header-left[b-lrerq5409k] { min-width: 0; flex: 1; }
.detail-title[b-lrerq5409k] {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}
.header-sub[b-lrerq5409k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.muted[b-lrerq5409k] { color: var(--color-text-secondary); font-size: 0.85rem; }
.btn-icon[b-lrerq5409k] {
    background: transparent;
    border: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.12s;
    flex-shrink: 0;
}
.btn-icon:hover[b-lrerq5409k] { background: var(--color-bg); }
.btn-icon .material-symbols-outlined[b-lrerq5409k] { font-size: 22px; }

/* Body */
.detail-body[b-lrerq5409k] {
    padding: 0.9rem 1.25rem 0.25rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* Banner plantilla compartida */
.customer-hint[b-lrerq5409k] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    background: rgba(45, 90, 142, 0.06);
    border: 1px solid rgba(45, 90, 142, 0.18);
    border-radius: 8px;
    color: var(--color-text);
}
.customer-hint .material-symbols-outlined[b-lrerq5409k] {
    color: var(--color-primary);
    font-size: 22px;
}
.customer-hint__text[b-lrerq5409k] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}
.customer-hint__label[b-lrerq5409k] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    font-weight: 600;
}
.customer-hint__value[b-lrerq5409k] { font-size: 0.9rem; color: var(--color-text); }

.empty-card[b-lrerq5409k],
.empty-inline[b-lrerq5409k] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}
.empty-card .material-symbols-outlined[b-lrerq5409k],
.empty-inline .material-symbols-outlined[b-lrerq5409k] { font-size: 38px; opacity: 0.4; }
.loading-row[b-lrerq5409k] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

/* Lines table (read-only) */
.lines-scroll[b-lrerq5409k] {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.lines-table[b-lrerq5409k] {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.lines-table th[b-lrerq5409k] {
    background: var(--color-bg);
    padding: 0.55rem 0.7rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.lines-table td[b-lrerq5409k] {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid #F0F2F8;
    vertical-align: middle;
    color: var(--color-text);
}
.lines-table tbody tr:last-child td[b-lrerq5409k] { border-bottom: none; }
.col-ref[b-lrerq5409k] {
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    width: 88px;
}
.col-center[b-lrerq5409k] { text-align: center; }
.line-description[b-lrerq5409k] { color: var(--color-text); }
.line-category[b-lrerq5409k] {
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    margin-top: 0.1rem;
}
.row-free[b-lrerq5409k] { background: rgba(224, 155, 48, 0.04); }
.free-icon[b-lrerq5409k] { font-size: 20px; color: var(--color-border); }
.free-icon.is-free[b-lrerq5409k] { color: var(--color-warning); }

.form-alert[b-lrerq5409k] {
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
}
.form-alert--error[b-lrerq5409k] {
    background: rgba(204, 51, 51, 0.08);
    color: var(--color-danger);
    border: 1px solid rgba(204, 51, 51, 0.2);
}

/* Footer */
.detail-footer[b-lrerq5409k] {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: #F9FAFD;
}
.footer-left[b-lrerq5409k] { display: flex; align-items: center; }
.footer-actions[b-lrerq5409k] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Buttons */
.btn-primary[b-lrerq5409k],
.btn-secondary[b-lrerq5409k] {
    padding: 0.48rem 0.95rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: inherit;
}
.btn-primary[b-lrerq5409k] { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled)[b-lrerq5409k] { opacity: 0.9; }
.btn-secondary[b-lrerq5409k] {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled)[b-lrerq5409k] {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-secondary.btn-danger-text[b-lrerq5409k] { color: var(--color-danger); }
.btn-secondary.btn-danger-text:hover:not(:disabled)[b-lrerq5409k] {
    background: rgba(204, 51, 51, 0.08);
    color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-primary:disabled[b-lrerq5409k],
.btn-secondary:disabled[b-lrerq5409k] { opacity: 0.6; cursor: default; }
.btn-primary .material-symbols-outlined[b-lrerq5409k],
.btn-secondary .material-symbols-outlined[b-lrerq5409k] { font-size: 18px; }

.spin[b-lrerq5409k] { animation: spin-b-lrerq5409k 1s linear infinite; font-size: 18px; }
@keyframes spin-b-lrerq5409k { 100% { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 767.98px) {
    .detail-panel[b-lrerq5409k] {
        width: 100vw;
        height: var(--app-100vh);
        max-height: 100vh;
        max-height: var(--app-100vh);
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
    }
    .detail-header[b-lrerq5409k] { padding: 0.75rem 1rem; }
    .detail-body[b-lrerq5409k] { padding: 0.75rem 1rem 0; }
    .detail-footer[b-lrerq5409k] {
        padding: 0.7rem 1rem;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    }
    .footer-actions[b-lrerq5409k] { justify-content: center; }
    .lines-table[b-lrerq5409k] { min-width: 420px; }
}
/* /Pages/OrderTemplates/OrderTemplateDetailModal.razor.rz.scp.css */
/* z-index alineado con la estrategia de Shared/ModalShell (components.css):
   default backdrop 1050 / panel 1060. Sus hijos stacked (Apply, Share,
   confirm clear) usan ModalShell con Stacked=true → 1100/1110 por encima. */
.detail-backdrop[b-wyzjgojpo8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
}
.detail-panel[b-wyzjgojpo8] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(96vw, 880px);
    max-height: 92vh;
    max-height: min(92dvh, calc(var(--app-100vh) - 24px));
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1060;
}

/* Header */
.detail-header[b-wyzjgojpo8] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}
.header-left[b-wyzjgojpo8] { min-width: 0; flex: 1; }
.detail-title[b-wyzjgojpo8] {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
}
.header-sub[b-wyzjgojpo8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.muted[b-wyzjgojpo8] { color: var(--color-text-secondary); font-size: 0.85rem; }
.btn-icon[b-wyzjgojpo8] {
    background: transparent;
    border: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.12s;
    flex-shrink: 0;
}
.btn-icon:hover[b-wyzjgojpo8] { background: var(--color-bg); }
.btn-icon .material-symbols-outlined[b-wyzjgojpo8] { font-size: 22px; }

/* Body */
.detail-body[b-wyzjgojpo8] {
    padding: 0.9rem 1.25rem 0.25rem;
    overflow-y: auto;
    flex: 1;
}
.loading-row[b-wyzjgojpo8],
.empty-inline[b-wyzjgojpo8] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}
.empty-inline[b-wyzjgojpo8] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
}
.empty-inline .material-symbols-outlined[b-wyzjgojpo8] { font-size: 34px; opacity: 0.4; }

.empty-card[b-wyzjgojpo8] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}
.empty-card .material-symbols-outlined[b-wyzjgojpo8] { font-size: 40px; opacity: 0.45; }

/* Lines table */
.lines-scroll[b-wyzjgojpo8] {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.lines-table[b-wyzjgojpo8] {
    width: 100%;
    min-width: 540px;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.lines-table th[b-wyzjgojpo8] {
    background: var(--color-bg);
    padding: 0.55rem 0.7rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.lines-table td[b-wyzjgojpo8] {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid #F0F2F8;
    vertical-align: middle;
    color: var(--color-text);
}
.lines-table tbody tr:last-child td[b-wyzjgojpo8] { border-bottom: none; }
.col-ref[b-wyzjgojpo8] {
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    width: 88px;
}
.col-center[b-wyzjgojpo8] { text-align: center; }
.col-right[b-wyzjgojpo8] { text-align: right; font-variant-numeric: tabular-nums; }
.col-actions[b-wyzjgojpo8] { width: 54px; text-align: right; }

.line-description[b-wyzjgojpo8] { color: var(--color-text); }
.line-category[b-wyzjgojpo8] {
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    margin-top: 0.1rem;
}
.row-free[b-wyzjgojpo8] { background: rgba(224, 155, 48, 0.04); }

.qty-input[b-wyzjgojpo8] {
    width: 68px;
    text-align: center;
    padding: 0.4rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: inherit;
    /* 16px mínimo para evitar zoom forzado de Safari iOS al focus. */
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    outline: none;
}
.qty-input:focus[b-wyzjgojpo8] { border-color: var(--color-primary); }

.free-icon[b-wyzjgojpo8] { font-size: 20px; color: var(--color-border); }
.free-icon.is-free[b-wyzjgojpo8] { color: var(--color-warning); }

.btn-row-action[b-wyzjgojpo8] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-row-action .material-symbols-outlined[b-wyzjgojpo8] { font-size: 18px; }
.btn-row-action:hover[b-wyzjgojpo8] { background: var(--color-bg); }
.btn-row-action--danger[b-wyzjgojpo8] { color: var(--color-danger); }
.btn-row-action--danger:hover[b-wyzjgojpo8] {
    background: rgba(204, 51, 51, 0.08);
    border-color: var(--color-danger);
}

/* Form alert */
.form-alert[b-wyzjgojpo8] {
    margin: 0.75rem 0;
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
}
.form-alert--error[b-wyzjgojpo8] {
    background: rgba(204, 51, 51, 0.08);
    color: var(--color-danger);
    border: 1px solid rgba(204, 51, 51, 0.2);
}

/* Footer */
.detail-footer[b-wyzjgojpo8] {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: #F9FAFD;
}
.footer-left[b-wyzjgojpo8] { display: flex; align-items: center; }
.footer-meta[b-wyzjgojpo8] { color: var(--color-text-secondary); font-size: 0.85rem; }
.footer-actions[b-wyzjgojpo8] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Buttons */
.btn-primary[b-wyzjgojpo8],
.btn-secondary[b-wyzjgojpo8] {
    padding: 0.48rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: inherit;
}
.btn-primary[b-wyzjgojpo8] { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled)[b-wyzjgojpo8] { opacity: 0.9; }
.btn-secondary[b-wyzjgojpo8] {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled)[b-wyzjgojpo8] {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary:disabled[b-wyzjgojpo8],
.btn-secondary:disabled[b-wyzjgojpo8] { opacity: 0.6; cursor: default; }
.btn-secondary .material-symbols-outlined[b-wyzjgojpo8],
.btn-primary .material-symbols-outlined[b-wyzjgojpo8] { font-size: 18px; }

.spin[b-wyzjgojpo8] { animation: spin-b-wyzjgojpo8 1s linear infinite; font-size: 18px; }
@keyframes spin-b-wyzjgojpo8 { 100% { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 767.98px) {
    .detail-panel[b-wyzjgojpo8] {
        width: 100vw;
        height: var(--app-100vh);
        max-height: 100vh;
        max-height: var(--app-100vh);
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
    }
    .detail-header[b-wyzjgojpo8] { padding: 0.75rem 1rem; flex-wrap: wrap; }
    .detail-title[b-wyzjgojpo8] { font-size: 1rem; }
    .detail-body[b-wyzjgojpo8] { padding: 0.75rem 1rem 0; }
    .detail-footer[b-wyzjgojpo8] {
        padding: 0.7rem 1rem;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    }
    .footer-left[b-wyzjgojpo8] { justify-content: center; }
    .footer-actions[b-wyzjgojpo8] { justify-content: center; }
    .lines-table[b-wyzjgojpo8] { min-width: 460px; }
}
/* /Pages/OrderTemplates/OrderTemplateList.razor.rz.scp.css */
/* ── Card contenedora de la tabla ──────────────────────────────────────── */
.table-card[b-ztke5aacta] {
    background: var(--color-surface);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.table-caption[b-ztke5aacta] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.caption-title[b-ztke5aacta] {
    margin: 0;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-text);
}
.caption-actions[b-ztke5aacta] { display: flex; gap: 0.4rem; }

.btn-action[b-ztke5aacta] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-action:hover:not(:disabled)[b-ztke5aacta] {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-action:disabled[b-ztke5aacta] { opacity: 0.35; cursor: default; }
.btn-action .material-symbols-outlined[b-ztke5aacta] { font-size: 20px; }

/* ── Empty / no-company ──────────────────────────────────────── */
.empty-card[b-ztke5aacta] {
    background: var(--color-surface);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 3rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    color: var(--color-text-secondary);
}
.empty-card .material-symbols-outlined[b-ztke5aacta] { font-size: 40px; opacity: 0.4; }

.empty-cell[b-ztke5aacta] {
    text-align: center;
    padding: 2rem 1rem !important;
    color: var(--color-text-secondary);
}
.empty-cell .material-symbols-outlined[b-ztke5aacta] {
    vertical-align: middle;
    font-size: 18px;
    margin-right: 0.4rem;
    opacity: 0.6;
}

/* ── Scroll ───────────────────────────────────────────────────────────── */
.table-scroll[b-ztke5aacta] {
    overflow-x: auto;
    max-height: 76vh;
    max-height: 76dvh;
    overflow-y: auto;
}

/* ── Tabla ────────────────────────────────────────────────────────────── */
.crm-table[b-ztke5aacta] {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
@media (min-width: 576px) {
    .crm-table[b-ztke5aacta] { width: 100%; }
}

.crm-table thead[b-ztke5aacta] {
    position: sticky;
    top: 0;
    z-index: 2;
}
.crm-table th[b-ztke5aacta] {
    background: var(--color-bg);
    padding: 0.65rem 0.875rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.col-center[b-ztke5aacta] { text-align: center; }
.col-right[b-ztke5aacta] { text-align: right; }
.col-actions[b-ztke5aacta] { width: 130px; text-align: right; }

.crm-table td[b-ztke5aacta] {
    padding: 0.65rem 0.875rem;
    border-bottom: 1px solid #F0F2F8;
    vertical-align: middle;
    color: var(--color-text);
    white-space: nowrap;
}
.crm-table tbody tr:last-child td[b-ztke5aacta] { border-bottom: none; }

.data-row[b-ztke5aacta] {
    cursor: pointer;
    transition: background 0.12s;
}
.data-row:hover[b-ztke5aacta] { background: #FAFBFF; }

.col-name[b-ztke5aacta] { font-weight: 600; }
.col-name span[b-ztke5aacta] { font-weight: 600; }
.col-description[b-ztke5aacta] {
    color: var(--color-text-secondary);
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.col-date[b-ztke5aacta] { color: var(--color-text-secondary); font-size: 0.82rem; }

/* ── Row actions ───────────────────────────────────────────────────────── */
.row-actions[b-ztke5aacta] {
    display: inline-flex;
    gap: 0.25rem;
    justify-content: flex-end;
}
.btn-row-action[b-ztke5aacta] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-row-action:hover[b-ztke5aacta] { background: var(--color-bg); }
.btn-row-action .material-symbols-outlined[b-ztke5aacta] { font-size: 18px; }
.btn-row-action--success[b-ztke5aacta] { color: var(--color-success); }
.btn-row-action--success:hover[b-ztke5aacta] {
    background: rgba(46, 158, 90, 0.1);
    border-color: var(--color-success);
}
.btn-row-action--danger[b-ztke5aacta] { color: var(--color-danger); }
.btn-row-action--danger:hover[b-ztke5aacta] {
    background: rgba(204, 51, 51, 0.08);
    border-color: var(--color-danger);
}

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.skeleton-row td[b-ztke5aacta] { padding: 0.75rem 0.875rem; }
.skeleton[b-ztke5aacta] {
    width: 100%;
    height: 0.9rem;
    background: linear-gradient(90deg, #EFF1F7 25%, #F8F9FC 50%, #EFF1F7 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer-b-ztke5aacta 1.2s infinite linear;
}
@keyframes shimmer-b-ztke5aacta {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Confirmación borrar ───────────────────────────────────────────────── */
.confirm-backdrop[b-ztke5aacta] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1080;
}
.confirm-panel[b-ztke5aacta] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(95vw, 440px);
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 1.25rem 1.5rem 1.25rem;
    z-index: 1090;
}
.confirm-header[b-ztke5aacta] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.confirm-header h3[b-ztke5aacta] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.warn-icon[b-ztke5aacta] { color: var(--color-warning); font-size: 26px; }
.confirm-message[b-ztke5aacta] {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.confirm-actions[b-ztke5aacta] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
.btn-secondary[b-ztke5aacta],
.btn-danger[b-ztke5aacta] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.btn-secondary[b-ztke5aacta] {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled)[b-ztke5aacta] { background: var(--color-bg); }
.btn-danger[b-ztke5aacta] { background: var(--color-danger); color: #fff; }
.btn-danger:hover:not(:disabled)[b-ztke5aacta] { opacity: 0.9; }
.btn-secondary:disabled[b-ztke5aacta],
.btn-danger:disabled[b-ztke5aacta] { opacity: 0.6; cursor: default; }
.spin[b-ztke5aacta] { animation: spin-b-ztke5aacta 1s linear infinite; font-size: 18px; }
@keyframes spin-b-ztke5aacta { 100% { transform: rotate(360deg); } }

/* ── Toast inline ──────────────────────────────────────────────────────── */
.crm-toast[b-ztke5aacta] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    font-size: 0.9rem;
    z-index: 1100;
    max-width: calc(100vw - 32px);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .col-description[b-ztke5aacta],
    .crm-table th:nth-child(2)[b-ztke5aacta],
    .crm-table td:nth-child(2)[b-ztke5aacta] { display: none; }
}
@media (max-width: 575.98px) {
    .crm-table th:nth-child(4)[b-ztke5aacta],
    .crm-table td:nth-child(4)[b-ztke5aacta] { display: none; }
}
/* /Pages/OrderTemplates/ShareOrderTemplateModal.razor.rz.scp.css */
/* Estilos específicos de ShareOrderTemplateModal.
   Modal/btn/field/form-alert/spin/customer-hint viven en
   `wwwroot/css/components.css`; backdrop+panel+header+footer en `Shared/ModalShell`. */

.muted-help[b-df890dl9kb] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
}
/* /Pages/Salespersons/SalespersonHierarchy.razor.rz.scp.css */
.sph-page[b-e99n8ri3rg] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sph-header[b-e99n8ri3rg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sph-header__title[b-e99n8ri3rg] {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
}

.sph-header__title h2[b-e99n8ri3rg] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.sph-header__title .material-symbols-outlined[b-e99n8ri3rg] {
    color: var(--color-primary);
    font-size: 22px;
    align-self: center;
}

.sph-header__count[b-e99n8ri3rg] {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
}

/* Grid de paneles — uno por (entorno, empresa) */
.sph-grid[b-e99n8ri3rg] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .sph-grid[b-e99n8ri3rg] { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1440px) {
    .sph-grid[b-e99n8ri3rg] { grid-template-columns: repeat(3, 1fr); }
}

/* MudPaper override scoped al panel */
[b-e99n8ri3rg] .sph-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

[b-e99n8ri3rg] .sph-card--skeleton {
    pointer-events: none;
}

.sph-card__head[b-e99n8ri3rg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}

.sph-card__title[b-e99n8ri3rg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.sph-card__title h3[b-e99n8ri3rg] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sph-card__title .material-symbols-outlined[b-e99n8ri3rg] {
    color: var(--color-primary);
    font-size: 20px;
}

.sph-card__env[b-e99n8ri3rg] {
    font-family: ui-monospace, "Cascadia Mono", "Roboto Mono", monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--color-accent);
    background: rgba(201, 147, 90, 0.12);
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.sph-card__error[b-e99n8ri3rg] {
    margin: 0;
}

.sph-card__empty[b-e99n8ri3rg] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-text-secondary);
    padding: 1rem 0;
    font-style: italic;
}

.sph-card__empty .material-symbols-outlined[b-e99n8ri3rg] {
    font-size: 18px;
}

/* Nodo del árbol — fila code + name + acciones */
.sph-node[b-e99n8ri3rg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
    padding: 0.15rem 0;
}

.sph-node__code[b-e99n8ri3rg] {
    flex-shrink: 0;
    font-family: ui-monospace, "Cascadia Mono", "Roboto Mono", monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--color-primary);
    background: rgba(45, 90, 142, 0.08);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.sph-node__name[b-e99n8ri3rg] {
    color: var(--color-text);
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.sph-node__contact[b-e99n8ri3rg] {
    color: var(--color-primary);
    text-decoration: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.sph-node__contact:hover[b-e99n8ri3rg] {
    background: rgba(45, 90, 142, 0.08);
}

.sph-node__contact .material-symbols-outlined[b-e99n8ri3rg] {
    font-size: 16px;
}

/* MudTreeView fine-tune scoped — quitamos el padding excesivo y alineamos */
[b-e99n8ri3rg] .mud-treeview .mud-treeview-item-content {
    padding: 0.3rem 0.4rem;
}

[b-e99n8ri3rg] .mud-treeview .mud-treeview-item-content:hover {
    background: rgba(45, 90, 142, 0.05);
    border-radius: 6px;
}
/* /Pages/Salespersons/SalespersonList.razor.rz.scp.css */
.sp-page[b-jmmcg5pxe5] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sp-toolbar[b-jmmcg5pxe5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.sp-title[b-jmmcg5pxe5] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.sp-count[b-jmmcg5pxe5] {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
}

.sp-toolbar__right[b-jmmcg5pxe5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sp-search[b-jmmcg5pxe5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    min-width: 240px;
}

.sp-search:focus-within[b-jmmcg5pxe5] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45, 90, 142, 0.15);
}

.sp-search .material-symbols-outlined[b-jmmcg5pxe5] {
    color: var(--color-text-secondary);
    font-size: 18px;
}

.sp-search input[b-jmmcg5pxe5] {
    border: 0;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
    min-width: 0;
}

/* Grid auto-responsive: las tarjetas se reordenan en función del ancho REAL
   disponible (depende del sidebar y del viewport), sin media queries duras. */
.sp-grid[b-jmmcg5pxe5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1rem;
}

.sp-card[b-jmmcg5pxe5] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.sp-card--online[b-jmmcg5pxe5] {
    border-color: rgba(46, 158, 90, 0.5);
    box-shadow: 0 2px 14px rgba(46, 158, 90, 0.12);
}

.sp-card__head[b-jmmcg5pxe5] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.sp-avatar[b-jmmcg5pxe5] {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, #c9d2e3, #e8ecf5);
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-avatar img[b-jmmcg5pxe5] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.sp-avatar__fallback[b-jmmcg5pxe5] {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.sp-presence-dot[b-jmmcg5pxe5] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.sp-presence-dot--online[b-jmmcg5pxe5] {
    background: var(--color-success);
    box-shadow: 0 0 0 0 rgba(46, 158, 90, 0.6);
    animation: sp-pulse-b-jmmcg5pxe5 2.4s ease-out infinite;
}

@keyframes sp-pulse-b-jmmcg5pxe5 {
    0%   { box-shadow: 0 0 0 0 rgba(46, 158, 90, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(46, 158, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 158, 90, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .sp-presence-dot--online[b-jmmcg5pxe5] { animation: none; }
}

.sp-presence-dot--offline[b-jmmcg5pxe5] {
    background: #b8bdcc;
}

.sp-head__text[b-jmmcg5pxe5] {
    flex: 1;
    min-width: 0;
}

.sp-name[b-jmmcg5pxe5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-code[b-jmmcg5pxe5] {
    margin: 0.15rem 0 0 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    font-family: ui-monospace, "Cascadia Mono", "Roboto Mono", monospace;
}

.sp-meta[b-jmmcg5pxe5] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sp-meta__row[b-jmmcg5pxe5] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    min-width: 0;
}

.sp-meta__row dt[b-jmmcg5pxe5] {
    color: var(--color-text-secondary);
    font-size: 18px !important;
    flex-shrink: 0;
}

.sp-meta__row dd[b-jmmcg5pxe5] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-meta__row a[b-jmmcg5pxe5] {
    color: var(--color-primary);
    text-decoration: none;
}

.sp-meta__row a:hover[b-jmmcg5pxe5] { text-decoration: underline; }

.sp-meta__row .mono[b-jmmcg5pxe5] {
    font-family: ui-monospace, "Cascadia Mono", "Roboto Mono", monospace;
    font-size: 0.8rem;
}

.sp-card__foot[b-jmmcg5pxe5] {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.sp-status[b-jmmcg5pxe5] {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.sp-status--online[b-jmmcg5pxe5] {
    background: rgba(46, 158, 90, 0.12);
    color: var(--color-success);
}

.sp-status--offline[b-jmmcg5pxe5] {
    background: #f0f1f5;
    color: var(--color-text-secondary);
}

.sp-last-seen[b-jmmcg5pxe5] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

/* ── Skeletons ─────────────────────────────────────────────────────── */

.sp-card--skeleton[b-jmmcg5pxe5] {
    pointer-events: none;
}

.skeleton[b-jmmcg5pxe5] {
    background: linear-gradient(90deg, #eef0f6 0%, #f7f8fc 50%, #eef0f6 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: skeleton-shimmer-b-jmmcg5pxe5 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer-b-jmmcg5pxe5 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton[b-jmmcg5pxe5] { animation: none; }
}

.skeleton--avatar[b-jmmcg5pxe5] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.skeleton--line[b-jmmcg5pxe5] {
    height: 0.85rem;
    border-radius: 4px;
}

.skeleton--line-name[b-jmmcg5pxe5] { width: 70%; }
.skeleton--line-email[b-jmmcg5pxe5] { width: 90%; }
.skeleton--line-meta[b-jmmcg5pxe5] { width: 60%; }

/* ── Móvil ─────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .sp-toolbar[b-jmmcg5pxe5] { flex-direction: column; align-items: stretch; }
    .sp-toolbar__right[b-jmmcg5pxe5] { justify-content: flex-end; }
    .sp-search[b-jmmcg5pxe5] { min-width: 0; flex: 1; }
}
/* /Pages/Settings/Settings.razor.rz.scp.css */
.settings[b-izje7pyi5b] {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.settings__header[b-izje7pyi5b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.5rem 0 0.5rem;
}
.settings__title[b-izje7pyi5b] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.settings__subtitle[b-izje7pyi5b] {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.settings__toast[b-izje7pyi5b] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
}
.settings__toast--ok[b-izje7pyi5b] {
    background: rgba(46, 158, 90, 0.1);
    border-color: rgba(46, 158, 90, 0.25);
    color: var(--color-success);
}
.settings__toast--err[b-izje7pyi5b] {
    background: rgba(204, 51, 51, 0.08);
    border-color: rgba(204, 51, 51, 0.25);
    color: var(--color-danger);
}

.settings__card[b-izje7pyi5b] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}
.settings__card-head[b-izje7pyi5b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.settings__card-title[b-izje7pyi5b] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}
.settings__card-hint[b-izje7pyi5b] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* ── Cuenta + avatar ─────────────────────────────────────────────────── */
.settings__account[b-izje7pyi5b] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.75rem;
    align-items: start;
    min-width: 0;
}
@media (max-width: 767.98px) {
    .settings__account[b-izje7pyi5b] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.settings__avatar-block[b-izje7pyi5b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.settings__avatar[b-izje7pyi5b] {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.settings__avatar-img[b-izje7pyi5b] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.settings__avatar-icon[b-izje7pyi5b] {
    font-size: 48px;
    color: var(--color-text-secondary);
}

.settings__avatar-actions[b-izje7pyi5b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.settings__avatar-actions label.btn-secondary[b-izje7pyi5b] {
    cursor: pointer;
}
.settings__avatar-actions label.btn-secondary input[type="file"][b-izje7pyi5b] {
    display: none;
}

.settings__hint[b-izje7pyi5b] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0;
    text-align: center;
}

.settings__definition-list[b-izje7pyi5b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
    min-width: 0;
}
.settings__definition-list > div[b-izje7pyi5b] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.settings__definition-list dt[b-izje7pyi5b] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin: 0;
}
.settings__definition-list dd[b-izje7pyi5b] {
    font-size: 0.9rem;
    color: var(--color-text);
    margin: 0;
    word-break: break-word;
}

/* ── Form grid ───────────────────────────────────────────────────────── */
.settings__form-grid[b-izje7pyi5b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem 1.25rem;
}
.settings__field[b-izje7pyi5b] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.settings__field label[b-izje7pyi5b] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}
.settings__field input[b-izje7pyi5b],
.settings__field select[b-izje7pyi5b] {
    width: 100%;
    height: 38px;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    outline: none;
    transition: border-color 150ms, box-shadow 150ms;
}
.settings__field input:focus[b-izje7pyi5b],
.settings__field select:focus[b-izje7pyi5b] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(45, 90, 142, 0.15);
}

.settings__form-actions[b-izje7pyi5b] {
    display: flex;
    justify-content: flex-end;
}

/* ── Companies ───────────────────────────────────────────────────────── */
.settings__companies[b-izje7pyi5b] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.settings__company[b-izje7pyi5b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.settings__company--active[b-izje7pyi5b] {
    border-color: var(--color-primary);
    background: rgba(45, 90, 142, 0.05);
}
.settings__company-main[b-izje7pyi5b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.settings__company-icon[b-izje7pyi5b] {
    font-size: 22px;
    color: var(--color-primary);
    flex-shrink: 0;
}
.settings__company-name[b-izje7pyi5b] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}
.settings__company-role[b-izje7pyi5b] {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-top: 0.15rem;
}
.settings__company-sales[b-izje7pyi5b] {
    display: inline;
}
.settings__badge[b-izje7pyi5b] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    background: var(--color-success);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* ── Logout ──────────────────────────────────────────────────────────── */
.settings__logout[b-izje7pyi5b] {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0;
}

/* ── Botones (scope componente) ──────────────────────────────────────── */
.btn-primary[b-izje7pyi5b] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 1rem;
    background: var(--color-primary);
    color: white;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms, transform 80ms;
}
.btn-primary:hover:not(:disabled)[b-izje7pyi5b] {
    background: #254a75;
}
.btn-primary:active:not(:disabled)[b-izje7pyi5b] {
    transform: translateY(1px);
}
.btn-primary:disabled[b-izje7pyi5b] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-secondary[b-izje7pyi5b] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 36px;
    padding: 0 0.9rem;
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    font-size: 0.825rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms;
}
.btn-secondary:hover[b-izje7pyi5b] {
    background: rgba(45, 90, 142, 0.08);
}
.btn-secondary--disabled[b-izje7pyi5b] {
    opacity: 0.55;
    pointer-events: none;
}

.btn-link-danger[b-izje7pyi5b] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    background: transparent;
    color: var(--color-danger);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms;
}
.btn-link-danger:hover:not(:disabled)[b-izje7pyi5b] {
    background: rgba(204, 51, 51, 0.08);
}
.btn-link-danger:disabled[b-izje7pyi5b] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Spinner botón primario ──────────────────────────────────────────── */
.settings__spinner[b-izje7pyi5b] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: white;
    animation: settings-spin-b-izje7pyi5b 0.8s linear infinite;
}
@keyframes settings-spin-b-izje7pyi5b {
    to { transform: rotate(360deg); }
}

/* ── Iconos Material inline ──────────────────────────────────────────── */
.settings .material-symbols-outlined[b-izje7pyi5b] {
    font-size: 18px;
    line-height: 1;
    user-select: none;
}

/* ── Tarjeta de calendario ─────────────────────────────────────────── */
.settings__calendar[b-izje7pyi5b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.settings__calendar-status[b-izje7pyi5b] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1 1 280px;
    min-width: 0;
}
.settings__calendar-status > div[b-izje7pyi5b] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.settings__calendar-icon[b-izje7pyi5b] {
    font-size: 2rem;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.settings__calendar-icon--on[b-izje7pyi5b] {
    color: var(--color-success);
}
.settings__calendar-actions[b-izje7pyi5b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Responsive tablet/móvil ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .settings[b-izje7pyi5b] {
        padding: 0 0 1rem;
    }
    .settings__card[b-izje7pyi5b] {
        padding: 1.1rem;
    }
    .settings__title[b-izje7pyi5b] {
        font-size: 1.25rem;
    }
    .settings__company[b-izje7pyi5b] {
        flex-wrap: wrap;
    }
    .settings__calendar[b-izje7pyi5b] {
        flex-direction: column;
        align-items: stretch;
    }
    .settings__calendar-actions[b-izje7pyi5b] {
        justify-content: flex-end;
    }
}
/* /Pages/ShoppingCarts/NewCustomerCartModal.razor.rz.scp.css */
/* Sin estilos propios — el componente delega 100 % en `Shared/ModalShell` y en
   las primitivas de `wwwroot/css/components.css` (.btn-primary, .btn-secondary,
   .field, .form-alert, .spin, .req, .customer-hint). */
/* /Pages/ShoppingCarts/NewShoppingCartModal.razor.rz.scp.css */
/* Estilos específicos de NewShoppingCartModal — grid de formulario + picker.
   Modal/btn/field/form-alert/spin viven en `wwwroot/css/components.css`;
   backdrop+panel+header+footer en `Shared/ModalShell`. */


/* ── Form grid (2 columnas en desktop, 1 en móvil) ────────────────────────── */
.form-grid[b-9lrw2e71bj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}


/* ── Customer picker (trigger inline en el formulario) ────────────────────── */
.customer-picker[b-9lrw2e71bj] {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    min-height: 41px;
    display: flex;
    align-items: center;
    padding: 0 0.25rem 0 0.5rem;
}
.customer-picker.input-error[b-9lrw2e71bj] { border-color: var(--color-danger); }

.btn-open-picker[b-9lrw2e71bj] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: none;
    padding: 0.45rem 0.3rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.88rem;
    font-family: inherit;
    width: 100%;
    justify-content: flex-start;
}
.btn-open-picker:hover[b-9lrw2e71bj] { color: var(--color-primary); }
.btn-open-picker .material-symbols-outlined[b-9lrw2e71bj] { font-size: 18px; }

.customer-selected[b-9lrw2e71bj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem 0.2rem;
    min-width: 0;
}
.cust-no[b-9lrw2e71bj] {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.cust-name[b-9lrw2e71bj] {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-clear-customer[b-9lrw2e71bj] {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
}
.btn-clear-customer:hover[b-9lrw2e71bj] {
    background: var(--color-bg);
    color: var(--color-danger);
}
.btn-clear-customer .material-symbols-outlined[b-9lrw2e71bj] { font-size: 16px; }


/* ── Picker popup (modal de tercer nivel — z-index 1100/1110) ────────────── */
.picker-backdrop[b-9lrw2e71bj] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1100;
}
.picker-panel[b-9lrw2e71bj] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 480px);
    max-height: 70vh;
    max-height: min(70dvh, calc(var(--app-100vh) - 24px));
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1110;
}
.picker-header[b-9lrw2e71bj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--color-border);
}
.picker-header h4[b-9lrw2e71bj] { margin: 0; font-size: 0.95rem; font-weight: 700; }

.picker-search[b-9lrw2e71bj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}
.picker-search input[b-9lrw2e71bj] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.88rem;
    color: var(--color-text);
    background: transparent;
    font-family: inherit;
}
.picker-search .material-symbols-outlined[b-9lrw2e71bj] { font-size: 18px; }

.picker-list[b-9lrw2e71bj] { flex: 1; overflow-y: auto; padding: 0.3rem 0; }
.picker-loading[b-9lrw2e71bj],
.picker-empty[b-9lrw2e71bj] {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
}
.picker-item[b-9lrw2e71bj] {
    width: 100%;
    padding: 0.55rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
    font-family: inherit;
}
.picker-item:hover[b-9lrw2e71bj] { background: var(--color-bg); }
.item-no[b-9lrw2e71bj] { font-weight: 600; color: var(--color-text); font-size: 0.8rem; }
.item-name[b-9lrw2e71bj] {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .form-grid[b-9lrw2e71bj] { grid-template-columns: minmax(0, 1fr); }
}
/* /Pages/ShoppingCarts/ShoppingCartDetailModal.razor.rz.scp.css */
/* z-index alineado con la estrategia de Shared/ModalShell (components.css):
   default backdrop 1050 / panel 1060. Sus hijos stacked (CartToTemplate,
   confirm clear) usan ModalShell con Stacked=true → 1100/1110 por encima. */
.detail-backdrop[b-s6a7k8psm9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
}
.detail-panel[b-s6a7k8psm9] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(96vw, 980px);
    max-height: 92vh;
    max-height: min(92dvh, calc(var(--app-100vh) - 24px));
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1060;
}

/* Header */
.detail-header[b-s6a7k8psm9] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}
.header-left[b-s6a7k8psm9] { min-width: 0; flex: 1; }
.detail-title[b-s6a7k8psm9] {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
}
.active-dot[b-s6a7k8psm9] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-success);
    flex-shrink: 0;
}
.header-sub[b-s6a7k8psm9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.badge[b-s6a7k8psm9] {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    font-size: 0.72rem;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.badge--sale[b-s6a7k8psm9] {
    background: rgba(45, 90, 142, 0.1);
    color: var(--color-primary);
}
.badge--return[b-s6a7k8psm9] {
    background: rgba(224, 155, 48, 0.15);
    color: var(--color-warning);
}
.badge--open[b-s6a7k8psm9] {
    background: rgba(46, 158, 90, 0.1);
    color: var(--color-success);
}
.badge--confirmed[b-s6a7k8psm9] {
    background: rgba(107, 113, 134, 0.15);
    color: var(--color-text-secondary);
}
.badge--submitted[b-s6a7k8psm9] {
    background: rgba(224, 155, 48, 0.15);
    color: var(--color-warning);
}
.badge--editing[b-s6a7k8psm9] {
    background: rgba(45, 90, 142, 0.12);
    color: var(--color-primary);
}
.badge--processed[b-s6a7k8psm9] {
    background: rgba(46, 158, 90, 0.12);
    color: var(--color-success);
}
.bc-doc-tag[b-s6a7k8psm9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 14px;
    background: var(--color-bg, #F5F6FA);
    border: 1px solid var(--color-border, #E0E3ED);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}
.bc-doc-tag .material-symbols-outlined[b-s6a7k8psm9] {
    font-size: 1rem;
    color: var(--color-text-secondary);
}
.bc-error[b-s6a7k8psm9],
.bc-info[b-s6a7k8psm9] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.bc-error .material-symbols-outlined[b-s6a7k8psm9],
.bc-info .material-symbols-outlined[b-s6a7k8psm9] {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}
.bc-error strong[b-s6a7k8psm9],
.bc-info strong[b-s6a7k8psm9] {
    display: block;
    margin-bottom: 0.2rem;
}
.bc-error p[b-s6a7k8psm9],
.bc-info p[b-s6a7k8psm9] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}
.form-alert--info[b-s6a7k8psm9] {
    background: rgba(45, 90, 142, 0.08);
    color: var(--color-primary);
    border: 1px solid rgba(45, 90, 142, 0.2);
}
.form-alert--success[b-s6a7k8psm9] {
    background: rgba(46, 158, 90, 0.08);
    color: var(--color-success);
    border: 1px solid rgba(46, 158, 90, 0.2);
}
.customer-tag[b-s6a7k8psm9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: var(--color-bg);
    border-radius: 20px;
    font-size: 0.82rem;
    color: var(--color-text);
    min-width: 0;
}
.customer-tag .material-symbols-outlined[b-s6a7k8psm9] { font-size: 15px; color: var(--color-text-secondary); }
.c-no[b-s6a7k8psm9] { font-weight: 600; }
.c-name[b-s6a7k8psm9] {
    color: var(--color-text-secondary);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-icon[b-s6a7k8psm9] {
    background: transparent;
    border: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.12s;
    flex-shrink: 0;
}
.btn-icon:hover[b-s6a7k8psm9] { background: var(--color-bg); }
.btn-icon .material-symbols-outlined[b-s6a7k8psm9] { font-size: 22px; }

/* Body */
.detail-body[b-s6a7k8psm9] {
    padding: 0.9rem 1.25rem 0.25rem;
    overflow-y: auto;
    flex: 1;
}
.loading-row[b-s6a7k8psm9],
.empty-inline[b-s6a7k8psm9] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}
.empty-inline[b-s6a7k8psm9] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
}
.empty-inline .material-symbols-outlined[b-s6a7k8psm9] { font-size: 34px; opacity: 0.4; }

.empty-card[b-s6a7k8psm9] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}
.empty-card .material-symbols-outlined[b-s6a7k8psm9] { font-size: 40px; opacity: 0.45; }

/* Lines table */
.lines-scroll[b-s6a7k8psm9] {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}
.lines-table[b-s6a7k8psm9] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.lines-table th[b-s6a7k8psm9] {
    background: var(--color-bg);
    padding: 0.55rem 0.7rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.lines-table td[b-s6a7k8psm9] {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid #F0F2F8;
    vertical-align: middle;
    color: var(--color-text);
}
.lines-table tbody tr:last-child td[b-s6a7k8psm9] { border-bottom: none; }
.lines-table tfoot td[b-s6a7k8psm9] {
    padding: 0.65rem 0.7rem;
    font-weight: 700;
    background: #F9FAFD;
    border-top: 1px solid var(--color-border);
}
.col-ref[b-s6a7k8psm9] {
    font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    width: 88px;
}
.col-center[b-s6a7k8psm9] { text-align: center; }
.col-right[b-s6a7k8psm9] { text-align: right; font-variant-numeric: tabular-nums; }
.col-actions[b-s6a7k8psm9] { width: 54px; text-align: right; }
.total-cell[b-s6a7k8psm9] { font-weight: 600; }
/* Columna y badge de descuento del cliente (v0.37.0+). Solo se renderiza cuando
   alguna línea trae LineDiscountPct > 0. */
.col-discount[b-s6a7k8psm9] { width: 76px; }
.discount-badge[b-s6a7k8psm9] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--color-success);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.line-description[b-s6a7k8psm9] { color: var(--color-text); }
.line-category[b-s6a7k8psm9] {
    font-size: 0.74rem;
    color: var(--color-text-secondary);
    margin-top: 0.1rem;
}
.row-free[b-s6a7k8psm9] {
    background: rgba(224, 155, 48, 0.04);
}
.row-free .total-cell[b-s6a7k8psm9] { color: var(--color-warning); }

.qty-input[b-s6a7k8psm9] {
    width: 68px;
    text-align: center;
    padding: 0.4rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: inherit;
    /* 16px mínimo para evitar zoom forzado de Safari iOS al focus. */
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    outline: none;
}
.qty-input:focus[b-s6a7k8psm9] { border-color: var(--color-primary); }

.free-icon[b-s6a7k8psm9] {
    font-size: 20px;
    color: var(--color-border);
}
.free-icon.is-free[b-s6a7k8psm9] { color: var(--color-warning); }

.btn-row-action[b-s6a7k8psm9] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-row-action .material-symbols-outlined[b-s6a7k8psm9] { font-size: 18px; }
.btn-row-action--danger[b-s6a7k8psm9] { color: var(--color-danger); }
.btn-row-action--danger:hover[b-s6a7k8psm9] {
    background: rgba(204, 51, 51, 0.08);
    border-color: var(--color-danger);
}

/* Form alert */
.form-alert[b-s6a7k8psm9] {
    margin: 0.75rem 0;
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
}
.form-alert--error[b-s6a7k8psm9] {
    background: rgba(204, 51, 51, 0.08);
    color: var(--color-danger);
    border: 1px solid rgba(204, 51, 51, 0.2);
}

/* Footer */
.detail-footer[b-s6a7k8psm9] {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: #F9FAFD;
}
.footer-left[b-s6a7k8psm9] { display: flex; align-items: center; }
.footer-total[b-s6a7k8psm9] { color: var(--color-text); font-size: 0.95rem; }
.footer-total .label[b-s6a7k8psm9] {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    margin-right: 0.3rem;
}
.footer-total strong[b-s6a7k8psm9] {
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
/* Bruto tachado al lado del total cuando la cesta tiene descuentos (v0.37.2). */
.footer-total .footer-gross[b-s6a7k8psm9] {
    margin-right: 0.4rem;
    color: var(--color-text-secondary);
    text-decoration: line-through;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* Filas de Subtotal / Descuento en el tfoot de la tabla (v0.37.2). */
.lines-table tfoot tr.row-subtotal td[b-s6a7k8psm9],
.lines-table tfoot tr.row-discount td[b-s6a7k8psm9] {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
}
.lines-table tfoot .footer-row-gross[b-s6a7k8psm9] {
    color: var(--color-text-secondary);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.lines-table tfoot .footer-row-discount[b-s6a7k8psm9] {
    color: var(--color-success);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.footer-actions[b-s6a7k8psm9] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Buttons */
.btn-primary[b-s6a7k8psm9],
.btn-secondary[b-s6a7k8psm9],
.btn-danger[b-s6a7k8psm9] {
    padding: 0.48rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: inherit;
}
.btn-primary[b-s6a7k8psm9] {
    background: var(--color-primary);
    color: #fff;
}
.btn-primary:hover:not(:disabled)[b-s6a7k8psm9] { opacity: 0.9; }
.btn-secondary[b-s6a7k8psm9] {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled)[b-s6a7k8psm9] {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-secondary.btn-danger-text[b-s6a7k8psm9] {
    color: var(--color-danger);
}
.btn-secondary.btn-danger-text:hover:not(:disabled)[b-s6a7k8psm9] {
    background: rgba(204, 51, 51, 0.08);
    color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-danger[b-s6a7k8psm9] { background: var(--color-danger); color: #fff; }
.btn-danger:hover:not(:disabled)[b-s6a7k8psm9] { opacity: 0.9; }
.btn-primary:disabled[b-s6a7k8psm9],
.btn-secondary:disabled[b-s6a7k8psm9],
.btn-danger:disabled[b-s6a7k8psm9] { opacity: 0.6; cursor: default; }
.btn-secondary .material-symbols-outlined[b-s6a7k8psm9],
.btn-primary .material-symbols-outlined[b-s6a7k8psm9],
.btn-danger .material-symbols-outlined[b-s6a7k8psm9] { font-size: 18px; }

/* Confirm clear */
.confirm-backdrop[b-s6a7k8psm9] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1080;
}
.confirm-panel[b-s6a7k8psm9] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(95vw, 440px);
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 1.25rem 1.5rem 1.25rem;
    z-index: 1090;
}
.confirm-header[b-s6a7k8psm9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.confirm-header h3[b-s6a7k8psm9] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.warn-icon[b-s6a7k8psm9] { color: var(--color-warning); font-size: 26px; }
.confirm-message[b-s6a7k8psm9] {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.confirm-actions[b-s6a7k8psm9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.spin[b-s6a7k8psm9] { animation: spin-b-s6a7k8psm9 1s linear infinite; font-size: 18px; }
@keyframes spin-b-s6a7k8psm9 { 100% { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 767.98px) {
    .detail-panel[b-s6a7k8psm9] {
        width: 100vw;
        height: var(--app-100vh);
        max-height: 100vh;
        max-height: var(--app-100vh);
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
    }
    .detail-header[b-s6a7k8psm9] { padding: 0.75rem 1rem; flex-wrap: wrap; }
    .detail-title[b-s6a7k8psm9] { font-size: 1rem; }
    .detail-body[b-s6a7k8psm9] { padding: 0.75rem 1rem 0; }
    .detail-footer[b-s6a7k8psm9] {
        padding: 0.7rem 1rem;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    }
    .footer-left[b-s6a7k8psm9] { justify-content: center; }
    .footer-actions[b-s6a7k8psm9] { justify-content: center; }
    .lines-table[b-s6a7k8psm9] { min-width: 520px; }
    .c-name[b-s6a7k8psm9] { max-width: 140px; }
}

@media (max-width: 479.98px) {
    .footer-actions .btn-secondary .btn-label[b-s6a7k8psm9],
    .footer-actions .btn-primary .btn-label[b-s6a7k8psm9] { display: none; }
    .lines-table[b-s6a7k8psm9] { min-width: 460px; }
    /* En móviles muy estrechos respetamos el ancho útil pero seguimos a 16px
       de font-size para no disparar zoom iOS. */
    .qty-input[b-s6a7k8psm9] { width: 58px; padding: 0.35rem 0.3rem; }
}
/* /Pages/ShoppingCarts/ShoppingCartList.razor.rz.scp.css */
/* ── Card contenedora de la tabla ──────────────────────────────────────── */
.table-card[b-h23swsd54f] {
    background: var(--color-surface);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.table-caption[b-h23swsd54f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.caption-title[b-h23swsd54f] {
    margin: 0;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-text);
}
.caption-actions[b-h23swsd54f] { display: flex; gap: 0.4rem; }

.btn-action[b-h23swsd54f] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-action:hover:not(:disabled)[b-h23swsd54f] {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-action:disabled[b-h23swsd54f] { opacity: 0.35; cursor: default; }
.btn-action .material-symbols-outlined[b-h23swsd54f] { font-size: 20px; }

/* ── Loading / empty / no-company ──────────────────────────────────────── */
.loading-state[b-h23swsd54f] {
    padding: 2rem;
    text-align: center;
    color: var(--color-text-secondary);
}
.empty-card[b-h23swsd54f] {
    background: var(--color-surface);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 3rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    color: var(--color-text-secondary);
}
.empty-card .material-symbols-outlined[b-h23swsd54f] { font-size: 40px; opacity: 0.4; }

.empty-cell[b-h23swsd54f] {
    text-align: center;
    padding: 2rem 1rem !important;
    color: var(--color-text-secondary);
}
.empty-cell .material-symbols-outlined[b-h23swsd54f] {
    vertical-align: middle;
    font-size: 18px;
    margin-right: 0.4rem;
    opacity: 0.6;
}

/* ── Scroll ───────────────────────────────────────────────────────────── */
.table-scroll[b-h23swsd54f] {
    overflow-x: auto;
    max-height: 76vh;
    max-height: 76dvh;
    overflow-y: auto;
}

/* ── Tabla ────────────────────────────────────────────────────────────── */
.crm-table[b-h23swsd54f] {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
@media (min-width: 576px) {
    .crm-table[b-h23swsd54f] { width: 100%; }
}

.crm-table thead[b-h23swsd54f] {
    position: sticky;
    top: 0;
    z-index: 2;
}
.crm-table th[b-h23swsd54f] {
    background: var(--color-bg);
    padding: 0.65rem 0.875rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.col-center[b-h23swsd54f] { text-align: center; }
.col-right[b-h23swsd54f] { text-align: right; }
.col-actions[b-h23swsd54f] { width: 100px; text-align: right; }

.crm-table td[b-h23swsd54f] {
    padding: 0.65rem 0.875rem;
    border-bottom: 1px solid #F0F2F8;
    vertical-align: middle;
    color: var(--color-text);
    white-space: nowrap;
}
.crm-table tbody tr:last-child td[b-h23swsd54f] { border-bottom: none; }

.data-row[b-h23swsd54f] {
    cursor: pointer;
    transition: background 0.12s;
}
.data-row:hover[b-h23swsd54f] { background: #FAFBFF; }
.data-row.row-active[b-h23swsd54f] { background: rgba(46, 158, 90, 0.08); }
.data-row.row-active:hover[b-h23swsd54f] { background: rgba(46, 158, 90, 0.15); }

.col-name[b-h23swsd54f] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.active-dot[b-h23swsd54f] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    flex-shrink: 0;
}
.customer-cell[b-h23swsd54f] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.customer-no[b-h23swsd54f] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}
.customer-name[b-h23swsd54f] {
    font-size: 0.875rem;
    color: var(--color-text);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.total-cell[b-h23swsd54f] { font-variant-numeric: tabular-nums; font-weight: 600; }
.col-date[b-h23swsd54f] { color: var(--color-text-secondary); font-size: 0.82rem; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge[b-h23swsd54f] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.badge--sale[b-h23swsd54f] {
    background: rgba(45, 90, 142, 0.1);
    color: var(--color-primary);
}
.badge--return[b-h23swsd54f] {
    background: rgba(224, 155, 48, 0.15);
    color: var(--color-warning);
}
.badge--open[b-h23swsd54f] {
    background: rgba(46, 158, 90, 0.1);
    color: var(--color-success);
}
.badge--confirmed[b-h23swsd54f] {
    background: rgba(107, 113, 134, 0.15);
    color: var(--color-text-secondary);
}
.badge--submitted[b-h23swsd54f] {
    background: rgba(224, 155, 48, 0.15);
    color: var(--color-warning);
}
.badge--editing[b-h23swsd54f] {
    background: rgba(45, 90, 142, 0.12);
    color: var(--color-primary);
}
.badge--processed[b-h23swsd54f] {
    background: rgba(46, 158, 90, 0.12);
    color: var(--color-success);
}
.bc-doc-tag-small[b-h23swsd54f] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

/* ── Row actions ───────────────────────────────────────────────────────── */
.row-actions[b-h23swsd54f] {
    display: inline-flex;
    gap: 0.25rem;
    justify-content: flex-end;
}
.btn-row-action[b-h23swsd54f] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn-row-action:hover[b-h23swsd54f] { background: var(--color-bg); }
.btn-row-action .material-symbols-outlined[b-h23swsd54f] { font-size: 18px; }
.btn-row-action--success[b-h23swsd54f] { color: var(--color-success); }
.btn-row-action--success:hover[b-h23swsd54f] {
    background: rgba(46, 158, 90, 0.1);
    border-color: var(--color-success);
}
.btn-row-action--muted[b-h23swsd54f] { color: var(--color-success); opacity: 0.85; }
.btn-row-action--danger[b-h23swsd54f] { color: var(--color-danger); }
.btn-row-action--danger:hover[b-h23swsd54f] {
    background: rgba(204, 51, 51, 0.08);
    border-color: var(--color-danger);
}

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.skeleton-row td[b-h23swsd54f] { padding: 0.75rem 0.875rem; }
.skeleton[b-h23swsd54f] {
    width: 100%;
    height: 0.9rem;
    background: linear-gradient(90deg, #EFF1F7 25%, #F8F9FC 50%, #EFF1F7 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer-b-h23swsd54f 1.2s infinite linear;
}
@keyframes shimmer-b-h23swsd54f {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Modal confirmación borrado ────────────────────────────────────────── */
.confirm-backdrop[b-h23swsd54f] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1080;
}
.confirm-panel[b-h23swsd54f] {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(95vw, 440px);
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 1.25rem 1.5rem 1.25rem;
    z-index: 1090;
}
.confirm-header[b-h23swsd54f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.confirm-header h3[b-h23swsd54f] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.warn-icon[b-h23swsd54f] { color: var(--color-warning); font-size: 26px; }
.confirm-message[b-h23swsd54f] {
    margin: 0 0 1rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.confirm-actions[b-h23swsd54f] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
.btn-secondary[b-h23swsd54f],
.btn-danger[b-h23swsd54f] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.btn-secondary[b-h23swsd54f] {
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.btn-secondary:hover:not(:disabled)[b-h23swsd54f] { background: var(--color-bg); }
.btn-danger[b-h23swsd54f] { background: var(--color-danger); color: #fff; }
.btn-danger:hover:not(:disabled)[b-h23swsd54f] { opacity: 0.9; }
.btn-secondary:disabled[b-h23swsd54f], .btn-danger:disabled[b-h23swsd54f] {
    opacity: 0.6; cursor: default;
}
.spin[b-h23swsd54f] { animation: spin-b-h23swsd54f 1s linear infinite; font-size: 18px; }
@keyframes spin-b-h23swsd54f { 100% { transform: rotate(360deg); } }

/* ── Responsive: tablet y móvil ────────────────────────────────────────── */
@media (max-width: 1279.98px) {
    /* Ocultar fecha creación en tablet horizontal */
    .crm-table th:nth-child(7)[b-h23swsd54f],
    .crm-table td:nth-child(7)[b-h23swsd54f] { display: none; }
}
@media (max-width: 767.98px) {
    /* Ocultar: tipo, estado, fecha */
    .crm-table th:nth-child(3)[b-h23swsd54f],
    .crm-table td:nth-child(3)[b-h23swsd54f],
    .crm-table th:nth-child(4)[b-h23swsd54f],
    .crm-table td:nth-child(4)[b-h23swsd54f],
    .crm-table th:nth-child(7)[b-h23swsd54f],
    .crm-table td:nth-child(7)[b-h23swsd54f] { display: none; }
    .customer-name[b-h23swsd54f] { max-width: 160px; }
}
@media (max-width: 575.98px) {
    /* Móvil: ocultar también líneas y total; dejar nombre+cliente+acciones */
    .crm-table th:nth-child(5)[b-h23swsd54f],
    .crm-table td:nth-child(5)[b-h23swsd54f],
    .crm-table th:nth-child(6)[b-h23swsd54f],
    .crm-table td:nth-child(6)[b-h23swsd54f] { display: none; }
    .crm-table[b-h23swsd54f] { table-layout: auto; }
    /* Touch primary: subir de 34 a 38 px en móvil estricto. */
    .btn-row-action[b-h23swsd54f] { width: 38px; height: 38px; }
}
/* /Shared/EmailComposeModal.razor.rz.scp.css */
.email-compose[b-xnfd45pc1b] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.email-compose__hint[b-xnfd45pc1b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: rgba(45, 90, 142, 0.06);
    border: 1px solid rgba(45, 90, 142, 0.18);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--color-text);
}
.email-compose__hint .material-symbols-outlined[b-xnfd45pc1b] {
    font-size: 18px;
    color: var(--color-primary);
}
/* /Shared/HelpDrawer.razor.rz.scp.css */
/* ── Overlay ────────────────────────────────────────────────────────────── */
.help-overlay[b-uq2sa53fta] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1080;
    animation: help-fade-in-b-uq2sa53fta 180ms ease-out;
}

@keyframes help-fade-in-b-uq2sa53fta {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Drawer ────────────────────────────────────────────────────────────── */
.help-drawer[b-uq2sa53fta] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(95vw, 480px);
    background: var(--color-surface);
    z-index: 1085;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
    animation: help-slide-in-b-uq2sa53fta 220ms ease-out;
    outline: none;
}

@keyframes help-slide-in-b-uq2sa53fta {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@media (min-width: 1280px) {
    .help-drawer[b-uq2sa53fta] {
        width: min(95vw, 540px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .help-overlay[b-uq2sa53fta],
    .help-drawer[b-uq2sa53fta] {
        animation: none;
    }
}

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.help-drawer__header[b-uq2sa53fta] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 14px 16px;
    background: var(--color-primary);
    color: #fff;
    flex-shrink: 0;
}

.help-drawer__icon[b-uq2sa53fta] {
    font-size: 24px;
    flex-shrink: 0;
}

.help-drawer__titles[b-uq2sa53fta] {
    flex: 1;
    min-width: 0;
}

.help-drawer__title[b-uq2sa53fta] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.help-drawer__subtitle[b-uq2sa53fta] {
    margin: 2px 0 0 0;
    font-size: 0.75rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.help-drawer__close[b-uq2sa53fta] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: background 150ms;
    flex-shrink: 0;
}
.help-drawer__close:hover[b-uq2sa53fta] {
    background: rgba(255, 255, 255, 0.22);
}
.help-drawer__close .material-symbols-outlined[b-uq2sa53fta] {
    font-size: 18px;
}

/* ── Buscador ──────────────────────────────────────────────────────────── */
.help-drawer__search[b-uq2sa53fta] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-shrink: 0;
}

.help-drawer__search .material-symbols-outlined[b-uq2sa53fta] {
    font-size: 20px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.help-drawer__search input[b-uq2sa53fta] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--color-text);
    outline: none;
    /* iOS no hace zoom si la fuente >= 16px. */
    font-size: 16px;
}

.help-drawer__search-clear[b-uq2sa53fta] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: var(--color-border);
    color: var(--color-text-secondary);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.help-drawer__search-clear:hover[b-uq2sa53fta] {
    background: var(--color-text-secondary);
    color: var(--color-surface);
}
.help-drawer__search-clear .material-symbols-outlined[b-uq2sa53fta] {
    font-size: 14px;
    color: inherit;
}

/* ── Cuerpo (TOC + contenido) ──────────────────────────────────────────── */
.help-drawer__body[b-uq2sa53fta] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-drawer__state[b-uq2sa53fta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 20px;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    text-align: center;
    flex: 1;
}
.help-drawer__state--info .material-symbols-outlined[b-uq2sa53fta],
.help-drawer__state--error .material-symbols-outlined[b-uq2sa53fta] {
    font-size: 40px;
    color: var(--color-text-secondary);
}
.help-drawer__state--error .material-symbols-outlined[b-uq2sa53fta] {
    color: var(--color-danger);
}

/* ── TOC ──────────────────────────────────────────────────────────────── */
.help-toc[b-uq2sa53fta] {
    flex-shrink: 0;
    max-height: 35vh;
    max-height: 35dvh;
    overflow-y: auto;
    padding: 8px 8px 12px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.help-toc__empty[b-uq2sa53fta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 12px;
    color: var(--color-text-secondary);
    text-align: center;
}
.help-toc__empty .material-symbols-outlined[b-uq2sa53fta] {
    font-size: 32px;
    color: var(--color-text-secondary);
    opacity: 0.65;
}
.help-toc__empty p[b-uq2sa53fta] {
    margin: 0;
    font-size: 0.85rem;
}

.help-toc__item[b-uq2sa53fta] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    color: var(--color-text);
    font-size: 0.875rem;
    transition: background 150ms, color 150ms;
}
.help-toc__item:hover[b-uq2sa53fta] {
    background: var(--color-bg);
}
.help-toc__item--active[b-uq2sa53fta] {
    background: rgba(45, 90, 142, 0.1);
    color: var(--color-primary);
    font-weight: 600;
}

.help-toc__chevron[b-uq2sa53fta] {
    font-size: 18px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.help-toc__item--active .help-toc__chevron[b-uq2sa53fta] {
    color: var(--color-primary);
}

.help-toc__title[b-uq2sa53fta] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-toc__subs[b-uq2sa53fta] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 6px 24px;
    margin-bottom: 2px;
    border-left: 2px solid var(--color-border);
    margin-left: 14px;
}

.help-toc__sub[b-uq2sa53fta] {
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    border-radius: 6px;
    transition: background 150ms, color 150ms;
}
.help-toc__sub:hover[b-uq2sa53fta] {
    background: var(--color-bg);
    color: var(--color-primary);
}

/* ── Contenido (markdown renderizado) ──────────────────────────────────── */
.help-content[b-uq2sa53fta] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 32px;
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.55;
}

[b-uq2sa53fta] .help-content h2 {
    margin: 0 0 12px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
}

[b-uq2sa53fta] .help-content h3 {
    margin: 22px 0 8px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

[b-uq2sa53fta] .help-content h4 {
    margin: 16px 0 6px 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
}

[b-uq2sa53fta] .help-content p {
    margin: 0 0 12px 0;
}

[b-uq2sa53fta] .help-content ul,
[b-uq2sa53fta] .help-content ol {
    margin: 0 0 12px 0;
    padding-left: 22px;
}

[b-uq2sa53fta] .help-content li {
    margin-bottom: 4px;
}

[b-uq2sa53fta] .help-content blockquote {
    margin: 8px 0 14px 0;
    padding: 10px 14px;
    border-left: 4px solid var(--color-accent);
    background: rgba(201, 147, 90, 0.08);
    color: var(--color-text);
    border-radius: 0 8px 8px 0;
    font-size: 0.875rem;
}

[b-uq2sa53fta] .help-content blockquote p {
    margin: 0;
}

[b-uq2sa53fta] .help-content code {
    font-family: ui-monospace, "Cascadia Mono", "Menlo", "Consolas", monospace;
    font-size: 0.85em;
    padding: 1px 5px;
    background: var(--color-bg);
    border-radius: 4px;
    color: var(--color-text);
}

[b-uq2sa53fta] .help-content pre {
    margin: 12px 0;
    padding: 12px 14px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.825rem;
}

[b-uq2sa53fta] .help-content pre code {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

[b-uq2sa53fta] .help-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px 0;
    font-size: 0.825rem;
}

[b-uq2sa53fta] .help-content thead th {
    text-align: left;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-border);
    padding: 8px 10px;
    color: var(--color-text);
    font-weight: 700;
}

[b-uq2sa53fta] .help-content tbody td {
    border-bottom: 1px solid var(--color-border);
    padding: 8px 10px;
    vertical-align: top;
}

[b-uq2sa53fta] .help-content tbody tr:hover {
    background: rgba(45, 90, 142, 0.04);
}

[b-uq2sa53fta] .help-content a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-primary);
}
[b-uq2sa53fta] .help-content a:hover {
    text-decoration: none;
    border-bottom-style: solid;
}

/* Smart-link: estilo distinto para que se vea que es un acceso al módulo. */
[b-uq2sa53fta] .help-content a.help-smart-link {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: var(--color-primary);
    background: rgba(45, 90, 142, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    border-bottom: none;
    font-weight: 600;
    transition: background 150ms;
}
[b-uq2sa53fta] .help-content a.help-smart-link::after {
    content: "↗";
    font-size: 0.75em;
    margin-left: 1px;
    opacity: 0.7;
}
[b-uq2sa53fta] .help-content a.help-smart-link:hover {
    background: rgba(45, 90, 142, 0.18);
    text-decoration: none;
    border-bottom: none;
}

/* Resaltado del término de búsqueda. */
[b-uq2sa53fta] .help-content mark {
    background: rgba(224, 155, 48, 0.45);
    color: inherit;
    padding: 1px 2px;
    border-radius: 2px;
}

[b-uq2sa53fta] .help-content hr {
    margin: 18px 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

[b-uq2sa53fta] .help-content strong {
    color: var(--color-text);
    font-weight: 700;
}

/* ── Móvil estrecho ─────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .help-drawer__header[b-uq2sa53fta] {
        padding: 12px 14px;
    }
    .help-drawer__title[b-uq2sa53fta] {
        font-size: 0.95rem;
    }
    .help-content[b-uq2sa53fta] {
        padding: 12px 14px 28px;
        font-size: 0.875rem;
    }
    .help-toc[b-uq2sa53fta] {
        max-height: 40vh;
        max-height: 40dvh;
    }
}
/* /Shared/LoadingIndicator.razor.rz.scp.css */
.li-wrapper[b-w9rx0b2usd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.li-wrapper.li-inline[b-w9rx0b2usd] {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.85rem;
}

.li-spinner[b-w9rx0b2usd] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: li-spin-b-w9rx0b2usd 0.9s linear infinite;
    flex-shrink: 0;
}

.li-wrapper.li-inline .li-spinner[b-w9rx0b2usd] {
    width: 18px;
    height: 18px;
    border-width: 2px;
}

.li-label[b-w9rx0b2usd] {
    font-weight: 500;
    letter-spacing: 0.01em;
}

@keyframes li-spin-b-w9rx0b2usd {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .li-spinner[b-w9rx0b2usd] {
        animation-duration: 2s;
    }
}
/* /Shared/MessageDetailModal.razor.rz.scp.css */
/* MessageDetailModal — modal de lectura de un aviso recibido. Reusa primitivas
   de components.css; este scoped solo añade lo único del modal (cabecera con
   sender + body grande). */

.msg-detail__head[b-sszh9h5y26] {
    display: flex;
    gap: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--color-border);
}

.msg-detail__avatar[b-sszh9h5y26] {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg-detail__avatar img[b-sszh9h5y26] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-detail__avatar .material-symbols-outlined[b-sszh9h5y26] {
    font-size: 32px;
    color: var(--color-text-secondary);
}

.msg-detail__sender[b-sszh9h5y26] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.msg-detail__sender-name[b-sszh9h5y26] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.msg-detail__sender-meta[b-sszh9h5y26] {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.msg-detail__time[b-sszh9h5y26] {
    font-size: 0.78rem;
    color: var(--color-text-secondary);
}

.msg-detail__company[b-sszh9h5y26] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.msg-detail__company .material-symbols-outlined[b-sszh9h5y26] {
    font-size: 14px;
}

.msg-detail__title[b-sszh9h5y26] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 1rem 0 0.65rem;
    line-height: 1.3;
}

.msg-detail__body[b-sszh9h5y26] {
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0.85rem 1rem;
    background: var(--color-bg);
    border-radius: 8px;
    max-height: 50vh;
    max-height: min(50dvh, calc(var(--app-100vh, 100vh) - 280px));
    overflow-y: auto;
}

.msg-detail__no-body[b-sszh9h5y26] {
    margin: 0;
    padding: 0.85rem 1rem;
    background: var(--color-bg);
    border-radius: 8px;
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
    font-size: 0.85rem;
}

@media (max-width: 575.98px) {
    .msg-detail__avatar[b-sszh9h5y26] {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }
    .msg-detail__avatar .material-symbols-outlined[b-sszh9h5y26] { font-size: 26px; }
    .msg-detail__title[b-sszh9h5y26] { font-size: 1.05rem; }
}
/* /Shared/RecentActivity.razor.rz.scp.css */
/* RecentActivity — estilos AUTO-CONTENIDOS (v0.55.10+).
   Antes el componente reutilizaba las clases `.sd-panel*` del padre
   (SalesDashboard) vía `::deep`, pero el CSS isolation de Blazor daba
   problemas en móvil — el panel colapsaba a altura 0 porque algunas
   reglas no se propagaban al sub-componente. Ahora todo el panel
   (background, sombra, padding, header, body con scroll) vive aquí
   con clases privadas `.ra-*` que REPLICAN los valores de `.sd-panel*`
   para que visualmente sea idéntico a chart y Top Clientes. */

/* ── Panel completo ─────────────────────────────────────────────────── */
/* Estos valores deben mantenerse sincronizados con `::deep .sd-panel`
   en SalesDashboard.razor.css. Si cambias allí, cambia aquí. */
.ra-panel[b-75rnalyam5] {
    background: var(--color-bg);
    border-radius: 16px;
    padding: 0.85rem 1rem 0.95rem;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    min-width: 0;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow:
        -5px -5px 12px rgba(255, 255, 255, 0.95),
        5px 5px 14px rgba(45, 90, 142, 0.10);
    animation: ra-fade-up-b-75rnalyam5 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: 0.35s;
    overflow: hidden;
}

@keyframes ra-fade-up-b-75rnalyam5 {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ra-panel__header[b-75rnalyam5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(45, 90, 142, 0.10);
    flex-shrink: 0;
}

[b-75rnalyam5] .ra-panel__title {
    color: var(--color-text) !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* Body con scroll interno cuando el contenido excede el alto. Sin
   `::deep` porque este div lo renderiza el propio componente
   RecentActivity — el atributo de scope se inyecta sobre él
   automáticamente. */
.ra-panel__body[b-75rnalyam5] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

[b-75rnalyam5] .ra-panel__empty {
    color: var(--color-text-secondary) !important;
    text-align: center !important;
    padding: 1.5rem 0 !important;
    font-style: italic;
    font-size: 0.88rem !important;
    margin: auto !important;
}

/* MudSkeleton — tono coherente. Necesita ::deep porque MudSkeleton
   renderiza divs internos que el scope del componente no alcanza. */
[b-75rnalyam5] .ra-panel .mud-skeleton {
    background-color: rgba(45, 90, 142, 0.07) !important;
    border-radius: 10px !important;
    flex: 1 1 auto;
    min-height: 0;
}

/* Móvil estrecho — padding más generoso, mismo que `.sd-panel` en
   `<600 px` del padre. */
@media (max-width: 600px) {
    .ra-panel[b-75rnalyam5] {
        padding: 1rem;
        border-radius: 16px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ra-panel[b-75rnalyam5] { animation: none !important; }
}

/* ── Timeline ─────────────────────────────────────────────────────────── */
.ra-timeline[b-75rnalyam5] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ra-item[b-75rnalyam5] {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 0.7rem;
    align-items: start;
    padding: 0.55rem 0.35rem;
    margin: 0 -0.35rem;
    border-radius: 8px;
    position: relative;
    transition: background-color 0.18s ease;
}
.ra-item:not(:last-child)[b-75rnalyam5] {
    border-bottom: 1px solid rgba(45, 90, 142, 0.07);
}
.ra-item:hover[b-75rnalyam5] {
    background-color: rgba(45, 90, 142, 0.04);
}

/* Línea vertical fina entre items consecutivos. */
.ra-item--with-connector[b-75rnalyam5]::before {
    content: '';
    position: absolute;
    left: calc(0.35rem + 15px);
    top: 42px;
    bottom: -4px;
    width: 1px;
    background: rgba(45, 90, 142, 0.10);
}

/* Dot — avatar redondeado con icono Material Symbols y tinte translúcido. */
.ra-item__dot[b-75rnalyam5] {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--ra-color, var(--color-primary)) 14%, transparent);
    color: var(--ra-color, var(--color-primary));
    border: 1px solid color-mix(in srgb, var(--ra-color, var(--color-primary)) 22%, transparent);
    line-height: 1;
    box-shadow:
        -2px -2px 5px rgba(255, 255, 255, 0.9),
        2px 2px 5px rgba(45, 90, 142, 0.08);
}

[b-75rnalyam5] .ra-item__dot .mud-icon-root {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: inherit !important;
}

.ra-item__body[b-75rnalyam5] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ra-item__action[b-75rnalyam5] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.25;
    letter-spacing: -0.005em;
}

.ra-item__detail[b-75rnalyam5] {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Time — columna alineada a la derecha. */
.ra-item__time[b-75rnalyam5] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    white-space: nowrap;
    line-height: 1.2;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

.ra-item__time-date[b-75rnalyam5] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.ra-item__time-hour[b-75rnalyam5] {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
}

.ra-item__time:not(:has(.ra-item__time-date))[b-75rnalyam5] {
    font-size: 0.72rem;
    color: var(--color-text-secondary);
    font-weight: normal;
}

/* Tablet pequeña / móvil. */
@media (max-width: 991.98px) {
    .ra-item[b-75rnalyam5] {
        padding: 0.65rem 0.35rem;
        grid-template-columns: 34px 1fr auto;
    }
    .ra-item__dot[b-75rnalyam5] {
        width: 34px;
        height: 34px;
        border-radius: 11px;
    }
    [b-75rnalyam5] .ra-item__dot .mud-icon-root {
        width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
    }
    .ra-item--with-connector[b-75rnalyam5]::before {
        left: calc(0.35rem + 16px);
        top: 46px;
    }
}

/* Móvil estrecho — reducimos gap y tipografía. */
@media (max-width: 480px) {
    .ra-item[b-75rnalyam5] {
        gap: 0.55rem;
    }
    .ra-item__action[b-75rnalyam5] {
        font-size: 0.88rem;
    }
    .ra-item__detail[b-75rnalyam5] {
        font-size: 0.72rem;
    }
}