/* ════════════════════════════════════════════════════════════════════
   [2026-10-08] MODO CELULAR de Pedidos / Cambios / Solicitudes (app-admin)

   Todo dentro de @media (max-width:768px): en la PC no se aplica nada.
   SOLO CSS — no se toca app-admin.js. Las tablas se muestran como tarjetas
   y los botones Aprobar / Rechazar son los MISMOS de la PC (mismo onclick),
   asi aprobar desde el telefono hace exactamente lo mismo que desde la oficina.
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Cabecera ────────────────────────────────────────────────────────── */
  .header { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .header h1 { font-size: 14px; order: 3; flex-basis: 100%; margin: 2px 0 0; }
  .container { padding: 8px !important; }

  /* ── Pestañas: grandes para el dedo ──────────────────────────────────── */
  .tabs { flex-wrap: wrap; gap: 6px; }
  .tab { flex: 1 1 auto; font-size: 13px; padding: 9px 8px; text-align: center; }
  /* Configuracion del app: trabajo de escritorio */
  #tabConfig { display: none; }
  .filtro-estado { width: 100%; margin-left: 0 !important; display: flex; align-items: center; gap: 6px; }
  .filtro-estado select { flex: 1; font-size: 15px; padding: 8px; }
  .filtro-estado .btn-refresh { padding: 8px 14px; font-size: 16px; }

  /* ── Tablas -> tarjetas ──────────────────────────────────────────────── */
  .grid-tabla { overflow: visible; }
  .grid-tabla table, .grid-tabla tbody, .grid-tabla tr, .grid-tabla td { display: block; width: 100%; }
  .grid-tabla thead { display: none; }
  .grid-tabla tr {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 10px; padding: 8px 12px; box-sizing: border-box;
  }
  .grid-tabla tr:hover td { background: transparent; }
  .grid-tabla td {
    display: flex; gap: 10px; align-items: baseline;
    border: none !important; padding: 4px 0 !important;
    text-align: left !important; white-space: normal !important; word-break: break-word;
    font-size: 14px;
  }
  .grid-tabla td::before {
    flex-shrink: 0; width: 86px; color: var(--text-muted);
    font-size: 11px; font-weight: 600; text-transform: uppercase;
  }

  /* Rotulos de Pedidos (mismo orden que las columnas de la PC) */
  #panePedidos td:nth-of-type(1)::before  { content: 'Pedido'; }
  #panePedidos td:nth-of-type(2)::before  { content: 'Enviado'; }
  #panePedidos td:nth-of-type(3)::before  { content: 'Agente'; }
  #panePedidos td:nth-of-type(4)::before  { content: 'Servicio'; }
  #panePedidos td:nth-of-type(5)::before  { content: 'Fecha'; }
  #panePedidos td:nth-of-type(6)::before  { content: 'Hora'; }
  #panePedidos td:nth-of-type(7)::before  { content: 'Pax'; }
  #panePedidos td:nth-of-type(8)::before  { content: 'Hotel'; }
  #panePedidos td:nth-of-type(9)::before  { content: 'Total'; }
  #panePedidos td:nth-of-type(10)::before { content: 'Estado'; }

  /* Rotulos de Solicitudes de registro */
  #paneSolic td:nth-of-type(1)::before { content: 'N°'; }
  #paneSolic td:nth-of-type(2)::before { content: 'Fecha'; }
  #paneSolic td:nth-of-type(3)::before { content: 'Nombre'; }
  #paneSolic td:nth-of-type(4)::before { content: 'Teléfono'; }
  #paneSolic td:nth-of-type(5)::before { content: 'Email'; }
  #paneSolic td:nth-of-type(6)::before { content: 'Agencia'; }
  #paneSolic td:nth-of-type(7)::before { content: 'Estado'; }

  /* Las etiquetas de estado no se parten ("PENDIEN-TE"); si son dos, bajan */
  .grid-tabla td .estado { white-space: nowrap; word-break: normal; flex-shrink: 0; }
  #panePedidos td:nth-of-type(10),
  #paneSolic td:nth-of-type(7) { flex-wrap: wrap; row-gap: 4px; }

  /* Lo importante de un pedido, mas grande */
  #panePedidos td:nth-of-type(3),
  #panePedidos td:nth-of-type(4) { font-weight: 700; font-size: 15px; }

  /* Acciones: abajo, a todo lo ancho, botones de dedo */
  #panePedidos td.col-acciones,
  #paneSolic td.col-acciones {
    width: 100%; flex-wrap: wrap; gap: 8px;
    margin-top: 6px; padding-top: 10px !important;
    border-top: 1px dashed var(--border) !important;
  }
  #panePedidos td.col-acciones::before,
  #paneSolic td.col-acciones::before { content: none; display: none; }
  .grid-tabla td.col-acciones .btn-action {
    flex: 1 1 auto; min-height: 42px; padding: 10px 12px; font-size: 14px;
  }

  /* "Cargando..." / "Sin pedidos": sin rotulo */
  #panePedidos td.empty::before,
  #paneSolic td.empty::before { content: none; display: none; }
  .grid-tabla td.empty { display: block; text-align: center !important; }

  /* ── Cambios (ya son tarjetas): titulo arriba, botones abajo ─────────── */
  #listaCambios > div > div:first-child { flex-direction: column; align-items: stretch !important; }
  #listaCambios > div > div:first-child > div:last-child { width: 100%; }
  #listaCambios .btn-action { flex: 1 1 auto; min-height: 42px; padding: 10px 12px; font-size: 14px; }
  /* La tarjeta de Cambios es BLANCA, pero el detalle ("Hoja: ... Nuevo pax: ...")
     no trae color propio y heredaba el texto claro del tema oscuro: quedaba
     gris claro sobre blanco y no se leia lo que se estaba por aprobar. */
  #listaCambios > div { color: #1e293b; }
}