/* Tech&Grow — app del celular (1.8)
   Se carga después de app.css. En la PC no cambia nada salvo lo que está fuera de los
   @media (piezas nuevas: notificaciones, huella, sugerencias). En el celular: barra inferior,
   pantallas completas sin saltos, zonas seguras del iPhone (muesca y barra de inicio),
   botones cómodos para el dedo y tablas que pasan a tarjetas. */

:root {
  --alto-tabbar: 0px;
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --alto-util: calc(100dvh - var(--alto-cabecera) - var(--seguro-arriba) - var(--alto-tabbar) - var(--seguro-abajo));
}
html { -webkit-tap-highlight-color: transparent; }

/* ---------- Piezas nuevas (en todas las pantallas) ---------- */
.tabbar { display: none; }
.sugerencia-celular {
  position: fixed; left: 50%; bottom: calc(var(--alto-tabbar) + var(--seguro-abajo) + 12px); transform: translateX(-50%); z-index: 58;
  width: min(580px, calc(100vw - 24px)); display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--linea); background: linear-gradient(135deg, var(--brillo), transparent 45%), var(--superficie); box-shadow: var(--sombra-flotante);
  animation: subir-sugerencia .28s var(--curva);
}
@keyframes subir-sugerencia { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.sugerencia-celular > .ic { color: var(--naranja); width: 22px; height: 22px; }
.sugerencia-celular > div { flex: 1; display: grid; gap: 2px; font-size: 14px; line-height: 1.35; min-width: 0; }
.sugerencia-celular span { color: var(--tinta-2); font-size: 13px; }
.sugerencia-celular .boton { flex: none; }

.notifs__cab { display: flex; align-items: center; gap: 8px; }
.notifs__cab > span { flex: 1; }
.notifs__ajustes { font-size: 12.5px; font-weight: 500; }
.notifs__cerrar { display: none; border: 0; background: none; color: var(--tinta-2); padding: 8px; border-radius: 10px; cursor: pointer; }

.cel-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--tinta-2); margin: 12px 0 8px; }
.cel-sub .ic { width: 16px; height: 16px; color: var(--naranja); }
.cel-botones { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.cel-botones:empty { display: none; }
.cel-prefs { border: 1px solid var(--linea-suave); border-radius: var(--r-control); padding: 8px 12px 10px; margin: 14px 0 0; display: grid; gap: 6px; }
.cel-prefs legend { font-size: 13px; font-weight: 700; color: var(--tinta-2); padding: 0 4px; }
.cel-dispositivos { margin-top: 6px; }
.cel-fila { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--linea-suave); border-radius: var(--r-control); margin-bottom: 6px; }
.cel-fila > .ic { color: var(--tinta-3); flex: none; }
.cel-fila__txt { flex: 1; min-width: 0; display: grid; }
.cel-fila__txt strong { font-size: 14px; overflow-wrap: anywhere; }
.cel-fila__txt small { font-size: 12.5px; color: var(--tinta-3); }
.cel-nota { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--tinta-2); margin: 10px 0 0; }
.cel-nota .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.cel-instalar { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--linea-suave); }
.cel-huella { margin-bottom: 4px; }
.boton--huella { justify-content: center; font-size: 16px; }
.boton--huella .ic { width: 22px; height: 22px; }

.conexion { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.conexion li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.conexion .marca-ok, .conexion .marca-no { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--fuente); color: #fff; margin-top: 1px; }
.conexion .marca-ok { background: var(--ok); }
.conexion .marca-no { background: var(--alerta); }
.conexion small { display: block; color: var(--tinta-3); font-size: 12.5px; }

.ingreso__app { display: flex; gap: 10px; align-items: center; padding: 12px; margin: 0 0 18px; border-radius: 14px; border: 1px solid var(--naranja-vivo);
  background: linear-gradient(135deg, var(--naranja-claro), transparent 70%), var(--superficie); }
.ingreso__app > .ic { color: var(--naranja); width: 26px; height: 26px; flex: none; }
.ingreso__app > div { flex: 1; display: grid; gap: 2px; font-size: 14px; line-height: 1.35; min-width: 0; }
.ingreso__app span { color: var(--tinta-2); font-size: 13px; }
.ingreso__app-cerrar { flex: none; align-self: flex-start; border: 0; background: none; color: var(--tinta-3); padding: 4px; border-radius: 8px; cursor: pointer; display: grid; }
.ingreso__nativo { display: grid; justify-items: center; text-align: center; gap: 10px; }
.ingreso__nativo img { border-radius: 20px; }
.ingreso__nativo h2 { margin: 6px 0 0; }
.ingreso__nativo .bajada { margin: 0 0 8px; }
.ingreso__nativo .boton { width: 100%; justify-content: center; font-size: 16px; }
.ingreso__alternar-btn { border: 0; background: none; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }
/* Dentro de la app de Android no se muestra la marca grande del ingreso web. */
.app-android .ingreso__marca { display: none; }
.cw-volver { display: none; }
.cw-cabeza__txt { flex: 1; min-width: 0; }
.cw-cabeza__txt h2, .cw-cabeza__txt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Dedos, no mouse ---------- */
@media (pointer: coarse) {
  /* Con menos de 16px, el iPhone agranda la pantalla al tocar un campo. */
  input, select, textarea { font-size: 16px !important; }
  .boton { min-height: 42px; }
  .boton--chico { min-height: 36px; }
  .boton--icono { min-width: 42px; min-height: 42px; }
  .lateral__item { min-height: 46px; }
  .menu a, .menu button { min-height: 46px; }
  .barra-sup__tema { width: 42px; height: 42px; }
  .agente__charla-accion { opacity: .75; }
  .agente__charla-abrir { padding: 12px 10px; }
  .cw-canal { padding: 11px 8px; }
}

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  :root { --alto-tabbar: 62px; }
  /* La pantalla entra sólo con un fundido (sin desplazarse): un desplazamiento hace que lo que va
     fijo a la pantalla (el chat del equipo abierto) se ubique mal mientras dura. */
  .vista-entra > * { animation-name: aparecer; }

  /* Barra inferior */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--alto-tabbar) + var(--seguro-abajo)); padding: 0 4px var(--seguro-abajo);
    border-top: 1px solid var(--linea); background: linear-gradient(180deg, var(--vidrio-a), var(--superficie));
    box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .35);
  }
  .tabbar__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; color: var(--tinta-3); text-decoration: none; font: 600 11px/1.1 var(--fuente); cursor: pointer; padding: 0; }
  .tabbar__icono { position: relative; display: grid; place-items: center; width: 54px; height: 30px; border-radius: 15px; transition: background .2s var(--curva), color .2s var(--curva); }
  .tabbar__icono .ic { width: 22px; height: 22px; }
  .tabbar__texto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__item[aria-current="page"] { color: var(--tinta); }
  .tabbar__item[aria-current="page"] .tabbar__icono { background: var(--naranja-claro); color: var(--naranja); }
  .tabbar__item:active .tabbar__icono { background: var(--superficie-3); }
  .tabbar .cw-badge { position: absolute; top: -3px; right: 5px; margin: 0; min-width: 18px; height: 18px; line-height: 18px; font-size: 10.5px; padding: 0 5px; box-shadow: 0 0 0 2px var(--superficie); }
  body.teclado-abierto .tabbar { display: none; }
  body.teclado-abierto { --alto-tabbar: 0px; }

  /* Cabecera: "Más" (abajo) reemplaza al botón de menú; respeta la muesca del iPhone */
  .barra-sup__menu { display: none !important; }
  .barra-sup { padding-top: var(--seguro-arriba); height: calc(var(--alto-cabecera) + var(--seguro-arriba)); }
  .barra-sup .barra-sup__tema:last-child { display: none; } /* el tema está en "Más" */
  .lateral { padding-top: calc(14px + var(--seguro-arriba)); padding-bottom: calc(12px + var(--seguro-abajo)); }
  .principal { padding-bottom: calc(var(--alto-tabbar) + var(--seguro-abajo) + 28px); }
  .avisos { left: 12px; right: 12px; width: auto; bottom: calc(var(--alto-tabbar) + var(--seguro-abajo) + 10px); }
  .dock { z-index: 45; height: calc(100dvh - 40px - var(--seguro-arriba)); padding-bottom: var(--seguro-abajo); }

  /* Notificaciones: hoja que sube desde abajo */
  .barra-sup:has(.notifs:not(.oculto)) { z-index: 76; }
  .notifs { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 84dvh; z-index: 76;
    border-radius: 20px 20px 0 0; padding: 0 8px calc(12px + var(--seguro-abajo)); box-shadow: 0 0 0 100vmax var(--velo), var(--sombra-flotante);
    animation: subir-hoja .26s var(--curva); }
  @keyframes subir-hoja { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
  .notifs__cab { position: sticky; top: 0; z-index: 1; padding: 14px 8px 10px; background: var(--superficie); font-size: 16px; }
  .notifs__cab::before { content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--linea-fuerte); }
  .notifs__cerrar { display: grid; }
  .notif { font-size: 15px; padding: 12px 8px; }
  .notif__acciones .boton { flex: 1 1 auto; justify-content: center; }

  /* Asistente: ocupa todo el alto disponible, sin márgenes */
  .principal:has(> .agente), .principal:has(> .vista-entra > .agente), .principal:has(.inicio-envoltura--asistente) { padding: 0 0 calc(var(--alto-tabbar) + var(--seguro-abajo)); }
  .agente { height: var(--alto-util); min-height: 0; }
  .inicio-envoltura--asistente .agente { height: calc(var(--alto-util) - 58px); }
  .agente .chat__entrada { margin: 0 8px 8px; border-radius: 18px; }
  .agente .chat__mensajes { padding-left: 14px; padding-right: 14px; }
  .agente__barra { padding: 4px 8px 0; }
  .agente__panel { padding-top: 10px; }

  /* Equipo: una cosa por vez (lista o chat) */
  .cw { grid-template-columns: minmax(0, 1fr); }
  .cw[data-vista="lista"] { height: auto; min-height: 0; }
  .cw[data-vista="lista"] .cw-principal { display: none; }
  .cw[data-vista="lista"] .cw-lado__lista { overflow: visible; }
  /* El chat abierto ocupa toda la pantalla entre la barra de arriba y la de abajo. */
  .cw[data-vista="chat"] { position: fixed; z-index: 30; left: 0; right: 0; top: calc(var(--alto-cabecera) + var(--seguro-arriba)); bottom: calc(var(--alto-tabbar) + var(--seguro-abajo));
    height: auto; min-height: 0; grid-template-rows: minmax(0, 1fr); border-radius: 0; border-left: 0; border-right: 0; background: var(--superficie); }
  .cw[data-vista="chat"] .cw-lado { display: none; }
  .cw-lado { border-right: 0; border-bottom: 0; max-height: none; }
  .cw-principal { height: auto; min-height: 0; }
  .cw-volver { display: grid; flex: none; }
  .cw-cabeza { justify-content: flex-start; gap: 6px; padding: 8px 10px; min-height: 54px; }
  .cw-cabeza > div:last-child:not(.cw-cabeza__txt) { flex: none; }
  .cw-mensajes { padding: 12px; }
  .cw-entrada { padding: 8px 8px 10px; }
  .cw-adjunto__botones { margin-left: 0; width: 100%; }

  /* Ingreso: la marca se achica para que el formulario entre sin bajar */
  .ingreso { min-height: 100dvh; }
  .ingreso__marca { min-height: 0; padding: calc(24px + var(--seguro-arriba)) 22px 26px; gap: 14px; }
  .ingreso__marca h1 { font-size: clamp(30px, 9vw, 40px); margin-bottom: 8px; }
  .ingreso__marca p { font-size: 15px; }
  .ingreso__marca > p:last-child { display: none; }
  .ingreso__form { padding: 26px 20px calc(30px + var(--seguro-abajo)); justify-content: flex-start; }
  .espera { padding: var(--seguro-arriba) 12px var(--seguro-abajo); }
}

/* Pantallas angostas: ventanas como hojas y tablas como tarjetas */
@media (max-width: 640px) {
  .modal-fondo { padding: 0; place-items: end stretch; }
  .modal { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; padding-bottom: var(--seguro-abajo); animation: subir-hoja .26s var(--curva); }
  .modal__pie { flex-wrap: wrap; }
  .modal__pie .boton { flex: 1 1 auto; justify-content: center; }

  .tabla-envoltura:has(> .tabla--tarjetas) { overflow: visible; border: 0; background: none; box-shadow: none; padding: 0; }
  .tabla--tarjetas, .tabla--tarjetas tbody { display: block; width: 100%; }
  .tabla--tarjetas thead { display: none; }
  .tabla--tarjetas tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 14px; margin: 0 0 10px;
    border: 1px solid var(--linea); border-radius: var(--r-tarjeta); background: linear-gradient(135deg, var(--brillo), transparent 45%), var(--superficie); box-shadow: var(--sombra-1); }
  .tabla--tarjetas td { display: block; min-width: 0; padding: 0 !important; border: 0 !important; text-align: left !important; white-space: normal; }
  .tabla--tarjetas td::before { content: attr(data-etiqueta); display: block; margin-bottom: 2px; font: 600 11px/1.3 var(--fuente); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
  .tabla--tarjetas td:first-child { grid-column: 1 / -1; font-size: 16px; font-weight: 600; }
  .tabla--tarjetas td:first-child::before, .tabla--tarjetas td:not([data-etiqueta])::before, .tabla--tarjetas td[data-etiqueta=""]::before { display: none; }
  .tabla--tarjetas td:empty { display: none; }
  .tabla--tarjetas td:last-child:has(button, a.boton, select) { grid-column: 1 / -1; }
  .tabla--tarjetas td:last-child:has(button, a.boton) { display: flex; gap: 6px; flex-wrap: wrap; }
  .tabla--tarjetas td:last-child:has(button, a.boton)::before { display: none; }
  .tabla--tarjetas tr:hover { background: var(--superficie); }

  .encabezado__acciones { width: 100%; }
  .encabezado__acciones .boton { flex: 1 1 auto; justify-content: center; }
  .sugerencia-celular { flex-wrap: wrap; }
  .sugerencia-celular > div { flex-basis: calc(100% - 40px); }
  .sugerencia-celular .boton { flex: 1 1 auto; justify-content: center; }
}

/* 1.13: selector de Equipo + Fuente en la barra del chat. En pantallas angostas se achican
   (con el texto cortado) en vez de empujar el botón "Nueva" fuera de la pantalla. */
@media (max-width: 640px) {
  .chat__barra { min-width: 0; }
  .chat__barra .chat__fuente { flex: 1 1 0; min-width: 0; max-width: none; text-overflow: ellipsis; }
  .chat__barra .boton { flex: none; }
}