:root {
  --primario: #C9A28A;
  --secundario: #F4ECE5;
  --texto: #3A3A3A;
  --acento: #E8B4B8;
  --fondo: #FBF7F3;
  --burbuja-bot: #FFFFFF;
  --burbuja-usuario: #F1E3D8;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; min-height: 100dvh;
}
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--primario); color: #fff;
  position: sticky; top: 0; z-index: 2;
}
.cabecera__marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cabecera__avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--primario);
  display: grid; place-items: center; font-weight: 700; font-size: 20px; flex: none;
}
.cabecera__titulo { font-weight: 700; }
.cabecera__sub { font-size: 12px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boton-wa {
  flex: none; background: #25D366; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 999px;
}
.chat { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.burbuja {
  max-width: 85%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; word-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.burbuja--bot { background: var(--burbuja-bot); border-bottom-left-radius: 4px; align-self: flex-start; }
.burbuja--usuario { background: var(--burbuja-usuario); border-bottom-right-radius: 4px; align-self: flex-end; }
.burbuja a { color: #8a5a3c; word-break: break-all; }
.burbuja--escribiendo { color: #999; font-style: italic; }
.escalado {
  align-self: flex-start; background: var(--secundario); border-radius: 12px; padding: 12px 14px; max-width: 85%;
}
.escalado a {
  display: inline-block; margin-top: 8px; background: #25D366; color: #fff; text-decoration: none;
  padding: 10px 14px; border-radius: 999px; font-weight: 600;
}
.fichas { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 6px; max-width: 100%; scroll-snap-type: x mandatory; }
.ficha {
  flex: 0 0 180px; scroll-snap-align: start; background: #fff; border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.08); display: flex; flex-direction: column;
}
.ficha img, .ficha__sinfoto { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; display: block; }
.ficha__sinfoto { background: var(--secundario); }
.ficha__cuerpo { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.ficha__marca { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: .04em; }
.ficha__nombre { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ficha__precio { font-weight: 700; margin-top: auto; }
.ficha__precio s { color: #aaa; font-weight: 400; font-size: 12px; margin-left: 4px; }
.ficha__boton { margin-top: 6px; background: var(--primario); color: #fff; text-align: center; border-radius: 999px; padding: 6px; font-size: 13px; font-weight: 600; }
.entrada {
  display: flex; gap: 8px; padding: 10px 16px; background: #fff; border-top: 1px solid #eee;
  position: sticky; bottom: 0;
}
.entrada input {
  flex: 1; font: inherit; padding: 12px 14px; border: 1px solid #ddd; border-radius: 999px; outline: none;
}
.entrada input:focus { border-color: var(--primario); }
.entrada button {
  font: inherit; font-weight: 600; background: var(--primario); color: #fff; border: 0;
  border-radius: 999px; padding: 0 18px; cursor: pointer;
}
.entrada button:disabled { opacity: .5; cursor: default; }
.aviso { margin: 0; padding: 6px 16px 14px; font-size: 12px; color: #888; background: #fff; text-align: center; }
.aviso a { color: #8a5a3c; }
@media (min-width: 720px) {
  body { max-width: 720px; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,.06); }
}

/* --- fotos adjuntas, recortes técnicos y valoración (perfil técnico) --- */
.entrada { flex-direction: column; }
.entrada__fila { display: flex; gap: 8px; align-items: center; }
.boton-foto {
  flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--secundario); display: grid;
  place-items: center; cursor: pointer; font-size: 20px;
}
.boton-foto input { display: none; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.previas { display: flex; gap: 8px; padding-bottom: 8px; overflow-x: auto; }
.previa { position: relative; flex: none; }
.previa img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.previa button {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: #333; color: #fff; font-size: 14px; line-height: 22px; padding: 0; cursor: pointer;
}
.burbuja__fotos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.burbuja__fotos img { max-width: 160px; max-height: 160px; border-radius: 10px; display: block; }
.recorte {
  align-self: flex-start; max-width: 92%; background: #fff; border-radius: 14px; padding: 10px 12px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); border-left: 4px solid var(--acento);
}
.recorte__titulo { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #777; margin-bottom: 6px; }
.recorte img { max-width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid #eee; }
.recorte__pdf {
  display: inline-block; background: var(--primario); color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px;
}
.recorte__nota { font-size: 13px; color: #555; margin-top: 6px; }
.valorar { align-self: flex-start; font-size: 12px; color: #888; display: flex; gap: 6px; align-items: center; margin-top: -4px; }
.valorar button { font: inherit; border: 1px solid #ccc; background: #fff; border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.valorar__hecho { color: #4a7; }
body.arrastrando::after { content: "Suelta las fotos aquí"; position: fixed; inset: 0; display: grid; place-items: center; background: rgba(31,58,95,.85); color: #fff; font-size: 28px; font-weight: 700; z-index: 20; pointer-events: none; }
.valorar__cambiar { color: #999; font-size: 12px; margin-left: 6px; }