/*
 * ═══ THINK² EN EL CELULAR, COMO LA APP DE iOS ═══
 * Regla del director, 8-oct-2026: la web en el teléfono es la misma experiencia que la app de iOS (ios/Think2). Todo
 * va bajo `html.celular`, que pone celular.js solo en un teléfono —nunca en la app de macOS ni en el escritorio—, así
 * que nada de esto toca otra pantalla. Las medidas son las de la app: barra de pestañas flotante de vidrio, títulos
 * grandes de 34, filas de 17 con caras de 50, destacados de 70, globos de 17, la ficha y las hojas que suben desde
 * abajo, y las cajas de texto a 16 px (con menos, Safari acerca la página al tocarlas).
 */

html.celular {
  --cel-arriba-segura: env(safe-area-inset-top, 0px);
  --cel-abajo-seguro: env(safe-area-inset-bottom, 0px);
  --cel-barra-alto: 62px;
  --cel-barra-abajo: max(10px, calc(var(--cel-abajo-seguro) - 12px));
  --cel-hueco-barra: calc(var(--cel-barra-alto) + var(--cel-barra-abajo) + 16px);   /* lo que no puede tapar la barra */
  --cel-curva: cubic-bezier(.2, .8, .2, 1);
  --cel-empuje: 380ms;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;          /* sin el doble toque que acerca */
}
html.celular body {
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Inter", sans-serif;
}
/* Con la app a la vista, el documento no se desplaza nunca: cada pantalla desplaza lo suyo. (La entrada y el asistente
   de bienvenida siguen como estaban.) */
html.celular:has(#app:not(.oculto)) body {
  position: fixed; inset: 0; overflow: hidden;
  overscroll-behavior: none;
  background: var(--fondo);
}
html.celular.cel-quieto * { transition: none !important; }
html.celular input, html.celular textarea, html.celular select { font-size: 16px; }
html.celular .cel-solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ─── El armazón: la app pegada a lo que se ve (el teclado lo encoge) ─── */
html.celular .app-layout {
  position: fixed; left: 0; right: 0;
  top: var(--cel-arriba, 0px); height: var(--cel-alto, 100dvh);
  margin: 0; padding: 0; display: block;
  border: 0; border-radius: 0; background: var(--fondo); box-shadow: none;
}
html.celular .app-layout::before { display: none; }
html.celular .app-main {
  height: 100%; overflow: hidden;
  border: 0; border-radius: 0; background: var(--fondo);
}
html.celular .seccion, html.celular #seccion-configuracion.seccion, html.celular #seccion-oficina.seccion { padding: 0; height: 100%; }
html.celular .app-main *, html.celular .msj-miembros { scrollbar-width: none; }
html.celular .app-main ::-webkit-scrollbar { display: none; }
html.celular .seccion.visible { display: block; animation: none; }
html.celular .cel-titulo-grande, html.celular .msj-lista-cabeza h2, html.celular .contrata-titulo h2 {
  font-size: 34px; font-weight: 700; letter-spacing: -.5px; line-height: 1.12; margin: 0;
}

/* ─── La barra de pestañas: el menú principal, abajo y flotando (como TabView en iOS 26) ─── */
html.celular .sidebar {
  position: fixed; z-index: 40;
  left: 16px; right: 16px; bottom: var(--cel-barra-abajo); top: auto;
  height: var(--cel-barra-alto); padding: 0 6px;
  display: flex; flex-direction: row; align-items: center; gap: 0;
  border: 0; border-radius: 999px; overflow: visible;
  background: transparent; box-shadow: none;
  transition: translate var(--cel-empuje) var(--cel-curva), opacity var(--cel-empuje) var(--cel-curva);
}
/* El vidrio va en un pseudo-elemento: con el filtro en la barra misma, lo “fijo” de dentro (el menú de espacios) se
   colocaría contra ella y no contra la pantalla. */
html.celular .sidebar::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--texto) 12%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
}
html.celular .sidebar-marca { position: absolute; width: 0; height: 0; padding: 0; overflow: visible; }
html.celular .sidebar-marca .org-switch, html.celular #btn-plegar-menu { display: none; }
html.celular .sidebar-equipo, html.celular .rail-separador, html.celular .rail-contratar { display: none; }
html.celular .sidebar-nav {
  flex: 1; display: flex; flex-direction: row; gap: 2px; overflow: visible;
}
html.celular .nav-item {
  flex: 1 1 0; min-width: 0; height: 52px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0 2px; border-radius: 999px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .1px;
  color: var(--texto); background: transparent;
}
html.celular .nav-item svg { width: 25px; height: 25px; color: currentColor; opacity: 1; }
html.celular .nav-item > svg:not(.cel-icono) { display: none; }
html:not(.celular) .cel-icono { display: none; }
html.celular .nav-item span:not(.nav-badge) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* “Configura…” y “Contratac…” (tarea #75, 14-oct-2026): con cinco pestañas, en un teléfono de 390 px a cada una le tocan
   unos 66 px y las dos palabras largas no cabían a 10,5 px. Ahora cada pestaña parte del ancho de su palabra y reparte
   el sobrante (a “Oficina” le sobraba la mitad) y la letra baja un poco en pantallas angostas: así se leen enteras,
   como en la app de iOS. */
html.celular .nav-item { flex: 1 1 auto; font-size: clamp(9.5px, 2.7vw, 10.5px); letter-spacing: -.15px; padding: 0 1px; }
html.celular .nav-item.activo { background: var(--realce-fuerte); color: var(--texto); font-weight: 600; }
html.celular .nav-item:hover { background: transparent; }
html.celular .nav-item.activo:hover { background: var(--realce-fuerte); }
html.celular .nav-item:active { scale: .94; }
/* En la barra solo cuenta lo que te espera (rojo), como en la app: los mensajes sin leer se ven en cada chat. */
html.celular #badge-mensajes { display: none !important; }
html.celular .nav-badge.rojo {
  position: absolute; top: 4px; left: calc(50% + 6px); margin: 0;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  font-size: 11px; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel) 90%, transparent);
}
/* Dentro de un chat la barra se esconde (la conversación ocupa la pantalla), igual que en la app. */
html.celular[data-cel-msj="chat"] #app:has(#seccion-mensajes.visible) .sidebar {
  translate: 0 calc(100% + var(--cel-barra-abajo) + 20px); opacity: 0; pointer-events: none;
}
/* Con el teclado arriba tampoco: el teclado la taparía igual y en Android quedaría montada sobre él. */
html.celular.cel-teclado .sidebar { opacity: 0; pointer-events: none; }

/* ─── Lo que flotaba en la esquina ─── */
/* El logo y el botón de fallos caían encima del compositor; en el teléfono, el fallo se reporta desde Configuración. */
html.celular #btn-marca, html.celular #btn-bicho { display: none !important; }
html.celular #btn-version {
  left: auto !important; right: 12px !important; bottom: auto !important;
  top: calc(var(--cel-arriba-segura) + 10px) !important;
}

/* ═══ MENSAJES ═══ */
html.celular .msj-layout {
  display: block; position: relative; height: 100%; overflow: hidden;
  grid-template-columns: none;
}
/* La lista: título grande, buscador, destacados y las conversaciones. */
html.celular .msj-lista {
  display: block; position: absolute; inset: 0; z-index: 1;
  border: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--cel-arriba-segura) + 8px) 0 var(--cel-hueco-barra);
  background: var(--fondo);
  transition: translate var(--cel-empuje) var(--cel-curva), visibility 0s;
}
html.celular .msj-lista::after {   /* la lista se apaga un poco mientras el chat entra encima */
  content: ''; position: fixed; inset: 0; pointer-events: none; background: #000; opacity: 0;
  transition: opacity var(--cel-empuje) var(--cel-curva);
}
html.celular[data-cel-msj="chat"] .msj-lista {
  translate: -28% 0; visibility: hidden;
  transition: translate var(--cel-empuje) var(--cel-curva), visibility 0s var(--cel-empuje);
}
html.celular[data-cel-msj="chat"] .msj-lista::after { opacity: .28; }
html.celular .msj-lista-cabeza { padding: 0 16px 10px; display: flex; flex-direction: column-reverse; align-items: stretch; gap: 8px; }
html.celular #btn-nuevo-canal {
  align-self: flex-end; width: 44px; height: 44px; border-radius: 50%;
  color: var(--texto);
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--texto) 12%, transparent);
  display: grid; place-items: center;
}
html.celular #btn-nuevo-canal svg { width: 20px; height: 20px; }
html.celular .msj-buscar-caja {
  margin: 0 16px 12px; height: 38px; border-radius: 999px;
  background: var(--realce); padding: 0 12px; gap: 6px;
}
html.celular .msj-buscar-caja svg { width: 17px; height: 17px; }
html.celular #msj-buscar { font-size: 17px; height: 100%; }
/* Destacados: tres por fila, caras de 70. */
html.celular .msj-fijados {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 8px; row-gap: 14px; padding: 6px 16px 8px;
}
html.celular .msj-fijados:empty { display: none; }
html.celular .msj-fijado { gap: 6px; padding: 0; }
html.celular .msj-fijado:active { scale: .95; }
html.celular .msj-fijado-foto { width: 76px; height: 76px; }
html.celular .msj-fijado .msj-canal-avatares .chat-agente-avatar:only-child,
html.celular .msj-fijado-foto > .chat-agente-avatar { width: 70px; height: 70px; font-size: 28px; }
html.celular .msj-fijado-nombre { font-size: 12px; max-width: 100%; }
/* Filas: cara de 50, nombre de 17 y la vista previa en dos líneas. */
html.celular .msj-canales { padding: 0; }
html.celular .msj-canal {
  padding: 8px 16px; gap: 12px; border-radius: 0; min-height: 66px; align-items: center;
}
html.celular .msj-canal:hover, html.celular .msj-canal.sel { background: transparent; }
html.celular .msj-canal:active { background: var(--realce); }
html.celular .msj-canal-retrato { flex: none; }
html.celular .msj-canal .msj-canal-avatares .chat-agente-avatar { width: 50px; height: 50px; font-size: 20px; }
html.celular .msj-canal .msj-canal-avatares .chat-agente-avatar:not(:only-child) { width: 34px; height: 34px; font-size: 14px; margin-left: -14px; }
html.celular .msj-canal .msj-canal-avatares .chat-agente-avatar:not(:only-child):first-child { margin-left: 0; }
html.celular .msj-canal-info { gap: 3px; align-self: center; }
html.celular .msj-canal-info b { font-size: 17px; font-weight: 400; color: var(--texto); }
html.celular .msj-canal.sin-leer .msj-canal-info b { font-weight: 650; }
html.celular .msj-canal-info > span {
  font-size: 15px; line-height: 1.3; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.celular .msj-canal-lado { align-self: stretch; justify-content: space-between; padding: 3px 0 4px; }
html.celular .msj-canal-hora { font-size: 13px; }
html.celular .msj-globo { min-width: 20px; height: 20px; font-size: 12px; line-height: 20px; padding: 0 6px; }
html.celular .msj-enlinea { width: 13px; height: 13px; }

/* ─── El chat: entra desde la derecha y ocupa toda la pantalla ─── */
html.celular .msj-conv {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  background: var(--fondo);
  translate: 100% 0; visibility: hidden;
  transition: translate var(--cel-empuje) var(--cel-curva), visibility 0s var(--cel-empuje);
}
html.celular[data-cel-msj="chat"] .msj-conv {
  translate: 0 0; visibility: visible;
  transition: translate var(--cel-empuje) var(--cel-curva), visibility 0s;
}
/* La cabecera: la cara en el centro y debajo el nombre en su píldora de vidrio, como en la app; a la izquierda, volver. */
html.celular .msj-conv-cabeza {
  padding: calc(var(--cel-arriba-segura) + 6px) 64px 12px;
  min-height: calc(var(--cel-arriba-segura) + 104px);
  align-items: flex-start;
}
html.celular .msj-conv-cabeza .msj-acciones { display: none; }   /* sin llamada ni eliminar: la app no los tiene */
html.celular .msj-cab-centro { gap: 0; max-width: 100%; }
html.celular .msj-cab-centro .msj-canal-avatares .chat-agente-avatar { width: 50px; height: 50px; font-size: 20px; }
html.celular .msj-cab-centro .msj-canal-avatares .chat-agente-avatar:not(:only-child) { width: 38px; height: 38px; font-size: 15px; }
html.celular .msj-cab-centro .msj-cab-vidrio { margin-top: -4px; padding: 6px 14px 6px; border-radius: 999px; max-width: calc(100vw - 128px); }
html.celular .msj-cab-centro .msj-cab-vidrio { position: relative; display: flex; flex-direction: row; align-items: center; gap: 4px; overflow: visible; }
html.celular .msj-cab-centro b { font-size: 15px; font-weight: 600; max-width: calc(100vw - 170px); }
html.celular .msj-cab-centro .msj-cab-cargo { font-size: 0; overflow: visible; }   /* el cargo no va en la píldora: solo el nombre y su flecha */
html.celular .msj-cab-flecha { width: 13px; height: 13px; opacity: .6; }
html.celular .msj-cab-centro .msj-cab-linea {
  position: absolute; top: calc(100% + 3px); left: 50%; translate: -50% 0;
  font-size: 11px; white-space: nowrap; max-width: none;
}
html.celular .msj-cab-linea i { display: none; }
html.celular .msj-cab-centro.ficha-abierta .msj-cab-flecha { transform: none; }
html.celular .cel-atras {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  color: var(--texto);
  background: color-mix(in srgb, var(--panel-2) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--texto) 10%, transparent);
}
html.celular .cel-atras svg { width: 22px; height: 22px; }
html.celular .cel-atras:active { scale: .92; }
html.celular .msj-conv > .cel-atras { position: absolute; z-index: 7; left: 12px; top: calc(var(--cel-arriba-segura) + 10px); }
html:not(.celular) .cel-atras, html:not(.celular) .cel-barra, html:not(.celular) .cel-config-cabeza,
html:not(.celular) #cel-config-cuenta, html:not(.celular) .cel-config-pie, html:not(.celular) .cel-velo-ficha,
html:not(.celular) .cel-asa { display: none !important; }

/* El hilo vuelve a ser su propia caja de desplazamiento: así funcionan “pegado abajo”, la línea “Nuevos” y el teclado. */
html.celular .msj-hilo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--cel-arriba-segura) + 112px) 12px 10px;
  touch-action: pan-y;
}
html.celular .msj-hilo .burbuja { max-width: 78%; font-size: 17px; line-height: 1.32; padding: 8px 14px; }
html.celular .msj-hilo .burbuja-hora { font-size: 11px; }
html.celular .msj-hilo .burbuja, html.celular .msj-hilo .burbuja * {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
html.celular .msj-hilo .burbuja input, html.celular .msj-hilo .burbuja textarea { -webkit-user-select: text; user-select: text; }
html.celular .msj-hilo .burbuja.cel-arrastrando { transition: none; will-change: translate; }
html.celular .msj-hilo .burbuja.cel-volviendo { transition: translate .32s var(--cel-curva); }
html.celular .cel-flecha-responder {
  position: absolute; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: var(--realce); color: var(--texto-2);
  opacity: 0; scale: .6; transition: opacity .32s var(--cel-curva);
}
html.celular .cel-flecha-responder.lista { color: var(--texto); background: var(--realce-fuerte); }
html.celular .cel-flecha-responder svg { width: 15px; height: 15px; }
html.celular .msj-hilo { position: relative; }
html.celular .msj-barra { display: none; }

/* El compositor: pegado abajo, sobre el indicador de inicio (o justo sobre el teclado). */
html.celular .msj-entrada {
  flex: none;
  padding: 6px 12px calc(var(--cel-abajo-seguro) + 6px);
  gap: 8px; align-items: flex-end;
}
html.celular.cel-teclado .msj-entrada { padding-bottom: 6px; }
html.celular .msj-entrada .msj-caja { min-height: 36px; border-radius: 18px; }
html.celular #msj-texto { font-size: 17px; line-height: 1.3; padding-top: 7px; padding-bottom: 7px; max-height: 128px; }
html.celular .msj-mas .chat-icono, html.celular #pend-boton { width: 36px; height: 36px; }
html.celular .chat-mas-menu { min-width: 240px; }
html.celular .chat-mas-menu button { min-height: 46px; font-size: 16px; }

/* El panel de lo que te espera mide contra la conversación, que ahora es la pantalla. */
html.celular .pend-capa { bottom: calc(var(--cel-abajo-seguro) + 64px); }
html.celular.cel-teclado .pend-capa { bottom: 64px; }
html.celular .pend-ficha { max-width: 100%; }

/* ─── La ficha del colaborador: una hoja que sube ─── */
/* Por su id: así le gana a `.msj-layout.sin-ficha .msj-miembros` y a `.ficha-al-frente` del escritorio, que la
   esconderían o la pondrían en otro sitio (app.js usa `sin-ficha` para saber si su computador transmite). */
html.celular #msj-miembros {
  display: block !important;
  position: fixed; z-index: 60;
  left: 0; right: 0; bottom: 0; top: calc(var(--cel-arriba-segura) + 10px);
  width: auto; max-width: none; min-width: 0;
  border: 0; border-radius: 16px 16px 0 0;
  background: var(--fondo);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 0 calc(var(--cel-abajo-seguro) + 20px);
  translate: 0 calc(100% + 20px); visibility: hidden; opacity: 1; pointer-events: auto;
  transition: translate .42s var(--cel-curva), visibility 0s .42s;
}
html.celular.cel-ficha #msj-miembros {
  translate: 0 var(--arrastre, 0px); visibility: visible;
  transition: translate .42s var(--cel-curva), visibility 0s;
}
html.celular.cel-ficha #msj-miembros.cel-arrastrando { transition: none; }
html.celular .msj-miembros > *, html.celular #msj-ficha > *, html.celular .msj-lado > * { width: auto !important; max-width: none !important; }
html.celular .cel-asa {
  display: block; position: sticky; top: 0; z-index: 3; height: 18px; margin-bottom: -18px; pointer-events: none;
}
html.celular .cel-asa::before {
  content: ''; position: absolute; left: 50%; top: 6px; width: 36px; height: 5px; margin-left: -18px;
  border-radius: 999px; background: color-mix(in srgb, var(--texto) 26%, transparent);
}
html.celular #ficha-cerrar {
  position: sticky; top: 12px; float: left; z-index: 4;
  display: grid; place-items: center; width: 40px; min-width: 40px; height: 40px; padding: 0;
  margin: 12px 0 -52px 14px; border-radius: 50%; border: 0; color: var(--texto);
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html.celular #ficha-cerrar svg { width: 16px; height: 16px; }
html.celular #msj-ficha, html.celular .msj-lado { padding-left: 16px; padding-right: 16px; }
html.celular .ficha-cabeza { padding-top: 28px; }
html.celular .cola-cabeza, html.celular .cola-marca, html.celular .cola-agarre, html.celular .cola-acciones { display: none !important; }
html.celular .cola-lista { gap: 10px; }
html.celular .cola-item {
  background: var(--panel-2); border: 0; border-radius: 18px; padding: 0; min-height: 0;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
html.celular .cola-item .cola-abrir { padding: 14px 16px; gap: 3px; width: 100%; }
html.celular .cola-item-titulo {
  font-size: 17px; font-weight: 600; line-height: 1.25; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.celular .cola-item-estado { font-size: 15px; text-transform: none; letter-spacing: 0; font-weight: 500; }
html.celular .cola-item-repite { font-size: 13px; }
html.celular .cola-item:active { background: var(--panel-3); }
html.celular .cel-velo-ficha {
  position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transition: opacity .42s var(--cel-curva), visibility 0s .42s;
}
html.celular.cel-ficha .cel-velo-ficha { opacity: 1; visibility: visible; transition: opacity .42s var(--cel-curva), visibility 0s; }
html.celular .ficha-cabeza { position: static; }

/* ─── Su computador en grande: una pantalla propia, como en la app ─── */
/* Absoluta sobre Mensajes (que sigue a lo que se ve: con el teclado arriba se encoge con él) y siempre en oscuro, como
   la de la app de iOS. Por su id: las reglas del escritorio para pantallas estrechas la meten en la rejilla. */
html.celular #msj-computador:not([hidden]) {
  --texto: #f5f5f5; --texto-2: #cfcfcf; --texto-suave: #8a8a8a; --panel: #0d0d0d; --panel-2: #161616; --panel-3: #1e1e1e;
  --realce: rgba(255, 255, 255, .1); --realce-fuerte: rgba(255, 255, 255, .14); --fondo: #000;
  --contraste: #fff; --contraste-texto: #000;
  position: absolute; inset: 0; z-index: 70; width: auto; height: auto; min-height: 0; max-width: none;
  grid-column: auto; grid-row: auto; container-type: size;
  --reserva: 236px;   /* lo que no es su pantalla: la cabecera, quién lo usa, el interruptor, la ayuda y la barra */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; place-items: initial;
  padding: var(--cel-arriba-segura) env(safe-area-inset-right, 0px) calc(var(--cel-abajo-seguro) + 8px) env(safe-area-inset-left, 0px);
  border-radius: 0; background: #000; color: var(--texto); overflow: hidden;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.celular.cel-teclado #msj-computador:not([hidden]) { padding-bottom: 8px; --reserva: 164px; }
/* Con el teclado arriba solo queda lo que se usa: su pantalla, el interruptor y la barra. */
html.celular.cel-teclado #msj-computador .computador-quien, html.celular.cel-teclado #msj-computador .cel-comp-ayuda { display: none; }
html.celular #msj-computador .cel-comp-cabeza {
  flex: none; position: relative; height: 54px; display: flex; align-items: center; justify-content: center; padding: 0 64px;
}
html.celular #msj-computador .cel-comp-titulo {
  font-size: 17px; font-weight: 600; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.celular #msj-computador .computador-cerrar, html.celular #msj-computador .cel-comp-entero {
  position: absolute; z-index: 3; top: calc(var(--cel-arriba-segura) + 7px);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 0;
  color: var(--texto); background: rgba(255, 255, 255, .12);
}
html.celular #msj-computador .computador-cerrar { left: calc(env(safe-area-inset-left, 0px) + 12px); right: auto; }
/* En el teléfono esto ya es una pantalla propia, y su barra de abajo trae el teclado: ahí “toda la pantalla” dejaría sin poder escribir. */
html.celular #msj-computador .computador-a-toda, html.celular #maquina-estado .computador-completa { display: none; }
html.celular #msj-computador .cel-comp-entero { right: calc(env(safe-area-inset-right, 0px) + 12px); }
html.celular #msj-computador .cel-comp-entero[hidden] { display: none; }
html.celular #msj-computador .computador-cerrar svg, html.celular #msj-computador .cel-comp-entero svg { width: 17px; height: 17px; }
html.celular #msj-computador .computador-escena { width: 100%; flex: none; gap: 0; align-items: stretch; }
html.celular #msj-computador .computador-escena::before { inset: 0 -10% 30%; opacity: .3; }
html.celular #msj-computador .computador-quien { padding: 2px 16px 10px; font-size: 13px; }
/* A lo ancho y en su proporción; en un teléfono pequeño con el teclado arriba, se achica (también en su proporción)
   antes que empujar la barra fuera de la pantalla. */
html.celular #msj-computador .computador-pantalla {
  width: min(100%, calc((100cqh - var(--reserva)) * 16 / 9)); align-self: center; aspect-ratio: 16 / 9;
  border-radius: 0; background: #000;
}
html.celular #msj-computador .computador-estado { padding: 12px 16px 0; }
html.celular #msj-computador .cel-comp-ayuda {
  margin: 12px 20px 0; font-size: 13px; line-height: 1.35; color: var(--texto-suave); text-align: center;
}
/* La barra de abajo: el teclado y lo que el del teléfono no trae. */
html.celular #msj-computador .cel-comp-barra {
  position: relative; flex: none; align-self: center; margin-top: auto;
  display: flex; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12);
}
html.celular #msj-computador .cel-comp-barra button {
  width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--texto); -webkit-touch-callout: none; user-select: none;
}
html.celular #msj-computador .cel-comp-barra button svg { width: 19px; height: 19px; }
html.celular #msj-computador .cel-comp-barra button.pulsada { background: rgba(255, 255, 255, .16); }
html.celular #msj-computador .cel-comp-barra button.activa { background: rgba(255, 255, 255, .2); }
html.celular #msj-computador .cel-comp-esc { font-size: 13px; font-weight: 600; }
html.celular #msj-computador .cel-comp-sep { width: 1px; height: 22px; margin: 0 4px; background: rgba(255, 255, 255, .18); }
/* La caja que recibe el teclado del teléfono: no se ve, pero tiene tamaño (con 0 o escondida, Safari no la enfoca) y
   letra de 16 px (con menos, Safari acerca la página al enfocarla). */
html.celular #msj-computador .cel-comp-receptor {
  position: absolute; left: 50%; bottom: 0; width: 2px; height: 2px; padding: 0; border: 0; margin: 0;
  font-size: 16px; opacity: 0; color: transparent; caret-color: transparent; background: transparent; pointer-events: none;
}
html:not(.celular) .cel-comp-cabeza, html:not(.celular) .cel-comp-barra, html:not(.celular) .cel-comp-ayuda { display: none !important; }

/* ─── El menú de un globo o de un chat: una hoja abajo ─── */
html.celular #msj-menu-ctx {
  position: fixed !important; z-index: 9000;
  left: 10px !important; right: 10px !important; top: auto !important;
  bottom: calc(var(--cel-abajo-seguro) + 10px) !important;
  min-width: 0; padding: 0; border-radius: 0;
  display: flex; flex-direction: column; gap: 10px;
  background: transparent; border: 0; box-shadow: none;
  animation: cel-menu-entra .26s var(--cel-curva) both;
}
/* El velo de los menús es un elemento de verdad (celular.js): recibe el toque de fuera y lo corta, para que no active
   lo de debajo. */
.cel-velo-menu { display: none; }
html.celular.cel-menu-abierto .cel-velo-menu {
  display: block; position: fixed; inset: 0; z-index: 8999; background: rgba(0, 0, 0, .4);
  animation: cel-velo-entra .2s ease both;
}
@keyframes cel-velo-entra { from { opacity: 0; } }
/* El menú de espacios vive dentro de la barra de pestañas (su propia capa): con él abierto, la barra sube por encima del
   velo pero su vidrio y sus botones se apartan, y solo queda el menú. */
html.celular.cel-menu-org .sidebar { z-index: 9000; opacity: 1; pointer-events: auto; }
html.celular.cel-menu-org .sidebar::before, html.celular.cel-menu-org .sidebar-nav { visibility: hidden; }
@keyframes cel-menu-entra { from { opacity: 0; translate: 0 14px; } }
html.celular .cel-opciones { display: flex; flex-direction: column; padding: 6px; border-radius: 20px; background: var(--panel-2); }
html.celular #msj-menu-ctx button { min-height: 52px; font-size: 17px; padding: 0 14px; gap: 12px; border-radius: 14px; }
html.celular .cel-vista-globo { display: flex; max-height: 42vh; overflow: hidden; pointer-events: none; }
html.celular .cel-vista-globo.mia { justify-content: flex-end; }
html.celular .cel-vista-globo .burbuja {
  max-width: 86%; margin: 0; font-size: 17px; line-height: 1.32; padding: 8px 14px;
  background: var(--ficha-sobre-velo, var(--panel-2));
}
html.celular .cel-vista-globo .burbuja.director { background: var(--burbuja-yo, var(--contraste)); }
html.celular .cel-vista-globo .burbuja::after, html.celular .cel-vista-globo .burbuja-foto { display: none; }
html.celular #msj-menu-ctx button svg { width: 20px; height: 20px; }

/* ═══ CONFIGURACIÓN: lista agrupada → detalle ═══ */
html.celular .config-layout { display: block; position: relative; height: 100%; overflow: hidden; }
html.celular .config-nav {
  position: absolute; inset: 0; z-index: 1;
  display: block; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--cel-arriba-segura) + 8px) 16px var(--cel-hueco-barra);
  background: var(--fondo); top: 0;
  transition: translate var(--cel-empuje) var(--cel-curva), visibility 0s;
}
html.celular[data-cel-config="grupo"] .config-nav {
  translate: -28% 0; visibility: hidden;
  transition: translate var(--cel-empuje) var(--cel-curva), visibility 0s var(--cel-empuje);
}
html.celular .config-nav-titulo { display: none; }
html.celular .cel-config-cabeza { padding: 4px 0 14px; }
html.celular .config-nav-grupo {
  display: block; margin: 24px 0 8px 18px; padding: 0;
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--texto-suave);
}
html.celular .config-nav-item, html.celular .cel-fila {
  width: 100%; min-height: 50px; padding: 0 14px 0 16px; margin: 0;
  display: flex; align-items: center; gap: 14px;
  background: var(--panel-2); border: 0; border-radius: 0;
  font-size: 17px; font-weight: 400; color: var(--texto); text-align: left; font-family: inherit;
  position: relative;
}
html.celular .config-nav-item svg { width: 21px; height: 21px; color: var(--texto-2); opacity: 1; }
html.celular .config-nav-item::after {   /* el chevron de iOS */
  content: ''; margin-left: auto; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--texto-suave); border-top: 2px solid var(--texto-suave); rotate: 45deg; opacity: .7;
}
html.celular .config-nav-item.activo, html.celular .config-nav-item:hover { background: var(--panel-2); color: var(--texto); }
html.celular .config-nav-item:active, html.celular .cel-fila:active { background: var(--panel-3); }
html.celular .config-nav-grupo + .config-nav-item { border-radius: 12px 12px 0 0; }
html.celular .config-nav-item:has(+ .config-nav-grupo), html.celular .config-nav-item:has(+ .config-nav-salir) { border-radius: 0 0 12px 12px; }
html.celular .config-nav-grupo + .config-nav-item:has(+ .config-nav-grupo),
html.celular .config-nav-grupo + .config-nav-item:has(+ .config-nav-salir) { border-radius: 12px; }
html.celular .config-nav-item.oculto { display: none; }
html.celular .config-nav-salir {
  margin-top: 26px; border-top: 0; border-radius: 12px; padding-top: 0;
  justify-content: center; color: var(--peligro); font-weight: 500;
}
html.celular .config-nav-salir svg { display: none; }
html.celular .config-nav-salir::after { display: none; }
html.celular .cel-chevron { width: 16px; height: 16px; margin-left: auto; color: var(--texto-suave); flex: none; opacity: .8; }
html.celular .cel-fila { border-radius: 12px; }
html.celular .cel-cuenta { min-height: 84px; gap: 14px; }
html.celular .cel-cuenta-cara {
  width: 60px; height: 60px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; background: var(--panel-3); color: var(--texto);
  font-size: 26px; font-weight: 700;
}
html.celular .cel-cuenta-cara img { width: 100%; height: 100%; object-fit: cover; }
html.celular .cel-cuenta-datos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html.celular .cel-cuenta-datos b { font-size: 20px; font-weight: 600; }
html.celular .cel-cuenta-datos span { font-size: 15px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.celular .cel-cuenta-datos small { font-size: 12px; color: var(--texto-suave); }
html.celular .cel-espacio-sello {
  width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: var(--panel-3); font-weight: 650; font-size: 15px;
}
html.celular .cel-espacio { min-height: 62px; }
html.celular .cel-espacio-datos { display: flex; flex-direction: column; min-width: 0; }
html.celular .cel-espacio-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.celular .cel-espacio-datos small { font-size: 13px; color: var(--texto-suave); }
html.celular .cel-aviso-intelecto { align-items: flex-start; padding: 16px; gap: 12px; margin-bottom: 24px; min-height: 0; }
html.celular .cel-aviso-intelecto > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f85149; margin-top: 8px; }
html.celular .cel-aviso-intelecto > span { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
html.celular .cel-aviso-intelecto b { font-size: 17px; font-weight: 600; }
html.celular .cel-aviso-intelecto span span { font-size: 15px; color: var(--texto-2); line-height: 1.35; }
html.celular .cel-aviso-intelecto em {
  font-style: normal; font-size: 15px; font-weight: 600; margin-top: 6px; padding: 7px 14px; border-radius: 999px;
  background: var(--contraste); color: var(--contraste-texto);
}
html.celular .cel-valor { margin-left: auto; color: var(--texto-suave); font-size: 16px; flex: none; }
html.celular .cel-valor + .cel-chevron { margin-left: 0; }
html.celular .cel-config-pie { margin-top: 26px; }
/* El detalle de un grupo entra desde la derecha, con su barra de volver. */
html.celular .config-contenido {
  position: absolute; inset: 0; z-index: 2;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 16px var(--cel-hueco-barra);
  background: var(--fondo);
  translate: 100% 0; visibility: hidden;
  transition: translate var(--cel-empuje) var(--cel-curva), visibility 0s var(--cel-empuje);
}
html.celular[data-cel-config="grupo"] .config-contenido {
  translate: 0 0; visibility: visible;
  transition: translate var(--cel-empuje) var(--cel-curva), visibility 0s;
}
html.celular .cel-barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  margin: 0 -16px 6px; padding: calc(var(--cel-arriba-segura) + 6px) 12px 8px;
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
html.celular .cel-barra-titulo { font-size: 17px; font-weight: 600; flex: 1; text-align: center; margin-right: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.celular .config-grupo .config-cabeza h2 { font-size: 22px; letter-spacing: -.3px; }
html.celular .config-grupo > .config-cabeza:first-child h2 { display: none; }   /* el título ya va en la barra de arriba */
html.celular .config-grupo > .config-cabeza:first-child:not(:has(> :not(h2))) { display: none; }
html.celular .config-grupo > .ayuda { font-size: 14px; }
html.celular .config-grupo .panel { padding: 16px; border-radius: 16px; }

/* El menú de espacios (el selector de Notion): una hoja desde abajo. */
html.celular #org-menu {
  position: fixed !important; z-index: 9000;
  left: 8px !important; right: 8px !important; top: auto !important; width: auto !important;
  bottom: calc(var(--cel-abajo-seguro) + 8px) !important;
  max-height: calc(var(--cel-alto, 100dvh) - var(--cel-arriba-segura) - 40px);
  border-radius: 22px; padding: 8px; box-shadow: none;
}
html.celular #org-menu .org-item { min-height: 48px; font-size: 16px; }

/* ═══ CONTRATACIÓN: título grande, buscador, filtros que se deslizan y el mosaico de dos columnas ═══ */
html.celular .app-main #seccion-contratacion {
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--cel-arriba-segura) + 8px) 0 var(--cel-hueco-barra);
}
html.celular .contrata-cabeza { display: flex; flex-direction: column; align-items: stretch; padding: 0 16px; margin: 0 0 4px; }
html.celular .contrata-titulo { display: contents; }
html.celular .contrata-titulo h2 { font-size: 17px; font-weight: 600; letter-spacing: 0; text-align: center; padding: 10px 0 14px; }
html.celular .contrata-titulo .ayuda { display: none; }
html.celular .cel-contrata-pie { font-size: 13px; color: var(--texto-suave); margin: 10px 2px 2px; }
html:not(.celular) .cel-contrata-pie { display: none; }
html.celular .contrata-buscar {
  flex: none; height: 40px; border-radius: 999px; background: var(--realce); border: 0; padding: 0 12px; margin: 0;
}
html.celular .contrata-buscar input { font-size: 17px; }
/* “Crear un rol” (16-oct-2026): en el teléfono el buscador sigue a lo ancho y el botón va debajo, a la izquierda */
html.celular .contrata-lado { display: contents; }
html.celular .contrata-crear { order: 3; align-self: flex-start; height: 36px; margin-top: 10px; background: var(--realce); }
html.celular .contrata-areas { gap: 10px; margin: 6px 0 16px; }
html.celular .filtro-fila {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 16px; gap: 8px;
  overscroll-behavior-x: contain;
}
html.celular .filtro-fila::-webkit-scrollbar { display: none; }
html.celular .filtro-fila > :first-child:not(button) {   /* el rótulo de la fila */
  flex: none; width: auto; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--texto-suave);
}
html.celular .area-chip, html.celular .cargo-chip {
  flex: none; min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px;
  font-size: 14px; font-weight: 500; background: var(--realce); white-space: nowrap;
}
html.celular .area-chip.activo, html.celular .cargo-chip.activo { background: var(--contraste); color: var(--contraste-texto); }
html.celular .contrata-carriles {
  columns: auto; display: flex; align-items: flex-start; gap: 14px; padding: 0 16px;
}
html.celular .cel-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
html.celular .cel-col > .fp-celda { padding: 0; margin: 0; break-inside: auto; }
html.celular .ficha-persona {
  width: 100%; border-radius: 22px; overflow: hidden; background: var(--panel-2);
}
html.celular .ficha-persona:hover { transform: none; }
html.celular .ficha-persona:active { scale: .97; transition: scale .2s var(--cel-curva); }
html.celular .cel-col .fp-celda .fp-portada { height: var(--alto-portada, 160px); }
html.celular .fp-cara { width: 56px; height: 56px; left: 10px; bottom: -31px; box-shadow: 0 0 0 3px var(--panel-2); }
html.celular .fp-cuerpo { padding: 38px 12px 4px; gap: 4px; }
html.celular .fp-nombre { font-size: 17px; font-weight: 600; }
html.celular .fp-cargo { font-size: 13px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.celular .fp-enfoque { font-size: 12px; -webkit-line-clamp: 2; }
html.celular .fp-rasgos { display: none; }
html.celular .fp-pie { flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 12px 14px; }
html.celular .fp-area { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: var(--realce); }
html.celular .fp-marca { font-size: 12px; }

/* La hoja del candidato: sube desde abajo, a lo ancho, con su asa. */
/* Por su id y sin !important: un !important le ganaba a su propia animación (no subía) y al arrastre del dedo. */
html.celular #perfil-hoja {
  position: fixed; left: 0; right: 0; top: calc(var(--cel-arriba-segura) + 12px); bottom: 0;
  width: 100%; max-width: none; max-height: none; height: auto;
  translate: none; transform: none;
  border-radius: 22px 22px 0 0; overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: calc(var(--cel-abajo-seguro) + 20px);
  animation: cel-hoja-sube .42s var(--cel-curva) both;
}
html.celular #perfil-hoja.saliendo { animation: cel-hoja-baja .3s cubic-bezier(.4, 0, .9, .6) both; }
@keyframes cel-hoja-sube { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes cel-hoja-baja { from { translate: 0 0; } to { translate: 0 100%; } }
html.celular #perfil-hoja.cel-arrastrando { transition: none; }
html.celular .ph-cerrar { width: 36px; height: 36px; top: 12px; right: 12px; }
html.celular .ph-portada { height: 270px; }
html.celular .ph-nombre { font-size: 28px; }
html.celular .ph-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
html.celular .ph-acciones .btn { min-height: 50px; flex: 1 1 auto; border-radius: 999px; font-size: 17px; font-weight: 600; border: 0; }
html.celular .ph-acciones .btn.primario { width: 100%; background: var(--contraste); color: var(--contraste-texto); }
html.celular .ph-seccion { background: var(--panel-2); border-radius: 18px; padding: 16px; margin-top: 14px; }
/* La hoja de “Crear un rol” (16-oct-2026): sube desde abajo como la del candidato; las secciones sin tarjeta (es un
   formulario, no una ficha), letra de 16 px en los campos (con menos, Safari acerca la página al tocarlos) y el pie
   por encima de la barra de inicio. */
html.celular #rol-hoja {
  position: fixed; left: 0; right: 0; top: calc(var(--cel-arriba-segura) + 12px); bottom: 0;
  width: 100%; max-width: none; max-height: none; height: auto;
  translate: none; transform: none; border-radius: 22px 22px 0 0;
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  animation: cel-hoja-sube .42s var(--cel-curva) both;
}
html.celular #rol-hoja.saliendo { animation: cel-hoja-baja .3s cubic-bezier(.4, 0, .9, .6) both; }
html.celular #rol-hoja .ph-portada { height: 110px; }
html.celular #rol-hoja .ph-seccion { background: none; border-radius: 0; padding: 0; margin-top: 22px; }
html.celular #rol-hoja .rol-pie { padding-bottom: calc(var(--cel-abajo-seguro) + 14px); }
html.celular #rol-hoja .rol-nombre { font-size: 26px; }
html.celular #rol-hoja .rol-cargo { font-size: 17px; }
/* La tarjeta de un usuario (Configuración → Usuarios, 4-nov-2026): la misma hoja, y portada baja, porque lo que se viene a ver son sus sub-ventanas. */
html.celular #usuario-hoja {
  position: fixed; left: 0; right: 0; top: calc(var(--cel-arriba-segura) + 12px); bottom: 0;
  width: 100%; max-width: none; max-height: none; height: auto;
  translate: none; transform: none; border-radius: 22px 22px 0 0;
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  animation: cel-hoja-sube .42s var(--cel-curva) both;
}
html.celular #usuario-hoja.saliendo { animation: cel-hoja-baja .3s cubic-bezier(.4, 0, .9, .6) both; }
html.celular #usuario-hoja .ph-portada { height: 110px; }
html.celular #usuario-hoja .ph-nombre { font-size: 24px; }
html.celular #usuario-hoja .usr-modulo { padding-bottom: calc(var(--cel-abajo-seguro) + 20px); }
html.celular #rol-hoja .rol-funcion { font-size: 16px; }
html.celular #rol-hoja .rol-chip { height: 36px; font-size: 14px; }
html.celular:has(#rol-hoja:not(.oculto)) .sidebar { opacity: 0; pointer-events: none; }
html.celular .ficha-persona { border: 0; }
html.celular .contrata-buscar, html.celular .msj-buscar-caja { height: 40px; }

/* ═══ OFICINA: la foto a pantalla completa ═══ */
html.celular #seccion-oficina { padding: 0; }
html.celular .oficina-proximamente { position: absolute; inset: 0; min-height: 0; height: 100%; border-radius: 0; }
html.celular .oficina-proximamente img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.celular .oficina-proximamente p { font-size: 20px; font-weight: 600; padding: 0 40px; line-height: 1.3; }

/* ═══ Ventanas: los formularios suben desde abajo; los avisos siguen al centro (como las alertas de iOS) ═══ */
html.celular .modal { padding: 0; align-items: flex-end; }
html.celular .modal.dialogo-capa { align-items: center; padding: 20px; }
html.celular .modal-caja {
  width: 100%; max-width: none; max-height: calc(var(--cel-alto, 100dvh) - var(--cel-arriba-segura) - 12px);
  border-radius: 22px 22px 0 0; padding: 22px 18px calc(var(--cel-abajo-seguro) + 18px);
  animation: cel-hoja-sube .42s var(--cel-curva) both;
}
html.celular .modal-cerrar { width: 36px; height: 36px; }
html.celular .modal .modal-caja { background: var(--fondo); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Con una hoja o un diálogo encima, la barra de pestañas no se asoma por debajo. */
html.celular:has(.modal:not(.oculto), .dialogo-capa, #perfil-hoja:not(.oculto), #usuario-hoja:not(.oculto)) .sidebar { opacity: 0; pointer-events: none; }
html.celular .dialogo-caja { width: min(340px, calc(100vw - 40px)); border-radius: 22px; }
html.celular .dialogo-caja .btn { min-height: 44px; font-size: 16px; }

/* La cita sobre la caja, como en la app: una barra a la izquierda, quién lo dijo y dos líneas de lo que dijo. */
html.celular .msj-citando:not(.oculto) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px;
  position: relative; width: 100%; padding: 8px 4px 8px 22px; border-radius: 14px; background: var(--panel-2);
}
html.celular .msj-citando::before {
  content: ''; position: absolute; left: 11px; top: 9px; bottom: 9px; width: 3px; border-radius: 999px; background: var(--texto-suave);
}
html.celular .msj-citando .cita-autor { grid-column: 1; font-size: 12px; color: var(--texto); }
html.celular .msj-citando .cita-texto {
  grid-column: 1; font-size: 12px; color: var(--texto-suave); white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.celular .msj-citando .cita-quitar { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; font-size: 14px; }
html.celular .msj-citando { border-left: 0; margin: 0 0 4px; }

/* En horizontal, nada debajo de la isla o de la muesca. */
html.celular .app-layout { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
html.celular .sidebar { left: max(16px, calc(env(safe-area-inset-left, 0px) + 8px)); right: max(16px, calc(env(safe-area-inset-right, 0px) + 8px)); }
html.celular #msj-miembros, html.celular #perfil-hoja {
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
html.celular .modal-caja { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
/* Una fila de la cola se puede arrastrar en el escritorio (para reordenar); en el teléfono mantenerla pulsada es su
   menú, y Safari empezaría además a arrastrarla. */
html.celular .cola-item { -webkit-user-drag: none; }