/* public/css/movil.css
 *
 * Que el sitio se vea bien en un celular. Va DESPUÉS de style.css, que es a
 * quien le pisa un par de reglas.
 *
 * No toca el editor web ni la VT Sync: esas pantallas tienen su propio manejo
 * (views/editor.html) y están pensadas para una hoja de ancho fijo.
 *
 * El problema de fondo que arregla la primera regla: la tabla de trabajos
 * tiene más columnas de las que entran en un celular y va adentro de un
 * .table-responsive, que existe justamente para que scrollee de costado. Pero
 * style.css lo anulaba con `overflow: visible !important` para que no se
 * cortara el menú de "Acciones", que se abre ahí adentro. El efecto colateral
 * era que la tabla se desbordaba de la tarjeta y empujaba la página entera de
 * costado: en el celular la barra de navegación y las tarjetas quedaban más
 * angostas que la pantalla, y la mitad de las columnas fuera de la vista.
 *
 * Ahora la tabla vuelve a scrollear adentro suyo, y el menú de Acciones se
 * resuelve por el otro lado: al abrirse pasa a position:fixed, que ningún
 * contenedor con scroll recorta (public/js/menuFlotante.js).
 */

.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Nada puede ser más ancho que la pantalla. Sin esto, un solo elemento que se
 * pase (una imagen, un pre, una tabla suelta) arrastra la página entera.
 *
 * Ojo con agregarle `height: auto` acá, que es lo que se suele poner al lado:
 * todos los logos del sitio se dimensionan con el atributo height="40" del
 * HTML, que es presentacional y pierde contra cualquier regla de CSS. Con
 * height:auto el logo volvía a su tamaño natural y ocupaba media pantalla.
 * No hace falta: una imagen sin alto declarado ya mantiene la proporción sola
 * cuando max-width le achica el ancho. */
img,
video,
canvas {
  max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Celular
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Aire a los costados más chico: en 390px de ancho, 15px de cada lado se
   * comen casi el 8% de la pantalla. */
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .card-body {
    padding: 12px !important;
  }

  .card-header {
    padding: 12px !important;
  }

  /* Los filtros se apilan solos (son col-md-*), pero sin margen quedaban
   * pegados uno arriba del otro. */
  .card-body .row.mb-3 > [class*="col-"] {
    margin-bottom: 8px;
  }

  /* La X de limpiar filtros quedaba de ancho completo, como si fuera la
   * acción principal de la pantalla. */
  .card-body .row.mb-3 .btn-secondary,
  .card-body .row.mb-3 #limpiarFiltros {
    width: auto !important;
    min-width: 44px;   /* lo que necesita un dedo */
  }

  /* La tabla: letra y celdas más chicas para que entren más columnas antes de
   * tener que scrollear, y sin cortes de palabra en el medio. */
  .table {
    font-size: 13px;
  }

  .table td,
  .table th {
    padding: 8px 6px !important;
    white-space: nowrap;
  }

  /* El scroll de costado tiene que verse, o no se descubre que hay más
   * columnas. En iOS la barra es invisible hasta que se toca. */
  .table-responsive {
    scrollbar-width: thin;
  }

  .table-responsive::-webkit-scrollbar {
    height: 6px;
  }

  .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
  }

  /* Los diálogos ocupaban un ancho fijo y se salían de la pantalla. */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100% - 16px) !important;
  }

  .modal-footer .btn {
    min-width: 0 !important;   /* style.css les pone 120px */
  }

  /* Botones grandes de acción: de ancho completo se tocan mejor y no
   * desbordan. */
  .modal-footer {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* El selector de mes del historial tenía 160px fijos y con las flechas al
   * lado no entraba. */
  #selectorMes,
  .input-group #selectorMes {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    flex: 1 1 auto !important;
  }

  .month-nav {
    flex-wrap: wrap;
  }

  /* Los contadores del historial, uno abajo del otro. */
  .card-deck,
  .card-columns {
    display: block !important;
  }

  .card-deck > .card {
    margin-bottom: 12px !important;
  }
}

/* Pantallas muy angostas (iPhone SE y similares) */
@media (max-width: 400px) {
  .table {
    font-size: 12px;
  }

  .table td,
  .table th {
    padding: 6px 4px !important;
  }

  /* El chip del usuario y el botón de subir archivo, uno abajo del otro y
   * alineados a la izquierda, en vez de el botón colgado a la derecha. */
  .container-fluid > .row.mb-3 > .col-md-9,
  .container-fluid > .row.mb-3 > .col-md-4 {
    justify-content: flex-start !important;
  }
}