/* Video «Instale la extensión y cree su cuenta» (views/components/tutorial-extension.php; lo dirige js/demos/tutorial-extension.js). Las pantallas son un navegador Chrome con la ficha de la tienda,
   el panel lateral de la extensión (acceso, crear cuenta, verificar, inicio) y un correo con el código. Todo se mide en cqw (porcentaje del ancho de la pantalla del portátil), así el «video» se escala
   entero. El marco de la ventana, el portátil, el cursor, el anillo y los controles son los de css/tutorial.css. Clases con prefijo tx-. */
.tv-chrome .tx-tools { display: flex; align-items: center; gap: 0.9cqw; margin-left: auto; }
.tx-tool { display: grid; place-items: center; width: 2.7cqw; height: 2.7cqw; border-radius: 50%; color: #c4c7c5; }
.tx-tool svg { width: 1.6cqw; height: 1.6cqw; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tx-tool .tx-iso { width: 2.4cqw; height: 2.4cqw; }
.tx-tool--ext { opacity: 0; visibility: hidden; transform: scale(0.3); transition: opacity 0.3s, transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1), visibility 0s 0.5s; }
.tx-tool--ext.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s, transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
.tx-avatar { display: block; flex: none; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: linear-gradient(135deg, #8a97a4, #3c4650); }
.tv-view .tx-iso, .tv-view .tx-cws { stroke: none; }
.tx-iso { display: block; flex: none; width: 2.4cqw; height: 2.4cqw; }
.tx-gap { flex: 1; }

/* Zona principal y panel lateral */
.tx-main { position: absolute; left: 0; top: 0; bottom: 0; right: 0; overflow: hidden; background: #fff; color: #1f1f1f; transition: right 0.7s cubic-bezier(0.45, 0, 0.2, 1); }
.tv-view.has-panel .tx-main { right: 33cqw; }
.tx-panel { position: absolute; z-index: 3; top: 0; bottom: 0; right: 0; display: flex; flex-direction: column; width: 33cqw; box-shadow: -0.4cqw 0 1.6cqw rgba(0, 0, 0, 0.35); transform: translateX(102%); transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1); }
.tv-view.has-panel .tx-panel { transform: none; }
.tx-phead { display: flex; align-items: center; gap: 1cqw; flex: none; height: 4.2cqw; padding: 0 1.4cqw; background: #35363a; color: #e8eaed; font-size: 1.5cqw; font-weight: 600; }
.tx-phead .tx-iso { width: 2.3cqw; height: 2.3cqw; }
.tx-phead svg:not(.tx-iso) { width: 1.6cqw; height: 1.6cqw; }
.tx-pbody { position: relative; flex: 1; min-height: 0; background: radial-gradient(ellipse 90% 60% at 30% 50%, #dfe3e1 0%, #f1f3f2 75%); }
.tx-sp { position: absolute; inset: 0; box-sizing: border-box; padding: 1.4cqw; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
.tx-sp.is-on { opacity: 1; visibility: visible; transition: opacity 0.4s 0.12s; }
.tx-sp--home { padding: 0; background: #f1f3f2; color: #14161a; }

/* Ficha de la tienda */
.tx-store, .tx-mail { color: #1f1f1f; font-size: 1.3cqw; }
.tx-store { background: #fff; }
.tx-sbar { display: flex; align-items: center; gap: 2cqw; height: 5.5cqw; padding: 0 2.4cqw; }
.tx-wlogo { display: flex; align-items: center; gap: 0.9cqw; color: #444746; font-size: 1.5cqw; white-space: nowrap; }
.tx-wlogo b { font-weight: 600; }
.tx-cws { width: 2.3cqw; height: 2.3cqw; }
.tx-search { display: flex; align-items: center; gap: 0.9cqw; flex: 0 1 34cqw; height: 3.3cqw; margin: 0 auto; padding: 0 1.5cqw; border-radius: 99px; background: #f0f4f9; color: #444746; font-size: 1.3cqw; white-space: nowrap; overflow: hidden; }
.tx-sicons { display: flex; align-items: center; gap: 1.4cqw; color: #444746; }
.tx-tabs { display: flex; gap: 2.8cqw; padding: 0 2.4cqw; }
.tx-tabs span { padding: 0.9cqw 0.1cqw; color: #444746; font-size: 1.3cqw; border-bottom: 0.3cqw solid transparent; }
.tx-tabs .is-active { border-color: #0b57d0; color: #0b57d0; font-weight: 600; }
.tx-hero { display: flex; align-items: center; gap: 1.6cqw; padding: 2.2cqw 3cqw 0 6cqw; }
.tv-view .tx-hero .tx-iso { width: 5.2cqw; height: 5.2cqw; }
.tx-hero h3 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 2.7cqw; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.tx-addchrome { flex: none; padding: 1.1cqw 2.6cqw; border-radius: 99px; background: #0b57d0; color: #fff; font-size: 1.5cqw; font-weight: 600; white-space: nowrap; transition: filter 0.2s; }
.tx-meta { display: flex; align-items: center; gap: 2.6cqw; padding: 1.4cqw 6cqw 0; color: #0b57d0; font-size: 1.3cqw; }
.tx-meta span { display: flex; align-items: center; gap: 0.6cqw; }
.tx-chips { display: flex; gap: 1cqw; padding: 1.4cqw 6cqw 0; }
.tx-chips span { padding: 0.9cqw 1.6cqw; border-radius: 1cqw; background: #f0f4f9; font-size: 1.2cqw; }
.tx-shot { display: flex; align-items: center; gap: 3cqw; box-sizing: border-box; width: min(58cqw, calc(100% - 12cqw)); margin: 2.4cqw auto 0; padding: 3cqw; border-radius: 1cqw; background: radial-gradient(ellipse 80% 90% at 20% 30%, #26372f 0%, #10141c 70%); color: #eef2f0; }
.tx-shot-text { flex: 1.3; min-width: 0; }
.tx-shot-brand { display: flex; align-items: center; gap: 0.7cqw; margin-bottom: 1.4cqw; color: #bfd9cd; font-size: 1.05cqw; }
.tv-view .tx-shot-brand .tx-iso { width: 1.8cqw; height: 1.8cqw; }
.tx-shot-text b { display: block; font-size: 2.3cqw; line-height: 1.15; }
.tx-shot-text p { margin: 1cqw 0 0.8cqw; color: #aeb8b4; font-size: 1.1cqw; }
.tx-shot-text ul { margin: 0; padding-left: 1.6cqw; color: #cdd7d3; font-size: 1.05cqw; }
.tx-shot-card { flex: 1; min-width: 0; padding: 1.4cqw 1.6cqw; border-radius: 0.8cqw; background: #fff; color: #1b1d20; }
.tx-shot-card b { display: block; font-size: 1.2cqw; }
.tx-shot-card p { margin: 0.6cqw 0 1cqw; color: #4b5057; font-size: 1cqw; }
.tx-shot-btns { display: flex; gap: 0.8cqw; font-size: 1cqw; font-weight: 700; text-align: center; }
.tx-shot-btns span { flex: 1; padding: 0.7cqw; border: 1px solid #cdd2d8; border-radius: 0.5cqw; }
.tx-shot-btns span:first-child { background: #7b86a8; border-color: #7b86a8; color: #fff; }

/* Correo con el código */
.tx-mail { background: #f6f8fc; font-size: 1.25cqw; }
.tx-mtop { display: flex; align-items: center; gap: 2cqw; height: 5cqw; padding: 0 2cqw; color: #444746; }
.tx-mbrand { display: grid; place-items: center; color: #5f6368; }
.tx-mbrand svg { width: 2.6cqw; height: 2.6cqw; }
.tx-mbody { display: flex; gap: 1.6cqw; height: calc(100% - 5cqw); padding: 0 1.6cqw 1.6cqw; box-sizing: border-box; }
.tx-mside { display: flex; flex: none; flex-direction: column; gap: 0.3cqw; width: 14cqw; }
.tx-compose { width: fit-content; margin-bottom: 1cqw; padding: 1.3cqw 2.2cqw; border-radius: 1.6cqw; background: #c2e7ff; color: #001d35; font-weight: 700; }
.tx-folder { padding: 0.8cqw 1.6cqw; border-radius: 99px; color: #202124; }
.tx-folder.is-active { background: #d3e3fd; font-weight: 700; }
.tx-msg { flex: 1; min-width: 0; padding: 2cqw 3cqw; border-radius: 1.6cqw; background: #fff; overflow: hidden; }
.tx-msg h4 { margin: 0 0 1.4cqw; font-size: 2cqw; font-weight: 400; }
.tx-from { display: flex; align-items: center; gap: 1cqw; margin-bottom: 1.6cqw; }
.tx-from em { color: #5f6368; font-size: 1.1cqw; font-style: normal; }
.tx-mcard { padding: 0 2cqw; }
.tx-mcard > b { display: block; margin-bottom: 1cqw; font-size: 2cqw; }
.tx-mcard p { margin: 0 0 1cqw; }
.tx-mcode { margin: 1.2cqw 0; padding: 1.6cqw 1cqw; border-radius: 1cqw; background: #f1f3f4; text-align: center; text-indent: 0.7em; font-size: 3.4cqw; font-weight: 700; letter-spacing: 0.7em; transition: box-shadow 0.3s; }
.tx-faint { color: #6b7076; }

/* Pantallas del panel de la extensión */
.tx-card { position: relative; box-sizing: border-box; padding: 1.6cqw 1.8cqw 1.7cqw; border: 1px solid #d9dedc; border-radius: 1.6cqw; background: #fff; color: #14161a; box-shadow: 0 1.2cqw 3cqw rgba(30, 40, 38, 0.18); }
.tx-moon { position: absolute; top: 1.2cqw; right: 1.4cqw; color: #6b7076; }
.tx-moon svg { width: 1.7cqw; height: 1.7cqw; }
.tx-brand { display: block; height: 3.4cqw; margin: 0.6cqw auto 0.9cqw; }
.tx-title { margin-bottom: 0.4cqw; text-align: center; font-size: 1.7cqw; font-weight: 800; }
.tx-lede { margin: 0 0 0.6cqw; color: #5f6368; text-align: center; font-size: 1.05cqw; line-height: 1.4; }
.tx-card label { display: block; margin: 0.9cqw 0 0.4cqw; color: #6b7076; font-size: 0.95cqw; letter-spacing: 0.08em; }
.tx-field { position: relative; display: flex; align-items: center; height: 3.2cqw; padding: 0 1.1cqw; border: 1px solid #bcc3d1; border-radius: 0.8cqw; background: #eceff9; color: #111; font-size: 1.2cqw; transition: border-color 0.25s, box-shadow 0.25s; }
.tx-field.is-focus { border-color: #4a63d6; box-shadow: 0 0 0 0.25cqw rgba(74, 99, 214, 0.25); }
.tx-field svg { position: absolute; right: 1cqw; width: 1.7cqw; height: 1.7cqw; color: #5f6368; }
.tx-field--code { justify-content: center; font-size: 1.9cqw; letter-spacing: 0.5em; text-indent: 0.5em; }
.tx-ph { color: #8b8f98; }
.tx-caret { display: none; width: 0.14cqw; height: 1.5cqw; margin-left: 0.15cqw; background: #111; animation: tv-caret 0.9s steps(1) infinite; }
.is-focus > .tx-caret { display: inline-block; }
.tx-note { margin: 0.6cqw 0 0; color: #6b7076; font-size: 0.95cqw; line-height: 1.4; }
.tx-keep { display: flex; align-items: center; gap: 0.8cqw; margin-top: 1.1cqw; font-size: 1.1cqw; }
.tx-check { display: grid; place-items: center; flex: none; width: 1.7cqw; height: 1.7cqw; border-radius: 0.4cqw; background: #4a63d6; color: #fff; }
.tx-check svg { width: 1.2cqw; height: 1.2cqw; stroke-width: 3; }
.tx-btn { margin-top: 1.2cqw; padding: 1cqw; border-radius: 0.9cqw; background: #7b86a8; color: #fff; text-align: center; font-size: 1.3cqw; font-weight: 800; transition: background 0.3s, filter 0.2s; }
.tx-btn.is-ready { background: #4a63d6; }
.tx-btn--ghost { border: 1px solid #cfd4d1; background: #fff; color: #5f6368; }
.tx-btn--off { border: 1px solid #e1e4e3; background: #fff; color: #b1b5b8; font-weight: 600; }
.tx-sep { margin-top: 1.2cqw; padding-top: 1cqw; border-top: 1px solid #dfe3e1; color: #6b7076; text-align: center; font-size: 1cqw; }
.tx-sep + .tx-btn { margin-top: 0.7cqw; }
.tx-hhead { display: flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 1.6cqw; border-bottom: 1px solid #d9dedc; background: #fff; color: #5f6368; }
.tx-hhead svg { width: 1.8cqw; height: 1.8cqw; }
.tx-hhead b { display: block; color: #14161a; font-size: 1.6cqw; }
.tx-hhead em { display: block; color: #6b7076; font-size: 1.15cqw; font-style: normal; }
.tx-hav { position: relative; display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: #e4e6ee; color: #7b86a8; font-size: 1.9cqw; font-weight: 800; }
.tx-hav i { position: absolute; right: 0; bottom: 0.1cqw; width: 1.1cqw; height: 1.1cqw; border: 0.2cqw solid #fff; border-radius: 50%; background: #3f7d5a; }
.tx-empty { padding-top: 8cqw; text-align: center; transition: transform 0.5s; }
.tx-emptyicon { display: grid; place-items: center; width: 8cqw; height: 8cqw; margin: 0 auto 1.6cqw; border-radius: 50%; background: #e3e6e9; color: #2f5b8e; }
.tx-emptyicon svg { width: 3.6cqw; height: 3.6cqw; stroke-width: 1.7; }
.tx-empty b { display: block; font-size: 1.7cqw; }
.tx-empty p { margin: 0.6cqw 2.4cqw 0; color: #6b7076; font-size: 1.2cqw; }

/* Cuadro de instalación de Chrome y aviso «se ha añadido» */
.tx-scrim { position: absolute; z-index: 20; inset: 0; background: rgba(0, 0, 0, 0.42); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
.tx-scrim.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s; }
.tx-install { position: absolute; top: 0.6cqw; left: 3cqw; box-sizing: border-box; width: 42cqw; padding: 2.4cqw 2.6cqw 2.2cqw; border-radius: 2cqw; background: #1b1f23; color: #e3e7ea; box-shadow: 0 1.6cqw 4cqw rgba(0, 0, 0, 0.5); transform: translateY(-1cqw); transition: transform 0.4s cubic-bezier(0.3, 1.3, 0.5, 1); }
.tx-scrim.is-on .tx-install { transform: none; }
.tx-install-row { display: flex; align-items: center; gap: 1.6cqw; }
.tv-view .tx-install .tx-iso { width: 4.4cqw; height: 4.4cqw; }
.tx-install-row b { font-size: 1.9cqw; font-weight: 500; }
.tx-install-btns { display: flex; justify-content: flex-end; gap: 1.2cqw; margin-top: 2cqw; }
.tx-ibtn { padding: 1.1cqw 2.4cqw; border-radius: 99px; background: #99d3e3; color: #0b2c36; font-size: 1.5cqw; font-weight: 700; transition: filter 0.2s; }
.tx-ibtn--add { background: #2a525c; color: #d6eef5; }
.tx-added { position: absolute; z-index: 21; top: 0.4cqw; right: 1.4cqw; box-sizing: border-box; display: flex; align-items: flex-start; gap: 1.4cqw; width: 37cqw; padding: 1.6cqw 1.8cqw; border-radius: 1.6cqw; background: #2d3033; color: #e8eaed; box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(-1cqw); transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s; }
.tx-added.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s, transform 0.35s; }
.tv-view .tx-added .tx-iso { width: 3.8cqw; height: 3.8cqw; }
.tx-added b { display: block; font-size: 1.5cqw; font-weight: 600; }
.tx-added p { margin: 0.5cqw 0 0; color: #b9bec3; font-size: 1.1cqw; line-height: 1.4; }
.tx-added > svg { margin-left: auto; color: #b9bec3; }
.is-press.tx-ibtn, .is-press.tx-addchrome { filter: brightness(1.3); }

@media (prefers-reduced-motion: reduce) {
  .tx-main, .tx-panel, .tx-sp, .tx-scrim, .tx-install, .tx-added, .tx-tool--ext, .tx-caret { transition: none; animation: none; }
}