/* =============================================================================
   PAGINAS PUBLICAS DEL POSTULANTE  (inscripcion y confirmacion)
   ---------------------------------------------------------------------------
   Por que una hoja de estilos aparte de estilos.css:

   El panel administrativo lo usa personal entrenado en una PC: ahi conviene
   que todo sea denso y entre mucha informacion en pantalla. El formulario de
   inscripcion lo llena UNA VEZ un chico de 16 años, casi siempre desde el
   celular, y es la primera cara del sistema. Son dos problemas distintos, asi
   que tienen dos hojas distintas: esta se carga SOLO en las paginas publicas
   (ver app/vistas/layouts/publico_cabecera.php) y no puede descolocar ninguna
   pantalla interna.

   La identidad visual se mantiene: el celeste "drop-out" (la tinta que el
   scanner de fichas opticas NO ve) y el grafito oscuro (lo que si ve). Lo que
   cambia es el aire: campos grandes, secciones numeradas y una portada.
   ========================================================================== */

:root {
  --ins-grafito:    #171B22;
  --ins-texto:      #2B3340;
  --ins-suave:      #6C7891;
  --ins-tenue:      #9AA6BC;
  --ins-linea:      #DFE5EE;
  --ins-fondo:      #EEF2F7;
  --ins-azul:       #0B6E8A;   /* el drop-out fuerte: acciones y acentos */
  --ins-azul-hondo: #09303F;   /* portada                               */
  --ins-celeste:    #BFE3EF;
  --ins-celeste-cl: #EAF6FB;
  --ins-error:      #C0392B;
  --ins-ok:         #15795B;
  --ins-radio:      12px;
}

/* ---------------------------------------------------------------------------
   Lienzo
   ------------------------------------------------------------------------ */
body.publico {
  margin: 0;
  background: var(--ins-fondo);
  color: var(--ins-texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* La barra negra del layout publico no se usa en estas paginas: la portada ya
   cumple ese papel y dos cabeceras seguidas se ven mal en el celular. */
/* Franja con el NOMBRE DEL SISTEMA, arriba del todo.
   Es lo primero que se ve y lo unico que identifica al software en la pagina
   que mira el postulante (abajo, el nombre grande es el de la INSTITUCION,
   que es otra cosa). Va en el mismo azul con el que arranca la portada, asi
   que las dos piezas se leen como una sola. */
body.publico .barra-publica {
  background: var(--ins-azul-hondo);
  padding: 9px 16px;
  box-shadow: none;
}
body.publico .barra-publica .barra-interna {
  max-width: 860px; margin: 0 auto; padding: 0;
  display: flex; align-items: center; gap: 10px;
}
body.publico .barra-publica .marca {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1.3;
  color: #DCEAF1; display: flex; align-items: flex-start; gap: 9px;
}
/* flex:0 0 auto para que no se achate hasta parecer un ovalo cuando el
   nombre ocupa dos lineas, y margin-top para que acompañe a la primera. */
body.publico .barra-publica .marca .punto {
  flex: 0 0 auto; margin-top: 4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ins-celeste); box-shadow: 0 0 0 3px rgba(191,227,239,.2);
}
/* Nombres largos ("Sistema Integrado de Procesamiento de Examenes y
   Evaluacion Fisica - SIPEEF") se achican en el celular en vez de partirse
   en tres lineas y empujar la portada hacia abajo. */
@media (max-width: 560px) {
  body.publico .barra-publica { padding: 8px 16px; }
  body.publico .barra-publica .marca { font-size: 12px; }
}

/* La portada se oscurece arriba para empalmar con la franja sin costura */
.ins-portada { padding-top: 30px; }

body.publico { overflow-x: hidden; }   /* por el truco de ancho completo de abajo */

body.publico .contenedor-publico {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* El mensaje flash sale antes de la portada (lo imprime el layout): se le da
   aire para que no quede pegado al borde de la ventana. */
body.publico .contenedor-publico > .aviso { margin: 16px 0; }

/* ---------------------------------------------------------------------------
   PORTADA
   El punteado del fondo son burbujas de ficha optica muy tenues: es el guiño
   al origen del sistema sin cargar ninguna imagen.
   ------------------------------------------------------------------------ */
.ins-portada {
  position: relative;
  overflow: hidden;
  color: #fff;

  /* Ancho completo aunque la vista viva dentro de un contenedor centrado de
     860px: se tira de los margenes hasta los bordes de la ventana. El 50% se
     mide sobre el contenedor y el 50vw sobre la ventana, asi que el resultado
     es exactamente el ancho de la ventana. */
  margin: 0 calc(50% - 50vw) 0;
  background:
    /* Velo oscuro arriba: empalma con la franja del nombre del sistema, que
       es de un azul plano, para que no se note la union. */
    linear-gradient(to bottom, var(--ins-azul-hondo) 0, rgba(9,48,63,0) 110px),
    radial-gradient(circle at 1px 1px, rgba(191,227,239,.16) 1.5px, transparent 1.6px)
      0 0 / 26px 26px,
    linear-gradient(135deg, var(--ins-azul-hondo) 0%, #0B5872 55%, var(--ins-azul) 100%);
  padding: 34px 16px 92px;
  text-align: center;
}

/* Un arco claro abajo, para que la tarjeta no "choque" con la portada */
.ins-portada::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%; bottom: -60px;
  height: 120px;
  border-radius: 50% 50% 0 0;
  background: var(--ins-fondo);
}

.ins-portada-interna { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }

.ins-sello {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 9px;
  border: 1px solid rgba(191,227,239,.35);
  border-radius: 100px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--ins-celeste);
  background: rgba(255,255,255,.06);
}
.ins-sello .punto {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ins-celeste);
  box-shadow: 0 0 0 3px rgba(191,227,239,.22);
}

.ins-portada h1 {
  margin: 16px 0 6px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(25px, 5.2vw, 38px);
  font-weight: 700; line-height: 1.12; letter-spacing: -.02em;
  color: #fff;
}
.ins-portada .ins-bajada {
  margin: 0;
  font-size: clamp(14px, 2.4vw, 17px);
  color: #BBD7E4;
}

/* Las tres cosas que el postulante necesita saber de un vistazo */
.ins-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 20px;
}
.ins-chips span {
  padding: 5px 13px;
  border-radius: 100px;
  font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  color: #D7E8F0;
}

/* ---------------------------------------------------------------------------
   TARJETA DEL FORMULARIO
   Sube sobre la portada para que se lea como una sola pieza.
   ------------------------------------------------------------------------ */
.ins-hoja {
  position: relative;
  margin: -64px auto 0;
  background: #fff;
  border-radius: 18px;
  border: 1px solid var(--ins-linea);
  box-shadow: 0 18px 40px -22px rgba(9, 48, 63, .35),
              0 2px 6px rgba(9, 48, 63, .04);
  padding: 26px 24px 8px;
}
@media (max-width: 560px) {
  .ins-portada { padding-bottom: 80px; }
  .ins-hoja { padding: 20px 16px 8px; border-radius: 14px; }
}

/* El recordatorio del codigo de 4 digitos */
.ins-nota {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--ins-celeste-cl);
  border: 1px solid var(--ins-celeste);
  border-radius: var(--ins-radio);
  padding: 13px 15px;
  font-size: 13.5px; color: #2A4A58;
  margin-bottom: 26px;
}
.ins-nota .ins-icono {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ins-azul); color: #fff;
  font-size: 14px; font-weight: 700;
  font-family: "IBM Plex Mono", monospace;
}
.ins-nota strong { color: var(--ins-azul-hondo); }

/* ---------------------------------------------------------------------------
   SECCIONES NUMERADAS
   Dividir el formulario en bloques cortos es lo que hace que no se sienta
   largo: el postulante ve "1 de 4" y sabe cuanto le falta.
   ------------------------------------------------------------------------ */
.ins-bloque { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--ins-linea); }
.ins-bloque:last-of-type { border-bottom: none; }

.ins-bloque-titulo { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.ins-bloque-titulo .ins-nro {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ins-azul-hondo); color: #fff;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 13px; font-weight: 700;
}
.ins-bloque-titulo h2 {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 16.5px; font-weight: 700; color: var(--ins-grafito);
  letter-spacing: -.01em;
}
.ins-bloque-titulo .ins-sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--ins-tenue); }

/* ---------------------------------------------------------------------------
   CAMPOS
   Alto comodo (46px) porque esto se llena con el pulgar, no con mouse.
   ------------------------------------------------------------------------ */
.ins-rejilla { display: grid; gap: 15px 16px; grid-template-columns: repeat(2, 1fr); }
.ins-rejilla.ins-tres { grid-template-columns: repeat(3, 1fr); }
.ins-rejilla.ins-una  { grid-template-columns: 1fr; }
.ins-rejilla .ins-ancho { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .ins-rejilla, .ins-rejilla.ins-tres { grid-template-columns: 1fr; }
}

.ins-campo { display: block; }
.ins-campo > label {
  display: block;
  font-size: 12.5px; font-weight: 600; color: var(--ins-texto);
  margin-bottom: 6px;
}
.ins-campo .ins-req { color: var(--ins-error); margin-left: 2px; }
.ins-campo .ins-opt { color: var(--ins-tenue); font-weight: 400; font-size: 11.5px; margin-left: 4px; }

.ins-hoja input[type=text],
.ins-hoja input[type=tel],
.ins-hoja input[type=email],
.ins-hoja input[type=date],
.ins-hoja input[type=number],
.ins-hoja select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  font-size: 15px; font-family: inherit; color: var(--ins-grafito);
  background: #FCFDFE;
  border: 1.5px solid var(--ins-linea);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
  appearance: none;
}
.ins-hoja select {
  /* La flechita, dibujada en el propio CSS para no depender de una imagen */
  background-image:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236C7891' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
}
.ins-hoja input:hover, .ins-hoja select:hover { border-color: #C3D0DF; }
.ins-hoja input:focus, .ins-hoja select:focus {
  outline: none;
  background: #fff;
  border-color: var(--ins-azul);
  box-shadow: 0 0 0 3.5px rgba(11, 110, 138, .14);
}
.ins-hoja input::placeholder { color: #B7C1D1; }

/* El DNI y los telefonos se leen mejor en monoespaciada y algo espaciados */
.ins-hoja input.ins-digitos {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .06em;
}

.ins-ayuda  { font-size: 11.5px; color: var(--ins-tenue); margin-top: 5px; }
.ins-fallo  { font-size: 12px;   color: var(--ins-error); margin-top: 5px; font-weight: 500; }
.ins-hoja input.ins-con-error, .ins-hoja select.ins-con-error {
  border-color: var(--ins-error);
  background: #FEF7F6;
}
.ins-hoja input.ins-con-error:focus, .ins-hoja select.ins-con-error:focus {
  box-shadow: 0 0 0 3.5px rgba(192, 57, 43, .13);
}

/* Sexo: en vez de un desplegable de dos opciones, dos botones. Un toque menos
   y se ve de lejos cual quedo elegido. */
.ins-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ins-opcion { position: relative; }
.ins-opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.ins-opcion span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px;
  border: 1.5px solid var(--ins-linea); border-radius: 10px;
  background: #FCFDFE; cursor: pointer; user-select: none;
  font-size: 14.5px; font-weight: 500; color: var(--ins-texto);
  transition: all .15s;
}
.ins-opcion span::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #C3D0DF; flex: 0 0 auto;
}
.ins-opcion span:hover { border-color: #C3D0DF; }
.ins-opcion input:checked + span {
  border-color: var(--ins-azul);
  background: var(--ins-celeste-cl);
  color: var(--ins-azul-hondo); font-weight: 600;
}
.ins-opcion input:checked + span::before {
  border-color: var(--ins-azul);
  background: radial-gradient(circle, var(--ins-azul) 0 4.5px, #fff 5px 100%);
}
.ins-opcion input:focus-visible + span {
  box-shadow: 0 0 0 3.5px rgba(11, 110, 138, .14);
}

/* ---------------------------------------------------------------------------
   PIE DEL FORMULARIO
   ------------------------------------------------------------------------ */
/* Barra pegada al pie de la pantalla: en el celular el formulario ocupa
   cuatro pantallas y el boton de enviar tiene que estar siempre a la vista.
   El fondo es BLANCO OPACO a proposito: con un degradado translucido se
   alcanzaba a leer el texto que pasaba por debajo. */
.ins-enviar {
  position: sticky; bottom: 0;
  margin: 0 -24px; padding: 14px 24px;
  background: #fff;
  border-top: 1px solid var(--ins-linea);
  box-shadow: 0 -10px 18px -14px rgba(9, 48, 63, .35);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
@media (max-width: 560px) { .ins-enviar { margin: 0 -16px; padding: 14px 16px; } }

.ins-boton {
  flex: 1 1 220px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 26px;
  border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--ins-azul-hondo), var(--ins-azul));
  color: #fff; cursor: pointer;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 8px 18px -8px rgba(11, 110, 138, .6);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.ins-boton:hover  { filter: brightness(1.08); box-shadow: 0 10px 22px -8px rgba(11,110,138,.7); }
.ins-boton:active { transform: translateY(1px); }
.ins-boton[disabled] { filter: grayscale(.5); cursor: progress; box-shadow: none; }

.ins-legal {
  font-size: 11.5px; color: var(--ins-tenue);
  margin: 0 0 14px; text-align: center;
}

/* Avisos generales (una campaña inexistente, un error al grabar) */
.ins-aviso {
  border-radius: var(--ins-radio); padding: 13px 16px; margin-bottom: 20px;
  font-size: 13.5px; border: 1px solid; background: #fff;
}
.ins-aviso.ins-aviso-error { border-color: #F0C2BC; background: #FDF2F0; color: #8E2A1F; }
.ins-aviso.ins-aviso-ok    { border-color: #B9DFD1; background: #EFF8F4; color: #0F5A44; }

/* ---------------------------------------------------------------------------
   PANTALLA DE CONFIRMACION
   Lo unico importante es el codigo de 4 digitos: ocupa el centro y se ve
   enorme, porque hay que poder leerlo en la captura de pantalla del celular.
   ------------------------------------------------------------------------ */
.ins-exito { text-align: center; }
.ins-exito .ins-visto {
  width: 60px; height: 60px; margin: 0 auto 14px;
  border-radius: 50%; display: grid; place-items: center;
  background: #EFF8F4; border: 2px solid #B9DFD1;
  color: var(--ins-ok); font-size: 30px; line-height: 1;
}
.ins-exito h2 {
  margin: 0 0 4px;
  font-family: "Space Grotesk", system-ui, sans-serif; font-size: 22px; font-weight: 700;
  color: var(--ins-grafito);
}
.ins-exito .ins-quien { margin: 0 0 22px; color: var(--ins-suave); font-size: 14px; }

.ins-codigo {
  display: inline-block;
  padding: 18px 26px 14px;
  border: 2px dashed var(--ins-celeste);
  border-radius: 14px;
  background: var(--ins-celeste-cl);
}
.ins-codigo .ins-rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ins-azul); margin-bottom: 4px;
}
.ins-codigo .ins-digitos-grandes {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(42px, 13vw, 62px); font-weight: 600; letter-spacing: .18em;
  color: var(--ins-grafito); line-height: 1.1;
}

/* Todavia sin codigo: se muestra el hueco, no se esconde. Que vea que ahi va
   a ir un numero es justo lo que explica por que tiene que pagar. */
.ins-codigo-pendiente {
  border-style: dashed; border-color: #D9C3A0; background: #FDF6EB;
}
.ins-codigo-pendiente .ins-rotulo { color: #8A6D3B; }
/* El hueco va algo mas chico y en una sola linea: a 62 px los cuatro guiones
   no entraban en el ancho del celular y el ultimo caia solo a la linea de
   abajo, como si fuera otra cosa. */
.ins-codigo-pendiente .ins-digitos-grandes {
  color: #C0A878;
  font-size: clamp(30px, 9vw, 44px);
  letter-spacing: .14em;
  white-space: nowrap;
}
.ins-pendiente-nota {
  font-size: 12px; font-weight: 600; color: #8A6D3B; margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   LO QUE SIGUE DESPUES DEL CODIGO: EL PAGO
   ---------------------------------------------------------------------------
   El contenido lo pone el administrador; aqui solo esta la forma. El bloque
   del pago se ve como un recibo: el monto grande arriba, el QR y el numero
   debajo. La idea es que el postulante pueda resolverlo sin leer nada.
   ------------------------------------------------------------------------ */
.ins-aviso-mensaje {
  margin: 22px 0 0; padding: 14px 16px;
  background: #fff; border: 1px solid var(--ins-linea); border-radius: var(--ins-radio);
  font-size: 14px; color: var(--ins-texto); text-align: left;
}

.ins-pago {
  margin-top: 18px;
  border: 1.5px solid var(--ins-celeste); border-radius: 14px;
  background: var(--ins-celeste-cl);
  overflow: hidden;
  text-align: center;
}

.ins-pago-cabecera {
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, var(--ins-azul-hondo), var(--ins-azul));
  color: #fff;
}
.ins-pago-cabecera .ins-rotulo { color: var(--ins-celeste); display: block; }
.ins-monto {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(32px, 9vw, 44px); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; margin-top: 2px;
}
.ins-monto .ins-moneda { font-size: .55em; font-weight: 500; margin-right: 4px; opacity: .85; }
.ins-medio { font-size: 13px; color: #BBD7E4; margin-top: 2px; }

/* El QR y el numero, uno al lado del otro; uno debajo del otro en el celular */
.ins-pago-cuerpo {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: wrap;
  padding: 20px 16px;
}

.ins-qr { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ins-qr img {
  width: 190px; height: 190px; object-fit: contain;
  background: #fff; padding: 9px;
  border: 1px solid var(--ins-celeste); border-radius: 12px;
}
.ins-qr span { font-size: 11.5px; color: var(--ins-suave); }

.ins-numero { text-align: center; }
.ins-numero .ins-rotulo { display: block; color: var(--ins-azul); }
.ins-numero-grande {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(22px, 6.5vw, 28px); font-weight: 600; letter-spacing: .08em;
  color: var(--ins-grafito); margin-top: 3px;
  /* Para poder seleccionarlo de un toque y copiarlo */
  user-select: all;
}
.ins-titular {
  font-size: 13px; color: var(--ins-suave); margin-top: 3px;
  text-transform: uppercase; letter-spacing: .03em;
}

.ins-pago-nota {
  margin: 0; padding: 12px 16px;
  background: #fff; border-top: 1px solid var(--ins-celeste);
  font-size: 12.5px; color: var(--ins-suave); text-align: left;
}

/* --- La oficina, para quien prefiera ir en persona ----------------------- */
.ins-oficina {
  margin-top: 14px; padding: 15px 16px;
  border: 1px dashed var(--ins-linea); border-radius: var(--ins-radio);
  background: #fff; text-align: left;
}
.ins-oficina .ins-rotulo { display: block; color: var(--ins-suave); }
.ins-oficina-nombre {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 15px; font-weight: 700; color: var(--ins-grafito); margin-top: 3px;
}
.ins-oficina-dato { font-size: 13.5px; color: var(--ins-texto); }

.ins-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.ins-boton-claro {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 11px 20px;
  border: 1.5px solid var(--ins-linea); border-radius: 10px;
  background: #fff; color: var(--ins-texto); cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: inherit;
  text-decoration: none;
}
.ins-boton-claro:hover { border-color: var(--ins-azul); color: var(--ins-azul); text-decoration: none; }

/* ---------------------------------------------------------------------------
   PIE DE PAGINA
   ------------------------------------------------------------------------ */
body.publico .pie-publico {
  max-width: 860px; margin: 0 auto; padding: 26px 16px 44px;
  text-align: center; font-size: 12.5px; color: var(--ins-tenue);
}
body.publico .pie-publico p { margin: 3px 0; }
body.publico .pie-publico a { color: var(--ins-azul); text-decoration: none; }
body.publico .pie-publico a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   IMPRESION
   El postulante imprime la confirmacion para llevarla el dia del examen.
   ------------------------------------------------------------------------ */
@media print {
  .ins-portada, .ins-acciones, .pie-publico { display: none !important; }
  body.publico { background: #fff; }
  .ins-hoja { margin: 0; border: none; box-shadow: none; padding: 0; }
  .ins-codigo { border-color: #999; background: #fff; }

  /* El QR y el monto SI se imprimen: el postulante imprime esta hoja
     justamente para llevarse a donde pagar. Se les quita el fondo de color,
     que en una impresora laser sale gris y tapa el QR. */
  .ins-pago { border-color: #999; background: #fff; page-break-inside: avoid; }
  .ins-pago-cabecera { background: #fff; color: #000; border-bottom: 1px solid #999; }
  .ins-pago-cabecera .ins-rotulo, .ins-medio { color: #444; }
  .ins-qr img { border-color: #999; }
  .ins-oficina { page-break-inside: avoid; }

  /* print-color-adjust para que el navegador no "ahorre tinta" aclarando el
     QR: un QR descolorido no lo lee ninguna camara. */
  .ins-qr img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}