/* Hoja del frente «chat» (2026-11-11). Va después de tienda-cuenta.css y toma los tokens de la página (--acento/--texto/--fondo, o --marca/--tinta/--caja
   sin página). `:root` sube la especificidad sobre `body.t-pagina :is(.chat)` de tienda-pagina.css sin tocarla. Burbujas: comprador a la derecha, tienda a la izquierda. */
:root { --chat-acento: var(--acento, var(--marca, #1b4332)); --chat-sobre: var(--sobre-acento, var(--sobre-marca, #fff)); --chat-texto: var(--texto, var(--tinta, #111)); --chat-fondo: var(--fondo, var(--caja, #fff)); }
:root body .chat-hilo { display: flex; flex-direction: column; gap: .75rem; padding: 0; overflow: hidden; max-height: none; }
:root body .chat-hilo > h2 { margin: 0; padding: .75rem 1rem; font-size: 1rem; border-bottom: 1px solid color-mix(in srgb, var(--chat-texto) 18%, transparent); }
/* El historial scrollea en su caja y arranca en el último mensaje: `column-reverse` con un solo hijo ancla el scroll abajo sin JavaScript. */
.chat-hilo__caja { display: flex; flex-direction: column-reverse; overflow-y: auto; overscroll-behavior: contain; height: min(26rem, calc(100dvh - 24rem)); min-height: 12rem; padding: 0 1rem; }
.chat-hilo__caja > * { margin: 0; }
.chat-hilo__caja:focus-visible, .chat-panel :focus-visible, .chat-conversaciones a:focus-visible { outline: 3px solid var(--chat-texto); outline-offset: 2px; }
:root body .chat__lista { display: flex; flex-direction: column; gap: .5rem; list-style: none; margin: 0; padding: .5rem 0; }
:root body .chat__mensaje { max-width: 82%; padding: .5rem .85rem; border: 0; border-radius: 1.1rem 1.1rem 1.1rem .25rem; align-self: flex-start; background: color-mix(in srgb, var(--chat-texto) 10%, var(--chat-fondo)); color: var(--chat-texto); }
:root body .chat__mensaje--comprador { align-self: flex-end; border-radius: 1.1rem 1.1rem .25rem 1.1rem; background: var(--chat-acento); color: var(--chat-sobre); }
.chat__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
:root body .chat__autor { display: flex; gap: .4rem; justify-content: flex-end; margin: .15rem 0 0; font-size: .8125rem; color: inherit; opacity: 1; }
:root body .chat__mensaje--vendedor .chat__autor, :root body .chat__mensaje--sistema .chat__autor { justify-content: flex-start; }
/* Postpago (0053; tarjeta desde la captura 174, 2026-11-12: el punteado «se ve roto»): el mensaje automático ocupa el ancho, con barra de acento y el rótulo
   visible «{Tienda} · mensaje automático»: se distingue por forma y texto, no solo por el color. */
:root body .chat__mensaje--sistema { max-width: 100%; align-self: stretch; border: 1px solid color-mix(in srgb, var(--chat-acento) 40%, transparent); border-left: 4px solid var(--chat-acento);
  border-radius: .9rem; background: color-mix(in srgb, var(--chat-acento) 7%, var(--chat-fondo)); color: var(--chat-texto); }
.chat__rotulo { margin: 0 0 .35rem; font-size: .8125rem; font-weight: 700; }
.chat__sistema { font-weight: 600; }
.chat__autor .suave { color: inherit; }
.chat-hilo__forma { display: grid; gap: .5rem; margin: 0; padding: .75rem 1rem 1rem; border-top: 1px solid color-mix(in srgb, var(--chat-texto) 18%, transparent); }
.chat-hilo__forma textarea { width: 100%; box-sizing: border-box; min-height: 44px; resize: vertical; }
.chat-hilo__forma button, .chat-panel button { min-height: 44px; min-width: 44px; }
.chat-escribiendo { margin: 0; padding: 0 1rem; min-height: 1.4em; font-size: .875rem; font-style: italic; }
.chat-pagina__cuerpo { display: grid; gap: 1rem; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); align-items: start; }
.chat-conversaciones ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.chat-conversaciones a { display: flex; align-items: center; min-height: 44px; padding: .25rem .75rem; border-radius: .6rem; color: var(--chat-texto); }
.chat-conversaciones a[aria-current="page"], .chat-conversaciones a.activa { background: color-mix(in srgb, var(--chat-texto) 12%, var(--chat-fondo)); font-weight: 700; }
@media (max-width: 720px) { .chat-pagina__cuerpo { grid-template-columns: minmax(0, 1fr); } .chat-hilo__caja { height: min(22rem, calc(100dvh - 22rem)); } }
/* Panel flotante (rediseño 2026-11-12, Deiber: «que se vea profesional»): tarjeta con sombra, cabecera con avatar, conversaciones en UNA fila
   que se desliza, historial con fondo suave y una barra de redacción (clip · texto · enviar) como en las apps de mensajería. Solo tokens. */
:root body .chat-panel { z-index: 1000; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; width: min(23.5rem, calc(100vw - 2rem)); height: min(36rem, calc(100dvh - 6rem)); max-height: none;
  background: var(--chat-fondo); color: var(--chat-texto); border: 1px solid color-mix(in srgb, var(--chat-texto) 14%, transparent); border-radius: 1.1rem; box-shadow: 0 1.5rem 3.5rem rgb(0 0 0 / .32), 0 .25rem .75rem rgb(0 0 0 / .12); }
:root body .chat-panel[hidden] { display: none; }  /* le gana a `:root body .chat-panel` (la X no cerraba, 2026-11-12) */
:root body .chat-panel__cabeza { display: flex; align-items: center; gap: .7rem; padding: .75rem .6rem .75rem .9rem; background: var(--chat-acento); color: var(--chat-sobre); }
.chat-panel__avatar { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: color-mix(in srgb, var(--chat-sobre) 20%, transparent); }
.chat-panel__avatar svg { width: 1.25rem; height: 1.25rem; }
.chat-panel__titulos { flex: 1; min-width: 0; }
.chat-panel__cabeza h2 { margin: 0; font-size: 1rem; line-height: 1.25; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-panel__sub { margin: .1rem 0 0; font-size: .8rem; opacity: .9; }
:root body .chat-panel__cerrar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; min-width: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.chat-panel__cerrar:hover { background: color-mix(in srgb, var(--chat-sobre) 18%, transparent); }
.chat-panel__cerrar svg { width: 1.25rem; height: 1.25rem; }
:root body .chat-panel :is(.chat-panel__cabeza, .chat-redactar) :focus-visible:not(h2) { outline: 3px solid currentColor; outline-offset: 1px; }
:root body .chat-panel .chat-hilo { flex: 1 1 auto; min-height: 0; padding: 0; border: 0; border-radius: 0; background: color-mix(in srgb, var(--chat-texto) 4%, var(--chat-fondo)); }
.chat-panel .chat-hilo__caja { flex: 1 1 auto; height: 100%; min-height: 0; padding: .25rem .9rem; }
.chat-panel #chat-vacio { margin: auto; padding: 2rem 1rem; text-align: center; font-size: .9rem; color: color-mix(in srgb, var(--chat-texto) 75%, var(--chat-fondo)); }
.chat-panel #chat-estado, .chat-panel #chat-error { margin: 0; padding: .4rem .9rem; font-size: .85rem; }
.chat-panel #chat-estado:empty, .chat-panel #chat-error:empty { display: none; }
.chat-panel .chat-escribiendo { padding: 0 .9rem; background: color-mix(in srgb, var(--chat-texto) 4%, var(--chat-fondo)); }
.chat-panel .chat-escribiendo:empty { display: none; }
:root body .chat-panel .chat-hilo__forma { display: flex; flex-direction: column; gap: .35rem; padding: .6rem .75rem .7rem; border-top: 1px solid color-mix(in srgb, var(--chat-texto) 12%, transparent); background: var(--chat-fondo); }
.chat-redactar { display: flex; align-items: flex-end; gap: .35rem; padding: .25rem; border: 1px solid color-mix(in srgb, var(--chat-texto) 25%, transparent); border-radius: 1.4rem; background: color-mix(in srgb, var(--chat-texto) 5%, var(--chat-fondo)); }
.chat-redactar:focus-within { border-color: var(--chat-acento); }
:root body .chat-panel .chat-redactar textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 8rem; padding: .7rem .25rem; border: 0; background: transparent; color: inherit; font: inherit; line-height: 1.35; resize: none; box-shadow: none; field-sizing: content; }
:root body .chat-panel .chat-redactar textarea:focus-visible { outline: none; }
.chat-panel h2:focus { outline: none; }  /* tabindex=-1: recibe el foco al abrir para el lector, no es un control */
.chat-redactar textarea::placeholder { color: color-mix(in srgb, var(--chat-texto) 65%, var(--chat-fondo)); }
.chat-panel .chat-adjuntar { position: relative; flex: none; display: block; }
:root body .chat-panel .chat-adjuntar__boton { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: inherit; cursor: pointer; }
.chat-panel .chat-adjuntar__boton:hover { background: color-mix(in srgb, var(--chat-texto) 10%, transparent); }
.chat-panel .chat-adjuntar__boton svg, .chat-enviar svg { width: 1.3rem; height: 1.3rem; }
/* El input nativo sigue siendo el control real (con su etiqueta): invisible y encima del clip, y su foco se ve en el clip. */
.chat-panel .chat-adjuntar input[type="file"] { position: absolute; inset: 0; width: 44px; height: 44px; min-height: 0; opacity: 0; cursor: pointer; }
.chat-panel .chat-adjuntar:has(input:focus-visible) .chat-adjuntar__boton { outline: 3px solid var(--chat-texto); outline-offset: 1px; }
:root body .chat-panel .chat-enviar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--chat-acento); color: var(--chat-sobre); cursor: pointer; }
.chat-panel .chat-enviar:hover { filter: brightness(1.08); }
.chat-panel #chat-ayuda { margin: 0; padding: 0 .5rem; font-size: .75rem; color: color-mix(in srgb, var(--chat-texto) 72%, var(--chat-fondo)); }
.chat-panel .chat-previa:empty { display: none; }
.chat-panel #chat-autorizo { display: flex; gap: .5rem; align-items: flex-start; margin: 0; font-size: .85rem; }
.chat-panel #chat-autorizo[hidden] { display: none; }
/* Conversaciones (2026-11-12, Deiber: «primero la sesión él selecciona y luego sí solo el chat, regresar»): lista de filas grandes y «Volver» de 44 px. */
.chat-panel__vista { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
:root body .chat-panel :is(.chat-panel__vista, .chat-panel__volver, .chat-panel__avatar)[hidden] { display: none; }  /* le gana a su `display` de arriba */
:root body .chat-panel .chat-convs { overflow-y: auto; padding: .4rem 0; background: color-mix(in srgb, var(--chat-texto) 4%, var(--chat-fondo)); }
.chat-convs ul { list-style: none; margin: 0; padding: 0; }
:root body .chat-panel .chat-conv { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 64px; padding: .6rem .9rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--chat-texto) 10%, transparent);
  border-radius: 0; background: transparent; color: var(--chat-texto); font: inherit; text-align: left; cursor: pointer; }
.chat-panel .chat-conv:hover { background: color-mix(in srgb, var(--chat-texto) 8%, var(--chat-fondo)); }
:root body .chat-panel .chat-conv:focus-visible { outline: 3px solid var(--chat-texto); outline-offset: -3px; }
.chat-conv__icono { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--chat-acento); color: var(--chat-sobre); }
.chat-conv__icono svg { width: 1.3rem; height: 1.3rem; }
.chat-conv__textos { display: grid; flex: 1; min-width: 0; gap: .1rem; }
.chat-conv__titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.chat-conv__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; color: color-mix(in srgb, var(--chat-texto) 75%, var(--chat-fondo)); }
.chat-conv > svg { flex: none; width: 1.2rem; height: 1.2rem; }
:root body .chat-panel__volver { display: inline-flex; align-items: center; gap: .3rem; flex: none; min-width: 44px; height: 44px; padding: 0 .6rem 0 .4rem; border: 0; border-radius: 1.4rem;
  background: transparent; color: inherit; font: inherit; font-size: .9rem; cursor: pointer; }
.chat-panel__volver:hover { background: color-mix(in srgb, var(--chat-sobre) 18%, transparent); }
.chat-panel__volver svg { width: 1.2rem; height: 1.2rem; }
.chat-flotante__nuevo { margin-left: .5rem; padding: 0 .5rem; border-radius: 999px; background: var(--chat-sobre); color: var(--chat-acento); font-size: .75rem; }
@media (max-width: 560px) { :root body .chat-panel { right: .5rem; left: .5rem; width: auto; } }
@media (prefers-reduced-motion: no-preference) { .chat__mensaje { animation: chat-entra .18s ease-out; } @keyframes chat-entra { from { opacity: 0; transform: translateY(6px); } } }
/* Adjuntos (2026-11-11): botón clip de 44 px sobre el input nativo (sigue siendo el control real, con su etiqueta), miniaturas y ficha de PDF. */
.chat .solo-lectura, .chat-panel .solo-lectura { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chat-adjuntar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.chat-adjuntar__boton { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; min-width: 44px; padding: 0 .75rem; border: 1px solid currentColor; border-radius: .6rem; cursor: pointer; }
.chat-adjuntar input[type="file"] { min-height: 44px; max-width: 100%; }
.chat-adjuntar input[type="file"]:focus-visible { outline: 3px solid var(--chat-texto); outline-offset: 2px; }
.chat-previa { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chat-previa canvas, .chat__adjunto img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: .6rem; }
.chat__adjuntos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.chat__adjunto { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: inherit; }
.chat__adjunto--pdf { padding: .25rem .6rem; border: 1px solid currentColor; border-radius: .6rem; overflow-wrap: anywhere; }
.chat__icono { padding: .1rem .3rem; border-radius: .25rem; background: color-mix(in srgb, currentColor 18%, transparent); font-size: .7rem; font-weight: 700; }
/* Chulitos (2026-11-12): sobre la burbuja de acento, «enviado» va más tenue y «leído» pleno; la cantidad de trazos es la señal, no el color. */
.chat__estado { display: inline-flex; align-items: center; }
.chat__estado svg { width: 1.125rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.chat__estado--leido svg { opacity: 1; stroke-width: 2; }
/* Página del chat del pedido (captura 174, 2026-11-12: columna de 290 px con un recuadro vacío enorme). Columna de lectura de 48rem, el resumen del pedido
   arriba y el historial con altura NATURAL: crece con los mensajes hasta un tope y recién ahí se desliza (sigue anclado abajo por `column-reverse`). */
:root body main.m-mensajes .chat-pagina:not(:has(.chat-pagina__cuerpo)) { width: 100%; max-width: 48rem; margin-inline: auto; }
:root body main.m-mensajes .chat-hilo__caja { height: auto; max-height: min(34rem, calc(100dvh - 18rem)); min-height: 0; }
.chat-resumen { display: flex; align-items: center; gap: .9rem; margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid color-mix(in srgb, var(--chat-texto) 16%, transparent);
  border-radius: 1rem; background: var(--chat-fondo); color: var(--chat-texto); }
.chat-resumen__icono { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: .8rem; background: var(--chat-acento); color: var(--chat-sobre); }
.chat-resumen__icono svg { width: 1.5rem; height: 1.5rem; }
.chat-resumen__datos { display: grid; gap: .15rem; min-width: 0; margin: 0; }
.chat-resumen__datos dd { margin: 0; overflow-wrap: anywhere; }
.chat-resumen__producto { font-weight: 700; }
.chat-resumen__estado { justify-self: start; padding: .1rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--chat-texto) 10%, var(--chat-fondo)); font-size: .85rem; font-weight: 600; }
/* «Qué sigue» del recibo pagado (Deiber, 2026-11-12: «que vean que están atentos»): línea de tiempo con marca y texto (no solo color), la entrega y el chat. */
.sigue { max-width: 40rem; margin: 2rem auto 0; padding: 1.25rem 1.25rem 1.5rem; border: 1px solid color-mix(in srgb, var(--chat-texto) 16%, transparent); border-radius: 1.1rem;
  background: var(--chat-fondo); color: var(--chat-texto); }
.sigue h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.sigue__pasos { display: grid; margin: 0 0 1rem; padding: 0; list-style: none; }
.sigue__paso { position: relative; display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; }
.sigue__marca { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--chat-texto) 60%, var(--chat-fondo)); border-radius: 50%; background: var(--chat-fondo); }
.sigue__paso--hecho .sigue__marca { border-color: var(--chat-acento); background: var(--chat-acento); }
.sigue__paso--hecho .sigue__marca::after { content: ""; width: .35rem; height: .7rem; border: solid var(--chat-sobre); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.sigue__paso[aria-current="step"] { font-weight: 700; }
.sigue__paso[aria-current="step"] .sigue__marca { border-color: var(--chat-acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--chat-acento) 22%, transparent); }
.sigue__paso:not(:last-child)::before { content: ""; position: absolute; left: calc(.75rem - 1px); top: calc(50% + .75rem); width: 2px; height: 1.25rem; background: color-mix(in srgb, var(--chat-texto) 25%, var(--chat-fondo)); }
.sigue__paso--hecho:not(:last-child)::before { background: var(--chat-acento); }
.sigue__entrega, .sigue__texto { margin: 0 0 .75rem; overflow-wrap: anywhere; }
:root body .sigue__chat { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; border-radius: 999px; background: var(--chat-acento); color: var(--chat-sobre); font-weight: 700; text-decoration: none; }
.sigue__chat:hover { filter: brightness(1.08); }
.sigue__chat:focus-visible { outline: 3px solid var(--chat-texto); outline-offset: 3px; }
/* El paso actual late tres veces y para (WCAG 2.2.2: nada se mueve más de 5 s sin control); con «reducir movimiento», quieto. */
@media (prefers-reduced-motion: no-preference) { .sigue__paso[aria-current="step"] .sigue__marca { animation: sigue-pulso 1.4s ease-in-out 3; } @keyframes sigue-pulso { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--chat-acento) 8%, transparent); } } }
/* Abierto solo en el recibo (aria-modal=false): en pantallas anchas el recibo se corre a la izquierda para que el panel no tape el ticket; en el
   teléfono lo cubre (lo pidió Deiber), y el mensaje automático dice que el pago se recibió. */
@media (min-width: 1100px) { :root body:has(> .chat-panel[aria-modal="false"]:not([hidden])) main { padding-inline-end: 25.5rem; } }