/* Video instructivo «Conecte ChatGPT con DalIA» (views/components/tutorial-chatgpt.php; lo dirige js/demos/tutorial.js). Una ventana (dialog) con un portátil en 3D cuya pantalla repite, paso a paso,
   lo que la persona hace: ChatGPT (siempre oscuro, en inglés) y las pantallas de DalIA (claras, en español). TODO lo de dentro de la pantalla se mide en cqw (porcentaje del ancho de la pantalla),
   así el «video» se escala entero con el portátil. Las pantallas no son capturas: están dibujadas con HTML y CSS. Clases con prefijo tv-. */
.tv { padding: 0; border: 0; background: transparent; color: var(--ink); max-width: 100vw; max-height: 100vh; overflow: visible; }
.tv::backdrop { background: rgba(5, 8, 18, 0.8); backdrop-filter: blur(6px); }
/* El ancho depende también del alto de la pantalla (el portátil es 16:10 y debajo van el paso y los controles: ~240 px), para que todo quepa sin barra de desplazamiento */
.tv-box { box-sizing: border-box; width: min(1040px, calc(100vw - 24px), calc((100vh - 240px) * 1.6)); max-height: calc(100vh - 24px); overflow-y: auto; padding: 18px 24px 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.tv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.tv-head b { display: block; color: var(--accent); font: 800 1.25rem "Plus Jakarta Sans", sans-serif; }
.tv-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.86rem; }
.tv-close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg2); color: var(--muted); cursor: pointer; }
.tv-close:hover { border-color: var(--accent); color: var(--accent); }
.tv-close svg, .tv-ctl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* El portátil en 3D */
.tv-stage { container-type: inline-size; perspective: 1900px; padding: 1.5% 4% 0; }
.tv-laptop { filter: drop-shadow(0 3cqw 2.4cqw rgba(0, 0, 0, 0.5)); }   /* derecho, sin inclinación: el 3D lo dan la tapa, la base y la sombra */
.tv-lid { padding: 1cqw 1cqw 1.5cqw; border: 0.22cqw solid #3b3e49; border-radius: 1.9cqw 1.9cqw 0.4cqw 0.4cqw; background: #07080b; }
.tv-screen { position: relative; container-type: inline-size; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0.6cqw; background: #000; color: #ececf1; font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
.tv-base { position: relative; height: 1.9cqw; margin: -0.05cqw -2.4cqw 0; border-radius: 0.2cqw 0.2cqw 2.4cqw 2.4cqw / 0.2cqw 0.2cqw 1.2cqw 1.2cqw; background: linear-gradient(#e6e8ef, #b1b5c3); box-shadow: 0 0.25cqw 0 #8b90a1; }
.tv-base::after { content: ""; position: absolute; left: 50%; top: 0; width: 15cqw; height: 0.75cqw; transform: translateX(-50%); border-radius: 0 0 1cqw 1cqw; background: #c4c8d5; }

/* Barra del navegador y vista */
.tv-chrome { position: absolute; z-index: 5; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 1.4cqw; height: 3.3cqw; padding: 0 1.4cqw; background: #202124; font-size: 1.2cqw; }
.tv-lights { display: flex; gap: 0.6cqw; }
.tv-lights i { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: #5a5d66; }
.tv-url { flex: 1; max-width: 48cqw; padding: 0.45cqw 1.4cqw; border-radius: 99px; background: #35363a; color: #e8eaed; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-view { position: absolute; left: 0; right: 0; top: 3.3cqw; bottom: 0; font-size: 1.45cqw; line-height: 1.35; }
.tv-page { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.015); transition: opacity 0.22s, transform 0.22s, visibility 0s 0.22s; }
.tv-page.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s 0.18s, transform 0.45s 0.18s; }
.tv-view svg { width: 1.7cqw; height: 1.7cqw; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ChatGPT */
.tv-gpt { display: flex; background: #0a0a0b; }
.tv-side { flex: none; box-sizing: border-box; width: 16.5cqw; padding: 1.4cqw 0.7cqw; border-right: 1px solid #1e1e21; background: #0e0e10; }
.tv-brand { padding: 0.2cqw 1cqw 1.4cqw; font-size: 1.7cqw; font-weight: 800; }
.tv-side ul { margin: 0; padding: 0; list-style: none; }
.tv-side li { display: flex; align-items: center; gap: 0.9cqw; padding: 0.75cqw 1cqw; border-radius: 0.8cqw; color: #d8d8de; font-size: 1.35cqw; font-weight: 600; transition: background 0.25s; }
.tv-side li.is-active, .tv-side li.is-hot { background: #232326; }
.tv-recents { display: grid; gap: 0.9cqw; margin-top: 2cqw; padding: 0 1cqw; color: #8d8d96; font-size: 1.2cqw; }
.tv-recents b { color: #a8a8b0; font-size: 1.1cqw; font-weight: 700; }
.tv-main { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.tv-area { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.18s, visibility 0s 0.18s; }
.tv-area.is-on { opacity: 1; visibility: visible; transition: opacity 0.4s 0.15s; }
.tv-top { display: flex; align-items: center; gap: 0.8cqw; height: 4.8cqw; padding: 0 2cqw; }
.tv-title { display: inline-flex; align-items: center; gap: 0.5cqw; font-size: 1.7cqw; font-weight: 800; }
.tv-gap { flex: 1; }
.tv-tab { padding: 0.65cqw 1.6cqw; border-radius: 99px; color: #c9c9d1; font-size: 1.4cqw; font-weight: 700; }
.tv-tab.is-active { background: #242427; color: #fff; }
.tv-gearbtn { display: grid; place-items: center; width: 3cqw; height: 3cqw; color: #c9c9d1; }
.tv-addbtn { display: inline-flex; align-items: center; gap: 0.5cqw; padding: 0.8cqw 1.8cqw; border-radius: 99px; background: #f4f4f5; color: #111; font-size: 1.45cqw; font-weight: 800; transition: filter 0.2s; }
.tv-welcome { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: 3cqw; font-weight: 700; }
.tv-composer { position: absolute; left: 7cqw; right: 7cqw; bottom: 2.6cqw; display: flex; align-items: center; gap: 1cqw; height: 5cqw; padding: 0 1.2cqw; border: 1px solid #343437; border-radius: 99px; background: #1c1c1f; font-size: 1.5cqw; }
.tv-composer--center { left: 14cqw; right: 14cqw; top: 46%; bottom: auto; }
.tv-plus { display: grid; place-items: center; width: 3cqw; height: 3cqw; color: #d8d8de; }
.tv-ph { color: #8d8d96; }
.tv-typed { color: #f4f4f5; }
.tv-sendbtn { display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; margin-left: auto; border-radius: 50%; background: #f4f4f5; color: #111; opacity: 0; transition: opacity 0.3s; }
.tv-sendbtn.is-on { opacity: 1; }
.tv-area h3 { margin: 0.6cqw 3.4cqw 0; font-size: 2.5cqw; font-weight: 800; }
.tv-lede { margin: 0.5cqw 3.4cqw 0; color: #a8a8b0; font-size: 1.35cqw; }
.tv-search { display: flex; align-items: center; gap: 0.9cqw; height: 3.6cqw; margin: 1.6cqw 3.4cqw 0; padding: 0 1.5cqw; border: 1px solid #2d2d30; border-radius: 99px; background: #17171a; color: #8d8d96; font-size: 1.35cqw; }
.tv-area h4 { display: flex; align-items: center; gap: 0.4cqw; margin: 1.9cqw 3.4cqw 0.9cqw; font-size: 1.55cqw; font-weight: 800; }
.tv-installed { display: flex; gap: 0.9cqw; margin: 0 3.4cqw; }
.tv-app { display: grid; place-items: center; flex: none; width: 3.5cqw; height: 3.5cqw; border-radius: 0.9cqw; border: 1px solid #2a2a2e; background: #17171a; color: #fff; font-size: 1.1cqw; font-weight: 800; }
.tv-app--a { background: #0d0d0d; }
.tv-app--b { background: #2b2140; color: #e7c2ff; }
.tv-app--c { background: linear-gradient(135deg, #5b8def 50%, #9bc0ff 50%); }
.tv-app--m { background: #3a1517; color: #ff8b8b; }
.tv-app--d { background: #14301f; color: #7ee0a1; }
.tv-app--s { background: #11291f; color: #5ee8a3; }
.tv-app--dalia { display: none; background: #12172c; border-color: #3a4fa8; color: #8fa9ff; }
.tv-app--dalia svg { width: 2.2cqw; height: 2.2cqw; }
.is-connected .tv-app--dalia { display: grid; animation: tv-pop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
.tv-pills { display: flex; gap: 0.8cqw; margin: 2cqw 3.4cqw 0; }
.tv-pills span { padding: 0.65cqw 1.6cqw; border-radius: 99px; color: #c9c9d1; font-size: 1.35cqw; font-weight: 700; }
.tv-pills .is-active { background: #242427; color: #fff; }
.tv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1cqw 3cqw; margin: 0 3.4cqw; }
.tv-list > div { display: flex; align-items: center; gap: 1.1cqw; }
.tv-list b { display: block; font-size: 1.4cqw; }
.tv-list i { display: block; color: #8d8d96; font-size: 1.15cqw; font-style: normal; }
.tv-list em { margin-left: auto; color: #d8d8de; }
.tv-menu { position: absolute; z-index: 6; right: 2cqw; top: 4.6cqw; width: 25cqw; padding: 0.7cqw; border: 1px solid #3a3a3e; border-radius: 1.3cqw; background: #2a2a2d; box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(-0.8cqw); transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s; }
.tv-menu.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.25s; }
.tv-menuitem { display: flex; align-items: center; gap: 0.9cqw; white-space: nowrap; padding: 0.9cqw 1.1cqw; border-radius: 0.9cqw; color: #f1f1f4; font-size: 1.4cqw; font-weight: 600; transition: background 0.2s; }
.tv-menuitem.is-hot { background: #3c3c42; }
.tv-toast { position: absolute; z-index: 7; left: 50%; top: 1.2cqw; display: flex; align-items: center; gap: 0.8cqw; padding: 0.9cqw 1.8cqw; border: 1px solid #1f5e38; border-radius: 1.1cqw; background: #0f2a1a; color: #86e6a8; font-size: 1.4cqw; font-weight: 700; opacity: 0; visibility: hidden; transform: translate(-50%, -1.5cqw); transition: opacity 0.4s, transform 0.4s, visibility 0s 0.4s; }
.tv-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.4s, transform 0.4s; }

/* Chat de prueba */
.tv-thread { position: absolute; left: 0; right: 0; top: 5.5cqw; bottom: 9cqw; padding: 0 9cqw; overflow: hidden; }
.tv-user { display: flex; align-items: center; gap: 1cqw; width: fit-content; max-width: 70%; margin: 0 0 0 auto; padding: 0.9cqw 1.8cqw; border-radius: 2cqw; background: #2a3f7e; font-size: 1.5cqw; opacity: 0; transform: translateY(1cqw); transition: opacity 0.4s, transform 0.4s; }
.tv-user.is-on { opacity: 1; transform: none; }
.tv-chip { display: inline-flex; align-items: center; gap: 0.5cqw; color: #9fb7ff; font-weight: 700; }
.tv-chip svg { width: 1.8cqw; height: 1.8cqw; }
.tv-reply { margin-top: 2.6cqw; font-size: 1.45cqw; }
.tv-reply > * { opacity: 0; transform: translateY(0.8cqw); transition: opacity 0.45s, transform 0.45s; }
.tv-reply > .is-on { opacity: 1; transform: none; }
.tv-reply p { margin: 0 0 1cqw; }
.tv-reply ul { margin: 0 0 1cqw; padding-left: 2.4cqw; }
.tv-worked { display: flex; align-items: center; gap: 0.5cqw; margin-bottom: 1.2cqw; padding-bottom: 0.9cqw; border-bottom: 1px solid #2c2c30; color: #a8a8b0; }

/* Formularios y avisos que se abren encima de ChatGPT */
.tv-overlay { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.62); opacity: 0; visibility: hidden; transition: opacity 0.35s, visibility 0s 0.35s; }
.tv-overlay.is-on { opacity: 1; visibility: visible; transition: opacity 0.35s; }
.tv-card { box-sizing: border-box; border: 1px solid #38383c; border-radius: 2cqw; background: #2a2a2d; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.55); transform: scale(0.95) translateY(1cqw); transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1); }
.tv-overlay.is-on .tv-card { transform: none; }
.tv-form { width: 41cqw; height: 52cqw; overflow: hidden; }
.tv-scroll { padding: 2.2cqw 2.6cqw; transition: transform 0.9s cubic-bezier(0.45, 0, 0.2, 1); }
.tv-formtitle { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5cqw; font-size: 2.1cqw; font-weight: 800; }
.tv-iconrow { display: flex; align-items: center; gap: 1.4cqw; margin-bottom: 1.4cqw; }
.tv-iconrow b, .tv-ack b, .tv-adv b { display: block; font-size: 1.4cqw; }
.tv-iconrow i, .tv-ack i, .tv-adv i { display: block; color: #a8a8b0; font-size: 1.1cqw; font-style: normal; }
.tv-iconbox { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border: 1px solid #4a4a4e; border-radius: 1.2cqw; }
.tv-form label { display: block; margin: 1.1cqw 0 0.5cqw; font-size: 1.3cqw; font-weight: 800; }
.tv-field { position: relative; display: flex; align-items: center; height: 3.6cqw; padding: 0 1.3cqw; border: 1px solid #4b4b50; border-radius: 1cqw; background: #333336; font-size: 1.4cqw; transition: border-color 0.25s; }
.tv-field--ph { color: #8d8d96; }
.tv-field.is-focus { border-color: #8fa9ff; }
.tv-caret { display: none; width: 0.15cqw; height: 1.8cqw; margin-left: 0.2cqw; background: #f4f4f5; animation: tv-caret 0.9s steps(1) infinite; }
.is-focus > .tv-caret { display: inline-block; }
.tv-conn { display: flex; align-items: center; justify-content: space-between; margin: 1.1cqw 0 0.5cqw; }
.tv-conn label { margin: 0; }
.tv-seg { display: inline-flex; padding: 0.3cqw; border-radius: 1cqw; background: #101012; font-size: 1.25cqw; font-weight: 700; }
.tv-seg b { padding: 0.55cqw 1.4cqw; border-radius: 0.8cqw; background: #f4f4f5; color: #111; }
.tv-seg i { padding: 0.55cqw 1.4cqw; color: #b0b0b8; font-style: normal; }
.tv-adv { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; margin-top: 1.4cqw; padding: 1.3cqw 1.5cqw; border: 1px solid #424246; border-radius: 1.3cqw; }
.tv-warn { display: flex; align-items: center; gap: 1cqw; margin-top: 1.4cqw; padding: 1.2cqw 1.5cqw; border: 1px solid #4a2c18; border-radius: 1.2cqw; background: #170f09; color: #f1f1f4; font-size: 1.35cqw; }
.tv-warn svg { color: #f0883e; }
.tv-ack { display: flex; align-items: flex-start; gap: 1.4cqw; margin-top: 1.4cqw; padding: 1.5cqw; border-radius: 1.4cqw; background: #070708; }
.tv-box-check { display: grid; place-items: center; flex: none; width: 2.6cqw; height: 2.6cqw; margin-top: 0.4cqw; border: 1px solid #5a5a60; border-radius: 0.6cqw; color: transparent; transition: background 0.25s, color 0.25s; }
.tv-box-check.is-on { background: #3d3d42; color: #fff; }
.tv-actions { display: flex; align-items: center; gap: 1cqw; margin-top: 1.6cqw; font-size: 1.25cqw; white-space: nowrap; }
.tv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6cqw; padding: 0.9cqw 1.6cqw; border-radius: 99px; background: #d4d4d8; color: #111; font-size: 1.3cqw; white-space: nowrap; font-weight: 800; transition: filter 0.2s, transform 0.2s; }
.tv-btn--ghost { border: 1px solid #4a4a4e; background: transparent; color: #f4f4f5; }
.tv-btn--wide { display: flex; width: 100%; box-sizing: border-box; margin-top: 1cqw; padding: 1.2cqw; background: #ececee; font-size: 1.5cqw; font-weight: 600; }
.tv-btn--alt { background: #ececee; }
.tv-connectcard { width: 34cqw; padding: 2.6cqw 2.6cqw 2.4cqw; text-align: left; }
.tv-logos { display: flex; align-items: center; justify-content: center; gap: 1.4cqw; }
.tv-logo { display: grid; place-items: center; width: 6cqw; height: 6cqw; border: 1px solid #38383c; border-radius: 1.6cqw; font-size: 1.5cqw; font-weight: 800; }
.tv-logo--gpt { background: #000; color: #fff; }
.tv-logo--dalia { background: #1d1d20; color: #dcdce2; }
.tv-logo svg { width: 3.4cqw; height: 3.4cqw; }
.tv-dotsline { display: flex; gap: 0.5cqw; }
.tv-dotsline i { width: 0.5cqw; height: 0.5cqw; border-radius: 50%; background: #6a6a72; }
.tv-connecttitle { margin: 1.6cqw 0 1.2cqw; text-align: center; font-size: 2.5cqw; font-weight: 800; }
.tv-connectcard p { margin: 0 0 1cqw; color: #b4b4bc; font-size: 1.15cqw; line-height: 1.45; }

/* Pantallas de DalIA (claras) */
.tv-light { display: grid; place-items: center; color: #14161a; }
.tv-login { background: radial-gradient(ellipse 60% 70% at 28% 50%, #4d5a58 0%, #aab3b0 42%, #eef0ee 80%); }
.tv-consent { background: radial-gradient(ellipse 80% 80% at 20% 50%, #dfe3e5 0%, #f1f3f2 70%); }
.tv-lcard, .tv-ccard { box-sizing: border-box; border: 1px solid #d2d6d4; border-radius: 2cqw; background: #fff; box-shadow: 0 2cqw 5cqw rgba(20, 30, 28, 0.25); }
.tv-lcard { width: 30cqw; padding: 3cqw 3cqw 3.2cqw; }
.tv-ccard { width: 44cqw; padding: 1.5cqw 2.8cqw 1.8cqw; }
.tv-lbrand { display: block; height: 4.2cqw; margin: 0 auto 1.6cqw; }
.tv-ccard .tv-lbrand { height: 3.2cqw; margin-bottom: 0.9cqw; }
.tv-ltitle { margin-bottom: 1cqw; text-align: center; font-size: 1.9cqw; font-weight: 800; }
.tv-light label { display: block; margin: 1.1cqw 0 0.4cqw; color: #55595c; font-size: 1.05cqw; font-weight: 600; letter-spacing: 0.06em; }
.tv-lfield { position: relative; display: flex; align-items: center; height: 3.8cqw; padding: 0 1.3cqw; border: 1px solid #b9c4bf; border-radius: 0.9cqw; background: #e6ece8; color: #111; font-size: 1.5cqw; transition: border-color 0.25s, box-shadow 0.25s; }
.tv-lfield.is-focus { border-color: #4a63d6; box-shadow: 0 0 0 0.3cqw rgba(74, 99, 214, 0.25); }
.tv-lfield svg { position: absolute; right: 1.2cqw; color: #55595c; }
.tv-caret--dark { background: #111; }
.tv-lbtn { margin-top: 2cqw; padding: 1.2cqw; border-radius: 0.9cqw; background: #7b86a8; color: #fff; text-align: center; font-size: 1.5cqw; font-weight: 800; transition: background 0.3s, filter 0.2s; }
.tv-lbtn.is-ready { background: #4a63d6; }
.tv-ctitle { margin-bottom: 1cqw; text-align: center; font-size: 1.65cqw; font-weight: 800; }
.tv-ccard dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3cqw 2cqw; margin: 0 0 1cqw; font-size: 1.15cqw; }
.tv-ccard dt { color: #55595c; font-size: 1.05cqw; letter-spacing: 0.04em; }
.tv-ccard dd { margin: 0; }
.tv-cperms-title { margin-bottom: 0.7cqw; color: #33373a; font-size: 1.05cqw; font-weight: 800; letter-spacing: 0.06em; }
.tv-cperms { margin: 0; padding: 0; list-style: none; border: 1px solid #c4cdc8; border-radius: 0.9cqw; background: #e6ece8; font-size: 1.1cqw; transition: box-shadow 0.3s; }
.tv-cperms li { padding: 0.5cqw 1.2cqw; border-bottom: 1px solid #c4cdc8; }
.tv-cperms li:last-child { border-bottom: 0; }
.tv-cnote { margin: 0.8cqw 0 1cqw; color: #55595c; font-size: 1cqw; line-height: 1.4; }
.tv-cbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; }
.tv-cbtn { padding: 0.85cqw; border: 1px solid #c4cdc8; border-radius: 0.9cqw; background: #eaf0ec; text-align: center; font-size: 1.4cqw; font-weight: 800; transition: filter 0.2s; }
.tv-cbtn--ok { border-color: #4a63d6; background: #4a63d6; color: #fff; }

/* El cursor, el anillo que señala dónde pulsar y el efecto del clic */
.tv-ring { position: absolute; z-index: 28; border: 0.3cqw solid #6f95ff; border-radius: 1.1cqw; box-shadow: 0 0 0 0.5cqw rgba(111, 149, 255, 0.22), 0 0 2cqw rgba(111, 149, 255, 0.55); opacity: 0; pointer-events: none; transition: left 0.55s cubic-bezier(0.45, 0, 0.2, 1), top 0.55s cubic-bezier(0.45, 0, 0.2, 1), width 0.55s, height 0.55s, opacity 0.3s; }
.tv-ring.is-on { opacity: 1; animation: tv-ring 1.3s ease-in-out infinite; }
.tv-cursor { position: absolute; z-index: 30; left: 0; top: 0; width: 2.6cqw; height: 2.6cqw; pointer-events: none; opacity: 0; transition: transform 1s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s; filter: drop-shadow(0 0.25cqw 0.35cqw rgba(0, 0, 0, 0.6)); }
.tv-cursor.is-on { opacity: 1; }
.tv-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #0a0a0b; stroke-width: 1.6; stroke-linejoin: round; }
.tv-click { position: absolute; left: 0.6cqw; top: 0.4cqw; width: 3.4cqw; height: 3.4cqw; margin: -1.7cqw 0 0 -1.7cqw; border: 0.25cqw solid #6f95ff; border-radius: 50%; opacity: 0; transform: scale(0.2); }
.tv-cursor.is-click .tv-click { animation: tv-click 0.6s ease-out; }
.is-press { filter: brightness(1.3); }
@keyframes tv-click { 0% { opacity: 0.9; transform: scale(0.2); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes tv-ring { 0%, 100% { box-shadow: 0 0 0 0.5cqw rgba(111, 149, 255, 0.22), 0 0 2cqw rgba(111, 149, 255, 0.55); } 50% { box-shadow: 0 0 0 0.9cqw rgba(111, 149, 255, 0.12), 0 0 3cqw rgba(111, 149, 255, 0.8); } }
@keyframes tv-caret { 50% { opacity: 0; } }
@keyframes tv-pop { from { transform: scale(0.4); opacity: 0; } }

/* Paso actual, barra de pasos y controles (fuera del portátil, siguen el tema de la web) */
.tv-caption { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 16px 4px 8px; }
.tv-stepno { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 800 0.78rem "Plus Jakarta Sans", sans-serif; white-space: nowrap; }
.tv-steptext { margin: 0; color: var(--ink); font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.tv-bar { display: flex; align-items: center; gap: 16px; padding: 4px 4px 0; }
.tv-steps { display: flex; flex: 1; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tv-steps li { flex: 1; }
.tv-steps button { display: block; width: 100%; height: 18px; padding: 6px 0; border: 0; background: transparent; cursor: pointer; }
.tv-steps button i { display: block; height: 6px; border-radius: 3px; background: var(--line); transition: background 0.3s; }
.tv-steps li.is-done button i { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.tv-steps li.is-current button i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tv-steps button:hover i { background: var(--accent); }
.tv-steps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.tv-controls { display: flex; gap: 8px; }
.tv-ctl { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--bg2); color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.tv-ctl:hover, .tv-ctl[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tv-ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tv-ctl .ic-play svg { fill: currentColor; stroke: none; }
.tv-ctl[aria-pressed="false"] .ic-play, .tv-ctl[aria-pressed="true"] .ic-pause { display: none; }

@media (max-width: 700px) {
  .tv-box { padding: 14px 12px 16px; border-radius: 18px; }
  .tv-stage { padding: 0; perspective: none; }
  .tv-laptop { transform: none; }
  .tv-steptext { font-size: 0.92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-ring.is-on, .tv-cursor.is-click .tv-click, .tv-caret, .is-connected .tv-app--dalia { animation: none; }
  .tv-page, .tv-area, .tv-overlay, .tv-card, .tv-scroll, .tv-cursor, .tv-ring, .tv-menu, .tv-toast { transition: none; }
}

/* Con la ventana del video abierta, la página de atrás no se desplaza */
html.tv-open { overflow: hidden; }