/* =====================================================================
   Dokopaak TMS en el móvil (12-10-2026)
   ---------------------------------------------------------------------
   El panel está pensado para el ordenador y en el iPhone se salía por la
   derecha. Aquí solo hay reglas para pantallas de 760 px o menos: en el
   ordenador no cambia nada. Colores y botones salen de dokopaak.css
   (variables --dk-*); aquí no se escriben colores nuevos.
   ===================================================================== */

/* Los botones que añade movil.js no se ven en el ordenador */
.movil-menu-btn, .movil-filtros-btn, .tabs .movil-mas { display: none; }

@media (max-width: 760px) {
  .movil-menu-btn, .movil-filtros-btn { display: inline-flex; }
  body.torre-movil .tabs .movil-mas { display: flex; }

  /* ---------- Generales ---------- */
  html, body { max-width: 100%; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  input, select, textarea { font-size: 16px !important; } /* iOS no hace zoom al escribir */
  button, .btn, a.btn, select, input[type="checkbox"] + label { min-height: 40px; }

  /* Tablas de los maestros: se desplazan dentro de su caja, no la página */
  .table-container, .tabla-wrap, .table-wrap, .card-table, .data-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .page-content table:not(.no-movil), .content table:not(.no-movil), main table:not(.no-movil) {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
    white-space: nowrap;
  }
  /* Formularios a una columna */
  .form-grid, .form-row, .grid-2, .grid-3, .two-col, .cols-2, .cols-3 {
    grid-template-columns: 1fr !important; flex-direction: column !important;
  }
  .modal, .modal-content, .modal-box { width: 100vw !important; max-width: 100vw !important; border-radius: 0 !important; }

  /* ---------- Torre ---------- */
  body.torre-movil { overflow: auto; }
  body.torre-movil .page-content {
    height: auto; min-height: 100vh; overflow: visible;
    margin-top: 0; padding: 8px 12px calc(84px + env(safe-area-inset-bottom, 0px));
  }
  body.torre-movil .tab-pane.active { flex: none; }

  /* Cabecera compacta: logo, menú y buscar en una fila; fechas y cifras debajo */
  body.torre-movil .topbar { flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
  body.torre-movil .topbar .brand-dual img { height: 22px; width: auto; }
  body.torre-movil .topbar .search-btn kbd { display: none; }
  body.torre-movil .topbar .search-btn { margin-left: auto; min-height: 40px; }
  body.torre-movil .qa-clock { display: none; }
  body.torre-movil .fecha-global {
    order: 5; width: 100%; display: flex; gap: 6px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; flex-wrap: nowrap;
  }
  body.torre-movil .fecha-global input[type="date"],
  body.torre-movil .fecha-global .fg-sep,
  body.torre-movil .fecha-global .fg-lab { display: none; }
  body.torre-movil .fecha-global .fg-btn { flex-shrink: 0; min-height: 36px; }
  body.torre-movil .topbar .kpi {
    order: 6; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; justify-content: space-between;
    background: var(--dk-blanco, #FFFFFF); border: 1px solid var(--dk-linea, #E2E8F0);
    border-radius: 12px; padding: 8px 10px;
  }
  body.torre-movil .topbar .kpi .item { align-items: flex-start; padding-right: 10px; flex-shrink: 0; }

  /* Botón de menú (lo crea movil.js) y accesos plegados */
  .movil-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 40px; border-radius: 10px; font-size: 20px; line-height: 1;
    background: var(--dk-blanco, #FFFFFF); border: 1px solid var(--dk-linea-2, #CBD5E1);
    color: var(--dk-tinta, #0F172A); cursor: pointer;
  }
  body.torre-movil .qa-bar { display: none !important; }
  body.torre-movil.menu-movil-abierto .qa-bar {
    display: flex !important; flex-wrap: wrap; gap: 8px; padding: 10px !important; margin-bottom: 8px !important;
    background: var(--dk-blanco, #FFFFFF); border: 1px solid var(--dk-linea, #E2E8F0); border-radius: 12px;
  }

  /* Pestañas: barra inferior fija, como una app */
  body.torre-movil .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000; margin: 0;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    background: var(--dk-blanco, #FFFFFF); border-top: 1px solid var(--dk-linea, #E2E8F0);
    border-bottom: none; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
  }
  body.torre-movil .tabs .tab {
    flex-direction: column; justify-content: center; gap: 2px; min-height: 52px;
    padding: 4px 2px; font-size: 11px; border-bottom: none; border-top: 3px solid transparent;
    border-radius: 0;
  }
  body.torre-movil .tabs .tab.active { border-top-color: var(--dk-naranja, #FF5E1A); color: var(--dk-tinta, #0F172A); }
  body.torre-movil .tabs .tab .badge { font-size: 10px; padding: 1px 6px; min-width: 18px; }
  body.torre-movil .tabs .tab[data-tab="mapa"]      { order: 1; }
  body.torre-movil .tabs .tab[data-tab="servicios"] { order: 2; }
  body.torre-movil .tabs .tab[data-tab="tiendas"]   { order: 3; }
  body.torre-movil .tabs .tab[data-tab="camiones"]  { order: 4; }
  body.torre-movil .tabs .movil-mas                 { order: 5; }
  /* Lo que no cabe abajo va en «Más»: una hoja que sube encima de la barra */
  body.torre-movil .tabs .tab[data-tab="incidencias"],
  body.torre-movil .tabs .tab[data-tab="jornadas"] { display: none; }
  body.torre-movil .tabs.mas-abierto .tab[data-tab="incidencias"],
  body.torre-movil .tabs.mas-abierto .tab[data-tab="jornadas"] {
    display: flex; position: fixed; right: 8px; width: 46vw; flex-direction: row;
    justify-content: space-between; min-height: 52px; padding: 0 14px; font-size: 14px;
    background: var(--dk-blanco, #FFFFFF); border: 1px solid var(--dk-linea, #E2E8F0);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  }
  body.torre-movil .tabs.mas-abierto .tab[data-tab="incidencias"] { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
  body.torre-movil .tabs.mas-abierto .tab[data-tab="jornadas"]    { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

  /* Mapa a ancho completo; el panel de autoasignación, debajo */
  body.torre-movil #pane-mapa.active { flex-direction: column !important; gap: 8px; }
  body.torre-movil #pane-mapa .mapa-col { width: 100% !important; flex: none !important; order: 1; }
  body.torre-movil #mapa-v2 { width: 100% !important; height: 62vh !important; min-height: 62vh; }
  body.torre-movil #pane-mapa .map-legend-bar { flex-wrap: wrap; }
  body.torre-movil .mapa-paleta { width: 100% !important; max-width: 100% !important; max-height: none; order: 2; }

  /* Botones flotantes (el maletín #vr-vault-chat-fab y el chat): apilados a la
     derecha y SIEMPRE por encima de la barra de abajo y de las barras de
     acción. El contenido deja hueco abajo para que no tapen nada. */
  #vr-vault-chat-fab {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; right: 12px !important;
    width: 50px !important; height: 50px !important;
  }
  .vault-chat-btn, #vr-chat-btn {
    bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important; right: 12px !important;
    width: 46px !important; height: 46px !important;
  }
  body { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  body.torre-movil { padding-bottom: 0; }
  body.torre-movil .page-content { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  /* «← Volver a…» que flotaba abajo: fuera (ya está «← Torre» arriba) */
  .movil-oculto { display: none !important; }

  /* Filtros plegados tras «Filtros» (el botón lo crea movil.js) */
  body.torre-movil .sub-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; }
  body.torre-movil .sub-filters .sub-filter-btn { flex-shrink: 0; min-height: 40px; }
  body.torre-movil .sub-filters .spacer { display: none; }
  body.torre-movil .movil-plegable { display: none !important; }
  body.torre-movil .filtros-abiertos .movil-plegable {
    display: flex !important; flex-wrap: wrap; overflow: visible;
  }
  body.torre-movil .filtros-abiertos .movil-plegable > * { flex: 1 1 45%; min-width: 0; }
  .movil-filtros-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
    border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer;
    background: var(--dk-blanco, #FFFFFF); border: 1px solid var(--dk-linea-2, #CBD5E1);
    color: var(--dk-tinta, #0F172A); margin: 0 0 8px;
  }

  /* Servicios: tarjetas en vez de tabla */
  body.torre-movil #srv-table { overflow: visible; }
  body.torre-movil #srv-table table { display: block; width: 100%; white-space: normal; }
  body.torre-movil #srv-table thead { display: none; }
  body.torre-movil #srv-table tbody { display: flex; flex-direction: column; gap: 8px; }
  body.torre-movil #srv-table tbody tr {
    display: grid; grid-template-columns: 66px minmax(0, 1fr) auto;
    grid-template-areas:
      "chk num est"
      "veh emp fecha"
      "veh asig franja"
      "ent ent ent"
      "rec rec rec"
      "ag msj msj";
    gap: 4px 10px; align-items: center;
    background: var(--dk-blanco, #FFFFFF); border: 1px solid var(--dk-linea, #E2E8F0);
    border-radius: 12px; padding: 12px;
  }
  body.torre-movil #srv-table tbody tr td { border: none !important; padding: 0 !important; min-width: 0; background: transparent !important; }
  body.torre-movil #srv-table tbody tr td:nth-child(1)  { grid-area: chk; }
  body.torre-movil #srv-table tbody tr td:nth-child(2)  { grid-area: emp; }
  body.torre-movil #srv-table tbody tr td:nth-child(3)  { grid-area: asig; }
  body.torre-movil #srv-table tbody tr td:nth-child(4)  { grid-area: msj; color: var(--dk-gris, #64748B); }
  body.torre-movil #srv-table tbody tr td:nth-child(5)  { grid-area: veh; align-self: start; justify-self: start; overflow: hidden; }
  body.torre-movil #srv-table tbody tr td:nth-child(5) svg { width: 58px; height: auto; }
  body.torre-movil #srv-table tbody tr td:nth-child(2),
  body.torre-movil #srv-table tbody tr td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.torre-movil #srv-table tbody tr td:nth-child(6)  { grid-area: num; font-size: 15px !important; }
  body.torre-movil #srv-table tbody tr td:nth-child(7)  { grid-area: fecha; text-align: right; }
  body.torre-movil #srv-table tbody tr td:nth-child(8)  { grid-area: rec; color: var(--dk-gris, #64748B); }
  body.torre-movil #srv-table tbody tr td:nth-child(9)  { grid-area: ent; font-weight: 600; }
  body.torre-movil #srv-table tbody tr td:nth-child(10) { grid-area: ag; }
  body.torre-movil #srv-table tbody tr td:nth-child(11) { grid-area: franja; text-align: right; }
  body.torre-movil #srv-table tbody tr td:nth-child(12) { grid-area: est; text-align: right; }
  body.torre-movil #srv-table tbody tr td:nth-child(8)::before { content: 'Recogida: '; font-weight: 600; }
  body.torre-movil #srv-table tbody tr td:nth-child(9)::before { content: 'Entrega: '; color: var(--dk-gris, #64748B); font-weight: 400; }

  /* Tiendas, camiones, jornadas e incidencias a una columna */
  body.torre-movil .tiendas-grid, body.torre-movil .cam-grid, body.torre-movil .camiones-grid,
  body.torre-movil .jornadas-grid, body.torre-movil .inc-grid { grid-template-columns: 1fr !important; }
  body.torre-movil .tiendas-toolbar, body.torre-movil .cam-filtros { flex-wrap: wrap; }

  /* Cajones a pantalla completa, cierre grande y botones abajo */
  .drawer { width: 100vw !important; max-width: 100vw !important; }
  .drawer-head { position: sticky; top: 0; z-index: 2; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .drawer-close { width: 44px !important; height: 44px !important; border-radius: 22px !important; font-size: 18px !important; }
  .drawer-body { padding: 14px !important; }
  .drawer-actions {
    position: sticky; bottom: 0; flex-wrap: wrap;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .drawer-actions .btn, .drawer-actions button { min-height: 44px; flex: 1 1 auto; }
  .drw-actions-wrap { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: 100%; }
  .drw-actions-sep { display: none !important; }
  .drw-actions-group { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; width: 100%; }
  .drw-actions-group > * { width: 100%; min-width: 0; }
  .drw-actions-group .btn { white-space: normal; line-height: 1.2; justify-content: center; text-align: center; }
  .drw-actions-popup { left: 0; right: 0; bottom: calc(100% + 8px); min-width: 0 !important; }
  .tds-rejilla { flex-wrap: wrap; row-gap: 10px; }
  .tds-kpi { flex: 1 1 45%; }

  /* ---------- Ficha del servicio ---------- */
  body.ficha-movil .header-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000; margin: 0;
    display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: var(--dk-blanco, #FFFFFF); border-top: 1px solid var(--dk-linea, #E2E8F0);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
  }
  body.ficha-movil .header-actions .btn { flex-shrink: 0; min-height: 44px; }
  body.ficha-movil { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body.ficha-movil .header { flex-wrap: wrap; gap: 8px; height: auto !important; position: static !important; }
  body.ficha-movil .header-left { flex-wrap: wrap; gap: 6px; }
  body.ficha-movil .summary-strip { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  body.ficha-movil .main-grid, body.ficha-movil .grid, body.ficha-movil .layout,
  body.ficha-movil .cols, body.ficha-movil .content-grid, body.ficha-movil .two-columns {
    display: flex !important; flex-direction: column !important; gap: 12px !important;
  }
  body.ficha-movil .main-grid > *, body.ficha-movil .content-grid > * { width: 100% !important; max-width: 100% !important; }
  body.ficha-movil .main-content { margin-top: 0 !important; padding: 12px !important; grid-template-columns: 1fr !important; }
  /* Recogida y entrega iban en dos columnas fijas: en el móvil, una debajo de otra */
  body.ficha-movil .main-content [style*="grid-template-columns:1fr 1fr"],
  body.ficha-movil .main-content [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ---------- Login: en el móvil no tiene sentido el QR ---------- */
  #bloqueQr { display: none !important; }
  #code2fa { font-size: 26px !important; letter-spacing: 8px; text-align: center; min-height: 56px; font-family: 'Space Mono', monospace; }
}