/* ==========================================================================
   Quasar · hero en acción y video explicativo
   La interfaz virtual mide 1040 × 650 y se escala entera; cada pieza animada
   lee --p (0 → 1), que film.js calcula a partir del tiempo.
   ========================================================================== */

/* ---------------------------------------------------------------- escenario */
#quasar-presentacion .hf { position: relative; }
#quasar-presentacion .hf-win { position: relative; border-radius: 18px; overflow: hidden; background: #0a0d26; border: 1px solid rgb(160 170 255 / 0.2);
  box-shadow: 0 60px 120px -40px rgb(4 6 20 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.03) inset, 0 0 80px -20px rgb(110 92 245 / 0.35); }
#quasar-presentacion .hf-bar { position: relative; display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 14px; background: linear-gradient(180deg, #151a46, #10143a); border-bottom: 1px solid rgb(160 170 255 / 0.12); font-size: 11.5px; color: #a6abdd; }
#quasar-presentacion .hf-bar .dots { display: flex; gap: 6px; }
#quasar-presentacion .hf-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3f78; }
#quasar-presentacion .hf-bar .dots i:nth-child(1) { background: #ff6b81; } #quasar-presentacion .hf-bar .dots i:nth-child(2) { background: #f5c13d; } #quasar-presentacion .hf-bar .dots i:nth-child(3) { background: #2fd58b; }
#quasar-presentacion .hf-bar .ttl { position: absolute; left: 50%; transform: translateX(-50%); display: grid; height: 22px; padding: 0 12px; border-radius: 8px; background: rgb(255 255 255 / 0.05); white-space: nowrap; }
#quasar-presentacion .hf-bar .ttl b { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
#quasar-presentacion .hf-bar .ttl b .ic { width: 13px; height: 13px; color: #2ee6c9; }
#quasar-presentacion .hf-bar .ttl[data-s="admin"] .prov,#quasar-presentacion  .hf-bar .ttl[data-s="prov"] .admin { opacity: 0; }
#quasar-presentacion .hf-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #2ee6c9; }
#quasar-presentacion .hf-bar .live i { width: 7px; height: 7px; border-radius: 50%; background: #2ee6c9; box-shadow: 0 0 0 3px rgb(46 230 201 / 0.2); }
#quasar-presentacion .hf-vp { position: relative; aspect-ratio: 1040 / 650; overflow: hidden; background: #0a0d26; }
#quasar-presentacion .fx { position: absolute; left: 0; top: 0; width: 1040px; height: 650px; transform-origin: 0 0; transform: scale(var(--s, 0.5)); }
#quasar-presentacion .fx-cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }

/* leyenda de cada momento */
#quasar-presentacion .hf-cap { position: absolute; left: 16px; bottom: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 9px 14px 9px 12px; border-radius: 12px;
  background: rgb(9 12 34 / 0.82); border: 1px solid rgb(46 230 201 / 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 600 13.5px/1.35 var(--font); color: #eef0ff; box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.8);
  opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 10px)); pointer-events: none; }
#quasar-presentacion .hf-cap i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2ee6c9; box-shadow: 0 0 10px 2px rgb(46 230 201 / 0.7); }

/* celular que acompaña */
#quasar-presentacion .hf-phone { position: absolute; right: -30px; bottom: 9%; z-index: 5; width: 22%; min-width: 150px; max-width: 220px; aspect-ratio: 9 / 18.5;
  opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 60px)) rotate(calc((1 - var(--p, 0)) * 4deg)); pointer-events: none; }
#quasar-presentacion .hf-phone .pbody { position: absolute; inset: 0; border-radius: 30px; padding: 8px; background: linear-gradient(160deg, #2a2f68, #10143a); border: 1px solid rgb(160 170 255 / 0.3); box-shadow: 0 40px 70px -24px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.05) inset; }
#quasar-presentacion .hf-phone .notch { position: absolute; left: 50%; top: 13px; transform: translateX(-50%); width: 30%; height: 14px; border-radius: 99px; background: #05071a; z-index: 2; }
#quasar-presentacion .hf-phone .pscr { position: relative; height: 100%; border-radius: 23px; overflow: hidden; background: #0b1d1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23ffffff' fill-opacity='.04'/%3E%3C/svg%3E"); container-type: inline-size; }
#quasar-presentacion .psv { position: absolute; inset: 0; padding: 14cqw 6cqw 6cqw; display: flex; flex-direction: column; gap: 4cqw; opacity: var(--p, 0); }
#quasar-presentacion .wah { display: flex; align-items: center; gap: 4cqw; padding-bottom: 4cqw; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
#quasar-presentacion .wav { display: grid; place-items: center; width: 15cqw; height: 15cqw; border-radius: 50%; background: linear-gradient(135deg, #2ee6c9, #8577ff); color: #07102a; flex: none; }
#quasar-presentacion .wav .ic { width: 8cqw; height: 8cqw; }
#quasar-presentacion .wah b { display: block; font-size: 6.2cqw; color: #eaf5f2; line-height: 1.2; }
#quasar-presentacion .wah small { font-size: 5cqw; color: #8fb3ad; }
#quasar-presentacion .wab { position: relative; align-self: flex-start; max-width: 88%; padding: 3.5cqw 4cqw 6cqw; border-radius: 4cqw 4cqw 4cqw 1cqw; background: #1c2d2a; color: #e3efec; font-size: 5.6cqw; line-height: 1.38;
  opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 8px)) scale(calc(0.94 + var(--p, 0) * 0.06)); transform-origin: 0 100%; }
#quasar-presentacion .wab b { color: #fff; }
#quasar-presentacion .wab > b:first-child { display: block; margin-bottom: 1cqw; color: #7ff0d9; }
#quasar-presentacion .wab .lk { display: block; margin-top: 2cqw; color: #6fd3ff; font-weight: 700; }
#quasar-presentacion .wab small { position: absolute; right: 3cqw; bottom: 1.4cqw; font-size: 4cqw; color: #8fb3ad; }
#quasar-presentacion .wab.me { align-self: flex-end; background: #0f5c4c; border-radius: 4cqw 4cqw 1cqw 4cqw; transform-origin: 100% 100%; }
#quasar-presentacion .wacred { align-self: stretch; padding: 4cqw; border-radius: 5cqw; text-align: center; background: radial-gradient(60cqw 40cqw at 100% 0%, rgb(46 230 201 / 0.3), transparent 70%), radial-gradient(60cqw 40cqw at 0% 100%, rgb(133 119 255 / 0.45), transparent 70%), linear-gradient(150deg, #1a1f55, #0b0e2b);
  border: 1px solid rgb(160 170 255 / 0.25); opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 12px)); }
#quasar-presentacion .wacred .lb { display: block; font: 600 3.6cqw/1 var(--mono); letter-spacing: 0.14em; color: #9da3e0; }
#quasar-presentacion .wacred b { display: block; margin-top: 2cqw; font: 600 7.5cqw/1.1 var(--display); color: #fff; }
#quasar-presentacion .wacred small { display: block; font-size: 4.4cqw; color: #b9bdf0; }
#quasar-presentacion .wacred .qr { width: 46cqw; margin: 3cqw auto; padding: 2.4cqw; border-radius: 3cqw; background: #fff; }
#quasar-presentacion .wacred .qr svg { width: 100%; height: auto; }
#quasar-presentacion .wacred .pill { display: inline-flex; align-items: center; gap: 1.5cqw; height: 7cqw; padding: 0 3cqw; border-radius: 99px; background: rgb(47 213 139 / 0.2); color: #7ff0b8; font-size: 4.4cqw; font-weight: 800; }
#quasar-presentacion .wacred .pill .ic { width: 4cqw; height: 4cqw; }

/* controles debajo de la ventana */
#quasar-presentacion .hf-ctl { margin-top: 18px; display: grid; gap: 12px; }
#quasar-presentacion .hf-ctl .tracks { display: flex; gap: 8px; align-items: stretch; }
#quasar-presentacion .hf-ctl .tracks button { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; border: 1px solid rgb(160 170 255 / 0.16); background: rgb(255 255 255 / 0.03); color: #c9ccf2; cursor: pointer; text-align: left; transition: border-color 0.25s, background 0.25s, color 0.25s; }
#quasar-presentacion .hf-ctl .tracks button:hover { border-color: rgb(160 170 255 / 0.35); }
#quasar-presentacion .hf-ctl .tracks button[aria-selected="true"] { border-color: rgb(46 230 201 / 0.5); background: linear-gradient(100deg, rgb(46 230 201 / 0.12), rgb(133 119 255 / 0.12)); color: #fff; }
#quasar-presentacion .hf-ctl .tracks .ti { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(133 119 255 / 0.18); color: #b9b1ff; flex: none; }
#quasar-presentacion .hf-ctl .tracks button[aria-selected="true"] .ti { background: rgb(46 230 201 / 0.18); color: #2ee6c9; }
#quasar-presentacion .hf-ctl .tracks .ti .ic { width: 17px; height: 17px; }
#quasar-presentacion .hf-ctl .tracks b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
#quasar-presentacion .hf-ctl .tracks small { display: block; font-size: 11.5px; color: #9ea3d8; }
#quasar-presentacion .hf-ctl .tracks .pp { margin-left: auto; width: 46px; padding: 0; justify-content: center; }
#quasar-presentacion .hf-ctl .tracks .pp .ic { width: 18px; height: 18px; }
#quasar-presentacion .hf-ctl .pp .pl,#quasar-presentacion  [data-hero-film].is-playing ~ .hf-ctl .pp .pl { display: none; }
#quasar-presentacion .hf-ctl .pp .pa { display: none; }
#quasar-presentacion [data-hero-film].is-playing ~ .hf-ctl .pp .pa { display: inline; }
#quasar-presentacion [data-hero-film]:not(.is-playing) ~ .hf-ctl .pp .pl { display: inline; }
#quasar-presentacion .hf-ctl .chaps { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; }
#quasar-presentacion .hf-ctl .chap { display: grid; gap: 7px; padding: 0; border: 0; background: none; color: #8f94c8; text-align: left; cursor: pointer; font: 600 11.5px/1.25 var(--font); }
#quasar-presentacion .hf-ctl .chap .bar { position: relative; height: 3px; border-radius: 99px; background: rgb(160 170 255 / 0.18); overflow: hidden; }
#quasar-presentacion .hf-ctl .chap .bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--k, 0) * 100%); background: linear-gradient(90deg, #2ee6c9, #8577ff); border-radius: inherit; }
#quasar-presentacion .hf-ctl .chap.on { color: #fff; }
#quasar-presentacion .hf-ctl .chap:hover { color: #d9dbff; }

/* ---------------------------------------------------------------- interfaz virtual (base) */
#quasar-presentacion .fx { font: 500 13px/1.45 var(--font); color: #e7e9ff; letter-spacing: 0; text-align: left; -webkit-font-smoothing: antialiased;
  background: radial-gradient(700px 420px at 100% 0%, rgb(110 92 245 / 0.22), transparent 65%), radial-gradient(500px 360px at 0% 100%, rgb(46 230 201 / 0.08), transparent 60%), #0b0e2b; }
#quasar-presentacion .fx .ic { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#quasar-presentacion .fx b { font-weight: 700; }
#quasar-presentacion .fx small { font-size: 11px; color: #9a9fd2; }
#quasar-presentacion .fx-shell { position: absolute; inset: 0; opacity: var(--p, 0); }
#quasar-presentacion .fx-v { position: absolute; opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 10px)); }
#quasar-presentacion .fx-shell.admin .fx-v { inset: 0; padding: 18px 22px; }
#quasar-presentacion .fx-shell.prov .fx-v { inset: 0; padding: 20px 34px; }
#quasar-presentacion .fx .card,#quasar-presentacion  .fx .ptodo { border-radius: 14px; border: 1px solid rgb(160 170 255 / 0.12); background: linear-gradient(180deg, rgb(26 31 76 / 0.7), rgb(17 21 56 / 0.65)); }
#quasar-presentacion .fx .ch { padding: 12px 14px 0; }
#quasar-presentacion .fx .ch b { display: block; font-size: 13px; }
#quasar-presentacion .fx .ch.row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
#quasar-presentacion .fx .chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 99px; border: 1px solid rgb(160 170 255 / 0.16); background: rgb(255 255 255 / 0.04); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
#quasar-presentacion .fx .chip i { width: 6px; height: 6px; border-radius: 50%; background: #2ee6c9; box-shadow: 0 0 0 3px rgb(46 230 201 / 0.2); }
#quasar-presentacion .fx .chip.sm { height: 22px; font-size: 10.5px; padding: 0 9px; }
#quasar-presentacion .fx .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 10px; border: 1px solid rgb(160 170 255 / 0.2); background: rgb(255 255 255 / 0.04); font-size: 12px; font-weight: 700; color: #e7e9ff; white-space: nowrap; }
#quasar-presentacion .fx .btn .ic { width: 14px; height: 14px; }
#quasar-presentacion .fx .btn.pr { border: 0; color: #fff; background: linear-gradient(135deg, #8a7bff, #5b4df0); box-shadow: 0 10px 22px -10px rgb(110 92 245 / 0.9); }
#quasar-presentacion .fx .btn.ok { border: 0; color: #052516; background: linear-gradient(135deg, #4be3a0, #22b97a); }
#quasar-presentacion .fx .btn.bad { border-color: rgb(255 85 116 / 0.35); color: #ff9db0; background: rgb(255 85 116 / 0.1); }
#quasar-presentacion .fx .btn.wide { width: 100%; height: 36px; margin-top: 10px; }
#quasar-presentacion .fx .f-hov.btn,#quasar-presentacion  .fx .btn.f-hov { filter: brightness(1.18); box-shadow: 0 0 0 3px rgb(133 119 255 / 0.35), 0 10px 22px -10px rgb(110 92 245 / 0.9); }
#quasar-presentacion .fx .pill { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
#quasar-presentacion .fx .pill .ic { width: 12px; height: 12px; }
#quasar-presentacion .fx .pill.crit,#quasar-presentacion  .fx .pill.bad { background: rgb(255 85 116 / 0.16); color: #ff9db0; }
#quasar-presentacion .fx .pill.high { background: rgb(255 139 74 / 0.16); color: #ffb183; }
#quasar-presentacion .fx .pill.med,#quasar-presentacion  .fx .pill.warn { background: rgb(245 193 61 / 0.16); color: #ffd877; }
#quasar-presentacion .fx .pill.info { background: rgb(90 168 255 / 0.16); color: #9fcbff; }
#quasar-presentacion .fx .pill.ok { background: rgb(47 213 139 / 0.16); color: #7ff0b8; }
#quasar-presentacion .fx .ti { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none; }
#quasar-presentacion .fx .ti .ic { width: 15px; height: 15px; }
#quasar-presentacion .fx .ti.p { background: rgb(133 119 255 / 0.18); color: #a59bff; }
#quasar-presentacion .fx .ti.v { background: rgb(18 168 143 / 0.2); color: #38d6bb; }
#quasar-presentacion .fx .ti.e { background: rgb(204 120 30 / 0.22); color: #f0a252; }
#quasar-presentacion .fx .ti.c { background: rgb(90 168 255 / 0.18); color: #8cc2ff; }
#quasar-presentacion .fx .ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: none; }
#quasar-presentacion .fx .ico.ok { background: rgb(47 213 139 / 0.16); color: #4be3a0; } #quasar-presentacion .fx .ico.bad { background: rgb(255 85 116 / 0.16); color: #ff7d95; } #quasar-presentacion .fx .ico.ser { background: rgb(255 139 74 / 0.16); color: #ff9d66; }
#quasar-presentacion .fx .ico.warn { background: rgb(245 193 61 / 0.16); color: #f5c13d; } #quasar-presentacion .fx .ico.info { background: rgb(90 168 255 / 0.16); color: #7cb8ff; } #quasar-presentacion .fx .ico.pl { background: rgb(46 230 201 / 0.16); color: #2ee6c9; } #quasar-presentacion .fx .ico.vi { background: rgb(133 119 255 / 0.18); color: #a59bff; }
#quasar-presentacion .fx .av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #3b6fd8, #6a4fe0); color: #fff; font-size: 11px; font-weight: 800; flex: none; }
#quasar-presentacion .fx .eb { display: inline-flex; align-items: center; gap: 7px; font: 600 9.5px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: #2ee6c9; }
#quasar-presentacion .fx .eb::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.3px solid currentColor; background: radial-gradient(circle, currentColor 0 1.4px, transparent 1.8px); }
#quasar-presentacion .fx-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
#quasar-presentacion .fx-h h3 { margin-top: 7px; font: 600 21px/1.15 var(--display); letter-spacing: -0.025em; color: #fff; }
#quasar-presentacion .fx .g { background: linear-gradient(95deg, #46f0d4, #7fb4ff 50%, #a493ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#quasar-presentacion .fx .g b { font-weight: 600; }

/* ---------------------------------------------------------------- planta: barra lateral y superior */
#quasar-presentacion .fx-side { position: absolute; left: 8px; top: 8px; bottom: 8px; width: 184px; display: flex; flex-direction: column; gap: 10px; padding: 14px 10px 10px; border-radius: 16px; background: linear-gradient(180deg, #171b4f, #0f1238); border: 1px solid rgb(160 170 255 / 0.14); }
#quasar-presentacion .fx-brand { display: flex; align-items: center; gap: 9px; padding: 0 6px; }
#quasar-presentacion .fx-brand img { width: 26px; height: 26px; }
#quasar-presentacion .fx-brand b { font: 700 13px/1 var(--display); letter-spacing: 0.22em; color: #fff; }
#quasar-presentacion .fx-prog { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 11px; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(160 170 255 / 0.12); }
#quasar-presentacion .fx-prog > i { width: 7px; height: 7px; border-radius: 50%; background: #2ee6c9; box-shadow: 0 0 0 3px rgb(46 230 201 / 0.2); flex: none; }
#quasar-presentacion .fx-prog b { display: block; font-size: 11.5px; line-height: 1.2; }
#quasar-presentacion .fx-prog small { font-size: 9.5px; }
#quasar-presentacion .fx-prog > .ic { margin-left: auto; width: 13px; height: 13px; color: #9a9fd2; }
#quasar-presentacion .fx-nav { display: flex; flex-direction: column; gap: 1px; }
#quasar-presentacion .fx-nav .lab { margin: 7px 8px 3px; font: 600 8.5px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: #6e74ad; }
#quasar-presentacion .fx-nav a { position: relative; display: flex; align-items: center; gap: 9px; height: 27px; padding: 0 8px; border-radius: 9px; font-size: 11.5px; font-weight: 600; color: #c3c6ee; }
#quasar-presentacion .fx-nav a .ic { width: 14px; height: 14px; color: #8f94c8; }
#quasar-presentacion .fx-nav a em { margin-left: auto; min-width: 22px; height: 17px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; font: 700 9.5px/1 var(--mono); font-style: normal; }
#quasar-presentacion .fx-nav a em.bad { background: rgb(255 85 116 / 0.18); color: #ff9db0; } #quasar-presentacion .fx-nav a em.warn { background: rgb(245 193 61 / 0.18); color: #ffd877; } #quasar-presentacion .fx-nav a em.pl { background: rgb(46 230 201 / 0.16); color: #7ff0d9; } #quasar-presentacion .fx-nav a em.info { background: rgb(90 168 255 / 0.16); color: #9fcbff; }
#quasar-presentacion .fx-nav a.f-hov { background: rgb(255 255 255 / 0.06); color: #fff; }
#quasar-presentacion .fx-nav[data-s="dash"] a[data-n="dash"],#quasar-presentacion  .fx-nav[data-s="alertas"] a[data-n="alertas"],#quasar-presentacion  .fx-nav[data-s="venc"] a[data-n="venc"],#quasar-presentacion  .fx-nav[data-s="acc"] a[data-n="acc"],#quasar-presentacion  .fx-nav[data-s="rev"] a[data-n="rev"] { background: linear-gradient(90deg, rgb(133 119 255 / 0.32), rgb(133 119 255 / 0.12)); color: #fff; box-shadow: inset 0 0 0 1px rgb(160 150 255 / 0.3); }
#quasar-presentacion .fx-nav[data-s="dash"] a[data-n="dash"] .ic,#quasar-presentacion  .fx-nav[data-s="alertas"] a[data-n="alertas"] .ic,#quasar-presentacion  .fx-nav[data-s="venc"] a[data-n="venc"] .ic,#quasar-presentacion  .fx-nav[data-s="acc"] a[data-n="acc"] .ic,#quasar-presentacion  .fx-nav[data-s="rev"] a[data-n="rev"] .ic { color: #2ee6c9; }
#quasar-presentacion .fx-me { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px 6px 2px; border-top: 1px solid rgb(160 170 255 / 0.12); }
#quasar-presentacion .fx-me b { display: block; font-size: 11.5px; line-height: 1.2; }
#quasar-presentacion .fx-me small { font-size: 9.5px; }
#quasar-presentacion .fx-top { position: absolute; left: 204px; right: 0; top: 0; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 18px 0 14px; }
#quasar-presentacion .fx-top .crumb { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #9a9fd2; white-space: nowrap; }
#quasar-presentacion .fx-top .crumb .ic { width: 12px; height: 12px; }
#quasar-presentacion .fx-top .crumb b { display: none; color: #fff; font-weight: 600; }
#quasar-presentacion .fx-top .crumb[data-s="dash"] [data-c="dash"],#quasar-presentacion  .fx-top .crumb[data-s="alertas"] [data-c="alertas"],#quasar-presentacion  .fx-top .crumb[data-s="venc"] [data-c="venc"],#quasar-presentacion  .fx-top .crumb[data-s="rev"] [data-c="rev"],#quasar-presentacion  .fx-top .crumb[data-s="acc"] [data-c="acc"] { display: inline; }
#quasar-presentacion .fx-top .sp { flex: 1; }
#quasar-presentacion .fx-top .search { display: inline-flex; align-items: center; gap: 8px; width: 250px; height: 32px; padding: 0 6px 0 11px; border-radius: 99px; border: 1px solid rgb(160 170 255 / 0.16); background: rgb(255 255 255 / 0.04); color: #8f94c8; font-size: 11.5px; }
#quasar-presentacion .fx-top .search span { flex: 1; }
#quasar-presentacion .fx-top .search.f-hov { border-color: rgb(46 230 201 / 0.5); }
#quasar-presentacion .fx kbd { display: inline-grid; place-items: center; height: 20px; padding: 0 6px; border-radius: 6px; border: 1px solid rgb(160 170 255 / 0.25); background: rgb(255 255 255 / 0.05); font: 600 9.5px/1 var(--font); color: #9a9fd2; }
#quasar-presentacion .fx-top .ib { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgb(160 170 255 / 0.16); background: rgb(255 255 255 / 0.04); color: #c3c6ee; }
#quasar-presentacion .fx-top .ib .dot { position: absolute; right: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #ff5574; box-shadow: 0 0 0 2px #0b0e2b; }
#quasar-presentacion .fx-top .ib.f-hov { border-color: rgb(46 230 201 / 0.5); color: #fff; }
#quasar-presentacion .fx-main { position: absolute; left: 196px; right: 0; top: 52px; bottom: 0; overflow: hidden; }

/* tablero */
#quasar-presentacion .fx .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
#quasar-presentacion .fx .kpi { position: relative; padding: 12px 14px; border-radius: 14px; border: 1px solid rgb(160 170 255 / 0.12); background: linear-gradient(180deg, rgb(26 31 76 / 0.7), rgb(17 21 56 / 0.65)); overflow: hidden; }
#quasar-presentacion .fx .kpi::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #2ee6c9; }
#quasar-presentacion .fx .kpi.bad::before { background: #ff5574; } #quasar-presentacion .fx .kpi.warn::before { background: #ff8b4a; } #quasar-presentacion .fx .kpi.pl::before { background: #8577ff; }
#quasar-presentacion .fx .kpi > span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9a9fd2; }
#quasar-presentacion .fx .kpi > span .ic { width: 13px; height: 13px; }
#quasar-presentacion .fx .kpi > b { display: block; margin-top: 4px; font: 600 26px/1.05 var(--display); letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
#quasar-presentacion .fx .kpi > b i { font-style: normal; }
#quasar-presentacion .fx .kpi > b small { font-size: 14px; color: #9a9fd2; }
#quasar-presentacion .fx .kpi > em { display: block; margin-top: 2px; font-size: 10.5px; font-style: normal; color: #8f94c8; }
#quasar-presentacion .fx .kpi > em.up { color: #7ff0b8; }
#quasar-presentacion .fx .kpi.f-hov { border-color: rgb(255 85 116 / 0.45); }
#quasar-presentacion .fx .row2 { display: grid; grid-template-columns: 1.25fr 0.8fr 1.15fr; gap: 10px; margin-top: 10px; height: 262px; }
#quasar-presentacion .fx .gw { display: flex; align-items: center; gap: 12px; padding: 12px 14px 14px; }
#quasar-presentacion .fx .ring { position: relative; width: 132px; height: 132px; flex: none; }
#quasar-presentacion .fx .ring svg { width: 100%; height: 100%; overflow: visible; }
#quasar-presentacion .fx .ring .t { fill: none; stroke: rgb(160 170 255 / 0.12); }
#quasar-presentacion .fx .ring .a { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
#quasar-presentacion .fx .ring .mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
#quasar-presentacion .fx .ring .mid b { font: 600 24px/1 var(--display); letter-spacing: -0.03em; }
#quasar-presentacion .fx .ring .mid span { font-size: 9.5px; color: #9a9fd2; margin-top: 3px; }
#quasar-presentacion .fx .rbars,#quasar-presentacion  .fx .prb { flex: 1; display: grid; gap: 12px; min-width: 0; }
#quasar-presentacion .fx .rb { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; }
#quasar-presentacion .fx .rb b { display: block; font-size: 11.5px; margin-bottom: 5px; }
#quasar-presentacion .fx .rb .seg,#quasar-presentacion  .fx .rb .bar { display: flex; gap: 2px; height: 6px; border-radius: 99px; overflow: hidden; background: rgb(160 170 255 / 0.12); }
#quasar-presentacion .fx .rb .seg i { display: block; height: 100%; }
#quasar-presentacion .fx .rb .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8577ff, #2ee6c9); }
#quasar-presentacion .fx .rb > em { font: 600 15px/1 var(--display); font-style: normal; }
#quasar-presentacion .fx .rb > em small { font-size: 10px; }
#quasar-presentacion .fx .sev .sevg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; }
#quasar-presentacion .fx .sev .s { display: grid; gap: 2px; padding: 10px; border-radius: 11px; background: rgb(255 255 255 / 0.03); border: 1px solid rgb(160 170 255 / 0.1); }
#quasar-presentacion .fx .sev .s .ic { width: 15px; height: 15px; }
#quasar-presentacion .fx .sev .s b { font: 600 22px/1.05 var(--display); }
#quasar-presentacion .fx .sev .s span { font-size: 10.5px; color: #9a9fd2; }
#quasar-presentacion .fx .sev .bad .ic,#quasar-presentacion  .fx .sev .bad b { color: #ff7d95; } #quasar-presentacion .fx .sev .ser .ic { color: #ff9d66; } #quasar-presentacion .fx .sev .warn .ic { color: #f5c13d; } #quasar-presentacion .fx .sev .info .ic { color: #7cb8ff; }
#quasar-presentacion .fx .feed { margin: 8px 0 0; padding: 0; list-style: none; }
#quasar-presentacion .fx .feed li { display: grid; grid-template-columns: 34px 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 12px; border-top: 1px solid rgb(160 170 255 / 0.08); }
#quasar-presentacion .fx .feed li.nw { max-height: calc(var(--p, 0) * 44px); padding-block: calc(var(--p, 0) * 6px); opacity: var(--p, 0); overflow: hidden; border-top-width: calc(var(--p, 0) * 1px); }
#quasar-presentacion .fx .feed li.nw { background: linear-gradient(90deg, rgb(46 230 201 / calc(0.14 * var(--p, 0))), transparent 70%); }
#quasar-presentacion .fx .feed li.deny { background: linear-gradient(90deg, rgb(255 85 116 / calc(0.16 * var(--p, 0))), transparent 70%); }
#quasar-presentacion .fx .feed .t { font: 500 10px/1 var(--mono); color: #8f94c8; }
#quasar-presentacion .fx .feed .ti { width: 26px; height: 26px; border-radius: 8px; }
#quasar-presentacion .fx .feed .ti .ic { width: 13px; height: 13px; }
#quasar-presentacion .fx .feed b { display: block; font-size: 11.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#quasar-presentacion .fx .feed small { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#quasar-presentacion .fx .feed em { display: inline-flex; align-items: center; gap: 3px; height: 19px; padding: 0 7px; border-radius: 99px; font: 800 9.5px/1 var(--font); font-style: normal; }
#quasar-presentacion .fx .feed em .ic { width: 11px; height: 11px; }
#quasar-presentacion .fx .feed em.ok { background: rgb(47 213 139 / 0.16); color: #7ff0b8; } #quasar-presentacion .fx .feed em.bad { background: rgb(255 85 116 / 0.16); color: #ff9db0; }
#quasar-presentacion .fx .strip { margin-top: 10px; }
#quasar-presentacion .fx .strip .days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 5px; padding: 10px 14px 12px; }
#quasar-presentacion .fx .strip .days span { display: grid; justify-items: center; gap: 2px; padding: 6px 0 5px; border-radius: 10px; border: 1px solid rgb(160 170 255 / 0.1); background: rgb(255 255 255 / 0.025); }
#quasar-presentacion .fx .strip .days em { font: 600 8px/1 var(--mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: #8f94c8; }
#quasar-presentacion .fx .strip .days b { font: 600 15px/1.1 var(--display); }
#quasar-presentacion .fx .strip .days i { font: 600 9.5px/1 var(--mono); font-style: normal; color: #9a9fd2; }
#quasar-presentacion .fx .strip .days .today { border-color: rgb(46 230 201 / 0.6); background: rgb(46 230 201 / 0.1); }
#quasar-presentacion .fx .strip .days .today em { color: #2ee6c9; }
#quasar-presentacion .fx .strip .days .hot i { color: #ff9d66; }

/* alertas */
#quasar-presentacion .fx .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(160 170 255 / 0.12); margin-bottom: 10px; }
#quasar-presentacion .fx .seg span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 8px; font-size: 11.5px; font-weight: 600; color: #a6abdd; }
#quasar-presentacion .fx .seg span i { font: 700 9.5px/1 var(--mono); font-style: normal; color: #8f94c8; }
#quasar-presentacion .fx .seg[data-s="all"] [data-v="all"],#quasar-presentacion  .fx .seg[data-s="crit"] [data-v="crit"] { background: rgb(133 119 255 / 0.3); color: #fff; }
#quasar-presentacion .fx .seg span.f-hov { color: #fff; background: rgb(255 255 255 / 0.06); }
#quasar-presentacion .fx .alist { display: grid; gap: 0; border-radius: 14px; border: 1px solid rgb(160 170 255 / 0.12); background: linear-gradient(180deg, rgb(26 31 76 / 0.7), rgb(17 21 56 / 0.65)); overflow: hidden; }
#quasar-presentacion .fx .arow { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: start; padding: 11px 14px 11px 16px; border-top: 1px solid rgb(160 170 255 / 0.08); }
#quasar-presentacion .fx .arow:first-child { border-top: 0; }
#quasar-presentacion .fx .arow::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #ff5574; }
#quasar-presentacion .fx .arow.high::before { background: #ff8b4a; } #quasar-presentacion .fx .arow.med::before { background: #f5c13d; }
#quasar-presentacion .fx .arow[data-f="arow-n"] { max-height: calc((1 - var(--p, 0)) * 90px); padding-block: calc((1 - var(--p, 0)) * 11px); opacity: calc(1 - var(--p, 0)); overflow: hidden; border-top-width: calc((1 - var(--p, 0)) * 1px); }
#quasar-presentacion .fx .arow .ai { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(255 85 116 / 0.14); color: #ff7d95; }
#quasar-presentacion .fx .arow.high .ai { background: rgb(255 139 74 / 0.14); color: #ff9d66; } #quasar-presentacion .fx .arow.med .ai { background: rgb(245 193 61 / 0.14); color: #f5c13d; }
#quasar-presentacion .fx .arow b { display: block; font-size: 12.5px; line-height: 1.25; }
#quasar-presentacion .fx .arow small { display: block; margin-top: 2px; font-size: 11px; }
#quasar-presentacion .fx .arow .tags { display: flex; gap: 8px; margin-top: 6px; }
#quasar-presentacion .fx .arow .tags em { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-style: normal; color: #8f94c8; }
#quasar-presentacion .fx .arow .tags em.rt { height: 20px; padding: 0 7px; border-radius: 6px; background: rgb(255 255 255 / 0.05); color: #dcdfff; font-weight: 700; }
#quasar-presentacion .fx .arow .tags em .ic { width: 11px; height: 11px; }
#quasar-presentacion .fx .arow .tags em.p .ic { color: #a59bff; } #quasar-presentacion .fx .arow .tags em.v .ic { color: #38d6bb; } #quasar-presentacion .fx .arow .tags em.e .ic { color: #f0a252; }
#quasar-presentacion .fx .arow .sd { display: grid; justify-items: end; gap: 4px; }
#quasar-presentacion .fx .arow.f-hov { background: rgb(255 255 255 / 0.04); }
#quasar-presentacion .fx .drawer,#quasar-presentacion  .fx .dpanel { position: absolute; top: 8px; right: 8px; bottom: 8px; width: 336px; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, #1b2056, #11143c); border: 1px solid rgb(160 170 255 / 0.2);
  box-shadow: -30px 0 60px -20px rgb(0 0 0 / 0.7); opacity: var(--p, 0); transform: translateX(calc((1 - var(--p, 0)) * 40px)); }
#quasar-presentacion .fx .drawer .dh,#quasar-presentacion  .fx .dpanel .dh { display: flex; justify-content: space-between; align-items: flex-start; }
#quasar-presentacion .fx .drawer .x,#quasar-presentacion  .fx .dpanel .x { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgb(255 255 255 / 0.05); color: #9a9fd2; }
#quasar-presentacion .fx .drawer h4 { margin-top: 10px; font: 600 16px/1.25 var(--display); }
#quasar-presentacion .fx .drawer p { margin-top: 6px; font-size: 11.5px; color: #b3b7e6; }
#quasar-presentacion .fx .dl { display: grid; gap: 1px; margin-top: 12px; border-radius: 11px; overflow: hidden; border: 1px solid rgb(160 170 255 / 0.1); }
#quasar-presentacion .fx .dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; background: rgb(255 255 255 / 0.025); font-size: 11px; }
#quasar-presentacion .fx .dl span { color: #9a9fd2; }
#quasar-presentacion .fx .dl b { font-weight: 700; text-align: right; }
#quasar-presentacion .fx .dl b.bad { color: #ff9db0; }
#quasar-presentacion .fx .tl { position: relative; display: grid; gap: 9px; margin-top: 14px; padding-left: 18px; }
#quasar-presentacion .fx .tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1.5px; background: rgb(160 170 255 / 0.18); }
#quasar-presentacion .fx .tl > div { position: relative; }
#quasar-presentacion .fx .tl i { position: absolute; left: -18px; top: 3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #8577ff; background: #11143c; }
#quasar-presentacion .fx .tl .on i { background: #8577ff; }
#quasar-presentacion .fx .tl b { display: block; font-size: 11.5px; }
#quasar-presentacion .fx .tl [data-f="atl"] { opacity: calc(0.35 + var(--p, 0) * 0.65); }
#quasar-presentacion .fx .tl [data-f="atl"] i { border-color: #2ee6c9; background: color-mix(in srgb, #2ee6c9 calc(var(--p, 0) * 100%), #11143c); }
#quasar-presentacion .fx .dbtn { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }

/* vencimientos */
#quasar-presentacion .fx .lg { display: flex; gap: 12px; font-size: 10.5px; color: #9a9fd2; }
#quasar-presentacion .fx .lg span { display: inline-flex; align-items: center; gap: 5px; }
#quasar-presentacion .fx .lg i { width: 8px; height: 8px; border-radius: 3px; }
#quasar-presentacion .fx .lg .bad { background: #ff5574; } #quasar-presentacion .fx .lg .ser { background: #ff8b4a; } #quasar-presentacion .fx .lg .warn { background: #f5c13d; } #quasar-presentacion .fx .lg .info { background: #5aa8ff; }
#quasar-presentacion .fx .cal { border-radius: 14px; border: 1px solid rgb(160 170 255 / 0.12); background: linear-gradient(180deg, rgb(26 31 76 / 0.7), rgb(17 21 56 / 0.65)); overflow: hidden; }
#quasar-presentacion .fx .cal .cm { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
#quasar-presentacion .fx .cal .cm > b { font: 600 17px/1 var(--display); }
#quasar-presentacion .fx .segm { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgb(255 255 255 / 0.04); }
#quasar-presentacion .fx .segm span { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 7px; font-size: 10.5px; font-weight: 600; color: #a6abdd; }
#quasar-presentacion .fx .segm span .ic { width: 12px; height: 12px; }
#quasar-presentacion .fx .segm .on { background: rgb(133 119 255 / 0.3); color: #fff; }
#quasar-presentacion .fx .cw { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid rgb(160 170 255 / 0.08); }
#quasar-presentacion .fx .cw span { padding: 6px 9px; font: 600 8.5px/1 var(--mono); letter-spacing: 0.12em; color: #8f94c8; }
#quasar-presentacion .fx .cg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
#quasar-presentacion .fx .cd { position: relative; height: 82px; padding: 6px 6px; border-top: 1px solid rgb(160 170 255 / 0.08); border-left: 1px solid rgb(160 170 255 / 0.08); display: flex; flex-direction: column; gap: 3px; }
#quasar-presentacion .fx .cd:nth-child(7n + 1) { border-left: 0; }
#quasar-presentacion .fx .cd > b { font: 600 12px/1 var(--display); color: #dcdfff; margin-bottom: 2px; }
#quasar-presentacion .fx .cd.out { background: repeating-linear-gradient(135deg, rgb(160 170 255 / 0.04) 0 6px, transparent 6px 12px); }
#quasar-presentacion .fx .cd.out > b { color: #5f6499; }
#quasar-presentacion .fx .cd.today > b { display: grid; place-items: center; width: 22px; height: 22px; margin: -3px 0 0 -3px; border-radius: 50%; background: #2ee6c9; color: #062420; }
#quasar-presentacion .fx .cd em { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 5px 0 2px; border-radius: 6px; font-size: 9.5px; font-weight: 700; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 2px 0 0 currentColor; }
#quasar-presentacion .fx .cd em .ti { width: 14px; height: 14px; border-radius: 4px; background: none; }
#quasar-presentacion .fx .cd em .ti .ic { width: 11px; height: 11px; }
#quasar-presentacion .fx .cd em.bad { background: rgb(255 85 116 / 0.14); color: #ff9db0; } #quasar-presentacion .fx .cd em.ser { background: rgb(255 139 74 / 0.14); color: #ffb183; } #quasar-presentacion .fx .cd em.warn { background: rgb(245 193 61 / 0.13); color: #ffd877; } #quasar-presentacion .fx .cd em.info { background: rgb(90 168 255 / 0.13); color: #9fcbff; }
#quasar-presentacion .fx .cd small { font-size: 9px; font-weight: 700; color: #a59bff; padding-left: 3px; }
#quasar-presentacion .fx .cd.f-hov { background: rgb(133 119 255 / 0.12); box-shadow: inset 0 0 0 1.5px rgb(133 119 255 / 0.6); }
#quasar-presentacion .fx .dpanel h4 { margin-top: 6px; font: 600 18px/1.2 var(--display); }
#quasar-presentacion .fx .dpanel .dr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgb(160 170 255 / 0.08); opacity: var(--p, 0); transform: translateX(calc((1 - var(--p, 0)) * 14px)); }
#quasar-presentacion .fx .dpanel .dr:first-of-type { margin-top: 10px; }
#quasar-presentacion .fx .dpanel .dr b { display: block; font-size: 11.5px; }
#quasar-presentacion .fx .dpanel .dr small { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#quasar-presentacion .fx .dpanel .dr em { font: 700 10px/1 var(--mono); font-style: normal; color: #ffb183; }

/* revisión */
#quasar-presentacion .fx .pst { display: grid; }
#quasar-presentacion .fx .pst > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; font-size: 12px; font-weight: 800; transition: none; }
#quasar-presentacion .fx .pst .ic { width: 14px; height: 14px; }
#quasar-presentacion .fx .pst .r { background: rgb(90 168 255 / 0.16); color: #9fcbff; }
#quasar-presentacion .fx .pst .o { background: rgb(47 213 139 / 0.18); color: #7ff0b8; }
#quasar-presentacion .fx .pst[data-s="review"] .o,#quasar-presentacion  .fx .pst[data-s="ok"] .r { visibility: hidden; }
#quasar-presentacion .fx .rev { display: grid; grid-template-columns: 1.08fr 1fr; gap: 14px; height: 492px; }
#quasar-presentacion .fx .paper { position: relative; padding: 22px 26px; border-radius: 12px; background: #f6f6f1; color: #1e2240; box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.8); overflow: hidden; }
#quasar-presentacion .fx .paper .ph { padding-bottom: 12px; margin-bottom: 10px; border-bottom: 2px solid #1e2240; }
#quasar-presentacion .fx .paper .ph b { display: block; font: 700 15px/1.2 var(--display); letter-spacing: 0.06em; }
#quasar-presentacion .fx .paper .ph small { color: #5a5f7d; font-size: 10.5px; }
#quasar-presentacion .fx .paper .pl { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px dashed #cfd0dc; font-size: 10.5px; }
#quasar-presentacion .fx .paper .pl span { color: #6a6f8c; }
#quasar-presentacion .fx .paper .pl b { font: 600 11px/1.3 var(--mono); }
#quasar-presentacion .fx .paper .hl { justify-self: start; padding: 0 4px; border-radius: 3px; background: rgb(46 230 201 / calc(var(--p, 0) * 0.35)); box-shadow: 0 0 0 calc(var(--p, 0) * 1.5px) rgb(11 155 136 / calc(var(--p, 0) * 0.8)); }
#quasar-presentacion .fx .paper .lines { display: grid; gap: 7px; margin-top: 14px; }
#quasar-presentacion .fx .paper .lines i { height: 6px; border-radius: 3px; background: #dcdde6; }
#quasar-presentacion .fx .paper .sign { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 20px; }
#quasar-presentacion .fx .paper .stamp { display: inline-block; padding: 6px 10px; border: 2px solid rgb(58 82 200 / 0.7); border-radius: 8px; color: rgb(58 82 200 / 0.85); font: 700 9.5px/1.3 var(--mono); transform: rotate(-6deg); box-shadow: 0 0 0 calc(var(--p, 0) * 4px) rgb(46 230 201 / calc(var(--p, 0) * 0.45)); }
#quasar-presentacion .fx .paper .sign i { width: 120px; height: 1.5px; background: #1e2240; }
#quasar-presentacion .fx .paper .wm { position: absolute; right: -12px; bottom: 60px; transform: rotate(-24deg); font: 800 56px/1 var(--display); color: rgb(30 34 64 / 0.06); letter-spacing: 0.1em; }
#quasar-presentacion .fx .rside { position: relative; display: flex; flex-direction: column; gap: 10px; }
#quasar-presentacion .fx .rside .dl { margin-top: 0; }
#quasar-presentacion .fx .ck-t { margin-top: 4px; font: 600 9px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8f94c8; }
#quasar-presentacion .fx .cks { display: grid; gap: 6px; }
#quasar-presentacion .fx .ck { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; border: 1px solid rgb(160 170 255 / 0.12); background: rgb(255 255 255 / 0.03); }
#quasar-presentacion .fx .ck .bx { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgb(160 170 255 / 0.35); color: transparent; }
#quasar-presentacion .fx .ck .bx .ic { width: 13px; height: 13px; stroke-width: 2.6; }
#quasar-presentacion .fx .ck b { font-size: 12px; font-weight: 600; }
#quasar-presentacion .fx .ck[data-s="on"] { border-color: rgb(47 213 139 / 0.4); background: rgb(47 213 139 / 0.08); }
#quasar-presentacion .fx .ck[data-s="on"] .bx { border-color: #2fd58b; background: #2fd58b; color: #052516; }
#quasar-presentacion .fx .ck.f-hov { border-color: rgb(133 119 255 / 0.55); }
#quasar-presentacion .fx .rbtn { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; margin-top: 2px; }
#quasar-presentacion .fx .rbtn .btn { height: 38px; font-size: 12.5px; }
#quasar-presentacion .fx .rdone { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: linear-gradient(100deg, rgb(47 213 139 / 0.2), rgb(46 230 201 / 0.08)); border: 1px solid rgb(47 213 139 / 0.4); color: #7ff0b8;
  opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 10px)); }
#quasar-presentacion .fx .rdone .ic { width: 26px; height: 26px; }
#quasar-presentacion .fx .rdone b { display: block; color: #e9fff4; font-size: 12.5px; }
#quasar-presentacion .fx .rdone small { color: #9fe3c4; }

/* portería */
#quasar-presentacion .fx .gate { display: grid; grid-template-columns: 1fr 1.05fr; gap: 14px; height: 400px; }
#quasar-presentacion .fx .scan { position: relative; display: grid; place-items: center; border-radius: 16px; background: radial-gradient(circle at 50% 46%, rgb(46 230 201 / 0.14), transparent 60%), #05071a; border: 1px solid rgb(160 170 255 / 0.14); overflow: hidden; }
#quasar-presentacion .fx .scan > span:not(.scanned) { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font: 600 9px/1 var(--mono); letter-spacing: 0.14em; color: #7d82b8; }
#quasar-presentacion .fx .scan .frm { position: relative; width: 210px; height: 210px; border-radius: 18px; }
#quasar-presentacion .fx .scan .frm::before,#quasar-presentacion  .fx .scan .frm::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 3px solid transparent; border-color: #2ee6c9 transparent; clip-path: inset(-5% 22%); }
#quasar-presentacion .fx .scan .frm::after { border-color: transparent #2ee6c9; clip-path: inset(22% -5%); }
#quasar-presentacion .fx .scan .qr { position: absolute; inset: 22px; padding: 10px; border-radius: 10px; background: #fff; }
#quasar-presentacion .fx .scan .qr svg { width: 100%; height: 100%; }
#quasar-presentacion .fx .scan .laser { position: absolute; left: 6px; right: 6px; height: 2px; top: calc(10% + var(--p, 0) * 80%); background: #2ee6c9; box-shadow: 0 0 14px 3px rgb(46 230 201 / 0.75); }
#quasar-presentacion .fx .scan .scanned { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px; background: rgb(47 213 139 / 0.2); color: #7ff0b8; font-size: 11px; font-weight: 800; opacity: var(--p, 0); }
#quasar-presentacion .fx .gres { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid rgb(160 170 255 / 0.12); background: linear-gradient(180deg, rgb(26 31 76 / 0.7), rgb(17 21 56 / 0.65)); overflow: hidden; }
#quasar-presentacion .fx .gres .big { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 13px; font: 600 19px/1.1 var(--display); letter-spacing: -0.02em; }
#quasar-presentacion .fx .gres .big .ic { width: 28px; height: 28px; stroke-width: 2.2; }
#quasar-presentacion .fx .gres .big.idle { position: absolute; left: 14px; right: 14px; top: 14px; background: rgb(255 255 255 / 0.05); color: #9a9fd2; opacity: var(--p, 0); }
#quasar-presentacion .fx .gres .big.ok { background: rgb(47 213 139 / 0.18); color: #7ff0b8; opacity: var(--p, 0); transform: scale(calc(0.96 + var(--p, 0) * 0.04)); }
#quasar-presentacion .fx .gres .who { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 2px; opacity: var(--p, 0); }
#quasar-presentacion .fx .gres .who .av { width: 36px; height: 36px; background: linear-gradient(135deg, #8a3fd6, #c3428f); }
#quasar-presentacion .fx .gres .who b { display: block; font-size: 13.5px; }
#quasar-presentacion .fx .gres .who em { font: 600 10px/1 var(--mono); font-style: normal; color: #8f94c8; }
#quasar-presentacion .fx .gres .gc { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 2px; border-top: 1px solid rgb(160 170 255 / 0.08); font-size: 12px; opacity: var(--p, 0); transform: translateX(calc((1 - var(--p, 0)) * 10px)); }
#quasar-presentacion .fx .gres .gc > span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgb(47 213 139 / 0.18); color: #4be3a0; }
#quasar-presentacion .fx .gres .gc > span .ic { width: 12px; height: 12px; stroke-width: 2.6; }
#quasar-presentacion .fx .gres .gc b { font-weight: 600; }
#quasar-presentacion .fx .gres .gc em { font-size: 10.5px; font-style: normal; color: #7ff0b8; font-weight: 700; }
#quasar-presentacion .fx .gcounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
#quasar-presentacion .fx .gcounts > div { padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(160 170 255 / 0.12); background: rgb(255 255 255 / 0.03); }
#quasar-presentacion .fx .gcounts b { display: block; font: 600 20px/1.1 var(--display); font-variant-numeric: tabular-nums; }
#quasar-presentacion .fx .gcounts span { font-size: 10.5px; color: #9a9fd2; }

/* ventanas emergentes */
#quasar-presentacion .fx .pop { position: absolute; right: 54px; top: 46px; width: 300px; padding: 8px; border-radius: 14px; background: #161b4c; border: 1px solid rgb(160 170 255 / 0.22); box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.85);
  opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * -8px)) scale(calc(0.97 + var(--p, 0) * 0.03)); transform-origin: 90% 0; }
#quasar-presentacion .fx .pop .ph2 { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 8px; font-size: 12px; font-weight: 700; }
#quasar-presentacion .fx .pop .ph2 em { font-size: 10px; font-style: normal; color: #ff9db0; font-weight: 700; }
#quasar-presentacion .fx .pop .pi { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: center; padding: 7px 8px; border-radius: 10px; }
#quasar-presentacion .fx .pop .pi b { display: block; font-size: 11.5px; line-height: 1.25; }
#quasar-presentacion .fx .pop .pi.f-hov { background: rgb(133 119 255 / 0.2); }
#quasar-presentacion .fx .cmdk { position: absolute; left: 50%; top: 70px; width: 520px; margin-left: -162px; border-radius: 16px; background: #161b4c; border: 1px solid rgb(160 170 255 / 0.25); box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.9), 0 0 0 9999px rgb(5 7 26 / calc(var(--p, 0) * 0.5));
  opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * -10px)) scale(calc(0.97 + var(--p, 0) * 0.03)); }
#quasar-presentacion .fx .cmdk .ci { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-bottom: 1px solid rgb(160 170 255 / 0.12); font-size: 15px; font-weight: 600; }
#quasar-presentacion .fx .cmdk .ci .ic { width: 17px; height: 17px; color: #2ee6c9; }
#quasar-presentacion .fx .cmdk .ci [data-f="cmdq"] { flex: 1; color: #fff; min-height: 20px; }
#quasar-presentacion .fx .cmdk .cr { padding: 8px; opacity: var(--p, 0); }
#quasar-presentacion .fx .cmdk .grp { padding: 8px 10px 5px; font: 600 9px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: #8f94c8; }
#quasar-presentacion .fx .cmdk .ri { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; }
#quasar-presentacion .fx .cmdk .ri b { display: block; font-size: 12.5px; }
#quasar-presentacion .fx .cmdk .ri.on { background: rgb(133 119 255 / 0.22); }
#quasar-presentacion .fx .toast { position: absolute; right: 18px; bottom: 18px; z-index: 4; display: flex; align-items: center; gap: 11px; width: 330px; padding: 12px 14px; border-radius: 14px; background: #1a1f56; border: 1px solid rgb(47 213 139 / 0.35);
  box-shadow: 0 24px 50px -16px rgb(0 0 0 / 0.85); opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 16px)); }
#quasar-presentacion .fx .toast b { display: block; font-size: 12.5px; }
#quasar-presentacion .fx .typing::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: #2ee6c9; }

/* ---------------------------------------------------------------- proveedor */
#quasar-presentacion .fx-ptop { position: absolute; left: 0; right: 0; top: 0; height: 56px; display: flex; align-items: center; gap: 16px; padding: 0 20px; background: linear-gradient(90deg, #10143a, #0b0e2b); border-bottom: 1px solid rgb(160 170 255 / 0.12); }
#quasar-presentacion .fx-ptop .pb { display: flex; align-items: center; gap: 8px; }
#quasar-presentacion .fx-ptop .pb b { font: 700 12.5px/1 var(--display); letter-spacing: 0.22em; }
#quasar-presentacion .fx-ptop .pco { display: grid; padding-left: 14px; border-left: 1px solid rgb(160 170 255 / 0.16); }
#quasar-presentacion .fx-ptop .pco b { font-size: 11.5px; line-height: 1.2; }
#quasar-presentacion .fx-ptop .pco small { font-size: 9.5px; }
#quasar-presentacion .fx-ptop nav { display: flex; gap: 3px; margin-left: 6px; }
#quasar-presentacion .fx-ptop nav a { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 10px; font-size: 11.5px; font-weight: 600; color: #c1c5ee; }
#quasar-presentacion .fx-ptop nav a .ic { width: 14px; height: 14px; }
#quasar-presentacion .fx-ptop nav a.f-hov { background: rgb(255 255 255 / 0.06); color: #fff; }
#quasar-presentacion .fx-ptop nav[data-s="home"] [data-n="home"],#quasar-presentacion  .fx-ptop nav[data-s="rec"] [data-n="rec"],#quasar-presentacion  .fx-ptop nav[data-s="doc"] [data-n="doc"],#quasar-presentacion  .fx-ptop nav[data-s="cred"] [data-n="cred"] { background: rgb(133 119 255 / 0.28); color: #fff; box-shadow: inset 0 -2px 0 #2ee6c9; }
#quasar-presentacion .fx-ptop .sp { flex: 1; }
#quasar-presentacion .fx-ptop .av { background: linear-gradient(135deg, #b8862b, #8d6418); }
#quasar-presentacion .fx-pmain { position: absolute; left: 0; right: 0; top: 56px; bottom: 0; overflow: hidden; }
#quasar-presentacion .fx .phero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: center; padding: 20px 24px; border-radius: 18px; border: 1px solid rgb(160 170 255 / 0.14);
  background: radial-gradient(400px 220px at 100% 0%, rgb(110 92 245 / 0.28), transparent 70%), linear-gradient(180deg, rgb(26 31 76 / 0.75), rgb(17 21 56 / 0.7)); }
#quasar-presentacion .fx .phero h3 { margin-top: 10px; font: 600 27px/1.08 var(--display); letter-spacing: -0.03em; color: #fff; }
#quasar-presentacion .fx .phero p { margin-top: 10px; font-size: 12px; color: #b3b7e6; max-width: 46ch; }
#quasar-presentacion .fx .prb { gap: 14px; }
#quasar-presentacion .fx .ptodo { margin-top: 14px; }
#quasar-presentacion .fx .tk { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-top: 1px solid rgb(160 170 255 / 0.08); }
#quasar-presentacion .fx .ch + .tk { margin-top: 8px; }
#quasar-presentacion .fx .tk .ti { width: 34px; height: 34px; }
#quasar-presentacion .fx .tk b { display: block; font-size: 12.5px; }
#quasar-presentacion .fx .tk small em { font-style: normal; font-weight: 800; }
#quasar-presentacion .fx .tk small em.ser { color: #ffb183; } #quasar-presentacion .fx .tk small em.bad { color: #ff9db0; }
#quasar-presentacion .fx .tk.f-hov { background: rgb(255 255 255 / 0.03); }
#quasar-presentacion .fx .pup { display: grid; grid-template-columns: 1fr 1.1fr; gap: 14px; height: 330px; }
#quasar-presentacion .fx .drop { display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; border-radius: 16px; border: 1.5px dashed rgb(160 170 255 / calc(0.3 + var(--p, 0) * 0.5));
  background: rgb(133 119 255 / calc(0.04 + var(--p, 0) * 0.12)); transform: scale(calc(1 + var(--p, 0) * 0.015)); }
#quasar-presentacion .fx .drop .cl { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; background: rgb(133 119 255 / 0.18); color: #b9b1ff; margin-bottom: 4px; }
#quasar-presentacion .fx .drop .cl .ic { width: 24px; height: 24px; }
#quasar-presentacion .fx .drop b { font-size: 13px; }
#quasar-presentacion .fx .ocr { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 16px; border: 1px solid rgb(160 170 255 / 0.14); background: linear-gradient(180deg, rgb(26 31 76 / 0.75), rgb(17 21 56 / 0.7));
  opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 12px)); }
#quasar-presentacion .fx .ocr .pg { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 14px 12px; border-radius: 10px; background: #f6f6f1; overflow: hidden; }
#quasar-presentacion .fx .ocr .pg i { display: block; height: 6px; width: 100%; border-radius: 3px; background: #d6d7e2; }
#quasar-presentacion .fx .ocr .pg i.hl { background: #9fe9da; }
#quasar-presentacion .fx .ocr .pg .sc { position: absolute; left: 0; right: 0; height: 26px; top: calc(var(--p, 0) * 100% - 26px); background: linear-gradient(180deg, transparent, rgb(46 230 201 / 0.45)); border-bottom: 2px solid #2ee6c9; }
#quasar-presentacion .fx .ocr .of { display: flex; flex-direction: column; gap: 6px; }
#quasar-presentacion .fx .ocr .st { font-size: 12px; }
#quasar-presentacion .fx .ocr .st > span { display: grid; }
#quasar-presentacion .fx .ocr .st > span > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; }
#quasar-presentacion .fx .ocr .st .ic { width: 15px; height: 15px; color: #2ee6c9; }
#quasar-presentacion .fx .ocr .st .d { color: #7ff0b8; }
#quasar-presentacion .fx .ocr .st [data-s="read"] .d,#quasar-presentacion  .fx .ocr .st [data-s="done"] .r { visibility: hidden; }
#quasar-presentacion .fx .ocr .fld { display: grid; grid-template-columns: 96px minmax(0, 1fr) 16px; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(46 230 201 / calc(var(--p, 0) * 0.3)); font-size: 11px;
  opacity: calc(0.25 + var(--p, 0) * 0.75); }
#quasar-presentacion .fx .ocr .fld span { color: #9a9fd2; }
#quasar-presentacion .fx .ocr .fld b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; filter: blur(calc((1 - var(--p, 0)) * 3px)); }
#quasar-presentacion .fx .ocr .fld .ic { width: 14px; height: 14px; color: #2ee6c9; opacity: var(--p, 0); stroke-width: 2.4; }
#quasar-presentacion .fx .ocr .of .btn { margin-top: auto; align-self: flex-start; height: 34px; opacity: calc(0.2 + var(--p, 0) * 0.8); }
#quasar-presentacion .fx .howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
#quasar-presentacion .fx .howto > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(160 170 255 / 0.12); background: rgb(255 255 255 / 0.03); }
#quasar-presentacion .fx .howto .ico { grid-row: span 2; }
#quasar-presentacion .fx .howto b { font-size: 11.5px; line-height: 1.2; }
#quasar-presentacion .fx .howto small { font-size: 10px; }
#quasar-presentacion .fx .file { position: absolute; z-index: 3; left: calc(860px - var(--p, 0) * 610px); top: calc(480px - var(--p, 0) * 280px); display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-radius: 12px; background: #fff; color: #1e2240;
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.75); transform: rotate(calc(-6deg + var(--p, 0) * 6deg)) scale(calc(1.04 - var(--p, 0) * 0.08)); opacity: 0; }
#quasar-presentacion .fx .file.f-on { opacity: 1; }
#quasar-presentacion .fx .file .fi { display: grid; place-items: center; width: 30px; height: 36px; border-radius: 6px; background: #ff5574; color: #fff; font: 800 9px/1 var(--font); }
#quasar-presentacion .fx .file b { display: block; font-size: 12px; }
#quasar-presentacion .fx .file small { color: #6a6f8c; }
#quasar-presentacion .fx .ptabs { display: flex; gap: 8px; margin-bottom: 12px; }
#quasar-presentacion .fx .ptabs span { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 11px; border: 1px solid rgb(160 170 255 / 0.14); background: rgb(255 255 255 / 0.03); font-size: 12px; font-weight: 700; color: #c3c6ee; }
#quasar-presentacion .fx .ptabs span i { font: 600 10px/1 var(--mono); font-style: normal; color: #8f94c8; }
#quasar-presentacion .fx .ptabs span.on { border-color: rgb(133 119 255 / 0.5); background: rgb(133 119 255 / 0.16); color: #fff; }
#quasar-presentacion .fx .rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#quasar-presentacion .fx .rc { position: relative; padding: 12px 14px; border-radius: 14px; border: 1px solid rgb(160 170 255 / 0.12); background: linear-gradient(180deg, rgb(26 31 76 / 0.7), rgb(17 21 56 / 0.65)); }
#quasar-presentacion .fx .rc.warn { box-shadow: inset 0 3px 0 #f5c13d; } #quasar-presentacion .fx .rc.info { box-shadow: inset 0 3px 0 #5aa8ff; } #quasar-presentacion .fx .rc.ok { box-shadow: inset 0 3px 0 #2fd58b; }
#quasar-presentacion .fx .rc .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
#quasar-presentacion .fx .rc > b { display: block; font-size: 13px; }
#quasar-presentacion .fx .rc .dc { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
#quasar-presentacion .fx .rc .dc em { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 6px; background: rgb(255 255 255 / 0.05); font-size: 9.5px; font-style: normal; font-weight: 700; color: #cfd2f5; box-shadow: inset 2px 0 0 #2fd58b; }
#quasar-presentacion .fx .rc .dc em.pend { box-shadow: inset 2px 0 0 #8f94c8; color: #9a9fd2; }
#quasar-presentacion .fx .rc.new { opacity: var(--p, 0); transform: scale(calc(0.92 + var(--p, 0) * 0.08)); box-shadow: inset 0 3px 0 #5aa8ff, 0 0 0 calc(var(--p, 0) * 2px) rgb(46 230 201 / 0.5); }
#quasar-presentacion .fx .plate { display: inline-flex; flex-direction: column; min-width: 94px; border-radius: 6px; overflow: hidden; background: #fff; color: #111; box-shadow: 0 0 0 1.5px #b9c2d9; }
#quasar-presentacion .fx .plate::before { content: "REPÚBLICA ARGENTINA"; display: block; padding: 2px 4px 1px; font: 700 5.5px/1 var(--font); letter-spacing: 0.08em; color: #fff; background: #1a3e9a; text-align: center; }
#quasar-presentacion .fx .plate b { display: block; padding: 3px 8px 4px; font: 700 13px/1 var(--mono); letter-spacing: 0.06em; text-align: center; white-space: nowrap; }
#quasar-presentacion .fx .plate.old { background: #111; color: #fff; box-shadow: 0 0 0 1.5px #555; }
#quasar-presentacion .fx .plate.old::before { content: "ARGENTINA"; background: #111; color: #99a; }
#quasar-presentacion .fx .modal { position: absolute; left: 50%; top: 36px; width: 560px; margin-left: -280px; padding: 18px 20px; border-radius: 18px; background: #161b4c; border: 1px solid rgb(160 170 255 / 0.25);
  box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.9), 0 0 0 9999px rgb(5 7 26 / calc(var(--p, 0) * 0.55)); opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 14px)) scale(calc(0.97 + var(--p, 0) * 0.03)); }
#quasar-presentacion .fx .modal .mh { display: flex; justify-content: space-between; align-items: flex-start; }
#quasar-presentacion .fx .modal .x { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgb(255 255 255 / 0.05); color: #9a9fd2; }
#quasar-presentacion .fx .modal h4 { display: grid; margin-top: 8px; font: 600 18px/1.2 var(--display); }
#quasar-presentacion .fx .modal h4 > span,#quasar-presentacion  .fx .modal .mf .btn > span { grid-area: 1 / 1; }
#quasar-presentacion .fx .modal [data-s="1"] .b,#quasar-presentacion  .fx .modal [data-s="2"] .a { visibility: hidden; }
#quasar-presentacion .fx .modal .mf .btn.pr { display: inline-grid; grid-auto-flow: column; }
#quasar-presentacion .fx .msteps { display: flex; gap: 6px; margin: 12px 0 14px; }
#quasar-presentacion .fx .msteps i { flex: 1; height: 4px; border-radius: 99px; background: rgb(160 170 255 / 0.18); }
#quasar-presentacion .fx .msteps i:first-child,#quasar-presentacion  .fx .msteps[data-s="2"] i:nth-child(2) { background: linear-gradient(90deg, #8577ff, #2ee6c9); }
#quasar-presentacion .fx .mtypes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; opacity: calc(1 - var(--p, 0)); max-height: calc((1 - var(--p, 0)) * 140px); overflow: hidden; }
#quasar-presentacion .fx .mt { display: grid; justify-items: start; gap: 6px; padding: 14px; border-radius: 14px; border: 1.5px solid rgb(160 170 255 / 0.16); background: rgb(255 255 255 / 0.03); }
#quasar-presentacion .fx .mt .ti { width: 36px; height: 36px; }
#quasar-presentacion .fx .mt b { font-size: 13px; }
#quasar-presentacion .fx .mt.f-hov,#quasar-presentacion  .fx .mt[data-s="on"] { border-color: rgb(46 230 201 / 0.6); background: rgb(46 230 201 / 0.08); }
#quasar-presentacion .fx .mform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; opacity: var(--p, 0); max-height: calc(var(--p, 0) * 330px); overflow: hidden; }
#quasar-presentacion .fx .inp { display: grid; gap: 5px; font-size: 11px; color: #9a9fd2; font-weight: 600; }
#quasar-presentacion .fx .inp > b { position: relative; display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid rgb(160 170 255 / 0.2); background: rgb(255 255 255 / 0.04); color: #fff; font-size: 13px; font-weight: 600; }
#quasar-presentacion .fx .inp .ph { position: absolute; left: 12px; font-style: normal; font-weight: 500; color: #6e74ad; }
#quasar-presentacion .fx .inp [data-f]:not(:empty) + .ph { display: none; }
#quasar-presentacion .fx .inp.f-on > b { border-color: rgb(46 230 201 / 0.65); box-shadow: 0 0 0 3px rgb(46 230 201 / 0.15); }
#quasar-presentacion .fx .mreq { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 11px 12px; border-radius: 12px; background: rgb(133 119 255 / 0.1); border: 1px solid rgb(133 119 255 / 0.25); opacity: var(--p, 0); }
#quasar-presentacion .fx .mreq b { width: 100%; font-size: 11.5px; color: #fff; }
#quasar-presentacion .fx .mreq em { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; background: rgb(255 255 255 / 0.06); font-size: 10.5px; font-style: normal; font-weight: 700; color: #dcdfff; }
#quasar-presentacion .fx .mreq em .ic { width: 12px; height: 12px; color: #a59bff; }
#quasar-presentacion .fx .mf { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
#quasar-presentacion .fx .cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#quasar-presentacion .fx .cc { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 14px; border-radius: 18px; color: #f2f3ff;
  background: radial-gradient(200px 140px at 100% 0%, rgb(46 230 201 / 0.28), transparent 70%), radial-gradient(220px 150px at 0% 100%, rgb(133 119 255 / 0.45), transparent 70%), linear-gradient(150deg, #1a1f55, #0b0e2b); border: 1px solid rgb(160 170 255 / 0.18); }
#quasar-presentacion .fx .cc .lb { font: 600 7.5px/1 var(--mono); letter-spacing: 0.14em; color: #9da3e0; }
#quasar-presentacion .fx .cc b { display: block; margin-top: 6px; font: 600 15px/1.15 var(--display); }
#quasar-presentacion .fx .cc small { display: block; color: #b9bdf0; font-size: 10px; }
#quasar-presentacion .fx .cc .pill { margin-top: 10px; }
#quasar-presentacion .fx .cc .qr { width: 74px; height: 74px; padding: 5px; border-radius: 9px; background: #fff; }
#quasar-presentacion .fx .cc .qr svg { width: 100%; height: 100%; }
#quasar-presentacion .fx .cc .id { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px dashed rgb(255 255 255 / 0.15); font: 500 8.5px/1 var(--mono); color: #9da3e0; }
#quasar-presentacion .fx .cc.hl { box-shadow: 0 0 0 2px rgb(46 230 201 / 0.55), 0 20px 40px -20px rgb(46 230 201 / 0.5); }

/* cursor */
#quasar-presentacion .fx-cur { position: absolute; left: 0; top: 0; z-index: 20; width: 24px; height: 24px; margin: -3px 0 0 -4px; pointer-events: none; transform-origin: 4px 3px; filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.6)); }
#quasar-presentacion .fx-cur svg { width: 24px; height: 24px; }
#quasar-presentacion .fx-cur path { fill: #fff; stroke: #0b0e2b; stroke-width: 1.4; stroke-linejoin: round; }
#quasar-presentacion .fx-rip { position: absolute; left: -22px; top: -22px; z-index: 19; width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid #2ee6c9; background: rgb(46 230 201 / 0.18); opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- responsive del escenario */
@media (max-width: 1100px) { #quasar-presentacion .hf-phone { right: 8px; bottom: -24px; width: 24%; } }
@media (max-width: 640px) {
  #quasar-presentacion .hf-win { border-radius: 12px; }
  #quasar-presentacion .hf-bar { height: 28px; }
  #quasar-presentacion .hf-bar .ttl,#quasar-presentacion  .hf-bar .live { display: none; }
  #quasar-presentacion .hf-cap { left: 8px; bottom: 8px; padding: 6px 10px; font-size: 11.5px; border-radius: 9px; }
  #quasar-presentacion .hf-phone { width: 30%; min-width: 0; right: 4px; bottom: -18px; }
  #quasar-presentacion .hf-phone .pbody { border-radius: 18px; padding: 5px; }
  #quasar-presentacion .hf-phone .pscr { border-radius: 14px; }
  #quasar-presentacion .hf-ctl .tracks button { flex: 1; padding: 7px 10px 7px 7px; }
  #quasar-presentacion .hf-ctl .tracks small { display: none; }
  #quasar-presentacion .hf-ctl .chaps { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 5px; }
  #quasar-presentacion .hf-ctl .chap span { display: none; }
  #quasar-presentacion .hf-ctl .chap.on span { display: block; position: absolute; }
}
@media (prefers-reduced-motion: reduce) { #quasar-presentacion .hf-cap,#quasar-presentacion  .hf-phone { transition: none; } }

/* ---------------------------------------------------------------- hero: texto + simulación */
#quasar-presentacion .hero { padding-bottom: 90px; }
#quasar-presentacion .hero-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(28px, 3.4vw, 54px); align-items: center; }
#quasar-presentacion .hero h1 { font-size: clamp(40px, 4.3vw, 66px); }
#quasar-presentacion .hero .lead { font-size: clamp(15.5px, 1.15vw, 17.5px); }
#quasar-presentacion .hero-film { position: relative; margin-right: calc(-1 * clamp(0px, calc(var(--gut) - 40px), 70px)); }
@media (max-width: 1100px) {
  #quasar-presentacion .hero-grid { grid-template-columns: minmax(0, 1fr); }
  #quasar-presentacion .hero-film { margin: 26px 0 0; }
}
@media (max-width: 640px) { #quasar-presentacion .hero { padding-bottom: 60px; } }

/* exportación de video: sólo el escenario, a pantalla completa */
#quasar-presentacion.capture { background: #070a1c; }
#quasar-presentacion.capture-hero .qh,#quasar-presentacion.capture-hero .band,#quasar-presentacion.capture-hero #top > section:not(.hero),#quasar-presentacion.capture-hero footer,#quasar-presentacion.capture-hero .hero-grid > div:first-child,#quasar-presentacion.capture-hero .hf-ctl,#quasar-presentacion.capture-hero .hero .stars,#quasar-presentacion.capture-hero .hero .orbit { display: none !important; }
#quasar-presentacion.capture-hero .hero { min-height: 0; padding: 0; background: radial-gradient(1100px 700px at 80% 0%, rgb(110 92 245 / 0.35), transparent 62%), radial-gradient(900px 600px at 0% 100%, rgb(46 230 201 / 0.16), transparent 60%), #070a1c; }
#quasar-presentacion.capture-hero .hero .wrap { max-width: none; padding: 0; }
#quasar-presentacion.capture-hero .hero-grid { display: block; }
#quasar-presentacion.capture-hero .hero-film { margin: 0; width: 100vw; height: 100vh; display: grid; place-items: center; }
#quasar-presentacion.capture-hero .hf { width: 1500px; }
#quasar-presentacion .fx,#quasar-presentacion  .fx * { pointer-events: none; }
#quasar-presentacion .fx .btn { transition: none; transform: none; cursor: default; line-height: 1; letter-spacing: 0; }

/* ajustes de la simulación */
#quasar-presentacion .hf-cap { position: relative; left: auto; bottom: auto; margin: 14px 0 0; max-width: 100%; opacity: calc(0.35 + var(--p, 0) * 0.65); transform: translateY(calc((1 - var(--p, 0)) * 6px)); background: rgb(255 255 255 / 0.04); border-color: rgb(46 230 201 / 0.28); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#quasar-presentacion .hf-ctl { margin-top: 12px; }
#quasar-presentacion .fx-nav a,#quasar-presentacion  .fx-prog b,#quasar-presentacion  .fx-prog small,#quasar-presentacion  .fx-me b,#quasar-presentacion  .fx-me small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#quasar-presentacion .fx-prog > div,#quasar-presentacion  .fx-me > div { min-width: 0; }
#quasar-presentacion .fx .cd { height: 70px; }
#quasar-presentacion .fx .toast { left: 50%; right: auto; top: 64px; bottom: auto; margin-left: -175px; width: 350px; transform: translateY(calc((1 - var(--p, 0)) * -14px)); }
#quasar-presentacion .fx-shell.prov .toast { top: 70px; }
#quasar-presentacion .fx .prow { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; margin-top: 12px; }
#quasar-presentacion .fx .prow .lk { font-size: 11px; font-weight: 700; color: #a59bff; }
#quasar-presentacion .fx .mini-days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; padding: 12px 14px 14px; }
#quasar-presentacion .fx .mini-days span { display: grid; justify-items: center; gap: 3px; padding: 6px 0; border-radius: 10px; border: 1px solid rgb(160 170 255 / 0.1); background: rgb(255 255 255 / 0.025); }
#quasar-presentacion .fx .mini-days em { font: 600 7.5px/1 var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; color: #8f94c8; }
#quasar-presentacion .fx .mini-days b { font: 600 14px/1 var(--display); }
#quasar-presentacion .fx .mini-days i { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
#quasar-presentacion .fx .mini-days i.ser { background: #ff8b4a; } #quasar-presentacion .fx .mini-days i.warn { background: #f5c13d; } #quasar-presentacion .fx .mini-days i.info { background: #5aa8ff; }
#quasar-presentacion .fx .mini-days .today { border-color: rgb(46 230 201 / 0.6); background: rgb(46 230 201 / 0.1); }
#quasar-presentacion .fx .mini-days .today em { color: #2ee6c9; }
#quasar-presentacion .fx .per { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
#quasar-presentacion .fx .ring.sm { width: 88px; height: 88px; }
#quasar-presentacion .fx .ring.sm .mid b { font-size: 16px; }
#quasar-presentacion .fx .ring.sm .mid span { font-size: 8.5px; }
#quasar-presentacion .fx .per > div:last-child b { display: block; font-size: 12.5px; }
#quasar-presentacion .fx .per .pm { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: 10.5px; color: #c3c6ee; }
#quasar-presentacion .fx .per .pm span { display: inline-flex; align-items: center; gap: 5px; }
#quasar-presentacion .fx .per .pm i { width: 7px; height: 7px; border-radius: 2px; }
#quasar-presentacion .fx .per .pm i.ok { background: #2fd58b; } #quasar-presentacion .fx .per .pm i.info { background: #5aa8ff; } #quasar-presentacion .fx .per .pm i.bad { background: #ff5574; }
#quasar-presentacion .fx .rc .dc em.warn { box-shadow: inset 2px 0 0 #f5c13d; } #quasar-presentacion .fx .rc .dc em.info { box-shadow: inset 2px 0 0 #5aa8ff; }
#quasar-presentacion .fx .rc .ft { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgb(160 170 255 / 0.1); font-size: 10px; color: #9a9fd2; }
#quasar-presentacion .fx .rc .ft span:last-child { font-family: var(--mono); }
#quasar-presentacion .fx .rgrid .rc { min-height: 150px; }
#quasar-presentacion .fx .cgrid { grid-template-rows: auto auto; }
#quasar-presentacion .fx .cc .qr { width: 66px; height: 66px; }
@media (max-width: 640px) { #quasar-presentacion .hf-cap { margin-top: 10px; font-size: 12px; padding: 7px 10px; } }

/* tablet y celular: la simulación aparece apenas debajo del título */
@media (max-width: 1100px) {
  #quasar-presentacion .hero-grid { gap: 0; }
  #quasar-presentacion .hero-grid > div:first-child { display: contents; }
  #quasar-presentacion .hero-grid .eyebrow { order: 1; justify-self: start; }
  #quasar-presentacion .hero-grid h1 { order: 2; }
  #quasar-presentacion .hero-grid .hero-film { order: 3; margin-top: 24px; }
  #quasar-presentacion .hero-grid .lead { order: 4; margin-top: 26px; }
  #quasar-presentacion .hero-grid .ctas { order: 5; }
  #quasar-presentacion .hero-grid .trust { order: 6; }
}
@media (max-width: 640px) { #quasar-presentacion .hf-ctl .tracks .pp { flex: none; width: 46px; } }
#quasar-presentacion.capture-hero .hf-cap { margin-top: 22px; padding: 14px 24px 14px 20px; border-radius: 16px; font-size: 26px; gap: 14px; }
#quasar-presentacion.capture-hero .hf-cap i { width: 12px; height: 12px; }
#quasar-presentacion.capture-hero .hf-phone { max-width: 300px; right: -60px; }

/* ---------------------------------------------------------------- interruptor claro / oscuro de las ventanas de muestra */
#quasar-presentacion .uisw { position: relative; display: inline-flex; align-items: center; gap: 0; height: 40px; padding: 4px; border-radius: 99px; border: 1px solid rgb(160 170 255 / 0.25); background: rgb(255 255 255 / 0.05); color: #c9ccf5; cursor: pointer; flex: none; }
#quasar-presentacion .uisw > span:not(.k) { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 30px; border-radius: 99px; transition: color 0.25s; }
#quasar-presentacion .uisw .ic { width: 16px; height: 16px; }
#quasar-presentacion .uisw .k { position: absolute; left: 4px; top: 4px; width: 32px; height: 30px; border-radius: 99px; background: linear-gradient(135deg, #8a7bff, #5b4df0); box-shadow: 0 6px 14px -6px rgb(110 92 245 / 0.9); transition: transform 0.3s var(--ease-out), background 0.3s; }
#quasar-presentacion .uisw .mo { color: #fff; }
#quasar-presentacion.ui-light .uisw .k { transform: translateX(32px); background: linear-gradient(135deg, #ffd56b, #f5a524); box-shadow: 0 6px 14px -6px rgb(245 165 36 / 0.9); }
#quasar-presentacion.ui-light .uisw .mo { color: #c9ccf5; }
#quasar-presentacion.ui-light .uisw .su { color: #3a2400; }
#quasar-presentacion .uisw:hover { border-color: rgb(160 170 255 / 0.45); }
#quasar-presentacion .uisw .t { display: none; }
#quasar-presentacion .uisw.lbl { height: auto; padding: 8px 14px 8px 8px; border-radius: 14px; gap: 10px; }
#quasar-presentacion .uisw.lbl .k { left: 8px; top: 50%; margin-top: -15px; }
#quasar-presentacion .uisw.lbl > span:not(.k) { margin-right: 0; }
#quasar-presentacion .uisw.lbl .t { display: grid; margin-left: 2px; font-style: normal; text-align: left; }
#quasar-presentacion .uisw.lbl .t b { grid-area: 1 / 1; font-size: 13px; font-weight: 700; white-space: nowrap; }
#quasar-presentacion .uisw.lbl .t .l,#quasar-presentacion.ui-light .uisw.lbl .t .d { visibility: hidden; }
#quasar-presentacion.ui-light .uisw.lbl .t .l { visibility: visible; }
#quasar-presentacion .qh .uisw { height: 38px; padding: 3px; }
#quasar-presentacion .qh .uisw > span:not(.k),#quasar-presentacion  .qh .uisw .k { width: 30px; height: 30px; }
#quasar-presentacion .qh .uisw .k { left: 3px; top: 3px; }
#quasar-presentacion.ui-light .qh .uisw .k { transform: translateX(30px); }
@media (max-width: 1100px) { #quasar-presentacion .qh .uisw { display: none; } }
#quasar-presentacion .qh nav a { white-space: nowrap; }
@media (max-width: 1440px) { #quasar-presentacion .qh nav { gap: 0; } #quasar-presentacion .qh nav a { padding: 9px 10px; } }
@media (max-width: 1380px) { #quasar-presentacion .qh nav a:nth-child(5) { display: none; } }
@media (max-width: 640px) {
  #quasar-presentacion .hf-ctl .tracks { flex-wrap: wrap; }
  #quasar-presentacion .hf-ctl .tracks button[data-track] { flex: 1 1 calc(50% - 4px); }
  #quasar-presentacion .hf-ctl .tracks .uisw.lbl { flex: 1 1 auto; padding: 6px 14px 6px 6px; border-radius: 14px; justify-content: flex-start; }
  #quasar-presentacion .hf-ctl .tracks .uisw.lbl .k { left: 6px; }
  #quasar-presentacion .hf-ctl .tracks .uisw.lbl .t { display: grid; }
  #quasar-presentacion .hf-ctl .tracks .pp { margin-left: 0; height: 48px; }
  #quasar-presentacion .hero .eyebrow { font-size: 10px; letter-spacing: 0.12em; }
}