/* Asistente de la web de Cuattro (ver asistente.js). Paleta y letra de la marca. */
.asis{--a-verde:var(--verde,#23330E);--a-medio:var(--verde-medio,#3D5718);--a-lima:var(--lima,#A2C96C);
  --a-tinte:var(--tinte,#EDF4E0);--a-texto:#202020;--a-suave:#6b7280;--a-wa:#1FA855;font-family:var(--fuente,system-ui)}
.asis svg{width:18px;height:18px;fill:currentColor;flex-shrink:0}

/* botón fijo */
.asis__lanzador{position:fixed;right:22px;bottom:22px;z-index:95;width:60px;height:60px;border:0;border-radius:50%;
  background:var(--a-verde);color:var(--a-lima);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 26px rgba(20,28,10,.32);transition:transform .2s}
.asis__lanzador:hover{transform:translateY(-2px)}
.asis__lanzador svg{width:26px;height:26px}
.asis--abierto .asis__lanzador svg{opacity:.7}

/* avatar */
.asis__avatar{position:relative;width:46px;height:46px;border-radius:50%;background:var(--a-verde);display:grid;
  place-items:center;flex-shrink:0}
.asis__avatar svg{width:20px;height:30px}
.asis__avatar svg path{fill:var(--a-lima)}
.asis__avatar--chico{width:36px;height:36px}
.asis__avatar--chico svg{width:15px;height:23px}
.asis__punto{position:absolute;right:0;bottom:1px;width:12px;height:12px;border-radius:50%;background:#34C759;border:2px solid #fff}
.asis--fuera .asis__punto{background:#C9C9C9}
.asis__estado{display:block;font-size:12px;color:#2E9B4E;font-weight:600}
.asis--fuera .asis__estado{color:var(--a-suave);font-weight:500}

/* cartel que aparece solo */
.asis__cartel{position:fixed;right:22px;bottom:96px;z-index:95;width:320px;padding:16px 16px 14px;border-radius:18px;
  background:#fff;color:var(--a-texto);box-shadow:0 14px 40px rgba(20,28,10,.2);border:1px solid rgba(0,0,0,.06);
  opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.asis__cartel.asis--visible{opacity:1;transform:none}
.asis__quien{display:flex;align-items:center;gap:12px;padding-right:22px}
.asis__quien strong{font-size:15px}
.asis__cartel p{margin:12px 0 14px;font-size:14px;line-height:1.45;color:#3a3a3a}
.asis__acc{display:flex;gap:8px}
.asis__btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border-radius:12px;
  border:0;cursor:pointer;font:600 13px/1.2 inherit;font-family:inherit;text-decoration:none;
  background:var(--a-verde);color:#fff}
.asis__btn--wa{background:var(--a-wa)}
.asis__x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:22px;line-height:1;color:#8a8a8a;cursor:pointer}
.asis__x:hover{color:var(--a-texto)}

/* ventana del chat */
.asis__ventana{position:fixed;right:22px;bottom:96px;z-index:96;width:370px;height:min(560px,calc(100vh - 130px));
  display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 18px 50px rgba(20,28,10,.28);animation:asisSube .3s cubic-bezier(.16,1,.3,1)}
.asis__ventana[hidden],.asis__cartel[hidden]{display:none}
@keyframes asisSube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.asis__cab{position:relative;display:flex;align-items:center;gap:10px;padding:12px 44px 12px 14px;
  background:var(--a-verde);color:#fff}
.asis__cab strong{font-size:15px}
.asis__cab .asis__estado{color:var(--a-lima)}
.asis--fuera .asis__cab .asis__estado{color:#cfd8c2}
.asis__cab .asis__x{top:50%;transform:translateY(-50%);color:#dfe8d2}
.asis__msjs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--a-tinte)}
.asis__m{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;animation:asisSube .25s ease}
.asis__m--bot{align-self:flex-start;background:#fff;color:var(--a-texto);border-bottom-left-radius:4px}
.asis__m--yo{align-self:flex-end;background:var(--a-medio);color:#fff;border-bottom-right-radius:4px}
.asis__ops{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 12px;border-top:1px solid #ececec;background:#fff}
.asis__ops:empty{display:none}
.asis__op{padding:8px 12px;border-radius:999px;border:1.5px solid var(--a-medio);background:#fff;color:var(--a-medio);
  font:600 13px/1.2 inherit;font-family:inherit;cursor:pointer}
.asis__op small{opacity:.6;font-weight:500;margin-left:2px}
.asis__op:hover{background:var(--a-medio);color:#fff}

/* resultados */
.asis__props{display:flex;flex-direction:column;gap:8px}
.asis__prop{display:flex;gap:10px;align-items:center;width:100%;padding:8px;border:0;border-radius:14px;background:#fff;
  text-align:left;cursor:pointer;font-family:inherit;box-shadow:0 1px 0 rgba(0,0,0,.04);transition:box-shadow .2s}
.asis__prop:hover{box-shadow:0 4px 14px rgba(20,28,10,.14)}
.asis__prop img{width:76px;height:62px;object-fit:cover;border-radius:10px;background:#e5e5e5;flex-shrink:0}
.asis__prop span{display:flex;flex-direction:column;gap:2px;min-width:0}
.asis__prop b{font-size:14px;color:var(--a-verde)}
.asis__prop em{font-style:normal;font-size:13px;color:var(--a-texto);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asis__prop small{font-size:11.5px;color:var(--a-suave)}
.asis__links{display:flex;flex-direction:column;gap:6px}
.asis__link{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:12px;
  border:1.5px solid var(--a-medio);background:#fff;color:var(--a-medio);font:700 13px/1.2 inherit;font-family:inherit;
  text-decoration:none;cursor:pointer}
.asis__link--wa{border-color:var(--a-wa);background:var(--a-wa);color:#fff}

@media (max-width:560px){
  .asis__lanzador{right:16px;bottom:16px}
  .asis__cartel{left:16px;right:16px;bottom:88px;width:auto}
  .asis__ventana{left:10px;right:10px;bottom:84px;width:auto;height:calc(100vh - 110px);height:calc(100dvh - 110px)}
}
@media (prefers-reduced-motion:reduce){.asis *{animation:none!important;transition:none!important}}