:root {
  --ink: #23264f;
  --teal: #1a7470;
  --teal-bright: #2fa7a0;
  --fondo: #f3ecdf;
  --superficie: #ffffff;
  --superficie-2: #fbf8f2;
  --texto: #2b2d42;
  --suave: #5d6177;
  --linea: #e6dfd1;
  --cliente: #ffffff;
  --bot: #dff1ef;
  --finca: #fdecd3;
  --ok: #1f8a4c;
  --mal: #c0392b;
  --alerta: #fdecd3;
  --boton: #23264f;
  --sombra: 0 1px 2px rgba(35, 38, 79, 0.12);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #12131f;
    --superficie: #1c1e30;
    --superficie-2: #23253a;
    --texto: #ebeaf2;
    --suave: #a3a6bd;
    --linea: #2f3250;
    --cliente: #262941;
    --bot: #173b3a;
    --finca: #4a3516;
    --ok: #4cc47f;
    --mal: #ff7a6b;
    --alerta: #4a3516;
    --boton: #1a7470;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}
a { color: var(--teal-bright); }
button, input { font: inherit; }

/* ——— Entrar ——— */
body.entrar { display: grid; place-items: center; padding: 16px; }
.tarjeta-entrar {
  width: min(360px, 100%);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 28px 24px;
  display: grid;
  gap: 10px;
  text-align: center;
}
.tarjeta-entrar img { justify-self: center; }
.tarjeta-entrar h1 { margin: 4px 0 0; font-size: 22px; }
.tarjeta-entrar p { margin: 0 0 8px; color: var(--suave); }
.tarjeta-entrar label { text-align: left; font-weight: 600; }
.tarjeta-entrar input {
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--superficie-2);
  color: var(--texto);
}
.tarjeta-entrar button {
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--boton);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.tarjeta-entrar .error { color: var(--mal); margin: 0; }

/* ——— Panel ——— */
.panel { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; height: 100dvh; }
.lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--superficie);
  border-right: 1px solid var(--linea);
}
.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-height: 60px;
  background: var(--ink);
  color: #fff;
  padding-top: max(12px, env(safe-area-inset-top));
}
.barra a { color: #fff; }
.titulo { display: grid; flex: 1; min-width: 0; }
.titulo strong, .titulo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titulo span { font-size: 13px; opacity: 0.85; }
.estado-bot.ok { color: #8ee6b4; }
.estado-bot.mal { color: #ffb4a8; }
.salir, .abrir-wa { font-size: 13px; text-decoration: none; opacity: 0.9; white-space: nowrap; }
.abrir-wa { border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; padding: 5px 10px; }

.buscar { padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.buscar input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--texto);
}

.chats { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.chat {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linea);
  color: inherit;
  text-decoration: none;
}
.chat:hover { background: var(--superficie-2); }
.chat[aria-current] { background: var(--bot); }
.fila { display: flex; gap: 8px; align-items: baseline; }
.nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuando { font-size: 12px; color: var(--suave); white-space: nowrap; }
.vista { font-size: 13px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien { font-weight: 600; }
.sin-chats { padding: 24px 16px; color: var(--suave); }

.disco {
  display: grid;
  gap: 2px;
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  font-size: 12px;
  color: var(--suave);
  border-top: 1px solid var(--linea);
}
.disco.alerta { background: var(--alerta); color: var(--texto); }

.conversacion { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.volver { display: none; background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; padding: 0 6px 4px 0; cursor: pointer; }
.mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 16px clamp(16px, 4vw, 48px);
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vacio { margin: auto; color: var(--suave); text-align: center; }
.separador {
  align-self: center;
  margin: 10px 0 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--superficie);
  color: var(--suave);
  font-size: 12px;
  box-shadow: var(--sombra);
}
.separador::first-letter { text-transform: uppercase; }
.cargar-mas {
  align-self: center;
  padding: 6px 14px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
}

.burbuja {
  max-width: min(560px, 85%);
  padding: 7px 10px 5px;
  border-radius: 12px;
  background: var(--cliente);
  box-shadow: var(--sombra);
  display: grid;
  gap: 4px;
  overflow-wrap: anywhere;
}
.burbuja.de-cliente { align-self: flex-start; border-top-left-radius: 4px; }
.burbuja.de-bot, .burbuja.de-finca { align-self: flex-end; border-top-right-radius: 4px; }
.burbuja.de-bot { background: var(--bot); }
.burbuja.de-finca { background: var(--finca); }
.autor { font-size: 12px; font-weight: 600; color: var(--suave); }
.texto { white-space: pre-wrap; }
.hora { justify-self: end; font-size: 11px; color: var(--suave); }
.medio { display: block; max-width: 100%; border-radius: 8px; }
.medio img { display: block; max-width: 100%; max-height: 360px; border-radius: 8px; }
.medio img.sticker { max-width: 140px; }
audio.medio { width: min(300px, 100%); }
video.medio { max-height: 360px; background: #000; }
.descargar { font-size: 12px; }
.documento { font-weight: 600; }
.sin-archivo { font-size: 13px; color: var(--suave); font-style: italic; }

/* En el celular se ve una cosa a la vez: la lista o el chat. */
@media (max-width: 760px) {
  .panel { grid-template-columns: 1fr; }
  .conversacion { display: none; }
  .panel.viendo-chat .lista { display: none; }
  .panel.viendo-chat .conversacion { display: flex; }
  .volver { display: block; }
  .lista { border-right: 0; }
}