/* css/responsive.css */
/* ============================================================
   SISTEMANEGOCIO V2
   RESPONSIVE WEB PÚBLICA

   Este archivo SOLO contiene ajustes responsive.
   No duplica style.css.

   Breakpoints:
   - Tablet: 1050px
   - Tablet pequeña: 800px
   - Celular: 600px
   - Celular pequeño: 380px
============================================================ */


/* ============================================================
   SEGURIDAD GENERAL
============================================================ */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


.public-app,
.public-main,
.public-container,
.catalog,
.catalog-section,
.catalog-category,
.products-grid {
  min-width: 0;
  max-width: 100%;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1050px) {

  .products-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* ============================================================
   TABLET PEQUEÑA
============================================================ */

@media (max-width: 800px) {

  .public-main {
    width:
      min(
        calc(100% - 28px),
        var(--container-width)
      );
  }


  .business-header-content,
  .public-business-header-inner {

    width:
      min(
        calc(100% - 28px),
        var(--container-width)
      );

    flex-direction:
      column;

    align-items:
      center;

    text-align:
      center;

    gap:
      16px;

  }


  .business-header-info {
    width:
      100%;

    text-align:
      center;
  }


  .business-description {
    margin-left:
      auto;

    margin-right:
      auto;
  }


  .products-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      16px;
  }


  .public-cta-content {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .business-whatsapp-card {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .checkout-section {
    padding:
      24px;
  }


  .tracking-information {
    grid-template-columns:
      1fr;
  }

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 600px) {

  body {
    padding-bottom:
      95px;

    overflow-x:
      hidden;
  }


  /* ----------------------------------------------------------
     CONTENEDOR
  ---------------------------------------------------------- */

  .public-main {

    width:
      calc(100% - 24px);

    max-width:
      100%;

    margin:
      0 auto;

    padding:
      22px 0 40px;

  }


  .public-container {

    width:
      calc(100% - 24px);

    max-width:
      100%;

    margin-left:
      auto;

    margin-right:
      auto;

  }


  /* ----------------------------------------------------------
     HEADER
  ---------------------------------------------------------- */

  .business-header {
    width:
      100%;
  }


  .business-header-content,
  .public-business-header-inner {

    width:
      calc(100% - 24px);

    min-height:
      auto;

    margin:
      0 auto;

    padding:
      20px 0;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    text-align:
      center;

    gap:
      12px;

  }


  .business-logo {
    width:
      78px;

    height:
      78px;
  }


  .business-name,
  .public-business-header-info h1 {

    max-width:
      100%;

    font-size:
      1.65rem;

    line-height:
      1.15;

    overflow-wrap:
      anywhere;

  }


  .business-description {
    max-width:
      100%;

    margin:
      8px auto 12px;

    font-size:
      0.92rem;

    overflow-wrap:
      anywhere;
  }


  /* ----------------------------------------------------------
     TÍTULOS
  ---------------------------------------------------------- */

  .section-heading {
    display:
      block;

    margin-bottom:
      16px;
  }


  .section-heading h2 {
    font-size:
      1.45rem;
  }


  .catalog-category-title {
    font-size:
      1.25rem;
  }


  /* ----------------------------------------------------------
     PRODUCTOS
     CONFIGURACIÓN MÓVIL:
     1 O 2 PRODUCTOS POR FILA
  ---------------------------------------------------------- */

  .products-grid {

    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr) !important;

    width:
      100%;

    max-width:
      100%;

    gap:
      16px;

  }


  html[data-products-per-row-mobile="1"] .products-grid {

    grid-template-columns:
      minmax(0, 1fr) !important;

  }


  html[data-products-per-row-mobile="2"] .products-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap:
      10px;

  }


  .product-card {

    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    margin:
      0;

    border-radius:
      18px;

    overflow:
      hidden;

  }


  .product-image {

    width:
      100%;

    max-width:
      100%;

    aspect-ratio:
      16 / 10;

    object-fit:
      cover;

  }


  .product-card-content {

    width:
      100%;

    min-width:
      0;

    padding:
      16px;

  }


  .product-card-info {

    width:
      100%;

    min-width:
      0;

  }


  .product-name {

    max-width:
      100%;

    font-size:
      1.12rem;

    line-height:
      1.25;

    overflow-wrap:
      anywhere;

    word-break:
      normal;

  }


  .product-description {

    max-width:
      100%;

    margin-top:
      7px;

    font-size:
      0.9rem;

    overflow-wrap:
      anywhere;

  }


  .product-card-footer {

    width:
      100%;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    flex-wrap:
      wrap;

    gap:
      12px;

    margin-top:
      16px;

  }


  .product-price {

    min-width:
      0;

    max-width:
      100%;

    font-size:
      1.2rem;

    font-weight:
      800;

    overflow-wrap:
      anywhere;

  }


  .product-add-btn {

    flex:
      0 0 auto;

    max-width:
      100%;

    min-height:
      42px;

    padding:
      9px 16px;

  }


  /* ----------------------------------------------------------
     PRODUCTOS COMPACTOS
     SOLO CUANDO ADMIN ELIGE 2 POR FILA
  ---------------------------------------------------------- */

  html[data-products-per-row-mobile="2"] .product-card {

    border-radius:
      14px;

  }


  html[data-products-per-row-mobile="2"] .product-image {

    aspect-ratio:
      1 / 1;

  }


  html[data-products-per-row-mobile="2"] .product-card-content {

    padding:
      10px;

  }


  html[data-products-per-row-mobile="2"] .product-name {

    font-size:
      0.95rem;

    line-height:
      1.2;

  }


  html[data-products-per-row-mobile="2"] .product-description {

    margin-top:
      5px;

    font-size:
      0.78rem;

    line-height:
      1.3;

  }


  html[data-products-per-row-mobile="2"] .product-card-footer {

    flex-direction:
      column;

    align-items:
      stretch;

    flex-wrap:
      nowrap;

    gap:
      8px;

    margin-top:
      12px;

  }


  html[data-products-per-row-mobile="2"] .product-price {

    width:
      100%;

    font-size:
      1rem;

  }


  html[data-products-per-row-mobile="2"] .product-add-btn {

    width:
      100%;

    min-height:
      38px;

    padding:
      8px 10px;

    font-size:
      0.85rem;

  }


  /* ----------------------------------------------------------
     CTA
  ---------------------------------------------------------- */

  .public-cta {

    margin-bottom:
      30px;

    padding:
      22px 18px;

    border-radius:
      20px;

  }


  .public-cta-content {

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      18px;

  }


  .public-cta-button {

    width:
      100%;

    text-align:
      center;

  }


  /* ----------------------------------------------------------
     CARRITO PRINCIPAL
  ---------------------------------------------------------- */

  .cart-section {

    width:
      100%;

    padding:
      18px;

    border-radius:
      20px;

  }


  .cart-header {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .cart-item {

    width:
      100%;

    grid-template-columns:
      52px
      minmax(0, 1fr)
      auto;

    gap:
      10px;

    padding:
      12px 0;

  }


  .cart-item-image {

    width:
      52px;

    height:
      52px;

  }


  .cart-item-info {
    min-width:
      0;
  }


  .cart-item-name {
    overflow-wrap:
      anywhere;
  }


  .cart-item-controls {

    grid-column:
      2;

    margin-top:
      4px;

  }


  .cart-item-subtotal {

    grid-column:
      3;

    grid-row:
      2;

    min-width:
      0;

    font-size:
      0.9rem;

  }


  .cart-item-remove {

    grid-column:
      3;

    grid-row:
      1;

  }


  /* ----------------------------------------------------------
     CHECKOUT
  ---------------------------------------------------------- */

  .checkout-section {

    width:
      100%;

    max-width:
      100%;

    margin-top:
      30px;

    padding:
      18px;

    border-radius:
      20px;

  }


  .checkout-block {
    padding:
      16px;
  }


  .delivery-options,
  .delivery-type-group {

    grid-template-columns:
      1fr;

  }


  .checkout-actions {
    width:
      100%;
  }


  .checkout-submit-btn {

    width:
      100%;

    max-width:
      none;

  }


  /* ----------------------------------------------------------
     WHATSAPP
  ---------------------------------------------------------- */

  .business-whatsapp-card {

    width:
      100%;

    padding:
      20px;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      16px;

  }


  .business-whatsapp-button {
    width:
      100%;
  }


  /* ----------------------------------------------------------
     CARRITO FLOTANTE
     COMPATIBLE CON AMBOS NOMBRES
  ---------------------------------------------------------- */

  .floating-cart-button,
  .floating-cart-btn {

    left:
      12px;

    right:
      12px;

    bottom:
      12px;

    width:
      auto;

    max-width:
      none;

    min-height:
      60px;

    justify-content:
      flex-start;

    padding:
      10px 16px;

  }


  .floating-cart-info {
    flex:
      1;
  }


  .floating-cart-count {

    position:
      static;

    margin-left:
      auto;

  }


  /* ----------------------------------------------------------
     DRAWER CARRITO
  ---------------------------------------------------------- */

  .cart-drawer {

    top:
      auto;

    bottom:
      0;

    width:
      100%;

    max-width:
      100%;

    height:
      min(
        88dvh,
        760px
      );

    border-left:
      0;

    border-radius:
      24px 24px 0 0;

    transform:
      translateY(105%);

  }


  .cart-drawer-open {
    transform:
      translateY(0);
  }


  /* ----------------------------------------------------------
     SEGUIMIENTO
  ---------------------------------------------------------- */

  .order-tracking-section {
    width:
      100%;
  }


  .tracking-card {
    padding:
      18px;
  }


  .tracking-card-header {

    flex-direction:
      column;

    align-items:
      flex-start;

  }


  .tracking-information {
    grid-template-columns:
      1fr;
  }

}


/* ============================================================
   CELULAR MUY PEQUEÑO
============================================================ */

@media (max-width: 380px) {

  .public-main,
  .public-container {

    width:
      calc(100% - 16px);

  }


  .business-header-content,
  .public-business-header-inner {

    width:
      calc(100% - 16px);

  }


  .product-card-content {
    padding:
      14px;
  }


  .product-card-footer {

    flex-direction:
      column;

    align-items:
      stretch;

  }


  .product-add-btn {
    width:
      100%;
  }


  .product-price {
    width:
      100%;
  }


  html[data-products-per-row-mobile="2"] .products-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap:
      8px;

  }


  html[data-products-per-row-mobile="2"] .product-card-content {

    padding:
      9px;

  }


  html[data-products-per-row-mobile="2"] .product-name {

    font-size:
      0.9rem;

  }


  html[data-products-per-row-mobile="2"] .product-description {

    font-size:
      0.74rem;

  }


  html[data-products-per-row-mobile="2"] .product-card-footer {

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      7px;

  }


  html[data-products-per-row-mobile="2"] .product-add-btn {

    width:
      100%;

    min-height:
      36px;

    padding:
      7px 8px;

    font-size:
      0.8rem;

  }


  .floating-cart-button,
  .floating-cart-btn {

    left:
      8px;

    right:
      8px;

    bottom:
      8px;

  }


  .checkout-section {
    padding:
      14px;
  }

}


/* ============================================================
   SISTEMANEGOCIO V2
   FIX DEFINITIVO CARRITO MÓVIL
============================================================ */

@media (max-width: 600px) {

  .cart-drawer {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }


  .cart-drawer .cart-content {
    width: 100%;
    min-width: 0;
    padding: 16px;
  }


  .cart-items {
    width: 100%;
    min-width: 0;
    gap: 14px;
  }


  .cart-item {

    width: 100%;
    min-width: 0;

    display: grid;

    grid-template-columns:
      72px minmax(0, 1fr);

    grid-template-areas:
      "image info"
      "controls controls"
      "subtotal remove";

    align-items: center;

    gap: 12px 14px;

    padding: 14px;

    border: 1px solid
      var(--business-border);

    border-radius: 16px;

    background:
      var(--business-surface);

  }


  .cart-item-image {

    grid-area: image;

    width: 72px;
    height: 72px;

    border-radius: 12px;

    object-fit: cover;

  }


  .cart-item-info {

    grid-area: info;

    width: 100%;
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

  }


  .cart-item-name {

    width: 100%;

    font-size: 1rem;

    line-height: 1.25;

    font-weight: 800;

    word-break: normal;

    overflow-wrap: break-word;

    hyphens: none;

  }


  .cart-item-price {

    font-size: 0.9rem;

    line-height: 1.3;

  }


  .cart-item-warning {

    width: 100%;

    font-size: 0.82rem;

  }


  .cart-item-controls {

    grid-area: controls;

    justify-self: start;

    display: inline-flex;

    align-items: center;

    border-radius: 999px;

    overflow: hidden;

  }


  .cart-item-controls button {

    width: 44px;
    height: 42px;

    font-size: 1.05rem;

  }


  .cart-item-qty {

    min-width: 44px;

    font-size: 1rem;

  }


  .cart-item-subtotal {

    grid-area: subtotal;

    justify-self: start;

    white-space: nowrap;

    font-size: 1rem;

    color:
      var(--business-price);

  }


  .cart-item-remove {

    grid-area: remove;

    justify-self: end;

    padding: 8px 0;

    font-size: 0.9rem;

    font-weight: 800;

    color:
      var(--business-danger);

  }


  .cart-total {

    width: 100%;

    padding-top: 18px;

    font-size: 1rem;

  }


  .cart-total strong {

    font-size: 1.35rem;

  }


  .go-checkout-btn {

    width: calc(100% - 32px);

    min-height: 54px;

    margin: 0 16px 16px;

  }

}


/* ============================================================
   CELULAR MUY PEQUEÑO
============================================================ */

@media (max-width: 380px) {

  .cart-drawer .cart-content {
    padding: 12px;
  }


  .cart-item {

    grid-template-columns:
      62px minmax(0, 1fr);

    gap: 10px;

    padding: 12px;

  }


  .cart-item-image {

    width: 62px;
    height: 62px;

  }


  .cart-item-name {

    font-size: 0.95rem;

  }

}


/* ============================================================
   SISTEMANEGOCIO V2
   BOTÓN FLOTANTE ESTADO DEL PEDIDO
============================================================ */

.floating-order-status-btn {

  position: fixed;

  right: 18px;

  bottom: 92px;

  z-index: 1000;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  min-width: 210px;

  min-height: 58px;

  padding: 10px 16px;

  border: 0;

  border-radius: 18px;

  background:
    var(--business-surface);

  color:
    var(--business-text);

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, 0.18);

  cursor: pointer;

  text-align: left;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

}


.floating-order-status-btn:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 16px 36px
    rgba(0, 0, 0, 0.22);

}


.floating-order-status-icon {

  flex:
    0 0 auto;

  font-size:
    1.4rem;

}


.floating-order-status-info {

  display: flex;

  flex-direction: column;

  min-width: 0;

  line-height: 1.15;

}


.floating-order-status-label {

  font-size:
    0.78rem;

  opacity:
    0.75;

}


.floating-order-status-text {

  margin-top:
    3px;

  font-size:
    0.98rem;

  font-weight:
    800;

}


/* ============================================================
   COLORES SEGÚN ESTADO
============================================================ */

.floating-order-status-btn[data-status="pending"] {

  border:
    1px solid
    #f0c36a;

}


.floating-order-status-btn[data-status="accepted"] {

  border:
    1px solid
    #7bb7ff;

}


.floating-order-status-btn[data-status="preparing"] {

  border:
    1px solid
    #c69cff;

}


.floating-order-status-btn[data-status="ready"] {

  border:
    1px solid
    #79d68f;

}


.floating-order-status-btn[data-status="delivered"] {

  border:
    1px solid
    #69c79f;

}


.floating-order-status-btn[data-status="cancelled"] {

  border:
    1px solid
    #ef8d8d;

}


/* ============================================================
   CELULAR
============================================================ */

@media (max-width: 600px) {

  body {

    padding-bottom:
      170px;

  }


  .floating-order-status-btn {

    left:
      12px;

    right:
      12px;

    bottom:
      82px;

    width:
      auto;

    min-width:
      0;

    min-height:
      58px;

    padding:
      10px 16px;

    border-radius:
      16px;

  }


  .floating-order-status-info {

    flex:
      1;

  }


  .floating-order-status-label {

    font-size:
      0.76rem;

  }


  .floating-order-status-text {

    font-size:
      1rem;

  }


  .floating-cart-button,
  .floating-cart-btn {

    bottom:
      12px;

  }

}


/* ============================================================
   CELULAR PEQUEÑO
============================================================ */

@media (max-width: 380px) {

  body {

    padding-bottom:
      165px;

  }


  .floating-order-status-btn {

    left:
      8px;

    right:
      8px;

    bottom:
      78px;

    min-height:
      56px;

    padding:
      9px 14px;

  }


  .floating-cart-button,
  .floating-cart-btn {

    left:
      8px;

    right:
      8px;

    bottom:
      8px;

  }

}