/* 26 · «Tu inventario, desde tu CRM» (opción D de opciones-crm.html): tu CRM a la izquierda, Ungga a la derecha y el inicio de sesión en medio.
 * Un cursor hace clic, carga, «Sesión iniciada», cada propiedad se copia a Ungga (en el CRM sigue igual) y Gu la ofrece. */
.crmd-h { margin: 0 auto; max-width: 18ch; text-align: center; font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.crmd-sub { margin: 18px auto 56px; max-width: 56ch; text-align: center; color: var(--muted); font-size: 17.5px; text-wrap: balance; }
.crmd .btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 99px; font: 600 13.5px var(--sans); color: var(--cta-fg); border: 1.5px solid transparent; animation: giraBorde 4s linear infinite;
  background: conic-gradient(from var(--ang), rgb(var(--t1) / .16), transparent 28%, rgb(var(--t2) / .1) 55%, transparent 80%, rgb(var(--t1) / .16)) padding-box, linear-gradient(var(--cta-fill), var(--cta-fill)) padding-box,
    conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)) border-box; }
.crmd .btn.clic { transform: scale(.96); }
.crmd .chat { display: grid; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.crmd .msg { max-width: 34ch; padding: 9px 13px; border-radius: 14px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.crmd .msg.on { opacity: 1; transform: none; }
.crmd .msg.in { justify-self: start; background: var(--k1b1c20); border-top-left-radius: 4px; }
.crmd .msg.gu { justify-self: end; border-top-right-radius: 4px; border: 1px solid transparent; animation: giraBorde 8s linear infinite;
  background: linear-gradient(var(--fill), var(--fill)) padding-box, conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)) border-box; }
.crmd .msg.gu .ref { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line2); }
.crmd .msg.gu .ref img { width: 56px; height: 42px; border-radius: 6px; object-fit: cover; }
.crmd .msg.gu .ref small { display: block; color: var(--muted); font-size: 12.5px; }
.crmd .cuenta { font-family: var(--disp); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.crmd { position: relative; }
.d-col li .luz-l { bottom: -1px; }
.d-col li.llega .luz-l { animation: barreUna 1.2s linear both; }
.crmd { display: grid; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); align-items: start; }
.d-col h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; padding-bottom: 14px; border-bottom: 1px solid var(--line2); }
.d-col h3 img { width: 26px; height: 26px; border-radius: 6px; background: var(--kffffff); }
.d-crm-ic { width: 26px; height: 26px; border-radius: 7px; flex: none; border: 1px solid var(--line2); background: linear-gradient(var(--line2), var(--line2)) 6px 7px / 12px 1.5px no-repeat, linear-gradient(var(--line2), var(--line2)) 6px 11.5px / 12px 1.5px no-repeat, linear-gradient(var(--line2), var(--line2)) 6px 16px / 8px 1.5px no-repeat; }
.d-col h3 small { margin-left: auto; font: 500 13px var(--sans); color: var(--muted); letter-spacing: 0; }
.d-col ol { list-style: none; margin: 0; padding: 0; min-height: 330px; }
.d-col li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.d-col li img { width: 52px; height: 38px; border-radius: 5px; object-fit: cover; }
.d-col li b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d-col li small { color: var(--muted); font-size: 12.5px; }
.d-col li em { font-style: normal; font-size: 12px; color: var(--dim); }
.d-vacia { padding: 40px 0; color: var(--dim); font-size: 14.5px; text-align: center; }
.d-med { position: relative; align-self: stretch; display: grid; place-items: center; }
.d-med::before { content: ""; position: absolute; top: 0; bottom: 34px; left: 50%; width: 1px; background: var(--line); }
.d-med .btn { position: relative; padding: 10px 14px; font-size: 13.5px; white-space: nowrap; transition: transform .15s, padding .3s; }
/* botón: clic, pequeña carga y «Sesión iniciada» */
.d-ic { display: none; width: 14px; height: 14px; flex: none; }
.d-btn.carga .d-ic { display: block; border-radius: 50%; border: 2px solid rgb(255 255 255 / .2); border-top-color: #fff; animation: dGira .7s linear infinite; }
.d-btn.lista .d-ic { display: block; position: relative; }
.d-btn.lista .d-ic::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: dPalomita .3s ease-out both; }
@keyframes dGira { to { transform: rotate(360deg); } }
@keyframes dPalomita { from { opacity: 0; transform: rotate(45deg) scale(.4); } }
.d-btn.lista { animation-duration: 1.4s; }
.d-cursor { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; z-index: 3; fill: var(--kffffff); stroke: var(--k08090a); stroke-width: 1.2; filter: drop-shadow(0 2px 4px var(--k000000-6)); opacity: 0; transform: translate(60px, 90px); transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .3s; pointer-events: none; }
.d-cursor.va { opacity: 1; transform: translate(4px, 4px); }
.d-cursor.clic { transform: translate(4px, 4px) scale(.85); transition-duration: .12s; }
.d-cursor.sale { opacity: 0; transform: translate(40px, 70px); }
.d-med .solo { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 12.5px; color: var(--dim); white-space: nowrap; padding: 4px 6px; }
.d-vuela { position: absolute; z-index: 5; pointer-events: none; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--k15151d); box-shadow: 0 0 0 1px rgb(var(--t1) / .5), 0 12px 30px -10px rgb(var(--t1) / .6); transition: transform .8s cubic-bezier(.65, 0, .35, 1), opacity .3s; }
.d-vuela img { width: 52px; height: 38px; border-radius: 5px; object-fit: cover; } .d-vuela b { font-size: 14px; }
.d-chat { margin-top: 26px; min-height: 250px; align-content: start; }
@media (max-width: 900px) {
  .crmd { grid-template-columns: minmax(0, 1fr); } .d-med { padding: 24px 0; } .d-med::before { display: none; } .d-med .solo { position: static; transform: none; margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .crmd .btn, .crmd .msg.gu { animation: none; } }