/* ============================================================================
   Flujo público del solicitante (wizard /v/{slug}) — módulo de Verificaciones.

   POR QUÉ ESTE ARCHIVO Y NO TAILWIND:
   app.css es un bundle de Tailwind YA COMPILADO Y PURGADO que no se puede
   regenerar desde este repo. Cualquier utilidad que el app no use hoy (w-48,
   max-w-lg, px-8...) simplemente NO EXISTE, así que el wizard salía con medidas
   y espaciados aleatorios. Todo lo del flujo público se define aquí, con prefijo
   verif- para no tocar nada del resto del app.

   Se carga desde Pages/_Host.cshtml.
   Paleta tomada del bundle: primary #4669fa, success #50c793, danger #f1595c,
   warning #fa916b.
   ========================================================================== */

/* --------------------------------------------------------------- Contenedor --- */
/* El flujo se sirve con VerifLayout (sin header/footer del panel): esta capa pinta
   el fondo de toda la pantalla para que la experiencia se sienta de una pieza. */
.verif-shell {
    min-height: 100vh;
    min-height: 100dvh;
    background: #f4f6fa;
    font-family: "Source Sans Pro", ui-sans-serif, system-ui, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* Marca del cliente: solo el logo, sin barra ni bordes. */
.verif-brandbar {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 0;
}

.verif-brandbar img {
    height: 30px;
    max-width: 60%;
    object-fit: contain;
}

.verif-flow {
    --v-primary: #4669fa;
    --v-primary-dark: #3f5edf;
    --v-primary-soft: #edf0ff;
    --v-success: #50c793;
    --v-success-soft: #f3fef8;
    --v-danger: #f1595c;
    --v-danger-soft: #fef2f2;
    --v-warning: #fa916b;
    --v-warning-soft: #fff7ed;

    --v-ink: #1e293b;
    --v-ink-soft: #475569;
    --v-ink-faint: #94a3b8;
    --v-surface: #ffffff;
    --v-line: #e8ecf4;

    --v-radius: 1rem;
    --v-radius-sm: 0.625rem;
    --v-gap: 1rem;

    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
    box-sizing: border-box;
    font-family: "Source Sans Pro", ui-sans-serif, system-ui, sans-serif;
    color: var(--v-ink);
    -webkit-text-size-adjust: 100%;
}

/* En tablet/escritorio el flujo no se estira: solo respira más. */
@media (min-width: 640px) {
    .verif-flow {
        max-width: 32rem;
        padding: 2rem 1rem 3rem;
    }
}

.verif-flow *,
.verif-flow *::before,
.verif-flow *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------ App shell --- */
/* El flujo se comporta como app: barra superior fija (marca + progreso), cuerpo
   con scroll propio y la acción primaria anclada abajo, siempre al alcance del
   pulgar. En escritorio el mismo bloque se centra como tarjeta alta. */
.verif-flow.verif-app {
    max-width: 30rem;
    padding: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--v-surface);
    overflow: hidden;
}

@media (min-width: 640px) {
    .verif-flow.verif-app {
        height: min(880px, calc(100dvh - 4rem));
        margin: 2rem auto;
        border: 1px solid var(--v-line);
        border-radius: 1.5rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 48px -24px rgba(15, 23, 42, .25);
    }
}

.verif-appbar {
    flex: none;
    padding: max(0.875rem, env(safe-area-inset-top)) 1.25rem 0;
    background: var(--v-surface);
}

.verif-appbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.375rem;
}

.verif-appbar-slot {
    width: 2rem;
    flex: none;
    display: flex;
}

.verif-iconbtn {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5625rem;
    border: 1px solid var(--v-line);
    background: var(--v-surface);
    color: var(--v-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.verif-iconbtn iconify-icon { font-size: 1.125rem; }
.verif-iconbtn:disabled { opacity: .4; cursor: default; }

.verif-appbar-brand {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.verif-appbar-brand img {
    height: 22px;
    max-width: 100%;
    object-fit: contain;
}

.verif-appbar-brand span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Candado: recuerda que la sesión es segura sin gritarlo. */
.verif-secure {
    color: var(--v-ink-faint);
    display: flex;
    justify-content: flex-end;
}

.verif-progress { padding: 0.5rem 0 0.75rem; }

.verif-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--v-ink-faint);
    margin-bottom: 0.375rem;
}

.verif-progress-meta b { color: var(--v-ink-soft); font-weight: 600; }

.verif-progress-track {
    height: 3px;
    border-radius: 2px;
    background: #eaeef4;
    overflow: hidden;
}

.verif-progress-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--v-primary);
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

.verif-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.125rem 1.25rem 1.5rem;
}

/* Pantallas de estado: el contenido se centra en el alto disponible. */
.verif-body.is-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.verif-actions {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem max(1rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--v-line);
    background: var(--v-surface);
}

/* Halo del icono en las pantallas de estado (más presencia que la insignia). */
.verif-halo {
    width: 4.125rem;
    height: 4.125rem;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    background: var(--v-primary-soft);
    color: var(--v-primary);
}

.verif-halo iconify-icon { font-size: 1.875rem; }
.verif-halo.is-success { background: var(--v-success-soft); color: var(--v-success); }
.verif-halo.is-danger  { background: var(--v-danger-soft);  color: var(--v-danger); }
.verif-halo.is-warning { background: var(--v-warning-soft); color: var(--v-warning); }

/* ------------------------------------------------- Bloques del consentimiento --- */
.verif-eyebrow {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--v-ink-faint);
    margin-bottom: 0.5rem;
}

/* Domicilio declarado: el solicitante confirma que está en el lugar correcto. */
.verif-addr {
    display: flex;
    gap: 0.6875rem;
    align-items: flex-start;
    margin: 1.125rem 0;
    padding: 0.875rem;
    border: 1px solid var(--v-line);
    border-radius: 0.875rem;
    background: #f8fafd;
}

.verif-addr iconify-icon { color: var(--v-primary); font-size: 1.125rem; flex: none; margin-top: 0.1rem; }
.verif-addr-t { font-size: 13.5px; line-height: 1.45; font-weight: 500; }

/* Qué va a pasar: expectativa antes de empezar. */
.verif-steplist { margin: 0 0 1.125rem; }

.verif-steplist-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.6875rem 0;
    border-bottom: 1px solid #f2f5f9;
}

.verif-steplist-item:last-child { border-bottom: 0; }

.verif-steplist-i {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.625rem;
    background: #f4f7fc;
    color: var(--v-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.verif-steplist-t { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.verif-steplist-d { font-size: 12.5px; line-height: 1.45; color: var(--v-ink-faint); margin-top: 1px; }

.verif-legal {
    background: #f8fafd;
    border-radius: 0.875rem;
    padding: 0.875rem;
    margin-bottom: 0.875rem;
}

.verif-legal p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--v-ink-soft); }

/* Enlace al aviso de privacidad: custom.css fija 15px a todo <a>, aquí hereda el del
   párrafo. La URL completa no tiene espacios: se parte donde haga falta en un teléfono. */
.verif-legal a { font-size: inherit; overflow-wrap: anywhere; }

/* Aceptación explícita (LFPDPPP): casilla, no un "si continúas aceptas". */
.verif-consent {
    display: flex;
    gap: 0.6875rem;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    background: var(--v-surface);
    border: 1px solid #e1e7f0;
    border-radius: 0.8125rem;
    padding: 0.875rem;
    font: inherit;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--v-ink);
    cursor: pointer;
    /* Era un <button>: su texto no se seleccionaba al tocarlo varias veces. */
    -webkit-user-select: none;
    user-select: none;
}

/* Ya no es un botón nativo: el anillo de foco para teclado se pinta aquí. */
.verif-consent:focus-visible {
    outline: 2px solid var(--v-primary);
    outline-offset: 2px;
}

.verif-consent.is-on {
    border-color: var(--v-primary);
    background: var(--v-primary-soft);
}

.verif-consent-box {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.375rem;
    border: 1.5px solid #cbd3e0;
    background: var(--v-surface);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: transparent;
}

.verif-consent.is-on .verif-consent-box {
    background: var(--v-primary);
    border-color: var(--v-primary);
    color: #fff;
}

.verif-consent-box iconify-icon { font-size: 0.875rem; }

/* ------------------------------------------ Aviso de privacidad (modal) --- */
/* Solo para el aviso tipo Texto (Url y default abren pestaña nueva). Hoja inferior en
   móvil, tarjeta centrada desde tablet; el cuerpo con scroll propio para avisos largos. */
.verif-modal-velo {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: 1rem;
    background: rgba(15, 23, 42, .45);
}

.verif-modal {
    width: 100%;
    max-width: 30rem;
    max-height: 85vh;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    background: var(--v-surface);
    color: var(--v-ink);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .18);
    outline: none;
}

@media (min-width: 640px) {
    .verif-modal-velo { align-items: center; padding: 2rem 1rem; }
    .verif-modal { border-radius: 1.25rem; box-shadow: 0 18px 48px -12px rgba(15, 23, 42, .35); }
}

.verif-modal-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--v-line);
}

/* El color se fija aquí: custom.css tiñe los h1-h6 del app con otro tono. */
.verif-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--v-ink);
}

.verif-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--v-ink-soft);
    overflow-wrap: anywhere;
}

/* El contenido es HTML del cliente y custom.css fija tamaños POR ELEMENTO (p, span, li y a
   a 15px; h1-h6 al tamaño del panel): todo hereda el cuerpo y los encabezados no rebasan
   el título del modal. Las listas recuperan su viñeta (el reset de Tailwind la quita). */
.verif-modal-body * { font-size: inherit; max-width: 100%; }
.verif-modal-body :is(h1, h2, h3, h4, h5, h6) { margin: 0.875rem 0 0.375rem; font-size: 14px; color: var(--v-ink); }
.verif-modal-body p { margin: 0 0 0.625rem; }
.verif-modal-body ul,
.verif-modal-body ol { margin: 0 0 0.625rem; padding-left: 1.25rem; }
.verif-modal-body ul { list-style: disc; }
.verif-modal-body ol { list-style: decimal; }

/* ------------------------------------------ Antesala del paso biométrico --- */
.verif-tips {
    display: flex;
    flex-direction: column;
    gap: 0.6875rem;
    margin: 1.25rem 0;
}

.verif-tip {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.45;
    color: var(--v-ink-soft);
}

.verif-tip iconify-icon { color: var(--v-primary); font-size: 1rem; flex: none; margin-top: 0.15rem; }

.verif-vendor {
    display: flex;
    gap: 0.6875rem;
    align-items: center;
    background: #f8fafd;
    border: 1px solid var(--v-line);
    border-radius: 0.875rem;
    padding: 0.8125rem;
}

.verif-vendor-mark {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.5625rem;
    background: var(--v-ink);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Paso Veriff (VerifVeriffComponent): cabecera centrada sobre instrucciones que se leen
   de izquierda a derecha (permiso de cámara). */
.verif-veriff-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Solo para lector de pantalla: anuncia el cambio de pantalla del paso (aria-live). */
.verif-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------ Captura de cámara (1 foto) --- */
/* Un SOLO marco para todos los estados —vacío, cámara en vivo, foto por confirmar
   y foto guardada—: la caja nunca cambia de tamaño, solo cambia lo que hay dentro
   y los botones de abajo. Antes cada estado tenía su propio tamaño (el botón, el
   video grande, y al guardar una miniatura chiquita) y parecían tres controles
   distintos. Estas clases viven aquí, no en el componente, porque verif-public.css
   se carga en todas las páginas: el expediente usa el mismo control. */
.verif-cam-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 58vh;
    border-radius: 1rem;
    overflow: hidden;
    background: #eef1f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verif-cam-stage.is-live,
.verif-cam-stage.is-preview { background: #0a0e17; }

.verif-cam-stage > video,
.verif-cam-stage > canvas,
.verif-cam-stage > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.verif-cam-stage.is-saved > img { object-fit: cover; }

/* Zona vacía: invita a abrir la cámara ocupando ya el espacio que tendrá la foto. */
.verif-cam-drop {
    width: 100%;
    height: 100%;
    border: 1.5px dashed #d5dde9;
    border-radius: 1rem;
    background: #fbfcfe;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font: inherit;
    color: var(--v-ink, #1e293b);
    cursor: pointer;
}

.verif-cam-drop:disabled { opacity: .6; cursor: default; }

.verif-cam-drop-i {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.9375rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(11, 18, 32, .09);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.verif-cam-drop-i iconify-icon { font-size: 1.625rem; color: var(--v-primary, #4669fa); }
.verif-cam-drop-t { font-size: 15px; font-weight: 600; }
.verif-cam-drop-d { font-size: 12px; color: #a3acbc; }

/* Sello de ubicación y hora sobre la foto (informativo: no va en el archivo). */
.verif-cam-stamp {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 7px;
    background: rgba(10, 14, 23, .62);
    color: #fff;
    font-size: 10.5px;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.verif-cam-stamp iconify-icon { font-size: 11px; }

.verif-cam-ok {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--v-success, #50c793);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verif-cam-ok iconify-icon { font-size: 0.8125rem; }

/* Velo "Procesando" (spec 2026-09-29 §A.4): encima de la foto mientras la foto y el video se
   guardan; el wizard además deshabilita Atrás y Continuar. */
.verif-cam-procesando {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
    background: rgba(10, 14, 23, .62);
    color: #fff;
    backdrop-filter: blur(2px);
}

.verif-cam-procesando-i { font-size: 2.25rem; }
.verif-cam-procesando-t { font-size: 15px; font-weight: 600; }
.verif-cam-procesando-d { font-size: 12.5px; opacity: .9; max-width: 16rem; line-height: 1.4; }

/* Barra de acciones bajo el marco: siempre en el mismo lugar. */
.verif-cam-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-top: 0.75rem;
}

.verif-cam-actions .btn { width: 100%; }

/* Chip con spinner mientras sube. */
.verif-cam-meta .verif-spin {
    width: 13px;
    height: 13px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(148, 163, 184, .35);
    border-top-color: var(--v-primary, #4669fa);
    border-radius: 50%;
    display: inline-block;
}

.verif-cam-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.verif-cam-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v-primary, #4669fa);
    cursor: pointer;
}

/* --------------------------------------- Opciones como tarjetas (móvil) --- */
/* Sí/No, opción única y casillas dejan de ser controles de escritorio (radios
   diminutos, select) y pasan a tarjetas de 54 px, que es lo que se puede tocar
   con el pulgar sin fallar. Lo activa el parámetro OptionCards de
   ItemQuestionForm: el expediente sigue con sus controles de siempre. */
.verif-opts {
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    margin-top: 0.25rem;
}

.verif-opts.is-row { flex-direction: row; }

.verif-opt {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    width: 100%;
    min-height: 54px;
    padding: 0.8125rem 0.9375rem;
    text-align: left;
    border: 1.5px solid #e7ecf3;
    border-radius: 0.8125rem;
    background: var(--v-surface);
    font: inherit;
    font-size: 15px;
    line-height: 1.35;
    color: var(--v-ink);
    cursor: pointer;
    transition: border-color .13s, background-color .13s;
}

.verif-opts.is-row .verif-opt { flex: 1; justify-content: center; font-weight: 600; }

.verif-opt:hover { border-color: #c9d3e2; }

.verif-opt.is-on {
    border-color: var(--v-primary);
    background: var(--v-primary-soft);
    font-weight: 600;
}

.verif-radio {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 1.5px solid #cbd3e0;
    flex: none;
}

.verif-opt.is-on .verif-radio { border: 6px solid var(--v-primary); }

.verif-checkbox {
    width: 19px;
    height: 19px;
    border-radius: 6px;
    border: 1.5px solid #cbd3e0;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}

.verif-checkbox iconify-icon { font-size: 0.75rem; }

.verif-opt.is-on .verif-checkbox {
    background: var(--v-primary);
    border-color: var(--v-primary);
    color: #fff;
}

/* ------------------------------------- Varias fotos en una misma pregunta --- */
.verif-cam-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.verif-cam-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 0.625rem;
    overflow: hidden;
    border: 1px solid var(--v-line);
    background: #eef1f6;
}

.verif-cam-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Siempre visible: en móvil no hay :hover donde esconderlo. */
.verif-cam-thumb button {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(10, 14, 23, .72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.verif-cam-thumb button iconify-icon { font-size: 0.75rem; }

.verif-cam-thumb.is-pending::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .45);
}

.verif-cam-count {
    font-size: 12.5px;
    color: var(--v-ink-faint);
    margin-top: 0.5rem;
}

/* ------------------------------------------------- Pre-check de permisos --- */
.verif-perms {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.25rem 0;
}

.verif-perm {
    display: flex;
    align-items: center;
    gap: 0.6875rem;
    border: 1px solid var(--v-line);
    border-radius: 0.8125rem;
    padding: 0.75rem 0.8125rem;
}

.verif-perm-i {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.625rem;
    background: #f4f7fc;
    color: var(--v-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.verif-perm.is-ok .verif-perm-i   { background: var(--v-success-soft); color: var(--v-success); }
.verif-perm.is-bad  { border-color: #f6d4d1; }
.verif-perm.is-bad .verif-perm-i  { background: var(--v-danger-soft); color: var(--v-danger); }
.verif-perm.is-warn .verif-perm-i { background: var(--v-warning-soft); color: var(--v-warning); }

/* Etiqueta de estado del permiso. */
.verif-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    flex: none;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 20px;
    white-space: nowrap;
    background: #f1f4f9;
    color: var(--v-ink-faint);
}

.verif-chip.is-ok   { background: var(--v-success-soft); color: #1a7a4c; }
.verif-chip.is-bad  { background: var(--v-danger-soft);  color: #b42318; }
.verif-chip.is-warn { background: var(--v-warning-soft); color: #9a5b0b; }

/* Spinner en la fila mientras el usuario responde el prompt del navegador. */
.verif-perm .verif-spin {
    width: 17px;
    height: 17px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--v-line);
    border-top-color: var(--v-primary);
    display: inline-block;
}

/* ------------------------------------------- Pregunta a pantalla completa --- */
/* El enunciado NO se duplica con un <h1> propio: se agranda la etiqueta que ya
   dibuja el componente compartido (así ninguna variante queda con dos títulos).
   Solo la de primer nivel — las dependientes conservan su tamaño normal. */
.verif-question-main > .input-area > .form-label,
.verif-question-main > .input-area > div > .form-label {
    display: block;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -.02em;
    color: var(--v-ink);
    /* El aire lo pone la regla de abajo, no esta etiqueta: así vale igual para
       cualquier control (input, selector, tarjetas, cámara...). */
    margin-bottom: 0;
    text-transform: none;
}

.verif-question-main > .input-area { margin-top: 0; }

/* La ayuda de la pregunta, justo debajo del enunciado. */
.verif-question-main > .input-area > div > p:first-of-type,
.verif-question-main > .input-area > p:first-of-type {
    font-size: 14px;
    line-height: 1.55;
    color: var(--v-ink-soft);
    margin: 0;
}

/* AIRE entre el enunciado (o su ayuda) y el control.

   Se aplica a "lo que siga" de la etiqueta o del texto de ayuda, en lugar de
   enumerar cada tipo de control: así el selector nativo, los inputs, las
   tarjetas de opción, el marco de la cámara y el campo de ubicación quedan todos
   con la misma separación. Con los 0.5rem de antes el control se leía pegado al
   enunciado, como una sola pieza.

   En px a propósito: VerifLayout NO carga el CSS del panel, así que aquí el rem
   vale 16 px y en las pantallas del panel 15 px (`html{font-size:15px}` de
   custom.css). Una medida visual como ésta no debe cambiar según dónde se pinte.
   Medido en el navegador: 14 px tanto tras el enunciado como tras la ayuda. */
.verif-question-main > .input-area > .form-label + *,
.verif-question-main > .input-area > div > .form-label + *,
.verif-question-main > .input-area > p:first-of-type + *,
.verif-question-main > .input-area > div > p:first-of-type + * {
    margin-top: 14px;
}

/* ------------------------------------------------------------- Revisión --- */
.verif-rev-sec { margin-top: 1.25rem; }

.verif-rev-h {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--v-ink-faint);
    padding-bottom: 0.375rem;
    border-bottom: 1px solid #eef2f7;
}

.verif-rev-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid #f4f7fa;
    padding: 0.75rem 0;
    font: inherit;
    cursor: pointer;
}

.verif-rev-row > span:first-child { min-width: 0; }

.verif-rev-q {
    display: block;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--v-ink-faint);
}

.verif-rev-a {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-top: 2px;
    color: var(--v-ink);
}

.verif-rev-edit {
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v-primary);
}

/* ---------------------------------------------------------------- Tarjeta --- */
.verif-card {
    background: var(--v-surface);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
    overflow: hidden;
}

.verif-card + .verif-card {
    margin-top: var(--v-gap);
}

/* Encabezado de la tarjeta: el ancla visual que hace que todas las pantallas se lean
   como la misma app. Gris muy claro (no una banda de color saturado) para que se
   parezca a lo que ya está en producción: superficies neutras y el azul reservado
   para acentos pequeños (botón, paso activo, enlaces). El estado (éxito/error/aviso)
   se comunica SOLO con el color de la insignia. */
.verif-card-brand {
    background: #f7f9fc;
    border-bottom: 1px solid var(--v-line);
    color: var(--v-ink);
    text-align: center;
    padding: 1.75rem 1.25rem 1.5rem;
}

.verif-card-body {
    padding: 1.25rem;
}

@media (min-width: 640px) {
    .verif-card-body { padding: 1.5rem; }
}

.verif-card-footer {
    padding: 0 1.25rem 1.25rem;
}

/* ------------------------------------------------------------- Tipografía --- */
/* El color se fija aquí: custom.css tiñe los h1-h6 del app con otro tono. */
.verif-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--v-ink);
}

.verif-subtitle {
    margin: 0.375rem 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--v-ink-faint);
}

.verif-lead {
    margin: 0 0 0.5rem;
    font-size: 16px;
    line-height: 1.6;
    color: var(--v-ink-soft);
}

.verif-help {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--v-ink-faint);
}

/* Leyenda del asterisco rojo (spec 2026-09-29 §C). */
.verif-leyenda-obligatorias { margin: 0.5rem 0 0.75rem; }

.verif-flow a {
    color: var(--v-primary);
    text-decoration: underline;
}

/* Insignia de icono, en banda de marca o sobre blanco. */
.verif-icon-badge {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 0.875rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v-primary-soft);
    color: var(--v-primary);
}

.verif-icon-badge iconify-icon { font-size: 1.75rem; }

/* Sobre el encabezado gris la insignia va en blanco, para que resalte. */
.verif-card-brand .verif-icon-badge {
    background: #fff;
    border: 1px solid var(--v-line);
}

.verif-icon-badge.is-success { background: var(--v-success-soft); color: var(--v-success); }
.verif-icon-badge.is-danger  { background: var(--v-danger-soft);  color: var(--v-danger); }
.verif-icon-badge.is-warning { background: var(--v-warning-soft); color: var(--v-warning); }

/* El estado del encabezado solo tiñe el icono. */
.verif-card-brand.is-success .verif-icon-badge { color: var(--v-success); }
.verif-card-brand.is-danger .verif-icon-badge  { color: var(--v-danger); }
.verif-card-brand.is-warning .verif-icon-badge { color: var(--v-warning); }

/* ------------------------------------------------------------------ Pasos --- */
.verif-steps {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--v-gap);
}

.verif-step {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
}

.verif-step:last-child { flex: 0 0 auto; }

.verif-step-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    flex: none;
}

.verif-step-dot {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: #e8ecf4;
    color: var(--v-ink-faint);
    transition: background-color .2s, color .2s;
}

.verif-step.is-active .verif-step-dot { background: var(--v-primary); color: #fff; }
.verif-step.is-done .verif-step-dot   { background: var(--v-success); color: #fff; }

.verif-step-label {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--v-ink-faint);
}

.verif-step.is-active .verif-step-label { color: var(--v-primary); }
.verif-step.is-done .verif-step-label   { color: var(--v-success); }

.verif-step-bar {
    flex: 1 1 auto;
    height: 2px;
    margin: 0 0.5rem;
    margin-top: -1.1rem;
    border-radius: 999px;
    background: #e8ecf4;
}

.verif-step.is-done .verif-step-bar { background: var(--v-success); }

/* ----------------------------------------------------------------- Avisos --- */
.verif-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--v-radius-sm);
    border: 1px solid var(--v-line);
    background: #f8fafc;
    font-size: 14px;
    line-height: 1.55;
    color: var(--v-ink-soft);
}

.verif-notice iconify-icon {
    flex: none;
    font-size: 1.125rem;
    margin-top: 0.05rem;
}

.verif-notice p { margin: 0; }
.verif-notice + .verif-notice,
.verif-notice + .verif-card,
.verif-card + .verif-notice { margin-top: var(--v-gap); }

.verif-notice-info    { background: var(--v-primary-soft); border-color: #dbe2ff; color: #34406b; }
.verif-notice-info iconify-icon { color: var(--v-primary); }
.verif-notice-warning { background: var(--v-warning-soft); border-color: #fed7aa; color: #7c3f16; }
.verif-notice-warning iconify-icon { color: var(--v-warning); }
.verif-notice-error   { background: var(--v-danger-soft);  border-color: #fecaca; color: #99282b; }
.verif-notice-error iconify-icon { color: var(--v-danger); }
.verif-notice-success { background: var(--v-success-soft); border-color: #bbf0d6; color: #1d6b4c; }
.verif-notice-success iconify-icon { color: var(--v-success); }

.verif-notice-title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.125rem;
}

/* Lista de requisitos / pasos numerados. */
.verif-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}

.verif-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 14px;
    line-height: 1.5;
    color: var(--v-ink-soft);
}

.verif-list li + li { margin-top: 0.75rem; }

.verif-list li > span:first-child {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--v-primary-soft);
    color: var(--v-primary);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verif-bullets {
    margin: 0.5rem 0 0;
    padding-left: 1.125rem;
    font-size: 13px;
    line-height: 1.6;
}

.verif-bullets li + li { margin-top: 0.25rem; }

/* ---------------------------------------------------------------- Botones --- */
/* OJO: el ancho NO se fuerza aquí. Los componentes compartidos (CameraCaptureField)
   traen sus propias clases de Tailwind (flex-1, w-full) y un width:100% de más rompe
   el reparto del flex: "Capturar" quedaba en 79 px con el texto una letra por
   renglón. Los botones propios piden el 100% más abajo. */
.verif-btn,
.verif-flow .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px; /* alcanzable con el pulgar; en px porque el app usa html{font-size:15px} */
    padding: 0.75rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--v-radius-sm);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
    background: var(--v-primary);
    color: #fff;
}

/* Los botones del propio flujo sí ocupan todo el ancho (una sola acción por paso). */
.verif-btn { width: 100%; }

.verif-btn iconify-icon,
.verif-flow .btn iconify-icon { font-size: 1.125rem; }

.verif-btn:disabled,
.verif-flow .btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.verif-btn-primary,
.verif-flow .btn-primary { background: var(--v-primary); border-color: var(--v-primary); color: #fff; }

.verif-btn-primary:not(:disabled):hover,
.verif-flow .btn-primary:not(:disabled):hover { background: var(--v-primary-dark); border-color: var(--v-primary-dark); }

.verif-btn-success { background: var(--v-success); border-color: var(--v-success); color: #fff; }
.verif-btn-success:not(:disabled):hover { background: #3fb783; border-color: #3fb783; }

.verif-btn-outline,
.verif-flow .btn-outline-primary,
.verif-flow .btn-outline-dark {
    background: #fff;
    border-color: #cbd5e1;
    color: var(--v-ink-soft);
}

.verif-btn-outline:not(:disabled):hover,
.verif-flow .btn-outline-primary:not(:disabled):hover,
.verif-flow .btn-outline-dark:not(:disabled):hover {
    border-color: var(--v-primary);
    color: var(--v-primary);
}

.verif-flow .btn-dark { background: var(--v-ink); border-color: var(--v-ink); color: #fff; }
.verif-flow .btn-dark:not(:disabled):hover { background: #0f172a; }

/* Fila de botones: apilados en móvil, en línea desde tablet. */
.verif-btn-row {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

@media (min-width: 480px) {
    .verif-btn-row { flex-direction: row; }
    .verif-btn-row .verif-btn { width: auto; flex: 1 1 auto; }
    .verif-btn-row .verif-btn.is-secondary { flex: 0 0 auto; }
}

/* -------------------------------------------------------------- QR/enlace --- */
.verif-qr {
    display: inline-block;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-sm);
}

.verif-qr img {
    display: block;
    width: min(11.5rem, 55vw);
    height: auto;
    aspect-ratio: 1 / 1;
}

.verif-url {
    margin-top: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-sm);
    background: #f8fafc;
    font-size: 12px;
    line-height: 1.5;
    color: var(--v-ink-soft);
    word-break: break-all;
}

.verif-divider {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--v-line);
}

.verif-center { text-align: center; }

/* Casilla con etiqueta al lado (banco de pruebas). */
.verif-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 14px;
    line-height: 1.45;
    color: var(--v-ink-soft);
}

.verif-check input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1rem;
    flex: none;
}

.verif-flow code {
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    background: var(--v-primary-soft);
    font-size: 13px;
}

/* Ruta de ajustes del sistema/navegador dentro de una instrucción. */
.verif-path {
    font-weight: 600;
    color: var(--v-ink);
    white-space: nowrap;
}

/* animate-spin de Tailwind puede no existir en el bundle purgado. */
.verif-spin { animation: verif-spin 1s linear infinite; }

@keyframes verif-spin {
    to { transform: rotate(360deg); }
}

.verif-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 3.5rem 1.25rem;
    color: var(--v-ink-faint);
    font-size: 14px;
}

.verif-loading iconify-icon {
    font-size: 2.5rem;
    color: var(--v-primary);
}

.verif-loading p { margin: 0; }

/* ------------------------------------------------- Formulario del wizard --- */
/* El paso de formulario reusa los componentes compartidos del expediente
   (ItemQuestionForm, CameraCaptureField...), que traen las clases del panel
   administrativo. Se re-alinean SOLO dentro de .verif-flow. */
.verif-section {
    padding-top: 0.5rem;
}

.verif-section + .verif-section { margin-top: 1.5rem; }

.verif-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--v-ink);
}

.verif-section-desc {
    margin: 0.25rem 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--v-ink-faint);
}

.verif-form-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--v-ink);
}

.verif-flow .form-label,
.verif-flow label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--v-ink);
    text-transform: none;
}

/* OJO con `input[type=text]`: InputText de Blazor renderiza el <input> SIN atributo
   type, así que ese selector no lo alcanzaba y los campos de texto se quedaban en
   38 px (los demás en 44). Se listan por exclusión. */
.verif-flow input:not([type]),
.verif-flow input[type="text"],
.verif-flow input[type="number"],
.verif-flow input[type="email"],
.verif-flow input[type="tel"],
.verif-flow input[type="date"],
.verif-flow input[type="search"],
.verif-flow select,
.verif-flow textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--v-radius-sm);
    background: #fff;
    font-family: inherit;
    font-size: 16px; /* < 16px hace que iOS haga zoom al enfocar */
    line-height: 1.4;
    color: var(--v-ink);
}

.verif-flow input:focus,
.verif-flow select:focus,
.verif-flow textarea:focus {
    outline: none;
    border-color: var(--v-primary);
    box-shadow: 0 0 0 3px rgba(70, 105, 250, .15);
}

.verif-flow .input-area { margin-top: 0.75rem; }

.verif-flow .error,
.verif-flow .validation-message {
    display: block;
    margin-top: 0.375rem;
    font-size: 13px;
    color: var(--v-danger);
}

/* Fotos capturadas: cuadrícula estable en cualquier ancho. */
.verif-flow .grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.verif-flow .grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--v-radius-sm);
    border: 1px solid var(--v-line);
}

/* El <video> de la cámara embebida: alto acotado y sin deformar la imagen. */
.verif-flow video {
    display: block;
    width: 100%;
    max-height: 60vh;
    background: #000;
    border-radius: var(--v-radius-sm);
    object-fit: contain;
}

/* ----------------------------------------------------------- Modo oscuro --- */
/* El app alterna el tema con la clase .dark en <html>. El flujo público es
   claro por omisión, pero si el solicitante trae el tema oscuro guardado, las
   superficies deben seguir siendo legibles. */
html.dark .verif-flow {
    --v-ink: #e2e8f0;
    --v-ink-soft: #cbd5e1;
    --v-ink-faint: #94a3b8;
    --v-surface: #1e293b;
    --v-line: #334155;
    --v-primary-soft: #29335c;
}

html.dark .verif-shell { background: #0f172a; }
html.dark .verif-addr,
html.dark .verif-legal,
html.dark .verif-steplist-i { background: #17233a; }
html.dark .verif-progress-track { background: #334155; }
html.dark .verif-consent { background: #17233a; border-color: #334155; }
html.dark .verif-card-brand { background: #17233a; border-bottom-color: #334155; }
html.dark .verif-card-brand .verif-icon-badge { background: #1e293b; border-color: #334155; }
html.dark .verif-flow .verif-notice { background: #24334a; }
html.dark .verif-flow .verif-url,
html.dark .verif-flow input,
html.dark .verif-flow select,
html.dark .verif-flow textarea {
    background: #17233a;
    border-color: #334155;
    color: var(--v-ink);
}

html.dark .verif-flow .verif-btn-outline,
html.dark .verif-flow .btn-outline-primary,
html.dark .verif-flow .btn-outline-dark {
    background: #17233a;
    border-color: #334155;
    color: var(--v-ink-soft);
}

html.dark .verif-qr { background: #fff; }
/* La caja del proveedor era clara con texto claro en modo oscuro (ilegible). */
html.dark .verif-vendor { background: #17233a; }
html.dark .verif-vendor-mark { background: #0f172a; }

/* ---- Captura de video (spec 2026-09-18 §2.2) ---- */
/* El solicitante solo ve su foto (ajuste 2026-09-24): el marco es el mismo de la foto,
   sin clip del video encima. */
.verif-help-toggle { font-size: .8125rem; color: var(--v-primary, #4669fa); background: none; border: 0; padding: 0; }

/* Pregunta de cámara: todo el control (visor + Capturar) cabe en la pantalla sin scroll.
   El alto del visor se calcula contra el alto real del teléfono descontando la barra
   superior (~6.5rem), el enunciado (~3.5rem), los botones del control (~3.5rem) y la
   acción anclada (~5rem), con holgura para un enunciado de dos líneas o una línea de ayuda
   (medido en 375x667: con 19rem el Capturar quedaba bajo la barra).
   Mínimo 200px para que la cámara siga siendo usable. */
.verif-app .verif-question.is-camara .verif-cam-stage {
    aspect-ratio: auto;
    height: clamp(200px, calc(100dvh - 22rem), 62vh);
    max-height: none;
}
.verif-app .verif-question.is-camara .verif-question-main label.form-label { font-size: 1rem; }
/* .verif-body envuelve a la pregunta (no al revés): se selecciona con :has. */
.verif-app .verif-body:has(.verif-question.is-camara) { padding-top: .75rem; }
@media (min-width: 640px) {
    .verif-app .verif-question.is-camara .verif-cam-stage { height: clamp(220px, calc(min(880px, 100dvh - 4rem) - 22rem), 520px); }
}

/* ---- Pregunta Imagen/Archivo (VerifArchivoField) ---- */
/* Cada archivo se sube al elegirlo: una fila por archivo con su estado (guardando,
   guardado, con error) y una zona para elegir más. Misma zona punteada que la cámara. */
.verif-file { display: flex; flex-direction: column; gap: 0.5rem; }

/* .verif-flow delante: la zona es un <label> y ".verif-flow label" (display:block,
   margin) la ganaría por especificidad. */
.verif-flow .verif-file-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 9.5rem;
    padding: 1rem;
    border: 1.5px dashed #d5dde9;
    border-radius: 1rem;
    background: #fbfcfe;
    color: var(--v-ink, #1e293b);
    margin-bottom: 0;
    text-align: center;
    cursor: pointer;
}

.verif-flow .verif-file-zone[hidden] { display: none; }
.verif-flow .verif-file-zone:focus-within { border-color: var(--v-primary, #4669fa); box-shadow: 0 0 0 3px var(--v-primary-soft, #edf0ff); }

/* El input real CUBRE toda la zona pero invisible: el toque abre el selector y un archivo
   arrastrado cae en el input (antes medía 1×1 px, el drop caía en la zona y el navegador
   abría el archivo). Mismo patrón que .kyb-drop-input de custom.css. */
.verif-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    font-size: 0;
}

.verif-file-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--v-line, #e8ecf4);
    border-radius: var(--v-radius-sm, 0.625rem);
    background: var(--v-surface, #fff);
}

.verif-file-row.is-bad { border-color: #f6d4d1; background: var(--v-danger-soft, #fef2f2); }

.verif-file-i {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--v-primary-soft, #edf0ff);
    color: var(--v-primary, #4669fa);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.verif-file-row.is-ok .verif-file-i { background: var(--v-success-soft, #f3fef8); color: var(--v-success, #50c793); }
.verif-file-row.is-bad .verif-file-i { background: #fff; color: var(--v-danger, #f1595c); }

.verif-file-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.verif-file-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--v-ink, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.verif-file-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--v-ink-soft, #475569); }
.verif-file-row.is-ok .verif-file-meta { color: #1a7a4c; }
.verif-file-row.is-bad .verif-file-meta { color: #99282b; }

.verif-file-acciones { display: flex; gap: 1.25rem; margin-top: 4px; }
.verif-cam-link.is-muted { color: var(--v-ink-soft, #475569); }

.verif-file-x {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--v-ink-faint, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    cursor: pointer;
}

.verif-file-x:hover { background: #f1f4f9; color: var(--v-ink, #1e293b); }

.verif-file-spin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, .35);
    border-top-color: var(--v-primary, #4669fa);
    display: inline-block;
}

.verif-file-nota { margin: 0; font-size: 12.5px; color: var(--v-ink-soft, #475569); }

.verif-file-aviso {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--v-radius-sm, 0.625rem);
    background: var(--v-danger-soft, #fef2f2);
    color: #99282b;
    font-size: 13px;
    line-height: 1.45;
}

html.dark .verif-flow .verif-file-zone { background: #17233a; border-color: #334155; }
html.dark .verif-file-row.is-bad { background: #3a2426; border-color: #5b2b2e; }
html.dark .verif-file-row.is-bad .verif-file-i { background: #1e293b; }
html.dark .verif-file-x:hover { background: #24334a; }
html.dark .verif-file-row.is-bad .verif-file-meta { color: #fca5a5; }
html.dark .verif-file-row.is-ok .verif-file-meta { color: #86efac; }
html.dark .verif-file-aviso { background: #3a2426; color: #fca5a5; }