@onpe/ui 1.2.39 → 1.2.40

package/dist/index.css

@@ -1,131 +1,3 @@
-/* ONPE UI - Sistema de diseño global */
-
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
-
-/* ===== VARIABLES GLOBALES ===== */
-:root {
-  /* Colores ONPE */
-  --onpe-ui-blue: #003770;
-  --onpe-ui-skyblue: #0073cf;
-  --onpe-ui-skyblue-light: #69b2e8;
-  --onpe-ui-yellow: #ffb81c;
-  --onpe-ui-light-skyblue: #aaeff6;
-  --onpe-ui-gray: #bcbcbc;
-  --onpe-ui-gray-light: #bdbdbd;
-  --onpe-ui-gray-extra-light: #f2f2f2;
-  --onpe-ui-red: #e3002b;
-  --onpe-ui-dark-gray: #4f4f4f;
-  --onpe-ui-green: #76bd43;
-  --onpe-ui-yellow-light: #FFF1D2;
-  
-  /* Breakpoints - Solo para referencia, usar valores fijos en media queries */
-  /* xs: 480px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px, 3xl: 1920px */
-}
-
-/* ===== GUÍA DE BREAKPOINTS ===== */
-/* 
-  Para usar breakpoints en componentes, usar valores fijos:
-  xs: 480px, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px, 3xl: 1920px
-*/
-
-/* ===== RESET GLOBAL PARA COMPONENTES ONPE ===== */
-.onpe-button,
-.onpe-browser-recommended,
-.onpe-footer-contact,
-.onpe-footer-development {
-  box-sizing: border-box;
-  font-family: 'Poppins', system-ui, sans-serif;
-}
-
-.onpe-button *,
-.onpe-browser-recommended *,
-.onpe-footer-contact *,
-.onpe-footer-development * {
-  box-sizing: border-box;
-}
-
-/* ===== ESTILOS GLOBALES PARA COMPONENTES ===== */
-.onpe-button {
-  cursor: pointer;
-}
-
-.onpe-button:disabled {
-  cursor: not-allowed;
-}
-
-/* ===== UTILIDADES GLOBALES ===== */
-.onpe-fast-blink {
-  animation: onpe-fast-blink 0.8s ease-in-out infinite;
-}
-
-.font-consolas {
-  font-family: 'Consolas', monospace;
-  font-weight: 900;
-}
-
-/* ===== ANIMACIONES ===== */
-@keyframes onpe-fast-blink {
-  0% { opacity: 1; }
-  25% { opacity: 0.8; }
-  50% { opacity: 0.4; }
-  75% { opacity: 0.8; }
-  100% { opacity: 1; }
-}
-
-
-
-/* BrowserRecommended Component Styles */
-.onpe-browser-recommended {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-  padding: 0.75rem 0 1.5rem 0;
-  font-size: 0.75rem;
-  text-align: center;
-  color: var(--onpe-ui-blue);
-  background-color: rgba(105, 178, 232, 0.15); /* onpe-ui-skyblue-light/15 */
-}
-
-.onpe-browser-recommended .onpe-browser-list {
-  display: flex;
-  gap: 1.5rem;
-}
-
-.onpe-browser-recommended .onpe-browser-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.onpe-browser-recommended .onpe-browser-name {
-  display: none;
-  text-align: left;
-}
-
-/* Responsive Design */
-@media (min-width: 768px) {
-  .onpe-browser-recommended {
-    padding: 0.5rem 0;
-  }
-  
-  .onpe-browser-recommended .onpe-browser-list {
-    gap: 2rem;
-  }
-  
-  .onpe-browser-recommended .onpe-browser-name {
-    display: block;
-  }
-}
-
-@media (min-width: 1024px) {
-  .onpe-browser-recommended {
-    flex-direction: row;
-  }
-}
-
-
 /* Button Component Styles */
 .onpe-button {
   color: white;
@@ -270,172 +142,280 @@
 }
 
 
-
-/* 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 */
+/* Overlay Component Styles */
+.onpe-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 10;
+  transition: all 0.5s ease-in-out;
 }
 
-.onpe-modal-browser-incompatible-icon-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.onpe-overlay.onpe-overlay-show {
+  pointer-events: auto;
+  opacity: 1;
 }
 
-.onpe-modal-browser-incompatible-icon {
-  width: 5.5rem; /* w-22 */
-  height: 5.5rem; /* h-22 */
-  color: var(--onpe-ui-skyblue);
+.onpe-overlay.onpe-overlay-hide {
+  pointer-events: none;
+  opacity: 0;
 }
 
-.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);
+/* Overlay Colors */
+.onpe-overlay.onpe-overlay-blue {
+  background-color: rgba(0, 55, 112, 0.8); /* onpe-ui-blue/80 */
 }
 
-.onpe-modal-browser-incompatible-message {
-  margin-top: 1.5rem; /* mt-6 */
-  font-size: 0.875rem; /* text-sm */
-  text-align: center;
+.onpe-overlay.onpe-overlay-skyblue {
+  background-color: rgba(0, 115, 207, 0.8); /* onpe-ui-skyblue/80 */
 }
 
-.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-overlay.onpe-overlay-skyblue-light {
+  background-color: rgba(105, 178, 232, 0.8); /* onpe-ui-skyblue-light/80 */
 }
 
-.onpe-modal-browser-incompatible-browser-icon {
-  width: 2rem; /* w-[32px] */
-  height: 2rem; /* h-[32px] */
+.onpe-overlay.onpe-overlay-yellow {
+  background-color: rgba(255, 184, 28, 0.8); /* onpe-ui-yellow/80 */
 }
 
-/* Responsive Design */
-@media (min-width: 768px) {
-  .onpe-modal-browser-incompatible-container {
-    width: 680px !important;
-    max-width: 680px !important;
-  }
+.onpe-overlay.onpe-overlay-light-skyblue {
+  background-color: rgba(170, 239, 246, 0.8); /* onpe-ui-light-skyblue/80 */
 }
 
-@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] */
-  }
+.onpe-overlay.onpe-overlay-gray {
+  background-color: rgba(188, 188, 188, 0.8); /* onpe-ui-gray/80 */
 }
-
-
-/* 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-overlay.onpe-overlay-gray-light {
+  background-color: rgba(189, 189, 189, 0.8); /* onpe-ui-gray-light/80 */
 }
 
-.onpe-modal-system-incompatible-icon-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.onpe-overlay.onpe-overlay-gray-extra-light {
+  background-color: rgba(242, 242, 242, 0.8); /* onpe-ui-gray-extra-light/80 */
 }
 
-.onpe-modal-system-incompatible-icon {
-  width: 5.5rem; /* w-22 */
-  height: 5.5rem; /* h-22 */
-  color: var(--onpe-ui-skyblue);
+.onpe-overlay.onpe-overlay-red {
+  background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red/80 */
 }
 
-.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-overlay.onpe-overlay-dark-gray {
+  background-color: rgba(79, 79, 79, 0.8); /* onpe-ui-dark-gray/80 */
 }
 
-.onpe-modal-system-incompatible-message {
-  font-size: 0.875rem; /* text-sm */
-  margin-top: 2.5rem; /* mt-10 */
-  text-align: center;
+.onpe-overlay.onpe-overlay-green {
+  background-color: rgba(118, 189, 67, 0.8); /* onpe-ui-green/80 */
 }
 
-.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-overlay.onpe-overlay-yellow-light {
+  background-color: rgba(255, 241, 210, 0.8); /* onpe-ui-yellow-light/80 */
 }
 
-.onpe-modal-system-incompatible-system-icon {
-  width: 2rem; /* w-[32px] */
-  height: 2rem; /* h-[32px] */
+.onpe-overlay.onpe-overlay-primary {
+  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;
 }
 
-/* Responsive Design */
-@media (min-width: 768px) {
-  .onpe-modal-system-incompatible-container {
-    width: 680px !important;
-    max-width: 680px !important;
-  }
+/* Prevenir scroll del body cuando el modal está abierto */
+body.onpe-modal-open {
+  overflow: hidden;
 }
 
-@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] */
+.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: 1280px) {
-  .onpe-modal-system-incompatible-message {
-    padding-left: 3rem; /* xl:px-12 */
-    padding-right: 3rem; /* xl:px-12 */
+@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] */
   }
 }
 
+/* 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] */
+  }
+}
 
 /* ModalConfirm Component Styles */
 .onpe-modal-confirm-container {
@@ -540,7 +520,6 @@
   }
 }
 
-
 /* ModalLoading Component Styles */
 .onpe-modal-loading-spinner-desktop {
   display: none; /* hidden */
@@ -588,296 +567,233 @@
   }
 }
 
-
-/* Footer Component Styles */
-.onpe-footer {
-  /* Footer base styles */
+/* 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-footer-content {
-  /* Content wrapper styles */
+.onpe-modal-system-incompatible-icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.onpe-footer-contact {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  width: 100%;
-  min-height: 100px;
-  background-color: var(--onpe-ui-blue);
+.onpe-modal-system-incompatible-icon {
+  width: 5.5rem; /* w-22 */
+  height: 5.5rem; /* h-22 */
+  color: var(--onpe-ui-skyblue);
 }
 
-.onpe-footer-contact-list {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  width: 100%;
-  flex-direction: column;
-  gap: 1.5rem;
-  margin: 0 auto;
-  padding: 3.5rem 1rem;
-  max-width: 1456px;
+.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-footer-contact-item {
-  /* List item styles */
+.onpe-modal-system-incompatible-message {
+  font-size: 0.875rem; /* text-sm */
+  margin-top: 2.5rem; /* mt-10 */
+  text-align: center;
 }
 
-.onpe-footer-contact-title {
-  font-weight: 600;
-  color: var(--onpe-ui-yellow);
-  margin-bottom: 0.25rem;
+.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-footer-contact-text {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: white;
-}
-
-.onpe-footer-development {
-  height: 93px;
-  width: 100%;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(255, 241, 210, 0.75); /* onpe-ui-yellow-light/75 */
-  position: fixed;
-  z-index: 10;
-  right: 0;
-  bottom: 0;
-}
-
-.onpe-footer-development-text {
-  padding: 0.5rem 0.5rem;
-  font-size: 1.5rem;
-  color: var(--onpe-ui-blue);
-  font-family: 'Consolas', monospace;
-  font-weight: 900;
-}
-
-.onpe-footer-development-break {
-  display: block;
+.onpe-modal-system-incompatible-system-icon {
+  width: 2rem; /* w-[32px] */
+  height: 2rem; /* h-[32px] */
 }
 
 /* Responsive Design */
 @media (min-width: 768px) {
-  .onpe-footer-contact-list {
-    padding: 1.75rem 1rem;
+  .onpe-modal-system-incompatible-container {
+    width: 680px !important;
+    max-width: 680px !important;
   }
 }
 
 @media (min-width: 1024px) {
-  .onpe-footer-contact-list {
-    flex-direction: row;
-    align-items: center;
+  .onpe-modal-system-incompatible-container {
+    width: 680px !important;
+    max-width: 680px !important;
   }
   
-  .onpe-footer-development {
-    height: 46px;
+  .onpe-modal-system-incompatible-title {
+    font-size: 1.5rem; /* md:text-2xl */
   }
   
-  .onpe-footer-development-break {
-    display: none;
+  .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] */
   }
-}
-
-
-/* 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;
+@media (min-width: 1280px) {
+  .onpe-modal-system-incompatible-message {
+    padding-left: 3rem; /* xl:px-12 */
+    padding-right: 3rem; /* xl:px-12 */
+  }
 }
-
-.onpe-modal-content {
-  position: relative;
+
+/* BrowserRecommended Component Styles */
+.onpe-browser-recommended {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 1.5rem;
+  padding: 0.75rem 0 1.5rem 0;
+  font-size: 0.75rem;
+  text-align: center;
+  color: var(--onpe-ui-blue);
+  background-color: rgba(105, 178, 232, 0.15); /* onpe-ui-skyblue-light/15 */
 }
 
-.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-browser-recommended .onpe-browser-list {
+  display: flex;
+  gap: 1.5rem;
 }
 
-.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;
+.onpe-browser-recommended .onpe-browser-item {
   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 */
+  gap: 0.5rem;
 }
 
-.onpe-modal-close-icon {
-  height: 10px;
-  width: 10px;
-  color: white;
+.onpe-browser-recommended .onpe-browser-name {
+  display: none;
+  text-align: left;
 }
 
 /* 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] */
+  .onpe-browser-recommended {
+    padding: 0.5rem 0;
+  }
+  
+  .onpe-browser-recommended .onpe-browser-list {
+    gap: 2rem;
+  }
+  
+  .onpe-browser-recommended .onpe-browser-name {
+    display: block;
   }
 }
 
 @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] */
+  .onpe-browser-recommended {
+    flex-direction: row;
   }
 }
 
-
-/* Overlay Component Styles */
-.onpe-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-  z-index: 10;
-  transition: all 0.5s ease-in-out;
-}
-
-.onpe-overlay.onpe-overlay-show {
-  pointer-events: auto;
-  opacity: 1;
-}
-
-.onpe-overlay.onpe-overlay-hide {
-  pointer-events: none;
-  opacity: 0;
-}
-
-/* Overlay Colors */
-.onpe-overlay.onpe-overlay-blue {
-  background-color: rgba(0, 55, 112, 0.8); /* onpe-ui-blue/80 */
-}
-
-.onpe-overlay.onpe-overlay-skyblue {
-  background-color: rgba(0, 115, 207, 0.8); /* onpe-ui-skyblue/80 */
+/* Footer Component Styles */
+.onpe-footer {
+  /* Footer base styles */
 }
 
-.onpe-overlay.onpe-overlay-skyblue-light {
-  background-color: rgba(105, 178, 232, 0.8); /* onpe-ui-skyblue-light/80 */
+.onpe-footer-content {
+  /* Content wrapper styles */
 }
 
-.onpe-overlay.onpe-overlay-yellow {
-  background-color: rgba(255, 184, 28, 0.8); /* onpe-ui-yellow/80 */
+.onpe-footer-contact {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  width: 100%;
+  min-height: 100px;
+  background-color: var(--onpe-ui-blue);
 }
 
-.onpe-overlay.onpe-overlay-light-skyblue {
-  background-color: rgba(170, 239, 246, 0.8); /* onpe-ui-light-skyblue/80 */
+.onpe-footer-contact-list {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin: 0 auto;
+  padding: 3.5rem 1rem;
+  max-width: 1456px;
 }
 
-.onpe-overlay.onpe-overlay-gray {
-  background-color: rgba(188, 188, 188, 0.8); /* onpe-ui-gray/80 */
+.onpe-footer-contact-item {
+  /* List item styles */
 }
 
-.onpe-overlay.onpe-overlay-gray-light {
-  background-color: rgba(189, 189, 189, 0.8); /* onpe-ui-gray-light/80 */
+.onpe-footer-contact-title {
+  font-weight: 600;
+  color: var(--onpe-ui-yellow);
+  margin-bottom: 0.25rem;
 }
 
-.onpe-overlay.onpe-overlay-gray-extra-light {
-  background-color: rgba(242, 242, 242, 0.8); /* onpe-ui-gray-extra-light/80 */
+.onpe-footer-contact-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: white;
 }
 
-.onpe-overlay.onpe-overlay-red {
-  background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red/80 */
+.onpe-footer-development {
+  height: 93px;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 241, 210, 0.75); /* onpe-ui-yellow-light/75 */
+  position: fixed;
+  z-index: 10;
+  right: 0;
+  bottom: 0;
 }
 
-.onpe-overlay.onpe-overlay-dark-gray {
-  background-color: rgba(79, 79, 79, 0.8); /* onpe-ui-dark-gray/80 */
+.onpe-footer-development-text {
+  padding: 0.5rem 0.5rem;
+  font-size: 1.5rem;
+  color: var(--onpe-ui-blue);
+  font-family: 'Consolas', monospace;
+  font-weight: 900;
 }
 
-.onpe-overlay.onpe-overlay-green {
-  background-color: rgba(118, 189, 67, 0.8); /* onpe-ui-green/80 */
+.onpe-footer-development-break {
+  display: block;
 }
 
-.onpe-overlay.onpe-overlay-yellow-light {
-  background-color: rgba(255, 241, 210, 0.8); /* onpe-ui-yellow-light/80 */
+/* Responsive Design */
+@media (min-width: 768px) {
+  .onpe-footer-contact-list {
+    padding: 1.75rem 1rem;
+  }
 }
 
-.onpe-overlay.onpe-overlay-primary {
-  background-color: rgba(0, 55, 112, 0.8); /* onpe-ui-blue/80 */
+@media (min-width: 1024px) {
+  .onpe-footer-contact-list {
+    flex-direction: row;
+    align-items: center;
+  }
+  
+  .onpe-footer-development {
+    height: 46px;
+  }
+  
+  .onpe-footer-development-break {
+    display: none;
+  }
 }