/* =====================================================================
   Mensajes — WhatsApp dentro del panel
   Se replican proporciones y comportamiento de WhatsApp Web, pero los
   iconos y el patrón del fondo son dibujo propio: la obra gráfica de Meta
   no se copia. Los verdes de burbuja sí son los suyos, por reconocimiento.
   ===================================================================== */

:root {
  --wa-saliente: #d9fdd3;
  --wa-entrante: #ffffff;
  /* Fondo del chat: el dibujo de la consulta teñido con el color de Ajustes
     (el de la consulta o el personal de cada una, también el «otro color»).
     Lo bastante teñido para que cada color se reconozca; las burbujas siguen
     siendo las de WhatsApp y se leen igual con todos. */
  --wa-lienzo: color-mix(in oklab, var(--marca) 16%, #f6f4f1);
  --wa-linea: color-mix(in oklab, var(--marca) 42%, #958e86);
  --wa-linea-op: 1;
  --wa-texto: #111b21;
  --wa-tenue: #667781;
  --wa-tick: #8696a0;
  --wa-tick-leido: #53bdeb;
  --wa-cita-propia: rgba(6, 92, 60, .11);
  --wa-cita-ajena: rgba(17, 27, 33, .055);
  --wa-panel: rgba(255, 255, 255, .72);
  --wa-borde: rgba(17, 27, 33, .09);
  --wa-hover: rgba(17, 27, 33, .038);
  --wa-sel: color-mix(in oklab, var(--marca) 13%, #fff);
  --wa-sombra-burbuja: 0 1px .5px rgba(11, 20, 26, .13);
}

html[data-theme="dark"] {
  --wa-saliente: #005c4b;
  --wa-entrante: #202c33;
  --wa-lienzo: color-mix(in oklab, var(--marca) 18%, #0e1419);
  --wa-linea: color-mix(in oklab, var(--marca) 55%, #e8dccb);
  --wa-linea-op: .2;
  --wa-texto: #e9edef;
  --wa-tenue: #8696a0;
  --wa-tick: #8696a0;
  --wa-tick-leido: #53bdeb;
  --wa-cita-propia: rgba(255, 255, 255, .11);
  --wa-cita-ajena: rgba(255, 255, 255, .06);
  --wa-panel: rgba(17, 27, 33, .6);
  --wa-borde: rgba(255, 255, 255, .08);
  --wa-hover: rgba(255, 255, 255, .04);
  --wa-sel: color-mix(in oklab, var(--marca) 22%, #0b141a);
  --wa-sombra-burbuja: 0 1px .5px rgba(0, 0, 0, .28);
}

/* La vista ocupa todo el alto disponible: el scroll vive dentro del hilo,
   nunca en la página. */
#view-conversaciones.active { display: flex; overflow: hidden; }
#conversaciones-root { flex: 1; min-height: 0; display: flex; }

.msg {
  flex: 1;
  min-height: 0;
  display: grid;
  /* minmax(0, …): con un «1fr» a secas la columna no encoge por debajo de
     su contenido más ancho y, en el móvil, la conversación se salía por la
     derecha (cabecera, burbujas y botón de enviar cortados). */
  grid-template-columns: minmax(300px, 30%) minmax(0, 1fr);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--vidrio-fuerte);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-vidrio);
  border: 1px solid var(--vidrio-borde);
}

/* ------------------------------------------------------------------ lista */
.msg-lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--wa-borde);
  background: var(--wa-panel);
}

.msg-lista-cab { padding: 14px 16px 10px; display: grid; gap: 12px; }
.msg-lista-cab h1 { font-size: 1.15rem; margin: 0; letter-spacing: -.01em; }

.msg-buscar { position: relative; }
.msg-buscar svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--wa-tenue); }
.msg-buscar input {
  width: 100%; height: 38px; padding: 0 14px 0 38px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--wa-hover); color: var(--text-dark);
  font: inherit; font-size: .9rem;
}
.msg-buscar input:focus { outline: none; border-color: var(--marca); background: var(--card-bg); }

.msg-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.msg-filtro {
  border: 1px solid var(--wa-borde); background: transparent; color: var(--text-muted);
  font: inherit; font-size: .78rem; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.msg-filtro:hover { background: var(--wa-hover); }
.msg-filtro[aria-pressed="true"] {
  background: color-mix(in oklab, var(--marca) 16%, transparent);
  border-color: color-mix(in oklab, var(--marca) 45%, transparent);
  color: var(--marca-oscura); font-weight: 600;
}

/* Panel 243 · carpeta Spam */
.msg-filtro-n:empty { display: none; }
.msg-filtro-n { margin-left: 3px; opacity: .75; font-weight: 600; }
.msg-spam-aviso {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px; border-bottom: 1px solid var(--divider); font-size: .84rem;
  color: var(--text-muted); background: color-mix(in oklab, var(--peligro, #c0392b) 7%, var(--card-bg));
}
.msg-spam-aviso > span { flex: 1 1 200px; min-width: 0; }
.msg-spam-aviso > svg { width: 16px; height: 16px; flex: none; color: var(--peligro, #c0392b); }

/* Panel 135 · dentro de «Atendidas por el equipo»: quién la lleva */
.msg-subfiltros {
  display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--wa-borde);
}
.msg-subfiltros[hidden] { display: none; }
.msg-subfiltros-txt { font-size: .74rem; color: var(--text-muted); margin-right: 2px; }
.msg-subfiltro {
  border: 1px solid var(--wa-borde); background: transparent; color: var(--text-muted);
  font: inherit; font-size: .74rem; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s, color .15s, border-color .15s;
}
.msg-subfiltro:hover { background: var(--wa-hover); }
.msg-subfiltro[aria-pressed="true"] {
  background: color-mix(in oklab, var(--marca) 12%, transparent);
  border-color: color-mix(in oklab, var(--marca) 40%, transparent);
  color: var(--marca-oscura); font-weight: 600;
}
.msg-subfiltro-n {
  font-size: .68rem; font-weight: 600; min-width: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--wa-hover); color: var(--text-muted); text-align: center;
}
.msg-subfiltro[data-quien="__sin"] .msg-subfiltro-n { background: color-mix(in oklab, #d97706 18%, transparent); color: #b45309; }

.msg-items { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.msg-item {
  display: grid; grid-template-columns: 49px 1fr; gap: 13px; align-items: center;
  padding: 10px 16px; cursor: pointer; border: none; background: none;
  width: 100%; text-align: left; font: inherit; color: inherit;
  border-bottom: 1px solid var(--wa-borde);
  transition: background .12s;
}
.msg-item:hover { background: var(--wa-hover); }
.msg-item[aria-current="true"] { background: var(--wa-sel); }
.msg-item:focus-visible { outline: none; box-shadow: inset var(--focus); }

.msg-item-cuerpo { min-width: 0; display: grid; gap: 3px; }
/* min-width:0 o la fila crece más que la columna y lo que va al final
   (la hora, los globos, la etapa) se sale por el borde sin que el texto
   llegue a recortarse nunca. */
.msg-item-fila { display: flex; align-items: center; gap: 8px; min-width: 0; }
.msg-item-nombre {
  font-weight: 600; font-size: .93rem; color: var(--text-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.msg-item-hora { font-size: .72rem; color: var(--wa-tenue); flex: none; }
.msg-item[data-sinleer="1"] .msg-item-hora { color: var(--marca); font-weight: 600; }

.msg-item-previa {
  font-size: .845rem; color: var(--wa-tenue); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.msg-item-previa .tick { flex: none; }

.msg-globo {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--marca); color: #fff; font-size: .72rem; font-weight: 700;
  display: grid; place-items: center;
}
.msg-globo.riesgo { background: var(--peligro); }

.msg-chip-modo {
  flex: none; font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in oklab, var(--accion) 16%, transparent); color: var(--accion);
}
.msg-chip-modo.humano { background: color-mix(in oklab, var(--marca) 20%, transparent); color: var(--marca-oscura); }

/* ---------------------------------------------------- resumen del hilo
   Va entre la cabecera y los mensajes: es lo primero que se lee al
   abrir una conversación y lo que evita tener que subir cuarenta
   burbujas para enterarse de qué va.

   Estética sobria a propósito. No es WhatsApp: es la parte del panel
   que WhatsApp no tiene, y se nota que es del CRM sin romper el hilo. */
.etapa {
  flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in oklab, currentColor 13%, transparent);
}
.etapa.gris  { color: var(--text-muted); }
.etapa.azul  { color: var(--accion); }
.etapa.verde { color: var(--marca-oscura); background: color-mix(in oklab, var(--marca) 18%, transparent); }
.etapa.ambar { color: var(--aviso); }
/* Panel 260 · A.Cita (rojo), S1 (morado) y la etapa como desplegable en el chat. */
.etapa.rojo { color: var(--peligro); background: color-mix(in oklab, var(--peligro) 14%, transparent); }
.etapa.morado { color: var(--ag-morado, #7A4FC2); background: color-mix(in oklab, var(--ag-morado, #7A4FC2) 14%, transparent); }
.etapa-sel { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.etapa-sel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit;
  padding: 0 16px 0 0; cursor: pointer; max-width: 190px; text-overflow: ellipsis; }
.etapa-sel::after { content: "▾"; position: absolute; right: 8px; pointer-events: none; font-size: .8em; }
.etapa-sel select:focus-visible { outline: none; }
.etapa-sel:focus-within { box-shadow: var(--focus); }
.etapa.mini {
  font-size: .62rem; padding: 2px 7px; text-transform: uppercase;
  max-width: none; white-space: nowrap; flex: none;   /* Panel 434 · «Sin interés» en una línea */
}

/* 0059 · consentimiento informado, bajo la cabecera del hilo */
.msg-consent {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px; border-bottom: 1px solid var(--divider); font-size: .84rem;
  color: var(--text-muted); background: color-mix(in oklab, #C0763B 7%, var(--card-bg));
}
.msg-consent > span { flex: 1 1 200px; min-width: 0; }
/* Panel 243 · Sin firmar: una línea fina, no una franja con un botón grande. */
.msg-consent:not(.ok) { flex-wrap: nowrap; padding: 4px 12px 4px 16px; font-size: .78rem; gap: 8px; }
.msg-consent:not(.ok) > span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-consent:not(.ok) strong { font-weight: 600; color: #A65F2A; }
.msg-consent-marcar {
  flex: none; border: 1px solid color-mix(in oklab, #C0763B 45%, transparent); background: transparent;
  color: #A65F2A; border-radius: 999px; padding: 2px 10px; font: inherit; font-size: .74rem; font-weight: 600;
  line-height: 1.5; cursor: pointer; white-space: nowrap;
}
.msg-consent-marcar:hover { background: color-mix(in oklab, #C0763B 12%, transparent); }
.msg-consent-marcar:disabled { opacity: .6; cursor: default; }
@media (max-width: 560px) { .msg-consent .mc-detalle { display: none; } }
.msg-consent.ok { color: #2F8F5B; background: color-mix(in oklab, #2F8F5B 6%, var(--card-bg)); }
.msg-consent > svg { width: 16px; height: 16px; flex: none; }
.msg-consent-deshacer {
  border: 0; background: none; padding: 2px 4px; font: inherit; font-size: .8rem;
  color: var(--text-muted); text-decoration: underline; cursor: pointer;
}
.msg-resumen {
  flex: none; border-bottom: 1px solid var(--divider);
  background: color-mix(in oklab, var(--marca) 4%, var(--card-bg));
  font-size: .86rem;
}
.msg-resumen.vacio {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px;
}
.msg-resumen-nada { color: var(--text-muted); font-size: .8rem; }
/* Panel 260 · La etapa (desplegable) va delante del botón del resumen, en la misma línea. */
.msg-resumen:not(.vacio) { display: flex; align-items: center; padding-left: 16px; }
.msg-resumen:not(.vacio) > .msg-resumen-cab { flex: 1 1 auto; min-width: 0; padding-left: 10px; }

.msg-resumen-cab {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; background: none; border: 0; cursor: pointer;
  text-align: left; color: inherit; font: inherit;
}
.msg-resumen-cab:hover { background: color-mix(in oklab, var(--marca) 6%, transparent); }
.msg-resumen-asunto {
  font-weight: 600; color: var(--text-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Honestidad: si han entrado mensajes después del resumen, se dice. */
.msg-resumen-viejo {
  flex: none; font-size: .7rem; color: var(--aviso);
  background: var(--aviso-claro); padding: 2px 8px; border-radius: 999px;
}
/* Panel 194 · La barra solo dice etapa y asunto; el resumen entero se abre en una ventana encima del chat. */
.msg-resumen-ver {
  margin-left: auto; flex: none; font-size: .76rem; font-weight: 600; color: var(--marca);
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--marca) 10%, transparent);
}
.msg-resumen-pop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.msg-resumen-pop-fondo {
  position: absolute; inset: 0; background: rgba(8, 26, 28, .32);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.msg-resumen-pop-caja {
  position: relative; width: min(560px, 100%); max-height: min(78vh, 640px); overflow: auto;
  background: var(--card-bg); color: var(--text-dark); border-radius: 18px;
  box-shadow: var(--sombra-flota); border: 1px solid var(--divider);
  animation: resumen-entra .16s ease-out;
}
@keyframes resumen-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .msg-resumen-pop-caja { animation: none; } }
.msg-resumen-pop-cab {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 14px 10px 18px; background: var(--card-bg); border-bottom: 1px solid var(--divider);
}
.msg-resumen-pop-tit { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.msg-resumen-pop-tit h2 { margin: 0; font-size: 1rem; line-height: 1.35; color: var(--text-dark); }
.msg-resumen-pop-x {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--text-muted);
  background: color-mix(in oklab, var(--text-dark) 6%, transparent);
}
.msg-resumen-pop-x:hover { color: var(--text-dark); background: color-mix(in oklab, var(--text-dark) 11%, transparent); }
.msg-resumen-pop .msg-resumen-cuerpo { padding: 14px 18px 16px; font-size: .9rem; }
.msg-resumen-pop .msg-resumen-viejo { display: inline-block; margin-bottom: 10px; }

.msg-resumen-cuerpo { padding: 0 16px 12px; }
.msg-resumen-cuerpo p {
  margin: 0 0 9px; color: var(--text-dark); line-height: 1.5; max-width: 78ch;
}
.msg-resumen-datos {
  margin: 0 0 9px; display: flex; flex-wrap: wrap; gap: 5px 8px;
}
.msg-resumen-datos > div {
  display: flex; gap: 5px; align-items: baseline;
  background: color-mix(in oklab, var(--text-dark) 5%, transparent);
  padding: 3px 9px; border-radius: 8px;
}
.msg-resumen-datos dt { font-size: .72rem; color: var(--text-muted); }
.msg-resumen-datos dd { margin: 0; font-size: .78rem; font-weight: 600; color: var(--text-dark); }
.msg-resumen-pie { display: block; font-size: .7rem; color: var(--text-muted); line-height: 1.45; }

@media (max-width: 720px) {
  .msg-resumen-cuerpo p { font-size: .84rem; }
  .etapa.mini { display: none; }
}

/* ------------------------------------------------- relevo del asistente
   Ocupa el sitio de la caja de texto mientras el hilo lo lleva el
   asistente. Antes había caja: escribir en ella le quitaba el control
   sin decirlo. Ahora el relevo es un botón, y se ve que lo es. */
.msg-relevo {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: var(--r-md, 14px);
  background: color-mix(in oklab, var(--marca) 9%, transparent);
  border: 1px dashed color-mix(in oklab, var(--marca) 32%, transparent);
  color: var(--text-muted); font-size: .88rem;
}
.msg-relevo > svg { width: 19px; height: 19px; flex: none; color: var(--marca); }
.msg-relevo > span { flex: 1; min-width: 0; }
.msg-relevo .btn { flex: none; }

/* Panel 165 · En el móvil, una sola fila baja: con el asistente puesto, el
   relevo se comía casi un cuarto de la pantalla y tapaba la conversación. */
@media (max-width: 560px) {
  .msg-relevo { gap: 8px; padding: 6px 6px 6px 10px; font-size: 13px; line-height: 1.25; border-radius: 12px; }
  .msg-relevo > svg { width: 17px; height: 17px; }
  .msg-relevo-mas { display: none; }
  .msg-relevo .btn { height: 38px; min-height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 999px; }
}

/* ------------------------------------------------------------------ avatar */
.avatar {
  width: 49px; height: 49px; border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  font-weight: 600; font-size: 1rem; color: #fff; letter-spacing: .02em;
  background: var(--av, #6b7c85); user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 40px; height: 40px; font-size: .85rem; }
.avatar.xs { width: 30px; height: 30px; font-size: .7rem; }

/* ------------------------------------------------------------------ hilo */
.msg-hilo { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }

.msg-hilo-cab {
  display: flex; align-items: center; gap: 12px; padding: 9px 16px;
  border-bottom: 1px solid var(--wa-borde); background: var(--wa-panel);
  backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque);
  position: relative; z-index: 3;
}
.msg-hilo-quien { flex: 1; min-width: 0; text-align: left; border: none; background: none; font: inherit;
  cursor: pointer; padding: 2px 4px; border-radius: var(--r-sm); display: grid; gap: 1px; }
.msg-hilo-quien:hover { background: var(--wa-hover); }
.msg-hilo-quien strong { font-size: .97rem; color: var(--text-dark); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-hilo-quien span { font-size: .78rem; color: var(--wa-tenue); }
/* Panel 243 · Con el botón de Spam la cabecera va justa en el móvil: el teléfono no se mete debajo de los iconos. */
.msg-hilo-quien > span { min-width: 0; overflow: hidden; overflow-wrap: anywhere; }
.msg-hilo-acciones { display: flex; align-items: center; gap: 4px; }

.icono-btn {
  width: 36px; height: 36px; border-radius: 50%; border: none; background: none;
  display: grid; place-items: center; cursor: pointer; color: var(--text-muted);
  transition: background .12s, color .12s;
}
.icono-btn:hover { background: var(--wa-hover); color: var(--text-dark); }
.icono-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.icono-btn svg { width: 21px; height: 21px; }
.icono-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* Lienzo del chat: el dibujo propio de la consulta (José Carlos, 28/09),
   teñido con el color de Ajustes (lienzo y líneas salen de --marca).
   Panel 109: el dibujo va en una capa del MARCO (.msg-lienzo), que no hace
   scroll. Antes iba en el propio .msg-cuerpo, que sí lo hace: la capa medía
   solo la primera pantalla y se iba hacia arriba, y en una conversación
   larga (se abre por el final) el fondo no se veía. Ahora se queda quieto
   detrás de los mensajes, como en WhatsApp.
   Las líneas son una máscara: el color lo pone background-color, así que
   cambia con la marca y con el tema. Horizontal en pantallas apaisadas,
   vertical en el móvil. */
.msg-lienzo {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  position: relative; isolation: isolate; background: var(--wa-lienzo);
}
.msg-lienzo::before, .msg-vacio::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--wa-linea); opacity: var(--wa-linea-op);
  -webkit-mask: url("../img/fondo-chat-lineas-horizontal.webp") center / cover no-repeat;
  mask: url("../img/fondo-chat-lineas-horizontal.webp") center / cover no-repeat;
}
@media (orientation: portrait) {
  .msg-lienzo::before, .msg-vacio::before {
    -webkit-mask-image: url("../img/fondo-chat-lineas-vertical.webp");
    mask-image: url("../img/fondo-chat-lineas-vertical.webp");
  }
}
.msg-cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px clamp(16px, 5%, 64px) 22px;   /* aire abajo: las reacciones sobresalen */
  position: relative;
  scrollbar-width: thin;
}
.msg-cuerpo > * { position: relative; }
.msg-cuerpo::-webkit-scrollbar { width: 9px; }
.msg-cuerpo::-webkit-scrollbar-thumb { background: rgba(17, 27, 33, .18); border-radius: 9px; }
html[data-theme="dark"] .msg-cuerpo::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); }

.msg-dia { display: flex; justify-content: center; margin: 14px 0 10px; }
.msg-dia span {
  background: var(--wa-panel); color: var(--wa-tenue);
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 8px; box-shadow: var(--wa-sombra-burbuja);
  backdrop-filter: blur(6px);
}

.msg-nota {
  margin: 10px auto; max-width: 78%; text-align: center;
  background: color-mix(in oklab, var(--aviso) 15%, var(--wa-panel)); color: var(--aviso);
  font-size: .78rem; padding: 7px 14px; border-radius: 8px;
}

/* ------------------------------------------------------------------ burbujas */
.fila { display: flex; margin-bottom: 2px; }
.fila.propio { justify-content: flex-end; }
/* Primer mensaje de un bloque del mismo emisor: más aire arriba y pico. */
.fila.inicio { margin-top: 12px; }

.burbuja {
  position: relative;
  max-width: min(65%, 520px);
  padding: 6px 9px 8px;
  border-radius: 7.5px;
  background: var(--wa-entrante);
  color: var(--wa-texto);
  box-shadow: var(--wa-sombra-burbuja);
  font-size: .925rem;
  line-height: 1.32;
}
.fila.propio .burbuja { background: var(--wa-saliente); }
.fila.inicio.ajeno .burbuja { border-top-left-radius: 0; }
.fila.inicio.propio .burbuja { border-top-right-radius: 0; }

/* Pico de la burbuja, solo en el primero del bloque. */
.fila.inicio .burbuja::before {
  content: ""; position: absolute; top: 0; width: 8px; height: 13px;
}
.fila.inicio.ajeno .burbuja::before {
  left: -8px;
  background: var(--wa-entrante);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}
.fila.inicio.propio .burbuja::before {
  right: -8px;
  background: var(--wa-saliente);
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.burbuja-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja-texto a { color: var(--accion); text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="dark"] .burbuja-texto a { color: #53bdeb; }
.burbuja-texto b { font-weight: 700; }
.burbuja-texto i { font-style: italic; }
.burbuja-texto s { text-decoration: line-through; }
.burbuja-texto code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .86em;
  background: rgba(0, 0, 0, .07); padding: 1px 4px; border-radius: 4px;
}
html[data-theme="dark"] .burbuja-texto code { background: rgba(255, 255, 255, .1); }

/* Un emoji solo, o hasta tres, se agrandan como en WhatsApp. */
.burbuja.solo-emoji .burbuja-texto { font-size: 2.6rem; line-height: 1.15; }

/* La hora flota al final del texto: si cabe, comparte última línea. */
.burbuja-meta {
  float: right;
  margin: 6px -2px -3px 8px;
  display: flex; align-items: center; gap: 3px;
  font-size: .688rem; color: var(--wa-tenue);
  user-select: none; white-space: nowrap;
}
.burbuja-meta .tick { margin-left: 1px; }
.burbuja::after { content: ""; display: block; clear: both; }

.tick { width: 16px; height: 11px; flex: none; color: var(--wa-tick); }
.tick.leido { color: var(--wa-tick-leido); }
.tick.error { color: var(--peligro); width: 14px; height: 14px; }
.tick.reloj { width: 12px; height: 12px; }

.burbuja-autor {
  display: block; font-size: .73rem; font-weight: 700; margin-bottom: 2px;
  color: color-mix(in oklab, var(--marca) 80%, var(--wa-texto));
}
.burbuja-ia {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--accion); margin-bottom: 3px;
}
.burbuja-ia svg { width: 12px; height: 12px; }

/* --- cita de otro mensaje --- */
.cita {
  display: grid; grid-template-columns: 4px 1fr; gap: 8px; align-items: stretch;
  background: var(--wa-cita-ajena); border-radius: 5px; overflow: hidden;
  margin-bottom: 4px; cursor: pointer; text-align: left; border: none; font: inherit; width: 100%;
}
.fila.propio .cita { background: var(--wa-cita-propia); }
.cita i { background: var(--marca); display: block; }
.cita.suya i { background: var(--acento); }
.cita-cuerpo { padding: 5px 8px 6px 0; min-width: 0; display: grid; gap: 1px; }
/* El nombre del mensaje citado tiene que leerse sobre el verde de la burbuja
   saliente: se mezcla con el color del texto, no se usa el acento en crudo. */
.cita-quien { font-size: .8rem; font-weight: 600; color: color-mix(in oklab, var(--wa-texto) 45%, var(--marca)); }
.cita.suya .cita-quien { color: color-mix(in oklab, var(--wa-texto) 42%, var(--acento)); }
.cita-texto {
  font-size: .82rem; color: var(--wa-tenue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- reacciones --- */
.reacciones {
  position: absolute; bottom: -12px; display: flex; gap: 2px;
  background: var(--wa-entrante); border: 1px solid var(--wa-borde);
  border-radius: 999px; padding: 1px 6px; font-size: .78rem; line-height: 1.5;
  box-shadow: var(--wa-sombra-burbuja);
}
/* Siempre a la izquierda: en los mensajes salientes, a la derecha taparía los ticks. */
.reacciones { left: 9px; }
.fila:has(.reacciones) { margin-bottom: 16px; }

/* --- media --- */
.burbuja.media { padding: 3px 3px 5px; max-width: min(55%, 400px); }
.burbuja.media .burbuja-texto { padding: 3px 6px 0; }
.media-marco {
  position: relative; border-radius: 6px; overflow: hidden; display: block;
  border: none; padding: 0; background: rgba(0, 0, 0, .06); cursor: zoom-in; width: 100%;
}
.media-marco img, .media-marco video { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.media-marco.video { cursor: pointer; }
.media-play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(11, 20, 26, .5); display: grid; place-items: center; color: #fff;
  backdrop-filter: blur(2px);
}
.media-play svg { width: 24px; height: 24px; }
.media-dur {
  position: absolute; top: 7px; left: 7px; background: rgba(11, 20, 26, .55); color: #fff;
  font-size: .7rem; padding: 2px 6px; border-radius: 4px; display: flex; align-items: center; gap: 4px;
}
.media-dur svg { width: 12px; height: 12px; }
/* Sin pie de foto, la hora se lee sobre la imagen. */
.burbuja.media.sin-pie .burbuja-meta {
  position: absolute; right: 9px; bottom: 9px; float: none; margin: 0;
  background: rgba(11, 20, 26, .45); color: #fff; padding: 2px 7px; border-radius: 10px; z-index: 2;
}
.burbuja.media.sin-pie .tick { color: #e9edef; }
.burbuja.media.sin-pie .tick.leido { color: #7fdcff; }

/* --- sticker: sin burbuja --- */
.fila.sticker .burbuja { background: none !important; box-shadow: none; padding: 0; max-width: 168px; }
.fila.sticker .burbuja::before { display: none; }
.fila.sticker img { width: 100%; height: auto; display: block; }
.fila.sticker .burbuja-meta {
  float: none; margin: 2px 0 0; justify-content: flex-end;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .9);
}
html[data-theme="dark"] .fila.sticker .burbuja-meta { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }

/* --- 0099 · foto oculta: difuminada, con «Ver de todas formas» --- */
.foto-oculta {
  position: relative; overflow: hidden; border-radius: 6px; width: 280px; max-width: 100%; min-height: 190px;
  display: grid; background: #4a5560; isolation: isolate;
}
.foto-oculta > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
  filter: blur(28px) saturate(.75) brightness(.8); transform: scale(1.3);
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.foto-oculta.sin-foto { background: linear-gradient(135deg, #59646e, #3b444c); }
.foto-oculta-capa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 18px 14px; text-align: center; color: #fff; background: rgba(11, 20, 26, .32);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45); font-size: .84rem; line-height: 1.35;
}
.foto-oculta-capa strong { font-size: .95rem; }
.foto-oculta-ico svg { width: 26px; height: 26px; display: block; }
.foto-oculta-motivo, .foto-oculta-nota { font-size: .78rem; opacity: .95; }
.foto-oculta-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 2px; }
.foto-oculta .btn { background: rgba(255, 255, 255, .94); color: #1f2c34; border-color: transparent; text-shadow: none; }
.foto-oculta .btn:hover { background: #fff; }
.foto-oculta .btn-peligro { color: var(--peligro); }
.burbuja.media:has(.foto-oculta) .burbuja-meta { margin-top: 3px; }
/* Ya destapada: una línea encima para volver a ocultarla. */
.foto-reocultar {
  display: flex; align-items: center; gap: 5px; border: 0; background: none; cursor: pointer;
  padding: 2px 6px 5px; font: inherit; font-size: .74rem; color: var(--text-muted);
}
.foto-reocultar svg { width: 14px; height: 14px; flex: none; }
.foto-reocultar:hover span { text-decoration: underline; }
/* Con el número ya bloqueado, el botón de la foto no hace falta. */
.msg-hilo.bloqueado [data-bloquear-num] { display: none; }

/* --- 0099 · número bloqueado (o bloqueándose), bajo la cabecera del hilo --- */
.msg-bloqueo {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px; border-bottom: 1px solid var(--divider); font-size: .84rem;
  color: var(--text-muted); background: color-mix(in oklab, var(--peligro) 6%, var(--card-bg));
}
.msg-bloqueo > span { flex: 1 1 200px; min-width: 0; }
.msg-bloqueo > svg { width: 16px; height: 16px; flex: none; color: var(--peligro); }
.msg-bloqueo small { color: var(--text-muted); margin-left: 4px; }
.msg-bloqueo.hecho, .msg-bloqueo.error { color: var(--peligro); }
.msg-bloqueo.error { background: var(--peligro-claro); }

/* --- documento --- */
.doc {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center;
  background: rgba(0, 0, 0, .045); border-radius: 6px; padding: 10px 11px; margin-bottom: 2px;
  min-width: 230px; color: inherit; text-decoration: none;
}
.doc:hover { background: rgba(0, 0, 0, .075); }
html[data-theme="dark"] .doc:hover { background: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .doc { background: rgba(255, 255, 255, .055); }
.doc-icono { width: 38px; height: 38px; display: grid; place-items: center; color: var(--peligro); }
.doc-icono svg { width: 32px; height: 32px; }
.doc-info { min-width: 0; display: grid; gap: 2px; }
.doc-nombre { font-size: .875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta { font-size: .72rem; color: var(--wa-tenue); text-transform: uppercase; letter-spacing: .02em; }

/* --- audio --- */
.audio { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center;
  min-width: 260px; max-width: 320px; padding: 2px 0 0; }
.audio-play {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; color: var(--wa-tenue); background: none;
}
.audio-play:hover { color: var(--text-dark); }
.audio-play svg { width: 26px; height: 26px; }
.audio-centro { min-width: 0; display: grid; gap: 3px; }

.onda {
  position: relative; height: 26px; width: 100%; cursor: pointer;
  display: flex; align-items: center; gap: 2px; touch-action: none;
}
.onda i {
  flex: 1; min-width: 2px; max-width: 3px; border-radius: 2px;
  background: var(--wa-tick); opacity: .45; transition: opacity .1s, background .1s;
}
.onda i.oido { opacity: 1; background: var(--wa-tenue); }
.fila.propio .onda i.oido { background: color-mix(in oklab, var(--wa-texto) 60%, transparent); }
.onda-punto {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--marca); translate: -50% -50%; pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.audio.noescuchado .onda-punto { background: var(--accion); }

/* Transcripción de la nota de voz (la del asistente). */
.audio-texto { margin: 4px 2px 0; font-size: .8125rem; color: var(--wa-tenue); }
.audio-texto summary { cursor: pointer; width: max-content; list-style: none; text-decoration: underline; text-underline-offset: 2px; }
.audio-texto summary::-webkit-details-marker { display: none; }
.audio-texto p { margin: 4px 0 0; color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; font-style: italic; }
.audio-texto[open] p { color: var(--wa-texto, inherit); }
.audio-pie { display: flex; align-items: center; gap: 8px; font-size: .688rem; color: var(--wa-tenue); }
.audio-vel {
  border: none; background: rgba(0, 0, 0, .07); color: inherit; font: inherit; font-size: .66rem;
  font-weight: 700; padding: 1px 6px; border-radius: 999px; cursor: pointer; min-width: 34px;
}
html[data-theme="dark"] .audio-vel { background: rgba(255, 255, 255, .1); }
.audio-vel:hover { background: rgba(0, 0, 0, .13); }
.audio-avatar { position: relative; }
.audio-avatar .mic {
  position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px;
  color: var(--wa-tick); background: var(--wa-entrante); border-radius: 50%; padding: 1px;
}
.fila.propio .audio-avatar .mic { color: #4fc3a1; background: var(--wa-saliente); }
.audio.noescuchado .audio-avatar .mic { color: var(--accion); }

/* --- ubicación --- */
.ubi { width: 250px; border-radius: 6px; overflow: hidden; background: rgba(0, 0, 0, .05); display: block;
  border: none; padding: 0; cursor: pointer; text-align: left; }
.ubi-mapa { height: 128px; position: relative; display: grid; place-items: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(17,27,33,.08) 21px 22px),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(17,27,33,.08) 21px 22px),
    color-mix(in oklab, var(--marca) 12%, #e8e3da); }
html[data-theme="dark"] .ubi-mapa { background:
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(255,255,255,.06) 21px 22px),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(255,255,255,.06) 21px 22px),
    color-mix(in oklab, var(--marca) 16%, #16232a); }
.ubi-mapa svg { width: 34px; height: 34px; color: var(--peligro); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.ubi-pie { padding: 7px 10px; display: grid; gap: 2px; }
.ubi-pie strong { font-size: .85rem; }
.ubi-pie span { font-size: .76rem; color: var(--wa-tenue); }

/* --- contacto --- */
.contacto { display: grid; gap: 8px; min-width: 232px; }
.contacto-cab { display: flex; align-items: center; gap: 10px; }
.contacto-cab strong { font-size: .9rem; }
.contacto-cab span { display: block; font-size: .76rem; color: var(--wa-tenue); }
.contacto-btn {
  border: none; border-top: 1px solid var(--wa-borde); background: none; color: var(--accion);
  font: inherit; font-size: .84rem; font-weight: 600; padding: 7px 0 1px; cursor: pointer; width: 100%;
}

/* --- interactivo / plantilla --- */
.plantilla-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: .67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--wa-tenue); margin-bottom: 3px;
}
.plantilla-tag svg { width: 12px; height: 12px; }
.botones { margin: 6px -9px -8px; }
.botones button {
  width: 100%; border: none; border-top: 1px solid var(--wa-borde); background: none;
  color: var(--accion); font: inherit; font-size: .875rem; font-weight: 500;
  padding: 9px 8px; cursor: default; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.botones button svg { width: 15px; height: 15px; }
.lista-opciones { margin-top: 5px; display: grid; gap: 3px; }
.lista-opciones span {
  font-size: .82rem; padding: 5px 9px; border-radius: 5px;
  background: rgba(0, 0, 0, .045); color: var(--wa-tenue);
}
html[data-theme="dark"] .lista-opciones span { background: rgba(255, 255, 255, .05); }

/* --- error de envío --- */
.fallo {
  display: flex; align-items: center; gap: 7px; margin-top: 5px; padding-top: 5px;
  border-top: 1px solid color-mix(in oklab, var(--peligro) 30%, transparent);
  font-size: .76rem; color: var(--peligro);
}
.fallo button {
  margin-left: auto; border: none; background: none; color: var(--accion);
  font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; padding: 0;
}
/* El icono sin tamaño salía enorme y dejaba el texto en una columna
   estrecha. Y si no cabe, «Reintentar» baja a su propia línea. */
.fallo { flex-wrap: wrap; }
.fallo > svg { width: 16px; height: 16px; flex: none; }
.fallo > span { flex: 1 1 140px; min-width: 0; line-height: 1.35; }

/* ------------------------------------------------------------------ bajar */
.msg-bajar {
  position: absolute; right: 22px; bottom: 86px; z-index: 4;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--card-bg); color: var(--text-muted);
  box-shadow: var(--sombra-flota); display: grid; place-items: center;
  opacity: 0; scale: .9; pointer-events: none; transition: opacity .16s, scale .16s;
}
.msg-bajar.visible { opacity: 1; scale: 1; pointer-events: auto; }
.msg-bajar svg { width: 21px; height: 21px; }
.msg-bajar b {
  position: absolute; top: -5px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--marca); color: #fff; font-size: .68rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ------------------------------------------------------------------ escribir */
.msg-escribir {
  background: var(--wa-panel); border-top: 1px solid var(--wa-borde);
  backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque);
  padding: 8px 14px; display: grid; gap: 8px; position: relative; z-index: 3;
}

/* Panel 260 · Psicóloga y paciente sin primera sesión: el pie, tapado con el porqué. */
.msg-escribir.sin-primera > :not(.msg-sin-primera) { opacity: .25; pointer-events: none; }
.msg-sin-primera { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 2px; padding: 8px 18px;
  text-align: center; font-size: 13px; line-height: 1.35; color: var(--text-dark);
  background: color-mix(in oklab, var(--wa-panel) 82%, transparent); }
.msg-sin-primera span { color: var(--text-muted); font-size: 12.5px; }

.responder-a {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 8px; align-items: center;
  background: var(--wa-cita-ajena); border-radius: 7px; overflow: hidden;
}
.responder-a i { background: var(--marca); align-self: stretch; }
.responder-a .cita-cuerpo { padding: 6px 0; }

.adjuntos-previa { display: flex; gap: 8px; flex-wrap: wrap; }
.adj-previa {
  position: relative; width: 74px; height: 74px; border-radius: 8px; overflow: hidden;
  background: var(--wa-hover); display: grid; place-items: center; border: 1px solid var(--wa-borde);
}
.adj-previa img, .adj-previa video { width: 100%; height: 100%; object-fit: cover; }
.adj-previa .doc-icono svg { width: 26px; height: 26px; }
.adj-previa small {
  position: absolute; bottom: 0; left: 0; right: 0; background: rgba(11, 20, 26, .62); color: #fff;
  font-size: .62rem; padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adj-quitar {
  position: absolute; top: 3px; right: 3px; width: 19px; height: 19px; border-radius: 50%;
  border: none; background: rgba(11, 20, 26, .68); color: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: .8rem; line-height: 1;
}

.escribir-fila { display: flex; align-items: flex-end; gap: 6px; }
/* 0073 · «La paciente lo verá con tu nombre arriba» */
.msg-firma { margin: -2px 4px 0; font-size: .74rem; color: var(--text-muted); line-height: 1.35; }
.msg-firma b { color: var(--text-dark); font-weight: 650; }
@media (max-width: 760px) { .msg-firma span { display: none; } }
.escribir-campo {
  flex: 1; display: flex; align-items: flex-end;
  background: var(--card-bg); border-radius: 9px; padding: 6px 10px;
  border: 1px solid transparent; transition: border-color .15s;
}
.escribir-campo:focus-within { border-color: color-mix(in oklab, var(--marca) 55%, transparent); }
.escribir-campo textarea {
  flex: 1; border: none; background: none; resize: none; font: inherit; font-size: .925rem;
  line-height: 1.35; color: var(--text-dark); max-height: 132px; padding: 5px 2px; outline: none;
}
.escribir-campo textarea::placeholder { color: var(--wa-tenue); }

.enviar {
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; flex: none;
  background: var(--marca); color: #fff; display: grid; place-items: center;
  transition: background .15s, scale .1s;
}
.enviar:hover { background: var(--marca-media); }
.enviar:active { scale: .94; }
.enviar svg { width: 21px; height: 21px; }
.enviar[disabled] { opacity: .45; cursor: not-allowed; }

/* grabando · capa encima de la fila (panel 94): la fila no se rehace */
.escribir-fila { position: relative; }
.escribir-fila.con-grabacion > :not(.grabando-capa) { visibility: hidden; }
.grabando-capa { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; }
.grabando-parar svg { width: 18px; height: 18px; color: var(--peligro); }
.grabando { display: flex; align-items: center; gap: 12px; flex: 1; padding: 0 4px; }
.grabando-pulso { width: 11px; height: 11px; border-radius: 50%; background: var(--peligro); animation: pulso 1.3s infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.grabando time { font-variant-numeric: tabular-nums; font-size: .92rem; color: var(--text-dark); }
.grabando p { margin: 0; font-size: .82rem; color: var(--wa-tenue); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* emojis */
.emojis {
  position: absolute; bottom: calc(100% + 6px); left: 12px; z-index: 5;
  width: min(330px, calc(100% - 24px)); max-height: 240px; overflow-y: auto;
  background: var(--card-bg); border: 1px solid var(--wa-borde); border-radius: var(--r-md);
  box-shadow: var(--sombra-flota); padding: 8px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 36px), 1fr)); gap: 2px;
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.emojis button { border: none; background: none; font-size: 1.35rem; cursor: pointer; padding: 4px; border-radius: 7px; line-height: 1; }
.emojis button:hover { background: var(--wa-hover); }

/* aviso de ventana cerrada */
.ventana-cerrada {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .82rem;
  background: var(--aviso-claro); color: var(--aviso);
  padding: 9px 13px; border-radius: var(--r-sm);
}
.ventana-cerrada span { flex: 1; min-width: 180px; }
@media (max-width: 560px) { .ventana-cerrada .btn { width: 100%; margin-left: 0 !important; } }
.ventana-cerrada svg { width: 17px; height: 17px; flex: none; }
/* 0053 · asistente apagado para todas: arriba de la lista y en Inicio */
.msg-apagado { margin-top: 2px; }
.msg-apagado .btn, .wa-apagado .btn { padding: 6px 12px; font-size: .8rem; }
.wa-apagado { margin: 0 0 12px; }

/* ------------------------------------------------------------------ vacío */
.msg-vacio {
  display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center;
  padding: 40px; position: relative; isolation: isolate; background: var(--wa-lienzo);
}
.msg-vacio > * { position: relative; }
.msg-vacio svg { width: 74px; height: 74px; color: var(--marca); opacity: .5; }
.msg-vacio h2 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.msg-vacio p { margin: 0; max-width: 340px; color: var(--text-muted); font-size: .88rem; line-height: 1.5; }

.msg-cargando { display: grid; place-items: center; padding: 18px; }
.msg-cargando i {
  width: 22px; height: 22px; border-radius: 50%; display: block;
  border: 2.5px solid var(--wa-borde); border-top-color: var(--marca);
  animation: giro .7s linear infinite;
}
@keyframes giro { to { rotate: 360deg; } }

/* ------------------------------------------------------------------ ficha lateral */
.ficha-linea { display: grid; gap: 3px; padding: 11px 0; border-bottom: 1px solid var(--divider); }
.ficha-linea dt { font-size: .76rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.ficha-linea dd { margin: 0; font-size: .92rem; }

/* ------------------------------------------------------------------ visor */
.visor {
  position: fixed; inset: 0; z-index: 90; background: rgba(6, 14, 18, .93);
  display: grid; grid-template-rows: auto 1fr; animation: aparece .14s ease-out;
}
@keyframes aparece { from { opacity: 0; } }
.visor-cab { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: #e9edef; }
.visor-cab strong { font-size: .95rem; }
.visor-cab span { font-size: .8rem; opacity: .7; }
.visor-cab .icono-btn { color: #e9edef; margin-left: auto; }
.visor-cab .icono-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.visor-lienzo { display: grid; place-items: center; padding: 0 18px 24px; min-height: 0; }
.visor-lienzo img, .visor-lienzo video { max-width: 100%; max-height: 100%; border-radius: 6px; }

/* ------------------------------------------------------------------ estrecho */
@media (max-width: 900px) {
  .msg { grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; }
  .msg-lista { min-width: 0; }
  /* La fila del resumen: el asunto se corta con «…» y las etiquetas no
     empujan la pantalla hacia la derecha. */
  .msg-resumen-asunto { min-width: 0; flex: 1 1 auto; }
  .msg-resumen-cab { padding: 8px 12px; gap: 8px; }
  .msg-hilo-cab { padding: 8px 10px; gap: 8px; }
  .msg-hilo-acciones { gap: 0; flex: none; }
  .msg-hilo-acciones .icono-btn { width: 34px; }
  .msg-hilo { display: none; }
  .msg.abierta .msg-lista { display: none; }
  .msg.abierta .msg-hilo { display: flex; }
  .msg-volver { display: grid !important; }
  .burbuja { max-width: 84%; }
  .burbuja.media { max-width: 78%; }
  .msg-cuerpo { padding-inline: 12px; }
}
.msg-volver { display: none; }

@media (prefers-reduced-motion: reduce) {
  .msg-bajar, .enviar, .msg-item, .onda i { transition: none; }
  .grabando-pulso, .msg-cargando i { animation: none; }
}

/* ---------------------------------------------------------------- el asistente está escribiendo (panel 63) */
.burbuja.escribiendo { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; min-height: 0; }
.burbuja.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35;
  animation: escribiendo 1.2s infinite ease-in-out; }
.burbuja.escribiendo i:nth-child(2) { animation-delay: .15s; }
.burbuja.escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes escribiendo { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .burbuja.escribiendo i { animation: none; opacity: .6; } }

/* --- 0050 · reaccionar (clic derecho / pulsación larga) --- */
.reacciones .reac { display: inline-block; }
.reacciones .reac.propia { position: relative; }
.reacciones .reac.pendiente { opacity: .55; }
.reacciones .reac.fallida { opacity: .6; filter: grayscale(.4); }
.reacciones .reac.fallida::after {
  content: "!"; position: absolute; top: -6px; right: -7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--peligro, #c0392b); color: #fff; font-size: 9px; font-weight: 700; line-height: 12px; text-align: center;
}
.reac-menu {
  position: fixed; z-index: 60; display: grid; gap: 4px; padding: 6px;
  background: var(--card-bg); border: 1px solid var(--wa-borde); border-radius: 18px;
  box-shadow: var(--sombra-flota);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  animation: reac-entra .14s ease-out;
}
@keyframes reac-entra { from { opacity: 0; transform: translateY(4px) scale(.97); } }
.reac-fila { display: flex; gap: 2px; }
.reac-op {
  border: none; background: none; font-size: 1.5rem; line-height: 1; padding: 6px; border-radius: 50%;
  cursor: pointer; transition: transform .12s ease, background-color .12s ease;
}
.reac-op:hover, .reac-op:focus-visible { background: var(--wa-hover); transform: scale(1.15); outline: none; }
.reac-op.activa { background: color-mix(in oklab, var(--marca) 18%, transparent); }
.reac-acciones { display: grid; border-top: 1px solid var(--wa-borde); padding-top: 4px; }
.reac-acciones button {
  border: none; background: none; text-align: left; font: inherit; font-size: .9rem; color: inherit;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
}
.reac-acciones button:hover, .reac-acciones button:focus-visible { background: var(--wa-hover); outline: none; }
/* En el móvil la pulsación larga es nuestra: sin lupa ni menú del sistema. */
@media (pointer: coarse) {
  .msg-cuerpo .burbuja { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* --- panel 92 · selector con todos los emojis --- */
.reac-mas { font-size: 1.1rem; width: 36px; height: 36px; display: grid; place-items: center;
            background: var(--wa-hover); color: var(--wa-tenue); font-weight: 600; }
.emo-selector {
  position: fixed; z-index: 70; width: 352px; height: 400px; display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--wa-borde); border-radius: 18px; overflow: hidden;
  box-shadow: var(--sombra-flota);
  background: linear-gradient(var(--card-bg), var(--card-bg)), var(--fondo);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  animation: reac-entra .14s ease-out;
}
.emo-cab { padding: 10px 10px 6px; display: flex; gap: 6px; align-items: center; }
.emo-cab .emo-buscar { flex: 1; min-width: 0; }
.emo-tono-btn { flex: none; border: none; background: none; font-size: 1.35rem; line-height: 1; padding: 6px; border-radius: 10px; cursor: pointer; }
.emo-tono-btn:hover { background: var(--wa-hover); }
.emo-tonos { display: flex; justify-content: space-around; padding: 2px 10px 8px; }
.emo-tonos[hidden] { display: none; }
.emo-tonos button { border: none; background: none; font-size: 1.45rem; padding: 4px 6px; border-radius: 10px; cursor: pointer; }
.emo-tonos button:hover { background: var(--wa-hover); }
/* Los que tienen tonos llevan una marca en la esquina, como en WhatsApp. */
.emo-rejilla .emo.con-tonos { position: relative; }
.emo-rejilla .emo.con-tonos::after { content: ""; position: absolute; right: 3px; bottom: 3px;
  border: 3px solid transparent; border-right-color: var(--wa-tenue); border-bottom-color: var(--wa-tenue); opacity: .45; }
.emo-variantes { position: absolute; z-index: 3; display: grid; grid-template-columns: repeat(6, 38px); gap: 2px; padding: 6px;
  background: linear-gradient(var(--card-bg), var(--card-bg)), var(--fondo); border: 1px solid var(--wa-borde);
  border-radius: 14px; box-shadow: var(--sombra-flota); animation: reac-entra .12s ease-out; }
.emo-variantes .emo { border: none; background: none; font-size: 1.5rem; line-height: 1; padding: 5px 0; border-radius: 9px; cursor: pointer; }
.emo-variantes .emo:hover { background: var(--wa-hover); }
.emo-rejilla .emo, .emo-grupos button, .emo-tonos button, .emo-tono-btn { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.emo-buscar {
  width: 100%; border: 1px solid var(--wa-borde); background: var(--wa-hover); color: inherit; font: inherit;
  border-radius: 999px; padding: 8px 14px; font-size: .9rem; outline: none;
}
.emo-buscar:focus { border-color: color-mix(in oklab, var(--marca) 55%, transparent); }
.emo-grupos { display: flex; justify-content: space-between; padding: 0 6px 4px; border-bottom: 1px solid var(--wa-borde); }
.emo-grupos button { border: none; background: none; font-size: 1.05rem; padding: 6px 4px; border-radius: 8px; cursor: pointer; opacity: .75; }
.emo-grupos button:hover { background: var(--wa-hover); opacity: 1; }
.emo-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 10px; }
.emo-sec h4 { position: sticky; top: 0; margin: 0; padding: 8px 4px 4px; font-size: .75rem; font-weight: 600;
              color: var(--wa-tenue); background: linear-gradient(var(--card-bg), var(--card-bg)), var(--fondo); z-index: 1; }
.emo-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 38px), 1fr)); }
.emo-rejilla .emo { border: none; background: none; font-size: 1.55rem; line-height: 1; padding: 5px 0; border-radius: 9px; cursor: pointer; }
.emo-rejilla .emo:hover, .emo-rejilla .emo:focus-visible { background: var(--wa-hover); outline: none; }
.emo-cargando { color: var(--wa-tenue); font-size: .9rem; text-align: center; padding: 30px 10px; }
@media (max-width: 640px) {
  .emo-selector { left: 0; right: 0; bottom: 0; top: auto; width: auto; height: min(62vh, 460px);
                  border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  /* Al escribir: encima de la caja de texto, para ver lo que vas poniendo. */
  .emo-selector.sobre-caja { border-radius: 18px; padding-bottom: 0; margin: 0 6px; }
}
/* Quién lleva la conversación (el nombre no va en mayúsculas). */
.msg-chip-modo.humano { text-transform: none; letter-spacing: 0; font-size: .7rem; max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-chip-modo.humano.sin-asignar { background: color-mix(in oklab, var(--aviso) 16%, transparent); color: var(--aviso); }
.msg-hilo-quien .msg-chip-modo { vertical-align: 1px; }

/* 0081 · Quién más está en la conversación */
.msg-presencia { display: flex; gap: 10px; align-items: center; margin: 0 12px 6px; padding: 8px 12px; border-radius: 12px;
  background: var(--accion-clara); color: var(--text-dark); font-size: 13px; }
.msg-presencia i { width: 9px; height: 9px; border-radius: 50%; background: var(--accion); flex: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accion) 22%, transparent); }
.msg-presencia.escribiendo { background: var(--aviso-claro); }
/* Panel 172 · El aviso del equipo. Arriba, bajo la cabecera (no tapa la
   caja de escribir, que es donde está quien lo recibe), con el punto del
   mismo estilo que la caja de presencia para que se reconozca al instante.
   En el móvil ocupa el ancho menos los márgenes. */
.toast.toast-equipo {
  top: max(14px, env(safe-area-inset-top, 0px)); bottom: auto; z-index: 65;
  display: flex; align-items: center; gap: 12px; text-align: left; font-weight: 500; line-height: 1.35;
  width: max-content; max-width: min(92vw, 560px); padding: 12px 18px 12px 14px; border-radius: 16px;
  background: var(--aviso-claro); color: var(--text);
  border: 1px solid color-mix(in oklab, var(--aviso) 45%, transparent);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .5);
  animation: toast-equipo-entra .28s cubic-bezier(.2, .7, .2, 1);
}
.toast.toast-equipo strong { font-weight: 800; }
.toast.toast-equipo i { width: 10px; height: 10px; border-radius: 50%; background: var(--aviso); flex: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--aviso) 22%, transparent); animation: toast-equipo-pulso 1.2s ease-in-out infinite; }
@keyframes toast-equipo-entra { from { transform: translate(-50%, -12px); opacity: 0; } }
@keyframes toast-equipo-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (max-width: 860px) {
  .toast.toast-equipo { left: 12px; right: 12px; width: auto; max-width: none; transform: none; font-size: 13.5px; padding: 11px 14px; border-radius: 14px;
    animation-name: toast-equipo-entra-movil; }
  @keyframes toast-equipo-entra-movil { from { transform: translateY(-12px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .toast.toast-equipo, .toast.toast-equipo i { animation: none; } }
.msg-presencia.escribiendo i { background: var(--aviso); animation: presencia-late 1.2s ease-in-out infinite; }
@keyframes presencia-late { 50% { opacity: .35; } }
:root[data-theme="dark"] .msg-presencia { color: #e8f0f0; background: rgba(37, 99, 235, .18); }

/* 0081 · Respuestas guardadas («/» en el chat) */
.msg-respuestas { list-style: none; margin: 0 12px 6px; padding: 6px; border-radius: 14px; max-height: 260px; overflow: auto;
  background: var(--card-bg); box-shadow: var(--sombra-flota); border: 1px solid var(--divider); }
.msg-respuestas li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.msg-respuestas li strong { color: var(--accion); font-size: 12.5px; }
.msg-respuestas li span { color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-respuestas li[aria-selected="true"], .msg-respuestas li:hover { background: var(--accion-clara); }
.msg-respuestas li.vacia { cursor: default; color: var(--text-muted); }
:root[data-theme="dark"] .msg-respuestas { background: #16262a; }
:root[data-theme="dark"] .msg-respuestas li span { color: #e8f0f0; }

/* Panel 194 · En un móvil estrecho la barra del resumen cabe entera: el aviso de «no incluye lo último» se ve en la
   ventana, y la etapa se corta con «…» antes que empujar el botón fuera. */
@media (max-width: 480px) {
  .msg-resumen-cab > .msg-resumen-viejo { display: none; }
  .msg-resumen-cab > .etapa { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msg-resumen-asunto { flex: 1 1 0; }
  .msg-resumen-ver { padding: 3px 8px; }
}

/* Panel 195 · Resumen nuevo: un borde de color que da vueltas alrededor del botón, invitando a abrirlo.
   Se quita al abrirlo. Sin animación si el sistema pide menos movimiento (queda el borde quieto). */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.msg-resumen-ver.nuevo {
  position: relative; isolation: isolate; color: #fff; padding: 4px 12px;
  background: var(--marca);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--marca) 45%, transparent);
  animation: resumen-latido 2.4s ease-out infinite;
}
.msg-resumen-ver.nuevo::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit;
  background: conic-gradient(from var(--giro), #ff6b6b, #ffd93d, #6bcB77, #4d96ff, #b06bff, #ff6b6b);
  animation: resumen-gira 1.8s linear infinite;
}
.msg-resumen-ver.nuevo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--marca);
}
@keyframes resumen-gira { to { --giro: 360deg; } }
@keyframes resumen-latido {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--marca) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px color-mix(in oklab, var(--marca) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .msg-resumen-ver.nuevo, .msg-resumen-ver.nuevo::before { animation: none; }
}

/* 0116 · Cancelar envío: mini píldora roja con aspa y cuenta atrás (José, 13/10) */
.burbuja-cancelar {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 2px auto; float: right; clear: both;
  border: 0; border-radius: 999px; padding: 4px 6px 4px 9px; cursor: pointer;
  background: #D93636; color: #fff; font: inherit; font-size: .74rem; font-weight: 600; line-height: 1.2;
  box-shadow: 0 2px 8px -2px rgba(217, 54, 54, .55); transition: background .15s, transform .15s;
}
.burbuja-cancelar:hover { background: #BF2626; }
.burbuja-cancelar:active { transform: scale(.96); }
.burbuja-cancelar:disabled { opacity: .6; cursor: default; }
.burbuja-cancelar .bc-aspa { font-size: .8rem; line-height: 1; }
.burbuja-cancelar .bc-cuenta {
  min-width: 18px; height: 18px; border-radius: 999px; display: inline-grid; place-items: center;
  background: rgba(255, 255, 255, .22); font-variant-numeric: tabular-nums; font-size: .7rem;
}
html[data-theme="dark"] .msg-consent:not(.ok) strong,
html[data-theme="dark"] .msg-consent-marcar { color: #E8A974; }

/* 0117 · El PDF de la cabecera de una plantilla, en la burbuja */
.plantilla-doc {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; padding: 8px 10px; border-radius: 10px;
  background: color-mix(in oklab, currentColor 7%, transparent); font-size: .84rem; font-weight: 600;
}
.plantilla-doc svg { width: 20px; height: 20px; flex: none; }
.plantilla-doc span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Panel 247 · Sofía (13/10): en el móvil, con «avisos en pausa» y «La lleva…», el nombre y el teléfono quedaban en
   una columna de dos letras. El icono de la ficha sobra (tocar el nombre ya la abre), los iconos van más juntos y la
   línea del teléfono y las etiquetas no se parte: se corta con «…». */
@media (max-width: 900px) {
  .msg-hilo-cab { gap: 6px; padding: 8px 8px; }
  .msg-hilo-cab .avatar.sm { width: 34px; height: 34px; flex: none; }
  .msg-hilo-quien { flex: 1 1 0; min-width: 0; display: block; padding: 2px; }
  .msg-hilo-quien > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .msg-hilo-acciones { flex: none; gap: 0; }
  .msg-hilo-cab .icono-btn { width: 36px; min-width: 36px; }   /* alto táctil de 44 px, más estrechos */
  .msg-hilo-acciones .icono-btn svg { width: 20px; height: 20px; }
  .msg-hilo-acciones [data-ficha] { display: none; }
}
/* Panel 281 · Con el botón «Marcar como no leída», en un móvil estrecho la foto de la cabecera sobra: el nombre
   necesita ese sitio (la foto ya sale en la lista). */
@media (max-width: 480px) {
  .msg-hilo-cab .avatar.sm { display: none; }
  /* 0147 · Con el candado de «Información sensible», un icono más: algo más juntos para que el nombre quepa. */
  .msg-hilo-acciones .icono-btn { width: 32px; min-width: 32px; }
}

/* 0123 · «Enviar ya», al lado de «Cancelar envío»: salta la espera de 10 s. */
.burbuja-enviar-ya {
  float: right; clear: none; margin: 6px 6px 2px 0; border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer;
  background: var(--marca); color: #fff; font: inherit; font-size: .74rem; font-weight: 600; line-height: 1.2;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .3); transition: filter .15s, transform .15s;
}
.burbuja-enviar-ya:hover { filter: brightness(.92); }
.burbuja-enviar-ya:active { transform: scale(.96); }
.burbuja-enviar-ya:disabled { opacity: .6; cursor: default; }

/* Panel 271 · José (14/10): en el móvil la barra del resumen se veía amontonada (el desplegable de la etapa salía
   enorme por el alto mínimo de los controles táctiles). Ahora es una pastilla pequeña y el resto cabe en una línea. */
.msg-resumen .etapa-sel select { min-height: 0; height: auto; line-height: 1.35; font-size: inherit; }
@media (max-width: 700px) {
  .msg-resumen:not(.vacio) { padding-left: 10px; gap: 4px; }
  .msg-resumen .etapa-sel { font-size: .66rem; padding: 3px 8px; }
  .msg-resumen .etapa-sel select { max-width: 112px; padding-right: 14px; }
  .msg-resumen .etapa-sel::after { right: 6px; }
  .msg-resumen:not(.vacio) > .msg-resumen-cab { padding: 7px 10px 7px 6px; gap: 6px; }
  .msg-resumen-asunto { font-size: .8rem; }
}
html[data-theme="dark"] .msg-resumen-ver { color: color-mix(in oklab, var(--marca) 55%, #fff); background: color-mix(in oklab, var(--marca) 22%, transparent); }

/* 0134 · Permiso para que la psicóloga escriba antes de la primera sesión (solo coordinación lo ve). */
.msg-permiso {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px; border-bottom: 1px solid var(--divider); font-size: .84rem;
  color: var(--text-muted); background: color-mix(in oklab, var(--marca) 6%, var(--card-bg));
}
.msg-permiso[hidden] { display: none; }
.msg-permiso > span { flex: 1 1 200px; min-width: 0; }
/* Panel 332 · Una sola línea, también en el móvil y con letra grande. */
html .msg-permiso { flex-wrap: nowrap; gap: 8px; padding: 5px 12px; font-size: .78rem; line-height: 1.25; }
html .msg-permiso > span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .msg-permiso .msg-permiso-btn {
  flex: none; padding: 3px 11px; min-height: 0; font: inherit; font-size: .74rem; font-weight: 600; line-height: 1.3;
  border-radius: 999px; border: 1px solid color-mix(in oklab, var(--marca) 45%, transparent);
  background: transparent; color: var(--marca); cursor: pointer;
}
html .msg-permiso .msg-permiso-btn:hover { background: color-mix(in oklab, var(--marca) 12%, transparent); }
html .msg-permiso .msg-permiso-btn:disabled { opacity: .55; cursor: default; }
html[data-theme="dark"] .msg-permiso .msg-permiso-btn { color: color-mix(in oklab, var(--marca) 55%, #fff); }

/* ------------------------------------------------------------------ 0147 · información sensible */
:root { --sensible: #8a4fbf; --sensible-fondo: rgba(138, 79, 191, .09); --sensible-borde: rgba(138, 79, 191, .32); }
html[data-theme="dark"] { --sensible: #c7a3ef; --sensible-fondo: rgba(160, 110, 220, .16); --sensible-borde: rgba(190, 150, 240, .38); }

.pildora-sensible {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 2px 9px 2px 7px; border-radius: 999px;
  background: var(--sensible-fondo); color: var(--sensible); border: 1px solid var(--sensible-borde);
  font-size: .7rem; font-weight: 600; line-height: 1.35; white-space: nowrap; vertical-align: middle;
}
.pildora-sensible svg { width: 11px; height: 11px; }
.pildora-sensible.mini { font-size: .66rem; padding: 1px 8px 1px 6px; }

.msg-item--sensible { background: var(--sensible-fondo); box-shadow: inset 3px 0 0 var(--sensible); }
.msg-item--sensible:hover { background: color-mix(in oklab, var(--sensible) 15%, transparent); }
.msg-item--sensible[aria-current="true"] { background: color-mix(in oklab, var(--sensible) 20%, transparent); }
.msg-previa-tapada { display: inline-flex; align-items: center; gap: 4px; font-style: italic; color: var(--sensible); }
.msg-previa-tapada svg { width: 12px; height: 12px; }

.msg-filtro-sensible { display: inline-flex; align-items: center; gap: 4px; }
.msg-filtro-sensible svg { width: 12px; height: 12px; }
.msg-filtro-sensible[aria-pressed="true"] { background: var(--sensible); border-color: var(--sensible); color: #fff; }

.msg-sensible-marcado { color: var(--sensible); background: var(--sensible-fondo); }

/* Panel 307 · Una línea fina: «Sensibles abiertas hasta las 16:25 · PIN · Cerrar». */
.msg-sensibles-estado {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-height: 30px;
  padding: 3px 4px 3px 10px; border-radius: 999px; font-size: .76rem; line-height: 1.2;
  background: var(--sensible-fondo); color: var(--sensible); border: 1px solid var(--sensible-borde);
}
.msg-sensibles-estado[hidden] { display: none; }
.msg-sensibles-estado > svg { width: 13px; height: 13px; flex: none; }
.msg-sensibles-estado span { flex: 1; min-width: 0; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-sensibles-acc {
  flex: none; border: 0; background: none; cursor: pointer; padding: 4px 8px; border-radius: 999px;
  font: inherit; font-weight: 600; color: var(--sensible);
}
.msg-sensibles-acc:hover { background: color-mix(in oklab, var(--sensible) 12%, transparent); }
.msg-sensibles-cerrar { background: var(--sensible); color: #fff; }
.msg-sensibles-cerrar:hover { background: color-mix(in oklab, var(--sensible) 85%, #000); }
[data-theme="dark"] .msg-sensibles-cerrar { color: #1d1430; }

/* El candado: sin código, en lugar de los mensajes. */
.msg-candado { background: var(--wa-lienzo); }
.msg-candado .msg-hilo-quien { display: grid; gap: 2px; text-align: left; }
.msg-candado-caja {
  flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 32px 20px; text-align: center;
}
.msg-candado-icono {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sensible-fondo); color: var(--sensible); border: 1px solid var(--sensible-borde);
}
.msg-candado-icono svg { width: 34px; height: 34px; }
.msg-candado-caja h2 { margin: 0; font-size: 1.1rem; }
.msg-candado-caja p { margin: 0; max-width: 380px; color: var(--text-muted); font-size: .88rem; line-height: 1.5; }
.msg-candado-form { display: grid; gap: 8px; width: min(280px, 100%); }
.msg-candado-form .campo { text-align: center; font-size: 1.05rem; }
.msg-candado-form .campo:not(:placeholder-shown) { letter-spacing: .3em; }
.msg-candado-ayuda { color: var(--text-muted); font-size: .76rem; max-width: 320px; }

/* Contactos de la A a la Z (como «nuevo chat» de WhatsApp). */
.msg-buscar-fila { display: flex; gap: 8px; align-items: center; }
.msg-buscar-fila .msg-buscar { flex: 1; min-width: 0; }
.msg-lista { position: relative; }
.msg-contactos {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; min-height: 0;
  background: var(--wa-entrante);
}
.msg-contactos[hidden] { display: none; }
.msg-contactos-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.msg-contactos-cab strong { font-size: 1.05rem; flex: 1; }
.msg-contactos-cab small { color: var(--wa-tenue); }
.msg-contactos-buscar { margin: 0 14px 8px; }
.msg-contactos-lista { flex: 1; min-height: 0; overflow-y: auto; }
.msg-contactos-letra {
  position: sticky; top: 0; z-index: 1; padding: 6px 18px; font-size: .78rem; font-weight: 700;
  color: var(--marca); background: var(--wa-entrante); border-bottom: 1px solid var(--wa-borde);
}
.msg-contacto {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; width: 100%;
  padding: 8px 18px; border: none; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.msg-contacto:hover { background: var(--wa-hover); }
.msg-contacto-cuerpo { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.msg-contacto-nombre { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.msg-contacto-cuerpo small { color: var(--wa-tenue); font-size: .78rem; }
.msg-contacto--sensible { background: var(--sensible-fondo); box-shadow: inset 3px 0 0 var(--sensible); }
.msg-contactos-vacio { padding: 20px 18px; color: var(--text-muted); font-size: .88rem; }

/* 0147 · Contra capturas: marca de agua con quién mira, sin seleccionar ni copiar, y borroso al salir. */
.msg { position: relative; }
.msg-marca {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background-repeat: repeat; background-size: 520px 300px;
}
.msg .msg-cuerpo, .msg .msg-items, .msg .msg-hilo-cab, .msg .msg-contactos-lista {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.msg img, .msg video { -webkit-user-drag: none; }
.msg > section { transition: filter .12s; }
.msg.msg--oculta > section { filter: blur(18px) saturate(.6); }
.msg.msg--oculta::after {
  content: "Contenido oculto: vuelve a esta ventana para verlo";
  position: absolute; inset: 0; z-index: 31; display: grid; place-items: center; pointer-events: none;
  font-weight: 600; color: var(--text-dark); font-size: .95rem;
}
@media print {
  #view-conversaciones .msg { display: none !important; }
  #view-conversaciones::after { content: "El WhatsApp del panel no se puede imprimir."; }
}

/* Panel 307 · Contactos: un círculo de color fijo (verde WhatsApp) con ondas que salen, como el botón del asistente. */
.msg-contactos-btn {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; color: #fff; isolation: isolate;
  background:
    radial-gradient(120% 120% at 25% 15%, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(145deg, #25D366 0%, #128C7E 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 18px -8px rgba(18, 140, 126, .75);
  transition: transform .18s ease;
}
.msg-contactos-btn svg { width: 19px; height: 19px; }
.msg-contactos-btn:hover { transform: translateY(-1px) scale(1.04); background:
    radial-gradient(120% 120% at 25% 15%, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(145deg, #25D366 0%, #128C7E 100%); color: #fff; }
.msg-contactos-btn:active { transform: scale(.95); }
.msg-contactos-btn::before, .msg-contactos-btn::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; z-index: -1;
  border: 2px solid rgba(37, 211, 102, .55); opacity: 0;
  animation: contactos-onda 3.2s ease-out infinite;
}
.msg-contactos-btn::after { animation-delay: 1.6s; }
@keyframes contactos-onda { 0% { transform: scale(.9); opacity: .8; } 75%, 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .msg-contactos-btn::before, .msg-contactos-btn::after { animation: none; } }

/* Panel 336 · «Darle cita» desde los datos del contacto. */
.msg-dar-cita { width: 100%; justify-content: center; margin: 0 0 14px; }
.msg-abrir-ficha { width: 100%; justify-content: center; margin: -6px 0 14px; }

/* Panel 337 · Filtro «1.ª sesión». */
.msg-filtro-primera[aria-pressed="true"] { background: #1f8a5b; border-color: #1f8a5b; color: #fff; }

/* 0166 · «También a <su pareja>» encima de la caja de escribir. */
.msg-a-los-dos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 10px 6px; font-size: .84rem; color: var(--text-dark); cursor: pointer; }
.msg-a-los-dos input { width: 16px; height: 16px; accent-color: var(--marca); }
.msg-a-los-dos small { color: var(--text-muted); }
.msg-a-los-dos.no { cursor: default; opacity: .75; }

/* =====================================================================
   Panel 384 · Fondo de las conversaciones, por persona (0181, «Mi cuenta»).
   html[data-chat-fondo]: serie|foto → la imagen detrás de los mensajes, con un velo del color del lienzo
   (aclara en claro, oscurece en oscuro) para que se lean; ninguno → liso, sin las líneas.
   ===================================================================== */
html[data-chat-fondo="serie"] .msg-lienzo, html[data-chat-fondo="foto"] .msg-lienzo,
html[data-chat-fondo="serie"] .msg-vacio, html[data-chat-fondo="foto"] .msg-vacio {
  background: var(--wa-lienzo) var(--chat-img) center / cover no-repeat;
}
html[data-chat-fondo="serie"] .msg-lienzo::before, html[data-chat-fondo="foto"] .msg-lienzo::before,
html[data-chat-fondo="serie"] .msg-vacio::before, html[data-chat-fondo="foto"] .msg-vacio::before {
  -webkit-mask: none; mask: none; background: var(--wa-lienzo); opacity: var(--chat-velo, .25);
}
html[data-chat-fondo="ninguno"] .msg-lienzo::before, html[data-chat-fondo="ninguno"] .msg-vacio::before { display: none; }
/* En la imagen, la fecha del día y los avisos del sistema necesitan su píldora más opaca. */
html[data-chat-fondo="serie"] .msg-dia span, html[data-chat-fondo="foto"] .msg-dia span { background: var(--wa-entrante); box-shadow: var(--wa-sombra-burbuja); }

/* Selector y vista previa */
.fc-previa-cab { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: center; margin: 4px 0 10px; }
.fc-escenario { display: grid; place-items: center; padding: 14px 8px; border-radius: 18px; background: var(--dash-bg); margin-bottom: 12px; overflow: hidden; }
.fc-previa {
  --p-lienzo: #efeae2; --p-entra: #fff; --p-sale: #d9fdd3; --p-texto: #111b21; --p-tenue: #667781; --p-cab: #f0f2f5; --p-linea: #b9b0a5;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 6px solid #1d1f24;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18); color: var(--p-texto); font-size: 11px; line-height: 1.35;
  width: 200px; height: 380px; transition: width .25s, height .25s, border-radius .25s;
}
.fc-previa[data-tema="dark"] { --p-lienzo: #0b141a; --p-entra: #202c33; --p-sale: #005c4b; --p-texto: #e9edef; --p-tenue: #8696a0; --p-cab: #202c33; --p-linea: #3b4a54; }
.fc-previa[data-pantalla="tablet"] { width: min(100%, 300px); height: 360px; border-radius: 18px; border-width: 8px; }
.fc-previa[data-pantalla="ordenador"] { width: min(100%, 420px); height: 250px; border-radius: 10px; border-width: 5px; font-size: 10px; }
.fc-cab { display: flex; gap: 8px; align-items: center; padding: 7px 10px; background: var(--p-cab); }
.fc-cab b { display: block; font-size: 1.05em; } .fc-cab small { color: var(--p-tenue); }
.fc-avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #7aa9c9; color: #fff; font-weight: 700; flex: none; }
.fc-lienzo { flex: 1; min-height: 0; position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 5px; padding: 10px; background: var(--p-lienzo); overflow: hidden; }
.fc-lienzo::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--p-linea); opacity: .55;
  -webkit-mask: url("../img/fondo-chat-lineas-vertical.webp") center / cover no-repeat; mask: url("../img/fondo-chat-lineas-vertical.webp") center / cover no-repeat; }
.fc-previa[data-pantalla="ordenador"] .fc-lienzo { padding: 10px 40px; }
.fc-previa[data-chat-fondo="serie"] .fc-lienzo, .fc-previa[data-chat-fondo="foto"] .fc-lienzo { background: var(--p-lienzo) var(--chat-img) center / cover no-repeat; }
.fc-previa[data-chat-fondo="serie"] .fc-lienzo::before, .fc-previa[data-chat-fondo="foto"] .fc-lienzo::before {
  -webkit-mask: none; mask: none; background: var(--p-lienzo); opacity: var(--chat-velo, .25); }
.fc-previa[data-chat-fondo="ninguno"] .fc-lienzo::before { display: none; }
.fc-dia { align-self: center; background: var(--p-entra); color: var(--p-tenue); padding: 2px 8px; border-radius: 6px; font-size: .9em; }
.fc-burbuja { max-width: 78%; padding: 5px 8px 3px; border-radius: 8px; background: var(--p-entra); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.fc-burbuja.sale { align-self: flex-end; background: var(--p-sale); }
.fc-burbuja small { display: block; text-align: right; color: var(--p-tenue); font-size: .8em; }
.fc-pie { padding: 6px 8px; background: var(--p-cab); } .fc-pie span { display: block; padding: 5px 10px; border-radius: 999px; background: var(--p-entra); color: var(--p-tenue); }
.fc-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin: 0 0 10px; }
.fc-op { display: grid; gap: 4px; padding: 4px; border-radius: 12px; border: 1.5px solid var(--divider); background: var(--vidrio-fuerte, var(--dash-bg));
  cursor: pointer; font: inherit; color: inherit; text-align: center; transition: transform .12s, border-color .12s; }
.fc-op:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--marca) 45%, transparent); }
.fc-op[aria-checked="true"] { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in oklab, var(--marca) 18%, transparent); }
.fc-op small { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-mini { display: block; aspect-ratio: 9 / 14; border-radius: 8px; overflow: hidden; position: relative; background: var(--wa-lienzo); }
.fc-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fc-lineas { position: absolute; inset: 0; background-color: var(--wa-linea); opacity: .7;
  -webkit-mask: url("../img/fondo-chat-lineas-vertical.webp") center / cover no-repeat; mask: url("../img/fondo-chat-lineas-vertical.webp") center / cover no-repeat; }
.fc-liso { position: absolute; inset: 0; background: var(--wa-lienzo); }
.fc-velo { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; }
.fc-velo small { color: var(--text-muted); }
.fc-velo input { width: 100%; }
@media (max-width: 400px) { .fc-ops { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fc-op small { font-size: 10.5px; } }

/* Panel 417 · José Carlos (25/10, móvil con letra grande): la cabecera del chat iba «muy apretada, como forzada»: el
   nombre se partía sílaba a sílaba detrás de seis iconos y las franjas de debajo ocupaban media pantalla. En el móvil,
   el nombre arriba con todo el ancho y los iconos en su propia fila; las franjas, de una línea y más finas. */
@media (max-width: 900px) {
  .msg-hilo-cab { flex-wrap: wrap; row-gap: 0; padding: 6px 10px 2px; }
  .msg-hilo-quien { flex: 1 1 0; }
  .msg-hilo-quien strong { white-space: nowrap; overflow-wrap: normal; word-break: normal; font-size: 1rem; }
  .msg-hilo-quien > span { display: block; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
  .msg-hilo-acciones { order: 5; flex: 1 0 100%; justify-content: space-between; gap: 0;
    margin-top: 4px; padding: 2px 0 0; border-top: 1px solid var(--wa-borde); }
  .msg-hilo-acciones .icono-btn { width: 40px; height: 38px; }
  .msg-consent, .msg-consent.ok, html .msg-permiso { flex-wrap: nowrap; gap: 8px; padding: 4px 12px; font-size: .76rem; line-height: 1.25; }
  .msg-consent > span, .msg-consent.ok > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msg-consent > svg { width: 14px; height: 14px; }
  .msg-consent-deshacer { flex: none; font-size: .74rem; }
  .msg-resumen:not(.vacio) { padding-left: 10px; padding-right: 8px; }
  .msg-resumen-cab { padding: 6px 10px; }
  .msg-resumen-ver { font-size: .72rem; padding: 3px 9px; }
  .msg-resumen.vacio { padding: 6px 10px; }
  .msg-relevo > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msg-presencia { margin: 0 10px 4px; padding: 5px 10px; font-size: .76rem; line-height: 1.25; }
  .msg-presencia > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Panel 433 · Pestaña «Revisar» (como «Archivados» de WhatsApp: se queda hasta que la quitáis). */
.msg-filtro-revisar[aria-pressed="true"] { background: #b7791f; border-color: #b7791f; color: #fff; }
.msg-item-revisar { display: inline-flex; flex: none; color: #b7791f; }
.msg-item-revisar svg { width: 14px; height: 14px; fill: currentColor; }
.msg-revisar-marcado { color: #b7791f; }
.msg-revisar-marcado svg { fill: currentColor; }
.msg-revisar-aviso {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px; border-bottom: 1px solid var(--divider); font-size: .84rem;
  color: var(--text-muted); background: color-mix(in oklab, #b7791f 9%, var(--card-bg));
}
.msg-revisar-aviso > span { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.msg-revisar-aviso > svg { width: 16px; height: 16px; flex: none; color: #b7791f; fill: currentColor; }

/* Panel 442 · Sofía (27/10): alquiladores de despacho, con su color (como Sensibles, pero sin PIN). */
:root { --alquiler: #0f7a8a; --alquiler-fondo: rgba(15, 122, 138, .09); --alquiler-borde: rgba(15, 122, 138, .32); }
html[data-theme="dark"] { --alquiler: #6fd3e0; --alquiler-fondo: rgba(80, 190, 205, .15); --alquiler-borde: rgba(110, 211, 224, .38); }
.pildora-alquiler {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 2px 9px; border-radius: 999px;
  background: var(--alquiler-fondo); color: var(--alquiler); border: 1px solid var(--alquiler-borde);
  font-size: .7rem; font-weight: 600; line-height: 1.35; white-space: nowrap; vertical-align: middle;
}
.pildora-alquiler.mini { font-size: .66rem; padding: 1px 8px; }
.msg-item--alquiler { background: var(--alquiler-fondo); box-shadow: inset 3px 0 0 var(--alquiler); }
.msg-item--alquiler:hover { background: color-mix(in oklab, var(--alquiler) 15%, transparent); }
.msg-item--alquiler[aria-current="true"] { background: color-mix(in oklab, var(--alquiler) 20%, transparent); }
.msg-filtro-alquiler { display: inline-flex; align-items: center; gap: 4px; }
.msg-filtro-alquiler svg { width: 12px; height: 12px; }
.msg-filtro-alquiler[aria-pressed="true"] { background: var(--alquiler); border-color: var(--alquiler); color: #fff; }
html[data-theme="dark"] .msg-filtro-alquiler[aria-pressed="true"] { color: #062a30; }

/* 0243 · Silvia (28/10): «Archivadas», como en WhatsApp. */
.msg-filtro-archivo { display: inline-flex; align-items: center; gap: 4px; }
.msg-filtro-archivo svg { width: 12px; height: 12px; }
.msg-filtro-archivo[aria-pressed="true"] { background: #5b6472; border-color: #5b6472; color: #fff; }

/* Sofía (29/10, móvil): «se ve muy poca conversación: más pequeño lo de escribir y lo de arriba». Con un chat abierto en
   el móvil: la barra de abajo se queda fina (solo iconos), la cabecera y los avisos van en una
   línea fina y la caja de escribir, más baja y sin la frase de la firma. */
@media (max-width: 900px) {
  /* La barra de abajo, fina (solo iconos): «WhatsApp» sigue volviendo a la lista de chats (José, 13/10). */
  body:has(.view.active .msg.abierta) .nav-sidebar { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); }
  body:has(.view.active .msg.abierta) .nav-item { min-height: 38px; padding: 4px 2px; }
  body:has(.view.active .msg.abierta) .nav-item > span { display: none; }
  body:has(.view.active .msg.abierta) .nav-item svg { width: 20px; height: 20px; }
  .msg-hilo-cab { padding: 4px 8px; gap: 6px; }
  .msg-hilo-acciones .icono-btn { min-width: 32px; min-height: 34px; width: 32px; height: 34px; }
  .msg-hilo-acciones .icono-btn svg { width: 19px; height: 19px; }
  html .msg-hilo .msg-revisar-aviso { flex-wrap: nowrap !important; gap: 6px; padding: 3px 8px 3px 12px; font-size: .76rem; line-height: 1.25; }
  html .msg-hilo .msg-revisar-aviso > span { flex: 1 1 auto; min-width: 0; display: -webkit-box !important; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
  .msg-revisar-aviso .btn, .msg-permiso .msg-permiso-btn, .msg-consent .btn, .msg-consent-marcar {
    min-height: 28px !important; padding: 0 10px !important; font-size: .74rem !important; white-space: nowrap; }
  .msg-consent:not(.ok), .msg-consent.ok { padding: 3px 10px 3px 12px; font-size: .76rem; }
  html .msg-permiso { padding: 3px 10px 3px 12px; }
  .msg-resumen-cab { padding: 4px 10px; }
  .msg-escribir { padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px)); gap: 4px; }
  .msg-escribir .msg-firma { display: none; }
  .msg-escribir .icono-btn { min-width: 38px; min-height: 38px; }
}