/* =====================================================================
   BLOQUE 12 · Chat: nuevo chat (+), grupos, borrar chat (deslizar,
   pulsación larga, menú ⋮), deshacer, adjuntos y compartir.
   Mismo verde WhatsApp (--wa*) de bloque4.css; Noche y Día.
   ===================================================================== */
.chat-panel [hidden]{display:none !important;}

/* Grupo: iniciales sobre verde (distinto del azul de las personas) */
.avatar.chat-av-grupo{background:linear-gradient(145deg, var(--wa-own-bg), color-mix(in srgb, var(--wa-own-bg) 60%, #000)); color:var(--wa-own-fg);}
:root[data-theme="light"] .avatar.chat-av-grupo{background:linear-gradient(145deg, #0f7a28, #0b5c1e); color:#fff;}
.avatar.chat-av-accion{background:var(--wa); color:var(--wa-fg);}
.avatar.chat-av-accion .ico-set{width:20px; height:20px;}

/* Cabecera: ⓘ y ⋮ redondos */
.chat-cab .chat-btn-info, .chat-cab .chat-btn-menu{width:40px; height:40px; border-radius:50%;}
.chat-cab .chat-btn-info .ico-set, .chat-cab .chat-btn-menu .ico-set{width:20px; height:20px;}
.chat-cab .chat-btn-info{margin-left:auto;}
.chat-cab .chat-btn-info + .panel-close{margin-left:0;}
.chat-cab .chat-btn-menu + .panel-close{margin-left:0;}
.chat-cab-quien.pulsable{cursor:pointer; border-radius:14px; margin:-4px; padding:4px;}
.chat-cab-quien.pulsable:hover{background:var(--surface-2);}
.chat-cab-quien.pulsable:focus-visible{outline:2px solid var(--wa-ink); outline-offset:2px;}

/* Ayuda ⓘ */
.chat-info-pop{
  position:absolute; z-index:8; top:72px; left:12px; right:12px; padding:14px 16px; border-radius:18px;
  background:var(--surface); border:1.5px solid var(--line-strong); box-shadow:var(--shadow); font-size:.82rem; line-height:1.45;
}
.chat-info-tit{display:block; font-size:.9rem; margin-bottom:6px;}
.chat-info-lista{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; color:var(--ink-soft);}
.chat-info-lista li::marker{color:var(--wa-ink);}

/* Botón flotante «Nuevo chat» */
.chat-convs{padding-bottom:92px;}
.chat-fab{
  appearance:none; position:absolute; z-index:5; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  width:56px; height:56px; padding:0; border:0; border-radius:50%; display:inline-grid; place-items:center; cursor:pointer;
  background:var(--wa); color:var(--wa-fg); box-shadow:0 6px 18px -6px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.2);
}
.chat-fab .ico-set{width:24px; height:24px; stroke-width:2;}
.chat-fab:hover{filter:brightness(1.08);}
.chat-fab:focus-visible{outline:3px solid var(--wa-ink); outline-offset:3px;}

/* Filas: deslizar para «Borrar» */
.chat-fila{position:relative; border-radius:18px; overflow:hidden; flex:none;}
.chat-fila > .chat-item{position:relative; z-index:1; background:var(--surface); touch-action:pan-y;}
.chat-fila > .chat-item:hover{background:var(--surface-2);}
.chat-fila > .chat-item.activa{background:var(--surface-2);}
.chat-fila-borrar{
  appearance:none; position:absolute; z-index:0; top:0; right:0; bottom:0; width:88px; border:0; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--accent); color:#fff; font:inherit; font-size:.72rem; font-weight:800; visibility:hidden;
}
.chat-fila.abierta .chat-fila-borrar{visibility:visible;}
.chat-fila-borrar .ico-set{width:20px; height:20px;}

/* Menú de la conversación */
.chat-menu{
  position:absolute; z-index:12; display:flex; flex-direction:column; padding:6px; border-radius:16px;
  background:var(--surface); border:1.5px solid var(--line-strong); box-shadow:var(--shadow);
}
.chat-menu-op{
  appearance:none; display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:8px 12px; border:0; border-radius:12px;
  background:transparent; color:var(--ink); font:inherit; font-size:.88rem; font-weight:600; text-align:left; cursor:pointer;
}
.chat-menu-op .ico-set{width:20px; height:20px; flex:none;}
.chat-menu-op:hover, .chat-menu-op:focus-visible{background:var(--surface-2); outline:none;}
.chat-menu-op.peligro{color:var(--warn-ink);}

/* Confirmación de una línea y «Deshacer» */
.chat-confirma, .chat-deshacer{
  position:absolute; z-index:14; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:8px; padding:10px 10px 10px 16px; border-radius:20px; box-shadow:var(--shadow);
}
.chat-confirma{background:var(--surface); border:1.5px solid var(--line-strong); flex-wrap:wrap; row-gap:10px; padding:12px 12px 12px 16px;}
.chat-confirma-txt{flex:1 1 100%; min-width:0; font-size:.88rem; font-weight:600; line-height:1.35;}
.chat-confirma-no{border-radius:999px; padding:8px 16px; min-height:40px; margin-left:auto;}
.chat-confirma-si{min-height:40px; padding:8px 18px; border-radius:999px; background:var(--accent); border-color:var(--accent); color:#fff;}
.chat-confirma-si:hover, .chat-confirma-si:focus-visible{filter:brightness(1.08); background:var(--accent); color:#fff;}
.chat-deshacer{background:#1f2c34; color:#e9edef; overflow:hidden;}
:root[data-theme="light"] .chat-deshacer{background:#111b21;}
.chat-deshacer-txt{flex:1; min-width:0; font-size:.86rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-deshacer-btn{
  appearance:none; border:0; border-radius:999px; padding:9px 16px; min-height:40px; cursor:pointer;
  background:transparent; color:#25d366; font:inherit; font-size:.86rem; font-weight:800;
}
.chat-deshacer-btn:hover, .chat-deshacer-btn:focus-visible{background:rgba(37,211,102,.14); outline:none;}
.chat-deshacer-barra{position:absolute; left:0; bottom:0; height:3px; width:100%; background:#25d366; transform-origin:left; transform:scaleX(0);}
.chat-deshacer.corriendo .chat-deshacer-barra{animation:chatCuenta 5s linear forwards;}
@keyframes chatCuenta{from{transform:scaleX(1);} to{transform:scaleX(0);}}

/* Hoja: nuevo chat, nuevo grupo, info, añadir, compartir */
.chat-panel > section.chat-hoja{z-index:6;}
.chat-hoja-txt{flex:1;}
.chat-hoja-atras .ico-set{width:20px; height:20px;}
.chat-hoja-buscar{flex:none; padding:10px 12px 4px;}
.chat-hoja-buscar input{
  width:100%; box-sizing:border-box; min-height:44px; padding:10px 16px; border-radius:22px; border:1.5px solid var(--line-strong);
  background:var(--bg); color:var(--ink); font:inherit; font-size:.9rem;
}
.chat-hoja-buscar input:focus{outline:none; border-color:var(--wa-ink); box-shadow:0 0 0 3px var(--wa-line);}
.chat-hoja-cuerpo{flex:1; min-height:0; overflow-y:auto; padding:6px 8px 16px; display:flex; flex-direction:column; gap:2px;}
.chat-hoja-vacio{margin:8px 12px; font-size:.84rem; color:var(--ink-soft);}
.chat-hoja-ayuda{flex-basis:100%; margin:2px 4px 0; font-size:.74rem; color:var(--ink-soft);}
.chat-contacto{
  appearance:none; display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:8px 12px; border:0; border-radius:16px;
  background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; flex:none;
}
.chat-contacto:hover{background:var(--surface-2);}
.chat-contacto:focus-visible{outline:2px solid var(--wa-ink); outline-offset:-2px;}
.chat-contacto.solo-ver{cursor:default; opacity:1;}
.chat-contacto.solo-ver:hover{background:transparent;}
.chat-contacto-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.chat-contacto-nom{font-weight:700; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-contacto-sub{font-size:.76rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-nuevo-grupo .chat-contacto-nom{color:var(--wa-ink);}
.chat-check{
  flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--line-strong); display:inline-grid; place-items:center; color:var(--wa-fg);
}
.chat-check.on{background:var(--wa); border-color:var(--wa);}
.chat-check .ico-set{width:16px; height:16px; stroke-width:2.6;}
.chat-elegidos{display:flex; flex-wrap:wrap; gap:6px; padding:6px 4px 10px; border-bottom:1px solid var(--line); margin-bottom:6px;}
.chat-elegido{
  appearance:none; display:inline-flex; align-items:center; gap:6px; padding:3px 8px 3px 3px; min-height:36px; border-radius:999px;
  border:1px solid var(--wa-line); background:color-mix(in srgb, var(--wa) 12%, transparent); color:var(--ink); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer;
}
.chat-elegido .ico-set{width:14px; height:14px; opacity:.7;}
.chat-hoja-pie{
  flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line); background:var(--surface);
}
.chat-hoja-pie input{
  flex:1; min-width:0; min-height:44px; box-sizing:border-box; padding:10px 16px; border-radius:22px; border:1.5px solid var(--line-strong);
  background:var(--bg); color:var(--ink); font:inherit; font-size:.92rem;
}
.chat-hoja-pie input:focus{outline:none; border-color:var(--wa-ink); box-shadow:0 0 0 3px var(--wa-line);}
.chat-btn-crear{width:48px; height:48px; border-radius:50%; background:var(--wa); color:var(--wa-fg); border:0;}
.chat-btn-crear:hover:not(:disabled), .chat-btn-crear:focus-visible{background:var(--wa); color:var(--wa-fg); filter:brightness(1.1);}
.chat-btn-crear:disabled{opacity:.4; cursor:not-allowed;}
.chat-btn-crear .ico-set{width:22px; height:22px; stroke-width:2.4;}
.chat-btn-anadir{flex:1; min-height:46px; border-radius:999px; background:var(--wa); border-color:var(--wa); color:var(--wa-fg);}
.chat-btn-anadir:hover:not(:disabled){background:var(--wa); color:var(--wa-fg); filter:brightness(1.08);}
.chat-btn-anadir:disabled{opacity:.45;}
.chat-grupo-cab{display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px 6px; text-align:center;}
.chat-grupo-tit{font-size:1.05rem;}
.chat-grupo-sub{font-size:.76rem; color:var(--ink-soft);}
.chat-grupo-nombre{display:flex; gap:8px; width:100%; max-width:340px;}
.chat-grupo-nombre input{
  flex:1; min-width:0; min-height:44px; box-sizing:border-box; padding:8px 14px; border-radius:14px; border:1.5px solid var(--line-strong);
  background:var(--bg); color:var(--ink); font:inherit; font-size:.95rem; font-weight:700; text-align:center;
}
.chat-grupo-nombre input:focus{outline:none; border-color:var(--wa-ink); box-shadow:0 0 0 3px var(--wa-line);}
.chat-btn-guardar{min-height:44px; border-radius:999px; padding:6px 16px; background:var(--wa); border-color:var(--wa); color:var(--wa-fg);}
.chat-miembro{display:flex; align-items:center; gap:4px; padding-right:8px;}
.chat-miembro .chat-contacto{flex:1;}
.chat-quitar{width:36px; height:36px; border-radius:50%;}
.chat-quitar .ico-set{width:16px; height:16px;}
.chat-grupo-acc{display:flex; flex-direction:column; gap:2px; margin-top:12px; padding-top:8px; border-top:1px solid var(--line);}
.chat-grupo-accion{
  appearance:none; display:flex; align-items:center; gap:14px; min-height:48px; padding:8px 16px; border:0; border-radius:14px;
  background:transparent; color:var(--warn-ink); font:inherit; font-size:.9rem; font-weight:700; text-align:left; cursor:pointer;
}
.chat-grupo-accion:hover, .chat-grupo-accion:focus-visible{background:var(--danger-tint); outline:none;}
.chat-grupo-accion .ico-set{width:20px; height:20px;}
.chat-compartido{
  display:flex; align-items:center; gap:10px; margin:6px 4px 10px; padding:10px 14px; border-radius:14px;
  background:color-mix(in srgb, var(--wa) 12%, transparent); border:1px solid var(--wa-line); font-size:.82rem; font-weight:600;
}
.chat-compartido .ico-set{width:20px; height:20px; flex:none; color:var(--wa-ink);}
.chat-compartido-txt{min-width:0; overflow-wrap:anywhere;}
/* Auditoría B4: nombre, tipo y tamaño de cada archivo compartido */
.chat-compartido-txt{display:flex; flex-direction:column; gap:4px;}
.chat-compartido-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;}
.chat-compartido-arch{display:flex; flex-direction:column; min-width:0;}
.chat-compartido-nom{font-weight:700; overflow-wrap:anywhere;}
.chat-compartido-tipo{font-size:12px; opacity:.8;}

/* Ancho: la hoja ocupa la columna de la lista */
@media (min-width:1000px){
  .chat-panel > section.chat-lista{grid-column:1; grid-row:1;}
  .chat-panel > section.chat-conv{grid-column:2; grid-row:1;}
  .chat-panel > section.chat-hoja{grid-column:1; grid-row:1; border-right:1px solid var(--line);}
  .chat-hoja .chat-cerrar{display:none;}
}
/* Estrecho: la hoja tapa todo */
@media (max-width:999px){
  .chat-panel > section.chat-hoja{grid-area:1 / 1;}
}

/* Composer: clip redondo, menú de adjuntar, previsualización */
.chat-form .chat-btn-adjuntar{border-radius:50%;}
.chat-form .chat-btn-ficha{border-radius:50%;}
.chat-adj-pop{
  position:absolute; left:12px; bottom:calc(100% - 2px); z-index:7; display:flex; flex-direction:column; padding:6px; min-width:200px;
  background:var(--surface); border:1.5px solid var(--line-strong); border-radius:18px; box-shadow:var(--shadow);
}
.chat-adj-op{
  appearance:none; display:flex; align-items:center; gap:12px; min-height:46px; padding:6px 12px 6px 6px; border:0; border-radius:12px;
  background:transparent; color:var(--ink); font:inherit; font-size:.9rem; font-weight:600; text-align:left; cursor:pointer;
}
.chat-adj-op:hover, .chat-adj-op:focus-visible{background:var(--surface-2); outline:none;}
.chat-adj-op-ico{width:36px; height:36px; border-radius:50%; display:inline-grid; place-items:center; background:var(--wa); color:var(--wa-fg); flex:none;}
#btnAdjDocIco{background:#7f66ff; color:#fff;}
#btnAdjCamaraIco{background:#ff2e74; color:#fff;}
.chat-adj-op-ico .ico-set{width:18px; height:18px;}
.chat-adj-prev{display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto;}
.chat-adj-item{
  display:flex; align-items:center; gap:10px; padding:6px 6px 6px 6px; border-radius:14px;
  background:color-mix(in srgb, var(--wa) 10%, var(--surface)); border:1px solid var(--wa-line);
}
.chat-adj-mini{width:44px; height:44px; flex:none; border-radius:10px; object-fit:cover; display:block;}
.chat-adj-mini.doc{display:inline-grid; place-items:center; background:var(--surface-2); color:var(--ink);}
.chat-adj-mini.doc .ico-set{width:22px; height:22px;}
.chat-adj-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.chat-adj-nom{font-size:.82rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-adj-tam{font-size:.72rem; color:var(--ink-soft);}
.chat-adj-quitar{border:0; background:transparent; color:var(--ink); width:36px; height:36px; border-radius:50%; flex:none;}
.chat-adj-quitar .ico-set{width:16px; height:16px;}
.chat-soltar{
  position:absolute; inset:8px; z-index:9; display:grid; place-items:center; border-radius:20px; pointer-events:none;
  border:2.5px dashed var(--wa-ink); background:color-mix(in srgb, var(--wa) 16%, var(--surface)); color:var(--ink); font-weight:800;
}

/* Burbujas con adjunto */
.msg-foto{display:block; margin:-3px -7px 4px; border-radius:14px; overflow:hidden; background:color-mix(in srgb, currentColor 10%, transparent);}
.msg-foto img{display:block; width:min(260px, 62vw); max-height:320px; object-fit:cover;}
.msg-foto.cargando img{min-height:160px;}
.msg-foto.no-disp{padding:18px 14px; text-align:center;}
.msg-foto.no-disp img{display:none;}
.msg-adj-nodisp{font-size:.78rem; opacity:.8;}
.msg-foto:focus-visible, .msg-archivo:focus-visible{outline:2px solid var(--wa-ink); outline-offset:2px;}
.msg-archivo{
  display:flex; align-items:center; gap:10px; min-width:min(240px, 60vw); margin:0 0 4px; padding:8px 10px; border-radius:12px; text-decoration:none; color:inherit;
  background:color-mix(in srgb, currentColor 8%, transparent); border:1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.msg-archivo:hover{background:color-mix(in srgb, currentColor 14%, transparent);}
.msg-archivo.no-disp{opacity:.6; cursor:default;}
.msg-archivo-ico{position:relative; width:38px; height:44px; flex:none; display:inline-grid; place-items:center;}
.msg-archivo-ico .ico-set{width:34px; height:34px;}
.msg-archivo-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.msg-archivo-nom{font-size:.84rem; font-weight:700; overflow-wrap:anywhere;}
.msg-archivo-tam{font-size:.7rem; opacity:.8;}
.msg-archivo-dl .ico-set{width:20px; height:20px;}

@media (max-width:700px){
  .chat-hoja-buscar input, .chat-hoja-pie input, .chat-grupo-nombre input{font-size:16px;}
  .chat-confirma{left:8px; right:8px;}
}
@media (prefers-reduced-motion:reduce){
  .chat-deshacer.corriendo .chat-deshacer-barra{animation:none; transform:scaleX(1);}
}