/* =============================================================
   LIVRARIA AKASHA — admin.css
   Painel administrativo. Mesma paleta da loja, visual mais sóbrio:
   é uma ferramenta de trabalho, não uma vitrine.
   ============================================================= */

:root {
  --anil-profundo: #1A0B4F;
  --anil:          #4A2FCE;
  --ouro:          #C9A96E;
  --branco:        #FDFCFF;
  --tinta:         #0D0B1A;
  --cinza-fundo:   #F4F3F7;

  /* Cores de estado: só aparecem para sinalizar algo (estoque, situação) */
  --alerta:        #B42318;
  --sucesso:       #1F7A4D;

  --borda:         rgba(26, 11, 79, .12);
  --texto-apoio:   rgba(13, 11, 26, .55);
  --largura-lateral: 240px;
}

body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--cinza-fundo);
  color: var(--tinta);
  font-size: 14px;
}

a { color: var(--anil); }


/* --- Barra lateral ------------------------------------------- */

/* No celular é um Offcanvas; esta variável define a cor dele */
.painel-lateral {
  --bs-offcanvas-width: 260px;
  --bs-offcanvas-bg: var(--anil-profundo);
}

.painel-lateral-interno {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background-color: var(--anil-profundo);
}

.painel-lateral-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 22px 22px;
}

.painel-logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.painel-logo-nome {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--ouro);
}

.painel-logo-selo {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: .4em;
  color: rgba(253, 252, 255, .55);
}

.painel-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

.painel-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  border-left: 3px solid transparent;
  font-size: 14px;
  color: rgba(201, 169, 110, .8);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.painel-menu-item i { font-size: 17px; }

.painel-menu-item:hover {
  background-color: rgba(201, 169, 110, .07);
  color: var(--ouro);
}

.painel-menu-item.ativo {
  border-left-color: var(--ouro);
  background-color: rgba(201, 169, 110, .14);
  color: var(--ouro);
  font-weight: 500;
}

.painel-usuario {
  margin-top: auto;
  padding: 18px 22px 22px;
  border-top: 1px solid rgba(201, 169, 110, .18);
}

.painel-usuario-nome {
  margin: 0;
  font-weight: 500;
  color: var(--branco);
}

.painel-usuario-tipo {
  margin: 2px 0 12px;
  font-size: 12px;
  color: rgba(253, 252, 255, .55);
}

.painel-sair {
  font-size: 13px;
  color: var(--ouro);
  text-decoration: none;
}

.painel-sair:hover { text-decoration: underline; }


/* --- Topo e área de trabalho --------------------------------- */

.painel-topo {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  background-color: #fff;
  border-bottom: 1px solid var(--borda);
}

.painel-titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--anil-profundo);
}

.painel-ver-loja {
  margin-left: auto;
  font-size: 13px;
  text-decoration: none;
}

.painel-botao-menu {
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--anil-profundo);
}

.painel-conteudo {
  padding: 28px;
}

/* Desktop: a barra lateral sai do Offcanvas e fica fixa à esquerda */
@media (min-width: 992px) {
  .painel-lateral {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--largura-lateral);
    overflow-y: auto;
  }

  .painel-area {
    margin-left: var(--largura-lateral);
  }
}

@media (max-width: 575.98px) {
  .painel-topo { padding: 0 16px; }
  .painel-conteudo { padding: 18px 14px; }
}


/* --- Cartões ------------------------------------------------- */

.cartao-painel {
  background-color: #fff;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 20px;
}

.cartao-painel-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.cartao-painel-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--anil-profundo);
}


/* --- Painel inicial ------------------------------------------ */

.saudacao {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--anil-profundo);
}

.saudacao-data {
  margin: 4px 0 24px;
  color: var(--texto-apoio);
}

.indicador {
  height: 100%;
  background-color: #fff;
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 18px;
}

.indicador-icone {
  font-size: 22px;
  color: var(--ouro);
}

.indicador-numero {
  margin: 8px 0 2px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  color: var(--anil-profundo);
}

.indicador-rotulo {
  margin: 0;
  font-size: 12px;
  color: var(--texto-apoio);
}

.indicador-alerta {
  border-color: var(--alerta);
}

.indicador-alerta .indicador-numero {
  color: var(--alerta);
}

/* Rascunho pendente também chama atenção, mas em ouro: é trabalho
   em andamento, não problema a resolver. */
.indicador-ouro {
  border-color: var(--ouro);
}

.indicador-ouro .indicador-numero {
  color: #8A6D3B;
}

/* Quando o indicador leva a uma listagem filtrada, o cartão inteiro vira link */
a.indicador {
  display: block;
  text-decoration: none;
  transition: border-color .15s ease;
}

a.indicador:hover {
  border-color: var(--ouro);
}


/* --- Botões -------------------------------------------------- */

.botao-principal,
.botao-secundario {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.botao-principal {
  border: 1px solid var(--ouro);
  background-color: var(--ouro);
  color: var(--tinta);
}

.botao-principal:hover {
  filter: brightness(1.06);
  color: var(--tinta);
}

.botao-secundario {
  border: 1px solid rgba(26, 11, 79, .25);
  background-color: #fff;
  color: var(--anil-profundo);
}

.botao-secundario:hover {
  border-color: var(--anil-profundo);
  color: var(--anil-profundo);
}

.botao-pequeno {
  padding: 5px 11px;
  font-size: 12.5px;
}

/* Botões só com ícone, nas ações da tabela */
.botao-icone {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26, 11, 79, .2);
  border-radius: 7px;
  background-color: #fff;
  color: var(--anil-profundo);
  text-decoration: none;
}

.botao-icone:hover {
  border-color: var(--ouro);
  color: var(--anil-profundo);
}


/* --- Tabelas ------------------------------------------------- */

.tabela-painel {
  margin: 0;
  vertical-align: middle;
}

.tabela-painel th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-apoio);
  white-space: nowrap;
}

.tabela-painel td {
  color: var(--tinta);
}

.miniatura,
.miniatura-vazia {
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

.miniatura-capa   { width: 40px; height: 56px; }
.miniatura-materia { width: 56px; height: 32px; }

.miniatura-vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E6E4EC;
  color: rgba(26, 11, 79, .4);
}

.codigo-produto {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12px;
}

.texto-apoio {
  display: block;
  font-size: 12px;
  color: var(--texto-apoio);
}

.texto-slug {
  display: block;
  font-size: 11px;
  color: var(--texto-apoio);
}

.estoque-baixo {
  font-weight: 700;
  color: var(--alerta);
}

.pilula {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* Uma pílula por situação. O rascunho usa o ouro da marca, não vermelho:
   não é erro nem problema, é trabalho em andamento. */
.pilula-rascunho  { background-color: rgba(201, 169, 110, .15); color: #8A6D3B; }
.pilula-cancelado { background-color: rgba(180, 35, 24, .1);    color: var(--alerta); }
.pilula-publicado { background-color: rgba(31, 122, 77, .12);   color: var(--sucesso); }
.pilula-inativo   { background-color: rgba(13, 11, 26, .08);    color: var(--texto-apoio); }
.pilula-tag     { background-color: rgba(74, 47, 206, .1);  color: var(--anil); letter-spacing: .06em; }

.estrela-destaque { font-size: 16px; color: var(--ouro); }
.estrela-vazia    { font-size: 16px; color: rgba(26, 11, 79, .25); }

.estado-vazio {
  padding: 26px 10px;
  text-align: center;
  color: var(--texto-apoio);
}

.estado-vazio p { margin-bottom: 12px; }


/* --- Filtros e paginação ------------------------------------- */

.barra-acoes-painel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.barra-acoes-painel .form-control,
.barra-acoes-painel .form-select {
  width: auto;
  min-width: 220px;
}

/* A busca precisa caber o texto de apoio inteiro ("Buscar por título ou código") */
.barra-acoes-painel input[type="search"] {
  min-width: 290px;
}

/* Empurra o botão principal para a ponta direita da barra.
   Esta regra precisa vir ANTES da media query abaixo: as duas têm a mesma
   especificidade, e nesse empate vence a que estiver por último no arquivo.
   Com ela embaixo, a media query nunca surtia efeito em tela pequena. */
.barra-acoes-painel .botao-principal {
  margin-left: auto;
}

@media (max-width: 575.98px) {
  .barra-acoes-painel .form-control,
  .barra-acoes-painel .form-select,
  .barra-acoes-painel input[type="search"] {
    min-width: 0;
    width: 100%;
  }

  .barra-acoes-painel .botao-principal {
    margin-left: 0;
  }
}

.paginacao-painel .page-link {
  color: var(--anil-profundo);
}

.paginacao-painel .page-item.active .page-link {
  border-color: var(--anil-profundo);
  background-color: var(--anil-profundo);
  color: var(--ouro);
}


/* --- Formulários --------------------------------------------- */

.secao-formulario {
  margin-bottom: 18px;
}

.secao-formulario-titulo {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--anil-profundo);
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--anil-profundo);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--ouro);
  box-shadow: 0 0 0 .2rem rgba(201, 169, 110, .25);
}

.form-check-input:checked {
  border-color: var(--anil-profundo);
  background-color: var(--anil-profundo);
}

.campo-ajuda {
  margin-top: 4px;
  font-size: 12px;
  color: var(--texto-apoio);
}

.obrigatorio { color: var(--alerta); }

.capa-atual {
  width: 84px;
  height: 120px;
  object-fit: cover;
  border: 1px solid var(--borda);
  border-radius: 6px;
}

.imagem-materia-atual {
  width: 160px;
  height: 90px;
  object-fit: cover;
  border: 1px solid var(--borda);
  border-radius: 6px;
}

.contador-caracteres {
  font-size: 12px;
  color: var(--texto-apoio);
}

.contador-caracteres.no-limite { color: var(--alerta); }

.acoes-formulario {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}


/* --- Mensagens ----------------------------------------------- */

.mensagem {
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13.5px;
}

.mensagem-sucesso {
  border: 1px solid rgba(31, 122, 77, .3);
  background-color: rgba(31, 122, 77, .08);
  color: var(--sucesso);
}

.mensagem-erro {
  border: 1px solid rgba(180, 35, 24, .3);
  background-color: rgba(180, 35, 24, .06);
  color: var(--alerta);
}

.mensagem-erro ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* Mensagem de sucesso que carrega ações ("Ver na loja", "Continuar editando"):
   quem acabou de gravar quer conferir o resultado sem procurar o item na lista. */
.mensagem-com-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.mensagem-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mensagem-nota {
  font-size: 12.5px;
  color: var(--texto-apoio);
}


/* --- Campo de situação nos formulários ----------------------- */
/* Três opções com consequências diferentes: radio deixa as três visíveis
   de uma vez, com o efeito de cada uma ao lado. Um select esconderia duas. */
.opcoes-situacao {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opcao-situacao {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.opcao-situacao .form-check-input {
  flex-shrink: 0;
  margin: 3px 0 0;
}

.opcao-situacao-apoio {
  font-size: 12px;
  color: var(--texto-apoio);
}

.aviso-destaque {
  font-size: 12px;
  color: #8A6D3B;
}


/* --- Seleção múltipla nas listagens -------------------------- */
/* A barra só aparece quando há algo marcado: o botão de excluir não fica
   à mão o tempo todo, e quem clica já sabe quantos itens vão junto. */
.barra-selecao {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 10px 16px;
  border: 1px solid rgba(180, 35, 24, .3);
  border-radius: 8px;
  background-color: rgba(180, 35, 24, .05);
}

.barra-selecao-texto {
  font-size: 13px;
  color: var(--anil-profundo);
}

.coluna-selecao {
  width: 34px;
}

.botao-perigo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--alerta);
  border-radius: 8px;
  background-color: var(--alerta);
  font-family: var(--corpo);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.botao-perigo:hover {
  filter: brightness(1.08);
}

.botao-icone-perigo {
  color: var(--alerta);
}

.botao-icone-perigo:hover {
  border-color: var(--alerta);
  color: var(--alerta);
}

/* Formulário de uma ação só, dentro de uma célula da tabela */
.form-linha {
  display: inline-block;
  margin: 0;
}

/* Ação indisponível (a própria conta, por exemplo): fica visível, mas apagada */
.botao-icone-desligado {
  opacity: .4;
  cursor: not-allowed;
}


/* --- Pedidos -------------------------------------------------- */

.rotulo-periodo {
  margin: 0;
  font-size: 12.5px;
  color: var(--texto-apoio);
}

.barra-acoes-painel .campo-data {
  width: auto;
  min-width: 150px;
}

.linha-situacao {
  display: flex;
  gap: 10px;
}

.linha-situacao .form-select {
  flex: 1;
}

.dado-simples {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta);
}

.dado-simples i {
  color: var(--ouro);
}

/* Linha de total no rodapé da tabela do pedido */
.tabela-painel tfoot td {
  border-top: 1px solid var(--borda);
  color: var(--texto-apoio);
}

.tabela-painel tfoot .linha-total td {
  font-size: 15px;
  font-weight: 700;
  color: var(--anil-profundo);
}

.cartao-painel-titulo .pilula {
  margin-left: 8px;
  vertical-align: middle;
}


/* --- Tela de login ------------------------------------------- */
.tela-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background-color: var(--anil-profundo);
  background-image: radial-gradient(circle at 50% 0%, rgba(74, 47, 206, .5), transparent 60%);
}

.cartao-login {
  width: 100%;
  max-width: 380px;
  padding: 32px 30px 26px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(13, 11, 26, .45);
}

.login-marca {
  margin-bottom: 26px;
  text-align: center;
}

.login-logo {
  height: 40px;
  width: auto;
}

.login-selo {
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: .4em;
  color: var(--texto-apoio);
}

/* Cadastro e instalação pedem mais campos que o login */
.cartao-login-largo {
  max-width: 440px;
}

.login-alternativa {
  margin: 18px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--texto-apoio);
}

.login-voltar {
  display: block;
  margin-top: 20px;
  font-size: 12.5px;
  text-align: center;
  color: var(--texto-apoio);
  text-decoration: none;
}

.login-voltar:hover {
  color: var(--anil-profundo);
}


/* --- Peças comuns das páginas novas -------------------------- */

.texto-introducao {
  margin-bottom: 18px;
  color: var(--texto-apoio);
}

/* Aviso que pede ação: produto fora do ar, lançamento sem produto. */
.texto-alerta {
  display: block;
  font-size: 12px;
  color: var(--alerta);
}

.texto-apoio .texto-alerta {
  display: inline;
}

.botao-icone:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.botao-icone:disabled:hover {
  border-color: rgba(26, 11, 79, .2);
}

/* Botão do painel dentro de um input-group do Bootstrap: cola no campo. */
.input-group > .botao-secundario {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}


/* --- Gerenciador de imagens do produto ----------------------- */

.gerenciador-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borda);
}

.gerenciador-cabecalho .secao-formulario-titulo {
  margin: 0;
  padding: 0;
  border: 0;
}

.contador-imagens {
  font-size: 12.5px;
  color: var(--texto-apoio);
}

.grade-imagens {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.item-imagem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.item-imagem-figura {
  position: relative;
}

.miniatura-gerenciador {
  display: block;
  width: 84px;
  height: 120px;
  object-fit: cover;
  border: 1px solid var(--borda);
  border-radius: 6px;
}

/* A primeira imagem é a que aparece nos cartões, no carrinho e nos pedidos. */
.selo-capa {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 7px;
  border-radius: 3px;
  background-color: var(--ouro);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta);
}

.item-imagem-acoes {
  display: flex;
  gap: 4px;
}

.item-imagem-acoes .botao-icone {
  width: 28px;
  height: 28px;
}

.aviso-excedente {
  color: var(--alerta);
}


/* --- Destaques da semana ------------------------------------- */

.caixa-destaque {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.caixa-destaque-numero {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  color: var(--ouro);
}

.caixa-destaque-produto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.caixa-destaque-produto form {
  margin-top: 4px;
}

.caixa-destaque-capa {
  width: 84px;
  height: 120px;
  object-fit: cover;
  border: 1px solid var(--borda);
  border-radius: 6px;
}

.caixa-destaque-titulo {
  margin: 0;
  font-weight: 500;
  color: var(--anil-profundo);
}

.caixa-destaque-busca {
  margin-top: auto;
}

.lista-resultados {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resultado-destaque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
}

.resultado-destaque-textos {
  min-width: 0;
}

.resultado-destaque-titulo {
  display: block;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.resultado-destaque form {
  flex-shrink: 0;
  margin: 0;
}


/* --- Carrossel: escolha do tipo com desenho ------------------ */
/* Três cartões clicáveis, cada um com um esboço do leiaute. O radio de
   verdade fica por baixo: funciona com teclado e leitor de tela. */

.opcoes-tipo-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.opcao-tipo-banner {
  position: relative;
}

.opcao-tipo-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.opcao-tipo-rotulo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background-color: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.opcao-tipo-rotulo:hover {
  border-color: rgba(201, 169, 110, .7);
}

.opcao-tipo-radio:checked + .opcao-tipo-rotulo {
  border-color: var(--ouro);
  box-shadow: 0 0 0 2px rgba(201, 169, 110, .35);
}

.opcao-tipo-radio:focus-visible + .opcao-tipo-rotulo {
  outline: 2px solid var(--anil);
  outline-offset: 2px;
}

.opcao-tipo-nome {
  font-weight: 500;
  color: var(--anil-profundo);
}

.opcao-tipo-apoio {
  font-size: 12px;
  color: var(--texto-apoio);
}

/* O esboço: fundo anil, linhas de texto em ouro, capas em branco translúcido. */
.desenho-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 10px;
  border-radius: 6px;
  background-color: var(--anil-profundo);
}

.desenho-textos {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.desenho-textos span {
  display: block;
  height: 5px;
  border-radius: 3px;
  background-color: var(--ouro);
  opacity: .85;
}

.desenho-textos .curta {
  width: 60%;
  opacity: .5;
}

.desenho-textos .preco {
  width: 35%;
  height: 7px;
}

.desenho-textos.centro {
  align-items: center;
}

.desenho-textos.centro span {
  width: 80%;
}

.desenho-textos.centro .curta {
  width: 50%;
}

.desenho-capas {
  display: flex;
  align-items: center;
  gap: 4px;
}

.desenho-capas span {
  width: 14px;
  height: 22px;
  border-radius: 2px;
  background-color: rgba(253, 252, 255, .35);
}

.desenho-capas .maior {
  width: 18px;
  height: 28px;
  background-color: rgba(253, 252, 255, .55);
}

.desenho-capa {
  flex-shrink: 0;
  width: 26px;
  height: 40px;
  border-radius: 2px;
  background-color: rgba(253, 252, 255, .5);
}

.produto-ligado-atual {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background-color: var(--cinza-fundo);
}


/* --- Avaliações ---------------------------------------------- */

.estrelas-painel {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ouro);
}

.coluna-comentario {
  min-width: 220px;
  max-width: 360px;
  white-space: normal;
  overflow-wrap: anywhere;
}