/* Asistente de Bolsillo: estilo tipo WhatsApp con colores de DevScrum.
   Pensado para adulto mayor: letra grande, alto contraste, botones de al menos 48 px. */

:root {
  color-scheme: light;
  --azul: #211E4D;
  --naranja: #FD4D01;
  --naranja-oscuro: #C93D00;      /* para texto naranja sobre blanco con buen contraste */
  --fondo-chat: #ECEAF3;
  --burbuja-asistente: #FFFFFF;
  --burbuja-usuario: #FFE4D6;
  --texto: #14122B;
  --texto-suave: #4F4C6B;
  --borde: #D6D3E3;
  --pie: #F7F6FB;
  --seleccion: #FFF3B8;

  --letra: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --tam-base: 19px;
  --radio: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--azul);   /* se ve detrás de la barra de estado del iPhone */
  color: var(--texto);
  font-family: var(--letra);
  font-size: var(--tam-base);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 820px;
  margin: 0 auto;
  background: var(--fondo-chat);
}

/* ---------- Barra superior ---------- */
.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 12px;
  padding-left: calc(env(safe-area-inset-left) + 16px);
  padding-right: calc(env(safe-area-inset-right) + 16px);
  background: var(--azul);
  color: #fff;
  flex-shrink: 0;
}
.barra__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #fff;
}
.barra__textos { flex: 1; min-width: 0; }
.barra__titulo {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra__estado {
  margin: 2px 0 0;
  font-size: 0.85rem;
  opacity: 0.85;
}
.barra__chats {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 56px;
  padding: 4px 8px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: 500 0.8rem var(--letra);
  cursor: pointer;
  flex-shrink: 0;
}
.barra__chats:active { background: rgba(255, 255, 255, 0.25); }
.barra__punto {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--naranja);
  box-shadow: 0 0 0 2px var(--azul);
}
.barra__punto[hidden] { display: none; }

/* ---------- Conversación ---------- */
.chat {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.chat__contenido {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  padding-left: calc(env(safe-area-inset-left) + 16px);
  padding-right: calc(env(safe-area-inset-right) + 16px);
}

.separador-fecha {
  align-self: center;
  margin: 8px 0;
  padding: 4px 14px;
  border-radius: 12px;
  background: #fff;
  color: var(--texto-suave);
  font-size: 0.85rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

.burbuja {
  position: relative;
  max-width: 88%;
  padding: 12px 16px 8px;
  border-radius: var(--radio);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12);
  overflow-wrap: anywhere;
}
.burbuja--asistente {
  align-self: flex-start;
  background: var(--burbuja-asistente);
  border-top-left-radius: 4px;
}
.burbuja--usuario {
  align-self: flex-end;
  background: var(--burbuja-usuario);
  border-top-right-radius: 4px;
}
.burbuja--aviso {
  border-left: 5px solid var(--naranja);
}

.burbuja p { margin: 0 0 10px; }
.burbuja ul, .burbuja ol { margin: 0 0 10px; padding-left: 1.3em; }
.burbuja li { margin-bottom: 6px; }
.burbuja > :last-child,
.burbuja .cuerpo > :last-child { margin-bottom: 0; }
.burbuja strong { font-weight: 600; }
.burbuja a {
  color: var(--naranja-oscuro);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.burbuja__hora {
  display: block;
  margin-top: 4px;
  text-align: right;
  font-size: 0.75rem;
  color: var(--texto-suave);
}

/* Puntos que se pueden tocar para citarlos (como "responder" en WhatsApp) */
.burbuja--asistente .punto {
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.burbuja--asistente .punto:active { background: #F1EFF8; }
.burbuja--asistente .punto.seleccionado {
  background: var(--seleccion);
  box-shadow: 0 0 0 4px var(--seleccion);
}

/* Cita mostrada dentro de la burbuja del usuario */
.burbuja__cita {
  margin: -2px -6px 8px;
  padding: 6px 10px;
  border-left: 4px solid var(--naranja);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--texto-suave);
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Indicador "escribiendo..." */
.escribiendo {
  display: inline-flex;
  gap: 6px;
  padding: 6px 2px;
}
.escribiendo span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--texto-suave);
  animation: rebote 1.2s infinite ease-in-out;
}
.escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rebote {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* Gráficas (Fase 2) */
.burbuja__imagen {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  border-radius: 10px;
  cursor: zoom-in;
}

/* Fuentes de la búsqueda web, bajo la respuesta */
.burbuja__fuentes {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.burbuja__fuentes ul { margin: 4px 0 0; padding-left: 1.2em; }
.burbuja__fuentes li { margin-bottom: 4px; }

/* ---------- Pie: cita activa y redactor ---------- */
.pie {
  flex-shrink: 0;
  background: var(--pie);
  border-top: 1px solid var(--borde);
  padding: 10px 12px calc(env(safe-area-inset-bottom) + 10px);
  padding-left: calc(env(safe-area-inset-left) + 12px);
  padding-right: calc(env(safe-area-inset-right) + 12px);
}

.cita-activa {
  margin-bottom: 8px;
  padding: 8px 10px;
  border-left: 4px solid var(--naranja);
  border-radius: 8px;
  background: #fff;
}
.cita-activa[hidden] { display: none; }
.cita-activa__fila {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cita-activa__texto {
  flex: 1;
  font-size: 0.9rem;
  color: var(--texto-suave);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cita-activa__etiqueta {
  display: block;
  font-weight: 600;
  color: var(--naranja-oscuro);
}
.cita-activa__cerrar {
  min-width: 48px;
  min-height: 48px;
  margin: -8px -6px -8px 0;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  font-size: 1.2rem;
  cursor: pointer;
}

.redactor {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.redactor__entrada {
  flex: 1;
  min-height: 52px;
  max-height: 40vh;
  padding: 12px 18px;
  border: 2px solid var(--borde);
  border-radius: 26px;
  background: #fff;
  color: var(--texto);
  font: 18px/1.4 var(--letra);   /* 16 px o más evita el zoom automático de iOS */
  resize: none;
}
.redactor__entrada:focus {
  outline: none;
  border-color: var(--azul);
}
.redactor__enviar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--naranja);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.redactor__enviar:disabled { background: #B9B6C9; cursor: default; }

/* ---------- Visor de imágenes ---------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: rgba(10, 9, 30, 0.95);
}
.visor[hidden] { display: none; }
.visor img {
  max-width: 100%;
  max-height: 100%;
  touch-action: pinch-zoom;
}
.visor__cerrar {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 8px);
  right: calc(env(safe-area-inset-right) + 8px);
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}

/* ---------- Alertas y resumen en el chat ---------- */
.burbuja--alerta {
  border: 2px solid var(--naranja);
  border-top-left-radius: 4px;
}
.burbuja--resumen { border-left: 5px solid var(--azul); }

/* Tarjeta para activar los avisos (notificaciones) */
.tarjeta-avisos {
  align-self: stretch;
  padding: 14px 16px;
  border-radius: var(--radio);
  background: #fff;
  border: 2px dashed var(--borde);
  text-align: center;
}
.tarjeta-avisos p { margin: 0 0 10px; }
.tarjeta-avisos .boton { margin-top: 8px; }

/* ---------- Pantallas de activación e instalación ---------- */
.portada {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px);
  background: var(--azul);
  color: #fff;
  text-align: center;
  overflow-y: auto;
}
.portada[hidden] { display: none; }
.portada__logo { width: 96px; height: 96px; border-radius: 22px; }
.portada__titulo { margin: 0; font-size: 1.5rem; font-weight: 600; }
.portada__texto { margin: 0; font-size: 1.1rem; max-width: 22em; }
.portada__form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
.portada__etiqueta { font-size: 0.95rem; opacity: 0.9; }
.portada__codigo {
  height: 64px;
  border: 0;
  border-radius: 14px;
  text-align: center;
  font: 600 32px/1 var(--letra);
  letter-spacing: 0.3em;
  color: var(--azul);
}
.portada__error { margin: 0; color: #FFD2BF; font-weight: 500; }
.portada__pasos { text-align: left; max-width: 22em; font-size: 1.05rem; line-height: 1.6; }
.portada__pasos li { margin-bottom: 8px; }

/* ---------- Lista de chats ---------- */
.panel-chats {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  max-width: 820px;
  margin: 0 auto;
  background: var(--fondo-chat);
}
.panel-chats[hidden] { display: none; }
.panel-chats__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 12px;
  padding-left: calc(env(safe-area-inset-left) + 16px);
  padding-right: calc(env(safe-area-inset-right) + 16px);
  background: var(--azul);
  color: #fff;
}
.panel-chats__titulo { margin: 0; font-size: 1.2rem; font-weight: 600; }
.panel-chats__cerrar {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}
.panel-chats__cuerpo {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px;
  padding-left: calc(env(safe-area-inset-left) + 16px);
  padding-right: calc(env(safe-area-inset-right) + 16px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}
.panel-chats__aviso {
  margin: 0;
  width: 100%;
  padding: 12px 14px;
  border-left: 4px solid var(--naranja);
  border-radius: 8px;
  background: #fff;
  font-weight: 500;
}
.panel-chats__aviso[hidden] { display: none; }
.panel-chats__nota { margin: 0; color: var(--texto-suave); font-size: 0.9rem; text-align: center; }

.lista-chats {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fila-chat {
  display: flex;
  align-items: stretch;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.fila-chat--actual { box-shadow: inset 4px 0 0 var(--naranja), 0 1px 1.5px rgba(0, 0, 0, 0.12); }
.fila-chat__abrir {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 64px;
  padding: 10px 36px 10px 16px;
  border: 0;
  background: transparent;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fila-chat__abrir:active { background: var(--fondo-chat); }
.fila-chat__nombre {
  max-width: 100%;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fila-chat__detalle { font-size: 0.85rem; color: var(--texto-suave); }
.fila-chat__punto {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--naranja);
}
.fila-chat__borrar {
  flex-shrink: 0;
  min-width: 84px;
  border: 0;
  border-left: 1px solid var(--borde);
  background: transparent;
  color: var(--naranja-oscuro);
  font: 500 0.95rem var(--letra);
  cursor: pointer;
}
.fila-chat__borrar--destacado { background: var(--naranja); color: #fff; border-left-color: var(--naranja); }

.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: 100%;
  max-width: 340px;
  padding: 10px 20px;
  border: 0;
  border-radius: 28px;
  font: 600 1.1rem var(--letra);
  text-decoration: none;
  cursor: pointer;
}
.boton--principal { background: var(--naranja); color: #fff; }
.boton--whatsapp { background: #fff; color: var(--azul); }
.boton--secundario { background: transparent; color: var(--texto-suave); min-height: 48px; }
.boton--borde { background: #fff; color: var(--azul); border: 2px solid var(--borde); }

@media (prefers-reduced-motion: reduce) {
  .escribiendo span { animation: none; opacity: 0.6; }
}