/* =========================================================
   SmartLab · Almacén inteligente (anteproyecto)
   Se apoya en ../../assets/site.css (tipografía, colores, secciones,
   botones, aparición) y solo añade las piezas propias de esta práctica.
   Prefijo sl- en las clases para no chocar con site.js.
   ========================================================= */
:root{
  --ok:#1f8a4c;--warn:#a86a00;--crit:#d63a2f;--info:#2a6fdb;
  --floor:#f1ede4;--shelf:#d9cdb4;--wall:#3a3a3c;
  --dev:#0b0d12;--dev-2:#16181d;--dev-line:#23262d;--dev-ink:#f5f5f7;--dev-muted:#86868b;
}
:root[data-theme="dark"]{
  --ok:#4cd17f;--warn:#f2b45a;--crit:#ff6b5e;--info:#7fb2ff;
  --floor:#1c1c1e;--shelf:#3a3a3c;--wall:#a1a1a6;
}

.sl-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sl-note{font-size:.86rem;color:var(--muted)}
.sl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sl-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(20px,3vw,30px)}
.section.alt .sl-card{background:var(--card)}
.sl-card h3{font-size:1.3rem;letter-spacing:-.025em;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.sl-card h3 small{font-size:.8rem;font-weight:500;color:var(--muted);letter-spacing:0}
.sl-sub{font-size:clamp(1.6rem,3.4vw,2.4rem);text-align:center;margin:clamp(60px,9vw,100px) auto 12px;letter-spacing:-.035em}
.sl-sub + p{text-align:center;color:var(--muted);font-size:1.1rem;max-width:640px;margin:0 auto clamp(28px,4vw,44px)}

/* ---------- Hero: escaparate de piezas ---------- */
.sl-show{position:relative;margin:clamp(40px,7vw,80px) auto 0;width:min(1000px,100%);border-radius:var(--r-lg);background:radial-gradient(120% 120% at 50% 0%,#1b2433 0%,#07090d 70%);padding:clamp(22px,5vw,56px);box-shadow:var(--shadow-lg);overflow:hidden;transform:scale(calc(.9 + var(--p,0) * .1));transform-origin:50% 0;transition:transform .15s linear}
.sl-show::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
.sl-show-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,20px)}
.sl-show figure{margin:0;aspect-ratio:1;border-radius:clamp(14px,2vw,22px);background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 24px 40px -20px rgba(0,0,0,.7);transform:translateY(calc((1 - var(--p,0)) * var(--o,0px)));transition:transform .15s linear}
.sl-show figure:nth-child(1),.sl-show figure:nth-child(3){--o:40px}
.sl-show figure:nth-child(4),.sl-show figure:nth-child(6){--o:70px}
.sl-show figure:nth-child(5){--o:30px}
.sl-show img{width:84%;height:84%;object-fit:contain}
.sl-cap{position:relative;margin-top:20px;color:#86868b;font-size:.82rem;text-align:center}

/* ---------- Plano del almacén ---------- */
.sl-plan{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start}
.sl-floor{position:relative;aspect-ratio:720/460;border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.sl-floor svg{position:absolute;inset:0;width:100%;height:100%}
.sl-hot{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 .82rem/1 var(--font);display:grid;place-items:center;box-shadow:0 0 0 4px color-mix(in srgb,var(--bg) 70%,transparent),0 6px 16px rgba(0,0,0,.25);transition:transform .3s var(--ease),background .3s}
.sl-hot::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:sl-ping 2.4s var(--ease) infinite}
@keyframes sl-ping{0%{transform:scale(.7);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}}
.sl-hot:hover{transform:translate(-50%,-50%) scale(1.12)}
.sl-hot[aria-pressed="true"]{background:var(--lime);color:#101b2c;transform:translate(-50%,-50%) scale(1.18)}
@media (max-width:560px){.sl-hot{width:26px;height:26px;font-size:.7rem}.sl-hot::before{display:none}}
.sl-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sl-legend .chip b{font-family:var(--mono);margin-right:6px;color:var(--accent)}
.sl-legend .chip[aria-pressed="true"] b{color:inherit}
.sl-spot{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.sl-spot .ph{background:#fff;height:220px;display:grid;place-items:center}
.sl-spot .ph img{max-height:190px;max-width:78%;object-fit:contain}
.sl-spot .ph.multi{grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
.sl-spot .ph.multi img{max-height:86px;max-width:100%}
.sl-spot .tx{padding:24px;display:grid;gap:10px}
.sl-spot .where{font:600 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sl-spot h3{font-size:1.6rem;letter-spacing:-.03em}
.sl-spot p{color:var(--muted)}
.sl-spot ul{margin:0;padding-left:18px;color:var(--muted);font-size:.95rem;display:grid;gap:4px}
@media (max-width:920px){.sl-plan{grid-template-columns:minmax(0,1fr)}}

/* ---------- Simulador (banda oscura) ---------- */
.sl-dark{background:var(--night);color:var(--night-ink)}
.sl-dark .headline p,.sl-dark .sl-sub + p{color:var(--night-muted)}
.sl-dark .eyebrow{color:var(--lime)}
.sl-sim{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.sl-dev{background:linear-gradient(180deg,#14171d,#0b0d12);border:1px solid var(--dev-line);border-radius:var(--r-lg);padding:clamp(18px,3vw,28px);display:grid;gap:18px;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.sl-dev-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sl-dev-name{font:600 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dev-muted)}
.sl-state{font:600 .76rem var(--mono);padding:6px 14px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase}
.sl-state.desarmado{background:#162a4d;color:#9fc0ff}
.sl-state.armado{background:#123a26;color:#7fe0a6}
.sl-state.alarma{background:#5a1712;color:#ffb3a9;animation:sl-pulse 1s infinite}
@keyframes sl-pulse{50%{opacity:.55}}
.sl-lcd{display:flex;justify-content:center;align-items:center;min-height:120px;overflow:hidden}
.sl-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sl-part{background:var(--dev-2);border:1px solid var(--dev-line);border-radius:16px;padding:12px 8px;display:grid;justify-items:center;gap:4px;text-align:center}
.sl-part .art{height:88px;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sl-part b{font-size:.82rem;font-weight:600}
.sl-part small{font-size:.72rem;color:var(--dev-muted);line-height:1.3}
.sl-count{font-size:2.8rem;font-weight:700;letter-spacing:-.05em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#8e8e93);-webkit-background-clip:text;background-clip:text;color:transparent}
.sl-open{color:#7fe0a6!important}
.sl-spark{background:var(--dev-2);border:1px solid var(--dev-line);border-radius:16px;padding:14px 16px}
.sl-spark-top{display:flex;justify-content:space-between;gap:8px;font:500 .74rem var(--mono);color:var(--dev-muted);flex-wrap:wrap}
.sl-spark svg{width:100%;height:70px;display:block;margin-top:8px}
.sl-dev-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--dev-muted)}
.sl-ctrl{display:grid;gap:16px}
.sl-panel{background:#161617;border:1px solid #2d2d30;border-radius:var(--r-lg);padding:clamp(18px,2.6vw,24px)}
.sl-panel h3{font-size:1.15rem;letter-spacing:-.02em;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sl-panel h3 small{font-size:.78rem;font-weight:500;color:var(--night-muted);letter-spacing:0}
.sl-slider{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 4.4rem;align-items:center;gap:12px;padding-block:6px}
.sl-slider label{font-size:.92rem;color:#d2d2d7}
.sl-slider output{font:500 .84rem var(--mono);text-align:right;color:#f5f5f7}
.sl-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sl-btn{min-height:44px;padding:8px 12px;border-radius:12px;background:#232326;color:#f5f5f7;font-size:.88rem;font-weight:500;text-align:center;transition:background .2s,transform .15s}
.sl-btn:hover{background:#2e2e32}
.sl-btn:active{transform:scale(.97)}
.sl-btn.good{background:rgba(76,209,127,.14);color:#7fe0a6}
.sl-btn.good:hover{background:rgba(76,209,127,.22)}
.sl-btn.bad{background:rgba(255,107,94,.14);color:#ffb3a9}
.sl-btn.bad:hover{background:rgba(255,107,94,.22)}
.sl-btn.ghost{min-height:30px;padding:0 14px;border-radius:999px;font-size:.78rem;background:#2c2c2e}
.sl-row{display:flex;gap:16px 22px;flex-wrap:wrap;align-items:center;font-size:.92rem;color:#d2d2d7}
.sl-check{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.sl-check input{width:20px;height:20px;accent-color:var(--lime)}
.sl-num{display:inline-flex;align-items:center;gap:8px}
.sl-num input{width:4.6rem;font:500 .9rem var(--mono);padding:7px 10px;border:1px solid #3a3a3c;border-radius:10px;background:#0b0d12;color:#f5f5f7}
.sl-below{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;margin-top:24px}
.sl-log{width:100%;border-collapse:collapse;font-size:.88rem}
.sl-log th{text-align:left;font-weight:600;color:var(--night-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:6px 8px;border-bottom:1px solid #2d2d30}
.sl-log td{padding:9px 8px;border-bottom:1px solid #2d2d30;vertical-align:top;color:#d2d2d7}
.sl-log td:first-child{font-family:var(--mono);white-space:nowrap;color:var(--night-muted)}
.sl-log td.empty{white-space:normal;font-family:var(--font);padding:16px 8px}
.sl-type{font:600 .7rem var(--mono);padding:3px 8px;border-radius:6px;white-space:nowrap}
.sl-type.ok{background:rgba(76,209,127,.15);color:#7fe0a6}
.sl-type.crit{background:rgba(255,107,94,.16);color:#ffb3a9}
.sl-type.warn{background:rgba(242,180,90,.16);color:#f2c47a}
.sl-type.info{background:rgba(127,178,255,.15);color:#a9c8ff}
.sl-phone{justify-self:center;width:100%;max-width:380px;border-radius:40px;padding:14px;background:#1c1c1e;border:1px solid #3a3a3c;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.sl-phone-in{border-radius:28px;background:#000;padding:16px 14px 18px;min-height:300px}
.sl-phone-bar{display:flex;align-items:center;gap:10px;padding:0 4px 12px;margin-bottom:12px;border-bottom:1px solid #2d2d30}
.sl-bot{width:36px;height:36px;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:#101b2c;font-weight:800;font-size:.8rem}
.sl-phone-bar b{font-size:.95rem}
.sl-phone-bar span{display:block;font-size:.74rem;color:var(--night-muted)}
.sl-msgs{display:grid;gap:8px;align-content:start}
.sl-msg{background:#1c1c1e;border-radius:6px 18px 18px 18px;padding:10px 13px;font-size:.88rem;color:#e8e8ed;animation:sl-in .35s var(--ease)}
.sl-msg time{display:block;font:500 .68rem var(--mono);color:#86868b;margin-top:4px}
@keyframes sl-in{from{opacity:0;transform:translateY(-6px) scale(.98)}}
@media (max-width:920px){.sl-sim,.sl-below{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .sl-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-slider{grid-template-columns:6.4rem minmax(0,1fr) 4rem}
}
/* Deslizadores con el aspecto del sitio */
.sl-slider .range{background:linear-gradient(90deg,var(--lime) var(--fill,50%),#3a3a3c var(--fill,50%))}

/* Estados */
.sl-states{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sl-st{background:#161617;border:1px solid #2d2d30;border-radius:var(--r-lg);padding:24px;display:grid;gap:8px;align-content:start;color:var(--night-muted);font-size:.95rem}
.sl-st b{color:#f5f5f7;font-size:1.25rem;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.sl-st i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 14px currentColor}
@media (max-width:900px){.sl-states{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.sl-states{grid-template-columns:minmax(0,1fr)}}

/* ---------- Componentes ---------- */
.sl-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:30px}
.sl-comp{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.sl-mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.sl-mod{display:grid;grid-template-rows:auto 1fr;text-align:left;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.sl-mod:hover{transform:translateY(-4px)}
.sl-mod[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.sl-mod .art{height:150px;background:#fff;display:grid;place-items:center;overflow:hidden}
.sl-mod .art img{max-width:76%;max-height:130px;object-fit:contain;transition:transform .6s var(--ease)}
.sl-mod:hover .art img{transform:scale(1.06)}
.sl-mod .meta{padding:16px 18px 18px;display:grid;gap:6px;align-content:start}
.sl-mod h3{font-size:1.1rem;letter-spacing:-.02em}
.sl-kind{font:600 .66rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.sl-mod p{font-size:.88rem;color:var(--muted)}
.sl-gp{font:600 .76rem var(--mono);color:var(--accent)}
.sl-detail{position:sticky;top:70px;display:grid;gap:16px}
.sl-detail dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:14px 0 0;font-size:.92rem}
.sl-detail dt{color:var(--muted)}
.sl-detail dd{margin:0}
.sl-pins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.sl-pin{font:500 .74rem var(--mono);border-radius:10px;background:var(--bg-2);color:var(--ink);padding:7px 9px;text-align:left;display:flex;gap:6px;min-width:0;transition:background .2s}
.sl-pin:hover{background:var(--line)}
.sl-pin b{color:var(--accent);min-width:2.2em}
.sl-pin span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-pin.on{background:var(--ink);color:var(--bg)}
.sl-pin.on b{color:var(--lime)}
@media (max-width:960px){.sl-comp{grid-template-columns:minmax(0,1fr)}.sl-detail{position:static}}

/* ---------- Inventario ---------- */
.sl-inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.sl-item{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:14px 16px;border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
.sl-item img{grid-row:span 2;width:60px;height:60px;object-fit:contain;background:#fff;border-radius:12px}
.sl-item b{font-size:.98rem;letter-spacing:-.01em}
.sl-item p{grid-column:2/-1;font-size:.86rem;color:var(--muted)}
.sl-item.off{opacity:.72}
.sl-tag{font:600 .7rem var(--mono);padding:4px 10px;border-radius:999px;white-space:nowrap}
.sl-tag.si{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.sl-tag.no{background:var(--bg-2);color:var(--muted)}
.sl-extra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.sl-extra div{border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);padding:22px;color:var(--muted);font-size:.95rem}
.sl-extra b{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:6px;letter-spacing:-.015em}
@media (max-width:860px){.sl-extra{grid-template-columns:minmax(0,1fr)}}
@media (max-width:380px){.sl-inv{grid-template-columns:minmax(0,1fr)}}

/* ---------- Arquitectura ---------- */
.sl-arch{padding:clamp(16px,3vw,28px)}
.sl-arch svg{display:block;width:100%;min-width:640px;height:auto}
.sl-arch-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:36px}
.sl-arch-notes div{color:var(--muted);font-size:1rem}
.sl-arch-notes b{display:block;color:var(--ink);font-size:1.25rem;letter-spacing:-.02em;margin-bottom:6px}
@media (max-width:760px){.sl-arch-notes{grid-template-columns:minmax(0,1fr)}}
.sl-db{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.sl-db{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.sl-db{grid-template-columns:minmax(0,1fr)}}
.sl-tbl{border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.sl-tbl h3{font:600 .95rem var(--mono);letter-spacing:0;padding:14px 18px;background:var(--bg-2);display:flex;justify-content:space-between;gap:8px}
.section.alt .sl-tbl h3{background:color-mix(in srgb,var(--bg-2) 60%,var(--card))}
.sl-tbl h3 small{font:500 .76rem var(--font);color:var(--muted)}
.sl-tbl ul{list-style:none;margin:0;padding:10px 18px 14px;display:grid;gap:5px;font-size:.86rem}
.sl-tbl li{display:flex;justify-content:space-between;gap:10px}
.sl-tbl code{font:500 .8rem var(--mono)}
.sl-tbl li span{color:var(--muted);font:500 .72rem var(--mono)}
.sl-tbl li.pk code{color:var(--accent);font-weight:700}

/* ---------- Del aula al negocio ---------- */
.sl-compare{border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow);overflow:hidden;max-width:900px;margin:0 auto}
.sl-compare .r{display:grid;grid-template-columns:1fr 2.4rem 1fr;align-items:center;border-bottom:1px solid var(--line)}
.sl-compare .r:last-child{border-bottom:0}
.sl-compare .r>div{padding:18px 22px;font-size:1rem}
.sl-compare .r.h>div{font:600 .7rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding-block:12px}
.sl-compare .r>div:last-child{font-weight:600}
.sl-compare .arrow{color:var(--accent);text-align:center;padding:0!important;font-size:1.2rem}
.sl-legal{max-width:720px;margin:28px auto 0;text-align:center;color:var(--muted)}
@media (max-width:560px){.sl-compare .r{grid-template-columns:1fr 1.4rem 1fr}.sl-compare .r>div{padding:14px 12px;font-size:.92rem}}

/* ---------- Plan y riesgos ---------- */
.sl-phases{display:grid;gap:12px;max-width:900px;margin:0 auto}
.sl-phases details{border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.sl-phases summary{cursor:pointer;padding:20px 24px;display:grid;grid-template-columns:2.6rem 1fr auto 18px;align-items:center;gap:14px;list-style:none}
.sl-phases summary::-webkit-details-marker{display:none}
.sl-phases summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)}
.sl-phases details[open] summary::after{transform:rotate(-135deg)}
.sl-phases .n{font:700 .85rem var(--mono);color:var(--accent)}
.sl-phases .t{font-weight:600;font-size:1.1rem;letter-spacing:-.02em}
.sl-phases .c{font:500 .78rem var(--mono);color:var(--muted)}
.sl-phases .body{padding:0 24px 22px 76px;display:grid;gap:12px;color:var(--muted)}
@media (max-width:560px){.sl-phases .body{padding-left:24px}.sl-phases summary{padding:16px 18px}}
.sl-tests,.sl-risks{width:100%;border-collapse:collapse;font-size:.9rem}
.sl-tests th,.sl-tests td,.sl-risks th,.sl-risks td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.sl-tests td{color:var(--ink-2)}
.sl-tests th,.sl-risks th{font:600 .7rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.sl-risks{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;max-width:1000px;margin:0 auto}
.sl-risks td,.sl-risks th{padding:16px 20px}
.sl-risks tr:last-child td{border-bottom:0}
.sl-risks td:first-child{font-weight:600}

/* ---------- Modelo 3D ---------- */
.sl-3d{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:24px;align-items:start}
.sl-3d-stage{position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;background:radial-gradient(120% 120% at 50% 0%,#1f2a3b 0%,#07090d 72%);box-shadow:var(--shadow-lg);isolation:isolate}
.sl-3d-stage canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;outline:none;cursor:grab}
.sl-3d-stage canvas:active{cursor:grabbing}
.sl-3d-labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.sl-3d-pin{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(255,255,255,.94);color:#101b2c;font:700 .8rem/1 var(--font);display:grid;place-items:center;pointer-events:auto;box-shadow:0 0 0 3px rgba(255,255,255,.18),0 6px 16px rgba(0,0,0,.45);transition:background .25s,opacity .25s;will-change:transform}
.sl-3d-pin::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #c8ef5c;opacity:0;animation:sl-ping 2.6s var(--ease) infinite}
.sl-3d-pin:hover{background:#fff}
.sl-3d-pin[aria-pressed="true"]{background:var(--lime);box-shadow:0 0 0 4px rgba(200,239,92,.3),0 6px 16px rgba(0,0,0,.45)}
.sl-3d-pin.off{opacity:0;pointer-events:none}
.sl-3d-pin.behind:not([aria-pressed="true"]){opacity:.28}
.sl-3d-pin.behind::after{display:none}
.sl-3d-hud{position:absolute;left:16px;top:16px;z-index:3;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.sl-3d-chip{font:500 .76rem var(--font);padding:6px 12px;border-radius:999px;background:rgba(22,22,23,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#d2d2d7;border:1px solid rgba(255,255,255,.12)}
.sl-3d-chip b{color:#fff;font-variant-numeric:tabular-nums}
.sl-3d-hint{position:absolute;right:16px;top:20px;z-index:3;font-size:.74rem;color:rgba(255,255,255,.55);pointer-events:none}
.sl-3d-views{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:flex;gap:2px;padding:4px;max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none;border-radius:999px;background:rgba(22,22,23,.66);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border:1px solid rgba(255,255,255,.1)}
.sl-3d-views::-webkit-scrollbar{display:none}
.sl-3d-views button{flex:none;height:32px;padding:0 14px;border-radius:999px;color:#d2d2d7;font-size:.82rem;font-weight:500;transition:background .25s,color .25s}
.sl-3d-views button:hover{color:#fff}
.sl-3d-views button[aria-pressed="true"]{background:#f5f5f7;color:#1d1d1f}
.sl-3d-touch{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;min-height:44px;padding:0 20px;white-space:nowrap;border-radius:999px;background:rgba(245,245,247,.92);color:#1d1d1f;font-weight:600;font-size:.92rem;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.sl-3d-done{position:absolute;right:12px;top:12px;z-index:4;height:32px;padding:0 14px;border-radius:999px;background:var(--lime);color:#101b2c;font-weight:600;font-size:.82rem}
.sl-3d-fallback{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:30px;text-align:center;color:#a1a1a6;background:rgba(7,9,13,.85)}
.sl-3d-fallback[hidden]{display:none}
.sl-3d-side{display:grid;gap:16px}
.sl-3d-side .sl-spot .ph{height:180px}
.sl-3d-side .sl-spot .ph img{max-height:150px}
.sl-3d-side .sl-spot .ph.multi img{max-height:70px}
.sl-3d-side .sl-card h3{margin-bottom:14px}
.sl-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:3px;border-radius:12px;background:var(--bg-2)}
.sl-seg button{height:34px;border-radius:9px;font-size:.86rem;font-weight:500;color:var(--ink-2);transition:background .25s,color .25s,box-shadow .25s}
.sl-seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.14)}
.sl-seg button[data-mode="alarma"][aria-pressed="true"]{background:var(--crit);color:#fff}
.sl-3d-acts{display:grid;gap:8px;margin-top:12px}
.sl-act{min-height:44px;padding:8px 14px;border-radius:12px;background:var(--bg-2);color:var(--ink);font-size:.92rem;font-weight:500;text-align:center;transition:background .2s,transform .15s}
.sl-act:hover{background:var(--line)}
.sl-act:active{transform:scale(.98)}
.sl-act:disabled{opacity:.5;cursor:default}
.sl-togs{display:grid;margin-top:12px;border-top:1px solid var(--line)}
.sl-tog{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.94rem;cursor:pointer}
.sl-tog input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:44px;height:26px;margin:0;border-radius:999px;background:var(--line);cursor:pointer;transition:background .25s}
.sl-tog input::after{content:"";position:absolute;left:2px;top:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.sl-tog input:checked{background:#34c759}
.sl-tog input:checked::after{transform:translateX(18px)}
@media (max-width:980px){.sl-3d{grid-template-columns:minmax(0,1fr)}.sl-3d-side{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.sl-3d-stage{aspect-ratio:4/5}.sl-3d-side{grid-template-columns:minmax(0,1fr)}.sl-3d-hint{display:none}.sl-3d-pin{width:26px;height:26px;margin:-13px 0 0 -13px;font-size:.72rem}}

@media print{.sl-dark{background:#fff;color:#000}.sl-ctrl{display:none}}

/* Componentes completos: dimensiones explícitas para evitar recortes en Grid. */
.sl-show figure{padding:18px;min-width:0}
.sl-show img{width:100%;height:100%;min-height:0;object-fit:contain}
.sl-mod .art{height:190px;padding:20px;min-width:0}
.sl-mod .art img{width:100%;height:150px;max-width:100%;max-height:150px;object-fit:contain}
.sl-mod:hover .art img{transform:none}
.sl-spot .ph,.sl-3d-side .sl-spot .ph{height:auto;min-height:190px;padding:20px;grid-template-columns:minmax(0,1fr)}
.sl-spot .ph img,.sl-3d-side .sl-spot .ph img{width:100%;height:170px;max-width:100%;max-height:170px;min-width:0;object-fit:contain}
.sl-spot .ph.multi{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px}
.sl-spot .ph.multi img,.sl-3d-side .sl-spot .ph.multi img{width:100%;height:90px;max-height:90px}
.sl-mod{border:1px solid var(--line)}
.sl-mod .meta{padding:20px;gap:10px}
.sl-mod h3{line-height:1.2}
.sl-mod[hidden]{display:none}
.sl-detail{border-top:3px solid var(--cyan)}
.sl-3d{grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr);gap:20px}
.sl-3d-stage{aspect-ratio:1.2;min-height:540px;background:radial-gradient(ellipse at 50% 40%,#263b50,#0a1420 75%);border:1px solid #34465a}
.sl-3d-views{border-radius:18px;flex-wrap:wrap;justify-content:center;width:max-content}
.sl-3d-views button{min-height:40px}
.sl-3d-hint{top:62px;left:18px;right:auto;max-width:75%}
.sl-3d-tools{position:absolute;right:14px;top:14px;z-index:4;display:flex;gap:6px}
.sl-3d-tools button{width:40px;height:40px;border-radius:12px;color:white;background:#1b2b3ee6;border:1px solid #496079;font-size:20px}
.sl-3d-stage:fullscreen{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.sl-3d-pin::after{animation:none}
.sl-item{min-width:0}.sl-item b{overflow-wrap:anywhere}
@media(max-width:1100px){.sl-3d{grid-template-columns:1fr}.sl-3d-stage{aspect-ratio:16/10;min-height:440px}.sl-3d-side{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.sl-3d-stage{aspect-ratio:4/5;min-height:470px}.sl-3d-side{grid-template-columns:1fr}.sl-show figure{padding:8px}.sl-inv{grid-template-columns:1fr}.sl-3d-hud{max-width:62%}.sl-3d-views button{padding:0 10px}.sl-mods{grid-template-columns:repeat(2,minmax(0,1fr))}.sl-mod .art{height:150px;padding:12px}.sl-mod .art img{height:126px}.sl-mod .meta{padding:14px}.sl-mod p{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.sl-hot::before{animation:none}.sl-show,.sl-show figure{transform:none}}