/* 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;
    /* El padding de 4 px y el gap de 7 px dejan sitio al anillo de foco del chip
       (2 + 2 px por fuera): la tira lo recortaría por su overflow. */
}

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

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

.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;
}

/* El anillo de foco lo dibuja la tarjeta, no su cabecera: la tarjeta lleva
   `overflow: hidden`, así que un anillo de la cabecera queda recortado por los cuatro
   lados, mientras que la sombra de la propia tarjeta no la recorta su overflow. Lo
   mismo le pasa a la tarjeta ETSI, más abajo. */
.sig-item:has(.sig-item__header:focus-visible) {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--focus-shadow);
}

.sig-item__header:focus-visible {
    outline: none;
    box-shadow: 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;
}

/* Abrir la tarjeta solo cambia el fondo de la cabecera: el nombre y la línea de
   abajo se quedan con el mismo tamaño y peso que en la fila colapsada. */
.sig-item__meta {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-meta);
    overflow-wrap: anywhere;
}

.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) {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--focus-shadow);
}

.etsi-card__header:focus-visible {
    outline: none;
    box-shadow: 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;
    }
}