:root {
  --fondo: #0b141a;
  --panel: #111b21;
  --barra: #202c33;
  --linea: #2a3942;
  --texto: #e9edef;
  --suave: #8696a0;
  --verde: #00a884;
  --mio: #005c4b;
  --suyo: #202c33;
  --fondo-chat: #0b141a;
  --peligro: #f15c6d;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#app { display: flex; height: 100dvh; max-width: 1400px; margin: 0 auto; }

.barra { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 12px; background: var(--barra); flex: none; }
.barra h1 { font-size: 20px; margin: 0; flex: 1; }
.barra h2 { font-size: 17px; margin: 0; flex: 1; }
.icono { background: none; border: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.icono:hover { background: #ffffff14; }
.icono svg, .enviar svg { width: 24px; height: 24px; fill: var(--suave); }

.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--linea); flex: none; }

/* ---- lista ---- */
#lista { width: 380px; flex: none; background: var(--panel); border-right: 1px solid var(--linea); display: flex; flex-direction: column; }
#chats { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#chats li { display: flex; gap: 12px; align-items: center; padding: 10px 14px; cursor: pointer; }
#chats li:hover, #chats li.activo { background: var(--barra); }
#chats .avatar { width: 50px; height: 50px; }
#chats .info { flex: 1; min-width: 0; border-bottom: 1px solid var(--linea); padding-bottom: 10px; }
#chats .fila { display: flex; justify-content: space-between; gap: 8px; }
#chats .nombre { font-size: 16px; }
#chats .hora { font-size: 12px; color: var(--suave); }
#chats .ultimo { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.vacio { color: var(--suave); text-align: center; padding: 40px 20px; }
.aviso { margin: 10px; padding: 10px 12px; border-radius: 8px; background: #3b2f12; color: #ffd27a; font-size: 13px; }

/* ---- chat ---- */
#chat { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0;
  background: var(--fondo-chat) radial-gradient(#ffffff08 1px, transparent 1px) 0 0 / 22px 22px; }
.titulo { flex: 1; min-width: 0; cursor: pointer; }
#chatNombre { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado { font-size: 13px; color: var(--suave); }
#mensajes { flex: 1; overflow-y: auto; padding: 16px 6%; display: flex; flex-direction: column; gap: 3px; }
.dia { align-self: center; background: var(--barra); color: var(--suave); font-size: 12px; padding: 5px 12px; border-radius: 8px; margin: 10px 0; }
.msg { max-width: min(75%, 560px); padding: 6px 9px 8px; border-radius: 8px; position: relative; white-space: pre-wrap; word-wrap: break-word; }
.msg.yo { align-self: flex-end; background: var(--mio); }
.msg.el { align-self: flex-start; background: var(--suyo); }
.msg + .msg.yo:not(.primero), .msg + .msg.el:not(.primero) { margin-top: 0; }
.msg.primero { margin-top: 8px; }
.msg .meta { float: right; margin: 6px 0 -4px 10px; font-size: 11px; color: #ffffff99; display: flex; gap: 3px; align-items: center; }
.msg .meta svg { width: 16px; height: 11px; fill: #53bdeb; }
.msg.error { align-self: center; background: #3b1f24; color: #ffb3bd; font-size: 13px; }
.msg.foto { padding: 4px 4px 8px; }
.msg.foto img { display: block; width: 280px; max-width: 100%; border-radius: 6px; cursor: zoom-in; }
.msg.foto .haciendo, .msg.foto .fallo { display: inline-block; padding: 4px 6px; color: var(--suave); }
.msg.foto .haciendo { animation: late 1.4s infinite; }
.msg.foto .fallo small { font-size: 11px; }
.msg.foto .fallo button { margin-top: 6px; padding: 4px 12px; }
@keyframes late { 50% { opacity: .45; } }
.fotos-bloque .nota { display: block; color: var(--suave); margin-top: 8px; font-size: 12px; }
#btnCara { margin-top: 8px; }
.escribiendo { align-self: flex-start; background: var(--suyo); border-radius: 8px; padding: 10px 14px; display: flex; gap: 4px; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--suave); animation: bote 1.2s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes bote { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.escribir { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--barra); }
.escribir textarea { flex: 1; resize: none; border: 0; outline: 0; border-radius: 10px; padding: 10px 14px; max-height: 140px;
  background: #2a3942; color: var(--texto); font: inherit; }
.enviar { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--verde); display: grid; place-items: center; flex: none; }
.enviar svg { fill: #fff; }
.enviar:disabled { opacity: .5; }

.sin-chat { position: absolute; inset: 0; background: var(--barra); display: grid; place-items: center; text-align: center; color: var(--suave); }
.sin-chat h2 { color: var(--texto); font-weight: 300; font-size: 30px; }

/* ---- ficha ---- */
dialog { border: 0; padding: 0; background: var(--panel); color: var(--texto); }
dialog::backdrop { background: #000a; }
#ficha { width: min(560px, 100vw); max-height: 100dvh; border-radius: 12px; }
#formFicha { display: flex; flex-direction: column; max-height: 100dvh; }
.ficha-cuerpo { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ficha-cuerpo label { display: flex; flex-direction: column; gap: 5px; color: var(--verde); font-size: 13px; }
.ficha-cuerpo input, .ficha-cuerpo textarea { background: #2a3942; border: 0; border-radius: 8px; color: var(--texto); padding: 10px; font: inherit; font-size: 15px; resize: vertical; }
.ficha-cuerpo input:focus, .ficha-cuerpo textarea:focus { outline: 2px solid var(--verde); }
.avatar-grande { align-items: center; cursor: pointer; }
.avatar-grande img { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; background: var(--linea); }
.fotos-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--verde); }
.fotos-cabecera small { color: var(--suave); }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; margin-top: 8px; }
.fotos div { position: relative; aspect-ratio: 1; }
.fotos img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; cursor: zoom-in; }
.fotos button { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #000b; line-height: 1; }
.fotos .nueva { outline: 2px dashed var(--verde); outline-offset: -2px; border-radius: 6px; }
.ficha-pie { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--linea); flex-wrap: wrap; }
.principal { margin-left: auto; background: var(--verde); color: #fff; border: 0; border-radius: 20px; padding: 9px 22px; font-weight: 600; }
.boton-sec { background: none; border: 1px solid var(--linea); border-radius: 20px; padding: 7px 14px; color: var(--verde) !important; cursor: pointer; font-size: 14px; }
.peligro { background: none; border: 1px solid var(--peligro); color: var(--peligro); border-radius: 20px; padding: 7px 14px; font-size: 14px; }
#visor { background: transparent; max-width: 95vw; max-height: 95vh; }
#visor img { max-width: 95vw; max-height: 95vh; display: block; border-radius: 8px; }

/* ---- móvil ---- */
.solo-movil { display: none; }
@media (max-width: 760px) {
  #lista { width: 100%; border: 0; }
  #app.en-chat #lista { display: none; }
  #app:not(.en-chat) #chat { display: none; }
  .solo-movil { display: grid; }
  #mensajes { padding: 12px 10px; }
  .msg { max-width: 85%; }
  #ficha { width: 100vw; height: 100dvh; max-width: none; border-radius: 0; }
  #formFicha { height: 100%; }
  .ficha-cuerpo { flex: 1; }
}