/* PlazaVirtual V3.15.3 — Mobile viewport containment
   Evita que componentes, imagenes o contenido flexible ensanchen el documento
   fuera del ancho real del dispositivo. Los carruseles/tablas conservan su
   desplazamiento dentro de su propio contenedor. */

html,
body {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Flex/Grid: permitir que el contenido realmente se encoja en pantallas angostas. */
main,
section,
article,
aside,
header,
footer,
nav,
form,
div,
.pv-shell,
.grid,
.flex {
  min-width: 0;
}

.pv-shell {
  width: 100%;
  max-width: 1280px;
}

/* Medios nunca deben ampliar el viewport. */
img,
picture,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

img,
video,
canvas {
  height: auto;
}

/* Controles de formulario: especialmente search/select en iOS/Android. */
input,
select,
textarea,
button {
  min-width: 0;
  max-width: 100%;
}

textarea {
  width: 100%;
  resize: vertical;
}

/* Textos/URLs/nombres muy largos no pueden forzar ancho extra. */
p,
li,
dd,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
strong,
small {
  overflow-wrap: anywhere;
}

/* Las tablas anchas se desplazan dentro de su contenedor, no toda la pagina. */
.overflow-x-auto,
.pv-table-wrap,
[data-horizontal-scroll] {
  max-width: 100%;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* Carruseles horizontales deliberados quedan contenidos dentro de la pagina. */
.pv-v37-trust .pv-trust-card,
.pv-v37-category-grid,
.pv314-promo-grid,
.pv314-store-nav,
.pv-chips,
.v315-progress {
  max-width: 100%;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  /* Cabecera: logo + buscador no pueden competir por un ancho mayor al viewport. */
  header.sticky > .pv-shell {
    width: 100%;
    max-width: 100%;
    gap: .5rem;
  }

  header.sticky > .pv-shell > a {
    flex: 0 0 auto;
  }

  header.sticky > .pv-shell > form[role="search"] {
    flex: 1 1 0%;
    width: auto;
    max-width: 100%;
    min-width: 0;
  }

  header.sticky > .pv-shell > form[role="search"] .relative,
  header.sticky > .pv-shell > form[role="search"] input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Avisos superiores: envolver en vez de empujar la pantalla. */
  .pv-shell.flex,
  .pv-shell .flex {
    min-width: 0;
  }

  /* Tarjetas de carrito: imagen fija pequeña + contenido flexible. */
  .pv-cart-item,
  main .bg-white.flex {
    max-width: 100%;
  }

  /* Modales y paneles no sobrepasan bordes del telefono. */
  [role="dialog"],
  .modal,
  .fixed > .bg-white,
  .fixed > [class*="rounded"] {
    max-width: calc(100vw - 1rem);
  }

  /* Evitar que botones con textos largos creen ancho adicional. */
  .pv-btn,
  button,
  a[class*="rounded"] {
    white-space: normal;
  }
}

/* Los nombres de iconos de Material Icons son ligaduras y no deben partirse. */
.material-icons-round {
  overflow-wrap: normal;
  word-break: normal;
}

/* V3.25.9: cierres visibles, con contraste y área táctil suficiente. */
.pv-visible-close {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35rem !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: .55rem .8rem !important;
  border: 2px solid rgba(255,255,255,.92) !important;
  border-radius: .85rem !important;
  background: #0f172a !important;
  color: #fff !important;
  font-size: .8rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.32) !important;
  cursor: pointer !important;
}

.pv-visible-close:hover,
.pv-visible-close:focus-visible {
  background: #fff !important;
  color: #0f172a !important;
  border-color: #0f172a !important;
  outline: 3px solid rgba(56,189,248,.35) !important;
  outline-offset: 2px !important;
}

/* Respaldo para modales de versiones anteriores que no tenían la clase nueva. */
button[aria-label^="Cerrar"],
button[title="Cerrar"],
[data-modal-close],
.modal-close {
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background-color: #0f172a !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.85) !important;
}