/* ============================================================
   DESI EN LA WEB — Fase 1 (v7.16, 2026-10-19)
   La guía que habla de DESIDERIUM, en la esquina inferior derecha.
   Personaje: LA CAJITA DE MERCADO (decisión de Miguel 23:47) —
   caja de cartón llena de productos, con la luna de la marca
   estampada en el frente y la lista del mercado en la mano.
   Dibujada POR CAPAS (grupos SVG con data-capa) para que a futuro
   cada usuario pueda personalizar su Desi.
   Estados (clase en #dweb): asomada · escucha · busca · habla
   ============================================================ */
.dweb{position:fixed;right:12px;bottom:14px;z-index:80;font-family:Georgia,'Times New Roman',serif;color:#f4ead2}
.dweb *{box-sizing:border-box}

/* ---------- Avatar / personaje ---------- */
.dweb-avatar{position:relative;display:block;width:120px;height:126px;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .55s cubic-bezier(.34,1.45,.64,1),opacity .4s}
.dweb-avatar:focus-visible{outline:2px solid #d9b45b;outline-offset:4px;border-radius:50%}
.dweb-halo{position:absolute;inset:2px -6px;border-radius:50%;background:radial-gradient(circle,rgba(217,180,91,.45),rgba(217,180,91,0) 68%);opacity:.35;transition:opacity .5s;pointer-events:none}
.dweb-ring{position:absolute;inset:16px 6px;border-radius:50%;border:2px solid rgba(217,180,91,.55);opacity:0;pointer-events:none}
.dweb-avatar svg{position:relative;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.dweb-eye{transform-box:fill-box;transform-origin:center;animation:dwebBlink 4.8s infinite}
.dweb-m-open{display:none}
.dweb-twinkle{transform-box:fill-box;transform-origin:center;animation:dwebTw 2.6s ease-in-out infinite}
@keyframes dwebBlink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
@keyframes dwebTw{0%,100%{transform:scale(.7);opacity:.55}50%{transform:scale(1.12);opacity:1}}
/* --- La cajita de mercado: capas personalizables (ver generar.py) --- */
.dweb-sello{transform-box:fill-box;transform-origin:center;transform:rotate(-8deg)}
.dweb-prod{transform-box:fill-box;transform-origin:50% 100%;animation:dwebWiggle 3.6s ease-in-out infinite}
.dweb-p2{animation-delay:.6s}.dweb-p3{animation-delay:1.1s}.dweb-p4{animation-delay:1.7s}
@keyframes dwebWiggle{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(2.2deg)}}
.dweb-mano-saluda{transform-box:fill-box;transform-origin:85% 90%}
.dweb-escucha .dweb-mano-saluda{animation:dwebWave .85s ease-in-out infinite}
@keyframes dwebWave{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-16deg)}}
.dweb-hallazgo{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0)}
.dweb-habla .dweb-hallazgo{animation:dwebPop .65s cubic-bezier(.34,1.56,.64,1) .1s forwards}
@keyframes dwebPop{0%{transform:scale(0) translateY(10px)}100%{transform:scale(1) translateY(0)}}
@keyframes dwebSway{0%,100%{transform:rotate(-1.6deg) translateY(0)}50%{transform:rotate(2deg) translateY(-4px)}}
@keyframes dwebTalk{0%{transform:scale(1)}22%{transform:scale(1.06)}45%{transform:scale(.995)}68%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes dwebRipple{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}

/* Estados del personaje */
.dweb-asomada .dweb-avatar{transform:translate(17px,19px) scale(.84)}
.dweb-asomada .dweb-avatar svg{animation:dwebSway 4.2s ease-in-out infinite}
.dweb-escucha .dweb-avatar{transform:translate(0,0)}
.dweb-escucha .dweb-avatar svg{animation:dwebSway 3.8s ease-in-out infinite}
.dweb-escucha .dweb-halo{opacity:.6}
.dweb-escucha .dweb-ring{animation:dwebRipple 2s ease-out infinite}
.dweb-escucha .dweb-ring.dweb-r2{animation-delay:.66s}
.dweb-escucha .dweb-ring.dweb-r3{animation-delay:1.33s}
.dweb-busca .dweb-avatar{transform:translate(12px,135%) scale(.9);opacity:.25}
.dweb-habla .dweb-avatar{transform:translate(0,-2px) scale(1.02)}
.dweb-habla .dweb-avatar svg{animation:dwebTalk .92s ease-in-out infinite}
.dweb-habla .dweb-halo{opacity:.85}
.dweb-habla .dweb-m-smile{display:none}
.dweb-habla .dweb-m-open{display:block}

/* Burbuja de invitación */
.dweb-invite{position:absolute;right:calc(100% + 2px);top:2px;width:158px;background:rgba(10,24,48,.94);border:1px solid #8a6d2f;border-radius:12px;border-bottom-right-radius:3px;padding:8px 10px;font-size:12.5px;line-height:1.35;color:#f4ead2;text-align:left;box-shadow:0 10px 24px rgba(0,0,0,.4);animation:dwebBob 3.2s ease-in-out infinite;transition:opacity .3s}
@keyframes dwebBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.dweb-open .dweb-invite,.dweb-met .dweb-invite{opacity:0;pointer-events:none}

/* ---------- Panel de conversación ---------- */
.dweb-panel{position:fixed;right:12px;bottom:146px;width:min(338px,93vw);background:linear-gradient(180deg,#0a1c38,#081426);border:1px solid rgba(217,180,91,.55);border-radius:16px;box-shadow:0 22px 50px rgba(0,0,0,.55);padding:12px 13px 10px;display:none;flex-direction:column;gap:9px}
.dweb-open .dweb-panel{display:flex}
.dweb-p-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dweb-p-head span{font-size:11px;letter-spacing:.22em;color:#d9b45b;text-transform:uppercase}
.dweb-close{background:none;border:1px solid #274a7d;color:#c8d8f2;border-radius:50%;width:26px;height:26px;font-size:16px;line-height:1;cursor:pointer;flex:none}
.dweb-close:hover{border-color:#d9b45b;color:#d9b45b}
.dweb-bubble{background:rgba(13,32,61,.9);border:1px solid #274a7d;border-radius:13px;border-bottom-left-radius:3px;padding:10px 12px;font-size:14.5px;line-height:1.45;min-height:64px;overflow-y:auto}
.dweb-chips{display:flex;flex-wrap:wrap;gap:6px}
.dweb-chips button{font-family:inherit;font-size:12px;background:transparent;color:#c8d8f2;border:1px solid #274a7d;border-radius:999px;padding:6px 10px;cursor:pointer;text-align:left}
.dweb-chips button:hover{border-color:#d9b45b;color:#f4ead2}
.dweb-form{display:flex;gap:7px}
.dweb-form input{flex:1;min-width:0;background:rgba(8,20,38,.9);border:1px solid #274a7d;border-radius:999px;padding:8px 13px;color:#f4ead2;font-family:inherit;font-size:13.5px}
.dweb-form input::placeholder{color:#7e97bd}
.dweb-form input:focus{outline:none;border-color:#d9b45b}
.dweb-send{flex:none;width:36px;height:36px;border-radius:50%;background:#d9b45b;color:#081426;border:none;font-size:16px;cursor:pointer}
.dweb-send:hover{background:#e9c86e}
.dweb-note{font-size:10.5px;color:#5f789e;letter-spacing:.03em;line-height:1.4}

/* ---------- Móvil: por encima de la barra inferior, máx. media pantalla ---------- */
@media (max-width:900px){
  .dweb{bottom:72px}
  .dweb-panel{bottom:204px;max-height:50vh}
  .dweb-bubble{max-height:26vh}
  .dweb-invite{width:138px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .dweb *,.dweb-avatar svg{animation:none!important;transition:none!important}
}