/* ===========================================================================
   FASE 6 — banda de grabación del panel de piezas, panel de pines, diálogo
   +Vistas (con ampliación y correo), Help&Go! (píldora + tablón + editores)
   y ShowPad (diálogo de configuración + pantalla de presentación).
   =========================================================================== */

/* ---------- banda de grabación (panel de piezas) ---------- */
.rec-strip { padding: 0 14px 10px; }
.rec-row { display: flex; align-items: center; gap: 8px; }
.rec-row .grow { flex: 1; }
.rec-dot { font-size: 18px; color: #F04438; animation: rec-blink 1100ms ease-in-out infinite; }
@keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.rec-time { font-size: 13.5px; font-weight: 800; color: #F04438; font-variant-numeric: tabular-nums; }
.rec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid #F04438; background: #fff; color: #F04438; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rec-btn.record { flex: 1; padding: 0 10px; }
.rec-btn.saved { border-color: #12B76A; color: #12B76A; }
.rec-name { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--divider); border-radius: 8px; font: inherit; font-size: 12.5px; color: var(--navy); outline: none; }
.rec-name:focus { border-color: var(--blue); border-width: 1.4px; }
.rec-ic { display: flex; padding: 3px; cursor: pointer; }
.rec-ic.save { color: #12B76A; }
.rec-ic.save.off { color: #C4C9D2; pointer-events: none; }
.rec-ic.discard { color: var(--navy-soft); }

/* ---------- panel de pines ---------- */
.pin-panel .fp-head { cursor: grab; }
.fp-ic { display: flex; padding: 4px; cursor: pointer; color: rgba(255, 255, 255, 0.85); }
.pin-body { padding: 12px 12px 14px; }
.pin-create { width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; border: 0; background: var(--blue); color: #fff; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.pin-create.cancel { background: #F04438; }
.pin-hint { margin-top: 10px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; background: rgba(30, 150, 255, 0.10); color: var(--blue); font-size: 12px; font-weight: 600; line-height: 1.35; }
.pin-list { margin-top: 10px; max-height: 300px; overflow-y: auto; }
.pin-empty { padding: 12px 4px; font-size: 12.5px; line-height: 1.4; color: var(--navy-soft); }
.pin-row { display: flex; align-items: center; gap: 9px; padding: 8px 6px 8px 8px; border-radius: 8px; cursor: pointer; }
.pin-row.sel { background: rgba(30, 150, 255, 0.10); }
.pin-row .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.65); }
.pin-row .nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: #1C2230; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-row .fp-ic { color: #6C7686; padding: 3px; }
.pin-edit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.pin-edit input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--blue); border-radius: 7px; font: inherit; font-size: 13px; color: var(--navy); outline: none; }
.pin-edit .ok { display: flex; color: #12B76A; cursor: pointer; }
.pin-palette { display: flex; gap: 7px; padding: 4px 8px 10px 31px; }
.pin-palette .sw { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

/* ---------- +Vistas ---------- */
.views-dialog { padding: 18px 18px 18px; transition: width 200ms ease; }
.views-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.views-head .t { flex: 1; font-size: 20px; font-weight: 800; color: #1C2230; }
.views-body { overflow-y: auto; max-height: calc(100% - 50px); }
.views-empty { padding: 26px 10px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.views-empty .a { font-size: 15.5px; font-weight: 700; color: #1C2230; }
.views-empty .b { font-size: 13px; color: #6C7686; line-height: 1.4; }
.views-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.view-tile { position: relative; width: 196px; height: 141px; border: 1px solid #E3E7EE; border-radius: 12px; background: #fff; overflow: hidden; cursor: pointer; }
.view-tile img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.view-tile .handle { position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; color: #6C7686; cursor: grab; touch-action: none; }
.view-tile .zoom { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; color: #6C7686; pointer-events: none; }
.hg-dragging-src { opacity: 0.35; }

.view-enlarge { background: #fff; border-radius: 18px; box-shadow: var(--soft-shadow); display: flex; flex-direction: column; overflow: hidden; }
.ve-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 10px 18px; border-bottom: 1px solid #E3E7EE; }
.ve-head .t { flex: 1; font-size: 17px; font-weight: 800; color: #1C2230; }
.ve-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; background: #fff; touch-action: none; cursor: grab; }
.ve-stage img { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; user-select: none; -webkit-user-drag: none; }
.ve-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #E3E7EE; }
.ve-foot .grow { flex: 1; }
.ve-confirm { width: 380px; background: #fff; border-radius: 16px; box-shadow: var(--soft-shadow); padding: 20px 20px 16px; }
.ve-confirm .a { font-size: 17px; font-weight: 800; color: #1C2230; }
.ve-confirm .b { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: #53607A; }
.ve-confirm .row { margin-top: 16px; display: flex; justify-content: flex-end; gap: 10px; }
.ve-mail { width: 460px; max-height: min(620px, calc(100vh - 120px)); background: #fff; border-radius: 16px; box-shadow: var(--soft-shadow); display: flex; flex-direction: column; overflow: hidden; }
.ve-mail-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px; }
.ve-mail-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ve-mail-row .cn { font-size: 14px; font-weight: 600; color: var(--navy); }
.ve-mail-row .ce { font-size: 12px; color: var(--navy-soft); }

/* ---------- Help&Go!: píldora ---------- */
.hg-pill { gap: 12px; transition: transform 140ms ease, border-color 140ms ease; border: 1px solid transparent; }
.hg-pill.drop { border-color: rgba(30, 150, 255, 0.55); border-width: 2px; min-width: 230px; }
.hg-pill.hot { border-color: var(--blue); border-width: 2px; min-width: 230px; }
.hg-pill.added { border-color: #12B76A; border-width: 2px; }
.hg-pill.rec { border-color: #F04438; border-width: 2px; }
.hg-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hg-name { font-size: 15px; font-weight: 700; color: var(--navy); }
.hg-sub { max-width: 170px; font-size: 11.5px; font-weight: 600; color: #6C7686; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-badge { padding: 3px 8px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 800; }
.hg-added-tx { font-size: 15px; font-weight: 700; color: #12B76A; }
.hg-drop-tx { font-size: 15px; font-weight: 700; color: var(--navy); }
.hg-drop-tx.hot { color: var(--blue); }
.hg-rec-t { font-size: 17px; font-weight: 800; color: #F04438; font-variant-numeric: tabular-nums; }
.hg-pill.rec .material-symbols-outlined { animation: rec-blink 1100ms ease-in-out infinite; }

/* chip fantasma bajo el dedo */
.hg-chip { position: fixed; left: 0; top: 0; z-index: 400; max-width: 260px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border: 1px solid #E3E7EE; border-radius: 12px; box-shadow: var(--soft-shadow); pointer-events: none; }
.hg-chip .tx { font-size: 13.5px; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Help&Go!: panel-tablón ---------- */
.hg-dialog { background: #fff; border-radius: 20px; box-shadow: var(--soft-shadow); display: flex; flex-direction: column; overflow: hidden; transition: width 200ms ease; }
.hg-head { display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px 24px; border-bottom: 1px solid #E3E7EE; }
.hg-head .t { flex: 1; font-size: 21px; font-weight: 800; color: var(--navy); }
.hg-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 20px; border-bottom: 1px solid #E3E7EE; }
.hg-toolbar .grow { flex: 1; }
.hg-count { font-size: 13px; font-weight: 700; color: #6C7686; }
.hg-tool { width: 44px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid; background: #fff; cursor: pointer; }
.hg-send { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; }
.hg-clear-q { font-size: 13px; font-weight: 700; color: #F04438; }
.hg-lnk { padding: 8px 10px; font-size: 13px; font-weight: 700; color: #6C7686; cursor: pointer; }
.hg-lnk.red { color: #F04438; font-weight: 800; }
.hg-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; justify-content: center; }
.hg-empty { padding: 30px 36px 34px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hg-empty .tx { font-size: 14.5px; line-height: 1.5; color: #6C7686; text-align: center; }
.hg-empty .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hg-empty-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1px solid; background: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.hg-board { position: relative; flex: none; margin: 0 auto; }
.hg-card { position: absolute; width: 196px; padding: 10px 8px 12px 12px; background: #fff; border: 1.2px solid #E3E7EE; border-radius: 12px; box-shadow: var(--soft-shadow); }
.hg-card-top { display: flex; align-items: center; gap: 6px; }
.hg-card-top .kind { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-card-top .x { display: flex; padding: 4px; cursor: pointer; color: #6C7686; }
.hg-thumb { margin-top: 8px; width: 100%; height: 82px; object-fit: cover; border-radius: 8px; background: #F2F4F8; }
.hg-thumb.broken { object-fit: none; }
.hg-title { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--navy); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hg-note { margin-top: 6px; font-size: 11.5px; line-height: 1.35; color: #6C7686; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hg-when { margin-top: 6px; font-size: 11px; font-weight: 600; color: #6C7686; }
.hg-motion { position: relative; margin-top: 8px; height: 82px; border-radius: 8px; overflow: hidden; background: #F2F4F8; cursor: pointer; }
.hg-motion img { width: 100%; height: 100%; object-fit: cover; }
.hg-motion .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, 0.38); display: flex; align-items: center; justify-content: center; }
.hg-motion .dur { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.54); color: #fff; font-size: 10.5px; font-weight: 700; }
.hg-voice { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.hg-voice .pv { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hg-voice .tt { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Help&Go!: editores ---------- */
.hg-editor { width: 460px; max-width: calc(100vw - 80px); background: #fff; border-radius: 20px; box-shadow: var(--soft-shadow); overflow: hidden; }
.hg-ed-head { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px 24px; border-bottom: 1px solid #E3E7EE; }
.hg-ed-head .t { flex: 1; font-size: 19px; font-weight: 800; color: var(--navy); }
.hg-ed-body { padding: 18px 24px 20px; }
.hg-ed-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.hg-rec-body { padding: 26px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hg-rec-btn { width: 88px; height: 88px; border-radius: 50%; border: 2px solid #7A5AF8; background: rgba(122, 90, 248, 0.10); color: #7A5AF8; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 180ms ease; }
.hg-rec-btn.on { background: #F04438; border-color: #F04438; color: #fff; }
.hg-rec-time { font-size: 30px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.hg-rec-time.rec { color: #F04438; }
.hg-rec-hint { font-size: 13px; line-height: 1.4; font-weight: 600; color: #6C7686; text-align: center; }
.hg-rec-hint.err { color: #F04438; }
.hg-clip { position: relative; margin: 16px; height: min(52vh, 460px); border-radius: 12px; overflow: hidden; background: #F2F4F8; cursor: pointer; }
.hg-clip img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.hg-clip .pp { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; }
.hg-clip-missing { height: 100%; display: flex; align-items: center; justify-content: center; color: #B0B6C0; }
.hg-send-list { flex: 1; min-height: 120px; overflow-y: auto; padding: 6px 12px; }
.hg-send-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.hg-send-row .cn { font-size: 14px; font-weight: 600; color: var(--navy); }
.hg-send-row .ce { font-size: 12px; color: var(--navy-soft); }

/* ---------- ShowPad: diálogo ---------- */
.sp-dialog { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; }
.sp-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 18px 12px 28px; flex: none; }
.sp-head .t1 { font-size: 22px; font-weight: 800; color: #1C2230; }
.sp-head .t2 { margin-top: 3px; font-size: 13px; color: #6B7280; }
.sp-head .grow { flex: 1; min-width: 0; }
.sp-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; padding: 4px 28px 10px; }
.sp-left { flex: 47; min-width: 0; }
.sp-sep { width: 1px; margin: 0 24px; background: #E2E4E9; flex: none; }
.sp-right { flex: 53; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.sp-block .a { font-size: 15px; font-weight: 800; color: #1C2230; }
.sp-block .b { margin-top: 3px; font-size: 12.5px; color: #6B7280; line-height: 1.35; }

/* monitor de maqueta */
.sp-monitor { margin-top: 14px; display: flex; flex-direction: column; align-items: center; }
.sp-screen { width: 100%; max-width: 260px; aspect-ratio: 16 / 10; background: #111214; border: 6px solid #26272B; border-radius: 12px; padding: 5px; }
.sp-neck { width: 30px; height: 16px; background: #26272B; }
.sp-base { width: 132px; height: 9px; background: #26272B; border-radius: 0 0 6px 6px; }
.sp-hero-thumb { position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, #F5F6F9, #E2E5EC); }
.sp-hero-thumb .glow { position: absolute; left: 20%; bottom: -30%; width: 60%; height: 80%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); }
.sp-hero-thumb .ht-row { position: absolute; inset: 8px 10px; display: flex; gap: 8px; }
.sp-hero-thumb .ht-left { flex: 1; min-width: 0; }
.sp-hero-thumb .wordmark { font-size: 9px; font-weight: 600; color: var(--navy); }
.sp-hero-thumb .wordmark span { color: var(--blue); font-weight: 800; }
.sp-hero-thumb .ht-name { margin-top: 3px; font-size: 12.5px; font-weight: 800; color: var(--navy); letter-spacing: -0.2px; }
.sp-hero-thumb .ht-tag { margin-top: 2px; font-size: 8.5px; line-height: 1.25; color: var(--navy-soft); }
.sp-hero-thumb .ht-chips { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 3px; }
.sp-hero-thumb .mini { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 4px; background: #fff; border: 1px solid #E3E6EB; font-size: 6.5px; font-weight: 700; color: var(--navy); }
.sp-hero-thumb .mini .material-symbols-outlined { color: var(--blue); }
.sp-hero-thumb .ht-glyph { width: 34%; display: flex; align-items: center; justify-content: center; }
.sp-hero-thumb .ht-glyph .scr { width: 82%; aspect-ratio: 3 / 4; border-radius: 6px; background: linear-gradient(160deg, #B9C1CC, #8F99A8 55%, #6E7887); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 4px 8px rgba(0, 0, 0, 0.18); position: relative; }
.sp-hero-thumb .ht-glyph .scr::after { content: ''; position: absolute; left: 16%; top: 12%; width: 68%; height: 26%; border-radius: 3px; background: #2C3344; }

/* presets de diseño */
.sp-presets { margin-top: 12px; display: flex; gap: 10px; }
.sp-preset { position: relative; flex: 1; height: 104px; border: 1.3px solid #E2E4E9; border-radius: 12px; background: #fff; padding: 10px 10px 8px; cursor: pointer; display: flex; flex-direction: column; }
.sp-preset.on { border-color: var(--blue); border-width: 1.8px; background: rgba(30, 150, 255, 0.05); }
.sp-preset .wire { flex: 1; display: flex; gap: 5px; align-items: stretch; }
.sp-preset .nm { margin-top: 6px; font-size: 12px; font-weight: 800; color: #1C2230; text-align: center; }
.sp-preset .ck { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.sp-preset .wire i { display: block; background: #D6DBE3; border-radius: 2px; }
.sp-preset .w-big { flex: 1.4; background: #C9D6E6; border-radius: 5px; }
.sp-preset .w-col { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.sp-preset .w-col i { height: 6px; }
.sp-preset .w-half { flex: 1; background: #C9D6E6; border-radius: 5px; }
.sp-preset .w-half.r { background: transparent; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.sp-preset .w-half.r i { height: 6px; }
.sp-preset .w-slide { flex: 1; background: #C9D6E6; border-radius: 5px; }
.sp-preset .w-dots { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; gap: 4px; justify-content: center; }
.sp-preset .w-dots i { width: 5px; height: 5px; border-radius: 50%; background: #C4C9D2; }
.sp-preset .w-dots i.on { width: 12px; border-radius: 3px; background: var(--blue); }

/* tarjetas de la derecha */
.sp-card { border: 1px solid #E2E4E9; border-radius: 14px; background: #FAFBFC; padding: 12px 14px 6px; }
.sp-card .ct { font-size: 13px; font-weight: 800; color: #1C2230; margin-bottom: 4px; }
.sp-toggle { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.sp-toggle .tt { flex: 1; min-width: 0; }
.sp-toggle .tt .a { font-size: 13px; font-weight: 600; color: #1C2230; }
.sp-toggle .tt .b { margin-top: 2px; font-size: 11px; color: #6B7280; line-height: 1.3; }
.sp-toggle .switch { transform: scale(0.82); transform-origin: right center; }
.sp-stepper { display: flex; align-items: center; gap: 6px; }
.sp-stepper .v { min-width: 32px; text-align: right; font-size: 13px; font-weight: 800; color: #1C2230; font-variant-numeric: tabular-nums; }
.sp-stepper .arrows { display: flex; flex-direction: column; }
.sp-stepper .up, .sp-stepper .dn { display: flex; padding: 0 3px; cursor: pointer; color: #1C2230; border: 1px solid #E2E4E9; background: #fff; }
.sp-stepper .up { border-radius: 6px 6px 0 0; }
.sp-stepper .dn { border-radius: 0 0 6px 6px; border-top: 0; }
.sp-langs { display: flex; gap: 6px; padding: 4px 0 8px; }
.sp-lang { flex: 1; text-align: center; padding: 7px 0; border-radius: 8px; border: 1.2px solid #E2E4E9; background: #fff; font-size: 11.5px; font-weight: 800; color: #6B7280; letter-spacing: 0.5px; cursor: pointer; }
.sp-lang.on { border-color: var(--blue); color: var(--blue); background: rgba(30, 150, 255, 0.08); }
.sp-logo-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-radius: 9px; background: #fff; border: 1px solid #E2E4E9; }
.sp-logo-pill img { height: 22px; }
.sp-logo-pill .tx { font-size: 11.5px; font-weight: 700; color: #1C2230; }
.sp-logo-pill .x { display: flex; padding: 2px; cursor: pointer; color: #6B7280; }
.sp-upload { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 9px; border: 1.2px solid var(--blue); background: #fff; color: var(--blue); font-size: 12px; font-weight: 800; cursor: pointer; }
.sp-msg { padding: 4px 0 10px; }
.sp-msg .lbl { font-size: 12px; font-weight: 700; color: #6B7280; margin-bottom: 6px; }
.sp-msg .cnt { margin-top: 4px; text-align: right; font-size: 10.5px; color: #9AA1AB; }
.sp-foot { display: flex; align-items: center; gap: 10px; padding: 12px 24px 16px 28px; border-top: 1px solid #E2E4E9; flex: none; }
.sp-foot .grow { flex: 1; }
.sp-foot .js-preview { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- ShowPad: pantalla ---------- */
.sp-screen-root { position: fixed; inset: 0; z-index: 300; overflow: hidden; background: linear-gradient(180deg, #F6F8FB, #E7EBF1); }
.sp-stage-bg { position: absolute; inset: 0; pointer-events: none; }
.sp-stage-bg .glow { position: absolute; left: 42%; top: 58%; width: 84vmin; height: 84vmin; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0)); }
.sp-stage-bg .shadow { position: absolute; left: 42%; top: 80%; width: 50vw; height: 16vh; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0)); border-radius: 50%; }
.sp-viewer-layer { position: absolute; z-index: 1; }
.sp-viewer-layer iframe { width: 100%; height: 100%; border: 0; background: transparent; transition: opacity 500ms ease; }
.sp-content { position: absolute; inset: 0 0 66px 0; z-index: 2; }
.sp-prodstage { position: relative; height: 100%; }
.sp-stagein { position: relative; width: 100%; height: 100%; pointer-events: none; }
.sp-graphic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sp-tag { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.85); border: 1px solid #E3E6EB; font-size: 12.5px; font-weight: 700; color: var(--navy); pointer-events: auto; }
.sp-tag .material-symbols-outlined { color: var(--blue); }
.sp-eye { position: absolute; top: 6px; left: 6px; color: var(--navy); cursor: pointer; pointer-events: auto; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.26)); }
.sp-name { margin-top: 10px; font-size: 52px; line-height: 1.02; font-weight: 800; color: var(--navy); letter-spacing: -1px; }
.sp-tagline { margin-top: 14px; font-size: 21px; line-height: 1.3; font-weight: 500; color: var(--navy-soft); }
.sp-sect-title { font-size: 30px; font-weight: 800; color: var(--navy); margin-bottom: 20px; }
.sp-wordmark { font-size: 22px; font-weight: 600; color: var(--navy); letter-spacing: -0.3px; }
.sp-wordmark span { color: var(--blue); font-weight: 800; }
.sp-wordmark.small { font-size: 18px; }
.sp-eyebrow-logo { height: 26px; }
.sp-eyebrow-logo.small { height: 24px; }
.sp-specs { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.sp-specs .chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 11px; background: #fff; border: 1px solid #E3E6EB; box-shadow: var(--soft-shadow); font-size: 15.5px; font-weight: 700; color: var(--navy); }
.sp-features { margin-top: 22px; }
.sp-features .row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sp-features .ck { margin-top: 2px; width: 22px; height: 22px; border-radius: 50%; background: rgba(30, 150, 255, 0.12); display: flex; align-items: center; justify-content: center; flex: none; }
.sp-features .tx { font-size: 16.5px; line-height: 1.3; font-weight: 600; color: var(--navy); }
.sp-features.big .tx { font-size: 19px; }
.sp-imgstrip { margin-top: 22px; display: flex; gap: 12px; height: 92px; }
.sp-imgstrip.tallrow { height: auto; gap: 20px; margin-top: 0; }
.sp-imgframe { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 14px; background: #fff; border: 1px solid #E3E6EB; box-shadow: var(--soft-shadow); overflow: hidden; }
.sp-imgframe .ph { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F1F3F6, #E3E7EC); }
.sp-imgframe .lb { padding: 9px 12px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.sp-imgframe.tall { height: 320px; }
.sp-qrcard { margin-top: 22px; display: inline-flex; align-items: center; gap: 18px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid #E3E6EB; box-shadow: var(--soft-shadow); }
.sp-qrcard .qrbox { flex: none; border-radius: 10px; overflow: hidden; background: #fff; }
.sp-qrcard canvas { width: 100%; height: 100%; display: block; }
.sp-qrcard .a { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--navy); }
.sp-qrcard .b { margin-top: 8px; line-height: 1.3; font-weight: 500; color: var(--navy-soft); }
.sp-videocard .tt { font-size: 34px; font-weight: 800; color: var(--navy); margin-bottom: 22px; }
.sp-videocard .vv { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; background: linear-gradient(135deg, #20324B, #101A2A); box-shadow: var(--soft-shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.sp-videocard .pl { width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); border: 2px solid rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center; }
.sp-videocard .cap { color: #fff; font-size: 18px; font-weight: 600; }
.sp-dots { position: absolute; left: 0; right: 0; bottom: 86px; display: flex; justify-content: center; gap: 10px; }
.sp-dots span { width: 9px; height: 9px; border-radius: 5px; background: #C6CCD6; transition: width 250ms ease, background 250ms ease; }
.sp-dots span.on { width: 26px; background: var(--blue); }

/* diseños */
.sp-hero { height: 100%; padding: 40px 40px 30px; display: flex; gap: 24px; }
.sp-hero .sp-prodstage { flex: 58; min-width: 0; }
.sp-hero-right { flex: 42; min-width: 0; display: flex; align-items: center; overflow-y: auto; }
.sp-hero-right .inner { max-height: 100%; padding: 6px 2px; }
.sp-split { height: 100%; padding: 36px 36px 30px; display: flex; }
.sp-split-left { flex: 1; min-width: 0; position: relative; }
.sp-split-left .sp-prodstage { position: absolute; inset: 0; }
.sp-split-over { position: absolute; left: 8px; top: 8px; right: 8px; pointer-events: none; }
.sp-split-sep { width: 1px; margin: 0 28px 0 8px; background: rgba(34, 58, 91, 0.08); flex: none; }
.sp-split .sp-hero-right { flex: 1; }
.sp-carousel { position: relative; height: 100%; }
.sp-car-base { position: absolute; inset: 40px 40px 44px; }
.sp-car-hero { position: absolute; inset: 0 56px 64px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; opacity: 0; transition: opacity 450ms ease; pointer-events: none; }
.sp-car-hero.show { opacity: 1; }
.sp-car-slide { position: absolute; inset: 0; padding: 48px 48px 52px; opacity: 0; transition: opacity 450ms ease; pointer-events: none; }
.sp-car-slide.show { opacity: 1; pointer-events: auto; }
.sp-stagecard { width: 100%; height: 100%; border-radius: 24px; background: linear-gradient(180deg, #fff, #F4F6F9); border: 1px solid #E3E6EB; box-shadow: var(--soft-shadow); padding: 40px; display: flex; align-items: center; justify-content: center; }
.sp-stagecard .scroll { max-height: 100%; overflow-y: auto; width: 100%; max-width: 980px; }

/* pie, salida e insignia */
.sp-footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 66px; padding: 0 28px; display: flex; align-items: center; gap: 18px; background: rgba(255, 255, 255, 0.72); border-top: 1px solid rgba(34, 58, 91, 0.07); backdrop-filter: blur(6px); }
.sp-footer .vr { width: 1px; height: 26px; background: rgba(34, 58, 91, 0.10); }
.sp-footer .msg { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-footer .lang { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 20px; background: rgba(30, 150, 255, 0.10); color: var(--blue); }
.sp-footer .lc { font-size: 13.5px; font-weight: 800; letter-spacing: 0.5px; }
.sp-exit { position: absolute; top: 22px; right: 26px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 22px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); color: var(--navy); font-size: 15px; font-weight: 700; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
.sp-exit.show { opacity: 1; pointer-events: auto; }
.sp-badge { position: absolute; top: 24px; left: 28px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: var(--navy); color: #fff; box-shadow: var(--soft-shadow); font-size: 12.5px; font-weight: 800; letter-spacing: 1.2px; }

/* ---------- panel de iluminación (fiel al original) ---------- */
.lgt-panel { display: flex; flex-direction: column; max-height: calc(100vh - 120px); }
.lgt-body { overflow-y: auto; padding: 12px 14px 14px; }
.lgt-sect { margin: 14px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; color: var(--navy-soft); }
.lgt-sect:first-child { margin-top: 0; }
.lgt-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.lgt-chip { padding: 7px 12px; border: 1px solid var(--divider); border-radius: 9px; background: #fff; font-size: 12.5px; font-weight: 700; color: var(--navy); cursor: pointer; }
.lgt-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.lgt-seg { display: flex; padding: 3px; background: #fff; border: 1px solid var(--divider); border-radius: 10px; }
.lgt-seg .opt { flex: 1; padding: 8px 0; text-align: center; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--navy-soft); cursor: pointer; }
.lgt-seg .opt.on { background: var(--blue); color: #fff; }
.lgt-seg + .lgt-row, .lgt-seg { margin-bottom: 8px; }
.lgt-row { margin-bottom: 6px; }
.lgt-row .lr-top { display: flex; align-items: center; gap: 6px; }
.lgt-row .lr-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--navy); }
.lgt-row .lr-val { font-size: 12px; font-weight: 700; color: var(--navy-soft); font-variant-numeric: tabular-nums; }
.lgt-row input[type="range"] { width: 100%; accent-color: var(--blue); margin: 4px 0 0; }
.lgt-row .lr-ends { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 600; color: var(--navy-soft); margin-top: -2px; }
.lgt-div { height: 1px; background: var(--divider); margin: 12px 0; }
.lgt-group { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; font-weight: 800; color: var(--navy); }
.lgt-group .g { font-size: 13px; font-weight: 800; }
.lgt-reset { width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 0; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.lgt-reset.off { background: #E6E8ED; color: var(--navy-soft); cursor: default; }

/* ---------- ficha del elemento (botón i de la tarjeta) ---------- */
.pinfo {
  box-sizing: border-box;
  width: 343px;
  min-height: 238px;
  max-width: calc(100vw - 24px);
  border: 1.4px solid rgba(100, 212, 231, 0.92);
  border-radius: 16px;
  box-shadow:
    0 0 0 0.5px rgba(100, 212, 231, 0.42),
    0 0 11px rgba(100, 212, 231, 0.18),
    0 10px 26px rgba(0, 0, 0, 0.18);
}
.pinfo .fp-head {
  min-height: 48px;
  padding: 10px 12px 9px;
  gap: 9px;
  border-bottom: 1px solid rgba(91, 105, 130, 0.28);
}
.pinfo .fp-title { font-size: 14px; font-weight: 800; letter-spacing: 0.1px; }
.pinfo .pinfo-drag { opacity: 0.72; }
.pinfo .pinfo-info-icon { opacity: 0.9; }
.pinfo .fp-head .x { padding: 1px; }
.pinfo-body { padding: 11px 13px 15px; }
.pinfo-name { font-size: 14.5px; font-weight: 800; color: #1C2230; line-height: 1.25; }
.pinfo-ref { margin-top: 2px; font-size: 12px; font-weight: 800; letter-spacing: 0.35px; color: var(--navy-soft); }
.pinfo-description { display: none; margin-top: 7px; font-size: 12.5px; font-weight: 500; line-height: 1.22; color: var(--navy); }
.pinfo-pneumatic { display: none; }
.pinfo.pinfo-heat-sealing {
  width: 343px !important;
  min-height: 238px;
}
.pinfo.pinfo-heat-sealing .pinfo-description { display: block; }
.pinfo.pinfo-heat-sealing .pinfo-details { display: none; }
.pinfo.pinfo-heat-sealing .pinfo-description {
  line-height: 1.38;
  margin-top: 8px;
}
.pinfo.pinfo-heat-sealing .pinfo-pneumatic {
  display: block;
  margin-top: 11px;
  padding-top: 8px;
  border-top: 1px solid rgba(32,58,99,.13);
}
.pinfo-schematic-title {
  margin: 0 0 2px 1px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .55px;
  color: #6E7F99;
}
.pinfo-schematic {
  display: block;
  width: 100%;
  height: 112px;
  overflow: visible;
}
.pinfo-svg-shape {
  fill: rgba(234,244,255,.62);
  stroke: #4E698D;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}
.pinfo-svg-line {
  fill: none;
  stroke: #3D5E86;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pinfo-svg-line.thin { stroke-width: 1; }
.pinfo-svg-fill { fill: #3D5E86; }
.pinfo-svg-text {
  fill: #4D6483;
  font-size: 7.5px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
}
.pinfo-svg-text.port { font-size: 7px; }
.pinfo-svg-text.heater-label { font-size: 6.8px; }
.pinfo-heater {
  fill: #27384E;
  opacity: .82;
}
.pinfo-svg-shape.heater-frame { fill: rgba(245,248,252,.86); }
.pinfo-lbl { margin-top: 12px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--navy-soft); }
.pinfo-path { margin-top: 4px; font-size: 12px; line-height: 1.45; color: #3A465B; }
.pinfo-row { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; }
.pinfo-row .k { font-size: 12px; font-weight: 700; color: var(--navy-soft); }
.pinfo-row .v { font-size: 14px; font-weight: 800; color: #1C2230; }
.pinfo-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.pinfo-chip { padding: 4px 9px; border: 1.3px solid; border-radius: 999px; font-size: 11px; font-weight: 800; }

/* ---------- ShowPad: el contenido deja pasar el puntero al visor ---------- */
.sp-content { pointer-events: none; }
.sp-hero-right, .sp-stagecard, .sp-tag, .sp-eye { pointer-events: auto; }
.sp-car-slide:not(.show) .sp-stagecard { pointer-events: none; }

/* ---------- gestor de asignaciones de animación (3D Parts Explorer) ---------- */
.anim-assign-panel {
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 94px);
  border: 1px solid rgba(100, 212, 231, 0.46);
  box-shadow: 0 0 10px rgba(100, 212, 231, 0.09), 0 10px 26px rgba(0, 0, 0, 0.18);
}
.anim-assign-body { overflow-y: auto; padding: 3px 14px 14px; }
.aa-section { padding: 12px 0 13px; border-bottom: 1px solid var(--divider); }
.aa-section:last-child { border-bottom: 0; padding-bottom: 2px; }
.aa-label { font-size: 12px; font-weight: 850; letter-spacing: .48px; text-transform: uppercase; color: var(--navy); }
.aa-hint { margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: var(--navy-soft); }
.aa-takes { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.aa-take {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px;
  min-height: 38px; padding: 5px 6px 5px 10px; border: 1px solid var(--divider);
  border-radius: 10px; background: var(--panel);
}
.aa-take-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; color: var(--navy); }
.aa-take-meta { font-size: 10.5px; font-weight: 650; color: var(--navy-soft); white-space: nowrap; }
.aa-preview, .aa-remove, .aa-delete-take {
  border: 1px solid var(--divider); background: transparent; color: var(--navy-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.aa-take-actions { display: inline-flex; align-items: center; gap: 5px; }
.aa-preview { width: 30px; height: 30px; border-radius: 50%; }
.aa-delete-take { width: 30px; height: 30px; border-radius: 8px; }
.aa-delete-take .material-symbols-outlined { font-size: 17px; }
.aa-delete-take:hover { border-color: #F04438; color: #F04438; background: rgba(240,68,56,.06); }
.aa-preview .material-symbols-outlined { font-size: 18px; }
.aa-preview:hover, .aa-preview.on { border-color: #64D4E7; color: var(--navy); box-shadow: 0 0 8px rgba(100,212,231,.22); }
.aa-hmi-grid { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aa-map-row, .aa-field { display: flex; flex-direction: column; gap: 5px; }
.aa-map-name, .aa-field-label { font-size: 11.5px; font-weight: 750; color: var(--navy-soft); }
.aa-map-row select, .aa-field select {
  width: 100%; height: 34px; padding: 0 28px 0 9px; border: 1px solid var(--divider); border-radius: 9px;
  background: var(--panel); color: var(--navy); font: inherit; font-size: 12px; font-weight: 650; outline: none;
}
.aa-map-row select:focus, .aa-field select:focus { border-color: #64D4E7; box-shadow: 0 0 0 1px rgba(100,212,231,.18); }
.aa-field { margin-top: 9px; }
.aa-effective { min-height: 16px; margin-top: 6px; font-size: 10.5px; font-weight: 650; color: var(--navy-soft); }
.aa-assigned-title { margin-top: 12px; font-size: 11.5px; font-weight: 800; color: var(--navy); }
.aa-assigned-list { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.aa-assigned-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto 28px; gap: 8px; align-items: center;
  min-height: 34px; padding: 4px 5px 4px 9px; border: 1px solid var(--divider); border-radius: 9px;
}
.aa-assigned-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--navy); }
.aa-assigned-take { padding: 3px 7px; border-radius: 999px; background: rgba(53,161,255,.10); color: var(--blue); font-size: 10.5px; font-weight: 850; }
.aa-remove { width: 28px; height: 28px; border-radius: 8px; }
.aa-remove .material-symbols-outlined { font-size: 16px; }
.aa-remove:hover { border-color: #F04438; color: #F04438; }
.aa-empty { padding: 8px 2px 3px; font-size: 11.5px; line-height: 1.35; color: var(--navy-soft); }


/* ========================================================================== */
/* VIDEO v44 · Adjust / Bandeja de verificación                              */
/* ========================================================================== */
.adjust-tray-panel {
  width: 390px;
  min-height: 430px;
  z-index: 1310;
  overflow: hidden;
}
.adjust-tray-panel[hidden] { display: none !important; }
.adjust-head-icon { color: #1E96FF; }
.adjust-tray-body { padding: 13px 14px 14px; }
.adjust-machine-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 2px 2px 12px;
}
.adjust-machine-name { font-size:14.5px; font-weight:850; color:#1C2230; letter-spacing:.05px; }
.adjust-machine-axis {
  margin-top:4px; display:flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:700; color:#64748B;
}
.adjust-machine-axis .material-symbols-outlined { font-size:16px; color:#1E96FF; }
.adjust-state-pill {
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  height:25px; padding:0 9px; border:1px solid #D7DEE8; border-radius:999px;
  background:#F6F8FB; color:#52637A; font-size:9.5px; font-weight:900; letter-spacing:.75px;
}
.adjust-state-pill i { width:7px; height:7px; border-radius:50%; background:#34B56A; box-shadow:0 0 0 3px rgba(52,181,106,.11); }
.adjust-tray-panel.is-moving .adjust-state-pill { color:#176EA8; border-color:#BBDCF3; background:#EFF8FE; }
.adjust-tray-panel.is-moving .adjust-state-pill i { background:#1E96FF; box-shadow:0 0 0 3px rgba(30,150,255,.12); animation:adjustPulse 1s ease-in-out infinite; }
.adjust-tray-panel.target-missing .adjust-state-pill i { background:#D95C55; box-shadow:0 0 0 3px rgba(217,92,85,.12); }
@keyframes adjustPulse { 50% { opacity:.4; transform:scale(.82); } }
.adjust-position-card {
  border:1px solid #D2DBE6; border-radius:14px; padding:12px 13px 11px;
  background:linear-gradient(180deg,#FCFDFE 0%,#F2F5F8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(34,53,78,.04);
}
.adjust-position-top { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.adjust-position-top > span { font-size:11px; font-weight:850; color:#67758A; text-transform:uppercase; letter-spacing:.55px; }
.adjust-position-top strong { color:#203A63; font-size:25px; line-height:1; font-variant-numeric:tabular-nums; }
.adjust-position-top strong small { font-size:11px; font-weight:800; color:#718096; }
.adjust-track {
  position:relative; height:19px; margin-top:9px; overflow:visible;
  display:flex; align-items:center;
}
.adjust-track::before {
  content:""; position:absolute; left:0; right:0; top:50%; height:7px; margin-top:-3.5px;
  border-radius:999px; background:linear-gradient(180deg,#CDD5DF,#E7ECF1);
  box-shadow:inset 0 1px 2px rgba(30,45,63,.22),0 1px 0 #fff;
}
.adjust-track-fill {
  position:absolute; left:0; top:50%; height:7px; margin-top:-3.5px; width:0;
  border-radius:999px; background:linear-gradient(90deg,#72D1EB,#2196F3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 7px rgba(30,150,255,.15);
  transition:width 55ms linear; pointer-events:none;
}
.adjust-track-marker {
  pointer-events:none; position:absolute; top:50%; left:0; z-index:2;
  width:17px; height:17px; margin-left:-8.5px; margin-top:-8.5px;
  border-radius:50%; background:linear-gradient(180deg,#FFFFFF,#E8EDF3); border:2px solid #168DE0;
  box-shadow:0 2px 7px rgba(30,81,130,.24),inset 0 1px 0 #fff;
  transition:left 55ms linear;
}
.adjust-range-input {
  -webkit-appearance:none; appearance:none; position:absolute; inset:0; width:100%; height:19px;
  margin:0; padding:0; border:0; background:transparent; cursor:ew-resize; z-index:3;
  opacity:.001; outline:none !important; box-shadow:none !important;
}
.adjust-range-input:focus,.adjust-range-input:focus-visible,.adjust-range-input:active {
  outline:none !important; box-shadow:none !important; border:0 !important;
}
.adjust-range-input::-webkit-slider-runnable-track { height:19px; background:transparent; border:0; }
.adjust-range-input::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:24px; height:24px; margin-top:-2.5px;
  border:0; border-radius:50%; background:transparent; box-shadow:none;
}
.adjust-range-input::-moz-range-track { height:19px; background:transparent; border:0; }
.adjust-range-input::-moz-range-progress { background:transparent; }
.adjust-range-input::-moz-range-thumb { width:24px; height:24px; border:0; border-radius:50%; background:transparent; box-shadow:none; }
.adjust-range-input:disabled { cursor:default; }
.adjust-tray-panel.is-scrubbing .adjust-track-marker {
  border-color:#00A5E8; box-shadow:0 0 0 4px rgba(0,165,232,.12),0 2px 7px rgba(30,81,130,.24);
}
.adjust-scale { display:flex; align-items:center; justify-content:space-between; margin-top:5px; color:#8A96A7; font-size:9px; font-weight:850; letter-spacing:.55px; }
.adjust-scale b { color:#40546E; font-size:10px; font-variant-numeric:tabular-nums; }
.adjust-button-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:13px; }
.adjust-command {
  appearance:none; -webkit-appearance:none; position:relative; min-height:76px; padding:10px 8px 9px;
  border:1px solid #AEB9C6; border-radius:11px; color:#24384E; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-family:inherit;
  background:
    linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.55) 14%,rgba(0,0,0,.025) 100%),
    linear-gradient(180deg,#EEF2F5 0%,#DDE3E8 52%,#CDD4DB 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(70,84,100,.15),
    0 4px 0 #AAB4BE,
    0 5px 8px rgba(27,43,62,.15);
  text-shadow:0 1px 0 rgba(255,255,255,.8);
  transition:transform .08s ease,box-shadow .08s ease,border-color .12s ease,filter .12s ease;
  outline:none !important;
}
.adjust-command::before {
  content:""; position:absolute; width:8px; height:8px; right:9px; top:8px; border-radius:50%;
  background:#8B949E; border:1px solid rgba(50,60,72,.45);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.9);
  transition:background .12s ease,box-shadow .12s ease,opacity .12s ease;
}
.adjust-command:hover:not(:disabled) { filter:brightness(1.035); border-color:#91A2B4; }
.adjust-command:active:not(:disabled),.adjust-command.physically-pressed:not(:disabled) {
  transform:translateY(3px);
  box-shadow:inset 0 2px 4px rgba(37,53,70,.18),0 1px 0 #AAB4BE,0 2px 3px rgba(27,43,62,.11);
}
.adjust-command:focus,.adjust-command:focus-visible { outline:none !important; }
.adjust-command .material-symbols-outlined { font-size:24px; color:#435C76; filter:drop-shadow(0 1px 0 rgba(255,255,255,.8)); }
.adjust-command span:last-child { display:flex; flex-direction:column; align-items:center; min-width:0; }
.adjust-command b { font-size:11.5px; font-weight:900; line-height:1.15; }
.adjust-command small { margin-top:2px; color:#6F7F91; font-size:8.8px; font-weight:800; line-height:1.15; }
.adjust-command.primary-home {
  border-color:#9EB8CA;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.5) 16%,rgba(15,120,180,.04)),linear-gradient(180deg,#F0F7FA,#D8E6EC);
}
.adjust-command.primary-home .material-symbols-outlined { color:#167CAF; }
.adjust-command.auto .material-symbols-outlined { color:#385E88; }
.adjust-command.just-triggered::before {
  background:#74DC7B; box-shadow:0 0 0 3px rgba(74,198,82,.14),0 0 8px rgba(56,197,68,.58),inset 0 1px 0 rgba(255,255,255,.8);
}
.adjust-command.command-active {
  border-color:#6FA7C9;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(55,94,120,.14),0 4px 0 #8DA6B7,0 5px 9px rgba(30,102,150,.17);
}
.adjust-command.command-active::before,
.adjust-command.auto.running::before {
  background:#4ED66B;
  box-shadow:0 0 0 3px rgba(78,214,107,.16),0 0 10px rgba(48,210,76,.78),inset 0 1px 0 rgba(255,255,255,.9);
  animation:adjustLampBlink .72s ease-in-out infinite;
}
.adjust-command.auto.running .material-symbols-outlined { color:#1C84C6; animation:adjustSpin 1.15s linear infinite; }
@keyframes adjustLampBlink { 50% { opacity:.32; box-shadow:0 0 0 2px rgba(78,214,107,.07),0 0 3px rgba(48,210,76,.24); } }
@keyframes adjustSpin { to { transform:rotate(360deg); } }
.adjust-command:disabled { opacity:.40; cursor:default; transform:none; filter:saturate(.35); box-shadow:inset 0 1px 0 #fff,0 2px 0 #B8C0C8; }
.adjust-command:disabled::before { opacity:.45; }
.adjust-footline {
  margin-top:13px; padding-top:10px; border-top:1px solid #E3E8EF; display:flex; justify-content:space-between; gap:12px;
  color:#718096; font-size:9.5px; font-weight:750;
}
.adjust-footline > span { display:flex; align-items:center; gap:4px; }
.adjust-footline .material-symbols-outlined { font-size:14px; color:#7389A4; }
.adjust-footline b { color:#354B66; font-variant-numeric:tabular-nums; }
@media (max-width: 520px) {
  .adjust-tray-panel { width:min(390px,calc(100vw - 24px)); }
  .adjust-button-grid { gap:7px; }
}

/* ========================================================================== */
/* VIDEO v49 · fichas técnicas 25% mayores + croquis animados                */
/* ========================================================================== */
.pinfo-body { overflow: auto; max-height: calc(100vh - 146px); }
.pinfo-kicker { display:none; }
.pinfo-live-dot { display:none; width:8px; height:8px; border-radius:50%; margin-left:auto; background:#2ad1e6; box-shadow:0 0 0 3px rgba(42,209,230,.12),0 0 10px rgba(42,209,230,.65); animation:pinfo-live 1.65s ease-in-out infinite; }
.pinfo.pinfo-technical {
  width:430px !important;
  min-height:330px !important;
  max-width:calc(100vw - 24px);
  border-color:rgba(64,205,231,.96);
  box-shadow:0 0 0 1px rgba(64,205,231,.18),0 0 24px rgba(64,205,231,.16),0 18px 40px rgba(10,22,38,.22);
}
.pinfo.pinfo-technical .fp-head { min-height:60px; padding:12px 15px 11px; gap:11px; background:linear-gradient(180deg,rgba(246,252,255,.98),rgba(238,247,252,.96)); }
.pinfo.pinfo-technical .fp-title { font-size:17.5px; letter-spacing:.2px; }
.pinfo.pinfo-technical .pinfo-drag { font-size:22px !important; }
.pinfo.pinfo-technical .pinfo-info-icon { font-size:23px !important; color:#238fb6; }
.pinfo.pinfo-technical .pinfo-live-dot { display:block; }
.pinfo.pinfo-technical .fp-head .x { margin-left:0; }
.pinfo.pinfo-technical .pinfo-body { padding:15px 17px 18px; }
.pinfo.pinfo-technical .pinfo-kicker { display:block; margin-bottom:5px; font-size:10.5px; font-weight:900; letter-spacing:1.05px; color:#3f8fac; }
.pinfo.pinfo-technical .pinfo-name { font-size:18px; line-height:1.24; letter-spacing:.05px; }
.pinfo.pinfo-technical .pinfo-ref { margin-top:3px; font-size:14px; letter-spacing:.48px; }
.pinfo.pinfo-technical .pinfo-description { display:block; margin-top:10px; font-size:15.4px; line-height:1.46; color:#263b55; }
.pinfo.pinfo-technical .pinfo-details { display:none; }
.pinfo.pinfo-technical .pinfo-pneumatic { display:block; margin-top:13px; padding:11px 10px 7px; border:1px solid rgba(53,106,143,.16); border-radius:12px; background:linear-gradient(180deg,rgba(244,250,254,.94),rgba(233,244,251,.78)); box-shadow:inset 0 0 22px rgba(74,192,222,.06); overflow:hidden; }
.pinfo.pinfo-technical .pinfo-schematic-title { margin:0 0 5px 2px; font-size:10px; letter-spacing:.72px; color:#55718f; }
.pinfo.pinfo-technical .pinfo-schematic { width:100%; height:148px; }
.pinfo.pinfo-technical .pinfo-svg-shape { fill:rgba(236,247,253,.86); stroke:#4d7396; stroke-width:1.45; }
.pinfo.pinfo-technical .pinfo-svg-line { stroke:#365f83; stroke-width:1.55; }
.pinfo.pinfo-technical .pinfo-svg-text { font-size:8px; fill:#426681; }
.pinfo.pinfo-technical .pinfo-svg-text.small { font-size:6.8px; }
.pinfo.pinfo-technical .pinfo-svg-text.port { font-size:7.2px; }
.pinfo.pinfo-technical .pinfo-svg-text.heater-label { font-size:7px; }
.pinfo-tech-grid path { fill:none; stroke:rgba(55,105,140,.07); stroke-width:1; vector-effect:non-scaling-stroke; }
.pinfo-flow,.pinfo-electric-flow { stroke-dasharray:7 5; animation:pinfo-flow 1.05s linear infinite; filter:drop-shadow(0 0 2px rgba(42,196,225,.35)); }
.pinfo-flow.reverse { animation-direction:reverse; }
.pinfo-electric-flow { stroke:#2299c6 !important; stroke-dasharray:5 4; animation-duration:.78s; }
.pinfo-pulse { animation:pinfo-pulse 1.6s ease-in-out infinite; }
.pinfo-pulse-soft { animation:pinfo-pulse-soft 1.9s ease-in-out infinite; }
.pinfo-motion-rod,.pinfo-small-rods { transform-box:fill-box; transform-origin:left center; animation:pinfo-rod 2.8s cubic-bezier(.45,0,.55,1) infinite; }
.pinfo-small-rods { animation-duration:2.45s; }
.pinfo-dual-cylinder.lower .pinfo-small-rods { animation-delay:.08s; }
.pinfo-header-link,.pinfo-header-block { filter:drop-shadow(0 0 3px rgba(44,188,218,.28)); }
.pinfo-glow-hot { fill:#ff6d37; animation:pinfo-heater 1.45s ease-in-out infinite; }
.pinfo-glow-hot.d2 { animation-delay:.14s; }.pinfo-glow-hot.d3 { animation-delay:.28s; }.pinfo-glow-hot.d4 { animation-delay:.42s; }
.pinfo-motor-spin { transform-box:fill-box; transform-origin:center; animation:pinfo-motor 2.3s linear infinite; }
.pinfo-screw-thread { stroke-dasharray:4 3; animation:pinfo-screw 1s linear infinite; }
.pinfo-tray-carriage { transform-box:fill-box; transform-origin:center; animation:pinfo-tray 3.2s cubic-bezier(.45,0,.55,1) infinite; }
.pinfo-tray-shape { filter:drop-shadow(0 0 4px rgba(45,193,221,.38)); }
.pinfo-sensor { fill:#2fd3e8; stroke:#297695; stroke-width:1.2; animation:pinfo-sensor 1.6s ease-in-out infinite; }
.pinfo-sensor-b { animation-delay:.8s; }
@keyframes pinfo-live { 0%,100%{opacity:.45;transform:scale(.78)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes pinfo-flow { to{stroke-dashoffset:-24} }
@keyframes pinfo-pulse { 0%,100%{filter:drop-shadow(0 0 0 rgba(42,209,230,0))} 50%{filter:drop-shadow(0 0 5px rgba(42,209,230,.8));stroke:#2bc4df} }
@keyframes pinfo-pulse-soft { 0%,100%{filter:drop-shadow(0 0 0 rgba(42,209,230,0))} 50%{filter:drop-shadow(0 0 4px rgba(42,209,230,.48));stroke:#48a8c8} }
@keyframes pinfo-rod { 0%,12%,88%,100%{transform:translateX(0)} 45%,58%{transform:translateX(8px)} }
@keyframes pinfo-heater { 0%,100%{opacity:.54;fill:#9a4d34} 48%{opacity:1;fill:#ff8a42} }
@keyframes pinfo-motor { to{transform:rotate(360deg)} }
@keyframes pinfo-screw { to{stroke-dashoffset:-14} }
@keyframes pinfo-tray { 0%,12%,88%,100%{transform:translateY(-9px)} 45%,58%{transform:translateY(9px)} }
@keyframes pinfo-sensor { 0%,45%,100%{opacity:.35;filter:none} 55%,70%{opacity:1;filter:drop-shadow(0 0 4px rgba(47,211,232,.9))} }



/* Heat-sealing Block production summary: only requested process data + technical graphic. */
.pinfo.pinfo-production-dialog .pinfo-kicker,
.pinfo.pinfo-production-dialog .pinfo-name,
.pinfo.pinfo-production-dialog .pinfo-ref,
.pinfo.pinfo-production-dialog .pinfo-description,
.pinfo.pinfo-production-dialog .pinfo-details,
.pinfo.pinfo-production-dialog .pinfo-info-icon,
.pinfo.pinfo-production-dialog .pinfo-live-dot { display: none !important; }
.pinfo.pinfo-production-dialog .pinfo-production { display: grid !important; gap: 7px; margin: 0 0 10px; }
.pinfo-production-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(150px, 1.35fr);
  gap: 12px;
  align-items: baseline;
  padding: 7px 9px;
  border: 1px solid rgba(100, 212, 231, 0.16);
  border-radius: 9px;
  background: rgba(100, 212, 231, 0.035);
}
.pinfo-production-row .k { font-size: 10.5px; font-weight: 800; letter-spacing: .25px; color: #7890A8; text-transform: uppercase; }
.pinfo-production-row strong { font-size: 12.5px; font-weight: 800; color: #D9EEF4; text-align: right; }
.pinfo.pinfo-production-dialog .pinfo-pneumatic { margin-top: 4px; padding-top: 9px; }
.pinfo.pinfo-production-dialog { width: 390px !important; min-height: 0 !important; }


/* v122 — Heat-sealing Block: requested production-only dialog.
   Keep ONLY production data + the existing technical schematic. */
.pinfo.pinfo-production-dialog .pinfo-body { padding: 12px 14px 14px !important; }
.pinfo.pinfo-production-dialog .pinfo-kicker,
.pinfo.pinfo-production-dialog .pinfo-name,
.pinfo.pinfo-production-dialog .pinfo-ref,
.pinfo.pinfo-production-dialog .pinfo-description,
.pinfo.pinfo-production-dialog .pinfo-details,
.pinfo.pinfo-production-dialog .pinfo-info-icon,
.pinfo.pinfo-production-dialog .pinfo-live-dot { display:none !important; }
.pinfo.pinfo-production-dialog .pinfo-production { display:grid !important; gap:7px !important; margin:0 0 12px !important; }
.pinfo.pinfo-production-dialog .pinfo-pneumatic { display:block !important; margin:0 !important; padding-top:10px !important; border-top:1px solid rgba(100,212,231,.22) !important; }
.pinfo.pinfo-production-dialog { width:410px !important; min-height:0 !important; }
.pinfo.pinfo-production-dialog .pinfo-production-row strong { color:inherit; }
[data-theme="oscuro"] .pinfo.pinfo-production-dialog .pinfo-production-row strong { color:#D9EEF4 !important; }