/* Mensajes entre los roles (mensajes.js). Va sobre apps-base.css (.chat del núcleo) y apps-marca.css; sólo tokens.
   Tres tonos: barra de arriba, cabecera de la bandeja en noche y conversación sobre papel; las burbujas propias en
   noche y las del otro lado en tarjeta, para que se distingan a pleno sol. */

/* Cabecera: el botón de mensajes va antes de «Enviar comentarios» y de «Salir». */
.ap-top>.ap-cab{order:1}
.ap-top>.ap-coment{order:2}
.ap-top>.ap-salir{order:3}
.ms-volver{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin-left:-6px;border-radius:999px;color:inherit;text-decoration:none}
.ms-volver svg{width:22px;height:22px}
.ms-volver:focus-visible{outline:3px solid var(--marca);outline-offset:2px}
.ap-top.ms-en-conv .ap-simbolo{display:none}

/* ── Bandeja ── */
.ms-cab{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:14px 16px;border-radius:20px;background:var(--noche-2);color:var(--sobre-noche)}
.ms-cab .ms-cab-emoji{width:52px;height:52px;flex:none}
.ms-cab h1{margin:0;color:var(--sobre-noche);font-size:1.5rem;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.ms-cab p{margin:2px 0 0;color:color-mix(in srgb,var(--sobre-noche) 82%,transparent);font-size:.9375rem}
.ms-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ms-fila{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 14px;border-radius:18px;background:var(--tarjeta);color:var(--tinta);text-decoration:none;
  box-shadow:0 1px 2px color-mix(in srgb,var(--noche) 5%,transparent),0 12px 28px -22px color-mix(in srgb,var(--noche) 45%,transparent)}
.ms-fila:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--noche) 14%,transparent),0 12px 28px -22px color-mix(in srgb,var(--noche) 45%,transparent)}
.ms-fila:focus-visible{outline:3px solid var(--noche-2);outline-offset:2px}
.ms-fila[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--noche-2)}
.ms-fila-txt{flex:1;min-width:0;display:grid;gap:2px}
.ms-fila-l1,.ms-fila-l3{display:flex;align-items:center;gap:8px;min-width:0}
.ms-fila-l1 b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.ms-fila-l1 time{flex:none;font-size:var(--t-chico);color:var(--tinta-2)}
.ms-fila-ctx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-chico);color:var(--tinta-2)}
.ms-prev{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9375rem;color:var(--tinta-2)}
.ms-fila.nueva .ms-prev{color:var(--tinta);font-weight:700}
.ms-fila .insignia{flex:none;background:var(--noche-2);color:var(--sobre-noche)}
.ms-avatar{flex:none;display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;overflow:hidden;
  background:color-mix(in srgb,var(--noche-2) 10%,var(--tarjeta));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--noche) 10%,transparent)}
.ms-avatar .emoji{width:32px;height:32px}
.ms-avatar.foto img{width:100%;height:100%;object-fit:cover}
.ms-avatar.sigla{background:var(--noche-2);color:var(--sobre-noche);font-weight:800;font-size:1rem;letter-spacing:.02em}
.ms-vacio{text-align:center}
.ms-avisos{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ms-fab{position:fixed;z-index:21;right:max(18px,env(safe-area-inset-right));bottom:calc(112px + env(safe-area-inset-bottom));width:58px;height:58px;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:var(--noche-2);color:var(--sobre-noche);
  box-shadow:0 14px 30px -10px color-mix(in srgb,var(--noche) 70%,transparent)}
.ms-fab svg{width:26px;height:26px}
.ms-fab:focus-visible{outline:3px solid var(--marca);outline-offset:3px}
@media (min-width:900px){.ms-fab{bottom:max(28px,env(safe-area-inset-bottom))}}

/* «Nueva conversación» (hoja) */
.ms-busca{display:block;margin:0 0 10px}
.ms-busca input{width:100%;min-height:48px;padding:0 14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--tinta) 16%,transparent);background:var(--tarjeta)}
.ms-contactos{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ms-contacto{width:100%;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 10px;border:0;border-radius:16px;background:transparent;text-align:left;cursor:pointer}
.ms-contacto:hover,.ms-contacto:focus-visible{background:color-mix(in srgb,var(--noche-2) 8%,var(--tarjeta))}
.ms-contacto span:last-child{display:grid;min-width:0}
.ms-contacto b{font-weight:800;overflow-wrap:anywhere}
.ms-contacto small{font-size:var(--t-chico);color:var(--tinta-2)}
.solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Conversación ── */
/* En el celular la conversación ocupa la pantalla: sin la barra de abajo, la caja de escribir pegada al borde. */
body.ap[data-pantalla="conversacion"]{padding-bottom:0}
@media (max-width:899px){
  body.ap[data-pantalla="conversacion"] .ap-nav{display:none}
  body.ap[data-pantalla="conversacion"] .ap-vista{padding-top:10px;padding-bottom:0}
}
.ms-dos{display:grid;grid-template-columns:minmax(0,1fr)}
.ms-lado{display:none}
.ms-conv{display:flex;flex-direction:column;min-width:0;height:calc(100dvh - var(--ap-top-h,60px) - 10px);min-height:340px}
.ms-chat{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 2px 14px;scroll-padding-bottom:12px}
.ms-chat.chat>li{max-width:min(84%,560px);font-size:1rem;line-height:1.45;white-space:pre-wrap}
.ms-chat.chat .ellos{background:var(--tarjeta);color:var(--tinta)}
.ms-chat.chat .yo{background:var(--noche-2);color:var(--sobre-noche)}
.ms-chat.chat .yo .autor{color:var(--champan)}
.ms-chat.chat .autor{font-size:.875rem;color:var(--tinta-2)}
.ms-chat.chat>li time,.ms-chat.chat .leido{font-size:.875rem;opacity:.85}
.ms-chat.chat .yo time,.ms-chat.chat .yo .leido{color:color-mix(in srgb,var(--sobre-noche) 86%,transparent)}
.ms-chat.chat>li time{display:inline;margin-right:6px}
.ms-chat.chat .leido{display:inline}
.ms-chat.chat .yo time+.leido,.ms-chat.chat .yo .leido{float:none}
.ms-chat.chat .separador{background:color-mix(in srgb,var(--noche-2) 10%,var(--papel));color:var(--tinta-2);font-weight:700;font-size:.875rem;text-transform:capitalize}
.ms-chat.chat .separador.sistema{text-transform:none}

/* Contexto de la reservación (sin dinero ni datos del huésped: lo arma el servidor) */
.ms-ctx{flex:none;display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 6px;border-radius:18px;background:var(--noche);color:var(--sobre-noche);text-decoration:none}
.ms-ctx img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none}
.ms-ctx .emoji{width:40px;height:40px;flex:none}
.ms-ctx-txt{flex:1;min-width:0;display:grid;gap:2px}
.ms-ctx-txt b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-ctx-txt small{font-size:var(--t-chico);color:color-mix(in srgb,var(--sobre-noche) 85%,transparent)}
.ms-ctx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ms-ctx .chip{background:var(--vidrio-noche);color:var(--sobre-noche)}
.ms-ctx .chip.ok{background:color-mix(in srgb,var(--ok) 30%,var(--noche));color:var(--sobre-noche)}
.ms-ctx .chip.error{background:color-mix(in srgb,var(--error) 34%,var(--noche));color:var(--sobre-noche)}
.ms-ctx-ir{font-size:1.5rem;color:var(--champan)}
a.ms-ctx:focus-visible{outline:3px solid var(--marca);outline-offset:2px}

/* Escribir */
.ms-escribir{flex:none;display:grid;gap:8px;padding:8px 0 max(10px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--papel) 70%,transparent)}
.ms-rapidas{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 0}
.ms-rapidas::-webkit-scrollbar{display:none}
.ms-rapida{flex:none;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--noche-2) 22%,transparent);background:var(--tarjeta);color:var(--tinta);font-weight:700;font-size:.9375rem;cursor:pointer;white-space:nowrap}
.ms-rapida:hover,.ms-rapida:focus-visible{background:color-mix(in srgb,var(--noche-2) 8%,var(--tarjeta))}
.ms-caja{display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 14px;border-radius:26px;background:var(--tarjeta);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tinta) 12%,transparent),0 10px 26px -18px color-mix(in srgb,var(--noche) 50%,transparent)}
.ms-caja:focus-within{box-shadow:inset 0 0 0 2px var(--noche-2),0 10px 26px -18px color-mix(in srgb,var(--noche) 50%,transparent)}
.ms-caja textarea{flex:1;min-width:0;min-height:44px;max-height:160px;padding:11px 0;border:0;background:transparent;resize:none;font-size:1rem;line-height:1.4;outline:none}
.ms-enviar{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--noche-2);color:var(--sobre-noche);cursor:pointer}
.ms-enviar svg{width:20px;height:20px;margin-left:2px}
.ms-enviar:disabled{opacity:.55;cursor:default}
.ms-enviar:focus-visible{outline:3px solid var(--marca);outline-offset:2px}
.ms-cuenta{min-height:0;text-align:right;font-size:var(--t-chico);color:var(--tinta-2)}
.ms-cuenta:empty{display:none}
.ms-cerrada{flex:none;margin:8px 0 max(14px,env(safe-area-inset-bottom));padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--noche-2) 8%,var(--tarjeta));color:var(--tinta-2);text-align:center}

/* Computadora: la bandeja al lado de la conversación. */
@media (min-width:900px){
  .ms-dos{grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:20px;align-items:start}
  .ms-lado{display:block;position:sticky;top:calc(var(--ap-top-h,60px) + 16px);max-height:calc(100dvh - var(--ap-top-h,60px) - 76px);overflow-y:auto;padding:2px}
  .ms-lado .ms-fila{min-height:64px;padding:10px 12px}
  .ms-lado .ms-avatar{width:40px;height:40px}
  .ms-conv{height:calc(100dvh - var(--ap-top-h,60px) - 76px)}
  body.ap[data-pantalla="conversacion"] .ap-vista{padding-bottom:12px}
}

@media (prefers-reduced-motion:reduce){.ms-fila,.ms-fab{transition:none}}

/* Botones que abren mensajes desde otra pantalla (El Faro, «¿Tienes lugar?» de El Muelle) */
.btn .emoji.ms-ico{width:24px;height:24px;margin-right:8px;vertical-align:middle}
.pedido-msj{margin-top:8px}

/* Celular: dentro de una conversación la barra de arriba es sólo «volver» y con quién se habla. */
@media (max-width:899px){
  body.ap[data-pantalla="conversacion"] .ap-top>:is(.ap-salir,.ap-coment,.ap-cab){display:none}
}

/* La caja de escribir marca el foco en su borde redondo, no en el textarea de adentro. */
.ms-caja textarea:focus,.ms-caja textarea:focus-visible{outline:none;box-shadow:none}
/* «Volver» y el botón de mensajes en las cabeceras oscuras de cada app. */
body.ap:is([data-login-role="aliado"],[data-login-role="proveedor"]) .ms-volver{color:var(--cab-tinta)}
body.ap:is([data-login-role="coordinador"],[data-login-role="concierge"]):not(.sin-sesion) .ap-top>.ap-cab:not([aria-current]){background:transparent;border-color:color-mix(in srgb,var(--sobre-noche) 38%,transparent)}

/* ── Ajustes de la revisión de diseño (20-oct-2026) ── */
/* Insignias legibles: cifra de 14 px en 22 px de lado, contraste ≥ 4.5:1 (lima con tinta casi negra; noche con marfil). */
.ap-cab-n{min-width:22px;height:22px;font-size:.875rem}
.ms-fila .insignia{min-width:22px;height:22px;font-size:.875rem}
/* Bandeja: nombre solo en la primera línea; «Promotor · 05:30» en la segunda; la fila con no leídos, con fondo suave. */
.ms-fila-l1{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.ms-fila-ctx{display:flex;gap:4px;min-width:0}
.ms-fila-ctx>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-fila-ctx time{flex:none}
.ms-fila.nueva{background:color-mix(in srgb,var(--info) 9%,var(--tarjeta))}
/* Burbujas: la propia en azul (distinta de la cabecera noche), la del otro lado en tarjeta con sombra. */
.ms-chat.chat .yo{background:var(--info);color:var(--sobre-noche)}
.ms-chat.chat .ellos{box-shadow:var(--sombra)}
.ms-chat.chat .yo .autor{color:var(--sobre-noche);opacity:.9}
/* Tandas del mismo autor: 2 px entre burbujas y la cola sólo en la última. */
.ms-chat.chat>li.sigue{margin-bottom:-6px}
.ms-chat.chat>li.yo.sigue{border-bottom-right-radius:18px}
.ms-chat.chat>li.ellos.sigue{border-bottom-left-radius:18px}
/* «✓ Enviado / ✓✓ Leído» al pie de la última propia; leído en champán. */
.ms-chat.chat .yo .leido{display:block;text-align:right;margin-top:2px}
.ms-chat.chat .yo .leido.visto{color:var(--champan);opacity:1}
/* Contexto de la reservación: compacto (56 px) y fijo arriba mientras se desplaza la conversación. */
.ms-ctx{position:sticky;top:0;z-index:2;min-height:56px;padding:8px 12px;gap:10px;border-radius:16px}
.ms-ctx img{width:40px;height:40px;border-radius:10px}
.ms-ctx .emoji{width:32px;height:32px}
.ms-ctx-txt{gap:0}
.ms-ctx-txt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-disp{font-weight:800}
.ms-disp.ok{color:color-mix(in srgb,var(--ok) 45%,var(--sobre-noche))}
.ms-disp.no{color:color-mix(in srgb,var(--error) 40%,var(--sobre-noche))}
/* Respuestas rápidas: se desvanecen al borde (se ve que hay más). */
.ms-rapidas{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);padding-right:32px}
/* Caja de escribir: borde gris; azul sólo con el foco; enviar apagado con la caja vacía. */
.ms-caja{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tinta) 16%,transparent)}
.ms-caja:focus-within{box-shadow:inset 0 0 0 2px var(--info)}
.ms-enviar{background:var(--info)}
.ms-enviar:disabled{background:color-mix(in srgb,var(--tinta) 14%,var(--tarjeta));color:var(--tinta-2);opacity:1}
/* Escritorio: la cabecera «Mensajes» más baja. */
@media (min-width:900px){
  .ms-cab{padding:10px 14px;border-radius:16px}
  .ms-cab .ms-cab-emoji{width:40px;height:40px}
  .ms-cab h1{font-size:1.25rem}
}
/* Movimiento reducido: nada se anima ni se desplaza suave en los mensajes. */
@media (prefers-reduced-motion:reduce){
  .ms,.ms *,.ms-fila,.ms-fab,.ms-hoja,.ms-hoja *,.ap-cab-n{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
/* Celular: el nombre de la cuenta no se corta. Baja a dos líneas si hace falta y, en La Plaza (cuatro botones en la
   cabecera), el sello cede su lugar. */
@media (max-width:480px){
  .ap-rol small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2}
  body.ap[data-login-role="coordinador"]:not(.sin-sesion) .ap-top:not(.ms-en-conv) .ap-simbolo{display:none}
}