/* ============================================================================
   SinergIA 180 — Monitor de agentes en vivo (live.css)
   ----------------------------------------------------------------------------
   Mockup de cliente de mensajería (aire WhatsApp Web) con la paleta de la casa:
   lista de conversaciones a la izquierda, hilo de burbujas a la derecha.

   Territorio CLARO. Escala monocroma NARANJA — a tono con las capturas del
   prototipo (Extraceite One), igual que agente-demo.css. El único color
   fuera de esa escala es --critico, y solo para la alerta crítica y la
   confirmación de una acción.

   La raíz llena el 100% del contenedor (va dentro de la pantalla de un
   portátil): el scroll vive SOLO en el hilo y en la lista lateral.
   Solo se animan transform y opacity. Sin backdrop-filter.
   ========================================================================== */

/* --------------------------------------------------------------- contenedor */
.viv{
  --viv-lateral:clamp(232px, 29%, 336px);
  --viv-burbuja:min(66%, 620px);

  /* Escala naranja local: reemplaza la escala azul solo dentro de esta pieza */
  --azul-900:#4A2508;
  --azul-800:#6B360D;
  --azul-700:#8F4712;
  --azul-ia :#C2701C;
  --azul-500:#DB8F42;
  --azul-400:#E6AC6C;
  --azul-300:#EFC69A;
  --azul-200:#F6DFC2;
  --azul-100:#FBEEDE;
  --azul-50 :#FDF6EE;

  position:relative;
  display:flex;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--f-body);
  -webkit-text-size-adjust:100%;
}
.viv-app{ display:flex; flex:1 1 auto; min-width:0; min-height:0; width:100%; }

/* ===========================================================================
   BARRA LATERAL — la lista de conversaciones
   ========================================================================= */
.viv-lateral{
  flex:0 0 var(--viv-lateral);
  display:flex; flex-direction:column;
  min-width:0; min-height:0;
  background:var(--fondo);
  border-right:1px solid var(--linea);
}

.viv-lateral-cab{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px;
  background:var(--papel);
  border-bottom:1px solid var(--linea);
}
.viv-yo-av{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--azul-100);
  color:var(--azul-700);
}
.viv-yo-av svg{ width:19px; height:19px; display:block; }

.viv-lateral-tit{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.viv-titulo{
  font-family:var(--f-mono);
  font-size:11.5px; letter-spacing:.02em;
  color:var(--texto-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viv-conexion{ display:flex; align-items:center; gap:7px; min-width:0; }

/* punto de conexión: gris al conectar, azul latiendo al conectar */
.viv-punto{
  position:relative; flex:none;
  width:8px; height:8px; border-radius:50%;
  background:var(--texto-3);
}
.viv-punto::after{
  content:''; position:absolute; inset:-5px;
  border-radius:50%; border:1px solid var(--azul-300);
  opacity:0; transform:scale(.6);
}
.viv[data-estado="conectado"] .viv-punto{ background:var(--azul-ia); }
.viv[data-estado="conectado"] .viv-punto::after{ animation:viv-late 2.6s ease-out infinite; }
@keyframes viv-late{
  0%   { opacity:.85; transform:scale(.6); }
  70%  { opacity:0;   transform:scale(1.5); }
  100% { opacity:0;   transform:scale(1.5); }
}
.viv-estado{ font-size:11px; font-weight:700; letter-spacing:.01em; color:var(--texto-3); }
.viv[data-estado="conectado"] .viv-estado{ color:var(--azul-700); }
.viv-lat{
  font-family:var(--f-mono);
  font-size:10px; font-variant-numeric:tabular-nums;
  color:var(--texto-3);
  padding:2px 7px; border-radius:999px;
  background:var(--azul-50);
  border:1px solid var(--linea);
  white-space:nowrap;
}

/* buscador decorativo ------------------------------------------------------ */
.viv-buscar{
  display:flex; align-items:center; gap:9px;
  margin:9px 12px;
  height:32px; padding:0 12px;
  border-radius:999px;
  background:var(--azul-50);
  border:1px solid var(--linea);
  color:var(--texto-3);
}
.viv-buscar-ico{ display:inline-flex; }
.viv-buscar-ico svg{ width:15px; height:15px; display:block; }
.viv-buscar-txt{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* lista de contactos ------------------------------------------------------- */
.viv-contactos{
  list-style:none; margin:0; padding:0;
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
}
.viv-conv{ display:block; }
.viv-contacto{
  display:flex; align-items:center; gap:12px;
  width:100%; text-align:left;
  padding:9px 13px;
  border:0; border-bottom:1px solid var(--linea);
  background:transparent;
  font-family:inherit; color:inherit;
  cursor:pointer;
}
.viv-contacto:hover{ background:var(--azul-50); }
.viv-contacto:focus-visible{ outline:2px solid var(--azul-ia); outline-offset:-2px; }
.viv-contacto--on,
.viv-contacto--on:hover{ background:var(--azul-100); }

.viv-contacto-av{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--azul-50);
  border:1px solid var(--azul-200);
  color:var(--azul-ia);
}
.viv-contacto-av svg{ width:19px; height:19px; display:block; }
.viv-contacto-av[data-c="2"]{ color:var(--azul-700); }
.viv-contacto-av[data-c="3"]{ color:var(--azul-800); }
.viv-contacto-av[data-c="4"]{ color:var(--azul-500); }
.viv-contacto-av[data-c="5"]{ color:var(--azul-900); }

.viv-contacto-cuerpo{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
.viv-contacto-f1,
.viv-contacto-f2{ display:flex; align-items:center; gap:8px; min-width:0; }
.viv-contacto-nom{
  flex:1 1 auto; min-width:0;
  font-size:13px; font-weight:600; color:var(--texto);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viv-contacto-hora{
  flex:none;
  font-family:var(--f-mono); font-size:10px; font-variant-numeric:tabular-nums;
  color:var(--texto-3);
}
.viv-contacto--on .viv-contacto-hora{ color:var(--azul-700); }
.viv-contacto-ultimo{
  flex:1 1 auto; min-width:0;
  font-size:11.5px; line-height:1.35; color:var(--texto-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viv-globo{
  flex:none;
  min-width:18px; height:18px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:var(--azul-ia); color:#FFFFFF;
  font-size:10.5px; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
  animation:viv-globo .22s ease-out both;
}
.viv-globo[hidden]{ display:none; }
@keyframes viv-globo{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }

/* ===========================================================================
   PANEL — cabecera, hilo y barra de escritura
   ========================================================================= */
.viv-panel{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  min-width:0; min-height:0;
}

.viv-cab{
  display:flex; align-items:center; gap:12px;
  padding:9px 16px;
  background:var(--papel);
  border-bottom:1px solid var(--linea);
}
.viv-volver{
  display:none;
  flex:none; width:34px; height:34px; margin-left:-6px;
  align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--texto-2);
}
.viv-volver svg{ width:19px; height:19px; display:block; }
.viv-volver:hover{ background:var(--azul-100); color:var(--azul-700); }
.viv-volver:focus-visible{ outline:2px solid var(--azul-ia); outline-offset:2px; }

.viv-cab-av{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--azul-50);
  border:1px solid var(--azul-200);
  color:var(--azul-ia);
}
.viv-cab-av svg{ width:19px; height:19px; display:block; }
.viv-cab-av[data-c="2"]{ color:var(--azul-700); }
.viv-cab-av[data-c="3"]{ color:var(--azul-800); }
.viv-cab-av[data-c="4"]{ color:var(--azul-500); }
.viv-cab-av[data-c="5"]{ color:var(--azul-900); }

.viv-cab-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; }
.viv-cab-nom{
  font-size:14px; font-weight:700; color:var(--texto); letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viv-sub{
  font-size:11.5px; color:var(--texto-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.viv-sub--tipeo{ color:var(--azul-ia); font-weight:600; }

.viv-cab-acc{ display:flex; align-items:center; gap:16px; color:var(--texto-3); }
.viv-cab-ico{ display:inline-flex; }
.viv-cab-ico svg{ width:17px; height:17px; display:block; }

/* ------------------------------------------------------------------- hilo */
.viv-zona{ position:relative; flex:1 1 auto; min-height:0; display:flex; }
.viv-log{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;   /* con margin-top:auto el hilo se llena
                                            desde abajo, como el cliente real */
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  padding:16px clamp(14px, 4%, 46px) 14px;
  /* trama del fondo: la de WhatsApp, pero en azul muy claro */
  background-color:var(--azul-50);
  background-image:
    repeating-linear-gradient(45deg,  var(--azul-100) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, var(--azul-100) 0 1px, transparent 1px 26px);
  background-attachment:local, local;
}
.viv-log:focus-visible{ outline:2px solid var(--azul-ia); outline-offset:-2px; }
.viv-lista{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }

/* ---------------------------------------------------------- burbujas */
.viv-msg{
  display:flex; justify-content:flex-start;
  animation:viv-entra .26s cubic-bezier(.22,.7,.3,1) both;
}
.viv-msg--yo{ justify-content:flex-end; }
.viv-oculta{ display:none !important; }
@keyframes viv-entra{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.viv-burbuja{
  position:relative;
  max-width:var(--viv-burbuja);
  min-width:0;
  padding:7px 11px 7px 11px;
  border-radius:2px 12px 12px 12px;
  background:var(--fondo);
  box-shadow:0 1px 1px rgba(13,20,36,.10);
}
/* cola de la burbuja, como en el cliente real */
.viv-msg:not(.viv-msg--yo) .viv-burbuja::before{
  content:''; position:absolute; top:0; left:-7px;
  border-top:7px solid var(--fondo);
  border-left:7px solid transparent;
}
.viv-msg--yo .viv-burbuja{
  border-radius:12px 2px 12px 12px;
  background:var(--azul-ia);
}
.viv-msg--yo .viv-burbuja::before{
  content:''; position:absolute; top:0; right:-7px;
  border-top:7px solid var(--azul-ia);
  border-right:7px solid transparent;
}

.viv-linea{ display:flex; align-items:center; gap:7px; margin:0 0 2px; flex-wrap:wrap; }
.viv-nom{ font-size:11.5px; font-weight:700; color:var(--azul-ia); letter-spacing:.005em; }
.viv-msg[data-c="2"] .viv-nom{ color:var(--azul-700); }
.viv-msg[data-c="3"] .viv-nom{ color:var(--azul-800); }
.viv-msg[data-c="4"] .viv-nom{ color:var(--azul-500); }
.viv-msg[data-c="5"] .viv-nom{ color:var(--azul-900); }
/* en una conversación de un solo agente el nombre sobra, como en el chat 1 a 1 */
.viv:not([data-vista="__todos__"]) .viv-nom{ display:none; }

.viv-tag{
  font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:2px 6px; border-radius:999px;
  color:var(--azul-800);
  background:var(--azul-100);
}
.viv-tag--rojo{
  color:var(--critico);
  background:rgba(199,38,60,.08);
}

.viv-txt{
  margin:0; font-size:13.5px; line-height:1.5;
  color:var(--texto);
  overflow-wrap:anywhere;
}
.viv-txt::after{ content:''; display:block; clear:both; }
.viv-msg--yo .viv-txt{ color:#FFFFFF; }

/* hora + doble check dentro de la burbuja */
.viv-sello{
  float:right;
  display:inline-flex; align-items:center; gap:3px;
  margin:5px -2px -2px 12px;
  line-height:1;
}
.viv-sello--pie{ float:none; display:inline-flex; margin:0 0 0 auto; }
.viv-hora{
  font-family:var(--f-mono);
  font-size:9.5px; color:var(--texto-3); font-variant-numeric:tabular-nums;
}
.viv-msg--yo .viv-hora{ color:var(--azul-200); }
.viv-check{ display:inline-flex; color:var(--azul-200); }
.viv-check svg{ width:14px; height:14px; display:block; }

/* tipos ------------------------------------------------------------------ */
/* info → burbuja normal · ok → nombre y texto en azul medio                  */
.viv-msg--ok .viv-txt{ color:var(--azul-700); }

/* alerta → filo azul profundo */
.viv-msg--alerta .viv-burbuja{
  border-left:3px solid var(--azul-700);
  border-radius:2px 12px 12px 3px;
}
.viv-msg--alerta .viv-txt{ color:var(--azul-900); }

/* critico → rojo, con moderación */
.viv-msg--critico .viv-burbuja{
  border-left:3px solid var(--critico);
  border-radius:2px 12px 12px 3px;
}
.viv-msg--critico .viv-txt{ color:var(--texto); font-weight:500; }

/* latido de "sin novedades": divisor centrado, como el separador de fecha */
.viv-pulso{ justify-content:center; }
.viv-pulso-txt{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:10px; color:var(--texto-2);
  padding:5px 13px; border-radius:8px;
  background:var(--fondo);
  box-shadow:0 1px 1px rgba(13,20,36,.10);
}

/* --------------------------------------------------------- está escribiendo */
.viv-tipeo{ display:flex; margin-top:7px; }
.viv-tipeo[hidden]{ display:none; }
.viv-tipeo-bur{
  position:relative;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 13px;
  border-radius:2px 12px 12px 12px;
  background:var(--fondo);
  box-shadow:0 1px 1px rgba(13,20,36,.10);
}
.viv-tipeo-bur::before{
  content:''; position:absolute; top:0; left:-7px;
  border-top:7px solid var(--fondo);
  border-left:7px solid transparent;
}
.viv-tipeo-nom{ font-size:11.5px; font-weight:700; color:var(--azul-ia); }
.viv-tipeo-nom:empty{ display:none; }
.viv-pts{ display:inline-flex; gap:4px; align-items:center; }
.viv-pts i{
  width:5px; height:5px; border-radius:50%;
  background:var(--azul-400);
  animation:viv-punto 1.15s ease-in-out infinite;
}
.viv-pts i:nth-child(2){ animation-delay:.16s; }
.viv-pts i:nth-child(3){ animation-delay:.32s; }
@keyframes viv-punto{
  0%,100%{ opacity:.28; transform:translateY(0); }
  40%    { opacity:1;   transform:translateY(-3px); }
}

/* ------------------------------------------------------ píldora de nuevos */
.viv-nuevos{
  position:absolute; left:50%; bottom:14px; z-index:3;
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 15px 8px 12px;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--azul-ia); color:#FFFFFF;
  font-family:inherit; font-size:12.5px; font-weight:600;
  box-shadow:0 10px 26px -10px rgba(74,37,8,.55);
  transition:transform .18s ease, opacity .18s ease;
}
.viv-nuevos[hidden]{ display:none; }
.viv-nuevos:hover{ transform:translateX(-50%) translateY(-2px); }
.viv-nuevos:focus-visible{ outline:2px solid var(--azul-900); outline-offset:3px; }
.viv-nuevos-ico{ display:inline-flex; }
.viv-nuevos-ico svg{ width:14px; height:14px; display:block; }

/* -------------------------------------------------- barra de escritura */
.viv-pie{
  border-top:1px solid var(--linea);
  background:var(--papel);
  padding:9px 16px 11px;
}
.viv-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.viv-chip{
  font-family:inherit; font-size:11px; font-weight:500; cursor:pointer;
  padding:5px 10px; border-radius:999px;
  background:var(--fondo);
  border:1px solid var(--linea-2);
  color:var(--texto-2);
  transition:transform .16s ease;
}
.viv-chip:hover{
  color:var(--azul-700);
  border-color:var(--azul-300);
  background:var(--azul-50);
  transform:translateY(-1px);
}
.viv-chip:focus-visible{ outline:2px solid var(--azul-ia); outline-offset:2px; }

.viv-fila{ display:flex; gap:9px; align-items:center; }
.viv-caja{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:10px;
  height:42px; padding:0 14px;
  background:var(--fondo);
  border:1px solid var(--linea-2);
  border-radius:999px;
}
.viv-caja:focus-within{ border-color:var(--azul-ia); box-shadow:0 0 0 3px var(--azul-100); }
.viv-adornos{ display:inline-flex; align-items:center; gap:10px; color:var(--texto-3); flex:none; }
.viv-adorno{ display:inline-flex; }
.viv-adorno svg{ width:18px; height:18px; display:block; }
.viv-input{
  flex:1 1 auto; min-width:0;
  height:40px; padding:0;
  font-family:inherit; font-size:14px; color:var(--texto);
  background:transparent;
  border:0; outline:none;
}
.viv-input::placeholder{ color:var(--texto-3); }
.viv-enviar{
  flex:none; width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--azul-ia); color:#FFFFFF;
  transition:transform .16s ease;
}
.viv-enviar svg{ width:19px; height:19px; display:block; }
.viv-enviar:hover{ background:var(--azul-700); transform:translateY(-1px); }
.viv-enviar:focus-visible{ outline:2px solid var(--azul-900); outline-offset:2px; }

.viv-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ------------------------------------------------- acción sobre planta */
/* La IA propone; el humano confirma. Dos clics: armar y confirmar. */
.viv-accion-caja{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:9px;
}
.viv-accion{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px 8px 11px;
  font-family:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; border-radius:999px;
  background:var(--fondo);
  border:1.5px solid var(--azul-ia);
  color:var(--azul-700);
  transition:transform .16s ease;
}
.viv-accion:hover{ background:var(--azul-50); transform:translateY(-1px); }
.viv-accion:focus-visible{ outline:2px solid var(--azul-ia); outline-offset:3px; }
.viv-accion-ico{ display:inline-flex; }
.viv-accion-ico svg{ width:15px; height:15px; display:block; }
.viv-accion-nota{ font-size:10.5px; letter-spacing:.02em; color:var(--texto-3); }

/* armada: rojo, el único no-azul del panel */
.viv-accion--confirmar{
  background:var(--critico);
  border-color:var(--critico);
  color:#FFFFFF;
}
.viv-accion--confirmar:hover{ background:var(--critico); }
.viv-accion--confirmar:focus-visible{ outline-color:var(--critico); }

/* ejecutada */
.viv-accion--hecha,
.viv-accion:disabled{
  cursor:default;
  background:var(--azul-50);
  border-color:var(--azul-200);
  border-style:solid; border-width:1.5px;
  color:var(--azul-800);
}
.viv-accion--hecha:hover{ transform:none; background:var(--azul-50); }

/* ---------------------------------------------------------- barras de scroll */
.viv-log::-webkit-scrollbar,
.viv-contactos::-webkit-scrollbar{ width:7px; }
.viv-log::-webkit-scrollbar-thumb,
.viv-contactos::-webkit-scrollbar-thumb{ background:var(--azul-200); border-radius:999px; }
.viv-log::-webkit-scrollbar-track,
.viv-contactos::-webkit-scrollbar-track{ background:transparent; }
.viv-log, .viv-contactos{ scrollbar-width:thin; scrollbar-color:var(--azul-200) transparent; }

/* =========================================================================
   MÓVIL — una sola columna, como el cliente en el teléfono
   ========================================================================= */
@media (max-width:760px){
  .viv{ --viv-burbuja:88%; }
  .viv-lateral{ display:none; }
  .viv-volver{ display:inline-flex; }
  .viv[data-movil="lista"] .viv-lateral{
    display:flex; flex:1 1 auto; width:100%; border-right:0;
  }
  .viv[data-movil="lista"] .viv-panel{ display:none; }
  .viv-cab{ padding:8px 12px; gap:10px; }
  .viv-cab-acc{ gap:13px; }
  .viv-log{ padding:12px 12px 12px; }
  .viv-pie{ padding:8px 10px 10px; }
  .viv-chips{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; padding-bottom:2px; margin-bottom:8px;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
    mask-image:linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
  }
  .viv-chips::-webkit-scrollbar{ display:none; }
  .viv-chip{ flex:none; }
  .viv-input{ font-size:16px; }   /* 16px evita el zoom de iOS */
  .viv-adornos{ gap:8px; }
  .viv-accion{ width:100%; justify-content:center; }
}

@media (max-width:400px){
  .viv-cab-acc{ display:none; }
  .viv-lateral-cab{ padding:10px 12px; }
  .viv-contacto{ padding:8px 11px; gap:10px; }
  .viv-contacto-av{ width:38px; height:38px; }
  .viv-caja{ padding:0 11px; gap:8px; }
  .viv-adorno:nth-child(2){ display:none; }
}

/* ------------------------------------------------- movimiento reducido */
/* Se aplica por media query y por clase: live.js lee el media query EN VIVO. */
@media (prefers-reduced-motion:reduce){
  .viv *, .viv *::after, .viv *::before{
    animation:none !important;
    transition:none !important;
  }
}
.viv--quieto *, .viv--quieto *::after, .viv--quieto *::before{
  animation:none !important;
  transition:none !important;
}

/* =========================================================================
   BLINDAJE — el panel es una pantalla dentro de la diapositiva
   -------------------------------------------------------------------------
   La sección que lo aloja puede ser de fondo azul (.section.azul), y esa
   regla pinta de blanco todo <p> y todo [pendiente] que encuentre dentro.
   Un mockup de chat no hereda el color de la diapositiva: manda él.
   Especificidad de tres clases para ganarle a `.section.azul p`.
   ========================================================================= */
.viv .viv-burbuja .viv-txt{ color:var(--texto); }
.viv .viv-msg--ok .viv-txt{ color:var(--azul-700); }
.viv .viv-msg--alerta .viv-txt{ color:var(--azul-900); }
.viv .viv-msg--critico .viv-txt{ color:var(--texto); }
.viv .viv-msg--yo .viv-txt{ color:#FFFFFF; }

/* dato pendiente del levantamiento, dentro de la burbuja */
.viv .viv-burbuja .ph{
  color:var(--azul-700);
  background:var(--azul-100);
  border-bottom:1.5px dashed var(--azul-400);
  border-radius:3px; padding:0 4px;
}
.viv .viv-msg--yo .ph{
  color:#FFFFFF;
  background:rgba(255,255,255,.18);
  border-bottom-color:rgba(255,255,255,.5);
}