/* ============================================================
   Apertura de cuentas jurídicas
   ------------------------------------------------------------
   Se apoya en los tokens de styles.css (--bg-primary, --accent-color,
   .dark-mode, toasts) y agrega arriba la capa que este flujo necesita: una
   estructura de aplicación con carril de progreso, formularios de varias
   secciones, tarjetas de participantes y carga de documentos.

   Todo lo nuevo va con prefijo `jur-` para no chocar con nada del onboarding
   de personas físicas.
   ============================================================ */

/* Los tokens van en `body` y no en `:root`: styles.css define la paleta clara
   en `body:not(.dark-mode)`, y un `var(--bg-secondary)` declarado en :root se
   resuelve con la paleta oscura antes de heredarse. Por eso el modo claro
   mostraba tarjetas oscuras con el texto oscuro encima. */
body {
    --jur-radius: 14px;
    --jur-radius-sm: 10px;
    --jur-radius-xs: 8px;

    --jur-gap: 20px;
    --jur-shell-max: 1180px;
    --jur-rail: 260px;

    --jur-success: #16a34a;
    --jur-success-soft: rgba(22, 163, 74, .12);
    --jur-warning: #f59e0b;
    --jur-warning-soft: rgba(245, 158, 11, .14);
    --jur-danger: #ef4444;
    --jur-danger-soft: rgba(239, 68, 68, .12);
    --jur-info-soft: rgba(59, 130, 246, .12);

    --jur-surface: var(--bg-secondary);
    --jur-surface-alt: rgba(148, 163, 184, .07);
    --jur-elev: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px -12px rgba(15, 23, 42, .18);
    --jur-elev-lg: 0 24px 60px -24px rgba(15, 23, 42, .38);
}

.dark-mode {
    --jur-surface-alt: rgba(148, 163, 184, .08);
    --jur-elev: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --jur-elev-lg: 0 24px 60px -24px rgba(0, 0, 0, .8);
}

/* ============================================================
   Aislamiento respecto de styles.css
   ------------------------------------------------------------
   styles.css está escrito para el onboarding de personas, que es una tarjeta
   única centrada, y para lograrlo usa selectores de elemento sueltos: `main`,
   `h1`, `label`, `input, select`. Esas reglas alcanzan a cualquier página que
   cargue la hoja, incluida esta, y acá rompen el layout: `main { display:flex }`
   convierte las tarjetas apiladas en una fila superpuesta, y `h1`/`label`
   centran texto que en un formulario largo va alineado a la izquierda.

   Cargamos styles.css igual porque de ahí salen las variables de tema, los
   avisos flotantes, el botón de tema y el botón de WhatsApp. Así que en vez de
   tocar esa hoja —que es la del flujo en producción— se neutraliza acá lo que
   se filtra. Si algún día aparece otro selector de elemento en styles.css, el
   lugar para contrarrestarlo es este bloque.
   ============================================================ */

/* `main { flex: 1; display: flex; align-items: center; justify-content: center }` */
.jur-main {
    display: block;
    flex: none;
    align-items: initial;
    justify-content: initial;
}

/* `h1 { margin-bottom: 32px; text-align: center }` */
.jur-encabezado h1 { text-align: left; }

/* `label { display: block; text-align: center; margin-bottom: 8px }` */
.jur-shell label,
.jur-modal label {
    text-align: left;
    margin-bottom: 0;
}

.jur-segmentado label { text-align: center; }

/* ============================================================
   Estructura
   ============================================================ */

.jur-body {
    background: var(--bg-primary);
    min-height: 100vh;
}

.jur-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border-color);
}

.jur-topbar-inner {
    max-width: var(--jur-shell-max);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.jur-topbar .jur-logo {
    height: 30px;
    width: auto;
    display: block;
}

.dark-mode .jur-logo-light,
body:not(.dark-mode) .jur-logo-dark { display: none; }

.jur-topbar-empresa {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 16px;
    border-left: 1px solid var(--border-color);
}

.jur-topbar-empresa strong {
    font-size: 14px;
    font-weight: 650;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jur-topbar-empresa span {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.jur-topbar-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* El botón de tema de styles.css está posicionado absoluto dentro de la
   tarjeta; acá vive en la barra, así que se reposiciona. */
.jur-topbar .theme-toggle {
    position: static;
    width: 36px;
    height: 36px;
}

.jur-shell {
    max-width: var(--jur-shell-max);
    margin: 0 auto;
    padding: 32px 24px 96px;
    display: grid;
    grid-template-columns: var(--jur-rail) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.jur-shell-simple {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
}

.jur-main { min-width: 0; }

/* ============================================================
   Carril de progreso
   ============================================================ */

.jur-rail {
    position: sticky;
    top: 92px;
}

.jur-rail-titulo {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.jur-steps { list-style: none; margin: 0; padding: 0; }

.jur-step {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 22px;
    text-decoration: none;
    color: inherit;
}

.jur-step:last-child { padding-bottom: 0; }

/* Línea que une los pasos. Se dibuja desde el círculo hacia abajo. */
.jur-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 6px;
    width: 2px;
    background: var(--border-color);
    border-radius: 2px;
}

.jur-step.is-completo:not(:last-child)::before { background: var(--jur-success); }

.jur-step-marca {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    transition: all .2s ease;
}

.jur-step-texto { padding-top: 3px; min-width: 0; }

.jur-step-titulo {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
}

.jur-step-desc {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: .7;
    margin-top: 2px;
}

.jur-step.is-activo .jur-step-marca {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, .18);
}

.jur-step.is-activo .jur-step-titulo { color: var(--text-primary); }

.jur-step.is-completo .jur-step-marca {
    border-color: var(--jur-success);
    background: var(--jur-success);
    color: #fff;
}

.jur-step.is-completo .jur-step-titulo { color: var(--text-primary); }
.jur-step.is-navegable:hover .jur-step-titulo { color: var(--accent-color); }
.jur-step.is-navegable { cursor: pointer; }

/* Paso ya alcanzado pero no terminado: se puede abrir desde el carril. */
.jur-step.is-alcanzado .jur-step-marca { border-color: var(--accent-color); color: var(--accent-color); }
.jur-step.is-alcanzado .jur-step-titulo { color: var(--text-primary); }

/* Progreso compacto para pantallas chicas */
.jur-progreso-movil { display: none; }

.jur-progreso-barra {
    height: 4px;
    border-radius: 4px;
    background: var(--border-color);
    overflow: hidden;
}

.jur-progreso-barra i {
    display: block;
    height: 100%;
    background: var(--accent-color);
    border-radius: 4px;
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

.jur-progreso-texto {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.jur-progreso-texto strong { font-size: 15px; font-weight: 650; }
.jur-progreso-texto span { font-size: 12px; color: var(--text-secondary); }

.jur-progreso-pasos { display: flex; gap: 8px; margin-top: 12px; }

.jur-progreso-paso {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.jur-progreso-paso.is-completo { border-color: var(--jur-success); color: var(--jur-success); }
.jur-progreso-paso.is-activo { border-color: var(--accent-color); background: var(--accent-color); color: #fff; }
a.jur-progreso-paso:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* ============================================================
   Encabezado de pantalla
   ============================================================ */

.jur-encabezado { margin-bottom: 28px; }

.jur-encabezado h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 8px;
    color: var(--text-primary);
}

.jur-encabezado p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
    max-width: 62ch;
}

/* ============================================================
   Tarjetas y secciones
   ============================================================ */

.jur-card {
    background: var(--jur-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius);
    box-shadow: var(--jur-elev);
    overflow: hidden;
}

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

.jur-card-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.jur-card-head h2 {
    font-size: 16px;
    font-weight: 650;
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -.01em;
}

.jur-card-head p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 3px 0 0;
    line-height: 1.5;
}

.jur-card-head-texto { flex: 1; min-width: 0; }
.jur-card-body { padding: 22px; }
.jur-card-body-compacto { padding: 16px 22px; }

.jur-card-foot {
    padding: 16px 22px;
    border-top: 1px solid var(--border-color);
    background: var(--jur-surface-alt);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.jur-seccion-icono {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--jur-radius-xs);
    background: var(--jur-info-soft);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Formularios
   ============================================================ */

.jur-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.jur-col-12 { grid-column: span 12; }
.jur-col-8  { grid-column: span 8; }
.jur-col-6  { grid-column: span 6; }
.jur-col-4  { grid-column: span 4; }
.jur-col-3  { grid-column: span 3; }

.jur-campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.jur-campo label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.jur-campo input[type="text"],
.jur-campo input[type="email"],
.jur-campo input[type="tel"],
.jur-campo input[type="date"],
.jur-campo input[type="number"],
.jur-campo select,
.jur-campo textarea {
    width: 100%;
    padding: 11px 13px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    /* background-color y no el atajo `background`: el atajo borraría la flecha
       que se dibuja abajo como background-image. */
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius-xs);
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* styles.css le saca la flecha nativa al <select> (`appearance: none`) y dibuja
   una propia, pero con un padding que acá no aplica. Se define la nuestra para
   no depender de esa hoja. */
.jur-campo select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 17px;
    cursor: pointer;
}

.jur-campo textarea { resize: vertical; min-height: 88px; line-height: 1.6; }

.jur-campo input:focus,
.jur-campo select:focus,
.jur-campo textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
}

.jur-campo input::placeholder,
.jur-campo textarea::placeholder { color: var(--text-secondary); opacity: .65; }

.jur-campo input:disabled,
.jur-campo select:disabled {
    background: var(--jur-surface-alt);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.jur-hint {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.jur-campo.is-error input,
.jur-campo.is-error select,
.jur-campo.is-error textarea {
    border-color: var(--jur-danger);
    box-shadow: 0 0 0 3px var(--jur-danger-soft);
}

.jur-campo-error {
    display: none;
    font-size: 12px;
    color: var(--jur-danger);
    font-weight: 500;
    line-height: 1.5;
}

.jur-campo.is-error .jur-campo-error { display: block; }

/* El selector con búsqueda oculta su <select>: el rojo va en el disparador. */
.jur-campo.is-error .jur-combo-disparador {
    border-color: var(--jur-danger);
    box-shadow: 0 0 0 3px var(--jur-danger-soft);
}

.jur-opcional {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: .8;
}

/* Celular separado en país, código de área y número */
.jur-tel {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(96px, .7fr) minmax(0, 1.5fr);
    gap: 10px;
}

.jur-tel-parte { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.jur-campo .jur-tel-rotulo {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

@media (max-width: 520px) {
    .jur-tel { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }
    .jur-tel-pais { grid-column: 1 / -1; }
}

/* ============================================================
   Selector con búsqueda
   ------------------------------------------------------------
   Las listas de países (246) y actividades (85) son inusables en un <select>
   nativo: hay que scrollear a ciegas. Este control las reemplaza por un campo
   que filtra mientras se escribe. El <select> original sigue existiendo
   oculto, así que el formulario se envía igual y sin JavaScript el campo
   sigue funcionando.
   ============================================================ */

.jur-combo { position: relative; }

.jur-combo-disparador {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius-xs);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.jur-combo-disparador:hover { border-color: var(--accent-color); }

.jur-combo.is-abierto .jur-combo-disparador {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
}

.jur-combo-valor {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
}

.jur-combo-valor.es-vacio { color: var(--text-secondary); opacity: .75; }

.jur-combo-disparador svg {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform .18s ease;
}

.jur-combo.is-abierto .jur-combo-disparador svg { transform: rotate(180deg); }

/* `fixed` y ubicado por juridica.js al abrir. Con `absolute` el panel quedaba
   recortado por el `overflow: hidden` de la tarjeta y, dentro del modal,
   estiraba el área de scroll. */
.jur-combo-panel {
    position: fixed;
    z-index: 300;
    display: none;
    flex-direction: column;
    max-height: 300px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius-sm);
    box-shadow: var(--jur-elev-lg);
    overflow: hidden;
}

.jur-combo.is-abierto .jur-combo-panel { display: flex; }

.jur-combo-buscador {
    padding: 9px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.jur-combo-buscador input {
    width: 100%;
    padding: 8px 11px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 7px;
}

.jur-combo-buscador input:focus { outline: none; border-color: var(--accent-color); }

.jur-combo-opciones { overflow-y: auto; padding: 5px; }

.jur-combo-opcion {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.jur-combo-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.jur-combo-detalle {
    flex-shrink: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Banderas del selector de país. La posición de cada una (.iti__ar, .iti__uy…)
   sale de la hoja de intl-tel-input; acá van las variables que esa hoja solo
   define dentro de su propio componente. */
.jur-combo-icono.iti__flag {
    flex-shrink: 0;
    --iti-flag-height: 12px;
    --iti-flag-width: 16px;
    --iti-flag-sprite-width: 3904px;
    --iti-flag-sprite-height: 12px;
    --iti-path-flags-1x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25.11.3/build/img/flags.webp");
    --iti-path-flags-2x: url("https://cdn.jsdelivr.net/npm/intl-tel-input@25.11.3/build/img/flags@2x.webp");
}

.jur-combo-opcion:hover,
.jur-combo-opcion.is-resaltada { background: var(--jur-surface-alt); }
.jur-combo-opcion.is-elegida { color: var(--accent-color); font-weight: 600; }
.jur-combo-opcion.is-oculta { display: none; }

.jur-combo-sin-resultados {
    padding: 18px 11px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}

.jur-combo-opciones::-webkit-scrollbar { width: 8px; }
.jur-combo-opciones::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

/* ============================================================
   Ayuda contextual
   ============================================================ */

.jur-ayuda {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--text-secondary);
    color: var(--text-secondary);
    background: none;
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    padding: 0;
    flex-shrink: 0;
    transition: all .15s ease;
}

.jur-ayuda:hover,
.jur-ayuda:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
    outline: none;
}

.jur-ayuda-globo {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 300px;
    max-width: min(300px, calc(100vw - 40px));
    padding: 13px 15px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius-sm);
    box-shadow: var(--jur-elev-lg);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-primary);
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 60;
}

.jur-ayuda:hover .jur-ayuda-globo,
.jur-ayuda:focus-visible .jur-ayuda-globo,
.jur-ayuda.is-abierto .jur-ayuda-globo {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Sí / No segmentado
   ============================================================ */

.jur-segmentado {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--jur-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius-xs);
}

.jur-segmentado input { position: absolute; opacity: 0; pointer-events: none; }

.jur-segmentado label {
    padding: 7px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s ease;
    user-select: none;
    margin: 0;
}

.jur-segmentado input:checked + label {
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.jur-segmentado input:checked + label.es-si {
    background: var(--accent-color);
    color: #fff;
}

.jur-segmentado input:focus-visible + label {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Fila declarativa: pregunta a la izquierda, control a la derecha */
.jur-declaracion {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

.jur-declaracion:last-of-type { border-bottom: none; padding-bottom: 0; }
.jur-declaracion:first-of-type { padding-top: 0; }

.jur-declaracion-texto { flex: 1; min-width: 0; }

.jur-declaracion-texto strong {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.jur-declaracion-texto p {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 4px 0 0;
    max-width: 56ch;
}

.jur-detalle-condicional {
    display: none;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-color);
}

.jur-detalle-condicional.is-visible { display: block; }

/* Declaración jurada de estructura accionaria: modelo para descargar y el
   archivo completo que sube el cliente, dentro de la declaración que la pide. */
.jur-ddjj {
    margin-top: 14px;
    padding: 15px 17px;
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius-xs);
    background: var(--jur-surface-alt);
}

.jur-ddjj.is-cargado { border-color: rgba(22, 163, 74, .4); }
.jur-ddjj.is-error { border-color: var(--jur-danger); }
.jur-ddjj.is-error .jur-campo-error { display: block; margin-top: 10px; }

.jur-ddjj-texto strong { font-size: 13.5px; color: var(--text-primary); }
.jur-ddjj-texto p {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 4px 0 0;
}

.jur-ddjj-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.jur-ddjj-acciones .jur-btn { padding: 9px 16px; font-size: 13px; }
.jur-ddjj .jur-archivos { padding: 0; margin-top: 10px; }

/* ============================================================
   Botones
   ============================================================ */

.jur-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--jur-radius-xs);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease,
                transform .1s ease, opacity .15s ease;
}

.jur-btn:active { transform: translateY(1px); }

.jur-btn:disabled,
.jur-btn.is-cargando {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.jur-btn-primario { background: var(--accent-color); color: #fff; }
.jur-btn-primario:hover:not(:disabled) { background: var(--accent-hover); }

.jur-btn-secundario {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.jur-btn-secundario:hover:not(:disabled) { border-color: var(--accent-color); color: var(--accent-color); }

.jur-btn-fantasma { background: none; color: var(--text-secondary); }
.jur-btn-fantasma:hover:not(:disabled) { color: var(--text-primary); background: var(--jur-surface-alt); }

.jur-btn-peligro { background: none; color: var(--jur-danger); }
.jur-btn-peligro:hover:not(:disabled) { background: var(--jur-danger-soft); }

.jur-btn-bloque { width: 100%; }
.jur-btn-grande { padding: 14px 26px; font-size: 15px; }

.jur-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.jur-acciones-derecha { margin-left: auto; display: flex; gap: 10px; }

/* Spinner del botón mientras espera al servidor */
.jur-btn .jur-spinner { display: none; }
.jur-btn.is-cargando .jur-spinner { display: block; }
.jur-btn.is-cargando .jur-btn-texto { opacity: .7; }

.jur-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: jur-girar .7s linear infinite;
}

.jur-btn-secundario .jur-spinner,
.jur-btn-fantasma .jur-spinner {
    border-color: var(--border-color);
    border-top-color: var(--accent-color);
}

@keyframes jur-girar { to { transform: rotate(360deg); } }

/* ============================================================
   Autoguardado
   ============================================================ */

.jur-autoguardado {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity .25s ease;
}

.jur-autoguardado.is-visible { opacity: 1; }
.jur-autoguardado.is-guardado { color: var(--jur-success); }

.jur-autoguardado-punto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.jur-autoguardado.is-guardando .jur-autoguardado-punto {
    animation: jur-latir 1.1s ease-in-out infinite;
}

@keyframes jur-latir {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50%      { opacity: 1;  transform: scale(1.15); }
}

/* ============================================================
   Avisos
   ============================================================ */

.jur-aviso {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--jur-radius-sm);
    font-size: 13.5px;
    line-height: 1.6;
    border: 1px solid transparent;
}

.jur-aviso + .jur-aviso { margin-top: 12px; }
.jur-aviso strong { font-weight: 650; }
.jur-aviso p { margin: 0; }
.jur-aviso p + p { margin-top: 6px; }
.jur-aviso svg { flex-shrink: 0; margin-top: 1px; }
.jur-aviso-cuerpo { min-width: 0; }

.jur-aviso-info    { background: var(--jur-info-soft);    border-color: rgba(59, 130, 246, .3);  color: var(--text-primary); }
.jur-aviso-exito   { background: var(--jur-success-soft); border-color: rgba(22, 163, 74, .3);   color: var(--text-primary); }
.jur-aviso-atencion{ background: var(--jur-warning-soft); border-color: rgba(245, 158, 11, .35); color: var(--text-primary); }
.jur-aviso-error   { background: var(--jur-danger-soft);  border-color: rgba(239, 68, 68, .32);  color: var(--text-primary); }

.jur-aviso-info svg    { color: var(--accent-color); }
.jur-aviso-exito svg   { color: var(--jur-success); }
.jur-aviso-atencion svg{ color: var(--jur-warning); }
.jur-aviso-error svg   { color: var(--jur-danger); }

/* ============================================================
   Participantes
   ============================================================ */

.jur-participantes { display: flex; flex-direction: column; gap: 12px; }

.jur-participante {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--jur-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius-sm);
    transition: border-color .15s ease, opacity .2s ease, transform .2s ease;
}

.jur-participante:hover { border-color: var(--accent-color); }
.jur-participante.is-eliminando { opacity: .4; transform: scale(.98); pointer-events: none; }

.jur-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--jur-info-soft);
    color: var(--accent-color);
}

.jur-avatar-juridica { border-radius: var(--jur-radius-xs); }

.jur-participante-datos { flex: 1; min-width: 0; }

.jur-participante-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.jur-participante-meta {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 3px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.jur-participante-meta span:not(:last-child)::after {
    content: '·';
    margin-left: 6px;
    opacity: .6;
}

.jur-participante-porcentaje {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.jur-participante-acciones { flex-shrink: 0; display: flex; gap: 4px; }

.jur-icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    padding: 0;
}

.jur-icon-btn:hover { background: var(--border-color); color: var(--text-primary); }
.jur-icon-btn.es-peligro:hover { background: var(--jur-danger-soft); color: var(--jur-danger); }

/* Etiquetas */
.jur-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .01em;
    background: var(--jur-surface-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.jur-chip-pep      { background: var(--jur-danger-soft);  color: #b91c1c; border-color: rgba(239, 68, 68, .3); }
.jur-chip-alerta   { background: var(--jur-warning-soft); color: #b45309; border-color: rgba(245, 158, 11, .35); }
.jur-chip-exito    { background: var(--jur-success-soft); color: #15803d; border-color: rgba(22, 163, 74, .3); }
.jur-chip-info     { background: var(--jur-info-soft);    color: var(--accent-color); border-color: rgba(59, 130, 246, .3); }

.dark-mode .jur-chip-pep    { color: #fca5a5; }
.dark-mode .jur-chip-alerta { color: #fcd34d; }
.dark-mode .jur-chip-exito  { color: #86efac; }

/* Medidor de participación acumulada */
.jur-medidor { margin-top: 18px; }

.jur-medidor-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    margin-bottom: 7px;
}

.jur-medidor-cabecera span { color: var(--text-secondary); }

.jur-medidor-total {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.jur-medidor-total.es-completo { color: var(--jur-success); }
.jur-medidor-total.es-excedido { color: var(--jur-danger); }

.jur-medidor-barra {
    height: 7px;
    border-radius: 999px;
    background: var(--border-color);
    overflow: hidden;
}

.jur-medidor-barra i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--accent-color);
    transition: width .35s cubic-bezier(.4, 0, .2, 1), background-color .2s ease;
}

.jur-medidor-barra i.es-completo { background: var(--jur-success); }
.jur-medidor-barra i.es-excedido { background: var(--jur-danger); }

/* Estado vacío */
.jur-vacio {
    text-align: center;
    padding: 38px 24px;
    border: 1px dashed var(--border-color);
    border-radius: var(--jur-radius-sm);
    color: var(--text-secondary);
}

.jur-vacio-icono {
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--jur-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.jur-vacio strong { display: block; font-size: 14px; color: var(--text-primary); margin-bottom: 5px; }
.jur-vacio p { font-size: 13px; margin: 0 auto; max-width: 44ch; line-height: 1.6; }

/* ============================================================
   Documentación
   ============================================================ */

.jur-documentos { display: flex; flex-direction: column; gap: 14px; }

.jur-documento {
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius-sm);
    overflow: hidden;
    transition: border-color .15s ease;
}

.jur-documento.is-cargado { border-color: rgba(22, 163, 74, .4); }
.jur-documento.is-arrastrando { border-color: var(--accent-color); background: var(--jur-info-soft); }

.jur-documento-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 17px;
}

.jur-documento-icono {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--jur-radius-xs);
    background: var(--jur-surface-alt);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
}

.jur-documento.is-cargado .jur-documento-icono {
    background: var(--jur-success-soft);
    color: var(--jur-success);
}

.jur-documento-texto { flex: 1; min-width: 0; }

.jur-documento-nombre {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.jur-documento-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 3px;
    line-height: 1.5;
}

/* Archivos cargados de un documento: puede haber varios. */
.jur-archivos:empty { display: none; }
.jur-archivos { padding: 0 17px 12px; display: flex; flex-direction: column; gap: 4px; }

.jur-archivo-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--jur-success);
    font-weight: 500;
}

.jur-archivo-fila svg { flex-shrink: 0; }
.jur-archivo-fila a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.jur-archivo-peso { flex-shrink: 0; }
.jur-archivo-fila .jur-icon-btn { margin-left: auto; flex-shrink: 0; }
.jur-archivo .jur-extraccion { margin: 6px 0 8px; }

.jur-dropzone {
    border-top: 1px dashed var(--border-color);
    padding: 18px;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease;
}

.jur-dropzone:hover { background: var(--jur-surface-alt); }

/* Con archivos cargados, la zona queda como "agregar otro", más compacta. */
.jur-dropzone [data-texto-agregar] { display: none; }
.jur-documento.is-cargado .jur-dropzone { padding: 11px 18px; }
.jur-documento.is-cargado .jur-dropzone [data-texto-vacio] { display: none; }
.jur-documento.is-cargado .jur-dropzone [data-texto-agregar] { display: block; }

.jur-dropzone-texto { font-size: 13px; color: var(--text-secondary); }
.jur-dropzone-texto strong { color: var(--accent-color); font-weight: 600; }
.jur-dropzone-formatos { font-size: 11.5px; color: var(--text-secondary); opacity: .75; margin-top: 4px; }

/* Barra de subida */
.jur-subida { display: none; padding: 0 17px 15px; }
.jur-documento.is-subiendo .jur-subida { display: block; }
.jur-documento.is-subiendo .jur-dropzone { display: none; }

.jur-subida-barra { height: 4px; border-radius: 4px; background: var(--border-color); overflow: hidden; }

.jur-subida-barra i {
    display: block;
    height: 100%;
    background: var(--accent-color);
    border-radius: 4px;
    transition: width .2s linear;
}

.jur-subida-texto { font-size: 12px; color: var(--text-secondary); margin-top: 6px; }

/* Resultado de la lectura automática */
.jur-extraccion {
    margin: 0 17px 15px;
    padding: 13px 15px;
    border-radius: var(--jur-radius-xs);
    background: var(--jur-info-soft);
    font-size: 12.5px;
    line-height: 1.6;
}

.jur-extraccion-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 650;
    color: var(--accent-color);
    margin-bottom: 6px;
}

.jur-extraccion dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 14px;
    margin: 0;
}

.jur-extraccion dt { color: var(--text-secondary); }
.jur-extraccion dd { margin: 0; color: var(--text-primary); font-weight: 500; }

/* ============================================================
   Apoderados
   ============================================================ */

.jur-apoderado-estado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
}

.jur-apoderado-estado.es-pendiente  { color: var(--text-secondary); }
.jur-apoderado-estado.es-invitado   { color: var(--jur-warning); }
.jur-apoderado-estado.es-en-curso   { color: var(--accent-color); }
.jur-apoderado-estado.es-completado { color: var(--jur-success); }

.jur-punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.jur-apoderado-estado.es-en-curso .jur-punto { animation: jur-latir 1.6s ease-in-out infinite; }

/* ============================================================
   Resumen
   ============================================================ */

.jur-resumen-grupo + .jur-resumen-grupo { margin-top: var(--jur-gap); }

.jur-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2px 24px;
}

.jur-dato {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    min-width: 0;
}

.jur-dato dt { font-size: 12px; color: var(--text-secondary); }

.jur-dato dd {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-word;
}

.jur-dato dd.es-vacio { color: var(--text-secondary); font-weight: 400; font-style: italic; }

/* Checklist de finalización */
.jur-checklist { display: flex; flex-direction: column; gap: 10px; }

.jur-checklist-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius-sm);
    background: var(--jur-surface-alt);
}

.jur-checklist-item.es-completo {
    border-color: rgba(22, 163, 74, .32);
    background: var(--jur-success-soft);
}

.jur-checklist-marca {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--jur-warning-soft);
    color: var(--jur-warning);
}

.jur-checklist-item.es-completo .jur-checklist-marca {
    background: var(--jur-success);
    color: #fff;
}

.jur-checklist-texto { flex: 1; min-width: 0; }

.jur-checklist-texto strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.jur-checklist-faltantes {
    margin: 7px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.jur-checklist-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    white-space: nowrap;
    align-self: center;
}

.jur-checklist-link:hover { text-decoration: underline; }

/* Aceptación de términos */
.jur-terminos {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius-sm);
    cursor: pointer;
    transition: border-color .15s ease;
}

.jur-terminos:hover { border-color: var(--accent-color); }
.jur-terminos input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--accent-color); flex-shrink: 0; }
.jur-terminos span { font-size: 13.5px; line-height: 1.6; color: var(--text-primary); }
.jur-terminos a { color: var(--accent-color); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Modal
   ============================================================ */

.jur-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(3px);
}

.jur-modal.is-abierto { display: flex; animation: jur-aparecer .18s ease; }

@keyframes jur-aparecer { from { opacity: 0; } to { opacity: 1; } }

.jur-modal-caja {
    width: 100%;
    max-width: 620px;
    max-height: min(90vh, 780px);
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--jur-radius);
    box-shadow: var(--jur-elev-lg);
    animation: jur-subir .22s cubic-bezier(.16, 1, .3, 1);
}

@keyframes jur-subir {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.jur-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border-color);
}

.jur-modal-head h2 { font-size: 17px; font-weight: 650; margin: 0; color: var(--text-primary); }
.jur-modal-head p { font-size: 13px; color: var(--text-secondary); margin: 3px 0 0; line-height: 1.5; }
.jur-modal-head-texto { flex: 1; min-width: 0; }

.jur-modal-body { padding: 22px; overflow-y: auto; flex: 1; }

/* Si el cuerpo y el pie van dentro de un <form>, el hijo flexible de la caja
   es el form: sin esto no respeta el alto máximo, los campos se salen de la
   caja y el pie con Guardar queda fuera de la pantalla. */
.jur-modal-caja > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.jur-modal-foot {
    padding: 16px 22px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--jur-surface-alt);
    border-radius: 0 0 var(--jur-radius) var(--jur-radius);
}

/* ============================================================
   Verificación de código
   ============================================================ */

.jur-codigo {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 26px 0 18px;
}

.jur-codigo input {
    width: 54px;
    height: 64px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    background: var(--input-bg);
    border: 1.5px solid var(--border-color);
    border-radius: var(--jur-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.jur-codigo input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}

.jur-codigo input.is-lleno { border-color: var(--accent-color); }

/* ============================================================
   Pantalla final
   ============================================================ */

.jur-final { text-align: center; padding: 12px 0 4px; }

.jur-final-icono {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--jur-success-soft);
    color: var(--jur-success);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: jur-pop .45s cubic-bezier(.16, 1, .3, 1);
}

@keyframes jur-pop {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.jur-final h1 { font-size: 26px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.02em; }
.jur-final > p { font-size: 15px; color: var(--text-secondary); line-height: 1.7; margin: 0 auto; max-width: 52ch; }

.jur-pasos-siguientes {
    text-align: left;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jur-paso-siguiente { display: flex; gap: 14px; align-items: flex-start; }

.jur-paso-siguiente-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--jur-info-soft);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.jur-paso-siguiente strong { display: block; font-size: 14px; color: var(--text-primary); margin-bottom: 2px; }
.jur-paso-siguiente p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.6; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1023px) {
    .jur-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 22px 18px 88px;
    }

    .jur-rail { display: none; }

    .jur-progreso-movil {
        display: block;
        margin-bottom: 24px;
    }

    .jur-topbar-empresa { padding-left: 12px; }
}

@media (max-width: 768px) {
    .jur-encabezado h1 { font-size: 23px; }
    .jur-card-body { padding: 18px; }
    .jur-card-head { padding: 16px 18px; }
    .jur-card-foot { padding: 14px 18px; }

    .jur-col-8, .jur-col-6, .jur-col-4, .jur-col-3 { grid-column: span 12; }

    .jur-declaracion { flex-direction: column; align-items: stretch; gap: 12px; }
    .jur-segmentado { align-self: flex-start; }

    .jur-participante { flex-wrap: wrap; }
    .jur-participante-datos { flex-basis: calc(100% - 54px); }
    .jur-participante-porcentaje { margin-left: 54px; }
    .jur-participante-acciones { margin-left: auto; }

    .jur-acciones { flex-direction: column-reverse; align-items: stretch; }
    .jur-acciones .jur-btn { width: 100%; }
    .jur-acciones-derecha { margin-left: 0; flex-direction: column-reverse; width: 100%; }

    .jur-codigo { gap: 7px; }
    .jur-codigo input { width: 46px; height: 56px; font-size: 22px; }

    .jur-checklist-item { flex-wrap: wrap; }
    .jur-checklist-link { align-self: flex-start; margin-left: 34px; }

    .jur-topbar-inner { padding: 12px 18px; }
    .jur-topbar-empresa strong { font-size: 13px; }
}

@media (max-width: 420px) {
    .jur-codigo input { width: 42px; height: 50px; font-size: 20px; }
    .jur-topbar .jur-logo { height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}