/* ══════════════════════════════════════════════════════════════
   ENIX — RESERVAS (ItineraryDetail) EN MOBILE
   --------------------------------------------------------------
   Salvo la sección BASE, todo va dentro de @media (max-width:768px):
   el desktop no se toca.

   Sin markup duplicado: la tabla se reordena como cards con
   grid-template-areas sobre las clases que ya tienen los <td>, y los
   paneles de filtros se reposicionan como bottom-sheets. Así hay una
   sola instancia de cada combo / datepicker / ReservationDetail.

   Se carga después de enix-reservas.css; donde hay que ganarle al
   <style> embebido del .razor se usa el id (#search-panel,
   #filter-sidebar).
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   BASE — markup que sólo existe para mobile
   ══════════════════════════════════════════════════════════════ */
.enix-m-only { display: none !important; }
.enix-m-pagehead,
.enix-m-criteria,
.enix-m-toolbar,
.enix-m-sheethead,
.enix-m-sheetfoot,
.enix-m-backdrop,
.enix-m-grouptitle,
.enix-m-sortsection,
.enix-m-fab,
.enix-m-svc,
.enix-m-skel-top,
.enix-m-empty { display: none; }


@media (max-width: 768px) {

  /* Acá no hay producto seleccionado; para ir a otro módulo está el drawer. */
  .enix-product-tabs--hide-mobile { display: none; }

  .enix-m-only { display: inline-flex !important; }

  .enix-reservas-wrap { padding: 0 0 24px; }

  /* Lo reemplaza .enix-m-pagehead (título + contador + búsqueda). */
  .enix-reservas-header { display: none; }

  /* isolation:auto no es cosmético: el `isolate` de enix-reservas.css encierra
     el z-index del sheet de filtros y el navbar le pasaba por encima. */
  .enix-reservas-body {
    display: block;
    isolation: auto;
  }


  /* ══════════════════════════════════════════════════════════
     1. ENCABEZADO DE PÁGINA (no sticky: se va con el scroll)
     ══════════════════════════════════════════════════════════ */
  .enix-m-pagehead { display: block; padding: 13px 12px 11px; }
  .enix-m-pagehead__row { display: flex; align-items: center; gap: 8px; }
  .enix-m-pagehead__title {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    font-size: var(--text-xl);
    font-weight: var(--fw-black);
    color: var(--navy);
  }
  .enix-m-pagehead__title svg { color: var(--blue); flex: 0 0 auto; }
  .enix-m-count {
    flex: 0 0 auto;
    background: var(--blue-lt);
    color: var(--blue);
    font-size: 11.5px;
    font-weight: var(--fw-bold);
    padding: 3px 10px;
    border-radius: var(--r-full);
    min-height: 20px;
    display: inline-flex;
    align-items: center;
  }
  /* Placeholder del contador mientras se rebusca. */
  .enix-m-count__skel {
    display: block;
    width: 26px;
    height: 9px;
    border-radius: 3px;
  }

  /* Fila de acción, no un input: la búsqueda es multi-campo. */
  .enix-m-searchbtn {
    width: 100%;
    margin-top: 11px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    background: var(--surface-card);
    border: 1.5px solid var(--gray200);
    border-radius: 10px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  }
  .enix-m-searchbtn__ic {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--blue-lt);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .enix-m-searchbtn__tx { flex: 1; min-width: 0; line-height: 1.25; }
  .enix-m-searchbtn__tx b {
    display: block;
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--navy);
  }
  .enix-m-searchbtn__tx small {
    display: block;
    font-size: 11px;
    color: var(--gray500);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .enix-m-searchbtn__n {
    flex: 0 0 auto;
    background: var(--blue);
    color: #fff;
    font-size: 10.5px;
    font-weight: var(--fw-black);
    min-width: 19px;
    height: 19px;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
  }
  .enix-m-searchbtn__go { flex: 0 0 auto; color: var(--gray400); }


  /* ── 2. CRITERIOS CARGADOS — campo + valor, removibles de a uno ── */
  .enix-m-criteria {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 2px;
    margin-bottom: 9px;
  }
  .enix-m-crit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-card);
    border: 1px solid #cddffa;
    color: var(--blue);
    font-size: 11px;
    font-weight: var(--fw-bold);
    padding: 5px 6px 5px 10px;
    border-radius: var(--r-full);
    max-width: 100%;
  }
  .enix-m-crit__k { color: var(--gray500); font-weight: var(--fw-semibold); }
  .enix-m-crit__v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .enix-m-crit__x {
    border: none;
    background: none;
    color: var(--blue);
    font-size: 15px;
    line-height: 1;
    padding: 0 3px;
    cursor: pointer;
    flex: 0 0 auto;
  }


  /* ── 3. TOOLBAR STICKY (46px) — chips + "Filtros" ──
     El offset es la altura de .enix-header-stack, el bloque realmente
     pegado arriba (el navbar de adentro es static). */
  .enix-m-toolbar {
    display: flex;
    align-items: center;
    position: sticky;
    top: var(--nav-navbar-height);
    z-index: 150;
    height: 46px;
    background: var(--surface-card);
    border-top: 1px solid var(--gray200);
    border-bottom: 1px solid var(--gray200);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  }
  .enix-m-toolbar__scroll {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px 0 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .enix-m-toolbar__scroll::-webkit-scrollbar { display: none; }
  /* Con la barra naranja abierta el stack es más alto y no se sabe cuánto:
     mejor que la toolbar no sea sticky que quede tapada a medias. */
  body:has(.enix-header-stack .enix-iq-bar) .enix-m-toolbar { position: static; }
  .enix-m-toolbar__sep {
    flex: 0 0 auto;
    width: 1px;
    height: 20px;
    background: var(--gray200);
    margin: 0 3px;
  }
  /* "Filtros" anclado a la derecha, con fade para que se lea que los
     chips siguen por debajo. Botón lleno + etiqueta: no se confunde
     con el burger del navbar. */
  .enix-m-toolbar__pin {
    flex: 0 0 auto;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px 0 14px;
    background: var(--surface-card);
  }
  .enix-m-toolbar__pin::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 0;
    bottom: 0;
    width: 22px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  }
  .enix-m-filterbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--blue);
    border: 1px solid var(--blue);
    color: #fff;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    cursor: pointer;
  }

  /* Mismos .enix-chip del panel, con target táctil más grande. */
  .enix-m-toolbar .enix-chip { padding: 7px 13px; font-size: 12px; }

  /* Chips de estado con el color semántico del badge del listado. */
  .enix-m-stchip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    appearance: none;
    border: 1px solid var(--gray300);
    background: var(--surface-card);
    color: var(--gray600);
    border-radius: var(--r-full);
    padding: 6px 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    cursor: pointer;
    opacity: .45;
  }
  .enix-m-stchip__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
  .enix-m-stchip__ck { display: none; font-size: 11px; font-weight: var(--fw-black); line-height: 1; }
  .enix-m-stchip.is-on { opacity: 1; }
  .enix-m-stchip.is-on .enix-m-stchip__ck { display: inline; }
  .enix-m-stchip--onrequest .enix-m-stchip__dot { background: var(--amber); }
  .enix-m-stchip--onrequest.is-on { background: var(--amber-lt); border-color: #f0cf8a; color: var(--amber); }
  .enix-m-stchip--confirmed .enix-m-stchip__dot { background: var(--green); }
  .enix-m-stchip--confirmed.is-on { background: var(--green-lt); border-color: #a9e3bd; color: var(--green); }
  .enix-m-stchip--cancelled .enix-m-stchip__dot { background: var(--red); }
  .enix-m-stchip--cancelled.is-on { background: var(--red-lt); border-color: #e8b4b4; color: var(--red); }


  /* ── 4. LA TABLA SE VUELVE CARDS ──
     Mismo DOM: cada <tr> pasa a grid y cada <td> cae en su área por las
     clases que ya tenía, así ReservationDetail se instancia una vez. */
  .enix-table-card {
    background: transparent;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
  }
  .enix-table-scroll { overflow-x: visible; }
  /* Sin anular el min-width:640px de enix-reservas.css, la card desborda. */
  .enix-reservas-wrap .enix-table {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .enix-reservas-wrap .enix-table thead { display: none; }
  .enix-reservas-wrap .enix-table tbody { display: block; padding: 12px; }
  .enix-reservas-wrap .enix-table tfoot { display: block; }

  /* Proporción fija, no `auto`: cada fila es su propio grid y con `auto` las
     columnas no alinearían entre cards. */
  .enix-reservas-wrap .enix-table tbody tr {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-template-areas:
      "enix     price"
      "status   netlocal"
      "pay      pay"
      "paxname  paxqty"
      "arrival  modified"
      "agency   createdby"
      "expand   edit";
    align-items: center;
    gap: 0;
    background: var(--surface-card);
    border: 1px solid #dbe1ea;
    border-radius: var(--r);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 8px 24px -18px rgba(15, 23, 42, .18);
  }
  /* El hover/zebra de escritorio no aplica: acá cada fila es una card. */
  .enix-reservas-wrap .enix-table tbody tr:not(.enix-tr-expanded):nth-child(odd) td,
  .enix-reservas-wrap .enix-table tbody tr:not(.enix-tr-expanded):hover td {
    background: transparent;
  }

  .enix-reservas-wrap .enix-table tbody td {
    display: block;
    border-bottom: none;
    padding: 0;
    color: var(--gray700) !important;
  }

  /* Clave de cada dato (LLEGADA, MODIFICADO, …). */
  .enix-reservas-wrap .enix-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 9.5px;
    font-weight: var(--fw-bold);
    color: var(--gray400);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 2px;
  }

  /* ── Mapeo de columnas a áreas ── */
  .enix-reservas-wrap .enix-table td.table-Flag { display: none; }

  .enix-reservas-wrap .enix-table td.table-Enix {
    grid-area: enix;
    padding: 11px 12px 0;
    font-size: var(--text-base);
    font-weight: var(--fw-black);
    color: var(--navy) !important;
  }
  .enix-reservas-wrap .enix-table td.table-Enix::before {
    display: inline;
    margin-right: 4px;
    font-size: 10px;
  }

  .enix-reservas-wrap .enix-table td.table-Status {
    grid-area: status;
    padding: 6px 12px 0;
  }

  .enix-reservas-wrap .enix-table td.table-NetUsd {
    grid-area: price;
    align-self: start;
    padding: 11px 12px 0;
    text-align: right;
    font-size: var(--text-lg);
    font-weight: var(--fw-black);
    color: var(--navy) !important;
  }
  /* Debajo del USD, chica: el símbolo ya la identifica, no lleva clave. */
  .enix-reservas-wrap .enix-table td.table-NetLocal {
    grid-area: netlocal;
    padding: 2px 12px 0;
    text-align: right;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    color: var(--gray500) !important;
  }
  .enix-reservas-wrap .enix-table td.table-NetLocal::before { display: none; }

  /* Estado de pago: renglón compacto a lo ancho, con la clave en línea (como table-Enix).
     Si la marca no muestra la columna, el área queda sin ítem y la fila colapsa a 0. */
  .enix-reservas-wrap .enix-table td.table-Pay {
    grid-area: pay;
    padding: 8px 12px 0;
  }
  .enix-reservas-wrap .enix-table td.table-Pay::before {
    display: inline;
    margin-right: 6px;
    font-size: 10px;
  }

  .enix-reservas-wrap .enix-table td.table-PaxName {
    grid-area: paxname;
    padding: 8px 12px 0;
    min-width: 0;
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--gray800) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .enix-reservas-wrap .enix-table td.table-Pax {
    grid-area: paxqty;
    padding: 8px 12px 0;
    text-align: right;
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
  }

  .enix-reservas-wrap .enix-table td.table-Arrival   { grid-area: arrival;   padding: 10px 12px 0; }
  .enix-reservas-wrap .enix-table td.table-Modified  { grid-area: modified;  padding: 10px 12px 0; }
  .enix-reservas-wrap .enix-table td.table-Agency    { grid-area: agency;    padding: 8px 12px 0; }
  .enix-reservas-wrap .enix-table td.table-CreatedBy { grid-area: createdby; padding: 8px 12px 0; }
  .enix-reservas-wrap .enix-table td.table-Arrival,
  .enix-reservas-wrap .enix-table td.table-Modified,
  .enix-reservas-wrap .enix-table td.table-Agency,
  .enix-reservas-wrap .enix-table td.table-CreatedBy,
  .enix-reservas-wrap .enix-table td.table-NetLocal,
  .enix-reservas-wrap .enix-table td.table-Pax {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Acciones al pie, 44px de target táctil. */
  .enix-reservas-wrap .enix-table td.table-Expand {
    grid-area: expand;
    margin-top: 11px;
    border-top: 1px solid var(--gray200);
    background: var(--gray50) !important;
  }
  .enix-reservas-wrap .enix-table td.table-Edit {
    grid-area: edit;
    margin-top: 11px;
    border-top: 1px solid var(--gray200);
    border-left: 1px solid var(--gray200);
    background: var(--gray50) !important;
  }
  .enix-reservas-wrap .enix-table td.table-Expand .enix-table__expand-btn,
  .enix-reservas-wrap .enix-table td.table-Edit .enix-btn-sm {
    width: 100%;
    min-height: 44px;
    border: none;
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
  }
  .enix-reservas-wrap .enix-table td.table-Expand .enix-table__expand-btn { color: var(--gray600); }
  .enix-reservas-wrap .enix-table td.table-Edit .enix-btn-sm { color: var(--blue); }

  /* ── Detalle expandido: se pega a la card de arriba ── */
  .enix-reservas-wrap .enix-table tbody tr:has(+ .enix-tr-expanded) {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
  }
  .enix-reservas-wrap .enix-table tbody tr.enix-tr-expanded {
    display: block;
    border: 1px solid #dbe1ea;
    border-top: none;
    border-radius: 0 0 var(--r) var(--r);
    margin-bottom: 10px;
    box-shadow: 0 8px 24px -18px rgba(15, 23, 42, .18);
  }
  /* Sin padding las esquinas de los servicios chocan con el borde de la card. */
  .enix-reservas-wrap .enix-table tbody tr.enix-tr-expanded > td {
    display: block;
    padding: 10px 10px 2px !important;  /* 2 + los 8 de margin del último = 10 */
  }
  /* 8 cajitas por servicio son ilegibles con 3 o 4 servicios: en su lugar
     ReservationDetail dibuja .enix-m-svc, 3 líneas por servicio. */
  .enix-reservas-wrap .enix-expanded-inner { display: none; }

  .enix-m-svc {
    display: block;
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--r-sm);
    padding: 10px 11px;
  }
  /* margin-bottom y no `+ .enix-m-svc`: entre cada par hay un
     .enix-expanded-inner (oculto), así que no son hermanos adyacentes. */
  .enix-m-svc { margin-bottom: 8px; }
  .enix-m-svc__head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
  }
  .enix-m-svc__head svg,
  .enix-m-svc__head i { flex: 0 0 auto; }
  .enix-m-svc__type {
    flex: 1;
    min-width: 0;
    font-size: var(--text-md);
    font-weight: var(--fw-bold);
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .enix-m-svc__head .enix-status { flex: 0 0 auto; }
  /* Puede ocupar dos líneas en vez de recortarse como en la tabla. */
  .enix-m-svc__name {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--gray700);
    line-height: 1.4;
  }
  .enix-m-svc__name small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: var(--fw-normal, 400);
    color: var(--gray500);
  }
  /* Una línea de datos con puntos, en vez de seis cajas. */
  .enix-m-svc__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px dashed var(--gray200);
    font-size: 11.5px;
    font-weight: var(--fw-semibold);
    color: var(--gray600);
  }
  /* ::after y no ::before: al envolver, dejaría el "·" abriendo el renglón. */
  .enix-m-svc__meta > span:not(:last-child)::after {
    content: "·";
    margin-left: 6px;
    color: var(--gray300);
  }
  .enix-m-svc__ref { font-weight: var(--fw-bold); color: var(--navy); }

  /* ── SKELETONS ──
     Los dos (carga inicial y parcial) están armados con la forma del
     desktop; acá se los lleva a la mobile. */
  .enix-list-skeleton { padding: 0 !important; }
  /* No tienen los id que vuelven sheets a esos paneles, así que en mobile no
     representan nada de lo que se ve. */
  .enix-list-skeleton .enix-reservas-filters,
  .enix-list-skeleton aside { display: none; }
  /* En su lugar, la forma real: título + fila de búsqueda + chips. */
  .enix-list-skeleton .enix-reservas-header {
    display: block;
    padding: 14px 12px 0;
  }
  .enix-list-skeleton .enix-reservas-header .enix-adm-skel { width: 60% !important; }
  /* El gris de .enix-adm-skel casi no se distingue del fondo de esta página. */
  .enix-list-skeleton .enix-adm-skel {
    background: linear-gradient(90deg, #e7ecf3 25%, #dae1eb 37%, #e7ecf3 63%);
    background-size: 400% 100%;
  }
  .enix-m-skel-top { display: block; padding: 11px 0 0; }
  /* Misma caja que .enix-m-searchbtn. */
  .enix-m-skel-search {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 12px;
    padding: 10px 12px;
    min-height: 44px;
    background: var(--surface-card);
    border: 1.5px solid var(--gray200);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  }
  /* Misma tira que .enix-m-toolbar. */
  .enix-m-skel-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 46px;
    margin-top: 13px;
    padding: 0 12px;
    background: var(--surface-card);
    border-top: 1px solid var(--gray200);
    border-bottom: 1px solid var(--gray200);
    overflow: hidden;
  }

  /* Sus celdas no llevan las clases semánticas, así que no pueden caer en las
     áreas del grid: vuelven a ser bloques. Con 4 filas alcanza. */
  .enix-reservas-wrap .enix-table--skeleton tbody tr {
    display: block;
    padding: 14px 12px;
  }
  .enix-reservas-wrap .enix-table--skeleton tbody tr:nth-child(n+5) { display: none; }
  .enix-reservas-wrap .enix-table--skeleton tbody td { display: block; padding: 5px 0; }
  .enix-reservas-wrap .enix-table--skeleton tbody td:nth-child(n+5) { display: none; }
  /* Escalonados: cuatro barras iguales no se leen como una card. */
  .enix-reservas-wrap .enix-table--skeleton tbody td:nth-child(1) .enix-skeleton { width: 42% !important; }
  .enix-reservas-wrap .enix-table--skeleton tbody td:nth-child(2) .enix-skeleton { width: 72% !important; }
  .enix-reservas-wrap .enix-table--skeleton tbody td:nth-child(3) .enix-skeleton { width: 56% !important; }
  .enix-reservas-wrap .enix-table--skeleton tbody td:nth-child(4) .enix-skeleton { width: 34% !important; }


  /* ── 5. PAGINACIÓN COMPACTA ── */
  /* Colchón: sin esto los flotantes tapan el paginador. */
  .enix-reservas-wrap .enix-table tfoot { padding: 0 12px 124px; }
  /* El <tr> también block: como table-row arma una caja de tabla anónima que
     encoge al contenido y el paginador no llega al ancho completo. */
  .enix-reservas-wrap .enix-table tfoot tr { display: block; }
  .enix-reservas-wrap .enix-table tfoot td { display: block; padding: 0; border: none; }
  .enix-pagination {
    flex-direction: column;
    gap: 10px;
    padding: 4px 12px 12px;
    border-top: none;
  }
  .enix-pagination {
    background: var(--surface-card);
    border: 1px solid #dbe1ea;
    border-radius: var(--r);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  }
  .enix-pagination__info { order: 2; font-weight: var(--fw-bold); color: var(--gray600); }
  .enix-pagination__btns { order: 1; gap: 6px; }
  /* De los 7 números quedan el actual y sus dos vecinos. Los de navegación
     tienen [aria-label]; los numerados, no. */
  .enix-pagination__btns .enix-pg-btn:not([aria-label]) { display: none; }
  .enix-pagination__btns .enix-pg-btn.active,
  .enix-pagination__btns .enix-pg-btn.active + .enix-pg-btn:not([aria-label]),
  .enix-pagination__btns .enix-pg-btn:not([aria-label]):has(+ .active) { display: block; }
  .enix-pagination__btns .enix-pg-btn { min-height: 38px; padding: 5px 12px; }
  /* Cuadrados: son 3 y comparten fila con los 4 de navegación. */
  .enix-pagination__btns .enix-pg-btn:not([aria-label]) { padding: 5px 0; min-width: 38px; text-align: center; }


  /* ── 6. SIN RESULTADOS — en desktop la tabla queda vacía sin explicación ── */
  .enix-m-empty {
    display: block;
    text-align: center;
    padding: 40px 24px;
    color: var(--gray500);
  }
  .enix-m-empty svg { color: var(--gray300); margin-bottom: 12px; }
  .enix-m-empty__title {
    display: block;
    color: var(--navy);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    margin-bottom: 5px;
  }
  .enix-m-empty p { font-size: var(--text-md); line-height: 1.55; margin: 0 0 16px; }


  /* ── 7. BOTTOM SHEETS ──
     #search-panel (búsqueda) y #filter-sidebar (filtros) son los mismos
     paneles del desktop, reposicionados. Sin duplicar markup. */
  .enix-m-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(13, 34, 64, .45);
    z-index: 1040;
  }

  /*  Dos detalles no obvios:
      · Anima por `bottom`, NO por `transform`: un ancestro transformado se
        vuelve el bloque contenedor de los hijos fixed, y los popups del combo
        y del datepicker son fixed posicionados por JS contra el viewport.
      · z-index por debajo de esos popups (1086/1090) para que abran encima. */
  #search-panel,
  #filter-sidebar {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: -100%;
    top: auto !important;
    width: auto !important;
    max-height: 90%;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1050;
    background: var(--surface-card);
    border: none !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .22) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transition: bottom .3s cubic-bezier(.32, .72, 0, 1), visibility .3s;
    visibility: hidden;
  }
  #search-panel.enix-m-sheet--open,
  #filter-sidebar.enix-m-sheet--open {
    bottom: 0;
    visibility: visible;
  }
  #search-panel:not(.enix-m-sheet--open),
  #filter-sidebar:not(.enix-m-sheet--open) { pointer-events: none; }

  /* Sticky dentro del panel, sin envolver el contenido en un div nuevo. */
  .enix-m-sheethead {
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 14px 8px 10px 16px;
    background: var(--surface-card);
    border-bottom: 1px solid var(--gray100);
  }
  .enix-m-sheethead::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: var(--r-full);
    background: var(--gray300);
  }
  .enix-m-sheethead__title {
    flex: 1;
    min-width: 0;
    font-size: var(--text-lg);
    font-weight: var(--fw-black);
    color: var(--navy);
  }
  .enix-m-sheethead__x {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: none;
    background: none;
    border-radius: 10px;
    color: var(--gray600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .enix-m-sheetfoot {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 3;
    padding: 11px 16px calc(14px + env(safe-area-inset-bottom));
    background: var(--surface-card);
    border-top: 1px solid var(--gray200);
    box-shadow: 0 -4px 14px rgba(15, 23, 42, .05);
  }
  .enix-m-sheetfoot .enix-btn-primary { width: 100%; justify-content: center; min-height: 44px; }

  /* ── Sheet de búsqueda ── */
  #search-panel > .form { padding: 0 16px 6px !important; }
  /* El bloque de acciones que ya existe hace de pie fijo del sheet. */
  #search-panel .enix-reservas-filters__actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex-direction: column;
    gap: 9px;
    margin: 14px -16px 0;
    padding: 11px 16px calc(14px + env(safe-area-inset-bottom));
    background: var(--surface-card);
    border-top: 1px solid var(--gray200);
    box-shadow: 0 -4px 14px rgba(15, 23, 42, .05);
  }
  #search-panel .enix-reservas-filters__actions .enix-btn-primary {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  /* En el sheet quedaría a dos toques y escondido: en mobile va al FAB. */
  #search-panel .enix-reservas-filters__actions .enix-btn-orange { display: none; }

  /* Apilado sobre #enix-back-to-top (enix-booking.css: bottom 20, 40px de alto). */
  .enix-m-fab {
    position: fixed;
    right: 14px;
    bottom: 70px;   /* 20 + 40 + 10 de separación */
    z-index: 160;
    height: 42px;
    padding: 0 15px 0 12px;
    border: none;
    border-radius: var(--r-full);
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 5px 16px -4px rgba(249, 115, 22, .5);
  }
  .enix-m-fab.is-hidden { display: none; }
  /* Los define un inline style (5 columnas) que le gana a las media queries;
     el !important sí le gana al inline. */
  #search-panel .enix-m-fieldgrid,
  #search-panel .enix-fg-2 {
    grid-template-columns: 1fr !important;
    margin-bottom: 0 !important;
  }
  /* Un `grid-column: span 2` inline (Atendente) crea una columna implícita y
     rompe la única columna: los campos volverían a quedar de a dos. */
  #search-panel .enix-m-fieldgrid > .enix-field { grid-column: auto !important; }
  #search-panel .enix-field { margin-bottom: 0; }
  #search-panel .enix-input,
  #search-panel .enix-cbo-ctl,
  #search-panel select { min-height: 44px; }

  /* Títulos de grupo de campos. */
  .enix-m-grouptitle {
    display: block;
    font-size: 10.5px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gray400);
    margin: 16px 0 9px;
    padding-top: 14px;
    border-top: 1px solid var(--gray100);
  }
  .enix-m-grouptitle:first-of-type { margin-top: 4px; padding-top: 0; border-top: none; }

  /* ── Sheet de filtros ── */
  #filter-sidebar > * { margin-left: 16px; margin-right: 16px; }
  #filter-sidebar > .enix-m-sheethead,
  #filter-sidebar > .enix-m-sheetfoot { margin-left: 0; margin-right: 0; }
  #filter-sidebar .enix-filter-head { display: none; }  /* el título ya está en la cabecera del sheet */
  #filter-sidebar .enix-filter-section:first-of-type { padding-top: 4px; }
  #filter-sidebar .enix-chip { padding: 8px 14px; font-size: 12.5px; }
  #filter-sidebar .enix-status-row { min-height: 44px; }
  #filter-sidebar .enix-status-row__check { width: 22px; height: 22px; border-radius: 6px; font-size: 13px; }
  #filter-sidebar .enix-clear-filters { min-height: 44px; margin-bottom: 4px; }
  /* Dropdown absoluto: dentro de un panel con overflow se recorta. */
  #filter-sidebar .enix-export__menu {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    border: 1px solid var(--gray200);
  }
  #filter-sidebar .enix-export__backdrop { display: none; }
  #filter-sidebar .enix-btn-excel { min-height: 44px; }

  /* Sólo mobile: en desktop se ordena por los <th>. */
  .enix-m-sortsection { display: block; }
  .enix-m-sortsection .enix-cbo-ctl { min-height: 44px; }

  /* A propósito no se bloquea el scroll del fondo: los sheets son fixed y no
     se mueven, y un <body> en overflow:hidden dejaría la app inusable. */
}