/* Video «Conecte Claude con DalIA» (views/components/tutorial-claude.php; lo dirige js/demos/tutorial-claude.js). Las pantallas de Claude (oscuras) y las de DalIA (claras) están dibujadas con HTML y CSS.
   Reutilizan las piezas comunes de css/tutorial.css (barra lateral, formularios, menú, cursor, anillo, pantallas claras de DalIA); aquí van la paleta de Claude y lo propio. Todo en cqw. Clases con prefijo tc-. */
.tc-app { background: #191919; }
.tc-app .tv-side { border-right-color: #2d2d2d; background: #232323; }
.tc-app .tv-side li.is-active, .tc-app .tv-side li.is-hot { background: #323232; }
.tc-brand { font: 400 1.9cqw Georgia, "Times New Roman", serif; }
.tc-hello { position: absolute; left: 0; right: 0; top: 30%; display: flex; align-items: center; justify-content: center; gap: 1.2cqw; color: #f1f1ec; font: 400 3.2cqw Georgia, "Times New Roman", serif; }
.tc-hello svg { width: 3.4cqw; height: 3.4cqw; color: #d97757; stroke-width: 1.8; }
.tc-composer { border-color: #3a3a3a; border-radius: 1.6cqw; background: #262626; }
.tc-user { border-radius: 1.4cqw; background: #2b2b2b; }

/* Personalización → Conectores */
.tc-cols { display: flex; height: 100%; }
.tc-subnav { flex: none; display: grid; align-content: start; gap: 0.4cqw; width: 13cqw; padding: 2cqw 1.2cqw; font-size: 1.3cqw; }
.tc-subnav span { padding: 0.7cqw 1.2cqw; border-radius: 0.8cqw; color: #c9c9c2; }
.tc-subnav .is-active { background: #2b2b2b; color: #fff; font-weight: 700; }
.tc-page { flex: 1; min-width: 0; padding: 2cqw 3cqw; }
.tc-title { display: flex; align-items: center; justify-content: space-between; }
.tc-title h3 { margin: 0; font: 400 2.6cqw Georgia, "Times New Roman", serif; }
.tc-plus { display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; border: 1px solid #3d3d3d; border-radius: 0.9cqw; color: #e8e8e2; transition: background 0.2s; }
.tc-plus svg { width: 1.8cqw; height: 1.8cqw; }
.tc-page .tv-lede { margin: 0.5cqw 0 0; }
.tc-tabs { display: flex; gap: 2cqw; margin-top: 1.4cqw; border-bottom: 1px solid #2f2f2f; font-size: 1.3cqw; }
.tc-tabs span { padding: 0.7cqw 0; border-bottom: 0.25cqw solid transparent; color: #a8a8a0; }
.tc-tabs .is-active { border-color: #d97757; color: #fff; }
.tc-page h4 { margin: 1.8cqw 0 1cqw; font-size: 1.4cqw; font-weight: 700; }
.tc-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; }
.tc-conn { padding: 1.3cqw 1.5cqw; border: 1px solid #2f2f2f; border-radius: 1.1cqw; background: #1f1f1f; }
.tc-conn b { display: block; font-size: 1.3cqw; }
.tc-conn i { display: block; margin-top: 0.3cqw; color: #a8a8a0; font-size: 1.05cqw; font-style: normal; line-height: 1.35; }

/* Formulario «Agregar conector personalizado» */
.tc-form { width: 50cqw; padding: 2.2cqw 2.6cqw; background: #2b2b2b; border-color: #3d3d3d; }
.tc-form .tv-formtitle { margin-bottom: 0.8cqw; }
.tc-formtext { margin: 0 0 1.2cqw; color: #a8a8a0; font-size: 1.1cqw; line-height: 1.4; }
.tc-form .tv-field { margin-top: 0.8cqw; background: #1f1f1f; border-color: #444; }
.tc-form .tv-field.is-focus { border-color: #d97757; }
.tc-group b { display: block; margin: 1.2cqw 0 0.4cqw; font-size: 1.25cqw; }
.tc-radio { display: flex; align-items: center; gap: 0.9cqw; padding: 0.5cqw 0; color: #cfcfc8; font-size: 1.15cqw; }
.tc-radio i { flex: none; width: 1.3cqw; height: 1.3cqw; border: 0.15cqw solid #6a6a66; border-radius: 50%; }
.tc-radio.is-on i { border-color: #d97757; background: radial-gradient(#d97757 38%, transparent 42%); }
.tc-radio em { padding: 0.2cqw 0.8cqw; border-radius: 99px; background: #1f3a2c; color: #7fd6a0; font-size: 0.95cqw; font-style: normal; }
.tc-adv { display: flex; align-items: center; gap: 0.5cqw; margin-top: 1cqw; color: #a8a8a0; font-size: 1.15cqw; }
.tc-adv svg { width: 1.4cqw; height: 1.4cqw; }
.tc-form .tv-btn { background: #ece9e2; }
.tc-form .tv-btn--ghost { background: transparent; }

/* Detalle del conector */
.tc-page--detail { padding-top: 2.4cqw; }
.tc-crumb { display: flex; align-items: center; gap: 0.6cqw; color: #a8a8a0; font-size: 1.25cqw; }
.tc-crumb svg { width: 1.4cqw; height: 1.4cqw; }
.tc-dhead { display: flex; align-items: center; gap: 1.4cqw; margin-top: 1.8cqw; padding-bottom: 1.6cqw; border-bottom: 1px solid #2f2f2f; }
.tc-dicon { display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 1.2cqw; background: #12172c; color: #8fa9ff; }
.tc-dicon svg { width: 2.8cqw; height: 2.8cqw; }
.tc-dhead b { display: block; font-size: 1.8cqw; }
.tc-dhead i { display: block; color: #a8a8a0; font-size: 1.2cqw; font-style: normal; }
.tc-btn { padding: 0.9cqw 2cqw; border-radius: 0.9cqw; background: #ece9e2; color: #191919; font-size: 1.3cqw; font-weight: 700; white-space: nowrap; transition: filter 0.2s; }
.tc-btn--post { display: none; border: 1px solid #444; background: transparent; color: #e8e8e2; }
.tc-notice { margin: 1.6cqw 0 0; padding: 1.2cqw 1.6cqw; border: 1px solid #3a3a3a; border-radius: 1cqw; color: #cfcfc8; font-size: 1.3cqw; }
.tc-post { display: none; }
.is-connected .tc-btn--pre, .is-connected .tc-pre { display: none; }
.is-connected .tc-btn--post { display: inline-block; }
.is-connected .tc-post { display: block; animation: tv-pop 0.5s ease-out; }
.tc-okrow { display: flex; align-items: center; gap: 0.7cqw; margin-top: 1.6cqw; color: #7fd6a0; font-size: 1.3cqw; font-weight: 700; }
.tc-okrow svg { width: 1.6cqw; height: 1.6cqw; stroke-width: 2.6; }
.tc-permtitle { margin-top: 1.8cqw; font-size: 1.6cqw; font-weight: 700; }
.tc-permrow { display: flex; align-items: center; justify-content: space-between; margin-top: 1cqw; padding: 1cqw 1.4cqw; border: 1px solid #2f2f2f; border-radius: 1cqw; font-size: 1.25cqw; }
.tc-permrow span { display: flex; align-items: center; gap: 0.6cqw; }
.tc-permrow svg { width: 1.4cqw; height: 1.4cqw; }
.tc-permrow em { color: #a8a8a0; font-size: 1.1cqw; font-style: normal; }

/* Chat de prueba */
.tc-tool { display: flex; align-items: center; gap: 0.6cqw; margin-bottom: 0.8cqw; color: #a8a8a0; font-size: 1.2cqw; }
.tc-tool svg { width: 1.5cqw; height: 1.5cqw; }

/* Aviso de Claude antes de seguir al inicio de sesión */
.tc-confirm { display: grid; place-items: center; background: #0b0b0b; }
.tc-confirmcard { box-sizing: border-box; width: 42cqw; padding: 2.6cqw; border: 1px solid #2a2a2a; border-radius: 1.6cqw; background: #191919; color: #ececec; }
.tc-confirmcard b { font-size: 1.9cqw; font-weight: 600; }
.tc-confirmcard p { margin: 1cqw 0 0; color: #a8a8a0; font-size: 1.3cqw; line-height: 1.45; }
.tc-show { display: flex; align-items: center; gap: 0.5cqw; margin: 1.2cqw 0 1.6cqw; color: #a8a8a0; font-size: 1.2cqw; }
.tc-show svg { width: 1.4cqw; height: 1.4cqw; }
.tc-cbtn { display: block; margin-top: 1cqw; padding: 1.1cqw; border: 1px solid #3a3a3a; border-radius: 0.9cqw; text-align: center; font-size: 1.4cqw; font-weight: 600; transition: filter 0.2s; }
.tc-cbtn--ok { border-color: #ece9e2; background: #ece9e2; color: #191919; }

@media (prefers-reduced-motion: reduce) {
  .is-connected .tc-post { animation: none; }
}