/* ==========================================================================
   Agente de atención de la tienda — estilo Sommelier IA adaptado a Re Va.
   Paleta: tinta #14120e, crema #f6f2e8, amarillo #f0c24b.
   ========================================================================== */
#rva-agente-root {
  --rva-tinta: #14120e;
  --rva-tinta-2: #2a251d;
  --rva-crema: #f7f3e9;
  --rva-crema-2: #efe9da;
  --rva-amarillo: #f0c24b;
  --rva-amarillo-2: #d9a92f;
  --rva-linea: rgba(20, 18, 14, .12);
  --rva-suave: #6f685b;
  --rva-blanco: #fffdf8;
  --rva-sombra: 0 24px 60px rgba(12, 10, 6, .22), 0 4px 14px rgba(12, 10, 6, .10);
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  font-family: "Archivo", "Inter", "Helvetica Neue", Arial, sans-serif;
  color: var(--rva-tinta);
  -webkit-font-smoothing: antialiased;
}
#rva-agente-root *,
#rva-agente-root *::before,
#rva-agente-root *::after { box-sizing: border-box; }

/* Cuando la tienda muestra su botón de WhatsApp, el agente se apoya arriba
   para que los dos lanzadores no se superpongan. */
body:has(.wafloat) #rva-agente-root { bottom: 86px; }

/* ---------------------------------------------------------------- chooser launcher */
.rva-fab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rva-crema);
  box-shadow: none;
  transition: transform .18s ease;
}
.rva-fab:hover { transform: translateY(-2px); }
.rva-selector {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 4px;
  width: 320px;
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 118 / 71;
  padding: 0 26px 0 54px;
  border: 0;
  border-radius: 0;
  background: #fff3b2;
  clip-path: polygon(20.975% 0.176%, 24.364% 0.176%, 91.102% 8.627%, 98.729% 9.683%, 99.153% 10.035%, 100.0% 11.796%, 100.0% 14.965%, 99.788% 15.317%, 99.788% 18.838%, 99.576% 19.19%, 99.364% 25.528%, 99.153% 25.88%, 98.941% 32.923%, 98.729% 33.275%, 98.729% 36.092%, 98.517% 36.444%, 98.305% 43.838%, 98.093% 44.19%, 97.246% 59.683%, 97.034% 60.035%, 97.034% 63.204%, 96.822% 63.556%, 96.61% 69.894%, 96.398% 70.246%, 96.398% 73.415%, 96.186% 73.768%, 96.186% 76.937%, 95.975% 77.289%, 95.975% 80.458%, 95.763% 80.81%, 94.915% 97.711%, 93.644% 99.824%, 90.89% 99.824%, 17.161% 89.965%, 15.042% 89.261%, 0.212% 58.275%, 0.0% 57.57%, 0.0% 54.754%, 0.212% 54.401%, 0.424% 48.415%, 0.636% 48.063%, 0.636% 45.599%, 0.847% 45.246%, 0.847% 42.782%, 1.059% 42.43%, 1.059% 39.261%, 1.271% 38.908%, 1.695% 31.162%, 2.119% 28.345%, 2.119% 25.88%, 2.542% 24.12%, 20.975% 0.176%);
  touch-action: pan-y;
}
.rva-selector::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%20100'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D%22M20.975%200.176L24.364%200.176L91.102%208.627L98.729%209.683L99.153%2010.035L100.0%2011.796L100.0%2014.965L99.788%2015.317L99.788%2018.838L99.576%2019.19L99.364%2025.528L99.153%2025.88L98.941%2032.923L98.729%2033.275L98.729%2036.092L98.517%2036.444L98.305%2043.838L98.093%2044.19L97.246%2059.683L97.034%2060.035L97.034%2063.204L96.822%2063.556L96.61%2069.894L96.398%2070.246L96.398%2073.415L96.186%2073.768L96.186%2076.937L95.975%2077.289L95.975%2080.458L95.763%2080.81L94.915%2097.711L93.644%2099.824L90.89%2099.824L17.161%2089.965L15.042%2089.261L0.212%2058.275L0.0%2057.57L0.0%2054.754L0.212%2054.401L0.424%2048.415L0.636%2048.063L0.636%2045.599L0.847%2045.246L0.847%2042.782L1.059%2042.43L1.059%2039.261L1.271%2038.908L1.695%2031.162L2.119%2028.345L2.119%2025.88L2.542%2024.12L20.975%200.176Z%22%20fill%3D'none'%20stroke%3D'%230c0c0c'%20stroke-width%3D'1.7'%20vector-effect%3D'non-scaling-stroke'%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@supports (backdrop-filter: blur(1px)) {
  .rva-selector {
    background: rgba(255, 235, 110, .72);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .rva-selector { background: #fff3b2; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.rva-selector > * { position: relative; z-index: 1; }
.rva-selector-center {
  position: static;
  align-self: center;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding-bottom: 1px;
  color: var(--rva-tinta);
  text-align: center;
  pointer-events: auto;
}
.rva-selector-center b { font-size: 11px; line-height: 1.1; white-space: nowrap; }
.rva-selector-marca { display: flex; align-items: center; gap: 5px; height: 45px; }
.rva-selector-logo { display: block; width: 68px; height: 43px; object-fit: contain; }
.rva-selector-apoyo { font-size: 10px; line-height: 1.1; white-space: normal; }
.rva-selector-help {
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid rgba(20, 18, 14, .16);
  border-radius: 8px;
  background: #FEF9F0;
  box-shadow: 0 2px 6px rgba(20, 18, 14, .12);
  color: var(--rva-tinta);
  font-size: 12px;
  line-height: 1.2;
  text-align: right;
}
.rva-selector-center b { font-size: 12.5px; line-height: 1.1; white-space: nowrap; }
.rva-selector-apoyo { max-width: 100%; }
.rva-selector-track {
  position: relative;
  width: 100px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  background: var(--rva-crema-2);
  box-shadow: inset 0 1px 3px rgba(20, 18, 14, .18);
}
.rva-selector-track::before,
.rva-selector-track::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rva-suave);
}
.rva-selector-track::before { left: 5px; }
.rva-selector-track::after { right: 5px; }
.rva-selector-track:focus-within {
  outline: 3px solid var(--rva-tinta);
  outline-offset: 3px;
}
.rva-selector-thumb {
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rva-amarillo);
  box-shadow: 0 1px 4px rgba(20, 18, 14, .3);
  transition: transform .08s linear;
}
.rva-selector-range {
  position: absolute;
  z-index: 2;
  inset: -6px 0 auto;
  width: 100%;
  height: 32px;
  min-height: 32px;
  margin: 0;
  opacity: 0;
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: pan-y;
}
.rva-selector-thumb { transform: translateX(calc(var(--rva-range-value, 50) * .80px)); }
.rva-persona {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 48px;
  height: 148px;
  min-width: 0;
  padding: 0;
  padding-bottom: 12px;
  border: 0;
  background: transparent;
  color: var(--rva-tinta);
  cursor: pointer;
}
.rva-persona:focus-visible { outline: 3px solid var(--rva-amarillo-2); outline-offset: 2px; }
.rva-persona-imagen {
  display: block;
  width: 132px;
  height: 120px;
  max-width: none;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .22));
}
.rva-persona-nombre { font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .03em; }
.rva-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.rva-fab-punto {
  position: absolute;
  left: 8.90%;
  top: 43.13%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 8.47%; height: 13.73%; flex: 0 0 auto; border-radius: 50%;
  background: #777; border: 1px solid #14120e;
}
.rva-selector .rva-fab-punto[data-conectada="true"] { background: #32864b; }
.rva-selector .rva-fab-punto[data-conectada="false"] { background: #a33b32; }
.rva-fab.oculto { visibility: hidden; opacity: 0; pointer-events: none; transform: scale(.88); }

/* ---------------------------------------------------------------- panel */
.rva-panel {
  position: absolute;
  right: 0;
  bottom: 74px;
  width: min(620px, calc(100vw - 24px));
  height: min(760px, calc(100dvh - 100px));
  min-height: 430px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--rva-crema);
  border: 1px solid rgba(20, 18, 14, .16);
  border-radius: 22px;
  box-shadow: var(--rva-sombra);
  transform-origin: bottom right;
  animation: rva-entrar .22s cubic-bezier(.2, .8, .2, 1) both;
}
.rva-panel[hidden] { display: none !important; }
@keyframes rva-entrar {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------- cabecera */
.rva-cab {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 14px 14px;
  background: #fff3b2;
  color: var(--rva-tinta);
}
@supports (backdrop-filter: blur(1px)) {
  .rva-cab { background: rgba(255, 235, 110, .72); backdrop-filter: blur(14px) saturate(1.08); -webkit-backdrop-filter: blur(14px) saturate(1.08); }
}
@media (prefers-reduced-transparency: reduce) {
  .rva-cab { background: #fff3b2; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.rva-cab::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rva-amarillo), transparent);
  opacity: .55;
}
.rva-cab-avatar {
  position: relative;
  width: 55px; height: 48px; flex: 0 0 55px;
  background: transparent;
  display: grid; place-items: end center;
  overflow: visible;
}
.rva-cab-avatar img { width: 30px; height: 30px; object-fit: contain; display: block; }
#rva-agente-root[data-personaje="crak"] .rva-cab-avatar img,
#rva-agente-root[data-personaje="reina"] .rva-cab-avatar img {
  position: absolute; bottom: -20px; left: 0;
  width: 55px; height: 120px; object-fit: contain; object-position: center bottom;
  transform: none;
}
.rva-cab-avatar i {
  position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #45b36b; border: 2px solid var(--rva-tinta);
}
.rva-cab-info { min-width: 0; flex: 1 1 auto; }
.rva-cab-info b {
  display: block;
  font-size: 16px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rva-cab-info span {
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px;
  font-size: 11.5px; color: rgba(20, 18, 14, .76);
}
.rva-cab-info span i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--rva-amarillo);
  display: inline-block;
}
.rva-cab-acciones { display: flex; align-items: center; gap: 2px; }
.rva-legado {
  max-width: 132px;
  padding: 5px 8px;
  border: 1px solid rgba(20, 18, 14, .16);
  border-radius: 999px;
  background: var(--rva-crema);
  color: var(--rva-suave);
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  cursor: pointer;
}
.rva-legado:hover { border-color: var(--rva-amarillo-2); color: var(--rva-tinta); }
.rva-legado:focus-visible { outline: 2px solid var(--rva-tinta); outline-offset: 2px; }
.rva-legado[hidden] { display: none !important; }
.rva-icono {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--rva-tinta);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rva-icono:hover { background: rgba(20, 18, 14, .08); color: var(--rva-tinta); }
.rva-icono:focus-visible { outline: 2px solid var(--rva-tinta); outline-offset: 1px; }
.rva-icono svg { width: 19px; height: 19px; display: block; }

/* ---------------------------------------------------------------- hilo */
.rva-hilo {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 10px;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(240, 194, 75, .10), transparent 60%),
    var(--rva-crema);
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 18, 14, .22) transparent;
}
.rva-hilo::-webkit-scrollbar { width: 7px; }
.rva-hilo::-webkit-scrollbar-thumb { background: rgba(20, 18, 14, .20); border-radius: 9px; }

.rva-dia {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 16px;
  font-size: 10.5px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--rva-suave);
}
.rva-dia::before, .rva-dia::after { content: ""; height: 1px; flex: 1; background: var(--rva-linea); }

.rva-fila { display: flex; gap: 8px; margin: 0 0 10px; align-items: flex-end; }
.rva-fila.yo { justify-content: flex-end; }
.rva-mini {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%; background: var(--rva-amarillo);
  display: grid; place-items: center; overflow: hidden;
  border: 1px solid rgba(20, 18, 14, .10);
}
.rva-mini img { width: 18px; height: 18px; object-fit: contain; }
#rva-agente-root[data-personaje="crak"] .rva-mini img,
#rva-agente-root[data-personaje="reina"] .rva-mini img {
  width: 26px; height: 26px; object-fit: cover; object-position: 50% 0;
  transform: scale(2.7); transform-origin: 50% 7%;
}
.rva-avatar-txt { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; line-height: 1; font-size: 27px; }
.rva-cab-avatar .rva-avatar-txt { font-size: 21px; }
.rva-mini .rva-avatar-txt { font-size: 12px; width: 18px; height: 18px; }
.rva-fila.yo .rva-mini { order: 2; background: var(--rva-tinta); }
.rva-fila.yo .rva-mini img { filter: invert(1); opacity: .9; }

.rva-burbuja {
  max-width: 88%;
  padding: 10px 13px 8px;
  border-radius: 16px 16px 16px 5px;
  background: var(--rva-blanco);
  border: 1px solid var(--rva-linea);
  box-shadow: 0 2px 5px rgba(20, 18, 14, .04);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rva-fila.yo .rva-burbuja {
  background: var(--rva-tinta);
  color: var(--rva-crema);
  border-color: var(--rva-tinta);
  border-radius: 16px 16px 5px 16px;
}
.rva-burbuja .rva-hora {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  letter-spacing: .03em;
  color: var(--rva-suave);
  text-align: right;
}
.rva-fila.yo .rva-burbuja .rva-hora { color: rgba(247, 243, 233, .52); }
.rva-burbuja a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* mini tarjetas de producto dentro del hilo (referencia Sommelier) */
.rva-cards {
  display: flex;
  white-space: normal;
  gap: 8px;
  margin: 8px -2px 1px;
  padding: 1px 2px 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(20, 18, 14, .22) transparent;
}
.rva-cards::-webkit-scrollbar { height: 5px; }
.rva-cards::-webkit-scrollbar-thumb { background: rgba(20, 18, 14, .20); border-radius: 9px; }
.rva-card,
.rva-card * { white-space: normal; text-decoration: none; }
.rva-card {
  flex: 0 0 152px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(20, 18, 14, .14);
  border-radius: 12px;
  background: var(--rva-blanco);
  color: var(--rva-tinta);
  text-decoration: none;
  box-shadow: 0 8px 18px -14px rgba(16, 24, 40, .45);
}
.rva-card:hover { border-color: rgba(20, 18, 14, .28); }
.rva-card-foto {
  position: relative;
  display: grid;
  place-items: center;
  height: 86px;
  flex: 0 0 86px;
  overflow: hidden;
  background: var(--rva-crema-2);
}
.rva-card-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rva-card-ico { font-size: 30px; line-height: 1; opacity: .42; }
.rva-card-cuerpo { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px 8px; min-height: 76px; }
.rva-card-nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
}
.rva-card-stock {
  color: var(--rva-suave);
  font-size: 9.5px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rva-card-precio { margin-top: auto; font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.rva-card-ver { color: var(--rva-suave); font-size: 9.5px; font-weight: 700; }
.rva-fila.yo .rva-card { background: var(--rva-blanco); color: var(--rva-tinta); }

/* adjuntos dentro de la burbuja */
.rva-media { margin: -2px 0 6px; }
.rva-media img.rva-img {
  display: block;
  max-width: 100%;
  width: 240px;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
  background: var(--rva-crema-2);
}
.rva-media video { display: block; width: 250px; max-width: 100%; border-radius: 10px; background: #000; }
.rva-media audio { display: block; width: 250px; max-width: 100%; }
.rva-doc {
  display: flex; align-items: center; gap: 9px;
  min-width: 190px;
  padding: 8px 10px;
  border: 1px solid var(--rva-linea);
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  text-decoration: none !important;
}
.rva-fila.yo .rva-doc { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
.rva-doc-ico {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 8px; background: var(--rva-amarillo);
  display: grid; place-items: center;
  color: var(--rva-tinta);
}
.rva-doc-ico svg { width: 17px; height: 17px; }
.rva-doc b { display: block; font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.rva-doc span { display: block; font-size: 10px; color: var(--rva-suave); margin-top: 1px; }
.rva-fila.yo .rva-doc span { color: rgba(247, 243, 233, .58); }

/* quick replies */
.rva-quick { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 14px 34px; }
.rva-bienvenida { flex: 0 0 100%; display: grid; gap: 8px; min-width: 0; }
.rva-bienvenida-opciones, .rva-capacidades-opciones { display: flex; flex-wrap: wrap; gap: 7px; }
.rva-capacidades { border: 1px solid var(--rva-linea); border-radius: 12px; padding: 9px; background: rgba(255,255,255,.42); }
.rva-capacidades[hidden] { display: none !important; }
.rva-capacidades p { margin: 0 0 8px; color: var(--rva-suave); font-size: 11px; line-height: 1.35; }
.rva-capacidades-nota { margin-top: 8px !important; }
.rva-capacidades a { display: inline-flex; align-items: center; color: var(--rva-tinta); text-decoration: none; }
.rva-sistema {
  margin: 0 auto 12px; max-width: 86%;
  text-align: center; font-size: 10.5px; line-height: 1.45;
  color: var(--rva-suave);
  background: rgba(20, 18, 14, .04);
  border: 1px dashed var(--rva-linea);
  border-radius: 10px; padding: 6px 10px;
}
.rva-chip {
  border: 1px solid rgba(20, 18, 14, .20);
  border-radius: 999px;
  padding: 7px 12px;
  background: transparent;
  color: var(--rva-tinta);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.rva-chip:hover { background: var(--rva-amarillo); border-color: var(--rva-amarillo-2); transform: translateY(-1px); }
.rva-chip:focus-visible { outline: 2px solid var(--rva-tinta); outline-offset: 2px; }

/* escribiendo */
.rva-typing { display: flex; gap: 8px; align-items: flex-end; margin: 0 0 10px; }
.rva-typing[hidden] { display: none !important; }
.rva-typing .rva-puntos {
  display: flex; gap: 4px; align-items: center;
  padding: 13px 14px;
  border-radius: 16px 16px 16px 5px;
  background: var(--rva-blanco);
  border: 1px solid var(--rva-linea);
}
.rva-puntos i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rva-suave);
  animation: rva-pulso 1.1s infinite ease-in-out;
}
.rva-puntos i:nth-child(2) { animation-delay: .15s; }
.rva-puntos i:nth-child(3) { animation-delay: .30s; }
@keyframes rva-pulso { 0%, 70%, 100% { opacity: .28; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

.rva-aviso {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(240, 194, 75, .16);
  border: 1px solid rgba(217, 169, 47, .35);
  font-size: 11.5px;
  line-height: 1.4;
  color: #5c4a18;
}
.rva-aviso.error { background: rgba(190, 61, 48, .10); border-color: rgba(190, 61, 48, .30); color: #8a2b21; }

.rva-sistema.alerta {
  color: #7a3a12;
  background: rgba(240, 194, 75, .22);
  border: 1px solid rgba(217, 169, 47, .55);
  font-weight: 600;
}
.rva-volver {
  display: block;
  margin: 8px auto 0;
  border: 1px solid rgba(92, 74, 24, .35);
  background: #fff;
  color: #5c4a18;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.rva-volver:hover { background: var(--rva-amarillo); }

/* ---------------------------------------------------------------- compositor */
.rva-pie {
  flex: 0 0 auto;
  padding: 9px 10px 10px;
  border-top: 1px solid var(--rva-linea);
  background: var(--rva-blanco);
}
.rva-previo {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 8px;
  padding: 7px 9px;
  border: 1px solid var(--rva-linea);
  border-radius: 10px;
  background: var(--rva-crema);
  font-size: 11.5px;
}
.rva-previo img { width: 38px; height: 38px; object-fit: cover; border-radius: 7px; }
.rva-previo video { width: 54px; height: 38px; object-fit: cover; border-radius: 7px; background: #000; }
.rva-previo .rva-previo-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rva-previo button {
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: rgba(20, 18, 14, .10); color: var(--rva-tinta);
  cursor: pointer; font-size: 15px; line-height: 1;
}
.rva-previo[hidden] { display: none !important; }

.rva-comp {
  display: flex; align-items: flex-end; gap: 4px;
  padding: 4px 4px 4px 2px;
  border: 1px solid rgba(20, 18, 14, .18);
  border-radius: 16px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.rva-comp:focus-within { border-color: var(--rva-tinta); box-shadow: 0 0 0 3px rgba(240, 194, 75, .28); }
.rva-comp textarea {
  flex: 1 1 auto;
  min-height: 38px;
  max-height: 112px;
  padding: 9px 4px 7px 8px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--rva-tinta);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
}
.rva-comp textarea::placeholder { color: #948b7b; }
.rva-adjuntar {
  width: 38px; height: 38px; flex: 0 0 38px;
  border: 0; border-radius: 12px;
  background: transparent; color: var(--rva-suave);
  display: grid; place-items: center;
  cursor: pointer;
}
.rva-adjuntar:hover { background: var(--rva-crema); color: var(--rva-tinta); }
.rva-adjuntar:focus-visible { outline: 2px solid var(--rva-tinta); outline-offset: 1px; }
.rva-adjuntar svg { width: 21px; height: 21px; }
.rva-enviar {
  width: 40px; height: 40px; flex: 0 0 40px;
  border: 0; border-radius: 12px;
  background: var(--rva-amarillo); color: var(--rva-tinta);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.rva-enviar:hover { background: var(--rva-amarillo-2); }
.rva-enviar:active { transform: scale(.94); }
.rva-enviar:disabled { opacity: .45; cursor: default; transform: none; }
.rva-enviar svg { width: 20px; height: 20px; }
.rva-pie-nota {
  margin: 7px 2px 0;
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--rva-suave);
  text-align: center;
}
.rva-pie-nota button {
  border: 0; background: transparent; padding: 0;
  color: inherit; font: inherit; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer;
}
/* ---------------------------------------------------------------- lightbox */
.rva-luz {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  padding: 22px;
  background: rgba(10, 8, 4, .86);
  backdrop-filter: blur(4px);
  animation: rva-entrar .15s ease both;
}
.rva-luz[hidden] { display: none !important; }
.rva-luz img { max-width: min(920px, 94vw); max-height: 88vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.rva-luz button {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .10); color: #fff;
  font-size: 21px; cursor: pointer;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 560px) {
  #rva-agente-root { right: 14px; bottom: 14px; }
  .rva-fab { gap: 4px; }
  .rva-selector { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 4px; width: min(276px, calc(100vw - 32px)); flex: 0 0 auto; height: auto; aspect-ratio: 118 / 71; padding: 0 20px 0 50px; }
  .rva-selector-help { font-size: 11px; }
  .rva-persona { width: 36px; height: 132px; padding-bottom: 14px; }
  .rva-persona-imagen { width: 116px; height: 106px; }
  .rva-persona-nombre { font-size: 10px; }
  .rva-selector-center b { font-size: 11.5px; white-space: nowrap; }
  .rva-selector-apoyo { max-width: 104px; font-size: 9px; }
  .rva-selector-marca { height: 40px; }
  .rva-selector-logo { width: 60px; height: 38px; }
  .rva-selector-track { width: 94px; height: 21px; flex-basis: 21px; }
  .rva-selector-thumb { transform: translateX(calc(var(--rva-range-value, 50) * .74px)); }
  .rva-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    bottom: 0;
  }
  .rva-cab { padding-top: max(14px, env(safe-area-inset-top)); }
  .rva-pie { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .rva-media img.rva-img, .rva-media video, .rva-media audio { width: 100%; max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
  #rva-agente-root *, #rva-agente-root *::before, #rva-agente-root *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}