/* ============================================================================
   movil.css  -  La barra de abajo cuando el panel se ve en el movil
   ----------------------------------------------------------------------------
   El problema: la barra inferior reparte TODAS las secciones a partes iguales
   (.nav-item lleva flex:1 en style.css:1391). Con seis cabian; con nueve cada
   hueco se queda en 43 px y las etiquetas se comen unas a otras: "ashboar",
   "Vhatsap", "roducto", "tadistic".

   La solucion es la de cualquier aplicacion de movil: cuatro secciones fijas
   mas un boton "Mas" que abre una hoja desde abajo con el resto. Quien decide
   cuales van fuera es js/movil.js, que marca data-fuera="1" en el <li>.

   Nada de esto existe por encima de 768 px: ahi sigue la barra lateral entera.
   ========================================================================== */

/* El doble toque para ampliar sobra en un panel: no hay nada que ampliar y
   lo unico que consigue es dejar la pantalla torcida. 'manipulation' lo quita
   y deja intactos el desplazamiento y el pellizco. El text-size-adjust es
   para que Android no infle por su cuenta el texto de los parrafos largos,
   que es justo lo que pasa en la conversacion de Gema. */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ----------------------------------------------------------------------------
   OJO: esta regla NO es solo de movil, tambien cambia el ordenador.
   .bubble p no declara white-space, asi que vale 'normal' y el navegador se
   come los saltos de linea. Una plantilla de Gema son 115 lineas, una por
   producto, y en el panel se ven como un parrafo corrido. Con pre-wrap se
   vuelven a ver como ella las escribio. Si no gusta, se borran estas dos
   lineas y vuelve a quedar como estaba.
   -------------------------------------------------------------------------- */
.bubble p { white-space: pre-wrap; }

/* El boton "Mas" solo tiene sentido en la barra inferior */
#nav-mas { display: none; }

.hoja-fondo,
.hoja-mas { display: none; }

@media (max-width: 768px) {

  /* ------------------------------------------------------ 1. Barra inferior */

  /* Las secciones que no caben. Se ocultan con display para que no cuenten
     en el reparto de flex; visibility las dejaria ocupando su hueco. */
  .nav-items .nav-item[data-fuera="1"] { display: none !important; }

  /* Antes de que js/movil.js haya repartido nada.
     app.js abre las secciones en cuanto Clerk resuelve la sesion, y eso puede
     pasar ANTES de que el navegador termine de bajar movil.js, que va al final
     del body. Resultado: un fotograma con las nueve pestanas apretadas.

     Asi que las cuatro que de todas formas van a acabar en la hoja se
     esconden ya desde el CSS. Ajustes NO entra en la lista a proposito: si
     algun dia movil.js no cargara, la barra se queda con cinco secciones
     utiles en vez de dejar al cliente sin forma de llegar a Ajustes. */
  .nav-items:not([data-repartido]) #nav-productos,
  .nav-items:not([data-repartido]) #nav-consumo,
  .nav-items:not([data-repartido]) #nav-cuentas,
  .nav-items:not([data-repartido]) #nav-estadisticas { display: none !important; }

  #nav-mas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 6px 4px;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--text-muted);
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #nav-mas .nav-icon { width: 20px; height: 20px; }
  #nav-mas .nav-icon svg { width: 20px; height: 20px; }

  /* Cuando la seccion abierta es una de las que viven en la hoja, el boton
     se queda marcado: si no, en Estadisticas no habria nada iluminado. */
  #nav-mas.active,
  #nav-mas[aria-expanded="true"] {
    color: var(--marca, #0F5132);
    background: color-mix(in oklab, var(--marca, #0F5132) 11%, transparent);
  }

  /* Cuatro secciones mas el boton: 78 px por hueco en un movil de 390 px.
     El padding de 16 px por lado de style.css:1391 se comia la etiqueta. */
  .nav-items { padding: 4px 6px; gap: 2px; }
  .nav-item  { padding: 6px 4px; min-width: 0; }
  .nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* El badge de WhatsApp se posicionaba contando con huecos anchos */
  .nav-badge { right: calc(50% - 20px); }

  /* ----------------------------------------------------------- 2. La hoja */

  .hoja-fondo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(8, 24, 16, .42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .hoja-fondo.abierta { opacity: 1; pointer-events: auto; }

  .hoja-mas {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 901;
    max-height: 84vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    border-top: 1px solid var(--vidrio-borde, rgba(255,255,255,.7));
    background: var(--vidrio-solido, #fff);
    -webkit-backdrop-filter: var(--desenfoque, blur(22px) saturate(160%));
    backdrop-filter: var(--desenfoque, blur(22px) saturate(160%));
    box-shadow: 0 -26px 60px -22px rgba(12, 46, 28, .50);
    transform: translateY(102%);
    transition: transform .26s cubic-bezier(.22, .9, .3, 1);
  }
  .hoja-mas.abierta { transform: none; }

  /* El asa: no es decoracion, dice que la hoja se puede arrastrar */
  .hoja-asa {
    width: 40px; height: 4px;
    margin: 4px auto 10px;
    border-radius: 2px;
    background: color-mix(in oklab, var(--text-muted, #64748B) 38%, transparent);
  }

  .hoja-lista { list-style: none; margin: 0; padding: 0; }

  .hoja-op {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: 16px;
    font: inherit;
    color: var(--text-dark, #1E293B);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hoja-op:active { background: color-mix(in oklab, var(--marca, #0F5132) 8%, transparent); }

  .hoja-op-icono {
    flex: none;
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--marca-clara, #E6EFEA);
    color: var(--marca, #0F5132);
  }
  .hoja-op-icono svg { width: 20px; height: 20px; }

  /* Iconos que son una mascara CSS, como el de WhatsApp (vidrio-wa.css) */
  .hoja-op-mascara { display: block; width: 20px; height: 20px; }

  .hoja-op-txt {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hoja-op-badge {
    flex: none;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 11px;
    background: var(--wa-badge, #25D366);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .hoja-op.activa .hoja-op-icono { background: var(--marca, #0F5132); color: #fff; }
  .hoja-op.activa .hoja-op-txt   { color: var(--marca, #0F5132); font-weight: 700; }

  /* ------------------------------------------------- 3. Pie dentro de la hoja */
  /* carga.css:180 esconde .pie-astra en movil porque la barra ocupa su sitio.
     Resultado: desde el telefono no habia forma de llegar a la politica de
     privacidad. Aqui vuelve, que es donde se busca. */
  .hoja-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 6px 2px;
    border-top: 1px solid color-mix(in oklab, var(--text-muted, #64748B) 20%, transparent);
    font-size: 12.5px;
    font-weight: 500;
    color: color-mix(in oklab, var(--marca, #0F5132) 72%, #5b6b63);
  }
  .hoja-pie a {
    color: inherit;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 7px;
  }
  .hoja-pie .firma { display: inline-flex; align-items: center; gap: 7px; }
  .hoja-pie img { opacity: .9; flex: none; }
  .hoja-pie .pie-sep { opacity: .5; }

  [data-theme="dark"] .hoja-pie { color: #8FB9A4; }
  [data-theme="dark"] .hoja-asa { background: rgba(255, 255, 255, .26); }

  /* En oscuro, --marca-clara ya es verde oscuro: el icono en --marca encima
     no se lee. Se invierte el par. */
  [data-theme="dark"] .hoja-op-icono {
    background: color-mix(in oklab, var(--marca, #0F5132) 42%, #0B141A);
    color: #9BE7C4;
  }
  [data-theme="dark"] .hoja-op.activa .hoja-op-icono {
    background: var(--acento, #128C7E);
    color: #fff;
  }
  [data-theme="dark"] .hoja-op.activa .hoja-op-txt { color: #9BE7C4; }
  [data-theme="dark"] #nav-mas.active {
    color: #9BE7C4;
    background: rgba(255, 255, 255, .07);
  }

  /* --------------------------------------------------- 4. La conversacion */

  /* El boton de reaccionar cuelga 32 px por FUERA del mensaje: app.js lo
     inyecta con right:-32px en los entrantes y left:-32px en los salientes.
     En el ordenador cabe porque .messages-area tiene 40 px de padding; en el
     movil son 10, asi que asoma por los dos lados y deja la conversacion con
     22 px de scroll horizontal. Eso es lo que hace que el pedido de Gema se
     vea cortado por la izquierda.

     Ese <style> lo mete app.js al final del <head> en tiempo de ejecucion, o
     sea DESPUES de este fichero: llegar mas tarde no sirve, hay que ganarle
     por especificidad. De ahi el .messages-area de delante. */
  .messages-area .message.incoming .btn-reaccionar { right: 2px; }
  .messages-area .message.outgoing .btn-reaccionar { left: 2px; }
  .messages-area { overflow-x: hidden; }

  /* Los tres iconos de la cabecera (Buscar, Adjuntar y Menu) no tienen
     manejador en ningun sitio: son decoracion. En un movil de 390 px empujan
     la cabecera 32 px fuera de pantalla, asi que el de Menu no se ve y el de
     Human Takeover, que si hace falta, queda pegado al borde. Adjuntar ya
     esta abajo, en la barra de escribir (.attach-mobile-btn). */
  .chat-header .chat-header-actions .icon-btn { display: none; }
}

/* ============================================================================
   4. Las cifras de arriba de cada modulo, de dos en dos
   ----------------------------------------------------------------------------
   Las tres pantallas nuevas abren con tarjetas en auto-fit minmax(170px,1fr).
   En un movil de 390 px no entran dos, asi que caen a una columna y hay que
   bajar cuatro pantallas enteras antes de llegar a lo que se venia a ver.
   ========================================================================== */
@media (max-width: 560px) {
  #cuentas-root      .cue-tarjetas,
  #consumo-root      .con-tarjetas,
  #estadisticas-root .est-cifras { grid-template-columns: 1fr 1fr; }

  #cuentas-root .cue-tarjeta,
  #consumo-root .con-tarjeta { padding: 12px 13px; }
  #cuentas-root .cue-t-val        { font-size: 20px; }
  #consumo-root .con-tarjeta-val  { font-size: 19px; }

  /* "ALBARANES ENVIADOS" ocupa dos lineas y "UNIDADES" una: sin esto las dos
     cifras de una misma fila quedan a distinta altura. */
  #cuentas-root .cue-t-tit,
  #consumo-root .con-tarjeta-tit { min-height: 2.3em; }

  #estadisticas-root .est-cifra     { padding: 14px 14px 14px 0; }
  #estadisticas-root .est-cifra-val {
    font-size: 20px;
    /* En media columna, "San Agustin" se cortaba con los puntos suspensivos */
    white-space: normal;
  }
}

/* ============================================================================
   5. Las tablas en el movil
   ----------------------------------------------------------------------------
   Sanidad pinta seis columnas y su contenedor lleva overflow:hidden, asi que
   en un movil el correo del despacho no es que haya que desplazarlo: es que
   no existe, se corta y no hay forma de llegar a el.

   En movil se deja de usar tabla: cada fila es una ficha con sus campos
   etiquetados. La etiqueta sale del <thead> de verdad, que la copia
   js/tablas-movil.js al atributo data-eti de cada celda, asi que el dia que
   cambien las columnas esto sigue cuadrando solo.
   ========================================================================== */
@media (max-width: 620px) {

  /* ---- Sanidad: de tabla a fichas ------------------------------------- */
  #sanidad-root .san-marco {
    overflow: visible;
    border: 0;
    background: transparent;
    border-radius: 0;
  }
  #sanidad-root table[data-movil],
  #sanidad-root table[data-movil] tbody,
  #sanidad-root table[data-movil] tr,
  #sanidad-root table[data-movil] td { display: block; width: auto; }
  #sanidad-root table[data-movil] thead { display: none; }

  #sanidad-root table[data-movil] tbody tr {
    background: var(--ped-fondo, #fff);
    border: 1px solid var(--ped-borde, #e3e6ec);
    border-radius: 12px;
    padding: 8px 14px 10px;
    margin-bottom: 10px;
  }
  /* El :hover de la tabla pintaba la fila entera; en una ficha sobra */
  #sanidad-root table[data-movil] tbody tr:hover { background: var(--ped-fondo, #fff); }

  #sanidad-root table[data-movil] td {
    border: 0;
    border-bottom: 1px solid color-mix(in oklab, var(--ped-borde, #e3e6ec) 55%, transparent);
    padding: 8px 0;
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }
  #sanidad-root table[data-movil] td:last-child { border-bottom: 0; }

  /* Sin esto, la rejilla estira lo que haya dentro: la pastilla de "Enviado"
     salia como una barra de lado a lado en vez de como una etiqueta. */
  #sanidad-root table[data-movil] td > * { justify-self: start; }
  #sanidad-root table[data-movil] td > .san-input,
  #sanidad-root table[data-movil] td > .san-acciones { justify-self: stretch; width: 100%; }

  #sanidad-root table[data-movil] td[data-eti]::before {
    content: attr(data-eti);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ped-suave, #5c6675);
  }

  /* La columna de los botones no tiene titulo: ocupa la ficha entera */
  #sanidad-root table[data-movil] td:not([data-eti]) {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 10px;
  }

  /* El nombre del despacho es el titulo de la ficha, no un campo mas */
  #sanidad-root table[data-movil] td.san-desp {
    grid-template-columns: minmax(0, 1fr);
    font-size: 16px;
    font-weight: 700;
    padding: 2px 0 9px;
  }
  #sanidad-root table[data-movil] td.san-desp::before { display: none; }

  /* Un correo de 30 caracteres no cabe entero: que parta por donde sea */
  #sanidad-root .san-tel,
  #sanidad-root .san-input { word-break: break-all; }

  #sanidad-root .san-acciones { justify-content: stretch; }
  #sanidad-root .san-acciones .san-mini { flex: 1; text-align: center; padding: 9px 10px; }

  /* La barra de arriba: a lo ancho en vez de apretada contra el borde */
  #sanidad-root .san-barra { gap: 8px; }
  #sanidad-root .san-espacio { display: none; }
  #sanidad-root .san-fecha { flex: 1 1 150px; }
  #sanidad-root .san-btn { flex: 1 1 auto; }

  /* ---- Asistente: la tabla de "que le falta" --------------------------- */
  /* Esta si cabe como tabla: son tres columnas de numeros y una de texto.
     Lo que no cabia eran los 20 px de padding del bloque mas los 10 de cada
     celda. */
  #consumo-root .con-bloque { padding: 14px 13px; }
  #consumo-root .con-tabla { font-size: 12.5px; }
  #consumo-root .con-tabla th,
  #consumo-root .con-tabla td { padding: 7px 5px; }
  #consumo-root .con-tabla th:first-child,
  #consumo-root .con-tabla td:first-child { padding-left: 0; }
  #consumo-root .con-tabla th:last-child,
  #consumo-root .con-tabla td:last-child { padding-right: 0; }
  #consumo-root .con-tabla-faltas .con-nombre { word-break: break-word; }
  /* Las cifras no se parten nunca: "153" en dos lineas no se lee */
  #consumo-root .con-tabla td + td { white-space: nowrap; }
}

/* ---- Pedidos: no cabe entera, pero que quepa lo maximo ------------------ */
/* Es una matriz de productos por despacho: en fichas seria ilegible, asi que
   se queda como tabla con la primera columna fija. Lo unico que se puede
   hacer es apretar la rejilla para que entren dos o tres despachos mas en
   pantalla sin que deje de leerse. */
@media (max-width: 480px) {
  #pedidos-root .ped-tabla { font-size: 11.5px; }
  #pedidos-root .ped-tabla th,
  #pedidos-root .ped-tabla td { padding: 4px 5px; }
  #pedidos-root .ped-tabla .ped-col-prod { min-width: 106px; max-width: 118px; }

  /* Lo que fijaba el ancho de cada despacho no era el titulo sino el input,
     que tiene 64 px a fuego. Con 46 y el titulo partido en dos lineas entran
     cinco despachos de golpe en vez de tres. */
  #pedidos-root .ped-celda input { width: 46px; padding: 7px 2px; font-size: 13px; }
  #pedidos-root .ped-tabla thead th:not(.ped-col-prod) {
    white-space: normal;
    font-size: 10.5px;
    line-height: 1.15;
    padding: 6px 3px;
  }
  /* Mas alto util: en un movil en vertical, 68vh dejaba media pantalla vacia */
  #pedidos-root .ped-tabla-scroll { max-height: 74vh; }
}

@media (prefers-reduced-motion: reduce) {
  .hoja-mas, .hoja-fondo { transition: none; }
}