/* Respaldo en Vida · chat web con look de mensajería. Verde profundo + fondo de chat gris verdoso frío. */
:root {
  --fondo: #EEF3F1;
  --superficie: #FFFFFF;
  --tinta: #0F1F1B;
  --tinta-2: #3F524C;
  --tinta-3: #6A7C76;
  --borde: #D3DFDA;
  --marca: #0B6E5B;
  --marca-osc: #08584A;
  --marca-suave: #DCEFE9;
  --yo: #D5F0E6;
  --llamar: #0F8A68;
  --llamar-osc: #0A6F53;
  --alerta: #B42318;
  --fuente-titulo: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --fuente: "Inter", "Segoe UI", system-ui, sans-serif;
  --patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230B6E5B' stroke-opacity='.06' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 26c-3-4-10-2-9 4 1 4 9 9 9 9s8-5 9-9c1-6-6-8-9-4Z'/%3E%3Ccircle cx='86' cy='22' r='7'/%3E%3Cpath d='M64 62c6-10 20-10 22-2-8 2-15 8-22 2Zm0 0 10-4'/%3E%3Cpath d='M18 84v12M12 90h12'/%3E%3Cpath d='M92 82h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-8l-5 4v-4h-1a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3Z'/%3E%3Cpath d='M42 107v-8l7-6 7 6v8Z'/%3E%3Cpath d='M48 30l3 3 6-7'/%3E%3C/g%3E%3C/svg%3E");
}

html, body { height: 100%; }
body { background: var(--fondo); overflow: hidden; font-size: 16px; }
.fondo-escritorio, .pie-escritorio { display: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- App ---------- */
.app {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background-color: var(--fondo); background-image: var(--patron); background-size: 240px 240px;
}

.chat-cab {
  flex: none; display: flex; align-items: center; gap: 12px;
  background: var(--marca); color: #fff;
  padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  min-height: 64px; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 14px rgba(8, 60, 50, .18); z-index: 2;
}
.chat-avatar { flex: 0 0 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85); overflow: hidden; display: grid; place-items: center; background: var(--marca); }
.chat-avatar svg { width: 42px; height: 42px; }
.chat-quien { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.chat-quien b { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.08rem; letter-spacing: -.005em; }
.chat-estado { font-size: .8rem; opacity: .88; }
.en-linea-txt { display: inline-flex; align-items: center; gap: 5px; }
.en-linea-txt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7CE3BF; }
.estado-escribiendo { display: none; font-style: italic; }
.app.escribe .estado-normal { display: none; }
.app.escribe .estado-escribiendo { display: inline; }

.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: none; }
.log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 12px max(12px, env(safe-area-inset-right)) 18px max(12px, env(safe-area-inset-left));
  display: flex; flex-direction: column;
}
.dia { display: flex; justify-content: center; margin: 4px 0 10px; }
.dia span { background: rgba(255,255,255,.92); color: var(--tinta-3); font-size: .74rem; font-weight: 600; padding: 4px 12px; border-radius: 8px; box-shadow: 0 1px 1px rgba(10, 40, 32, .07); letter-spacing: .02em; }
.aviso-sistema {
  align-self: center; max-width: 92%; margin: 0 0 14px; text-align: center;
  background: #E1ECE8; color: var(--tinta-2); border-radius: 10px; padding: 8px 12px;
  font-size: .76rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(10, 40, 32, .06);
}
.aviso-sistema svg { display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--marca); }
.aviso-sistema a { color: var(--marca-osc); font-weight: 600; }

/* ---------- Burbujas ---------- */
.fila { display: flex; margin-top: 3px; }
.fila:has(.cola) { margin-top: 10px; }
.fila.yo { justify-content: flex-end; }
.burbuja {
  position: relative; max-width: 84%;
  background: var(--superficie); color: var(--tinta);
  border-radius: 12px; padding: 8px 10px 5px 12px;
  box-shadow: 0 1px 1.5px rgba(10, 40, 32, .1);
  font-size: 1rem; line-height: 1.45;
  animation: burbuja .28s cubic-bezier(.2,.8,.2,1) both;
  transform-origin: left bottom;
}
.fila.yo .burbuja { background: var(--yo); transform-origin: right bottom; font-weight: 600; }
.burbuja.cola::before { content: ""; position: absolute; top: 0; width: 9px; height: 13px; background: inherit; }
.fila.bot .burbuja.cola { border-top-left-radius: 0; }
.fila.bot .burbuja.cola::before { left: -8px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.fila.yo .burbuja.cola { border-top-right-radius: 0; }
.fila.yo .burbuja.cola::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.burbuja p { margin: 0; }
.hora { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: .68rem; color: var(--tinta-3); margin-top: 1px; font-weight: 500; font-variant-numeric: tabular-nums; }
.vistos { color: #2A9D7C; display: inline-block; }
@keyframes burbuja { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

.puntos { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.puntos i { width: 7px; height: 7px; border-radius: 50%; background: #93A79F; animation: punto 1.2s infinite ease-in-out; }
.puntos i:nth-child(2) { animation-delay: .15s; }
.puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Tarjeta de llamada dentro del chat */
.burbuja:has(.tarjeta-llamada) { width: 92%; max-width: 92%; padding: 14px 14px 6px; }
.tarjeta-llamada { display: flex; flex-direction: column; gap: 10px; }
.tl-cab { display: flex; align-items: center; gap: 11px; padding-bottom: 10px; border-bottom: 1px solid #E6EEEB; }
.tl-ic { flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--marca-suave); color: var(--marca); display: grid; place-items: center; }
.tl-cab b { display: block; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1rem; line-height: 1.25; }
.tl-sub { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--tinta-2); margin-top: 2px; }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--llamar); animation: pulso 1.8s infinite; flex: none; }
.tarjeta-llamada .boton-llamar { margin-top: 4px; }
.tarjeta-llamada .tel-numero { font-size: 1.35rem; }
.tl-letra { font-size: .7rem; color: var(--tinta-3); text-align: center; line-height: 1.4; }
.burbuja:has(.recordatorio) { width: 78%; padding: 10px 10px 5px; }
.recordatorio .boton-llamar { min-height: 56px; font-size: 1.05rem; }

/* Botón de llamar (marca propia) */
.boton-llamar { font-family: var(--fuente-titulo); border-radius: 999px; min-height: 60px; font-size: 1.12rem; }

/* ---------- Zona de respuestas ---------- */
.zona {
  flex: none; position: relative; z-index: 2;
  background: rgba(246, 250, 248, .97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--borde);
  padding: 12px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  min-height: 80px;
  display: flex; flex-direction: column; justify-content: center;
}
.zona:empty::before {
  content: "Elige una respuesta cuando aparezca"; display: flex; align-items: center;
  height: 52px; padding: 0 18px; border-radius: 999px; background: #fff; border: 1px solid var(--borde);
  color: #9AACA5; font-size: .92rem;
}
.zona-titulo { text-align: center; font-size: .78rem; font-weight: 600; color: var(--tinta-3); margin-bottom: 8px; letter-spacing: .02em; }
.zona-espera .zona-titulo { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none; cursor: pointer; flex: 1 1 auto;
  min-height: 56px; padding: 0 18px; border-radius: 999px;
  background: #fff; color: var(--marca-osc); border: 1.5px solid color-mix(in srgb, var(--marca) 55%, #fff);
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.04rem; letter-spacing: -.005em;
  transition: background .15s, border-color .15s, transform .1s, color .15s;
  animation: chip .32s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms);
}
.chip:hover { background: var(--marca-suave); border-color: var(--marca); }
.chip:active { transform: scale(.97); }
.chip:disabled { opacity: .6; cursor: default; }
.chip-ancho { flex-basis: 100%; }
.chip-prin { background: var(--marca); color: #fff; border-color: var(--marca); box-shadow: 0 6px 16px color-mix(in srgb, var(--marca) 28%, transparent); }
.chip-prin:hover { background: var(--marca-osc); border-color: var(--marca-osc); }
.chip-sec { color: var(--tinta-2); border-color: var(--borde); font-weight: 700; }
.chip-sec:hover { color: var(--tinta); background: #F1F6F4; border-color: #B9CBC4; }
.chip-chico { min-height: 44px; font-size: .9rem; flex: 0 0 auto; padding: 0 16px; }
@keyframes chip { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.zona-rejilla .chips { display: grid; grid-template-columns: repeat(4, 1fr); }
.zona-rejilla5 .chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.zona-rejilla5 .chip { padding: 0 4px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.zona-rejilla5 .chip-ancho, .zona-rejilla .chip-ancho { grid-column: 1 / -1; }
.zona-par .chips { display: grid; grid-template-columns: 1fr 1fr; }

.zona-llamar { gap: 8px; }
.zona-dudas { display: flex; justify-content: center; }
.zona-llamar .boton-llamar { min-height: 58px; }

.zona-cerrada { background: #E4ECE9; }
.zona-cerrada p { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--tinta-3); font-size: .9rem; font-weight: 600; min-height: 52px; }

/* ---------- Escritorio: chat centrado en tarjeta ---------- */
@media (min-width: 640px) {
  body { background: #DCE5E1; overflow: auto; }
  .fondo-escritorio { display: block; position: fixed; inset: 0 0 auto; height: 190px; background: var(--marca); }
  .app {
    position: relative; inset: auto; width: 480px; max-width: calc(100% - 32px);
    height: min(880px, calc(100dvh - 80px)); margin: 32px auto 0;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 2px 6px rgba(8, 40, 32, .08), 0 24px 60px rgba(8, 40, 32, .22);
  }
  .chat-cab { padding-top: 12px; }
  .pie-escritorio { display: block; position: relative; text-align: center; font-size: .75rem; color: var(--tinta-3); padding: 14px 16px 20px; margin: 0; }
  .pie-escritorio a { color: var(--tinta-2); }
}

@media (max-width: 360px) {
  .zona-rejilla5 .chips { grid-template-columns: repeat(4, 1fr); }
  .chip { font-size: .98rem; }
}

/* Asesores en línea sobre la cabecera verde */
.sello-oscuro { margin-left: auto; padding: 3px 10px 3px 3px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.sello-oscuro .sello-ic { background: #fff; }
.sello-oscuro .sello-ic::after { border-color: var(--marca, #0B6E5B); }
.sello-oscuro .sello-txt b { color: #fff; }
.sello-oscuro .sello-txt small { color: rgba(255,255,255,.78); }
.chat-avatar svg { border-radius: 50%; }
@media (max-width: 360px) { .sello-oscuro .sello-txt { display: none; } .sello-oscuro { padding: 3px; } }
.chat-quien { min-width: 0; }
.chat-quien b { white-space: nowrap; }
.sello-oscuro .sello-txt b { white-space: normal; max-width: 56px; font-size: .68rem; line-height: 1.1; }
.sello-oscuro .sello-txt small { display: none; }

.tl-cab .esp-avatar.con-foto { width: 52px; height: 52px; flex: 0 0 52px; }