/* UG – Mi cotización: panel lateral con los productos añadidos (se abre desde la cabecera). */
.ug-drawer-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(4, 18, 44, .45); backdrop-filter: blur(2px); opacity: 0; transition: opacity .25s ease; }
.ug-drawer-backdrop.is-open { opacity: 1; }
.ug-drawer-backdrop[hidden] { display: none; }
.ug-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1101; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--white); color: var(--ink); font-family: var(--font-sans); box-shadow: -24px 0 60px -30px rgba(4, 18, 44, .5); transform: translateX(100%); visibility: hidden; transition: transform .32s cubic-bezier(.16, 1, .3, 1), visibility .32s; }
.ug-drawer.is-open { transform: none; visibility: visible; }
body.admin-bar .ug-drawer { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ug-drawer { top: 46px; } }

.ug-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 18px; border-bottom: 1px solid var(--line); }
.ug-drawer-head h2 { margin: 6px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.ug-drawer-close { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ug-drawer-close:hover { color: var(--ink); border-color: #B9CDF0; }

.ug-drawer-items { flex: 1; overflow-y: auto; padding: 8px 22px; overscroll-behavior: contain; }
.ug-drawer-empty { margin: 40px 0; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6; }
.ug-drawer-empty a { color: var(--blue); font-weight: 600; text-decoration: none; }
.ug-drawer-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ug-drawer-item:last-child { border-bottom: none; }
.ug-drawer-thumb { width: 56px; height: 56px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--blue); }
.ug-drawer-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ug-drawer-name { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ug-drawer-name:hover { color: var(--blue); }
.ug-drawer-sku { display: block; margin-top: 4px; font: 500 12px var(--font-mono); color: var(--muted); }
.ug-qty { display: inline-flex; align-items: center; margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ug-qty button { width: 32px; height: 32px; border: none; background: var(--white); color: var(--ink); font-size: 16px; cursor: pointer; padding: 0; }
.ug-qty button:hover { background: var(--surface); }
.ug-qty span { min-width: 34px; text-align: center; font: 500 14px var(--font-mono); }
.ug-drawer-remove { width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ug-drawer-remove:hover { color: #D92D3A; background: #FFF1F2; }
.ug-drawer.is-busy .ug-drawer-items { opacity: .55; pointer-events: none; }

.ug-drawer-foot { padding: 16px 22px 22px; border-top: 1px solid var(--line); background: var(--surface); }
.ug-drawer-note { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ug-drawer-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.ug-drawer-actions .ug-btn { width: 100%; padding: 0 12px; }
.ug-drawer.is-empty .ug-drawer-foot { display: none; }
/* Barra con el número de productos y "Vaciar" (pide confirmación antes de quitar todo) */
.ug-drawer-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 22px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.ug-drawer.is-empty .ug-drawer-bar { display: none; }
.ug-drawer-clear { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; margin-right: -8px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: 500 13.5px var(--font-sans); cursor: pointer; transition: color .2s, background-color .2s; }
.ug-drawer-clear:hover { color: #C21A33; background: #FDECEE; }
.ug-drawer-confirm { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 22px; background: #FFF5F6; color: var(--ink); font-size: 13.5px; font-weight: 500; }
.ug-drawer-confirm[hidden] { display: none; }
.ug-drawer-confirm span { flex: 1; min-width: 0; }
.ug-drawer-confirm button { flex-shrink: 0; min-height: 32px; padding: 0 12px; border-radius: 8px; font: 600 13px var(--font-sans); cursor: pointer; }
.ug-drawer-no { border: 1px solid var(--line); background: var(--white); color: var(--ink); }
.ug-drawer-no:hover { border-color: #B9CDF0; }
.ug-drawer-yes { border: 0; background: #D61F3A; color: #fff; }
.ug-drawer-yes:hover { background: #B8162E; }
@media (prefers-reduced-motion: reduce) { .ug-drawer, .ug-drawer-backdrop { transition: none; } }