/* Studio GO en el celular (PWA). Corte celular/escritorio: md de Bootstrap (768 px).
   Se carga en todas las páginas vía pwa_head.html. Nada cambia en escritorio. */

/* Botón «Atrás»: solo en la app instalada, que no tiene la barra del navegador.
   !important porque Bootstrap (.btn) se carga después y fija display. */
.btn-atras-app {
  display: none !important;
}

@media (display-mode: standalone) {
  .btn-atras-app {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 767.98px) {
  /* iOS hace zoom al enfocar un campo con letra menor a 16 px. Se fuerza con
     !important porque hay ~440 tamaños chicos (-sm y font-size propios). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px !important;
  }

  /* Menú: objetivos táctiles de al menos 44 px. */
  .navbar-nav .nav-link,
  .navbar-nav .dropdown-item {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .navbar-collapse .navbar-nav {
    margin-top: 0.5rem;
  }
}

/* Hoja inferior (movil.js): «Ver fila» y «Archivo listo». */
.movil-hoja {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.movil-hoja__fondo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.movil-hoja__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  background: var(--bs-body-bg, #fff);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.2);
  padding-bottom: env(safe-area-inset-bottom);
}

.movil-hoja__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 0.5rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.movil-hoja__cabecera .btn-close {
  padding: 0.75rem;
}

.movil-hoja__cuerpo {
  overflow-y: auto;
  padding: 1rem;
}

body.movil-hoja-abierta {
  overflow: hidden;
}

.movil-fila {
  margin: 0;
}

.movil-fila dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
}

.movil-fila dd {
  margin-bottom: 0.75rem;
  word-break: break-word;
}

.movil-pista {
  display: none;
}

@media (max-width: 767.98px) {
  /* .row sueltas en el body (franjas de título): sin .container, su margen negativo desbordaba. */
  body > .row {
    margin-left: 0;
    margin-right: 0;
  }

  /* Tablas de listados: primera columna fija mientras se desplaza a los lados.
     data-movil-fija: solo la columna fija (la fila ya abre algo al tocarla). */
  table[data-movil-filas] > thead > tr > :first-child,
  table[data-movil-filas] > tbody > tr > :first-child,
  table[data-movil-fija] > thead > tr > :first-child,
  table[data-movil-fija] > tbody > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  table[data-movil-filas] > tbody > tr > :first-child,
  table[data-movil-fija] > tbody > tr > :first-child {
    background-color: var(--bs-body-bg, #fff);
    box-shadow: 1px 0 0 var(--bs-border-color, #dee2e6);
  }

  /* El encabezado suele traer background: transparent en línea; movil.js copia el color del <tr>. */
  table[data-movil-filas] > thead > tr > :first-child,
  table[data-movil-fija] > thead > tr > :first-child {
    background-color: var(--movil-fondo-fija, var(--bs-body-bg, #fff)) !important;
  }

  table[data-movil-filas] > tbody > tr {
    cursor: pointer;
  }

  .movil-pista {
    display: block;
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #6c757d);
  }

  /* Ventanas emergentes de Bootstrap a pantalla completa (como modal-fullscreen, pero bajo 768 px).
     Selectores con body: Bootstrap se vuelve a cargar después (barra.html) y ganaría el empate. */
  body .modal {
    --bs-modal-margin: 0;
  }

  body .modal .modal-dialog {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  body .modal .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  body .modal .modal-body {
    overflow-y: auto;
  }

  /* Cabecera: título y cerrar en la primera línea; lo demás (p. ej. N° de factura
     de la papeleta) abajo a lo ancho. Si no, el botón cerrar quedaba fuera de pantalla. */
  body .modal .modal-header {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  body .modal .modal-header > .modal-title {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
  }

  body .modal .modal-header > .btn-close {
    order: 2;
    flex-shrink: 0;
  }

  body .modal .modal-header > :not(.modal-title):not(.btn-close) {
    order: 3;
    flex-basis: 100%;
    margin-right: 0 !important;
  }
}

/* ---------- Documentos: ODV y cotización (P4) ----------
   Las plantillas fijan anchos en línea (27 %, 58 %, 189 px…) pensados para escritorio.
   Bajo 768 px: un campo por línea, etiqueta al 32 %, control al resto y el «+» al lado.
   Las columnas se reconocen por su contenido con :has() (iOS 15.4+, Chrome 105+). */
@media (max-width: 767.98px) {
  /* Ventanas de contacto/direcciones traen width: 200 % y transform en línea. */
  body .modal .modal-content {
    width: 100% !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
  }

  .doc-movil .row.doc-cabecera {
    row-gap: 0.25rem;
    padding-bottom: 0.5rem;
  }

  .doc-movil .row.doc-cabecera > [class*="col"] {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
  }

  .doc-movil .row.doc-cabecera {
    height: auto !important;
  }

  .doc-movil .row.doc-cabecera p {
    margin-bottom: 0;
  }

  /* «Código»: el placeholder del cupón ya lo dice. */
  .doc-movil .row.doc-cabecera > [class*="col"]:has(> label.col-form-label) {
    display: none;
  }

  .doc-movil .row.doc-cabecera > [class*="col"]:has(> .input-group) {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding-top: 0 !important;
  }

  .doc-movil .row.doc-cabecera .input-group {
    max-width: none !important;
  }

  .doc-movil .row {
    row-gap: 0.5rem;
  }

  .doc-movil .row > [class*="col"] {
    flex: 1 1 50% !important;
    width: auto !important;
    min-width: 0;
  }

  .doc-movil .row > [class*="col"]:has(> label.col-form-label) {
    flex: 0 0 32% !important;
    width: 32% !important;
    text-align: left !important;
    white-space: normal;
  }

  /* Columnas sin nada visible (espaciadoras vacías, o solo con elementos hidden como la lupa
     de cliente): con flex 50 % empujaban el resto. Si el JS quita el hidden, :has() la muestra. */
  .doc-movil .row > [class*="col"]:not(:has(> :not([hidden]))) {
    display: none !important;
  }

  /* Botón «+» que abre un modal: a la derecha del control, sin estirarse. */
  .doc-movil .row > [class*="col"]:has(> div > button[data-bs-toggle="modal"]) {
    flex: 0 0 auto !important;
    padding-left: 0.25rem !important;
  }

  .doc-movil .row > [class*="col"]:has(> div > button[data-bs-toggle="modal"]) .btn {
    min-width: 44px;
    min-height: 38px;
  }

  /* Bloques que contienen filas (cliente/contacto, totales) y Boleta/Factura: ancho completo. */
  .doc-movil .row > [class*="col"]:has(> .row),
  .doc-movil .row > [class*="col"]:has(> .form-check) {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  .doc-movil .row > [class*="col"]:has(> .form-check) {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 0.25rem;
  }

  .doc-movil .row > [class*="col"]:has(> .row) > .row {
    margin-bottom: 0.5rem;
  }
}

/* Líneas de producto (#productos) como tarjetas. Cada producto son 3 <tr> sin clases:
   principal (7 celdas: código, bodega, precio, dcto, precio dcto, cant, total),
   comentario + eliminar, y nombre + tipo de entrega + fecha. Solo cambia la
   presentación: el DOM queda igual para el JS que arma y lee las celdas. */
@media (max-width: 767.98px) {
  .doc-movil #productos,
  .doc-movil #productos > tbody,
  .doc-movil #productos > tbody > tr,
  .doc-movil #productos > tbody > tr > td {
    display: block;
    width: auto !important;
  }

  .doc-movil #productos > thead {
    display: none;
  }

  .doc-movil .table-responsive:has(> #productos) {
    overflow-x: visible;
  }

  .doc-movil #productos > tbody > tr > td {
    border: 0 !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* .row de Bootstrap dentro de las celdas: sus márgenes negativos sobresalían de la pantalla. */
  .doc-movil #productos > tbody > tr > td .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* Eliminar / interruptor de devolución van dentro de un a.navbar-brand (margin-right: 1rem;
     en devoluciones trae además width: 18px en línea y el interruptor mide 30 px). */
  .doc-movil #productos > tbody > tr > td > a.navbar-brand {
    margin-right: 0;
    width: auto !important;
  }

  /* Fila principal: grilla de dos columnas. */
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 2px solid #caaa74;
  }

  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(1),
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(2),
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(7) {
    grid-column: 1 / -1;
  }

  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(7) {
    text-align: right !important;
    font-size: 1rem !important;
  }

  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(n+2)::before {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    text-align: left;
  }

  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(2)::before { content: "Bodega"; }
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(3)::before { content: "Precio"; }
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(4)::before { content: "Dcto"; }
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(5)::before { content: "Precio dcto"; }
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(6)::before { content: "Cantidad"; }
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(7)::before { content: "Total"; }

  /* Comentario + eliminar en una línea; nombre, tipo de entrega y fecha apilados. */
  .doc-movil #productos > tbody > tr:not(:has(> td:nth-child(7))) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
  }

  .doc-movil #productos > tbody > tr:not(:has(> td:nth-child(7))) > td {
    flex: 1 1 45%;
    padding-left: 0.5rem !important;
  }

  /* Fila de 3 celdas: el nombre del producto a lo ancho. */
  .doc-movil #productos > tbody > tr:has(> td:nth-child(3)):not(:has(> td:nth-child(7))) > td:first-child {
    flex-basis: 100%;
  }

  /* Fila de 2 celdas: el comentario ocupa lo que deja «eliminar». */
  .doc-movil #productos > tbody > tr:not(:has(> td:nth-child(3))) > td:first-child {
    flex: 1 1 0;
  }

  .doc-movil #productos > tbody > tr:not(:has(> td:nth-child(7))) > td:has(> a) {
    flex: 0 0 auto;
  }
}

/* Burbuja de Lucio (fija abajo a la derecha): en el celular tapaba «Guardar» al final
   del documento. Se deja espacio al pie para poder desplazar el contenido sobre ella. */
@media (max-width: 767.98px) {
  body:has(#lucioOffcanvas) {
    padding-bottom: 88px;
  }
}

/* Ajuste fino de la tarjeta de línea (P6b). Las celdas traen .row y columnas de Bootstrap
   que la regla genérica de formularios (.doc-movil .row > col a 50 %) también tomaba:
   el stock quedaba al lado de la bodega y el código lejos de su imagen. */
@media (max-width: 767.98px) {
  .doc-movil #productos > tbody > tr > td .row > [class*="col"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Código a la izquierda e imagen chica a la derecha, en la misma línea. */
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(1) > .row {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }

  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(1) > .row > [class*="col"] {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  /* En la ODV la columna de la imagen viene envuelta en un <small>: se toma cualquier hijo con imagen. */
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(1) > .row > :has(img) {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto;
  }

  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(1) img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain;
  }

  /* Bodega a lo ancho; stock y tránsito debajo, en texto chico. */
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(2) small {
    font-size: 0.8rem !important;
  }

  /* Valores alineados a la izquierda bajo su etiqueta (algunos venían centrados). */
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(n+3):nth-child(-n+6) {
    text-align: left !important;
  }

  /* Campos de la línea (descuento, cantidad, comentario) con ancho usable;
     traían width: 60/80 px en línea. */
  .doc-movil #productos > tbody > tr > td input.form-control {
    width: 100% !important;
  }

  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td input.form-control {
    max-width: 10rem;
  }

  /* Fila comentario + eliminar: el basurero se ajusta a su contenido y el comentario
     toma el resto (en la cotización el enlace viene envuelto y td:has(> a) no lo veía). */
  .doc-movil #productos > tbody > tr:has(> td:nth-child(2)):not(:has(> td:nth-child(3))) > td:last-child {
    flex: 0 0 auto !important;
    padding-left: 0.25rem !important;
  }

  /* Total: etiqueta y monto en la misma línea. */
  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(7) {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--bs-border-color, #dee2e6) !important;
    padding-top: 0.5rem !important;
    margin-top: 0.25rem;
  }

  .doc-movil #productos > tbody > tr:has(> td:nth-child(7)) > td:nth-child(7)::before {
    display: inline !important;
    font-size: 0.85rem !important;
  }
}