/* ===========================================================================
   Telefono — la mayor parte de la gente entra desde el celular.

   El diseño original es de escritorio: margenes de 44px, tablas de siete
   columnas y titulares de 88px. Esta hoja lo adapta sin cambiar la identidad:
   mismos colores, misma tipografia, mismas jerarquias, otro acomodo.

   Se apoya en clases puestas por el build (.lfe-pantalla, .lfe-aire,
   .lfe-tabla) y no en fragmentos de style="", asi un retoque en el diseño no
   rompe el responsive.
   =========================================================================== */

/* Etiquetas que cambian de largo segun el ancho: por defecto manda la larga */
.lfe-texto-corto { display: none; }

@media (max-width: 700px) {

  /* --- 1. Margenes -------------------------------------------------------
     44px de cada lado dejaban 287px utiles de 375. Con 20px pasan a 335. */
  .lfe-pantalla {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- 2. Aire vertical --------------------------------------------------
     La landing medía casi 7.000px de alto: dieciocho pantallas de scroll. */
  .lfe-aire { padding-top: 44px !important; }
  .lfe-aire-abajo { padding-bottom: 48px !important; }

  /* --- 3. Tablas convertidas en fichas -----------------------------------
     El historial medía 874px de ancho. Deslizar una tabla de lado en un
     telefono es la peor forma de leer datos: cada fila pasa a ser una ficha
     con el ID arriba y los datos rotulados debajo. */
  .lfe-tabla thead { display: none; }
  .lfe-tabla,
  .lfe-tabla tbody,
  .lfe-tabla tr,
  .lfe-tabla td { display: block; width: auto; }

  /* Dos columnas: un dato por linea daba fichas de 346px y ocho envios se
     volvian 3.700px de scroll. Asi cada ficha entra casi entera en pantalla. */
  .lfe-tabla tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    border-bottom: 2px solid var(--color-divider);
    padding: 18px 0;
  }
  .lfe-tabla tr:last-child { border-bottom: 0; }

  .lfe-tabla td {
    display: block;
    text-align: left;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0;
    order: 3;              /* los datos sueltos, despues de la identificacion */
  }
  .lfe-tabla td::before {
    content: attr(data-etiqueta);
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
  }

  /* Lo que identifica a la ficha ocupa la linea completa y va primero. Sin el
     `order`, una celda ancha en el medio partia la grilla y dejaba huecos. */
  .lfe-tabla td[data-etiqueta="Destinatario"],
  .lfe-tabla td[data-etiqueta="Comercio"],
  .lfe-tabla td[data-etiqueta="Rol asignado"],
  .lfe-tabla td[data-etiqueta="Prestación"] { grid-column: 1 / -1; order: 2; }

  /* Las celdas de acciones (Personal de Operacion) traen hasta cuatro botones:
     en media columna quedaban apilados en 214px y desbordados. Van al ancho
     completo y al final de la ficha. */
  .lfe-tabla td[data-etiqueta="Acceso"] { grid-column: 1 / -1; order: 4; }
  .lfe-tabla td[data-etiqueta="Acceso"] > div { flex-wrap: wrap; gap: 8px; }
  .lfe-tabla td[data-etiqueta="Acceso"] .btn { flex: 1 1 auto; justify-content: center; }

  /* la primera celda encabeza la ficha: sin rotulo, en grande y a lo ancho */
  .lfe-tabla td:first-child {
    grid-column: 1 / -1;
    order: 1;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
    line-height: 1.15;
  }
  .lfe-tabla td:first-child::before { display: none; }

  /* ya no hace falta el desplazamiento lateral que envolvia a la tabla */
  #app div[style*="overflow-x:auto"] { overflow-x: visible !important; }

  /* --- 4. Objetivos tactiles ---------------------------------------------
     "Cerrar sesion" media 93x32 y el ID del historial 81x35. El minimo
     comodo con el pulgar es 44px de alto. */
  #app button,
  #app .btn,
  #app a.btn { min-height: 44px; }

  /* los botones que son texto subrayado no deben verse como cajas */
  #app button[style*="border:0"] { display: inline-flex; align-items: center; }

  /* --- 5. Controles segmentados ------------------------------------------
     Cuatro opciones de filtro no entran en una linea de 335px. */
  #app .seg { flex-wrap: wrap; }
  #app .seg-opt { flex: 1 1 auto; justify-content: center; }

  /* --- 6. Numeros grandes -------------------------------------------------
     Cifras pensadas para escritorio: el saldo del panel del comercio esta a
     132px y "520.000" ocupaba 511px de ancho en una pantalla de 375. Los
     titulares (h1/h2/h3) se escalan en ajustes.css; esto es para los numeros,
     que van en <div> con el tamaño puesto a mano. */
  #app div[style*="font-size:132px"] { font-size: clamp(44px, 17vw, 132px) !important; }
  #app div[style*="font-size:72px"] { font-size: clamp(38px, 12vw, 72px) !important; }
  #app div[style*="font-size:64px"] { font-size: 44px !important; }
  #app div[style*="font-size:56px"] { font-size: 40px !important; }
  #app div[style*="font-size:48px"] { font-size: 36px !important; }
  #app div[style*="font-size:44px"] { font-size: 34px !important; }
  #app div[style*="font-size:38px"],
  #app div[style*="font-size:36px"] { font-size: 30px !important; }

  /* --- 6b. Tiras de indicadores y de nodos --------------------------------
     Los cuatro numeros del resumen de administracion se apilaban de a uno y
     ocupaban 760px: el administrador abria la pantalla y no veia ninguno
     entero. De a dos por fila entran los cuatro casi de una. */
  .lfe-bloques > div {
    flex: 1 1 45% !important;
    min-width: 0;
    padding: 18px 14px 18px 0 !important;
    border-left: 0 !important;
  }
  .lfe-bloques > div:nth-child(even) {
    padding-left: 14px !important;
    border-left: 2px solid var(--color-divider) !important;
  }
  /* En media columna (153px utiles) un importe de 44px se cortaba: "725.000"
     pedia 172px. El #app es necesario para ganarle a la regla general de
     numeros grandes de mas arriba, que lleva ese id. */
  #app .lfe-bloques div[style*="font-size:64px"],
  #app .lfe-bloques div[style*="font-size:48px"] { font-size: 30px !important; }
  /* y los nombres de nodo ("Encarnación") tampoco entraban a 22px */
  #app .lfe-bloques div[style*="font-size:26px"],
  #app .lfe-bloques div[style*="font-size:22px"] { font-size: 18px !important; }

  /* --- 7. Botones a lo ancho ---------------------------------------------
     Con el pulgar, un boton de accion principal se toca mejor si ocupa la
     linea completa que si queda perdido a la izquierda. */
  #app .btn-primary,
  #app a.btn[href^="https://wa.me"] {
    width: 100%;
    justify-content: center !important;
  }

  /* --- 8. Seguimiento: es la pantalla que mas se abre desde el celular ---- */
  #app div[style*="grid-template-columns:24px 1fr"] { gap: 16px !important; }

  /* --- 9. Acciones del encabezado -----------------------------------------
     El buscador y el alta de comercio quedan uno debajo del otro, cada uno
     ocupando la linea completa: son los dos primeros gestos del que llega. */
  .lfe-hero-acciones { gap: 24px !important; }
  .lfe-hero-acciones > div { flex: 1 1 100% !important; max-width: none !important; }
  .lfe-hero-acciones .btn { width: 100%; justify-content: center !important; }
  .lfe-hero-buscar .btn { width: auto; }

  /* --- 10. Tareas de Operacion --------------------------------------------
     Es la pantalla que se usa parado en la calle, con el paquete en la mano:
     el primer boton de marcar tiene que estar a la vista al abrir. */
  #app h1 { margin-bottom: 14px !important; }
  .lfe-bajada { font-size: 17px !important; margin-bottom: 22px !important; }
  .lfe-tarea { padding-top: 18px !important; }
  .lfe-tarea-acciones { margin-top: 16px !important; }

  /* --- 11. Comparativa de niveles -----------------------------------------
     Tres precios enfrentados se leen mejor en tres columnas que en dos. */
  .lfe-tabla tr:has(td[data-etiqueta^="Standard"]),
  .lfe-tabla tr:has(td[data-etiqueta="Std"]) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Cabecera fija en telefono
   Con el logo, el buscador, preguntas frecuentes y Acceder, cada uno caia en
   su propia fila: 180px de cabecera pegada en una pantalla de 640px. Queda el
   logo y Acceder en una sola linea (~64px). Las preguntas frecuentes siguen a
   un toque desde el encabezado de la portada y desde el pie.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  #app div[style*="position:sticky"] .lfe-nav-faq { display: none; }
  #app .lfe-logo { font-size: 15px !important; letter-spacing: 0.02em !important; }
  #app div[style*="position:sticky"] > div { gap: 10px 12px !important; padding: 8px 16px !important; }
  /* el boton de acceso, mas angosto: asi marca y acceso entran en una linea */
  #app div[style*="position:sticky"] .btn { padding-left: 14px !important; padding-right: 14px !important; }
  #app div[style*="position:sticky"] svg { width: 17px; height: 17px; }
  #app div[style*="position:sticky"] span[style*="width:34px"] { width: 28px !important; height: 28px !important; }

  /* el encabezado de la portada, mas compacto para que las acciones suban */
  .lfe-hero-acciones { margin-top: 4px; }
  #app div[style*="background:var(--lf-hero-regla)"] { margin: 24px 0 24px !important; }

  /* --- Cabecera con sesion iniciada -------------------------------------
     Logo, nombre, rol, cerrar sesion y cuatro pestañas ocupaban 326px antes
     de que empezara la pantalla. Las pestañas pasan a una sola fila que se
     desliza con el dedo y el bloque de usuario deja de partirse. */
  .lfe-pestanas {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 22px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lfe-pestanas::-webkit-scrollbar { display: none; }
  .lfe-pestanas > button {
    white-space: nowrap;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .lfe-sesion {
    padding-left: 0 !important;
    border-left: 0 !important;
    gap: 12px !important;
    margin-left: auto;
  }
  .lfe-sesion-rol { display: none; }        /* las pestañas ya dicen donde esta */

  /* El nombre de la cuenta partia la banda en tres filas. Cada pantalla ya lo
     dice en su titulo ("Panel del comercio · Distribuidora San Isidro",
     "Operacion Asuncion"), asi que en telefono queda solo Cerrar sesion. */
  .lfe-sesion > div:first-child { display: none; }

  /* "Cerrar sesion" no entraba en la misma linea que la marca */
  .lfe-texto-largo { display: none; }
  .lfe-texto-corto { display: inline; }
}

/* Pantallas muy angostas (iPhone SE y similares, 320px) */
@media (max-width: 360px) {
  .lfe-pantalla {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .lfe-tabla td { gap: 12px; }
  .lfe-tabla td::before { font-size: 11px; }
}