/* ============================================================================
   MODO APP (celular) — Conversa
   ----------------------------------------------------------------------------
   Este archivo es ADITIVO. TODO lo que depende del tamaño de pantalla vive
   dentro de `@media (max-width: 860px)`, el mismo corte que ya usa la bandeja.
   En computador no aplica ni una regla, así que el escritorio queda igual.

   IMPORTANTE (aprendido probándolo): el corte de tamaño lo decide el CSS, NO
   JavaScript. Si dependiera de una clase que pone `movil.js`, bastaría con que
   un navegador no avisara de un cambio de tamaño para dejar un computador
   atrapado en modo celular. `movil.js` solo aporta lo que el CSS no puede
   saber solo: si la app corre INSTALADA (`html.cv-standalone`).

   Qué resuelve (pedido de Mateo, 25-jul): la bandeja "se sentía página web".
   Lo que la delata en un celular es la navegación, no el empaque:
     · menú lateral de escritorio en vez de barra de pestañas abajo,
     · el chat aparece de golpe (display:none) en vez de entrar deslizando,
     · no se puede volver con el gesto del borde,
     · el navegador hace zoom al tocar un campo y la página rebota al arrastrar,
     · el notch y la barra de gestos del iPhone se comen contenido.

   La estructura HTML de las páginas no cambia.
   ============================================================================ */

/* La barra de pestañas existe en el DOM siempre (la pinta movil.js), pero solo
   se muestra en celular: por eso su `display` vive dentro del media query. */
.cv-tabs { display: none; }

/* La flecha de volver la cuelga movil.js en el DOM de todas las pantallas, pero
   solo es del celular: en computador se navega con el menú lateral. Mismo patrón
   que la barra de pestañas — escondida aquí, encendida dentro del media query. */
.cv-atras { display: none; }

@media (max-width: 860px) {

  /* ── Base del modo app ─────────────────────────────────────────────────── */
  :root {
    /* Alto de la barra de pestañas + el hueco de la barra de gestos del iPhone. */
    --cv-tabs-h: 56px;
    --cv-abajo: env(safe-area-inset-bottom, 0px);
    --cv-tabs-total: calc(var(--cv-tabs-h) + var(--cv-abajo));
    /* Hueco del NOTCH. Solo existe cuando corre instalada (sin barra de
       direcciones); en el navegador normal la barra del navegador ya lo tapa.
       Vive en una variable a propósito: el alto de la pantalla y el sitio donde
       empieza el contenido TIENEN que salir de la misma cuenta. Cuando no era
       así, la bandeja quedaba 59 px más larga que el teléfono y lo que sobraba
       —y se cortaba abajo— era justo la barra de escribir (visto por Mateo en su
       iPhone el 26-jul). */
    --cv-arriba: 0px;
  }

  html {
    /* En una app, el dedo arrastra el contenido, no la página entera. */
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
  }

  body {
    overscroll-behavior-y: none;
    /* Nada de "resaltado azul" al tocar: eso es lo que más delata a una web. */
    -webkit-tap-highlight-color: transparent;
    /* El texto no se selecciona al mantener el dedo (como en una app nativa)… */
    -webkit-user-select: none;
    user-select: none;
  }
  /* …pero SÍ en lo que de verdad se copia: mensajes, campos y notas. */
  input, textarea, [contenteditable], .burbuja, .mensajes {
    -webkit-user-select: text;
    user-select: text;
  }

  /* iOS hace ZOOM al enfocar un campo de menos de 16px. Es el defecto que más
     grita "esto es una página web". Va con !important a propósito: casi todos
     los campos del sistema traen su propio tamaño desde una regla más fuerte
     (`.escribir input`, `.campo-chat input`…), y sin esto el iPhone se acerca
     cada vez que el asesor toca la barra de escribir. Solo aplica en celular.
     Se dejan fuera casillas y botones, que no tienen texto que escribir. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select,
  [contenteditable="true"] { font-size: 16px !important; }   /* 16 EXACTO: por debajo, iOS hace zoom */

  /* ── Menú lateral: fuera en el celular ─────────────────────────────────── */
  /* Lo reemplaza la barra de pestañas de abajo. Se apunta al hueco
     (#menuLateral) y no solo a la clase que le pone menu.js: si el menú tarda
     en pintarse o falla, igual no deja una franja vacía junto a la lista. */
  #menuLateral,
  .menu-l { display: none !important; }

  /* ── Barra de pestañas ─────────────────────────────────────────────────── */
  .cv-tabs {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 46;                      /* debajo de modales (50) y del visor (60) */
    display: flex;
    align-items: stretch;
    height: var(--cv-tabs-total);
    padding-bottom: var(--cv-abajo);
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--borde);
    /* La barra no se arrastra ni rebota con el resto de la página. */
    touch-action: none;
    transition: transform 240ms cubic-bezier(.32,.72,0,1);
  }

  .cv-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 6px 2px 4px;
    border: 0;
    background: none;
    color: var(--gris);
    font: inherit;
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-2, .16s) var(--ease-out, ease), transform var(--dur-1, .1s) var(--ease-out, ease);
  }
  .cv-tab svg { display: block; width: 23px; height: 23px; }
  .cv-tab .cv-tab-nom {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cv-tab.activo { color: var(--tinta); }
  /* Respuesta inmediata al dedo: en una app el botón "se hunde" al instante. */
  .cv-tab:active { transform: scale(.92); color: var(--tinta); }

  /* Globito de pendientes sobre el ícono (ej. chats sin responder). */
  .cv-tab-icono { position: relative; display: block; }
  .cv-tab-globo {
    position: absolute;
    top: -3px; left: 50%;
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--rojo);
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--blanco);
  }
  .cv-tab-globo:empty { display: none; }

  /* Las páginas normales dejan sitio abajo para no quedar tapadas. */
  body.cv-contabs { padding-bottom: var(--cv-tabs-total); }

  /* La BANDEJA no: es una app, no una página. Mide justo la pantalla y lo que se
     desplaza es la lista de mensajes, nunca la página entera. Este candado es el
     seguro: si algún día algo le agregara alto de más, la barra de escribir no
     se volvería a ir por debajo del borde — se notaría de otra forma, pero no
     desapareciendo. La clase la pone movil.js (solo donde existe `.marco`). */
  body.cv-sin-desplazar { overflow: hidden; }

  /* ── Bandeja: la lista y el chat como dos pantallas que se deslizan ────── */
  /* Hoy en celular el chat aparece de golpe (display:none / flex). Aquí se pasa
     a dos capas superpuestas que se mueven con transform, que es lo que hace
     que se sienta app. Se conserva la misma clase `.chat-abierto` que ya usa la
     bandeja, así que el JavaScript de la página no cambia. */
  /* ── El alto sale de UNA medida, no de una suma ────────────────────────── */
  /* `--cv-cabeza` es lo que ocupa DE VERDAD la barra de arriba: lo mide movil.js
     sobre el propio elemento, y vale 0 cuando no está o está escondida. Antes
     esto se armaba sumando (`--cv-top` + el hueco del notch), y esa suma podía
     contar dos veces el mismo hueco —la barra ya crece para librar el notch— o
     llegar tarde, porque el alto de la barra lo publica menu.js cuando termina.
     De ahí venían la barra de escribir cortada y el chat que se deslizaba.
     Medir no falla. Mientras la medida llega, se usa la cuenta vieja de respaldo.

     `--cv-alto` solo existe mientras hay teclado abierto (lo pone movil.js con
     visualViewport); si no, manda la pantalla entera. */
  body { padding-top: var(--cv-cabeza, var(--cv-top)); }

  /* estilo.css le da a la bandeja un `min-height` con `100vh` pensado para el
     escritorio. En el celular ESO MANDABA sobre el alto de aquí y volvía a dejar
     la pantalla más larga que el teléfono: en celular el alto lo decide este
     archivo, y solo este. */
  body.cv-conbarra .marco { min-height: 0; }

  .marco {
    position: relative;
    overflow: hidden;
    height: calc(100vh - var(--cv-cabeza, var(--cv-top)));
    height: calc(var(--cv-alto, 100dvh) - var(--cv-cabeza, var(--cv-top)));
  }

  .marco > .col-chats,
  .marco > .col-conv {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    /* Las dos capas existen siempre: por eso se puede deslizar entre ellas. */
    display: flex !important;
    flex-direction: column;
    will-change: transform;
    transition: transform var(--cv-desliz, 280ms) cubic-bezier(.32,.72,0,1);
  }

  /* La lista deja hueco abajo para la barra de pestañas. */
  .marco > .col-chats { padding-bottom: var(--cv-tabs-total); box-sizing: border-box; }

  /* Estado normal: se ve la lista; el chat espera fuera de pantalla, a la derecha. */
  .marco > .col-chats { transform: translateX(0); z-index: 1; }
  .marco > .col-conv {
    transform: translateX(100%);
    z-index: 2;
    box-shadow: -12px 0 28px rgba(10,10,10,.10);
  }

  /* Chat abierto: entra el chat y la lista se retira un poco (profundidad iOS). */
  .marco.chat-abierto > .col-chats { transform: translateX(-24%); }
  .marco.chat-abierto > .col-conv { transform: translateX(0); }

  /* Dentro del chat la barra de pestañas estorba (como en WhatsApp): se va. */
  .marco.chat-abierto ~ .cv-tabs,
  body.cv-chat-abierto .cv-tabs {
    transform: translateY(100%);
    pointer-events: none;
  }

  /* ── Dentro de un chat manda el chat (pedido de Mateo, 26-jul) ─────────── */
  /* Se va también la barra de Conversa (el logo y «Tu perfil»): dentro de una
     conversación lo que tiene que estar fijo arriba es la cabecera del CHAT —
     volver, el nombre, la ficha del cliente, el recordatorio—, como en WhatsApp.
     Al irse la barra, `--cv-cabeza` pasa a 0 y el chat ocupa la pantalla entera:
     cabecera arriba, barra de escribir abajo, y en medio solo se desplazan los
     mensajes. */
  body.cv-chat-abierto .barra-sup { display: none; }

  /* Sin barra arriba, es la cabecera del chat la que tiene que librar el notch
     (y la lista, mientras se desliza por detrás al volver). */
  body.cv-chat-abierto .conv-cabeza { padding-top: calc(10px + var(--cv-arriba)); }
  body.cv-chat-abierto .marco > .col-chats { padding-top: var(--cv-arriba); }
  /* La ficha del cliente solo se abre desde dentro de un chat: ahí tampoco hay
     barra que le libre el notch. */
  body.cv-chat-abierto .col-ficha.abierta { padding-top: var(--cv-arriba); }

  /* Mientras el dedo arrastra, manda el dedo: sin transición. */
  .marco.cv-arrastrando > .col-chats,
  .marco.cv-arrastrando > .col-conv { transition: none; }

  /* El escritor del chat respeta la barra de gestos del iPhone. */
  .col-conv .escribir { padding-bottom: calc(10px + var(--cv-abajo)); }

  /* La ficha del cliente en celular entra como hoja completa, no como columna. */
  .col-ficha.abierta {
    position: fixed;
    /* Va pegada a la pantalla (`fixed`), así que NO hereda el margen que lleva el
       contenido: se lo pone ella, con la misma medida que todo lo demás. */
    inset: var(--cv-cabeza, var(--cv-top)) 0 0 0;
    width: auto;
    max-width: none;
    z-index: 47;
    padding-bottom: var(--cv-abajo);
  }

  /* Zonas de toque cómodas: en celular nada por debajo de 40 px. */
  .volver-movil,
  .boton-icono,
  .btn-filtro { min-width: 40px; min-height: 40px; }

  /* ── Flecha de volver (Mateo, 26-jul) ─────────────────────────────────── */
  /* Zona de toque de 40 px, como el resto de botones del celular. */
  .cv-atras {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--tinta);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cv-atras:active { background: var(--crema); }

  /* En la FICHA va arriba del todo, en su propia fila y pegada mientras se
     desplaza: la ficha entra como hoja completa y esta es su única salida. */
  .col-ficha .cv-atras-ficha { display: none; }
  .col-ficha.abierta .cv-atras-ficha {
    display: flex;
    justify-content: flex-start;
    position: sticky;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 46px;
    padding: 0 8px;
    border-radius: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--borde);
  }

  /* ── Cabecera del chat más limpia (Mateo, 26-jul) ─────────────────────── */
  /* En el celular no caben cinco botones. La ficha del cliente, el recordatorio
     y los mensajes del sistema salen de la barra y pasan al menú de los tres
     puntos, donde ya viven «Marcar como respondida» y «Eliminar contacto».
     En computador NO cambia nada: allá siguen siendo botones de la barra y estas
     opciones no aparecen en el menú.
     Ojo: los tres son los ÚNICOS `.boton-icono` que cuelgan directamente de la
     cabecera; el de los tres puntos va dentro de `.menu-mas-wrap`, por eso no se
     lo lleva esta regla. */
  .conv-cabeza > .boton-icono { display: none; }
  /* El de tres puntos hereda el «pegado a la derecha» que traía el de la ficha. */
  .conv-cabeza .menu-mas-wrap { margin-left: auto; }
  /* Con `.conv-cabeza` delante a propósito: el «escondido» por defecto vive en el
     <style> de bandeja.html, que va DESPUÉS de este archivo, así que hace falta
     una regla más específica para ganarle. Estar dentro del media query no da
     prioridad. */
  .conv-cabeza .menu-mas .solo-movil { display: flex; }

  /* ── La conversación no se mueve hacia los lados (Mateo, 26-jul) ───────── */
  /* `.mensajes` solo pide `overflow-y: auto`, pero cuando un eje es automático el
     navegador vuelve automático el otro TAMBIÉN: bastaba con que algo midiera un
     pixel de más para poder arrastrar la conversación de lado. El ancho de la
     conversación es fijo: el que tenga el teléfono.
     Y para que apagarlo no ESCONDA nada, lo que antes se salía ahora se acomoda:
     cualquier cosa dentro cabe, y las palabras larguísimas (un enlace, una fila
     de números sin espacios) se parten en vez de estirar la burbuja. */
  .col-conv .mensajes { overflow-x: hidden; }
  /* Solo lo de DENTRO de la burbuja se obliga a caber. Antes esta regla también
     alcanzaba a las burbujas mismas (`.mensajes > *`) y les pisaba su ancho
     máximo: los mensajes largos pasaron a ocupar la línea entera y dejaron de
     distinguirse los del cliente de los nuestros. */
  .col-conv .burbuja > * { max-width: 100%; }
  .col-conv .burbuja { overflow-wrap: anywhere; }

  /* ── Ancho de las burbujas, como en WhatsApp (Mateo, 26-jul) ──────────── */
  /* Un mensaje nunca ocupa la línea completa: el nuestro se pega a la derecha
     pero deja aire a la izquierda, y el del cliente al revés. Ese hueco es lo que
     hace que de un vistazo se sepa quién escribió, sin tener que leer.
     78% deja un quinto de la pantalla libre al otro lado, como WhatsApp. */
  .col-conv .burbuja { max-width: 78%; }
  /* Las fotos NO llevan regla aquí, a propósito. Ya vienen medidas desde
     bandeja.html —200×200 recortadas, o sea CUADRADAS, como en WhatsApp— y la
     regla que había aquí (`height: auto`) les quitaba ese alto fijo y las dejaba
     de cualquier forma. Para que no se salgan basta con la regla de arriba: nada
     que cuelgue de la burbuja pasa del ancho de la burbuja. El tamaño de verdad
     se ve al abrirlas, en el visor. */

  /* Las listas largas se desplazan con inercia y sin arrastrar la página. */
  .lista-chats,
  .mensajes,
  .col-ficha { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

  /* ── Cuando corre instalada (pantalla de inicio / Capacitor) ───────────── */
  /* Esto SÍ lo tiene que decir JavaScript: no hay forma fiable de detectar en
     CSS que un iPhone abrió la app desde la pantalla de inicio. Sin barra de
     direcciones hay que respetar el notch a mano. */
  /* Se enciende el hueco del notch UNA sola vez, aquí. La barra de arriba crece
     para librarlo — y como el alto de todo lo demás sale de MEDIR esa barra
     (`--cv-cabeza`), no hay que sumar el hueco en ningún otro sitio: contarlo dos
     veces era justo lo que dejaba la pantalla más larga que el teléfono. El
     `--cv-arriba` suelto solo hace falta donde NO hay barra que lo libre: dentro
     de un chat. */
  html.cv-standalone { --cv-arriba: env(safe-area-inset-top, 0px); }
  /* La barra tiene `height: 52px` con `box-sizing: border-box`, así que al darle
     relleno para el notch NO crecía: el logo y «Tu perfil» se le salían por
     debajo y se montaban sobre el contenido. Con `content-box` esos 52 px pasan a
     ser lo de adentro y la barra mide de verdad 52 + el notch — que es justo lo
     que después se mide en `--cv-cabeza`. */
  html.cv-standalone .barra-sup { padding-top: var(--cv-arriba); box-sizing: content-box; }
  /* Páginas que NO tienen barra de arriba (hoy, la de ingreso): ahí el hueco del
     notch no lo puede librar nadie más, lo pone el propio contenido. */
  html.cv-standalone body:not(.cv-conbarra) { padding-top: var(--cv-arriba); }

  /* ── Quien prefiere menos movimiento: se queda todo, pero quieto ───────── */
  @media (prefers-reduced-motion: reduce) {
    .marco > .col-chats,
    .marco > .col-conv,
    .cv-tabs,
    .cv-tab { transition: none !important; }
    .cv-tab:active { transform: none; }
  }
}