/* ==========================================================================
   PD-456 — ListenMedia no PortalAtmosfera

   Arquivo dedicado, carregado DEPOIS de main.css no index.html — pelo mesmo motivo
   que o `musical-schedule.css` da PD-66: as regras daqui precisam poder vencer as do
   main.css sem `!important` espalhado.

   Duas metades, e a fronteira entre elas importa:

   1. `.navbar-main--lm ...`  — o tema escuro da barra superior. Toda regra desta
      metade esta presa a essa classe, que so aparece quando
      `$root.produtoAtivo === 'listenmedia'`. Sem a classe, nada daqui alcanca uma
      unica tela do ListenPlay. E o que torna a barra preta reversivel de graca.

   2. `.lm-*`               — as telas do ListenMedia. Prefixo exclusivo; nenhuma
      classe daqui existe em outro template do portal.

   O `.lm-switch` do alternador vive na metade 1 e na 2 ao mesmo tempo: ele e o unico
   elemento do ListenMedia que aparece dentro do ListenPlay.
   ========================================================================== */

:root {
    /* Sentinela: confirma no navegador QUAL versao deste arquivo esta carregada.
       No console:  getComputedStyle(document.documentElement)
                      .getPropertyValue('--lm-css-build')
       Vazio = a pagina esta com CSS antigo em cache. */
    --lm-css-build: "2026-10-29-05";

    --lm-pink: var(--pink-listenx, #fc3a7d);
    --lm-pink-strong: #e01e64;
    --lm-pink-light: #ff6ba1;
    --lm-pink-soft: rgba(252, 58, 125, 0.10);
    --lm-pink-softer: rgba(252, 58, 125, 0.06);
    --lm-pink-line: rgba(252, 58, 125, 0.22);
    --lm-gradient: linear-gradient(96deg, #fc3a7d 28.62%, #ff424d 116.71%);

    /* O tom do preto era uma das duas pendencias visuais em aberto na spec (secao
       Lacunas, item 1), decidida "na hora de construir". Preto puro (#000, o
       `--bs-black` que o main.css ja declara) endurece a barra e faz o texto branco
       vibrar; este e um preto levemente frio, que le como preto e assenta melhor sob
       o rosa da marca. Trocar de tom e trocar esta linha. */
    --lm-bar-bg: #101014;
    --lm-bar-line: rgba(255, 255, 255, 0.10);
    --lm-bar-txt: rgba(255, 255, 255, 0.72);
    --lm-bar-txt-strong: #ffffff;

    --lm-txt: #3d3d3d;
    --lm-txt-title: #262626;
    --lm-txt-muted: #808080;
    --lm-txt-soft: #a3a3a3;

    --lm-surface: #ffffff;
    --lm-surface-soft: #f7f7f7;
    --lm-surface-mute: #f2f2f4;
    --lm-border: #e6e6e8;
    --lm-border-strong: #cfcfd4;

    --lm-ok: #16a34a;
    --lm-off: #ef4444;
    --lm-warn: #d97706;
    --lm-warn-soft: #fef3c7;

    --lm-radius: 0.75rem;
    --lm-radius-lg: 1.25rem;
    --lm-radius-pill: 999px;
    --lm-shadow: 0 2px 14px rgba(16, 16, 20, 0.05);
    --lm-shadow-up: 0 8px 28px rgba(16, 16, 20, 0.10);
}

/* ==========================================================================
   1. A barra superior dentro do ListenMedia
   ========================================================================== */

.navbar-main--lm {
    background-color: var(--lm-bar-bg);
    box-shadow: 0 4px 22.6px rgba(0, 0, 0, 0.28);
}

/* Itens do menu: o main.css pinta `.main-top-menu li a` de #666666, que no preto
   some. Mesma familia, mesmo peso, mesma altura — so a cor muda. */
.navbar-main--lm .main-top-menu li a {
    color: var(--lm-bar-txt);
}

.navbar-main--lm .main-top-menu li a:hover {
    color: var(--lm-bar-txt-strong);
}

/* Item ativo. O rosa da marca (#fc3a7d) passa o contraste minimo sobre este preto,
   mas a 13px em negrito ele vibra; o tom claro le melhor e continua sendo a marca.
   Era a outra metade da pendencia registrada na secao Lacunas da spec. */
.navbar-main--lm .color-pink-main,
.navbar-main--lm .main-top-menu li a.color-pink-main {
    color: var(--lm-pink-light);
}

.navbar-main--lm .collapse li .active {
    color: var(--lm-pink-light) !important;
}

/* Chip do nome do usuario: #EFEFEF com texto cinza vira um bloco branco no preto. */
.navbar-main--lm .btn-user-info,
.navbar-main--lm .btn-user-info:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--lm-bar-txt-strong);
}

.navbar-main--lm .navbar-nav-financial a {
    color: var(--lm-bar-txt-strong);
    opacity: 0.72;
}

.navbar-main--lm .navbar-nav-financial a:hover {
    opacity: 1;
}

/* Botao Premium: fundo branco solido virava a coisa mais clara da barra. Invertido,
   ele vira contorno, e a estrela em degrade continua fazendo o trabalho. */
.navbar-main--lm .user-upgrade-button {
    background: transparent;
    color: var(--lm-bar-txt-strong);
}

/* O sino da notificacao vem com `fill="black"` como atributo de apresentacao no
   proprio SVG — qualquer regra de CSS ganha dele. */
.navbar-main--lm .btn-notification svg path {
    fill: var(--lm-bar-txt-strong);
}

.navbar-main--lm .navbar-toggler {
    border-color: var(--lm-bar-line);
}

.navbar-main--lm .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

/* ==========================================================================
   2. O alternador de produto

   Ele e o ULTIMO <li> da lista de itens do menu — ao lado de "Chat online" no
   ListenPlay, ao lado de "Configuracoes" no ListenMedia. Nao e um botao solto na
   barra: sendo um `.nav-item`, herda do `main.css` a altura de 4.5rem, o
   alinhamento vertical e o espacamento de `.main-top-menu li a`.

   O que ele acrescenta e so a pilula em volta e o logotipo. O tamanho e calibrado
   para ficar na escala dos vizinhos: o wordmark a 0.875rem contra os 0.8125rem dos
   itens, e o icone a 18px. PD-736 diminuiu os dois (eram 1rem e 22px, com a pilula de
   2.375rem): o card achou o logotipo grande demais para a barra, e o SVG tem o tamanho
   no proprio HTML dos dois alternadores, nao aqui.
   ========================================================================== */

.lm-brand-group {
    gap: 1.25rem;
}

/* O `main.css` da `margin: 0 1.53rem` a todo `.main-top-menu li a`. No alternador
   isso e demais de um lado so: ele ja tem a pilula, que e a separacao visual.

   PD-674 (09/09) — mas ZERO A DIREITA era demais de menos, e foi o defeito.
   O alternador e o ULTIMO <li> da <ul>, e logo depois dele, ja no `div.notify`
   irmao, vem o botao Premium. Todo item do menu tem 1.53rem de cada lado; este
   override zerava os dois e devolvia so o da esquerda, entao a pilula do
   ListenMedia encostava na do Premium — que e' exatamente o print do card.
   (So aparece para quem esta abaixo do plano Avancado: e' quem tem o Premium.)

   O `nav` e' `justify-content-between`, mas com a <ul> larga nao sobra folga
   para distribuir, entao a margem aqui vira vao de verdade, um por um. Mesmo se
   sobrasse folga, o vao AUMENTA — nunca diminui.

   Simetrico ao da esquerda de proposito: o alternador fica igualmente espacado
   dos dois vizinhos, que e' o "alinhar melhor esses icones" do card. Dentro do
   ListenMedia o Premium nao existe mais (PD-649) e a margem passa a separar o
   alternador do sino — o que tambem estava colado. */
.main-top-menu li a.lm-switch {
    height: 2.125rem;
    margin: 0 1rem 0 1rem !important;
    padding: 0 0.7rem;
    border: 1px solid var(--lm-pink-line);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-pink-softer);
    color: var(--lm-pink);
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.main-top-menu li a.lm-switch:hover {
    background: var(--lm-pink-soft);
    border-color: rgba(252, 58, 125, 0.38);
    color: var(--lm-pink);
}

.lm-switch:focus-visible {
    outline: 2px solid var(--lm-pink);
    outline-offset: 2px;
}

/* O alternador nao e uma rota: nao pode ganhar o risco rosa de item ativo que o
   `set-menu-active` desenha nos outros. */
.lm-switch-item.active .lm-switch .line-top-detail::before {
    display: none;
}

/* O logotipo: icone + wordmark, como nas imagens anexadas a spec (Notas 5 e 6). */
.lm-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.lm-logo__mark {
    display: inline-flex;
    /* `currentColor` no <circle>: o icone segue a cor do link, e nao o contrario.
       E o que deixa o mesmo SVG servir no branco e no preto. */
    color: var(--lm-pink);
}

.lm-logo__word {
    display: inline-flex;
    align-items: baseline;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.875rem;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--lm-pink);
}

/* O lockup e uma palavra so, em dois pesos — "listen" firme, o produto leve.
   <b> e <i> aqui sao forma, nao enfase; o <i> perde o italico. */
.lm-logo__word b {
    font-weight: 700;
}

.lm-logo__word i {
    font-weight: 400;
    font-style: normal;
}

/* Dentro do ListenMedia o botao leva o logotipo ListenPlay sobre a barra preta. O
   icone segue rosa — e a marca —, e o wordmark vira branco: e o que resolve o
   contraste que a spec deixou em aberto, sem inventar uma segunda arte. */
.navbar-main--lm .main-top-menu li a.lm-switch {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
}

.navbar-main--lm .main-top-menu li a.lm-switch:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.30);
}

.navbar-main--lm .lm-logo__word {
    color: var(--lm-bar-txt-strong);
}

.navbar-main--lm .lm-logo__mark {
    color: var(--lm-pink);
}

@media (max-width: 991.98px) {
    /* Espaco apertado: o icone sozinho ja identifica o destino, e o `aria-label`
       continua dizendo qual e. */
    .lm-logo__word {
        display: none;
    }

    .main-top-menu li a.lm-switch {
        padding: 0 0.5rem;
    }
}

/* ==========================================================================
   3. Telas do ListenMedia — esqueleto de pagina
   ========================================================================== */

/* O `index.html` ja envolve o <ui-view> em `.container-xxl > .startSection`, e o
   `.startSection` do main.css ja da `margin: 3.39rem 0`. Por isso `.lm-page` nao
   repete recuo no topo nem laterais — so fecha o rodape. */
.lm-page {
    padding-bottom: 2rem;
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
}

.lm-page__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lm-page__title {
    margin: 0;
    color: var(--lm-txt-title);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.lm-page__sub {
    margin: 0.35rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.875rem;
}

.lm-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.lm-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.lm-back:hover {
    color: var(--lm-txt-title);
}

.lm-section {
    margin-top: 2rem;
}

.lm-section__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lm-divider {
    height: 1px;
    margin: 2rem 0;
    background: var(--lm-border);
}

/* ==========================================================================
   4. Botoes
   ========================================================================== */

.lm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 2.5rem;
    padding: 0 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface);
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.lm-btn:focus-visible {
    outline: 2px solid var(--lm-pink);
    outline-offset: 2px;
}

.lm-btn--primary {
    background: var(--lm-gradient);
    color: #fff;
    box-shadow: 0 4px 14px rgba(252, 58, 125, 0.28);
}

.lm-btn--primary:hover {
    filter: brightness(1.06);
}

.lm-btn--ghost {
    background: transparent;
    color: var(--lm-txt-muted);
}

.lm-btn--ghost:hover {
    background: var(--lm-surface-mute);
    color: var(--lm-txt-title);
}

.lm-btn--outline {
    background: var(--lm-surface);
    border-color: var(--lm-border-strong);
    color: var(--lm-txt);
}

.lm-btn--outline:hover {
    border-color: var(--lm-txt-muted);
}

/* PD-576 TASK-005 — "contorno, fonte rosa, fundo branco" (o "Ver todas" do editor).

   Irma da `--outline`, trocando a borda cinza e o texto escuro pelo rosa da marca.
   Nao e a `--primary`: aquela e rosa CHEIO com sombra, e o card pediu justamente o
   contrario — o botao continua sendo a acao secundaria ao lado do "+Adicionar tela".

   A borda usa `--lm-pink-line` (o rosa a 22%) e nao o rosa cheio: em contorno de
   1px o tom pleno pesa mais que o texto e o botao passa a competir com o primario. */
.lm-btn--pink {
    background: var(--lm-surface);
    border-color: var(--lm-pink-line);
    color: var(--lm-pink);
}

.lm-btn--pink:hover {
    background: var(--lm-pink-softer);
    border-color: var(--lm-pink);
}

/* PD-405 — botao escuro de "Escolher arquivo", como no prototipo Lovable.
   Escuro de proposito: ele nao e a acao principal do modal (essa e "Adicionar",
   no rodape, em rosa), mas e o primeiro passo obrigatorio. */
.lm-btn--dark {
    background: var(--lm-bar-bg);
    color: #fff;
}

.lm-btn--dark:hover {
    filter: brightness(1.35);
}

/* PD-576 TASK-002 — os CTAs cinza do modal de conteudo ("Escolher arquivo" e
   "Cancelar").

   ⚠️ VARIANTE PROPRIA, DE PROPOSITO. O card pediu cinza para esses dois; pintar
   `.lm-btn--dark` mudaria tambem o "Preview" do editor de playlist
   (`playlistEditor.html`), que e o terceiro usuario da classe e nao entrou no
   pedido.

   O tom veio dos tokens que este arquivo ja declara — o card trouxe a cor como
   "(-------)", sem valor. Trocar de tom e trocar estas tres linhas. */
.lm-btn--mute {
    background: var(--lm-surface-mute);
    border-color: var(--lm-border-strong);
    color: var(--lm-txt);
}

.lm-btn--mute:hover {
    background: var(--lm-border);
    border-color: var(--lm-txt-soft);
}

.lm-btn--danger {
    background: var(--lm-off);
    color: #fff;
}

.lm-btn--danger:hover {
    filter: brightness(1.06);
}

.lm-btn[disabled],
.lm-btn.is-disabled {
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

/* Botao so de icone, o das acoes de linha da tabela */
.lm-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--lm-radius-pill);
    background: transparent;
    color: var(--lm-txt-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lm-iconbtn:hover {
    background: var(--lm-surface-mute);
    color: var(--lm-txt-title);
}

.lm-iconbtn--danger:hover {
    background: rgba(239, 68, 68, 0.10);
    color: var(--lm-off);
}

/* O icone da Liss (as tres estrelinhas), que e' o icone do Listen Estudio desde
   17/09. Os tracados sao os do `views/announcement/announcementsIA.html`.

   E' MASCARA com `currentColor`, e nao `<svg>` embutido, por dois motivos: a cor
   segue o texto como a de um icone da Font Awesome (rosa no botao, branco no
   selo, cinza no menu); e o nome funciona onde o icone chega por `ng-class`
   (`icone: 'lm-ico-liss'` no mapa de tipos), ao lado do `fas` que o template ja
   poe. O `::before` da Font Awesome fica vazio, porque o nome nao e' dela. */
.lm-ico-liss {
    display: inline-block;
    width: 1.05em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 42'%3E%3Cpath d='M6 0L7.62054 4.37945L12 6L7.62054 7.62054L6 12L4.37945 7.62054L0 6L4.37945 4.37945L6 0Z'/%3E%3Cpath d='M37 30L38.3505 33.6495L42 35L38.3505 36.3505L37 40L35.6495 36.3505L32 35L35.6495 33.6495L37 30Z'/%3E%3Cpath d='M23 0L28.6719 15.3281L44 21L28.6719 26.6719L23 42L17.3281 26.6719L2 21L17.3281 15.3281L23 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 42'%3E%3Cpath d='M6 0L7.62054 4.37945L12 6L7.62054 7.62054L6 12L4.37945 7.62054L0 6L4.37945 4.37945L6 0Z'/%3E%3Cpath d='M37 30L38.3505 33.6495L42 35L38.3505 36.3505L37 40L35.6495 36.3505L32 35L35.6495 33.6495L37 30Z'/%3E%3Cpath d='M23 0L28.6719 15.3281L44 21L28.6719 26.6719L23 42L17.3281 26.6719L2 21L17.3281 15.3281L23 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lm-ico-liss::before {
    content: none;
}

.lm-iconbtn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   5. Campos
   ========================================================================== */

.lm-field {
    display: block;
    margin-bottom: 1rem;
}

.lm-field__label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* 15/09 — o icone de ajuda ao lado do rotulo. O texto que ficava embaixo do
   campo abre no hover (ou no foco, pelo teclado) — diretiva `lm-tooltip`.
   Nomes `lm-field__tip` e `lm-tooltip` conferidos livres no namespace plano. */
.lm-field__tip {
    display: inline-flex;
    align-items: center;
    margin-left: 0.3rem;
    border-radius: 50%;
    color: var(--lm-txt-soft);
    font-size: 0.8rem;
    vertical-align: middle;
    cursor: help;
}

.lm-field__tip:hover,
.lm-field__tip:focus-visible {
    outline: none;
    color: var(--lm-pink);
}

/* ⚠️ O z-index NAO e' enfeite: o `.modal` do portal esta em 99999 (`main.css`), e o
   1080 padrao do Bootstrap desenharia o balao ATRAS do modal — o hover pareceria
   nao fazer nada. A variavel e' a que o proprio `.tooltip` do Bootstrap le. */
.tooltip.lm-tooltip {
    --bs-tooltip-zindex: 100000;
    --bs-tooltip-max-width: 260px;
    --bs-tooltip-font-size: 0.75rem;
    text-align: left;
}

.lm-field__hint {
    margin: 0.35rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

.lm-field__error {
    margin: 0.35rem 0 0;
    color: var(--lm-off);
    font-size: 0.75rem;
    font-weight: 600;
}

.lm-input,
.lm-select,
.lm-textarea {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.85rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    color: var(--lm-txt) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8125rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lm-textarea {
    height: auto;
    min-height: 5rem;
    padding: 0.6rem 0.85rem;
    resize: vertical;
}

.lm-input:focus,
.lm-select:focus,
.lm-textarea:focus {
    border-color: var(--lm-pink);
    box-shadow: 0 0 0 3px var(--lm-pink-soft);
    outline: none;
}

/*
 * CAMPO OBRIGATORIO NAO PREENCHIDO (31/08).
 *
 * A classe entra quando o `erros.<campo>` daquele campo esta setado — ou seja,
 * depois da TENTATIVA de salvar, que e' quando `validar()` roda. Nao ha validacao
 * ao vivo de proposito: pintar de vermelho um campo que a pessoa ainda nem
 * terminou de digitar acusa erro que ainda nao existe.
 *
 * A borda ACOMPANHA a mensagem `.lm-field__error`, nao a substitui: cor sozinha
 * nao e' informacao acessivel (daltonismo, leitor de tela), e "algo esta vermelho"
 * nao diz o que fazer. O par cor+texto e' o que resolve os dois.
 *
 * O `box-shadow` repete a forma do `:focus` — mesma espessura, so trocando a cor —
 * para o campo em erro ficar com o mesmo peso visual do campo ativo.
 */
.lm-input.is-invalido,
.lm-select.is-invalido,
.lm-textarea.is-invalido {
    border-color: var(--lm-off);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* No foco a borda de erro CONTINUA vermelha. Voltar ao rosa ao clicar esconderia
   o problema exatamente no campo que a pessoa foi consertar. */
.lm-input.is-invalido:focus,
.lm-select.is-invalido:focus,
.lm-textarea.is-invalido:focus {
    border-color: var(--lm-off);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
}

/* O seletor de arquivo nao e' um <input> visivel: a caixa e' a `.lm-filepick`,
   cuja borda tracejada e' transparente ate arrastarem algo. Em erro ela aparece. */
.lm-filepick.is-invalido {
    border-color: var(--lm-off);
    background: rgba(239, 68, 68, 0.04);
}

.lm-input[readonly],
.lm-input[disabled],
.lm-select[disabled] {
    background: var(--lm-surface-mute);
    color: var(--lm-txt-soft) !important;
    cursor: not-allowed;
}

.lm-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23808080' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
}

/* Busca — a lupa dentro do campo, como na referencia */
.lm-search {
    position: relative;
    display: block;
    flex: 1 1 240px;
    min-width: 200px;
    /* E um <label>, e o Bootstrap poe margem embaixo de todo label. */
    margin-bottom: 0;
}

/* O icone e um `<i class="fas fa-search">`. O kit do FontAwesome as vezes troca o <i>
   por um <svg> em runtime e as vezes nao (depende de qual das duas versoes carregadas
   ganha), entao os dois seletores existem — se so um estivesse aqui, a lupa cairia
   fora do campo justamente na versao errada. */
.lm-search > i,
.lm-search > svg {
    position: absolute;
    top: 50%;
    left: 0.95rem;
    z-index: 2;
    color: var(--lm-txt-soft);
    font-size: 0.8125rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.lm-search .lm-input {
    height: 2.625rem;
    padding-left: 2.5rem;
    border-radius: var(--lm-radius-pill);
}

.lm-checkline {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
}

.lm-checkline input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--lm-pink);
    cursor: pointer;
}

.lm-checkline span {
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Bloco cinza que agrupa campos correlatos (agendamento, codigo da tela...) */
.lm-fieldset {
    /* PD-576 TASK-002 — "alinhar dentro da caixa box".
       O navegador da a TODO `<fieldset>` `margin-inline: 2px` e
       `min-inline-size: min-content` na folha de estilo dele. A regra abaixo
       sobrescrevia padding e borda, mas nao esses dois: a caixa da vigencia
       nascia 4px mais estreita e 2px deslocada em relacao aos `.lm-field` de
       cima, e era isso que se via como desalinhamento.
       Nos `<div class="lm-fieldset">` do modal de tela isto nao muda nada —
       div nao tem margem de agente de usuario. */
    margin: 0;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
}

.lm-fieldset--tight {
    padding: 0.6rem 0.85rem;
}

.lm-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

@media (max-width: 575.98px) {
    .lm-grid2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Escolher arquivo — o <input type=file> some, o botao fica */
.lm-file {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.lm-file input[type="file"] {
    display: none;
}

.lm-file__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   6. Filtros e alternador de visualizacao
   ========================================================================== */

.lm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* PD-1362 TASK-023 — credito de telas, abaixo da busca do menu Telas */
.lm-screen-credit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin: -0.75rem 0 1.5rem;
    font-size: 0.875rem;
}

/* TASK-023 — o modal da LP por cima da tela (o fundo do iframe e' transparente) */
.lm-contratar-telas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 2000;
    background: transparent;
}

.lm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lm-chip {
    height: 2.25rem;
    padding: 0 0.95rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface);
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.lm-chip:hover {
    border-color: var(--lm-pink-line);
}

.lm-chip.is-on {
    border-color: transparent;
    background: var(--lm-gradient);
    color: #fff;
    box-shadow: 0 3px 12px rgba(252, 58, 125, 0.25);
}

.lm-viewswitch {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: auto;
    padding: 0.2rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface);
}

.lm-viewswitch button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--lm-radius-pill);
    background: transparent;
    color: var(--lm-txt-soft);
    cursor: pointer;
}

.lm-viewswitch button:hover {
    color: var(--lm-txt-title);
}

.lm-viewswitch button.is-on {
    background: var(--lm-gradient);
    color: #fff;
}

/* ==========================================================================
   7. Grade de conteudo e card
   ========================================================================== */

.lm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem;
}

.lm-grid--tight {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.85rem;
}

/* ⚠️ 15/09 — O "LEVANTAR" DO HOVER E' `top`, E NUNCA `transform`.

   Com `transform: translateY(-2px)` no `:hover`, o menu de tres pontos do cartao
   pulava para o canto superior direito da tela assim que o mouse saia do cartao.
   O menu e' `position: fixed` (Popper com `strategy: "fixed"` — tem de ser, porque o
   `overflow: hidden` daqui recortaria um menu `absolute`), e um ANCESTRAL COM
   TRANSFORM vira a referencia do `fixed` no lugar da janela. O Popper posicionava o
   menu com o cartao levantado; o mouse saia, o transform sumia, a referencia voltava
   a ser a janela e as mesmas coordenadas caiam em outro lugar. Medido no Chrome:
   aberto em (377, 321) -> com o transform tirado, (1736, 44).

   `position: relative` + `top` desloca o cartao igual e NAO muda a referencia do
   `fixed`. Vale para `translate`, `scale`, `filter`, `will-change: transform` e
   `perspective` tambem — nenhum deles pode entrar num ancestral de dropdown fixo. */
.lm-card {
    position: relative;
    top: 0;
    overflow: hidden;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow);
    transition: box-shadow 0.18s ease, top 0.18s ease;
}

.lm-card:hover {
    box-shadow: var(--lm-shadow-up);
    top: -2px;
}

.lm-card__thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--lm-surface-mute);
    color: var(--lm-txt-soft);
}

/* Sem `aspect-ratio` (navegador antigo) a caixa colapsaria e o card viraria uma
   tira. O padding-top e o truque de sempre, e some assim que a propriedade existe. */
@supports not (aspect-ratio: 16 / 9) {
    .lm-card__thumb {
        height: 0;
        padding-top: 56.25%;
    }
}

/*
 * PD-456 (28/08) — A MINIATURA PRECISA DE TAMANHO. Sem esta regra o `<img>` sai
 * no tamanho NATURAL do arquivo.
 *
 * Ela faltava desde o comeco e so apareceu quando a Biblioteca ganhou upload de
 * verdade: ate 28/08 nao havia conteudo com `miniatura`, entao o `ng-if` do
 * template sempre caia no ramo do ICONE e o `<img>` nunca era desenhado. O
 * `.lm-row__thumb img`, do editor de playlist, sempre teve a regra — foi
 * esquecimento aqui, nao escolha la.
 *
 * O sintoma nao e' imagem quebrada: e' imagem GIGANTE. A caixa e' flex e centra
 * o item, o `.lm-card` recorta com `overflow: hidden`, entao o que aparece e' o
 * MIOLO de um PNG de 1920x1080 em escala 1:1 — um retangulo de pixels que nao
 * lembra o arquivo enviado.
 *
 * `position: absolute` e nao so `width/height: 100%`, por dois motivos:
 *
 *   1. tira o `<img>` do fluxo flex, entao o centramento do `<i>` do ramo sem
 *      miniatura continua valendo sem disputa;
 *   2. no ramo `@supports not (aspect-ratio)` acima a caixa tem `height: 0`, e
 *      ali `height: 100%` de um item EM FLUXO daria zero — a imagem sumiria.
 *      Posicionada, ela resolve a porcentagem contra a caixa de padding, que e'
 *      justamente o que o `padding-top: 56.25%` desenha.
 *
 * `contain` e nao `cover`: este e' o unico lugar com espaco para mostrar o
 * arquivo INTEIRO, e e' dele que a pessoa tira "e esta imagem mesmo". Com
 * `cover`, um banner em pe entraria cortado no meio e pareceria 16/9 — a tela
 * estaria escondendo exatamente o que a flag "Fora do padrao" existe para
 * denunciar. As miniaturas pequenas seguem em `cover`, onde caixa-cheia vale
 * mais (ver `.lm-libitem__thumb img` e `.lm-row__thumb img`).
 */
.lm-card__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
 * =============================================================================
 * A MINIATURA QUE NAO CARREGA  (31/08)
 * =============================================================================
 *
 * As quatro caixas de miniatura do modulo (`.lm-card__thumb` na grade,
 * `.lm-libitem__thumb` na lista da Biblioteca e no painel do editor, e
 * `.lm-row__thumb` na sequencia da playlist) desenham SEMPRE o mesmo par:
 *
 *     <img ng-if="…miniatura" lm-thumb>  +  <i class="lm-thumb__icon">
 *
 * O icone nao tem `ng-if` — ele fica no DOM o tempo todo, e o revezamento e'
 * feito AQUI, por duas regras:
 *
 *   1. enquanto a imagem esta no ar, o irmao esconde o icone;
 *   2. quando ela falha, a `lm-thumb` poe `lm-thumb--erro` no `<img>`: a imagem
 *      quebrada some, o seletor de cima deixa de casar, e o icone do tipo volta.
 *
 * ⚠️ POR QUE NAO `img-fallback`, QUE ERA O QUE ESTAVA AQUI ATE 31/08. Aquela
 * diretiva e' da PD-66 e o placeholder dela e' a NOTA MUSICAL do ListenPlay
 * (`.ms-img-fallback`, pintada pelo `musical-schedule.css`). Numa Biblioteca de
 * sinalizacao digital ela nao quer dizer nada — e foi literalmente o que a tela
 * mostrou em 31/08, nas sete linhas de uma vez, quando a base do CDN de dev
 * apontava para uma distribuicao sem a midia. "Miniatura bugada" era isso.
 *
 * O reset de `min-*` fica: `img-fallback` continua em uso do lado do ListenPlay,
 * e uma miniatura do LM pode acabar herdando a classe se alguem reaproveitar o
 * markup. Custa duas linhas e evita um 3rem no meio de uma caixa de 52x36.
 */
.lm-card__thumb img:not(.lm-thumb--erro) ~ .lm-thumb__icon,
.lm-libitem__thumb img:not(.lm-thumb--erro) ~ .lm-thumb__icon,
.lm-row__thumb img:not(.lm-thumb--erro) ~ .lm-thumb__icon {
    display: none;
}

.lm-card__thumb img.lm-thumb--erro,
.lm-libitem__thumb img.lm-thumb--erro,
.lm-row__thumb img.lm-thumb--erro {
    display: none;
}

.lm-card__thumb img.ms-img-fallback,
.lm-libitem__thumb img.ms-img-fallback,
.lm-row__thumb img.ms-img-fallback {
    min-width: 0;
    min-height: 0;
}

.lm-card__body {
    padding: 0.9rem 1rem 1rem;
}

.lm-card__title {
    margin: 0;
    overflow: hidden;
    color: var(--lm-txt-title);
    font-size: 0.9375rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.65rem;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

.lm-card__flag {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--lm-radius-pill);
    background: rgba(217, 119, 6, 0.95);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
}

.lm-card__menu {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
}

.lm-card__menu .lm-iconbtn {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--lm-shadow);
}

/* ==========================================================================
   8. Tabela
   ========================================================================== */

/*
 * PD-456 (27/08) - A TABELA NAO RECORTA MAIS.
 *
 * Era `overflow-x: auto`, e isso fazia o menu de acoes de cada linha ser
 * RECORTADO pela propria tabela: ele abre para baixo e para a esquerda, nao
 * cabia na caixa, e o navegador respondia do jeito que sabe - criando barra de
 * rolagem DENTRO da tabela. A tabela andava de lado quando alguem so queria
 * abrir um menu.
 *
 * Nao ha `overflow: hidden` escondido em lugar nenhum: qualquer valor diferente
 * de `visible` recorta descendente posicionado, e o `dropdown-menu` do Bootstrap
 * e' `position: absolute` dentro da linha.
 *
 * A rolagem horizontal volta abaixo de 992px, onde ela existe por um motivo de
 * verdade - a tabela tem `min-width: 46rem` e ali ela nao cabe. Nessa faixa o
 * menu escapa por outro caminho: `data-bs-popper-config` com
 * `{"strategy":"fixed"}` nos botoes de acao, que faz o Popper posicionar em
 * relacao a JANELA. Elemento `fixed` nao e' recortado por `overflow` de
 * ancestral - e' a mesma razao pela qual isto nao pode conviver com `transform`
 * num container pai, coisa que nenhum ancestral da tabela tem.
 */
.lm-tablewrap {
    overflow: visible;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow);
}

@media (max-width: 61.9375rem) {
    .lm-tablewrap {
        overflow-x: auto;
    }
}

/*
 * Sem `overflow`, o cartao perde o recorte que arredondava os cantos - e o
 * `thead`, que tem fundo proprio, passava por cima do canto arredondado do
 * `.lm-tablewrap` com o seu canto reto. Quem arredonda agora sao as celulas das
 * pontas. `-1px` porque elas ficam DENTRO da borda de 1px do cartao.
 */
.lm-table thead th:first-child {
    border-top-left-radius: calc(var(--lm-radius-lg) - 1px);
}

.lm-table thead th:last-child {
    border-top-right-radius: calc(var(--lm-radius-lg) - 1px);
}

/* O mesmo embaixo: `tbody tr:hover td` pinta o fundo e esquadrinharia o pe. */
.lm-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: calc(var(--lm-radius-lg) - 1px);
}

.lm-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: calc(var(--lm-radius-lg) - 1px);
}

.lm-table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.lm-table thead th {
    padding: 0.7rem 1rem;
    background: var(--lm-surface-soft);
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.lm-table tbody td {
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--lm-border);
    vertical-align: middle;
}

.lm-table tbody tr:hover td {
    background: var(--lm-surface-soft);
}

/* 18/09 - a linha que abre a edicao (Telas). O foco do teclado aparece na
   linha inteira, e nao so' numa celula. */
.lm-table__clicavel {
    cursor: pointer;
}

.lm-table__clicavel:focus-visible {
    outline: 2px solid var(--lm-pink);
    outline-offset: -2px;
}

.lm-table__group td {
    background: var(--lm-surface-mute) !important;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lm-table__name {
    color: var(--lm-txt-title);
    font-weight: 600;
}


.lm-table__num {
    font-variant-numeric: tabular-nums;
}

/* PD-576 TASK-001 - a Validade da Biblioteca em UMA linha.
   `{{janela(c)}}` escreve "01/09/2026 ate 30/09/2026", que numa coluna de largura
   livre quebra em duas e desalinha a altura das linhas. Quem rola e o
   `.lm-tablewrap`, entao empurrar a tabela para o lado nao vaza no `<body>`. */
.lm-table__nowrap {
    white-space: nowrap;
}

.lm-table__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.1rem;
}

.lm-rowlink {
    cursor: pointer;
}

/* ==========================================================================
   9. Selos, codigo, indicador de saude
   ========================================================================== */

.lm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--lm-radius-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.lm-badge--image {
    background: rgba(252, 58, 125, 0.12);
    color: var(--lm-pink-strong);
}

.lm-badge--video {
    background: rgba(217, 119, 6, 0.14);
    color: #92400e;
}

.lm-badge--anim {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.lm-badge--warn {
    background: var(--lm-warn-soft);
    color: #92400e;
}

.lm-badge--neutral {
    background: var(--lm-surface-mute);
    color: var(--lm-txt-muted);
}

.lm-code {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--lm-border);
    border-radius: 0.5rem;
    background: var(--lm-surface-soft);
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.lm-code--lg {
    padding: 0.4rem 0.7rem;
    font-size: 1.0625rem;
}

.lm-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--lm-txt-soft);
}

.lm-dot--on {
    background: var(--lm-ok);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}

.lm-dot--off {
    background: var(--lm-off);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.lm-health {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--lm-txt-muted);
}

.lm-muted {
    color: var(--lm-txt-muted);
}

.lm-none {
    color: var(--lm-txt-soft);
    font-style: italic;
}

/* ==========================================================================
   10. Estado vazio
   ========================================================================== */

.lm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1.5rem;
    border: 2px dashed var(--lm-border-strong);
    border-radius: var(--lm-radius-lg);
    background: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.lm-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--lm-pink-soft);
    color: var(--lm-pink);
}

.lm-empty__title {
    margin: 1rem 0 0;
    color: var(--lm-txt-title);
    font-size: 1.0625rem;
    font-weight: 700;
}

.lm-empty__text {
    max-width: 26rem;
    margin: 0.4rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
}

.lm-empty .lm-btn {
    margin-top: 1.35rem;
}

.lm-empty--inline {
    padding: 2rem 1rem;
}

/* No estado vazio da Biblioteca os dois botoes ficam lado a lado e centrados —
   o `.lm-empty` e' uma coluna centralizada, e um `.lm-page__actions` solto ali
   encostaria os dois na esquerda.

   ⚠️ PD-406 — ELA MORAVA NO BLOCO DO ESTUDIO, no fim do arquivo, e nao e' de
   la: e' da Biblioteca. Enquanto aquele bloco tinha data para morrer ("o que
   sai daqui sai inteiro, de uma vez"), apaga-lo levaria este centramento junto,
   e o desalinhamento seria silencioso. */
.lm-empty__acoes {
    justify-content: center;
}

/* Aviso em faixa, para o que bloqueia uma acao (sem playlist, sem conteudo...) */
.lm-notice {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    border: 1px dashed var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
}

.lm-notice--warn {
    border-color: rgba(217, 119, 6, 0.4);
    background: rgba(254, 243, 199, 0.6);
    color: #92400e;
}

/* ==========================================================================
   11. Barra de uso (RN-16/RN-17)
   ========================================================================== */

.lm-usage {
    max-width: 26rem;
}

.lm-usage__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
}

.lm-usage__label {
    color: var(--lm-txt-muted);
    font-weight: 600;
}

.lm-usage__value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.lm-usage__track {
    height: 0.375rem;
    overflow: hidden;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-mute);
}

.lm-usage__fill {
    height: 100%;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-gradient);
    transition: width 0.25s ease;
}

.lm-usage__foot {
    margin: 0.35rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

.lm-usage__foot a {
    color: inherit;
    text-decoration: underline;
}

.lm-usage.is-over .lm-usage__value,
.lm-usage.is-over .lm-usage__foot {
    color: var(--lm-off);
    font-weight: 600;
}

.lm-usage.is-over .lm-usage__fill {
    background: var(--lm-off);
}

/* ==========================================================================
   12. Editor de playlist
   ========================================================================== */

.lm-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1199.98px) {
    .lm-editor {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lm-panel {
    padding: 1.25rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow);
}

.lm-panel--aside {
    position: sticky;
    top: 5.5rem;
}

.lm-seq {
    overflow: hidden;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
}

.lm-seq__head,
.lm-row {
    display: grid;
    /* PD-458 - a coluna da MINIATURA entrou entre o numero e o titulo, e a coluna
       de acoes cresceu para caber o menu de tres pontos ao lado da lixeira. */
    /* PD-739 - a ultima coluna era 4rem para dois botoes de 2rem com 0.15rem de
       espaco entre eles: 4.15rem de conteudo em 4rem de coluna. Agora ela cabe. */
    /* PD-782 (17/09) - Tipo 7rem -> 5.5rem e Vigencia 9rem -> 10.5rem. O maior selo
       de tipo mede 77px (medido), e a coluna tinha 112px; os 24px sobrando foram
       para a Vigencia, que passou a ter tres linhas nas midias agendadas e cuja
       linha mais larga ("01/09/2026 – 30/09/2026" ou "08:00 - 10:00 +1 • 5x por
       dia") mede 141px mais a bolinha. O titulo nao perdeu nada. */
    grid-template-columns: 1.75rem 1.75rem 3.5rem minmax(0, 1fr) 5.5rem 10.5rem 4.25rem 4.25rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.lm-seq__head {
    background: var(--lm-surface-soft);
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lm-row {
    border-top: 1px solid var(--lm-border);
    background: var(--lm-surface);
    font-size: 0.8125rem;
}

.lm-row__grip {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lm-txt-soft);
    /* Sem modo de edicao a alca fica visivel mas apagada: o usuario ve que a lista e
       arrastavel antes mesmo de clicar em Editar. */
    opacity: 0.3;
}

.lm-sortable--ativo .lm-row__grip {
    opacity: 1;
    cursor: grab;
}

.lm-sortable--ativo .lm-row:hover {
    background: var(--lm-surface-soft);
}

.lm-sortable--arrastando .lm-row__grip {
    cursor: grabbing;
}

/* PD-739 - o circulo e' menor que a coluna (1.5rem em 1.75rem), entao ele precisa se
   centrar nela para bater com o "#" do cabecalho, que o `.lm-seq__num` centra. */
.lm-row__n {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--lm-pink-soft);
    color: var(--lm-pink-strong);
    font-size: 0.6875rem;
    font-weight: 700;
}

.lm-row__title {
    overflow: hidden;
    color: var(--lm-txt-title);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O buraco que o jQuery UI desenha onde o item vai cair */
.lm-sortable__ghost {
    margin: 0;
    border: 1px dashed var(--lm-pink);
    border-radius: var(--lm-radius);
    background: var(--lm-pink-softer);
    list-style: none;
}

/* O clone que acompanha o cursor */
.lm-row.ui-sortable-helper {
    border-radius: var(--lm-radius);
    box-shadow: var(--lm-shadow-up);
}

.lm-libitem {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
}

.lm-libitem + .lm-libitem {
    margin-top: 0.5rem;
}

.lm-libitem__thumb {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 2.25rem;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--lm-surface-mute);
    color: var(--lm-txt-soft);
}

/*
 * PD-456 (28/08) — mesma falta que o `.lm-card__thumb img` (ver o comentario
 * longo la), e aqui o estrago era maior: a caixa tem 52x36 px e o `overflow:
 * hidden` transformava um PNG de 1920x1080 num quadrado de cor chapada — o
 * pedaco do meio da imagem, em escala 1:1.
 *
 * Vale para os DOIS lugares que usam esta classe: a coluna "Previa" da visao em
 * lista da Biblioteca e o painel Biblioteca do editor de playlist.
 *
 * `cover` aqui, e nao `contain`: em 36 px de altura uma imagem em pe sobraria
 * como uma tira de poucos pixels no meio de uma caixa vazia. E' a mesma escolha
 * do `.lm-row__thumb img`, que ja fazia isto certo.
 */
.lm-libitem__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lm-libitem__info {
    min-width: 0;
    flex: 1 1 auto;
}

.lm-libitem__title {
    overflow: hidden;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-libitem__type {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
}

.lm-liblist {
    max-height: 26rem;
    overflow-y: auto;
}

.lm-dirty {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-warn-soft);
    color: #92400e;
    font-size: 0.6875rem;
    font-weight: 700;
}

.lm-rename {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lm-rename .lm-input {
    height: 2.5rem;
    max-width: 22rem;
    font-size: 1.25rem !important;
    font-weight: 700;
}

/* ==========================================================================
   13. Modais
   ========================================================================== */

/* Retrabalho PD-456 (15/09) — "o modal de criar tela gera um scroll sem sentido".

   Duas causas somadas, as duas medidas no navegador numa janela de 855px:

   1. GLOBAL, no `modal-bootstrap4-compat.css`: o `min-height` do dialogo
      centralizado descontava 1rem, e a margem somava 3.5rem — todo modal
      centralizado do portal ficava 40px mais alto que a tela. Corrigido LA.
   2. DESTE MODULO: 28px de margem em cima e embaixo comem 56px de uma altura
      que os formularios do ListenMedia usam inteira. Com 1rem, sobram 24px.

   ⚠️ A margem vai com `!important` porque o compat a crava assim (e as duas
   regras tem a mesma especificidade: vence a deste arquivo, que carrega depois).
   E a VARIAVEL vai junto: e' dela que o Bootstrap tira o `height` do
   `.modal-dialog-scrollable`. Margem de um valor e variavel de outro e'
   exatamente o defeito do item 1. */
.lm-modal {
    --bs-modal-margin: 1rem;
}

.lm-modal .modal-dialog {
    margin: 1rem auto !important;
}

/* O modal de TELA a 880px, com os campos em TRES colunas (PD-806, 15/09).

   Historico, porque o numero ja mudou duas vezes no mesmo dia:
   · PD-803: de 500px (Bootstrap) para 600px — as quatro dicas do formulario
     quebravam em duas linhas cada e faziam o modal passar de uma janela de 855px.
   · PD-806: para 880px — o painel "Como acessar o dispositivo" do card tem quatro
     passos lado a lado e ocupa a largura inteira. Em 600px ele empilharia, e o
     modal voltaria a rolar. As tres colunas de campos pagam a altura do painel.

   ⚠️ Mexeu no conteudo deste modal? Meça de novo numa janela de ~850px de altura:
   a medida da PD-803 esta no TASK dela. */
#lmScreenModal .modal-dialog {
    max-width: 880px;
}

/* TRES colunas, e nao as duas do `.lm-grid2`. Medido no Chrome em 15/09, com a
   janela simulada em 855px e o Fire TV (o painel mais alto) escolhido:

     2 colunas   grade 395px (3 linhas, "Tipo de dispositivo" sozinho na
                 terceira)  ->  corpo rolando 56px
     3 colunas   grade 277px (2 linhas)  ->  conteudo 753px de 823, sem rolar;
                 numa janela de 768px o corpo rola 17px, com titulo e botoes a vista

   So a partir de 992px: abaixo disso o modal ja nao tem os 880px, e tres colunas
   de 200px nao comportam o select de Local com o botao "Novo" ao lado. */
/* ⚠️ PD-1358 (15/10) — FLEX COM QUEBRA, e nao mais `grid`: "nao quero linhas
   faltando campos". Unidade e Playlist entram e saem por `ng-if`, entao a grade
   tem de 4 a 6 campos, e com colunas fixas a ultima linha ficava com buraco.
   Aqui o campo de uma linha incompleta ESTICA ate a borda (`flex-grow`). As
   larguras-base sao as mesmas tres colunas (duas abaixo de 992px, uma abaixo de
   576px). A UF (`.lm-field--local`) ocupa duas colunas desde a PD-1837. */
#lmScreenModal .lm-grid2 {
    display: flex;
    flex-wrap: wrap;
}

#lmScreenModal .lm-grid2 > .lm-field {
    flex: 1 1 calc((100% - 0.85rem) / 2);
    min-width: 0;
}

@media (min-width: 992px) {
    #lmScreenModal .lm-grid2 > .lm-field {
        flex-basis: calc((100% - 1.7rem) / 3);
    }
}

@media (max-width: 575.98px) {
    #lmScreenModal .lm-grid2 > .lm-field {
        flex-basis: 100%;
    }
}

/* PD-806 — o painel "Como acessar o dispositivo", no layout do card.
   Nomes `lm-howto*` conferidos livres no namespace plano em 15/09. */
.lm-howto {
    margin-top: 0.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--lm-radius-lg);
    background: var(--lm-pink-softer);
}

.lm-howto__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.lm-howto__badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    background: var(--lm-pink);
    color: #fff;
    font-size: 1.1rem;
}

.lm-howto__title {
    margin: 0;
    color: var(--lm-txt-title);
    font-size: 1rem;
    font-weight: 700;
}

.lm-howto__sub {
    margin: 0.15rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
}

/* Os passos lado a lado, com a divisoria e a seta entre eles. `<ol>` porque a
   ordem E' o conteudo — um leitor de tela anuncia "1 de 4". */
.lm-howto__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.lm-howto__step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    padding: 0 1rem;
    border-left: 1px solid rgba(252, 58, 125, 0.18);
}

.lm-howto__step:first-child {
    padding-left: 0;
    border-left: 0;
}

/* A seta entre um passo e o seguinte, na altura do icone. */
.lm-howto__step + .lm-howto__step::before {
    content: "\203A";
    position: absolute;
    top: -0.2rem;
    left: -0.3rem;
    color: rgba(252, 58, 125, 0.45);
    font-size: 1.25rem;
    line-height: 1;
    transform: translateX(-100%);
}

.lm-howto__stephead {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.2rem;
}

.lm-howto__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--lm-pink);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.lm-howto__icon {
    color: var(--lm-pink);
    font-size: 1.15rem;
}

.lm-howto__steptitle {
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 700;
}

.lm-howto__steptext,
.lm-howto__text {
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.lm-howto__text {
    margin: 0.85rem 0 0;
}

.lm-howto__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(252, 58, 125, 0.15);
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

/* PD-1016 (24/09) - o codigo da tela na edicao, na mesma linha do endereco do
   player. `lm-code--lg` porque e' o que a pessoa le de longe para digitar na TV;
   o botao de copiar encosta nele, como na coluna Codigo da listagem. Nome
   conferido: `lm-howto__codigo` estava livre. */
.lm-howto__codigo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Em tela estreita os passos empilham: quatro colunas de 60px nao se leem. */
@media (max-width: 767.98px) {
    .lm-howto__steps {
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }

    .lm-howto__step,
    .lm-howto__step:first-child {
        padding: 0;
        border-left: 0;
    }

    .lm-howto__step + .lm-howto__step::before {
        content: none;
    }
}

.lm-modal .modal-content {
    border: 0;
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-up);
}

.lm-modal .modal-header {
    align-items: flex-start;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--lm-border);
}

.lm-modal .modal-title {
    color: var(--lm-txt-title);
    font-family: 'Inter', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
}

.lm-modal .modal-body {
    padding: 1.25rem 1.5rem;
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
}

.lm-modal .modal-footer {
    gap: 0.5rem;
    padding: 0.85rem 1.5rem 1.25rem;
    border-top: 1px solid var(--lm-border);
}

.lm-modal__sub {
    margin: 0.2rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    font-weight: 400;
}

/* Modal de conteudo, etapa 2: campos a ESQUERDA e o arquivo escolhido a direita,
   como no YouTube — os campos e que sao o trabalho; o arquivo ja esta resolvido e
   fica ali so para a pessoa nao perder de vista o que esta descrevendo. */
.lm-contentmodal {
    display: grid;
    grid-template-columns: 1fr 20rem;
    gap: 0;
}

/* PD-695 (09/09) — o `min-height` e o que tira o SALTO ao trocar de aba.

   Medido no portal local, nesta coluna: aba Imagem 519px, aba Video 456px. A
   diferenca de 63px e' UM campo — "Tempo de exibicao (segundos)", que so existe
   na aba Imagem (`ng-if="form.tipo === 'imagem'"` no `_content-modal.html`).
   Como a modal e' `modal-dialog-centered`, encolher 63px reposiciona o dialogo
   inteiro: ele pula ~31px para baixo e volta, a cada troca de aba.

   A reserva vai na COLUNA, e nao na `.modal-content`: e' esta coluna que varia,
   e ela ja e' dona do proprio tamanho (o `max-height` + rolagem abaixo). Um
   `min-height` na modal deixaria dois lugares mandando na mesma altura.

   ⚠️ `min()` NAO e' enfeite. `min-height` VENCE `max-height` em CSS: um valor
   fixo de 32.5rem numa janela baixa passaria por cima do teto de 62vh, a coluna
   deixaria de rolar por dentro e a modal cresceria para fora da tela, levando o
   rodape (e os botoes Cancelar/Adicionar) junto. Com `min()` o piso nunca
   ultrapassa o teto — nas telas altas ele vale 32.5rem (520px, um pixel acima da
   aba mais alta) e nas baixas ele empata com o proprio 62vh.

   ⚠️ Isto NAO congela a altura: erro de validacao ainda cresce a coluna, e deve
   crescer. O card pede para tirar o salto de TROCAR DE TIPO, nao para engessar a
   modal. */
.lm-contentmodal__fields {
    padding: 1.25rem 1.5rem;
    min-height: min(32.5rem, 62vh);
    max-height: 62vh;
    overflow-y: auto;
}

.lm-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    color: var(--lm-txt-soft);
    text-align: center;
}

.lm-preview img,
.lm-preview video {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--lm-radius);
    object-fit: contain;
}

@media (max-width: 767.98px) {
    .lm-contentmodal {
        grid-template-columns: minmax(0, 1fr);
    }

    .lm-filecard {
        border-right: 0;
        border-top: 1px solid var(--lm-border);
    }
}

/* Lista de logs de acesso */
.lm-logs {
    max-height: 55vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    list-style: none;
}

.lm-logs li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
}

.lm-logs li + li {
    border-top: 1px solid var(--lm-border);
}

.lm-logs__when {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

.lm-logs__ua {
    max-width: 100%;
    overflow: hidden;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-logs__ip {
    flex: 0 0 auto;
    color: var(--lm-txt-muted);
    font-family: 'Courier New', monospace;
    font-size: 0.6875rem;
}

/* ==========================================================================
   14. Dropdown de acoes (Bootstrap, so o acabamento)
   ========================================================================== */

.lm-menu {
    min-width: 10rem;
    padding: 0.35rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    box-shadow: var(--lm-shadow-up);
}

.lm-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
}

.lm-menu .dropdown-item:hover {
    background: var(--lm-surface-soft);
}

/* PD-460 — item de menu inativo.

   `ng-disabled` so tem efeito em <button>, entao "Resetar pareamento" (Telas) e um
   <button class="dropdown-item">. Sem esta regra ele ficaria indistinguivel de um item
   ativo: o `color` de `.lm-menu .dropdown-item` vence o do Bootstrap, e o :hover acima
   continuaria pintando o fundo. */
.lm-menu .dropdown-item:disabled,
.lm-menu .dropdown-item.disabled {
    color: var(--lm-txt-soft);
    background: transparent;
    opacity: 0.7;
    pointer-events: none;
}

.lm-menu .dropdown-item--danger {
    color: var(--lm-off);
}

.lm-menu .dropdown-item--danger:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--lm-off);
}

/* Painel de largura contida — telas de formulario curto (Configuracoes) */
.lm-panel--narrow {
    max-width: 40rem;
}

.lm-limite {
    color: var(--lm-txt-title);
}

/* ==========================================================================
   15. Miudezas usadas pelas telas
   ========================================================================== */

/* Icone redondo que abre a linha da tabela (playlist, tela) */
.lm-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--lm-gradient);
    color: #fff;
    font-size: 0.8125rem;
}

/* Lista curta dentro de modal — as telas que travam a exclusao de uma playlist */
.lm-inline-list {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.lm-inline-list li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--lm-border);
    border-radius: 0.5rem;
    background: var(--lm-surface-soft);
}

/* PD-576 TASK-004 — a tela que trava a exclusao virou LINK: ela abre a edicao no
   `_screen-modal.html`, sem sair da listagem de Playlists.

   O `<a>` repete o `display: flex` do `<li>` porque agora e ELE quem embrulha o
   icone e o texto — sem isto, o `gap` do `<li>` passa a valer para um filho so e o
   icone cola na palavra. O `flex: 1` faz a area clicavel ocupar a linha inteira, em
   vez de terminar no fim do texto. */
.lm-inline-list a {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.45rem;
    color: var(--lm-txt-title);
    text-decoration: none;
}

.lm-inline-list a:hover {
    color: var(--lm-pink);
}

/* O lapis so aparece no hover da linha: ele e a dica de que da para clicar, e
   sempre visivel viraria ruido em cima de cada tela da lista. */
.lm-inline-list a .fa-pencil-alt {
    margin-left: auto;
    opacity: 0;
    font-size: 0.75rem;
    transition: opacity 0.15s ease;
}

.lm-inline-list a:hover .fa-pencil-alt {
    opacity: 1;
}

.lm-inline-list li + li {
    margin-top: 0.35rem;
}

/* Legenda do indicador de saude das telas */
.lm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 0.85rem;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

.lm-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* PD-576 TASK-003 - `.lm-mono` SAIU com o bloco de Player ID do `_screen-modal.html`,
   que era seu unico uso. Era ele que deixava o UUID em fonte monoespacada. */

/* Estado vazio da previa, dentro do modal de conteudo */
.lm-preview__vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem;
}

.lm-preview__vazio .lm-empty__text {
    margin: 0;
}

/* <label class="lm-btn"> abrigando o <input type=file>: o Bootstrap poe margem
   embaixo de todo label, e ela desalinharia o botao da linha. */
.lm-file .lm-btn {
    flex: 0 0 auto;
    margin-bottom: 0;
}

.lm-file .lm-select,
.lm-file .lm-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* A ultima linha de um formulario nao precisa do respiro de baixo */
.lm-field.mb-0 {
    margin-bottom: 0;
}

/* ==========================================================================
   16. Envio de conteudo — o fluxo do YouTube

   Etapa 1: uma area grande e vazia, com o icone de envio no meio. Ela e o unico
   conteudo do modal enquanto nao ha arquivo — e o que faz o passo parecer um passo,
   em vez de um campo de arquivo perdido no meio de um formulario.
   ========================================================================== */

.lm-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    border: 2px dashed var(--lm-border-strong);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-surface-soft);
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* `is-dragging` vem da diretiva `lm-dropzone`, no `dragenter`. */
.lm-drop.is-dragging {
    border-color: var(--lm-pink);
    background: var(--lm-pink-softer);
}

.lm-drop__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: var(--lm-surface-mute);
    color: var(--lm-txt-soft);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lm-drop.is-dragging .lm-drop__icon {
    background: var(--lm-pink-soft);
    color: var(--lm-pink);
}

.lm-drop__title {
    margin: 1.25rem 0 0;
    color: var(--lm-txt-title);
    font-size: 1.0625rem;
    font-weight: 700;
}

.lm-drop__text {
    max-width: 26rem;
    margin: 0.4rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
}

.lm-drop__btn {
    margin: 1.5rem 0 0;
}

.lm-drop__hint {
    margin: 1rem 0 0;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

.lm-drop__erro {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem 0 0;
    padding: 0.5rem 0.85rem;
    border-radius: var(--lm-radius-pill);
    background: rgba(239, 68, 68, 0.10);
    color: var(--lm-off);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* O <input type=file> mora dentro do <label class="lm-btn"> — o campo nativo e feio
   e nao aceita estilo; o label e que vira botao. */
.lm-drop__btn input[type="file"],
.lm-filecard__swap input[type="file"] {
    display: none;
}

/* Etapa 2 — o cartao do arquivo escolhido, a direita */
.lm-filecard {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border-left: 1px solid var(--lm-border);
    background: var(--lm-surface-soft);
}

.lm-filecard__info {
    margin-top: 0.85rem;
}

.lm-filecard__name {
    margin: 0;
    overflow: hidden;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-filecard__meta {
    margin: 0.15rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

.lm-filecard__swap {
    justify-content: center;
    margin-top: 0.85rem;
}

.lm-uploadbar {
    margin-top: 1rem;
}

.lm-uploadbar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ==========================================================================
   PD-405 - modal de conteudo, no desenho dos prints do solicitante
   (`.claude/specs/PD-405/imagens/`, 26/08/2026).
   ========================================================================== */

/* --- Cabecalho: icone + titulo + nome do tipo, e as abas a direita --------- */

.lm-cmodal__head {
    align-items: center;
    gap: 1rem;
}

.lm-cmodal__ident {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

/* Quadrado arredondado com o icone do tipo, em rosa cheio. Reaproveita as
   classes `lm-badge--*` so pela COR do tipo; o formato vem daqui. */
.lm-cmodal__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    background: var(--lm-gradient);
    color: #fff;
    font-size: 1.05rem;
}

.lm-cmodal__tipo {
    margin: 0.1rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
}

.lm-cmodal__right {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-left: auto;
}

/* --- As abas de tipo ------------------------------------------------------ */

.lm-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-soft);
}

.lm-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border: 0;
    border-radius: var(--lm-radius-pill);
    background: transparent;
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lm-tabs__btn:hover:not(.is-on):not(:disabled) {
    background: var(--lm-surface);
}

.lm-tabs__btn.is-on {
    background: var(--lm-gradient);
    color: #fff;
    box-shadow: 0 3px 10px rgba(252, 58, 125, 0.25);
}

/* Em edicao as abas ficam inertes: o tipo de um conteudo que ja existe e o do
   arquivo que esta no servidor. */
.lm-tabs__btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* --- Colunas -------------------------------------------------------------- */

/* Nos prints a coluna da exibicao e a MAIOR, e uma linha vertical separa as
   duas. O `lm-contentmodal` base ja existe desde a PD-456; aqui so muda a
   proporcao e entra a divisoria. */
.lm-contentmodal {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.lm-contentmodal__view {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.5rem;
    border-left: 1px solid var(--lm-border);
    background: var(--lm-surface-soft);
}

/* --- A area de exibicao --------------------------------------------------- */

.lm-viewbox {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
}

.lm-viewbox img,
.lm-viewbox video {
    max-width: 100%;
    max-height: 26rem;
    border-radius: 0.5rem;
    object-fit: contain;
}

/* PD-1037 (24/09): a animacao do Estudio e' uma PAGINA (`.html`), e num `<video>`
   ela nao desenha nada. O `<iframe>` precisa de altura propria: a pagina se
   encaixa no que recebe, com tarja preta (e' o mesmo HTML da TV). */
.lm-viewbox iframe {
    display: block;
    width: 100%;
    height: 20rem;
    border: 0;
    border-radius: 0.5rem;
    background: #000000;
}

.lm-viewbox__vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.lm-viewbox__vazio p {
    margin: 0;
    color: var(--lm-txt-muted);
    font-size: 0.875rem;
}

/* Mesmo quadrado do cabecalho, maior e em rosa claro. */
.lm-viewbox__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 1.25rem;
    background: rgba(252, 58, 125, 0.12);
    color: var(--lm-pink);
}

.lm-viewbox__meta {
    text-align: center;
}

/* --- O seletor de arquivo, em linha --------------------------------------- */

/* Botao escuro + nome do arquivo na MESMA linha, alinhados a esquerda, como
   nos prints. Continua sendo a zona de arrastar: `lm-dropzone` esta nele e
   liga `is-dragging`. */
.lm-filepick {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.25rem;
    border: 1px dashed transparent;
    border-radius: var(--lm-radius);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lm-filepick.is-dragging {
    border-color: var(--lm-pink);
    background: rgba(252, 58, 125, 0.06);
}

.lm-filepick .lm-btn {
    flex: 0 0 auto;
}

.lm-filepick input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lm-filepick__name {
    min-width: 0;
    overflow: hidden;
    color: var(--lm-txt);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Botao escuro --------------------------------------------------------- */

/* Escuro de proposito: "Escolher arquivo" e "Cancelar" nao sao a acao
   principal (essa e "Adicionar", em rosa), mas precisam de presenca. */
.lm-btn--dark {
    background: #1c1c22;
    color: #fff;
}

.lm-btn--dark:hover {
    background: #32323c;
}

/* --- Vigencia do conteudo ------------------------------------------------- */

/* PD-807 (15/09) — A LEGENDA FICA DENTRO DA CAIXA, e quem a poe la e' o `float`.

   O comentario que estava aqui dizia o contrario ("`float: none` o traz de volta
   ao fluxo"), e era justamente o `float: none` que a desenhava EM CIMA da borda,
   cortada ao meio pela linha — o print do card.

   O mecanismo: um <legend> SEM float e' a "legenda renderizada" do <fieldset>, e o
   navegador a encaixa NA borda de cima, abrindo a linha em volta dela. O Bootstrap 5
   ja resolve isso no reboot, com `legend { float: left; width: 100% }` e
   `legend + * { clear: left }`: a legenda vira um bloco comum no topo da area de
   conteudo, e o irmao seguinte (a grade das datas) desce para baixo dela.
   `float: none; width: auto` desfazia as duas coisas.

   ⚠️ `width: 100%` nao e' enfeite: com `width: auto` e float, a grade das datas
   subiria para o LADO da legenda, que e' o "recuo" que o comentario antigo temia.

   Medido antes e depois: `.claude/specs/PD-807/files/medir-legenda-da-vigencia.cjs`. */
.lm-fieldset__legend {
    float: left;
    width: 100%;
    margin-bottom: 0.85rem;
    padding: 0;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* Cartao de largura inteira, nao uma linha so.
   PD-576 TASK-002: sobrou UM (a caixa "Conteudo permanente"), e ele passou a ser o
   PRIMEIRO bloco do fieldset — por isso a margem trocou de lado. Ela agora separa o
   cartao das datas que ele governa, em vez de separa-lo da legenda, que ja tem
   `margin-bottom` propria. */
.lm-radiocards {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.lm-radiocard {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lm-radiocard:hover {
    border-color: var(--lm-border-strong);
}

.lm-radiocard.is-on {
    border-color: var(--lm-pink);
}

/* PD-576 TASK-002 — o controle virou `checkbox`; o seletor cobre os dois para a
   regra nao depender do tipo de campo que o template usa. */
.lm-radiocard input[type="radio"],
.lm-radiocard input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--lm-pink);
    cursor: pointer;
}

.lm-radiocard span {
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* As datas ficam a vista quando "Conteudo permanente" esta marcado - so
   bloqueadas (PD-405, decisao 3). */
.lm-vigencia .lm-input[disabled] {
    cursor: not-allowed;
}

/* --- PD-1124 (14/10) · Vigencia e Programar Midia RECOLHIVEIS ----------------
   As duas caixas do modal de conteudo nascem FECHADAS. A legenda continua sendo
   a `.lm-fieldset__legend` (float + width 100%, PD-807); quem recebe o clique e'
   o `<button>` de dentro, da largura toda. Fechada, a caixa fica so' com o
   cabecalho e o resumo do que vale ("Permanente", "Todos os dias • O dia todo"). */
.lm-secao:not(.is-aberta) {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.lm-secao:not(.is-aberta) > .lm-secao__legend {
    margin-bottom: 0;
}

.lm-secao__cabeca {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lm-secao__titulo {
    flex: 0 0 auto;
}

.lm-secao__resumo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--lm-txt-muted);
    font-weight: 500;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-secao__seta {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.lm-secao.is-aberta .lm-secao__seta {
    transform: rotate(180deg);
}

.lm-secao__cabeca:hover .lm-secao__seta,
.lm-secao__cabeca:focus-visible .lm-secao__seta {
    color: var(--lm-pink);
}

/* A frase do permanente fica ENTRE o cartao e as datas desde 14/10: precisa de respiro embaixo. */
.lm-vigencia .lm-secao__corpo > .lm-field__hint {
    margin-bottom: 0.85rem;
}

/* O corpo e' o que vinha logo depois da legenda flutuante: limpa o float. */
.lm-secao__corpo {
    clear: both;
}

/* --- PD-782 · Programar Midia -------------------------------------------- */

/* O bloco inteiro nao ganha classe nova de moldura: ele e' um `.lm-fieldset`
   como o da vigencia. A `.lm-prog` existe so' para dar contexto as regras das
   linhas de horario abaixo - o namespace deste arquivo e' PLANO, e `grep` antes
   de batizar e' regra do modulo (a `.lm-preview` repetida ja deixou o editor
   inteiro inclicavel uma vez, sem nada no console). `lm-prog` e `lm-faixa` nao
   apareciam em lugar nenhum deste arquivo. */

/* O respiro da vigencia (17/09, a pedido). Os `.lm-field` se separam pelo
   `margin-bottom: 1rem` deles, mas um fieldset seguido de outro nao tinha margem
   nenhuma: os dois cartoes cinza encostavam e pareciam um bloco so'. */
.lm-prog {
    margin-top: 1.5rem;
}

.lm-prog__faixas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Tres campos, e o botao de remover so' quando ha o que remover.

   ⚠️ 17/09, a pedido: a quarta coluna (2.25rem) era reservada SEMPRE, e com uma
   linha so' ela ficava vazia ao lado da quantidade, que parecia cortada. Agora
   ela so' existe com `.tem-remover` no container, que o template liga com mais
   de uma linha. A classe vale para todas as linhas de uma vez, entao as linhas
   nunca discordam entre si; o que muda e' so' a passagem de uma para duas, e ai
   a lixeira aparece junto, o que explica o campo encolher. */
.lm-prog__faixa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: end;
    gap: 0.5rem;
}

.lm-prog__faixas.tem-remover .lm-prog__faixa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 2.25rem;
}

/* Sem a coluna, a celula da lixeira (vazia) nao pode abrir uma linha nova. */
.lm-prog__faixas:not(.tem-remover) .lm-prog__remover {
    display: none;
}

.lm-prog__campo {
    min-width: 0;
}

/* O rotulo so' aparece na primeira linha (`ng-if="$first"`), e e' por isso que o
   alinhamento do `.lm-prog__faixa` e' `end`: sem ele, as linhas de baixo
   subiriam para o topo da grade e ficariam fora de esquadro com a primeira. */
.lm-prog__campo .lm-field__label {
    margin-bottom: 0.3rem;
}

.lm-prog__remover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
}

/* PD-951 (18/09) - o icone de calendario ao lado do titulo, como no card. */
.lm-prog__icone {
    margin-right: 0.35rem;
    color: var(--lm-pink);
}

/* 18/09 - "O dia todo" | "Horarios especificos": duas metades de mesma largura,
   na altura dos campos (2.5rem), no desenho da pilula do assistente do Estudio. */
.lm-prog__quando {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.25rem;
    padding: 0.2rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-soft);
}

.lm-prog__opcao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 0;
    height: 2.1rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: var(--lm-radius-pill);
    background: transparent;
    color: var(--lm-txt-soft);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.lm-prog__opcao > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lm-prog__opcao.is-on {
    background: var(--lm-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    color: var(--lm-pink-strong);
}

.lm-prog__opcao[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.lm-prog__dica {
    margin: 0.4rem 0 0;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

/* A linha inteira (17/09, a pedido), como os campos acima dele. O contorno rosa
   (`lm-btn--pink`) e' do card (PD-951, 18/09). */
.lm-prog__add {
    width: 100%;
    justify-content: center;
    margin-top: 0.6rem;
}

/* Abaixo de 576px a `.lm-grid2` das datas ja vira uma coluna. Tres selects lado
   a lado ali ficariam com ~70px cada, e "00:00" nao cabe num select com seta.
   A linha passa a ser inicio+fim em cima e quantidade+remover embaixo - dois
   pares, e nao quatro linhas, porque inicio e fim se leem juntos. */
@media (max-width: 575.98px) {
    .lm-prog__faixa,
    .lm-prog__faixas.tem-remover .lm-prog__faixa {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        row-gap: 0.4rem;
    }

    /* Sem lixeira, a quantidade fica sozinha na segunda linha: ocupa as duas. */
    .lm-prog__faixas:not(.tem-remover) .lm-prog__campo:nth-child(3) {
        grid-column: 1 / -1;
    }

    /* A linha ganha um respiro proprio: empilhadas sem separacao, duas faixas
       viram um bloco de seis campos em que nao se ve onde uma acaba. */
    .lm-prog__faixa + .lm-prog__faixa {
        padding-top: 0.5rem;
        border-top: 1px solid var(--lm-border);
    }
}

/* --- Responsivo ----------------------------------------------------------- */

@media (max-width: 991.98px) {

    .lm-contentmodal {
        grid-template-columns: minmax(0, 1fr);
    }

    .lm-contentmodal__view {
        border-left: 0;
        border-top: 1px solid var(--lm-border);
    }

    /* As abas descem para uma linha propria e podem rolar de lado. */
    .lm-cmodal__head {
        flex-wrap: wrap;
    }

    .lm-cmodal__right {
        flex-wrap: wrap;
        width: 100%;
        margin-left: 0;
    }

    .lm-tabs {
        overflow-x: auto;
    }
}

/* ==========================================================================
   PD-458 - linha de metadados da playlist

   Substitui o subtitulo antigo e a barra de uso inteira. As quatro informacoes
   que a documentacao lista, numa linha so: contagem, duracao, tamanho e o tipo
   de dispositivo - este ultimo num select, porque o "( alterar)" da doc e acao
   de troca (decisao 2 da spec).

   O `.lm-usage` continua no arquivo: a barra de envio do modal de conteudo
   reusa `.lm-usage__track` e `.lm-usage__fill`.
   ========================================================================== */

.lm-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.25rem;
    margin-top: 0.6rem;
}

.lm-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
}

.lm-meta__item i {
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

/* O select nao pode parecer um campo de formulario no meio de uma linha de
   texto: ele fica com a mesma altura e peso dos vizinhos, e so mostra a borda
   ao passar o mouse ou receber foco. */
.lm-meta__select {
    height: auto;
    padding: 0.15rem 1.5rem 0.15rem 0.4rem;
    border-color: transparent;
    background-color: transparent;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.lm-meta__select:hover {
    border-color: var(--lm-border);
    background-color: var(--lm-surface);
}

.lm-meta__select:focus {
    border-color: var(--lm-pink);
    background-color: var(--lm-surface);
}

/* ==========================================================================
   PD-458 - bloco "Telas vinculadas" e o modal "Ver todas"
   ========================================================================== */

/* Contador ao lado do titulo do bloco, como a documentacao pede. */
.lm-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: var(--lm-radius-pill);
    background: rgba(252, 58, 125, 0.12);
    color: var(--lm-pink);
    font-size: 0.75rem;
    font-weight: 700;
}

.lm-screens-panel {
    margin-bottom: 1.25rem;
}

.lm-linked {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lm-linked__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
}

.lm-linked__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.6rem;
    background: rgba(252, 58, 125, 0.1);
    color: var(--lm-pink);
    font-size: 0.75rem;
}

.lm-linked__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.lm-linked__name {
    overflow: hidden;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-linked__place {
    overflow: hidden;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Status da programacao" (decisao 5 da spec). O rotulo e o da documentacao;
   o dado por baixo e o healthcheck - e o unico status que o sistema tem. */
.lm-linked__status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 600;
}

.lm-linked__status.is-exibindo {
    color: var(--lm-on, #16a34a);
}

.lm-linked__status.is-aguardando {
    color: var(--lm-txt-soft);
}

.lm-linked__status .lm-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.lm-linked__more {
    margin: 0.15rem 0 0;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

/* Os DOIS botoes do rodape. O `+ Vincular tela` do mockup nao existe: a nota do
   solicitante o eliminou, e a vinculacao mora dentro do modal "Ver todas". */
.lm-linked__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.lm-linked__actions .lm-btn {
    flex: 1 1 auto;
    justify-content: center;
}

/* Botao "Adicionar conteudo" do painel Biblioteca. PD-739 - ele desceu para o rodape do
   painel, depois da lista, entao o espaco troca de lado: era `margin-bottom` para
   separar da lista, e virou `margin-top` pelo mesmo motivo. */
.lm-libadd {
    justify-content: center;
    width: 100%;
    margin-top: 0.85rem;
}

/* --- Lista de escolha do modal "Ver todas" -------------------------------- */

.lm-picklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 24rem;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   PD-969 (18/09) — o modal "Ver telas" tem DOIS grupos

   ⚠️ A ROLAGEM PASSA PARA O ENVOLTÓRIO, e sai das listas. `.lm-picklist` rola
   por dentro (`max-height: 24rem`), e com dois deles na mesma modal apareciam
   DUAS barras de rolagem independentes — cada grupo rolando sozinho, com a
   faixa de título de um sumindo enquanto o outro ficava parado.
   -------------------------------------------------------------------------- */

.lm-picks {
    max-height: 26rem;
    overflow-y: auto;
}

.lm-picks .lm-picklist {
    max-height: none;
    overflow: visible;
}

.lm-picklist__faixa {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin: 1rem 0 0.5rem;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* A primeira faixa encosta no topo do corpo da modal. */
.lm-picks > .lm-picklist__faixa:first-child {
    margin-top: 0;
}

.lm-picklist__faixa span {
    font-weight: 600;
    letter-spacing: 0;
}

/* O selo de "esta tela já tem dono". Âmbar, e não vermelho: marcar assim mesmo
   é uma escolha legítima — o aviso de roubo é que confirma. */
.lm-pickitem__selo {
    flex: 0 0 auto;
    background: var(--lm-warn-soft);
    color: var(--lm-warn);
}

.lm-pickitem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lm-pickitem:hover {
    border-color: var(--lm-border-strong);
}

.lm-pickitem.is-on {
    border-color: var(--lm-pink);
    background: rgba(252, 58, 125, 0.04);
}

.lm-pickitem input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    accent-color: var(--lm-pink);
    cursor: pointer;
}

/*
 * LM-HOME (09/09) — a variante do `.lm-pickitem` que e' um BOTAO, e nao um
 * `<label>` com caixa de selecao.
 *
 * O modal de telas vinculadas usa o item para ESCOLHER (marca e desmarca); o das
 * playlists sem conteudo usa para IR (um clique, e sai da tela). O `<button>`
 * nao herda a largura do pai nem o alinhamento do texto, e sem estas tres linhas
 * o cartao encolhe ate o conteudo e o texto centraliza.
 */
.lm-pickitem--acao {
    width: 100%;
    text-align: left;
}

.lm-pickitem--acao:hover {
    border-color: var(--lm-pink-line);
    background: var(--lm-pink-softer);
}

.lm-pickitem__seta {
    flex: 0 0 auto;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

.lm-pickitem__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.lm-pickitem__name {
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
}

.lm-pickitem__meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
}

/* A coluna lateral do editor: dois paineis empilhados num filho so do grid. */
.lm-editor__side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* O espacamento vem do `gap` acima; o painel nao precisa da margem propria. */
.lm-screens-panel {
    margin-bottom: 0;
}

/* ==========================================================================
   PD-458 - alinhamento com o mockup `img-nova-tela-de-playlists.png`
   ========================================================================== */

/* Cabecalho do painel: titulo + subtitulo a esquerda, totais a direita. */
.lm-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.lm-panel__sub {
    margin: 0.2rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

.lm-totais {
    display: flex;
    gap: 0.4rem;
}

/* Pilula cinza - serve para os totais do painel e para a duracao de cada item. */
.lm-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-soft);
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.lm-chip strong {
    margin-left: 0.25rem;
    color: var(--lm-txt-title);
}

.lm-chip--dur {
    min-width: 3.25rem;
    justify-content: center;
    border: 1px solid var(--lm-border);
    background: var(--lm-surface);
}

/* Botao so de icone, e a variante vermelha suave da lixeira do cabecalho. */
.lm-btn--icon {
    padding: 0 0.7rem;
}

.lm-btn--danger-soft {
    border-color: rgba(239, 68, 68, 0.35);
    color: var(--lm-off);
}

.lm-btn--danger-soft:hover {
    border-color: var(--lm-off);
    background: rgba(239, 68, 68, 0.06);
}

/* --- A linha da sequencia -------------------------------------------------- */

/* A miniatura do conteudo. A coluna nova entra entre o numero e o titulo, e a
   grade do `.lm-seq` precisa acompanhar - ver o override logo abaixo. */
.lm-row__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 2.5rem;
    overflow: hidden;
    border: 1px solid var(--lm-border);
    border-radius: 0.5rem;
    background: var(--lm-surface-soft);
    color: var(--lm-txt-soft);
    font-size: 0.8rem;
}

.lm-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lm-row__janela {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    /* PD-739 - "dd/mm/aaaa – dd/mm/aaaa" em 9rem quebrava em duas linhas e empurrava
       a altura da linha. Mesmo cuidado que a `.lm-table__nowrap` ja da a coluna
       Validade da Biblioteca. */
    white-space: nowrap;
}

/* PD-739 - as duas pontas da mesma coluna, num lugar so'. Antes era `text-align`
   inline repetido no cabecalho e na linha; repetido, ele sai de sincronia na
   primeira vez que alguem mexer num dos dois. */
.lm-seq__num {
    text-align: center;
}

.lm-seq__dur {
    text-align: right;
}

.lm-row__janela .lm-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.lm-row__janela .lm-dot.is-permanente {
    background: var(--lm-on, #16a34a);
}

.lm-row__janela .lm-dot.is-agendado {
    background: var(--lm-warn, #f59e0b);
}

/* PD-951 (18/09) - a terceira bolinha (`is-programado`, rosa) SAIU: no card a
   linha agendada tem a bolinha verde da vigencia, e "tem programacao" ja' e' dito
   pelas duas linhas de baixo da celula. */

/* PD-782 (17/09) - a celula de uma midia AGENDADA: tres linhas curtas (vigencia,
   dias, horario com as vezes) em vez de uma que vazava por baixo da Duracao.
   Cada linha continua `nowrap`, com reticencias de seguranca; o texto completo
   esta no `lm-tooltip`.

   A altura: 15px + 2 x 13px = 41px, contra os 40px da miniatura. A linha
   agendada fica ~1px mais alta que as outras, e nao mais. */
.lm-row__janela--prog {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    overflow: hidden;
    cursor: default;
}

.lm-row__janela--prog .lm-dot {
    flex: 0 0 auto;
    margin-top: 0.3rem;
}

.lm-row__janela-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.lm-row__janela-linha {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-row__janela-linha--sub {
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
    line-height: 1.2;
}

/* --- PD-782 · as duas faixas de titulo da sequencia ----------------------- */

/* ⚠️ ELA NAO E' UMA `.lm-row`, e a classe nao e' cosmetica: `lm-drop-sequencia`
   conta `element[0].querySelectorAll('.lm-row')` para decidir a posicao de
   insercao, e uma faixa com aquela classe deslocaria o indice. Ela tambem nao
   herda a grade de oito colunas - e' uma linha de texto, e so'.

   O visual e' o mesmo do `.lm-table__group` da tela de Telas, que ja resolve
   "titulo de grupo dentro da mesma tabela" no modulo. */
/* PD-951 (18/09) - como na segunda imagem do card: faixa rosa clara, icone rosa,
   titulo em negrito e o subtitulo entre parenteses, em tom apagado. Era cinza, em
   caixa alta e so' com o titulo. */
.lm-seq__faixa {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--lm-pink-line);
    background: var(--lm-pink-softer);
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
}

.lm-seq__faixa-icone {
    align-self: center;
    margin-right: 0.15rem;
    color: var(--lm-pink);
}

.lm-seq__faixa-titulo {
    font-weight: 700;
}

.lm-seq__faixa-sub {
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

/* Playlist inteira agendada: o grupo de cima fica sem nenhuma linha, e um
   container de altura zero nao recebe arraste - a midia da Biblioteca nao teria
   onde ser solta e o grupo de cima nunca voltaria a existir. A faixa tracejada
   e' o alvo, e ela diz o que fazer. */
.lm-seq__cima--vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    border: 1px dashed var(--lm-border);
    border-radius: var(--lm-radius);
    margin: 0.5rem 0.75rem;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

.lm-seq__cima--vazio::after {
    content: "Arraste aqui um conteúdo sem agendamento";
}

/* PD-873 (18/09) — o estado vazio da sequência é a ÁREA DE SOLTAR da playlist
   nova. Ele vive dentro do container da `lm-drop-sequencia` (ver o comentário no
   `playlistEditor.html`), e estas duas regras existem para que arrastar por cima
   dele pareça arrastar por cima de algo: a caixa acende, como as linhas acendem
   quando recebem uma mídia no meio da lista. */
.lm-seq__vazio {
    border-radius: var(--lm-radius);
    transition: background-color 0.15s ease;
}

.lm-drop-ativo .lm-seq__vazio {
    background: var(--lm-pink-softer);
}

.lm-row__acoes {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    justify-content: flex-end;
}

/* PD-576 TASK-005 - `.lm-seq__foot` SAIU com o botao "Adicionar conteudo ao final"
   que era seu unico uso no produto. Sobra uma referencia em
   `.claude/specs/PD-456/harness/harness-grid-editor.html`, que e mockup de spec
   fechada e nao superficie do portal. */

/* A lista de telas em conflito no aviso de vinculo (31/08). Sem estilo proprio
   ela herdaria os marcadores e o recuo do <ul> do Bootstrap. */
.lm-conflict {
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

/* 31/08 - o codigo passou para a FRENTE do nome, na mesma linha. Ele e' o que
   identifica a tela no aparelho, e era o que a pessoa procurava primeiro; embaixo,
   em corpo menor, ele virava legenda de algo que ja se sabia. */
.lm-conflict__item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-mute);
}

.lm-conflict__item + .lm-conflict__item {
    margin-top: 0.4rem;
}

.lm-conflict__name {
    color: var(--lm-txt-title);
    font-size: 0.875rem;
    font-weight: 600;
}

/* `margin-left: auto` empurra o local para a direita: o par codigo+nome fica
   junto a esquerda, que e' a leitura que o pedido descreve. */
.lm-conflict__meta {
    margin-left: auto;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

/* PD-458 (revisao do print) - indicador de salvamento automatico, no lugar do
   antigo "Alteracoes nao salvas". */
.lm-saving {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-soft);
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.lm-saving.is-ok {
    color: var(--lm-on, #16a34a);
}

/* PD-456 - gravar virou requisicao, e requisicao falha. O mesmo vermelho da cota
   estourada: e o unico vermelho que esta tela usa para "algo esta errado". */
.lm-saving.is-error {
    color: var(--lm-off);
}

/* A cota voltou para a linha de metadados: quando estoura, ela avisa. */
.lm-meta__item.is-over {
    color: var(--lm-off);
    font-weight: 600;
}

.lm-meta__item.is-over i {
    color: var(--lm-off);
}

/* PD-739 - `.lm-meta__link` SAIU com o hiperlink de "Exibida em N telas", que o card
   mandou remover. Ela era a unica coisa que dava cara de link aquela linha: rosa, com
   sublinhado no hover e o icone de link externo menor. Mantida so' a `.lm-meta__item`,
   que e' a linha de metadados inteira. */

/* O status das telas voltou a Online / Offline, com o icone de sinal. */
.lm-linked__status.is-online {
    color: var(--lm-on, #16a34a);
}

.lm-linked__status.is-offline {
    color: var(--lm-off);
}

.lm-linked__status .fa-wifi {
    font-size: 0.75rem;
}

/* ==========================================================================
   Dados de demonstracao (Configuracoes)

   Andaime de apresentacao. Sai junto com o painel que ele estiliza quando a
   integracao entrar - o cabecalho do `LmDemoService.js` registra o porque.
   ========================================================================== */

.lm-seed {
    margin-top: 1rem;
}

.lm-seed .lm-panel__head {
    margin-bottom: 0.9rem;
}

.lm-seed__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 640px) {
    .lm-seed__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lm-seed__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.7rem 0.5rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
    text-align: center;
}

.lm-seed__stat strong {
    color: var(--lm-txt-title);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.1;
}

.lm-seed__stat span {
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
}

.lm-seed__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

/* ==========================================================================
   Editor de playlist — acerto de padrao visual (27/08)
   ========================================================================== */

/* O icone que abre um titulo de secao e ROSA, como o resto da identidade. O texto
   segue mudo: quem precisa achar o bloco de relance procura o icone, nao o rotulo em
   caixa alta. Vale para os tres do editor - Sequencia, Telas vinculadas e Conteudos -
   por isso a regra e do `.lm-section__title`, e nao de cada painel. */
.lm-section__title > i:first-child {
    color: var(--lm-pink);
}

/* O "+" de cada conteudo e o botao mais clicado do editor: e por ele que a sequencia
   e montada. Em cinza e redondo ele desaparecia no meio da linha. No print e um
   quadrado de cantos arredondados, fundo branco, contorno rosa claro e o sinal rosa. */
.lm-libitem .lm-iconbtn {
    flex: 0 0 auto;
    /* Um pouco menor que o padrao de 2rem: o que sai daqui vira largura de titulo. */
    width: 1.875rem;
    height: 1.875rem;
    border: 1px solid var(--lm-pink-line);
    border-radius: 0.5rem;
    background: var(--lm-surface);
    color: var(--lm-pink);
}

.lm-libitem .lm-iconbtn:hover,
.lm-libitem .lm-iconbtn:focus-visible {
    border-color: var(--lm-pink);
    background: var(--lm-pink-soft);
}

/* Itens da lista de conteudos, no formato do print.

   Cada item era um CARTAO - contorno proprio, fundo, cantos e 0,5rem de respiro ate o
   proximo. No print eles sao linhas separadas por um fio, sem cartao e sem folga entre
   elas: cabe mais item na mesma altura de painel, e a moldura repetida parava de
   competir com a miniatura, que e o que a pessoa procura. */
.lm-libitem {
    gap: 0.65rem;
    padding: 0.5rem 0.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.lm-libitem + .lm-libitem {
    margin-top: 0;
    border-top: 1px solid var(--lm-border);
}

/* `display: block` nao e enfeite: sem ele o corte com reticencias NUNCA valeu.
   `.lm-libitem__title` e um <span>, e `overflow` e `text-overflow` nao se aplicam a
   elemento inline - a regra estava escrita desde a PD-456 e nao fazia nada. O titulo
   comprido nao virava "Black Friday — contagem…", ele vazava por cima do vizinho, e
   como o `white-space: nowrap` impedia a quebra, ninguem via erro nenhum. */
.lm-libitem__title {
    display: block;
    line-height: 1.35;
}

/* A segunda linha: tipo e tamanho a esquerda, duracao a direita. */
.lm-libitem__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

.lm-libitem__type {
    min-width: 0;
    white-space: nowrap;
}

.lm-libitem__dur {
    flex: 0 0 auto;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
}

/* A barra de rolagem da lista encostava no botao "+" do ultimo item visivel. */
.lm-liblist {
    padding-right: 0.25rem;
}

/* --------------------------------------------------------------------------
   O grid da pagina (revisao do print, 27/08)
   -------------------------------------------------------------------------- */

/* `stretch` no lugar de `start`: e ele que faz as duas colunas terminarem na mesma
   linha. Com `start` cada coluna parava na propria altura, e o painel de Conteudos
   acabava onde a lista dele acabasse - solto no meio da tela. */
.lm-editor {
    align-items: stretch;
}

/* A coluna da esquerda agora carrega o cabecalho da pagina junto com a sequencia. E o
   que poe Preview, Mais e a lixeira alinhados pela direita do painel, e nao pela borda
   da janela. */
.lm-editor__main {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

/* O "Voltar" e `inline-flex`. Num contexto de bloco isso o mantinha do tamanho do
   texto; como filho de uma coluna flex ele passa a esticar a largura inteira, e a
   faixa clicavel vai de ponta a ponta - invisivel, e so quem clicar no vazio a
   esquerda do titulo descobre. */
.lm-editor__main > .lm-back {
    align-self: flex-start;
}

/* ==========================================================================
   PD-875 (18/09) — O CABECALHO ALINHA COM O CONTEUDO DO PAINEL, e nao com a
   borda dele.

   "Alinhar o grid (titulo e conteudos, sequencia de playlists)."

   Medido antes, a 1600px: "Voltar", o titulo e a linha de meta comecavam em
   x=12 — a BORDA do painel da Sequencia —, enquanto o "SEQUENCIA DA PLAYLIST"
   comecava em 33 e a grade em 34. Os 21px de diferenca sao o `padding: 1.25rem`
   do `.lm-panel` mais o 1px da borda, e na tela eram uma escada: tres linhas de
   texto encostadas mais a esquerda que tudo o que vem abaixo.

   ⚠️ O RECUO E' NOS DOIS LADOS. So' a esquerda, o "Preview" do canto direito
   deixaria de bater com a borda direita do conteudo do painel — trocaria um
   desalinhamento por outro, do lado que ninguem estava olhando.

   ⚠️ E ELE E' SO' DO EDITOR (`.lm-editor__main >`). A listagem de playlists e as
   outras telas do modulo tem o cabecalho sobre uma GRADE de cartoes, e ali o
   alinhamento certo e' com a borda deles.

   As colunas da grade em si ja estavam alinhadas — medido no mesmo dia, Δ 0 em
   todas as oito entre o cabecalho e a linha. O que faltava era isto.
   ========================================================================== */
.lm-editor__main > .lm-page__head {
    padding-right: calc(1.25rem + 1px);
    padding-left: calc(1.25rem + 1px);
}

/* ⚠️ No "Voltar" e' MARGEM, e nao padding: ele e' o unico dos tres que e'
   CLICAVEL, e padding aqui esticaria a faixa do link por 21px de vazio a
   esquerda — a mesma armadilha que o `align-self: flex-start` logo acima veio
   resolver. */
.lm-editor__main > .lm-back {
    margin-left: calc(1.25rem + 1px);
}

/* O painel da Sequencia absorve a sobra da coluna.

   Sem isto o alinhamento das bases so funcionava numa direcao. As duas COLUNAS ja
   terminavam juntas - o `stretch` cuida disso -, mas quem manda na altura da linha e a
   mais alta das duas, e nem sempre e a esquerda: com uma sequencia curta, o piso da
   coluna da direita (Telas vinculadas + o cabecalho fixo de Conteudos + a lista no
   minimo) e maior, e ai sobrava um vazio embaixo da Sequencia - medido: 152px, painel
   parando em 699 numa coluna de 851.

   Com `flex: 1 1 auto` no painel, a sobra vai para dentro dele e as duas bases batem
   nos dois sentidos: sequencia longa, Conteudos estica; sequencia curta, Sequencia
   estica. */
.lm-editor__main > .lm-panel {
    flex: 1 1 auto;
}

/* `sticky` sai. Ele existia para o painel acompanhar a rolagem quando a coluna da
   direita era curta; agora ela vai ate embaixo, e um filho sticky dentro de uma coluna
   que estica briga com o proprio `stretch` - o painel para de crescer e a base volta a
   nao bater com a da sequencia. */
.lm-editor__side > .lm-panel--aside {
    position: static;
    top: auto;
}

/* O painel da BIBLIOTECA e quem come a sobra da coluna. E daqui que sai o "termina na
   mesma linha da sequencia".

   ⚠️ PD-739 - A MIRA E' A CLASSE, e nao a posicao. Ate 11/09 estas regras pegavam o
   `:last-child` de `.lm-editor__side`, e por isso a Biblioteca tinha de ser o ultimo
   painel — a PD-645 chegou a entrar com Noticias ANTES dela so' por causa disto. Com o
   card pedindo Telas, Biblioteca, Quadro, Noticias, o seletor passou a ser
   `.lm-library-panel`, que viaja com o painel. Trocar de volta para `:last-child` faz
   Noticias esticar e a lista de conteudos parar de rolar por dentro, sem erro nenhum. */
.lm-editor__side > .lm-library-panel {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

/* Virar coluna flex muda o significado do que ja estava escrito nos filhos, e um deles
   mordeu: `.lm-search` tem `flex: 1 1 240px` porque nasceu numa barra de ferramentas
   HORIZONTAL, onde 240px e largura minima. Dentro de uma coluna os mesmos 240px viram
   ALTURA - e com `flex-grow: 1` o campo de busca ainda esticava para comer a sobra,
   abrindo um vao entre ele e o "Enviar conteudo". Aqui so a lista cresce; todo o resto
   fica do tamanho do proprio conteudo. */
.lm-editor__side > .lm-library-panel > * {
    flex: 0 0 auto;
}

/* A lista para de ter altura fixa de 26rem e passa a ocupar o que sobrar do painel,
   rolando por dentro quando nao couber.

   A base e `0`, e nao `auto`, e essa e a linha que faz a coisa toda funcionar. Com
   `auto` a lista entra na conta pela altura do CONTEUDO dela, entao a coluna da direita
   passava a ser a mais alta e era ELA quem definia a altura da linha do grid: a
   sequencia parava em 699px e o painel de Conteudos ia at� 1040px, exatamente o
   contrario do pedido. Com base `0` a lista nao reivindica altura nenhuma, a esquerda
   volta a mandar, e a lista se acomoda no que sobrar.

   `min-height` evita o outro extremo - uma sequencia de dois itens espremendo a lista
   a ponto de nao caber uma linha. */
.lm-editor__side > .lm-library-panel .lm-liblist {
    min-height: 8rem;
    max-height: none;
    flex: 1 1 0;
}

/* Numa coluna so - celular e tablet - nada disso vale: os paineis voltam a ser blocos
   empilhados, com a lista na altura fixa de antes. O ponto de corte e o MESMO que
   derruba o grid para uma coluna (linha 1108); usar outro numero abriria uma faixa de
   larguras com a coluna ja empilhada e a lista ainda esticando. */
@media (max-width: 1199.98px) {
    .lm-editor__side > .lm-library-panel {
        display: block;
    }

    .lm-editor__side > .lm-library-panel .lm-liblist {
        max-height: 26rem;
    }
}

/* ==========================================================================
   19. Biblioteca ligada ao servidor (PD-456, 28/08)

   Duas coisas que so passaram a existir quando a tela deixou de nascer pronta:
   o aviso de FALHA de leitura, e a lista de quem trava uma exclusao.
   ========================================================================== */

/* Faixa de erro. Diferente da `.lm-notice`, que avisa sobre uma acao que nao
   cabe; esta diz que a leitura falhou, e por isso ela e' vermelha e traz o
   botao de tentar de novo. Sem ela, rede caida se disfarcaria de "biblioteca
   vazia" — a tela convidaria a enviar o primeiro arquivo para quem talvez
   tenha duzentos. */
.lm-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--lm-radius);
    font-size: 0.8125rem;
}

.lm-alert > i {
    margin-top: 0.15rem;
}

.lm-alert > div {
    flex: 1 1 auto;
    min-width: 0;
}

.lm-alert p {
    margin: 0.15rem 0 0;
}

.lm-alert--danger {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(254, 226, 226, 0.6);
    color: #991b1b;
}

.lm-alert--danger .lm-muted {
    color: #b91c1c;
}

/* A lista de playlists que travam a exclusao de um conteudo (o 409 do
   `DELETE /api/cms/contents/{id}`). Cada linha e' um link: a proxima acao de
   quem le e' ir ate aquela playlist e tirar o item de la. */
.lm-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.lm-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--lm-border);
    font-size: 0.8125rem;
}

.lm-list li:first-child {
    border-top: 0;
}

.lm-list li > i {
    color: var(--lm-txt-soft);
}

/* ==========================================================================
   Prévia do player (PD-456, 28/08)

   O palco é 16/9 e PRETO, e os dois não são decoração: é o formato e o fundo da
   TV. Qualquer outra proporção mostraria um enquadramento que a tela não vai ter,
   e é justamente o enquadramento que a pessoa abre a prévia para conferir.
   ========================================================================== */

/* 18/09 (a pedido) — A IDENTIDADE DO LM NO MODAL: a "sala escura" da TV.

   O modal inteiro fica no escuro da barra do ListenMedia (`--lm-bar-bg`), e o
   rosa aparece so' onde ha acao ou estado: a faixa sob o cabecalho, o play, o
   item em cartaz e a barra de progresso. Rosa espalhado vira decoracao e deixa
   de apontar.

   ⚠️ Tudo aqui e' escopado por `.lm-playerprev`. O `.lm-preview-stage*` e' o
   MESMO palco da Home ("Em exibicao agora"), que continua claro — as regras
   daquele bloco, mais abaixo, nao mudaram. */
.lm-playerprev {
    --lm-prev-bg: #15151b;
    --lm-prev-panel: #1b1b22;
    --lm-prev-line: rgba(255, 255, 255, 0.08);
    --lm-prev-txt: rgba(255, 255, 255, 0.86);
    --lm-prev-muted: rgba(255, 255, 255, 0.5);
}

/* `color-scheme: dark` deixa a barra de rolagem da lista no escuro: a nativa,
   clara, era a unica coisa branca do modal. */
.lm-playerprev .modal-content {
    overflow: hidden;
    border: 1px solid var(--lm-prev-line);
    background: var(--lm-prev-bg);
    color: var(--lm-prev-txt);
    color-scheme: dark;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.lm-playerprev .modal-header.lm-playerprev__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--lm-prev-line);
    background: var(--lm-bar-bg);
}

/* A faixa da marca, colada na base do cabecalho. */
.lm-playerprev__head::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--lm-gradient);
    content: '';
}

.lm-playerprev__marca {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
}

.lm-playerprev__id {
    min-width: 0;
    flex: 1 1 auto;
}

.lm-playerprev__kicker {
    margin: 0 0 0.1rem;
    color: var(--lm-pink-light);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lm-playerprev .modal-title {
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-playerprev__sub {
    margin: 0.15rem 0 0;
    color: var(--lm-prev-muted);
    font-size: 0.75rem;
}

.lm-playerprev__selo {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--lm-prev-line);
    border-radius: var(--lm-radius-pill);
    background: rgba(255, 255, 255, 0.05);
    color: var(--lm-prev-muted);
    cursor: help;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
}

.lm-playerprev .btn-close {
    flex: 0 0 auto;
    margin: 0 0 0 0.25rem;
}

/* ⚠️ `padding: 0 !important`: o `modal-bootstrap4-compat.css` crava
   `.modal-body { padding: 1.5rem !important }` em TODO modal, e ele vencia o
   `p-0` do template — a lista escura ficava solta a 24px da borda (medido). */
.lm-playerprev .modal-body {
    padding: 0 !important;
    background: var(--lm-prev-bg);
    color: var(--lm-prev-txt);
}

@media (max-width: 575px) {

    .lm-playerprev__selo {
        display: none;
    }
}

/* PD-686 — O BLOCO LIGADO QUE NÃO PRODUZIU QUADRO.

   ⚠️ É AVISO, e não erro. O `--lm-warn` existe para isso: vermelho diria que a
   prévia falhou, e ela não falhou — a playlist tocou, e é exatamente assim que a
   TV vai se comportar. O que falta é o quadro, e a faixa diz por quê.

   Ela fica ACIMA do palco, e não dentro dele: dentro, sumiria junto com a lista
   no modo expandido, que é justamente quando alguém está olhando com atenção. */
.lm-playerprev__aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid rgba(217, 119, 6, 0.35);
    background: rgba(217, 119, 6, 0.14);
    color: #fde68a;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.lm-playerprev__aviso i {
    margin-top: 0.15rem;
    color: #fbbf24;
}

/* Palco à esquerda, sequência à direita. Em `is-full` a lista some e o palco
   ocupa a largura toda — é o "expandir" do controle. */
.lm-playerprev__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17rem;
}

.lm-playerprev__grid.is-full {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 991.98px) {
    .lm-playerprev__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lm-preview-stage {
    min-width: 0;
    background: #000;
}

.lm-preview-stage__box {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}

/* Sem `aspect-ratio` a caixa colapsa e o palco vira uma tira — mesmo remédio do
   `.lm-card__thumb`. */
@supports not (aspect-ratio: 16 / 9) {
    .lm-preview-stage__box {
        height: 0;
        padding-top: 56.25%;
    }
}

/*
 * As duas camadas do buffer duplo. A de trás fica montada e invisível até a
 * mídia carregar; então elas trocam de papel. Sem isso há um flash entre um item
 * e o outro que a TV não tem.
 *
 * A transição é curta de propósito: ela existe para esconder o instante da
 * troca, não para virar efeito. O player não faz fade.
 */
.lm-preview-stage__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.12s linear;
}

.lm-preview-stage__layer.is-front {
    opacity: 1;
}

/* `contain` na imagem e `cover` no vídeo — é o que o player faz, e a prévia não
   pode "melhorar" o enquadramento dele. Uma imagem fora de 16/9 aparece com
   tarja, que é exatamente o que vai aparecer na tela. */
.lm-preview-stage__layer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lm-preview-stage__layer video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PD-608 — o quadro de aulas, que entra como PÁGINA num `<iframe>`.

   Sem `width`/`height` explícitos o iframe cai no tamanho padrão do navegador
   (300x150), e o quadro apareceria como um retângulo pequeno no canto superior
   esquerdo de um palco preto — parecido demais com "não carregou".

   `display: block` tira a folga de linha de base que o iframe herda de
   `inline`, e `border: 0` porque o `frameborder` do HTML não vale em CSS
   moderno. O fundo branco é o do próprio quadro: enquanto ele não chega, um
   iframe transparente sobre o palco preto pisca escuro. */
.lm-preview-stage__layer iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

/* 18/09 - o painel do quadro LADO A LADO. A largura vem por `ng-style` (o
   `size` do JSON); a altura e' a do palco. ⚠️ `height` explicito: o iframe e'
   elemento substituido, e `top: 0; bottom: 0` nao o estica (300x150). Por cima
   das camadas, que andam para o lado e nunca o cobrem. */
/* 21/09 - A BARRA INFORMATIVA da previa, no desenho "Telejornal": rodape escuro
   segmentado por divisorias, com o valor em caixa alta e o credito embaixo.

   ⚠️ ALTURA EM POR CENTO (9%), e nao em pixel: o palco da previa muda de tamanho
   com a janela, e uma altura fixa daria uma faixa gorda no palco pequeno e uma
   tira no grande — a previa deixaria de responder "como vai aparecer".

   ⚠️ O CREDITO NUNCA SOME. Cotacao e previsao sao de terceiro numa tela publica,
   e a atribuicao costuma ser condicao de uso do provedor. */
.lm-playerprev__barra {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    height: 9%;
    background: #12121a;
    border-top: 0.4% solid var(--lm-pink);
    color: #fff;
}

.lm-playerprev__barraitem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15em;
    height: 100%;
    padding: 0 2%;
    min-width: 0;
}

/* Os pedacos de um item (o clima tem dois) ficam na MESMA linha, com o credito
   unico embaixo dos dois. */
.lm-playerprev__barralinha {
    display: flex;
    align-items: center;
    gap: 1.6vh;
    min-width: 0;
}

.lm-playerprev__barraparte {
    display: flex;
    align-items: center;
    gap: 0.7vh;
    min-width: 0;
}

/* ⚠️ `flex: 0 0 auto` no icone. Sem isso o SVG encolhe ate sumir quando o texto
   nao cabe — e' a mesma pedra do botao largo do painel do Estudio, onde o icone
   saia pela borda. */
.lm-playerprev__barraicone {
    flex: 0 0 auto;
    width: 2.6vh;
    height: 2.6vh;
    display: block;
}

.lm-playerprev__barratexto { white-space: nowrap; }

.lm-playerprev__barraitem + .lm-playerprev__barraitem {
    border-left: 1px solid rgba(255, 255, 255, 0.13);
}

/* A data encosta na borda direita, como na referencia. */
.lm-playerprev__barraitem.is-data { margin-left: auto; }

.lm-playerprev__barralinha {
    font-size: 1.7vh;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.lm-playerprev__barrafonte {
    font-size: 1vh;
    opacity: 0.62;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.lm-preview-stage__painel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    height: 100%;
    border: 0;
    background: #fff;
}

.lm-preview-stage__msg {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    max-width: 80%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.875rem;
    text-align: center;
}

.lm-preview-stage__msg--erro {
    color: #fca5a5;
}

.lm-preview-stage__bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
}

.lm-preview-stage__bar span {
    display: block;
    height: 100%;
    background: var(--lm-brand, #fc3a7d);
}

/* 18/09 — o palco no escuro: respiro em volta, cantos arredondados e a
   barra de progresso no degrade da marca. So' dentro do modal (ver o topo
   deste bloco). */
.lm-playerprev .lm-preview-stage {
    padding: 1rem 1rem 0;
    background: transparent;
}

.lm-playerprev .lm-preview-stage__box {
    border-radius: var(--lm-radius);
    box-shadow: 0 0 0 1px var(--lm-prev-line), 0 14px 36px rgba(0, 0, 0, 0.5);
}

.lm-playerprev .lm-preview-stage__bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
}

.lm-playerprev .lm-preview-stage__bar span {
    background: var(--lm-gradient);
}

.lm-playerprev__controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1rem 1rem;
}

.lm-playerprev__controls .lm-iconbtn {
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(255, 255, 255, 0.07);
    color: var(--lm-prev-txt);
}

.lm-playerprev__controls .lm-iconbtn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* O play/pausa e' A acao do palco: maior, e no rosa da marca. */
.lm-playerprev__controls .lm-playerprev__play {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--lm-gradient);
    box-shadow: 0 6px 18px rgba(252, 58, 125, 0.35);
    color: #fff;
    font-size: 0.9375rem;
}

.lm-playerprev__controls .lm-playerprev__play:hover {
    background: var(--lm-gradient);
    filter: brightness(1.08);
}

.lm-playerprev__pos {
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
    padding-left: 0.5rem;
    color: var(--lm-prev-muted);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-playerprev__pos strong {
    color: #fff;
}

.lm-playerprev__pos .lm-muted {
    color: var(--lm-prev-txt);
}

.lm-playerprev__expand {
    flex: 0 0 auto;
    margin-left: auto;
}

/* A sequencia: painel escuro ao lado do palco, da ALTURA dele.

   ⚠️ `contain: size` (>=992px): sem ele a lista entra na conta da altura da
   linha, e uma playlist de 40 itens esticaria o modal ate' a lista caber. Com
   ele quem manda e' o palco, e a lista rola por dentro — o mesmo recurso da
   coluna de templates do Estudio. Era `max-height: 32rem`, que deixava uma
   faixa vazia embaixo da lista quando o palco era mais alto (medido). */
.lm-playerprev__list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 1rem 0.75rem;
    border-left: 1px solid var(--lm-prev-line);
    background: var(--lm-prev-panel);
    overflow-y: auto;
}

.lm-playerprev__listhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0.25rem 0.5rem;
    color: var(--lm-prev-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lm-playerprev__conta {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.lm-playerprev__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--lm-prev-txt);
    font-size: 0.8125rem;
    text-align: left;
    transition: background-color 0.15s ease;
}

.lm-playerprev__item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* O item em cartaz: fundo rosa translucido e o fio da marca a esquerda. */
.lm-playerprev__item.is-current {
    background: rgba(252, 58, 125, 0.16);
    box-shadow: inset 3px 0 0 var(--lm-pink);
    color: #fff;
    font-weight: 600;
}

.lm-playerprev__n {
    display: inline-flex;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--lm-prev-muted);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.lm-playerprev__item.is-current .lm-playerprev__n {
    background: var(--lm-pink);
    color: #fff;
}

.lm-playerprev__tipo {
    flex: 0 0 auto;
    width: 1rem;
    color: var(--lm-prev-muted);
    font-size: 0.75rem;
    text-align: center;
}

.lm-playerprev__item.is-current .lm-playerprev__tipo {
    color: var(--lm-pink-light);
}

.lm-playerprev__title {
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-playerprev__dur {
    flex: 0 0 auto;
    color: var(--lm-prev-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 992px) {

    .lm-playerprev__list {
        contain: size;
    }
}

/* Com a lista embaixo do palco (telas estreitas), a borda vai para cima. */
@media (max-width: 991.98px) {

    .lm-playerprev__list {
        max-height: 16rem;
        border-top: 1px solid var(--lm-prev-line);
        border-left: 0;
    }
}


/* ==========================================================================
   22. PD-608 - O ACORDEAO DA COLUNA DO EDITOR, e o bloco "Quadro de aulas"

   ⚠️ TODO NOME AQUI FOI CONFERIDO COM `grep` NO PROPRIO ARQUIVO ANTES DE
   NASCER. O `listenmedia.css` e um namespace PLANO: classe repetida nao da
   erro, da comportamento. Em 28/08 uma `.lm-preview` repetida na raiz de um
   `.modal` deixou o editor inteiro inclicavel, sem um erro no console.

   Um nome foi RECUSADO por isso: o interruptor NAO se chama `.lm-switch` -
   aquele ja existe, e e o alternador ListenPlay / ListenMedia do menu do topo.
   Aqui ele e `.lm-flip`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   O cabecalho que abre e fecha

   Ele REUSA `.lm-section__title`, e nao copia o visual dela: assim o painel
   colapsavel continua identico ao titulo de secao do resto do editor (caixa
   alta, 0.75rem, o `letter-spacing`) e herda de brinde a regra que pinta de
   ROSA o `> i:first-child` - o icone do painel continua rosa como os outros.
   O que esta classe acrescenta e so o que e de BOTAO.
   -------------------------------------------------------------------------- */
.lm-panel__toggle {
    width: 100%;
    /* A margem inferior de `.lm-section__title` sai: colapsado, ela deixaria um
       vao embaixo de um cabecalho que nao abriu nada. Quem afasta o conteudo
       agora e o `margin-top` do proprio corpo. */
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.lm-panel__toggle:focus-visible {
    outline: 2px solid var(--lm-pink);
    outline-offset: 3px;
    border-radius: var(--lm-radius);
}

/* O titulo come a sobra e empurra a contagem e o chevron para a direita. */
.lm-panel__titulo {
    flex: 1 1 auto;
    min-width: 0;
}

/* 24/09 - painel que so abre com midia na sequencia (Barra informativa):
   desativado e fechado, com o motivo curto ao lado do titulo. */
.lm-panel.is-bloqueado .lm-panel__toggle {
    cursor: not-allowed;
    opacity: 0.55;
}

.lm-panel__aviso {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--lm-txt-muted);
}

.lm-panel__chevron {
    flex: 0 0 auto;
    color: var(--lm-txt-soft);
    transition: transform 0.18s ease;
}

/* Aberto, a seta aponta para cima. A rotacao vem da classe do PAINEL, e nao de
   uma classe propria do chevron: um estado, um lugar. */
.lm-panel.is-aberto .lm-panel__chevron {
    transform: rotate(180deg);
    color: var(--lm-pink);
}

.lm-panel__body {
    margin-top: 0.85rem;
}

/* --------------------------------------------------------------------------
   O acordeao dentro da coluna que estica

   A coluna do editor tinha uma regra que fazia o painel da BIBLIOTECA crescer
   para a base dele bater com a da Sequencia, a esquerda. (Ate a PD-739 a mira
   era `:last-child`; hoje e' a classe `lm-library-panel` — ver o bloco acima.)
   Com o acordeao ela precisa de duas correcoes, e nenhuma e cosmetica:

   1. COLAPSADO, ele nao pode esticar - viraria um cabecalho de 800px de altura.
   2. ABERTO, quem tem de crescer e o CORPO, e nao mais o painel: a regra antiga
      da `flex: 0 0 auto` a todo filho direto do painel, e o filho direto passou
      a ser o `.lm-panel__body`. Sem isto a lista de conteudos perde o
      `flex: 1 1 0` que a faz rolar por dentro.

   Os outros paineis NAO esticam quando abertos, de proposito: "Telas
   vinculadas" com duas telas esticado ate embaixo seria um painel quase todo
   vazio. Alinhar as bases so faz sentido para a lista, que rola.
   -------------------------------------------------------------------------- */
.lm-editor__side > .lm-library-panel:not(.is-aberto) {
    display: block;
    flex: 0 0 auto;
}

.lm-editor__side > .lm-library-panel.is-aberto > .lm-panel__body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.lm-editor__side > .lm-library-panel.is-aberto > .lm-panel__body > * {
    flex: 0 0 auto;
}

/* ...MENOS a propria lista. O `> *` acima tem QUATRO classes no seletor e ganha da
   regra que da' `flex: 1 1 0` a `.lm-liblist` (tres classes, mais acima) — e a
   `.lm-liblist` e' filha DIRETA do `.lm-panel__body`, entao ela e' pega pelo `> *`
   junto com a busca e o rodape. O efeito e' exatamente o que o comentario acima diz
   que nao pode acontecer: a lista volta a `flex: 0 0 auto`, cresce ate a altura do
   conteudo e PARA DE ROLAR POR DENTRO — quem rola passa a ser a pagina.

   Nao da' erro nenhum, e por isso a prova estrutural da PD-739 nao pegou: ela conferiu
   que o seletor virou `.lm-library-panel` e que nao havia mais `:last-child`, o que
   continua verdade. So' aparece medindo no navegador, e foi assim que apareceu
   (TASK-017, 14/09): `.lm-liblist` com `scrollHeight === clientHeight` e 22 itens.

   A correcao e' so' devolver a especificidade — mesma forma do `> *`, com a classe da
   lista no lugar do universal. */
.lm-editor__side > .lm-library-panel.is-aberto > .lm-panel__body > .lm-liblist {
    flex: 1 1 0;
}

/* --------------------------------------------------------------------------
   21/09 — O PAINEL DO QUADRO ROLA POR DENTRO, como o da Biblioteca

   "tem que ser igual a sessão de biblioteca, gere o scroll dentro da sessão do
   Quadro de aulas, nao na tela". Com a Barra informativa dentro dele, o painel
   ficou alto o bastante para empurrar a rolagem para a PÁGINA — e aí o
   indicador "Salvo" do rodapé some da vista no momento em que ele aparece.

   A forma é a mesma da Biblioteca, e de propósito: a classe viaja com o painel
   (`lm-board-panel`), e não a posição. Mirar `:nth-child` seria repetir o erro
   que a PD-739 corrigiu no `:last-child`.

   ⚠️ A DIFERENÇA PARA A BIBLIOTECA é quem rola: lá é a `.lm-liblist`, um filho;
   aqui é o PRÓPRIO `.lm-panel__body`. O corpo do quadro é uma pilha de blocos
   (interruptor, campos, seção da barra, indicador), e nenhum deles é "a lista"
   que deveria crescer — eleger um daria um bloco esticado e o resto espremido.

   ⚠️ COLAPSADO ele NÃO pode esticar: viraria um cabeçalho de 800px. É a mesma
   correção que o acordeão cobrou da Biblioteca.

   ⚠️ 29/09 — E ABERTO ELE TAMBÉM NÃO ESTICA. Até aqui era `flex: 1 1 auto`, igual
   à Biblioteca: com a coluna indo até a base da janela (`lm-ate-a-base`), o painel
   crescia junto — medido a 1920x911, 421px de painel para 56px de conteúdo. "A
   sessão do quadro de aulas nunca vai ter tanta informação quanto a playlist." A
   Biblioteca estica porque a LISTA dela cresce com o acervo; o quadro é uma pilha
   curta de campos. Hoje: `flex: 0 1 auto` — a altura do CONTEÚDO, e ainda
   ENCOLHE (rolando por dentro) quando a janela é baixa demais para ele. ⚠️ Não
   volte o `1` do grow "para alinhar a base com a Sequência": é esse o defeito. */
.lm-editor__side > .lm-board-panel {
    display: flex;
    min-height: 0;
    flex: 0 1 auto;
    flex-direction: column;
}

.lm-editor__side > .lm-board-panel:not(.is-aberto) {
    display: block;
    flex: 0 0 auto;
}

/* O piso de 10rem foi junto (29/09): com o painel na altura do conteúdo, ele
   só servia para desenhar branco embaixo de um bloco desligado (56px). */
.lm-editor__side > .lm-board-panel.is-aberto > .lm-panel__body {
    min-height: 0;
    flex: 0 1 auto;
    overflow-y: auto;

    /* Respiro para a barra de rolagem não encostar nos campos. */
    padding-right: 0.35rem;
}

/* Numa coluna só — celular e tablet — nada disso vale: os painéis voltam a ser
   blocos empilhados e quem rola é a página, como em todo o resto da tela. O
   ponto de corte é o MESMO das outras regras do editor; outro número abriria
   uma faixa de larguras com comportamento híbrido. */
@media (max-width: 1199.98px) {
    .lm-editor__side > .lm-board-panel {
        display: block;
    }

    .lm-editor__side > .lm-board-panel.is-aberto > .lm-panel__body {
        overflow-y: visible;
        padding-right: 0;
    }
}

/* Numa coluna so - celular e tablet - a coluna nao estica, e a lista volta a
   ter altura fixa. Mesmo ponto de corte das outras regras do editor; outro
   numero abriria uma faixa de larguras com um comportamento hibrido. */
@media (max-width: 1199.98px) {
    .lm-editor__side > .lm-library-panel.is-aberto > .lm-panel__body {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   O interruptor (`.lm-flip`, NAO `.lm-switch` - ver o aviso no topo da secao)
   -------------------------------------------------------------------------- */
.lm-flip {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

/* O `<input>` fica no DOM e invisivel, e nao `display: none`: assim ele
   continua focavel pelo teclado e continua sendo o alvo do `<label for>`. */
.lm-flip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.lm-flip__trilho {
    display: block;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-border-strong);
    transition: background 0.18s ease;
}

.lm-flip__trilho::after {
    content: "";
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.1875rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 16, 20, 0.28);
    transition: transform 0.18s ease;
}

.lm-flip input:checked + .lm-flip__trilho {
    background: var(--lm-pink);
}

.lm-flip input:checked + .lm-flip__trilho::after {
    transform: translateX(1.25rem);
}

.lm-flip input:focus-visible + .lm-flip__trilho {
    outline: 2px solid var(--lm-pink);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   As linhas de configuracao do bloco

   Rotulo a esquerda, valor ou campo a direita, como no print. Em painel de
   22rem os dois nao cabem lado a lado quando o campo e um `<select>`, entao a
   linha QUEBRA: o rotulo em cima, o campo embaixo em largura inteira. E a mesma
   escolha que a duracao do item da biblioteca ja tinha feito - forcar duas
   colunas num painel estreito termina em reticencias.
   -------------------------------------------------------------------------- */
.lm-cfg__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.lm-cfg__rotulo {
    flex: 1 1 8rem;
    min-width: 0;
    margin: 0;
    color: var(--lm-txt);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* PD-739 - `.lm-cfg__valor` e `.lm-cfg__valor--on` SAIRAM com as duas linhas de
   leitura do Quadro de aulas (Status e Fonte dos dados), que eram os unicos usos das
   duas classes no produto. O que resta no bloco e' rotulo + campo, e disso cuidam a
   `.lm-cfg__rotulo` e a `.lm-cfg__campo`. */

/* O campo desce para a linha de baixo e ocupa a largura toda. `flex-basis:
   100%` com `flex-wrap` no pai e o que forca a quebra sem precisar de media
   query. */
.lm-cfg__campo {
    flex: 1 1 100%;
}

.lm-cfg__linha--flip {
    /* O interruptor nao quebra linha: ele e estreito e fica sempre a direita do
       proprio rotulo. */
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.lm-cfg__intervalo {
    margin-top: 1rem;
    margin-bottom: 0;
}

/* 21/09 - a BARRA INFORMATIVA mora dentro do painel "Quadro de aulas", como
   uma sub-seção. Ela grava num bloco separado (`info_bar`), então precisa de um
   corte visual: sem ele, o interruptor dela parece mais um campo do quadro, e o
   "Salvo" de baixo pareceria ser do quadro. */
/* ⚠️ SEM BORDA PRÓPRIA (21/09). Ela tinha uma, e o `.lm-cfg__acoes` logo acima —
   o indicador de gravação do quadro — tem outra: eram DUAS linhas empilhadas
   sobre o título "Barra informativa", com a margem das duas no meio. "pode ser
   só um Divisor mesmo". O divisor é o do `.lm-cfg__acoes`; aqui fica só o
   respiro. */
.lm-cfg__secao {
    margin-top: 0.9rem;
}

.lm-cfg__secao-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    color: var(--lm-txt-title);
    font-size: 0.875rem;
    font-weight: 700;
}

/* ⚠️ 21/09 — o bloco das caixas APAGA com o interruptor desligado, e o
   `ng-disabled` sozinho não bastava: ele tira o clique do `<input>`, mas o
   rótulo ao lado continuava preto, e um texto legível ao lado de uma caixa que
   não responde é a pior das três leituras (a lição da PD-686). Aqui o conjunto
   inteiro diz "existe, mas ainda não". */
.lm-cfg__barra.is-desabilitada .lm-field__label,
.lm-cfg__barra.is-desabilitada .lm-checkline {
    opacity: 0.5;
}

.lm-cfg__barra.is-desabilitada .lm-checkline {
    cursor: not-allowed;
}

/* 20/09 - a barra informativa: tres interruptores empilhados.
   ⚠️ A classe da linha e' a `.lm-checkline` que ja existe (busca da
   Biblioteca, agendamento) - NAO nasceu uma `.lm-check`. O namespace deste
   arquivo e' PLANO, e nome parecido com um que ja existe e' como se ganha um
   `display` herdado por engano. Aqui so' entra o que a `.lm-checkline` nao
   resolve: o espaco entre as linhas e a atribuicao da fonte. */
.lm-cfg__barra {
    margin-top: 1.25rem;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lm-cfg__barra .lm-field__label {
    margin-bottom: 0.15rem;
}

/* "(fonte: INMET)" - menor e fraco, como fica na TV. O credito anda
   COLADO na informacao nos dois lugares: separar deixaria o editor dizendo
   menos do que a tela mostra. */
.lm-cfg__barra .lm-checkline em {
    font-style: normal;
    font-weight: 500;
    color: var(--lm-txt-muted);
}

/* PD-1358 (15/10) - O LOCAL DA TELA, no modal Nova/Editar tela. Ate aqui era o
   "Local do clima" do bloco Barra informativa (regras `lm-cfg__local*`, que
   sairam junto com o campo do editor). Nomes conferidos: `lm-field--local`,
   `lm-screen-local` e `lm-field__obrigatorio` estavam livres.

   LINHA PROPRIA, a ULTIMA do formulario (15/10, a pedido), fora da grade de
   campos. Tres colunas com o MESMO `gap` da grade de cima: o Estado cai embaixo
   da 1a coluna e a Cidade embaixo das outras duas — as bordas batem. Abaixo de
   576px, Estado e Cidade empilham.

   ⚠️ PD-1837 (29/10, a pedido): o campo VOLTOU PARA DENTRO da grade, com o
   rotulo "UF", logo depois do Local. Ele ocupa DUAS colunas da grade (a partir
   de 992px; abaixo, a linha inteira), e Estado e Cidade dividem o campo em duas
   metades. A margem de cima saiu: quem separa agora e' o `gap` da grade. */
@media (min-width: 992px) {
    #lmScreenModal .lm-grid2 > .lm-field--local {
        flex-basis: calc((100% - 1.7rem) / 3 * 2 + 0.85rem);
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    #lmScreenModal .lm-grid2 > .lm-field--local {
        flex-basis: 100%;
    }
}

.lm-screen-local {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: start;
}

/* PD-1837 — cada select do par tem o PROPRIO rotulo (Estado / UF). */
.lm-screen-local__campo {
    min-width: 0;
}

@media (max-width: 575.98px) {
    .lm-screen-local {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Erro: a mesma borda vermelha dos outros campos (`.lm-select.is-invalido`),
   nas duas caixas — o erro e' do par, nao de uma delas. */
.lm-screen-local.is-invalido .lm-sbusca__campo,
.lm-screen-playlist.is-invalido .lm-sbusca__campo {
    border-color: var(--lm-off);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* A lista do `lm-select-busca` abre POR CIMA dos campos no modal de tela, e nao
   no fluxo. No fluxo ela crescia a LINHA INTEIRA da grade: os campos vizinhos
   ficavam com um buraco branco embaixo e o modal pulava de posicao a cada
   abrir/fechar (pedido de 15/10: "ta abrindo um espaco em branco no modal").
   ⚠️ So' AQUI: no painel lateral do editor ela continua no fluxo, porque la o
   painel tem `overflow` e cortaria a lista (ver o `lm-select-busca`, 24/09).
   Aqui quem rola e' o `.modal-body`, e ha corpo de sobra abaixo da linha. */
#lmScreenModal .lm-sbusca__painel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 14rem;
    z-index: 20;
}

.lm-field__obrigatorio {
    color: var(--lm-off);
    font-weight: 700;
}

.lm-screen-local__retry {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/*
 * 24/09 - SELECT COM PESQUISA (`lm-select-busca`, LmFormDirectives.js). Mesmas
 * medidas do `.lm-select`, para os dois conviverem na mesma linha sem degrau.
 */
.lm-sbusca {
    position: relative;
}

.lm-sbusca__campo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    height: 2.5rem;
    padding: 0 0.85rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lm-sbusca.is-aberto .lm-sbusca__campo,
.lm-sbusca__campo:focus {
    border-color: var(--lm-pink);
    box-shadow: 0 0 0 3px var(--lm-pink-soft);
    outline: none;
}

.lm-sbusca.is-desabilitado .lm-sbusca__campo {
    opacity: 0.5;
    cursor: not-allowed;
}

.lm-sbusca__texto {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lm-sbusca__texto.is-vazio,
.lm-sbusca__campo .fas,
.lm-sbusca__vazio {
    color: var(--lm-txt-muted);
}

.lm-sbusca__campo .fas {
    font-size: 0.7rem;
}

/*
 * A lista abre NO FLUXO, empurrando o que vem abaixo, e nao flutuando: os painéis
 * laterais do editor tem rolagem propria (`overflow`), e uma lista `absolute`
 * saia cortada na borda deles (medido em 24/09 no Chrome).
 */
.lm-sbusca__painel {
    margin-top: 4px;
    padding: 0.4rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.lm-sbusca__busca {
    width: 100%;
    height: 2.1rem;
    padding: 0 0.65rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
}

.lm-sbusca__busca:focus {
    border-color: var(--lm-pink);
    outline: none;
}

.lm-sbusca__lista {
    max-height: 14rem;
    overflow-y: auto;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

.lm-sbusca__item,
.lm-sbusca__vazio {
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8125rem;
}

.lm-sbusca__item {
    cursor: pointer;
}

.lm-sbusca__item:hover {
    background: var(--lm-pink-softer);
}

.lm-sbusca__item.is-escolhido {
    background: var(--lm-pink-soft);
    color: var(--lm-pink-strong);
    font-weight: 600;
}

.lm-cfg__acoes {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lm-border);
    flex-wrap: wrap;
}

.lm-cfg__aviso {
    color: var(--lm-warn);
    font-size: 0.75rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   A nota informativa do bloco

   O print traz uma faixa rosa clara explicando o que vai acontecer. Aqui ela
   diz a unica coisa que a tela NAO consegue mostrar: que cada tela exibe o
   quadro da SUA unidade, e que unidade sem quadro cadastrado cai no
   comportamento de hoje.
   -------------------------------------------------------------------------- */
.lm-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: var(--lm-radius);
    background: var(--lm-pink-softer);
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.lm-note > i {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--lm-pink);
}

/* A mesma nota, em tom de alerta (15/09).

   Ela desenha a secao BLOQUEADA do bloco de Noticias: playlist sem midia nao
   exibe noticia, e o interruptor nao liga. Um controle que nao responde e nao
   explica e' a pior das tres leituras - quem clica nao sabe se o produto e'
   assim, se a tela travou, ou se foi ele que errou (a licao da PD-686).

   ⚠️ E' MODIFICADOR, e nao bloco novo: a forma (flex, ícone, respiro) e' a da
   `.lm-note`, e so a cor muda. Um bloco proprio traria uma segunda forma de
   desenhar a mesma coisa, e o `listenmedia.css` e' um namespace PLANO - dois
   desenhos para "uma faixa de recado" e' como se perde a consistencia. */
.lm-note--alerta {
    background: var(--lm-warn-soft);
    color: #7c4a03;
}

.lm-note--alerta > i {
    color: var(--lm-warn);
}

/* A pilula "ativo" no cabecalho do bloco. `.lm-count` ja desenha a forma; esta
   so troca o rosa pelo verde de estado ligado. */
.lm-count--on {
    background: rgba(22, 163, 74, 0.12);
    color: var(--lm-ok);
    text-transform: none;
    letter-spacing: 0;
}


/* ==========================================================================
   23. PD-645 - O SELETOR DE TEMAS DE NOTICIA (multipla selecao)
   ==========================================================================

   ⚠️ ELE EXISTE PORQUE O PORTAL NAO TEM MULTISELECT. Nao ha componente, nem
   diretiva, nem `<select multiple>` com ponte para `ng-model` em lugar nenhum
   do projeto. O `bootstrap-select` esta carregado e suporta `multiple`, mas
   escreve fora do digest.

   ⚠️ E A `.lm-select` NAO SERVE para um listbox: ela tem `appearance: none` e a
   seta em `background-image`, que num `<select multiple>` fica desenhada no
   meio da caixa. Por isso o controle e' um `<button>` que se PARECE com o
   campo, e o painel abre abaixo dele.

   Os nomes foram conferidos contra o arquivo inteiro antes de serem escritos:
   `lm-multi*` estava livre. `lm-chips` NAO estava - o namespace aqui e' plano,
   e classe repetida nao da erro, da comportamento (foi assim que a `.lm-preview`
   duplicada deixou o editor inclicavel em 28/08). */

.lm-multi {
    position: relative;
}

/* A caixa fechada. Ela copia a forma da `.lm-select` a mao, em vez de reusar a
   classe: reusando, viria junto a seta em `background-image`, e aqui a seta e'
   um `<i>` de verdade que gira ao abrir. */
/* ⚠️ A TIPOGRAFIA E A ALTURA SAO AS DO `.lm-select` (PD-954, 18/09).
   Ele nasceu com `font: inherit` e herdava os 16px do portal, enquanto o
   `<select>` logo abaixo tem `font-size: 0.8125rem !important` — na tela, dois
   campos empilhados com letras de tamanhos diferentes. Foi o que o card chamou de
   "fonte do primeiro dropdown desproporcionalmente maior".

   Os valores estao repetidos, e nao herdados: `.lm-select` os declara com
   `!important` (o `main.css` do ListenPlay estiliza `select` por elemento), e um
   `<button>` nao casa com aquele seletor. Mexeu num, confira o outro. */
.lm-multi__campo {
    display: flex;
    height: 2.5rem;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0 0.85rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
}

.lm-multi__campo:hover {
    border-color: var(--lm-border-strong);
}

.lm-multi.is-aberto .lm-multi__campo {
    border-color: var(--lm-pink);
}

/* O resumo do que esta escolhido. Uma linha so: com oito temas marcados o texto
   passa de cem caracteres, e um campo que cresce empurraria o resto do painel a
   cada clique. */
.lm-multi__resumo {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sem nada escolhido o texto e' placeholder, e tem de parecer placeholder -
   senao "Selecione os temas" se le como um tema chamado assim. */
.lm-multi__resumo.is-vazio {
    color: var(--lm-txt-muted);
}

.lm-multi__chevron {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--lm-txt-muted);
    transition: transform 0.15s ease;
}

.lm-multi.is-aberto .lm-multi__chevron {
    transform: rotate(180deg);
}

/* O painel. `position: absolute` para nao empurrar a nota e o CTA para baixo a
   cada abertura, e `z-index` acima do painel vizinho da coluna.

   ⚠️ `max-height` com rolagem propria: sao oito temas hoje, e a lista cresce
   quando alguem contrata um feed. Sem o teto, o painel passaria do rodape da
   coluna e o "Todos" ficaria fora da tela. */
.lm-multi__painel {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow);
}

/* ⚠️ A LISTA ABERTA TAMBEM TEM A TIPOGRAFIA DO CAMPO (PD-954, 24/09).
   O ajuste de 18/09 alinhou so' a caixa fechada: as linhas do painel continuavam
   herdando os 16px do portal (e o `label` do `main.css`), e o card voltou dizendo
   "a visualizacao dos itens selecionados esta ok, mas a listagem ainda esta com a
   fonte grande". Mesmo 0.8125rem do `.lm-multi__campo` e do `.lm-select` - mexeu
   num, confira os outros. Vale tambem para o Relatorio de Retail midia, que usa o
   mesmo `lm-multi`. */
.lm-multi__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.4rem 0.5rem;
    border-radius: var(--lm-radius);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.3;
    font-weight: 400;
    color: var(--lm-txt);
    cursor: pointer;
}

.lm-multi__item:hover {
    background: var(--lm-surface-soft);
}

/* PD-1068 (24/09) - a caixa marcada em ROSA, e nao no azul padrao do navegador. */
.lm-multi__item input {
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--lm-pink);
}

/* "Todos" e' atalho, e nao um tema. A separacao evita que ele se leia como o
   primeiro item da lista - o que faria alguem esperar ve-lo gravado.
   PD-1068: o rotulo em rosa, como no modelo do card. */
.lm-multi__item--todos {
    border-bottom: 1px solid var(--lm-border);
    border-radius: 0;
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem;
    font-weight: 600;
    color: var(--lm-pink);
}

.lm-multi__estado {
    margin: 0;
    padding: 0.75rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--lm-txt-muted);
    text-align: center;
}

.lm-multi__estado--erro {
    color: var(--lm-warn);
}

.lm-multi__retentar {
    display: block;
    margin: 0 auto 0.5rem;
}

/* ==========================================================================
   LM-HOME — a Home do ListenMedia  (state `lmHome`)

   ⚠️ TODO PREFIXO DESTA SECAO E' NOVO, e foi conferido contra o resto deste
   arquivo antes de nascer: `lm-home`, `lm-modebar`, `lm-demobar`, `lm-stat`,
   `lm-panelcard`, `lm-chart`, `lm-plcard`, `lm-quick`, `lm-live`.

   O namespace daqui e' PLANO, e classe repetida nao da erro: da comportamento.
   Em 28/08 a previa do player nasceu com `.lm-preview` na raiz de um `.modal` —
   e `.lm-preview` ja existia, com `display: flex`. Como este arquivo carrega
   DEPOIS do bootstrap.css e as duas regras tem a mesma especificidade, o flex
   venceu o `.modal { display: none }`: o modal passou a ficar sempre
   renderizado, `position: fixed` na viewport inteira, e o editor de playlist
   ficou inclicavel. Nenhum erro no console.

   O QUE E' REUSO DE PROPOSITO, e nao descuido: `.lm-preview-stage*` (o palco
   16/9, as duas camadas e a barra de progresso sao os MESMOS do modal de previa,
   porque o motor tambem e' o mesmo — `LmPlayerEngine`), `.lm-empty*`,
   `.lm-btn*`, `.lm-iconbtn`, `.lm-dot` e `.lm-select`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabecalho e a barra de modo
   -------------------------------------------------------------------------- */

/*
 * ⚠️ O CABECALHO ENCOLHEU EM 09/09, a pedido do solicitante, e o que encolheu
 * foi o ESPACO — nao a tipografia. O `.lm-page__title` continua com o tamanho
 * das outras quatro telas do modulo; reduzi-lo so aqui faria a Home parecer
 * outra aplicacao, e a barra do topo esta a poucos pixels dele.
 */
.lm-home__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lm-home__head .lm-page__sub {
    margin-top: 0.15rem;
}

/*
 * A barra de modo. Discreta porque e' ferramenta de quem apresenta, e nao
 * conteudo da tela — mas nao invisivel: um modo de demonstracao que se liga sem
 * a pessoa perceber e' indistinguivel de dado errado.
 */
.lm-modebar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.lm-modebar__group {
    display: inline-flex;
    padding: 0.15rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-mute);
}

.lm-modebar__opt {
    min-width: 1.75rem;
    padding: 0.15rem 0.45rem;
    border: 0;
    border-radius: var(--lm-radius-pill);
    background: transparent;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.4;
}

.lm-modebar__opt.is-on {
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow);
    color: var(--lm-pink);
}

/*
 * O interruptor de apresentacao.
 *
 * ⚠️ NAO SE CHAMA `.lm-switch` NEM `.lm-flip`: os dois ja existem neste arquivo
 * — o primeiro e' o alternador ListenPlay/ListenMedia do menu do topo, o segundo
 * e' o interruptor do bloco de Quadro de aulas no editor. Terceiro interruptor,
 * terceiro nome.
 */
.lm-modebar__switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface);
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
    font-weight: 600;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.lm-modebar__switch:hover {
    border-color: var(--lm-border-strong);
    color: var(--lm-txt-muted);
}

.lm-modebar__switch.is-on {
    border-color: var(--lm-pink-line);
    background: var(--lm-pink-softer);
    color: var(--lm-pink-strong);
}

.lm-modebar__trilho {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-border-strong);
    transition: background-color 0.15s ease;
}

.lm-modebar__trilho::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s ease;
}

.lm-modebar__switch.is-on .lm-modebar__trilho {
    background: var(--lm-pink);
}

.lm-modebar__switch.is-on .lm-modebar__trilho::after {
    transform: translateX(0.75rem);
}

/*
 * A faixa de aviso do modo apresentacao.
 *
 * ⚠️ ELA E' O QUE SEPARA ESTE MODO DO CENARIO DE DEMONSTRACAO QUE A REGRA DO
 * MODULO PROIBE RECRIAR. Aquele era silencioso e misturava conteudo inventado
 * com dado real; este anuncia, na tela, o tempo inteiro em que esta ligado.
 * Nao esconder, nao encolher, nao transformar em `toast` que some.
 */
.lm-demobar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--lm-pink-line);
    border-radius: var(--lm-radius);
    background: var(--lm-pink-softer);
    color: var(--lm-txt);
    font-size: 0.8125rem;
}

.lm-demobar i {
    color: var(--lm-pink);
}

.lm-demobar strong {
    color: var(--lm-pink-strong);
}

.lm-demobar__sair {
    margin-left: auto;
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--lm-pink-line);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface);
    color: var(--lm-pink);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.lm-demobar__sair:hover {
    background: var(--lm-pink);
    color: #fff;
}

/* --------------------------------------------------------------------------
   O corpo, e as TRES variantes de layout
   -------------------------------------------------------------------------- */

/*
 * ⚠️ AS VARIANTES SAO TEMPORARIAS: elas existem para escolher UMA. Escolhida,
 * as outras duas saem daqui junto com o seletor do template.
 *
 * As tres usam o MESMO markup — os quatro blocos sao filhos diretos deste grid,
 * e cada variante so redefine `grid-template-areas` e as colunas. Um markup por
 * variante seria triplicar a tela e criar tres para manter.
 */
.lm-home__body {
    display: grid;
    gap: 1.25rem;
}

.lm-home__stats { grid-area: stats; }
.lm-chart       { grid-area: chart; }
.lm-quick       { grid-area: quick; }
.lm-live        { grid-area: live; }

/*
 * A disposicao: cartoes numa faixa, grafico e acoes lado a lado, player embaixo.
 *
 * ⚠️ HOUVE TRES VARIANTES AQUI (`lm-home--a|b|c`), para escolher uma. O
 * solicitante escolheu esta em 09/09, e as outras duas sairam INTEIRAS no mesmo
 * dia — as classes, o seletor `A B C` do template e o estado no controller.
 * Layout alternativo vivo e sem dono e' a mesma armadilha do
 * `LmUi.DISPOSITIVOS`: o proximo a mexer nao sabe qual e' o de verdade.
 */
.lm-home__body {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        'stats stats'
        'chart quick'
        'live  live';
}

/* Abaixo de 62rem tudo vira uma coluna: nao ha largura para distribuir, e a
   ordem de leitura passa a ser a do markup. */
@media (max-width: 62rem) {
    .lm-home__body {
        grid-template-columns: 1fr;
        grid-template-areas:
            'stats'
            'chart'
            'quick'
            'live';
    }
}

/* --------------------------------------------------------------------------
   Os quatro cartoes
   -------------------------------------------------------------------------- */

/*
 * `auto-fit` + `minmax`, e nao quatro colunas fixas: abaixo de ~62rem os cartoes
 * quebram em duas linhas de dois sozinhos, e abaixo de ~30rem em uma coluna. Sem
 * isso, o "2/4" e o "50% da sua operacao" saem um por cima do outro no celular.
 *
 * ⚠️ Na variante C o cartao tem menos largura (a coluna lateral come 19rem), e o
 * `minmax` menor evita que quatro cartoes de 15rem forcem duas linhas cedo
 * demais.
 */
.lm-home__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    gap: 1rem;
}

/*
 * ⚠️ `align-items: center`, e nao `flex-start`: o icone centra na ALTURA DO
 * CARTAO, e nao na primeira linha de texto.
 *
 * Com `flex-start` ele encostava no topo, alinhado com o rotulo ("Telas online")
 * e visivelmente acima do numero, que e' o elemento pesado do cartao. O bloco de
 * texto tem tres linhas de alturas diferentes; ancorar o icone na primeira
 * fazia cada cartao parecer desalinhado do vizinho conforme o rotulo quebrasse
 * ou nao.
 */
.lm-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow);
}

/*
 * O MARCADOR DE SAUDE, no canto superior direito dos dois primeiros cartoes.
 *
 * ⚠️ SEM CLASSE DE ESTADO ELE NAO APARECE. `saude()` devolve `''` quando a conta
 * nao tem tela nenhuma, e ai o ponto some — zero de zero nao e' 0% de saude, e'
 * ausencia de operacao. Um ponto vermelho na Home de quem acabou de criar a
 * conta anuncia um problema que nao existe.
 */
.lm-stat__dot {
    position: absolute;
    top: 0.85rem;
    right: 0.95rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.lm-stat__dot.is-ok {
    background: var(--lm-ok);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16);
}

.lm-stat__dot.is-alerta {
    background: var(--lm-warn);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
}

.lm-stat__dot.is-ruim {
    background: var(--lm-off);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16);
}

/*
 * ⚠️ O ICONE GANHOU ENFASE EM 09/09: fundo com o GRADIENTE da marca e glifo
 * branco, no lugar do rosa-claro com glifo rosa.
 *
 * O `--lm-gradient` e' o mesmo do botao primario do modulo — e' o que faz os
 * quatro cartoes lerem como do produto, e nao como quadradinhos genericos. A
 * sombra colorida e' o que os descola do branco do cartao.
 */
.lm-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    background: var(--lm-gradient);
    box-shadow: 0 4px 10px rgba(252, 58, 125, 0.28);
    color: #fff;
    font-size: 0.9375rem;
}

/* `min-width: 0` num filho de flex e' o que permite o texto truncar em vez de
   esticar o cartao — sem ele, um numero grande empurra o layout. */
.lm-stat__body {
    min-width: 0;
}

.lm-stat__label {
    margin: 0;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.lm-stat__value {
    margin: 0.1rem 0 0;
    color: var(--lm-txt-title);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.lm-stat__hint {
    margin: 0.1rem 0 0;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   O cartao-painel, base do grafico, das acoes e da previa
   -------------------------------------------------------------------------- */

.lm-panelcard {
    padding: 1.25rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow);
}

/*
 * O selo do titulo — o quadradinho com gradiente antes do nome do bloco.
 *
 * Ele substituiu o icone solto que ficava DENTRO do `<h2>`: com o glifo colado
 * no texto, o titulo lia como uma linha so e o icone nao marcava nada. Separado,
 * com o gradiente da marca, ele vira a ancora visual do bloco — que e' o papel
 * que a referencia de 09/09 lhe da.
 */
.lm-panelcard__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--lm-gradient);
    box-shadow: 0 4px 10px rgba(252, 58, 125, 0.26);
    color: #fff;
    font-size: 0.8125rem;
}

.lm-panelcard__title {
    margin: 0;
    color: var(--lm-txt-title);
    font-size: 1.0625rem;
    font-weight: 700;
}

.lm-panelcard__sub {
    margin: 0.15rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Exibicoes ao longo da semana
   -------------------------------------------------------------------------- */

.lm-chart__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lm-chart__id,
.lm-quick__head,
.lm-live__id {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.lm-quick__head {
    margin-bottom: 0.35rem;
}

/* O aviso de estimativa. Discreto de proposito — ele qualifica o numero, nao
   compete com ele —, mas com `cursor: help` para convidar ao `title`, que e'
   onde a explicacao inteira mora. */
.lm-chart__aviso {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-mute);
    color: var(--lm-txt-soft);
    cursor: help;
    font-size: 0.6875rem;
    font-weight: 600;
}

.lm-chart__peak {
    flex: 0 0 auto;
    padding: 0.3rem 0.7rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-mute);
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.lm-chart__peak strong {
    color: var(--lm-txt-title);
}

/*
 * A area de desenho. `padding-left` abre a calha dos rotulos do eixo, que sao
 * posicionados em relacao a ESTE elemento — por isso ele e' o `relative`.
 */
.lm-chart__plot {
    position: relative;
    padding-left: 2.25rem;
}

.lm-chart__ytick {
    position: absolute;
    left: 0;
    width: 2rem;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
    text-align: right;
    /* O rotulo centra na linha da grade; sem o deslocamento ele fica pendurado
       abaixo dela. */
    transform: translateY(-50%);
}

.lm-chart__canvas {
    position: relative;
    height: 10.5rem;
}

/*
 * ⚠️ `preserveAspectRatio="none"` VEM DO HTML, e este `width/height` e' o par
 * dele: o SVG passa a ocupar exatamente a caixa, e ai `x/720` e `y/180` em
 * porcentagem casam com o desenho. Com o padrao (`meet`) o SVG manteria a
 * proporcao do viewBox, sobraria espaco nas laterais, e os pontos — que sao HTML
 * por cima — apareceriam deslocados da linha.
 *
 * O preco e' que tudo dentro do SVG estica na horizontal. Por isso a linha e a
 * grade levam `vector-effect="non-scaling-stroke"` (espessura constante) e as
 * bolinhas NAO sao `<circle>`: virariam elipses.
 */
.lm-chart__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lm-chart__grid {
    stroke: var(--lm-border);
    stroke-width: 1;
}

/*
 * ⚠️ A AREA USA O DEGRADE DECLARADO NO PROPRIO SVG (`url(#lmChartFill)`), e os
 * `stop-color` dele sao a cor da marca ESCRITA POR EXTENSO — a unica duplicata
 * de cor deste arquivo, e ela e' deliberada: `stop-color: var(--lm-pink)` nao
 * resolve em parte dos navegadores que o portal atende, e o modo de falha e' o
 * pior possivel (a area preenche de PRETO, cobrindo o grafico inteiro).
 *
 * O `fill` aqui e' a rede: se o `<defs>` sumir do DOM, a area cai no rosa
 * translucido em vez de perder o preenchimento.
 */
.lm-chart__area {
    fill: var(--lm-pink-soft);
    fill: url(#lmChartFill);
}

/* Linha mais grossa e mais viva desde 09/09 ("mais contraste nas cores"): 2.5px
   com junta redonda, que e' o que sustenta a curva sem serrilhar nos picos. */
.lm-chart__line {
    fill: none;
    stroke: var(--lm-pink);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lm-chart__dot {
    position: absolute;
    width: 0.625rem;
    height: 0.625rem;
    margin: -0.3125rem 0 0 -0.3125rem;
    border: 2.5px solid var(--lm-surface);
    border-radius: 50%;
    background: var(--lm-pink);
    box-shadow: 0 1px 4px rgba(252, 58, 125, 0.45);
    cursor: default;
}

.lm-chart__labels {
    position: relative;
    height: 1.25rem;
    margin-top: 0.35rem;
}

.lm-chart__xtick {
    position: absolute;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    /* Mesma logica do eixo Y, no outro sentido: o rotulo centra no ponto. */
    transform: translateX(-50%);
}

/* As tres playlists sob o grafico. `auto-fit` pela mesma razao dos cartoes: com
   uma ou duas playlists elas ocupam a linha sem buraco. */
.lm-chart__foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--lm-border);
}

.lm-plcard {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border: 0;
    border-radius: var(--lm-radius);
    background: transparent;
    text-align: left;
    transition: background-color 0.15s ease;
}

.lm-plcard:hover {
    background: var(--lm-surface-soft);
}

.lm-plcard__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--lm-gradient);
    box-shadow: 0 3px 8px rgba(252, 58, 125, 0.24);
    color: #fff;
    font-size: 0.8125rem;
}

.lm-plcard__body {
    min-width: 0;
}

.lm-plcard__name {
    display: block;
    overflow: hidden;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-plcard__meta {
    display: block;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Acoes rapidas
   -------------------------------------------------------------------------- */

.lm-quick__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    text-align: left;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lm-quick__item:hover {
    border-color: var(--lm-pink-line);
    background: var(--lm-pink-softer);
}

.lm-quick__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.6rem;
    background: var(--lm-gradient);
    box-shadow: 0 3px 8px rgba(252, 58, 125, 0.24);
    color: #fff;
    font-size: 0.8125rem;
}

.lm-quick__body {
    flex: 1 1 auto;
    min-width: 0;
}

.lm-quick__name {
    display: block;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
}

.lm-quick__sub {
    display: block;
    overflow: hidden;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-quick__chevron {
    flex: 0 0 auto;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

/* O alerta de playlist vazia. Rosa, e nao amarelo: nao e' um erro do sistema,
   e' uma pendencia da operacao — a mesma familia visual do CTA ao lado. */
.lm-quick__alert {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--lm-pink-line);
    border-radius: var(--lm-radius);
    background: var(--lm-pink-softer);
}

.lm-quick__alerticon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--lm-pink);
    color: #fff;
    font-size: 0.75rem;
}

.lm-quick__alerttitle {
    margin: 0;
    color: var(--lm-pink-strong);
    font-size: 0.8125rem;
    font-weight: 700;
}

.lm-quick__alertsub {
    margin: 0.1rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

.lm-quick__alertlink {
    margin-top: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lm-pink);
    font-size: 0.75rem;
    font-weight: 600;
}

.lm-quick__alertlink:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Em exibicao agora
   -------------------------------------------------------------------------- */

/*
 * O cabecalho e' a PRIMEIRA LINHA do grid da coluna esquerda. O `margin-bottom`
 * saiu: quem espaca as linhas ali e' o `gap` do `.lm-live__meta`, e os dois
 * juntos dariam o dobro do respiro antes do seletor.
 */
.lm-live__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/*
 * ⚠️ O SELO DIZ "PREVIA", E ISSO E' CONTEUDO, NAO ESTILO. O bloco mostra a fila
 * que a TV recebe, mas nao a POSICAO dela — o player nao reporta em que item
 * esta. Um selo "AO VIVO" aqui (vermelho, pulsando) faria a Home discordar da TV
 * sem erro nenhum, e quem estivesse olhando acreditaria na Home.
 *
 * Por isso ele e' neutro, e nao vermelho: a cor tambem promete.
 */
.lm-live__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    padding: 0.25rem 0.6rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-mute);
    color: var(--lm-txt-muted);
    cursor: help;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
}

/*
 * DUAS colunas: as informacoes a esquerda, o player a direita.
 *
 * ⚠️ O PALCO DIMINUIU EM 09/09 ("em exibicao ta muito grande, tem dar uma
 * suavidade"). O 16/9 e' contrato — e' o formato da TV, e qualquer outra
 * proporcao mostraria um enquadramento que a tela nao tem —, entao a altura so
 * cai por um caminho: LARGURA. O palco saiu de ~2fr para ~1.55fr, e o
 * `max-width` poe um teto absoluto para telas largas, onde a fracao sozinha
 * devolveria o problema.
 *
 * ⚠️ ELA JA TEVE TRES COLUNAS, e a terceira era "Proximos na playlist". Nao a
 * recrie: o que estava nela — qual item esta em cartaz — agora aparece ao lado
 * dos controles, embaixo do palco, junto da barra de progresso.
 */
/*
 * ⚠️ O BLOCO OCUPA A SECAO INTEIRA, E QUEM ESTICA E' A COLUNA DA ESQUERDA.
 *
 * Duas tentativas anteriores foram descartadas no mesmo dia (09/09), e cada uma
 * errou para um lado:
 *
 *   1. `0.9fr / 1.2fr` com teto no palco — a coluna da DIREITA ficava maior que
 *      o palco que abrigava, e a diferenca virava um buraco morto encostado na
 *      margem direita;
 *   2. faixas fixas com `justify-content: center` — o buraco saiu da direita e
 *      virou dois, um de cada lado. Simetrico, mas ainda sobra.
 *
 * O que resolve e' a esquerda ser ELASTICA (`1fr`) e o palco ter um teto: o
 * residuo inteiro vai para a coluna de texto, que sabe o que fazer com ele (ver
 * o grid de dois campos logo abaixo). Nada sobra, e o palco continua menor do
 * que o "muito grande" de 855px.
 */
/*
 * ⚠️ O CABECALHO DO BLOCO ENTROU NA COLUNA DA ESQUERDA (09/09), e e' isso que
 * faz o topo do palco alinhar com o texto "Em exibicao agora".
 *
 * Antes o `<header>` era uma faixa sobre as duas colunas, e o palco comecava
 * abaixo dela. Agora ele e' a primeira linha do `.lm-live__meta`: o palco sobe,
 * ganha a altura que a faixa ocupava e, por 16/9, ganha largura na mesma
 * proporcao — os campos da esquerda encolhem no mesmo movimento, que era o
 * segundo pedido.
 *
 * O palco subiu de 33rem para 38rem de teto por isso. A esquerda continua
 * elastica: o residuo da secao vai todo para ela, e nao sobra respiro nas pontas
 * (ver o historico das duas tentativas em `.lm-home__body`).
 */
.lm-live__grid {
    display: grid;
    grid-template-columns: minmax(17rem, 1fr) minmax(0, 38rem);
    gap: 2rem;
    align-items: start;
}

.lm-live__stage {
    justify-self: stretch;
}

/*
 * A coluna de texto e' UMA SO, e os quatro blocos empilham em linhas inteiras:
 *
 *     [ PLAYLIST EM EXIBICAO  (seletor) ]
 *     [ Conteudos ] [ Ciclo             ]
 *     [ ONDE ESTA NO AR  (aparelho)     ]
 *     [ status                          ]
 *
 * ⚠️ HOUVE UMA VERSAO EM DUAS COLUNAS, e ela foi desfeita a pedido do
 * solicitante em 09/09. Naquela, "Conteudos/Ciclo" e "Onde esta no ar" dividiam
 * a mesma linha — o que espremia os tres numa faixa e fazia o cartao do aparelho
 * (o mais largo dos tres, porque leva nome e codigo) competir por largura com
 * dois numeros curtos.
 *
 * Empilhado, cada bloco tem a linha inteira e a leitura desce em ordem: qual
 * playlist, quanto conteudo, onde esta no ar, e se esta no ar. **Nao recrie as
 * duas colunas.**
 *
 * Quem divide e' so o `.lm-live__nums`, por dentro — dois numeros curtos lado a
 * lado numa linha inteira e' densidade; tres blocos de naturezas diferentes na
 * mesma linha e' aperto.
 */
.lm-live__meta {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0.85rem;
}

.lm-live__meta > .lm-live__field,
.lm-live__meta > .lm-live__nums,
.lm-live__meta > .lm-live__status {
    /* O `margin-bottom` de cada bloco sai: quem espaca agora e' o `gap` do grid.
       Com os dois, a coluna ficaria com o dobro do respiro entre as linhas. */
    margin-bottom: 0;
}



/* Numa coluna so, o palco vem PRIMEIRO: e' o que a pessoa abriu a Home para
   ver, e as informacoes leem melhor como legenda dele do que como cabecalho. */
@media (max-width: 62rem) {
    .lm-live__grid {
        grid-template-columns: 1fr;
    }

    .lm-live__stage {
        order: -1;
    }
}

/*
 * A coluna de informacoes.
 *
 * ⚠️ ELA SUBSTITUI QUATRO LINHAS SOLTAS, e a mudanca e' de hierarquia, nao de
 * enfeite: antes playlist, contagem, tela e status tinham o MESMO peso visual —
 * quatro paragrafos de 13px com um icone cada. Quem batia o olho nao achava o
 * dado mais importante, que e' QUAL programacao esta no ar.
 */
.lm-live__field {
    display: block;
}

.lm-live__label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Os dois numeros. `1fr 1fr` fixo, e nao `auto-fit`: sao sempre dois, e um
   deles sozinho numa linha inteira pareceria que o outro sumiu. */
.lm-live__nums {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.lm-live__num {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
}

/*
 * ⚠️ O PESO DESTES DOIS FOI ALIVIADO (09/09, pedido do solicitante): o valor
 * saiu de 700 e o rotulo de 600.
 *
 * Eles sao informacao de apoio dentro do bloco do player, e no peso antigo
 * competiam com os numeros dos quatro cartoes do topo — que sao o placar da
 * tela e os unicos que devem gritar. A hierarquia entre os dois FICA (o valor
 * continua mais forte que o rotulo); o que mudou foi o volume dos dois.
 */
.lm-live__numlabel {
    display: block;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 500;
}

.lm-live__numvalue {
    display: block;
    overflow: hidden;
    color: var(--lm-txt-title);
    font-size: 1.0625rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O cartao do aparelho: nome em cima, codigo de pareamento embaixo. */
.lm-live__device {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
}

.lm-live__deviceicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    background: var(--lm-surface);
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
}

/* `min-width: 0` num filho de flex e' o que deixa o nome truncar em vez de
   esticar a coluna inteira. */
.lm-live__deviceinfo {
    min-width: 0;
}

.lm-live__devicename {
    display: block;
    overflow: hidden;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Monoespacado como o `.lm-code` do cadastro de tela: e' um codigo para digitar
   numa TV, e caractere de largura fixa e' o que evita erro de leitura. */
.lm-live__devicecode {
    display: block;
    color: var(--lm-txt-soft);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.lm-live__none {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border: 1px dashed var(--lm-border-strong);
    border-radius: var(--lm-radius);
    color: var(--lm-txt-soft);
    font-size: 0.8125rem;
}

/* O status. A cor e' a informacao — por isso cada estado tem a sua, e nenhum
   deles herda a do vizinho. */
.lm-live__status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.lm-live__status.is-ativo {
    color: var(--lm-ok);
}

.lm-live__status.is-parado,
.lm-live__status.is-carregando {
    color: var(--lm-txt-muted);
}

.lm-live__status.is-erro {
    color: var(--lm-off);
}

.lm-live__stage .lm-preview-stage {
    overflow: hidden;
    border-radius: var(--lm-radius);
}

.lm-live__controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

/*
 * A posicao na fila e o titulo do item em cartaz, a direita dos controles.
 *
 * `min-width: 0` + `overflow` porque o titulo pode ser longo: sem eles a linha
 * empurra os botoes para fora da caixa em vez de truncar.
 */
.lm-live__pos {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    margin-left: auto;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

.lm-live__pos strong {
    color: var(--lm-txt-title);
}

.lm-live__postitle {
    overflow: hidden;
    color: var(--lm-txt-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* O separador entre a contagem e o titulo. Em CSS, e nao no template: com a fila
   vazia o titulo nao existe e o ponto sobraria solto na linha. */
.lm-live__postitle::before {
    content: '· ';
}

/* ==========================================================================
   PD-694 — arrastar conteudo da Biblioteca para a sequencia

   O feedback e' todo em CSS porque a diretiva so poe e tira classe: mesma
   divisao de trabalho da `lm-thumb`, e pelo mesmo motivo — assim os estados de
   arraste falham de um jeito so, sem cada template inventar o seu.
   ========================================================================== */

.lm-libitem[draggable='true'] {
    cursor: grab;
}

.lm-libitem.lm-arrastando {
    opacity: 0.45;
    cursor: grabbing;
}

/* A area inteira acende de leve enquanto o conteudo esta por cima: sem isso, a
   unica pista de que ali se pode soltar e' a linha fina de insercao, que some
   quando o cursor esta entre duas linhas. */
.lm-drop-ativo {
    outline: 2px dashed var(--lm-pink-line);
    outline-offset: 4px;
    border-radius: var(--lm-radius, 8px);
}

/* A linha de insercao. `inset` e nao `border`: borda muda a altura da linha e
   empurra a lista inteira um pixel a cada movimento do cursor — o efeito e' a
   sequencia tremendo enquanto se arrasta por cima dela. */
.lm-row--dropantes {
    box-shadow: inset 0 3px 0 -1px var(--lm-pink);
}

.lm-row--dropdepois {
    box-shadow: inset 0 -3px 0 -1px var(--lm-pink);
}

/* =====================================================================
   LISTEN ESTUDIO  (`views/listenmedia/studio.html`, state `lmStudio`)

   ⚠️ TUDO NESTE BLOCO E' DO ESTUDIO, e o namespace deste arquivo e' PLANO —
   classe repetida aqui nao da erro, da comportamento. (A previa do player ja
   deixou o editor de playlist inclicavel uma vez por causa disso, quando
   `.lm-preview` da raiz do modal bateu com a `.lm-preview` da caixa de previa
   do conteudo.) Por isso tudo aqui abaixo comeca por `lm-studio`, sem excecao,
   e nenhuma classe de fora deste bloco e' redefinida.

   ⚠️ PD-406 — ELE DEIXOU DE TER DATA PARA MORRER, e o parágrafo que dizia o
   contrário saiu daqui.

   Até 15/09 este bloco era contínuo e no fim do arquivo "de propósito: o
   Estúdio é um mock com data para morrer, e o dia em que a tela de verdade
   entrar, o que sai daqui sai inteiro, de uma vez". A tela de verdade ENTROU —
   é esta —, e a instrução deixou de valer. Deixá-la no lugar seria convidar a
   próxima pessoa a apagar o editor inteiro.

   Duas consequências práticas:

     · `.lm-empty__acoes` SAIU deste bloco (era da Biblioteca, e o "apagar de
       uma vez" a levaria junto). Ela está junto do `.lm-empty`;
     · `a.lm-studio__porta` FICA aqui, e agora sem risco: ela é da porta, que o
       card mantém, e não há mais ninguém para apagar o bloco.
   ===================================================================== */

.lm-studio__migalha {
    margin: 0 0.15rem;
    font-size: 0.6875rem;
    opacity: 0.6;
}

.lm-studio__migalha-atual {
    color: var(--lm-txt-title);
}

/* ---------------------------------------------------------------------
   A divisao da tela
   --------------------------------------------------------------------- */

/* As duas colunas do desenho: catalogo a esquerda, assistente e editor a
   direita. */
.lm-studio__grid {
    display: grid;
    grid-template-columns: minmax(20rem, 0.62fr) 1fr;
    gap: 1rem;
    align-items: start;
}

/* Abaixo disso o editor nao cabe ao lado do catalogo sem o palco virar um
   selo. Empilha: catalogo em cima, editor embaixo. */
@media (max-width: 1280px) {
    .lm-studio__grid {
        grid-template-columns: 1fr;
    }
}

/* A COLUNA DE TEMPLATES ACOMPANHA A ALTURA DO ASSISTENTE + EDITOR (17/09, a
   pedido). Antes era `align-items: start`, e o catalogo parava ~meio palmo acima
   da base do editor.

   ⚠️ QUEM DECIDE A ALTURA E' A COLUNA DA DIREITA, e o `contain: size` e' o que
   garante isso. Sem ele, a grade de 24 templates tambem contaria na altura da
   linha, e a linha cresceria ate a grade inteira caber — o contrario do pedido.
   Com ele, o catalogo mede "zero" para a grade, estica ate a linha e a lista
   rola por dentro (`flex: 1 1 0` + `min-height: 0`).

   So' com duas colunas: empilhado, `contain: size` deixaria o catalogo com a
   altura do `min-height` e nada mais. */
@media (min-width: 1281px) {
    .lm-studio__grid {
        align-items: stretch;
    }

    .lm-studio__catalogo {
        contain: size;
        min-height: 32rem;
    }

    .lm-studio__catalogo .lm-studio__tplgrid {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
    }

    /* Recolhido, o catalogo vira um trilho. O palco se remede sozinho porque o
       `lm-medida` observa a caixa dele. */
    .lm-studio__grid.is-catalogo-recolhido {
        grid-template-columns: 3.5rem 1fr;
    }

    /* ⚠️ E o palco CRESCE NA ALTURA, senao a largura ganha nao vira peca maior.
       Medido em 17/09: recolher levava o palco de 476px para 910px de largura, e
       a peca 16:9 continuava 450x253, presa aos 22rem de altura. Com 30rem (a
       mesma altura da previa) ela vai a ~811x456. Continua altura FIXA, entao o
       laco de medida do palco (ver "O PALCO") nao volta. */
    .lm-studio__grid.is-catalogo-recolhido .lm-studio__palco {
        height: 30rem;
    }
}

/* O trilho: invisivel com o catalogo aberto. */
.lm-studio__trilho {
    display: none;
}

/* Recolhido, so' o trilho fica. Pelo filho direto, e nao escondendo o painel: o
   `.lm-panel` continua desenhando a moldura em volta do trilho. */
.lm-studio__grid.is-catalogo-recolhido .lm-studio__catalogo {
    padding: 0;
}

.lm-studio__grid.is-catalogo-recolhido .lm-studio__catalogo > :not(.lm-studio__trilho) {
    display: none !important;
}

.lm-studio__grid.is-catalogo-recolhido .lm-studio__trilho {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.lm-studio__grid.is-catalogo-recolhido .lm-studio__trilho:hover {
    background: var(--lm-surface-soft);
    color: var(--lm-pink);
}

/* Com duas colunas o trilho e' vertical, e o rotulo tambem. */
@media (min-width: 1281px) {
    .lm-studio__grid.is-catalogo-recolhido .lm-studio__trilho {
        flex-direction: column;
        justify-content: flex-start;
        padding: 1rem 0;
    }

    .lm-studio__grid.is-catalogo-recolhido .lm-studio__trilho-txt {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        letter-spacing: 0.04em;
    }
}

.lm-studio__lado {
    display: grid;
    gap: 1rem;
}

.lm-studio__titulo {
    margin: 0;
    color: var(--lm-txt-title);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lm-studio__rotulo {
    margin: 0 0 0.4rem;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lm-studio__dica {
    margin: 0 0 0.75rem;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

/* ---------------------------------------------------------------------
   Coluna da esquerda — catalogo
   --------------------------------------------------------------------- */

.lm-studio__catalogo {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.lm-studio__busca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* O interruptor da identidade. E' o unico gradiente da coluna, e e' assim que
   ele se anuncia como a acao de maior alcance da tela (repinta os 24). */
.lm-studio__identidade {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: var(--lm-radius-lg);
    /* PD-1032 (24/09): DESLIGADO e' CINZA ("quando estiver desligado deixar
       cinza"); o rosa ficou para o ligado. */
    background: linear-gradient(96deg, #6b7280 20%, #9ca3af 120%);
    box-shadow: 0 4px 16px rgba(75, 85, 99, 0.22);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.lm-studio__identidade:hover {
    filter: brightness(1.06);
}

/* Ligado: o ROSA do print da PD-1032 (24/09, "quando estiver ligado deixar
   rosa"). Era verde desde 17/09. */
.lm-studio__identidade.is-on {
    background: var(--lm-gradient);
    box-shadow: 0 4px 16px rgba(252, 58, 125, 0.28);
}

.lm-studio__identidade-icone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--lm-radius-pill);
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.8125rem;
}

.lm-studio__identidade-txt {
    flex: 1 1 auto;
    min-width: 0;
}

.lm-studio__identidade-txt strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lm-studio__identidade-txt small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.6875rem;
    line-height: 1.35;
    opacity: 0.85;
}

/* O interruptor no fim do cartao (17/09), no lugar do X e da seta. E' o desenho
   do `.lm-flip__trilho`, com as cores trocadas para o fundo colorido do cartao:
   o cinza e o rosa do interruptor comum sumiriam no gradiente. */
.lm-studio__identidade-flip {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.32);
}

.lm-studio__identidade.is-on .lm-studio__identidade-flip {
    background: #ffffff;
}

.lm-studio__identidade.is-on .lm-studio__identidade-flip::after {
    background: var(--lm-pink);
    transform: translateX(1.25rem);
}

.lm-studio__identidade:focus-visible .lm-studio__identidade-flip {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Categorias */
.lm-studio__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.lm-studio__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.25rem;
    padding: 0 0.85rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface);
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.lm-studio__cat i {
    font-size: 0.75rem;
    opacity: 0.7;
}

.lm-studio__cat:hover {
    border-color: var(--lm-pink-line);
}

.lm-studio__cat.is-on {
    border-color: transparent;
    background: var(--lm-gradient);
    box-shadow: 0 3px 12px rgba(252, 58, 125, 0.25);
    color: #fff;
}

.lm-studio__cat.is-on i {
    opacity: 1;
}

/* Recortes — um degrau abaixo das categorias, porque sao um filtro do filtro */
.lm-studio__recortes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.lm-studio__recorte {
    height: 1.875rem;
    padding: 0 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-mute);
    color: var(--lm-txt-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lm-studio__recorte:hover {
    color: var(--lm-txt-title);
}

.lm-studio__recorte.is-on {
    background: var(--lm-pink-soft);
    border-color: var(--lm-pink-line);
    color: var(--lm-pink-strong);
}

/* ---------------------------------------------------------------------
   A grade de templates
   --------------------------------------------------------------------- */

/* ⚠️ TRES COLUNAS E `gap` DE 0.75rem (12px), E OS DOIS NUMEROS ESTAO
   REPETIDOS NO CONTROLLER (`definirMedida`, ramo 'grade'). E' de la' que sai
   a largura de cada miniatura, e a conta la' e' `(largura - 24) / 3`.

   Mexeu num, mexa no outro. O modo de falha e' mudo: com um `gap` maior aqui,
   as miniaturas passam a ser desenhadas mais largas do que a coluna, e o
   `overflow: hidden` do cartao corta a peca pela direita — sem erro nenhum, e
   parecendo escolha de design. */
.lm-studio__tplgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    /* 18/09 - as linhas NAO esticam. A grade tem altura propria (`flex: 1 1 0`
       com o catalogo esticado), e o `align-content` padrao de grid estica as
       linhas ate ocupar a altura toda: com poucos templates (um filtro, os
       Favoritos) sobrava um vao de centenas de pixels entre uma linha e outra. */
    align-content: start;
    /* A coluna nao rola com a pagina: com 24 templates, o editor a direita
       sairia da dobra so por causa dela. */
    max-height: 32rem;
    overflow-y: auto;
    /* PD-1045 (24/09): O ESPACO DA BARRA DE ROLAGEM FICA RESERVADO. Sem isto, num
       numero de templates perto do limite, a barra aparecia, a largura util
       encolhia, o `lm-medida="grade"` recalculava as miniaturas (menores), a
       lista deixava de transbordar, a barra sumia, as miniaturas cresciam de
       novo... — um laco de medida, e os cartoes "pulando" no grid. Com a calha
       fixa a largura medida nao depende de haver rolagem. */
    scrollbar-gutter: stable;
    padding-right: 0.25rem;
}

.lm-studio__tpl {
    position: relative;
    min-width: 0;
}

.lm-studio__tplbtn {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--lm-radius);
    background: var(--lm-surface-mute);
    /* Sem isto a caixa do quadro herda a entrelinha do botao e sobra uma tira
       de alguns pixels embaixo da miniatura. */
    line-height: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.lm-studio__tplbtn:hover {
    box-shadow: var(--lm-shadow-up);
    transform: translateY(-2px);
}

.lm-studio__tpl.is-aberto .lm-studio__tplbtn {
    border-color: var(--lm-pink);
    box-shadow: 0 0 0 3px var(--lm-pink-soft);
}

.lm-studio__tplfav {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--lm-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lm-studio__tplfav:hover {
    color: var(--lm-pink);
}

.lm-studio__tplfav.is-on {
    background: var(--lm-pink);
    color: #fff;
}

.lm-studio__tplselo {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--lm-radius-pill);
    background: rgba(255, 255, 255, 0.92);
    color: var(--lm-pink-strong);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lm-studio__tplnome {
    margin: 0.4rem 0 0;
    overflow: hidden;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-studio__tpl.is-aberto .lm-studio__tplnome {
    color: var(--lm-txt-title);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Assistente de criacao
   --------------------------------------------------------------------- */

.lm-studio__iahead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lm-studio__iaicone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-pink-soft);
    color: var(--lm-pink);
    font-size: 0.8125rem;
}

.lm-studio__iaicone--mudo {
    background: var(--lm-surface-mute);
    color: var(--lm-txt-muted);
}

.lm-studio__beta {
    padding: 0.1rem 0.45rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-pink-soft);
    color: var(--lm-pink-strong);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.lm-studio__iasub {
    margin: 0.35rem 0 0.85rem;
}

.lm-studio__iaform {
    display: flex;
    gap: 0.6rem;
}

.lm-studio__iacampo {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    /* E' um <label>, e o Bootstrap poe margem embaixo de todo label. */
    margin-bottom: 0;
}

.lm-studio__iacampo .lm-input {
    height: 2.75rem;
    padding-right: 2.75rem;
    border-radius: var(--lm-radius);
}

.lm-studio__iaanexo {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    border: 0;
    border-radius: var(--lm-radius);
    background: transparent;
    color: var(--lm-txt-soft);
    cursor: pointer;
    transform: translateY(-50%);
}

.lm-studio__iaanexo:hover {
    background: var(--lm-surface-mute);
    color: var(--lm-txt);
}

.lm-studio__iaform .lm-btn {
    height: 2.75rem;
    flex: 0 0 auto;
}

.lm-studio__atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
}

.lm-studio__atalho {
    height: 1.875rem;
    padding: 0 0.75rem;
    border: 1px solid var(--lm-pink-line);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-pink-softer);
    color: var(--lm-pink-strong);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lm-studio__atalho:hover {
    background: var(--lm-pink-soft);
}

.lm-studio__atalho[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* O historico do assistente */
.lm-studio__conversa {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--lm-border);
    max-height: 13rem;
    overflow-y: auto;
}

.lm-studio__conversahead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.lm-studio__limpar {
    padding: 0;
    border: 0;
    background: none;
    color: var(--lm-txt-soft);
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.lm-studio__limpar:hover {
    color: var(--lm-pink);
}

.lm-studio__fala {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
}

.lm-studio__falapedido {
    margin: 0 0 0.3rem;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
    font-style: italic;
}

.lm-studio__falaresumo {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
}

.lm-studio__falaresumo i {
    margin-top: 0.15rem;
    color: var(--lm-ok);
    font-size: 0.6875rem;
}

.lm-studio__faladetalhe {
    margin: 0.3rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

/* ---------------------------------------------------------------------
   Editor de peca — cabecalho
   --------------------------------------------------------------------- */

.lm-studio__editorhead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.lm-studio__editorident {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.lm-studio__editoracoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* O "Gerar midia" com menu. `position: relative` aqui e' o que ancora o menu. */
.lm-studio__gerar {
    position: relative;
    display: inline-flex;
}

.lm-studio__gerarbtn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 0.85rem;
}

.lm-studio__gerarcaret {
    padding: 0 0.7rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: none;
}

/* O risco que separa as duas metades do botao dividido. `inset` e nao
   `border-left`: borda somaria um pixel a largura e desalinharia o caret. */
.lm-studio__gerarcaret::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 0;
    width: 1px;
    height: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.lm-studio__menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 20;
    min-width: 15rem;
    padding: 0.35rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow-up);
}

.lm-studio__menu button {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 0;
    border-radius: var(--lm-radius);
    background: none;
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.lm-studio__menu button:hover {
    background: var(--lm-surface-mute);
}

.lm-studio__menu button i {
    width: 1rem;
    color: var(--lm-txt-soft);
    text-align: center;
}

/* ---------------------------------------------------------------------
   A oficina: barra, palco e ajustes
   --------------------------------------------------------------------- */

.lm-studio__oficina {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: stretch;
}

/* Na previa a barra e a coluna de ajustes saem do DOM (`ng-if`). Sem trocar as
   colunas aqui, o palco sozinho cairia na primeira — que e' `auto`, e encolhe
   ate o conteudo. */
.lm-studio.is-previa .lm-studio__oficina {
    grid-template-columns: 1fr;
}

.lm-studio__rail {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 4.5rem;
}

.lm-studio__tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.55rem 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
    color: var(--lm-txt-muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.625rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lm-studio__tool i {
    font-size: 0.9375rem;
}

.lm-studio__tool:hover {
    background: var(--lm-surface-mute);
    color: var(--lm-txt-title);
}

.lm-studio__tool.is-on {
    border-color: var(--lm-pink-line);
    background: var(--lm-pink-soft);
    color: var(--lm-pink-strong);
}

/* ---------------------------------------------------------------------
   O painel da ferramenta

   ⚠️ Ele FLUTUA sobre o palco (`position: absolute`), e nao ocupa uma coluna
   da grade. Ocupando, abrir uma ferramenta encolheria a peca — e a peca e' o
   que a pessoa esta' olhando enquanto mexe nela. Com o palco parado, so a
   camada de cima muda.
   --------------------------------------------------------------------- */

.lm-studio__flyout {
    position: absolute;
    top: 0;
    left: 5rem;
    z-index: 15;
    display: flex;
    flex-direction: column;
    width: 13.5rem;
    max-height: 100%;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow-up);
}

.lm-studio__flyhead {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--lm-border);
    color: var(--lm-txt-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.lm-studio__flyhead button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--lm-txt-soft);
    font-size: 0.8125rem;
    cursor: pointer;
}

.lm-studio__flyhead button:hover {
    color: var(--lm-txt-title);
}

.lm-studio__flybody {
    flex: 1 1 auto;
    padding: 0.75rem;
    overflow-y: auto;
}

.lm-studio__largo {
    width: 100%;
    margin-top: 0.5rem;
}

/* ⚠️ BOTAO LARGO NAO DEIXA O ICONE SAIR PARA FORA (17/09, relatado).
   `.lm-btn` e' `inline-flex` com `justify-content: center` e `white-space:
   nowrap`. Quando o conteudo passa da largura do botao, o excedente vaza pelos
   DOIS lados — e como o icone e' o primeiro filho, ele aparece FORA da borda
   esquerda, "pulando" do botao. Nao ha erro, nao ha corte: o desenho so' sai do
   lugar.

   Medido no painel de 216px, com o corpo de 214px e o botao em 190px:
   "Mostrar imagens da Biblioteca" media 200px de conteudo — icone 5px fora a
   esquerda e texto 5px fora a direita. Os outros quatro botoes largos do painel
   (94 a 151px) nunca vazaram.

   O texto daquele botao encolheu para "Escolher da Biblioteca" (151px, o mesmo
   do botao irmao do Fundo), e estas duas regras sao a TRAVA PARA O PROXIMO: o
   icone nunca encolhe, e o texto corta com reticencias em vez de empurrar o
   icone para fora. */
.lm-studio__largo > i {
    flex: 0 0 auto;
}

.lm-studio__largo > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lm-studio__campos {
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--lm-border);
}

.lm-studio__editortexto {
    min-height: 3.5rem;
    margin-bottom: 0.5rem;
}

.lm-studio__linha {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
}

.lm-studio__separa {
    width: 1px;
    height: 1.25rem;
    margin: 0 0.35rem;
    background: var(--lm-border);
}

.lm-studio__espaco {
    flex: 1 1 auto;
}

.lm-studio__valor {
    min-width: 2.25rem;
    color: var(--lm-txt-title);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.lm-studio__mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.875rem;
    height: 1.875rem;
    padding: 0 0.4rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.lm-studio__mini:hover {
    border-color: var(--lm-pink-line);
}

.lm-studio__mini.is-on {
    border-color: transparent;
    background: var(--lm-pink);
    color: #fff;
}

.lm-studio__mini[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.lm-studio__cores {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.lm-studio__cor {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 2px solid var(--lm-border);
    border-radius: var(--lm-radius-pill);
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.lm-studio__cor:hover {
    transform: scale(1.12);
}

.lm-studio__cor.is-on {
    border-color: var(--lm-pink);
    box-shadow: 0 0 0 2px var(--lm-pink-soft);
}

/* As listas dos paineis (textos, elementos) */
.lm-studio__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lm-studio__lista > li {
    margin-bottom: 0.25rem;
}

.lm-studio__lista button {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid transparent;
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lm-studio__lista button:hover {
    background: var(--lm-surface-mute);
}

.lm-studio__lista button.is-on {
    border-color: var(--lm-pink-line);
    background: var(--lm-pink-soft);
    color: var(--lm-pink-strong);
}

.lm-studio__lista button > i {
    margin-top: 0.15rem;
    width: 0.9rem;
    flex: 0 0 auto;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
    text-align: center;
}

.lm-studio__lista button > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-studio__lista button b {
    display: block;
    font-weight: 600;
}

.lm-studio__lista button small {
    display: block;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
    font-weight: 400;
}

/* Cenas prontas do painel Fundo (PD-406 fase 2: eram `.lm-studio__arte`, a MESMA
   classe do fundo do palco — as regras de um valiam para o outro). */
.lm-studio__cenas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.lm-studio__cena {
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--lm-radius);
    background: var(--lm-surface-mute);
    cursor: pointer;
    line-height: 0;
}

.lm-studio__cena img {
    display: block;
    width: 100%;
    height: 2.5rem;
    object-fit: cover;
}

.lm-studio__cena span {
    display: block;
    padding: 0.2rem 0.25rem;
    color: var(--lm-txt-muted);
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-studio__cena.is-on {
    border-color: var(--lm-pink);
}

/* As paletas SAIRAM com o painel "Cores" (18/09, a pedido). */

/* ---------------------------------------------------------------------
   18/09 - TEXTO COMO NO PAINT: o modo de inserir e a barra na caixa do texto
   --------------------------------------------------------------------- */

/* O cursor de "onde o texto vai ficar". `!important` porque a camada tem
   `cursor: move` com mais especificidade, e no modo de inserir o clique sobre
   uma camada tambem insere. */
.lm-studio__palco.is-inserindo-texto .lm-studio__quadro,
.lm-studio__palco.is-inserindo-texto .lm-studio__quadro * {
    cursor: crosshair !important;
}

.lm-studio__dicapalco {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    z-index: 16;
    margin: 0;
    padding: 0.35rem 0.75rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-txt-title);
    color: #ffffff;
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    transform: translateX(-50%);
}

.lm-studio__dicapalco i {
    margin-right: 0.35rem;
    color: var(--lm-pink-light);
}

/* A barra: posicionada pela `lm-studio-barra-texto`, que tambem a torna
   visivel — ate' a primeira medida ela nao aparece num lugar errado. */
.lm-studio__textbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 16;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow-up);
    visibility: hidden;
    /* PD-1032 (24/09): com a fonte e os tres estilos a barra cresceu; num palco
       estreito ela quebra em duas linhas em vez de vazar a oficina. */
    flex-wrap: wrap;
    max-width: 100%;
    /* 28/10: o tamanho natural, onde quer que ela esteja — sem isso, posta mais
       a direita ela encolhia ate o fim da oficina e quebrava em duas linhas. */
    width: max-content;
}

/* 28/10 — a alca que ARRASTA a barra (quem arrasta e' a `lm-studio-barra-texto`). */
.lm-studio__textalca {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    gap: 1px;
    padding: 0 0.3rem;
    margin-right: 0.1rem;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    cursor: grab;
    user-select: none;
}

.lm-studio__textalca:hover {
    color: var(--lm-txt-title);
}

.lm-studio__textbar.is-arrastando,
.lm-studio__textbar.is-arrastando .lm-studio__textalca {
    cursor: grabbing;
}

/* PD-1032 — o seletor de fonte, no modelo do print (caixa com o nome da familia,
   desenhado na propria fonte). */
.lm-studio__textfonte {
    width: 9.5rem;
    height: 1.75rem;
    padding: 0 0.4rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    color: var(--lm-txt-title);
    font-size: 0.75rem;
    cursor: pointer;
}

.lm-studio__textbar .lm-studio__valor {
    min-width: 2.2rem;
    text-align: center;
}

.lm-studio__textcor {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.2rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    cursor: pointer;
}

.lm-studio__textcor.is-on {
    border-color: var(--lm-pink);
}

.lm-studio__textcor span {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

.lm-studio__textcorpop {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 17;
    width: 14rem;
    padding: 0.65rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow-up);
}

/* Marca, no painel Logo */
.lm-studio__marca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
    font-size: 0.8125rem;
}

.lm-studio__marcacores {
    display: inline-flex;
    gap: 0.15rem;
}

.lm-studio__marcacores i {
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 0.2rem;
}

/* Camadas */
.lm-studio__camadas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lm-studio__camadas > li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.2rem;
    padding: 0.2rem 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
}

.lm-studio__camadas > li.is-on {
    border-color: var(--lm-pink-line);
    background: var(--lm-pink-soft);
}

.lm-studio__camadas > li.is-oculta {
    opacity: 0.5;
}

.lm-studio__camadanome {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.2rem 0.25rem;
    border: 0;
    background: none;
    color: var(--lm-txt);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.lm-studio__camadanome > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-studio__camadanome > i {
    flex: 0 0 auto;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
}

.lm-studio__cadeado {
    margin-left: auto;
}

.lm-studio__camadaacoes {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.1rem;
}

.lm-studio__camadaacoes button {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: var(--lm-txt-soft);
    font-size: 0.625rem;
    cursor: pointer;
}

.lm-studio__camadaacoes button:hover {
    background: var(--lm-surface);
    color: var(--lm-txt-title);
}

/* ---------------------------------------------------------------------
   O PALCO
   --------------------------------------------------------------------- */

/* ⚠️ A ALTURA E' FIXA, E ISSO NAO E' ENFEITE. A diretiva `lm-medida` mede esta
   caixa, e o controller usa a medida para dimensionar a peca que fica DENTRO
   dela. Altura vinda do conteudo fecharia o laco: mede, a peca cresce, mede
   de novo, cresce de novo. */
.lm-studio__palco {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22rem;
    padding: 0.75rem;
    overflow: auto;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background:
        linear-gradient(45deg, rgba(0, 0, 0, 0.025) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.025) 75%),
        linear-gradient(45deg, rgba(0, 0, 0, 0.025) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.025) 75%),
        var(--lm-surface-mute);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
}

.lm-studio.is-previa .lm-studio__palco {
    height: 30rem;
    background: var(--lm-bar-bg);
}

/* `margin: auto` no lugar de so' `align-items: center`: com zoom acima do
   ajuste, a peca fica maior que o palco, e a centralizacao por flex corta o
   topo e a esquerda — a parte que nao da' para rolar de volta. */
.lm-studio__palco lm-studio-quadro {
    display: block;
    margin: auto;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   O QUADRO (a peca desenhada) — tambem usado nas miniaturas
   --------------------------------------------------------------------- */

.lm-studio__quadrobox {
    position: relative;
    overflow: hidden;
    border-radius: 0.25rem;
    background: #0c0a09;
}

/* PD-1148 (26/10) — as fontes dos modelos do Claude Design, LOCAIS e com nome
   proprio ("LM ..."). Locais porque o PNG e o HTML da TV sao rasterizados no
   navegador: fonte de terceiro que nao chegou a tempo sai na reserva. Com nome
   proprio porque o catalogo de fontes da marca carrega a "Inter" do Google
   (400/700) e as duas declaracoes brigariam pela mesma familia. Subconjunto
   latin (cobre o portugues); licenca em assets/fonts/estudio/OFL.txt. */
@font-face {
    font-family: 'LM Archivo';
    src: url('../fonts/estudio/archivo-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'LM Inter';
    src: url('../fonts/estudio/inter-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'LM Bricolage Grotesque';
    src: url('../fonts/estudio/bricolage-grotesque-latin.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'LM DM Sans';
    src: url('../fonts/estudio/dm-sans-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: block;
}

.lm-studio__quadro {
    position: relative;
    overflow: hidden;
    /* ⚠️ `top left`: o `estiloDaCaixa()` calcula a caixa externa como
       `medida * escala`, e isso so' fecha se o encolhimento partir do canto.
       Com a origem no centro (o padrao), a peca fica deslocada dentro da
       propria caixa e as bordas somem sob o `overflow: hidden`. */
    transform-origin: top left;
    font-family: 'Inter', Arial, sans-serif;
}

.lm-studio__fundo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lm-studio__fundo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* `cover`: a arte e' sempre 16/9 e a peca pode ser 9/16. Esticar
       (`fill`) deformaria o degrade num borrao listrado. */
    object-fit: cover;
}

.lm-studio__layer {
    position: absolute;
}

/* ⚠️ `pre-wrap` VAI NO <span>, E NAO NA CAIXA. Custou um print para aparecer:
   na caixa, ele preserva tambem o recuo e as quebras da MARCACAO, e cada camada
   de texto nascia com seis linhas em branco embaixo do texto — 70% da altura da
   peca, o conteudo empurrado para o meio, e as camadas montadas umas sobre as
   outras. Nenhum erro, nenhum aviso: so' uma peca que parecia mal desenhada.

   Na caixa fica `normal`, que colapsa o espaco em branco solto. O `\n` de
   verdade — o dos recados institucionais, escrito no texto da camada — continua
   quebrando, porque quem o carrega e' o <span>. */
.lm-studio__layer.is-texto {
    white-space: normal;
    overflow-wrap: break-word;
}

.lm-studio__layer.is-texto > span {
    white-space: pre-wrap;
}

.lm-studio__quadro.is-editavel .lm-studio__layer {
    cursor: move;
}

.lm-studio__quadro.is-editavel .lm-studio__layer.is-travada {
    cursor: default;
}

/* ⚠️ `outline`, e nao `border`. Borda entra na caixa: uma moldura de 3px numa
   camada de texto empurraria o texto e a peca mudaria de desenho so' por ter
   sido selecionada. */
.lm-studio__quadro.is-editavel .lm-studio__layer:hover {
    outline: 2px solid rgba(255, 255, 255, 0.45);
    outline-offset: 2px;
}

.lm-studio__layer.is-selecionada {
    outline: 3px dashed var(--lm-pink) !important;
    outline-offset: 3px;
}

.lm-studio__logomark {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.3em 0.7em;
    border: 0.08em solid currentColor;
    border-radius: 999px;
}

.lm-studio__logomark b {
    font-weight: 800;
    letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------
   PD-406 fase 2 (17/09) — a foto, a edição de texto no palco, a alça e a
   animação de entrada
   --------------------------------------------------------------------- */

/* A foto preenche a caixa da camada; `object-fit` vem do `estiloDaImagem()`. */
.lm-studio__layer.is-imagem img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    user-select: none;
}

/* O texto em edição (duplo clique). A moldura é tracejada como a da seleção,
   mas branca: é outro estado, e o cursor de texto diz o resto. */
.lm-studio__editavel {
    display: block;
    min-width: 1em;
    white-space: pre-wrap;
    outline: 2px dashed rgba(255, 255, 255, 0.9);
    outline-offset: 4px;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    caret-color: currentColor;
}

.lm-studio__layer.is-editando {
    outline: 0 !important;
    cursor: text !important;
}

/* A alça de redimensionar. O tamanho vem do `estiloDaAlca()`, dividido pela
   escala do quadro — senão ela sumiria a 45% de zoom. */
.lm-studio__alca {
    position: absolute;
    border: 2px solid var(--lm-pink);
    border-radius: 3px;
    background: #ffffff;
    cursor: nwse-resize;
}

/* 29/10 — as alças da IMAGEM: bordas (só largura / só altura) e girar. O tamanho
   e a posição vêm do `estiloDaAlca()`, divididos pela escala do palco. */
.lm-studio__alca--lado {
    border-radius: 999px;
    cursor: ew-resize;
}

.lm-studio__alca--topo {
    border-radius: 999px;
    cursor: ns-resize;
}

.lm-studio__alca--giro {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--lm-pink);
    cursor: grab;
}

.lm-studio__alca--giro:active {
    cursor: grabbing;
}

.lm-studio__alca--giro > i {
    pointer-events: none;
}

/*
 * ⚠️ OS MESMOS NOMES VÃO NO HTML DA TV (`LmStudioHtml`, `KEYFRAMES`). Só o
 * `from`: sem o `to`, o estado final é o do próprio elemento, e quem tem
 * `transform` próprio (uma forma girada) volta a ele no fim.
 *
 * O deslize usa `--lm-dx`/`--lm-dy`, que o quadro põe em pixels do QUADRO: no
 * HTML cada camada é uma imagem do tamanho do quadro e anda 6% dele; aqui a
 * camada é a caixa dela, e `6%` andaria 6% de um selo de preço.
 */
@keyframes lm-entra-aparecer {
    from { opacity: 0; }
}

@keyframes lm-entra-deslizar-cima {
    from { opacity: 0; transform: translateY(var(--lm-dy, 24px)); }
}

@keyframes lm-entra-deslizar-esquerda {
    from { opacity: 0; transform: translateX(calc(-1 * var(--lm-dx, 40px))); }
}

@keyframes lm-entra-deslizar-direita {
    from { opacity: 0; transform: translateX(var(--lm-dx, 40px)); }
}

@keyframes lm-entra-zoom {
    from { opacity: 0; transform: scale(0.85); }
}

/* ---------------------------------------------------------------------
   PD-406 fase 2 — `<lm-cor>`, o seletor RGB
   --------------------------------------------------------------------- */

.lm-cor {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.6rem;
}

/* A amostra É o `<input type="color">`: o input fica por cima, invisível, e o
   clique na amostra abre a roda do navegador. */
.lm-cor__amostra {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    cursor: pointer;
}

.lm-cor__amostra input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.lm-cor__hex {
    height: 2.25rem;
    font-family: monospace;
    font-size: 0.75rem;
    text-transform: lowercase;
}

.lm-cor__rgb {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

.lm-cor__rgb label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 700;
}

.lm-cor__rgb input {
    width: 100%;
    min-width: 0;
    height: 1.875rem;
    padding: 0 0.3rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    color: var(--lm-txt);
    font-size: 0.75rem;
}

/* ---------------------------------------------------------------------
   PD-406 fase 2 — painéis: fotos da Biblioteca, cenas, filtro, referência
   --------------------------------------------------------------------- */

.lm-studio__bibimgs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    max-height: 12rem;
    margin-bottom: 0.6rem;
    overflow-y: auto;
}

.lm-studio__bibimgs button {
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--lm-radius);
    background: var(--lm-surface-mute);
    line-height: 0;
    cursor: pointer;
}

.lm-studio__bibimgs button:hover {
    border-color: var(--lm-pink);
}

.lm-studio__bibimgs img {
    display: block;
    width: 100%;
    height: 3.25rem;
    object-fit: cover;
}

/* O arquivo escolhido pelo botão-rótulo: fora da vista, mas clicável pelo rótulo. */
.lm-studio__flybody label.lm-btn input[type="file"],
.lm-studio__iaanexo input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lm-studio__flybody label.lm-btn {
    position: relative;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.lm-studio__flybody label.lm-btn.is-disabled {
    opacity: 0.65;
    pointer-events: none;
}

.lm-studio__mini--texto {
    padding: 0 0.6rem;
    font-weight: 600;
}

.lm-studio__dica--alerta {
    margin-top: 0.5rem;
    color: var(--lm-warn, #b45309);
}

.lm-studio__iaanexo.is-on {
    color: var(--lm-pink);
}

.lm-studio__referencia {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

.lm-studio__referencia img {
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    object-fit: cover;
}

.lm-studio__referencia span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-studio__referencia button {
    padding: 0.2rem 0.35rem;
    border: 0;
    background: none;
    color: var(--lm-txt-soft);
    cursor: pointer;
}

.lm-studio__filtrobtn {
    position: relative;
}

.lm-studio__filtrobtn.is-on {
    border-color: var(--lm-pink);
    color: var(--lm-pink);
}

.lm-studio__filtrobtn b {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--lm-pink);
    color: #ffffff;
    font-size: 0.625rem;
    line-height: 1rem;
    text-align: center;
}

.lm-studio__filtro {
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
}

.lm-studio__filtrolista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.5rem;
    margin-bottom: 0.4rem;
}

.lm-studio__filtroitem {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--lm-txt);
    font-size: 0.75rem;
    cursor: pointer;
}

.lm-studio__filtroitem input {
    accent-color: var(--lm-pink);
}

/* A lixeira de "Meus templates" ocupa o lugar da estrela. */
.lm-studio__tplx:hover {
    color: var(--lm-off, #dc2626);
}

/* ---------------------------------------------------------------------
   18/09 (a pedido, "ta bem feio") — A DURACAO NA TELA, na secao Campanha.

   UM controle so', da altura do `.lm-input` do titulo ao lado (2.5rem):
   [ − | relogio  8  seg | + ]. A borda e o foco sao do CONJUNTO (`:focus-within`),
   e nao do `<input>`: o numero e' so' o miolo, e um anel de foco dentro de outra
   borda era o "feio" que se via.

   ⚠️ NAO usa mais `.lm-studio__zoom`. Era a classe do zoom emprestada, e ela
   trazia `min-width: 2.75rem` no `<span>` (o "s" ia parar longe do numero) e
   `margin-left: auto` no ultimo botao (o + colado na borda).
   --------------------------------------------------------------------- */

.lm-studio__duracao {
    display: inline-flex;
    height: 2.5rem;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lm-studio__duracao:focus-within {
    border-color: var(--lm-pink);
    box-shadow: 0 0 0 3px var(--lm-pink-soft);
}

.lm-studio__duracao.is-invalido {
    border-color: var(--lm-off);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.lm-studio__duracao.is-desligado {
    opacity: 0.55;
}

.lm-studio__duracaobtn {
    display: inline-flex;
    width: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: var(--lm-surface-soft);
    color: var(--lm-txt);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lm-studio__duracaobtn:first-child {
    border-right: 1px solid var(--lm-border);
}

.lm-studio__duracaobtn:last-child {
    border-left: 1px solid var(--lm-border);
}

.lm-studio__duracaobtn:hover:not(:disabled) {
    background: var(--lm-pink-softer);
    color: var(--lm-pink);
}

.lm-studio__duracaobtn:disabled {
    color: var(--lm-txt-soft);
    cursor: default;
}

.lm-studio__duracaovalor {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0 0.75rem;
    cursor: text;
}

.lm-studio__duracaovalor > i {
    color: var(--lm-pink);
    font-size: 0.8125rem;
}

/* O numero: sem borda e sem as setas do navegador — quem sobe e desce sao os
   botoes, e as setinhas de 8px dentro de um campo de 2.5rem eram a terceira
   forma de fazer a mesma coisa. */
.lm-studio__duracao input {
    width: 2.6rem;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lm-txt-title);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.lm-studio__duracao input::-webkit-outer-spin-button,
.lm-studio__duracao input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.lm-studio__duracao input:focus {
    outline: none;
    box-shadow: none;
}

.lm-studio__duracaovalor > span {
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.lm-studio__animhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.lm-studio__animhead .lm-studio__rotulo {
    margin: 0;
}

.lm-studio__anim .lm-select {
    margin-bottom: 0.4rem;
}

.lm-studio__campoanim {
    display: block;
    margin: 0 0 0.4rem;
}

.lm-studio__campoanim span {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
}

.lm-studio__campoanim input {
    height: 2rem;
    font-size: 0.75rem;
}

.lm-studio__animcamada {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--lm-border);
}

/* O menu do "Gerar mídia" desceu para o rodapé: ele abre PARA CIMA, senão
   sairia pelo fim da página. */
.lm-studio__menu--cima {
    top: auto;
    bottom: calc(100% + 0.35rem);
}

.lm-studio__nomear {
    max-width: 28rem;
}

/* PD-1036 (24/09): o corpo do modal tinha margem ZERO — rotulo, campo e dica
   colados nas bordas. A mesma margem lateral do cabecalho e do rodape. */
.lm-studio__nomearcorpo {
    padding: 1.15rem 1.35rem 0.35rem;
}

.lm-studio__nomearcorpo .lm-field {
    display: block;
    margin-bottom: 0.75rem;
}

.lm-studio__nomearcorpo .lm-input {
    width: 100%;
    box-sizing: border-box;
}

/* E um vao entre Cancelar e Salvar template. */
.lm-studio__nomear .lm-studio__ajudape {
    gap: 0.75rem;
}

/* PD-1040 (24/09): o "Salvar template" do rodape — contorno rosa, texto rosa,
   fundo branco. */
.lm-btn.lm-studio__salvartpl {
    border-color: var(--lm-pink);
    background: #ffffff;
    color: var(--lm-pink);
}

.lm-btn.lm-studio__salvartpl:hover:not([disabled]) {
    background: var(--lm-pink-soft);
    color: var(--lm-pink-strong);
}

/* PD-1040 — Desfazer/Refazer na barra de ferramentas. */
.lm-studio__tool[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------
   Coluna de ajustes
   --------------------------------------------------------------------- */

.lm-studio__ajustes {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 11rem;
}

/* 18/09 - cartao BRANCO com borda (era cinza), rotulo com icone rosa: os
   blocos se leem como controles, e nao como avisos. */
.lm-studio__bloco {
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
}

.lm-studio__rotulo i {
    margin-right: 0.35rem;
    color: var(--lm-pink);
}

.lm-studio__blocodica {
    margin: 0.35rem 0 0;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
    line-height: 1.35;
}

/* O formato: um BOTAO por proporcao, com o desenho dela (era um <select>).
   Na coluna de 11rem cabem dois por linha; na linha embaixo do palco, quatro. */
.lm-studio__formatos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.lm-studio__formato {
    display: flex;
    min-height: 3.1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.35rem 0.25rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: pointer;
}

.lm-studio__formato:hover {
    border-color: var(--lm-pink-line);
    color: var(--lm-txt-title);
}

.lm-studio__formato.is-on {
    border-color: var(--lm-pink);
    background: var(--lm-pink-softer);
    color: var(--lm-pink);
}

.lm-studio__formato:disabled {
    opacity: 0.5;
    cursor: default;
}

.lm-studio__formatoglifo {
    display: block;
    border: 2px solid currentColor;
    border-radius: 2px;
}

/* O zoom: um passo so', em pilula, com o valor no meio. */
.lm-studio__passo {
    justify-content: space-between;
    padding: 0.2rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-soft);
}

.lm-studio__passo span {
    flex: 1 1 auto;
}

.lm-studio__passo button:last-child {
    margin-left: 0;
}

.lm-studio__passo button {
    border-color: transparent;
    border-radius: 50%;
    background: var(--lm-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.lm-studio__bloco .lm-select {
    height: 2.25rem;
    font-size: 0.75rem;
}

.lm-studio__zoom {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.lm-studio__zoom button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    color: var(--lm-txt);
    font-size: 0.625rem;
    cursor: pointer;
}

.lm-studio__zoom button:hover {
    border-color: var(--lm-pink-line);
}

.lm-studio__zoom button:last-child {
    margin-left: auto;
}

.lm-studio__zoom span {
    min-width: 2.75rem;
    color: var(--lm-txt-title);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

/* As páginas SAÍRAM (PD-406 fase 2, "Arrancar sessão de pagina"), com o CSS
   delas e o primeiro dos dois `.lm-studio__rodape` que existiam. */

/* ---------------------------------------------------------------------
   "Como usar o Estudio"

   ⚠️ E' um overlay PROPRIO, e nao o `.lm-modal` do Bootstrap. Aquele e'
   aberto por jQuery a partir de um `id`, e o `listenmedia.css` e' um
   namespace plano — foi assim que a previa do player, nascida com
   `class="modal lm-preview"`, herdou um `display: flex` de outro bloco e
   deixou o editor de playlist inclicavel, sem um erro sequer no console.
   --------------------------------------------------------------------- */

.lm-studio__ajuda {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1rem;
    background: rgba(16, 16, 20, 0.55);
}

.lm-studio__ajudacaixa {
    width: 100%;
    max-width: 34rem;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--lm-radius-lg);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow-up);
}

.lm-studio__ajudahead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.35rem 0.85rem;
    border-bottom: 1px solid var(--lm-border);
}

.lm-studio__ajudahead h3 {
    margin: 0;
    color: var(--lm-txt-title);
    font-size: 1.0625rem;
    font-weight: 700;
}

.lm-studio__ajudahead button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--lm-txt-soft);
    font-size: 1rem;
    cursor: pointer;
}

.lm-studio__passos {
    margin: 0;
    padding: 1.15rem 1.35rem;
    list-style: none;
    counter-reset: passo;
}

.lm-studio__passos > li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

.lm-studio__passos > li:last-child {
    margin-bottom: 0;
}

.lm-studio__passoicone {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--lm-radius);
    background: var(--lm-pink-soft);
    color: var(--lm-pink);
    font-size: 0.875rem;
}

.lm-studio__passos b {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--lm-txt-title);
    font-size: 0.875rem;
}

.lm-studio__passos p {
    margin: 0;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.lm-studio__ajudape {
    display: flex;
    justify-content: flex-end;
    padding: 0.85rem 1.35rem 1.25rem;
    border-top: 1px solid var(--lm-border);
}

/* ---------------------------------------------------------------------
   Telas estreitas
   --------------------------------------------------------------------- */

@media (max-width: 900px) {

    /* A coluna de ajustes desce para baixo do palco: a 900px ela e o palco
       nao cabem lado a lado sem a peca virar um selo. */
    .lm-studio__oficina {
        grid-template-columns: auto 1fr;
    }

    .lm-studio__ajustes {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        width: auto;
    }

    .lm-studio__bloco {
        flex: 1 1 12rem;
    }

    .lm-studio__palco {
        height: 17rem;
    }

    /* O painel flutuante nao cabe mais sobreposto: vira uma folha por cima. */
    .lm-studio__flyout {
        left: 5rem;
        right: 0;
        width: auto;
    }
}

/* ---------------------------------------------------------------------
   PD-406 (17/09) — OS AJUSTES COM O CATALOGO ABERTO

   "Melhore a visualizacao das sessoes do Editor de peca quando a sessao de
   buscar templates estiver a mostra, pois hoje a animacao esta quebrando o
   layout". Medido antes, a 1920px com o catalogo aberto: a coluna de ajustes
   tinha 176px, e com a animacao ligada crescia a 488px contra 352px do palco —
   136px de editor em branco embaixo do palco, e "Esta camada" empurrava mais.

   Com o catalogo aberto (>=1281px), a coluna vira uma LINHA embaixo do palco:
   Formato, Zoom, Duracao e Animacao lado a lado, e os detalhes da animacao uma
   faixa da largura do editor. O palco ganha a largura que a coluna ocupava.
   Recolhido, a coluna volta: ali o palco tem 30rem de altura e ela cabe.

   ⚠️ `:not(.is-previa)` e `:not(.is-full)` no seletor, e nao enfeite. Na previa
   a coluna sai do DOM e a `.lm-studio.is-previa .lm-studio__oficina` pede UMA
   coluna; sem a exclusao este seletor ganharia dela e o palco cairia na coluna
   `auto`, encolhendo ate o conteudo (a armadilha escrita la' em cima). Em tela
   cheia o catalogo some sem a classe de recolhido, e o editor ja' e' largo.
   --------------------------------------------------------------------- */

/* Na COLUNA: o bloco de detalhes cola no cartao do interruptor e le como um so'. */
.lm-studio__anim.is-aberta {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.lm-studio__anim .lm-studio__animhead {
    margin-bottom: 0;
}

.lm-studio__animdetalhe {
    margin-top: -0.85rem;
    padding-top: 0.25rem;
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.lm-studio__campoanim .lm-select {
    margin-bottom: 0;
}

.lm-studio__animdetalhe .lm-studio__tocar {
    margin-top: 0.2rem;
}

@media (min-width: 1281px) {

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__oficina {
        grid-template-columns: auto minmax(0, 1fr);
    }

    /* 18/09 (a pedido): "Embaixo da peça, deixe apenas duas seções, Formato da
       tela e Zoom; animação ocupa a linha debaixo inteira sozinha."
       DUAS colunas (eram tres, com a Animacao espremida na terceira), e a
       Animacao desce para uma linha propria — cartao do interruptor e detalhes
       colados, lidos como UM bloco. */
    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__ajustes {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        width: auto;
    }

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__formatos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* A linha da Animacao: rotulo e frase a esquerda, interruptor a direita.
       `display: contents` no cabecalho poe o rotulo e o interruptor na MESMA
       grade da frase, sem mexer no markup que a coluna (catalogo recolhido)
       continua usando. */
    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__anim {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 1rem;
    }

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__animhead {
        display: contents;
    }

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__animhead > .lm-studio__rotulo {
        grid-row: 1;
        grid-column: 1;
    }

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__animhead > .lm-flip {
        grid-row: 1 / span 2;
        grid-column: 2;
    }

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__anim > .lm-studio__blocodica {
        grid-row: 2;
        grid-column: 1;
    }

    /* Ligada, os detalhes COLAM embaixo do cartao: o `margin-top` negativo
       devolve o `gap` da grade, e a borda de baixo do cartao vira a linha que
       separa os dois. O fundo suave diz "isto e' o que abriu". */
    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__anim.is-aberta {
        border-radius: var(--lm-radius) var(--lm-radius) 0 0;
    }

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__animdetalhe {
        display: flex;
        grid-column: 1 / -1;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.6rem 0.75rem;
        margin-top: -0.75rem;
        padding-top: 0.75rem;
        border-top: 0;
        border-radius: 0 0 var(--lm-radius) var(--lm-radius);
        background: var(--lm-surface-soft);
    }

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__animdetalhe > .lm-studio__campoanim,
    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__animcamada > .lm-studio__campoanim {
        flex: 1 1 10rem;
        margin: 0;
    }

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__animdetalhe > .lm-studio__tocar {
        flex: 0 0 auto;
        width: auto;
        height: 2.25rem;
        margin: 0;
    }

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__animdetalhe > .lm-studio__dica {
        flex: 1 1 100%;
        margin: 0;
    }

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__animcamada {
        display: flex;
        flex: 1 1 100%;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 0.6rem 0.75rem;
        margin-top: 0;
        padding-top: 0.6rem;
    }

    .lm-studio:not(.is-previa):not(.is-full) .lm-studio__grid:not(.is-catalogo-recolhido) .lm-studio__animcamada > .lm-studio__rotulo {
        flex: 0 0 100%;
        margin: 0;
    }
}

/* Em 900px a coluna ja' era uma linha que quebra: o detalhe ocupa a linha toda. */
@media (max-width: 900px) {

    /* 18/09: aqui tambem a Animacao fica com a linha inteira (ver o >=1281px). */
    .lm-studio__anim {
        flex-basis: 100%;
    }

    .lm-studio__anim.is-aberta {
        border-radius: var(--lm-radius);
    }

    .lm-studio__animdetalhe {
        flex-basis: 100%;
        margin-top: 0;
        padding-top: 0.7rem;
        border-top: 1px solid var(--lm-border);
        border-radius: var(--lm-radius);
    }
}

/* A duracao OBRIGATORIA (17/09): o erro fica embaixo do campo, a' vista. */
.lm-studio__bloco.is-erro {
    border-color: var(--lm-off);
}

.lm-studio__erro {
    margin: 0.4rem 0 0;
    color: var(--lm-off);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
}

.lm-studio__duracao input::placeholder {
    color: var(--lm-txt-soft);
}

/* ---------------------------------------------------------------------
   PD-406 (17/09) — o assistente: custo em R$ (escondido) e criar imagem
   --------------------------------------------------------------------- */

.lm-studio__iamodo {
    display: inline-flex;
    gap: 0.25rem;
    margin: 0 0 0.75rem;
    padding: 0.2rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-soft);
}

.lm-studio__iamodo button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.875rem;
    padding: 0 0.85rem;
    border: 0;
    border-radius: var(--lm-radius-pill);
    background: transparent;
    color: var(--lm-txt-soft);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.lm-studio__iamodo button.is-on {
    background: var(--lm-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    color: var(--lm-pink-strong);
}

.lm-studio__iamodo button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* PD-1366 — a cota mensal de IA, abaixo do campo do assistente. So aparece
   a partir da faixa de aviso (75%). A barra (.lm-usage) e a nota
   (.lm-note--alerta) sao as de sempre; aqui so o respiro e a largura toda do
   painel. */
.lm-studio__iacota {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.lm-studio__iacota .lm-usage {
    max-width: none;
}

.lm-studio__iacota .lm-note {
    margin: 0;
}

.lm-studio__iaupgrade {
    justify-self: start;
}

.lm-studio__iadestino {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin-top: 0.75rem;
    color: var(--lm-txt);
    font-size: 0.75rem;
}

.lm-studio__iadestinoaviso {
    color: var(--lm-txt-muted);
    font-style: italic;
}

/* O pedido e, ao lado, o valor daquela geracao. */
.lm-studio__falatopo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.lm-studio__falatopo .lm-studio__falapedido {
    flex: 1 1 auto;
    min-width: 0;
}

.lm-studio__falacusto {
    flex: 0 0 auto;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface);
    color: var(--lm-txt-title);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
    cursor: help;
}

.lm-studio__fala.is-erro .lm-studio__falaresumo i {
    color: var(--lm-warn);
}

.lm-studio__falaimagem {
    display: block;
    max-width: 8rem;
    max-height: 5rem;
    margin-top: 0.4rem;
    border-radius: var(--lm-radius);
    object-fit: cover;
}

/* 29/10 — "Reaproveitar geração neste template", embaixo da imagem gerada.
   ⚠️ `white-space: normal`: o `.lm-btn` é `nowrap`, e na coluna da conversa o
   rótulo vazaria pelos dois lados, com o ícone fora da borda (a armadilha dos
   botões largos do painel, 17/09). Aqui ele quebra em duas linhas, se precisar. */
.lm-studio__reaproveitar {
    margin-top: 0.5rem;
    max-width: 100%;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: normal;
    text-align: left;
}

.lm-studio__reaproveitar > i {
    flex: 0 0 auto;
}

/* 29/10 — a imagem gerada e os DESTINOS ao lado dela ("o botão deve ficar ao
   lado ali da imagem"). A miniatura não encolhe; os destinos quebram linha. */
.lm-studio__falamidia {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.lm-studio__falamidia .lm-studio__falaimagem {
    flex: 0 0 auto;
    margin-top: 0;
}

.lm-studio__usar {
    flex: 1 1 auto;
    min-width: 0;
}

.lm-studio__usarrotulo {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 600;
}

.lm-studio__usarops {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.lm-studio__usarop {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--lm-pink-line);
    border-radius: 999px;
    background: var(--lm-surface);
    color: var(--lm-pink);
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
}

.lm-studio__usarop:hover {
    border-color: var(--lm-pink);
    background: var(--lm-pink-softer);
}

.lm-studio__usarop > i {
    flex: 0 0 auto;
    font-size: 0.625rem;
}

/* O bloco ainda "Sua imagem aqui": tracejado, como o desenho de marcação dele. */
.lm-studio__usarop.is-vazio {
    border-style: dashed;
}

/* ---------------------------------------------------------------------
   A porta do Estudio, na Biblioteca

   Vive neste bloco, e nao junto das outras regras da Biblioteca, porque sai
   junto com o resto do Estudio no dia em que a tela for refeita.
   --------------------------------------------------------------------- */

/* ⚠️ E' um <a> com classe de botao. O `.lm-btn` foi escrito para <button>, que
   ja' vem com `line-height` normalizada; num <a> o texto assenta alto dentro da
   pilula. `line-height: 1` devolve o alinhamento sem tocar na `.lm-btn`, que e'
   usada por todo o modulo. */
a.lm-studio__porta {
    line-height: 1;
    text-decoration: none;
}

a.lm-studio__porta:hover,
a.lm-studio__porta:focus {
    text-decoration: none;
}

.lm-studio__porta i {
    color: var(--lm-pink);
}

.lm-studio__porta:hover {
    border-color: var(--lm-pink-line);
    background: var(--lm-pink-softer);
}

/* ⚠️ PD-406 — `.lm-empty__acoes` MUDOU-SE DAQUI para junto do `.lm-empty`, onde
   ela sempre pertenceu: ela e' da BIBLIOTECA, e nao do Estudio. Enquanto este
   bloco tinha data para morrer, apaga-lo "de uma vez" levaria junto o
   centramento dos botoes do estado vazio da Biblioteca — um desalinhamento
   silencioso, sem erro nenhum. */

/* ---------------------------------------------------------------------
   PD-406 — os estados da coluna esquerda

   Carregando e erro, que so' passaram a existir quando o catalogo virou
   requisicao. Mesma forma do `.lm-multi__estado` do seletor de temas.
   --------------------------------------------------------------------- */

.lm-studio__estado {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.6rem 1rem;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
    text-align: center;
}

.lm-studio__estado--erro {
    color: var(--lm-off);
}

/* ---------------------------------------------------------------------
   PD-406 — o rodape do editor: titulo da campanha e os dois CTAs
   --------------------------------------------------------------------- */

.lm-studio__rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--lm-border);
}

.lm-studio__rodapeferramentas {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* ---------------------------------------------------------------------
   18/09 - a secao CAMPANHA, acima do assistente: titulo e duracao. O titulo
   saiu do rodape do editor, e a duracao, da linha de ajustes.
   --------------------------------------------------------------------- */

.lm-studio__campanhatitulo i {
    margin-right: 0.35rem;
    color: var(--lm-pink);
}

.lm-studio__campanhacampos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.lm-studio__campanha {
    min-width: 0;
    margin: 0;
}

/* E' `lm-studio__bloco` so' pelo `is-erro` (ver o studio.html): aqui ele nao
   desenha cartao. O erro aparece no campo e na mensagem embaixo. */
.lm-studio__campanhaduracao {
    padding: 0;
    border: 0;
    background: transparent;
}

@media (max-width: 575px) {

    .lm-studio__campanhacampos {
        grid-template-columns: minmax(0, 1fr);
    }
}

.lm-studio__rodapeacoes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* A barra ocupa a linha inteira embaixo dos dois — ela nasce e some, e
   empurrar os botoes de lado a cada envio faria a tela saltar. */
.lm-studio__progresso {
    flex: 1 1 100%;
}

/* ---------------------------------------------------------------------
   PD-406 — TELA CHEIA

   ⚠️ NAO E' A PREVIA (`.is-previa`), e as duas convivem. A previa so' troca a
   altura do palco e esconde as ferramentas; a peca continua no meio da pagina,
   com a navbar em cima. Tela cheia e' a peca OCUPANDO A JANELA.

   O molde e' o `.is-full` da previa do player, que o modulo ja tem.

   ⚠️ `position: fixed` NO CONTAINER DA PAGINA, e nao no palco. O palco recebe
   `transform: scale()` por JS, e um ancestral com `transform` vira a referencia
   do `position: fixed` de tudo o que estiver dentro dele — a armadilha ja
   medida neste arquivo, com o menu do cartao da Biblioteca pulando para o canto
   da tela. Fixando a PAGINA, o palco escalado fica dentro, e nao em volta.
   --------------------------------------------------------------------- */

.lm-studio.is-full {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1060;
    overflow: auto;
    padding: 1rem;
    background: var(--lm-surface-soft);
}

/* Em tela cheia sobra o editor: o catalogo, o assistente e o cabecalho da
   pagina saem de cena. O que a pessoa pediu foi VER A PECA. */
.lm-studio.is-full .lm-page__head,
.lm-studio.is-full .lm-studio__catalogo,
.lm-studio.is-full .lm-studio__campanhapainel,
.lm-studio.is-full .lm-studio__ia {
    display: none;
}

.lm-studio.is-full .lm-studio__grid,
.lm-studio.is-full .lm-studio__lado {
    display: block;
    height: 100%;
}

.lm-studio.is-full .lm-studio__palco {
    height: calc(100vh - 12rem);
}

/* ==========================================================================
   PD-781 — Minha identidade

   ⚠️ TODA CLASSE DESTE BLOCO COMECA EM `lm-ident`, e isso nao e' estilo: o
   `listenmedia.css` e' um namespace PLANO, e classe repetida nao da erro — da
   comportamento. Em 28/08 um `.lm-preview` reaproveitado na raiz de um `.modal`
   deixou o editor de playlist inclicavel a tela inteira, sem um erro no console,
   porque o `display: flex` daqui venceu o `display: none` do Bootstrap.

   As classes que esta tela REUSA sao as de uso geral do modulo, e nenhuma delas
   e' redefinida aqui: `.lm-page`, `.lm-panel`, `.lm-field`, `.lm-input`,
   `.lm-select`, `.lm-btn`, `.lm-badge`, `.lm-iconbtn`, `.lm-usage__track`,
   `.lm-saving`, `.lm-note`, `.lm-thumb`.

   ==========================================================================
   A DISPOSICAO MUDOU EM 17/09 — e as medidas que a mudaram
   ==========================================================================

   "Ajuste a disposicao das sessoes la tambem, esta muito largado as coisas e
   acabou deixando muito espaco em branco sem uso."

   Medido a 1600px, com logo e tres materiais gravados: a pagina tinha 1568px de
   altura, e tres vazios respondiam por quase tudo —

     - a coluna "Elementos da marca" (`sticky`, 15rem) usava 310px dos 1012px dos
       blocos ao lado: 702px de coluna vazia;
     - o bloco do Logo media 513px contra 192px do de Cores: 321px de buraco;
     - a area de soltar o logo tinha 340px VAZIOS mesmo com o logo enviado, e o
       cartao dele vinha logo abaixo.

   O que mudou: a coluna virou BARRA no topo, os blocos manuais viraram TRES
   colunas de mesma altura (`stretch`), o Logo mostra a PREVIA no lugar da area
   quando ja ha arquivo, e os materiais tem um lugar so' — o bloco de IA, com
   PREVIA de cada arquivo.

   ⚠️ NAO VOLTE A `align-items: start` NA GRADE DOS BLOCOS. E' exatamente o que
   fazia o buraco de 321px: com `start`, cada bloco tem a altura do proprio
   conteudo e a coluna mais curta deixa o resto em branco.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. O resumo do topo e o percentual de cada bloco (18/09)

   ⚠️ A BARRA "Elementos da marca" SAIU. O 4o cartao ("Materiais de
   referencia") repetia o bloco de IA, e os outros tres repetiam o titulo do
   bloco logo abaixo. O que ela respondia - "o que falta?" - ficou em dois
   lugares menores: o resumo no topo e o chip no titulo de cada bloco.
   -------------------------------------------------------------------------- */

.lm-ident-resumo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface);
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.lm-ident-resumo__num {
    color: var(--lm-txt-title);
    font-weight: 700;
}

.lm-ident-resumo__trilho {
    display: block;
    width: 5rem;
    height: 0.375rem;
    overflow: hidden;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-mute);
}

.lm-ident-resumo__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--lm-pink);
    transition: width 0.2s ease;
}

/* Verde no 100%, como era na barra: a pergunta e "o que falta?", e a
   resposta mais rapida e a cor. */
.lm-ident-resumo.is-completo .lm-ident-resumo__fill {
    background: var(--lm-on, #0f9d58);
}

.lm-ident-bloco__pct {
    flex: 0 0 auto;
    padding: 0.1rem 0.5rem;
    border-radius: var(--lm-radius-pill);
    background: var(--lm-surface-mute);
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 700;
}

.lm-ident-bloco__pct.is-completo {
    background: var(--lm-on-soft, #e6f7ee);
    color: var(--lm-on, #0f9d58);
}

/* --------------------------------------------------------------------------
   2. O bloco de IA — e os materiais
   -------------------------------------------------------------------------- */

/* A proporcao e' 1 : 1.6, e nao "22rem fixos + o resto". Numa tela de 1600px
   aquele fixo dava 1218px so' para a area dos materiais, larga demais para tres
   ou quatro cartoes; com a proporcao, o texto da esquerda ganha respiro e a
   area da direita para de sobrar. */
.lm-ident-ia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--lm-pink-line);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-pink-softer);
}

.lm-ident-ia__topo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.lm-ident-ia__icone {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--lm-radius);
    background: var(--lm-pink-soft);
    color: var(--lm-pink);
}

.lm-ident-ia__titulo {
    margin: 0;
    color: var(--lm-txt-title);
    font-size: 1.0625rem;
    font-weight: 700;
}

.lm-ident-ia__texto {
    margin: 0 0 0.85rem;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.lm-ident-ia__botao {
    border-radius: var(--lm-radius-pill);
}

/* O motivo de o botao estar desligado. Cinza, e nao vermelho: nao e' erro, e'
   instrucao — quem le tem o que fazer a respeito. */
.lm-ident-ia__motivo {
    margin: 0.6rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

/* A frase do envio a servico externo (decisao 4 do gate). Ela fica SEMPRE
   visivel, antes do clique — e por isso nao tem cor de alerta: alerta some da
   vista de quem ja o leu tres vezes. */
.lm-ident-ia__aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.85rem 0 0;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
    line-height: 1.45;
}

.lm-ident-ia__drop {
    display: flex;
    /* 18/09: 12rem -> 8.5rem. Com as miniaturas em linha compacta, a area
       vazia de 12rem sobrava branca embaixo de dois ou tres arquivos. */
    min-height: 8.5rem;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem;
    border: 1px dashed var(--lm-pink-line);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
}

.lm-ident-ia__drop.is-dragging {
    border-color: var(--lm-pink);
    background: var(--lm-pink-softer);
}

.lm-ident-ia__cabeca {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
}

.lm-ident-ia__conta {
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
    font-weight: 400;
}

.lm-ident-ia__vazio {
    margin: auto;
    color: var(--lm-txt-soft);
    font-size: 0.8125rem;
    text-align: center;
}

/* O campo de arquivo some, e quem recebe o clique e' o rotulo em volta. Nao e'
   `display: none`: um campo assim sai da ordem de tabulacao e o teclado perde o
   acesso a tela. */
.lm-ident-tile--mais input[type="file"],
.lm-ident-drop__alvo input[type="file"],
.lm-ident-logo__trocar input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lm-ident-ia__barra {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.25rem;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

.lm-ident-ia__barra .lm-usage__track {
    flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   3. A grade de previas dos materiais (17/09)

   ⚠️ ELA SUBSTITUIU DUAS COISAS: as linhas de largura inteira do bloco de IA
   (selo, nome e tamanho — 1133px de largura para dizer "manual.pdf 2.4 MB") e a
   grade `.lm-ident-card` da secao "Materiais de referencia", que mostrava a
   MESMA lista mais abaixo. As duas classes antigas sairam: a lista e' uma so'
   (L-06), e agora o lugar dela tambem.
   -------------------------------------------------------------------------- */

/* ⚠️ `auto-fit` COM TETO, e nao `auto-fill` com `1fr`.
   - `auto-fill` cria as colunas que couberem e as deixa VAZIAS: com tres
     materiais numa area de 1189px, os cartoes ficavam de 140px encostados a
     esquerda e sobravam ~600px em branco — exatamente a queixa que este ajuste
     veio resolver;
   - `auto-fit` sem teto vai ao extremo oposto: UM arquivo viraria um cartao de
     1189px de largura com uma miniatura esticada no meio.
   Entre 8.5rem e 12rem os cartoes crescem para ocupar a area e param num
   tamanho que ainda parece um cartao. */
/* ⚠️ 18/09 - MINI MINIATURAS ("as imagens precisam ter mini miniaturas pra
   funcionar legal"). O cartao de 72px de previa virou uma LINHA COMPACTA: a
   miniatura quadrada de 48px a esquerda, nome e tamanho ao lado, o X no fim.
   Numa linha, `auto-fill` com `1fr` e' o certo: a coluna que sobra e' so' uma
   linha a menos, e nao o buraco de 600px que o cartao alto deixava. */
.lm-ident-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.5rem;
}

.lm-ident-tile {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
    padding: 0.4rem 0.4rem 0.4rem 0.4rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
}

/* O X e' o ULTIMO da linha (`order`), sem `position: absolute`: por cima da
   miniatura de 48px ele esconderia metade dela. */
.lm-ident-tile__x {
    flex: 0 0 auto;
    order: 3;
    margin-left: auto;
}

.lm-ident-tile__info {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.2rem;
}

/* ⚠️ A CAIXA DA MINIATURA PRECISA DE REGRA PARA A IMAGEM DE DENTRO. Sem ela o
   navegador desenha no tamanho NATURAL do arquivo, a caixa recorta com
   `overflow: hidden`, e o que sobra e' o miolo de um PNG de 1920x1080 em escala
   1:1 — um retangulo de pixels que nao lembra nada. Foi a pedra de 28/08 na
   Biblioteca, e ela vale para toda caixa nova. */
.lm-ident-tile__thumb {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--lm-radius);
    background: var(--lm-surface-mute);
    color: var(--lm-txt-muted);
    font-size: 1.25rem;
}

/* `contain`, e nao `cover`: o material e' o manual e o cartao de visita da
   marca, e um logo em pe cortado no meio nao ajuda a reconhece-lo. Na caixa de
   48px (18/09) ainda cabe o arquivo inteiro, com uma faixa do fundo cinza. */
.lm-ident-tile__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lm-ident-tile__nome {
    overflow: hidden;
    color: var(--lm-txt-title);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-ident-tile__meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--lm-txt-soft);
    font-size: 0.6875rem;
}

/* 18/09 - da altura de uma linha (48px de miniatura + 2 x 0.4rem). */
.lm-ident-tile--mais {
    min-height: 3.95rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-style: dashed;
    margin: 0;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
    cursor: pointer;
}

.lm-ident-tile--mais:hover,
.lm-ident-tile--mais.is-dragging {
    border-color: var(--lm-pink);
    color: var(--lm-pink);
}

/* --------------------------------------------------------------------------
   4. A linha de ARQUIVO EM ENVIO

   Ela continua sendo linha, e nao cartao: o que ela mostra e' uma barra de
   progresso, que precisa de largura, e o arquivo ainda nao tem miniatura.
   -------------------------------------------------------------------------- */

.lm-ident-file {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
    font-size: 0.8125rem;
}

/* `min-width: 0` para o `text-overflow` funcionar dentro do flex: sem ele o
   item nao encolhe abaixo do conteudo e o nome empurra o tamanho para fora. */
.lm-ident-file__nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--lm-txt);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-ident-file__tam {
    flex: 0 0 auto;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

.lm-ident-file__erro {
    color: var(--lm-off);
    font-size: 0.75rem;
}

.lm-ident-file--enviando .lm-usage__track {
    flex: 0 0 8rem;
}

/* --------------------------------------------------------------------------
   5. "ou preencha manualmente"
   -------------------------------------------------------------------------- */

.lm-ident-ou {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

.lm-ident-ou::before,
.lm-ident-ou::after {
    height: 1px;
    flex: 1 1 auto;
    background: var(--lm-border);
    content: '';
}

/* --------------------------------------------------------------------------
   6. Os tres blocos manuais

   ⚠️ `stretch`, e NAO `start`: os tres tem a mesma altura, e por isso nao ha
   buraco embaixo do mais curto. Ver o cabecalho deste bloco.
   -------------------------------------------------------------------------- */

.lm-ident-blocos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.25rem;
}

.lm-ident-bloco {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

/* 18/09 - o titulo leva o percentual do bloco a direita (a barra saiu). */
.lm-ident-bloco__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    color: var(--lm-txt-title);
    font-size: 1.0625rem;
    font-weight: 600;
}

.lm-ident-bloco__nota {
    margin: 0.85rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   7. Logo — a area de soltar, e a previa que toma o lugar dela
   -------------------------------------------------------------------------- */

.lm-ident-drop {
    flex: 1 1 auto;
    min-height: 11rem;
}

.lm-ident-drop__alvo {
    display: flex;
    height: 100%;
    min-height: 11rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--lm-txt-soft);
    cursor: pointer;
}

.lm-ident-drop__alvo i {
    font-size: 1.5rem;
}

.lm-ident-drop__texto {
    color: var(--lm-txt);
    font-size: 0.875rem;
    text-align: center;
}

.lm-ident-drop__dica {
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
    text-align: center;
}

.lm-ident-logo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

/* ⚠️ ELA ESTICA (`flex: 1 1 auto`), e nao tem altura fixa. Os tres blocos tem a
   mesma altura pelo `stretch` da grade, e com altura fixa aqui o que sobrava
   virava uma faixa branca entre o nome do arquivo e os botoes — o mesmo tipo de
   vazio que este ajuste veio tirar da tela. Crescendo, a previa do logo fica
   maior, que e' justamente o que interessa ver. */
/* ⚠️ O `max-height` NAO E' ENFEITE: sem ele a caixa cresce com o ARQUIVO. A
   `<img>` tem `width: 100%` e `height: 100%`, e num pai sem altura fixa esse
   `100%` resolve para `auto` — um logo quadrado de 900x900 numa coluna de 478px
   virava uma previa de ~478px de altura, que por `stretch` esticava os blocos de
   Cores e Tipografia junto e devolvia a tela o vazio que este ajuste veio
   tirar. */
.lm-ident-logo__previa {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 8.5rem;
    max-height: 14rem;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0.5rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface-mute);
    color: var(--lm-txt-muted);
    font-size: 2rem;
}

/* `contain`, sempre: um logo em pe cortado pareceria quadrado, e o que esta em
   jogo aqui e' reconhecer a marca. */
.lm-ident-logo__previa img {
    width: 100%;
    height: 100%;
    padding: 0.75rem;
    object-fit: contain;
}

.lm-ident-logo__nome {
    max-width: 100%;
    overflow: hidden;
    color: var(--lm-txt-title);
    font-size: 0.8125rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-ident-logo__meta {
    color: var(--lm-txt-soft);
    font-size: 0.75rem;
}

.lm-ident-logo__acoes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.75rem;
}

.lm-ident-logo__trocar {
    position: relative;
    height: 2rem;
    margin: 0;
    padding: 0 0.85rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.lm-ident-logocard__remover {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lm-pink);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   8. Cores
   -------------------------------------------------------------------------- */

.lm-ident-cores {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.lm-ident-cor__campo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
}

.lm-ident-cor__campo.is-invalido {
    border-color: var(--lm-off);
}

/* O seletor nativo vem com moldura e respiro proprios em todo navegador. Estas
   linhas o transformam na bolinha do mockup — sem elas ele desenha um botao
   cinza que nao parece parte do campo. */
.lm-ident-cor__seletor {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    padding: 0;
    border: 1px solid var(--lm-border);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.lm-ident-cor__seletor::-webkit-color-swatch-wrapper {
    padding: 0;
}

.lm-ident-cor__seletor::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}

.lm-ident-cor__hex {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--lm-txt);
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

.lm-ident-cor__hex:focus {
    outline: none;
}

/* A amostra ocupa a altura que o `stretch` deixaria vazia — e responde a
   pergunta que o campo hexadecimal nao responde. */
/* ⚠️ COM TETO. Ela estica para nao deixar vazio embaixo do bloco mais curto,
   mas `flex: 1 1 auto` sozinho a levava a 272px numa linha alta — dois
   retangulos de cor do tamanho de um banner, gritando mais que os campos que
   eles ilustram. */
.lm-ident-amostra {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 4.5rem;
    max-height: 12rem;
    flex: 1 1 auto;
    gap: 1rem;
    margin-top: 1rem;
}

.lm-ident-amostra__cor {
    display: flex;
    align-items: flex-end;
    padding: 0.5rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
}

/* O rotulo tem fundo proprio porque a cor de tras e' escolhida pelo cliente:
   texto branco sobre amarelo, ou preto sobre azul-marinho, sumiria. */
.lm-ident-amostra__cor span {
    padding: 0.1rem 0.4rem;
    border-radius: var(--lm-radius-pill);
    background: rgba(255, 255, 255, 0.88);
    color: #1a1626;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. Tipografia

   Uma coluna: numa das tres colunas dos blocos (~500px a 1600px), campos e
   previa lado a lado dariam 230px para cada, e "Título Grande" em 1.5rem
   quebraria em duas linhas.
   -------------------------------------------------------------------------- */

.lm-ident-tipo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1rem;
}

.lm-ident-tipo__campos {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.lm-ident-previa {
    flex: 1 1 auto;
    padding: 1rem;
    border-radius: var(--lm-radius);
    background: var(--lm-surface-soft);
}

.lm-ident-previa__rotulo {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--lm-txt-soft);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lm-ident-previa__titulo {
    margin: 0 0 0.35rem;
    color: var(--lm-txt-title);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.lm-ident-previa__sub {
    margin: 0 0 0.35rem;
    color: var(--lm-txt);
    font-size: 0.9375rem;
    font-weight: 600;
}

.lm-ident-previa__texto {
    margin: 0;
    color: var(--lm-txt-muted);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   10. O estado de falha das miniaturas

   ⚠️ QUEM DESENHA ISTO E O CSS, e nao a diretiva `lm-thumb` — ela so' poe e tira
   a classe. Assim os lugares que desenham miniatura falham do MESMO jeito, sem
   cada template inventar o seu. O icone fica SEMPRE no DOM; enquanto a imagem
   esta no ar, o irmao o esconde.
   -------------------------------------------------------------------------- */

.lm-ident-logo__previa img:not(.lm-thumb--erro) ~ .lm-thumb__icon,
.lm-ident-tile__thumb img:not(.lm-thumb--erro) ~ .lm-thumb__icon {
    display: none;
}

.lm-ident-logo__previa img.lm-thumb--erro,
.lm-ident-tile__thumb img.lm-thumb--erro {
    display: none;
}

/* --------------------------------------------------------------------------
   11. Rodape
   -------------------------------------------------------------------------- */

.lm-ident-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lm-border);
}

/* --------------------------------------------------------------------------
   11b. PD-1124 (14/10) — o bloco 1: Logo + Cores, EMPILHADOS

   A pedido: "ficou muito espaco em branco no bloco de cores e o logo ficou muito
   grande". As duas metades deixam de ESTICAR: a altura do bloco e' a da
   Tipografia ao lado (stretch da grade), e o que sobra fica embaixo da nota das
   cores, nao dentro de uma area de soltar de 300px. Tudo aqui sobrescreve as
   secoes 7 e 8, que continuam sendo o desenho de cada peca.
   -------------------------------------------------------------------------- */

.lm-ident-metade {
    display: flex;
    flex-direction: column;
}

.lm-ident-metade + .lm-ident-metade {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--lm-border);
}

.lm-ident-bloco--marca .lm-ident-drop,
.lm-ident-bloco--marca .lm-ident-drop__alvo {
    flex: 0 0 auto;
    min-height: 7.5rem;
}

/* Com arquivo: previa a esquerda, nome e acoes a direita — uma linha so. */
.lm-ident-bloco--marca .lm-ident-logo {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    flex: 0 0 auto;
    align-items: center;
    gap: 1rem;
    text-align: left;
}

.lm-ident-bloco--marca .lm-ident-logo__previa {
    height: 7.5rem;
    min-height: 0;
    max-height: none;
    margin-bottom: 0;
}

.lm-ident-logo__info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.lm-ident-bloco--marca .lm-ident-logo__acoes {
    margin-top: 0;
    padding-top: 0.5rem;
}

/* A amostra deixa de pagar altura: uma faixa de 4.5rem, nao um banner. */
.lm-ident-bloco--marca .lm-ident-amostra {
    height: 4.5rem;
    min-height: 0;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   12. Telas estreitas

   Tres quebras, e cada uma resolve um aperto diferente: os blocos de tres para
   duas colunas, e o bloco de IA lado a lado. (A barra de elementos saiu em 18/09.)
   -------------------------------------------------------------------------- */

@media (max-width: 1399px) {

    .lm-ident-blocos {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 991px) {

    .lm-ident-ia {
        grid-template-columns: minmax(0, 1fr);
    }

    .lm-ident-blocos {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {

    .lm-ident-cores {
        grid-template-columns: minmax(0, 1fr);
    }

    .lm-ident-amostra {
        grid-template-columns: minmax(0, 1fr);
    }

    .lm-ident-rodape {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   PD-783 - RELATORIO DE RETAIL MIDIA  (state `lmRetailMedia`)
   ==========================================================================

   ⚠️ TODO PREFIXO DESTA SECAO E' NOVO, e foi conferido contra o arquivo inteiro
   e as views antes de nascer: `lm-retail*` estava livre. O namespace daqui e'
   PLANO - classe repetida nao da erro, da comportamento (a `.lm-preview` de
   28/08).

   Os dois seletores de multipla escolha NAO tem regra aqui: reusam o `lm-multi`
   dos temas de noticia (secao 23), que e' o unico multiselect do portal. */

/* A barra de filtros em DUAS LINHAS (24/09, a pedido — numa linha so a busca
   saia cortada): "Buscar | Unidades | Local" em cima e "Periodo | Retail midia |
   Gerar e enviar" embaixo, com o motivo do botao numa terceira linha inteira.
   GRID POR AREAS, e nao por posicao: o campo de Unidades so existe para matriz
   com filial (`ng-if`), e sem ele a busca ocupa a area dele (`is-sem-unidades`)
   em vez de o resto escorregar uma coluna. */
.lm-retail-filtros {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "busca   unidades telas"
        "periodo retail   acao"
        "motivo  motivo   motivo";
    align-items: end;
    gap: 0.9rem 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius-lg);
    background: var(--lm-surface);
    box-shadow: var(--lm-shadow);
}

.lm-retail-filtros.is-sem-unidades {
    grid-template-areas:
        "busca   busca    telas"
        "periodo retail   acao"
        "motivo  motivo   motivo";
}

.lm-retail-filtros > .lm-field {
    margin-bottom: 0;
    min-width: 0;
}

.lm-retail-filtros__busca    { grid-area: busca; }
.lm-retail-filtros__unidades { grid-area: unidades; }
.lm-retail-filtros__telas    { grid-area: telas; }
.lm-retail-filtros__periodo  { grid-area: periodo; }
.lm-retail-filtros__retail   { grid-area: retail; }

/* A `.lm-search` tem `min-width: 200px` e `flex: 1 1 240px` por ser feita para a
   barra de ferramentas; aqui ela ocupa so a largura do proprio campo. */
.lm-retail-filtros__busca .lm-search {
    min-width: 0;
}

/* O checkbox fica na altura dos campos, e nao colado no rotulo: sem isto a
   linha de base do "Apenas midias retail" sobe meio campo acima dos vizinhos. */
.lm-retail-filtros__check {
    min-height: 2.5rem;
    margin: 0;
}

/* O botao encosta na direita da linha de baixo. */
.lm-retail-filtros__acao {
    grid-area: acao;
    display: flex;
    justify-content: flex-end;
}

/* Tela estreita: um campo por linha, na ordem de leitura. */
@media (max-width: 900px) {
    .lm-retail-filtros,
    .lm-retail-filtros.is-sem-unidades {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "busca" "unidades" "telas" "periodo" "retail" "acao" "motivo";
    }

    .lm-retail-filtros__acao {
        justify-content: stretch;
    }
}

.lm-retail-gerar {
    min-height: 2.5rem;
    white-space: nowrap;
}

/* O motivo do botao desabilitado. Linha inteira, embaixo dos filtros, e nunca
   tooltip: e' a frase que diz por que o botao nao responde (PD-686). */
.lm-retail-filtros__motivo {
    grid-area: motivo;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

.lm-retail-filtros__motivo > i {
    color: var(--lm-pink);
}

.lm-retail-filtros__erro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    color: var(--lm-warn);
    font-size: 0.75rem;
    font-weight: 600;
}

.lm-retail-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--lm-pink);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* PD-1070 (24/09) - as SUGESTOES da busca de midia, embaixo do campo. Flutuam
   (absolute) por cima da linha de baixo dos filtros: a caixa de filtros nao tem
   `overflow`, entao nada as corta, e empurrar o layout a cada tecla faria a
   segunda linha pular. */
.lm-retail-busca {
    position: relative;
}

.lm-retail-sugestoes {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 15rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.lm-retail-sugestoes__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--lm-txt);
    cursor: pointer;
}

.lm-retail-sugestoes__item > i {
    flex: 0 0 auto;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
}

.lm-retail-sugestoes__item > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lm-retail-sugestoes__item:hover,
.lm-retail-sugestoes__item.is-destaque {
    background: var(--lm-pink-softer);
    color: var(--lm-pink-strong);
}

/* O periodo: um icone e dois campos dentro de uma caixa so, como no mockup. */
.lm-retail-periodo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lm-retail-periodo .lm-input {
    flex: 1 1 0;
    min-width: 0;
}

.lm-retail-periodo__icone {
    flex: 0 0 auto;
    color: var(--lm-txt-soft);
}

.lm-retail-periodo__ate {
    flex: 0 0 auto;
    color: var(--lm-txt-muted);
}

/* A area vazia: branca, como o mockup, e nao a caixa tracejada padrao da
   `.lm-empty` - aqui ela nao e' uma lista vazia, e' o lugar da orientacao. */
.lm-retail-vazio {
    min-height: 22rem;
    border-style: solid;
    border-width: 1px;
    border-color: var(--lm-border);
    background: var(--lm-surface);
}

.lm-retail-vazio__ilustracao {
    width: 10rem;
    height: auto;
}

.lm-retail-vazio .lm-empty__text {
    max-width: 22rem;
    margin-top: 1rem;
}

/* A modal do email */
.lm-retail-modal__nota {
    margin-top: 0.5rem;
}

.lm-retail-email {
    margin-top: 1rem;
    min-width: 0;
}

.lm-retail-modal__acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.lm-retail-modal__acoes .lm-btn {
    justify-content: center;
}

/* A modal de confirmacao: centrada, sem titulo no cabecalho (so o X), como no
   mockup. */
.lm-retail-modal__topo {
    border-bottom: 0;
    padding-bottom: 0;
    justify-content: flex-end;
}

.lm-retail-preparando {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 0;
}

.lm-retail-preparando__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--lm-pink);
    box-shadow: 0 0 0 0.75rem var(--lm-pink-soft);
    color: #ffffff;
    font-size: 1.35rem;
}

.lm-retail-preparando__titulo {
    max-width: 20rem;
    margin: 1.5rem 0 0;
    color: var(--lm-txt-title);
    font-size: 1.05rem;
    font-weight: 700;
}

.lm-retail-preparando__texto {
    max-width: 20rem;
    margin: 0.6rem 0 0;
    color: var(--lm-txt);
}

.lm-retail-preparando__nota {
    margin: 0.6rem 0 0;
    color: var(--lm-txt-muted);
    font-size: 0.75rem;
    font-style: italic;
}

.lm-retail-preparando__ok {
    align-self: stretch;
    justify-content: center;
    margin-top: 1.25rem;
}

/* ==========================================================================
   18/09 (a pedido) — O TOAST DO LISTENMEDIA

   "Melhore os tooltips que aparecem no canto direito superior. Quero algo bem
   mais bonito e com identidade visual LM." O `#toast` do portal era uma caixa
   branca de borda rosa com o texto rosa, igual para sucesso e para erro.

   No LM ele e' um cartao ESCURO (a cor da barra do produto), com o icone e o
   titulo do tipo, o X, e uma barra embaixo que esvazia no tempo do aviso. A cor
   do tipo mora numa variavel so' (`--lm-toast-cor`): icone, fio da esquerda e
   barra leem a mesma — o rosa da marca e' o do aviso neutro (info).

   ⚠️ SO' com `.lm-toast` no `#toast`, que o template poe pelo
   `$root.produtoAtivo`. O ListenPlay continua com o desenho do `main.css`.
   ⚠️ Os seletores levam `#toast`: o `main.css` estiliza `#toast > div` por id, e
   so' um id ganha de um id.
   ========================================================================== */

#toast.lm-toast {
    top: 76px;
    right: 20px;
    width: 380px;
    max-width: calc(100vw - 32px);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#toast.lm-toast.show {
    animation: lm-toast-vida var(--toast-tempo, 5s) ease both;
}

@keyframes lm-toast-vida {
    0% {
        opacity: 0;
        transform: translateX(24px);
    }

    6%,
    92% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(24px);
    }
}

#toast.lm-toast > .lm-toast__card {
    --lm-toast-cor: var(--lm-pink);
    --lm-toast-claro: var(--lm-pink-light);
    --lm-toast-fundo: rgba(252, 58, 125, 0.16);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    overflow: hidden;
    padding: 0.85rem 0.75rem 1rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--lm-radius);
    background: var(--lm-bar-bg);
    box-shadow: inset 3px 0 0 var(--lm-toast-cor), 0 16px 40px rgba(16, 16, 20, 0.28), 0 2px 6px rgba(16, 16, 20, 0.16);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    line-height: 1.45;
}

#toast.lm-toast > .lm-toast--sucesso {
    --lm-toast-cor: #22c55e;
    --lm-toast-claro: #4ade80;
    --lm-toast-fundo: rgba(34, 197, 94, 0.16);
}

#toast.lm-toast > .lm-toast--erro {
    --lm-toast-cor: #ef4444;
    --lm-toast-claro: #f87171;
    --lm-toast-fundo: rgba(239, 68, 68, 0.16);
}

#toast.lm-toast > .lm-toast--atencao {
    --lm-toast-cor: #f59e0b;
    --lm-toast-claro: #fbbf24;
    --lm-toast-fundo: rgba(245, 158, 11, 0.16);
}

.lm-toast__icone {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lm-toast-fundo);
    color: var(--lm-toast-claro);
    font-size: 0.8125rem;
}

.lm-toast__corpo {
    min-width: 0;
    flex: 1 1 auto;
    padding-top: 0.05rem;
}

.lm-toast__titulo {
    display: block;
    margin-bottom: 0.1rem;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

.lm-toast__texto {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.lm-toast__fechar {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin: -0.15rem -0.1rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lm-toast__fechar:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* A barra do tempo que falta: esvazia no mesmo `--toast-tempo` do aviso. No
   neutro (info) ela e' o degrade da marca. */
.lm-toast__tempo {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--lm-toast-cor);
    transform-origin: left center;
}

#toast.lm-toast > .lm-toast--info .lm-toast__tempo {
    background: var(--lm-gradient);
}

#toast.lm-toast.show .lm-toast__tempo {
    animation: lm-toast-tempo var(--toast-tempo, 5s) linear both;
}

@keyframes lm-toast-tempo {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    #toast.lm-toast.show {
        animation: none;
    }

    #toast.lm-toast.show .lm-toast__tempo {
        animation: none;
    }
}


/* =====================================================================
   PD-567 (23/09) - ORIENTACAO DA TELA e o aviso de incompatibilidade.

   .lm-orient          o BOTAO UNICO que gira a tela, no modal (pedido de 23/09, tarde).
                       ⚠️ Tem a ALTURA do .lm-input/.lm-select (2.5rem): o campo
                       fica na grade de tres colunas ao lado do "Tipo de
                       dispositivo", e altura diferente desalinha a linha.
   .lm-orient__aviso   a nota de alerta embaixo da grade (reusa .lm-note--alerta).
   .lm-orient__selo    o selo na lista de telas e no editor.

   Nome conferido no namespace plano antes de nascer: nenhuma .lm-orient* existia.
   ===================================================================== */
/* O BOTAO UNICO que gira a tela (pedido de 23/09, tarde).
   ⚠️ Tem a ALTURA do .lm-input/.lm-select (2.5rem): fica na grade de tres
   colunas ao lado do "Tipo de dispositivo", e altura diferente desalinha a
   linha. O desenho da tela (.lm-orient__tela) GIRA 90 graus em volta do
   proprio centro quando a classe .is-vertical entra; as setas em volta giram
   meia volta junto, para o clique "parecer" o gesto de girar. */
.lm-orient {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem 0 0.45rem;
    border: 1px solid var(--lm-border-strong);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
    color: var(--lm-txt);
    font-family: "Inter", sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.lm-orient:hover {
    border-color: var(--lm-pink);
    background: var(--lm-pink-softer);
}

.lm-orient:focus-visible {
    outline: none;
    border-color: var(--lm-pink);
    box-shadow: 0 0 0 3px var(--lm-pink-soft);
}

.lm-orient.is-invalido {
    border-color: var(--lm-off);
}

.lm-orient__icone {
    flex: 0 0 auto;
    color: var(--lm-pink);
}

.lm-orient__tela,
.lm-orient__setas {
    transform-box: view-box;
    transform-origin: 20px 20px;
    transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.lm-orient.is-vertical .lm-orient__tela {
    transform: rotate(90deg);
}

.lm-orient.is-vertical .lm-orient__setas {
    transform: rotate(180deg);
}

.lm-orient__rotulo {
    flex: 1 1 auto;
    min-width: 0;
}

.lm-orient__dica {
    flex: 0 0 auto;
    color: var(--lm-txt-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* 24/09 - O ICONE SO GIRA NO CLIQUE (a tela vira 90 graus e as setas meia volta),
   e isso vale MESMO com "reduzir movimento" ligado no sistema. Antes havia um
   `@media (prefers-reduced-motion: reduce)` desligando essa transicao, e numa
   maquina com as animacoes do Windows desligadas o icone ficava "chumbado"
   (medido em 24/09: `prefers-reduced-motion: reduce` = true no Chrome do
   escritorio). O giro e' curto e so acontece quando a pessoa clica. */

.lm-orient__aviso {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

/* No painel Telas vinculadas do editor a coluna e estreita (~250px): o selo com
   texto espremia o NOME da tela ate "PD-5..." (medido em 23/09). La ele e so o
   icone; o texto inteiro fica no tooltip, e a nota do painel ja diz o resto. */
.lm-orient__selo--icone {
    flex: 0 0 auto;
    margin-left: 0;
    padding: 0.15rem 0.35rem;
}

.lm-orient__selo {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--lm-warn-soft);
    color: #7c4a03;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}

.lm-orient__selo > i {
    color: var(--lm-warn);
}


/* =========================================================================
   PD-1243 (07/10) — "Minha identidade" > Tipografia > SUAS FONTES
   (`.lm-ident-fontes*`). O input de arquivo fica INVISÍVEL dentro do botão,
   como o "Trocar arquivo" do logo.
   ========================================================================= */
.lm-ident-fontes { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--lm-border); }
.lm-ident-fontes__cab { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.lm-ident-fontes__enviar { position: relative; overflow: hidden; cursor: pointer; }
.lm-ident-fontes__enviar input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lm-ident-fontes__enviar.is-desabilitado { opacity: 0.6; pointer-events: none; }
.lm-ident-fontes__nota { margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--lm-txt-muted); }
.lm-ident-fontes__lista { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.5rem; }
.lm-ident-fontes__lista > li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--lm-border);
    border-radius: var(--lm-radius);
    background: var(--lm-surface);
}
.lm-ident-fontes__amostra {
    flex: 0 0 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--lm-pink-soft);
    color: var(--lm-pink);
    font-size: 1.35rem;
}
.lm-ident-fontes__nome { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.lm-ident-fontes__nome b { font-size: 0.875rem; color: var(--lm-txt-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-ident-fontes__nome small { font-size: 0.6875rem; color: var(--lm-txt-muted); }
.lm-ident-fontes__excluir { border: 0; background: none; color: var(--lm-txt-muted); padding: 0.35rem; cursor: pointer; }
.lm-ident-fontes__excluir:hover { color: #c62828; }

/* =========================================================================
   PD-1243 (08/10, TASK-021) — a PREVIA com o TEMPLATE DE TELA (`.is-template`
   no palco). Os retangulos chegam por `ng-style`, em por cento do palco, como
   na TV. O tamanho da letra do logo sai da LARGURA do palco (`cqw`): o palco
   muda com a janela, e pixel daria um nome gordo no palco pequeno.
   ========================================================================= */
.lm-preview-stage__box.is-template { container-type: inline-size; }
.lm-preview-stage__box.is-template .lm-preview-stage__layer { z-index: 1; background: #000; }
.lm-preview-stage__box.is-template .lm-preview-stage__layer video { object-fit: contain; }
.lm-preview-stage__box.is-template .lm-preview-stage__bar { z-index: 2; }
.lm-playerprev__tplquadro {
    position: absolute;
    z-index: 1;
    display: block;
    border: 0;
    background: transparent;
    pointer-events: none;
}
.lm-playerprev__tpllogo {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}
.lm-playerprev__tpllogo-conteudo {
    display: flex;
    align-items: center;
    gap: 0.6cqw;
    height: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* A placa escura do logo SOBRE A MIDIA — a mesma do player (`LogoDaConta`). */
.lm-playerprev__tpllogo-conteudo.is-placa {
    padding: 0.35cqw 0.7cqw;
    border-radius: 0.6cqw;
    background: rgba(10, 10, 16, 0.55);
    backdrop-filter: blur(6px);
}
.lm-playerprev__tpllogo-conteudo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.lm-playerprev__tpllogo-iniciais {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    color: #fff;
    font-weight: 900;
    font-size: 1.1cqw;
}
.lm-playerprev__tpllogo-nome { color: #fff; font-weight: 800; font-size: 1.4cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 08/10 — campo do painel que a opcao escolhida nao usa: fica CINZA, nao some. */
.lm-cfg__intervalo.is-desabilitado .lm-field__label { color: var(--lm-txt-muted); opacity: 0.6; }

/* =========================================================================
   PD-1243 (13/10) — "Minha identidade" > ONDE A IDENTIDADE ENTRA
   (`.lm-ident-aplicar*`). Dois blocos lado a lado, cada um com interruptor e,
   ligado, a previa: o Listen Estudio (a peca vestida pelo mesmo motor do
   Estudio) e a TV (o quadro de aulas de verdade + a barra informativa).
   O palco da TV desenha os blocos do catalogo em POR CENTO, como o player.
   ========================================================================= */
.lm-ident-aplicar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.25rem;
    margin-top: 1.25rem;
}
@media (max-width: 1100px) {
    .lm-ident-aplicar { grid-template-columns: 1fr; }
}
.lm-ident-aplicar__bloco { display: flex; flex-direction: column; gap: 1rem; }
.lm-ident-aplicar__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.lm-ident-aplicar__titulo { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--lm-txt-title); line-height: 1.3; }
.lm-ident-aplicar__sub { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--lm-txt-muted); }
.lm-ident-aplicar__nota { margin: 0.6rem 0 0; font-size: 0.8125rem; color: var(--lm-txt-muted); }
.lm-ident-aplicar__falha { margin: 0; padding: 1rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); }

/* O interruptor e' um BOTAO com o desenho do `.lm-flip` (o `<input>` dele
   acenderia por `ng-model`, que no scope filho do `ng-if` nao chegaria ao form). */
/* 13/10, a pedido ("radius estranho"): o botao tinha 27px contra 24px do trilho - a linha de texto
   do <button> sobrava embaixo, e o foco/realce desenhava uma pilula mais alta que o interruptor.
   Hoje a caixa e' a do trilho, sem linha de texto. */
.lm-ident-aplicar__flip { flex: 0 0 auto; display: inline-flex; width: 2.75rem; height: 1.5rem; padding: 0; margin: 0; border: 0; background: none; line-height: 0; cursor: pointer; border-radius: var(--lm-radius-pill); overflow: hidden; }
.lm-ident-aplicar__flip.is-ligado .lm-flip__trilho { background: var(--lm-pink); }
.lm-ident-aplicar__flip.is-ligado .lm-flip__trilho::after { transform: translateX(1.25rem); }
.lm-ident-aplicar__flip:focus-visible { outline: 2px solid var(--lm-pink); outline-offset: 2px; }

/* Bloco 1 — a peca do Estudio. A largura vem do `lm-medida`; a altura, da peca. */
.lm-ident-aplicar__estudio { border-radius: var(--lm-radius); overflow: hidden; background: #12121a; min-height: 4rem; }
.lm-ident-aplicar__estudio lm-studio-quadro { display: block; }

/* Bloco 2 — o palco 16:9 da TV. */
.lm-ident-aplicar__tela {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--lm-radius);
    overflow: hidden;
}
.lm-ident-aplicar__peca { position: absolute; box-sizing: border-box; }
.lm-ident-aplicar__peca--logo { z-index: 2; }
.lm-ident-aplicar__quadro { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.lm-ident-aplicar__midia {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #3a1250, #fc3a7d);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    font-size: 0.875rem;
}
.lm-ident-aplicar__midia > i { font-size: 1.75rem; }
.lm-ident-aplicar__logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; }
.lm-ident-aplicar__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lm-ident-aplicar__logo b { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-ident-aplicar__barra {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 1rem;
    background: #0b0b12;
    border-top: 3px solid var(--lm-pink);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}
.lm-ident-aplicar__hora { margin-left: auto; }