/* ============================================================================
   TV v1 — mockup 02-AO-VIVO/03-tv-bold-v2.png (21 set 2026).
   Regra 2 do prompt: nenhum valor de cor, tamanho, raio, espaçamento ou sombra
   escrito à mão; só tokens --io-*. O bloco «tokens locais» é o único com
   literais, para os tamanhos que não existem em design-tokens.css — o mesmo
   desenho do desporto-v2 (sports.css) e do fazer-v2 (fazer.css).
   O ecrã não tem consultas de largura: as filas usam auto-fit sobre um token,
   como nos outros dois ecrãs v2.
   ============================================================================ */
/* tv-v1 tokens início */
.live-surface {
  --tv-il-personagem: 120px; --tv-il-faixa: 72px; --tv-il-mosaico: 88px; --tv-il-seccao: 56px;
  --tv-tracinhos: 34px; --tv-ponto: 8px;
  --tv-canal-min: 136px; --tv-col-hora: 56px; --tv-col-accao: 92px; --tv-video-min: 150px;
  --tv-resume-min: 170px; --tv-demo-progresso: 38%; --tv-exemplo-espaco: 84px;
  --tv-desactivado-fundo: var(--io-surface-sunk); --tv-desactivado-texto: var(--io-ink-800);
  --tv-peso-titulo: 800; --tv-peso-forte: 700;
  --tv-leitor: var(--io-ink-950); --tv-leitor-texto: var(--io-white);
  --tv-veu-etiqueta: color-mix(in srgb, var(--io-ink-950) 78%, transparent);
  --tv-barra-fundo: var(--io-ink-950); --tv-sino-contorno: var(--io-border-control);
  --tv-badge-directo: var(--io-live); --tv-badge-directo-texto: var(--io-live-text);
  --tv-pilula-texto: var(--io-ink-800);
  --tv-linha-suave: color-mix(in srgb, var(--io-border) 60%, transparent);
  --tv-fundo-topo: color-mix(in srgb, var(--io-turq-100) 55%, var(--io-canvas));
  --tv-fundo-faixa: color-mix(in srgb, var(--io-turq-500) 9%, var(--io-surface));
  --tv-tom-ciano: color-mix(in srgb, var(--io-turq-500) 11%, var(--io-surface));
  --tv-tom-lavanda: color-mix(in srgb, var(--io-blue-600) 10%, var(--io-surface));
  --tv-tom-manteiga: color-mix(in srgb, var(--io-gold-300) 30%, var(--io-surface));
  --tv-tom-menta: color-mix(in srgb, var(--io-green-500) 11%, var(--io-surface));
}
[data-theme="escuro"] .live-surface {
  --tv-leitor: var(--io-surface-sunk); --tv-leitor-texto: var(--io-text);
  --tv-desactivado-texto: var(--io-text-secondary);
  --tv-badge-directo: var(--io-red-600); --tv-badge-directo-texto: var(--io-white);
  --tv-pilula-texto: var(--io-text-secondary);
  --tv-fundo-topo: color-mix(in srgb, var(--io-turq-100) 70%, var(--io-canvas));
  --tv-fundo-faixa: color-mix(in srgb, var(--io-turq-500) 16%, var(--io-surface));
  --tv-tom-ciano: color-mix(in srgb, var(--io-turq-500) 18%, var(--io-surface));
  --tv-tom-lavanda: color-mix(in srgb, var(--io-blue-600) 26%, var(--io-surface));
  --tv-tom-manteiga: color-mix(in srgb, var(--io-gold-300) 18%, var(--io-surface));
  --tv-tom-menta: color-mix(in srgb, var(--io-green-500) 18%, var(--io-surface));
}
[data-density="confortavel"] .live-surface {
  --tv-canal-min: 156px; --tv-col-hora: 64px; --tv-col-accao: 108px; --tv-video-min: 170px;
}
/* tv-v1 tokens fim */

/* Cabeçalho e caixa de escrita: o compositor é o partilhado, sem reduzir o
   alvo de toque (a versão anterior forçava --io-tap a 32px e anulava a
   densidade «confortável»). */
.live-surface .product-head .wordmark { width: var(--io-wordmark-width); }
.live-surface .product-head .brand h1 { font-size: var(--io-type-sm); font-weight: var(--io-weight-control); letter-spacing: var(--io-tracking-tight); border-left: var(--io-stroke-hairline) solid var(--io-text); padding-left: var(--io-space-3); margin-left: var(--io-space-1); text-transform: uppercase; }
.live-surface .product-head .account-icon { position: relative; border: 0; background: transparent; }
.live-surface .product-head .account-icon::before { content: ''; position: absolute; width: var(--io-avatar-xs); height: var(--io-avatar-xs); border: var(--io-stroke-hairline) solid var(--io-turq-500); border-radius: var(--io-radius-round); }
.live-surface .product-head .account-icon .design-icon { width: var(--io-icon-sm); height: var(--io-icon-sm); }
.live-surface .area-scroll { padding-top: 0; }

[data-live-root] { display: grid; gap: var(--io-space-4); padding-bottom: var(--io-space-2); color: var(--io-text); }
[data-live-root] > * { min-width: 0; }
.live-surface .tv-view { display: grid; gap: var(--io-space-5); min-width: 0; }
.live-surface .tv-view:focus-visible { outline: var(--io-stroke-focus) solid var(--io-border-focus); outline-offset: var(--io-space-1); }
.live-surface .tv-art { display: block; flex: none; height: auto; object-fit: contain; }
.live-surface .tv-art-personagem { width: var(--tv-il-personagem); }
.live-surface .tv-art-faixa { width: var(--tv-il-faixa); }
.live-surface .tv-art-mosaico { width: var(--tv-il-mosaico); }
.live-surface .tv-art-seccao { width: var(--tv-il-seccao); }

/* Pílula «Em directo» / «Programação»: turquesa pálido no activo, texto
   escuro — nunca branco sobre turquesa. */
.live-surface .tv-switch { display: inline-flex; gap: var(--io-space-1); align-self: start; padding: var(--io-space-1); border-radius: var(--io-radius-round); background: var(--io-surface-sunk); }
.live-surface .tv-switch-option { min-height: var(--io-tap); padding: var(--io-space-2) var(--io-space-4); border: 0; border-radius: var(--io-radius-round); background: transparent; color: var(--tv-pilula-texto); font: inherit; font-size: var(--io-type-sm); font-weight: var(--io-weight-heading); line-height: var(--io-leading-tight); cursor: pointer; }
.live-surface .tv-switch-option[aria-selected="true"] { background: var(--io-turq-100); color: var(--io-turq-700); }

/* Topo: «A televisão, com companhia.» e a personagem à direita. */
.live-surface .tv-top { display: grid; grid-template-columns: minmax(0, 1fr) var(--tv-il-personagem); align-items: center; gap: var(--io-space-3); padding: var(--io-space-3) var(--io-space-3) 0; border-radius: var(--io-radius-lg); background: var(--tv-fundo-topo); }
.product-ready .live-surface .tv-top-title { margin: 0; font-size: var(--io-type-2xl); font-weight: var(--tv-peso-titulo); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); overflow-wrap: anywhere; }
.live-surface .tv-top-title:focus { outline: none; }
.live-surface .tv-top-strong { color: var(--io-text); }
.live-surface .tv-top-accent { color: var(--io-turq-700); }
.live-surface .tv-top-line { margin: var(--io-space-1) 0 var(--io-space-3); font-size: var(--io-type-md); line-height: var(--io-leading-body); color: var(--io-text-secondary); }
.live-surface .tv-top-figure { position: relative; justify-self: end; }
.live-surface .tv-tracinhos { position: absolute; top: 0; right: 0; width: var(--tv-tracinhos); height: var(--tv-tracinhos); color: var(--io-gold-300); }

/* Leitor: 16:9 arredondado, etiqueta sobreposta em cima à esquerda. Os
   controlos são os do YouTube; a etiqueta sai quando o vídeo arranca. */
.live-surface .tv-player { display: grid; gap: var(--io-space-2); }
.live-surface .tv-player-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--io-radius-lg); background: var(--tv-leitor); box-shadow: var(--io-shadow-card); }
.live-surface .tv-player-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.live-surface .tv-player-start { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.live-surface .tv-player-start:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--io-stroke-focus) var(--io-border-focus); }
.live-surface .tv-player-start img { display: block; width: 100%; height: 100%; object-fit: cover; }
.live-surface .tv-player-start::after { content: ''; position: absolute; inset: 0; background: var(--io-gradient-media); }
.live-surface .tv-player-start-label { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: var(--io-space-2); min-height: var(--io-tap); padding: var(--io-space-2) var(--io-space-4); border-radius: var(--io-radius-round); background: var(--io-turq-100); color: var(--io-turq-700); font-size: var(--io-type-sm); font-weight: var(--io-weight-heading); }
.live-surface .tv-player-start-label svg { width: var(--io-icon-md); height: var(--io-icon-md); }
.live-surface .tv-player-tag { position: absolute; left: var(--io-space-3); top: var(--io-space-3); right: var(--io-space-3); display: flex; align-items: center; gap: var(--io-space-2); margin: 0; pointer-events: none; }
.live-surface .tv-badge { flex: none; padding: var(--io-space-1) var(--io-space-2); border-radius: var(--io-radius-pill); background: var(--io-ink-800); color: var(--io-white); font-size: var(--io-type-xs); font-weight: var(--tv-peso-forte); letter-spacing: var(--io-tracking-label); line-height: var(--io-leading-tight); }
.live-surface .tv-badge[data-kind="live"] { background: var(--tv-badge-directo); color: var(--tv-badge-directo-texto); }
.live-surface .tv-player-source { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: var(--io-space-1) var(--io-space-2); border-radius: var(--io-radius-pill); background: var(--tv-veu-etiqueta); color: var(--io-white); font-size: var(--io-type-xs); line-height: var(--io-leading-tight); }
.live-surface .tv-player-empty { display: grid; align-content: center; justify-items: center; gap: var(--io-space-2); padding: var(--io-space-5); text-align: center; color: var(--tv-leitor-texto); }
.live-surface .tv-player-empty .tv-art { width: var(--tv-il-faixa); }
.live-surface .tv-player-empty h2, .live-surface .tv-player-empty p { margin: 0; font-size: var(--io-type-md); line-height: var(--io-leading-body); color: var(--tv-leitor-texto); }
.live-surface .tv-player-empty .live-text-button { color: var(--io-gold-300); }
.live-surface .tv-player-caption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--io-space-1) var(--io-space-3); font-size: var(--io-type-sm); color: var(--io-text-secondary); }
.live-surface .tv-player-caption a { display: inline-flex; align-items: center; min-height: var(--io-tap); padding: 0 var(--io-space-1); color: var(--io-turq-700); }

/* ---------------------------------------------------------------------------
   Modo de demonstração (§5): só aparece nas contas de DEMO_EMAILS. A imagem do
   mockup, a barra de controlos desenhada (que não comanda nada) e os sinos.
   --------------------------------------------------------------------------- */
.live-surface .tv-player-demo { display: grid; }
.live-surface .tv-player-still { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.live-surface .tv-player-demo::after { content: ''; grid-area: 1 / 1; background: var(--io-gradient-media); pointer-events: none; }
.live-surface .tv-player-demo > :not(.tv-player-still) { grid-area: 1 / 1; }
.live-surface .tv-player-exemplo { position: absolute; top: var(--io-space-3); right: var(--io-space-3); margin: 0; }
.live-surface .tv-player-demo .tv-player-tag { padding-right: var(--tv-exemplo-espaco); }
.live-surface .tv-player-bar { position: relative; display: flex; align-items: center; gap: var(--io-space-2); align-self: end; margin: var(--io-space-3); padding: var(--io-space-1) var(--io-space-2); border-radius: var(--io-radius-round); background: var(--tv-barra-fundo); }
.live-surface .tv-player-bar button { display: inline-grid; place-items: center; flex: none; min-height: var(--io-tap); min-width: var(--io-tap); border: 0; background: transparent; color: var(--io-white); cursor: pointer; }
.live-surface .tv-player-bar svg { width: var(--io-icon-md); height: var(--io-icon-md); }
.live-surface .tv-player-track { flex: 1; height: var(--io-progress-height); min-width: 0; border-radius: var(--io-radius-round); background: var(--io-player-track); overflow: hidden; }
.live-surface .tv-player-progress { display: block; width: var(--tv-demo-progresso); height: 100%; border-radius: var(--io-radius-round); background: var(--io-turq-500); }
.live-surface .tv-channel-demo { align-content: start; padding: 0; overflow: hidden; }
.live-surface .tv-channel-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.live-surface .tv-channel-demo > :not(.tv-channel-thumb) { margin-inline: var(--io-space-3); }
.live-surface .tv-channel-demo > .tv-exemplo { margin-bottom: var(--io-space-3); justify-self: start; }
.live-surface .tv-channel-demo .tv-channel-name { margin-top: var(--io-space-2); }
.live-surface .tv-bell { display: inline-grid; place-items: center; justify-self: end; min-height: var(--io-tap); min-width: var(--io-tap); border: var(--io-stroke-hairline) solid var(--tv-sino-contorno); border-radius: var(--io-radius-round); background: var(--io-surface); color: var(--io-text); cursor: pointer; }
.live-surface .tv-bell svg { width: var(--io-icon-md); height: var(--io-icon-md); }
/* Ligado distingue-se por forma (anel grosso) e não só por cor. */
.live-surface .tv-bell[aria-pressed="true"] { border-color: var(--io-turq-500); background: var(--io-turq-100); color: var(--io-turq-700); box-shadow: inset 0 0 0 var(--io-stroke-focus) var(--io-turq-500); }
.live-surface .tv-tile .tv-exemplo { justify-self: start; }

/* Etiqueta «exemplo»: marca o que é inventado, ao lado do que marca. */
.live-surface .tv-exemplo { display: inline-block; vertical-align: middle; padding: 0 var(--io-space-2); border-radius: var(--io-radius-pill); background: var(--io-turq-100); color: var(--io-turq-700); font-size: var(--io-type-xs); font-weight: var(--io-weight-control); line-height: var(--io-leading-roomy); }

/* «Chegaste agora?»: faixa larga com os auscultadores e o botão de ouvir,
   secundária ao leitor. Texto escuro sobre dourado, nunca branco. */
.live-surface .tv-resume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--io-space-3); padding: var(--io-space-3); border-radius: var(--io-radius-lg); background: var(--tv-fundo-faixa); }
.live-surface .tv-resume-copy { display: grid; flex: 1 1 var(--tv-resume-min); gap: var(--io-space-1); min-width: 0; }
.live-surface .tv-resume-listen { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--io-space-2); min-height: var(--io-tap); padding: var(--io-space-2) var(--io-space-4); border: 0; border-radius: var(--io-radius-md); background: var(--io-gold-control-light); color: var(--io-text-on-gold); font: inherit; font-size: var(--io-type-sm); font-weight: var(--io-weight-heading); line-height: var(--io-leading-tight); cursor: pointer; }
.live-surface .tv-resume-listen:hover { filter: brightness(.97); }
.live-surface .tv-resume-listen svg { width: var(--io-icon-sm); height: var(--io-icon-sm); flex: none; }
.live-surface .tv-resume-copy strong { font-size: var(--io-type-lg); font-weight: var(--tv-peso-forte); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); }
.live-surface .tv-resume-copy > span { font-size: var(--io-type-sm); line-height: var(--io-leading-body); color: var(--io-text-secondary); }

/* Grelha 2×2: fundo pastel próprio, objecto 3D grande, seta pequena. */
.live-surface .tv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--io-space-3); }
.live-surface .tv-tile { position: relative; display: grid; justify-items: start; gap: var(--io-space-2); min-height: var(--io-tap); padding: var(--io-space-4); border: 0; border-radius: var(--io-radius-lg); background: var(--tv-tom-ciano); color: var(--io-text); font: inherit; text-align: left; cursor: pointer; }
.live-surface .tv-tile[data-tone="lavanda"] { background: var(--tv-tom-lavanda); }
.live-surface .tv-tile[data-tone="manteiga"] { background: var(--tv-tom-manteiga); }
.live-surface .tv-tile[data-tone="menta"] { background: var(--tv-tom-menta); }
.live-surface .tv-tile-label { font-size: var(--io-type-sm); font-weight: var(--io-weight-heading); line-height: var(--io-leading-tight); overflow-wrap: anywhere; }
.live-surface .tv-tile-note { font-size: var(--io-type-xs); line-height: var(--io-leading-body); color: var(--io-text-secondary); }
.live-surface .tv-tile-arrow { position: absolute; right: var(--io-space-3); bottom: var(--io-space-3); color: var(--io-turq-700); }
.live-surface .tv-tile-arrow svg { display: block; width: var(--io-icon-sm); height: var(--io-icon-sm); }
.live-surface .tv-tile[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--io-stroke-focus) var(--io-turq-500); }

/* Títulos de secção com o objecto 3D e a acção à direita. */
.live-surface .tv-section { display: grid; gap: var(--io-space-3); }
.live-surface .tv-section-head { display: flex; align-items: center; gap: var(--io-space-2); min-height: var(--io-tap); }
.product-ready .live-surface .tv-section-head h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--io-type-xl); font-weight: var(--tv-peso-forte); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); }
.live-surface .tv-section-note { margin: 0; font-size: var(--io-type-sm); font-weight: var(--io-weight-control); color: var(--io-turq-700); white-space: nowrap; }

/* «Agora em directo»: fila de cartões de canal, sem fotografia em produção. */
.live-surface .tv-channel-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--tv-canal-min), 1fr); gap: var(--io-space-2); overflow-x: auto; padding-bottom: var(--io-space-1); scroll-snap-type: x proximity; }
.live-surface .tv-channel { display: grid; align-content: start; gap: var(--io-space-1); min-height: var(--io-tap); padding: var(--io-space-3); border: var(--io-stroke-hairline) solid var(--io-border); border-radius: var(--io-radius-lg); background: var(--io-surface); color: var(--io-text); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.live-surface .tv-channel[aria-pressed="true"] { border-color: var(--io-turq-500); box-shadow: inset 0 0 0 var(--io-stroke-hairline) var(--io-turq-500); }
.live-surface .tv-channel-name { font-size: var(--io-type-lg); font-weight: var(--tv-peso-forte); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); overflow-wrap: anywhere; }
.live-surface .tv-channel-now { display: flex; align-items: center; gap: var(--io-space-1); font-size: var(--io-type-sm); line-height: var(--io-leading-body); overflow-wrap: anywhere; }
.live-surface .tv-live-dot { flex: none; width: var(--tv-ponto); height: var(--tv-ponto); border-radius: var(--io-radius-round); background: var(--io-live); }
.live-surface .tv-channel-note { font-size: var(--io-type-sm); color: var(--io-text-secondary); }
.live-surface .tv-channel-now { flex-wrap: wrap; }

/* «A seguir»: linhas planas com separadores finos, sem cartões. */
.live-surface .tv-next { list-style: none; margin: 0; padding: 0; }
.live-surface .tv-next li { display: grid; grid-template-columns: var(--tv-col-hora) minmax(0, 1fr) var(--tv-col-accao); align-items: center; gap: var(--io-space-2); min-height: var(--io-tap); padding: var(--io-space-2) 0; border-top: var(--io-stroke-hairline) solid var(--tv-linha-suave); }
.live-surface .tv-next li:first-child { border-top: 0; }
.live-surface .tv-next time { font-size: var(--io-type-lg); font-weight: var(--tv-peso-forte); letter-spacing: var(--io-tracking-tight); }
.live-surface .tv-next li > div { display: grid; gap: var(--io-space-0); min-width: 0; }
.live-surface .tv-next strong { font-size: var(--io-type-sm); font-weight: var(--io-weight-control); line-height: var(--io-leading-body); overflow-wrap: anywhere; }
.live-surface .tv-next li > div > span { font-size: var(--io-type-xs); color: var(--io-text-secondary); }
.live-surface .tv-next .live-text-button { justify-content: flex-end; }

/* Vista «Programação»: a grelha oficial e os vídeos da TVI, como hoje. */
.live-surface .live-schedule, .live-surface .live-channels { display: grid; gap: var(--io-space-2); }
.product-ready .live-surface .live-schedule h2, .product-ready .live-surface .live-channels h2 { margin: 0; font-size: var(--io-type-xl); font-weight: var(--tv-peso-forte); line-height: var(--io-leading-tight); letter-spacing: var(--io-tracking-tight); }
.live-surface .live-modes { display: flex; flex-wrap: wrap; gap: var(--io-space-2); }
.live-surface .live-mode { display: inline-flex; align-items: center; justify-content: center; gap: var(--io-space-1); min-height: var(--io-tap); padding: var(--io-space-2) var(--io-space-3); border: var(--io-stroke-hairline) solid var(--io-turq-500); border-radius: var(--io-radius-round); background: var(--io-surface); color: var(--io-turq-700); font: inherit; font-size: var(--io-type-sm); font-weight: var(--io-weight-control); line-height: var(--io-leading-tight); cursor: pointer; }
.live-surface .live-mode.selected { background: var(--io-action-brand); color: var(--io-action-brand-text); }
.live-surface .live-schedule ol { list-style: none; margin: 0; padding: 0; border: var(--io-stroke-hairline) solid var(--io-border); border-radius: var(--io-radius-lg); overflow: hidden; }
.live-surface .live-schedule li { display: grid; grid-template-columns: var(--tv-col-hora) minmax(0, 1fr) var(--tv-col-accao); align-items: center; gap: var(--io-space-2); min-height: var(--io-tap); padding: var(--io-space-2) var(--io-space-3); border-top: var(--io-stroke-hairline) solid var(--io-border); }
.live-surface .live-schedule li:first-child { border-top: 0; }
.live-surface .live-schedule time { font-size: var(--io-type-md); font-weight: var(--tv-peso-forte); }
.live-surface .live-schedule li > div { display: grid; gap: var(--io-space-0); min-width: 0; }
.live-surface .live-schedule strong { font-size: var(--io-type-sm); font-weight: var(--io-weight-control); line-height: var(--io-leading-body); overflow-wrap: anywhere; }
.live-surface .live-schedule li > div > span { font-size: var(--io-type-xs); line-height: var(--io-leading-body); color: var(--io-text-secondary); }
.live-surface .live-channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tv-video-min), 1fr)); gap: var(--io-space-3); }
.live-surface .live-channel { display: grid; align-content: start; overflow: hidden; border: var(--io-stroke-hairline) solid var(--io-border); border-radius: var(--io-radius-md); background: var(--io-surface); color: var(--io-text); font: inherit; padding: 0; text-align: left; cursor: pointer; min-width: 0; }
.live-surface .live-channel[aria-pressed="true"] { border-color: var(--io-turq-500); box-shadow: inset 0 0 0 var(--io-stroke-hairline) var(--io-turq-500); }
.live-surface .live-channel > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.live-surface .live-channel-copy { display: grid; gap: var(--io-space-1); padding: var(--io-space-2) var(--io-space-3) var(--io-space-3); }
.live-surface .live-channel-copy > span { font-size: var(--io-type-xs); color: var(--io-text-secondary); }
.live-surface .live-channel-copy strong { font-size: var(--io-type-sm); font-weight: var(--io-weight-control); line-height: var(--io-leading-body); overflow-wrap: anywhere; }

/* Controlos de texto e avisos partilhados pelas duas vistas. */
.live-surface .live-text-button { display: inline-flex; align-items: center; gap: var(--io-space-1); min-height: var(--io-tap); padding: 0 var(--io-space-1); border: 0; background: transparent; color: var(--io-turq-700); font: inherit; font-size: var(--io-type-sm); font-weight: var(--io-weight-heading); text-decoration: none; white-space: nowrap; cursor: pointer; }
.live-surface .live-text-button:hover { text-decoration: underline; }
.live-surface .live-text-button svg { width: var(--io-icon-sm); height: var(--io-icon-sm); flex: none; }
.live-surface .live-feedback { margin: 0; font-size: var(--io-type-xs); line-height: var(--io-leading-body); color: var(--io-text-secondary); }
.live-surface .live-feedback:empty { margin: 0; line-height: 0; }
.live-surface .live-empty-copy { margin: 0; padding: var(--io-space-3); border: var(--io-stroke-hairline) solid var(--io-border); border-radius: var(--io-radius-md); font-size: var(--io-type-sm); line-height: var(--io-leading-body); color: var(--io-text-secondary); }
.live-surface button:disabled { cursor: default; opacity: 1; filter: none; background: var(--tv-desactivado-fundo); color: var(--tv-desactivado-texto); box-shadow: none; }
.live-surface button:disabled svg { color: var(--tv-desactivado-texto); }
.live-surface :focus-visible { outline: var(--io-stroke-focus) solid var(--io-border-focus); outline-offset: var(--io-space-0); }

@media (forced-colors: active) {
  .live-surface .tv-player-frame, .live-surface .tv-tile, .live-surface .tv-channel, .live-surface .live-channel { border: var(--io-stroke-hairline) solid CanvasText; }
  .live-surface .tv-badge, .live-surface .tv-player-source, .live-surface .live-mode.selected, .live-surface .tv-switch-option[aria-selected="true"] { color: CanvasText; background: Canvas; }
  /* O estado escolhido deixa de se distinguir pela cor: passa a sublinhado e
     contorno, que o modo de alto contraste conserva. */
  .live-surface .tv-switch-option[aria-selected="true"], .live-surface .live-mode.selected { text-decoration: underline; outline: var(--io-stroke-hairline) solid CanvasText; }
  .live-surface .tv-channel[aria-pressed="true"], .live-surface .tv-tile[aria-pressed="true"], .live-surface .live-channel[aria-pressed="true"], .live-surface .tv-bell[aria-pressed="true"] { outline: var(--io-stroke-focus) solid Highlight; }
  .live-surface .tv-exemplo { border: var(--io-stroke-hairline) solid CanvasText; }
  .live-surface .tv-player-progress { background: Highlight; }
  .live-surface .tv-player-track { border: var(--io-stroke-hairline) solid CanvasText; }
}