/* ============================================================================
   CDT y Usuario Secundario — lo propio de este tutorial

   El marco (el navegador), los pasos y los controles viven en
   ../tutorial-core/engine.css, compartidos con los otros tutoriales.

   Aquí conviven DOS identidades visuales ajenas, porque el trámite pasa por
   dos sitios distintos y el cliente tiene que reconocer el salto:

     .sn-*  → SUNAT Operaciones en Línea. Interfaz antigua: tablas con borde,
              botones grises del sistema, tipografía chica. No se "moderniza"
              a propósito: si aquí se viera bonito y allá no, el cliente
              dudaría de estar en el sitio correcto.
     .rn-*  → RENIEC, donde se genera y descarga el certificado. Fondo azul,
              panel oscuro a la izquierda, formulario blanco a la derecha.

   Medidas tomadas de las 30 capturas de doc/Manual_Sunat/.
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
.vpt-root {
  --sn-azul: #0d6cb4;          /* barra de sesión */
  --sn-azul-osc: #1b4f9c;      /* logo y títulos */
  --sn-azul-claro: #4ba3dc;    /* franja de título de pantalla */
  --sn-azul-pal: #dcebf7;      /* cabeceras de tabla */
  --sn-rojo: #b01c2e;          /* enlaces de la franja superior */
  --sn-borde: #9db8d2;
  --sn-gris-btn: #f1f1f1;
  --sn-texto: #22303f;

  --rn-fondo: #4f80c4;
  --rn-panel: #6a97d2;
  --rn-granate: #8d2b4a;
}

/* ══════════════════════════════════════════════════════════════════════════
   0. El motor cree que simula un celular

   Pinta SIEMPRE la barra de estado de Android, la barra de gestos y el
   teclado en pantalla (TYPE lo enciende por definición). En una computadora
   el teclado es físico y no hay barra de estado. Se apagan acotadas a
   .vp-browser: el teléfono de los otros tutoriales no se entera.
   ══════════════════════════════════════════════════════════════════════════ */

.vp-browser .vp-status,
.vp-browser .vp-gesture,
.vp-browser .vp-kbd { display: none; }

.vp-browser .vp-app { inset: 0; }

/* La barra del navegador es contenido de la pantalla (la dirección cambia en
   cada una), así que vive dentro del .vp-screen del motor —una columna flex—
   y sin esto se comprimiría al crecer la página. */
.vp-browser .vp-browser-bar { flex: none; }

/* El aviso emergente: tarjeta en la esquina, no barra de borde a borde. */
.vp-browser .vp-snack {
  left: auto;
  right: 22px;
  bottom: 22px;
  max-width: 420px;
  border-radius: 10px;
}

/* ── El aviso de que esto es una práctica ─────────────────────────────────── */
/* Va pegado encima del navegador simulado y no se va nunca: son pantallas de
   SUNAT y RENIEC, y nadie debe confundirlas con los sitios reales ni escribir
   aquí una Clave SOL de verdad. */
.vpt-replica {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1120px;
  margin: 0 auto 10px;
  padding: 9px 16px;
  border-radius: 10px 10px 0 0;
  background: var(--amber-bg);
  border: 1px solid var(--amber);
  border-bottom: none;
  color: #78350F;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.4;
}
.vpt-replica .ms { color: var(--amber-dark); font-size: 20px; flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   1. SUNAT — piezas comunes
   ══════════════════════════════════════════════════════════════════════════ */

.sn-fondo { background: #fff; color: var(--sn-texto); font-size: 12.5px; }
.sn-scroll { overflow-y: auto; scrollbar-width: none; }
.sn-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* La franja blanca del logo */
.sn-top {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 18px;
  background: #fff;
  border-bottom: 1px solid #e4e9ef;
  flex: none;
}
.sn-top--simple { border-bottom: none; }
.sn-top-sp { flex: 1; }

.sn-logo {
  font-size: 19px;
  font-weight: 800;
  color: var(--sn-azul-osc);
  letter-spacing: .5px;
  position: relative;
  padding-left: 22px;
}
/* El rombo rojo del logotipo. Es decorativo: no se pretende reproducir la
   marca, solo que la pantalla se reconozca de un vistazo. */
.sn-logo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 15px;
  height: 15px;
  margin-top: -7px;
  background: #c8102e;
  transform: rotate(45deg);
  border-radius: 2px;
}

.sn-inicio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sn-rojo);
  font-size: 12.5px;
  font-weight: 600;
}
.sn-inicio .ms { font-size: 16px; }

.sn-top-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sn-rojo);
  font-size: 12px;
  font-weight: 600;
}
.sn-top-link .ms { font-size: 15px; }

/* La barra azul de sesión */
.sn-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 0 0 14px;
  background: var(--sn-azul);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  flex: none;
}
.sn-fecha { font-size: 11px; }
.sn-bienvenido { font-weight: 700; }
.sn-empresa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 190px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, .92);
  color: var(--sn-texto);
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
}
.sn-empresa .ms { font-size: 16px; color: var(--sn-texto); }
.sn-domicilio { font-size: 11.5px; }
.sn-salir {
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  height: 34px;
  background: #2aa3d8;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
}

/* El desplegable de la cuenta (captura 11) */
.sn-drop {
  position: absolute;
  top: 34px;
  right: 96px;
  width: 268px;
  background: #fff;
  border: 1px solid #cfd8e3;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
  padding: 12px 14px 8px;
  color: var(--sn-texto);
  font-weight: 500;
  z-index: 5;
}
.sn-drop-dato { font-size: 11.5px; margin-bottom: 3px; }
.sn-drop-ficha {
  display: inline-block;
  margin: 8px 0 12px;
  padding: 6px 14px;
  background: var(--sn-azul);
  color: #fff;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 700;
}
.sn-drop-tit {
  border-top: 1px solid #e4e9ef;
  padding-top: 8px;
  font-size: 10.5px;
  font-weight: 800;
  color: #7b8a9c;
  letter-spacing: .5px;
}
.sn-drop-op {
  padding: 5px 0;
  font-size: 11.5px;
  color: var(--sn-azul-osc);
}
.sn-drop-op.is-clave { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
   2. Inicio de sesión
   ══════════════════════════════════════════════════════════════════════════ */

.sn-fondo-login { background: #fff; padding: 0; }
.sn-franja { height: 26px; background: var(--sn-azul); }

.sn-login {
  width: 300px;
  margin: 34px auto 0;
  border: 1px solid var(--sn-borde);
  border-radius: 3px;
  overflow: hidden;
}
.sn-login-cab {
  background: var(--sn-azul);
  color: #fff;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}
.sn-login-cuerpo { padding: 16px 18px 20px; background: #fff; }

.sn-seg { display: flex; justify-content: center; gap: 4px; margin-bottom: 16px; }
.sn-seg span {
  padding: 4px 16px;
  border-radius: 3px;
  background: #e9eef4;
  color: #8a97a6;
  font-size: 11.5px;
  font-weight: 700;
}
.sn-seg span.is-on { background: var(--sn-azul); color: #fff; }

.sn-inp {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  margin-bottom: 9px;
  border: 1px solid #c8d3df;
  border-radius: 3px;
  background: #fff;
  font-size: 12px;
}
.sn-inp.is-focus { border-color: var(--sn-azul); box-shadow: 0 0 0 2px rgba(13, 108, 180, .15); }
.sn-ph { color: #a9b5c2; }

.sn-recuerda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 10px;
  font-size: 11px;
  color: #6b7embed;
  color: #6b7a89;
}
.sn-recuerda i {
  width: 26px;
  height: 14px;
  border-radius: 8px;
  background: #c8d3df;
  display: block;
  position: relative;
}
.sn-recuerda i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}
.sn-olvido { text-align: center; font-size: 10.5px; color: var(--sn-azul-osc); margin-bottom: 12px; }

.sn-btn-login {
  display: block;
  margin: 0 auto;
  padding: 5px 16px;
  border: none;
  border-radius: 3px;
  background: var(--sn-azul);
  color: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: default;
}
.vpt-root .sn-btn-login:hover { background: var(--sn-azul); color: #fff; }

.sn-login-pie {
  margin: 22px auto 0;
  max-width: 460px;
  text-align: center;
  font-size: 10.5px;
  color: #6b7a89;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. Menú de inicio
   ══════════════════════════════════════════════════════════════════════════ */

.sn-menu { display: flex; gap: 26px; padding: 20px 26px 26px; }
.sn-menu-izq { width: 210px; flex: none; }
.sn-pregunta { font-size: 15px; color: var(--sn-azul-osc); margin-bottom: 12px; }
.sn-grupo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #eef2f7;
  border-bottom: 1px solid #fff;
  font-size: 12.5px;
  color: var(--sn-texto);
}
.sn-grupo.is-on { background: var(--sn-azul); color: #fff; font-weight: 700; }
.sn-grupo .ms { font-size: 17px; }

.sn-menu-cent { flex: 1; min-width: 0; }
.sn-buscar {
  display: flex;
  align-items: center;
  height: 34px;
  border: 1px solid #c8d3df;
  border-radius: 3px;
  margin-bottom: 14px;
  overflow: hidden;
}
.sn-buscar .sn-ph { flex: 1; padding: 0 12px; font-size: 12.5px; }
.sn-lupa {
  width: 42px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c8102e;
  color: #fff;
  flex: none;
}
.sn-lupa .ms { font-size: 17px; color: #fff; }

.sn-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sn-col {
  background: #f4f7fa;
  border: 1px solid #e2e9f0;
  padding: 10px 12px;
}

.sn-m {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 5px 0;
  color: var(--sn-azul-osc);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.sn-m-fl { font-style: normal; font-size: 10px; line-height: 1.6; flex: none; }
.sn-m--2 { padding-left: 16px; font-weight: 500; font-size: 11.5px; }
.sn-m--3 { padding-left: 32px; font-weight: 500; font-size: 11.5px; }
.sn-m--4 { padding-left: 48px; font-weight: 500; font-size: 11.5px; }
.sn-m-hoja {
  padding: 4px 0 4px 62px;
  font-size: 11px;
  color: #2a6fb5;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. Pantallas con menú lateral (solicitud del CDT, buzón)
   ══════════════════════════════════════════════════════════════════════════ */

.sn-app { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.sn-app-cab { flex: none; }
.sn-app-cuerpo { flex: 1; min-height: 0; display: flex; }

.sn-lat {
  width: 210px;
  flex: none;
  border-right: 1px solid #dde5ee;
  padding: 10px 0 20px;
  overflow-y: auto;
  scrollbar-width: none;
  background: #fff;
}
.sn-lat::-webkit-scrollbar { width: 0; }
.sn-lat-inicio {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px 10px;
  color: var(--sn-rojo);
  font-size: 11.5px;
  font-weight: 600;
}
.sn-lat-inicio .ms { font-size: 15px; }
.sn-lat-tit {
  padding: 0 12px 8px;
  color: var(--sn-azul-osc);
  font-size: 12px;
  font-weight: 800;
}
.sn-lat-it {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--sn-texto);
  line-height: 1.3;
}
.sn-lat-it--sub { padding-left: 22px; }
.sn-lat-hoja {
  padding: 5px 12px 5px 32px;
  font-size: 11px;
  color: #2a6fb5;
  line-height: 1.3;
}
.sn-lat-hoja.is-on {
  background: #e8eef5;
  border-left: 3px solid var(--sn-azul);
  padding-left: 29px;
  font-weight: 700;
}

/* El panel azul de la solicitud */
.sn-panel {
  margin: 16px 22px;
  border: 1px solid #b9d4ea;
  border-radius: 4px;
  overflow: hidden;
}
.sn-panel-cab {
  background: #3d8ec4;
  color: #fff;
  text-align: center;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
}
.sn-panel-cuerpo { padding: 16px 26px 22px; }

.sn-aviso {
  background: #f2f5f8;
  border: 1px solid #e2e9f0;
  padding: 10px 13px;
  font-size: 11px;
  line-height: 1.55;
  color: #4a5a6b;
  margin-bottom: 16px;
}
.sn-seccion {
  font-size: 14px;
  color: #4a5a6b;
  border-bottom: 1px solid #e2e9f0;
  padding-bottom: 6px;
  margin: 14px 0 12px;
}

.sn-dato { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sn-dato-lbl { width: 210px; flex: none; font-size: 11.5px; font-weight: 700; }
/* Los datos vienen de SUNAT y no se editan: se ven como dato, no como campo. */
.sn-dato-val {
  flex: 1;
  max-width: 300px;
  padding: 5px 9px;
  background: #eef2f6;
  border: 1px solid #dde5ee;
  border-radius: 2px;
  font-size: 11.5px;
  color: #55636f;
}

.sn-tyc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #4a5a6b;
  margin-bottom: 12px;
}
.sn-tyc .ms { font-size: 15px; color: var(--sn-rojo); }
.sn-link { color: #1f7a3d; font-weight: 600; }

.sn-check { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.sn-check i {
  width: 14px;
  height: 14px;
  border: 1px solid #9aa7b4;
  border-radius: 2px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-style: normal;
  color: #fff;
  flex: none;
}
.sn-check i.is-on { background: var(--sn-azul); border-color: var(--sn-azul); }

.sn-envio { text-align: center; margin-top: 18px; }
.sn-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 20px;
  border: none;
  border-radius: 3px;
  background: var(--sn-azul);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: default;
}
.sn-btn .ms { font-size: 15px; }
.sn-btn.is-off { background: #9dc2de; }
.vpt-root .sn-btn:hover { background: var(--sn-azul); color: #fff; }
.vpt-root .sn-btn.is-off:hover { background: #9dc2de; }

/* ══════════════════════════════════════════════════════════════════════════
   5. Buzón Electrónico
   ══════════════════════════════════════════════════════════════════════════ */

.sn-buzon-lista {
  width: 280px;
  flex: none;
  border-right: 1px solid #dde5ee;
  background: #fbfcfd;
  overflow-y: auto;
  scrollbar-width: none;
}
.sn-buzon-lista::-webkit-scrollbar { width: 0; }
.sn-buzon-tit {
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--sn-azul-osc);
  border-bottom: 1px solid #dde5ee;
}
.sn-msg {
  padding: 11px 14px;
  border-bottom: 1px solid #e7edf3;
  line-height: 1.4;
}
.sn-msg.is-on { background: #dceaf6; }
.sn-msg-asunto { font-size: 11.5px; font-weight: 700; color: var(--sn-texto); }
.sn-msg-fecha { font-size: 10.5px; color: #7b8a9c; margin-top: 3px; }

.sn-buzon-vacio { text-align: center; padding: 90px 20px; color: #9aa7b4; }
.sn-buzon-vacio .ms { font-size: 44px; }
.sn-buzon-vacio p { font-size: 12px; margin: 10px 0 0; }

.sn-msg-det { padding: 18px 26px; }
.sn-msg-det-tit { font-size: 14px; color: var(--sn-texto); }
.sn-msg-det-fecha { font-size: 11.5px; color: #7b8a9c; margin: 4px 0 16px; }

.sn-form { border: 1px solid #dde5ee; }
.sn-form-cinta {
  background: var(--sn-azul-osc);
  color: #fff;
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}
.sn-form-tit {
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  margin: 16px 0 4px;
}
.sn-form-sub { text-align: center; font-size: 11px; color: #55636f; margin-bottom: 14px; }
.sn-form-cuerpo {
  border-top: 1px solid #e7edf3;
  padding: 14px 24px 18px;
  font-size: 11.5px;
  line-height: 1.65;
  color: #40505f;
}
.sn-form-enlace {
  margin: 14px 0 6px;
  text-align: center;
  color: #1a4fbf;
  font-size: 11px;
  text-decoration: underline;
  word-break: break-all;
}
.sn-form-nota { font-size: 10.5px; color: #7b8a9c; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   6. Pantallas de tabla antigua (usuarios secundarios)
   ══════════════════════════════════════════════════════════════════════════ */

.sn-tabla-tit {
  background: var(--sn-azul-pal);
  border: 1px solid var(--sn-borde);
  text-align: center;
  padding: 6px;
  font-size: 14px;
  font-weight: 800;
  color: #24354a;
  margin: 6px 8px 0;
}
.sn-tabla-caja {
  border: 1px solid var(--sn-borde);
  border-top: none;
  margin: 0 8px 12px;
  padding: 10px 12px 16px;
}
.sn-tabla-txt { font-size: 11px; color: #40505f; margin: 0 0 8px; line-height: 1.5; }
.sn-sub {
  background: var(--sn-azul-pal);
  border: 1px solid #c6dbee;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  color: #24354a;
  margin: 12px 0 6px;
}

/* Los botones grises del sistema: así se ven en SUNAT y así deben verse aquí. */
.sn-btn-gris {
  padding: 3px 12px;
  border: 1px solid #999;
  border-radius: 3px;
  background: var(--sn-gris-btn);
  color: #222;
  font-family: inherit;
  font-size: 11px;
  cursor: default;
}
.vpt-root .sn-btn-gris:hover { background: var(--sn-gris-btn); color: #222; }

.sn-tabla { width: 100%; border-collapse: collapse; font-size: 10.5px; margin-top: 4px; }
.sn-tabla th {
  background: var(--sn-azul-pal);
  border: 1px solid #c6dbee;
  padding: 4px 6px;
  font-weight: 800;
  color: #24354a;
  text-align: center;
}
.sn-tabla td {
  border: 1px solid #e2e9f0;
  padding: 4px 6px;
  color: #40505f;
}
.sn-vacio { text-align: left; color: #55636f; }

/* Formulario de dos puntos (Registro de Usuario Secundario) */
.sn-fila { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.sn-fila-lbl { width: 190px; flex: none; font-size: 11px; font-weight: 800; }
.sn-fila-dp { width: 8px; flex: none; font-size: 11px; }
.sn-inp2 {
  width: 240px;
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  border: 1px solid #b6c2ce;
  background: #fff;
  font-size: 11.5px;
}
.sn-inp2.is-focus { border-color: var(--sn-azul); box-shadow: 0 0 0 2px rgba(13, 108, 180, .15); }
.sn-inp2.is-off { background: #eef2f6; color: #8a97a6; }
.sn-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 4px 0 6px;
  border: 1px solid #b6c2ce;
  background: #fff;
  font-size: 10.5px;
}
.sn-select .ms { font-size: 15px; color: #55636f; }

.sn-botonera { display: flex; gap: 8px; margin: 16px 0 0; }
.sn-botonera--perm { justify-content: flex-start; margin-left: 2px; }
.sn-notas { margin-top: 14px; border-top: 1px solid #e7edf3; padding-top: 10px; }
.sn-notas p { font-size: 10px; color: #55636f; margin: 0 0 3px; }

.sn-fila--ver { align-items: baseline; }
.sn-ver { font-size: 11px; color: #40505f; }
.sn-ver-fuerte { font-size: 14px; font-weight: 800; color: #22303f; }

/* ══════════════════════════════════════════════════════════════════════════
   7. Asignación de opciones (el árbol de permisos)
   ══════════════════════════════════════════════════════════════════════════ */

.sn-perm {
  border: 1px solid var(--sn-borde);
  border-top: none;
  margin: 0 8px 12px;
  padding: 12px 14px 16px;
}
.sn-perm-cab { text-align: center; font-size: 11.5px; margin-bottom: 8px; }
/* El recuadro gris que en las capturas tapa el nombre del contribuyente. Aquí
   no hay nada que tapar (los datos son inventados), pero se conserva para que
   la pantalla se reconozca igual que en el manual. */
.sn-tapado {
  display: inline-block;
  width: 190px;
  height: 15px;
  background: #d0d0d0;
  border: 1px solid #b01c2e;
  vertical-align: middle;
}
.sn-centro { text-align: center; }

.sn-perm-cols { display: flex; gap: 18px; margin-top: 10px; }
.sn-perm-izq { width: 360px; flex: none; }
.sn-perm-der { flex: 1; min-width: 0; }
.sn-perm-tit { font-size: 10.5px; font-weight: 800; color: #24354a; margin-bottom: 6px; }
.sn-perm-res { font-size: 11px; font-style: italic; color: #2a6fb5; margin-bottom: 6px; }

.sn-arbol {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #d5dee8;
  background: #fff;
  padding: 6px 4px;
  scrollbar-width: thin;
}
.sn-nodo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  font-size: 10.5px;
  font-style: italic;
  color: #33414f;
  white-space: nowrap;
}
.sn-nodo.is-sel { background: #cfe6f7; font-style: italic; }
.sn-nodo-fl { font-style: normal; font-size: 9px; width: 9px; flex: none; color: #55636f; }
/* La carpetita amarilla del árbol de SUNAT */
.sn-nodo-car {
  width: 13px;
  height: 11px;
  flex: none;
  border-radius: 1px 2px 2px 1px;
  background: linear-gradient(180deg, #f6e2a8, #e4c46f);
  border: 1px solid #c8a854;
}
.sn-n1 { padding-left: 8px; }
.sn-n2 { padding-left: 26px; }
.sn-n3 { padding-left: 44px; }

.sn-op { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.sn-op th {
  background: #eceff2;
  border: 1px solid #dfe4e9;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: #40505f;
}
.sn-op td {
  border: 1px solid #eceff2;
  padding: 7px 8px;
  color: #40505f;
}
.sn-op tbody tr:nth-child(odd) { background: #fafbfc; }
.sn-op-chk { width: 34px; text-align: center; }
.sn-op-chk i {
  width: 13px;
  height: 13px;
  border: 1px solid #9aa7b4;
  border-radius: 2px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-style: normal;
  color: #fff;
}
.sn-op-chk i.is-on { background: var(--sn-azul); border-color: var(--sn-azul); }
.sn-op-vacio { padding: 16px 8px; font-size: 11px; color: #8a97a6; }

/* El resumen final */
.sn-res {
  height: 250px;
  overflow-y: auto;
  border: 1px solid #d5dee8;
  background: #f7f9fb;
  padding: 14px 18px;
  scrollbar-width: thin;
}
.sn-res-l {
  font-size: 10.5px;
  color: #33414f;
  padding: 1px 0;
  position: relative;
}
.sn-res-l::before { content: '▪ '; color: #7b8a9c; }
.sn-res-l--0 { padding-left: 0; font-weight: 700; }
.sn-res-l--1 { padding-left: 18px; }
.sn-res-l--2 { padding-left: 36px; }
.sn-res-l--3 { padding-left: 54px; }
.sn-res-l--4 { padding-left: 72px; }
.sn-res-l.is-op { color: #55636f; }

/* ══════════════════════════════════════════════════════════════════════════
   8. El diálogo «Mensaje del sistema»
   ══════════════════════════════════════════════════════════════════════════ */

.sn-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 26px 54px -20px rgba(15, 23, 42, .5);
  /* La cortina del motor está en z-index 8: por debajo, el diálogo se ve
     lavado. Los diálogos propios del motor usan 9; este va con ellos. */
  z-index: 9;
  animation: sn-modal-in .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes sn-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.sn-modal-cab {
  padding: 13px 18px;
  border-bottom: 1px solid #e7edf3;
  font-size: 13px;
  color: #55636f;
}
.sn-modal-cuerpo { display: flex; gap: 18px; padding: 20px 22px; }
.sn-modal-ico { flex: none; }
.sn-modal-ico .ms { font-size: 54px; color: #22a34a; }
.sn-modal-txt { font-size: 11.5px; line-height: 1.6; color: #40505f; }
.sn-modal-txt p { margin: 0 0 9px; }
.sn-modal-txt p:last-child { margin-bottom: 0; }
.sn-modal-pie {
  display: flex;
  justify-content: flex-end;
  padding: 11px 18px;
  border-top: 1px solid #e7edf3;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. RENIEC — donde se genera y descarga el certificado
   ══════════════════════════════════════════════════════════════════════════ */

.rn-fondo {
  background: var(--rn-fondo);
  padding: 22px 26px 26px;
  color: #fff;
}

.rn-marca {
  width: 320px;
  margin: 0 0 0 auto;
  background: #efefef;
  border-left: 8px solid var(--rn-granate);
  padding: 8px 14px;
  text-align: center;
  color: var(--rn-granate);
}
.rn-marca b { display: block; font-size: 26px; font-weight: 800; letter-spacing: 3px; line-height: 1; }
.rn-marca span { display: block; font-size: 8px; font-weight: 700; letter-spacing: .3px; margin-top: 3px; }

.rn-caja { display: flex; margin-top: 14px; }
.rn-izq {
  width: 400px;
  flex: none;
  background: var(--rn-panel);
  padding: 26px 28px;
  color: #fff;
}
.rn-izq h2 { font-size: 20px; font-weight: 700; margin: 0 0 14px; line-height: 1.25; }
.rn-izq p { font-size: 12.5px; line-height: 1.6; margin: 0 0 10px; }
.rn-item { font-size: 12px; line-height: 1.6; margin-bottom: 10px; }
.rn-item u { text-decoration: underline; }

.rn-der { flex: 1; min-width: 0; background: #fff; padding: 26px 30px; color: #33414f; }
.rn-lbl {
  display: block;
  font-size: 12px;
  color: #55636f;
  margin: 0 0 5px;
}
.rn-lbl .ms { font-size: 14px; color: #4f80c4; vertical-align: middle; }
.rn-inp {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  margin-bottom: 4px;
  border: 1px solid #cfd8e3;
  border-radius: 3px;
  background: #fff;
  font-size: 12.5px;
}
.rn-inp .ms { font-size: 17px; color: #8a97a6; }
.rn-inp.is-focus { border-color: var(--rn-fondo); box-shadow: 0 0 0 2px rgba(79, 128, 196, .18); }
.rn-inp.is-solo { background: #eef3fa; color: #40505f; margin-bottom: 16px; }
.rn-ph { color: #a9b5c2; }
.rn-hint { font-size: 10px; color: #8a97a6; font-style: italic; margin-bottom: 14px; }

.rn-btn {
  margin-top: 6px;
  padding: 8px 18px;
  border: none;
  border-radius: 3px;
  background: #4caf7d;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: default;
}
.rn-btn.is-off { background: #b9d9c8; }
.vpt-root .rn-btn:hover { background: #4caf7d; color: #fff; }
.vpt-root .rn-btn.is-off:hover { background: #b9d9c8; }

/* La pantalla de ¡Felicidades! */
.rn-ok {
  width: 620px;
  margin: 20px auto 0;
  background: #fff;
  padding: 26px 34px 30px;
  color: #33414f;
  text-align: center;
}
.rn-ok-tit { display: flex; align-items: center; justify-content: center; gap: 12px; }
.rn-ok-tit .ms { font-size: 44px; color: #22a34a; }
.rn-ok-tit span { font-size: 30px; font-weight: 700; color: #3f9c53; }
.rn-ok-sub { font-size: 14px; font-weight: 600; margin: 14px 0 18px; }
.rn-ok-rec { font-size: 12px; color: #55636f; text-align: left; margin-bottom: 8px; }
.rn-ok .rn-item { color: #40505f; text-align: left; padding-left: 10px; }
.rn-btn--ok { margin-top: 14px; }

/* La barra de descargas del navegador */
.rn-descarga {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: #f1f3f4;
  border-top: 1px solid #d5d9dd;
  color: #33414f;
}
.rn-file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #d5d9dd;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 600;
}
.rn-file .ms { font-size: 14px; color: #8a97a6; }
.rn-todo { font-size: 11px; color: #55636f; }