/* AIM OFFICE · AIM Chat. Equipos a la izquierda, canales y directos en el lateral, la conversación en
   el centro y el hilo a la derecha. En el móvil, una cosa cada vez. Solo variables del estilo. */
#ap[data-app="chat"] .ap-cuerpo { overflow: hidden; display: flex; flex-direction: column; }
#ap[data-app="chat"] .ap-cabeza { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
.ch-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Búsqueda de la cabecera */
.ch-buscar { position: relative; display: flex; align-items: center; }
.ch-buscar svg { position: absolute; left: 10px; width: 17px; height: 17px; color: var(--tinta-3); pointer-events: none; }
.ch-buscar input { width: min(360px, 42vw); min-height: 36px; padding: 6px 10px 6px 34px; border-radius: 9px; border: 1px solid var(--linea-2); background: var(--papel); color: var(--tinta); font: 14.5px/1.3 var(--cuerpo); }
.ch-buscar input:focus { outline: none; border-color: var(--ap-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-acento) 22%, transparent); background: var(--blanco); }

/* Rejilla */
.ch { flex: 1; min-height: 0; display: grid; grid-template-columns: 64px 264px minmax(0, 1fr); background: var(--blanco); }
.ch.ch-con-hilo { grid-template-columns: 64px 264px minmax(0, 1fr) minmax(320px, 400px); }
.ch-sin-rail { grid-template-columns: 264px minmax(0, 1fr); }
.ch-sin-rail.ch-con-hilo { grid-template-columns: 264px minmax(0, 1fr) minmax(320px, 400px); }

/* Carril de equipos */
.ch-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; background: color-mix(in srgb, var(--ap-acento) 16%, var(--papel)); border-right: 1px solid var(--linea); overflow-y: auto; }
.ch-eq { position: relative; width: 42px; height: 42px; border-radius: 11px; border: 0; display: grid; place-items: center; font: 750 15px/1 var(--titulo); color: var(--sobre-acento, #fff); background: color-mix(in srgb, var(--ap-acento) 70%, var(--tinta)); cursor: pointer; box-shadow: 0 0 0 2px transparent; }
.ch-eq[aria-current="true"] { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--tinta); }
.ch-eq.ch-eq-mas { background: transparent; color: var(--tinta-2); border: 1px dashed var(--tinta-3); }
.ch-eq .ch-punto { position: absolute; right: -3px; top: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--pdf); color: #fff; font: 700 11px/18px var(--cuerpo); border: 2px solid var(--papel); }
.ch-eq .ch-punto:empty { min-width: 12px; width: 12px; height: 12px; padding: 0; background: var(--tinta); }

/* Lateral */
.ch-lateral { min-height: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--ap-acento) 6%, var(--papel)); border-right: 1px solid var(--linea); }
.ch-lat-cab { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--linea); min-height: 52px; }
.ch-eq-nombre { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: 750 17px/1.2 var(--titulo); color: var(--tinta); text-align: left; }
.ch-eq-nombre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-eq-nombre:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.ch-eq-nombre svg { width: 16px; height: 16px; }
.ch-lat-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px 16px; display: flex; flex-direction: column; gap: 2px; }
.ch-seccion { display: flex; align-items: center; gap: 4px; margin: 12px 0 2px; padding-left: 6px; }
.ch-seccion h2 { flex: 1; font: 650 12.5px/1.3 var(--cuerpo); letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
.ch-seccion .ap-boton { min-height: 28px; width: 28px; border-radius: 7px; }
.ch-seccion .ap-boton svg { width: 16px; height: 16px; }
.ch-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 5px 8px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; color: var(--tinta-2); font: 15px/1.25 var(--cuerpo); }
.ch-item:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.ch-item[aria-current="true"] { background: color-mix(in srgb, var(--ap-acento) 85%, var(--tinta)); color: var(--sobre-acento, #fff); }
.ch-item[aria-current="true"] svg, .ch-item[aria-current="true"] .ch-item-ico { color: inherit; }
.ch-item .ch-item-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-item svg, .ch-item-ico { width: 17px; height: 17px; color: var(--tinta-3); }
.ch-item.ch-no-leido { color: var(--tinta); font-weight: 750; }
.ch-item.ch-apagado { opacity: .62; }
.ch-insignia { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--pdf); color: #fff; font: 700 12px/20px var(--cuerpo); text-align: center; }
.ch-insignia-suave { background: color-mix(in srgb, var(--tinta) 14%, transparent); color: var(--tinta); }
.ch-item .ch-av { width: 20px; height: 20px; border-radius: 5px; font-size: 9.5px; }
.ch-lat-pie { border-top: 1px solid var(--linea); padding: 8px; display: flex; align-items: center; gap: 8px; }
.ch-yo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; color: var(--tinta); }
.ch-yo:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.ch-yo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.ch-estado { font-size: 12.5px; color: var(--aviso-tinta); background: var(--aviso-fondo); border-radius: 6px; padding: 2px 8px; }

/* Avatares */
.ch-av { width: 36px; height: 36px; border-radius: 9px; display: inline-grid; place-items: center; flex: 0 0 auto; background: var(--c, #475569); color: #fff; font: 700 13.5px/1 var(--cuerpo); letter-spacing: .02em; user-select: none; }
.ch-av-p { width: 24px; height: 24px; border-radius: 6px; font-size: 10.5px; }

/* Principal */
.ch-principal { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--blanco); }
.ch-cab { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 12px 6px 16px; border-bottom: 1px solid var(--linea); }
.ch-cab-titulo { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin-left: -8px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--tinta); font: 750 17px/1.2 var(--titulo); }
.ch-cab-titulo:hover { background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.ch-cab-titulo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-cab-titulo svg { width: 18px; height: 18px; }
.ch-cab-tema { flex: 1; min-width: 0; color: var(--tinta-3); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-cab .ap-boton { min-height: 34px; padding: 4px 10px; font-size: 14px !important; gap: 6px; }
.ch-cab .ap-solo-icono { width: 34px; padding: 0; }
.ch-cab .ap-boton svg { width: 17px; height: 17px; }
.ch-volver { display: none !important; }
.ch-aviso { margin: 0; padding: 8px 16px; font-size: 14px; background: var(--aviso-fondo); color: var(--aviso-tinta); border-bottom: 1px solid var(--aviso-borde); }

/* Lista de mensajes */
.ch-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0 12px; overscroll-behavior: contain; }
.ch-lista:focus-visible { outline: 3px solid var(--ap-acento); outline-offset: -3px; }
.ch-mas-viejos { display: flex; justify-content: center; padding: 8px; }
.ch-inicio { padding: 24px 20px 12px; }
.ch-inicio h2 { font: 800 24px/1.15 var(--titulo); margin-bottom: 6px; }
.ch-inicio p { color: var(--tinta-2); max-width: 640px; }
.ch-dia { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: center; margin: 10px 0 4px; pointer-events: none; }
.ch-dia::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--linea); }
.ch-dia span { position: relative; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--linea); background: var(--blanco); font: 650 13px/1.3 var(--cuerpo); color: var(--tinta-2); }
.ch-nuevos { display: flex; align-items: center; gap: 8px; margin: 6px 16px; color: var(--pdf); font: 700 12px/1 var(--cuerpo); text-transform: uppercase; letter-spacing: .05em; }
.ch-nuevos::before { content: ""; flex: 1; border-top: 1px solid var(--pdf); }

.ch-msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; padding: 2px 20px 2px 16px; }
.ch-msg.ch-cabeza { margin-top: 8px; padding-top: 4px; }
.ch-msg:hover, .ch-msg:focus-within, .ch-msg.ch-activo { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.ch-msg:focus { outline: none; box-shadow: inset 3px 0 0 var(--ap-acento); }
.ch-msg.ch-me-menciona { background: color-mix(in srgb, var(--aviso-borde) 20%, transparent); box-shadow: inset 3px 0 0 var(--aviso-borde); }
.ch-msg.ch-resaltado { animation: ch-resalte 2.4s ease-out; }
@keyframes ch-resalte { 0%, 40% { background: color-mix(in srgb, var(--ap-acento) 22%, transparent); } 100% { background: transparent; } }
.ch-msg.ch-pendiente { opacity: .6; }
.ch-msg.ch-fallo { opacity: 1; }
.ch-lado { display: flex; justify-content: center; }
.ch-hora-lado { visibility: hidden; font-size: 11.5px; color: var(--tinta-3); padding-top: 4px; white-space: nowrap; }
.ch-msg:hover .ch-hora-lado, .ch-msg:focus-within .ch-hora-lado { visibility: visible; }
.ch-quien { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ch-quien b { font-weight: 750; color: var(--tinta); }
.ch-quien time, .ch-editado { font-size: 12.5px; color: var(--tinta-3); }
.ch-fijado-marca { font-size: 12.5px; color: color-mix(in srgb, var(--aviso-tinta) 55%, var(--tinta)); display: inline-flex; align-items: center; gap: 4px; }
.ch-fijado-marca svg { width: 13px; height: 13px; }
.ch-texto { color: var(--tinta); font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ch-texto p { margin: 0; }
.ch-texto p + p, .ch-texto p + ul, .ch-texto ul + p, .ch-texto p + ol, .ch-texto ol + p, .ch-texto pre, .ch-texto blockquote { margin-top: 4px; }
.ch-texto ul, .ch-texto ol { margin: 2px 0; padding-left: 24px; }
.ch-texto code { font: 13.5px/1.4 ui-monospace, "Cascadia Mono", Menlo, monospace; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--tinta) 7%, transparent); border: 1px solid var(--linea); color: color-mix(in srgb, var(--pdf) 55%, var(--tinta)); }
.ch-texto pre { padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--tinta) 5%, var(--blanco)); border: 1px solid var(--linea); overflow-x: auto; }
.ch-texto pre code { padding: 0; border: 0; background: none; color: var(--tinta); white-space: pre; }
.ch-texto blockquote { margin-left: 0; padding-left: 12px; border-left: 4px solid var(--linea-2); color: var(--tinta-2); }
.ch-texto a { color: var(--enlace); }
.ch-texto.ch-grande { font-size: 34px; line-height: 1.25; }
.ch-borrado { color: var(--tinta-3); font-style: italic; }
.ch-mencion { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--ap-acento) 14%, transparent); color: color-mix(in srgb, var(--ap-acento) 75%, var(--tinta)); font-weight: 650; }
.ch-mencion.ch-mencion-yo { background: color-mix(in srgb, var(--aviso-borde) 40%, transparent); color: color-mix(in srgb, var(--aviso-tinta) 45%, var(--tinta)); }
.ch-sis { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 4px 20px 4px 16px; color: var(--tinta-3); font-size: 14px; }
.ch-sis .ch-lado { justify-content: center; }
.ch-sis b { color: var(--tinta-2); }

/* Acciones del mensaje */
.ch-acciones { position: absolute; top: -16px; right: 16px; z-index: 3; display: none; gap: 2px; padding: 2px; border-radius: 9px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: 0 4px 14px color-mix(in srgb, var(--tinta) 14%, transparent); }
.ch-msg:hover .ch-acciones, .ch-msg:focus-within .ch-acciones, .ch-msg.ch-activo .ch-acciones { display: flex; }
.ch-acciones button { width: 32px; height: 30px; border: 0; border-radius: 7px; background: none; cursor: pointer; display: grid; place-items: center; font-size: 17px; line-height: 1; color: var(--tinta-2); }
.ch-acciones button:hover, .ch-acciones button:focus-visible { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.ch-acciones svg { width: 18px; height: 18px; }

/* Reacciones */
.ch-reacciones { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ch-reac { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--linea); background: color-mix(in srgb, var(--tinta) 4%, transparent); cursor: pointer; font: 600 13px/1 var(--cuerpo); color: var(--tinta-2); }
.ch-reac[aria-pressed="true"] { border-color: color-mix(in srgb, var(--ap-acento) 60%, transparent); background: var(--ap-suave); color: color-mix(in srgb, var(--ap-acento) 80%, var(--tinta)); }
.ch-reac span:first-child { font-size: 15px; }
.ch-reac-mas { color: var(--tinta-3); }
.ch-reac-mas svg { width: 15px; height: 15px; }

/* Resumen del hilo */
.ch-hilo-res { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 3px 8px 3px 4px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; font: 14px/1.3 var(--cuerpo); color: var(--tinta-3); }
.ch-hilo-res b { color: var(--enlace); font-weight: 700; }
.ch-hilo-res:hover { border-color: var(--linea); background: var(--blanco); }
.ch-hilo-res .ch-av { width: 22px; height: 22px; border-radius: 5px; font-size: 9.5px; }
.ch-al-canal { font-size: 12.5px; color: var(--tinta-3); margin-bottom: 2px; }
.ch-al-canal button { background: none; border: 0; padding: 0; color: var(--enlace); cursor: pointer; font: inherit; text-decoration: underline; }

/* Archivos */
.ch-archivos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ch-img { position: relative; display: block; padding: 0; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--tinta) 5%, transparent); cursor: zoom-in; max-width: min(360px, 100%); }
.ch-img img { display: block; max-width: 100%; max-height: 300px; width: auto; height: auto; object-fit: contain; }
.ch-img-hueco { display: grid; place-items: center; width: 240px; max-width: 100%; height: 160px; color: var(--tinta-3); font-size: 13px; }
.ch-arch { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 100%; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); }
.ch-arch-ico { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--ap-suave); color: color-mix(in srgb, var(--ap-acento) 80%, var(--tinta)); flex: 0 0 auto; }
.ch-arch-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-arch-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: 14.5px; }
.ch-arch-txt small { color: var(--tinta-3); font-size: 12.5px; }
.ch-arch .ap-boton { min-height: 34px; width: 34px; }
.ch-visor { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ch-visor img { max-width: 100%; max-height: 70vh; border-radius: 8px; }

/* Compositor */
.ch-comp-zona { padding: 0 16px 14px; }
.ch-comp { position: relative; border: 1px solid var(--linea-2); border-radius: 12px; background: var(--blanco); }
.ch-comp:focus-within { border-color: var(--tinta-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-acento) 16%, transparent); }
.ch-comp-barra { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.ch-comp-barra button, .ch-comp-pie button:not(.ch-enviar) { width: 32px; height: 30px; border: 0; border-radius: 7px; background: none; cursor: pointer; display: grid; place-items: center; color: var(--tinta-2); font: 700 15px/1 var(--cuerpo); }
.ch-comp-barra button:hover, .ch-comp-pie button:not(.ch-enviar):hover { background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.ch-comp-barra svg, .ch-comp-pie svg { width: 18px; height: 18px; }
.ch-comp-barra .ch-sep { width: 1px; height: 18px; background: var(--linea); margin: 0 4px; }
.ch-area { display: block; width: 100%; min-height: 44px; max-height: 40vh; padding: 10px 12px; border: 0; resize: none; background: transparent; color: var(--tinta); font: 15.5px/1.45 var(--cuerpo); }
.ch-area:focus { outline: none; }
.ch-area::placeholder { color: var(--tinta-3); }
.ch-comp-pie { display: flex; align-items: center; gap: 2px; padding: 2px 6px 6px; }
.ch-comp-pie .ap-espacio { flex: 1; }
.ch-enviar { min-height: 32px !important; padding: 4px 12px !important; border-radius: 8px !important; }
.ch-enviar svg { width: 17px; height: 17px; }
.ch-al-canal-casilla { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tinta-2); padding: 0 6px; cursor: pointer; }
.ch-al-canal-casilla input { accent-color: var(--ap-acento); }
.ch-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px 0; }
.ch-chip { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 30px 4px 4px; border: 1px solid var(--linea); border-radius: 9px; max-width: 240px; font-size: 13px; background: var(--papel); }
.ch-chip img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.ch-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-chip button { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--tinta-3); display: grid; place-items: center; }
.ch-chip button svg { width: 15px; height: 15px; }
.ch-cerrado { padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--linea-2); color: var(--tinta-2); text-align: center; font-size: 14.5px; }
.ch-ayuda-comp { font-size: 12px; color: var(--tinta-3); padding: 4px 4px 0; }
.ch-ayuda-comp kbd { font: 11.5px ui-monospace, monospace; padding: 0 4px; border: 1px solid var(--linea-2); border-radius: 4px; }

/* Sugerencias de menciones */
.ch-sug { position: absolute; left: 8px; width: min(380px, calc(100% - 16px)); bottom: calc(100% + 6px); z-index: 10; max-height: 260px; overflow-y: auto; padding: 4px; margin: 0; list-style: none; border-radius: 10px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: 0 10px 30px color-mix(in srgb, var(--tinta) 18%, transparent); }
.ch-sug li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 14.5px; }
.ch-sug li[aria-selected="true"] { background: var(--ap-suave); }
.ch-sug small { color: var(--tinta-3); margin-left: auto; }

/* Ventanitas (emojis, fijados) */
.ch-pop { position: fixed; z-index: 55; width: min(340px, calc(100vw - 16px)); max-height: min(420px, 70vh); display: flex; flex-direction: column; border-radius: 12px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); box-shadow: 0 16px 44px color-mix(in srgb, var(--tinta) 22%, transparent); }
.ch-pop-cab { padding: 8px; border-bottom: 1px solid var(--linea); }
.ch-pop-cab input { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--linea-2); border-radius: 8px; background: var(--blanco); color: var(--tinta); font: 14.5px var(--cuerpo); }
.ch-pop-cuerpo { overflow-y: auto; padding: 6px 8px 10px; }
.ch-pop h3 { font: 650 12px/1.3 var(--cuerpo); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); margin: 8px 2px 4px; }
.ch-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.ch-emojis button { height: 36px; border: 0; border-radius: 7px; background: none; cursor: pointer; font-size: 21px; line-height: 1; }
.ch-emojis button:hover, .ch-emojis button:focus-visible { background: color-mix(in srgb, var(--tinta) 8%, transparent); }

/* Panel del hilo */
.ch-hilo { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--linea); background: var(--blanco); }
.ch-hilo .ch-cab { padding-left: 16px; }
.ch-hilo-raiz { border-bottom: 1px solid var(--linea); padding-bottom: 8px; margin-bottom: 4px; }
.ch-hilo-n { display: flex; align-items: center; gap: 8px; margin: 6px 16px; color: var(--tinta-3); font-size: 13px; }
.ch-hilo-n::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }

/* Vistas: hilos, búsqueda, bienvenida */
.ch-vista { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ch-tarjeta { border: 1px solid var(--linea); border-radius: 12px; background: var(--blanco); overflow: hidden; }
.ch-tarjeta-cab { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--linea); font-size: 14px; color: var(--tinta-2); background: color-mix(in srgb, var(--tinta) 2%, var(--blanco)); }
.ch-tarjeta-cab b { color: var(--tinta); }
.ch-tarjeta .ch-msg { padding-top: 6px; padding-bottom: 6px; margin-top: 0; }
.ch-tarjeta-pie { padding: 4px 14px 10px 66px; }
.ch-bienvenida { margin: 6vh auto; max-width: 600px; padding: 0 16px; display: flex; flex-direction: column; gap: 14px; }
.ch-bienvenida h2 { font: 800 clamp(26px, 4vw, 34px)/1.1 var(--titulo); }
.ch-bienvenida p { color: var(--tinta-2); }
.ch-bienvenida ul { margin: 0; padding-left: 20px; color: var(--tinta-2); display: flex; flex-direction: column; gap: 4px; }
.ch-colores { display: flex; flex-wrap: wrap; gap: 7px; }
.ch-color { width: 30px; height: 30px; border-radius: 9px; border: 0; cursor: pointer; background: var(--c); box-shadow: 0 0 0 2px transparent; }
.ch-color[aria-checked="true"] { box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--tinta); }
.ch-enlace-caja { display: flex; gap: 8px; }
.ch-enlace-caja input { flex: 1; min-width: 0; font: 13.5px ui-monospace, monospace !important; }
.ch-lista-dlg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.ch-lista-dlg li > button, .ch-fila-dlg { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; color: var(--tinta); font: 15px/1.3 var(--cuerpo); }
.ch-lista-dlg li > button:hover, .ch-lista-dlg li > button[aria-selected="true"] { background: var(--ap-suave); }
.ch-lista-dlg small { color: var(--tinta-3); }
.ch-lista-dlg .ch-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-lista-dlg .ch-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-unir { margin: 6vh auto; width: min(460px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--linea); border-radius: 16px; background: var(--blanco); }
.ch-unir h2 { font: 800 26px/1.15 var(--titulo); }
.ch-unir p { color: var(--tinta-2); }
.ch-candado { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--tinta-3); }
.ch-candado svg { width: 16px; height: 16px; margin-top: 2px; }

/* Móvil: un panel cada vez */
@media (max-width: 899px) {
  #ap[data-app="chat"] .ap-cabeza { gap: 8px; }
  #ap[data-app="chat"] .ap-titulo h1 { font-size: 17px; }
  #ap[data-app="chat"] .ap-insignia { display: none; }
  .ch-buscar input { width: 100%; }
  #ap[data-app="chat"] .ap-barra-acciones { flex: 1 1 160px; flex-wrap: nowrap; }
  #ap[data-app="chat"] .ch-buscar { flex: 1; }
  .ch, .ch.ch-con-hilo, .ch-sin-rail, .ch-sin-rail.ch-con-hilo { grid-template-columns: minmax(0, 1fr); }
  .ch-rail { display: none; }
  .ch > .ch-lateral, .ch > .ch-principal, .ch > .ch-hilo { display: none; }
  .ch[data-panel="lateral"] > .ch-lateral, .ch[data-panel="principal"] > .ch-principal, .ch[data-panel="hilo"] > .ch-hilo { display: flex; }
  .ch-volver { display: inline-flex !important; }
  .ch-item { min-height: 44px; font-size: 16px; }
  .ch-msg, .ch-sis { padding-left: 10px; padding-right: 12px; grid-template-columns: 36px minmax(0, 1fr); }
  .ch-acciones { right: 8px; }
  .ch-comp-zona { padding: 0 8px 8px; }
  .ch-cab-tema, .ch-solo-ancho { display: none !important; }
  .ch-ayuda-comp { display: none; }
  .ch-hilo { border-left: 0; }
}
@media print { .ch-rail, .ch-lateral, .ch-comp-zona, .ch-hilo, .ch-acciones { display: none !important; } .ch { display: block; } .ch-lista { overflow: visible; } }
@media (prefers-reduced-motion: reduce) { .ch-msg.ch-resaltado { animation: none; background: var(--ap-suave); } }