/*
 * MÓVIL PRIMERO
 * Quien usa esta plataforma lo hace sobre todo desde el teléfono. Esta hoja va
 * la última y solo actúa en pantallas estrechas: pestañas abajo, al alcance
 * del pulgar, con icono; ventanas que salen desde abajo a todo el ancho;
 * botones y casillas de al menos 44 px; y letra de 16 px en los campos, que
 * con menos el iPhone hace zoom al tocarlos y descoloca la pantalla.
 */

/* En el ordenador, las pestañas siguen siendo solo texto. */
.tab-ico { display: none; }

@media (max-width: 760px) {
  /* --- Cabecera más baja: el sitio es para el contenido --- */
  .topbar, #app > .topbar { height: 48px; min-height: 48px; padding: .4rem .8rem; padding-top: max(.4rem, env(safe-area-inset-top)); }
  .brand-sub { display: none; }
  #btn-logout { display: none; } /* «Salir» sigue en el menú de tu cuenta */

  /* --- Pestañas abajo, fijas, con icono --- */
  #app > .tabs {
    order: 3; position: static; top: auto;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: 0; padding: 0 0 env(safe-area-inset-bottom); overflow: visible;
    border-top: 1px solid var(--border); border-bottom: none; box-shadow: 0 -1px 6px rgba(17, 24, 39, .06);
  }
  #app > main { order: 2; padding: .7rem .7rem 1rem; }
  .tabs button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    min-height: 56px; padding: .35rem 0 .3rem; font-size: .66rem; font-weight: 500;
    border-bottom: none; border-top: 3px solid transparent; color: var(--muted);
  }
  .tabs button[hidden] { display: none !important; }
  .tabs button.active { border-top-color: var(--accent); border-bottom-color: transparent; color: var(--accent); font-weight: 600; }
  .tab-ico { display: block; width: 1.35rem; height: 1.35rem; }
  .tabs button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* --- Tocar con el dedo --- */
  button, .chip, select { min-height: 40px; }
  button.sm, .tabs button { min-height: 0; }
  input, select, textarea { font-size: 16px; }
  input[type=checkbox], input[type=radio] { width: 1.25rem; height: 1.25rem; }

  /* --- Cabeceras de cada pestaña: título arriba, buscador a todo el ancho --- */
  .toolbar { gap: .45rem; }
  .toolbar h2 { font-size: 1.2rem; }
  .toolbar input[type=search], .toolbar input:not([type]) { min-width: 0; flex: 1 1 100%; order: 5; }
  .toolbar select { min-width: 0; }

  /* --- Ficha del cliente y del pedido: pantalla completa --- */
  .drawer-panel, .drawer-panel.ficha { width: 100%; max-width: 100%; border-radius: 0; border-left: none; padding-top: max(.8rem, env(safe-area-inset-top)); }
  .drawer-close { width: 44px; height: 44px; }

  /* --- Ventanitas: hoja que sale desde abajo, a todo el ancho ---
     app.js las coloca con left/top junto al botón; aquí se anula para que
     en el teléfono no se salgan de la pantalla ni queden bajo el teclado. */
  .pop {
    left: 0 !important; right: 0; top: auto !important; bottom: 0;
    width: 100%; max-width: 100%; max-height: 85dvh; overflow-y: auto;
    border-radius: 14px 14px 0 0; padding: .6rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }
  dialog, dialog.pe-dialog, dialog.co-dialog, dialog.rec-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0; }

  /* --- Tablero del CRM: una columna por pantalla, que encaja al deslizar --- */
  #tab-pipeline .kanban { scroll-snap-type: x mandatory; margin: 0 -.7rem; padding-left: .7rem; padding-right: .7rem; }
  #tab-pipeline .kanban .col { flex-basis: 86vw; scroll-snap-align: center; }

  /* --- Panel y Ventas --- */
  .pv-bloque { padding: .8rem; }
  .co-toolbar .co-periodo { order: 4; flex: 1 1 100%; display: flex; justify-content: center; }
  .co-filtros { display: grid; grid-template-columns: 1fr; gap: .45rem; }
  .co-tabla { font-size: .85rem; }
  .co-tabla th, .co-tabla td { padding: .5rem .4rem; }
  .co-tabla th:first-child, .co-tabla td:first-child { white-space: nowrap; }

  /* --- Avisos por encima de la barra de abajo --- */
  .toast { bottom: calc(68px + env(safe-area-inset-bottom)); }
}