/* ============================================================ Pantallas vivas — las «demos de 4 segundos que no piden play» Cómo funciona: cada .demo anima UNA sola variable, --t, de 0 a 100 a lo largo de su duración (4 s por defecto) y vuelve a empezar. Todo lo que hay adentro se ata a esa línea de tiempo con dos números: --in en qué punto (0-100) aparece --len cuánto tarda en aparecer (en puntos de la línea de tiempo) --out en qué punto desaparece (opcional; 999 = nunca) Así el guion de cada demo se lee en el HTML, en orden, y no hay una @keyframes por elemento. La animación se pausa fuera de pantalla (JS pone .on al entrar en el viewport) y con «reducir movimiento» se muestra directamente el cuadro final. Si el navegador no sabe animar propiedades registradas (@property), main.js no pone la clase tl-ok en y todo se ve en su estado final. ============================================================ */ @property --t{ syntax:''; inherits:true; initial-value:0; } .demo{ --t:0; animation:demoTl var(--dur, 4s) linear infinite; animation-play-state:paused; } .demo.on{ animation-play-state:running; } @keyframes demoTl{ from{ --t:0; } to{ --t:100; } } html:not(.tl-ok) .demo{ animation:none; --t:100; } @media (prefers-reduced-motion:reduce){ .demo{ animation:none; --t:100; } } /* Primitivas: cada elemento animado lleva .tl y una de estas. */ .tl{ --in:0; --len:3; --out:999; --olen:1; --k:clamp(0, (var(--t) - var(--in)) / var(--len), 1); --ko:clamp(0, (var(--t) - var(--out)) / var(--olen), 1); --v:calc(var(--k) * (1 - var(--ko))); } .tl.a{ opacity:var(--v); transform:translateY(calc((1 - var(--v)) * 8px)); } .tl.fade{ opacity:var(--v); } .tl.gone{ opacity:calc(1 - var(--k)); } /* estaba y se va */ .tl.dr{ stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--k)); } /* path con pathLength="1" */ .tl.pp{ transform:scale(var(--v)); transform-box:fill-box; transform-origin:center; } .tl.grow{ transform:scaleX(var(--k)); transform-origin:left center; } /* Cursor y clic (posición con --x/--y en píxeles, calculados en línea). */ .cur{ position:absolute; left:0; top:0; z-index:6; pointer-events:none; width:16px; height:20px; transform:translate(calc(var(--x) * 1px), calc(var(--y) * 1px)); filter:drop-shadow(0 1px 2px rgba(12,34,51,.35)); } .clk{ position:absolute; z-index:5; width:24px; height:24px; margin:-12px 0 0 -12px; border:2px solid var(--cobalt); border-radius:50%; pointer-events:none; opacity:calc(1 - var(--k)); transform:scale(calc(.3 + var(--k) * 1.1)); } /* Un valor que cambia: dos capas, la vieja se va cuando llega la nueva. */ .swap{ position:relative; display:inline-grid; } .swap > *{ grid-area:1 / 1; } /* ── Elementos de UI compartidos por las pantallas ─────────── */ .ui-table{ width:100%; border-collapse:collapse; font-size:.74rem; } .ui-table th{ text-align:left; font-family:var(--mono); font-weight:500; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:0 8px 7px; border-bottom:1.5px solid var(--dim); } .ui-table td{ padding:8px 8px; border-bottom:1px solid var(--line-soft); color:var(--dim); white-space:nowrap; } .ui-table td.name{ color:var(--ink); font-weight:500; } .ui-table td.num{ font-family:var(--mono); } .ui-table tr.hi td{ background:var(--cobalt-soft); color:var(--ink); } .ui-table .btn-mini{ font:600 .62rem var(--sans); padding:4px 9px; border-radius:5px; background:var(--cobalt); color:#fff; border:0; } .ui-kpis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:14px; } .ui-kpi{ border-top:2px solid var(--ink); padding-top:7px; } .ui-kpi b{ display:block; font-size:1.05rem; font-weight:500; letter-spacing:-.01em; line-height:1.1; } .ui-kpi b.crit{ color:var(--crit); } .ui-kpi b.ok{ color:var(--ok); } .ui-kpi > span{ font-size:.62rem; color:var(--faint); font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; } .ui-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; font-size:.78rem; color:var(--dim); box-shadow:var(--shadow); } .ui-card b{ color:var(--ink); font-weight:600; } .ui-card .mono{ font-size:.72rem; } .ui-actions{ display:flex; gap:8px; margin-top:10px; } .ui-btn{ font:600 .68rem var(--sans); padding:6px 11px; border-radius:5px; border:1px solid var(--line); background:var(--panel); color:var(--ink); } .ui-btn.primary{ background:var(--cobalt); border-color:var(--cobalt); color:#fff; } .ui-toast{ position:absolute; left:18px; right:18px; bottom:14px; z-index:4; background:var(--ink); color:#fff; border-radius:var(--r-sm); padding:8px 12px; font-family:var(--mono); font-size:.66rem; display:flex; gap:10px; align-items:center; } .ui-toast i{ width:8px; height:8px; border-radius:50%; background:#4ade80; flex:none; } .ui-dialog{ position:absolute; left:50%; top:50%; z-index:5; width:min(300px, 86%); transform:translate(-50%, -50%); background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); padding:14px 16px; font-size:.76rem; color:var(--dim); } .ui-dialog.tl.a{ transform:translate(-50%, calc(-50% + (1 - var(--v)) * 8px)); } .ui-dialog h4{ margin:0 0 8px; font-size:.82rem; font-weight:600; color:var(--ink); } .ui-dialog dl{ margin:0 0 10px; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; } .ui-dialog dt{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); } .ui-dialog dd{ margin:0; font-family:var(--mono); font-size:.7rem; color:var(--ink); } /* ── HERO: la red que se dibuja sola ───────────────────────── */ .d-hero .street{ stroke:#dce5ee; stroke-width:10; fill:none; stroke-linecap:round; } .d-hero .block{ fill:#eef3f8; stroke:#d7e2ec; stroke-width:1; } .d-hero .lbl{ font-family:var(--mono); font-size:10px; fill:var(--dim); } .d-hero .lbl.b{ font-weight:600; fill:var(--ink); } .d-hero .troncal{ stroke:var(--troncal); stroke-width:3.5; fill:none; stroke-linecap:round; stroke-linejoin:round; } .d-hero .dist{ stroke:var(--dist); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; } .d-hero .drop{ stroke:var(--drop); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; } .d-hero .olt{ fill:#fff; stroke:var(--olt); stroke-width:2.5; } .d-hero .olt-dot{ fill:var(--olt); } .d-hero .mufa{ fill:#fff; stroke:var(--troncal); stroke-width:2.2; } .d-hero .nap{ fill:#f8eed3; stroke:var(--nap); stroke-width:1.8; } .d-hero .cli{ fill:#e0f3ea; stroke:var(--cliente); stroke-width:1.6; } .d-hero .poste{ fill:var(--poste); } /* ── 1 · Semáforo óptico (perfil lógico) ───────────────────── */ .d-optica .axis{ stroke:var(--line); stroke-width:1; } .d-optica .prof{ stroke:var(--cobalt); stroke-width:2.5; fill:none; stroke-linejoin:round; } .d-optica .node{ fill:#fff; stroke:var(--ink); stroke-width:1.8; } .d-optica .node.olt{ stroke:var(--olt); } .d-optica .node.nap{ stroke:var(--nap); fill:#f8eed3; } .d-optica .node.cli{ stroke:var(--cliente); fill:#e0f3ea; } .d-optica .lbl{ font-family:var(--mono); font-size:9.5px; fill:var(--faint); } .d-optica .val{ font-family:var(--mono); font-size:11px; font-weight:600; fill:var(--ink); } .d-optica .loss{ font-family:var(--mono); font-size:8.5px; fill:var(--dim); } .d-optica .name{ font-family:var(--sans); font-size:9.5px; font-weight:600; fill:var(--ink); } .d-optica .result{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px; font-family:var(--mono); font-size:.72rem; color:var(--dim); } .d-optica .result b{ color:var(--ink); font-weight:600; } /* ── 2 · Licencias: la lámina que se corta sola ────────────── */ .d-lic .cat{ fill:#f3f6f9; stroke:#d9e2ea; stroke-width:.8; } .d-lic .via{ stroke:#e6ecf1; stroke-width:6; fill:none; } .d-lic .ruta{ stroke:var(--troncal); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round; } .d-lic .poste{ fill:var(--poste); } .d-lic .lam{ fill:rgba(12,111,192,.07); stroke:var(--cobalt); stroke-width:1.4; } .d-lic .lam-caj{ fill:#fff; stroke:var(--cobalt); stroke-width:.8; } .d-lic .lam-lbl{ font-family:var(--mono); font-size:9px; font-weight:600; fill:var(--cobalt); } .d-lic .grid{ stroke:rgba(12,111,192,.18); stroke-width:.6; } .d-lic .docs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:12px; } .d-lic .doc{ font-family:var(--mono); font-size:.62rem; color:var(--dim); border:1px solid var(--line-soft); border-radius:5px; padding:6px 8px; display:flex; gap:6px; align-items:center; } .d-lic .doc i{ width:12px; height:12px; border-radius:50%; background:var(--ok-bg); flex:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8a5f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E"); background-size:8px; background-position:center; background-repeat:no-repeat; } .d-lic .file{ position:absolute; right:14px; bottom:14px; z-index:3; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow); padding:8px 11px; font-family:var(--mono); font-size:.68rem; color:var(--ink); display:flex; gap:9px; align-items:center; } .d-lic .file small{ color:var(--faint); font-size:.6rem; } .d-lic .file svg{ width:16px; height:16px; } .d-lic .plazo{ display:flex; gap:10px; align-items:center; margin-top:12px; font-size:.74rem; color:var(--dim); } .d-lic .plazo b{ color:var(--ink); font-weight:600; } /* ── 3 · Campo: la instalación en pasos ────────────────────── */ .d-campo .steps{ display:grid; gap:9px; } .d-campo .step{ display:grid; grid-template-columns:22px 1fr; gap:9px; align-items:start; border:1px solid var(--line-soft); border-radius:7px; padding:8px 9px 9px; } .d-campo .step.done{ border-color:var(--ok-bg); background:#f7fcf9; } .d-campo .n{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:.62rem; font-weight:600; background:var(--cobalt-soft); color:var(--cobalt); } .d-campo .step.done .n{ background:var(--ok); color:#fff; } .d-campo .step h5{ margin:0 0 2px; font-size:.74rem; font-weight:600; color:var(--ink); } .d-campo .step p{ margin:0; font-size:.68rem; color:var(--dim); line-height:1.45; } .d-campo .step .mono{ font-size:.66rem; color:var(--ink); } .d-campo .step .pill{ font-size:.54rem; margin-top:4px; } .d-campo .foto{ margin-top:6px; width:100%; height:46px; border-radius:5px; position:relative; overflow:hidden; background:linear-gradient(135deg, #58718a 0%, #2e4358 60%, #0c2233 100%); } .d-campo .foto span{ position:absolute; left:6px; bottom:4px; font-family:var(--mono); font-size:.52rem; color:#fff; line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,.6); } .d-campo .foto i{ position:absolute; right:6px; top:5px; width:7px; height:7px; border-radius:50%; background:#4ade80; } .d-campo .off{ margin:10px 0 0; font-size:.62rem; color:var(--faint); text-align:center; font-family:var(--mono); } .d-campo .dim{ color:var(--faint); text-decoration:line-through; } /* ── 4 · SMARTLASER: autorizar en un clic ──────────────────── */ .d-olt .screen-body{ padding-bottom:44px; } .d-olt .row-swap{ position:relative; } .d-olt .row-swap td{ position:relative; } /* ── 5 · Administración: el Yape que entra solo ────────────── */ .d-admin .flow{ display:grid; grid-template-columns:minmax(0, .9fr) 26px minmax(0, 1.1fr); gap:12px; align-items:start; } .d-admin .notif{ background:var(--ink); color:#fff; border-radius:9px; padding:10px 12px; font-size:.7rem; line-height:1.4; box-shadow:var(--shadow); } .d-admin .notif .app{ display:flex; gap:7px; align-items:center; font-family:var(--mono); font-size:.58rem; color:#c9d6e2; margin-bottom:4px; text-transform:uppercase; letter-spacing:.06em; } .d-admin .notif .app i{ width:10px; height:10px; border-radius:3px; background:#742284; } .d-admin .notif b{ color:#fff; font-weight:600; } .d-admin .src{ margin:8px 0 0; font-family:var(--mono); font-size:.6rem; color:var(--faint); text-align:center; } .d-admin .arrow{ align-self:center; color:var(--faint); text-align:center; font-size:1rem; padding-top:14px; } .d-admin .ui-kpis{ margin:16px 0 0; } .d-admin .estado{ display:inline-flex; gap:8px; align-items:center; margin-top:8px; font-family:var(--mono); font-size:.66rem; color:var(--faint); } .d-admin .reco{ margin-top:12px; display:flex; gap:8px; align-items:center; font-size:.72rem; color:var(--dim); } .d-admin .reco b{ color:var(--ink); } /* ── 6 · WhatsApp + Bandeja ────────────────────────────────── */ .d-wa .cols{ display:grid; grid-template-columns:.8fr 1.3fr .9fr; min-height:270px; } .d-wa .list{ border-right:1px solid var(--line-soft); padding:10px 8px; display:grid; gap:4px; align-content:start; } .d-wa .conv{ display:flex; gap:8px; align-items:center; padding:7px 8px; border-radius:6px; font-size:.68rem; color:var(--dim); } .d-wa .conv.sel{ background:var(--cobalt-soft); } .d-wa .conv b{ display:block; color:var(--ink); font-weight:600; font-size:.7rem; } .d-wa .conv .av{ width:22px; height:22px; border-radius:50%; background:var(--ice-2); flex:none; display:grid; place-items:center; font:600 .58rem var(--mono); color:var(--dim); } .d-wa .conv .badge{ margin-left:auto; min-width:16px; height:16px; border-radius:999px; background:var(--cobalt); color:#fff; font:600 .56rem/16px var(--mono); text-align:center; padding:0 5px; } .d-wa .thread{ padding:10px 12px; display:flex; flex-direction:column; gap:8px; background:#f8fafc; } .d-wa .thread-head{ display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-size:.66rem; color:var(--faint); font-family:var(--mono); padding-bottom:8px; border-bottom:1px solid var(--line-soft); } .d-wa .thread-head b{ color:var(--ink); font-family:var(--sans); font-size:.74rem; } .d-wa .msg{ max-width:88%; padding:7px 10px; border-radius:8px; font-size:.7rem; line-height:1.4; position:relative; } .d-wa .msg.in{ align-self:flex-start; background:#fff; border:1px solid var(--line-soft); border-bottom-left-radius:2px; color:var(--ink); } .d-wa .msg.out{ align-self:flex-end; background:#dcf3e4; border-bottom-right-radius:2px; color:var(--ink); } .d-wa .msg .who{ display:block; font-family:var(--mono); font-size:.54rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin-bottom:3px; } .d-wa .msg .who.bot{ color:var(--cobalt); } .d-wa .msg .who.of{ color:var(--ok); } .d-wa .voucher{ display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; margin-top:2px; } .d-wa .voucher i{ width:30px; height:38px; border-radius:4px; background:linear-gradient(160deg,#8a2c9a,#5b1a66); display:block; } .d-wa .voucher span{ font-family:var(--mono); font-size:.62rem; color:var(--dim); line-height:1.4; } .d-wa .voucher span b{ color:var(--ink); display:block; font-size:.7rem; } .d-wa .ficha{ border-left:1px solid var(--line-soft); padding:10px 12px; font-size:.68rem; color:var(--dim); display:grid; gap:8px; align-content:start; } .d-wa .ficha h5{ margin:0; font-size:.76rem; color:var(--ink); } .d-wa .ficha dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:4px 8px; } .d-wa .ficha dt{ font-family:var(--mono); font-size:.56rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); } .d-wa .ficha dd{ margin:0; font-family:var(--mono); font-size:.64rem; color:var(--ink); } .d-wa .win{ margin-top:4px; } .d-wa .win small{ font-family:var(--mono); font-size:.58rem; color:var(--faint); display:block; margin-bottom:4px; } .d-wa .win .bar{ height:5px; border-radius:999px; background:var(--ice-2); overflow:hidden; } .d-wa .win .bar i{ display:block; height:100%; width:98%; background:var(--ok); border-radius:999px; } @media (max-width:760px){ /* En un teléfono los rótulos del mapa del hero quedarían de 4 px: los avisos (chips) ya cuentan lo mismo. Los gráficos de perfil y de láminas se desplazan de costado dentro de su pantalla en vez de achicarse. */ .d-hero .lbl{ display:none; } .d-optica .screen-body, .d-lic .screen-body{ overflow-x:auto; } .d-optica svg{ min-width:460px; } .d-lic svg{ min-width:440px; } .screen-bar span:not(.on):not(.who){ display:none; } /* solo la pestaña activa cabe */ .d-lic .file{ position:static; width:fit-content; margin:10px 0 0; white-space:nowrap; } .d-olt .screen-body{ overflow-x:auto; padding-bottom:16px; } .ui-toast{ position:static; margin:0 18px 14px; white-space:normal; } .d-wa .cols{ grid-template-columns:1fr; } .d-wa .list, .d-wa .ficha{ display:none; } .d-admin .flow{ grid-template-columns:1fr; } .d-admin .arrow{ transform:rotate(90deg); padding:0; } .d-lic .docs{ grid-template-columns:repeat(2, 1fr); } .ui-table td:nth-child(5), .ui-table th:nth-child(5){ display:none; } } /* Ancla: el cursor y el clic viven DENTRO del botón que van a tocar, así la trayectoria se define desde el destino y no depende del ancho. */ .anchor{ position:relative; display:inline-block; } .anchor .cur{ left:42%; top:38%; } .anchor .clk{ left:50%; top:50%; }