:root {
    --tblr-primary: #206bc4;
    --tblr-primary-rgb: 32, 107, 196;
    --tblr-font-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sgl-blue: #206bc4;
    --sgl-blue-dark: #1a5aa3;
    --sgl-blue-soft: rgba(32, 107, 196, 0.1);
    --im-red: #C40000;
    --im-red-dark: #9e0000;
    --im-red-soft: rgba(196, 0, 0, 0.1);
    --im-navy: #1e293b;
    --im-gray-ui: #e5e7eb;
    --sidebar-bg: #1e293b;
    --sidebar-border: rgba(255, 255, 255, 0.07);
    --page-bg: #f4f6f8;
    --card-border: #e8ecf0;
    --text-muted: #64748b;
}

body {
    background: var(--page-bg);
}

.page-body {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* ── Sidebar ── */
.navbar-vertical {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
}

.navbar-vertical .navbar-brand {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--sidebar-border);
    margin-bottom: .25rem;
}

.navbar-vertical .nav-section {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 1rem .75rem .35rem;
}

.navbar-vertical .nav-link {
    color: rgba(255, 255, 255, 0.62);
    border-radius: .5rem;
    margin: 2px .65rem;
    padding: .6rem .85rem;
    transition: all .15s ease;
}

.navbar-vertical .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

.navbar-vertical .nav-link.active {
    font-weight: 500;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 3px 0 0 var(--sgl-blue);
}

.navbar-vertical .nav-link-icon { opacity: .8; }
.navbar-vertical .nav-link.active .nav-link-icon,
.navbar-vertical .nav-link:hover .nav-link-icon { opacity: 1; }

.navbar-vertical .navbar-collapse {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.navbar-vertical .sidebar-footer {
    border-top: 1px solid var(--sidebar-border);
    padding: 1rem .85rem 1.25rem;
    margin-top: auto;
    background: var(--im-navy-deep, #1a2332);
}

.navbar-vertical .sidebar-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .85rem;
}

/* ── Top bar ── */
.app-topbar {
    background: #fff;
    border-bottom: 1px solid var(--card-border);
    padding: .65rem 0;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-topbar-title {
    font-size: .9rem;
    font-weight: 600;
    color: #1e293b;
}

.app-topbar-sub {
    font-size: .75rem;
    color: var(--text-muted);
}

/* ── Page header ── */
.page-header {
    margin-bottom: 2.25rem;
}

.page-header .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.03em;
    color: #1d273b;
    line-height: 1.25;
}

.page-header .page-pretitle {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6e7e91;
}

/* ── Cards ── */
.card {
    border: 1px solid var(--card-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--card-border);
    padding: 1rem 1.25rem;
}

.card-title {
    font-size: .95rem;
    font-weight: 600;
    margin: 0;
}

.card-table thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: #f8fafc;
    border-bottom: 1px solid var(--card-border);
}

.card-table tbody tr {
    transition: background .12s ease;
}

.card-table tbody tr:hover {
    background: #f8fafc;
}

/* ── KPI ── */
.card-kpi {
    border: 1px solid var(--card-border);
    transition: transform .15s ease, box-shadow .15s ease;
}

.card-kpi:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.card-kpi .subheader {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.kpi-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.kpi-icon-red { background: var(--im-red-soft); color: var(--im-red); }
.kpi-icon-blue { background: rgba(32, 107, 196, 0.1); color: #206bc4; }
.kpi-icon-green { background: rgba(47, 179, 68, 0.1); color: #2fb344; }
.kpi-icon-orange { background: rgba(247, 103, 7, 0.1); color: #f76707; }

/* ── Filters ── */
.filter-panel .card-body {
    padding: 1rem 1.25rem;
}

.filter-panel .form-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .25rem;
}

/* ── Forms ── */
.form-section .card-header {
    padding: .85rem 1.25rem;
}

.form-section .card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-section .section-num {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--sgl-blue-soft);
    color: var(--sgl-blue);
    font-size: .75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-label {
    font-size: .8125rem;
    font-weight: 500;
    color: #334155;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(32, 107, 196, 0.45);
    box-shadow: 0 0 0 .2rem rgba(32, 107, 196, 0.12);
}

/* ── Detail view ── */
.detail-hero {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border: 1px solid var(--card-border);
    border-radius: .5rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.detail-hero-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: .25rem;
}

.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.detail-block {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: .5rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.detail-block-title {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: .65rem;
}

.detail-block-body {
    color: #334155;
    line-height: 1.65;
    font-size: .9rem;
}

.datagrid-item {
    padding: .65rem 0;
}

.datagrid-title {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    margin-bottom: .2rem;
}

.datagrid-content {
    font-size: .9rem;
    color: #1e293b;
}

.product-detail-text {
    color: #334155;
    line-height: 1.65;
    font-size: .9rem;
}

.detail-block .datagrid-item {
    padding: .5rem 0;
}

/* ── Timeline (audit) ── */
.timeline {
    position: relative;
    padding-left: 1.5rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: .35rem;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    background: #e2e8f0;
}

.timeline-item {
    position: relative;
    padding-bottom: 1rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.15rem;
    top: .35rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #cbd5e1;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-time {
    font-size: .72rem;
    color: var(--text-muted);
}

.timeline-text {
    font-size: .85rem;
    color: #334155;
}

/* ── Avatars ── */
.avatar-initials {
    width: 2rem;
    height: 2rem;
    border-radius: .375rem;
    background: #e2e8f0;
    color: #475569;
    font-size: .7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-initials-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: .65rem;
}

/* ── Buttons ── */
.btn-primary {
    --tblr-btn-bg: var(--sgl-blue);
    --tblr-btn-border-color: var(--sgl-blue);
    --tblr-btn-hover-bg: var(--sgl-blue-dark);
    --tblr-btn-hover-border-color: var(--sgl-blue-dark);
}

.btn-ghost-primary {
    color: var(--sgl-blue);
}

.btn-ghost-primary:hover {
    background: var(--sgl-blue-soft);
    color: var(--sgl-blue-dark);
}

.text-primary { color: var(--sgl-blue) !important; }

/* ── Brand (rojo solo en logo) ── */
.brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--im-red);
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: none;
}

/* ── Login (base; layout split en theme.css) ── */
.login-page {
    min-height: 100vh;
    background: #e9ecef;
}

.login-panel {
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    max-width: 420px;
    width: 100%;
}

.login-panel-header {
    background: var(--sidebar-bg);
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    color: #fff;
}

.login-brand-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin: .75rem 0 .25rem;
}

.login-brand-sub {
    font-size: .85rem;
    color: rgba(255, 255, 255, 0.6);
}

.login-panel-body {
    padding: 2rem;
}

.table-vcenter td,
.table-vcenter th {
    vertical-align: middle;
}

.table-count-badge {
    font-size: .75rem;
    font-weight: 500;
    color: var(--text-muted);
}

.export-grid .export-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--card-border);
    border-radius: .5rem;
    text-decoration: none;
    color: inherit;
    transition: all .15s ease;
    background: #fff;
}

.export-grid .export-item:hover {
    border-color: rgba(32, 107, 196, 0.3);
    background: var(--sgl-blue-soft);
    color: inherit;
    transform: translateY(-1px);
}

.export-grid .export-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.export-grid .export-icon-excel { background: rgba(47, 179, 68, 0.1); color: #2fb344; }
.export-grid .export-icon-pdf { background: rgba(214, 57, 57, 0.1); color: #d63939; }

.vencimiento-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.vencimiento-item:last-child { border-bottom: none; }

@media (max-width: 767.98px) {
    .page-header .page-title { font-size: 1.35rem; }
    .page-header-inner { align-items: flex-start; }
    .btn-list { flex-wrap: wrap; }
}

#calendar {
    min-height: 650px;
}

#calendar .fc-toolbar-title {
    font-size: 1.15rem;
    font-weight: 600;
}

#calendar .fc-button-primary {
    background-color: var(--sgl-blue);
    border-color: var(--sgl-blue);
}

#calendar .fc-button-primary:not(:disabled).fc-button-active,
#calendar .fc-button-primary:not(:disabled):active,
#calendar .fc-button-primary:hover {
    background-color: var(--sgl-blue-dark);
    border-color: var(--sgl-blue-dark);
}

/* ── Case detail summaries ── */
.case-summary-panel {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    padding: 1rem;
}

.case-summary-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    margin-bottom: .65rem;
}

.case-expense-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.case-expense-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.case-expense-item:last-child { border-bottom: none; }

.text-red { color: #C40000; }

.detail-tabs .nav-link {
    font-weight: 500;
    color: #64748b;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .75rem 1rem;
}

.detail-tabs .nav-link:hover {
    color: var(--sgl-blue);
    border-bottom-color: #bfdbfe;
}

.detail-tabs .nav-link.active {
    color: var(--sgl-blue);
    border-bottom-color: var(--sgl-blue);
    background: transparent;
}

.case-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding-bottom: 0;
}

.case-activity-header .nav-tabs {
    border-bottom: none;
    margin-bottom: -1px;
}

.case-activity-actions {
    display: flex;
    gap: .35rem;
    padding-bottom: .5rem;
}

.empty-tab-state {
    text-align: center;
    padding: 2rem 1rem;
    color: #94a3b8;
}

.empty-tab-state i {
    font-size: 2rem;
    display: block;
    margin-bottom: .5rem;
    opacity: .7;
}

.empty-tab-state p {
    margin-bottom: .75rem;
}

.case-kpi {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    padding: .65rem .85rem;
    height: 100%;
}

.case-kpi-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: .25rem;
}

.case-kpi-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    min-height: 1.5rem;
}

.case-ai-card .btn-ai-action,
.case-ai-card .btn-outline-primary {
    min-height: 2.65rem;
    padding: .3rem .45rem .35rem;
    font-size: .75rem;
    line-height: 1.15;
}
.case-ai-card .btn-outline-primary > i {
    font-size: 1rem;
    margin-bottom: .1rem !important;
}
.case-ai-card .btn-outline-primary > span {
    font-size: .72rem;
}

.case-ai-result {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--sgl-blue);
    border-radius: .65rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.case-ai-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .85rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.case-ai-result-kicker {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.case-ai-result-title {
    display: block;
    color: #0f172a;
    font-size: .95rem;
}

.case-ai-body {
    padding: 1rem 1.15rem 1.15rem;
    color: #1e293b;
    font-size: .925rem;
    line-height: 1.6;
    background: #ffffff;
}

.case-ai-body .case-ai-h {
    margin: 1rem 0 .45rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 700;
}

.case-ai-body .case-ai-h:first-child {
    margin-top: 0;
}

.case-ai-body .case-ai-p {
    margin: 0 0 .75rem;
    color: #334155;
}

.case-ai-body .case-ai-ul,
.case-ai-body .case-ai-ol {
    margin: 0 0 .85rem;
    padding-left: 1.15rem;
    color: #334155;
}

.case-ai-body .case-ai-ul li,
.case-ai-body .case-ai-ol li {
    margin-bottom: .35rem;
}

.case-ai-body code {
    background: #f1f5f9;
    color: #9f1239;
    border-radius: .25rem;
    padding: .05rem .3rem;
    font-size: .85em;
}

.case-ai-body strong {
    color: #0f172a;
}

/* —— Chat estilo asistente (referencia Cursor) —— */
.case-ai-chat-modal {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
    background: #fafafa;
}

.case-ai-chat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid #e8e8e8;
}

.case-ai-chat-mark {
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111827;
    color: #fff;
    font-size: 1rem;
}

.case-ai-chat-top-title {
    font-weight: 650;
    font-size: .95rem;
    color: #111827;
    line-height: 1.2;
}

.case-ai-chat-top-sub {
    font-size: .75rem;
    color: #6b7280;
}

.case-ai-chat-thread {
    height: min(58vh, 460px);
    overflow-y: auto;
    padding: 1.1rem 1.15rem 1.25rem;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.case-ai-chat-empty {
    margin: auto;
    width: 100%;
    max-width: 26rem;
}

.case-ai-chat-empty-card {
    text-align: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.35rem 1.1rem 1.15rem;
}

.case-ai-chat-empty-card i {
    font-size: 1.6rem;
    color: #111827;
    display: block;
    margin-bottom: .55rem;
}

.case-ai-chat-empty-card strong {
    display: block;
    color: #111827;
    margin-bottom: .35rem;
}

.case-ai-chat-empty-card p {
    margin: 0 0 .9rem;
    color: #6b7280;
    font-size: .875rem;
    line-height: 1.45;
}

.case-ai-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
}

.case-ai-chip {
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
    border-radius: 999px;
    padding: .35rem .7rem;
    font-size: .78rem;
    line-height: 1.2;
    transition: background .15s ease, border-color .15s ease;
}

.case-ai-chip:hover {
    background: #fff;
    border-color: #c4c4c4;
    color: #111827;
}

.cai-msg {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-width: 100%;
    animation: cai-fade .18s ease-out;
}

@keyframes cai-fade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.cai-msg--user {
    align-items: flex-end;
}

.cai-msg--assistant {
    align-items: stretch;
}

.cai-msg__meta {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 0 .15rem;
}

.cai-msg--user .cai-msg__body {
    max-width: min(85%, 28rem);
    background: #111827;
    color: #f9fafb;
    border-radius: 1.1rem 1.1rem .35rem 1.1rem;
    padding: .7rem .95rem;
    font-size: .925rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

.cai-msg--assistant .cai-msg__body {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    padding: .95rem 1.05rem;
    font-size: .925rem;
    line-height: 1.6;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.cai-msg--assistant .cai-msg__body .case-ai-h {
    margin: .85rem 0 .4rem;
    padding: 0;
    border: 0;
    color: #111827;
    font-size: .88rem;
    font-weight: 700;
}

.cai-msg--assistant .cai-msg__body .case-ai-h:first-child {
    margin-top: 0;
}

.cai-msg--assistant .cai-msg__body .case-ai-p {
    margin: 0 0 .65rem;
    color: #374151;
}

.cai-msg--assistant .cai-msg__body .case-ai-ul,
.cai-msg--assistant .cai-msg__body .case-ai-ol {
    margin: 0 0 .7rem;
    padding-left: 1.15rem;
    color: #374151;
}

.cai-msg--assistant .cai-msg__body li {
    margin-bottom: .3rem;
}

.cai-msg__typing {
    display: inline-flex !important;
    gap: .3rem;
    align-items: center;
    width: fit-content !important;
    padding: .85rem 1rem !important;
}

.cai-msg__typing span {
    width: .38rem;
    height: .38rem;
    border-radius: 50%;
    background: #9ca3af;
    animation: ai-chat-bounce 1s infinite ease-in-out;
}

.cai-msg__typing span:nth-child(2) { animation-delay: .15s; }
.cai-msg__typing span:nth-child(3) { animation-delay: .3s; }

.case-ai-chat-composer {
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    padding: .85rem 1rem 1rem;
}

.case-ai-chat-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: .55rem;
    border: 1px solid #d1d5db;
    border-radius: 1rem;
    background: #f9fafb;
    padding: .55rem .55rem .55rem .85rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.case-ai-chat-input-wrap:focus-within {
    border-color: #9ca3af;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06);
}

.case-ai-chat-input-wrap textarea {
    border: 0;
    background: transparent;
    box-shadow: none;
    resize: none;
    flex: 1;
    min-height: 2.5rem;
    max-height: 7rem;
    padding: .35rem 0;
    font-size: .925rem;
    line-height: 1.4;
    color: #111827;
}

.case-ai-chat-input-wrap textarea:focus {
    outline: none;
    box-shadow: none;
}

.case-ai-chat-send {
    width: 2.15rem;
    height: 2.15rem;
    border: 0;
    border-radius: .7rem;
    background: var(--sgl-blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.case-ai-chat-send:hover {
    background: var(--sgl-blue-dark);
}

.case-ai-chat-send:disabled {
    opacity: .55;
}

.case-ai-chat-hint {
    margin-top: .45rem;
    font-size: .72rem;
    color: #9ca3af;
    padding-left: .15rem;
}

@keyframes ai-chat-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: .45; }
    40% { transform: translateY(-4px); opacity: 1; }
}

@media (max-width: 767.98px) {
    .case-activity-header {
        flex-direction: column;
        align-items: stretch;
    }

    .case-activity-actions {
        justify-content: flex-end;
        border-top: 1px solid #e2e8f0;
        padding-top: .5rem;
    }

    .detail-tabs .nav-link {
        padding: .65rem .7rem;
        font-size: .85rem;
    }
}

.doc-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.doc-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem .8rem;
    border: 1px solid #e2e8f0;
    border-radius: .55rem;
    background: #fff;
}

.doc-item:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.doc-item-main {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-width: 0;
    flex: 1;
}

.doc-item-num {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .2rem;
    border-radius: 999px;
    background: #e8eef6;
    color: #475569;
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.doc-item-icon {
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.doc-item-icon-pdf {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}

.doc-item-icon-img {
    background: rgba(32, 107, 196, 0.1);
    color: #206bc4;
}

.doc-item-icon-file {
    background: #f1f5f9;
    color: #64748b;
}

.doc-item-text {
    min-width: 0;
}

.doc-item-title {
    font-weight: 600;
    font-size: .875rem;
    color: #1e293b;
    line-height: 1.3;
    word-break: break-word;
}

.doc-item-comment {
    font-size: .8rem;
    color: #475569;
    margin-top: .12rem;
    line-height: 1.35;
}

.doc-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .35rem;
    margin-top: .2rem;
    font-size: .72rem;
    color: #94a3b8;
}

.doc-item-actions {
    display: flex;
    flex-shrink: 0;
    gap: .35rem;
    align-items: center;
}

@media (max-width: 575.98px) {
    .doc-item {
        flex-direction: column;
        align-items: stretch;
    }

    .doc-item-actions {
        justify-content: flex-end;
    }
}

.doc-preview-frame {
    width: 100%;
    height: 75vh;
    border: 0;
    background: #0f172a;
}

.doc-preview-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    max-height: 75vh;
    background: #0f172a;
    overflow: auto;
    padding: 1rem;
}

.doc-preview-image-wrap img {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
}

.doc-preview-empty {
    padding: 3rem 1.5rem;
    text-align: center;
}

.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    flex-wrap: wrap;
    padding: .85rem 1.25rem;
    border-top: 1px solid var(--card-border);
    background: #fafbfc;
}

.table-pagination-info {
    font-size: .8rem;
    color: var(--text-muted);
}

.table-pagination .pagination {
    gap: .2rem;
}

.table-pagination .page-link {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .45rem;
    border-radius: .4rem;
    font-size: .8rem;
    font-weight: 500;
    color: #334155;
    border: 1px solid transparent;
    background: transparent;
}

.table-pagination .page-link:hover {
    background: var(--sgl-blue-soft);
    color: var(--sgl-blue);
}

.table-pagination .page-item.active .page-link {
    background: var(--sgl-blue);
    border-color: var(--sgl-blue);
    color: #fff;
}

.table-pagination .page-item.disabled .page-link {
    color: #94a3b8;
    background: transparent;
}

@media (max-width: 575.98px) {
    .table-pagination {
        justify-content: center;
        text-align: center;
    }
}