/* Video «Cargue sus documentos» (views/components/tutorial-docs.php; lo dirige js/demos/tutorial-docs.js). El panel lateral de la extensión reutiliza las piezas de css/tutorial-extension.css (cabecera,
   pantalla de inicio, tipografía de las tarjetas) y el asistente (ChatGPT) las de css/tutorial.css; aquí va lo propio: la pantalla «Cargar contenidos», el menú ⋮ y el archivo que se arrastra.
   Todo en cqw. Clases con prefijo td-. */
.tx-main.td-main { background: #0a0a0b; color: #ececf1; }
.td-chat { background: #0a0a0b; }
.td-top { display: flex; align-items: center; height: 4.2cqw; padding: 0 2cqw; }
.td-composer { left: 5cqw; right: 5cqw; }
.tv-composer--center.td-composer { left: 9cqw; right: 9cqw; }
.td-main .tv-welcome { font-size: 2.6cqw; }

/* Panel: menú ⋮ */
.td-dots { display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; transition: background 0.2s; }
.td-dots.is-hot { background: #dfe3e1; }
.td-menu { position: absolute; z-index: 6; top: 7cqw; right: 1.2cqw; width: 18cqw; padding: 0.6cqw; border: 1px solid #cfd4d1; border-radius: 1.2cqw; background: #fff; box-shadow: 0 1.2cqw 3cqw rgba(30, 40, 38, 0.25); color: #14161a; opacity: 0; visibility: hidden; transform: translateY(-0.6cqw); transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s; }
.td-menu.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.25s; }
.td-menuitem { padding: 0.9cqw 1.2cqw; border-radius: 0.8cqw; font-size: 1.2cqw; font-weight: 600; transition: background 0.2s; }
.td-menuitem.is-hot { background: #e6ece8; }

/* Panel: «Cargar contenidos» */
.tx-sp[data-sp="upload"] { color: #14161a; }
.td-back { display: flex; align-items: center; gap: 0.4cqw; color: #5f6368; font-size: 1.2cqw; }
.td-back svg { width: 1.5cqw; height: 1.5cqw; }
.td-uptitle { margin: 0.9cqw 0; font-size: 1.9cqw; font-weight: 800; }
.td-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8cqw; box-sizing: border-box; height: 11cqw; padding: 0 2cqw; border: 0.2cqw dashed #9aa6b5; border-radius: 1.4cqw; background: #fff; color: #4a5568; text-align: center; font-size: 1.15cqw; transition: background 0.25s, border-color 0.25s; }
.td-drop svg { width: 2.6cqw; height: 2.6cqw; color: #4a63d6; }
.td-drop.is-over { border-color: #4a63d6; background: #eef2ff; }
.td-mode { display: flex; align-items: center; gap: 1cqw; margin-top: 1.2cqw; padding: 0.9cqw 1.3cqw; border: 1px solid #cfd4d1; border-radius: 0.9cqw; background: #fff; font-size: 1.15cqw; }
.td-mode span { color: #6b7076; font-size: 0.95cqw; letter-spacing: 0.08em; }
.td-mode b { flex: 1; }
.td-mode svg { width: 1.4cqw; height: 1.4cqw; color: #6b7076; }
.td-tabs { display: flex; gap: 2cqw; margin-top: 1.4cqw; border-bottom: 1px solid #d3d8d5; color: #6b7076; font-size: 1.2cqw; }
.td-tabs span { padding: 0.7cqw 0; border-bottom: 0.25cqw solid transparent; }
.td-tabs .is-active { border-color: #4a63d6; color: #14161a; font-weight: 700; }
.td-pack { margin-top: 1.4cqw; padding: 1.3cqw 1.4cqw; border: 1px solid #d3d8d5; border-radius: 1.2cqw; background: #fff; opacity: 0; transform: translateY(1cqw); transition: opacity 0.4s, transform 0.4s; }
.td-pack.is-on { opacity: 1; transform: none; }
.td-packhead { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; color: #33373a; font-size: 0.95cqw; font-weight: 800; letter-spacing: 0.05em; }
.td-chip { padding: 0.35cqw 1.1cqw; border-radius: 99px; background: #fdf0d5; color: #8a5a00; font-size: 1cqw; font-style: normal; font-weight: 800; letter-spacing: 0; white-space: nowrap; transition: background 0.3s, color 0.3s; }
.td-chip.is-ok { background: #dcf3e4; color: #1f6b3b; }
.td-packsub { margin-top: 0.5cqw; color: #6b7076; font-size: 1.05cqw; }
.td-file { display: flex; gap: 1.2cqw; margin-top: 1.1cqw; padding-top: 1.1cqw; border-top: 1px solid #e3e7e4; }
.td-pdf { display: grid; place-items: center; flex: none; width: 3.6cqw; height: 4.2cqw; border-radius: 0.7cqw; background: #fde8e6; color: #c0392b; font-size: 1cqw; font-weight: 800; }
.td-fileinfo { flex: 1; min-width: 0; font-size: 1.15cqw; }
.td-fileinfo b { display: block; overflow: hidden; color: #14161a; white-space: nowrap; text-overflow: ellipsis; }
.td-fileinfo i { display: block; color: #6b7076; font-size: 1cqw; font-style: normal; }
.td-meter { display: block; height: 0.6cqw; margin: 0.7cqw 0 0.4cqw; border-radius: 99px; background: #e3e7e4; overflow: hidden; }
.td-meter u { display: block; width: 0; height: 100%; background: #4a63d6; text-decoration: none; transition: width 0.25s linear, background 0.4s; }
.td-state { display: block; color: #4a63d6; font-size: 1cqw; font-weight: 700; }
.td-pack.is-done .td-state { color: #1f6b3b; }
.td-pack.is-done .td-meter u { background: #2f9e5b; }

/* El archivo que se arrastra desde el escritorio hasta el recuadro */
.td-drag { position: absolute; z-index: 29; left: 0; top: 0; display: flex; align-items: center; gap: 0.8cqw; padding: 0.7cqw 1.2cqw; border: 1px solid #cfd4d1; border-radius: 1cqw; background: #fff; color: #14161a; font-size: 1.15cqw; box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: transform 1s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.25s; }
.td-drag.is-on { opacity: 1; }
.td-drag .td-pdf { width: 2.4cqw; height: 2.8cqw; font-size: 0.8cqw; }
.td-drag b { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .td-menu, .td-pack, .td-drag, .td-meter u, .td-drop, .td-chip { transition: none; }
}