/* Widget Styles */
.pinit_floating_widget {
  position: fixed !important;
  top: 0px !important;
  left: 0px !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  width: 100vw;
  height: 100vh;
}

.pinit_floating_widget * {
  pointer-events: auto !important;
}
.pinit_widget_popup {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
  z-index: 2147483647 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  flex-direction: column !important;
  transform: none !important;
  translate: none !important;
  inset: 0 !important;
}
 .pinit_widget_main {
  position: relative !important;
  /* 90% reales del viewport: sin `max-width`, que es lo que antes recortaba el
     modal a 820px dejándolo muy por debajo del porcentaje pedido en pantallas
     anchas — en un viewport de 1342px un tope de 1100px daba 82%. */
  width: 90% !important;
  max-width: none !important;
  height: 90% !important;
  background: #f4f4f6 !important;
  z-index: 2147483647 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  background-color: #f5f5f6 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Mobile: the dialog takes the whole screen. At phone widths a centered card
   wastes the little room there is, and the tracking timeline needs every
   pixel of width it can get. The classic widget shipped no media query at
   all, so this is new behavior — the desktop layout above is unchanged. */
@media (max-width: 640px) {
  .pinit_widget_main {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
  }
}

#pinit_widget_search {
  margin-top: 4px;
  background-color: #f5f5f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
}

#pinit_widget_search h2 {
  margin: 0;
  font-family: Lato, Arial;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  padding: 1.6em 0 0.4em;
  color: #191b2a;
}

.pinit_widget_popup .pinit_widget_header {
  position: relative;
  height: 50px;
  background: #f4f4f6;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.pinit_widget_popup .pinit_widget_title {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin: 0;
  flex: 1;
}

.pinit_widget_popup .pinit_widget_close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #6b7280;
  transition: all 0.2s ease;
  z-index: 1001;
}

.pinit_widget_popup .pinit_widget_close:hover {
  background: #f9fafb;
  color: #374151;
}

.pinit_widget_popup .pinit_widget_content {
  height: calc(100% - 50px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  box-sizing: border-box;
}

.pinit_widget_popup .pinit_widget_content::-webkit-scrollbar {
  width: 8px;
}

.pinit_widget_popup .pinit_widget_content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.pinit_widget_popup .pinit_widget_content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.pinit_widget_popup .pinit_widget_extra_space {
  height: 30px;
  width: 100%;
}

.pinit_widget_input_container {
  width: 100%;
  margin: 0 auto;
}

#pinit_widget_search_input {
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  padding: 2px 20px 0 20px;
  border-radius: 8px;
  border: 0;
  background: #ffffff;
  outline: none;
  font-family: Lato, Arial;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  line-height: 19px;
  letter-spacing: 0;
  text-align: left;
  color: #000;
}

#pinit_widget_search_input::placeholder {
  font-family: Lato, Arial;
  color: #9ca3af;
  opacity: 1;
}

#pinit_widget_search_btn {
  border: 1px solid #fb0606ff;
  background-color: #fb0606ff;
  color: #ffffff;
  border-radius: 4px !important;
  height: 50px;
  width: 150px;
  margin: 0 auto;
  text-transform: uppercase;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

/* Utility Classes */
.pinit_widget_color_gray_light {
  color: #9ca3af;
}

.pinit_widget_color_gray_dark {
  color: #374151;
}