/* =========================================
   Portátil decorativo de la portada
   Foto de un portátil de aluminio (fondo transparente) con el mini dashboard de KNTech
   proyectado sobre su pantalla con la perspectiva exacta (matrix3d).
   El tamaño se ajusta con --s (lo calcula app.js según el ancho disponible).
   ========================================= */
.hero-laptop { position: relative; width: 100%; aspect-ratio: 1088 / 1030; overflow: hidden; pointer-events: none; user-select: none; }
.lap-escala { position: absolute; left: 0; top: 0; width: 1088px; height: 1030px; transform-origin: 0 0; transform: scale(var(--s, 1)); }
.lap-flota { position: absolute; inset: 0; animation: lap-flota 8s ease-in-out infinite; }
@keyframes lap-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .lap-flota { animation: none; } }
.lap-foto { position: absolute; left: 0; top: 0; width: 1088px; height: 1030px; filter: drop-shadow(0 30px 26px rgba(0, 0, 0, .42)) drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
/* La pantalla se proyecta sobre el cristal de la foto */
.lap-pantalla { position: absolute; left: 0; top: 0; width: 960px; height: 600px; overflow: hidden; border-radius: 5px; background: #0b0b0e; transform-origin: 0 0;
  transform: matrix3d(0.5579402,0.067933349,0,-0.00011158336,-0.074161061,0.60368039,0,6.301356e-07,0,0,1,0,369.1726,66.631779,0,1); }
.lap-brillo { position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(116deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.04) 26%, transparent 40%),
    linear-gradient(62deg, transparent 60%, rgba(255,255,255,.05) 60% 72%, transparent 72%),
    radial-gradient(120% 100% at 50% 110%, rgba(0,0,0,.25), transparent 60%); }

/* ---- Dashboard dentro de la pantalla (diseñado a 960×584 y reducido a la mitad) ---- */
.lap-ui { position: absolute; inset: 0; width: 960px; height: 600px; display: grid; grid-template-columns: 188px 1fr; background: #0b0b0e; color: #fff; font-family: 'Segoe UI', Arial, sans-serif; }
.lap-ui * { box-sizing: border-box; }
.lap-ui-lado { background: #07070a; border-right: 1px solid #1c1d24; padding: 22px 16px; display: flex; flex-direction: column; gap: 8px; }
.lap-ui-logo { font-weight: 900; font-size: 24px; letter-spacing: .04em; margin-bottom: 14px; }
.lap-ui-logo em { color: #ff2a2a; font-style: normal; }
.lap-ui-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: #a7a9b4; font-size: 16px; font-weight: 600; }
.lap-ui-item i { width: 18px; height: 18px; border-radius: 5px; background: #2b2d38; flex: none; }
.lap-ui-item.act { background: rgba(255,0,0,.14); color: #fff; box-shadow: inset 3px 0 0 #ff2a2a; }
.lap-ui-item.act i { background: #ff2a2a; }
.lap-ui-main { padding: 22px 26px; display: grid; grid-template-rows: auto auto 1fr; gap: 18px; min-width: 0; }
.lap-ui-top { display: flex; justify-content: space-between; align-items: center; }
.lap-ui-top h4 { font-size: 28px; font-weight: 800; }
.lap-ui-top small { display: block; color: #8d90a0; font-size: 14px; font-weight: 400; margin-top: 2px; }
.lap-ui-vivo { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: rgba(34,197,94,.14); color: #62ff89; font-size: 15px; font-weight: 700; }
.lap-ui-vivo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
.lap-ui-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lap-ui-stat { padding: 14px 16px; border-radius: 14px; background: #14151b; border: 1px solid #23242d; border-top: 4px solid #6b6e7c; }
.lap-ui-stat b { display: block; font-size: 38px; line-height: 1; font-weight: 800; }
.lap-ui-stat span { display: block; margin-top: 6px; color: #8d90a0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.lap-ui-stat.v { border-top-color: #22c55e; } .lap-ui-stat.v b { color: #62ff89; }
.lap-ui-stat.a { border-top-color: #eab308; } .lap-ui-stat.a b { color: #ffd75e; }
.lap-ui-stat.r { border-top-color: #ef4444; } .lap-ui-stat.r b { color: #ff8080; }
.lap-ui-cuerpo { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; min-height: 0; }
.lap-ui-card { border-radius: 14px; background: #14151b; border: 1px solid #23242d; padding: 14px 16px; overflow: hidden; min-height: 0; position: relative; }
.lap-ui-card h5 { font-size: 15px; color: #c8cad6; margin-bottom: 10px; font-weight: 700; }
.lap-ui-mapa { position: absolute; inset: 0; width: 100%; height: 100%; }
.lap-ui-card.mapa { padding: 0; }
.lap-ui-card.mapa h5 { position: absolute; left: 16px; top: 12px; z-index: 2; margin: 0; padding: 4px 10px; border-radius: 8px; background: rgba(10,10,14,.7); }
.lap-ui-barras { display: flex; align-items: flex-end; gap: 9px; height: 112px; margin-top: 4px; }
.lap-ui-barras i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #ff4b4b, #8f0b0b); }
.lap-ui-dias { display: flex; gap: 9px; margin-top: 6px; color: #7d8090; font-size: 11px; }
.lap-ui-dias span { flex: 1; text-align: center; }
.lap-ui-alertas { margin-top: 12px; display: grid; gap: 7px; }
.lap-ui-alertas div { padding: 8px 10px; border-radius: 9px; background: #1b1c24; border-left: 3px solid #eab308; font-size: 12px; color: #c8cad6; }
.lap-ui-alertas div.r { border-left-color: #ef4444; }

/* ---- Integración en la portada ---- */
.hero-content-creativo.con-laptop { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 24px; align-items: center; }
@media (max-width: 960px) {
  .hero-content-creativo.con-laptop { grid-template-columns: minmax(0, 1fr); }
  .hero-content-creativo.con-laptop .hero-laptop { max-width: 520px; margin: 8px auto 0; }
}

/* =========================================
   Pantalla del portátil: escritorio Windows con el panel GPS (vistas que rotan)
   ========================================= */
.lap-ui.lap-win { display: flex; flex-direction: column; grid-template-columns: none; background: #0b0b0e; }
.w-titulo { flex: none; height: 34px; display: flex; justify-content: space-between; align-items: flex-end; padding-left: 12px; background: #1f1f23; }
.w-pestana { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 16px; border-radius: 9px 9px 0 0; background: #0b0b0e; font-size: 13px; color: #e5e7eb; }
.w-pestana i { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px; background: linear-gradient(145deg, #ff4b4b, #b40000); color: #fff; font-size: 10px; font-weight: 800; font-style: normal; }
.w-ctl { display: flex; height: 34px; }
.w-ctl svg { width: 46px; height: 34px; padding: 12px 17px; fill: none; stroke: #e5e7eb; stroke-width: 1.1; }
.w-app { flex: 1; min-height: 0; display: grid; grid-template-columns: 172px 1fr; }
.lap-win .lap-ui-lado { padding: 16px 12px; }
.lap-win .lap-ui-main { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 14px; min-width: 0; min-height: 0; }
.lap-win .lap-ui-top h4 { font-size: 24px; }
.v-contenedor { position: relative; flex: 1; min-height: 0; }
.vista { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateX(26px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.vista.act { opacity: 1; transform: none; }
.vista[data-vista="resumen"] .lap-ui-cuerpo { flex: 1; min-height: 0; }
.v-grande { flex: 1; min-height: 0; }
.lap-ui-card.mapa { position: relative; }
.v-popup { position: absolute; right: 14px; top: 14px; display: grid; gap: 3px; padding: 10px 14px; border-radius: 12px; background: rgba(10,12,18,.88); border: 1px solid #2a3040; font-size: 13px; }
.v-popup b { font-size: 15px; }
.v-popup span { display: flex; align-items: center; gap: 6px; color: #ff8c8c; }
.v-popup em { font-style: normal; font-size: 12px; color: #9aa0b4; }
.v-popup .pt { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.v-resumen { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 10px; }
.v-resumen > div { padding: 10px 16px; border-radius: 12px; background: rgba(10,12,18,.88); border: 1px solid #2a3040; }
.v-resumen b { display: block; font-size: 20px; }
.v-resumen span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9aa0b4; }
.vista.act .ruta { animation: ruta-dibuja 3.6s ease-out .2s forwards; }
@keyframes ruta-dibuja { to { stroke-dashoffset: 0; } }

.v-tabla table { width: 100%; border-collapse: collapse; font-size: 14px; }
.v-tabla th { padding: 6px 8px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8d90a0; }
.v-tabla td { padding: 8px; border-top: 1px solid #23242d; color: #d8dae6; }
.v-tabla tr.alerta { background: rgba(239,68,68,.1); }
.ch { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; font-style: normal; white-space: nowrap; }
.ch.v { color: #62ff89; background: rgba(34,197,94,.15); } .ch.a { color: #ffd75e; background: rgba(234,179,8,.15); }
.ch.r { color: #ff9b9b; background: rgba(239,68,68,.18); } .ch.g { color: #aeb3c4; background: rgba(255,255,255,.08); }

.v-alertas .al { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 12px; border-radius: 10px; background: #1b1c24; border-left: 4px solid #6b6e7c; }
.v-alertas .al.r { border-left-color: #ef4444; } .v-alertas .al.a { border-left-color: #eab308; } .v-alertas .al.v { border-left-color: #22c55e; }
.al-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 14px; font-weight: 800; }
.v-alertas b { display: block; font-size: 14px; }
.v-alertas small { font-size: 12px; color: #8d90a0; }
.v-alertas em { font-size: 12px; font-style: normal; color: #7d8090; }
.vista.act .al { animation: al-entra .5s both; }
.vista.act .al:nth-of-type(1) { animation-delay: .05s; } .vista.act .al:nth-of-type(2) { animation-delay: .15s; } .vista.act .al:nth-of-type(3) { animation-delay: .25s; }
.vista.act .al:nth-of-type(4) { animation-delay: .35s; } .vista.act .al:nth-of-type(5) { animation-delay: .45s; }
@keyframes al-entra { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* Barra de tareas de Windows 11 */
.w-barra { position: relative; flex: none; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(32,32,36,.97); border-top: 1px solid rgba(255,255,255,.08); }
.w-centro { display: flex; gap: 6px; }
.w-ico { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; }
.w-ico svg { width: 20px; height: 20px; fill: none; stroke: #e5e7eb; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w-ico.act { background: rgba(255,255,255,.1); }
.w-ico.act::after { content: ""; position: absolute; bottom: 2px; width: 14px; height: 3px; border-radius: 3px; background: #4cc2ff; }
.w-bandeja { position: absolute; right: 14px; display: flex; align-items: center; gap: 12px; font-size: 11px; line-height: 1.15; text-align: right; color: #e5e7eb; }
.w-bandeja svg { width: 16px; height: 16px; fill: none; stroke: #e5e7eb; stroke-width: 1.8; stroke-linecap: round; }