/* report.css — pantalla "Reporte de validación" (§3.5–§3.11). */

.report-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 34px 24px 42px;
}

.report-view > * {
    width: 100%;
    max-width: var(--column);
}

/* ── Barra superior ───────────────────────────────────────── */
.report-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
}

.report-toolbar__title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
}

.report-toolbar__download {
    border-color: transparent;
}

/* En desktop el botón lleva label y no icono; en mobile es un icon button. */
.report-toolbar__download .icon {
    display: none;
    width: 20px;
    height: 20px;
}

/* El icono de retroceso cambia de glifo entre plataformas (§2.5). */
.btn .icon--back-mobile {
    display: none;
    transform: scaleX(-1);
}

/* ── Tarjeta del documento ────────────────────────────────── */
.doc-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 28px;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.doc-card__label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-secondary);
}

.doc-card__name {
    margin: 5px 0 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.field__label {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
}

.field__value {
    margin-top: 3px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* Contador de firmas sobre las tabs: solo mobile y solo sin firmas (§3.11).
   En desktop no existe, así que se oculta aquí y se muestra en la media query. */
.report-count {
    display: none;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ── Pestañas ─────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-sm);
}

.tab {
    flex: 1;
    padding: 6px 12px;
    border: none;
    border-bottom: 1px solid transparent;
    background: none;
    color: var(--text-tertiary);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.tab:hover {
    color: var(--text-secondary);
}

.tab.is-active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ── Panel y tarjeta ──────────────────────────────────────── */
/* El panel es solo el contenedor de la pestaña; lo blanco es la tarjeta, para
   que el enlace "Ver reporte ETSI completo" pueda quedar fuera de ella. */
.panel {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.panel.is-active {
    display: flex;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.panel__title {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: var(--text-primary);
}

.panel__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.panel__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Filtros por estado */
.filters {
    display: flex;
    gap: 7px;
    padding: 4px;
    border-radius: var(--radius-md);
    background: var(--surface-alt);
    overflow-x: auto;
    scrollbar-width: none;
}

.filters::-webkit-scrollbar {
    display: none;
}

/* Los chips de la pestaña ETSI solo existen en mobile. */
.filters--etsi {
    display: none;
}

/* El anillo va por dentro del chip: la tira que los contiene tiene `overflow-x: auto`
   y 4 px de padding, así que uno dibujado por fuera se recorta o provoca scroll. */
.filter:focus-visible {
    outline-offset: -2px;
}

.filter {
    padding: 4px 16px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.filter.is-active {
    background: var(--surface);
    color: var(--text-primary);
}

/* Un chip sin coincidencias sigue habilitado: al pulsarlo el listado queda
   vacío, que es lo que el diseño espera (§3.5 C). */

/* ── Ordenamiento ─────────────────────────────────────────── */
.sort {
    position: relative;
    flex-shrink: 0;
}

.sort-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
}

.sort-btn img {
    width: 16px;
    height: 16px;
    display: block;
}

.sort-popup {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    min-width: 142px;
    padding: 8px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.sort.is-open .sort-popup {
    display: block;
}

.sort-popup__title {
    margin: 0 0 8px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-secondary);
}

.sort-popup__options {
    display: flex;
    flex-direction: column;
}

.sort-popup__options button {
    padding: 8px 16px;
    border: none;
    background: none;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.sort-popup__options button:hover {
    background: var(--background);
}

.sort-popup__options button.is-active {
    font-weight: 600;
    color: var(--primary);
}

/* ── Listado de firmas (Resumen) ──────────────────────────── */
.sig-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sig-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Al enfocarla se oscurece su propio borde. El contorno general no vale aquí: la
   tarjeta lleva `overflow: hidden`, así que un anillo dibujado por su cabecera queda
   recortado por los cuatro lados. Lo mismo le pasa a la tarjeta ETSI, más abajo. */
.sig-item:has(.sig-item__header:focus-visible) {
    border-color: var(--text-primary);
}

.sig-item__header:focus-visible {
    outline: none;
}

.sig-item__header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: var(--surface);
    text-align: left;
    cursor: pointer;
}

.sig-item.is-open .sig-item__header {
    background: var(--background);
    border-bottom: 1px solid var(--border);
}

.sig-item__identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sig-item__name {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.sig-item.is-open .sig-item__name {
    font-weight: 500;
    color: var(--text-primary);
}

.sig-item__meta {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-meta);
    overflow-wrap: anywhere;
}

.sig-item.is-open .sig-item__meta {
    font-size: 12px;
    line-height: 16px;
}

.sig-item__status,
.sig-item__chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.sig-item.is-open .sig-item__chevron {
    transform: scaleY(-1);
}

.sig-item__body {
    display: none;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

.sig-item.is-open .sig-item__body {
    display: flex;
}

/* Siempre 2 columnas fijas, nunca auto-fit: ningún .sig-row lleva más de 2
   campos, pero la fila de empresa (Organización / Posición de firmante) a veces
   trae solo uno. Con auto-fit ese campo solitario ocupaba las dos columnas
   (670px en vez de 319px+319px) porque la pista vacía colapsa y la que queda
   se estira a todo el ancho; con columnas fijas se queda en la izquierda y la
   derecha se ve en blanco, igual que en el resto de filas. */
.sig-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 32px;
}

.sig-row .field__label {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
}

.sig-row .field__value {
    margin-top: 4px;
    font-weight: 500;
}

/* ── Estado vacío ─────────────────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 428px;
    text-align: center;
}

.empty-state__icon {
    width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--surface-alt);
}

.empty-state__icon img {
    width: 42.5px;
    height: 42.5px;
    display: block;
}

.empty-state__title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: var(--text-primary);
}

.empty-state__text {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
}

/* ── Árbol de diagnóstico ─────────────────────────────────── */
/* El diseño dibuja un raíl vertical a la izquierda con el icono de cada nodo encima.
   Se reproduce tramo a tramo —cada nodo lleva el suyo, ver más abajo— y los iconos van
   sobre él con fondo opaco, que es lo que lo recorta a su paso. */
.tree {
    /* El hueco entre nodos, que es también lo que cada tramo de raíl tiene que bajar
       para alcanzar el icono del siguiente. Una sola cifra para las dos cosas. */
    --tree-gap: 16px;
    display: flex;
    flex-direction: column;
    gap: var(--tree-gap);
}

/* Cada nodo lleva el tramo de raíl que baja hasta el icono del siguiente, así el
   último no arrastra una línea que no une con nada. Por eso el tramo se ancla al propio
   nodo y no al contenedor: los que se pliegan se llevan su tramo con ellos. */
.tree > *::before,
.tree-chain > *::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: calc(var(--tree-gap) * -1);
    width: 1px;
    background: var(--border);
}

.tree > *:last-child::before,
.tree-chain > *:last-child::before {
    content: none;
}

.tree > *::before {
    left: 12px;
}

.tree-signer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--tree-gap);
}

.tree-signer__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    padding: 0 0 0 36px;
    border: none;
    background: none;
    text-align: left;
}

/* Solo es botón cuando hay cadena que plegar; sin ella la cabecera es un div. */
button.tree-signer__header {
    cursor: pointer;
}

.tree-node__icon {
    position: absolute;
    left: 4px;
    top: 0;
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    padding: 4px 0;
    display: block;
    background: var(--surface);
}

.tree-chain .tree-node__icon {
    left: 0;
}

.tree-signer__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tree-signer__kicker {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--text-primary);
}

.tree-signer__name {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.tree-signer__date {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
}

.tree-signer__chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 4px;
    display: block;
}

.tree-signer.is-open .tree-signer__chevron {
    transform: scaleY(-1);
}

.tree-events {
    display: none;
    flex-direction: column;
    gap: var(--tree-gap);
}

.tree-signer.is-open .tree-events {
    display: flex;
}

/* Grupo de certificados: raíl anidado, un nivel más adentro. */
.tree-chain {
    display: flex;
    flex-direction: column;
    gap: var(--tree-gap);
    margin-left: 36px;
}

.tree-chain > *::before {
    left: 8px;
}

.tree-event {
    position: relative;
    padding-left: 36px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tree-chain .tree-event {
    padding-left: 26px;
}

.tree-event__line {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.tree-event__label {
    font-weight: 500;
}

.tree-event__date {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
}

/* ── Validación ETSI ──────────────────────────────────────── */
.etsi-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.etsi-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Mismo caso que .sig-item: el overflow recortaría el anillo de la cabecera. */
.etsi-card:has(.etsi-card__header:focus-visible) {
    border-color: var(--text-primary);
}

.etsi-card__header:focus-visible {
    outline: none;
}

.etsi-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    border: none;
    background: var(--surface);
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #16233d;
    cursor: pointer;
}

.etsi-card.is-open .etsi-card__header {
    background: var(--background);
    border-bottom: 1px solid var(--border);
}

.etsi-card__chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.etsi-card.is-open .etsi-card__chevron {
    transform: scaleY(-1);
}

.etsi-card__rows {
    display: none;
}

.etsi-card.is-open .etsi-card__rows {
    display: block;
}

.etsi-row {
    display: grid;
    grid-template-columns: minmax(200px, 234fr) minmax(180px, 250fr) 145px;
    align-items: center;
    gap: 16px;
    padding: 8px 24px;
    border-bottom: 1px solid var(--border);
}

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

.etsi-row__field {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--text-primary);
}

.etsi-row__key {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-secondary);
}

.etsi-row__value {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

/* Reporte ETSI completo: el XML crudo de DSS, bajo la tarjeta. */
.etsi-full {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.etsi-full__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    cursor: pointer;
}

.etsi-full__toggle img {
    width: 16px;
    height: 16px;
    display: block;
}

.etsi-full.is-open .etsi-full__toggle img {
    transform: scaleY(-1);
}

.etsi-full__body {
    display: none;
    width: 100%;
    padding: 24px;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.etsi-full.is-open .etsi-full__body {
    display: block;
}

.etsi-xml {
    margin: 0;
    max-height: 615px;
    overflow: auto;
    padding: 16px;
    background: var(--surface-alt);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 18px;
    color: var(--text-strong);
    white-space: pre;
    tab-size: 2;
}

/* Resaltado de sintaxis XML (lo aplica validador-front.js). */
.etsi-xml .xml-tag { color: #4318c0; }
.etsi-xml .xml-attr { color: #007b43; }
.etsi-xml .xml-value { color: #b50e04; }
.etsi-xml .xml-comment { color: var(--text-tertiary); font-style: italic; }

/* Acotación técnica junto a un valor (p. ej. el ByteRange del alcance de firma) */
.field__detail {
    font-weight: 400;
    color: var(--text-secondary);
}

/* ── Mobile 390 ───────────────────────────────────────────── */
@media (max-width: 720px) {
    .report-view {
        gap: 14px;
        padding: 24px 16px;
    }

    .report-toolbar__title {
        position: static;
        transform: none;
        flex: 1;
        text-align: center;
        font-size: 16px;
        line-height: 24px;
        white-space: normal;
    }

    .btn .icon--back-desktop {
        display: none;
    }

    .btn .icon--back-mobile {
        display: block;
    }

    /* La acción de descarga pasa a icon button sin label. */
    .report-toolbar__download {
        width: 20px;
        height: 20px;
        padding: 0;
        gap: 0;
        border: none;
        background: none;
        filter: none;
    }

    .report-toolbar__download:hover {
        background: none;
    }

    .report-toolbar__download .icon {
        display: block;
    }

    .report-toolbar__download-label {
        display: none;
    }

    .doc-card {
        padding: 16px;
        gap: 12px;
    }

    .doc-card__name {
        font-size: 16px;
        line-height: 24px;
    }

    .card {
        padding: 14px;
    }

    /* El menú de pestañas se desplaza en horizontal. */
    .tabs {
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0;
    }

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tab {
        flex: 0 0 auto;
        padding: 6px 12px;
        font-size: 16px;
        line-height: 24px;
    }

    .filters--etsi {
        display: flex;
    }

    .report-count:not(.is-hidden) {
        display: block;
    }

    /* La fila colapsada apunta a la derecha en mobile (lucide/chevron-right). */
    .sig-item__chevron {
        transform: rotate(-90deg);
    }

    .panel__toolbar {
        align-items: flex-start;
    }

    /* Filas y árbol: los datos se apilan en una sola columna. */
    .sig-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .etsi-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .etsi-card__header {
        padding: 16px;
    }

    .etsi-row {
        padding: 8px 16px;
    }

    /* El reporte ETSI completo no está diseñado en mobile (§2.5). */
    .etsi-full {
        display: none;
    }

    .tree-chain {
        margin-left: 24px;
    }
}