:root {
  --azul: #1192C8;
  --azul-osc: #0b6f9a;
  --naranja: #F9830C;
  --fondo: #eef3f6;
  --panel: #ffffff;
  --texto: #1d2a33;
  --tenue: #6b7c88;
  --linea: #dbe4ea;
  --sale: #d9f0fb;
  --entra: #ffffff;
  --error: #c0392b;
  --leido: #1192C8;
  --sa-arriba: env(safe-area-inset-top, 0px);
  --sa-abajo: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e171d; --panel: #15222b; --texto: #e3ecf1; --tenue: #8fa3b0;
    --linea: #22323d; --sale: #0f4a66; --entra: #1c2c37; --leido: #5cc3ef;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* Lo que queda detrás de la barra de estado del iPhone es azul, como el encabezado. */
html { background: var(--azul); }
body {
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo); color: var(--texto);
}
button { font: inherit; cursor: pointer; }

/* Login */
.pantalla-login { display: grid; place-items: center; padding: calc(var(--sa-arriba) + 16px) 16px calc(var(--sa-abajo) + 16px); }
.login {
  width: 100%; max-width: 340px; background: var(--panel); padding: 28px 22px;
  border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.08); display: grid; gap: 14px; text-align: center;
}
.login img { margin: 0 auto; border-radius: 50%; }
.login h1 { margin: 0; font-size: 20px; color: var(--azul); }
.login label { display: grid; gap: 4px; text-align: left; font-size: 13px; color: var(--tenue); }
.login input { padding: 11px 12px; border: 1px solid var(--linea); border-radius: 10px; font: inherit; background: var(--fondo); color: var(--texto); }
.login button, .redactar button[type=submit], .nuevo button {
  background: var(--azul); color: #fff; border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 600;
}
.login button:hover, .redactar button[type=submit]:hover, .nuevo button:hover { background: var(--azul-osc); }
.error { color: var(--error); margin: 0; font-size: 14px; }

/* App */
.app { height: 100dvh; display: grid; grid-template-columns: 340px 1fr; }
.barra {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  padding-top: calc(var(--sa-arriba) + 10px);
  background: var(--azul); color: #fff; min-height: calc(56px + var(--sa-arriba));
}
.barra img { border-radius: 50%; background: #fff; }
.barra form { margin-left: auto; }
.salir { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; padding: 5px 10px; font-size: 13px; }
.lista { background: var(--panel); border-right: 1px solid var(--linea); display: flex; flex-direction: column; min-height: 0; }
.nuevo { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--linea); }
.nuevo input { flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--linea); border-radius: 10px; font: inherit; background: var(--fondo); color: var(--texto); }
.nuevo button { padding: 9px 12px; }
.chats { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.chats li.item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 12px 14px; border-bottom: 1px solid var(--linea); cursor: pointer; }
.chats li.item:hover { background: var(--fondo); }
.chats li.item.activo { background: var(--sale); }
.chats .nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chats .hora { font-size: 12px; color: var(--tenue); }
.chats .ultimo { grid-column: 1 / -1; font-size: 13px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chats .ventana { font-size: 11px; color: var(--naranja); font-weight: 600; }
.vacio { padding: 20px; color: var(--tenue); text-align: center; }

[hidden] { display: none !important; }
.chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat .titulo { display: grid; line-height: 1.2; }
.chat .titulo small { opacity: .85; font-size: 12px; }
.volver { display: none; background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; padding: 0 6px 0 0; }
.aviso { margin: 0; padding: 8px 14px; background: #fff4e6; color: #8a4b00; font-size: 13px; border-bottom: 1px solid #f6d7b0; }
@media (prefers-color-scheme: dark) { .aviso { background: #3a2a14; color: #ffcf96; border-color: #5a3f1c; } }
.mensajes { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.burbuja {
  max-width: min(78%, 560px); padding: 7px 10px 5px; border-radius: 10px; background: var(--entra);
  box-shadow: 0 1px 1px rgba(0,0,0,.06); align-self: flex-start; word-wrap: break-word; white-space: pre-wrap;
}
.burbuja.sale { background: var(--sale); align-self: flex-end; }
.burbuja .pie { display: flex; justify-content: flex-end; gap: 6px; font-size: 11px; color: var(--tenue); margin-top: 3px; white-space: nowrap; }
.burbuja .pie .read { color: var(--leido); font-weight: 700; }
.burbuja .pie .failed { color: var(--error); font-weight: 700; }
.burbuja a.archivo { display: block; padding: 8px 10px; margin-bottom: 4px; border-radius: 8px; background: rgba(17,146,200,.1); color: var(--azul); text-decoration: none; font-weight: 600; }
.burbuja img { max-width: 100%; border-radius: 8px; display: block; margin-bottom: 4px; }
.dia { align-self: center; font-size: 12px; color: var(--tenue); background: var(--panel); padding: 3px 10px; border-radius: 8px; margin: 6px 0; }

.redactar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; padding-bottom: max(8px, calc(var(--sa-abajo) + 4px)); background: var(--panel); border-top: 1px solid var(--linea); }
.adjuntar { padding: 10px 10px; border-radius: 10px; color: var(--azul); font-weight: 600; cursor: pointer; font-size: 14px; }
.adjuntar:hover { background: var(--fondo); }
.caja { flex: 1; display: grid; gap: 4px; min-width: 0; }
.caja textarea { resize: none; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 18px; font: inherit; max-height: 140px; background: var(--fondo); color: var(--texto); }
.adjunto { font-size: 12px; color: var(--azul); padding: 0 6px; display: flex; gap: 8px; align-items: center; }
.adjunto button { background: none; border: 0; color: var(--error); font-size: 12px; padding: 0; }
.redactar button[type=submit]:disabled { opacity: .6; cursor: wait; }
.sin-chat { display: grid; place-items: center; color: var(--tenue); }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sin-chat { display: none; }
  .app.abierto .lista { display: none; }
  .volver { display: block; }
}
@media (min-width: 761px) { .app.abierto .sin-chat { display: none; } }