/* =========================
   PANTALLAS <= 768px
========================= */
@media (max-width: 768px) {
    /* ===== Navbar: tight padding + guaranteed row layout on mobile ===== */
    .sticky-header .container {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

    /* Force logo and hamburger onto a single row regardless of other rules */
    .sticky-header .container > div:first-child {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      flex-wrap: nowrap !important;
      width: 100%;
    }

    /* Hamburger always visible and not squished */
    #mobile-menu-button {
      display: flex !important;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0.5rem;
      min-width: 44px;
      min-height: 44px;
    }

    /* Remove focus ring/highlight from the hamburger button */
    #mobile-menu-button:focus,
    #mobile-menu-button:focus-visible,
    #mobile-menu-button:active {
      outline: none !important;
      box-shadow: none !important;
    }

    /* Sticky header: on iOS/WebKit, position:sticky + will-change:transform
       creates a compositing region that can grow/shrink when the mobile menu
       opens/closes, leaving a stale hit-area over the content and making the
       page feel unresponsive to taps.  Removing the compositing hints fixes
       the phantom overlay. Backdrop-filter is also disabled for the same reason. */
    .sticky-header {
      will-change: auto;
      transform: none;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    /* Kill backdrop-filter on all content elements — same iOS compositing bug.
       .backdrop-filter catches Tailwind utility classes on inline elements. */
    .glass-card,
    .orange-card,
    .backdrop-filter {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    /* Side drawer replaces the old dropdown — keep source element hidden */
    #mobile-menu { display: none !important; }

    /* Afiliate hero section (py-20 md:py-28 gradient-bg) */
    section.py-20.gradient-bg {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }

    .mobile-center {
      text-align: center;
    }

    .mobile-order-1 {
      order: 1;
    }

    .mobile-order-2 {
      order: 2;
    }

    .feature-card {
      margin-bottom: 1.5rem;
    }

    h1 {
      font-size: 2rem !important;
      line-height: 1.2;
    }

    h2 {
      font-size: 1.5rem !important;
      line-height: 1.3;
    }

    h3 {
      font-size: 1.25rem !important;
      line-height: 1.3;
    }

    p {
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 1rem;
    }

    .primary-btn,
    .secondary-btn {
      width: 100%;
      margin-bottom: 0.75rem;
      font-size: 1rem;
      padding: 0.75rem 1.25rem;
      text-align: center;
    }

    .topbar-container {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }

    table {
      font-size: 0.875rem;
    }

    th,
    td {
      padding: 0.5rem !important;
    }

    .overflow-x-auto {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .border-b.border-gray-200 {
      overflow-x: auto;
      white-space: nowrap;
      padding-bottom: 0.5rem;
    }


    input,
    select,
    button {
      min-height: 44px;
      font-size: 16px;
    }

    textarea {
      font-size: 16px;
    }

    ul.flex.flex-wrap {
      justify-content: flex-start;
      overflow-x: auto;
    }

    /* Hero sections */
    section.py-16,
    section.py-16.md\:py-24 {
      padding-top: 3rem !important;
      padding-bottom: 3rem !important;
    }

    /* Hero: more vertical gap between the two columns */
    #main-content .flex.flex-wrap {
      gap: 3rem;
    }

    /* Hero section: reduce vertical padding on mobile */
    #main-content {
      padding-top: 2.5rem !important;
      padding-bottom: 2.5rem !important;
    }

    /* Hero: trust card — more breathing room */
    #main-content .text-center.mb-4 {
      margin-top: 1.25rem;
      margin-bottom: 1.25rem;
    }

    /* Hero: hero card — more internal padding on mobile */
    #main-content .bg-white.p-6.rounded-lg.shadow-lg {
      padding: 1.5rem !important;
    }

    /* Promo pill: always left-align on mobile */
    #main-content .inline-flex.items-center.gap-3 {
      text-align: left !important;
    }

    /* Benefit chips: center them under the mobile text block */
    .hero-benefits {
      justify-content: center;
    }

    /* Servicios: service image blocks */
    .service-img-block {
      min-height: 220px;
      height: 220px;
    }

    /* Tab buttons */
    .flex.flex-wrap.justify-center.gap-2 {
      gap: 0.5rem !important;
    }

    .flex.flex-wrap.justify-center.gap-2 > button {
      flex: 1 1 auto;
      min-width: 130px;
      font-size: 0.875rem;
      padding: 0.625rem 0.75rem;
    }

    /* Breadcrumb */
    .bg-gray-100 .flex.items-center.text-sm {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    /* Floating buttons — sit in the true bottom-right corner */
    a.whatsapp-btn.fixed,
    a.fixed.whatsapp-btn {
      bottom: 1.25rem !important;
      right: 1rem !important;
    }

    #back-to-top.fixed {
      bottom: 1.25rem !important;
    }

    /* Footer */
    footer .grid {
      grid-template-columns: 1fr !important;
    }

    footer .border-t.flex {
      flex-direction: column !important;
      text-align: center;
    }

    footer .border-t.flex > p {
      margin-bottom: 0.75rem;
    }

    /* Stats block: 2×2 frosted cards on mobile */
    #stats {
      padding-top: 2rem !important;
      padding-bottom: 2rem !important;
    }

    #stats .grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0.875rem !important;
    }

    #stats .grid > div {
      background: rgba(255, 255, 255, 0.18) !important;
      border-radius: 1rem !important;
      border: 1px solid rgba(255, 255, 255, 0.35) !important;
      padding: 1.25rem 0.75rem !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
    }

    #stats .text-4xl {
      font-size: 2rem !important;
    }

    /* Shops (tiendas favoritas): 3-column logo grid with room to breathe */
    section.py-10.bg-gray-50 {
      padding-top: 2.25rem !important;
      padding-bottom: 2.25rem !important;
    }

    section.py-10.bg-gray-50 h3 {
      margin-bottom: 1.5rem !important;
      font-size: 1rem !important;
    }

    section.py-10.bg-gray-50 .grid {
      justify-items: center;
      align-items: center;
    }

    section.py-10.bg-gray-50 .grid img {
      max-width: 80px;
      width: auto;
    }

    /* Calculadora: dimension inputs stack */
    #aero-dimensions-container .grid,
    #maritimo-quote-form .grid {
      grid-template-columns: 1fr !important;
    }

    /* Calculadora: service comparison table scrolls horizontally */
    #service-comparison .overflow-hidden {
      overflow-x: auto !important;
      overflow-y: visible !important;
      -webkit-overflow-scrolling: touch;
    }
}

/* =========================
   PANTALLAS <= 640px
========================= */
@media (max-width: 640px) {
    /* Afiliate registration form card padding */
    #registro .p-8 {
      padding: 1.25rem !important;
    }

    /* Afiliate form grids: neutralize col-span-2 in single-column context */
    #registro .col-span-2 {
      grid-column: span 1 / span 1;
    }
    section {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }

    .container {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .grid {
      gap: 1rem;
    }

    #tab-peso table {
      display: block;
      overflow-x: auto;
    }

    .bg-gray-50.rounded-lg.p-4,
    .bg-green-50.p-6,
    .bg-gray-100.p-6 {
      padding: 1rem !important;
    }

    .mt-6.grid.grid-cols-1.gap-4 > div {
      margin-bottom: 1rem;
    }

    .w-12.h-12 {
      width: 2.5rem;
      height: 2.5rem;
    }

    .inline-block.p-4 {
      padding: 0.75rem;
      font-size: 0.875rem;
    }

    .mb-4 input,
    .mb-4 select {
      width: 100%;
      margin-top: 0.25rem;
    }

    #resultado-calculo {
      margin-top: 1rem;
    }

    /* Maritime weekly schedule */
    #maritimo-calculator .bg-blue-50 .grid {
      grid-template-columns: 1fr !important;
    }

    /* Maritime calculator layout */
    #maritimo-calculator .w-full.md\:w-5\/12,
    #maritimo-calculator .w-full.md\:w-7\/12 {
      width: 100% !important;
    }
}

/* =========================
   PANTALLAS <= 480px
========================= */
/* ===== Testimonials carousel: mobile touch-scroll ===== */
@media (max-width: 768px) {
    .testimonials-carousel {
        padding: 0;
    }

    .testimonials-arrow {
        display: none !important;
    }

    .testimonials-overflow {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .testimonials-overflow::-webkit-scrollbar {
        display: none;
    }

    .testimonials-track {
        transition: none !important;
        gap: 1rem !important;
        padding-right: 1.5rem !important;
        width: max-content !important;
    }

    .testimonials-track .testimonial-card {
        /* vw units avoid circular % dependency; 76vw ≈ card, leaves ~1/3 of next visible */
        width: 76vw !important;
        min-width: 76vw !important;
        max-width: 76vw !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start;
        overflow: hidden;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .testimonials-dots {
        margin-top: 1.5rem;
    }
}

@media (max-width: 480px) {
    /* Afiliate hero section tighter at very narrow widths */
    section.py-20.gradient-bg {
      padding-top: 2rem !important;
      padding-bottom: 2rem !important;
    }
    .tab-content {
      margin: 0 -1rem;
      width: calc(100% + 2rem);
    }

    .tab-content > div {
      border-radius: 0;
    }

    .p-6 {
      padding: 0.75rem !important;
    }

    .text-sm {
      font-size: 0.875rem !important;
    }

    .px-4 {
      padding-left: 0.75rem !important;
      padding-right: 0.75rem !important;
    }

    .flex.flex-col.sm\:flex-row.gap-4 {
      gap: 0.5rem !important;
    }

    h1 {
      font-size: 1.75rem !important;
    }

    h2 {
      font-size: 1.375rem !important;
    }

    section.py-16,
    section.py-16.md\:py-24 {
      padding-top: 2rem !important;
      padding-bottom: 2rem !important;
    }

    #stats .text-4xl {
      font-size: 1.75rem !important;
    }

    .tarifa-card,
    .calculator-card {
      width: 100% !important;
    }

    .flex.flex-wrap.justify-center.gap-2 > button {
      font-size: 0.8125rem;
      padding: 0.5rem 0.625rem;
      min-width: 100px;
    }

    /* Promo code: stack apply button below input to avoid overlap */
    .relative:has(input[name="promo_code"]) {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .relative:has(input[name="promo_code"]) input[name="promo_code"] {
      padding-right: 1rem;
    }

    .relative:has(input[name="promo_code"]) button {
      position: static;
      width: 100%;
      padding: 0.625rem 1rem;
      text-align: center;
    }

    /* Agregar teléfono / dirección: ensure 44px minimum touch target */
    #add-phone-btn,
    #add-address-btn {
      min-height: 44px;
      min-width: 44px;
      padding: 0.5rem 0.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* Delivery card badge: tighter on very narrow screens to prevent overflow */
    .delivery-card-badge {
      font-size: 0.6rem;
      padding: 2px 6px;
    }
}

/* =========================
   PANTALLAS <= 320px
========================= */
@media (max-width: 320px) {
    h1 {
      font-size: 1.5rem !important;
    }

    h2 {
      font-size: 1.25rem !important;
    }

    .container {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    .p-8,
    .p-6 {
      padding: 0.75rem !important;
    }

    .text-xl {
      font-size: 1rem !important;
    }
}

/* ==================================================================
   PORTAL: AUTHENTICATED PAGES (Dashboard, Mis Paquetes, Mis Facturas,
   Mi Cuenta) — mobile-only refinements. Desktop is untouched.
   Validated at 320 / 375 / 414 px.
================================================================== */
@media (max-width: 768px) {

  /* ---- Portal tab strip: equal-width, stacked icon+label on mobile ---- */
  .sticky.top-16.z-30 .flex.overflow-x-auto {
    overflow-x: visible;
  }
  .sticky.top-16.z-30 .flex.overflow-x-auto > a {
    flex: 1 1 0;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.625rem 0.25rem !important;
    font-size: 0.75rem !important;
    white-space: normal;
    text-align: center;
  }
  .sticky.top-16.z-30 .flex.overflow-x-auto > a i {
    margin-right: 0 !important;
    font-size: 1rem;
    line-height: 1;
  }
  /* Decorative underline spans/divs inside tab links must never intercept taps */
  .sticky.top-16.z-30 .flex.overflow-x-auto > a span,
  .sticky.top-16.z-30 .flex.overflow-x-auto > a div {
    pointer-events: none;
  }
  .tab-prefix {
    display: none;
  }

  /* ---- Page title rows: tighter top, action buttons full-width ---- */
  main > .container > .flex.flex-col.md\:flex-row.md\:items-center.md\:justify-between {
    margin-bottom: 1rem !important;
  }
  main > .container > .flex.flex-col.md\:flex-row.md\:items-center.md\:justify-between h1 {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.25rem !important;
  }
  main > .container > .flex.flex-col.md\:flex-row.md\:items-center.md\:justify-between p {
    font-size: 0.875rem !important;
    margin-bottom: 0 !important;
  }
  main > .container > .flex.flex-col.md\:flex-row.md\:items-center.md\:justify-between .flex.flex-col.sm\:flex-row {
    width: 100%;
    margin-top: 0.875rem !important;
  }

  /* CTA buttons: full-width and consistent height on small screens */
  .action-btn-primary,
  .action-btn-light {
    width: 100%;
    min-height: 44px;
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
  }
  .action-btn-primary i,
  .action-btn-light i {
    font-size: 0.9375rem;
  }

  /* Inline groups of action buttons should stack with consistent gap */
  main .flex.flex-col.sm\:flex-row.gap-3 {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* ---- Stat cards: tighten internal padding, keep readable ---- */
  .stat-card.p-6,
  .bg-white.p-6.rounded-xl {
    padding: 1.125rem !important;
  }
  .stat-card h3 {
    font-size: 1.5rem !important;
  }
  .stat-card .text-3xl {
    font-size: 1.5rem !important;
  }
  .stat-card .w-12.h-12 {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* ---- Welcome banner (Dashboard) ---- */
  main .gradient-bg.rounded-2xl,
  main .gradient-bg.rounded-xl,
  main .bg-gradient-to-r.rounded-2xl,
  main .bg-gradient-to-r.rounded-xl {
    padding: 1.25rem !important;
  }

  /* ---- Filter / search rows: stack and breathe ---- */
  .bg-white.rounded-xl.shadow-md.border.border-gray-100.mb-8 .p-6 {
    padding: 1rem !important;
  }
  .bg-white.rounded-xl.shadow-md.border.border-gray-100.mb-8 .flex.flex-col.md\:flex-row.gap-4 {
    gap: 0.75rem !important;
  }
  .bg-white.rounded-xl.shadow-md.border.border-gray-100.mb-8 .flex.gap-2 {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .bg-white.rounded-xl.shadow-md.border.border-gray-100.mb-8 .flex.gap-2 > div.relative {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }
  .bg-white.rounded-xl.shadow-md.border.border-gray-100.mb-8 .flex.gap-2 > div.relative > select {
    width: 100%;
  }

  /* Form-control: tap-friendly + no iOS zoom */
  .form-control,
  input.form-control,
  select.form-control,
  textarea.form-control {
    min-height: 44px;
    font-size: 16px !important;
    padding: 0.625rem 0.875rem !important;
  }
}

/* ==================================================================
   <= 640px: cardified rows, full mobile portal layout
================================================================== */
@media (max-width: 640px) {

  /* ---- Mis Paquetes: prefer the cardified grid view on mobile ----
     Both #list-view and #grid-view are populated every cycle by
     _renderAll, so we can simply hide the table and show cards. The
     view-toggle is hidden because card view is the only sensible
     mobile representation of a 14-column packages table. */
  #list-view {
    display: none !important;
  }
  #grid-view {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
  }
  /* Hide the list/grid toggle since we force cards on mobile.
     Class-based selector keeps this safe on browsers without :has(). */
  .view-toggle-wrap,
  #list-view-btn,
  #grid-view-btn {
    display: none !important;
  }

  /* Mis Paquetes: status quick-tabs stay readable, text never truncates */
  .grid.grid-cols-3.sm\:grid-cols-6.border-b.border-gray-100 {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .status-tab {
    padding: 0.625rem 0.25rem !important;
    min-height: 72px;
  }
  .status-tab .w-10.h-10 {
    width: 2rem !important;
    height: 2rem !important;
    margin-bottom: 0.375rem !important;
  }
  .status-tab .text-sm {
    font-size: 0.8125rem !important;
    line-height: 1.1;
  }
  .status-tab .text-xs {
    font-size: 0.6875rem !important;
  }

  /* Mis Paquetes: items-per-page row stacks gracefully */
  .px-6.py-3.flex.justify-between.items-center.bg-gray-50 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
  }
  .px-6.py-3.flex.justify-between.items-center.bg-gray-50 .flex.items-center {
    justify-content: space-between;
  }

  /* ---- Mis Facturas: cardify each bill row ----
     The data-table on desktop becomes a vertical card stack on mobile.
     Each bill row is a card; each cell renders as a labelled key/value
     line driven by the data-label attribute on its <td>. The thead is
     hidden because labels live inside cards. Empty/loading rows do not
     have .bill-row, so they keep their original full-width layout. */

  /* Container: drop the horizontal scroller, use natural flow */
  .bg-white.rounded-xl.shadow-sm.border.border-gray-100.overflow-hidden.mb-6 > .min-w-full.overflow-x-auto {
    overflow: visible !important;
  }

  #bills-tbody,
  #bills-tbody > tr.bill-row,
  #bills-tbody > tr.bill-row > td {
    display: block;
    width: 100%;
  }
  /* Hide the thead row only when we have cardified data rows */
  table.data-table thead {
    /* Keep accessible to screen readers, hide visually */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  #bills-tbody > tr.bill-row {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.875rem;
    margin: 0 0.875rem 0.75rem;
    padding: 0.875rem 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  #bills-tbody > tr.bill-row:hover {
    background: #fff !important;
  }
  /* Add side margin to the inline detail row container */
  #bills-tbody > tr.bill-detail-row > td {
    padding: 0 !important;
  }
  #bills-tbody > tr.bill-detail-row {
    margin: -0.5rem 0.875rem 0.75rem;
    display: block;
    background: #fff;
    border: 1px dashed #e5e7eb;
    border-radius: 0.875rem;
    padding: 0.5rem;
  }
  #bills-tbody > tr.bill-detail-row table {
    font-size: 0.8125rem;
  }

  #bills-tbody > tr.bill-row > td {
    padding: 0.4375rem 0 !important;
    border: 0 !important;
    text-align: right !important;
    white-space: normal !important;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.875rem;
  }
  #bills-tbody > tr.bill-row > td:not(:last-child) {
    border-bottom: 1px solid #f3f4f6 !important;
  }
  #bills-tbody > tr.bill-row > td::before {
    content: attr(data-label);
    color: #6b7280;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    flex-shrink: 0;
  }
  /* Promote the invoice number into a card heading row */
  #bills-tbody > tr.bill-row > td[data-label="Factura"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -0.25rem -0.25rem 0.5rem;
    padding: 0.5rem 0.75rem !important;
    background: linear-gradient(180deg, #FFF5EB 0%, #FFFAF3 100%);
    border-radius: 0.625rem;
    font-size: 1rem !important;
    color: #C05621 !important;
    border-bottom: 0 !important;
  }
  #bills-tbody > tr.bill-row > td[data-label="Factura"]::before {
    content: "Factura";
    color: #9C4221;
  }
  /* Total: emphasize */
  #bills-tbody > tr.bill-row > td[data-label="Total"] {
    background: #F9FAFB;
    margin: 0.5rem -0.25rem 0;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem;
    font-size: 1rem !important;
    border-bottom: 0 !important;
  }
  /* Actions row: stack horizontally, larger tap targets */
  #bills-tbody > tr.bill-row > td.bill-actions-cell {
    border-bottom: 0 !important;
    padding-top: 0.625rem !important;
    margin-top: 0.25rem;
    border-top: 1px solid #f3f4f6 !important;
  }
  #bills-tbody > tr.bill-row > td.bill-actions-cell::before {
    content: "";
    display: none;
  }
  #bills-tbody > tr.bill-row > td.bill-actions-cell > div {
    width: 100%;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  #bills-tbody > tr.bill-row > td.bill-actions-cell button {
    min-width: 44px;
    min-height: 44px;
    padding: 0.625rem !important;
    font-size: 1rem;
  }

  /* Hide cells that have no meaningful value (em-dash or 0) is risky:
     we keep them visible to honor "never silently drop". */

  /* Pagination row in Mis Facturas table footer */
  .bg-white.rounded-xl.shadow-sm.border.border-gray-100.overflow-hidden.mb-6 > .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
  }
  .bg-white.rounded-xl.shadow-sm.border.border-gray-100.overflow-hidden.mb-6 > .flex.items-center.justify-between > div {
    justify-content: space-between;
  }

  /* ---- Mi Cuenta ---- */
  /* Profile header tab strip: snap, larger tap targets */
  .account-tab-btn {
    padding: 0.875rem 1rem !important;
    font-size: 0.9375rem !important;
    scroll-snap-align: start;
  }
  /* Account tab content: tighter horizontal padding on phones */
  #personal-info-tab,
  #address-info-tab,
  #security-tab,
  #notifications-tab {
    padding: 1.25rem !important;
  }
  /* Read-only info card: tighter padding on narrow phones */
  .account-info-card {
    padding: 1rem !important;
  }
  /* Personal info kv rows: stack label above value on narrow phones */
  #personal-info-tab .account-kv-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    padding: 0.625rem 0;
  }
  #personal-info-tab .account-kv-row dd {
    text-align: left;
    font-size: 0.9375rem;
  }
  /* Address kv rows: stack label above value so values don't get
     cramped against the right edge on narrow screens */
  #address-info-tab .account-kv-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.625rem 0;
  }
  #address-info-tab .account-kv-row dd {
    text-align: left;
    font-size: 0.9375rem;
  }
  /* Security tab: password form max-width takes full width on phone */
  #security-tab .max-w-xl {
    max-width: 100% !important;
  }

  /* ---- Mi Cuenta: profile header upper zone on phones ---- */
  /* Profile header: reduce bottom padding so it doesn't feel too tall */
  .profile-header {
    padding: 0 1.25rem 1.75rem !important;
  }
  /* Avatar: keep centered, give it generous breathing room */
  .profile-avatar {
    width: 5.5rem !important;
    height: 5.5rem !important;
    margin-top: -2.5rem !important;
  }
  /* Name: slightly smaller on phones but still prominent */
  #profile-header-name {
    font-size: 1.375rem !important;
    letter-spacing: -0.01em;
  }
  /* Casillero row */
  #profile-casillero {
    font-size: 0.875rem !important;
  }
  /* Setup card: tighter horizontal margin on phones so it breathes */
  .setup-banner {
    margin: 1rem 1rem 1.25rem !important;
    padding: 1.125rem 1.125rem 1.125rem 1.125rem !important;
    gap: 1rem !important;
  }
  /* Setup card chips: allow wrapping and ensure tap target height */
  .setup-banner-links {
    gap: 0.4rem !important;
  }
  .setup-banner-link {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.75rem !important;
  }
  /* Dismiss button: keep clear of chips on small screens */
  .setup-banner-dismiss {
    top: 0.875rem !important;
    right: 0.875rem !important;
  }

  /* ---- Modals: turn into bottom-sheets on mobile ----
     Less context-switching cost than a centered dialog on a phone. */
  #package-details-modal,
  #tracking-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #package-details-modal > div,
  #tracking-modal > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    max-height: 92vh !important;
    animation: portalSheetUp 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  #package-details-modal .grid.grid-cols-1.md\:grid-cols-2 {
    gap: 1rem !important;
  }
  /* Modal footer buttons stack and stretch */
  #package-details-modal .mt-6.flex.justify-between {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  #package-details-modal .mt-6.flex.justify-between > button {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  @keyframes portalSheetUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* ---- Tighten remaining .p-6 cards across portal pages ---- */
  main .bg-white.rounded-xl .p-6 {
    padding: 1rem !important;
  }
  /* But keep summary stat cards padded enough to feel substantial */
  main .grid > .bg-white.p-6.rounded-xl {
    padding: 1.125rem !important;
  }

  /* Toast container bottom-clear to avoid overlap with floating btns */
  #toast-container {
    bottom: 5rem !important;
    right: 0.75rem !important;
    left: 0.75rem !important;
  }
  #toast-container .toast {
    min-width: 0 !important;
    width: 100%;
  }
}

/* ==================================================================
   <= 414px: large-phone polish (iPhone Plus / Pixel)
================================================================== */
@media (max-width: 414px) {
  .stat-card .text-3xl,
  .stat-card h3 {
    font-size: 1.375rem !important;
  }

  /* Mi Cuenta avatar tighten */
  .profile-avatar {
    width: 5rem !important;
    height: 5rem !important;
  }
}

/* ==================================================================
   <= 375px: standard phone width — tighten further
================================================================== */
@media (max-width: 375px) {
  .status-tab .text-sm {
    font-size: 0.75rem !important;
  }
  .status-tab .text-xs {
    font-size: 0.625rem !important;
  }
  #bills-tbody > tr.bill-row {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.75rem 0.875rem;
  }
}

/* ==================================================================
   <= 320px: narrowest supported viewport — keep things legible
================================================================== */
@media (max-width: 320px) {
  .action-btn-primary,
  .action-btn-light {
    font-size: 0.875rem !important;
    padding: 0.625rem 0.75rem !important;
  }
  .stat-card.p-6,
  .bg-white.p-6.rounded-xl {
    padding: 0.875rem !important;
  }
  /* Quick stats: 2x2 grid instead of stacking 4 long cards */
  main .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .stat-card .text-3xl,
  .stat-card h3 {
    font-size: 1.125rem !important;
  }
  .stat-card .w-12.h-12 {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }
  .stat-card p.text-sm {
    font-size: 0.75rem !important;
  }
  /* Sub-nav: smaller padding */
  .sticky.top-16.z-30 .flex.overflow-x-auto > a {
    padding: 0.75rem 0.625rem !important;
    font-size: 0.8125rem !important;
  }
  .sticky.top-16.z-30 .flex.overflow-x-auto > a i {
    margin-right: 0.25rem !important;
  }
  /* Status tab grid: keep 3 columns but smaller */
  .status-tab {
    min-height: 64px;
    padding: 0.5rem 0.125rem !important;
  }
  /* Filter selects single column to fit */
  .bg-white.rounded-xl.shadow-md.border.border-gray-100.mb-8 .flex.gap-2 > div.relative {
    flex: 1 1 100% !important;
  }
}

/* =============================================================
   PORTAL SECONDARY NAV — .portal-tab-nav
   Self-contained, class-scoped. No dependency on Tailwind
   overflow/flex helpers or sticky-wrapper selectors.
   Centering: flex + justify-content:center on the nav itself,
   which is a block element spanning full viewport width.
   Active state: orange-tinted background + darker orange text +
   semibold weight — clearly stronger than gray inactive tabs.
   ============================================================= */
.portal-tab-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 16px;
  gap: 2px;
  background: transparent;
}
.portal-tab-nav::-webkit-scrollbar { display: none; }

.portal-tab-nav > a {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  border: none;
}

.portal-tab-nav > a:hover:not([aria-current]) {
  background: #fff7ed;
  color: #ea580c;
}

.portal-tab-nav > a[aria-current="page"] {
  background: #ffedd5;   /* warm orange tint — clearly distinct from white bg */
  color: #c2410c;         /* orange-700 — strong, unambiguous */
  font-weight: 600;
}

@media (max-width: 640px) {
  .portal-tab-nav {
    justify-content: flex-start; /* allow scroll from left on narrow screens */
    padding: 4px 8px;
  }
  .portal-tab-nav > a {
    padding: 8px 10px;
    font-size: 0.8125rem;
  }
  .portal-tab-nav .tab-prefix {
    display: none;
  }
}

/* =============================================================
   MIS FACTURAS — Expanded recibos: mobile-native stacked cards
   On mobile the nested 7-column table becomes a set of mini
   key-value cards, one per recibo, with no horizontal scrolling.
   Desktop keeps the original table layout unchanged.
   ============================================================= */
@media (max-width: 640px) {
  /* Remove the overflow-x wrapper — no more sideways scroll */
  #bills-tbody > tr.bill-detail-row .overflow-x-auto {
    overflow-x: visible !important;
    border: none !important;
    border-radius: 0 !important;
  }
  /* Table and tbody → block layout */
  #bills-tbody > tr.bill-detail-row table,
  #bills-tbody > tr.bill-detail-row tbody {
    display: block !important;
    width: 100%;
  }
  /* Hide the header row — data-label on each td replaces it */
  #bills-tbody > tr.bill-detail-row thead {
    display: none !important;
  }
  /* Each recibo row becomes a mini card */
  #bills-tbody > tr.bill-detail-row tr {
    display: block !important;
    padding: 0.625rem 0.75rem;
    background: #ffffff;
    border: 1px solid #f0f2f5;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  #bills-tbody > tr.bill-detail-row tr:last-child {
    margin-bottom: 0;
  }
  /* Each cell: horizontal label + value row */
  #bills-tbody > tr.bill-detail-row td {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25rem 0 !important;
    font-size: 0.8125rem;
    border: none !important;
    text-align: right;
  }
  #bills-tbody > tr.bill-detail-row td:not(:last-child) {
    border-bottom: 1px solid #f9fafb !important;
  }
  /* Label injected from data-label attribute */
  #bills-tbody > tr.bill-detail-row td::before {
    content: attr(data-label);
    color: #6b7280;
    font-weight: 500;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    flex-shrink: 0;
    margin-right: 0.75rem;
  }

  /* ===== Portal interaction polish: remove stray focus artifacts =====
     The global -webkit-tap-highlight-color:transparent in styles.css
     covers the tap flash; these rules tighten portal-specific controls
     that previously showed browser-default active/focus frames.        */
  .btn-detail:focus,
  .btn-track:focus,
  .btn-detail:active,
  .btn-track:active {
    outline: none !important;
    box-shadow: none !important;
  }
  /* Filter dropdowns in Mis Paquetes / Mis Facturas */
  select:focus,
  input[type="date"]:focus,
  input[type="search"]:focus,
  input[type="text"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(234,88,12,0.20) !important;
  }

  /* ── Solicitudes: cancel confirm row stacks on small screens ── */
  #cancel-confirm-row {
    flex-direction: column;
    align-items: flex-start;
  }
  #cancel-confirm-row .flex.gap-2 {
    width: 100%;
  }
  #btn-cancel-confirm-yes,
  #btn-cancel-confirm-no {
    flex: 1;
    min-height: 48px;
  }

  /* ── Portal side panel: ensure minimum tap targets ── */
  #form-submit-btn,
  #btn-portal-dup-dismiss,
  #btn-dup-dismiss-cotizar,
  #btn-cancel-solicitud,
  #btn-guest-link-yes,
  #btn-guest-link-no {
    min-height: 48px;
  }
}

/* =========================
   TARIFAS PAGE — MOBILE
========================= */
@media (max-width: 640px) {
    /* Aérea section: reduce top padding so intro sits closer to heading */
    #aerea {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Marítima section */
    #maritima {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* CTA pre-footer section */
    #cta-tarifas {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Delivery section */
    #aerea + section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Weight table mobile card grid: tighter row padding */
    #tab-peso .sm\:hidden .px-3 {
        padding-left: 0.625rem;
        padding-right: 0.625rem;
    }

    /* Maritime table: always scrollable horizontally */
    #maritima .overflow-x-auto {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Delivery cards: force single column */
    #aerea + section .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Maritime weekly schedule: single column */
    #maritima .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Tab navigation: wrap with comfortable tap targets */
    #tarifas-tab-nav button {
        font-size: 0.8125rem !important;
        padding: 0.625rem 0.875rem !important;
        min-height: 44px;
    }

    /* Intro CTA button: full width on mobile, guaranteed tap target */
    #aerea .tarifas-cta-btn {
        display: flex;
        width: 100%;
        min-height: 48px;
    }
}

/* ── Cotizar: sticky CTA safe-area bottom padding (iOS notch) ── */
@media (max-width: 767px) {
  #sticky-cta-bar {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  /* Duplicate warning on cotizar: stack dismiss button below text */
  #dup-warning-cotizar .flex.items-start {
    flex-wrap: wrap;
  }
  #btn-dup-dismiss-cotizar {
    width: 100%;
    margin-top: 0.5rem;
  }

  /* Portal panel: ensure new-request-panel is full-screen friendly */
  #new-request-panel {
    max-height: 100dvh;
  }

  /* Solicitud detail: header buttons wrap cleanly */
  #sol-content .flex.flex-wrap.gap-2.flex-shrink-0 {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CRBOX Mobile Side Drawer — companion to js/mobile-drawer.js
   The old #mobile-menu dropdown is fully replaced by this fixed left-slide panel.
══════════════════════════════════════════════════════════════════════════════ */

/* Lock body scroll while drawer is open */
body.crbox-drawer-open {
  overflow: hidden !important;
  touch-action: none;
}

/* Full-screen wrap: invisible + inert until opened */
.crbox-drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 9000;
  visibility: hidden;
  pointer-events: none;
}
.crbox-drawer-wrap.is-open {
  visibility: visible;
  pointer-events: auto;
}

/* Dim + blur backdrop */
.crbox-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.crbox-drawer-wrap.is-open .crbox-drawer-backdrop { opacity: 1; }

/* X close button — top-right of screen, in backdrop area */
.crbox-drawer-x {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9002;
  box-sizing: border-box;
  padding: 0;
  line-height: 40px;
  aspect-ratio: 1 / 1;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.22s ease 0.08s, transform 0.22s ease 0.08s, background 0.15s;
  pointer-events: none;
}
.crbox-drawer-wrap.is-open .crbox-drawer-x {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.crbox-drawer-x:hover { background: rgba(255, 255, 255, 0.32); }

/* Sliding panel — 82vw, slides in from left */
.crbox-drawer-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 82vw;
  max-width: 360px;
  background: #fff;
  z-index: 9001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 6px 0 40px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  outline: none;
}
.crbox-drawer-wrap.is-open .crbox-drawer-panel { transform: translateX(0); }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .crbox-drawer-panel,
  .crbox-drawer-backdrop,
  .crbox-drawer-x { transition: none !important; }
}

/* Orange brand header */
.crbox-dh {
  flex-shrink: 0;
  background: #FF6B00;
  padding: 1.375rem 1.25rem 1.25rem;
}
.crbox-dh-logo-wrap { display: inline-block; margin-bottom: 0.625rem; }
.crbox-dh-logo {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}

/* Logged-out tagline + CTAs */
.crbox-dh-tagline {
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 0.875rem;
}
.crbox-dh-btns { display: flex; gap: 0.5rem; }
.crbox-dh-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.48rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-height: 38px;
}
.crbox-dh-btn--solid  { background: #fff; color: #FF6B00; border: none; }
.crbox-dh-btn--solid:hover  { background: #fff7ed; color: #c2410c; }
.crbox-dh-btn--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); }
.crbox-dh-btn--outline:hover { background: rgba(255,255,255,0.18); }

/* Logged-in user row */
.crbox-dh-user  { display: flex; align-items: center; gap: 0.875rem; margin-top: 0.25rem; }
.crbox-dh-avatar {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 2px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15rem;
}
.crbox-dh-info  { min-width: 0; }
.crbox-dh-name  { font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crbox-dh-sub   { font-size: 0.73rem; color: rgba(255,255,255,0.78); margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Scrollable nav body */
.crbox-db {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.5rem 0;
}
.crbox-db-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 0.7rem 1.25rem 0.2rem;
}
.crbox-db-sep { height: 1px; background: #f3f4f6; margin: 0.4rem 0; }

/* Nav link rows */
.crbox-drawer-link {
  display: flex !important;
  align-items: center !important;
  width: 100%;
  padding: 0 1.25rem !important;
  min-height: 52px;
  gap: 0.875rem;
  font-size: 0.9375rem !important;
  font-weight: 500;
  color: #374151;
  text-decoration: none !important;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  font-family: inherit;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.crbox-drawer-link i {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  color: #FF6B00;
  font-size: 0.875rem;
}
.crbox-drawer-link:hover,
.crbox-drawer-link:focus-visible {
  background: #fff7ed;
  color: #c2410c;
  outline: none;
}
.crbox-drawer-link:hover i,
.crbox-drawer-link:focus-visible i { color: #c2410c; }

.crbox-drawer-link--active {
  color: #FF6B00 !important;
  font-weight: 700;
  background: #fff7ed;
  border-left-color: #FF6B00;
}
.crbox-drawer-link--active i { color: #FF6B00 !important; }

.crbox-drawer-link--danger       { color: #ef4444 !important; }
.crbox-drawer-link--danger i     { color: #ef4444 !important; }
.crbox-drawer-link--danger:hover { background: #fef2f2; color: #b91c1c !important; }
.crbox-drawer-link--danger:hover i { color: #b91c1c !important; }

/* CTA footer strip */
.crbox-df {
  flex-shrink: 0;
  padding: 0.75rem 1.25rem 1.375rem;
  border-top: 1px solid #f3f4f6;
}
.crbox-df-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #FF6B00 !important;
  color: #fff !important;
  border-radius: 0.625rem;
  padding: 0.75rem 1.25rem !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  min-height: 48px;
  transition: background 0.15s !important;
}
.crbox-df-cta:hover { background: #e05c00 !important; }

/* Dashboard CTA button — shown to logged-in users on public pages */
.crbox-db-dash-cta-wrap {
  padding: 0.75rem 1.25rem 0.25rem;
}
.crbox-db-dash-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: #FF6B00;
  color: #fff !important;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s;
  box-sizing: border-box;
}
.crbox-db-dash-cta i { font-size: 0.95rem; }
.crbox-db-dash-cta:hover { background: #e05c00; color: #fff !important; }