/* movil.css — la capa de teléfono, compartida por todas las pantallas.
 *
 * Se incluye en cada HTML junto a los otros drop-ins:
 *     <link rel="stylesheet" href="/movil.css">
 *
 * No rediseña nada: corrige lo que en una pantalla de 390px rompe. Las tres
 * cosas que aparecieron al medir las quince pantallas con un teléfono real
 * (390x844) fueron siempre las mismas:
 *
 *   1. Filas de botones que no envuelven —pestañas, barras de herramientas,
 *      segmentados— y empujan la página de ancho. Cuando la página se va de
 *      ancho todo se corre: aparece scroll horizontal, los títulos quedan
 *      cortados y el pulgar mueve la pantalla de costado sin querer.
 *   2. Tooltips de los gráficos, que viven del hover —que en un teléfono no
 *      existe— y encima estiran la página porque salen por la derecha.
 *   3. Botones de 30px que el dedo no acierta.
 *
 * Todo va dentro de la media query: en la computadora no cambia un pixel.
 */
@media (max-width: 640px) {

  /* ── 1. Nada empuja la página de ancho ──────────────────────────────── */
  .sub-tabs, .tabs-row, .topbar, .toolbar, .chips, .filtros,
  .kpi-row, .btn-row, [class*="tabs-"], [class*="-tabs"] {
    flex-wrap: wrap !important;
  }

  /* La barra de pestañas grande es otra cosa: envolver once pestañas se come
     cuatro renglones de pantalla antes de que empiece el contenido. Se deja en
     una sola linea que corre de costado, como las de una app. */
  .tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    /* Sin esto la barra no se achica al ancho de la pantalla —un hijo flex no
       baja de su contenido salvo que se le diga— y las pestañas del final
       quedaban cortadas, sin forma de llegar a ellas. */
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: 0 0 auto; }

  /* ── Listados como fichas ───────────────────────────────────────────────
     Una tabla de doce columnas en 390px se lee de costado o no se lee. Las
     que estan marcadas con .fichas se apilan: cada fila pasa a ser una ficha
     con la etiqueta de cada dato al lado, que es como se leen las listas en
     un telefono. La etiqueta sale del data-l de cada celda. */
  table.fichas thead { display: none; }
  table.fichas, table.fichas tbody { display: block; width: 100%; }
  table.fichas tr {
    display: block; padding: 9px 11px; margin-bottom: 8px;
    border: 1px solid var(--line, #2c2c32); border-radius: 8px;
    background: var(--surface, transparent);
  }
  table.fichas td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    border: none !important; padding: 3px 0 !important; text-align: right !important;
    font-size: 13px !important;
  }
  table.fichas td::before {
    content: attr(data-l);
    flex: 0 0 auto; text-align: left;
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-soft, #9b9690); font-weight: 700;
  }
  /* La primera celda es el titulo de la ficha: sin etiqueta y a lo ancho. */
  table.fichas td:first-child { justify-content: flex-start; font-size: 14px !important; padding-bottom: 6px !important; }
  table.fichas td:first-child::before { content: none; }
  table.fichas td.vacia, table.fichas td.oculto-movil { display: none; }
  /* Un dato que en la ficha va en el titulo y en la tabla ya tiene su columna. */
  .solo-movil { display: inline; }
  table.fichas .empty { display: block; text-align: center; }

  /* Los segmentados sin clase (van con estilo inline) se reconocen por lo que
     son: una fila de botones con borde. */
  [style*="display:flex"][style*="border:1px solid"] { flex-wrap: wrap; }

  /* ── 2. Lo que solo sirve con mouse ─────────────────────────────────── */
  .bar-tip { display: none !important; }

  /* ── 3. El dedo necesita lugar ──────────────────────────────────────── */
  button, .btn, a.btn, .tab, .sub-tab, .tab-btn, select,
  input[type="date"], input[type="search"], input[type="text"], input[type="password"] {
    min-height: 40px;
  }
  /* Los de adentro de una tabla no: ahí 40px por fila estira la grilla a lo
     largo de tres pantallas y se pierde más de lo que se gana. */
  table button, table .btn, table select { min-height: 32px; }

  /* ── 4. Texto legible ───────────────────────────────────────────────── */
  /* iOS agranda solo el texto al girar el teléfono; queda desparejo. */
  html { -webkit-text-size-adjust: 100%; }
  /* Las grillas se escriben chiquitas para que entren muchas columnas; en el
     teléfono ya scrollean de costado, así que no hace falta apretarlas. */
  table.data td, table.data th, table.detail td, table.detail th { font-size: 12.5px; }

  /* ── 5. Los gráficos de barras ──────────────────────────────────────── */
  /* El eje de la izquierda reserva 90px y entre barras hay 5: en una pantalla
     de 390 eso es un tercio del ancho, y con veinte meses las etiquetas
     verticales ya no entran y estiran la página. */
  /* Con veinte y pico de meses no hay forma de que entren: apretarlas mas solo
     las vuelve ilegibles. Se deja que el grafico scrollee de costado y cada
     barra conserve un ancho que se pueda tocar. */
  .bars-wrap { padding-left: 46px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bars-ylines { left: 46px !important; }
  .bars, .bars-cmp, .bars-xlabels { gap: 2px !important; min-width: max-content; }
  .bar-col, .bar-col-cmp, .bars-xlabels .xl { min-width: 22px; }
  .yline { font-size: 9px; }

  /* ── 6. La cabecera flotante ────────────────────────────────────────── */
  /* El "← Inicio" y el chip del usuario van fijos arriba a cada costado. En una
     pantalla ancha sobra lugar; en 390px se le sientan encima al título. En vez
     de empujar el contenido hacia abajo dejan de flotar: entran en la fila de
     arriba, que es donde uno los busca igual. En las pantallas donde ya venían
     en el flujo, esto no cambia nada. */
  .back-link, #userChip {
    position: static !important;
    display: inline-flex !important;
    margin: 0 8px 10px 0;
  }

  /* ── 7. Ventanas ────────────────────────────────────────────────────── */
  /* Un modal pensado para 900px, en 390 tiene que ocupar lo que hay. */
  .modal, .modal-bg .modal { max-width: 100% !important; }
  .modal-bg { padding: 10px !important; }

  /* La cabecera: el número del comprobante se partía en tres renglones porque
     los botones le comían el ancho. Van abajo, en su propia fila. */
  .modal-head { flex-wrap: wrap; gap: 10px; padding: 14px 16px !important; }
  .modal-title { font-size: 16px !important; white-space: nowrap; }
  .modal-head > div:last-child { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .modal-body { padding: 14px 16px 20px !important; overflow-x: hidden; }

  /* Cabecera del comprobante: etiqueta y valor en la misma línea, como en las
     fichas del listado. En columna eran cuarenta renglones de scroll. */
  .kv-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .kv {
    flex-direction: row !important; align-items: baseline;
    justify-content: space-between; gap: 14px;
    padding: 5px 0; border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.06));
  }
  .kv-l { margin-bottom: 0 !important; flex: 0 0 auto; }
  .kv-v { text-align: right; }

  /* Las tablas de adentro (items, impuestos, pagos) scrollean ellas, no la
     ventana entera: si scrollea la ventana se descuadra todo lo demás. */
  .modal-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Fuera del teléfono, lo que era solo para el teléfono no existe. */
@media (min-width: 641px) { .solo-movil { display: none !important; } }