/* Tía Vicenta v443 - organización final de assets y modales
   Repara menús largos: guarniciones, extras, gustos, empanadas y aclaraciones.
   El footer nunca tapa opciones; el contenido scrollea dentro del modal.
*/

html body .modal {
  width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding: clamp(8px, 2dvh, 20px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body .modal.open,
html body .modal[aria-hidden="false"] {
  display: flex !important;
}

html body .modal-card {
  width: min(940px, calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 24px) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}

html body .modal-head {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

html body .modal-body {
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  grid-template-rows: none !important;
  align-content: start !important;
  gap: 14px !important;
  padding: 16px 18px 22px !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable both-edges !important;
}

html body .modal-foot {
  position: relative !important;
  z-index: 4 !important;
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(140px, .8fr) minmax(260px, 1.2fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, transparent), var(--surface) 38%),
    var(--surface) !important;
  box-shadow: 0 -14px 30px rgba(0,0,0,.10) !important;
}

html body .modal-actions {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(120px, .42fr) minmax(180px, .58fr) !important;
  gap: 10px !important;
}

html body .modal-actions .btn,
html body #modalAddBtn,
html body #modalCancelBtn {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 54px !important;
  white-space: nowrap !important;
}

html body .choice {
  min-width: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body .choice-top {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body .choice-status {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

html body .option-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap: 12px !important;
  min-width: 0 !important;
}

html body .option {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 68px !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

html body .option span:first-child,
html body .option b,
html body .option small {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

html body .note-area {
  width: 100% !important;
  min-height: 112px !important;
  max-height: 180px !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

html body .emp-grid {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  display: grid !important;
  gap: 8px !important;
}

html body .emp-row {
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

html body .emp-row b,
html body .emp-row small {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

html body .qty-control {
  flex: 0 0 auto !important;
}

@media (max-width: 760px) {
  html body .modal {
    align-items: end !important;
    padding: 6px !important;
  }

  html body .modal-card {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 26px !important;
  }

  html body .modal-head {
    padding: 12px 12px 10px !important;
  }

  html body .modal-product {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body .modal-img {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
  }

  html body .modal-product h3 {
    font-size: clamp(24px, 8vw, 34px) !important;
    line-height: .92 !important;
    overflow-wrap: anywhere !important;
  }

  html body .modal-sub {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  html body .modal-body {
    gap: 10px !important;
    padding: 10px 10px 14px !important;
    scrollbar-gutter: auto !important;
  }

  html body .choice {
    padding: 12px !important;
    border-radius: 20px !important;
  }

  html body .choice-top {
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  html body .choice h4 {
    font-size: 18px !important;
  }

  html body .choice p {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  html body .choice-status {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }

  html body .option-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  html body .option {
    min-height: 58px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  html body #productModal[data-type="empanadas"] .option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body #productModal[data-type="empanadas"] .option-grid .option:first-child {
    grid-column: 1 / -1 !important;
  }

  html body .emp-row {
    padding: 8px !important;
    gap: 8px !important;
  }

  html body .emp-row b {
    font-size: 14px !important;
    line-height: 1.12 !important;
  }

  html body .emp-row small {
    font-size: 11px !important;
  }

  html body .qty-control {
    grid-template-columns: 40px 34px 40px !important;
  }

  html body .qty-control button {
    width: 40px !important;
    height: 40px !important;
  }

  html body .modal-foot {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom)) !important;
  }

  html body .modal-total {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: end !important;
    gap: 10px !important;
  }

  html body .modal-total b {
    font-size: 25px !important;
  }

  html body .modal-actions {
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr) !important;
    gap: 8px !important;
  }

  html body .modal-actions .btn,
  html body #modalAddBtn,
  html body #modalCancelBtn {
    min-height: 50px !important;
    padding-inline: 10px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 390px) {
  html body .modal-actions {
    grid-template-columns: 1fr 1.18fr !important;
  }

  html body #modalAddBtn::after {
    content: " →";
  }
}