/*
  BH · SHELL (header + sidebar drawer) + páginas operativas · GRAPHITE EMBER
  Adaptado de .claude/prototipos/bh-shell-graphite-ember.html
  - Tokens y reset scoped a .bh-shell (no contaminan otras vistas).
  - Fallback de fuentes: Inter → system-ui; JetBrains Mono → Menlo/monospace.
  - Sin Bootstrap, sin estilos inline, sin CSS isolation.
*/

/* ============================================================
   TOKENS + base scoped al wrapper .bh-shell
   ============================================================ */
.bh-shell {
    --canvas: #0D0D0D;
    --s1: #161616;
    --s2: #1F1F1F;
    --s3: #2A2A2A;
    --b-sub: #222222;
    --b-str: #333333;
    --b-focus: #3F3F3F;
    --t1: #EAEAEA;
    --t2: #8A8A8A;
    --t3: #606060;
    --t4: #404040;
    --ember: #D97756;
    --ember-bright: #E8904D;
    --ember-bg: #2A1810;
    --sky: #7AB8E8;
    --sky-bg: #0F1E2E;
    --ok: #6EC87A;
    --ok-bg: #0F2612;
    --warn: #D9A256;
    --warn-bg: #2A1E0F;
    --err: #E85D5D;
    --err-bg: #2E1010;
    --r-sm: 3px;
    --r-md: 5px;
    --r-lg: 8px;
    --dur-fast: 80ms;
    --dur-base: 140ms;
    --dur-slow: 200ms;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', Menlo, monospace;
    --drawer-w: 280px;

    background: var(--canvas);
    color: var(--t1);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bh-shell *,
.bh-shell *::before,
.bh-shell *::after {
    box-sizing: border-box;
}

.bh-shell .mono {
    font-family: var(--font-mono);
}

/* ============================================================
   HEADER 56px
   ============================================================ */
.bh-shell .app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--s1);
    border-bottom: 1px solid var(--b-sub);
    height: 56px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bh-shell .header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bh-shell .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bh-shell .icon-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--t2);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.bh-shell .icon-btn:hover {
    background: var(--s2);
    color: var(--t1);
}

.bh-shell .icon-btn:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 2px;
}

.bh-shell .icon-btn .material-symbols-outlined {
    font-size: 22px;
}

.bh-shell .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bh-shell .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: var(--s3);
    border: 1px solid var(--b-str);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ember);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.bh-shell .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    min-width: 0;
}

.bh-shell .brand-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--t1);
    letter-spacing: .02em;
}

.bh-shell .brand-sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--t3);
    margin-top: 2px;
}

/* Availability pill */
.bh-shell .availability-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--r-md);
    background: var(--s2);
    border: 1px solid var(--b-sub);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--t2);
    cursor: pointer;
    user-select: none;
    height: 32px;
    transition: all var(--dur-base) var(--ease);
}

.bh-shell .availability-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t3);
    flex-shrink: 0;
}

.bh-shell .availability-pill[data-state="online"] {
    background: var(--ok-bg);
    border-color: rgba(110, 200, 122, .3);
    color: var(--ok);
}

.bh-shell .availability-pill[data-state="online"] .dot {
    background: var(--ok);
    box-shadow: 0 0 6px rgba(110, 200, 122, .5);
}

.bh-shell .availability-pill[data-state="offline"] {
    background: var(--err-bg);
    border-color: rgba(232, 93, 93, .3);
    color: var(--err);
}

.bh-shell .availability-pill[data-state="offline"] .dot {
    background: var(--err);
}

/* Avatar */
.bh-shell .avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    background: var(--s3);
    border: 1px solid var(--b-str);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--t1);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--dur-base) var(--ease);
}

.bh-shell .avatar:hover {
    border-color: var(--b-focus);
}

/* ============================================================
   SIDEBAR DRAWER (overlay desde la izquierda en TODAS las resoluciones)
   ============================================================ */
.bh-shell .drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition: background var(--dur-slow) var(--ease);
}

.bh-shell .drawer-overlay.open {
    background: rgba(0, 0, 0, .65);
    pointer-events: auto;
}

.bh-shell .drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 70;
    width: var(--drawer-w);
    max-width: 85vw;
    background: var(--s1);
    border-right: 1px solid var(--b-sub);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.bh-shell .drawer.open {
    transform: translateX(0);
}

.bh-shell .drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 56px;
    padding: 0 12px;
    border-bottom: 1px solid var(--b-sub);
    flex-shrink: 0;
}

.bh-shell .drawer-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--b-str) transparent;
}

.bh-shell .drawer-nav::-webkit-scrollbar {
    width: 6px;
}

.bh-shell .drawer-nav::-webkit-scrollbar-track {
    background: transparent;
}

.bh-shell .drawer-nav::-webkit-scrollbar-thumb {
    background: var(--b-str);
    border-radius: 3px;
    transition: background var(--dur-base) var(--ease);
}

.bh-shell .drawer-nav::-webkit-scrollbar-thumb:hover {
    background: var(--t3);
}

/* ============================================================
   PAGE INFO — placeholder de módulos sin UI productiva todavía
   Patrón: lead + 2 columnas (qué podrás hacer · qué abarca).
   ============================================================ */
.bh-shell .page-info {
    max-width: 980px;
}

.bh-shell .page-info__lead {
    color: var(--t1);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 20px;
}

.bh-shell .page-info__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .bh-shell .page-info__cols {
        grid-template-columns: 1fr;
    }
}

.bh-shell .page-info__card {
    background: var(--s1);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-md);
    padding: 18px 20px;
}

.bh-shell .page-info__h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: var(--t1);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.bh-shell .page-info__h3 .material-symbols-outlined {
    color: var(--ember);
    font-size: 18px;
}

.bh-shell .page-info__list {
    margin: 0;
    padding: 0 0 0 16px;
    list-style: disc;
    color: var(--t2);
    font-size: 13px;
    line-height: 1.55;
}

.bh-shell .page-info__list li + li {
    margin-top: 6px;
}

.bh-shell .page-info__list .mono {
    color: var(--t1);
    font-size: 12px;
}

.bh-shell .nav-group-title {
    padding: 10px 12px 6px;
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.bh-shell .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--t2);
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.bh-shell .nav-item:hover {
    background: var(--s2);
    color: var(--t1);
}

.bh-shell .nav-item:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: -2px;
}

.bh-shell .nav-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--t3);
    flex-shrink: 0;
}

.bh-shell .nav-item:hover .material-symbols-outlined {
    color: var(--t2);
}

.bh-shell .nav-item.active {
    background: var(--s3);
    color: var(--t1);
    font-weight: 500;
}

.bh-shell .nav-item.active .material-symbols-outlined {
    color: var(--ember-bright);
}

.bh-shell .nav-item .nav-label {
    flex: 1;
    min-width: 0;
}

.bh-shell .drawer-foot {
    border-top: 1px solid var(--b-sub);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.bh-shell .drawer-foot__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
}

.bh-shell .drawer-foot__user-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t1);
    line-height: 1.2;
}

.bh-shell .drawer-foot__user-meta {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--t3);
    margin-top: 2px;
}

.bh-shell .btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--err-bg);
    border: 1px solid var(--err);
    border-radius: var(--r-md);
    color: var(--err);
    font: 600 13px/1 var(--font-sans);
    cursor: pointer;
    transition: filter var(--dur-base) var(--ease);
}

.bh-shell .btn-danger:hover {
    filter: brightness(1.1);
}

.bh-shell .btn-danger:focus-visible {
    outline: 2px solid var(--err);
    outline-offset: 2px;
}

.bh-shell .btn-danger .material-symbols-outlined {
    font-size: 18px;
}

/* ============================================================
   MAIN
   ============================================================ */
.bh-shell .app-main {
    flex: 1;
    padding: 16px 12px 24px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

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

    .bh-shell .app-header {
        padding: 0 24px;
    }

    .bh-shell .app-main {
        padding: 24px;
    }
}

/* ============================================================
   PAGE HEAD (común a todas las páginas operativas BH)
   ============================================================ */
.bh-shell .page-head {
    margin-bottom: 16px;
}

.bh-shell .page-head h1 {
    margin: 0 0 4px;
    font-family: var(--font-mono);
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color: var(--t1);
    letter-spacing: -.005em;
}

.bh-shell .page-head .crumb {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--t3);
    text-transform: lowercase;
    letter-spacing: .02em;
}

/* ============================================================
   ALERT CARDS
   ============================================================ */
.bh-shell .alert-stack {
    display: grid;
    /* auto-fill (no auto-fit) para que las cards mantengan su tamaño base
       aunque haya pocas — evita que 2 cards se estiren a 600px+ en desktop. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 380px));
    gap: 12px;
    /* Sin align-items: start — el default stretch hace que todas las cards
       de una misma fila tengan el alto del contenido más largo. */
}

.bh-shell .alert-card {
    position: relative;
    background: var(--s1);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-lg);
    overflow: hidden;
    /* Override de order-alert-cards.css legacy: sin width/flex fijos */
    width: auto;
    max-width: none;
    min-width: 0;
    /* Flex column para que el body absorba el espacio sobrante
       y el footer (Aceptar) quede siempre al pie. */
    display: flex;
    flex-direction: column;
}

.bh-shell .alert-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--b-sub);
}

.bh-shell .alert-id-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bh-shell .alert-id {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--sky);
    letter-spacing: .01em;
}

.bh-shell .countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    background: var(--warn-bg);
    border: 1px solid rgba(217, 162, 86, .25);
    color: var(--warn);
}

.bh-shell .countdown[data-urgency="urgent"] {
    background: var(--err-bg);
    border-color: rgba(232, 93, 93, .3);
    color: var(--err);
}

.bh-shell .countdown .material-symbols-outlined {
    font-size: 13px;
}

.bh-shell .close-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--t3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-base) var(--ease);
    flex-shrink: 0;
}

.bh-shell .close-btn:hover {
    background: var(--s2);
    color: var(--t1);
    border-color: var(--b-sub);
}

.bh-shell .close-btn .material-symbols-outlined {
    font-size: 16px;
}

.bh-shell .alert-card__body {
    padding: 14px;
    /* Absorbe el espacio sobrante para que las cards queden del mismo alto
       y el footer pegado abajo aunque tengan distinta cantidad de productos. */
    flex: 1;
}

.bh-shell .amount-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.bh-shell .amount {
    font-family: var(--font-sans);
    font-size: 26px;
    line-height: 30px;
    font-weight: 600;
    color: var(--t1);
    letter-spacing: -.01em;
}

.bh-shell .amount__currency {
    font-size: 13px;
    font-weight: 500;
    color: var(--t2);
    margin-right: 4px;
}

.bh-shell .metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--canvas);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-md);
    margin-bottom: 14px;
}

.bh-shell .metric {
    padding: 10px 8px;
    text-align: center;
    border-right: 1px solid var(--b-sub);
}

.bh-shell .metric:last-child {
    border-right: 0;
}

.bh-shell .metric__label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.bh-shell .metric__value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t1);
    line-height: 1;
}

.bh-shell .metric__value .material-symbols-outlined {
    font-size: 13px;
    color: var(--t2);
}

.bh-shell .metric--ok .metric__value {
    color: var(--ok);
}

.bh-shell .metric--ok .metric__value .material-symbols-outlined {
    color: var(--ok);
}

.bh-shell .field {
    margin-bottom: 14px;
}

.bh-shell .field--last {
    margin-bottom: 0;
}

.bh-shell .field__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.bh-shell .field__label .material-symbols-outlined {
    font-size: 13px;
}

.bh-shell .field__value {
    font-size: 13px;
    line-height: 18px;
    color: var(--t1);
    font-weight: 500;
}

.bh-shell .products {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bh-shell .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: var(--r-sm);
    background: var(--s2);
    border: 1px solid var(--b-sub);
    font-size: 12px;
    color: var(--t1);
    line-height: 16px;
}

.bh-shell .chip__qty {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ember-bright);
    letter-spacing: .01em;
}

.bh-shell .alert-card__foot {
    padding: 12px 14px;
    border-top: 1px solid var(--b-sub);
    background: var(--canvas);
}

.bh-shell .btn-primary {
    width: 100%;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ember);
    color: #1A1A1A;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--ember);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.bh-shell .btn-primary:hover {
    background: var(--ember-bright);
    border-color: var(--ember-bright);
}

.bh-shell .btn-primary:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 2px;
}

.bh-shell .btn-primary:disabled {
    background: var(--s3);
    border-color: var(--b-str);
    color: var(--t2);
    cursor: not-allowed;
}

.bh-shell .btn-primary .material-symbols-outlined {
    font-size: 18px;
}

/* En md+ subimos un poco el gap del stack auto-fit */
@media (min-width: 768px) {
    .bh-shell .alert-stack {
        gap: 14px;
    }
}

/* Override de order-alert-cards.css legacy en md+/xl: anular width/flex/max-width fijos */
@media (min-width: 768px) {
    .bh-shell .alert-card {
        width: auto;
        max-width: none;
    }
}

@media (min-width: 1280px) {
    .bh-shell .alert-card {
        width: auto;
        max-width: none;
    }
}

/* Anti-wrap: ID y countdown nunca quiebran línea, pero sus contenedores permiten shrink */
.bh-shell .alert-id,
.bh-shell .countdown,
.bh-shell .countdown__value {
    white-space: nowrap;
}

.bh-shell .alert-id-row,
.bh-shell .alert-card__head,
.bh-shell .alert-card__body,
.bh-shell .amount-row {
    min-width: 0;
}

/* Las metrics no deben solapar iconos cuando la card es estrecha */
.bh-shell .metric {
    min-width: 0;
    overflow: hidden;
}

.bh-shell .metric__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bh-shell .field__value {
    overflow-wrap: anywhere;
}

/* ============================================================
   INLINE BANNERS (loading / error / feedback / offline)
   ============================================================ */
.bh-shell .banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border-radius: var(--r-md);
    border: 1px solid var(--b-sub);
    background: var(--s1);
    font-size: 12.5px;
    line-height: 18px;
    color: var(--t1);
    margin-bottom: 14px;
}

.bh-shell .banner .material-symbols-outlined {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--t2);
}

.bh-shell .banner--info {
    background: var(--sky-bg);
    border-color: rgba(122, 184, 232, .25);
    color: var(--sky);
}

.bh-shell .banner--info .material-symbols-outlined {
    color: var(--sky);
}

.bh-shell .banner--ok {
    background: var(--ok-bg);
    border-color: rgba(110, 200, 122, .25);
    color: var(--ok);
}

.bh-shell .banner--ok .material-symbols-outlined {
    color: var(--ok);
}

.bh-shell .banner--warn {
    background: var(--warn-bg);
    border-color: rgba(217, 162, 86, .25);
    color: var(--warn);
}

.bh-shell .banner--warn .material-symbols-outlined {
    color: var(--warn);
}

.bh-shell .banner--err {
    background: var(--err-bg);
    border-color: rgba(232, 93, 93, .3);
    color: var(--err);
}

.bh-shell .banner--err .material-symbols-outlined {
    color: var(--err);
}

.bh-shell .banner__title {
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

.bh-shell .banner__body {
    color: var(--t2);
    font-weight: 400;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.bh-shell .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    gap: 12px;
    background: var(--s1);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-lg);
}

.bh-shell .empty__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    background: var(--s2);
    border: 1px solid var(--b-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t3);
}

.bh-shell .empty__icon .material-symbols-outlined {
    font-size: 24px;
}

.bh-shell .empty__eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0;
}

.bh-shell .empty__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--t1);
}

.bh-shell .empty__desc {
    margin: 0;
    max-width: 320px;
    font-size: 13px;
    line-height: 20px;
    color: var(--t2);
    font-weight: 400;
}

/* ============================================================
   SKELETON (loading)
   ============================================================ */
.bh-shell .skel-card {
    background: var(--s1);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bh-shell .skel {
    background: var(--s2);
    border-radius: var(--r-sm);
    background-image: linear-gradient(90deg, var(--s2) 0%, var(--s3) 50%, var(--s2) 100%);
    background-size: 200% 100%;
    animation: bh-shell-shimmer 1.2s linear infinite;
}

@keyframes bh-shell-shimmer {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

.bh-shell .skel-h {
    height: 14px;
    width: 60%;
}

.bh-shell .skel-h.lg {
    height: 22px;
    width: 50%;
}

.bh-shell .skel-row {
    display: flex;
    gap: 8px;
}

.bh-shell .skel-row .skel {
    flex: 1;
    height: 36px;
}

.bh-shell .skel-block {
    height: 48px;
    border-radius: var(--r-md);
}

/* ============================================================
   TRACKING SCREEN — Página /bh/order-tracking (Graphite Ember v2)
   Adaptado de .claude/prototipos/bh-order-tracking-graphite-ember-v2.html
   Scoped a .bh-shell.tracking-screen para no contaminar otras vistas.
   ============================================================ */

.bh-shell.tracking-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.bh-shell.tracking-screen .tracking-header {
    background: var(--s1);
    border-bottom: 1px solid var(--b-sub);
    height: 56px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

.bh-shell.tracking-screen .brand {
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
.bh-shell.tracking-screen .brand-mark {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    background: var(--s3);
    border: 1px solid var(--b-str);
    display: flex; align-items: center; justify-content: center;
    color: var(--ember);
    font-family: var(--font-mono);
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
}
.bh-shell.tracking-screen .brand-text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.bh-shell.tracking-screen .brand-title { font-weight: 600; font-size: 13px; color: var(--t1); letter-spacing: .02em; }
.bh-shell.tracking-screen .brand-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--t3); margin-top: 2px; }

.bh-shell.tracking-screen .order-id-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    background: var(--sky-bg);
    border: 1px solid rgba(122, 184, 232, .25);
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 500;
    color: var(--sky);
    white-space: nowrap;
}

.bh-shell.tracking-screen .tracking-main {
    flex: 1;
    padding: 14px;
    display: flex;
    justify-content: center;
}
.bh-shell.tracking-screen .tracking-card {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bh-shell.tracking-screen .dev-panel {
    background: var(--s1);
    border: 1px solid rgba(217, 162, 86, .18);
    border-left: 2px solid var(--warn);
    border-radius: var(--r-md);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--t2);
    overflow: hidden;
}
.bh-shell.tracking-screen .dev-panel > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 600;
    color: var(--warn);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10.5px;
    user-select: none;
}
.bh-shell.tracking-screen .dev-panel > summary::after {
    content: 'expand_more';
    font-family: 'Material Symbols Outlined';
    font-size: 16px;
    color: var(--t3);
    transition: transform var(--dur-base) var(--ease);
}
.bh-shell.tracking-screen .dev-panel[open] > summary::after { transform: rotate(180deg); }
.bh-shell.tracking-screen .dev-panel > summary::-webkit-details-marker { display: none; }

.bh-shell.tracking-screen .dev-grid {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr;
    gap: 4px 12px;
    padding: 10px 12px 12px 12px;
    border-top: 1px solid var(--b-sub);
    margin: 0;
}
.bh-shell.tracking-screen .dev-grid dt {
    color: var(--t3);
    font-weight: 500;
    white-space: nowrap;
}
.bh-shell.tracking-screen .dev-grid dd {
    color: var(--t1);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
.bh-shell.tracking-screen .dev-grid dd.muted { color: var(--t3); }
.bh-shell.tracking-screen .dev-grid dd.ok { color: var(--ok); }
.bh-shell.tracking-screen .dev-grid dd.err { color: var(--err); }

.bh-shell.tracking-screen .tracking-card-main {
    position: relative;
    background: var(--s1);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bh-shell.tracking-screen .state {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--b-sub);
    text-align: center;
}
.bh-shell.tracking-screen .state__icon {
    width: 48px; height: 48px;
    border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ember-bg);
    border: 1px solid rgba(217, 119, 86, .25);
    color: var(--ember-bright);
    margin-bottom: 10px;
}
.bh-shell.tracking-screen .state__icon .material-symbols-outlined { font-size: 24px; }

.bh-shell.tracking-screen .tracking-card-main[data-state="ON_THE_WAY"] .state__icon {
    background: var(--sky-bg);
    border-color: rgba(122, 184, 232, .3);
    color: var(--sky);
}
.bh-shell.tracking-screen .tracking-card-main[data-state="DELIVERED"] .state__icon,
.bh-shell.tracking-screen .tracking-card-main[data-state="RETURNED_TO_BASE"] .state__icon {
    background: var(--ok-bg);
    border-color: rgba(110, 200, 122, .3);
    color: var(--ok);
}
.bh-shell.tracking-screen .tracking-card-main[data-state="INCIDENT_REPORTED"] .state__icon {
    background: var(--err-bg);
    border-color: rgba(232, 93, 93, .3);
    color: var(--err);
}

.bh-shell.tracking-screen .state__title {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    color: var(--t1);
    letter-spacing: -.01em;
    margin: 0 0 4px;
}
.bh-shell.tracking-screen .state__subtitle {
    font-size: 12.5px;
    color: var(--t2);
    margin: 0 0 12px;
    line-height: 18px;
}

.bh-shell.tracking-screen .eta-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    background: var(--s2);
    border: 1px solid var(--b-sub);
    color: var(--t1);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
}
.bh-shell.tracking-screen .eta-pill .material-symbols-outlined {
    font-size: 13px;
    color: var(--ember-bright);
}
.bh-shell.tracking-screen .eta-pill__label {
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 10px;
    font-family: var(--font-sans);
    font-weight: 500;
    margin-right: 2px;
}

.bh-shell.tracking-screen .stepper {
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--b-sub);
    background: var(--canvas);
}
.bh-shell.tracking-screen .stepper__row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.bh-shell.tracking-screen .stepper__line {
    position: absolute;
    left: 16.67%; right: 16.67%; top: 17px;
    height: 2px;
    background: var(--b-sub);
    z-index: 0;
}
.bh-shell.tracking-screen .stepper__line-fill {
    position: absolute;
    left: 16.67%; top: 17px;
    height: 2px;
    background: var(--ember);
    z-index: 1;
    transition: width var(--dur-slow) var(--ease);
}
.bh-shell.tracking-screen .step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.bh-shell.tracking-screen .step__dot {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--s2);
    border: 1px solid var(--b-str);
    display: flex; align-items: center; justify-content: center;
    color: var(--t3);
    transition: all var(--dur-base) var(--ease);
}
.bh-shell.tracking-screen .step__dot .material-symbols-outlined { font-size: 18px; }
.bh-shell.tracking-screen .step__label {
    font-size: 11px;
    color: var(--t3);
    font-weight: 500;
    text-align: center;
    line-height: 14px;
}
.bh-shell.tracking-screen .step.is-done .step__dot {
    background: var(--ember);
    border-color: var(--ember);
    color: #1A1A1A;
}
.bh-shell.tracking-screen .step.is-done .step__label { color: var(--t1); }
.bh-shell.tracking-screen .step.is-current .step__dot {
    background: var(--ember-bg);
    border-color: var(--ember);
    color: var(--ember-bright);
    box-shadow: 0 0 0 3px rgba(217, 119, 86, .15);
}
.bh-shell.tracking-screen .step.is-current .step__label { color: var(--ember-bright); font-weight: 600; }

.bh-shell.tracking-screen .tracking-card-main .body { padding: 14px 16px; flex: 1; }

.bh-shell.tracking-screen .field { margin-bottom: 14px; }
.bh-shell.tracking-screen .field--last { margin-bottom: 0; }
.bh-shell.tracking-screen .field__label {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-sans);
    font-size: 10.5px; font-weight: 500;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.bh-shell.tracking-screen .field__label .material-symbols-outlined { font-size: 13px; }
.bh-shell.tracking-screen .field__value {
    font-size: 13px; line-height: 18px; color: var(--t1); font-weight: 500;
}

.bh-shell.tracking-screen .products { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-shell.tracking-screen .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 9px;
    border-radius: var(--r-sm);
    background: var(--s2);
    border: 1px solid var(--b-sub);
    font-size: 12px;
    color: var(--t1);
    line-height: 16px;
}
.bh-shell.tracking-screen .chip__qty {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    color: var(--ember-bright);
    letter-spacing: .01em;
}

.bh-shell.tracking-screen .events-box {
    background: var(--s2);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-md);
    padding: 12px 14px;
    max-height: 200px;
    overflow-y: auto;
}
.bh-shell.tracking-screen .events-box::-webkit-scrollbar { width: 6px; }
.bh-shell.tracking-screen .events-box::-webkit-scrollbar-track { background: transparent; }
.bh-shell.tracking-screen .events-box::-webkit-scrollbar-thumb { background: var(--b-str); border-radius: 3px; }

.bh-shell.tracking-screen .events {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid var(--b-str);
    padding-left: 14px;
    margin-left: 4px;
}
.bh-shell.tracking-screen .event {
    position: relative;
    padding: 6px 0 10px;
}
.bh-shell.tracking-screen .event:last-child { padding-bottom: 0; }
.bh-shell.tracking-screen .event::before {
    content: '';
    position: absolute;
    left: -19px; top: 9px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--t3);
    border: 2px solid var(--canvas);
}
.bh-shell.tracking-screen .event.is-current::before {
    background: var(--ember);
    box-shadow: 0 0 0 2px rgba(217, 119, 86, .25);
}
.bh-shell.tracking-screen .event__text {
    font-size: 12.5px; line-height: 17px;
    color: var(--sky);
    margin: 0 0 2px;
    font-weight: 500;
}
.bh-shell.tracking-screen .event__time {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--t3);
    letter-spacing: .01em;
}

.bh-shell.tracking-screen .tracking-card-main .foot {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--b-sub);
    background: var(--canvas);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bh-shell.tracking-screen .btn-primary,
.bh-shell.tracking-screen .btn-secondary,
.bh-shell.tracking-screen .btn-danger {
    width: 100%;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.bh-shell.tracking-screen .btn-primary {
    background: var(--ember);
    color: #1A1A1A;
    border: 1px solid var(--ember);
}
.bh-shell.tracking-screen .btn-primary:hover {
    background: var(--ember-bright);
    border-color: var(--ember-bright);
}
.bh-shell.tracking-screen .btn-primary:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 2px;
}
.bh-shell.tracking-screen .btn-primary:disabled {
    background: var(--s3);
    border-color: var(--b-str);
    color: var(--t2);
    cursor: not-allowed;
}
.bh-shell.tracking-screen .btn-secondary {
    background: transparent;
    color: var(--t1);
    border: 1px solid var(--b-str);
}
.bh-shell.tracking-screen .btn-secondary:hover {
    background: var(--s2);
    border-color: var(--b-focus);
}
.bh-shell.tracking-screen .btn-secondary:disabled {
    color: var(--t3);
    cursor: not-allowed;
}
.bh-shell.tracking-screen .btn-danger {
    background: var(--err-bg);
    color: var(--err);
    border: 1px solid rgba(232, 93, 93, .3);
}
.bh-shell.tracking-screen .btn-danger:hover {
    background: rgba(232, 93, 93, .12);
    border-color: rgba(232, 93, 93, .5);
}
.bh-shell.tracking-screen .btn-danger:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.bh-shell.tracking-screen .btn-primary .material-symbols-outlined,
.bh-shell.tracking-screen .btn-secondary .material-symbols-outlined,
.bh-shell.tracking-screen .btn-danger .material-symbols-outlined { font-size: 18px; }

.bh-shell.tracking-screen .feedback {
    background: var(--ok-bg);
    border: 1px solid rgba(110, 200, 122, .25);
    border-radius: var(--r-md);
    padding: 10px 12px;
    color: var(--ok);
    font-size: 12.5px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.bh-shell.tracking-screen .feedback .material-symbols-outlined { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

@media (min-width: 720px) {
    .bh-shell.tracking-screen .tracking-main { padding: 24px; }
    .bh-shell.tracking-screen .state { padding: 24px 20px 18px; }
    .bh-shell.tracking-screen .stepper { padding: 20px; }
    .bh-shell.tracking-screen .tracking-card-main .body { padding: 18px 20px; }
    .bh-shell.tracking-screen .tracking-card-main .foot { padding: 14px 18px 18px; }
}

/* ============================================================
   INCIDENT MODAL — usado por BhOrderTracking
   Vive en su propio wrapper .bh-shell para heredar tokens.
   ============================================================ */

.bh-shell .incident-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(2px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.bh-shell .incident-modal {
    width: 100%;
    max-width: 480px;
    background: var(--s1);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
}

.bh-shell .incident-modal__head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--b-sub);
    background: var(--s2);
}
.bh-shell .incident-modal__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
}
.bh-shell .incident-modal__sub {
    margin: 0;
    font-size: 12px;
    color: var(--t2);
    line-height: 17px;
}

.bh-shell .incident-modal__body {
    padding: 14px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bh-shell .incident-modal__select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    background: var(--canvas);
    border: 1px solid var(--b-str);
    border-radius: var(--r-sm);
    color: var(--t1);
    font-size: 13px;
    font-family: var(--font-sans);
    outline: none;
}
.bh-shell .incident-modal__select:focus { border-color: var(--ember); }

.bh-shell .incident-modal__textarea {
    width: 100%;
    min-height: 110px;
    padding: 8px 10px;
    background: var(--canvas);
    border: 1px solid var(--b-str);
    border-radius: var(--r-sm);
    color: var(--t1);
    font-size: 13px;
    font-family: var(--font-sans);
    outline: none;
    resize: vertical;
}
.bh-shell .incident-modal__textarea:focus { border-color: var(--ember); }

.bh-shell .incident-modal__empty {
    padding: 10px 12px;
    background: var(--warn-bg);
    border: 1px solid rgba(217, 162, 86, .25);
    border-radius: var(--r-sm);
    color: var(--warn);
    font-size: 12px;
}

.bh-shell .incident-modal__foot {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--b-sub);
    background: var(--canvas);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (min-width: 480px) {
    .bh-shell .incident-modal__foot {
        flex-direction: row;
        justify-content: flex-end;
    }
    .bh-shell .incident-modal__foot .btn-secondary,
    .bh-shell .incident-modal__foot .btn-danger {
        width: auto;
        min-width: 140px;
        padding: 0 16px;
    }
}

/* ============================================================
   DEV MODE TOGGLE — botón dentro del dev-panel para alternar
   vista producción / vista developer (BhOrderTracking).
   ============================================================ */

.bh-shell.tracking-screen .dev-mode-toggle {
    appearance: none;
    background: var(--canvas);
    border: 1px solid var(--b-str);
    border-radius: var(--r-sm);
    padding: 3px 8px;
    color: var(--ember-bright);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: .02em;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.bh-shell.tracking-screen .dev-mode-toggle:hover {
    background: var(--ember-bg);
    border-color: var(--ember);
}
.bh-shell.tracking-screen .dev-mode-toggle:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 2px;
}

/* ============================================================
   MENSAJES CLAVE — eventos destacados en el timeline del BH
   (.event.is-key). Tratamiento visual: ember tint, borde lateral.
   ============================================================ */

.bh-shell.tracking-screen .event.is-key {
    background: var(--ember-bg);
    border-left: 2px solid var(--ember);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding-left: 10px;
    margin-left: -14px; /* compensa el padding-left del .events para alinear con la línea vertical */
}
.bh-shell.tracking-screen .event.is-key .event__text {
    color: var(--ember-bright);
    font-weight: 600;
}
.bh-shell.tracking-screen .event.is-key::before {
    background: var(--ember);
    box-shadow: 0 0 0 2px rgba(217, 119, 86, .35);
    width: 10px; height: 10px;
    left: -21px;
}
.bh-shell.tracking-screen .event.is-key.is-current::before {
    box-shadow: 0 0 0 3px rgba(217, 119, 86, .45);
}