/* ═══════════════════════════════════════════════════════════
   CUNDASIA™ — Mockup de dispositivos HSI (laptop + app)
   Compartido por el home y la página de Plataforma.
   La pantalla es siempre oscura; el marco se adapta al tema.
═══════════════════════════════════════════════════════════ */
/* Device composition */
.devices{position:relative;padding:10px 0 40px}
.laptop{position:relative;width:79%;max-width:560px;margin-right:auto}
.laptop-screen{background:#0A0F1C;border-radius:16px 16px 4px 4px;padding:9px 9px 0;box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(255,255,255,.08)}
.laptop-base{height:13px;margin:0 -7%;background:linear-gradient(#C3CBD8,#8D97A8);border-radius:0 0 14px 14px;position:relative}
:root[data-theme-resolved="dark"] .laptop-base{background:linear-gradient(#3B4352,#1C212B)}
.laptop-base::before{content:'';position:absolute;left:50%;top:0;width:16%;height:5px;transform:translateX(-50%);background:rgba(0,0,0,.18);border-radius:0 0 8px 8px}
.dash{--d-bg:#070D1A;--d-card:#0D1628;--d-line:rgba(148,178,214,.12);--d-text:#E6EEF9;--d-mute:#7F90AA;display:grid;grid-template-columns:118px 1fr;background:var(--d-bg);border-radius:9px 9px 0 0;overflow:hidden;font-family:var(--body);color:var(--d-text);aspect-ratio:16/10.2;font-size:9px}
.dash-side{border-right:1px solid var(--d-line);padding:12px 8px;display:flex;flex-direction:column;gap:3px}
.dash-logo{display:flex;align-items:center;gap:5px;margin:0 4px 12px}
.dash-logo img{width:17px;height:17px}
.dash-logo .wm{font-size:8.5px;letter-spacing:.18em;color:var(--d-text)}
.dash-nav{display:flex;align-items:center;gap:6px;padding:6px 7px;border-radius:6px;color:var(--d-mute);font-weight:600}
.dash-nav svg.i{font-size:10px}
.dash-nav.on{background:rgba(60,198,227,.12);color:#CFF4FC}
.dash-main{padding:12px 14px;display:flex;flex-direction:column;gap:9px;min-width:0}
.dash-top{display:flex;align-items:center;justify-content:space-between}
.dash-top h5{font-size:11px;font-weight:700;font-family:var(--body);color:var(--d-text)}
.dash-top .who{display:flex;align-items:center;gap:8px;color:var(--d-mute)}
.dash-top .av{width:17px;height:17px;border-radius:50%;background:linear-gradient(135deg,#3CC6E3,#1969D6)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.kpi{background:var(--d-card);border:1px solid var(--d-line);border-radius:7px;padding:8px 9px}
.kpi small{display:block;color:var(--d-mute);font-size:7.5px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.1;display:block}
.kpi em{font-style:normal;font-size:7px;color:#34D399}
.kpi em.dn{color:#FBBF24}
.c1{color:#3CC6E3}.c2{color:#FDE68A}.c3{color:#5EEAD4}.c4{color:#60A5FA}
.dash-row{display:grid;grid-template-columns:1.35fr 1fr;gap:7px;flex:1;min-height:0}
.panel{background:var(--d-card);border:1px solid var(--d-line);border-radius:7px;padding:9px 10px;display:flex;flex-direction:column;min-height:0}
.panel h6{font-size:8.5px;font-weight:700;font-family:var(--body);margin-bottom:6px;color:var(--d-text)}
.chart{flex:1;min-height:0;width:100%}
.chart .ln{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 2.2s var(--ease) .4s}
.devices.in .chart .ln{stroke-dashoffset:0}
.donut-wrap{display:flex;align-items:center;gap:10px;flex:1}
.donut{width:46%;aspect-ratio:1;border-radius:50%;background:conic-gradient(#2DD4BF 0 28%,#3CC6E3 0 52%,#3B82F6 0 72%,#1D4ED8 0 88%,#60A5FA 0 100%);-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);mask:radial-gradient(circle,transparent 52%,#000 53%)}
.legend{list-style:none;display:flex;flex-direction:column;gap:4px;flex:1;font-size:7.5px;color:var(--d-mute)}
.legend li{display:flex;align-items:center;gap:5px}
.legend li span{margin-left:auto;color:var(--d-text)}
.legend i{width:5px;height:5px;border-radius:50%;display:inline-block}

.phone{position:absolute;right:0;bottom:4%;width:24%;max-width:170px;aspect-ratio:9/18.6;background:#0B0F18;border-radius:30px;padding:7px;box-shadow:var(--shadow-lg),inset 0 0 0 1.5px #2A3242;animation:float 7s ease-in-out infinite}
.phone-in{height:100%;border-radius:24px;background:radial-gradient(90% 60% at 50% 30%,#0E2140,#060B16 75%);display:flex;flex-direction:column;align-items:center;text-align:center;padding:13% 9% 10%;color:#E6EEF9;position:relative;overflow:hidden}
.phone-in::before{content:'';position:absolute;top:7px;left:50%;width:32%;height:13px;transform:translateX(-50%);background:#000;border-radius:10px}
.phone-in img{width:62%;margin:16% 0 9%}
.phone-in .wm{font-size:clamp(9px,1.05vw,13px);letter-spacing:.16em;color:#fff}
.phone-in .kicker{font-size:clamp(4.5px,.42vw,6px);letter-spacing:.26em;margin-top:5px;color:#5ED3EC}
.phone-in p{font-size:clamp(7px,.7vw,9.5px);margin-top:16%;line-height:1.4}
.phone-in p span{color:#5ED3EC}
.phone-in .p-btn{margin-top:9%;width:100%;padding:7% 0;border-radius:7px;background:linear-gradient(90deg,#29B1D3,#1969D6);font-size:clamp(7px,.66vw,9px);font-weight:700}
.phone-in .p-link{margin-top:7%;font-size:clamp(6.5px,.6vw,8.5px);color:#5ED3EC}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.float-card{position:absolute;left:-3%;top:auto;bottom:-2%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;font-size:.78rem;animation:float 8s ease-in-out infinite reverse}
.float-card .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink)}
.float-card b{display:block;font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.1}
.float-card small{color:var(--text-3)}


@media (max-width:640px){
  .float-card{display:none}
  .phone{width:28%}
  .dash{grid-template-columns:1fr;font-size:7px}
  .dash-side{display:none}
  .kpi b{font-size:14px}
}

/* Base mínima para usar el mockup fuera del home */
.devices svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.devices .wm{font-family:'Jost',system-ui,sans-serif;font-weight:400;letter-spacing:.2em;display:inline-flex;align-items:center;line-height:1;white-space:nowrap}
.devices .wm .lam{display:inline-block;width:.86em;height:.8em;margin:0 .06em 0 .02em;position:relative;top:-.03em}
.devices .wm .lam svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;overflow:visible}
.devices .kicker{font-family:'Jost',system-ui,sans-serif;font-weight:500;text-transform:uppercase;display:block}
.devices .float-card b{color:var(--text)}
.devices .float-card .ic svg.i{font-size:1.1rem}

/* ═══ Tema claro: la pantalla del mockup sigue la paleta del HSI Business Portal ═══
   (el marco de laptop y teléfono se mantiene oscuro, como un dispositivo real) */
.phone-in .p-btn{color:#fff}
:root[data-theme-resolved="light"] .dash{--d-bg:#FFFFFF;--d-card:#FFFFFF;--d-line:#DCE5EF;--d-text:#2F333C;--d-mute:#676C77}
:root[data-theme-resolved="light"] .dash-side{background:#E4F0F5;border-right-color:#CBD4E6}
:root[data-theme-resolved="light"] .dash-main{background:#F5F8FA}
:root[data-theme-resolved="light"] .dash-nav.on{background:#B1E3F0;color:#2F333C}
:root[data-theme-resolved="light"] .dash-nav{color:#454A54}
:root[data-theme-resolved="light"] .kpi,:root[data-theme-resolved="light"] .panel{box-shadow:0 1px 2px rgba(47,51,60,.04)}
:root[data-theme-resolved="light"] .kpi em{color:#059669}
:root[data-theme-resolved="light"] .kpi em.dn{color:#D97706}
:root[data-theme-resolved="light"] .c1{color:#1E9DBD}
:root[data-theme-resolved="light"] .c2{color:#D97706}
:root[data-theme-resolved="light"] .c3{color:#0D9488}
:root[data-theme-resolved="light"] .c4{color:#1969D6}
:root[data-theme-resolved="light"] .chart g[stroke]{stroke:#E3EAF2}
:root[data-theme-resolved="light"] .chart .ln{stroke:#29B1D3}
:root[data-theme-resolved="light"] .phone-in{background:radial-gradient(90% 60% at 50% 30%,#E4F0F5,#FFFFFF 75%);color:#2F333C}
:root[data-theme-resolved="light"] .phone-in .wm{color:#0D1729}
:root[data-theme-resolved="light"] .phone-in .kicker,:root[data-theme-resolved="light"] .phone-in p span,:root[data-theme-resolved="light"] .phone-in .p-link{color:#1885A2}