/* ============================================================================
Tutoriales interactivos VeruFacts — ESTILOS COMPARTIDOS
Simulador de la app móvil dentro del navegador.
Lo usan tutorial-printer.php (VeruPrinter) y tutorial-pro8.php (VeruFacts
Pro8). Las dos apps son Flutter y comparten el mismo sistema de diseño, así
que comparten también estas piezas; lo propio de cada una va en su archivo
(por ejemplo assets/tutorial-pro8/app.css).
Dos espacios de nombres, a propósito separados:
.vpt-* → la PÁGINA del tutorial (vive dentro del sitio, con Bootstrap).
.vp-* → la APP simulada (réplica de la app; tokens del Flutter).
Todo cuelga de .vpt-root, que resetea lo que el sitio pudiera heredar.
Los valores de color/medida vienen de lib/theme/colors.dart de los proyectos
verufacts_panel_movil_printer y verufacts_pro8_movil, que comparten paleta
— no inventar: si cambia la app, cambiar aquí.
========================================================================== */
/* Las dos fuentes se cargan con desde el de cada tutorial:
con @import aquí, el navegador tenía que bajar primero este archivo, luego la
hoja de Google y solo entonces el .woff2 — tres viajes en cadena, y mientras
tanto los iconos no existen. */
/* ── Tokens ───────────────────────────────────────────────────────────────── */
.vpt-root {
/* Marca VeruFacts (app) */
--brand: #4A69FF;
--brand-hover: #3353F4;
--charcoal: #2D2D2D;
--soft-gray: #F8FAFC;
--soft-bg: #FCFDFF;
--surface: #FFFFFF;
--emerald: #10B981;
--emerald-dark: #059669;
--emerald-bg: #ECFDF5;
--teal-dark: #0F766E;
--amber: #F59E0B;
--amber-dark: #B45309;
--amber-bg: #FFFBEB;
--red: #EF4444;
--red-dark: #B91C1C;
--info-blue: #2563EB;
--info-bg: #EFF4FF;
--purple: #8B5CF6;
--indigo: #4F46E5;
--s50: #F8FAFC;
--s100: #F1F5F9;
--s200: #E2E8F0;
--s300: #CBD5E1;
--s400: #94A3B8;
--s500: #64748B;
--s600: #475569;
--s700: #334155;
--s800: #1E293B;
--s900: #0F172A;
/* Marca del sitio verufacts.com */
--site-navy: #0e2258;
--site-blue: #0554f2;
--site-orange: #f35a38;
--app-font: "Plus Jakarta Sans", "Segoe UI", Roboto, sans-serif;
--page-font: "Nunito", "Segoe UI", Roboto, sans-serif;
--title-font: "Quicksand", "Nunito", sans-serif;
--r-sm: 10px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-xxl: 24px;
}
/* El tema pone `overflow-x: hidden` en el body (style.css:90). Aquí hay una
columna con `position: sticky`, y `overflow` distinto de visible en un
ancestro es la causa clásica de que el sticky deje de funcionar. `clip`
recorta exactamente igual pero nunca crea contenedor de scroll, así que
elimina el riesgo. Solo afecta a esta página (es la única que carga este
archivo) y, si el navegador no soporta `clip`, ignora la línea. */
body { overflow-x: clip; }
/* ── Reset defensivo (el sitio trae Bootstrap + style.css de 13k líneas) ──── */
.vpt-root,
.vpt-root *,
.vpt-root *::before,
.vpt-root *::after { box-sizing: border-box; }
.vpt-root {
font-family: var(--page-font);
color: var(--s800);
line-height: 1.6;
}
.vpt-root h1, .vpt-root h2, .vpt-root h3,
.vpt-root h4, .vpt-root h5, .vpt-root h6,
.vpt-root p, .vpt-root ul, .vpt-root ol, .vpt-root li, .vpt-root figure {
margin: 0;
padding: 0;
list-style: none;
}
.vpt-root h1, .vpt-root h2, .vpt-root h3, .vpt-root h4 {
font-family: var(--title-font);
color: var(--site-navy);
line-height: 1.25;
font-weight: 700;
}
/* :where() deja este reset en la misma especificidad que las clases de
componente (.vp-btn, .vpt-btn…), que van después y por tanto ganan.
Sin esto, `background:none` borraba el degradado del botón primario. */
.vpt-root :where(button) {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
.vpt-root a { color: var(--site-blue); }
.vpt-root img { max-width: 100%; }
.vpt-root .ms {
font-family: "Material Symbols Rounded";
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
user-select: none;
}
.vpt-root .ms.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
/* Sin la fuente cargada, la ligadura no se aplica y se vería el nombre crudo
del ícono. Se mantienen ocultos (conservando su espacio) hasta que el JS
confirme que la fuente está lista. */
.vpt-root .ms { visibility: hidden; }
html.ms-listo .vpt-root .ms { visibility: visible; }
/* ══════════════════════════════════════════════════════════════════════════
1. PÁGINA DEL TUTORIAL
══════════════════════════════════════════════════════════════════════════ */
.vpt-section { padding: 56px 0; }
.vpt-section--tint { background: #F5F8FF; }
.vpt-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
/* Portada ------------------------------------------------------------------ */
.vpt-hero {
background: linear-gradient(135deg, #0e2258 0%, #1b3a8f 55%, #2f56d6 100%);
color: #fff;
padding: 64px 0 72px;
position: relative;
overflow: hidden;
}
.vpt-hero::after {
content: "";
position: absolute;
right: -120px;
top: -120px;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.16), transparent 65%);
}
.vpt-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); text-wrap: balance; }
.vpt-hero p { color: rgba(255,255,255,.86); font-size: 1.06rem; max-width: 640px; margin-top: 14px; }
.vpt-hero-grid {
display: grid;
grid-template-columns: 1.4fr .9fr;
gap: 40px;
align-items: center;
position: relative;
z-index: 1;
}
.vpt-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.25);
color: #fff;
border-radius: 999px;
padding: 7px 16px;
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: 18px;
}
.vpt-eyebrow .ms { font-size: 18px; }
.vpt-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vpt-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
border-radius: 12px;
padding: 9px 14px;
font-size: .9rem;
font-weight: 600;
}
.vpt-badge .ms { font-size: 19px; color: #9fd0ff; }
.vpt-hero-art { text-align: center; }
.vpt-hero-art img { width: 150px; filter: drop-shadow(0 22px 40px rgba(0,0,0,.35)); }
/* Cabecera de sección ------------------------------------------------------ */
.vpt-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.vpt-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); text-wrap: balance; }
.vpt-head p { color: var(--s600); margin-top: 12px; font-size: 1.02rem; }
/* Requisitos --------------------------------------------------------------- */
.vpt-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 18px;
}
.vpt-card {
background: #fff;
border: 1px solid var(--s200);
border-radius: var(--r-xl);
padding: 24px;
box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}
.vpt-card .vpt-card-ico {
width: 46px;
height: 46px;
border-radius: var(--r-md);
display: grid;
place-items: center;
background: var(--info-bg);
color: var(--site-blue);
margin-bottom: 14px;
}
.vpt-card .vpt-card-ico .ms { font-size: 24px; }
.vpt-card h3 { font-size: 1.06rem; margin-bottom: 6px; }
.vpt-card p { color: var(--s600); font-size: .95rem; }
/* ── Laboratorio: teléfono + guía ─────────────────────────────────────────── */
.vpt-lab {
display: grid;
grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
gap: 44px;
align-items: start;
}
/* Sin min-width:0 la pista del grid no puede encoger por debajo del ancho
natural del teléfono (384px) y el bloque entero se sale del contenedor en
pantallas angostas. Con esto, .vpt-stage mide lo que hay y escalarTelefono()
reduce el teléfono para que entre. */
.vpt-lab > * { min-width: 0; }
.vpt-stage { position: sticky; top: 24px; }
/* ── Modo ancho: para un aparato que no cabe en media pantalla ─────────────
Un navegador de escritorio no entra en la columna de 400 px que usa el
teléfono. Aquí el aparato ocupa todo el ancho y los pasos van debajo; no hay
columna que fijar, así que el pegado se apaga (también en el JS). */
.vpt-lab--ancho { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.vpt-lab--ancho .vpt-stage { position: static; top: auto; }
.vpt-lab--ancho .vpt-phone-slot { justify-content: center; }
/* Aviso de que se está viendo una app de escritorio en poco ancho. Lo enciende
la consulta de medios de más abajo: aquí solo se define cómo se ve. */
.vpt-aviso-ancho {
display: none;
align-items: flex-start;
gap: 12px;
background: var(--amber-bg);
border: 1px solid var(--amber);
border-radius: var(--r-lg);
padding: 14px 16px;
margin-bottom: 20px;
color: var(--s700);
font-size: .92rem;
}
.vpt-aviso-ancho .ms { color: var(--amber-dark); font-size: 22px; flex: none; }
.vpt-phone-slot {
display: flex;
justify-content: center;
/* flex-start es obligatorio: con el `stretch` por defecto, la altura que el
JS fija en el slot estiraba/encogía el teléfono y lo deformaba. */
align-items: flex-start;
transform-origin: top center;
}
/* Controles del reproductor ------------------------------------------------ */
.vpt-controls {
margin-top: 18px;
background: #fff;
border: 1px solid var(--s200);
border-radius: var(--r-xl);
padding: 14px 16px 16px;
box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.vpt-progress {
height: 6px;
border-radius: 999px;
background: var(--s200);
overflow: hidden;
margin-bottom: 12px;
}
.vpt-progress i {
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--brand), var(--brand-hover));
transition: width .35s ease;
}
.vpt-ctrl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vpt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 42px;
padding: 0 16px;
border-radius: var(--r-md);
border: 1.5px solid var(--s200);
background: #fff;
color: var(--s700);
font-weight: 700;
font-size: .92rem;
transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.vpt-btn:hover { border-color: var(--brand); color: var(--brand); }
.vpt-btn:active { transform: translateY(1px); }
.vpt-btn .ms { font-size: 20px; }
.vpt-btn--icon { width: 42px; padding: 0; }
.vpt-btn--play {
background: linear-gradient(135deg, var(--brand), var(--brand-hover));
border-color: transparent;
color: #fff;
min-width: 128px;
box-shadow: 0 10px 20px rgba(74, 105, 255, .3);
}
.vpt-btn--play:hover { color: #fff; border-color: transparent; filter: brightness(1.05); }
.vpt-btn[disabled] { opacity: .45; cursor: not-allowed; }
.vpt-btn.is-on { background: var(--info-bg); border-color: var(--brand); color: var(--brand); }
.vpt-ctrl-spacer { flex: 1 1 auto; }
.vpt-speed {
display: inline-flex;
border: 1.5px solid var(--s200);
border-radius: var(--r-md);
overflow: hidden;
}
.vpt-speed button {
padding: 0 11px;
height: 40px;
font-size: .85rem;
font-weight: 700;
color: var(--s600);
}
.vpt-speed button + button { border-left: 1px solid var(--s200); }
.vpt-speed button.is-on { background: var(--brand); color: #fff; }
.vpt-mode-hint {
margin-top: 10px;
font-size: .84rem;
color: var(--s500);
display: flex;
align-items: flex-start;
gap: 7px;
}
.vpt-mode-hint .ms { font-size: 17px; color: var(--brand); flex: none; margin-top: 1px; }
/* Guía --------------------------------------------------------------------- */
.vpt-chapters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
margin-bottom: 26px;
}
.vpt-chapter {
text-align: left;
background: #fff;
border: 1.5px solid var(--s200);
border-radius: var(--r-lg);
padding: 14px 16px;
display: flex;
gap: 12px;
align-items: flex-start;
transition: border-color .18s, box-shadow .18s, transform .18s;
}
.vpt-chapter:hover { border-color: var(--brand); transform: translateY(-2px); }
.vpt-chapter.is-on {
border-color: var(--brand);
box-shadow: 0 10px 22px rgba(74, 105, 255, .18);
background: linear-gradient(180deg, #fff, #F5F8FF);
}
.vpt-chapter-n {
width: 30px;
height: 30px;
flex: none;
border-radius: 9px;
background: var(--s100);
color: var(--s600);
display: grid;
place-items: center;
line-height: 1;
font-weight: 800;
font-size: .9rem;
}
.vpt-chapter.is-on .vpt-chapter-n { background: var(--brand); color: #fff; }
/* OJO: aquí había `.vpt-chapter span { display:block }` para la descripción.
Como `.vpt-chapter span` pesa más que `.vpt-chapter-n`, también convertía el
recuadro del número en bloque y el dígito se iba a la esquina. Cada pieza
lleva ahora su clase. */
.vpt-chapter-txt { flex: 0 1 auto; min-width: 0; }
.vpt-chapter-tit {
display: block;
font-size: .96rem;
font-weight: 700;
color: var(--site-navy);
font-family: var(--title-font);
}
.vpt-chapter-desc { display: block; font-size: .82rem; color: var(--s500); line-height: 1.4; }
.vpt-chapter-done { color: var(--emerald-dark); font-size: 18px; margin-left: auto; }
/* Paso actual -------------------------------------------------------------- */
.vpt-now {
background: #fff;
border: 1px solid var(--s200);
border-left: 5px solid var(--brand);
border-radius: var(--r-xl);
padding: 26px 28px;
box-shadow: 0 14px 30px rgba(15, 23, 42, .07);
}
/* Sin un mínimo, la tarjeta encoge y crece en cada paso (de 190 a 361 px según
el texto) y arrastra consigo a la lista de abajo: eso es el "salto". Los
valores salen de medir los 31 pasos a cada ancho, así que la tarjeta ya no
cambia de tamaño en ningún paso. */
@media (min-width: 992px) { .vpt-now { min-height: 362px; } }
@media (min-width: 1200px) { .vpt-now { min-height: 308px; } }
.vpt-now-tag {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--info-bg);
color: var(--brand);
font-size: .76rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
margin-bottom: 14px;
}
.vpt-now h3 { font-size: 1.35rem; margin-bottom: 10px; text-wrap: balance; }
.vpt-now-say { font-size: 1.04rem; color: var(--s700); }
.vpt-now-say b { color: var(--site-navy); }
.vpt-now-say code {
background: var(--s100);
border: 1px solid var(--s200);
border-radius: 6px;
padding: 1px 7px;
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: .88em;
color: var(--site-navy);
}
.vpt-note {
display: flex;
gap: 11px;
align-items: flex-start;
border-radius: var(--r-lg);
padding: 14px 16px;
margin-top: 16px;
font-size: .95rem;
line-height: 1.55;
}
.vpt-note .ms { font-size: 20px; flex: none; margin-top: 1px; }
.vpt-note--tip { background: var(--emerald-bg); color: #065F46; }
.vpt-note--tip .ms { color: var(--emerald-dark); }
.vpt-note--warn { background: var(--amber-bg); color: #7C4A03; }
.vpt-note--warn .ms { color: var(--amber-dark); }
.vpt-note--info { background: var(--info-bg); color: #1E3A8A; }
.vpt-note--info .ms { color: var(--info-blue); }
/* Lista de pasos ----------------------------------------------------------- */
.vpt-steps { margin-top: 26px; }
.vpt-steps-title {
font-size: .78rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--s400);
margin-bottom: 12px;
}
.vpt-step {
display: flex;
gap: 14px;
align-items: flex-start;
width: 100%;
text-align: left;
padding: 11px 14px;
border-radius: var(--r-md);
border: 1px solid transparent;
transition: background .15s, border-color .15s;
}
.vpt-step:hover { background: #fff; border-color: var(--s200); }
.vpt-step.is-on { background: #fff; border-color: var(--brand); box-shadow: 0 6px 16px rgba(74,105,255,.14); }
.vpt-step-n {
width: 26px;
height: 26px;
flex: none;
border-radius: 50%;
background: var(--s200);
color: var(--s600);
font-size: .78rem;
font-weight: 800;
display: grid;
place-items: center;
margin-top: 1px;
}
.vpt-step.is-on .vpt-step-n { background: var(--brand); color: #fff; }
.vpt-step.is-done .vpt-step-n { background: var(--emerald); color: #fff; }
.vpt-step-t { font-size: .96rem; color: var(--s700); font-weight: 600; line-height: 1.45; }
.vpt-step.is-on .vpt-step-t { color: var(--site-navy); font-weight: 700; }
/* Preguntas frecuentes ----------------------------------------------------- */
.vpt-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.vpt-faq-item {
background: #fff;
border: 1px solid var(--s200);
border-radius: var(--r-lg);
overflow: hidden;
}
.vpt-faq-q {
width: 100%;
text-align: left;
padding: 18px 22px;
display: flex;
align-items: center;
gap: 14px;
font-weight: 700;
color: var(--site-navy);
font-size: 1rem;
}
.vpt-faq-q > .ms:last-child { margin-left: auto; transition: transform .25s; color: var(--s400); }
.vpt-faq-item.is-open .vpt-faq-q > .ms:last-child { transform: rotate(180deg); }
.vpt-faq-a { padding: 0 22px 20px 58px; color: var(--s600); font-size: .97rem; display: none; }
.vpt-faq-item.is-open .vpt-faq-a { display: block; }
.vpt-faq-ico { color: var(--brand); }
/* Cierre ------------------------------------------------------------------- */
.vpt-cta {
background: linear-gradient(135deg, #0e2258, #2f56d6);
border-radius: var(--r-xxl);
color: #fff;
padding: 44px;
text-align: center;
}
.vpt-cta h2 { color: #fff; font-size: 1.8rem; }
.vpt-cta p { color: rgba(255,255,255,.85); margin: 12px auto 24px; max-width: 560px; }
.vpt-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.vpt-cta-btn {
display: inline-flex;
align-items: center;
gap: 9px;
background: #fff;
color: var(--site-navy) !important;
font-weight: 800;
padding: 14px 26px;
border-radius: var(--r-md);
text-decoration: none !important;
transition: transform .15s, box-shadow .15s;
}
.vpt-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.25); }
.vpt-cta-btn--ghost { background: rgba(255,255,255,.12); color: #fff !important; border: 1px solid rgba(255,255,255,.4); }
/* ══════════════════════════════════════════════════════════════════════════
2. EL TELÉFONO
══════════════════════════════════════════════════════════════════════════ */
.vp-phone {
width: 384px;
border-radius: 46px;
padding: 12px;
background: linear-gradient(160deg, #2b3446, #0d1220 60%);
box-shadow:
0 2px 0 rgba(255,255,255,.18) inset,
0 40px 70px -22px rgba(15, 23, 42, .55),
0 0 0 2px rgba(15,23,42,.35);
position: relative;
flex: none;
}
.vp-phone::before { /* botón lateral */
content: "";
position: absolute;
right: -3px;
top: 150px;
width: 3px;
height: 62px;
border-radius: 0 3px 3px 0;
background: #39445a;
}
/* ── El otro aparato: una ventana de navegador ─────────────────────────────
VeruPrinter y Pro8 son apps de celular; el Libro de Reclamaciones es una
aplicación web. Aquí conviven los dos marcos: el motor mide el que le toque
(ver escalarDispositivo) y no necesita saber cuál es.
El ancho cabe en los 1200 px útiles del contenedor, así que en un monitor se
ve a tamaño real y solo encoge en pantallas menores. */
.vp-browser {
width: 1120px;
border-radius: 14px;
background: #DEE3EA;
box-shadow:
0 2px 0 rgba(255,255,255,.6) inset,
0 30px 60px -20px rgba(15, 23, 42, .45),
0 0 0 1px rgba(15,23,42,.14);
position: relative;
flex: none;
overflow: hidden;
}
.vp-browser-bar {
height: 44px;
display: flex;
align-items: center;
gap: 12px;
padding: 0 14px;
background: linear-gradient(180deg, #EEF1F5, #DEE3EA);
border-bottom: 1px solid rgba(15,23,42,.10);
}
/* Los tres puntos de la ventana. Son decorativos: no hacen nada al tocarlos. */
.vp-browser-dots { display: flex; gap: 7px; flex: none; }
.vp-browser-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.vp-browser-dots i:nth-child(1) { background: #FF5F57; }
.vp-browser-dots i:nth-child(2) { background: #FEBC2E; }
.vp-browser-dots i:nth-child(3) { background: #28C840; }
.vp-browser-tab {
display: flex;
align-items: center;
gap: 8px;
max-width: 260px;
height: 30px;
padding: 0 14px;
border-radius: 8px 8px 0 0;
background: #fff;
font-size: 12.5px;
font-weight: 600;
color: var(--s700);
align-self: flex-end;
overflow: hidden;
white-space: nowrap;
}
.vp-browser-tab .ms { font-size: 15px; color: var(--brand); }
.vp-browser-url {
flex: 1;
min-width: 0;
height: 30px;
border-radius: 999px;
background: #fff;
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
font-size: 12.5px;
color: var(--s600);
border: 1px solid rgba(15,23,42,.08);
}
.vp-browser-url .ms { font-size: 14px; color: var(--emerald-dark); }
.vp-browser-url > span:not(.ms) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vp-browser-bar > .ms { font-size: 18px; color: var(--s500); flex: none; }
/* La pantalla del navegador: más ancha y más baja que la del teléfono. */
.vp-browser .vp-viewport {
width: 1120px;
height: 660px;
border-radius: 0;
font-size: 13.5px;
}
/* La capa de efectos se alinea con la pantalla, no con el bisel.
`.vp-fx` usa inset:12px porque el teléfono tiene 12 px de bisel y su pantalla
empieza ahí. El navegador no tiene bisel: sin esto, el dedo, la onda y el
resaltador del clic se dibujaban 12 px arriba y a la izquierda del elemento
que tocaban —media fila de desfase en el árbol de permisos de SUNAT—. */
.vp-browser .vp-fx {
inset: 0;
border-radius: 14px;
}
.vp-viewport {
width: 360px;
height: 740px;
border-radius: 34px;
overflow: hidden;
position: relative;
background: var(--soft-bg);
font-family: var(--app-font);
color: var(--charcoal);
font-size: 14px;
line-height: 1.35;
-webkit-font-smoothing: antialiased;
}
/* Barra de estado ---------------------------------------------------------- */
.vp-status {
height: 30px;
padding: 0 18px 0 22px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-weight: 700;
color: var(--s800);
background: transparent;
position: relative;
z-index: 3;
}
.vp-status-icons { display: flex; align-items: center; gap: 5px; }
.vp-status-icons .ms { font-size: 15px; }
/* Barra de gestos ---------------------------------------------------------- */
.vp-gesture {
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
border-radius: 999px;
background: rgba(15, 23, 42, .25);
z-index: 6;
pointer-events: none;
}
/* Contenedor de pantalla --------------------------------------------------- */
.vp-app {
position: absolute;
inset: 30px 0 0 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.vp-screen {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
.vp-screen.is-new { animation: vp-screen-in .22s ease; }
@keyframes vp-screen-in {
from { opacity: 0; }
to { opacity: 1; }
}
.vp-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
padding: 8px 18px 28px;
}
.vp-body::-webkit-scrollbar { width: 0; height: 0; }
.vp-body--wide { padding-left: 20px; padding-right: 20px; }
.vp-body--auth { padding: 28px 28px 20px; }
/* ── Tipografía de la app ─────────────────────────────────────────────────── */
.vp-hero-t { font-size: 30px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.vp-h1 { font-size: 24px; font-weight: 800; letter-spacing: -.3px; }
.vp-h2 { font-size: 20px; font-weight: 700; }
.vp-h3 { font-size: 18px; font-weight: 700; }
.vp-body-l { font-size: 16px; font-weight: 600; }
.vp-body-t { font-size: 14px; font-weight: 500; }
.vp-body-b { font-size: 14px; font-weight: 700; }
.vp-small { font-size: 13px; font-weight: 500; color: var(--s500); }
.vp-caption { font-size: 11px; font-weight: 600; color: var(--s400); }
.vp-caption-b{ font-size: 11px; font-weight: 700; color: var(--s400); }
.vp-label { font-size: 10px; font-weight: 700; color: var(--s400); letter-spacing: .6px; text-transform: uppercase; }
.vp-ink { color: var(--charcoal); }
.vp-muted { color: var(--s500); }
.vp-blue { color: var(--brand); }
/* ── Encabezado de pantalla (ScreenHeader) ────────────────────────────────── */
.vp-header {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 18px;
flex: none;
}
.vp-back {
width: 42px;
height: 42px;
flex: none;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--s200);
display: grid;
place-items: center;
color: var(--s700);
box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
}
.vp-back .ms { font-size: 20px; }
.vp-header-txt { flex: 1 1 auto; min-width: 0; }
.vp-header-trail {
width: 42px;
height: 42px;
flex: none;
border-radius: var(--r-md);
background: var(--s100);
display: grid;
place-items: center;
color: var(--s700);
}
.vp-header-trail .ms { font-size: 22px; }
/* ── Botones ──────────────────────────────────────────────────────────────── */
.vp-btn {
width: 100%;
height: 54px;
border-radius: var(--r-lg);
background: linear-gradient(135deg, var(--brand), var(--brand-hover));
color: #fff;
font-size: 15px;
font-weight: 700;
letter-spacing: .2px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
box-shadow: 0 12px 24px rgba(74, 105, 255, .3);
position: relative;
overflow: hidden;
flex: 1 1 auto;
min-width: 0;
}
.vp-btn .ms { font-size: 18px; }
.vp-btn.is-disabled { opacity: .55; }
.vp-btn2 {
width: 100%;
height: 52px;
border-radius: var(--r-lg);
background: var(--surface);
border: 1.5px solid var(--s200);
color: var(--s700);
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
overflow: hidden;
flex: 1 1 auto;
min-width: 0;
}
.vp-btn2 .ms { font-size: 18px; color: var(--brand); }
.vp-link {
color: var(--brand);
font-size: 13px;
font-weight: 600;
background: none;
display: inline-block;
}
.vp-row { display: flex; gap: 12px; }
.vp-row > * { flex: 1 1 0; min-width: 0; }
/* Spinner ------------------------------------------------------------------ */
.vp-spin {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2.5px solid rgba(255,255,255,.35);
border-top-color: #fff;
animation: vp-spin .8s linear infinite;
}
.vp-spin--blue { border-color: rgba(74,105,255,.25); border-top-color: var(--brand); }
@keyframes vp-spin { to { transform: rotate(360deg); } }
/* ── Campos ───────────────────────────────────────────────────────────────── */
.vp-field { position: relative; padding-top: 16px; margin-bottom: 4px; }
.vp-field-line {
border-bottom: 1px solid var(--s300);
padding: 6px 0 10px;
display: flex;
align-items: center;
gap: 8px;
transition: border-color .18s;
}
.vp-field.is-focus .vp-field-line { border-bottom: 2px solid var(--brand); padding-bottom: 9px; }
.vp-field-lab {
position: absolute;
left: 0;
top: 22px;
font-size: 15px;
font-weight: 400;
color: var(--s400);
transition: all .18s ease;
pointer-events: none;
}
.vp-field.is-float .vp-field-lab { top: 0; font-size: 13px; font-weight: 600; color: var(--brand); }
.vp-field-val {
flex: 1 1 auto;
min-width: 0;
font-size: 15px;
font-weight: 500;
color: var(--charcoal);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-height: 20px;
}
.vp-field-eye { color: var(--s400); flex: none; }
.vp-field-eye .ms { font-size: 20px; }
/* Campo con caja (impresora, ticket) --------------------------------------- */
.vp-input {
width: 100%;
background: var(--surface);
border: 1px solid var(--s200);
border-radius: var(--r-lg);
padding: 12px 14px;
font-size: 13px;
font-weight: 500;
color: var(--charcoal);
min-height: 44px;
display: flex;
align-items: center;
gap: 8px;
white-space: pre-line;
}
.vp-input.is-focus { border: 1.5px solid var(--brand); padding: 11.5px 13.5px; }
.vp-input.is-empty { color: var(--s400); }
.vp-input--multi { align-items: flex-start; min-height: 76px; line-height: 1.5; }
.vp-input-sel { display: flex; align-items: center; width: 100%; gap: 8px; padding: 2px 0; }
.vp-input-sel .ms { margin-left: auto; color: var(--s400); }
/* Cursor de texto ---------------------------------------------------------- */
.vp-caret {
display: inline-block;
width: 1.5px;
height: 1.05em;
background: var(--brand);
vertical-align: -.15em;
margin-left: 1px;
animation: vp-blink 1s steps(1) infinite;
}
@keyframes vp-blink { 50% { opacity: 0; } }
/* ── Segmentados ──────────────────────────────────────────────────────────── */
.vp-segs { display: flex; gap: 10px; }
.vp-seg {
flex: 1 1 0;
min-width: 0;
height: 48px;
border-radius: var(--r-lg);
border: 1.5px solid var(--s200);
background: var(--surface);
color: var(--s700);
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
position: relative;
overflow: hidden;
transition: background .18s, border-color .18s, color .18s;
}
.vp-seg.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.vp-seg .ms { font-size: 16px; }
.vp-segs--sm .vp-seg { height: 42px; font-size: 11px; font-weight: 700; border-width: 1px; }
.vp-segs--sm { gap: 8px; }
/* ── Tarjetas / cajas ─────────────────────────────────────────────────────── */
.vp-card {
background: var(--surface);
border: 1px solid var(--s100);
border-radius: var(--r-xl);
padding: 16px;
box-shadow: 0 4px 16px rgba(15, 23, 42, .05);
}
.vp-box {
background: var(--soft-gray);
border: 1px solid var(--s200);
border-radius: var(--r-lg);
padding: 12px 14px;
}
.vp-tile {
background: var(--surface);
border: 1px solid var(--s100);
border-radius: var(--r-lg);
padding: 14px;
display: flex;
align-items: center;
gap: 12px;
position: relative;
overflow: hidden;
}
.vp-tile .ms { font-size: 20px; color: var(--brand); flex: none; }
.vp-tile-txt { flex: 1 1 auto; min-width: 0; }
.vp-tile-chev { color: var(--s400); }
.vp-banner {
border-radius: var(--r-lg);
padding: 14px;
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 13px;
line-height: 1.4;
margin-bottom: 14px;
}
.vp-banner--amber { background: var(--amber-bg); border: 1px solid var(--amber-dark); color: var(--amber-dark); }
.vp-banner--blue {
background: rgba(74, 105, 255, .07);
border: 1px solid rgba(74, 105, 255, .25);
color: var(--s700);
}
.vp-banner--info { background: var(--info-bg); border: 1px solid var(--s100); color: var(--info-blue); }
.vp-banner .ms { font-size: 20px; flex: none; }
.vp-banner--blue .ms { color: var(--brand); }
.vp-sec {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: 14px;
font-weight: 700;
}
.vp-sec-act {
margin-left: auto;
color: var(--brand);
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
}
.vp-sec-act .ms { font-size: 18px; }
.vp-gap { height: 18px; }
.vp-gap-s { height: 10px; }
.vp-gap-l { height: 24px; }
/* ── Progreso del registro ────────────────────────────────────────────────── */
.vp-steps-bar { display: flex; gap: 6px; padding: 0 20px; flex: none; }
.vp-steps-bar i {
flex: 1 1 0;
height: 5px;
border-radius: 999px;
background: var(--s200);
transition: background .3s;
}
.vp-steps-bar i.is-on { background: var(--brand); }
/* ── Botonera inferior ────────────────────────────────────────────────────── */
.vp-footer-btns {
flex: none;
display: flex;
gap: 12px;
padding: 4px 20px 14px;
}
.vp-footer-btns > * { flex: 1 1 0; min-width: 0; }
/* ── OTP ──────────────────────────────────────────────────────────────────── */
.vp-otp { display: flex; gap: 8px; }
.vp-otp b {
flex: 1 1 0;
height: 52px;
border-radius: var(--r-md);
border: 1.5px solid var(--s200);
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 800;
color: var(--charcoal);
}
.vp-otp b.is-filled { border-color: var(--brand); }
.vp-otp b.is-focus { border: 2px solid var(--brand); }
/* ── Medidor de contraseña ────────────────────────────────────────────────── */
.vp-meter { display: flex; gap: 6px; }
.vp-meter i { flex: 1 1 0; height: 6px; border-radius: 999px; background: var(--s200); transition: background .25s; }
.vp-meter-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 10px; }
/* ── Planes ───────────────────────────────────────────────────────────────── */
.vp-plan {
border-radius: var(--r-xl);
border: 1.5px solid var(--s200);
background: var(--surface);
padding: 16px;
margin-bottom: 12px;
position: relative;
overflow: hidden;
transition: border-color .2s, background .2s;
}
.vp-plan.is-on { border: 2px solid var(--brand); background: rgba(74, 105, 255, .06); padding: 15.5px; }
.vp-plan-top { display: flex; align-items: center; gap: 12px; }
.vp-plan-top .vp-radio { font-size: 22px; color: var(--s400); flex: none; }
.vp-plan.is-on .vp-radio { color: var(--brand); }
.vp-plan-name { flex: 1 1 auto; min-width: 0; }
.vp-plan-price { font-size: 14px; font-weight: 700; color: var(--brand); }
.vp-plan-price.is-free { color: var(--emerald-dark); }
.vp-plan-more {
display: inline-flex;
align-items: center;
gap: 2px;
margin-top: 10px;
color: var(--brand);
font-size: 11px;
font-weight: 700;
}
.vp-plan-more .ms { font-size: 18px; transition: transform .18s; }
.vp-plan.is-open .vp-plan-more .ms { transform: rotate(180deg); }
.vp-plan-feats { margin-top: 10px; display: none; }
.vp-plan.is-open .vp-plan-feats { display: block; animation: vp-fade .2s ease; }
.vp-feat { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.vp-feat .ms { font-size: 17px; color: var(--brand); flex: none; margin-top: 1px; }
.vp-feat span { font-size: 13px; color: var(--s700); line-height: 1.35; }
@keyframes vp-fade { from { opacity: 0; } to { opacity: 1; } }
.vp-bill { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.vp-pill {
padding: 7px 14px;
border-radius: 999px;
border: 1px solid var(--s200);
background: var(--surface);
font-size: 11px;
font-weight: 700;
color: var(--s700);
position: relative;
overflow: hidden;
}
.vp-pill.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* ── Stepper (copias / saltos) ────────────────────────────────────────────── */
.vp-stepper {
background: var(--surface);
border: 1px solid var(--s200);
border-radius: var(--r-lg);
padding: 6px 14px;
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
}
.vp-stepper > .ms { font-size: 16px; color: var(--s500); }
.vp-stepper-lab { flex: 1 1 auto; font-size: 13px; font-weight: 700; }
.vp-stepper-btn {
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--brand);
position: relative;
overflow: hidden;
}
.vp-stepper-btn .ms { font-size: 22px; }
.vp-stepper-btn.is-off { color: var(--s300); }
.vp-stepper-val { width: 26px; text-align: center; font-size: 13px; font-weight: 800; }
/* ── Switch ───────────────────────────────────────────────────────────────── */
.vp-switch-row {
background: var(--surface);
border: 1px solid var(--s200);
border-radius: var(--r-lg);
padding: 12px 14px;
display: flex;
gap: 12px;
align-items: flex-start;
}
.vp-switch-txt { flex: 1 1 auto; min-width: 0; }
.vp-switch {
flex: none;
width: 44px;
height: 26px;
border-radius: 999px;
background: var(--s300);
position: relative;
transition: background .2s;
margin-top: 2px;
}
.vp-switch i {
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
transition: transform .2s;
}
.vp-switch.is-on { background: var(--brand); }
.vp-switch.is-on i { transform: translateX(18px); }
/* ── Home ─────────────────────────────────────────────────────────────────── */
.vp-home-head { display: flex; align-items: center; gap: 12px; padding: 8px 18px 6px; flex: none; }
.vp-iconbtn {
width: 42px;
height: 42px;
flex: none;
border-radius: var(--r-md);
background: var(--s100);
color: var(--s700);
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.vp-iconbtn .ms { font-size: 22px; }
.vp-planbar {
background: var(--brand);
border-radius: var(--r-xl);
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
color: #fff;
}
.vp-planbar-ico {
width: 44px;
height: 44px;
border-radius: var(--r-md);
background: rgba(255,255,255,.2);
display: grid;
place-items: center;
flex: none;
}
.vp-planbar-ico .ms { font-size: 22px; color: #fff; }
.vp-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vp-metric {
background: var(--s50);
border-radius: var(--r-md);
padding: 12px;
}
.vp-metric b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.vp-metric span { display: block; font-size: 11px; font-weight: 600; color: var(--s400); margin-top: 2px; }
.vp-chip {
padding: 4px 10px;
border-radius: 999px;
background: var(--info-bg);
color: var(--info-blue);
font-size: 11px;
font-weight: 700;
}
.vp-doc {
display: flex;
align-items: center;
gap: 12px;
background: var(--surface);
border: 1px solid var(--s100);
border-radius: var(--r-lg);
padding: 12px 14px;
margin-bottom: 10px;
}
.vp-doc-ico {
width: 38px;
height: 38px;
border-radius: var(--r-sm);
background: var(--info-bg);
color: var(--brand);
display: grid;
place-items: center;
flex: none;
}
.vp-nav {
flex: none;
height: 66px;
background: var(--surface);
border-top: 1px solid var(--s100);
display: flex;
align-items: center;
padding: 0 6px 10px;
box-shadow: 0 -2px 12px rgba(0,0,0,.05);
}
.vp-nav-item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
color: var(--s400);
padding-top: 8px;
}
.vp-nav-item .ms { font-size: 22px; }
.vp-nav-item b { font-size: 10px; font-weight: 700; }
.vp-nav-item.is-on { color: var(--brand); }
.vp-bell { position: relative; }
.vp-bell-dot {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--red);
border: 1.5px solid #fff;
}
/* ── Perfil ───────────────────────────────────────────────────────────────── */
.vp-avatar {
width: 84px;
height: 84px;
margin: 8px auto 0;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), #4338CA);
color: #fff;
font-size: 30px;
font-weight: 800;
display: grid;
place-items: center;
box-shadow: 0 10px 22px rgba(74, 105, 255, .35);
}
.vp-inforow { display: flex; align-items: center; gap: 12px; padding: 13px 2px; }
.vp-inforow > .ms { font-size: 19px; color: var(--s400); flex: none; }
.vp-inforow-v { margin-left: auto; text-align: right; font-size: 13px; font-weight: 700; }
.vp-hr { height: 1px; background: var(--s100); }
/* ── Inicio de Android (para llegar a los ajustes de Bluetooth) ───────────── */
.vp-status--claro { color: #fff; }
.vp-status--claro .ms { color: #fff; }
.vp-viewport.vp-fondo-and {
background:
radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.18), transparent 60%),
linear-gradient(165deg, #16233f 0%, #274a7a 45%, #3f7fa6 100%);
}
.vp-viewport.vp-fondo-and .vp-gesture { background: rgba(255, 255, 255, .55); }
.vp-and-home {
position: absolute;
inset: 0;
padding: 18px 20px 0;
font-family: Roboto, var(--app-font);
}
.vp-and-reloj { text-align: center; color: #fff; margin: 22px 0 26px; }
.vp-and-reloj b { display: block; font-size: 54px; font-weight: 300; line-height: 1; letter-spacing: -2px; }
.vp-and-reloj span { display: block; font-size: 13px; opacity: .9; margin-top: 8px; }
.vp-and-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 6px; }
.vp-and-app { text-align: center; position: relative; }
.vp-and-app i {
width: 52px;
height: 52px;
border-radius: 15px;
display: grid;
place-items: center;
margin: 0 auto 6px;
box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.vp-and-app i .ms { font-size: 27px; color: #fff; }
.vp-and-app .vp-and-app-lab {
display: block;
font-size: 11px;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.55);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vp-and-dock {
position: absolute;
left: 14px;
right: 14px;
bottom: 26px;
background: rgba(255,255,255,.17);
border-radius: 24px;
padding: 12px 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.vp-and-buscar {
position: absolute;
left: 26px;
right: 26px;
bottom: 112px;
height: 40px;
border-radius: 999px;
background: rgba(255,255,255,.9);
display: flex;
align-items: center;
gap: 10px;
padding: 0 16px;
font-size: 13px;
color: #5F6368;
}
/* ── Ajustes de Android (pantalla del sistema) ────────────────────────────── */
.vp-android { background: #fff; }
.vp-android .vp-and-top {
padding: 14px 18px 10px;
display: flex;
align-items: center;
gap: 16px;
}
.vp-and-title { font-size: 20px; font-weight: 600; font-family: Roboto, var(--app-font); }
.vp-and-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px;
font-family: Roboto, var(--app-font);
position: relative;
overflow: hidden;
}
.vp-and-row .vp-and-ico {
width: 40px;
height: 40px;
border-radius: 50%;
background: #E8F0FE;
color: #1A73E8;
display: grid;
place-items: center;
flex: none;
}
.vp-and-txt { flex: 1 1 auto; min-width: 0; }
.vp-and-txt b { display: block; font-size: 15px; font-weight: 500; color: #202124; }
.vp-and-txt span { display: block; font-size: 13px; color: #5F6368; }
.vp-and-row .vp-and-ico .ms { font-size: 22px; }
.vp-and-sec {
padding: 18px 20px 6px;
font-size: 13px;
font-weight: 600;
color: #1A73E8;
font-family: Roboto, var(--app-font);
}
/* ── Capas: scrim, hoja, diálogo, snackbar, teclado ───────────────────────── */
.vp-scrim {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, .45);
z-index: 8;
}
.vp-scrim.is-new { animation: vp-fade .2s ease; }
/* El motor repinta el teléfono en cada tecla: sin esto, las capas
reiniciarían su animación de entrada carácter a carácter. */
.vpt-root .no-anim { animation: none !important; }
/* Capa de efectos (dedo, onda, resaltador). Va sobre el teléfono, fuera del
HTML que se repinta, para que no se borre en cada render. */
.vp-fx {
position: absolute;
inset: 12px;
border-radius: 34px;
overflow: hidden;
pointer-events: none;
z-index: 20;
}
.vp-sheet {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
background: var(--soft-bg);
border-radius: 24px 24px 0 0;
padding: 12px 22px 24px;
animation: vp-sheet-up .28s cubic-bezier(.2, .8, .3, 1);
max-height: 82%;
overflow-y: auto;
scrollbar-width: none;
}
.vp-sheet::-webkit-scrollbar { width: 0; }
.vp-sheet--surface { background: var(--surface); border-radius: 20px 20px 0 0; padding: 12px 24px 28px; }
@keyframes vp-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.vp-sheet-grip {
width: 44px;
height: 5px;
border-radius: 999px;
background: var(--s200);
margin: 0 auto 16px;
}
.vp-sheet-ico {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(74, 105, 255, .1);
color: var(--brand);
display: grid;
place-items: center;
margin: 0 auto 16px;
}
.vp-sheet-ico .ms { font-size: 28px; }
.vp-opt {
background: var(--soft-gray);
border-radius: var(--r-xl);
padding: 14px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.vp-opt-ico {
width: 42px;
height: 42px;
border-radius: var(--r-md);
display: grid;
place-items: center;
color: #fff;
flex: none;
}
.vp-opt-txt { flex: 1 1 auto; min-width: 0; }
.vp-dialog {
position: absolute;
z-index: 9;
left: 20px;
right: 20px;
top: 50%;
transform: translateY(-50%);
background: var(--surface);
border-radius: var(--r-lg);
padding: 22px 22px 14px;
box-shadow: 0 24px 48px rgba(15, 23, 42, .35);
animation: vp-pop .22s cubic-bezier(.2, .8, .3, 1);
}
.vp-dialog--wide { left: 20px; right: 20px; padding: 14px 0 0; overflow: hidden; }
@keyframes vp-pop {
from { opacity: 0; transform: translateY(-50%) scale(.94); }
to { opacity: 1; transform: translateY(-50%) scale(1); }
}
.vp-dialog-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vp-dialog-title .ms { font-size: 28px; color: var(--brand); }
.vp-dialog-acts { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 18px; }
.vp-dialog-btn {
padding: 9px 16px;
border-radius: var(--r-md);
font-size: 13px;
font-weight: 700;
color: var(--s500);
position: relative;
overflow: hidden;
}
.vp-dialog-btn--fill { background: var(--brand); color: #fff; }
.vp-snack {
position: absolute;
left: 14px;
right: 14px;
bottom: 18px;
z-index: 10;
border-radius: 6px;
padding: 14px 16px;
color: #fff;
font-size: 13px;
font-weight: 500;
box-shadow: 0 8px 20px rgba(15, 23, 42, .3);
animation: vp-snack-in .25s ease;
}
@keyframes vp-snack-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.vp-snack--ok { background: var(--emerald-dark); }
.vp-snack--err { background: var(--red); }
.vp-snack--info { background: #334155; }
/* Teclado ------------------------------------------------------------------ */
.vp-kbd {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 7;
background: #E6E9EF;
padding: 8px 6px 14px;
animation: vp-sheet-up .22s ease;
border-top: 1px solid var(--s300);
}
.vp-kbd-row { display: flex; gap: 5px; margin-bottom: 6px; justify-content: center; }
.vp-key {
flex: 1 1 0;
height: 40px;
border-radius: 6px;
background: #fff;
box-shadow: 0 1px 0 rgba(15, 23, 42, .25);
display: grid;
place-items: center;
font-size: 15px;
font-weight: 500;
color: #1F2937;
font-family: Roboto, var(--app-font);
}
.vp-key--wide { flex: 2 2 0; }
.vp-key--dark { background: #C6CBD4; }
.vp-key--go { background: var(--brand); color: #fff; }
.vp-kbd--num .vp-key { height: 46px; font-size: 19px; font-weight: 500; }
.vp-kbd--num .vp-kbd-row { max-width: 100%; }
/* Overlay de carga --------------------------------------------------------- */
.vp-loading {
position: absolute;
inset: 0;
z-index: 11;
background: rgba(252, 253, 255, .82);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
backdrop-filter: blur(1.5px);
}
/* ── Dedo, onda y resaltador ──────────────────────────────────────────────── */
.vp-pointer {
position: absolute;
z-index: 40;
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
border-radius: 50%;
background: rgba(74, 105, 255, .28);
border: 2px solid rgba(74, 105, 255, .85);
box-shadow: 0 6px 16px rgba(74, 105, 255, .45);
opacity: 0;
pointer-events: none;
transition: transform .42s cubic-bezier(.3, .9, .3, 1), opacity .18s;
left: 0;
top: 0;
}
.vp-pointer.is-on { opacity: 1; }
.vp-pointer.is-tap { animation: vp-tap .3s ease; }
@keyframes vp-tap {
0% { transform: var(--vp-pos) scale(1); }
45% { transform: var(--vp-pos) scale(.72); }
100% { transform: var(--vp-pos) scale(1); }
}
.vp-wave {
position: absolute;
z-index: 39;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
border: 2px solid rgba(74, 105, 255, .8);
pointer-events: none;
animation: vp-wave .55s ease-out forwards;
}
@keyframes vp-wave {
from { transform: scale(1); opacity: .9; }
to { transform: scale(3.6); opacity: 0; }
}
/* Resaltador del objetivo (modo manual) ------------------------------------ */
.vp-target {
position: absolute;
z-index: 38;
border-radius: 14px;
border: 2.5px solid var(--brand);
box-shadow: 0 0 0 4px rgba(74, 105, 255, .2), 0 0 0 9999px rgba(15, 23, 42, .06);
pointer-events: none;
animation: vp-pulse 1.4s ease-in-out infinite;
}
@keyframes vp-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(74, 105, 255, .22), 0 0 0 9999px rgba(15, 23, 42, .06); }
50% { box-shadow: 0 0 0 10px rgba(74, 105, 255, .07), 0 0 0 9999px rgba(15, 23, 42, .06); }
}
/* El resaltado que acompana a cada clic automatico.
Sin el pulso infinito (el clic dura menos que un ciclo) y sin la penumbra de
pantalla completa: en un capitulo con seis clics seguidos, encenderla y
apagarla seis veces parpadea. Entra con un golpe corto para que el ojo lo
capte aunque la fila sea de 20 px. */
.vp-target--tap {
border-width: 2px;
box-shadow: 0 0 0 4px rgba(74, 105, 255, .20), 0 2px 10px rgba(74, 105, 255, .35);
animation: vp-target-in .2s cubic-bezier(.2, .9, .3, 1);
background: rgba(74, 105, 255, .08);
}
@keyframes vp-target-in {
from { opacity: 0; transform: scale(1.05); }
to { opacity: 1; transform: scale(1); }
}
.vp-viewport.is-manual [data-hit] { cursor: pointer; }
/* Cartel de "toca aquí" ---------------------------------------------------- */
.vp-callout {
position: absolute;
z-index: 41;
background: var(--site-navy);
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 7px 12px;
border-radius: 8px;
white-space: nowrap;
transform: translate(-50%, -100%);
pointer-events: none;
box-shadow: 0 8px 18px rgba(15, 23, 42, .35);
}
.vp-callout::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: var(--site-navy);
border-bottom: 0;
}
/* Ticket impreso (vista previa) -------------------------------------------- */
.vp-ticket {
background: #fff;
border: 1px solid var(--s200);
border-radius: 6px;
padding: 14px 12px;
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 10.5px;
line-height: 1.55;
color: #111827;
white-space: pre;
text-align: center;
overflow-x: auto;
}
.vp-ticket-qr {
width: 74px;
height: 74px;
margin: 8px auto;
background-image:
linear-gradient(90deg, #111 1px, transparent 1px),
linear-gradient(#111 1px, transparent 1px);
background-size: 6px 6px;
opacity: .88;
border: 4px solid #111;
}
/* ══════════════════════════════════════════════════════════════════════════
3. RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.vpt-lab { grid-template-columns: minmax(320px, 380px) 1fr; gap: 30px; }
}
/* Debajo de este ancho una app de escritorio ya se ve pequeña. Se avisa, pero
la simulación se mantiene: se prefirió que el usuario nunca se quede sin ver
nada antes que ocultársela. */
@media (max-width: 1100px) {
.vpt-aviso-ancho { display: flex; }
}
/* ── Aviso de resolución mínima ──────────────────────────────────────────── */
.vpt-minimo { display: none; }
@media (max-width: 991px) {
.vpt-lab { grid-template-columns: 1fr; gap: 26px; }
.vpt-stage { position: static; }
/* En pantalla chica manda el teléfono: debajo de él va SIEMPRE la explicación
del paso que se está viendo, y solo después el selector de capítulos. */
.vpt-guide { display: flex; flex-direction: column; }
.vpt-now { order: 1; }
.vpt-chapters { order: 2; margin: 22px 0 0; }
.vpt-steps-toggle { order: 3; }
.vpt-steps { order: 4; }
.vpt-hero-grid { grid-template-columns: 1fr; text-align: center; }
.vpt-hero-art { display: none; }
.vpt-hero-badges { justify-content: center; }
.vpt-steps { display: none; }
.vpt-steps.is-open { display: block; }
.vpt-steps-toggle { display: flex; }
}
.vpt-steps-toggle { display: none; }
.vpt-ctrl-row--2 { margin-top: 8px; }
/* Modo compacto de los controles: lo activa el JS cuando recortar el panel es
lo que permite que el teléfono siga siendo grande y, además, que su columna
quepa entera en la ventana (así acompaña al usuario mientras lee los pasos).
Pasa de dos bloques de botones a una tira apretada: de ~186px a ~120px. */
.vpt-stage--compacta .vpt-mode-hint { display: none; }
.vpt-stage--compacta .vpt-controls {
padding: 10px 12px;
margin-top: 12px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.vpt-stage--compacta .vpt-progress { flex: 1 0 100%; margin: 0 0 2px; }
.vpt-stage--compacta .vpt-ctrl-row { flex: 0 1 auto; gap: 6px; margin: 0; }
.vpt-stage--compacta .vpt-ctrl-spacer { display: none; }
.vpt-stage--compacta .vpt-btn { height: 38px; padding: 0 12px; font-size: .87rem; }
.vpt-stage--compacta .vpt-btn--icon { width: 38px; padding: 0; }
.vpt-stage--compacta .vpt-btn--play { min-width: 112px; }
.vpt-stage--compacta .vpt-speed button { height: 36px; padding: 0 9px; font-size: .8rem; }
@media (max-width: 767px) {
.vpt-section { padding: 40px 0; }
.vpt-now { padding: 20px; }
.vpt-cta { padding: 30px 20px; }
.vpt-chapters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
.vpt-chapters { grid-template-columns: 1fr; }
.vpt-container { padding: 0 14px; }
}
/* Por debajo de 320x480 el teléfono simulado ya no se lee: en vez de mostrar
algo ilegible, se explica qué hace falta. La guía escrita sigue disponible
más abajo en la página. */
@media (max-width: 319px), (max-height: 449px) and (orientation: landscape) and (max-width: 900px) {
.vpt-lab { display: none; }
/* El modo ancho es la excepción: su aparato se encoge y se avisa, nunca se
esconde. Misma especificidad que la regla de arriba, así que manda el orden. */
.vpt-lab--ancho { display: grid; }
.vpt-minimo {
display: block;
text-align: center;
background: #fff;
border: 1px solid var(--s200);
border-radius: var(--r-xl);
padding: 28px 20px;
box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}
.vpt-minimo .ms {
font-size: 40px;
color: var(--brand);
display: block;
margin-bottom: 12px;
}
.vpt-minimo h3 { font-size: 1.1rem; margin-bottom: 8px; }
.vpt-minimo p { color: var(--s600); font-size: .95rem; }
.vpt-minimo b { color: var(--site-navy); }
}
/* Accesibilidad: sin movimiento ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.vpt-root *,
.vpt-root *::before,
.vpt-root *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* Impresión: la página se lee, el teléfono no se imprime ------------------- */
@media print {
.vpt-stage, .vpt-controls { display: none; }
.vpt-lab { display: block; }
}
/* ══════════════════════════════════════════════════════════════════════════
4. EL TEMA DEL SITIO REPINTA LOS BOTONES
style.css (del tema de verufacts.com) trae esto para TODO