/* Phase 1 is opt-in per full template. Desktop and print layouts retain their styles. */
@media screen and (max-width: 639px) {
  body.mobile-stage-one main > .mx-auto { padding-left: 12px; padding-right: 12px; }
  body.mobile-stage-one main :is(.flex-1, .grid > *, .flex > *) { min-width: 0; }
  body.mobile-stage-one main :is(h1, h2, h3, p, dd, dt) { overflow-wrap: anywhere; }
  body.mobile-stage-one main nav[aria-label="Breadcrumb"] ol { flex-wrap: wrap; row-gap: 8px; }
  body.mobile-stage-one main .flex.justify-between { flex-wrap: wrap; gap: 12px; }
  body.mobile-stage-one main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]), select, textarea) {
    max-width: 100%; min-height: 44px; font-size: 16px;
  }
  body.mobile-stage-one main :is(button, a[title], a[class*="rounded"]) {
    min-height: 44px; min-width: 44px;
  }
  body.mobile-stage-one main .acciones-producto { gap: 8px; flex-wrap: wrap; }
  body.mobile-stage-one main .acciones-producto :is(a, button) {
    width: 44px; height: 44px; font-size: 16px;
  }
  body.mobile-stage-one main .acciones-producto i { font-size: 16px; }
  body.mobile-stage-one main :is(.col-acciones, .mobile-card-table td) { width: auto; min-width: 0; }
  body.mobile-stage-one main .mobile-dialog-panel {
    max-width: 100%; max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain;
  }
  body.mobile-stage-one main .fixed.inset-0 { padding: 12px; overflow-y: auto; }

  /* Same cells and controls: no duplicate form fields, requests or template loops. */
  body.mobile-stage-one main table.mobile-card-table { display: block; width: 100%; min-width: 0; }
  body.mobile-stage-one main .mobile-card-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  body.mobile-stage-one main .mobile-card-table tbody { display: block; width: 100%; }
  body.mobile-stage-one main .mobile-card-table tbody > tr {
    display: block; padding: 12px; border-bottom: 1px solid #e5e7eb;
  }
  body.mobile-stage-one main .mobile-card-table tbody > tr > :is(td, th) {
    display: block !important;
    padding: 8px 0; text-align: left; max-width: none;
    white-space: normal; overflow-wrap: anywhere;
  }
  body.mobile-stage-one main .mobile-card-table :is(td, th)[data-mobile-label]::before {
    content: attr(data-mobile-label); color: #64748b; font-size: 12px;
    display: block; margin-bottom: 4px; line-height: 1.5; font-weight: 600;
  }
  body.mobile-stage-one main .mobile-card-table tbody > .mobile-table-message > td {
    display: block !important; text-align: center;
  }
  body.mobile-stage-one main .mobile-card-table td > * { min-width: 0; max-width: 100%; }
  body.mobile-stage-one main .mobile-card-table td .flex { flex-wrap: wrap; gap: 8px; }
  body.mobile-stage-one main .mobile-card-table td.truncate { overflow: visible; text-overflow: clip; }
}