/*
  BH · ALERTAS · HOMOLOGACIÓN VISUAL CLIENTE v2.1
  Autoridad: ssot_udrink_design_system_v2_1_20260829.1757.html
  Alcance: sólo /order-alert mediante .bh-alerts-client-v2.
  No modifica contratos, navegación, acciones ni comportamiento funcional.
*/

@font-face {
    font-family: "Cabin UDRINK";
    src: url("../fonts/cabin-latin-wght-400-700.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

/* El recurso de marca se incorpora al shell, pero permanece inactivo fuera de Alertas. */
.bh-shell .bh-client-v2-brand-logo {
    display: none;
}

.bh-shell:has(.bh-alerts-client-v2) {
    --client-primary: #1A3260;
    --client-deep: #002060;
    --client-support: #4590B8;
    --client-white: #FFFFFF;
    --client-ink: #101828;
    --client-ink-2: #344054;
    --client-muted: #667085;
    --client-line: #D0D5DD;
    --client-line-soft: #EAECF0;
    --client-surface: #F7F8FA;
    --client-success: #067647;
    --client-success-bg: #ECFDF3;
    --client-warning: #B54708;
    --client-warning-bg: #FFFAEB;
    --client-danger: #B42318;
    --client-danger-bg: #FEF3F2;
    --client-info: #175CD3;
    --client-info-bg: #EFF8FF;
    --client-radius-control: 4px;
    --client-radius-card: 8px;
    --client-shadow-sm: 0 1px 2px rgba(16, 24, 40, .08);
    --client-shadow-md: 0 10px 28px rgba(16, 24, 40, .12);
    --font-sans: "Cabin UDRINK", system-ui, -apple-system, sans-serif;
    --font-mono: Consolas, "SFMono-Regular", ui-monospace, monospace;
    --drawer-w: 280px;

    min-height: 100vh;
    background: var(--client-surface);
    color: var(--client-ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 24px;
}

.bh-shell:has(.bh-alerts-client-v2) button,
.bh-shell:has(.bh-alerts-client-v2) select,
.bh-shell:has(.bh-alerts-client-v2) textarea,
.bh-shell:has(.bh-alerts-client-v2) input {
    font: inherit;
}

.bh-shell:has(.bh-alerts-client-v2) :focus-visible,
body:has(.bh-alerts-client-v2) .modal :focus-visible {
    outline: 3px solid var(--client-support, #4590B8);
    outline-offset: 3px;
}

.bh-shell:has(.bh-alerts-client-v2) .app-header {
    height: 64px;
    padding: 0 12px;
    gap: 12px;
    background: rgba(255, 255, 255, .96);
    border-bottom-color: var(--client-line-soft);
    box-shadow: var(--client-shadow-sm);
}

.bh-shell:has(.bh-alerts-client-v2) .header-left {
    gap: 10px;
}

.bh-shell:has(.bh-alerts-client-v2) .header-right {
    gap: 8px;
}

.bh-shell:has(.bh-alerts-client-v2) .icon-btn,
.bh-shell:has(.bh-alerts-client-v2) .close-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--client-radius-control);
    background: transparent;
    color: var(--client-ink);
    cursor: pointer;
}

.bh-shell:has(.bh-alerts-client-v2) .icon-btn:hover,
.bh-shell:has(.bh-alerts-client-v2) .close-btn:hover {
    border-color: var(--client-line-soft);
    background: var(--client-surface);
    color: var(--client-primary);
}

.bh-shell:has(.bh-alerts-client-v2) .icon-btn .material-symbols-outlined,
.bh-shell:has(.bh-alerts-client-v2) .close-btn .material-symbols-outlined {
    font-size: 22px;
}

.bh-shell:has(.bh-alerts-client-v2) .brand {
    gap: 0;
}

.bh-shell:has(.bh-alerts-client-v2) .brand-text {
    display: none;
}

.bh-shell:has(.bh-alerts-client-v2) .bh-client-v2-brand-logo {
    display: block;
    width: 98px;
    height: auto;
    max-height: 56px;
    object-fit: contain;
}

.bh-shell:has(.bh-alerts-client-v2) .availability-pill {
    min-height: 44px;
    height: 44px;
    padding: 0 12px;
    gap: 7px;
    border: 1px solid var(--client-line);
    border-radius: 999px;
    background: var(--client-white);
    color: var(--client-ink-2);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.bh-shell:has(.bh-alerts-client-v2) .availability-pill .dot {
    width: 7px;
    height: 7px;
    background: var(--client-muted);
    box-shadow: none;
}

.bh-shell:has(.bh-alerts-client-v2) .availability-pill[data-state="online"] {
    border-color: var(--client-success);
    background: var(--client-success-bg);
    color: var(--client-success);
}

.bh-shell:has(.bh-alerts-client-v2) .availability-pill[data-state="online"] .dot {
    background: var(--client-success);
    box-shadow: none;
}

.bh-shell:has(.bh-alerts-client-v2) .availability-pill[data-state="offline"] {
    border-color: var(--client-danger);
    background: var(--client-danger-bg);
    color: var(--client-danger);
}

.bh-shell:has(.bh-alerts-client-v2) .availability-pill[data-state="offline"] .dot {
    background: var(--client-danger);
}

.bh-shell:has(.bh-alerts-client-v2) .availability-pill:disabled {
    border-color: var(--client-line-soft);
    background: var(--client-line-soft);
    color: var(--client-muted);
    cursor: not-allowed;
}

.bh-shell:has(.bh-alerts-client-v2) .avatar {
    width: 44px;
    height: 44px;
    border: 1px solid var(--client-primary);
    border-radius: var(--client-radius-control);
    background: var(--client-white);
    color: var(--client-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.bh-shell:has(.bh-alerts-client-v2) .avatar:hover {
    border-color: var(--client-support);
    background: var(--client-info-bg);
}

.bh-shell:has(.bh-alerts-client-v2) .drawer-overlay.open {
    background: rgba(16, 24, 40, .56);
}

.bh-shell:has(.bh-alerts-client-v2) .drawer {
    width: var(--drawer-w);
    max-width: 85vw;
    background: var(--client-white);
    border-right-color: var(--client-line-soft);
    color: var(--client-ink);
    box-shadow: var(--client-shadow-md);
}

.bh-shell:has(.bh-alerts-client-v2) .drawer-head {
    min-height: 64px;
    height: 64px;
    padding: 0 12px;
    border-bottom-color: var(--client-line-soft);
}

.bh-shell:has(.bh-alerts-client-v2) .drawer-nav {
    padding: 12px 8px;
    gap: 3px;
    scrollbar-color: var(--client-line) transparent;
}

.bh-shell:has(.bh-alerts-client-v2) .drawer-nav::-webkit-scrollbar-thumb {
    background: var(--client-line);
    border-radius: 4px;
}

.bh-shell:has(.bh-alerts-client-v2) .drawer-nav::-webkit-scrollbar-thumb:hover {
    background: var(--client-muted);
}

.bh-shell:has(.bh-alerts-client-v2) .nav-group-title {
    padding: 11px 12px 6px;
    color: var(--client-muted);
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
}

.bh-shell:has(.bh-alerts-client-v2) .nav-item {
    min-height: 44px;
    padding: 9px 12px;
    gap: 10px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: var(--client-radius-control);
    background: transparent;
    color: var(--client-ink-2);
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
}

.bh-shell:has(.bh-alerts-client-v2) .nav-item:hover {
    background: var(--client-surface);
    color: var(--client-ink);
}

.bh-shell:has(.bh-alerts-client-v2) .nav-item .material-symbols-outlined {
    color: var(--client-muted);
}

.bh-shell:has(.bh-alerts-client-v2) .nav-item.active {
    border-left-color: var(--client-support);
    background: var(--client-info-bg);
    color: var(--client-primary);
    font-weight: 600;
}

.bh-shell:has(.bh-alerts-client-v2) .nav-item.active .material-symbols-outlined {
    color: var(--client-primary);
}

.bh-shell:has(.bh-alerts-client-v2) .drawer-foot {
    gap: 10px;
    padding: 12px;
    border-top-color: var(--client-line-soft);
    background: var(--client-white);
}

.bh-shell:has(.bh-alerts-client-v2) .drawer-foot__user-name {
    color: var(--client-ink);
    font-size: 14px;
    line-height: 20px;
}

.bh-shell:has(.bh-alerts-client-v2) .btn-danger {
    min-height: 44px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--client-danger);
    border-radius: var(--client-radius-control);
    background: var(--client-danger);
    color: var(--client-white);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.bh-shell:has(.bh-alerts-client-v2) .btn-danger:hover {
    border-color: var(--client-danger);
    background: var(--client-danger);
    color: var(--client-white);
    filter: brightness(.9);
}

.bh-shell:has(.bh-alerts-client-v2) .app-main {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 12px 28px;
    background: var(--client-surface);
}

.bh-alerts-client-v2 {
    width: 100%;
    font-family: "Cabin UDRINK", system-ui, -apple-system, sans-serif;
    color: var(--client-ink);
}

/* Ocultamiento visual aprobado. Los nodos y sus datos permanecen intactos. */
.bh-alerts-client-v2 .page-head .crumb,
.bh-alerts-client-v2 .alert-id {
    display: none;
}

.bh-alerts-client-v2 .page-head {
    margin: 0 0 18px;
}

.bh-alerts-client-v2 .page-head h1 {
    margin: 0;
    color: var(--client-primary);
    font-family: var(--font-sans);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.bh-alerts-client-v2 .banner {
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: var(--client-radius-control);
    color: var(--client-ink);
    font-size: 14px;
    line-height: 20px;
}

.bh-alerts-client-v2 .banner .material-symbols-outlined {
    margin-top: 1px;
    font-size: 20px;
}

.bh-alerts-client-v2 .banner--ok {
    border-color: var(--client-success);
    background: var(--client-success-bg);
    color: var(--client-success);
}

.bh-alerts-client-v2 .banner--err {
    border-color: var(--client-danger);
    background: var(--client-danger-bg);
    color: var(--client-danger);
}

.bh-alerts-client-v2 .banner__title {
    color: inherit;
    font-weight: 600;
}

.bh-alerts-client-v2 .alert-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
}

.bh-alerts-client-v2 .alert-card {
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--client-line-soft);
    border-radius: var(--client-radius-card);
    background: var(--client-white);
    box-shadow: var(--client-shadow-sm);
}

.bh-alerts-client-v2 .alert-card__head {
    min-height: 58px;
    padding: 7px 10px 7px 14px;
    gap: 10px;
    border-bottom: 1px solid var(--client-line-soft);
    background: var(--client-white);
}

.bh-alerts-client-v2 .alert-id-row {
    gap: 8px;
}

.bh-alerts-client-v2 .countdown {
    min-height: 26px;
    padding: 3px 9px;
    gap: 5px;
    border: 1px solid var(--client-warning);
    border-radius: 999px;
    background: var(--client-warning-bg);
    color: var(--client-warning);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0;
}

.bh-alerts-client-v2 .countdown[data-urgency="urgent"] {
    border-color: var(--client-danger);
    background: var(--client-danger-bg);
    color: var(--client-danger);
}

.bh-alerts-client-v2 .countdown .material-symbols-outlined {
    font-size: 16px;
}

.bh-alerts-client-v2 .close-btn:disabled {
    border-color: var(--client-line-soft);
    background: var(--client-line-soft);
    color: var(--client-muted);
    cursor: not-allowed;
}

.bh-alerts-client-v2 .alert-card__body {
    flex: 1;
    padding: 16px;
}

.bh-alerts-client-v2 .amount-row {
    margin: 0 0 14px;
}

.bh-alerts-client-v2 .amount {
    color: var(--client-primary);
    font-family: var(--font-sans);
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: 0;
}

.bh-alerts-client-v2 .amount__currency {
    margin-right: 5px;
    color: var(--client-ink-2);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.bh-alerts-client-v2 .metrics {
    margin: 0 0 16px;
    overflow: hidden;
    border: 1px solid var(--client-line-soft);
    border-radius: var(--client-radius-control);
    background: var(--client-surface);
}

.bh-alerts-client-v2 .metric {
    min-width: 0;
    padding: 10px 7px;
    border-right: 1px solid var(--client-line-soft);
}

.bh-alerts-client-v2 .metric:last-child {
    border-right: 0;
}

.bh-alerts-client-v2 .metric__label {
    margin-bottom: 4px;
    color: var(--client-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.bh-alerts-client-v2 .metric__value {
    gap: 4px;
    color: var(--client-ink);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

.bh-alerts-client-v2 .metric__value .material-symbols-outlined {
    color: inherit;
    font-size: 16px;
}

.bh-alerts-client-v2 .metric--ok .metric__value,
.bh-alerts-client-v2 .metric--ok .metric__value .material-symbols-outlined {
    color: var(--client-success);
}

.bh-alerts-client-v2 .field {
    margin-bottom: 16px;
}

.bh-alerts-client-v2 .field--last {
    margin-bottom: 0;
}

.bh-alerts-client-v2 .field__label {
    gap: 6px;
    margin: 0 0 6px;
    color: var(--client-ink-2);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.bh-alerts-client-v2 .field__label .material-symbols-outlined {
    color: var(--client-muted);
    font-size: 18px;
}

.bh-alerts-client-v2 .field__value {
    color: var(--client-ink);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.bh-alerts-client-v2 .products {
    gap: 7px;
}

.bh-alerts-client-v2 .chip {
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--client-line-soft);
    border-radius: var(--client-radius-control);
    background: var(--client-surface);
    color: var(--client-ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}

.bh-alerts-client-v2 .chip__qty {
    padding: 2px 7px;
    border-radius: var(--client-radius-control);
    background: var(--client-info-bg);
    color: var(--client-primary);
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0;
}

.bh-alerts-client-v2 .alert-card__foot {
    padding: 12px 14px;
    border-top: 1px solid var(--client-line-soft);
    background: var(--client-white);
}

.bh-alerts-client-v2 .btn-primary,
body:has(.bh-alerts-client-v2) .modal .btn-primary {
    width: 100%;
    min-height: 44px;
    height: 44px;
    padding: 0 20px;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--client-radius-control, 4px);
    background: var(--client-primary, #1A3260);
    color: var(--client-white, #FFFFFF);
    font-family: "Cabin UDRINK", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.bh-alerts-client-v2 .btn-primary:hover,
body:has(.bh-alerts-client-v2) .modal .btn-primary:hover {
    border-color: transparent;
    background: var(--client-primary, #1A3260);
    color: var(--client-white, #FFFFFF);
    filter: brightness(.9);
}

.bh-alerts-client-v2 .btn-primary:focus-visible,
body:has(.bh-alerts-client-v2) .modal .btn-primary:focus-visible {
    outline: 3px solid var(--client-support, #4590B8);
    outline-offset: 3px;
}

.bh-alerts-client-v2 .btn-primary:disabled,
body:has(.bh-alerts-client-v2) .modal .btn-primary:disabled {
    border-color: var(--client-line-soft, #EAECF0);
    background: var(--client-line-soft, #EAECF0);
    color: var(--client-muted, #667085);
    filter: none;
    cursor: not-allowed;
}

.bh-alerts-client-v2 .btn-primary .material-symbols-outlined,
body:has(.bh-alerts-client-v2) .modal .btn-primary .material-symbols-outlined {
    font-size: 20px;
}

.bh-alerts-client-v2 .empty {
    min-height: 340px;
    padding: 46px 22px;
    gap: 12px;
    border: 1px solid var(--client-line-soft);
    border-radius: var(--client-radius-card);
    background: var(--client-white);
    box-shadow: var(--client-shadow-sm);
}

.bh-alerts-client-v2 .empty__icon {
    width: 52px;
    height: 52px;
    border: 1px solid var(--client-line-soft);
    border-radius: var(--client-radius-card);
    background: var(--client-surface);
    color: var(--client-info);
}

.bh-alerts-client-v2 .empty__eyebrow {
    margin: 0;
    color: var(--client-muted);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: none;
}

.bh-alerts-client-v2 .empty__title {
    margin: 0;
    color: var(--client-primary);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

.bh-alerts-client-v2 .empty__desc {
    max-width: 410px;
    margin: 0;
    color: var(--client-ink-2);
    font-size: 16px;
    line-height: 24px;
}

.bh-alerts-client-v2 .skel-card {
    min-height: 330px;
    padding: 16px;
    gap: 12px;
    border: 1px solid var(--client-line-soft);
    border-radius: var(--client-radius-card);
    background: var(--client-white);
    box-shadow: var(--client-shadow-sm);
}

.bh-alerts-client-v2 .skel {
    border-radius: var(--client-radius-control);
    background: var(--client-line-soft);
    background-image: none;
    animation: bh-client-v2-pulse 1.5s ease-in-out infinite;
}

@keyframes bh-client-v2-pulse {
    50% { opacity: .46; }
}

body:has(.bh-alerts-client-v2) .modal-overlay {
    background: rgba(16, 24, 40, .68);
}

body:has(.bh-alerts-client-v2) .modal {
    border: 1px solid var(--client-line-soft, #EAECF0);
    border-radius: var(--client-radius-card, 8px);
    background: var(--client-white, #FFFFFF);
    color: var(--client-ink, #101828);
    box-shadow: var(--client-shadow-md, 0 10px 28px rgba(16, 24, 40, .12));
    font-family: "Cabin UDRINK", system-ui, -apple-system, sans-serif;
}

body:has(.bh-alerts-client-v2) .modal .modal__head,
body:has(.bh-alerts-client-v2) .modal .modal__foot {
    border-color: var(--client-line-soft, #EAECF0);
    background: var(--client-white, #FFFFFF);
}

body:has(.bh-alerts-client-v2) .modal .modal__title {
    color: var(--client-primary, #1A3260);
    font-size: 24px;
    line-height: 32px;
}

body:has(.bh-alerts-client-v2) .modal .ack-summary {
    border-radius: var(--client-radius-control, 4px);
    background: var(--client-surface, #F7F8FA);
    color: var(--client-ink-2, #344054);
}

body:has(.bh-alerts-client-v2) .modal .btn-link {
    color: var(--client-primary, #1A3260);
}

@media (min-width: 768px) {
    .bh-shell:has(.bh-alerts-client-v2) {
        --drawer-w: 320px;
    }

    .bh-shell:has(.bh-alerts-client-v2) .app-header {
        height: 80px;
        padding: 0 24px;
    }

    .bh-shell:has(.bh-alerts-client-v2) .drawer-head {
        min-height: 80px;
        height: 80px;
        padding: 0 16px;
    }

    .bh-shell:has(.bh-alerts-client-v2) .bh-client-v2-brand-logo {
        width: 118px;
        max-height: 66px;
    }

    .bh-shell:has(.bh-alerts-client-v2) .app-main {
        padding: 24px;
    }

    .bh-alerts-client-v2 .alert-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (min-width: 1280px) {
    .bh-alerts-client-v2 .alert-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .bh-shell:has(.bh-alerts-client-v2) *,
    .bh-shell:has(.bh-alerts-client-v2) *::before,
    .bh-shell:has(.bh-alerts-client-v2) *::after,
    body:has(.bh-alerts-client-v2) .modal,
    body:has(.bh-alerts-client-v2) .modal::before,
    body:has(.bh-alerts-client-v2) .modal::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}