:root {

            --bg: #f7f8fb;

            --card: #ffffff;

            --mut: #52627a;

            --txt: #0b1220;

            --line: #dbe2ef;

            --acc: #2563eb;

            --bad: #e11d48;

            --ok: #059669;

            --warn: #d97706;

            --color-gesa: #73c78f;

            --color-gesa-hover: rgba(115, 199, 143, 0.34);

            --color-new: #f59f0b;

            --color-new-hover: #fcd34de1;

            --color-superseded: #ef4444;

            --color-superseded-hover: #fca5a5;

            --color-normalizado: #3b82f6;

            --color-normalizado-hover: #93c5fde8;

        }



        * {

            box-sizing: border-box;

        }



        html,

        body {

            height: 100%;

            margin: 0;

            font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;

            background: var(--bg);

            color: var(--txt);

            display: flex;

            flex-direction: column;

            min-height: 100%;

            overflow: hidden;

        }



        a {

            color: var(--acc);

            text-decoration: none;

        }



        a:hover {

            text-decoration: underline;

        }



        .topbar {

            background: var(--card);

            border-bottom: 1px solid var(--line);

            padding: 12px 20px;

        }



        .nav {

            display: flex;

            gap: 16px;

            align-items: center;

        }



        .pill {

            padding: 8px 16px;

            border-radius: 20px;

            font-size: 14px;

            font-weight: 600;

        }



        .pill.active {

            background: var(--acc);

            color: white;

        }



        .qa-checks-topbar-btn {

            display: flex;

            align-items: center;

            gap: 6px;

            padding: 6px 12px;

            border: 1px solid #cbd5e1;

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            color: white;

            font-size: 12px;

            font-weight: 700;

            border-radius: 20px;

            cursor: pointer;

            transition: all 0.2s ease;

            white-space: nowrap;

        }



        .qa-checks-topbar-btn:hover {

            background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);

            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);

        }



        .qa-checks-badge {

            display: inline-block;

            padding: 0 6px;

            background: rgba(255, 255, 255, 0.3);

            border-radius: 10px;

            font-size: 10px;

            font-weight: 700;

        }



        .content {

            flex: 1;

            padding: 20px;

            overflow: hidden;

            min-height: 0;

            display: flex;

            flex-direction: column;

        }



        /* Layout 2 columnas: tabla + splitter + PDF */

        :root {

            --qa-right-width: 40%;

        }



        .main {

            height: 100%;

            display: grid;

            grid-template-columns: minmax(0, 1fr) 8px minmax(400px, var(--qa-right-width));

            gap: 0;

            min-height: 0;

        }



        .qa-splitter {

            width: 8px;

            cursor: col-resize;

            background: transparent;

            position: relative;

            z-index: 10;

            transition: background 0.15s;

            flex-shrink: 0;

        }



        .qa-splitter::after {

            content: '';

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            width: 4px;

            height: 40px;

            background: #cbd5e1;

            border-radius: 2px;

            transition: background 0.15s, height 0.15s;

        }



        .qa-splitter:hover::after,

        body.qa-resizing .qa-splitter::after {

            background: #94a3b8;

            height: 60px;

        }



        body.qa-resizing {

            cursor: col-resize;

            user-select: none;

        }



        @media (max-width: 1200px) {

            .main {

                grid-template-columns: 1fr;

            }



            .qa-splitter {

                display: none;

            }

        }



        .card {

            background: var(--card);

            border-radius: 12px;

            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

            overflow: hidden;

            display: flex;

            flex-direction: column;

            min-height: 0;

            height: 100%;

        }



        /* Visor PDF (columna derecha) */

        .pdfbox {

            height: 100%;

            display: flex;

            flex-direction: column;

            overflow: hidden;

            min-height: 0;

        }



        .pdf-tabs {

            display: flex;

            gap: 6px;

            padding: 10px 10px 0;

            border-bottom: 1px solid var(--line);

            background: #f8fafc;

        }



        .pdf-tab-btn {

            appearance: none;

            border: 1px solid #cbd5e1;

            border-bottom: none;

            background: #e2e8f0;

            color: #334155;

            border-top-left-radius: 10px;

            border-top-right-radius: 10px;

            height: 34px;

            padding: 0 14px;

            font-size: 12px;

            font-weight: 700;

            letter-spacing: 0.02em;

            cursor: pointer;

        }



        .pdf-tab-btn.is-active {

            background: #ffffff;

            color: #0f172a;

            border-color: #cbd5e1;

            transform: translateY(1px);

        }



        .pdf-tab-panel {

            flex: 1;

            min-height: 0;

            display: none;

            flex-direction: column;

            overflow: hidden;

        }



        .pdf-tab-panel.is-active {

            display: flex;

        }



        .pdfbar {

            padding: 10px;

            border-bottom: 1px solid var(--line);

            background: rgba(247, 248, 251, 0.95);

            display: flex;

            gap: 8px;

            align-items: center;

            flex-wrap: wrap;

        }



        .pdfbar .sp {

            flex: 1
        }



        .pdfmeta {

            font-size: 12px;

            color: var(--mut)
        }



        .pdfmeta b {

            color: var(--txt)
        }



        .pdf-zoom-wrap {

            margin-left: 6px;

        }



        .pdfviewer {

            background: #e5e7eb;

            padding: 12px;

            display: flex;

            justify-content: center;

            align-items: flex-start;

        }



        .pdfcanvas {

            background: #fff;

            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.18);

        }



        .qa-side-header {

            gap: 10px;

        }



        .qa-side-open-btn {

            height: 30px;

            border-radius: 8px;

            border: 1px solid #cbd5e1;

            background: #f8fafc;

            color: #0f172a;

            padding: 0 10px;

            font-size: 12px;

            font-weight: 700;

            cursor: pointer;

        }



        .qa-side-body {

            flex: 1;

            min-height: 0;

            overflow: auto;

            background: #f1f5f9;

            padding: 10px;

        }



        .qa-side-search {

            border: 1px solid #d6e0ee;

            border-radius: 12px;

            background: #ffffff;

            padding: 10px;

            margin-bottom: 10px;

        }



        .qa-side-search-row {

            display: grid;

            grid-template-columns: 1fr;

            gap: 8px;

            align-items: center;

        }



        .qa-side-search-row input {

            width: 100%;

            min-width: 0;

            height: 32px;

            border: 1px solid #d1d5db;

            border-radius: 8px;

            padding: 0 9px;

            font-size: 12px;

            color: #0f172a;

            background: #ffffff;

        }



        .qa-side-search-row input:focus {

            outline: none;

            border-color: var(--acc);

            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);

        }



        #qaSideSearchBtn {

            height: 32px;

            border-radius: 8px;

            border: 1px solid #2563eb;

            background: #2563eb;

            color: #ffffff;

            font-size: 12px;

            font-weight: 700;

            cursor: pointer;

            padding: 0 10px;

        }



        #qaSideSearchBtn:hover {

            filter: brightness(0.96);

        }



        .qa-side-search-status {

            margin: 8px 2px 0;

            min-height: 16px;

            font-size: 11px;

            color: #64748b;

        }



        .qa-side-search-status.ok {

            color: #166534;

        }



        .qa-side-search-status.error {

            color: #991b1b;

        }



        .qa-side-modal-form {

            border: 1px solid #d6e0ee;

            border-radius: 12px;

            background: #ffffff;

            padding: 10px;

            gap: 10px;

        }



        #qaSideRecordForm .qa-modal-top-split {

            grid-template-columns: minmax(0, 1fr);

        }



        .qa-side-grid-meta {

            grid-template-columns: repeat(3, minmax(0, 1fr));

        }



        .qa-side-grid-main {

            grid-template-columns: repeat(3, minmax(0, 1fr));

        }



        .tableWrap {

            flex: 1;

            min-height: 0;

            max-height: none;

            overflow: auto;

            border-top: 1px solid var(--line);

            border-bottom: 1px solid var(--line);

        }



        table {

            width: 100%;

            border-collapse: separate;

            border-spacing: 0;

            table-layout: fixed;

        }



        th,

        td {

            border-bottom: 1px solid var(--line);

            padding: 8px 12px;

            vertical-align: middle;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

        }



        thead th {

            position: sticky;

            top: 0;

            background: var(--card);

            color: var(--mut);

            font-weight: 600;

            font-size: 12px;

            border-bottom: 1px solid var(--line);

            box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);

            cursor: default;

            user-select: none;

        }



        thead th:hover {

            background: var(--bg);

        }



        thead th[data-sort] {

            position: relative;

        }



        thead th[data-sort]::after {

            content: none;

        }



        td {

            font-size: 13px;

        }



        #errorViewTable thead th {

            background: #f8fafc;

            font-size: 11px;

        }



        .error-check-col {

            min-width: 156px;

        }



        .error-check-cell {

            text-align: center;

            font-weight: 700;

            color: #475569;

            font-size: 12px;

        }



        .error-total-cell {

            text-align: center;

            font-size: 11px;

            font-weight: 700;

            color: #334155;

        }



        .error-check-cell.is-hit {

            background: rgba(225, 29, 72, 0.1);

            color: #be123c;

        }



        /* Líneas verticales separadoras */

        .separator-after {

            border-right: 2px solid #cbd5e1;

        }



        .separator-before {

            border-left: 2px solid #cbd5e1;

        }



        tbody tr:hover {

            transition: all 0.2s ease;

        }



        tr.virtual-spacer:hover {

            background: transparent;

        }



        tr.virtual-spacer td {

            padding: 0 !important;

            border: 0 !important;

        }



        tbody tr.row-selected {

            outline: 2px solid var(--acc);

            outline-offset: -2px;

            background: rgba(37, 99, 235, 0.08);

        }



        tbody tr.row-save-failed {

            outline: 2px solid #ef4444;

            outline-offset: -2px;

            background: rgba(239, 68, 68, 0.08);

        }



        /* Estilos para celdas coloreadas */

        td.cell-gesa {

            background-color: rgba(115, 199, 143, 0.2);

        }



        td.cell-gesa:hover {

            background-color: var(--color-gesa-hover);

            box-shadow: inset 0 0 8px rgba(115, 199, 143, 0.16);

        }



        td.cell-new {

            background-color: rgba(245, 159, 11, 0.548);

        }



        td.cell-new:hover {

            background-color: var(--color-new-hover);

            box-shadow: inset 0 0 8px rgba(245, 159, 11, 0.2);

        }



        td.cell-superseded {

            background-color: rgba(239, 68, 68, 0.651);

        }



        td.cell-superseded:hover {

            background-color: var(--color-superseded-hover);

            box-shadow: inset 0 0 8px rgba(239, 68, 68, 0.2);

        }



        td.cell-error-field {

            background-image: linear-gradient(0deg, rgba(225, 29, 72, 0.12), rgba(225, 29, 72, 0.12));

            box-shadow: inset 0 -2px 0 rgba(190, 24, 93, 0.85);

        }



        td.cell-error-field:hover {

            background-image: linear-gradient(0deg, rgba(225, 29, 72, 0.18), rgba(225, 29, 72, 0.18));

        }



        /* Estilos para redimensionamiento de columnas */

        thead th {

            position: relative;

            user-select: none;

            padding-right: 8px;

        }



        thead th::before {

            content: '';

            position: absolute;

            right: 0;

            top: 0;

            height: 100%;

            width: 6px;

            cursor: col-resize;

            background: transparent;

        }



        thead th.resizing {

            user-select: none;

            opacity: 0.8;

        }



        td.cell-normalizado {

            background-color: rgba(59, 130, 246, 0.451);

        }



        td.cell-normalizado:hover {

            background-color: var(--color-normalizado-hover);

            box-shadow: inset 0 0 8px rgba(59, 130, 246, 0.2);

        }



        .tag {

            display: inline-block;

            border: 1px solid var(--line);

            padding: 2px 6px;

            border-radius: 12px;

            font-size: 11px;

            color: var(--mut);

        }



        .tag.ok {

            border-color: rgba(5, 150, 105, 0.35);

            color: #047857;

        }



        .tag.bad {

            border-color: rgba(225, 29, 72, 0.35);

            color: #be123c;

        }



        .tag.warn {

            border-color: rgba(217, 119, 6, 0.35);

            color: #b45309;

        }



        .loading {

            text-align: center;

            padding: 40px;

            color: var(--mut);

        }



        .error {

            text-align: center;

            padding: 40px;

            color: var(--bad);

        }



        .stats {

            display: flex;

            gap: 16px;

            align-items: center;

            margin-bottom: 16px;

            flex-wrap: wrap;

        }



        .qa-stats-row {

            width: 100%;

            display: grid;

            grid-template-columns: repeat(5, minmax(0, 1fr));

            gap: 10px;

        }



        .qa-stat-card {

            display: flex;

            flex-direction: column;

            gap: 4px;

            padding: 10px 12px;

            border-radius: 12px;

            border: 1px solid #d7dee7;

            background: linear-gradient(180deg, #ffffff, #f5f8fb);

            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);

            min-width: 0;

        }



        .qa-stat-card.is-ok {

            border-color: #b7e0c8;

            background: linear-gradient(180deg, #f6fffa, #e8f8ef);

        }



        .qa-stat-card.is-copy {

            border-color: #f1c849;

            background: linear-gradient(180deg, #fff8de, #ffeaa3);

        }



        .qa-stat-card.is-review {

            border-color: #efd39a;

            background: linear-gradient(180deg, #fffaf0, #fff1d7);

        }



        .qa-stat-card.is-ko {

            border-color: #f0beb7;

            background: linear-gradient(180deg, #fff7f5, #ffe9e6);

        }



        .qa-stat-label {

            font-size: 11px;

            font-weight: 800;

            letter-spacing: 0.03em;

            text-transform: uppercase;

            color: #5e6f84;

        }



        .qa-stat-inline-total,

        .qa-stat-total-row {

            display: inline-flex;

            align-items: baseline;

            gap: 6px;

            flex-wrap: wrap;

        }



        .qa-stat-inline-total strong,

        .qa-stat-total-row strong {

            font-size: 22px;

            line-height: 1;

            color: #122235;

            font-weight: 800;

        }



        .qa-stat-inline-separator {

            font-size: 16px;

            line-height: 1.1;

            font-weight: 600;

            color: #5e6f84;

        }



        .qa-stat-inline-unique {

            font-size: 15px;

            line-height: 1.1;

            font-weight: 500;

            color: #5f6f88;

            font-family: 'IBM Plex Mono', Consolas, monospace;

        }



        .stat {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            border: 1px solid #d7dee7;

            background: #ffffff;

            border-radius: 999px;

            padding: 7px 12px;

            font-size: 12px;

            font-weight: 700;

            color: #122235;

            line-height: 1.2;

        }



        .stat b {

            color: var(--txt);

            font-family: 'IBM Plex Mono', Consolas, monospace;

            font-weight: 700;

        }



        .stat.ok b {

            color: var(--ok);

        }



        .stat.warn b {

            color: var(--warn);

        }



        .stat.bad b {

            color: var(--bad);

        }



        .stat-filter {

            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;

        }



        .stat-source {

            margin-left: auto;

            color: #5e6f84;

            font-size: 11px;

            font-weight: 600;

            max-width: 360px;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

        }



        @media (max-width: 1450px) {

            .qa-stats-row {

                grid-template-columns: repeat(3, minmax(0, 1fr));

            }

        }



        @media (max-width: 980px) {

            .qa-stats-row {

                grid-template-columns: 1fr;

            }



            .qa-stat-inline-total strong,

            .qa-stat-total-row strong {

                font-size: 28px;

            }

        }



        .pagination {

            display: flex;

            justify-content: center;

            align-items: center;

            gap: 16px;

            padding: 16px;

            background: var(--card);

            border-top: 1px solid var(--line);

        }



        .pagination button {

            padding: 8px 16px;

            border: 1px solid var(--line);

            background: var(--card);

            color: var(--txt);

            border-radius: 6px;

            cursor: pointer;

            font-size: 14px;

        }



        .pagination button:hover:not(:disabled) {

            background: var(--bg);

        }



        .pagination button:disabled {

            opacity: 0.5;

            cursor: not-allowed;

        }



        .pagination #pageInfo {

            font-size: 14px;

            color: var(--mut);

        }



        .filter-row th {

            padding: 5px 6px;

            background: transparent;

            border-bottom: 1px solid #e2e8f0;

        }



        .filter-input {

            width: 100%;

            padding: 3px 8px;

            border: 1px solid #dbe2ea;

            border-radius: 999px;

            font-size: 11px;

            background: #f8fafc;

            color: var(--txt);

        }



        .filter-input:focus {

            outline: none;

            border-color: var(--acc);

            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);

        }



        .filter-select {

            width: 100%;

            padding: 3px 8px;

            border: 1px solid #dbe2ea;

            border-radius: 999px;

            font-size: 11px;

            background: #f8fafc;

            color: var(--txt);

        }



        .filter-select:focus {

            outline: none;

            border-color: var(--acc);

            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);

        }



        .filter-select.compact-filter {

            font-size: 0;

            color: transparent;

            text-shadow: none;

        }



        .filter-select.compact-filter option {

            font-size: 11px;

            color: var(--txt);

        }



        .clear-filters {

            margin: 0 0 12px;

            padding: 10px;

            border: 1px solid var(--line);

            border-radius: 10px;

            background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

        }



        .toolbar-primary,

        .toolbar-secondary {

            display: flex;

            gap: 6px;

            flex-wrap: nowrap;

            align-items: center;

        }



        .toolbar-primary {

            align-items: center;

            width: 100%;

            gap: 12px;

        }



        .toolbar-pane {

            display: flex;

            align-items: center;

            gap: 6px;

            padding: 6px 8px;

            border: 1px solid #dbe2ea;

            border-radius: 10px;

            background: #ffffff;

            min-height: 42px;

        }



        .toolbar-pane-book {

            flex: 1 1 100%;

            display: flex;

            flex-direction: row;

            gap: 12px;

            align-items: center;

            flex-wrap: nowrap;

            width: 100%;

            border: none;

            padding: 0;

            background: transparent;

            min-height: auto;

            overflow-x: auto;

            overflow-y: hidden;

        }



        .book-pane-left,

        .book-pane-right {

            display: flex;

            flex-direction: row;

            gap: 8px;

            align-items: center;

            flex-wrap: nowrap;

            flex-shrink: 0;

        }



        .book-top-row {

            display: flex;

            gap: 8px;

            align-items: center;

            flex-wrap: nowrap;

        }



        .book-pane-actions {

            display: flex;

            gap: 8px;

            align-items: center;

            flex-wrap: nowrap;

            margin-top: 0;

        }



        .book-pane-right-top {

            display: flex;

            gap: 8px;

            align-items: center;

            flex-shrink: 0;

        }



        .book-pane-right-bottom {

            display: flex;

            gap: 8px;

            align-items: center;

            flex-shrink: 0;

        }



        .book-main-select {

            min-width: 150px;

            max-width: 220px;

            height: 30px;

            font-size: 12px;

            font-weight: 700;

        }



        #sortBookPagePosBtn {

            text-align: left;

            padding-left: 10px;

        }



        .toolbar-pane-esq-images {

            flex: 2.4 1 520px;

            align-items: stretch;

            min-height: 148px;

        }



        .toolbar-pane-pos-preview {

            flex: 1.2 1 260px;

            align-items: stretch;

            min-height: 148px;

        }



        .toolbar-pane-pos-actions {

            flex: 0 0 132px;

            justify-content: stretch;

            align-items: stretch;

            flex-direction: column;

            gap: 6px;

        }



        /* Modal Overlay */

        .qa-checks-modal-overlay {

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: rgba(0, 0, 0, 0.5);

            display: flex;

            align-items: center;

            justify-content: center;

            z-index: 10000;

            padding: 20px;

        }



        .qa-checks-modal-dialog {

            background: white;

            border-radius: 12px;

            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

            max-width: min(1120px, 96vw);

            width: 100%;

            max-height: 92vh;

            display: flex;

            flex-direction: column;

            overflow: hidden;

        }



        .qa-checks-modal-header {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 24px;

            border-bottom: 1px solid #e2e8f0;

        }



        .qa-checks-modal-header h3 {

            margin: 0;

            font-size: 18px;

            font-weight: 700;

            color: #0f172a;

        }



        .qa-checks-modal-close {

            background: none;

            border: none;

            font-size: 28px;

            color: #64748b;

            cursor: pointer;

            padding: 0;

            width: 32px;

            height: 32px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 6px;

            transition: all 0.2s ease;

        }



        .qa-checks-modal-close:hover {

            background: #f1f5f9;

            color: #0f172a;

        }



        .qa-checks-modal-body {

            padding: 24px;

            overflow-y: auto;

            flex: 1;

        }



        .qa-checks-modal-desc-wrap {

            margin-bottom: 14px;

        }



        .qa-checks-modal-desc {

            margin: 0 0 16px 0;

            font-size: 13px;

            color: #475569;

            line-height: 1.5;

        }



        .qa-checks-modal-list {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

            gap: 12px;

        }



        .qa-checks-modal-list .qa-check-item {

            display: flex;

            align-items: flex-start;

            gap: 8px;

            padding: 12px;

            border: 1px solid #e2e8f0;

            border-radius: 8px;

            background: #f8fafc;

            transition: all 0.2s ease;

            font-size: 13px;

            color: #1e293b;

            white-space: normal;

            overflow: visible;

            text-overflow: clip;

        }



        .qa-checks-modal-list .qa-check-item:hover {

            background: #f1f5f9;

            border-color: #cbd5e1;

        }



        .qa-checks-modal-list .qa-check-item input[type="checkbox"] {

            margin-top: 2px;

            cursor: pointer;

            flex-shrink: 0;

        }



        .qa-checks-modal-footer {

            display: flex;

            gap: 12px;

            padding: 16px 24px;

            border-top: 1px solid #e2e8f0;

            background: #f8fafc;

            justify-content: flex-end;

            flex-wrap: wrap;

        }



        .qa-checks-modal-footer-btn {

            height: 36px;

            padding: 0 16px;

            border: 1px solid #cbd5e1;

            background: white;

            color: #0f172a;

            font-size: 13px;

            font-weight: 700;

            border-radius: 8px;

            cursor: pointer;

            transition: all 0.2s ease;

        }



        .qa-checks-modal-footer-btn:hover {

            background: #f1f5f9;

            border-color: #94a3b8;

        }



        .qa-checks-modal-footer-btn-secondary {

            background: #f1f5f9;

        }



        .qa-checks-modal-footer-btn-primary {

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            color: white;

            border: none;

        }



        .qa-checks-modal-footer-btn-primary:hover {

            background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);

            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);

        }



        /* Estadísticas en modal */

        .qa-checks-stats-area {

            margin-top: 20px;

            padding-top: 16px;

            border-top: 1px solid #e2e8f0;

        }



        .qa-checks-stats-area h4 {

            margin: 0 0 12px 0;

            font-size: 13px;

            font-weight: 700;

            color: #0f172a;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 10px;

        }



        .qa-checks-stats-scope {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            border: 1px solid #cbd5e1;

            border-radius: 999px;

            padding: 3px 10px;

            background: #eef2ff;

            color: #334155;

            font-size: 11px;

            font-weight: 700;

        }



        .qa-checks-stats-grid {

            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 12px;

        }



        .qa-checks-stat-item {

            background: #f1f5f9;

            padding: 12px;

            border-radius: 8px;

            border: 1px solid #e2e8f0;

            display: flex;

            flex-direction: column;

            gap: 4px;

        }



        .qa-checks-stat-label {

            font-size: 11px;

            font-weight: 600;

            color: #64748b;

            text-transform: uppercase;

            letter-spacing: 0.5px;

        }



        .qa-checks-stat-value {

            font-size: 18px;

            font-weight: 700;

            color: #0f172a;

        }



        .qa-checks-stats-breakdown {

            margin-top: 14px;

            padding: 12px;

            border: 1px solid #e2e8f0;

            border-radius: 10px;

            background: #f8fafc;

        }



        .qa-checks-stats-breakdown-head {

            margin-bottom: 10px;

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 0.05em;

            text-transform: uppercase;

            color: #475569;

        }



        .qa-checks-stat-codes-list {

            list-style: none;

            margin: 0;

            padding: 0;

            display: flex;

            flex-direction: column;

            gap: 8px;

        }



        .qa-checks-stat-code-item {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 10px;

            padding: 8px 10px;

            border-radius: 8px;

            background: #ffffff;

            border: 1px solid #e2e8f0;

        }



        .qa-checks-stat-code-label {

            font-size: 12px;

            font-weight: 600;

            color: #0f172a;

            line-height: 1.35;

        }



        .qa-checks-stat-code-count {

            min-width: 34px;

            text-align: center;

            padding: 2px 8px;

            border-radius: 999px;

            background: #e2e8f0;

            color: #1e293b;

            font-size: 11px;

            font-weight: 800;

        }



        .qa-checks-stat-codes-empty {

            padding: 8px 10px;

            border-radius: 8px;

            border: 1px dashed #cbd5e1;

            background: #ffffff;

            color: #64748b;

            font-size: 12px;

            font-weight: 600;

        }



        .qa-checks-found-list-wrap {

            margin-top: 14px;

            padding: 12px;

            border: 1px solid #e2e8f0;

            border-radius: 10px;

            background: #f8fafc;

        }



        .qa-checks-found-list-head {

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-bottom: 8px;

        }



        .qa-checks-found-count {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-width: 30px;

            padding: 2px 8px;

            border-radius: 999px;

            background: #e2e8f0;

            color: #1e293b;

            font-size: 11px;

            font-weight: 800;

        }



        .qa-checks-found-list-table-wrap {

            max-height: 250px;

            overflow: auto;

            border: 1px solid #dbe2ef;

            border-radius: 8px;

            background: #ffffff;

        }



        .qa-checks-found-list-table {

            width: 100%;

            border-collapse: collapse;

            table-layout: auto;

        }



        .qa-checks-found-list-table th,

        .qa-checks-found-list-table td {

            font-size: 12px;

            padding: 6px 8px;

            border-bottom: 1px solid #eef2f7;

            text-align: left;

            vertical-align: top;

            white-space: nowrap;

        }



        .qa-checks-found-list-table th {

            position: sticky;

            top: 0;

            z-index: 1;

            background: #f1f5f9;

            color: #334155;

            font-weight: 700;

        }



        .qa-checks-found-list-table td:last-child {

            white-space: normal;

            min-width: 210px;

        }



        .qa-checks-found-empty {

            color: #64748b;

            font-weight: 600;

            text-align: center;

        }



        /* Progreso en modal */

        .qa-checks-progress-area {

            margin-top: 20px;

            padding: 16px;

            background: #f0f4ff;

            border: 1px solid #d4e0ff;

            border-radius: 8px;

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 12px;

            text-align: center;

        }



        .qa-checks-progress-text {

            margin: 0;

            font-size: 13px;

            color: #1e293b;

            font-weight: 600;

        }



        .qa-checks-progress-spinner {

            width: 24px;

            height: 24px;

            border: 3px solid #e2e8f0;

            border-top: 3px solid #667eea;

            border-radius: 50%;

            animation: spin 0.8s linear infinite;

        }



        @keyframes spin {

            to {

                transform: rotate(360deg);

            }

        }



        .qa-check-item {

            display: flex;

            align-items: center;

            gap: 6px;

            min-width: 0;

            font-size: 13px;

            color: #0f172a;

            white-space: normal;

            overflow: visible;

            text-overflow: clip;

            line-height: 1.35;

        }



        .qa-check-item input[type="checkbox"] {

            margin: 0;

        }



        @media (max-width: 900px) {

            .qa-checks-modal-overlay {

                padding: 10px;

            }



            .qa-checks-modal-dialog {

                max-width: 100%;

                max-height: 95vh;

            }



            .qa-checks-modal-header,

            .qa-checks-modal-body,

            .qa-checks-modal-footer {

                padding-left: 14px;

                padding-right: 14px;

            }



            .qa-checks-modal-list {

                grid-template-columns: 1fr;

            }



            .qa-checks-modal-footer-btn {

                width: 100%;

            }

        }



        .toolbar-pane-pos-actions .bulk-edit {

            margin-top: 2px;

            width: 100%;

            justify-content: center;

        }



        .toolbar-pane-pos-actions .bulk-select {

            width: 100%;

            min-width: 0;

            height: 30px;

        }



        .toolbar-pane-pos-actions .bulk-quick-actions {

            width: 100%;

            justify-content: center;

            flex-wrap: wrap;

            gap: 4px;

        }



        .pos-top-inline {

            display: flex;

            flex-direction: column;

            gap: 4px;

            width: 100%;

            min-width: 0;

        }



        .pos-top-meta {

            font-size: 10px;

            color: var(--mut);

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            display: none;

        }



        .pos-top-inline .schemas-images-strip {

            min-height: 130px;

            height: 100%;

            align-items: stretch;

        }



        .pos-top-thumb {

            width: 100%;

            max-width: none;

            height: 100%;

        }



        .pos-top-thumb img {

            width: 100%;

            height: 100%;

            min-height: 130px;

            border-radius: 8px;

            object-fit: contain;

        }



        .toolbar-pane .schemas-inline,

        .toolbar-pane .schemas-images-inline {

            border: none;

            background: transparent;

            padding: 0;

            min-height: 0;

            max-width: none;

            width: 100%;

        }



        .toolbar-secondary {

            margin-top: 6px;

        }



        .toolbar-pane-pos-actions button {

            width: 100%;

        }



        .clear-filters button {

            height: 30px;

            padding: 0 10px;

            border: 1px solid #d7dee7;

            background: var(--card);

            color: var(--txt);

            border-radius: 999px;

            cursor: pointer;

            font-size: 11px;

            font-weight: 600;

        }



        .clear-filters button:hover {

            background: var(--bg);

        }



        #pageFilterSelect.page-main-select {

            width: 180px;

            min-width: 180px;

            max-width: 180px;

            height: 30px;

            font-size: 12px;

            font-weight: 700;

        }



        .page-nav-btn {

            width: 30px;

            height: 30px;

            padding: 6px 0;

            font-size: 14px;

            line-height: 1;

            font-weight: 700;

        }



        #bookFilterSelect.book-main-select {

            grid-column: 2;

            width: 180px;

            min-width: 180px;

            max-width: 180px;

            height: 30px;

            font-size: 12px;

            font-weight: 700;

        }



        #prevBookPageBtn {

            grid-column: 1;

        }



        #pageFilterSelect.page-main-select {

            grid-column: 2;

        }



        #nextBookPageBtn {

            grid-column: 3;

        }



        .schemas-inline {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            max-width: 420px;

            min-height: 28px;

            padding: 4px 8px;

            border: 1px solid var(--line);

            border-radius: 8px;

            background: var(--card);

            font-size: 11px;

            color: var(--mut);

            line-height: 1.2;

        }



        .schemas-inline-label {

            font-weight: 700;

            color: var(--txt);

            white-space: nowrap;

        }



        .schemas-inline-list {

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

        }



        .schemas-images-inline {

            display: flex;

            align-items: center;

            gap: 8px;

            max-width: min(72vw, 900px);

            min-height: 44px;

            padding: 4px 8px;

            border: 1px solid var(--line);

            border-radius: 8px;

            background: var(--card);

        }



        .schemas-images-strip {

            display: flex;

            gap: 6px;

            align-items: center;

            overflow-x: auto;

            max-width: 100%;

            padding-bottom: 2px;

        }



        .schema-thumb {

            width: 140px;

            flex: 0 0 auto;

            text-decoration: none;

            color: inherit;

        }



        .schema-thumb img {

            width: 140px;

            height: 92px;

            object-fit: contain;

            border: 1px solid var(--line);

            border-radius: 6px;

            background: #fff;

            display: block;

        }



        .schema-thumb.large {

            width: 170px;

        }



        .schema-thumb.large img {

            width: 170px;

            height: 112px;

            border-radius: 10px;

        }



        .schemas-images-empty {

            font-size: 11px;

            color: var(--mut);

            white-space: nowrap;

        }



        .toolbar-pane-esq-images .schemas-images-inline,

        .toolbar-pane-pos-preview .pos-top-inline {

            height: 100%;

        }



        .toolbar-pane-esq-images .schemas-images-strip,

        .toolbar-pane-pos-preview .schemas-images-strip {

            align-items: stretch;

            height: 100%;

        }



        .toolbar-pane-esq-images .schema-thumb.large,

        .toolbar-pane-pos-preview .schema-thumb {

            height: 100%;

        }



        .toolbar-pane-esq-images .schema-thumb.large img,

        .toolbar-pane-pos-preview .schema-thumb img {

            width: 100%;

            height: 100%;

            min-height: 130px;

        }



        .toolbar-pane-esq-images .schemas-images-empty,

        .toolbar-pane-pos-preview .schemas-images-empty {

            display: none;

        }



        @media (max-width: 980px) {

            .schemas-images-inline {

                max-width: 100%;

                width: 100%;

            }



            .toolbar-pane {

                flex: 1 1 100%;

            }



            .toolbar-pane-book {

                grid-template-columns: 1fr;

            }



            #bookFilterSelect.book-main-select,

            #pageFilterSelect.page-main-select {

                width: 100%;

                min-width: 0;

                max-width: 100%;

            }



            .pos-top-thumb {

                width: 132px;

            }



            .pos-top-thumb img {

                width: 100%;

                height: 88px;

            }



            .toolbar-pane-pos-actions {

                flex: 1 1 100%;

            }



            .selected-pos-panel .schema-thumb {

                width: 132px;

            }



            .selected-pos-panel .schema-thumb img {

                width: 132px;

                height: 88px;

            }

        }



        .selected-pos-panel {

            display: none;

            margin-top: 10px;

            padding: 10px;

            border: 1px solid var(--line);

            border-radius: 10px;

            background: var(--card);

        }



        .selected-pos-panel .schemas-images-strip {

            gap: 10px;

            padding-bottom: 4px;

        }



        .selected-pos-panel .schema-thumb {

            width: 180px;

        }



        .selected-pos-panel .schema-thumb img {

            width: 180px;

            height: 120px;

            border-radius: 10px;

            border-color: #cfd8e3;

        }



        .selected-pos-panel .schema-thumb span {

            font-size: 11px;

            margin-top: 4px;

        }



        .selected-pos-head {

            display: flex;

            gap: 10px;

            align-items: baseline;

            flex-wrap: wrap;

            margin-bottom: 8px;

        }



        .selected-pos-title {

            font-size: 12px;

            font-weight: 700;

            color: var(--txt);

        }



        .selected-pos-meta {

            font-size: 11px;

            color: var(--mut);

        }



        .qa-schemas-panel {

            gap: 12px;

            overflow: auto;

            padding: 10px;

        }



        .qa-schemas-section {

            margin: 0;

            padding: 10px;

            border: 1px solid var(--line);

            border-radius: 10px;

            background: var(--card);

        }



        .qa-schemas-section .schemas-images-inline {

            max-width: 100%;

            width: 100%;

            min-height: 132px;

        }



        .qa-schemas-section .schemas-images-strip {

            width: 100%;

            min-height: 240px;

            align-items: stretch;

        }



        .qa-schemas-section .schema-thumb.large {

            width: 240px;

        }



        .qa-schemas-section .schema-thumb.large img {

            width: 240px;

            height: 160px;

        }



        /* Make schema circle images much larger and full width */

        .qa-schemas-section #selectedPosStrip {

            min-height: 520px;

            gap: 12px;

            flex-wrap: wrap;

        }



        .qa-schemas-section #selectedPosStrip .schema-thumb {

            flex: 1;

            min-width: 300px;

        }



        .qa-schemas-section #selectedPosStrip .schema-thumb img {

            width: 100%;

            height: 460px;

            object-fit: contain;

        }



        .view-toggle-inline {

            display: inline-flex;

            align-items: center;

            gap: 6px;

        }



        .column-view-select {

            min-width: 132px;

            max-width: 160px;

            padding: 3px 6px;

            font-size: 11px;

            font-weight: 600;

        }



        .bulk-edit {

            display: none !important;

        }



        .bulk-select {

            min-width: 140px;

            padding: 4px 6px;

            border: 1px solid var(--line);

            border-radius: 4px;

            font-size: 12px;

            background: var(--card);

            color: var(--txt);

        }



        .bulk-select:focus {

            outline: none;

            border-color: var(--acc);

            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);

        }



        .bulk-quick-actions {

            display: inline-flex;

            gap: 6px;

            align-items: center;

        }



        .bulk-quick-btn {

            width: 24px;

            height: 24px;

            font-size: 12px;

        }



        .grouped-section {

            margin: 16px;

            border: 1px solid var(--line);

            border-radius: 10px;

            overflow: hidden;

            background: var(--card);

        }



        .grouped-header {

            padding: 10px 12px;

            border-bottom: 1px solid var(--line);

            display: flex;

            gap: 12px;

            align-items: center;

            flex-wrap: wrap;

            background: var(--bg);

            font-size: 12px;

            color: var(--mut);

        }



        .grouped-wrap {

            max-height: 320px;

            overflow: auto;

        }



        #groupedTable th,

        #groupedTable td {

            font-size: 12px;

        }



        #groupedTable td:nth-child(2),

        #groupedTable td:nth-child(3),

        #groupedTable td:nth-child(4) {

            text-align: center;

        }



        .grouped-details {

            font-size: 11px;

        }



        .grouped-details summary {

            cursor: pointer;

            color: var(--acc);

            font-weight: 600;

            user-select: none;

        }



        .grouped-details[open] summary {

            margin-bottom: 6px;

        }



        .grouped-list {

            margin: 0;

            padding-left: 16px;

            max-height: 220px;

            overflow: auto;

        }



        .grouped-list li {

            margin: 0 0 2px 0;

            line-height: 1.3;

        }



        .status-col {

            text-align: center;

            padding: 6px 4px;

        }



        .status-head {

            text-align: center;

            font-size: 11px;

        }



        .quick-col {

            text-align: center;

            padding: 4px 3px;

        }



        .quick-actions {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 4px;

        }



        .quick-action-btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            font-size: 10px;

            line-height: 1;

            width: 18px;

            height: 18px;

            padding: 0;

            border-radius: 999px;

            border: 1px solid var(--line);

            background: #f8fafc;

            color: #0f172a;

            font-weight: 700;

            cursor: pointer;

            white-space: nowrap;

        }



        .quick-action-btn:hover {

            filter: brightness(0.97);

        }



        .quick-action-btn.validate {

            border-color: rgba(34, 197, 94, 0.45);

            background: rgba(34, 197, 94, 0.16);

            color: #166534;

        }



        .quick-action-btn.import {

            border-color: rgba(37, 99, 235, 0.45);

            background: rgba(37, 99, 235, 0.16);

            color: #1e40af;

        }



        .quick-action-btn.review {

            border-color: rgba(234, 179, 8, 0.45);

            background: rgba(234, 179, 8, 0.18);

            color: #854d0e;

        }



        .quick-action-btn.discard {

            border-color: #fca5a5;

            background: #fee2e2;

            color: #991b1b;

        }



        .quick-action-btn.clear {

            border-color: #cbd5e1;

            background: #f1f5f9;

            color: #334155;

        }



        .quick-action-btn.white {

            border-color: #cbd5e1;

            background: #ffffff;

            color: #0f172a;

        }



        .quick-action-btn.edit {

            min-width: 28px;

            width: auto;

            border-radius: 999px;

            border-color: rgba(15, 23, 42, 0.25);

            background: rgba(15, 23, 42, 0.08);

            color: #0f172a;

            padding: 0 6px;

        }



        .status-icon {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            width: 18px;

            height: 18px;

            border-radius: 999px;

            font-size: 10px;

            font-weight: 700;

            border: 1px solid var(--line);

            line-height: 1;

        }



        .status-icon.yes {

            color: #166534;

            background: rgba(34, 197, 94, 0.16);

            border-color: rgba(34, 197, 94, 0.45);

        }



        .status-icon.no {

            color: #64748b;

            background: rgba(100, 116, 139, 0.12);

        }



        .status-icon.new {

            color: #92400e;

            background: rgba(245, 158, 11, 0.18);

            border-color: rgba(245, 158, 11, 0.45);

        }



        .status-icon.sup {

            color: #9f1239;

            background: rgba(225, 29, 72, 0.16);

            border-color: rgba(225, 29, 72, 0.45);

        }



        .status-icon.other {

            color: #1d4ed8;

            background: rgba(59, 130, 246, 0.15);

            border-color: rgba(59, 130, 246, 0.45);

        }



        .status-icon.error {

            color: #991b1b;

            background: transparent;

            border-color: transparent;

            font-size: 16px;

            width: auto;

            height: auto;

            padding: 0;

            font-weight: 700;

        }



        .status-icon.warning {

            color: rgba(180, 83, 9, 0.7);

            background: transparent;

            border-color: transparent;

            font-size: 14px;

            width: auto;

            height: auto;

            padding: 0;

            font-weight: 500;

            opacity: 1;

        }



        .status-icon.error-count {

            color: #ffffff;

            background: #dc2626;

            border-color: #b91c1c;

            min-width: 18px;

            width: auto;

            padding: 0 5px;

            font-size: 10px;

            font-weight: 800;

            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset;

            cursor: pointer;

        }



        /* Badges columna ESQ_POS (P): indican existencia del archivo en esquemas_pos_circulos/ */

        .badge-pos-ok,

        .badge-pos-general,

        .badge-pos-missing,

        .badge-pos-none,

        .badge-pos-empty {

            display: inline-flex;

            .badge-pos-general,
            align-items: center;

            justify-content: center;

            height: 18px;

            border-radius: 999px;

            font-size: 9px;

            font-weight: 800;

            line-height: 1;

            border: 1px solid transparent;

        }



        .badge-pos-ok {

            min-width: 28px;

            padding: 0 5px;

            color: #166534;

            background: rgba(34, 197, 94, 0.16);

            border-color: rgba(34, 197, 94, 0.45);

        }

        .badge-pos-general {

            min-width: 32px;

            padding: 0 6px;

            color: #1d4ed8;

            background: rgba(59, 130, 246, 0.14);

            border-color: rgba(59, 130, 246, 0.38);

            font-size: 9px;

        }


        .badge-pos-missing {

            min-width: 32px;

            padding: 0 5px;

            color: #9f1239;

            background: rgba(225, 29, 72, 0.16);

            border-color: rgba(225, 29, 72, 0.45);

        }



        .badge-pos-empty {

            min-width: 42px;

            padding: 0 6px;

            color: #9f1239;

            background: rgba(225, 29, 72, 0.14);

            border-color: rgba(225, 29, 72, 0.42);

            font-size: 9px;

        }



        .badge-pos-none {

            min-width: 32px;

            padding: 0 6px;

            color: #374151;

            background: rgba(107, 114, 128, 0.14);

            border-color: rgba(107, 114, 128, 0.35);

            font-size: 9px;

        }



        .revision-select {

            width: 100%;

            min-width: 0;

            padding: 2px 3px;

            border: 1px solid var(--line);

            border-radius: 4px;

            font-size: 10px;

            /* transparent para que el fondo del <td> sea visible en todos los navegadores */

            background: transparent;

            color: inherit;

        }



        /* PDF view compact overrides */

        .pdf-view .content {

            padding: 6px 12px 10px;

        }



        .pdf-view .clear-filters.modern-control-deck {

            margin: 6px 10px;

            padding: 8px;

            border-radius: 12px;

        }



        .pdf-view .toolbar-primary {

            gap: 8px;

            align-items: stretch;

        }



        .pdf-view .toolbar-pane-book {

            align-items: stretch;

            gap: 8px;

            flex-wrap: wrap;

        }



        .pdf-view .book-pane-left {

            flex: 2 1 520px;

            align-items: stretch;

            gap: 6px;

        }



        .pdf-view .book-pane-right.toolbar-mini-group-nav {

            flex: 1 1 360px;

        }



        .pdf-view .book-pane-right,

        .pdf-view .book-pane-actions,

        .pdf-view .book-top-row {

            margin-top: 0;

        }



        .pdf-view .toolbar-mini-group {

            display: flex;

            align-items: center;

            gap: 6px;

            flex-wrap: wrap;

            min-height: 0;

            padding: 6px 8px;

            border: 1px solid #d7e1ef;

            border-radius: 10px;

            background: #ffffff;

        }



        .pdf-view .toolbar-mini-group-overlay {

            flex: 1 1 260px;

        }



        .pdf-view .toolbar-mini-group-qa {

            flex: 2 1 420px;

        }



        .pdf-view .book-pane-actions .bulk-edit {

            margin-top: 0;

            padding-top: 0;

            border-top: 0;

            grid-column: auto;

            width: auto;

        }



        .pdf-view .pane-group-label {

            display: inline-flex;

            align-items: center;

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 0.03em;

            text-transform: uppercase;

            color: #5f6f88;

            white-space: nowrap;

            margin-right: 4px;

        }



        .pdf-view .book-pane-right-top,

        .pdf-view .book-pane-right-bottom {

            gap: 6px;

        }



        .pdf-view .book-pane-right-bottom {

            flex-wrap: wrap;

        }



        .pdf-view .modern-control-deck button,

        .pdf-view .modern-control-deck select,

        .pdf-view .modern-control-deck input {

            min-height: 28px;

            height: 28px;

            font-size: 11px;

            line-height: 1.15;

            padding: 4px 8px;

        }



        .pdf-view .book-pane-actions .bulk-select,

        .pdf-view .book-top-row .column-view-select,

        .pdf-view #bookFilterSelect.book-main-select,

        .pdf-view #pageFilterSelect.page-main-select {

            height: 28px;

        }



        .pdf-view .page-nav-btn {

            width: 28px;

            height: 28px;

        }



        .pdf-view .book-pane-actions .bulk-quick-actions {

            gap: 4px;

        }



        .pdf-view .bulk-quick-btn {

            width: 20px;

            height: 20px;

            font-size: 10px;

        }



        .pdf-view .lazy-engine-panel {

            margin: 0 10px 6px;

            padding: 6px 8px;

            gap: 6px;

        }



        .pdf-view .lazy-group-label {

            margin-right: 6px;

        }



        .pdf-view .stats {

            margin: 6px 10px;

            gap: 6px;

            align-items: stretch;

        }



        .pdf-view .stats .qa-stats-row {

            display: flex;

            flex-wrap: nowrap;

            gap: 6px;

            width: 100%;

        }



        .pdf-view .stats .qa-stat-card {

            flex: 1 1 0;

            min-width: 0;

            padding: 6px 8px;

            gap: 2px;

            border-radius: 10px;

        }



        .pdf-view .stats .qa-stat-label {

            font-size: 10px;

        }



        .pdf-view .stats .qa-stat-inline-total,

        .pdf-view .stats .qa-stat-total-row {

            gap: 4px;

        }



        .pdf-view .stats .qa-stat-inline-total strong,

        .pdf-view .stats .qa-stat-total-row strong {

            font-size: 16px;

        }



        .pdf-view .stats .qa-stat-inline-separator {

            font-size: 11px;

        }



        .pdf-view .stats .qa-stat-inline-unique {

            font-size: 10px;

            max-width: 100%;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;

        }



        @media (max-width: 1200px) {

            .pdf-view .book-pane-right.toolbar-mini-group-nav {

                flex-basis: 100%;

            }



            .pdf-view .book-pane-left {

                flex-basis: 100%;

            }



            .pdf-view .stats .qa-stat-card {

                flex: 1 1 0;

            }

        }



        @media (max-width: 860px) {

            .pdf-view .pane-group-label {

                width: 100%;

                margin-right: 0;

            }



            .pdf-view .stats .qa-stat-card {

                flex: 1 1 calc(50% - 3px);

                min-width: 130px;

            }



            .pdf-view .stats .qa-stats-row {

                flex-wrap: wrap;

            }

        }

        .revision-select:focus {

            outline: none;

            border-color: var(--acc);

            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);

        }



        .revision-cell {

            padding: 1px 1px 1px 3px;

            transition: background-color 0.15s ease, border-left-color 0.15s ease;

            border-left: 2px solid transparent;

        }



        /* vacío */

        .revision-cell.rev-empty {

            background: #f8fafc;

            border-left-color: #cbd5e1;

            color: #334155;

        }



        /* estados de revisión — fondo + banda izquierda */

        .revision-cell.rev-estado-copia {

            background: #fef3c7;

            border-left-color: #d97706;

            color: #92400e;

        }



        .revision-cell.rev-estado-en-revision {

            background: rgba(234, 179, 8, 0.18);

            border-left-color: rgba(234, 179, 8, 0.45);

            color: #854d0e;

        }



        .revision-cell.rev-estado-revisado {

            background: #dcfce7;

            border-left-color: #16a34a;

            color: #166534;

        }



        .revision-cell.rev-estado-descartado {

            background: #fee2e2;

            border-left-color: #dc2626;

            color: #991b1b;

        }



        /* acciones — fondo + banda izquierda */

        .revision-cell.rev-accion-mantener {

            background: rgba(37, 99, 235, 0.16);

            border-left-color: rgba(37, 99, 235, 0.45);

            color: #1e40af;

        }



        .revision-cell.rev-accion-actualizar {

            background: #ede9fe;

            border-left-color: #7c3aed;

            color: #5b21b6;

        }



        .revision-cell.rev-accion-revisar {

            background: #ffedd5;

            border-left-color: #ea580c;

            color: #9a3412;

        }



        .revision-cell.rev-accion-sustituir {

            background: #ffe4e6;

            border-left-color: #e11d48;

            color: #9f1239;

        }



        .revision-cell.rev-accion-eliminar {

            background: #fecaca;

            border-left-color: #b91c1c;

            color: #7f1d1d;

        }



        /* Refresh visual de la zona superior */

        body {

            font-family: "Manrope", "Segoe UI", sans-serif;

            background:

                radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.12), transparent 44%),

                radial-gradient(circle at 100% 12%, rgba(99, 102, 241, 0.08), transparent 42%),

                linear-gradient(180deg, #f2f6ff 0%, #ecf2fa 100%);

        }



        .topbar {

            border-bottom: none;

            padding: 0;

            background: transparent;

            position: relative;

            overflow: hidden;

        }



        .topbar-modern {

            margin: 14px 20px 10px;

            padding: 16px 18px;

            border-radius: 18px;

            border: 1px solid rgba(191, 204, 223, 0.6);

            background: linear-gradient(120deg, rgba(255, 255, 255, 0.94) 0%, rgba(242, 247, 255, 0.88) 100%);

            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 14px;

            flex-wrap: wrap;

        }



        .brand-chip {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            padding: 4px 10px;

            border-radius: 999px;

            border: 1px solid #c7d2fe;

            background: rgba(99, 102, 241, 0.1);

            color: #4338ca;

            font-size: 11px;

            font-weight: 800;

            letter-spacing: 0.04em;

            text-transform: uppercase;

        }



        .brand-title {

            margin: 6px 0 2px;

            font-size: 24px;

            font-weight: 800;

            letter-spacing: -0.02em;

            color: #0b1220;

        }



        .brand-sub {

            margin: 0;

            font-size: 12px;

            color: #4f5f79;

            max-width: 620px;

        }



        .nav-modern {

            gap: 8px;

            background: rgba(255, 255, 255, 0.88);

            border: 1px solid #dae3f0;

            border-radius: 999px;

            padding: 6px;

        }



        .nav-modern .pill {

            border-radius: 999px;

            padding: 8px 14px;

            font-size: 12px;

            font-weight: 700;

            color: #1e293b;

            transition: all 0.2s ease;

        }



        .nav-modern .pill:hover {

            background: rgba(148, 163, 184, 0.14);

            text-decoration: none;

        }



        .nav-modern .pill.active {

            background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);

            color: #fff;

            box-shadow: 0 8px 16px rgba(14, 116, 211, 0.24);

        }



        .backend-status {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            border-radius: 999px;

            padding: 6px 8px 6px 10px;

            border: 1px solid #d6e1ef;

            background: #f8fbff;

            color: #334155;

            font-size: 11px;

            font-weight: 700;

            white-space: nowrap;

        }



        .backend-status-dot {

            width: 8px;

            height: 8px;

            border-radius: 999px;

            background: #94a3b8;

            box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18);

        }



        .backend-status.checking {

            background: #fff7ed;

            border-color: #fdba74;

            color: #9a3412;

        }



        .backend-status.checking .backend-status-dot {

            background: #f97316;

            box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.2);

        }



        .backend-status.online {

            background: #ecfdf5;

            border-color: #86efac;

            color: #14532d;

        }



        .backend-status.online .backend-status-dot {

            background: #16a34a;

            box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2);

        }



        .backend-status.offline {

            background: #fef2f2;

            border-color: #fca5a5;

            color: #7f1d1d;

        }



        .backend-status.offline .backend-status-dot {

            background: #dc2626;

            box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.2);

        }



        #backendStatusRetryBtn {

            height: 22px;

            padding: 0 8px;

            border-radius: 999px;

            border: 1px solid #d1dbe8;

            background: #ffffff;

            color: inherit;

            cursor: pointer;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 0.01em;

        }



        #backendStatusRetryBtn:hover {

            filter: brightness(0.98);

        }



        @media (max-width: 980px) {

            .backend-status {

                width: 100%;

                justify-content: center;

            }

        }



        .content {

            padding: 8px 16px 14px;

        }



        .card {

            border: 1px solid rgba(187, 198, 216, 0.55);

            box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);

            border-radius: 14px;

        }



        .stats {

            margin: 8px 12px 8px;

            gap: 8px;

        }



        .stat {

            border-radius: 999px;

            border-color: #d7dee7;

            background: #ffffff;

            font-weight: 600;

        }



        .stat-source {

            background: #f7fafc;

            border-color: #d9e1ee;

        }



        .clear-filters.modern-control-deck {

            margin: 8px 12px 8px;

            padding: 10px;

            border: 1px solid #d6e1ef;

            border-radius: 14px;

            background: linear-gradient(180deg, #f9fcff 0%, #f1f6fc 100%);

            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);

        }



        .deck-head {

            display: none;

        }



        .deck-title {

            margin: 0;

            font-size: 14px;

            font-weight: 800;

            color: #0f172a;

            letter-spacing: 0.01em;

        }



        .deck-subtitle {

            margin: 0;

            font-size: 11px;

            color: #5f6f88;

        }



        .toolbar-primary {

            display: flex;

            align-items: center;

            gap: 12px;

            width: 100%;

        }



        .toolbar-pane {

            border: 1px solid #d7e1ef;

            border-radius: 12px;

            background: rgba(255, 255, 255, 0.9);

            padding: 8px;

            min-height: 0;

            box-shadow: 0 6px 14px rgba(51, 65, 85, 0.07);

            animation: deckRise 0.45s ease both;

        }



        .toolbar-pane-book {

            flex: 1 1 100%;

            display: flex;

            flex-direction: row;

            align-items: center;

            gap: 12px;

            width: 100%;

            padding: 0;

            border: none;

            background: transparent;

            box-shadow: none;

            animation: none;

        }



        .toolbar-pane-esq-images {

            grid-column: span 4;

            min-height: 222px;

            border-color: #e4ebf5;

        }



        .toolbar-pane-pos-preview {

            grid-column: span 5;

            min-height: 306px;

            border-color: #e4ebf5;

        }



        .toolbar-pane-pos-actions {

            grid-column: span 1;

            min-width: 132px;

            display: none;

        }



        .toolbar-pane:nth-child(2) {

            animation-delay: 0.05s;

        }



        .toolbar-pane:nth-child(3) {

            animation-delay: 0.1s;

        }



        .toolbar-pane:nth-child(4) {

            animation-delay: 0.15s;

        }



        .pane-label {

            display: none;

        }



        .toolbar-pane-esq-images .pane-label,

        .toolbar-pane-pos-preview .pane-label {

            display: none;

        }



        .book-pane-left {

            display: flex;

            flex-direction: row;

            align-items: center;

            gap: 8px;

            flex-wrap: wrap;

            flex: 1 1 auto;

            min-width: 0;

        }



        .book-top-row {

            display: flex;

            gap: 8px;

            align-items: center;

            flex-wrap: nowrap;

        }



        .book-top-row .view-toggle-inline {

            width: auto;

        }



        .book-top-row .column-view-select {

            width: auto;

            max-width: 170px;

            min-width: 132px;

            height: 30px;

        }



        .book-pane-right {

            display: flex;

            flex-direction: row;

            align-items: center;

            gap: 12px;

            flex-wrap: wrap;

            margin-left: 0;

        }



        .book-pane-right-bottom {

            gap: 8px;

        }



        .book-pane-actions {

            display: flex;

            gap: 8px;

            flex-wrap: wrap;

            align-items: center;

            margin-top: 0;

        }



        .lazy-engine-panel {

            margin: 0 12px 8px;

            padding: 8px 10px;

            border: 1px solid #d6e1ef;

            border-radius: 10px;

            background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);

            display: flex;

            align-items: center;

            gap: 8px;

            flex-wrap: wrap;

        }



        .lazy-engine-info {

            font-size: 11px;

            font-weight: 700;

            color: #1d4ed8;

        }



        .lazy-engine-badge {

            font-size: 11px;

            font-weight: 800;

            color: #0f172a;

            background: #ffffff;

            border: 1px solid #bfdbfe;

            border-radius: 999px;

            padding: 4px 10px;

        }



        .lazy-engine-select {

            min-width: 210px;

            max-width: 320px;

            height: 30px;

            font-size: 11px;

            font-weight: 700;

        }



        .lazy-engine-panel button {

            min-height: 30px;

            padding: 0 10px;

            font-size: 11px;

            font-weight: 700;

        }



        #lazyLoadAllEnginesBtn {

            background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);

            color: #166534;

            border-color: #86efac;

        }



        #lazyLoadEngineBtn {

            background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);

            color: #1e3a8a;

            border-color: #93c5fd;

        }



        .lazy-engine-panel[hidden] {

            display: none !important;

        }



        .book-pane-actions .bulk-edit {

            grid-column: 1 / -1;

            margin-top: 2px;

            padding-top: 6px;

            border-top: 1px dashed #d7e1ef;

            gap: 6px;

        }



        .book-pane-actions .bulk-select {

            width: 100%;

            min-width: 0;

            height: 30px;

            border-radius: 8px;

            font-size: 10px;

        }



        .book-pane-actions .bulk-quick-actions {

            width: 100%;

            justify-content: flex-start;

            gap: 5px;

            flex-wrap: wrap;

        }



        .modern-control-deck button,

        .modern-control-deck select,

        .modern-control-deck input {

            border: 1px solid #cdd9ea;

            border-radius: 8px;

            background: #ffffff;

            color: #102038;

            font-size: 11px;

            font-weight: 600;

            min-height: 30px;

        }



        .modern-control-deck button {

            cursor: pointer;

            transition: transform 0.14s ease, box-shadow 0.16s ease;

        }



        .modern-control-deck button:hover {

            transform: translateY(-1px);

            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);

        }



        #sortBookPagePosBtn {

            background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);

            border-color: #b8d6f8;

            color: #0c4a6e;

            font-weight: 800;

            text-align: center;

            padding-left: 8px;

        }



        #clearFiltersBtn {

            background: linear-gradient(135deg, #ffe4e6 0%, #fff1f2 100%);

            color: #9f1239;

            border-color: #fecdd3;

            font-weight: 800;

        }



        #toggleOnlyErrorsBtn {

            background: linear-gradient(135deg, #e2e8f0 0%, #f8fafc 100%);

            color: #1e293b;

            border-color: #cbd5e1;

            font-weight: 800;

        }



        #toggleOnlyErrorsBtn.is-active {

            background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);

            color: #b91c1c;

            border-color: #fca5a5;

            box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.45);

        }



        .pos-top-meta {

            display: none;

            font-size: 10px;

            font-weight: 600;

            margin-bottom: 2px;

        }



        .schemas-images-inline {

            min-height: 0;

            padding: 0;

            border-radius: 8px;

            border-color: transparent;

            background: transparent;

        }



        .toolbar-pane-esq-images .schemas-images-strip {

            min-height: 182px;

            height: 182px;

            display: flex;

            flex-direction: row;

            align-items: center;

            justify-content: flex-start;

            overflow-y: hidden;

            overflow-x: auto;

            padding-bottom: 2px;

            gap: 8px;

        }



        .toolbar-pane-pos-preview .schemas-images-strip,

        .pos-top-inline .schemas-images-strip {

            min-height: 270px;

            height: 270px;

            align-items: center;

            justify-content: center;

            overflow: hidden;

        }



        .toolbar-pane-esq-images .schema-thumb.large {

            width: 252px;

            max-width: 252px;

            flex: 0 0 auto;

        }



        .toolbar-pane-pos-preview .schema-thumb,

        .pos-top-thumb {

            width: 100%;

            max-width: 520px;

        }



        .toolbar-pane-esq-images .schema-thumb.large img {

            width: 252px;

            height: 148px;

            min-height: 148px;

            object-fit: contain;

        }



        .toolbar-pane-pos-preview .schema-thumb img,

        .pos-top-thumb img {

            width: 100%;

            height: 270px;

            min-height: 270px;

            object-fit: contain;

        }



        .toolbar-pane-esq-images .schemas-images-empty,

        .toolbar-pane-pos-preview .schemas-images-empty {

            display: none;

        }



        .quick-action-btn {

            width: 20px;

            height: 20px;

            border-width: 1px;

            box-shadow: none;

        }



        @keyframes deckRise {

            from {

                opacity: 0;

                transform: translateY(8px);

            }



            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        @media (max-width: 1280px) {

            .toolbar-pane-book {

                gap: 10px;

            }



            .toolbar-pane-esq-images {

                min-height: 190px;

            }



            .toolbar-pane-pos-preview {

                min-height: 250px;

            }



            .book-pane-actions {

                gap: 6px;

            }

        }



        @media (max-width: 980px) {

            .topbar-modern {

                margin: 10px 12px 8px;

                padding: 14px;

            }



            .brand-title {

                font-size: 20px;

            }



            .content {

                padding: 8px 12px 12px;

            }



            .clear-filters.modern-control-deck {

                margin: 0 10px 10px;

                padding: 10px;

            }



            .toolbar-primary {

                flex-direction: column;

                align-items: stretch;

            }



            .toolbar-pane,

            .toolbar-pane-book,

            .toolbar-pane-esq-images,

            .toolbar-pane-pos-preview,

            .toolbar-pane-pos-actions {

                width: 100%;

            }



            .book-pane-actions {

                flex-direction: column;

            }



            .book-pane-actions button {

                width: 100%;

            }



            .toolbar-pane-esq-images .schemas-images-strip,

            .toolbar-pane-pos-preview .schemas-images-strip,

            .pos-top-inline .schemas-images-strip {

                height: auto;

                min-height: 120px;

            }



            .toolbar-pane-esq-images .schema-thumb.large,

            .toolbar-pane-pos-preview .schema-thumb,

            .pos-top-thumb {

                width: 160px;

                max-width: none;

            }



            .toolbar-pane-esq-images .schema-thumb.large img,

            .toolbar-pane-pos-preview .schema-thumb img,

            .pos-top-thumb img {

                width: 160px;

                height: 100px;

                min-height: 100px;

            }



            .toolbar-pane-esq-images .schemas-images-strip {

                flex-direction: row;

                overflow-x: auto;

                overflow-y: hidden;

                align-items: center;

            }



            .book-top-row {

                grid-template-columns: 1fr;

            }

        }



        /* color del texto en el select (siempre heredado de la celda) */

        .revision-select {

            color: inherit;

        }



        .cell-inline-editable {

            cursor: text;

        }



        .cell-inline-editable:hover {

            background: rgba(14, 165, 233, 0.08);

            box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.18);

        }



        .cell-editing {

            padding: 2px 4px;

            background: rgba(14, 165, 233, 0.1);

        }



        .cell-saving {

            opacity: 0.72;

        }



        .qa-inline-editor {

            width: 100%;

            min-width: 0;

            height: 24px;

            border-radius: 6px;

            border: 1px solid #7dd3fc;

            background: #ffffff;

            color: #0f172a;

            font-size: 12px;

            padding: 2px 6px;

        }



        .qa-inline-editor:focus {

            outline: none;

            border-color: #0ea5e9;

            box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.18);

        }



        .qa-modal[hidden] {

            display: none;

        }



        .qa-modal {

            position: fixed;

            inset: 0;

            z-index: 1200;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 10px;

        }



        .qa-modal-backdrop {

            position: absolute;

            inset: 0;

            background: rgba(2, 6, 23, 0.52);

            backdrop-filter: blur(2px);

        }



        .qa-modal-dialog {

            position: relative;

            width: min(1720px, 99vw);

            max-height: 96vh;

            overflow: auto;

            border: 1px solid #d6e0ee;

            border-radius: 14px;

            background: #ffffff;

            box-shadow: 0 24px 50px rgba(2, 6, 23, 0.32);

            padding: 16px;

        }



        .qa-modal-header {

            display: flex;

            align-items: start;

            justify-content: space-between;

            gap: 10px;

            border-bottom: 1px solid #e2e8f0;

            padding-bottom: 12px;

            margin-bottom: 12px;

        }



        .qa-modal-kicker {

            margin: 0;

            color: #475569;

            font-size: 11px;

            text-transform: uppercase;

            letter-spacing: 0.06em;

            font-weight: 700;

        }



        .qa-modal-header h2 {

            margin: 2px 0 0;

            font-size: 18px;

            color: #0f172a;

        }



        .qa-modal-close-btn {

            border: 1px solid #cbd5e1;

            background: #f8fafc;

            color: #334155;

            border-radius: 8px;

            height: 32px;

            padding: 0 10px;

            cursor: pointer;

            font-weight: 600;

        }



        .qa-modal-form {

            display: flex;

            flex-direction: column;

            gap: 12px;

        }



        .qa-modal-top-split {

            display: grid;

            grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);

            gap: 10px;

            align-items: start;

        }



        .qa-modal-main-fields {

            align-content: start;

        }



        .qa-modal-left-stack {

            display: flex;

            flex-direction: column;

            gap: 10px;

            min-width: 0;

        }



        .qa-modal-row {

            display: grid;

            gap: 10px;

            min-width: 0;

        }



        .qa-modal-row label {

            display: flex;

            flex-direction: column;

            gap: 6px;

            min-width: 0;

            font-size: 12px;

            color: #334155;

            font-weight: 600;

        }



        .qa-modal-row input,

        .qa-modal-row select {

            height: 34px;

            border-radius: 8px;

            border: 1px solid #cbd5e1;

            background: #ffffff;

            color: #0f172a;

            padding: 0 10px;

            font-size: 13px;

            min-width: 0;

        }



        .qa-modal-row input[readonly] {

            background: #f8fafc;

            color: #334155;

        }



        .qa-modal-row input:focus,

        .qa-modal-row select:focus {

            outline: none;

            border-color: #3b82f6;

            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);

        }



        .qa-modal-row-primary {

            grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)) minmax(0, 0.9fr);

        }



        .qa-modal-row-secondary {

            grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1fr);

        }



        .qa-modal-row-status {

            grid-template-columns: repeat(2, minmax(180px, 220px));

        }



        .qa-modal-row-flags {

            grid-template-columns: repeat(5, minmax(0, 1fr));

        }



        .qa-modal-row-book {

            grid-template-columns: repeat(6, minmax(0, 1fr));

        }



        #qaRecordModal .qa-modal-meta-row {

            display: grid;

            grid-template-columns: repeat(2, minmax(220px, 320px));

            gap: 10px;

            align-items: end;

        }



        #qaRecordModal .qa-modal-meta-row label,

        #qaRecordModal .qa-modal-mini-grid label {

            display: grid;

            gap: 6px;

            font-size: 12px;

            color: #334155;

            font-weight: 600;

        }



        #qaRecordModal .qa-modal-meta-row input,

        #qaRecordModal .qa-modal-mini-grid input,

        #qaRecordModal .qa-modal-mini-grid select {

            height: 34px;

            border-radius: 8px;

            border: 1px solid #cbd5e1;

            background: #ffffff;

            color: #0f172a;

            padding: 0 10px;

            font-size: 13px;

            min-width: 0;

        }



        #qaRecordModal .qa-modal-edit-table {

            border: 1px solid #d6e0ee;

            border-radius: 12px;

            background: #f8fbff;

            padding: 10px;

            display: grid;

            gap: 6px;

        }



        #qaRecordModal .qa-modal-edit-head,

        #qaRecordModal .qa-modal-edit-row {

            display: grid;

            grid-template-columns: 104px minmax(0, 1fr) minmax(0, 1fr);

            gap: 12px;

            align-items: center;

        }



        #qaRecordModal .qa-modal-edit-head {

            font-size: 11px;

            font-weight: 800;

            letter-spacing: 0.05em;

            text-transform: uppercase;

            color: #475569;

            padding: 0 0 4px;

            border-bottom: 1px solid #d7e3f1;

        }



        #qaRecordModal .qa-modal-edit-head-campo {

            color: #334155;

        }



        #qaRecordModal .qa-modal-edit-label {

            font-size: 13px;

            font-weight: 700;

            color: #42556b;

            text-transform: uppercase;

            letter-spacing: 0.02em;

        }



        #qaRecordModal .qa-modal-edit-row input {

            height: 34px;

            border-radius: 8px;

            border: 1px solid #cbd5e1;

            background: #ffffff;

            color: #0f172a;

            padding: 0 10px;

            font-size: 13px;

            min-width: 0;

        }



        #qaRecordModal .qa-modal-edit-row input[readonly] {

            background: #edf3f9;

            color: #64748b;

        }



        #qaRecordModal .qa-modal-edit-empty {

            height: 34px;

        }



        #qaRecordModal .qa-modal-mini-grid {

            display: grid;

            grid-template-columns: repeat(5, minmax(0, 1fr));

            gap: 10px;

            align-items: end;

        }



        .qa-modal-field-span-4 {

            grid-column: span 4;

        }



        .qa-modal-row-spacer {

            height: 8px;

        }



        .qa-modal-related-matches {

            align-self: start;

            height: 100%;

        }



        .qa-modal-related-matches .qa-modal-related-table-wrap {

            max-height: 248px;

        }



        .qa-modal-related-matches .qa-modal-related-table th,

        .qa-modal-related-matches .qa-modal-related-table td {

            padding: 5px 7px;

            font-size: 11px;

        }



        .qa-modal-grid {

            display: grid;

            grid-template-columns: repeat(4, minmax(0, 1fr));

            gap: 10px;

        }



        .qa-modal-grid.qa-modal-grid-meta {

            grid-template-columns: repeat(5, minmax(0, 1fr));

        }



        .qa-modal-grid label {

            display: flex;

            flex-direction: column;

            gap: 6px;

            font-size: 12px;

            color: #334155;

            font-weight: 600;

        }



        .qa-modal-grid input,

        .qa-modal-grid select {

            height: 34px;

            border-radius: 8px;

            border: 1px solid #cbd5e1;

            background: #ffffff;

            color: #0f172a;

            padding: 0 10px;

            font-size: 13px;

        }



        .qa-modal-grid input[readonly] {

            background: #f8fafc;

            color: #334155;

        }



        .qa-modal-grid input:focus,

        .qa-modal-grid select:focus {

            outline: none;

            border-color: #3b82f6;

            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);

        }



        .qa-modal-related {

            border: 1px solid #dbe5f1;

            border-radius: 10px;

            background: #f8fbff;

            padding: 10px;

        }



        .qa-modal-related-head {

            display: flex;

            align-items: baseline;

            justify-content: space-between;

            gap: 8px;

            margin-bottom: 8px;

        }



        .qa-modal-related-head h3 {

            margin: 0;

            font-size: 12px;

            text-transform: uppercase;

            letter-spacing: 0.04em;

            color: #1e293b;

        }



        .qa-modal-related-controls {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            flex-wrap: wrap;

            justify-content: flex-end;

        }



        .qa-modal-related-filter {

            font-size: 11px;

            color: #475569;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 0.03em;

        }



        .qa-modal-related-select {

            height: 28px;

            border-radius: 6px;

            border: 1px solid #cbd5e1;

            background: #ffffff;

            color: #0f172a;

            font-size: 12px;

            padding: 0 8px;

        }



        .qa-modal-related-select:focus {

            outline: none;

            border-color: #3b82f6;

            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);

        }



        .qa-modal-related-count {

            font-size: 11px;

            color: #475569;

            font-weight: 700;

        }



        .qa-modal-related-expand-btn {

            height: 28px;

            border-radius: 6px;

            border: 1px solid #cbd5e1;

            background: #f8fafc;

            color: #0f172a;

            font-size: 11px;

            font-weight: 700;

            padding: 0 8px;

            cursor: pointer;

            white-space: nowrap;

        }



        .qa-modal-related-expand-btn:hover {

            background: #eef2ff;

            border-color: #a5b4fc;

            color: #1e3a8a;

        }



        .qa-matches-modal-dialog {

            width: min(1620px, 98vw);

            max-height: 94vh;

            display: flex;

            flex-direction: column;

            gap: 10px;

        }



        .qa-export-modal-dialog {

            width: min(1620px, 98vw);

            max-height: 94vh;

            display: flex;

            flex-direction: column;

            gap: 10px;

        }



        .qa-matches-modal-header {

            margin-bottom: 0;

        }



        .qa-matches-modal-summary {

            display: grid;

            grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1.8fr) minmax(160px, 0.8fr);

            gap: 10px;

            padding: 10px;

            border: 1px solid #dbe5f1;

            border-radius: 10px;

            background: #f8fbff;

        }



        .qa-matches-modal-summary-item {

            display: flex;

            flex-direction: column;

            gap: 4px;

            min-width: 0;

        }



        .qa-matches-modal-summary-item-count {

            justify-content: center;

            align-items: flex-end;

            text-align: right;

        }



        .qa-matches-modal-summary-label {

            font-size: 11px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 0.04em;

            color: #475569;

        }



        .qa-matches-modal-summary-value {

            font-size: 14px;

            line-height: 1.3;

            color: #0f172a;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }



        .qa-matches-modal-filters {

            display: grid;

            grid-template-columns: repeat(4, minmax(140px, 1fr));

            gap: 10px;

            padding: 10px;

            border: 1px solid #dbe5f1;

            border-radius: 10px;

            background: #ffffff;

        }



        .qa-matches-modal-filters label {

            display: flex;

            flex-direction: column;

            gap: 6px;

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 0.03em;

            text-transform: uppercase;

            color: #475569;

            min-width: 0;

        }



        .qa-matches-modal-filter-wide {

            grid-column: span 2;

        }



        .qa-matches-modal-filter-text {

            grid-column: span 3;

        }



        .qa-matches-modal-filters .filter-input,

        .qa-matches-modal-filters .qa-modal-related-select {

            height: 32px;

            border-radius: 8px;

            font-size: 12px;

        }



        .qa-matches-modal-table-wrap {

            flex: 1;

            min-height: 0;

            overflow: auto;

            border: 1px solid #d3deeb;

            border-radius: 10px;

            background: #ffffff;

        }



        .qa-matches-modal-table {

            table-layout: auto;

            min-width: 940px;

        }



        .qa-matches-modal-table th,

        .qa-matches-modal-table td {

            white-space: nowrap;

            max-width: 340px;

        }



        .qa-matches-modal-table th:nth-child(1),

        .qa-matches-modal-table td:nth-child(1) {

            min-width: 230px;

            max-width: 300px;

        }



        .qa-matches-modal-table th:nth-child(2),

        .qa-matches-modal-table td:nth-child(2),

        .qa-matches-modal-table th:nth-child(3),

        .qa-matches-modal-table td:nth-child(3) {

            min-width: 68px;

            max-width: 76px;

        }



        .qa-matches-modal-table th:nth-child(4),

        .qa-matches-modal-table td:nth-child(4) {

            min-width: 86px;

            max-width: 110px;

        }



        .qa-matches-modal-table th:nth-child(5),

        .qa-matches-modal-table td:nth-child(5) {

            white-space: normal;

            min-width: 420px;

            word-break: break-word;

        }



        .qa-matches-modal-table th:nth-child(8),

        .qa-matches-modal-table td:nth-child(8) {

            white-space: normal;

            min-width: 250px;

            word-break: break-word;

        }



        .qa-modal-related-table-wrap {

            max-height: 180px;

            overflow: auto;

            border: 1px solid #d3deeb;

            border-radius: 8px;

            background: #ffffff;

        }



        .qa-modal-related-table {

            width: 100%;

            border-collapse: collapse;

            table-layout: fixed;

            font-size: 12px;

        }



        .qa-modal-related-table th,

        .qa-modal-related-table td {

            border-bottom: 1px solid #e2e8f0;

            padding: 6px 8px;

            text-align: left;

            color: #0f172a;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

        }



        .qa-modal-related-table thead th {

            position: sticky;

            top: 0;

            z-index: 1;

            background: #eef4fb;

            color: #334155;

            font-size: 11px;

            text-transform: uppercase;

            letter-spacing: 0.03em;

        }



        .qa-side-matches-table th:nth-child(1),

        .qa-side-matches-table td:nth-child(1) {

            width: 26%;

        }



        .qa-side-matches-table th:nth-child(2),

        .qa-side-matches-table td:nth-child(2),

        .qa-side-matches-table th:nth-child(3),

        .qa-side-matches-table td:nth-child(3) {

            width: 9%;

            text-align: center;

        }



        .qa-side-matches-table th:nth-child(4),

        .qa-side-matches-table td:nth-child(4) {

            width: 40%;

            white-space: normal;

            word-break: break-word;

            line-height: 1.25;

        }



        .qa-side-matches-table th:nth-child(5),

        .qa-side-matches-table td:nth-child(5) {

            width: 16%;

            text-align: center;

        }



        .qa-side-match-part-number {

            font-weight: 700;

            letter-spacing: 0.01em;

        }



        .qa-side-match-st {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-width: 34px;

            height: 22px;

            border-radius: 8px;

            font-size: 11px;

            font-weight: 700;

            letter-spacing: 0.03em;

            border: 1px solid transparent;

        }



        .qa-side-match-st.ok {

            background: #dcfce7;

            color: #166534;

            border-color: #bbf7d0;

        }



        .qa-side-match-st.ko {

            background: #fee2e2;

            color: #b91c1c;

            border-color: #fecaca;

        }



        .qa-modal-related-table tbody tr.qa-modal-related-current {

            background: #e0f2fe;

        }



        .qa-modal-related-table tbody tr:last-child td {

            border-bottom: none;

        }



        .qa-modal-related-table td.qa-modal-cell-diff {

            background: #fee2e2;

            color: #7f1d1d;

            font-weight: 700;

        }



        .qa-modal-related-table td.qa-modal-cell-diff-warn {

            background: #fef3c7;

            color: #78350f;

            font-weight: 700;

        }



        .qa-modal-related-table td.qa-modal-cell-diff-origin {

            background: #fecaca;

            color: #7f1d1d;

            font-weight: 700;

        }



        .qa-modal-related-table td.qa-modal-cell-diff-origin-warn {

            background: #fde68a;

            color: #78350f;

            font-weight: 700;

        }



        .qa-modal-export .qa-modal-related-head {

            align-items: center;

        }



        .qa-export-diff-toggle {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            font-size: 11px;

            font-weight: 700;

            color: #334155;

            user-select: none;

            cursor: pointer;

            white-space: nowrap;

        }



        .qa-export-diff-toggle input {

            margin: 0;

            width: 14px;

            height: 14px;

            accent-color: #2563eb;

        }



        .qa-record-errors-panel {

            display: flex;

            flex-direction: column;

            gap: 10px;

            background: linear-gradient(180deg, #fff8f1 0%, #ffffff 100%);

        }



        .qa-record-errors-head {

            align-items: center;

        }



        .qa-record-errors-summary {

            display: inline-flex;

            align-items: center;

            justify-content: flex-end;

        }



        .qa-record-errors-pill {

            display: inline-flex;

            align-items: center;

            min-height: 24px;

            padding: 0 10px;

            border-radius: 999px;

            font-size: 11px;

            font-weight: 800;

            letter-spacing: 0.03em;

            text-transform: uppercase;

            border: 1px solid transparent;

        }



        .qa-record-errors-pill.is-critical {

            background: #fee2e2;

            color: #991b1b;

            border-color: #fecaca;

        }



        .qa-record-errors-pill.is-warning {

            background: #fef3c7;

            color: #92400e;

            border-color: #fde68a;

        }



        .qa-record-errors-pill.is-ok {

            background: #dcfce7;

            color: #166534;

            border-color: #bbf7d0;

        }



        .qa-record-errors-pill.is-empty {

            background: #e2e8f0;

            color: #475569;

            border-color: #cbd5e1;

        }



        .qa-record-errors-list {

            list-style: none;

            margin: 0;

            padding: 0;

            display: flex;

            flex-direction: column;

            gap: 8px;

        }



        .qa-record-errors-item {

            display: flex;

            flex-direction: column;

            gap: 4px;

            padding: 10px 12px;

            border-radius: 8px;

            border: 1px solid #e2e8f0;

            background: #ffffff;

        }



        .qa-record-errors-item.is-critical {

            border-color: #fecaca;

            background: #fff5f5;

        }



        .qa-record-errors-item.is-warning {

            border-color: #fde68a;

            background: #fffbeb;

        }



        .qa-record-errors-item-main {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 8px;

            flex-wrap: wrap;

        }



        .qa-record-errors-code {

            font-size: 12px;

            font-weight: 800;

            color: #0f172a;

        }



        .qa-record-errors-fields {

            font-size: 10px;

            font-weight: 700;

            color: #475569;

            background: #f1f5f9;

            border-radius: 999px;

            padding: 2px 8px;

        }



        .qa-record-errors-message {

            font-size: 12px;

            line-height: 1.4;

            color: #334155;

        }



        .qa-record-errors-empty {

            padding: 10px 12px;

            border-radius: 8px;

            border: 1px dashed #cbd5e1;

            background: #f8fafc;

            color: #64748b;

            font-size: 12px;

            font-weight: 600;

        }



        .qa-modal-export-table-wrap {

            max-height: min(48vh, 640px);

            overflow-x: auto;

            overflow-y: auto;

            border: 1px solid #d3deeb;

            border-radius: 8px;

            background: #ffffff;

        }



        #pdfTabPanelExport .qa-side-body {

            overflow: hidden;

            display: flex;

            flex-direction: column;

            padding-bottom: 0;

        }



        #pdfTabPanelExport .qa-modal-related {

            flex: 1;

            min-height: 0;

            display: flex;

            flex-direction: column;

        }



        #pdfTabPanelExport .qa-modal-related[hidden] {

            display: none;

        }



        #pdfTabPanelExport .qa-modal-export-table-wrap {

            flex: 1;

            min-height: 0;

            max-height: none;

        }



        .qa-export-modal-dialog .qa-modal-export-table-wrap {

            max-height: min(68vh, 980px);

        }



        .qa-modal-export-table {

            table-layout: auto;

            min-width: 100%;

            width: max-content;

        }



        .qa-modal-export-table th,

        .qa-modal-export-table td {

            min-width: 320px;

            white-space: normal;

            overflow: visible;

            text-overflow: clip;

            word-break: break-word;

            overflow-wrap: anywhere;

            max-width: none;

            vertical-align: top;

        }



        .qa-modal-export-table th:first-child,

        .qa-modal-export-table td:first-child {

            min-width: 260px;

            width: 260px;

            position: sticky;

            left: 0;

            z-index: 2;

            background: #f8fbff;

        }



        .qa-modal-export-table th:not(:first-child),

        .qa-modal-export-table td:not(:first-child) {

            width: 360px;

        }



        .qa-modal-export-table tbody td:first-child {

            font-weight: 700;

            color: #334155;

            background: #f8fbff;

        }



        .qa-modal-export-table-new th,

        .qa-modal-export-table-new td {

            white-space: normal;

            overflow: visible;

            text-overflow: clip;

            word-break: break-word;

            max-width: none;

        }



        .qa-export-pipeline-panel {

            flex: 1.2;

            gap: 10px;

            padding-bottom: 10px;

        }



        .qa-export-pipeline-actions {

            display: grid;

            grid-template-columns: repeat(2, minmax(0, 1fr));

            gap: 8px;

        }



        .qa-export-pipeline-actions button {

            height: 32px;

            border-radius: 8px;

            border: 1px solid #cbd5e1;

            background: #f8fafc;

            color: #0f172a;

            font-size: 12px;

            font-weight: 700;

            cursor: pointer;

        }



        .qa-export-pipeline-actions button:hover {

            background: #eef2f7;

        }



        .qa-export-summary-grid {

            display: grid;

            grid-template-columns: repeat(5, minmax(0, 1fr));

            gap: 8px;

        }



        .qa-export-summary-card {

            border: 1px solid #d7e0ed;

            border-radius: 8px;

            padding: 8px;

            background: #ffffff;

            display: flex;

            flex-direction: column;

            gap: 3px;

        }



        .qa-export-summary-card span {

            font-size: 10px;

            color: #64748b;

            text-transform: uppercase;

            letter-spacing: 0.04em;

            font-weight: 700;

        }



        .qa-export-summary-card strong {

            font-size: 16px;

            color: #0f172a;

            font-weight: 800;

        }



        .qa-export-preview-wrap {

            max-height: min(34vh, 380px);

        }



        .qa-export-preview-controls {

            display: grid;

            grid-template-columns: auto 190px minmax(220px, 1fr) auto auto;

            gap: 8px;

            align-items: center;

        }



        .qa-export-preview-controls label {

            font-size: 12px;

            font-weight: 700;

            color: #334155;

        }



        .qa-export-preview-controls select,

        .qa-export-preview-controls input,

        .qa-export-preview-controls button {

            height: 32px;

            border-radius: 8px;

            border: 1px solid #cbd5e1;

            background: #ffffff;

            color: #0f172a;

            font-size: 12px;

            padding: 0 10px;

        }



        .qa-export-preview-controls button {

            background: #f8fafc;

            font-weight: 700;

            cursor: pointer;

        }



        .qa-export-preview-controls button:hover {

            background: #eef2f7;

        }



        .qa-export-sortable {

            cursor: pointer;

            user-select: none;

        }



        .qa-export-sortable:hover {

            color: #1d4ed8;

        }



        .qa-export-sortable.is-sorted-asc::after {

            content: ' \25B2';

            font-size: 9px;

            color: #2563eb;

        }



        .qa-export-sortable.is-sorted-desc::after {

            content: ' \25BC';

            font-size: 9px;

            color: #2563eb;

        }



        #qaExportPreviewBody tr {

            cursor: pointer;

        }



        #qaExportPreviewBody tr.qa-export-preview-selected {

            background: rgba(37, 99, 235, 0.14);

        }



        .qa-export-trace-panel {

            border: 1px solid #d6e0ee;

            border-radius: 8px;

            padding: 8px;

            background: #ffffff;

            min-height: 140px;

        }



        .qa-export-trace-body {

            font-size: 12px;

            color: #334155;

            line-height: 1.4;

            display: grid;

            gap: 4px;

        }



        .qa-export-trace-kpis {

            display: grid;

            grid-template-columns: repeat(3, minmax(0, 1fr));

            gap: 8px;

        }



        .qa-export-trace-kpi {

            border: 1px solid #d7e0ed;

            border-radius: 8px;

            padding: 8px;

            background: #f8fbff;

        }



        .qa-export-trace-kpi span {

            display: block;

            font-size: 10px;

            text-transform: uppercase;

            color: #64748b;

            letter-spacing: 0.04em;

            font-weight: 700;

            margin-bottom: 3px;

        }



        .qa-export-trace-kpi strong {

            color: #0f172a;

            font-size: 14px;

            font-weight: 800;

        }



        .qa-export-trace-list {

            margin: 0;

            padding-left: 16px;

        }



        .qa-export-trace-table-wrap {

            max-height: 220px;

            overflow: auto;

            border: 1px solid #e2e8f0;

            border-radius: 8px;

        }



        .qa-export-trace-table {

            width: 100%;

            border-collapse: collapse;

            font-size: 11px;

        }



        .qa-export-trace-table th,

        .qa-export-trace-table td {

            border-bottom: 1px solid #e2e8f0;

            text-align: left;

            padding: 6px 8px;

            white-space: nowrap;

        }



        .qa-export-trace-table th {

            position: sticky;

            top: 0;

            background: #f8fafc;

            color: #334155;

            font-weight: 700;

            z-index: 1;

        }



        #qaExportRunStatus.ok {

            color: #166534;

        }



        #qaExportRunStatus.warn {

            color: #92400e;

        }



        #qaExportRunStatus.bad {

            color: #991b1b;

        }



        @media (max-width: 980px) {

            .qa-export-pipeline-actions {

                grid-template-columns: 1fr;

            }



            .qa-export-summary-grid {

                grid-template-columns: repeat(2, minmax(0, 1fr));

            }



            .qa-export-preview-controls {

                grid-template-columns: 1fr;

            }



            .qa-export-trace-kpis {

                grid-template-columns: 1fr;

            }

        }



        .qa-modal-footer {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 10px;

            border-top: 1px solid #e2e8f0;

            padding-top: 12px;

            margin-top: 4px;

        }



        .qa-modal-status {

            min-height: 18px;

            color: #475569;

            font-size: 12px;

            font-weight: 600;

        }



        .qa-modal-actions {

            display: inline-flex;

            align-items: center;

            gap: 8px;

        }



        #qaRecordModalOpenExportBtn,

        #qaRecordModalCancelBtn,

        #qaRecordModalSaveBtn,

        #qaSideResetBtn,

        #qaSideSaveBtn {

            height: 34px;

            border-radius: 8px;

            border: 1px solid #cbd5e1;

            background: #f8fafc;

            color: #0f172a;

            padding: 0 12px;

            font-weight: 700;

            cursor: pointer;

        }



        #qaRecordModalSaveBtn,

        #qaSideSaveBtn {

            border-color: #2563eb;

            background: #2563eb;

            color: #ffffff;

        }



        #qaRecordModalSaveBtn:disabled,

        #qaSideSaveBtn:disabled {

            opacity: 0.7;

            cursor: wait;

        }



        @media (max-width: 1200px) {

            #qaRecordModal .qa-modal-meta-row {

                grid-template-columns: repeat(2, minmax(0, 1fr));

            }

            #qaRecordModal .qa-modal-edit-head,

            #qaRecordModal .qa-modal-edit-row {

                grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr);

            }

            #qaRecordModal .qa-modal-mini-grid {

                grid-template-columns: repeat(3, minmax(0, 1fr));

            }

            .qa-modal-top-split {

                grid-template-columns: 1fr;

            }



            .qa-modal-left-stack {

                gap: 8px;

            }



            .qa-modal-row-primary,

            .qa-modal-row-secondary,

            .qa-modal-row-book {

                grid-template-columns: repeat(3, minmax(0, 1fr));

            }



            .qa-modal-field-span-4 {

                grid-column: span 2;

            }



            .qa-modal-row-flags {

                grid-template-columns: repeat(3, minmax(0, 1fr));

            }



            .qa-modal-grid {

                grid-template-columns: repeat(3, minmax(0, 1fr));

            }



            .qa-side-grid-meta,

            .qa-side-grid-main {

                grid-template-columns: repeat(2, minmax(0, 1fr));

            }

        }



        @media (max-width: 960px) {

            #qaRecordModal .qa-modal-edit-head,

            #qaRecordModal .qa-modal-edit-row {

                grid-template-columns: 1fr;

                gap: 8px;

            }

            #qaRecordModal .qa-modal-edit-head {

                display: none;

            }

            #qaRecordModal .qa-modal-edit-label {

                font-size: 12px;

            }

            #qaRecordModal .qa-modal-mini-grid {

                grid-template-columns: repeat(2, minmax(0, 1fr));

            }

            .qa-modal {

                padding: 12px;

            }



            .qa-side-search-row {

                grid-template-columns: 1fr;

            }



            .qa-modal-row-primary,

            .qa-modal-row-secondary,

            .qa-modal-row-book,

            .qa-modal-row-flags,

            .qa-modal-row-status {

                grid-template-columns: repeat(2, minmax(0, 1fr));

            }



            .qa-modal-field-span-4 {

                grid-column: span 2;

            }



            .qa-modal-grid {

                grid-template-columns: repeat(2, minmax(0, 1fr));

            }



            .qa-modal-grid.qa-modal-grid-meta {

                grid-template-columns: 1fr;

            }



            .qa-side-grid-meta,

            .qa-side-grid-main {

                grid-template-columns: 1fr;

            }



            .qa-modal-related-matches .qa-modal-related-table-wrap {

                max-height: 200px;

            }



            .qa-matches-modal-summary {

                grid-template-columns: 1fr;

            }



            .qa-matches-modal-summary-item-count {

                align-items: flex-start;

                text-align: left;

            }



            .qa-matches-modal-filters {

                grid-template-columns: repeat(2, minmax(0, 1fr));

            }



            .qa-matches-modal-filter-wide {

                grid-column: span 2;

            }



            .qa-matches-modal-filter-text {

                grid-column: span 2;

            }

        }



        @media (max-width: 640px) {



            .qa-side-search-row {

                grid-template-columns: 1fr;

            }



            .qa-modal-row-primary,

            .qa-modal-row-secondary,

            .qa-modal-row-book,

            .qa-modal-row-flags,

            .qa-modal-row-status {

                grid-template-columns: 1fr;

            }



            .qa-modal-field-span-4 {

                grid-column: auto;

            }



            .qa-modal-grid {

                grid-template-columns: 1fr;

            }



            .qa-matches-modal-filters {

                grid-template-columns: 1fr;

            }



            .qa-matches-modal-filter-wide {

                grid-column: auto;

            }



            .qa-matches-modal-filter-text {

                grid-column: auto;

            }

        }



        /* Scale parity with analista_02: typography and spacing density only. */

        html,

        body {

            font-family: 'Manrope', 'Segoe UI', Arial, sans-serif;

            font-size: 12px;

            line-height: 1.35;

        }



        .content {

            padding: 12px;

        }



        .topbar {

            padding: 10px 16px;

        }



        .nav {

            gap: 10px;

        }



        .pill,

        .nav-modern .pill {

            min-height: 32px;

            padding: 6px 12px;

            font-size: 12px;

            font-weight: 700;

        }



        .qa-checks-topbar-btn,

        #backendStatusRetryBtn {

            min-height: 30px;

            font-size: 11px;

        }



        .pdf-tabs {

            padding: 8px 8px 0;

            gap: 5px;

        }



        .pdf-tab-btn {

            height: 30px;

            padding: 0 10px;

            font-size: 11px;

        }



        .pdfbar {

            padding: 8px;

            gap: 6px;

        }



        .pdfmeta,

        .backend-status,

        .qa-modal-status,

        .qa-side-search-status {

            font-size: 11px;

        }



        th,

        td {

            padding: 6px 10px;

        }



        thead th {

            font-size: 11px;

        }



        td {

            font-size: 12px;

        }



        .filter-input,

        .qa-side-search-row input,

        .qa-modal-related-select,

        .qa-side-open-btn,

        #qaSideSearchBtn,

        #qaSideResetBtn,

        #qaSideSaveBtn,

        #qaRecordModalOpenExportBtn,

        #qaRecordModalCancelBtn,

        #qaRecordModalSaveBtn,

        .qa-modal-related-expand-btn,

        .qa-modal-close-btn {

            height: 30px;

            min-height: 30px;

            padding: 0 10px;

            font-size: 11px;

        }



        .qa-modal-row label,

        .qa-modal-grid label,

        #qaRecordModal .qa-modal-meta-row label,

        #qaRecordModal .qa-modal-mini-grid label {

            font-size: 11px;

            gap: 4px;

        }



        .qa-modal-row input,

        .qa-modal-row select,

        .qa-modal-grid input,

        .qa-modal-grid select,

        #qaRecordModal .qa-modal-meta-row input,

        #qaRecordModal .qa-modal-mini-grid input,

        #qaRecordModal .qa-modal-mini-grid select,

        #qaRecordModal .qa-modal-edit-row input {

            height: 30px;

            border-radius: 8px;

            padding: 0 8px;

            font-size: 11px;

        }



        #qaRecordModal .qa-modal-edit-empty {

            height: 30px;

        }



        #qaRecordModal .qa-modal-edit-label {

            font-size: 11px;

        }



        #qaRecordModal .qa-modal-edit-head {

            font-size: 10px;

        }



        .qa-modal-dialog {

            padding: 14px;

        }



        .qa-modal-header {

            padding-bottom: 10px;

            margin-bottom: 10px;

        }



        .qa-modal-header h2 {

            font-size: 17px;

        }



        .qa-modal-kicker,

        .qa-modal-related-head h3,

        .qa-modal-related-filter,

        .qa-modal-related-count {

            font-size: 11px;

        }



        .qa-record-errors-pill,

        .qa-side-match-st,

        .badge-pos-ok,

        .badge-pos-missing,

        .badge-pos-none,

        .badge-pos-empty {

            min-height: 20px;

            font-size: 10px;

            line-height: 1;

            padding: 2px 7px;

        }



        .status-icon {

            height: 22px;

            min-height: 22px;

            font-size: 10px;

            line-height: 1;

            padding: 2px 8px;

        }