@onpe/ui 1.2.63 → 1.2.65

package/dist/components.esm.css

@@ -285,28 +285,6 @@ body.onpe-modal-open {
   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;
@@ -353,14 +331,10 @@ body.onpe-modal-open {
     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 */
   }
   
@@ -369,39 +343,13 @@ body.onpe-modal-open {
     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;
+    /* Siempre 100% - cada modal define su max-width */
     padding: 35px 2rem 54px 2rem; /* Desktop grande: top 35px, bottom 54px, left/right 2rem */
   }
   
@@ -411,127 +359,129 @@ body.onpe-modal-open {
   }
 }
 
-/* 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;
-  }
-}
+/* ModalBrowserIncompatible Component Styles */
+.onpe-modal-browser-incompatible-container {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
+  width: 100%;
+  max-width: 680px !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 {
+  /* Solo contenido - el espaciado lo maneja el Modal base */
   width: 100%;
-  max-width: 780px !important; /* Tamaño específico para móvil */
-  padding-top:30px !important; /* pt-5 */
-  padding-bottom: 30px !important; /* pb-8 */
-  padding-left: 30px !important; /* pl-5 */
-  padding-right: 30px !important; /* pr-5 */
+  max-width: 719px !important; /* Tamaño específico para este modal */
+  padding-top: 30px !important;
+  padding-bottom: 30px !important;
+  padding-left: 30px !important;
+  padding-right: 30px !important;
 }
 
 .onpe-modal-confirm-icon-container {
@@ -541,8 +491,8 @@ body.onpe-modal-open {
 }
 
 .onpe-modal-confirm-icon {
-  width: 4rem; /* w-16 */
-  height: 4rem; /* h-16 */
+  width: 64px; /* 4rem = 64px */
+  height: 64px; /* 4rem = 64px */
   color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
 }
 
@@ -556,8 +506,8 @@ body.onpe-modal-open {
 }
 
 .onpe-modal-confirm-title {
-  margin-top: 0rem; /* mt-3 */
-  font-size: 1.125rem; /* text-lg */
+  margin-top: 0px;
+  font-size: 18px; /* 1.125rem = 18px */
   font-weight: 600; /* font-semibold */
   text-align: center;
   color: var(--onpe-ui-skyblue); /* Color por defecto: azul */
@@ -573,8 +523,8 @@ body.onpe-modal-open {
 }
 
 .onpe-modal-confirm-message {
-  margin-top: 1.75rem; /* mt-7 */
-  font-size: 0.875rem; /* text-sm */
+  margin-top: 28px; /* 1.75rem = 28px */
+  font-size: 14px; /* 0.875rem = 14px */
   text-align: center;
   max-width: 100%;
   color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */
@@ -586,8 +536,8 @@ body.onpe-modal-open {
   align-items: center;
   justify-content: center;
   width: 100%;
-  gap: 1.25rem; /* gap-5 */
-  margin-top: 2.75rem; /* mt-11 */
+  gap: 20px; /* 1.25rem = 20px */
+  margin-top: 44px; /* 2.75rem = 44px */
 }
 
 .onpe-modal-confirm-button {
@@ -595,59 +545,37 @@ body.onpe-modal-open {
   max-width: 200px;
 }
 
-/* Estilos específicos para móvil */
-@media (max-width: 640px) {
-  .onpe-modal-confirm-container {
-    padding-left: 20px !important; /* Menos padding en móvil */
-    padding-right: 20px !important;
-  }
-  
-  .onpe-modal-confirm-title {
-    font-size: 1rem; /* text-base para móvil */
-  }
-  
-  .onpe-modal-confirm-message {
-    font-size: 0.875rem; /* text-sm para móvil */
-    padding: 0 8px; /* Pequeño padding horizontal */
-  }
-}
-
 /* Responsive Design */
 @media (min-width: 768px) {
   .onpe-modal-confirm-container {
-    /* Tablet: Tamaño específico de 680px */
-    max-width: 680px !important;
-    padding-left: 32px !important; /* pl-5 */
-    padding-right: 32px !important; /* pr-5 */
+    max-width: 719px !important;
+    padding-top: 30px !important;
+    padding-bottom: 30px !important;
+    padding-left: 30px !important;
+    padding-right: 30px !important;
   }
-}
 
-@media (min-width: 1024px) {
-  .onpe-modal-confirm-container {
-    /* Desktop grande: Tamaño específico de 680px */
-    max-width: 680px !important;
-  }
-  
   .onpe-modal-confirm-title {
-    margin-top: 1rem; /* lg:mt-4 */
-    font-size: 1.5rem; /* lg:text-2xl */
+    margin-top: 16px; /* 1rem = 16px */
+    font-size: 24px; /* 1.5rem = 24px */
   }
   
   .onpe-modal-confirm-message {
-    font-size: 1.125rem; /* lg:text-lg */
-    max-width: 576px; /* lg:max-w-[576px] */
+    font-size: 18px; /* 1.125rem = 18px */
   }
   
   .onpe-modal-confirm-buttons-container {
     flex-direction: row; /* lg:flex-row */
-    margin-top: 5rem; /* lg:mt-20 */
+    margin-top: 80px; /* 5rem = 80px */
   }
   
   .onpe-modal-confirm-button {
-    width: 200px; /* lg:w-[200px] */
+    width: 200px;
   }
 }
 
+
+
 /* ModalLoading Component Styles */
 .onpe-modal-loading-spinner-desktop {
   display: none; /* hidden */
@@ -699,7 +627,7 @@ body.onpe-modal-open {
 .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 */
+  max-width: 680px !important; /* Tamaño específico para este modal */
 }
 
 .onpe-modal-system-incompatible-icon-container {
@@ -985,10 +913,12 @@ body.onpe-modal-open {
   flex-direction: column;
   align-items: center;
   gap: 40px; /* gap-10 */
+  width: 100%;
 }
 
 .onpe-modal-dnie-versions-text {
   flex: 1;
+  width: 100%;
 }
 
 .onpe-modal-dnie-versions-subtitle {