/**
 * colorpicker.css
 * Estilos do widget "Color Picker" (ver js/media/colorpicker-widget.js).
 * Cópia gémea em js/core/export-html.js (EXPORT_CSS) — o export é
 * self-contained (um único <style>), sem depender deste ficheiro.
 *
 * Mecanismo do #picker (barra de bolinhas) transcrito FIELMENTE do CSS
 * original de referência (anúncio Volvo) — ver comentários inline em cada
 * regra para o equivalente exato da regra original.
 */
.colorpicker-widget {
    position: relative;
    /* COM width/height:100% (ao contrário do countdown, ver
       countdown.css) — pedido explícito do utilizador: a imagem deve
       preencher o espaço disponível do bloco (menos o Padding/Justify/
       Align do Layout Interno, que continuam a decidir esse espaço
       normalmente), nunca ficar ao tamanho NATURAL da imagem — bug real
       confirmado: com Justify Content:Center, uma imagem mais baixa que
       o bloco deixava um espaço vazio gigante acima/abaixo (o widget
       media pequeno, centrado no meio de um espaço bem maior). Sem
       referência circular aqui porque .media-item (o pai direto) já
       recebe flex:1 1 auto dentro de scaleWrap, que por sua vez ocupa o
       espaço TODO do bloco (ver buildLeafContent) — o tamanho já vem de
       cima, não depende do conteúdo. */
    width: 100%;
    height: 100%;
    display: block;
}

.colorpicker-images {
    position: relative;
    width: 100%;
    height: 100%;
}

/* SEM transição — a troca de imagem é instantânea (só as BOLINHAS do
   seletor têm animação, ver .picker-item/.picker-dot; a imagem grande
   nunca deve fazer fade). */
.colorpicker-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    visibility: hidden;
}

/* Todas as imagens exceto a ativa ficam empilhadas em cima dela via
   absolute (sem tirar espaço do fluxo); a ATIVA fica em fluxo normal
   (position:relative) — ambas já preenchem 100% do widget (ver regra
   base .colorpicker-image acima), o container não depende mais do
   tamanho natural de nenhuma imagem para ter dimensão própria. */
.colorpicker-image:not(.active) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.colorpicker-image.active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

/* Sem imagem carregada ainda (editor): dá tamanho mínimo visível ao
   widget, para não desaparecer do preview antes do upload da 1ª cor. */
.colorpicker-image.active:not([src]) {
    min-width: 120px;
    min-height: 80px;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 10px, transparent 10px 20px);
}

/* Barra "#picker" do original: fundo branco translúcido + blur, largura
   ao conteúdo (max-content — nunca esticada), altura 100% do wrapper
   posicionado (.colorpicker-swatches, que já tem X/Y/Largura/Altura
   próprios em % vindos do JS). Original:
     #picker { width:max-content; height:100%; padding:.125rem;
       border-radius:99rem; background-color:rgba(129,129,129,.5);
       backdrop-filter:blur(2px); display:flex; align-items:center;
       justify-content:space-between; gap:.25rem; } */
.colorpicker-swatches {
    box-sizing: border-box;
    position: absolute;
    width: max-content;
    height: 100%;
    max-width: 100%;
    padding: .125rem;
    /* Quando a PONTA do grupo (1º ou último item) é a pill ativa (oval,
       maior que um quadrado), o padding fixo de .125rem ficava visivelmente
       mais apertado do lado da pill do que o respiro topo/fundo dela
       (calculado, tipicamente maior) — a pill deixava de parecer
       "concêntrica" à cápsula à sua volta. --cp-edge-gap-left/right-px
       (calculados em JS, ver colorpicker-widget.js) substituem o padding
       fixo SÓ do lado onde a ponta é a pill ativa, igualando-o ao mesmo
       respiro vertical — nos outros casos (ponta é bolinha inativa,
       simétrica por natureza) o fallback mantém o .125rem original. */
    padding-left: var(--cp-edge-gap-left-px, .125rem);
    padding-right: var(--cp-edge-gap-right-px, .125rem);
    border-radius: 99rem;
    /* Fundo da cápsula translúcida — cor+opacidade combinadas num rgba()
       já resolvido em JS (--cp-bar-bg, ver colorpicker-widget.js). Não é
       um checkbox binário "transparente": o utilizador escolhe QUALQUER
       cor a QUALQUER opacidade (incluindo 0%, visualmente igual a
       "transparente" mas sem precisar de um controlo à parte). */
    background-color: var(--cp-bar-bg, rgba(129, 129, 129, .5));
    border: var(--cp-bar-border-width, 2px) solid var(--cp-bar-border-color, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    /* center (não space-between do original): com poucas cores,
       space-between empurrava a 1ª bolinha para a ponta esquerda e a
       última para a direita — a pill ativa parecia "descentrada" da
       barra. Com center, todos os itens ficam agrupados com o mesmo gap,
       sempre centrados dentro da barra (que por sua vez já tem
       width:max-content — cresce só o suficiente para caber o grupo). */
    justify-content: center;
    gap: var(--cp-gap, 2px);
    font-size: var(--cp-font-size, 13px);
    letter-spacing: 0;
}

.colorpicker-swatches--square {
    border-radius: 8px;
}

/* .picker-item (original): botão só com a bolinha quando inativo; ao
   ficar ativo ganha fundo branco e "abre" o .picker-label ao lado.
   Original:
     .picker-item { position:relative; height:100%; padding:.125rem;
       border-radius:99rem; display:flex; align-items:center;
       justify-content:center; background-color:transparent;
       transition:background-color .2s; overflow:hidden; }
     .picker-item.active { background-color:#fff; cursor:default; }
     .picker-item:not(.active) { cursor:pointer; }
     .picker-item:not(.active):first-child { padding-left:... }
     .picker-item:not(.active):last-child { padding-right:... }
     .picker-item:not(.active):hover .picker-dot { opacity:.5; } */
.picker-item {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    border: none;
    border-radius: 99rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    cursor: pointer;
    flex: 0 0 auto;
}

/* Forma "Retangular": a pill branca (fundo do item ativo) e o item
   inativo em si também ficam com cantos quadrados — antes só a bolinha
   (.picker-dot) reagia à forma, a pill à volta ficava sempre redonda
   (99rem fixo), o que era inconsistente quando se escolhia "Retangular". */
.colorpicker-swatches--square .picker-item {
    border-radius: 8px;
}

/* Inativo: o item é um quadrado (aspect-ratio:1) do tamanho da própria
   altura da barra — a bolinha fica automaticamente centrada dentro dele,
   com a MESMA margem em cima/baixo/lado. Revertido para este tamanho
   original (a tentativa de usar padding em px para "resolver" o gap
   mudou visualmente o tamanho da bolinha inativa sem ter sido pedido). */
.picker-item:not(.active) {
    aspect-ratio: 1 / 1;
}

/* Margin horizontal NEGATIVA só ENTRE duas bolinhas inativas consecutivas
   (nunca na primeira nem na última do grupo, para não comer o espaço
   entre a bolinha e a borda da própria barra — isso é o padding/folga
   normal do item, que fica intacto). Comprime só a folga lateral fixa do
   quadrado (sobra à volta da bolinha a 62% da altura) entre um item e o
   seguinte, sem tocar no tamanho da bolinha em si — o `gap` da barra (ver
   .colorpicker-swatches) volta a ser o espaço DOMINANTE e realmente
   visível entre bolinhas, controlável do zero até valores grandes.
   Calculado em JS a partir da folga real medida (--cp-swatch-margin-px),
   ver colorpicker-widget.js. */
.picker-item:not(.active) + .picker-item:not(.active) {
    margin-left: var(--cp-swatch-margin-px, -6px);
}

/* Ativo: o fundo branco preenche o item inteiro (uma pill legítima, com
   os dois lados arredondados por border-radius:99rem herdado) — a
   legenda cresce para a esquerda, a bolinha fica sempre encostada ao
   lado DIREITO (justify-content:flex-end), nunca ao centro do item
   inteiro. Isto é o que garante a concentricidade: a bolinha mede sempre
   a mesma distância ao topo, ao fundo E à borda direita — os 3 lados que
   a rodeiam sem nada a seguir (o 4º lado, esquerdo, é ocupado pela
   legenda, que tem o seu próprio padding independente). */
.picker-item.active {
    /* Fundo + borda da BOLA BRANCA — cor+opacidade combinadas (ver
       colorpicker-widget.js), em vez de #fff fixo sem borda. */
    background-color: var(--cp-active-bg, #fff);
    border: var(--cp-active-bg-border-width, 2px) solid var(--cp-active-bg-border-color, transparent);
    cursor: default;
    justify-content: flex-end;
    /* height:100% (herdado de .picker-item) enchia a cápsula quase por
       completo, sobrando só o padding de .125rem (2px) como folga real
       entre a pill branca e a cápsula — visualmente lia-se como a pill
       "transbordando" a cápsula (pedido explícito: encolher a pill para
       ficar concêntrica à cápsula, como uma bola dentro de outra maior).
       --cp-pill-size-active (não --cp-swatch-size-active, que é o nível
       de DENTRO: a bolinha de cor relativa a ESTE item) — dois níveis
       concêntricos distintos, cada um com a sua própria %. */
    height: var(--cp-pill-size-active, 82%);
    /* Padding em px (não %): calculado em JS a partir da altura real da
       barra (ver colorpicker-widget.js: --cp-swatch-gap-px), porque
       padding-right EM PERCENTAGEM é sempre relativo à LARGURA do
       elemento (regra do CSS) — não serviria para replicar uma folga que
       é sempre função da ALTURA da barra. Em px, calculado a partir do
       valor real, funciona corretamente em qualquer proporção da barra —
       IGUAL ao padding vertical (topo/fundo), nunca com nenhum extra
       somado, para a bolinha ficar mesmo com o MESMO respiro nos 3 lados
       (topo, fundo, direita) dentro da pill branca. */
    padding-right: var(--cp-swatch-gap-px, 4px);
}

/* Sem legenda (nome vazio): a pill ativa NÃO deve ficar oval — sem texto
   não há nada a "abrir" ao lado da bolinha, por isso volta a ser um
   círculo perfeito (aspect-ratio:1) com a bolinha voltando a centrar-se
   (justify-content:center), exatamente como o item inativo. */
.picker-item.active:has(.picker-label:empty) {
    aspect-ratio: 1 / 1;
    justify-content: center;
    padding: 0;
}

.picker-item:not(.active):hover .picker-dot {
    opacity: .5;
}

/* .picker-label (original): o NOME — colapsado (width:0, invisible) por
   defeito; expande (width:auto, visible) só quando o item está ativo.
   A pill NÃO tem largura fixa: cresce ao tamanho do texto de cada cor.
   Original:
     .picker-label { position:absolute; left:0; width:0; visibility:hidden;
       opacity:0; padding-left:.375rem; padding-right:.375rem;
       white-space:nowrap; user-select:none; }
     .picker-item.active .picker-label { position:static; width:auto;
       visibility:visible; opacity:1; } */
.picker-label {
    position: absolute;
    left: 0;
    width: 0;
    visibility: hidden;
    opacity: 0;
    /* Padding maior (era .375rem, depois .9rem/.75rem) — mais respiro
       entre a legenda e as bordas esquerda/direita da pill branca. */
    padding-left: 1.3rem;
    padding-right: 1.1rem;
    white-space: nowrap;
    font-size: var(--cp-label-font-size, 22px);
    font-weight: 500;
    color: var(--cp-label-color, #111);
    user-select: none;
    transition: opacity .2s ease;
}

.picker-item.active .picker-label {
    position: static;
    width: auto;
    visibility: visible;
    opacity: 1;
}

/* Sem texto: display:none tira a label do fluxo flex por completo — só
   width:0/padding:0 (tentativa anterior) ainda deixava o elemento a
   contar como item flex separado antes do .picker-dot, o que descentrava
   ligeiramente a bolinha dentro da pill (mais espaço de um lado que do
   outro). Ver também .picker-item.active:has(.picker-label:empty) acima,
   que volta a pill inteira a círculo quando não há nome. */
.picker-label:empty {
    display: none;
}

/* .picker-dot: tamanho relativo à ALTURA da barra (não px fixo) — 70% por
   defeito quando inativa, para a bolinha "encostar" perto do topo/fundo da
   barra em vez de sobrar espaço vertical vazio à volta dela (o que fazia a
   barra parecer um círculo grande com uma bolinha pequena lá dentro em vez
   de uma pill "reta" no meio). aspect-ratio mantém-na redonda/quadrada
   mesmo definida só por height. Cresce para 95% quando ativa. */
.picker-dot {
    display: block;
    height: var(--cp-swatch-size, 62%);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    /* border-color era 'transparent' fixo — --cp-border-color (a borda dos
       MARCADORES NÃO SELECIONADOS, ver colorpicker-widget.js) nunca era
       aplicada, ficava sempre invisível mesmo com cor/espessura
       configuradas. .picker-item.active .picker-dot (ver abaixo) continua
       a sobrepor com --cp-active-border-color quando o item está ativo. */
    border: var(--cp-border-width, 0px) solid var(--cp-border-color, transparent);
    box-sizing: border-box;
    transition: height .2s ease, border-color .2s ease;
}

.colorpicker-swatches--circle .picker-dot {
    border-radius: 99rem;
}

.colorpicker-swatches--square .picker-dot {
    border-radius: 4px;
}

/* Bolinha com imagem-thumbnail (swatchMode:'image') em vez de cor sólida —
   original: .picker-dot img { width:100%; height:100%; object-fit:cover;
   display:block; } */
.picker-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A bolinha ATIVA é --cp-swatch-size-active (68%) da altura do ITEM ativo
   (que já ele próprio encolheu para --cp-pill-size-active da cápsula, ver
   .picker-item.active acima) — DOIS níveis concêntricos independentes,
   cada um com a sua própria folga visível: bolinha→pill (68%) e
   pill→cápsula (82%), tal como pedido ("bola dentro de bola maior,
   respirando"). */
.picker-item.active .picker-dot {
    height: var(--cp-swatch-size-active, 68%);
    border-width: var(--cp-active-border-width, 2px);
    border-color: var(--cp-active-border-color, #000000);
}