/* ==========================================================================
   MOBILE FIRST: la base es el teléfono; se amplía con min-width
   ========================================================================== */

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

img { max-width: 100%; }

h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.28rem; }
h3, .h3 { font-size: 1.12rem; }
.display-5 { font-size: 2rem; }
.card-body { padding: .9rem; }
.card-header { padding: .65rem .9rem; }
.table { font-size: .82rem; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .45rem .4rem; vertical-align: middle; }
.table img { max-width: 46px; height: auto; }
.table .btn-sm { padding: .22rem .5rem; font-size: .76rem; }
/* 16px evita el zoom automático de iOS al enfocar un campo */
.form-control, .form-select { font-size: 16px; }
.form-text { font-size: .76rem; }
.btn:not(.btn-sm) { min-height: 44px; }
.list-group-item { padding: .65rem .8rem; }
.container-fluid { padding-left: .85rem; padding-right: .85rem; }
.modal-dialog { margin: .5rem; }
.offcanvas-start { width: min(88vw, 340px); }
aside .sticky-top { position: static !important; }
.admin-kpi-valor { font-size: 1.45rem; }
.admin-seccion-titulo { white-space: normal; }
.za-hero { padding: 1.4rem 1rem 1.6rem; border-radius: 0 0 1.1rem 1.1rem; }
.za-hero-logo { max-height: 84px !important; }
.za-hero h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); overflow-wrap: break-word; }
.za-hero .btn { min-height: 44px; }
.carousel-caption { font-size: .82rem; }
.carousel-caption h5 { font-size: 1rem; }
.sesion-movil .list-group-item { border-left: 0; border-right: 0; }
.pos-resultados { max-height: 60vh !important; }

/* Columnas secundarias ocultas en el teléfono; aparecen al crecer la pantalla */
.za-tabla-productos > thead > tr > *:nth-child(1),
.za-tabla-productos > tbody > tr > *:nth-child(1),
.za-tabla-productos > thead > tr > *:nth-child(3),
.za-tabla-productos > tbody > tr > *:nth-child(3),
.za-tabla-productos > thead > tr > *:nth-child(6),
.za-tabla-productos > tbody > tr > *:nth-child(6),
.za-tabla-chat > thead > tr > *:nth-child(2),
.za-tabla-chat > tbody > tr > *:nth-child(2),
.za-tabla-chat > thead > tr > *:nth-child(4),
.za-tabla-chat > tbody > tr > *:nth-child(4),
.za-tabla-compras > thead > tr > *:nth-child(2),
.za-tabla-compras > tbody > tr > *:nth-child(2),
.za-tabla-compras > thead > tr > *:nth-child(4),
.za-tabla-compras > tbody > tr > *:nth-child(4) { display: none; }

/* ---- Navegación inferior (mobile-first) ---- */
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.za-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045;
  display: flex; background: #fff; border-top: 1px solid #e2ecf1;
  box-shadow: 0 -4px 14px rgba(11, 43, 60, .06);
  padding-bottom: env(safe-area-inset-bottom);
}
.za-bottomnav-item {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: .45rem .25rem .5rem; min-height: 56px;
  font-size: .66rem; line-height: 1; letter-spacing: .01em;
  color: #5b6b78; text-decoration: none; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.za-bottomnav-item svg { opacity: .85; }
.za-bottomnav-item.activo { color: var(--za-primary); font-weight: 700; }
.za-bottomnav-item.activo svg { opacity: 1; }
.za-bottomnav-item.activo::before {
  content: ""; position: absolute; top: 0; left: 24%; right: 24%; height: 3px;
  border-radius: 0 0 4px 4px; background: var(--za-primary);
}
.za-bottomnav-item:active { background: #f2fafc; }
.za-bottomnav-icono { position: relative; display: inline-flex; }
.za-bottomnav-badge {
  position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: #dc3545; color: #fff; font-size: .6rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* WhatsApp flotante por encima de la barra inferior */
.btn-whatsapp { bottom: calc(76px + env(safe-area-inset-bottom)); right: 12px; padding: 9px 13px; font-size: .8rem; gap: 6px; }
.btn-whatsapp svg { width: 17px; height: 17px; }

/* Compra rápida fija en la ficha de producto */
.za-compra-rapida {
  position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 1035;
  background: #fff; border-radius: .75rem; padding: .55rem .65rem;
  margin-left: -.15rem; margin-right: -.15rem;
  box-shadow: 0 .5rem 1.2rem rgba(11, 43, 60, .16);
}

/* ---- Ampliaciones para tablet y escritorio ---- */
@media (min-width: 576px) {
  .za-tabla-productos > thead > tr > *:nth-child(1),
  .za-tabla-productos > tbody > tr > *:nth-child(1) { display: table-cell; }
  .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}

@media (min-width: 768px) {
  html { font-size: 15.5px; }
  h1, .h1 { font-size: 1.7rem; }
  h2, .h2 { font-size: 1.4rem; }
  .display-5 { font-size: 2.6rem; }
  .card-body { padding: 1rem; }
  .table { font-size: .9rem; }
  .table > :not(caption) > * > * { padding: .55rem .6rem; }
  .form-control, .form-select { font-size: .95rem; }
  .za-tabla-productos > thead > tr > *:nth-child(3),
  .za-tabla-productos > tbody > tr > *:nth-child(3),
  .za-tabla-productos > thead > tr > *:nth-child(6),
  .za-tabla-productos > tbody > tr > *:nth-child(6),
  .za-tabla-chat > thead > tr > *:nth-child(2),
  .za-tabla-chat > tbody > tr > *:nth-child(2),
  .za-tabla-compras > thead > tr > *:nth-child(4),
  .za-tabla-compras > tbody > tr > *:nth-child(4) { display: table-cell; }
  .za-hero { padding: 2.2rem 1.5rem 2.5rem; }
  .za-hero-logo { max-height: 110px !important; }
}

@media (min-width: 992px) {
  body { padding-bottom: 0; }
  .za-bottomnav { display: none; }
  .btn-whatsapp { bottom: 20px; right: 20px; padding: 10px 16px; font-size: .95rem; }
  .za-compra-rapida { position: static; box-shadow: none; padding: 0; margin: 0; border-radius: 0; background: transparent; }
  .offcanvas-start { width: min(400px, 40vw); }
  .za-tabla-chat > thead > tr > *:nth-child(4),
  .za-tabla-chat > tbody > tr > *:nth-child(4),
  .za-tabla-compras > thead > tr > *:nth-child(2),
  .za-tabla-compras > tbody > tr > *:nth-child(2) { display: table-cell; }
  aside .sticky-top { position: sticky !important; }
}

@media (min-width: 1400px) {
  .za-hero h1 { font-size: 3.4rem; }
}

/* Ajustes táctiles solo en pantallas chicas */
@media (max-width: 991.98px) {
  .btn:not(.btn-sm) { min-height: 44px; }
  .nav-link { padding-top: .55rem; padding-bottom: .55rem; }
  /* La barra inferior se oculta cuando hay un menú o modal abierto */
  body:has(.offcanvas.show) .za-bottomnav,
  body:has(.modal.show) .za-bottomnav { display: none; }
}

/* ---- Chat sin registro (visitantes) ---- */
.za-chat-invitado .za-chat-mensajes { height: min(58vh, 420px); overflow-y: auto; background: #f7fbfc; }
.za-chat-burbuja { max-width: 82%; padding: .55rem .75rem; border-radius: .8rem; margin-bottom: .5rem; white-space: pre-wrap; word-break: break-word; font-size: .92rem; }
.za-chat-burbuja.propio { margin-left: auto; background: var(--za-primary); color: #fff; }
.za-chat-burbuja.ajeno { background: #fff; border: 1px solid #e6eef2; color: #27323a; }
.za-chat-burbuja small { display: block; margin-top: .2rem; font-size: .7rem; opacity: .75; }
@media (max-width: 575.98px) {
  .za-chat-invitado .za-chat-mensajes { height: 52vh; }
}