@onpe/ui 1.2.41 → 1.2.43

package/dist/index.css

@@ -218,204 +218,307 @@
   background-color: rgba(0, 55, 112, 0.8); /* onpe-ui-blue/80 */
 }
 
-/* Modal Component Styles */
-.onpe-modal-container {
-  position: fixed;
-  top: 0;
-  width: 100%;
-  height: 100vh;
-  display: grid;
-  place-items: center;
-}
-
-/* Prevenir scroll del body cuando el modal está abierto */
-body.onpe-modal-open {
-  overflow: hidden;
-}
-
-.onpe-modal-container.onpe-modal-open {
-  opacity: 1;
-  z-index: 50;
-}
-
-.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {
-  z-index: 100;
-}
-
-.onpe-modal-container.onpe-modal-closed {
-  opacity: 0;
-  z-index: -10;
-}
-
-.onpe-modal-content-wrapper {
-  position: relative;
-  z-index: 20;
-  display: grid;
-  place-items: center;
-}
-
-.onpe-modal-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.onpe-modal-content.onpe-modal-with-background {
-  background-color: white;
-  padding: 2.5rem 0.25rem; /* py-10 px-1 */
-  min-width: 320px;
-  width: 98vw;
-  max-width: 95vw;
-  max-height: 90vh;
-  overflow-y: auto;
-  scroll-behavior: smooth; /* Scroll suave */
-  scrollbar-width: thin; /* Scrollbar más delgado */
-  scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */
-  transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */
-}
-
-/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */
-.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {
-  width: 8px;
-}
-
-.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {
-  background: #f7fafc;
-  border-radius: 4px;
-}
-
-.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {
-  background: #cbd5e0;
-  border-radius: 4px;
-}
-
-.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {
-  background: #a0aec0;
-}
-
-.onpe-modal-content.onpe-modal-without-background {
-  /* Sin fondo - solo contenido */
-}
-
-.onpe-modal-close-button {
-  position: absolute;
-  top: 1rem; /* top-4 */
-  right: 1rem; /* right-4 */
-  border-radius: 50%;
-  background-color: var(--onpe-ui-red);
-  padding: 7px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 30;
-  border: none;
-  cursor: pointer;
-}
-
-.onpe-modal-close-button:hover {
-  background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */
-}
-
-.onpe-modal-close-icon {
-  height: 10px;
-  width: 10px;
-  color: white;
-}
-
-/* Responsive Design */
-@media (min-width: 768px) {
-  .onpe-modal-content.onpe-modal-with-background {
-    padding: 2.5rem 0; /* md:px-auto */
-    width: 500px; /* md:w-[500px] */
-  }
-}
-
-@media (min-width: 1024px) {
-  .onpe-modal-content.onpe-modal-with-background {
-    padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */
-    width: 1024px; /* lg:w-[1024px] */
-  }
-}
+/* Modal Component Styles */
+.onpe-modal-container {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  display: grid;
+  place-items: center;
+}
 
-/* ModalBrowserIncompatible Component Styles */
-.onpe-modal-browser-incompatible-container {
-  max-width: 680px !important;
-  padding-top: 1.25rem !important; /* pt-5 */
-  padding-bottom: 2rem !important; /* pb-8 */
-}
-
-.onpe-modal-browser-incompatible-icon-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.onpe-modal-browser-incompatible-icon {
-  width: 5.5rem; /* w-22 */
-  height: 5.5rem; /* h-22 */
-  color: var(--onpe-ui-skyblue);
-}
-
-.onpe-modal-browser-incompatible-title {
-  margin-top: 1.5rem; /* mt-6 */
-  font-size: 0.875rem; /* text-sm */
-  font-weight: 500; /* font-medium */
-  text-align: center;
-  color: var(--onpe-ui-skyblue);
-}
-
-.onpe-modal-browser-incompatible-message {
-  margin-top: 1.5rem; /* mt-6 */
-  font-size: 0.875rem; /* text-sm */
-  text-align: center;
-}
-
-.onpe-modal-browser-incompatible-browsers-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2rem; /* gap-8 */
-  margin-top: 1.25rem; /* mt-5 */
-}
-
-.onpe-modal-browser-incompatible-browser-icon {
-  width: 2rem; /* w-[32px] */
-  height: 2rem; /* h-[32px] */
-}
-
-/* Responsive Design */
-@media (min-width: 768px) {
-  .onpe-modal-browser-incompatible-container {
-    width: 680px !important;
-    max-width: 680px !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .onpe-modal-browser-incompatible-container {
-    width: 680px !important;
-    max-width: 680px !important;
-  }
-  
-  .onpe-modal-browser-incompatible-title {
-    font-size: 1.5rem; /* md:text-2xl */
-  }
-  
-  .onpe-modal-browser-incompatible-message {
-    font-size: 1.125rem; /* md:text-lg */
-  }
-  
-  .onpe-modal-browser-incompatible-browsers-container {
-    gap: 3rem; /* md:gap-12 */
-  }
-  
-  .onpe-modal-browser-incompatible-browser-icon {
-    width: 3rem; /* md:w-[48px] */
-    height: 3rem; /* md:h-[48px] */
-  }
-}
+/* Prevenir scroll del body cuando el modal está abierto */
+body.onpe-modal-open {
+  overflow: hidden;
+}
+
+.onpe-modal-container.onpe-modal-open {
+  opacity: 1;
+  z-index: 50;
+}
+
+.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {
+  z-index: 100;
+}
+
+.onpe-modal-container.onpe-modal-closed {
+  opacity: 0;
+  z-index: -10;
+}
+
+.onpe-modal-content-wrapper {
+  position: relative;
+  z-index: 20;
+  display: grid;
+  place-items: center;
+}
+
+.onpe-modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start; /* Cambiar de center a flex-start para que el scroll funcione correctamente */
+}
+
+.onpe-modal-content.onpe-modal-with-background {
+  background-color: white;
+  padding: 25px 1rem 50px 1rem; /* Móvil: top 25px, bottom 50px, left/right 1rem */
+  min-width: 320px;
+  width: 95vw; /* Móvil: 95vw automático */
+  max-width: 95vw; /* Móvil: 95vw automático */
+  max-height: 90vh;
+  overflow-y: auto;
+  scroll-behavior: smooth; /* Scroll suave */
+  scrollbar-width: thin; /* Scrollbar más delgado */
+  scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */
+  transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */
+}
+
+/* Permitir que el contenido interno defina su propio tamaño */
+.onpe-modal-content.onpe-modal-with-background .onpe-modal-browser-incompatible-container {
+  max-width: none !important; /* Permitir que el contenido interno defina su tamaño */
+}
+
+/* Tamaños de Modal con clases CSS */
+.onpe-modal-content.onpe-modal-size-sm {
+  max-width: 400px !important; /* Modal pequeño */
+}
+
+.onpe-modal-content.onpe-modal-size-md {
+  max-width: 500px !important; /* Modal mediano (por defecto) */
+}
+
+.onpe-modal-content.onpe-modal-size-lg {
+  max-width: 600px !important; /* Modal grande */
+}
+
+.onpe-modal-content.onpe-modal-size-xl {
+  max-width: 800px !important; /* Modal extra grande */
+}
+
+.onpe-modal-content.onpe-modal-size-full {
+  max-width: 95vw !important; /* Modal de ancho completo */
+  width: 95vw !important;
+}
+
+/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */
+.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {
+  width: 8px;
+}
+
+.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {
+  background: #f7fafc;
+  border-radius: 4px;
+}
+
+.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {
+  background: #cbd5e0;
+  border-radius: 4px;
+}
+
+.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {
+  background: #a0aec0;
+}
+
+.onpe-modal-content.onpe-modal-without-background {
+  /* Sin fondo - solo contenido */
+  background: transparent;
+}
+
+.onpe-modal-close-button {
+  position: absolute;
+  top: 1rem; /* top-4 */
+  right: 1rem; /* right-4 */
+  color: var(--onpe-ui-red);
+  z-index: 30;
+  cursor: pointer;
+}
+
+
+.onpe-modal-close-icon {
+  height: 10px;
+  width: 10px;
+  color: white;
+}
+
+/* Responsive Design */
+@media (min-width: 640px) {
+  .onpe-modal-content.onpe-modal-with-background {
+    padding: 35px 2rem 54px 2rem; /* Tablet: top 35px, bottom 54px, left/right 2rem */
+  }
+  
+  /* Tamaños responsive en tablet */
+  
+}
+
+@media (min-width: 768px) {
+  .onpe-modal-content.onpe-modal-with-background {
+    width: 680px; /* Desktop: 680px automático */
+    max-width: 680px; /* Desktop: 680px automático */
+    padding: 35px 2rem 54px 2rem; /* Desktop: top 35px, bottom 54px, left/right 2rem */
+  }
+  
+  /* Permitir que el contenido interno defina su propio tamaño en desktop */
+  .onpe-modal-content.onpe-modal-with-background .onpe-modal-browser-incompatible-container {
+    max-width: none !important; /* Permitir que el contenido interno defina su tamaño */
+  }
+  
+  /* Tamaños responsive en desktop */
+  .onpe-modal-content.onpe-modal-size-sm {
+    width: 400px !important;
+    max-width: 400px !important;
+  }
+  
+  .onpe-modal-content.onpe-modal-size-md {
+    width: 500px !important;
+    max-width: 500px !important;
+  }
+  
+  .onpe-modal-content.onpe-modal-size-lg {
+    width: 600px !important;
+    max-width: 600px !important;
+  }
+  
+  .onpe-modal-content.onpe-modal-size-xl {
+    width: 800px !important;
+    max-width: 800px !important;
+  }
+  
+  .onpe-modal-content.onpe-modal-size-full {
+    width: 95vw !important;
+    max-width: 95vw !important;
+  }
+}
+
+/* Desktop grande (> 1024px) - El usuario puede definir el tamaño */
+@media (min-width: 1024px) {
+  .onpe-modal-content.onpe-modal-with-background {
+    /* Mantener 680px por defecto, pero permitir sobrescribir con clases */
+    width: 680px;
+    max-width: 680px;
+    padding: 35px 2rem 54px 2rem; /* Desktop grande: top 35px, bottom 54px, left/right 2rem */
+  }
+  
+  /* Permitir que el contenido interno defina su propio tamaño en desktop grande */
+  .onpe-modal-content.onpe-modal-with-background .onpe-modal-browser-incompatible-container {
+    max-width: none !important; /* Permitir que el contenido interno defina su tamaño */
+  }
+}
+
+/* ModalBrowserIncompatible Component Styles */
+.onpe-modal-browser-incompatible-container {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
+  width: 100%;
+  max-width: 780px !important; /* Tamaño específico para este modal */
+}
+
+.onpe-modal-browser-incompatible-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.onpe-modal-browser-incompatible-icon {
+  width: 84px; /* 5.5rem = 84px */
+  height: 84px; /* 5.5rem = 84px */
+  color: var(--onpe-ui-skyblue);
+}
+
+.onpe-modal-browser-incompatible-title {
+  margin-top: 4px; /* mt-4 - Menos espacio entre icono warning y título */
+  font-size: 14px; /* 0.875rem = 14px */
+  font-weight: 600; /* font-semibold */
+  text-align: center;
+  color: var(--onpe-ui-skyblue);
+}
+
+.onpe-modal-browser-incompatible-message {
+  margin-top: 24px; /* 2rem = 32px - Más espacio entre título y mensaje */
+  font-size: 14px; /* 0.875rem = 14px */
+  text-align: center;
+}
+
+.onpe-modal-browser-incompatible-browsers-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 40px; /* 2.5rem = 40px - Más espacio entre iconos de navegadores */
+  margin-top: 47px; /* 2.5rem = 40px - Más espacio entre mensaje e iconos de navegadores */
+}
+
+.onpe-modal-browser-incompatible-browser-icon {
+  width: 32px; /* 2rem = 32px */
+  height: 32px; /* 2rem = 32px */
+}
+
+/* Estilos específicos para móvil */
+@media (max-width: 640px) {
+  .onpe-modal-browser-incompatible-title {
+    font-size: 16px; /* 1rem = 16px para móvil */
+    margin-top: 0px; /* mt-3 - Menos espacio entre icono warning y título en móvil */
+  }
+  
+  .onpe-modal-browser-incompatible-message {
+    font-size: 16px; /* 1rem = 16px para móvil */
+    margin-top: 24px; /* 1.5rem = 24px - Más espacio en móvil */
+    padding: 0 8px; /* 0.5rem = 8px */
+  }
+  
+  .onpe-modal-browser-incompatible-browsers-container {
+    gap: 32px; /* 2rem = 32px - Más espacio entre iconos de navegadores en móvil */
+    margin-top: 32px; /* 2rem = 32px - Más espacio entre mensaje e iconos de navegadores en móvil */
+  }
+  
+  .onpe-modal-browser-incompatible-browser-icon {
+    width: 28px; /* 1.75rem = 28px para móvil */
+    height: 28px; /* 1.75rem = 28px para móvil */
+  }
+  
+  .onpe-modal-browser-incompatible-icon {
+    width: 64px; /* 4rem = 64px para móvil */
+    height: 64px; /* 4rem = 64px para móvil */
+  }
+}
+
+/* Responsive Design */
+@media (min-width: 640px) {
+ 
+}
+
+@media (min-width: 768px) {
+  .onpe-modal-browser-incompatible-container {
+    /* Desktop: Tamaño específico de 680px */
+    max-width: 680px !important;
+  }
+}
+
+@media (min-width: 640px) {
+  .onpe-modal-browser-incompatible-title {
+    font-size: 24px; /* 1.5rem = 24px para tablet y desktop */
+  }
+  
+  .onpe-modal-browser-incompatible-message {
+    font-size: 18px; /* 1.125rem = 18px para tablet y desktop */
+  }
+  
+  .onpe-modal-browser-incompatible-browsers-container {
+    gap: 48px; /* 3rem = 48px para tablet y desktop */
+  }
+  
+  .onpe-modal-browser-incompatible-browser-icon {
+    width: 48px; /* 3rem = 48px para tablet y desktop */
+    height: 48px; /* 3rem = 48px para tablet y desktop */
+  }
+}
+
+@media (min-width: 1024px) {
+  .onpe-modal-browser-incompatible-container {
+    /* Desktop grande: Tamaño específico de 680px */
+    max-width: 680px !important;
+  }
+}
 
 /* ModalConfirm Component Styles */
 .onpe-modal-confirm-container {
@@ -447,7 +550,7 @@ body.onpe-modal-open {
 }
 
 .onpe-modal-confirm-title {
-  margin-top: 0.75rem; /* mt-3 */
+  margin-top: 0rem; /* mt-3 */
   font-size: 1.125rem; /* text-lg */
   font-weight: 600; /* font-semibold */
   text-align: center;
@@ -567,91 +670,119 @@ body.onpe-modal-open {
   }
 }
 
-/* ModalSystemIncompatible Component Styles */
-.onpe-modal-system-incompatible-container {
-  max-width: 680px !important;
-  padding-top: 2.5rem !important; /* pt-10 */
-  padding-bottom: 6.125rem !important; /* pb-24.5 */
-}
-
-.onpe-modal-system-incompatible-icon-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.onpe-modal-system-incompatible-icon {
-  width: 5.5rem; /* w-22 */
-  height: 5.5rem; /* h-22 */
-  color: var(--onpe-ui-skyblue);
-}
-
-.onpe-modal-system-incompatible-title {
-  font-size: 0.875rem; /* text-sm */
-  text-align: center;
-  margin-top: 1.5rem; /* mt-6 */
-  color: var(--onpe-ui-skyblue);
-  font-weight: 500; /* font-medium */
-}
-
-.onpe-modal-system-incompatible-message {
-  font-size: 0.875rem; /* text-sm */
-  margin-top: 2.5rem; /* mt-10 */
-  text-align: center;
-}
-
-.onpe-modal-system-incompatible-systems-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 2rem; /* gap-8 */
-  margin-top: 1.25rem; /* mt-5 */
-  color: var(--onpe-ui-skyblue);
-}
-
-.onpe-modal-system-incompatible-system-icon {
-  width: 2rem; /* w-[32px] */
-  height: 2rem; /* h-[32px] */
-}
-
-/* Responsive Design */
-@media (min-width: 768px) {
-  .onpe-modal-system-incompatible-container {
-    width: 680px !important;
-    max-width: 680px !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .onpe-modal-system-incompatible-container {
-    width: 680px !important;
-    max-width: 680px !important;
-  }
-  
-  .onpe-modal-system-incompatible-title {
-    font-size: 1.5rem; /* md:text-2xl */
-  }
-  
-  .onpe-modal-system-incompatible-message {
-    font-size: 1.125rem; /* md:text-lg */
-  }
-  
-  .onpe-modal-system-incompatible-systems-container {
-    gap: 3rem; /* md:gap-12 */
-  }
-  
-  .onpe-modal-system-incompatible-system-icon {
-    width: 3rem; /* md:w-[48px] */
-    height: 3rem; /* md:h-[48px] */
-  }
-}
-
-@media (min-width: 1280px) {
-  .onpe-modal-system-incompatible-message {
-    padding-left: 3rem; /* xl:px-12 */
-    padding-right: 3rem; /* xl:px-12 */
-  }
-}
+/* ModalSystemIncompatible Component Styles */
+.onpe-modal-system-incompatible-container {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
+  width: 100%;
+  max-width: 780px !important; /* Tamaño específico para este modal */
+}
+
+.onpe-modal-system-incompatible-icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.onpe-modal-system-incompatible-icon {
+  width: 84px; /* 5.5rem = 84px */
+  height: 84px; /* 5.5rem = 84px */
+  color: var(--onpe-ui-skyblue);
+}
+
+.onpe-modal-system-incompatible-title {
+  margin-top: 4px; /* mt-4 - Menos espacio entre icono warning y título */
+  font-size: 14px; /* 0.875rem = 14px */
+  font-weight: 600; /* font-semibold */
+  text-align: center;
+  color: var(--onpe-ui-skyblue);
+}
+
+.onpe-modal-system-incompatible-message {
+  margin-top: 24px; /* 2rem = 24px - Más espacio entre título y mensaje */
+  font-size: 14px; /* 0.875rem = 14px */
+  text-align: center;
+}
+
+.onpe-modal-system-incompatible-systems-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 40px; /* 2.5rem = 40px - Más espacio entre iconos de sistemas */
+  margin-top: 47px; /* 2.5rem = 47px - Más espacio entre mensaje e iconos de sistemas */
+}
+
+.onpe-modal-system-incompatible-system-icon {
+  width: 32px; /* 2rem = 32px */
+  height: 32px; /* 2rem = 32px */
+  color: var(--onpe-ui-skyblue);
+}
+
+/* Estilos específicos para móvil */
+@media (max-width: 640px) {
+  .onpe-modal-system-incompatible-title {
+    font-size: 16px; /* 1rem = 16px para móvil */
+    margin-top: 0px; /* mt-3 - Menos espacio entre icono warning y título en móvil */
+  }
+  
+  .onpe-modal-system-incompatible-message {
+    font-size: 16px; /* 1rem = 16px para móvil */
+    margin-top: 24px; /* 1.5rem = 24px - Más espacio en móvil */
+    padding: 0 8px; /* 0.5rem = 8px */
+  }
+  
+  .onpe-modal-system-incompatible-systems-container {
+    gap: 32px; /* 2rem = 32px - Más espacio entre iconos de sistemas en móvil */
+    margin-top: 32px; /* 2rem = 32px - Más espacio entre mensaje e iconos de sistemas en móvil */
+  }
+  
+  .onpe-modal-system-incompatible-system-icon {
+    width: 28px; /* 1.75rem = 28px para móvil */
+    height: 28px; /* 1.75rem = 28px para móvil */
+  }
+  
+  .onpe-modal-system-incompatible-icon {
+    width: 64px; /* 4rem = 64px para móvil */
+    height: 64px; /* 4rem = 64px para móvil */
+  }
+}
+
+/* Responsive Design */
+@media (min-width: 640px) {
+ 
+}
+
+@media (min-width: 768px) {
+  .onpe-modal-system-incompatible-container {
+    /* Desktop: Tamaño específico de 680px */
+    max-width: 680px !important;
+  }
+}
+
+@media (min-width: 640px) {
+  .onpe-modal-system-incompatible-title {
+    font-size: 24px; /* 1.5rem = 24px para tablet y desktop */
+  }
+  
+  .onpe-modal-system-incompatible-message {
+    font-size: 18px; /* 1.125rem = 18px para tablet y desktop */
+  }
+  
+  .onpe-modal-system-incompatible-systems-container {
+    gap: 48px; /* 3rem = 48px para tablet y desktop */
+  }
+  
+  .onpe-modal-system-incompatible-system-icon {
+    width: 48px; /* 3rem = 48px para tablet y desktop */
+    height: 48px; /* 3rem = 48px para tablet y desktop */
+  }
+}
+
+@media (min-width: 1024px) {
+  .onpe-modal-system-incompatible-container {
+    /* Desktop grande: Tamaño específico de 680px */
+    max-width: 680px !important;
+  }
+}
 
 /* BrowserRecommended Component Styles */
 .onpe-browser-recommended {
@@ -797,3 +928,299 @@ body.onpe-modal-open {
     display: none;
   }
 }
+
+/* ModalDnieVersions Component Styles */
+.onpe-modal-dnie-versions-container {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
+  width: 100%;
+  max-width: 590px !important; /* Tamaño específico para este modal */
+}
+
+.onpe-modal-dnie-versions-title {
+  text-align: center;
+  color: var(--onpe-ui-blue);
+  font-weight: 700; /* font-bold */
+  margin-bottom: 8px; /* mb-2 */
+  font-size: 18px; /* text-lg */
+}
+
+.onpe-modal-dnie-versions-content {
+  display: flex;
+  flex-direction: column;
+  gap: 40px; /* gap-10 */
+  align-items: center;
+  margin-top: 28px; /* mt-7 */
+  font-size: 14px; /* text-sm */
+}
+
+.onpe-modal-dnie-versions-article {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px; /* gap-10 */
+}
+
+.onpe-modal-dnie-versions-text {
+  flex: 1;
+}
+
+.onpe-modal-dnie-versions-subtitle {
+  flex: 1;
+  margin-bottom: 16px; /* mb-4 */
+}
+
+.onpe-modal-dnie-versions-bold {
+  font-weight: 700; /* font-bold */
+}
+
+.onpe-modal-dnie-versions-list {
+  font-size: 14px; /* text-sm */
+  list-style-type: disc;
+  text-align: justify;
+  align-self: flex-start;
+  padding-left: 20px; /* pl-5 */
+}
+
+.onpe-modal-dnie-versions-list li {
+  margin-bottom: 8px; /* mb-2 */
+}
+
+.onpe-modal-dnie-versions-image-container {
+  width: 240px;
+  position: relative;
+}
+
+.onpe-modal-dnie-versions-image-container-double {
+  height: 181px;
+}
+
+.onpe-modal-dnie-versions-image {
+  width: 200px;
+  height: 117px;
+}
+
+.onpe-modal-dnie-versions-image-overlay {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+/* Estilos específicos para móvil */
+@media (max-width: 640px) {
+  .onpe-modal-dnie-versions-title {
+    font-size: 16px; /* text-base para móvil */
+  }
+  
+  .onpe-modal-dnie-versions-content {
+    gap: 32px; /* gap-8 para móvil */
+    margin-top: 24px; /* mt-6 para móvil */
+  }
+  
+  .onpe-modal-dnie-versions-article {
+    gap: 32px; /* gap-8 para móvil */
+  }
+  
+  .onpe-modal-dnie-versions-image-container {
+    width: 200px; /* Más pequeño en móvil */
+  }
+  
+  .onpe-modal-dnie-versions-image {
+    width: 180px; /* Más pequeño en móvil */
+    height: 105px; /* Más pequeño en móvil */
+  }
+}
+
+/* Responsive Design */
+@media (min-width: 640px) {
+  .onpe-modal-dnie-versions-title {
+    font-size: 20px; /* text-xl para tablet y desktop */
+  }
+  
+  .onpe-modal-dnie-versions-content {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-dnie-versions-list {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+}
+
+@media (min-width: 768px) {
+  .onpe-modal-dnie-versions-container {
+    /* Desktop: Tamaño específico de 590px */
+    max-width: 590px !important;
+  }
+  
+  .onpe-modal-dnie-versions-article {
+    flex-direction: row; /* md:flex-row */
+    align-items: flex-start; /* md:items-start */
+  }
+  
+  .onpe-modal-dnie-versions-article:last-child {
+    gap: 52px; /* gap-13 para desktop */
+  }
+}
+
+@media (min-width: 1024px) {
+  .onpe-modal-dnie-versions-container {
+    /* Desktop grande: Tamaño específico de 590px */
+    max-width: 590px !important;
+  }
+}
+
+/* ModalNfc Component Styles */
+.onpe-modal-nfc-container {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
+  width: 100%;
+  max-width: 600px !important; /* Tamaño específico para este modal */
+}
+
+.onpe-modal-nfc-title {
+  text-align: center;
+  color: var(--onpe-ui-blue);
+  font-weight: 700; /* font-bold */
+  font-size: 18px; /* text-lg */
+}
+
+.onpe-modal-nfc-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px; /* gap-6 */
+  align-items: center;
+  margin-top: 32px; /* mt-8 */
+  font-size: 14px; /* text-sm */
+}
+
+.onpe-modal-nfc-section {
+  width: 100%;
+}
+
+.onpe-modal-nfc-step {
+  font-size: 14px; /* text-sm */
+  text-align: justify;
+  margin-bottom: 12px; /* mb-3 */
+}
+
+.onpe-modal-nfc-step-number {
+  margin-right: 4px; /* mr-1 */
+}
+
+.onpe-modal-nfc-list {
+  list-style-type: disc;
+  padding-left: 16px; /* pl-4 */
+  margin-top: 8px; /* space-y-2 */
+}
+
+.onpe-modal-nfc-list-item {
+  font-size: 14px; /* text-sm */
+  text-align: justify;
+  margin-bottom: 8px; /* space-y-2 */
+}
+
+.onpe-modal-nfc-image {
+  -o-object-fit: contain;
+     object-fit: contain;
+  width: 273px;
+  height: 348px;
+}
+
+.onpe-modal-nfc-text {
+  text-align: justify;
+  margin-top: 8px; /* mt-2 */
+}
+
+.onpe-modal-nfc-subtitle {
+  text-align: center;
+  color: var(--onpe-ui-blue);
+  font-weight: 700; /* font-bold */
+  margin: 20px 0; /* my-5 */
+  font-size: 18px; /* text-lg */
+}
+
+.onpe-modal-nfc-instructions {
+  padding-left: 12px; /* pl-3 */
+}
+
+.onpe-modal-nfc-ordered-list {
+  font-size: 14px; /* text-sm */
+  text-align: justify;
+  list-style-type: decimal;
+  list-style-position: outside;
+}
+
+.onpe-modal-nfc-ordered-list li {
+  margin-bottom: 8px; /* mb-2 */
+}
+
+.onpe-modal-nfc-icon {
+  width: 100%;
+  height: 100%;
+  padding-bottom: 40px; /* pb-10 */
+  color: var(--onpe-ui-blue);
+}
+
+/* Estilos específicos para móvil */
+@media (max-width: 640px) {
+  .onpe-modal-nfc-title {
+    font-size: 16px; /* text-base para móvil */
+  }
+  
+  .onpe-modal-nfc-content {
+    gap: 20px; /* gap-5 para móvil */
+    margin-top: 24px; /* mt-6 para móvil */
+  }
+  
+  .onpe-modal-nfc-image {
+    width: 200px; /* Más pequeño en móvil */
+    height: 260px; /* Más pequeño en móvil */
+  }
+  
+  .onpe-modal-nfc-subtitle {
+    font-size: 16px; /* text-base para móvil */
+  }
+}
+
+/* Responsive Design */
+@media (min-width: 640px) {
+  .onpe-modal-nfc-title {
+    font-size: 20px; /* text-xl para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-content {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-step {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-list-item {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-text {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-subtitle {
+    font-size: 20px; /* text-xl para tablet y desktop */
+  }
+  
+  .onpe-modal-nfc-ordered-list {
+    font-size: 16px; /* text-base para tablet y desktop */
+  }
+}
+
+@media (min-width: 768px) {
+  .onpe-modal-nfc-container {
+    /* Desktop: Tamaño específico de 600px */
+    max-width: 600px !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .onpe-modal-nfc-container {
+    /* Desktop grande: Tamaño específico de 600px */
+    max-width: 600px !important;
+  }
+}