/* =====================================================================
   bandejas.css — Orbis Mentor ERP · Páginas de listado y gestión
   Diseño: Materio · Fuente: Inter · Primary: #696CFF
   ===================================================================== */

/* All --bj-* design tokens are now defined in materio-theme.css */

/* ── Wrapper ────────────────────────────────────────────────────────── */
.bj-wrapper {
    background: var(--mt-body-bg);
    min-height: 100%;
    font-family: var(--mt-font);
    padding: 1.5rem;
    padding-bottom: 2.5rem;
}

/* ================================================================
   PAGE HEADER — Materio style: limpio, dentro del flujo
   ================================================================ */
.bj-header {
    background: transparent;
    padding: 0 0 0.25rem;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: visible;
}

/* Remove old decorative pseudo-elements */
.bj-header::before,
.bj-header::after {
    display: none;
}

.bj-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.bj-header-label {
    display: block;
    font-size: var(--mt-font-size-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt-muted-color);
    margin-bottom: .15rem;
    font-weight: 500;
}

.bj-header-title {
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: var(--mt-font-weight-sb);
    color: var(--mt-heading-color);
    letter-spacing: -.01em;
    line-height: 1.25;
}

.bj-header-count {
    background: var(--mt-primary-light);
    color: var(--mt-primary);
    font-size: var(--mt-font-size-xs);
    font-weight: var(--mt-font-weight-md);
    padding: .25rem .75rem;
    border-radius: var(--mt-radius-sm);
    border: none;
    backdrop-filter: none;
    white-space: nowrap;
    letter-spacing: .01em;
}

/* ================================================================
   TOOLBAR — Búsqueda + botones de acción
   ================================================================ */
.bj-toolbar {
    max-width: 1400px;
    margin: 0 auto 1rem;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.bj-search {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--mt-paper-bg);
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    padding: .422rem .875rem;
    box-shadow: none;
    transition: border-color var(--mt-transition-fast), box-shadow var(--mt-transition-fast);
}

    .bj-search:focus-within {
        border-color: var(--mt-primary);
        box-shadow: 0 0.125rem 0.25rem rgba(var(--mt-primary-rgb),.1);
    }

.bj-search-icon {
    color: var(--mt-muted-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}

.bj-search-input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: var(--mt-font-size-base);
    color: var(--mt-heading-color);
    min-width: 0;
    font-family: var(--mt-font);
    font-weight: var(--mt-font-weight);
}

    .bj-search-input::placeholder {
        color: var(--mt-muted-color);
        font-weight: 400;
    }

.bj-btn-new {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4806rem 1.125rem;
    font-size: var(--mt-font-size-base);
    font-weight: var(--mt-font-weight-md);
    color: #fff;
    background: var(--mt-primary);
    border: 1px solid transparent;
    border-radius: var(--mt-radius);
    cursor: pointer;
    transition: all var(--mt-transition);
    white-space: nowrap;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--mt-primary-rgb), 0.3);
    font-family: var(--mt-font);
    letter-spacing: normal;
}

    .bj-btn-new:hover {
        background: var(--mt-primary-hover);
        transform: translateY(-1px);
        box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-primary-rgb), 0.4);
    }

/* ================================================================
   DESKTOP TABLE — Materio: card blanco limpio, tabla minimal
   ================================================================ */
.bj-table-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

.bj-table-card {
    background: var(--mt-paper-bg);
    border: 0;
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-xs);
    overflow: hidden;
    transition: box-shadow var(--mt-transition);
}

.bj-table-card:hover {
    box-shadow: var(--mt-shadow-sm);
}

.bj-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mt-font-size-base);
    font-family: var(--mt-font);
}

    .bj-table thead {
        background: transparent;
        border-bottom: 1px solid var(--mt-border-color);
    }

        .bj-table thead th {
            padding: .75rem 1.25rem;
            font-size: var(--mt-font-size-xs);
            font-weight: var(--mt-font-weight-sb);
            text-transform: uppercase;
            letter-spacing: .05em;
            color: var(--mt-muted-color);
            white-space: nowrap;
            text-align: left;
        }

    .bj-table tbody tr {
        border-bottom: 1px solid var(--mt-border-color);
        transition: background var(--mt-transition-fast);
    }

        .bj-table tbody tr:last-child {
            border-bottom: none;
        }

        .bj-table tbody tr:hover {
            background: var(--mt-gray-25);
        }

    .bj-table td {
        padding: .75rem 1.25rem;
        vertical-align: middle;
        color: var(--mt-body-color);
    }

    .bj-table th:last-child,
    .bj-table td:last-child {
        text-align: right;
    }

/* ── Cell content ───────────────────────────────────────────────────── */
.bj-cell-primary {
    font-weight: var(--mt-font-weight-md);
    color: var(--mt-heading-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.bj-cell-secondary {
    font-size: var(--mt-font-size-sm);
    color: var(--mt-muted-color);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
    font-weight: var(--mt-font-weight);
}

.bj-cell-truncate {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mt-body-color);
    font-size: var(--mt-font-size-base);
}

/* ================================================================
   BADGES — Materio "label" tinted style
   ================================================================ */
.bj-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: 0.8125em;
    font-weight: var(--mt-font-weight-md);
    padding: .35em .65em;
    border-radius: var(--mt-radius-sm);
    white-space: nowrap;
    letter-spacing: normal;
    font-family: var(--mt-font);
    line-height: 1;
    border: none;
}

    .bj-badge::before {
        display: none;
    }

.bj-badge--pending {
    background: var(--mt-warning-light);
    color: var(--mt-warning);
}

.bj-badge--success {
    background: var(--mt-success-light);
    color: var(--mt-success);
}

.bj-badge--danger {
    background: var(--mt-danger-light);
    color: var(--mt-danger);
}

.bj-badge--info {
    background: var(--mt-info-light);
    color: var(--mt-info);
}

.bj-badge--primary {
    background: var(--mt-primary-light);
    color: var(--mt-primary);
}

/* ================================================================
   BOTÓN "EXPORTAR EXCEL"
   ================================================================ */
.bj-btn-excel {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4806rem 1.125rem;
    font-size: var(--mt-font-size-base);
    font-weight: var(--mt-font-weight-md);
    color: #fff;
    background: var(--mt-success);
    border: 1px solid transparent;
    border-radius: var(--mt-radius);
    cursor: pointer;
    transition: all var(--mt-transition);
    white-space: nowrap;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--mt-success-rgb), 0.3);
    font-family: var(--mt-font);
    letter-spacing: normal;
    position: relative;
    overflow: hidden;
}

.bj-btn-excel::before {
    display: none;
}

.bj-btn-excel:hover:not(:disabled) {
    background: var(--mt-success-hover);
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-success-rgb), 0.4);
}

.bj-btn-excel:active:not(:disabled) {
    transform: translateY(0);
}

.bj-btn-excel:disabled {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

/* ================================================================
   BOTÓN "COMPARTIR" (enlace público de logs, variante primaria)
   ================================================================ */
.bj-btn-share {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4806rem 1.125rem;
    font-size: var(--mt-font-size-base);
    font-weight: var(--mt-font-weight-md);
    color: #fff;
    background: var(--mt-primary);
    border: 1px solid transparent;
    border-radius: var(--mt-radius);
    cursor: pointer;
    transition: all var(--mt-transition);
    white-space: nowrap;
    box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--mt-primary-rgb), 0.3);
    font-family: var(--mt-font);
}

.bj-btn-share:hover:not(:disabled) {
    background: var(--mt-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-primary-rgb), 0.4);
}

.bj-btn-share:active:not(:disabled) { transform: translateY(0); }
.bj-btn-share:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.bj-btn-share-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.bj-btn-excel-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.bj-btn-excel-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bj-spin .65s linear infinite;
    flex-shrink: 0;
}

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

/* ================================================================
   BOTÓN "VER DETALLE" — Materio outlined style
   ================================================================ */
.bj-btn-detail {
    padding: .3rem .875rem;
    font-size: var(--mt-font-size-sm);
    font-weight: var(--mt-font-weight-md);
    color: var(--mt-primary);
    background: transparent;
    border: 1px solid var(--mt-primary);
    border-radius: var(--mt-radius);
    cursor: pointer;
    transition: all var(--mt-transition);
    white-space: nowrap;
    font-family: var(--mt-font);
    letter-spacing: normal;
}

.bj-btn-detail:hover {
        background: var(--mt-primary);
        color: #fff;
        box-shadow: 0 0.25rem 0.625rem 0 rgba(var(--mt-primary-rgb), 0.4);
        transform: translateY(-1px);
    }

.bj-btn-detail--ghost {
    background: transparent;
    color: var(--mt-secondary);
    border-color: var(--mt-secondary);
}

    .bj-btn-detail--ghost:hover:not(:disabled) {
        background: var(--mt-secondary);
        color: #fff;
    }

    .bj-btn-detail--ghost:disabled {
        opacity: .65;
        cursor: not-allowed;
    }

/* ================================================================
   LOGS PAGE EXTENSIONS
   ================================================================ */
.bj-log-filters-card {
    padding: 1.15rem;
    margin-bottom: 1.25rem;
}

.bj-log-filters-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .75rem .9rem;
    align-items: end;
}

/* Fila 1 — IDs de contexto: tres columnas iguales */
.bj-log-filter-field--id {
    grid-column: span 4;
    min-width: 0;
}

/* Fila 2 — Metadata: cuatro controles compactos */
.bj-log-filter-field {
    grid-column: span 2;
    min-width: 0;
}

/* Page size — campo estrecho */
.bj-log-filter-field--xs {
    grid-column: span 1;
    min-width: 0;
}

/* Separador visual entre filas */
.bj-filter-row-sep {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--bj-border-2);
    margin: .2rem 0;
}

.bj-log-filter-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--bj-text-muted);
}

.bj-filter-input {
    width: 100%;
    min-height: 42px;
    padding: .422rem .875rem;
    border: 1px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    background: var(--mt-paper-bg);
    color: var(--mt-heading-color);
    font-size: var(--mt-font-size-base);
    font-family: var(--mt-font);
    outline: none;
    transition: border-color var(--mt-transition-fast), box-shadow var(--mt-transition-fast);
}

    .bj-filter-input:focus {
        border-color: var(--mt-primary);
        box-shadow: 0 0.125rem 0.25rem rgba(var(--mt-primary-rgb),.1);
    }

.bj-log-filter-actions {
    grid-column: -4 / -1;
    display: flex;
    gap: .65rem;
    justify-content: flex-end;
    align-items: center;
}

.bj-log-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
    padding-top: .95rem;
    border-top: 1px solid var(--bj-border-2);
}

.bj-log-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .72rem;
    border-radius: 999px;
    background: var(--bj-accent-light);
    border: 1px solid var(--bj-border);
    color: var(--bj-text-2);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.bj-log-message {
    white-space: normal;
    overflow-wrap: anywhere;
}

.bj-log-meta-line {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .3rem;
}

    .bj-log-meta-line:last-child {
        margin-bottom: 0;
    }

.bj-log-meta-label {
    min-width: 32px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .11em;
    color: var(--bj-text-muted);
}

.bj-log-inline-code {
    font-family: var(--mt-font-mono);
    font-size: .76rem;
    color: var(--bj-text);
    background: var(--bj-bg);
    border: 1px solid var(--bj-border-2);
    border-radius: 8px;
    padding: .18rem .45rem;
    overflow-wrap: anywhere;
}

.bj-log-detail-row td {
    background: linear-gradient(180deg, var(--bj-bg) 0%, var(--bj-bg) 100%);
    padding-top: 0;
}

.bj-log-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
    padding: .2rem 0 .95rem;
}

.bj-log-detail-block,
.bj-log-mobile-detail {
    background: var(--bj-surface);
    border: 1px solid var(--bj-border);
    border-radius: var(--bj-radius);
    padding: .9rem;
    box-shadow: var(--bj-shadow-sm);
}

.bj-log-detail-title {
    margin-bottom: .55rem;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--bj-text-muted);
}

.bj-log-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .65rem;
    margin-bottom: .85rem;
}

.bj-log-kv {
    background: var(--bj-bg);
    border: 1px solid var(--bj-border);
    border-radius: 10px;
    padding: .55rem .7rem;
}

.bj-log-kv-label {
    display: block;
    margin-bottom: .22rem;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--bj-text-muted);
}

.bj-log-kv-value {
    display: block;
    font-family: var(--mt-font-mono);
    font-size: .78rem;
    line-height: 1.45;
    color: var(--bj-text);
    overflow-wrap: anywhere;
}

.bj-log-code {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: var(--mt-font-mono);
    font-size: .82rem;
    line-height: 1.7;
    color: var(--bj-text);
    background: var(--bj-bg);
    border-radius: 12px;
    border: 1px solid var(--bj-border);
    padding: .95rem 1rem;
    text-shadow: none;
}

.bj-log-code::selection {
    background: rgba(var(--mt-primary-rgb),.28);
    color: var(--bj-text);
}

.bj-log-code--exception {
    color: var(--mt-danger, #ff4c51);
    background: linear-gradient(180deg, rgba(255,76,81,.06) 0%, rgba(255,76,81,.1) 100%);
    border-color: rgba(255,76,81,.2);
}

/* ── Copy-to-clipboard wrapper ─────────────────────────── */
.bj-code-wrap {
    position: relative;
}

.bj-code-copy {
    position: absolute;
    top: .55rem;
    right: .55rem;
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .28rem .52rem;
    background: var(--bj-surface);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--bj-border);
    border-radius: 6px;
    font-size: .68rem;
    font-weight: 700;
    font-family: var(--bj-font);
    color: var(--bj-text-2);
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s, background .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s;
    line-height: 1;
    user-select: none;
    z-index: 1;
    white-space: nowrap;
}

.bj-code-wrap:hover .bj-code-copy,
.bj-code-copy:focus-visible {
    opacity: 1;
}

.bj-code-copy:hover {
    background: var(--bj-surface);
    border-color: var(--bj-accent);
    color: var(--bj-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--mt-primary-rgb), .14);
}

.bj-code-copy--ok {
    opacity: 1 !important;
    background: rgba(var(--mt-success-rgb), 0.12);
    border-color: rgba(var(--mt-success-rgb), 0.35);
    color: var(--mt-success);
}

.bj-code-copy--ok:hover {
    background: rgba(var(--mt-success-rgb), 0.2);
    border-color: rgba(var(--mt-success-rgb), 0.5);
    color: var(--mt-success);
    transform: none;
    box-shadow: none;
}

.bj-log-properties-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.bj-log-prop-row {
    border: 1px solid var(--bj-border);
    border-left: 4px solid var(--bj-border);
    border-radius: 12px;
    background: var(--bj-bg);
    padding: .7rem .8rem;
}

.bj-log-prop-row--primary {
    border-left-color: var(--bj-accent);
    background: rgba(var(--mt-primary-rgb), 0.08);
}

.bj-log-prop-row--info {
    border-left-color: var(--bj-info);
    background: rgba(var(--mt-info-rgb), 0.08);
}

.bj-log-prop-row--success {
    border-left-color: var(--bj-success);
    background: rgba(var(--mt-success-rgb), 0.08);
}

.bj-log-prop-row--warn {
    border-left-color: var(--bj-warn);
    background: rgba(var(--mt-warning-rgb), 0.08);
}

.bj-log-prop-row--neutral {
    border-left-color: var(--mt-muted-color);
    background: var(--mt-gray-50);
}

.bj-log-prop-key {
    margin-bottom: .28rem;
    font-size: .66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--bj-text-muted);
}

.bj-log-prop-value {
    font-family: var(--mt-font-mono);
    font-size: .79rem;
    line-height: 1.55;
    color: var(--bj-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.bj-log-empty-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 74px;
    padding: .8rem;
    border: 1px dashed var(--bj-border);
    border-radius: 12px;
    background: var(--bj-bg);
    color: var(--bj-text-muted);
    font-size: .82rem;
    font-weight: 700;
}

.bj-log-mobile-detail {
    margin-top: .85rem;
}

.bj-log-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    background: var(--bj-surface);
    border: 1.5px solid var(--bj-border);
    border-radius: var(--bj-radius);
    box-shadow: var(--bj-shadow-sm);
}

.bj-log-pager-info {
    color: var(--bj-text-2);
    font-size: .85rem;
    font-weight: 600;
}

.bj-log-pager-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bj-log-page-pill {
    padding: .4rem .75rem;
    border-radius: 999px;
    background: var(--bj-accent-light);
    border: 1px solid var(--bj-border);
    color: var(--bj-text);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ================================================================
   MOBILE CARDS
   ================================================================ */
.bj-mobile-list {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.bj-card {
    background: var(--mt-paper-bg);
    border: 0;
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-xs);
    padding: 1.1rem;
    transition: box-shadow var(--mt-transition);
}

    .bj-card:hover {
        box-shadow: var(--mt-shadow-sm);
    }

.bj-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .85rem;
}

.bj-card-field {
    margin-bottom: .55rem;
}

.bj-card-label {
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--bj-text-muted);
    margin-bottom: .2rem;
}

.bj-card-value {
    font-size: .875rem;
    color: var(--bj-text-2);
    line-height: 1.4;
    font-weight: 500;
}

.bj-card-footer {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--bj-border-2);
}

    .bj-card-footer .bj-btn-detail {
        width: 100%;
        display: flex;
        justify-content: center;
    }

/* ================================================================
   FILTER CARD (shared pattern for date/filter panels on mobile)
   ================================================================ */
.bj-filter-card {
    background: var(--mt-paper-bg);
    border: 1.5px solid var(--mt-border-color);
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-xs);
    padding: 1rem 1.1rem;
}

/* ================================================================
   EMPTY STATE
   ================================================================ */
.bj-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--bj-text-muted);
    max-width: 1400px;
    margin: 0 auto;
}

.bj-empty-icon {
    display: block;
    margin-bottom: 1rem;
    opacity: .4;
}

.bj-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bj-text-2);
    margin: 0 0 .4rem;
    letter-spacing: -.01em;
}

.bj-empty-subtitle {
    font-size: .875rem;
    color: var(--bj-text-muted);
    margin: 0;
}

/* ================================================================
   SKELETON LOADER
   ================================================================ */
.bj-skeleton-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.bj-skeleton-card {
    background: var(--bj-surface);
    border: 1.5px solid var(--bj-border);
    border-radius: var(--bj-radius-lg);
    overflow: hidden;
    box-shadow: var(--bj-shadow);
}

.bj-skeleton-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--bj-border-2);
}

    .bj-skeleton-row:last-child {
        border-bottom: none;
    }

.bj-skeleton-block {
    background: linear-gradient(90deg, var(--bj-border-2) 25%, var(--bj-border) 50%, var(--bj-border-2) 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: bj-shimmer 1.5s ease-in-out infinite;
}

@keyframes bj-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================================================
   LOG CHART — Actividad por hora
   ================================================================ */
.bj-chart-card {
    background: var(--bj-surface);
    border: 1.5px solid var(--bj-border);
    border-radius: var(--bj-radius-lg);
    box-shadow: var(--bj-shadow);
    overflow: hidden;
}

.bj-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.4rem .8rem;
    border-bottom: 1px solid var(--bj-border-2);
}

.bj-chart-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.bj-chart-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--bj-radius-sm);
    background: var(--bj-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bj-accent);
    flex-shrink: 0;
}

.bj-chart-title {
    font-size: .875rem;
    font-weight: 700;
    color: var(--bj-text);
    letter-spacing: -.01em;
}

.bj-chart-subtitle {
    font-size: .72rem;
    color: var(--bj-text-muted);
    margin-top: .1rem;
}

.bj-chart-legend {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    color: var(--bj-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}

.bj-chart-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bj-accent);
    flex-shrink: 0;
}

.bj-chart-body {
    padding: 1rem 1rem .6rem;
    position: relative;
}

.bj-chart-svg {
    width: 100%;
    height: 200px;
    display: block;
    overflow: visible;
}

.bj-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--bj-text-muted);
    font-size: .85rem;
    gap: .5rem;
}

.bj-chart-skeleton {
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, var(--bj-border-2) 25%, var(--bj-border) 50%, var(--bj-border-2) 75%);
    background-size: 200% 100%;
    border-radius: var(--bj-radius-sm);
    animation: bj-shimmer 1.5s ease-in-out infinite;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .bj-wrapper     { padding: 1rem; }
}

@media (max-width: 768px) {
    .bj-wrapper     { padding: 0.75rem; padding-bottom: 1.5rem; }
    .bj-search      { max-width: none; }
    .bj-btn-new     { width: 100%; justify-content: center; }
    .bj-mobile-list { padding-left: 0; padding-right: 0; gap: .5rem; }
    .bj-card        { padding: .85rem; }
    .bj-card-top    { margin-bottom: .55rem; }
    .bj-card-field  { margin-bottom: .35rem; }
    .bj-card-footer { margin-top: .6rem; padding-top: .55rem; }
}

@media (max-width: 480px) {
    .bj-wrapper {
        padding: 0.5rem;
        padding-bottom: 1.25rem;
    }

    .bj-header       { margin-bottom: .75rem; }
    .bj-header-inner  { gap: .5rem; }
    .bj-header-label  { font-size: .6rem; margin-bottom: .05rem; }
    .bj-header-title  { font-size: 1.1rem; }
    .bj-header-count  { font-size: .7rem; padding: .2rem .55rem; }

    .bj-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        margin-bottom: .65rem;
    }

    .bj-btn-new,
    .bj-btn-excel {
        padding: .4rem .75rem;
        font-size: .82rem;
    }

    .bj-mobile-list { gap: .4rem; }

    .bj-card {
        padding: .7rem .75rem;
        border-radius: var(--mt-radius);
    }

    .bj-card-top    { margin-bottom: .4rem; gap: .35rem; }
    .bj-card-field  { margin-bottom: .25rem; }
    .bj-card-label  { font-size: .58rem; margin-bottom: .1rem; letter-spacing: .08em; }
    .bj-card-value  { font-size: .82rem; line-height: 1.35; }
    .bj-card-footer { margin-top: .45rem; padding-top: .4rem; }

    .bj-badge       { font-size: .72em; padding: .25em .5em; }

    .bj-empty        { padding: 2.5rem 1rem; }
    .bj-empty-title  { font-size: .9rem; }
    .bj-empty-subtitle { font-size: .8rem; }
}

@media (max-width: 1024px) {
    /* Fila IDs: dos columnas en tablet */
    .bj-log-filter-field--id  { grid-column: span 6; }
    /* Metadata: tres por fila */
    .bj-log-filter-field      { grid-column: span 3; }
    /* PageSize ocupa media fila antes de los botones */
    .bj-log-filter-field--xs  { grid-column: span 6; }
    /* Botones: media fila derecha */
    .bj-log-filter-actions    { grid-column: -7 / -1; }
    .bj-log-detail-grid       { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .bj-log-filters-card { padding: 1rem; }
    .bj-log-filter-field--id,
    .bj-log-filter-field,
    .bj-log-filter-field--xs,
    .bj-filter-row-sep        { grid-column: 1 / -1; }
    .bj-log-filter-actions    { grid-column: 1 / -1; flex-direction: column; }
    .bj-log-filter-actions .bj-btn-new,
    .bj-log-filter-actions .bj-btn-detail { width: 100%; justify-content: center; }
    .bj-log-pager             { flex-direction: column; align-items: stretch; }
    .bj-log-pager-actions     { justify-content: stretch; }
    .bj-log-pager-actions .bj-btn-detail { flex: 1 1 0; justify-content: center; display: inline-flex; }
}

@media (max-width: 480px) {
    .bj-log-summary-chip,
    .bj-log-page-pill { width: 100%; justify-content: center; }
}

/* ================================================================
   USER TIMELINE
   ================================================================ */
.bj-timeline-card {
    background: var(--bj-surface);
    border: 1.5px solid var(--bj-border);
    border-radius: var(--bj-radius-lg);
    box-shadow: var(--bj-shadow);
    overflow: hidden;
}

.bj-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.4rem;
    flex-wrap: wrap;
}

.bj-timeline-header--btn {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--bj-font);
    border-radius: var(--bj-radius-lg) var(--bj-radius-lg) 0 0;
    transition: background var(--bj-transition);
}

    .bj-timeline-header--btn:hover {
        background: var(--bj-bg);
    }

.bj-timeline-header-right {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
}

.bj-timeline-chevron {
    color: var(--bj-text-muted);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
}

.bj-timeline-chevron--open {
    transform: rotate(180deg);
}

.bj-timeline-header-left {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.bj-timeline-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--bj-radius-sm);
    background: var(--bj-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bj-accent);
    flex-shrink: 0;
}

.bj-timeline-title {
    font-size: .875rem;
    font-weight: 700;
    color: var(--bj-text);
    letter-spacing: -.01em;
}

.bj-timeline-subtitle {
    font-size: .72rem;
    color: var(--bj-text-muted);
    margin-top: .1rem;
}

.bj-timeline-loading {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--bj-text-muted);
}

.bj-timeline-body {
    padding: 1rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    border-top: 1px solid var(--bj-border-2);
    min-width: 0;
}

/* ── Session block ──────────────────────────────────────────────── */
.bj-timeline-session {
    background: var(--bj-bg);
    border: 1px solid var(--bj-border-2);
    border-radius: var(--bj-radius);
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    width: 100%;
    min-width: 0;
}

.bj-timeline-session-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    flex-wrap: wrap;
}

.bj-timeline-session-meta {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.bj-timeline-cnx {
    font-family: var(--mt-font-mono);
    font-size: .7rem;
    color: var(--bj-text-2);
    background: var(--bj-border-2);
    border: 1px solid var(--bj-border);
    border-radius: 6px;
    padding: .18rem .5rem;
    white-space: nowrap;
}

.bj-timeline-time-range {
    font-size: .75rem;
    color: var(--bj-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.bj-timeline-filter-btn {
    flex-shrink: 0;
    font-size: .72rem;
    padding: .25rem .72rem;
}

.bj-timeline-canvas-wrap {
    width: 100%;
    min-width: 0;
    border-radius: var(--bj-radius);
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(var(--mt-primary-rgb),.06), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.72), rgba(248,251,255,.92));
    border: 1px solid var(--bj-border);
}

.bj-timeline-canvas {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ── Event track (horizontal scroll) ────────────────────────────── */
.bj-timeline-track {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: 0;
}

.bj-timeline-flow-row {
    display: flex;
    align-items: stretch;
    gap: .45rem;
    width: 100%;
    min-width: 0;
}

    .bj-timeline-track::-webkit-scrollbar {
        height: 0;
    }

    .bj-timeline-track::-webkit-scrollbar-track {
        background: transparent;
    }

    .bj-timeline-track::-webkit-scrollbar-thumb {
        background: var(--bj-border);
        border-radius: 2px;
    }

/* ── Individual event pill ─────────────────────────────────────── */
.bj-timeline-event {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .28rem;
    background: var(--bj-accent-light);
    border: 1px solid rgba(var(--mt-primary-rgb),.25);
    border-radius: var(--bj-radius-sm);
    padding: .48rem .7rem .52rem;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    cursor: default;
    transition: box-shadow var(--bj-transition), transform var(--bj-transition);
}

.bj-timeline-flow-row .bj-timeline-event {
    flex: 1 1 0;
}

    .bj-timeline-event:hover {
        box-shadow: var(--bj-shadow-sm);
        transform: translateY(-1px);
    }

.bj-timeline-event--error {
    background: var(--bj-danger-light);
    border-color: var(--bj-danger-border);
}

.bj-timeline-event--warning {
    background: var(--bj-warn-light);
    border-color: var(--bj-warn-border);
}

.bj-timeline-event--success {
    background: var(--bj-success-light);
    border-color: var(--bj-success-border);
}

.bj-timeline-event-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}

.bj-timeline-step {
    display: inline-flex;
    align-items: center;
    padding: .14rem .42rem;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(var(--mt-primary-rgb),.16);
    color: var(--bj-text-2);
    font-family: var(--mt-font-mono);
    font-size: .61rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bj-timeline-connector {
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    min-width: 32px;
}

.bj-timeline-connector-line {
    display: block;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--mt-primary-rgb),.18) 0%, rgba(var(--mt-primary-rgb),.55) 100%);
}

.bj-timeline-connector-arrow {
    color: var(--bj-accent-dark);
    font-size: .82rem;
    font-weight: 900;
    line-height: 1;
}

.bj-timeline-terminal {
    flex: 0 0 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 56px;
    height: 30px;
    padding: 0 .85rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(22,163,74,.18) 0%, rgba(22,163,74,.12) 100%);
    border: 1px solid rgba(22,163,74,.22);
    color: #0f6b34;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.72),
        0 1px 0 rgba(22,163,74,.08);
    font-family: var(--mt-font-mono);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.bj-timeline-event-label {
    font-size: .7rem;
    font-weight: 700;
    color: var(--bj-text);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
    letter-spacing: -.01em;
}

.bj-timeline-event-time {
    font-size: .64rem;
    color: var(--bj-text-muted);
    font-family: var(--mt-font-mono);
    white-space: nowrap;
}

.bj-timeline-arrow {
    display: none;
}

@media (max-width: 768px) {
    .bj-timeline-track {
        gap: .45rem;
    }

    .bj-timeline-flow-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .35rem;
    }

    .bj-timeline-connector,
    .bj-timeline-terminal {
        display: none;
    }

    .bj-timeline-event {
        max-width: 100%;
    }
}