/* Chat web propio. Dos pieles con la misma estructura: la de la marca (marca.css, que genera scripts/construir.ts con
   los tokens de marcas/<clave>; la única en producción) y, solo fuera de producción, una tipo WhatsApp
   (data-piel="whatsapp", que va después y la reemplaza). Contrastes revisados (AA): texto 4.5:1 o más, controles y
   foco 3:1 o más. */

/* el logo de la marca (usa sus tokens) en negativo sobre el color del encabezado */
.cab .logo { --primario: var(--cab-texto); --superficie: var(--cab); --tinta: var(--cab-texto); --acento: var(--cab); }

[data-piel="whatsapp"] {
  --fondo: #EFEAE2; --fuera: #DADDD8;
  --cab: #008069; --cab-texto: #FFFFFF; --cab-texto-2: #FFFFFF;
  --tinta: #111B21; --tinta-2: #54656F;
  --equipo: #FFFFFF; --equipo-borde: transparent; --persona: #D9FDD3; --persona-borde: transparent;
  --acento: #008069; --en-acento: #FFFFFF;
  --op-fondo: #FFFFFF; --op-texto: #0270A6; --op-borde: transparent; --op-radio: 8px;
  --barra: #F0F2F5; --campo: #FFFFFF; --campo-borde: #8696A0; --icono: #54656F;
  --radio: 8px; --sombra: 0 1px .5px rgba(11, 20, 26, .13); --separador: #E9EDEF;
  --texto: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --titulo: var(--texto);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--fuera); color: var(--tinta); font: 16px/1.45 var(--texto); -webkit-text-size-adjust: 100%; }
button, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 960px; margin: 0 auto; background: var(--fondo); }

/* encabezado */
.cab { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); background: var(--cab); color: var(--cab-texto); }
.logo { width: 40px; height: 40px; flex: none; }
.cab-t { flex: 1; min-width: 0; }
.cab h1 { margin: 0; font: var(--peso-titulos) 19px/1.2 var(--titulo); letter-spacing: -.01em; }
[data-piel="whatsapp"] .cab h1 { font-weight: 600; font-size: 17px; }
.cab p { margin: 0; font-size: 13px; line-height: 1.3; color: var(--cab-texto-2); }
.cab :focus-visible { outline-color: var(--cab-texto); }
.btn-cab { flex: none; min-height: 44px; padding: 0 12px; border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: var(--cab-texto); font-weight: 600; font-size: 14px; cursor: pointer; }

/* conversación */
.conv { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 12px 8px; }
.intro { max-width: 30rem; margin: 8vh auto 0; padding: 20px; text-align: center; background: var(--equipo); border: 1px solid var(--equipo-borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.intro h2 { margin: 0 0 8px; font: var(--peso-titulos) 22px/1.2 var(--titulo); color: var(--acento); }
[data-piel="whatsapp"] .intro h2 { font-weight: 600; font-size: 18px; color: var(--tinta); }
.intro p { margin: 0 0 16px; color: var(--tinta-2); }
.mensajes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mensajes:focus-visible { outline-offset: -3px; }
.m { display: flex; flex-direction: column; align-items: flex-start; max-width: min(85%, 34rem); }
.m-persona { align-self: flex-end; align-items: flex-end; }
.burbuja { position: relative; max-width: 100%; padding: 7px 10px 6px; border-radius: var(--radio); background: var(--equipo); border: 1px solid var(--equipo-borde); box-shadow: var(--sombra); overflow-wrap: anywhere; }
.m-equipo .burbuja { border-top-left-radius: 4px; }
.m-persona .burbuja { background: var(--persona); border-color: var(--persona-borde); border-top-right-radius: 4px; }
.m-pendiente .burbuja { opacity: .75; }
.texto { margin: 0; white-space: pre-wrap; }
.texto a { color: var(--op-texto); }
.hora { display: block; margin-top: 2px; font-size: 12px; color: var(--tinta-2); text-align: right; }
.adjunto { display: block; margin: 0 0 4px; max-width: 100%; }
.adjunto img, video.adjunto { display: block; max-width: min(100%, 300px); max-height: 320px; border-radius: calc(var(--radio) - 4px); }
audio.adjunto { width: min(280px, 70vw); height: 44px; }

/* botones y listas (input_select): como en el teléfono */
.opciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; max-width: 100%; }
.op { min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--op-borde); border-radius: var(--op-radio); background: var(--op-fondo); color: var(--op-texto); font-weight: 600; font-size: 15px; line-height: 1.2; text-align: center; cursor: pointer; box-shadow: var(--sombra); }
.op:hover { background: var(--fondo); }
[data-piel="whatsapp"] .opciones { flex-direction: column; gap: 2px; width: 100%; min-width: min(240px, 100%); }
[data-piel="whatsapp"] .op { width: 100%; font-weight: 500; }
.op-lista::before { content: ''; display: inline-block; width: 14px; height: 10px; margin-right: 8px; vertical-align: 0; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }

/* avisos y barra de escribir */
.aviso { margin: 0; padding: 10px 16px; background: #FFF4D6; color: #5C3B00; border-top: 1px solid #E8C979; font-size: 14px; }
/* demo en línea (MODO_PUBLICO=1): fijo bajo la cabecera, nunca en producción */
.aviso-demo { margin: 0; padding: 6px 16px; background: #FFF4D6; color: #5C3B00; border-bottom: 1px solid #E8C979; font-size: 13px; font-weight: 600; text-align: center; }
.redactar { display: flex; align-items: flex-end; gap: 6px; padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: var(--barra); border-top: 1px solid var(--equipo-borde); }
.redactar textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 9em; field-sizing: content; resize: none; padding: 10px 14px; border: 1.5px solid var(--campo-borde); border-radius: 22px; background: var(--campo); line-height: 1.35; }
.ico { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--icono); cursor: pointer; }
.ico svg { width: 24px; height: 24px; }
.ico-enviar { background: var(--acento); color: var(--en-acento); }
.grabando { align-items: center; }
.punto { width: 12px; height: 12px; margin-left: 8px; border-radius: 50%; background: #C62828; animation: latido 1s ease-in-out infinite; }
.cronometro { flex: 1; font-variant-numeric: tabular-nums; }
@keyframes latido { 50% { opacity: .3; } }

.btn { min-height: 44px; padding: 0 20px; border: 1.5px solid var(--acento); border-radius: 999px; background: var(--acento); color: var(--en-acento); font-weight: 600; cursor: pointer; }
.btn-linea { background: transparent; color: var(--acento); }
/* sin Chatwoot (vista previa): chat.js apaga los controles y aquí se nota (los estilos de arriba pisan el gris del navegador) */
.btn:disabled, .btn-cab:disabled, .ico:disabled, .redactar textarea:disabled { opacity: .45; cursor: not-allowed; }

/* lista («Ver opciones») */
.lista { width: min(420px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 32px)); padding: 0; border: 0; border-radius: var(--radio); background: var(--equipo); color: var(--tinta); }
.lista::backdrop { background: rgba(17, 27, 33, .45); }
.lista-cab { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; background: var(--equipo); border-bottom: 1px solid var(--separador); }
.lista-cab h2 { flex: 1; margin: 0; font-size: 17px; }
.lista-opciones { list-style: none; margin: 0; padding: 4px 0; }
.fila { display: block; width: 100%; min-height: 48px; padding: 10px 16px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.fila:hover { background: var(--fondo); }
.fila-t { display: block; font-weight: 600; }
.fila-d { display: block; margin-top: 2px; font-size: 14px; color: var(--tinta-2); }
.lista-opciones li + li .fila { border-top: 1px solid var(--separador); }

@media (prefers-reduced-motion: reduce) { .punto { animation: none; } }