:root {
  --fondo: #f4f5f7;
  --panel: #ffffff;
  --texto: #1d2329;
  --suave: #66717d;
  --borde: #dde1e6;
  --acento: #1557d2;
  --propio: #e8effc;
  --peligro: #b3261e;
  --aviso: #8a5a00;
  --aviso-fondo: #fff4d6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #000000;
    --panel: #000000;
    --texto: #e7eaee;
    --suave: #a3a3a3;
    --borde: #262626;
    --acento: #2167e8;
    --propio: #11264b;
    --peligro: #ff8a80;
    --aviso: #ffcc66;
    --aviso-fondo: #3a2f12;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #000000;
  --panel: #000000;
  --texto: #e7eaee;
  --suave: #a3a3a3;
  --borde: #262626;
  --acento: #2167e8;
  --propio: #11264b;
  --peligro: #ff8a80;
  --aviso: #ffcc66;
  --aviso-fondo: #3a2f12;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--fondo); color: var(--texto); }
button { font: inherit; border: 0; border-radius: 8px; padding: 8px 12px; background: var(--acento); color: #fff; cursor: pointer; }
button.secundario { background: transparent; color: var(--acento); border: 1px solid var(--borde); }
button.peligro { background: var(--peligro); }
button:disabled { opacity: .5; cursor: default; }
input, textarea { font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; }
.panel { background: var(--panel); margin: 16px; padding: 16px; border-radius: 12px; border: 1px solid var(--borde); }
.error { color: var(--peligro); min-height: 1em; margin: 4px 16px; }
.barra { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--borde); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.estado { margin-left: 8px; font-size: 13px; padding: 2px 8px; border-radius: 999px; background: var(--borde); }
.estado[data-estado="conectado"] { background: var(--acento); color: #fff; }
.estado[data-estado="requiere_reconexion"], .servidor-caido { background: var(--peligro); color: #fff; }
.detalle { margin: 4px 16px; color: var(--suave); font-size: 13px; }
#qr svg { width: min(320px, 80vw); height: auto; background: #fff; padding: 8px; border-radius: 8px; }
.columnas { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); height: calc(100vh - 130px); }
.lista { border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.buscador { display: flex; gap: 6px; padding: 8px; }
.buscador input { flex: 1; min-width: 0; }
.filtros { display: flex; gap: 6px; padding: 0 8px 8px; }
.filtros button { background: transparent; color: var(--texto); border: 1px solid var(--borde); padding: 4px 10px; }
.filtros button.activo { background: var(--acento); color: #fff; border-color: var(--acento); }
#chats { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#chats li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding: 8px; border-bottom: 1px solid var(--borde); cursor: pointer; }
#chats li > div { min-width: 0; }
#chats li.activo { background: var(--propio); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--borde); display: grid; place-items: center; font-weight: 600; }
.chat-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-previa { color: var(--suave); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-meta { text-align: right; font-size: 12px; color: var(--suave); }
.no-leidos { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--acento); color: #fff; text-align: center; margin-top: 4px; }
.conversacion { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.conv-cabecera { display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--borde); }
#btn-volver { display: none; }
.mensajes { flex: 1; overflow-y: auto; padding: 8px 12px; }
#lista-mensajes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.burbuja { max-width: min(560px, 85%); padding: 6px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--borde); align-self: flex-start; white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja.propio { align-self: flex-end; background: var(--propio); }
.burbuja .autor { font-size: 12px; font-weight: 600; color: var(--acento); }
.burbuja .meta { font-size: 11px; color: var(--suave); text-align: right; margin-top: 2px; }
.burbuja.incierto { border-color: var(--aviso); }
.burbuja .alerta { font-size: 12px; color: var(--aviso); margin-top: 4px; }
.envio { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: var(--panel); border-top: 1px solid var(--borde); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.envio textarea { flex: 1 1 160px; resize: none; min-width: 0; }
@media (max-width: 760px) {
  .columnas { display: block; height: auto; }
  .lista { border-right: 0; min-height: calc(100vh - 140px); }
  .conversacion { display: none; height: calc(100vh - 110px); }
  body.ver-chat .lista { display: none; }
  body.ver-chat .conversacion { display: flex; }
  #btn-volver { display: inline-block; }
}
.aviso-demo { margin: 8px 16px 0; padding: 8px 12px; border-radius: 8px; background: var(--aviso-fondo); color: var(--texto); border: 1px solid var(--aviso); font-weight: 600; }
.estado[data-estado="demostracion"] { background: var(--aviso); color: var(--fondo); }
button.tema { white-space: nowrap; }

#programacion { width: min(1000px, calc(100% - 24px)); max-height: 90vh; overflow: auto; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 20px; }
#programacion::backdrop { background: rgb(0 0 0 / .6); }
.programacion-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.programacion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#programacion label { display: block; margin: 12px 0; }
#programacion input, #programacion textarea, #programacion select { display: block; width: 100%; margin-top: 5px; font: inherit; color: var(--texto); background: var(--panel); border: 1px solid var(--borde); padding: 9px; border-radius: 8px; }
#programacion .detalle { margin: 10px 0; }
.programado-item { border: 1px solid var(--borde); border-radius: 8px; padding: 12px; margin: 10px 0; }
.programado-item p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
@media(max-width:760px) { .programacion-grid { grid-template-columns: 1fr; } #programacion { padding: 14px; } }

/* Encabezado compacto y menú de cuenta, adaptable a ambas marcas. */
.barra { flex-wrap: nowrap; align-items: flex-start; }
.cuenta-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.cuenta-resumen strong { overflow-wrap: anywhere; }
.cuenta-resumen .estado { margin-left: 0; }
.menu-cuenta { position: relative; flex: 0 0 auto; }
.menu-cuenta .menu-toggle { background: transparent; padding: 0; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--borde); border-radius: 8px; color: var(--acento); cursor: pointer; list-style: none; font-size: 24px; line-height: 1; }
.menu-cuenta .menu-toggle:focus-visible, .menu-opciones button:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.menu-opciones { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(310px, calc(100vw - 32px)); max-height: calc(100dvh - 90px); overflow-y: auto; padding: 8px; border: 1px solid var(--borde); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 28px rgb(0 0 0 / .2); }
.menu-opciones button { display: block; width: 100%; margin: 3px 0; padding: 12px; text-align: left; white-space: normal; }
.menu-opciones button[hidden] { display: none; }
.menu-opciones[hidden] { display: none; }

/* Programación desde la conversación. */
.envio[hidden], #mensajes-programados[hidden] { display: none; }
#btn-programar-chat { font-size: 1.7rem; min-width: 46px; padding: .35rem .7rem; }
#programar-chat { width: min(520px, calc(100vw - 32px)); max-height: 90dvh; overflow: auto; box-sizing: border-box; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo); color: var(--texto); padding: 20px; }
#programar-chat::backdrop { background: rgba(0,0,0,.5); }
#programar-chat label { display: grid; gap: 6px; margin-bottom: 14px; }
#programar-chat textarea, #programar-chat input { width: 100%; box-sizing: border-box; }
.fecha-hora { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#mensajes-programados { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 12px 0; }
.mensaje-programado { border: 1px dashed currentColor; }
.mensaje-programado p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 8px; }
.mensaje-programado small { display: block; }
.mensaje-programado button { display: block; margin-top: 8px; font-size: .8rem; }

/* Archivos de la conversación. */
.archivo { margin-top: 10px; }
.archivo-nombre { overflow-wrap: anywhere; font-size: .9rem; margin-bottom: 8px; }
.archivo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.archivo-acciones button { font-size: .85rem; }
.archivo-acciones a { color: inherit; text-decoration: underline; }
.archivo small { display: block; margin-top: 6px; }
.archivo-vista { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; margin: 8px 0; }
audio.archivo-vista { width: 100%; }

.adjunto-control { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0; min-width: 0; }
.adjunto-control small { overflow-wrap: anywhere; font-size: 12px; max-width: 240px; }
.adjunto-control button { padding: 6px 10px; }
.envio .adjunto-control { margin: 0; }
.envio .adjunto-control small { max-width: 150px; }
.adjunto-control input[hidden], .adjunto-control button[hidden] { display:none; }

/* Fotos de contactos: misma medida que las iniciales; no amplían filas. */
.avatar { position: relative; overflow: hidden; flex: 0 0 40px; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#conv-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* iPhone: respetar la barra de estado y desplazar solo el contenido del chat. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
@media (max-width: 760px) {
  body:has(#app:not([hidden])) { height: 100dvh; overflow: hidden; }
  #app:not([hidden]) {
    display: flex; flex-direction: column;
    height: calc(100dvh - env(safe-area-inset-top, 0px));
    min-height: 0;
  }
  #app > .barra { flex: 0 0 auto; }
  #app > .panel { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  #app > .columnas { flex: 1 1 0; height: auto; min-height: 0; overflow: hidden; }
  .lista, .conversacion { height: 100%; min-height: 0; }
  #chats, .mensajes { min-height: 0; overscroll-behavior-y: contain; }
  input, textarea { font-size: 16px; }
}

/* Separación adicional bajo la barra de estado en la app instalada. */
@media (max-width: 760px) {
  #app > .barra { align-items: center; }
}
@media (display-mode: standalone) and (max-width: 760px) {
  body { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  #app:not([hidden]) { height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px); }
}

/* Acceso recordado, búsqueda rápida y compositor despejado. */
.recordar-acceso { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.recordar-acceso input { width: 18px; height: 18px; flex: none; }
.buscador-campo { position: relative; display: flex; flex: 1; min-width: 0; }
.buscador-campo input { width: 100%; padding-right: 38px; }
.buscador-campo input::-webkit-search-cancel-button { -webkit-appearance: none; }
.limpiar-busqueda { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 2px 8px; background: transparent; color: var(--suave); font-size: 24px; line-height: 1; }
.limpiar-busqueda[hidden], .adjunto-control[hidden], .composer-menu[hidden] { display: none; }
.envio { position: relative; align-items: center; }
.composer-plus { width: 40px; height: 40px; padding: 0; flex: 0 0 40px; font-size: 28px; }
.composer-menu { position: absolute; bottom: calc(100% + 6px); left: 8px; z-index: 25; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 8px; min-width: 220px; box-shadow: 0 4px 20px rgb(0 0 0 / .25); }
.composer-menu button { display: block; width: 100%; text-align: left; margin: 4px 0; }
.composer-menu .adjuntar-menu::after { content: ' Adjuntar archivo'; }
.composer-menu #btn-programar-chat { font-size: 15px; padding: 10px; }
.envio > .adjunto-control { flex-basis: 100%; order: 5; }
.burbuja a { color: var(--acento); text-decoration: underline; overflow-wrap: anywhere; }
#conv-nombre[role="button"] { cursor: pointer; }
#conv-nombre:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.contacto-dialog { width: min(440px, calc(100vw - 32px)); max-height: 85dvh; overflow: auto; border: 1px solid var(--borde); border-radius: 14px; background: var(--panel); color: var(--texto); }
.contacto-dialog::backdrop { background: rgb(0 0 0 / .5); }
.contacto-numero { user-select: text; -webkit-user-select: text; }

/* Grabación y escucha previa de notas de voz. */
.voz-micro { padding: .55rem; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.voz-dialogo { max-width: min(460px,calc(100vw - 32px)); width: 100%; box-sizing: border-box; border-radius: 16px; background: var(--panel); color: var(--texto); border: 1px solid var(--borde); padding: 20px; }
.voz-dialogo::backdrop { background: rgba(0,0,0,.65); }
.voz-dialogo audio { display:block; width:100%; margin:16px 0; }
.voz-dialogo audio[hidden] { display:none; }
.voz-acciones { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.voz-dialogo p { overflow-wrap:anywhere; }

.envio:has(.voz-micro) textarea { flex-basis: 0; }

.voz-fecha { border:1px solid var(--borde); border-radius:8px; margin:12px 0; padding:12px; }
.voz-fecha label { display:block; margin-top:8px; }
.voz-fecha input { display:block; width:100%; box-sizing:border-box; margin-top:4px; font-size:16px; }
.voz-dialogo { max-height:85dvh; overflow:auto; }

/* Miniaturas de documentos y reproductor compacto. */
.archivo-tarjeta { display:block; padding:0; width:100%; overflow:hidden; text-align:left; border:1px solid var(--borde); border-radius:12px; background:var(--panel); color:var(--texto); }
.archivo-miniatura { display:block; width:100%; height:145px; object-fit:cover; background:#fff; }
.archivo-ficha { display:flex; align-items:center; gap:10px; padding:12px; }
.archivo-tipo { display:flex; align-items:center; justify-content:center; background:#cf1740; color:white; border-radius:6px; min-width:38px; height:46px; font-size:11px; font-weight:700; }
.archivo-detalles { display:flex; flex-direction:column; min-width:0; gap:4px; }
.archivo-detalles strong { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.archivo-detalles small { color:var(--suave); font-size:12px; }
.voz-player { display:grid; grid-template-columns:38px minmax(110px,1fr) 42px; gap:8px; align-items:center; width:min(330px,100%); min-width:220px; padding:6px 0; white-space:normal; }
.voz-play { border:0; background:transparent; color:var(--texto); padding:6px; font-size:20px; }
.voz-pista { min-width:0; }
.voz-onda { height:40px; position:relative; display:flex; align-items:center; }
.voz-onda svg { width:100%; height:40px; fill:var(--suave); opacity:.65; }
.voz-onda input { position:absolute; width:100%; box-sizing:border-box; margin:0; padding:0; accent-color:var(--acento); background:transparent; border:0; }
.voz-tiempo { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.voz-tiempo small { font-size:12px; color:var(--suave); }
.voz-velocidad { font-size:11px; font-weight:600; border:0; padding:2px 6px; border-radius:10px; background:var(--fondo); color:var(--texto); }
.voz-player .avatar,.voz-avatar { width:42px; height:42px; flex:0 0 42px; border-radius:50%; }
.voz-avatar { display:flex; align-items:center; justify-content:center; background:var(--fondo); font-size:20px; }
.voz-nota { grid-column:1 / -1; font-size:12px; color:var(--suave); overflow-wrap:anywhere; }
.voz-nota:empty { display:none; }

.voz-onda input { appearance:none; -webkit-appearance:none; height:40px; cursor:pointer; }
.voz-onda input::-webkit-slider-runnable-track { height:3px; background:transparent; }
.voz-onda input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--acento); margin-top:-4.5px; }
.voz-onda input::-moz-range-track { height:3px; background:transparent; }
.voz-onda input::-moz-range-thumb { width:12px; height:12px; border:0; border-radius:50%; background:var(--acento); }
.voz-onda:not(:has(svg)) input::-webkit-slider-runnable-track { background:var(--borde); }
.voz-onda:not(:has(svg)) input::-moz-range-track { background:var(--borde); }

/* La imagen completa se abre aparte de la miniatura del mensaje. */
.imagen-visor { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; box-sizing:border-box; margin:0; padding:calc(env(safe-area-inset-top) + 12px) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border:0; background:#000; color:#fff; }
.imagen-visor[open] { display:flex; flex-direction:column; }
.imagen-visor::backdrop { background:#000; }
.imagen-visor-barra { flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px; border-bottom:1px solid #333; }
.imagen-visor-barra strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.imagen-visor-barra button { padding:8px 10px; font-size:14px; }
.imagen-visor-estado { flex:0 0 auto; font-size:13px; margin:8px 12px; }
.imagen-visor-estado:empty { display:none; }
.imagen-visor-area { flex:1; min-height:0; display:grid; place-items:center; box-sizing:border-box; padding:12px; overflow:auto; touch-action:pan-x pan-y pinch-zoom; }
.imagen-visor-foto { display:block; margin:0 auto; max-width:100%; max-height:calc(100dvh - 136px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); width:auto; height:auto; object-fit:contain; }
.imagen-visor-foto.imagen-original { max-width:none; max-height:none; }

.imagen-visor-area:has(.imagen-original) { display:block; }
/* Acciones de mensajes */
.burbuja{position:relative;padding-right:32px}.mensaje-opciones{position:absolute;right:3px;top:3px;background:transparent;color:var(--suave);border:0;font-size:22px;padding:2px 5px;min-width:26px}.acciones-mensaje{background:var(--panel);color:var(--texto);box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 60px);overflow:auto;padding:20px;border:1px solid #8884;border-radius:18px}.acciones-mensaje::backdrop{background:#0009}.acciones-mensaje>button,.acciones-mensaje>input,.acciones-mensaje>select{display:block;width:100%;margin:10px 0}.acciones-mensaje p{overflow-wrap:anywhere}.acciones-mensaje h2{font-size:1.2rem}.cita-mensaje,.respuesta-compositor{border-left:3px solid var(--acento);padding:8px 10px;background:#8882;border-radius:6px;margin-bottom:6px;overflow-wrap:anywhere}.cita-mensaje div{white-space:pre-wrap;font-size:.85rem;max-height:4em;overflow:hidden}.respuesta-compositor{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%}.respuesta-compositor[hidden]{display:none}.respuesta-compositor span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reenviado{font-size:.8rem;color:#999;font-style:italic;margin-bottom:5px}

/* Destinatarios de reenvío: filas legibles y selección explícita. */
.reenviar-dialogo{width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);padding:18px}
.reenviar-dialogo>input{font-size:16px;min-height:48px;box-sizing:border-box}
.reenviar-previa{font-size:14px;line-height:1.4;max-height:4.2em;overflow:auto;padding:10px;background:#8881;border-radius:8px;white-space:pre-wrap}
.reenviar-contactos{min-height:160px;max-height:min(32dvh,300px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--borde);border-radius:12px;margin-top:12px}
.reenviar-contacto{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px;text-align:left;border:0;border-bottom:1px solid var(--borde);border-radius:0;background:var(--panel);color:var(--texto);font-size:16px;box-sizing:border-box}
.reenviar-contacto:last-child{border-bottom:0}.reenviar-contacto[aria-pressed="true"]{background:var(--propio);box-shadow:inset 3px 0 var(--acento)}
.reenviar-inicial{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:#8882;color:var(--acento);font-size:18px}
.reenviar-datos{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.reenviar-datos strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reenviar-datos>span{color:var(--suave);font-size:13px}.reenviar-marca{font-size:20px;color:var(--acento);min-width:20px}
.reenviar-seleccion{font-size:14px;min-height:1.4em;color:var(--acento)}.reenviar-vacio{padding:12px;color:var(--suave);font-size:14px}

/* Reacciones sincronizadas con WhatsApp. */
.reaccion-paleta{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:14px 0}.reaccion-paleta button{padding:6px 0;min-height:44px;font-size:26px;background:var(--panel);border:1px solid var(--borde);color:var(--texto)}.reaccion-paleta button[aria-pressed="true"]{background:var(--propio);border-color:var(--acento)}
.reacciones-mensaje{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.reaccion-contador{padding:3px 8px;font-size:14px;background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:16px;min-height:28px}.reaccion-contador.propia{border-color:var(--acento);background:var(--propio)}.reaccion-personas{font-size:14px;color:var(--suave);overflow-wrap:anywhere}.acciones-mensaje input{font-size:16px;min-height:44px;box-sizing:border-box}

/* Escritura adaptable y tarjetas de enlaces. */
.envio{align-items:flex-end}.envio textarea{box-sizing:border-box;min-height:44px;max-height:240px;overflow-y:auto;line-height:1.4;overscroll-behavior:contain}
.enlace-vista[hidden]{display:none}.enlace-vista{margin:8px 0;white-space:normal}.enlace-tarjeta{display:block;color:var(--texto)!important;text-decoration:none!important;border:1px solid var(--borde);border-radius:12px;overflow:hidden;background:#8881;width:min(100%,420px)}.enlace-tarjeta img{display:block;width:100%;max-height:230px;object-fit:cover}.enlace-contenido{display:flex;flex-direction:column;gap:6px;padding:12px}.enlace-titulo{font-size:15px;line-height:1.4}.enlace-descripcion{font-size:14px;line-height:1.4;color:var(--suave);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.enlace-dominio{font-size:12px;color:var(--suave);overflow-wrap:anywhere}

/* GIF y stickers visibles dentro de la conversación. */
.burbuja.burbuja-sticker,.burbuja.burbuja-sticker.propio{background:transparent;border:0;padding-top:4px;padding-bottom:4px}
.archivo-sticker{width:180px;max-width:100%}.archivo-gif{width:min(320px,100%)}.animacion-vista{position:relative;max-width:100%;min-height:80px}.animacion-vista img,.animacion-vista video{display:block;width:100%;max-height:260px;object-fit:contain;border-radius:12px}.archivo-sticker .animacion-vista img{width:180px;height:180px;max-width:100%;object-fit:contain;border-radius:0;cursor:pointer;background:transparent}.animacion-estado{display:block;font-size:12px;color:var(--suave);margin:4px 0;white-space:normal}.animacion-control{font-size:12px;padding:5px 8px}.archivo-sticker .archivo-acciones,.archivo-gif .archivo-acciones{justify-content:flex-end;margin-top:2px}.archivo-sticker .archivo-acciones button,.archivo-gif .archivo-acciones button{font-size:15px;padding:2px 8px;min-height:28px}

/* Lista de archivos seleccionados, con desplazamiento en pantallas pequeñas. */
.adjuntos-lista { display: grid; gap: 4px; min-width: 0; max-width: 100%; max-height: 160px; overflow-y: auto; }
.adjuntos-lista > div { display: flex; gap: 6px; align-items: center; min-width: 0; }
.adjuntos-lista small { flex: 1; min-width: 0; }
.adjuntos-lista button { flex: none; }

.menu-opciones .menu-no-deseados { border-top: 1px solid var(--borde); margin-top: 8px; padding-top: 12px; }
.seccion-chats { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.seccion-chats[hidden] { display: none; }
.seccion-chats strong { font-size: 16px; }
.seccion-chats button { padding: 6px 10px; font-size: 13px; }
.contacto-dialog button { margin: 4px 6px 4px 0; }
.contacto-ayuda { font-size: 13px; opacity: .8; }

.chat-fijado { margin-left: 6px; font-size: 12px; vertical-align: middle; }

.chat-indicadores { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.chat-indicadores .chat-fijado { margin: 0; }
.chat-programado { font-size: 12px; color: var(--acento); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.filtros { overflow-x: auto; flex-wrap: nowrap; }
.filtros button { flex: 0 0 auto; white-space: nowrap; }

.chat-tarea { font-size: 12px; color: var(--acento); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mensaje-tarea { display: block; width: fit-content; color: var(--acento); font-size: 12px; margin: 4px 0; }

.cuenta-resumen { flex-wrap: nowrap; }
.cuenta-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.cuenta-avatar { width: 40px; height: 40px; flex: 0 0 40px; }
.cuenta-datos #etiqueta { min-width: 0; }

/* Azul, reacciones discretas y lectura de documentos. */
.servidor-caido{background:transparent;color:var(--suave);font-size:12px;padding:2px 0}
.reaccion-contador,.reaccion-contador.propia{background:var(--panel);border:0;box-shadow:none;color:var(--texto);padding:2px 6px;font-weight:400}
.reaccion-contador:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.archivo-vista-simple .archivo-acciones{display:none}
.archivo-tarjeta{touch-action:manipulation}
.documento-visor,.equipo-dialog{color:var(--texto);background:var(--panel);border:1px solid var(--borde);border-radius:16px;width:min(850px,calc(100% - 24px));max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:auto;padding:20px}
.documento-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;background:var(--panel);padding-bottom:12px;border-bottom:1px solid var(--borde)}
.documento-barra strong{overflow-wrap:anywhere;min-width:0}.documento-barra button{flex-shrink:0}
.documento-nota{font-size:13px;color:var(--suave)}
.documento-texto{white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;user-select:text;padding:12px 0}
.editar-texto{display:block;width:100%;min-height:150px;max-height:40dvh;resize:vertical;margin:10px 0;font-size:16px}
.equipo-dialog p{line-height:1.6}

/* Configuración: controles existentes, misma cuenta y permisos. */
.configuracion-dialog{color:var(--texto);background:var(--panel);border:1px solid var(--borde);border-radius:16px;box-sizing:border-box;width:min(480px,calc(100% - 24px));max-height:calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:auto;overflow-y:auto;padding:20px}
.configuracion-dialog::backdrop{background:rgb(0 0 0 / .65)}
.configuracion-cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.configuracion-cabecera h2{margin:0;font-size:1.2rem}
.configuracion-tema{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--borde);margin-bottom:12px}.tema-valor{display:block;color:var(--suave);font-size:14px;margin-top:3px}
.tema-interruptor{display:block;width:54px;height:32px;min-width:54px;border:0;border-radius:20px;padding:3px;background:var(--borde);position:relative}
.tema-interruptor span{display:block;width:26px;height:26px;border-radius:50%;background:#fff;transform:translateX(0);transition:transform .15s ease}
.tema-interruptor[aria-checked="true"]{background:var(--acento)}.tema-interruptor[aria-checked="true"] span{transform:translateX(22px)}
.tema-interruptor:focus-visible{outline:2px solid var(--acento);outline-offset:4px}
.configuracion-dialog .configuracion-accion{display:block;width:100%;text-align:left;padding:12px;margin:8px 0;min-height:44px}.configuracion-dialog [hidden]{display:none}
@media(prefers-reduced-motion:reduce){.tema-interruptor span{transition:none}}

.historial-sync-status{font-size:14px;line-height:1.5;color:var(--suave);overflow-wrap:anywhere}

/* Distribución de conversaciones y mensajes. */
#titulo-chats{font-size:30px;line-height:1.15;letter-spacing:-.6px;margin:14px 16px 6px}
.buscador{padding:8px 14px;gap:8px}
#buscar{border-radius:24px;min-height:44px;padding-left:16px}
#btn-nuevo{border-radius:50%;width:44px;height:44px;padding:0;font-size:26px;flex-shrink:0}
.filtros{padding:6px 14px 10px;gap:6px;overflow-x:auto;flex-wrap:nowrap;flex-shrink:0;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtros button{border-radius:22px;padding:7px 12px;white-space:nowrap;flex-shrink:0;font-size:14px}
#chats li{grid-template-columns:54px minmax(0,1fr) auto;gap:10px;padding:12px 14px;min-height:88px;align-items:start}
#chats li>.avatar{width:54px;height:54px;font-size:22px;align-self:center}
.chat-contenido{min-width:0;padding-top:1px}
.chat-nombre{font-size:17px;font-weight:600;line-height:1.35}
.chat-previa{font-size:15px;line-height:1.35;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;max-height:2.7em;margin-top:2px}
.chat-meta{font-size:11px;white-space:nowrap;line-height:1.5;padding-top:3px;min-width:48px}
.chat-indicadores{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:8px}
.chat-tarea,.chat-programado{font-size:12px;line-height:1.4;margin-top:3px}
.burbuja{border:0;border-radius:16px;padding:8px 11px;max-width:min(620px,88%);background:#eef0f3;white-space:normal;line-height:1.4}
:root[data-theme="dark"] .burbuja{background:#202020}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .burbuja{background:#202020}}
.burbuja.propio{background:var(--propio)}
.burbuja.burbuja-sticker{background:transparent}
.burbuja::after{content:"";display:block;clear:both}
.mensaje-texto{display:inline;white-space:pre-wrap;overflow-wrap:anywhere}
.burbuja>.meta{float:right;display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;max-width:100%;margin:4px 0 0 10px;font-size:11px;line-height:20px;white-space:normal}
.mensaje-estado.leido{color:var(--acento)}
.burbuja .mensaje-opciones{position:static;display:inline-flex;align-items:center;justify-content:center;min-width:24px;width:24px;height:24px;padding:0;font-size:20px;border:0;border-radius:50%;background:transparent;color:var(--suave);line-height:1;flex-shrink:0}
.reacciones-mensaje,.mensaje-tarea,.burbuja>.alerta{clear:both}
.envio{align-items:flex-end;gap:7px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--panel)}
#texto{border-radius:22px;min-height:44px;padding:10px 14px;line-height:1.4}
.envio .composer-plus,.envio .voz-micro,#btn-enviar{width:44px;height:44px;min-width:44px;border-radius:50%;padding:0;flex-shrink:0}
#btn-enviar{font-size:28px;line-height:1;font-weight:600}
#envio-error:empty{display:none}
.conv-cabecera{gap:10px;min-height:60px}
#conv-nombre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:17px}
#conv-avatar{width:42px;height:42px;flex-shrink:0}
@media(max-width:760px){
 body.ver-chat #app>.barra{display:none}
 .conv-cabecera{padding:7px 10px;flex-shrink:0}
 #btn-volver{display:block;font-size:36px;line-height:36px;min-width:30px;width:30px;height:44px;padding:0;border:0;flex-shrink:0}
 .conv-cabecera>.menu-cuenta{margin-left:auto;flex-shrink:0}
 .conv-cabecera .menu-cuenta>button{width:44px;height:44px;padding:0;border:0}
 .mensajes{padding:12px 8px}
 .burbuja{font-size:17px;margin-bottom:7px;max-width:90%}
 .envio{flex-wrap:wrap}
 #texto{flex:1 1 0;min-width:0;font-size:17px}
 .cuenta-resumen{min-width:0}.cuenta-nombre{font-size:16px}
}
@media(display-mode:standalone) and (max-width:760px){
 body.ver-chat{padding-top:env(safe-area-inset-top)}
 body.ver-chat #app:not([hidden]){height:calc(100dvh - env(safe-area-inset-top))}
}
:root[data-theme="dark"] .burbuja.propio{background:var(--propio)}
:root[data-theme="dark"] .burbuja.burbuja-sticker{background:transparent}
@media(prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .burbuja.propio{background:var(--propio)}
 :root:not([data-theme="light"]) .burbuja.burbuja-sticker{background:transparent}
}

/* Margen del encabezado de chat en iPhone. */
@media(max-width:760px){
 .conv-cabecera{align-items:center;padding:10px 10px;min-height:64px}
}
@media(display-mode:standalone) and (max-width:760px){
 body.ver-chat{padding-top:calc(env(safe-area-inset-top) + 12px)}
 body.ver-chat #app:not([hidden]){height:calc(100dvh - env(safe-area-inset-top) - 12px)}
}

.ausencia-dialog{width:min(520px,calc(100vw - 24px));max-height:85dvh;overflow:auto;background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:16px;padding:18px}
.ausencia-dialog::backdrop{background:rgba(0,0,0,.55)}
.ausencia-dialog input,.ausencia-dialog textarea,.ausencia-dialog select{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--borde);border-radius:8px;padding:9px;min-width:0;max-width:100%}
.ausencia-campo{display:flex;flex-direction:column;gap:6px;margin:14px 0}.ausencia-campo input[type=checkbox]{align-self:flex-start;width:24px;height:24px;accent-color:var(--acento)}
.ausencia-dialog fieldset{border:1px solid var(--borde);border-radius:10px;margin:12px 0;padding:12px}.ausencia-dialog fieldset label{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}.ausencia-dialog fieldset input:not([type=checkbox]){width:100%}.ausencia-dialog [hidden]{display:none}
.ausencia-previa{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;border-radius:12px;background:var(--propio);margin:12px 0}.ausencia-estado{color:var(--suave);font-size:14px}
@media(max-width:760px){.ausencia-dialog input,.ausencia-dialog textarea,.ausencia-dialog select{font-size:16px}}

.ausencia-guardado{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 88px);transform:translateX(-50%);z-index:100;width:max-content;max-width:calc(100vw - 32px);padding:12px 16px;border-radius:12px;background:var(--acento);color:#fff;box-shadow:0 4px 24px rgb(0 0 0 / .25);font-size:15px;line-height:1.4;pointer-events:none;text-align:center}
.ausencia-guardado[hidden]{display:none}

.quick-dialog{width:min(560px,calc(100vw - 24px));max-height:85dvh;overflow:auto;background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:16px;padding:18px}.quick-dialog::backdrop{background:rgb(0 0 0 / .55)}
.quick-dialog [hidden],.quick-inline[hidden]{display:none}.quick-dialog input,.quick-dialog textarea{width:100%;font:inherit;min-width:0}.quick-dialog input[type=file]{display:none}.quick-dialog button{margin:4px}.quick-dialog small{display:block;color:var(--suave);overflow-wrap:anywhere}.quick-dialog .adjunto-control{flex-wrap:wrap}
.quick-row{border-bottom:1px solid var(--borde);padding:12px 0;overflow-wrap:anywhere}.quick-row strong{color:var(--acento)}.quick-row p{margin:6px 0;white-space:pre-wrap;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.quick-list{margin-top:12px}
.quick-inline{position:absolute;bottom:calc(100% + 8px);left:10px;width:calc(100% - 20px);max-height:min(40dvh,300px);overflow-y:auto;background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:8px;z-index:40;box-shadow:0 4px 20px rgb(0 0 0 / .25)}
.quick-inline .quick-option{display:block;width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:12px;border:0;background:transparent;color:var(--texto);border-radius:8px}.quick-inline .quick-option.seleccionada{background:var(--propio)}
@media(max-width:760px){.quick-dialog input,.quick-dialog textarea{font-size:16px}}

/* Equipo: administración y asignaciones por cuenta. */
.team-dialog{width:min(640px,calc(100vw - 24px));max-height:85dvh;overflow:auto;background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:16px;padding:18px}.team-dialog::backdrop{background:rgb(0 0 0 / .55)}
.team-dialog [hidden]{display:none}.team-dialog input:not([type=checkbox]),.team-dialog select{font:inherit;width:100%;min-width:0}.team-dialog button{margin:4px}.team-dialog h3{margin-top:22px}.team-row{padding:12px 0;border-bottom:1px solid var(--borde);overflow-wrap:anywhere}.team-row strong,.team-row small{display:block}.team-row small,.team-note,.team-history{color:var(--suave);font-size:14px;line-height:1.45}.team-check{display:flex;gap:10px;align-items:center;margin:14px 0}.team-check input{width:20px;height:20px;flex-shrink:0}.team-chat-link{max-width:100%;overflow-wrap:anywhere;text-align:left}.team-dialog details{margin-top:20px}.team-dialog summary{cursor:pointer}.team-history{border-bottom:1px solid var(--borde);padding:10px 0}.team-dialog [role=switch][aria-checked=true]{background:var(--acento);color:#fff;border-color:var(--acento)}.chat-equipo{font-size:12px;color:var(--acento);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
@media(max-width:760px){.team-dialog input,.team-dialog select{font-size:16px}.team-dialog{padding:14px}}

#access-kind,#access-username{font:inherit;font-size:16px;width:100%;margin-bottom:12px}#access-username[hidden]{display:none}.member-identity{display:block;font-size:12px;color:var(--suave)}.member-identity[hidden]{display:none}
body[data-connect-role=member] #btn-equipo,body[data-connect-role=member] #btn-ausencia,body[data-connect-role=member] #btn-nuevo,body[data-connect-role=member] #btn-salir-todas,body[data-connect-role=member] #btn-notificaciones,body[data-connect-role=member] #btn-no-deseados,body[data-connect-role=member] #btn-vincular,body[data-connect-role=member] #btn-borrar{display:none!important}



.coverage-choices{max-height:30dvh;overflow:auto;border:1px solid var(--borde);border-radius:10px;padding:8px}.coverage-choices .team-check{margin:8px 0}.team-dialog input[type=datetime-local]{font-size:16px}

/* BEGIN Connect: acceso compacto */
#acceso.panel{box-sizing:border-box;width:calc(100% - 32px);max-width:480px;margin:32px auto;padding:24px;overflow-wrap:anywhere}
#acceso h1{font-size:clamp(24px,5vw,32px);line-height:1.2;margin:8px 0 20px}
#acceso .configuracion-tema{justify-content:flex-start;gap:20px;border-bottom:0;padding:8px 0;margin-bottom:12px}
#acceso .tema-interruptor{flex:none}
#form-acceso{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
#form-acceso>label,#form-acceso>#access-username{grid-column:1/-1;min-width:0}
#form-acceso #access-kind,#form-acceso #access-username,#form-acceso #token{box-sizing:border-box;width:100%;max-width:100%;min-width:0;margin:4px 0 0;font:inherit;font-size:16px}
#form-acceso #access-kind{color:var(--texto);background:var(--panel);border:1px solid var(--borde);border-radius:8px;padding:10px;min-height:44px}
#form-acceso #token,#form-acceso #access-username{min-height:44px}
#form-acceso>button{min-height:44px;margin-top:4px}
#form-acceso .recordar-acceso{margin-top:2px;align-items:flex-start;line-height:1.4}
#form-acceso .recordar-acceso input{margin-top:2px}
#acceso .error{margin:12px 0 0}
@media(max-width:480px){#acceso.panel{margin:20px auto;padding:20px}}
/* END Connect: acceso compacto */

/* BEGIN Connect: alineación óptica del nombre */
@media(max-width:760px){#app>.barra .cuenta-datos>#etiqueta{position:relative;top:2px}}
/* END Connect: alineación óptica del nombre */

/* BEGIN Connect: estado conectado compacto */
@media(max-width:760px){#app>.barra .cuenta-datos>#etiqueta{top:0}}
#estado[data-estado="conectado"]{display:inline-block;flex:0 0 10px;align-self:center;box-sizing:border-box;width:10px;min-width:10px;height:10px;padding:0;margin:0;border:0;border-radius:50%;font-size:0;line-height:0;background:#22c55e;position:relative;top:1px;animation:connect-online-pulse 2.4s ease-out infinite}
@keyframes connect-online-pulse{0%,100%{box-shadow:0 0 0 0 rgb(34 197 94 / .28)}65%{box-shadow:0 0 0 6px rgb(34 197 94 / 0)}}
/* Un estado antiguo no debe verse verde mientras el servidor se actualiza. */
.cuenta-datos:has(#servidor:not([hidden]))>#estado[data-estado="conectado"],.cuenta-resumen:has(#servidor:not([hidden]))>#estado[data-estado="conectado"]{display:none;animation:none}
@media(prefers-reduced-motion:reduce){#estado[data-estado="conectado"]{animation:none;box-shadow:none}}
/* END Connect: estado conectado compacto */

/* BEGIN Connect: pulso visible en oscuro */
#estado[data-estado="conectado"]{animation-name:var(--connect-online-animation,connect-online-pulse)}
:root[data-theme="dark"]{--connect-online-animation:connect-online-dark-pulse}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--connect-online-animation:connect-online-dark-pulse}}
@keyframes connect-online-dark-pulse{
 0%,100%{transform:scale(1);opacity:1;background:#4ade80;box-shadow:0 0 2px 1px rgba(74,222,128,.65),0 0 0 0 rgba(74,222,128,.65)}
 50%{transform:scale(.82);opacity:.7;background:#22c55e;box-shadow:0 0 4px 2px rgba(74,222,128,.5),0 0 0 6px rgba(74,222,128,.12)}
}
@media(prefers-reduced-motion:reduce){#estado[data-estado="conectado"]{animation:none}}
/* END Connect: pulso visible en oscuro */

/* BEGIN Connect: pulso uniforme en ambos temas */
:root{--connect-online-animation:connect-online-dark-pulse}
/* END Connect: pulso uniforme en ambos temas */

/* BEGIN Connect: identidad del acceso */
#acceso #acceso-titulo{margin-bottom:6px}
#acceso .acceso-marca{margin:0 0 20px;color:var(--suave);font-size:14px;line-height:1.4;font-weight:400}
/* END Connect: identidad del acceso */
/* Plantillas: confirmación visible y selección de varios destinatarios. */
.plantilla-aviso{padding:12px;border-radius:10px;background:#1675d11a;border:1px solid #2683de;color:var(--texto);line-height:1.5}.plantilla-aviso[hidden]{display:none}
.plantillas-envio{box-sizing:border-box;width:min(660px,calc(100vw - 24px));max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;margin:auto;padding:20px;border:1px solid var(--borde);border-radius:16px;background:var(--panel);color:var(--texto)}
.plantillas-envio::backdrop{background:rgb(0 0 0 / .65)}.plantillas-envio label{display:block;margin:12px 0 5px}.plantillas-envio input:not([type=checkbox]),.plantillas-envio select{box-sizing:border-box;width:100%;min-width:0;padding:10px;font:inherit;font-size:16px;color:inherit;background:var(--panel);border:1px solid var(--borde);border-radius:9px}.plantillas-envio button{min-height:44px}.plantillas-envio [hidden]{display:none}.plantilla-previa{white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto;padding:12px;border:1px solid var(--borde);border-radius:9px}
.plantilla-destinatarios{min-height:130px;max-height:280px;overflow:auto;border:1px solid var(--borde);border-radius:10px}.plantilla-destinatarios .plantilla-destino{display:grid;grid-template-columns:24px 1fr;gap:4px 10px;align-items:center;padding:10px;margin:0;border-bottom:1px solid var(--borde);min-height:44px;cursor:pointer}.plantilla-destino input{grid-row:span 2;width:20px;height:20px;accent-color:#2683de}.plantilla-destino span{overflow-wrap:anywhere}.plantilla-destino small{opacity:.7}.plantilla-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.plantilla-resultados{padding-left:20px;line-height:1.7;overflow-wrap:anywhere}.plantillas-envio .programacion-cabecera h2{font-size:1.3rem}.plantillas-envio p[role=status]{line-height:1.5}
/* Bandeja de avisos internos: independiente de mensajes sin leer. */
.avisos-campana{position:relative;flex:none;min-width:44px;min-height:44px;font-size:21px;padding:8px}.avisos-contador{position:absolute;top:0;right:-3px;background:#d92d42;color:white;border-radius:14px;padding:1px 5px;font-size:11px;font-weight:700;min-width:16px;text-align:center}.avisos-contador[hidden]{display:none}
.avisos-dialog{box-sizing:border-box;width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;background:var(--panel);color:var(--texto);border:1px solid var(--borde);border-radius:16px;padding:18px}.avisos-dialog::backdrop{background:rgb(0 0 0 / .65)}.avisos-dialog button{min-height:44px;margin:4px}.aviso-interno{padding:14px;border:1px solid var(--borde);border-radius:12px;margin:12px 0;overflow-wrap:anywhere}.aviso-interno p{white-space:pre-wrap;margin:8px 0;line-height:1.5}.aviso-interno small{opacity:.75}.aviso-nuevo{border-left:4px solid #2683de}.aviso-destacado{outline:2px solid #2683de}.avisos-dialog .programacion-cabecera h2{font-size:1.3rem}
body[data-connect-role=member] #btn-notificaciones{display:block!important}

/* Campanita junto al menú de cuenta. */
.barra > #btn-avisos-internos { margin-left: auto; }
.conv-cabecera > #btn-avisos-internos + #menu-cuenta { margin-left: 0; }