/* upload.css — pantalla "Valida tu documento firmado" (§3.1) y los errores
   inline de carga (§3.2).

   La tarjeta de error terminal vive en terminal.css: la comparten esta pantalla y
   la página de error global, así que no es de aquí. */

.upload-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.upload-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 100%;
    max-width: var(--column-upload);
}

.upload-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    width: 100%;
}

.upload-intro h1 {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--text-primary);
}

.upload-intro p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-secondary);
}

/* El bloque tarjeta + error inline: el mensaje va pegado bajo la tarjeta y por
   encima de los badges de formato. */
.upload-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.upload-card {
    width: 100%;
    padding: 24px;
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Zona de arrastre */
/* El input real va oculto con .sr-only —una caja de 1x1 recortada—, así que su anillo
   de foco no se ve. Lo dibuja la dropzone, que es lo que la persona tiene delante. */
.dropzone:has(#fileInput:focus-visible) {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px;
    background: var(--background);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.dropzone:hover,
.dropzone.is-active {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* Con un archivo ya aceptado la zona queda deshabilitada: ni acepta drop ni
   click, y baja a la opacidad de "disabled" del design system. */
.upload-card.has-file .dropzone {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.upload-card.has-file .dropzone:hover {
    border-color: var(--border);
    background: var(--background);
}

/* Excepción: mientras falta el documento de una firma CAdES detached la zona
   sigue activa, porque es por donde entra ese segundo archivo (§3.2). */
.upload-card.has-file.is-awaiting .dropzone {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

.upload-card.has-file.is-awaiting .dropzone:hover,
.upload-card.has-file.is-awaiting .dropzone.is-active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.dropzone__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.dropzone__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--primary-light);
}

.dropzone__icon img {
    width: 24px;
    height: 24px;
    display: block;
}

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

.dropzone__hint {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-secondary);
    text-align: center;
    text-wrap: balance;
}

/* Ítems de archivo seleccionado / en curso */
.file-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.file-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.file-item__row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.file-item__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--success-light);
}

.file-item__icon img {
    width: 16px;
    height: 16px;
    display: block;
}

/* Mientras el archivo entra sigue siendo un documento, así que el icono es el del
   documento sobre el morado de marca. Quien cuenta que algo está pasando es la barra,
   que avanza con bytes de verdad: no hace falta un spinner encima. */
.file-item.is-loading .file-item__icon {
    background: var(--primary-light);
}

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

.file-item__name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.file-item__meta {
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary);
}

.file-item__action {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.file-item__action img {
    width: 24px;
    height: 24px;
    display: block;
}

.file-item__progress {
    height: 8px;
    border-radius: var(--radius-full);
    background: rgba(67, 24, 192, 0.2);
    overflow: hidden;
}

.file-item__bar {
    height: 100%;
    width: 0;
    border-radius: var(--radius-full);
    background: var(--primary);
    /* validador-front.js reparte el suelo de la barra contando con esta duración
       (TRANSICION_DE_BARRA_MS). Si cambia aquí, cambia allí. */
    transition: width 0.2s ease-out;
}

/* CTA "Validar": 188 px en desktop, ancho completo en mobile. */
.upload-cta {
    width: 188px;
}

/* Formatos soportados */
.upload-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* ── Error inline de carga (§3.2) ─────────────────────────── */
/* El contenedor vive siempre en el DOM con aria-live para que el lector de
   pantalla anuncie el mensaje al aparecer sin tener que buscarlo. */
.upload-error {
    display: none;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.upload-error.is-visible {
    display: flex;
}

.upload-error__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 2px;
}

.upload-error__icon img {
    width: 16px;
    height: 16px;
    display: block;
}

.upload-error__text {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: var(--error-base);
}


@media (max-width: 720px) {
    .upload-view {
        padding: 24px 16px;
    }

    .upload-stack {
        gap: 20px;
    }

    .upload-card {
        padding: 16px;
    }

    .dropzone {
        padding: 24px;
        border-radius: var(--radius-md);
    }

    .upload-cta {
        width: 100%;
    }
}