/* Quatro paletas, escolhidas por quem usa.
 *
 * Não é enfeite: quem passa o dia numa tela tem preferência legítima, e ela
 * varia com a pessoa e com a luz da sala. Guardar a escolha custa uma coluna;
 * impor a minha custa o conforto de quem trabalha.
 *
 * Todas passam no contraste mínimo para texto pequeno, e em todas a situação
 * da linha é dada por cor **e** por texto — cor sozinha nunca carrega
 * significado, porque nem todo mundo a enxerga igual.
 */

/* Os padrões de quem não diz nada.
 *
 * Ficam **aqui**, antes das paletas, e não no estilo.css: aquele arquivo
 * carrega depois, e `:root` tem a mesma especificidade de `[data-tema]` — o
 * que estiver lá ganha de todos os temas sem avisar. */
:root {
  /* A cor do texto que vai **em cima** da cor de ação.
   *
   * Era branco fixo, espalhado por doze lugares, e a marca Contto quebrou
   * essa suposição: #B7FF00 é um lima quase fluorescente, e branco em cima
   * dele é ilegível. A própria logo resolve isso pondo o verde sobre o
   * quase-preto, e nunca o contrário. */
  --sobre-destaque: #FFFFFF;

  /* A cor da marca sobre a barra escura. Branco serve para quase todas as
     paletas; a da Contto é o lima. */
  --escuro-marca: #FFFFFF;

  /* A cor da marca quando ela precisa ser **lida** sobre fundo claro.
   *
   * Existe porque nem toda cor de ação serve como cor de texto. O #B7FF00 da
   * Contto sobre branco dá contraste 1,21 — o mínimo legível é 4,5, então a
   * pílula "Ver na tabela" some da tela.
   *
   * Não é um defeito da paleta, é o que ela é: cinza, lima, preto e branco
   * não têm uma cor viva que se leia sobre claro. O cartão de visita da marca
   * resolve do mesmo jeito — texto preto, e o verde reservado para a marca.
   *
   * Para quase todos os temas a cor de ação já é legível, e o padrão é ela. */
  --marca-legivel: var(--destaque);

  /* A tinta mais forte que este tema tem.
   *
   * E o numero grande do cartao principal, e era `--escuro` — que num tema
   * claro e a cor do rodape escuro e serve de tinta forte por acidente. Nos
   * temas escuros `--escuro` e **mais escuro que o cartao**, e o numero
   * sumia: o Rafael mandou o print do "Custo total do mes" com o valor
   * invisivel.
   *
   * Cada tema diz qual e a tinta forte dele, e nenhuma tela precisa saber se
   * esta no claro ou no escuro. */
  --tinta-forte: var(--escuro);

  /* A cor de **acao escrita**: "vincular", "preencher", "R$ 421,88 de saving",
   * a coluna que esta ordenando. Texto pequeno que precisa dizer "isto aqui e
   * uma tarefa" sem gritar.
   *
   * Era `--destaque` direto, e em oito temas isso era a mesma coisa — a cor
   * de acao deles se le sobre claro. A da Contto nao: #B7FF00 sobre branco da
   * contraste 1,21, e o minimo legivel e 4,5.
   *
   * O Rafael perguntou se a saida era **tirar o verde ou aumentar a letra**.
   * Aumentar nao resolve: mesmo para texto grande o minimo e 3,0, e nenhum
   * tamanho leva 1,21 ate la. Entao e tirar o verde daqui — e so daqui, porque
   * lima preenchendo um botao continua perfeito.
   *
   * O padrao e a propria cor de acao, e nenhum dos oito temas muda. */
  --acao-legivel: var(--destaque);

  /* As cores dos modulos.
   *
   * Moravam no estilo.css, em hexadecimal ao lado de `body[data-tela]`.
   * Enquanto todos os temas eram claros isso passou; num tema escuro elas
   * afundam — o roxo do inventario sobre o cartao preto da contraste 1,9.
   *
   * O estilo.css continua dizendo **qual tela usa qual cor**, que e decisao
   * de produto. Aqui ficam os **valores**, que e decisao de tema. Nenhuma das
   * sete e laranja, verde ou vermelha: essas tres ja significam alguma coisa
   * no painel. */
  --modulo-paradas:    #0891B2;
  --modulo-franquia:   #7C3AED;
  --modulo-voz:        #BE185D;
  --modulo-roaming:    #0D9488;
  --modulo-inventario: #5B21B6;
  --modulo-alocacoes:  #6D28D9;
  --modulo-usuarios:   #86198F;
  /* Aparelhos nasceu depois do grupo e ficou sem cor: ele caia no quase-preto
     da marca enquanto Alocacoes e Usuarios, do mesmo Inventario, tinham a
     delas. Indigo, que fecha a familia roxa sem repetir nenhuma das duas. */
  --modulo-aparelhos:  #4338CA;
  /* Cadastro: cinza-azulado. E o grupo de configuracao, e configuracao nao
     disputa atencao com modulo que mostra dinheiro. */
  --modulo-cadastro:   #475569;
  --modulo-faturas:    #B45309;

  /* O selo do Diagnostico e um quadradinho da cor do modulo com um icone
     dentro. No claro a cor e escura e o icone e branco; no escuro a cor e
     clara e o icone tem que ser escuro, senao some. */
  --sobre-modulo:   #FFFFFF;
  --modulo-mistura: #000000;
}

/* ── Os temas escuros ───────────────────────────────────────────
 *
 * Tres paletas, e as tres quebravam do mesmo jeito: tudo que foi escrito
 * supondo "o fundo e claro" se apaga aqui. Em vez de repetir o bloco em cada
 * uma, o seletor lista as tres — quem criar a quarta acrescenta o nome dela
 * e herda o conserto.
 */
[data-tema="noite"],
[data-tema="carbono"],
[data-tema="contto-noite"] {
  --tinta-forte: var(--tinta);

  --modulo-paradas:    #22D3EE;
  --modulo-franquia:   #A78BFA;
  --modulo-voz:        #F472B6;
  --modulo-roaming:    #2DD4BF;
  --modulo-inventario: #8B5CF6;
  --modulo-alocacoes:  #A78BFA;
  --modulo-usuarios:   #E879F9;
  --modulo-aparelhos:  #818CF8;
  --modulo-cadastro:   #94A3B8;
  --modulo-faturas:    #FBBF24;

  /* O gradiente do selo clareia em vez de escurecer, e o icone vira escuro:
     as duas pontas da cor ficam claras, entao um icone escuro se le nas duas.
     Escurecer aqui daria um selo preto sobre um cartao preto. */
  --sobre-modulo:   #101316;
  --modulo-mistura: #FFFFFF;

  /* O fundo de alerta escurece junto. Era rosa claro fixo em todos os temas,
     e no escuro virava letra clara sobre fundo claro — ilegivel no aviso do
     WhatsApp em Pendencias, no "continua com quem saiu" do cadastro e nos
     selos de atencao. Uma troca aqui conserta todos. */
  --alerta-luz: color-mix(in srgb, var(--alerta) 16%, transparent);
}

/* ── Grafite ── neutro e sóbrio. O padrão. ─────────────────── */
[data-tema="grafite"] {
  --fundo:        #FAFAFA;
  --superficie:   #FFFFFF;
  --tinta:        #18181B;
  --tinta-2:      #52525B;
  --tinta-3:      #A1A1AA;
  --borda:        #E8E8EB;
  --borda-forte:  #D4D4D8;
  --escuro:       #1F2024;
  --escuro-2:     #2C2D33;
  --escuro-texto: #A8A9B4;
  --escuro-marca: #FFFFFF;
  --destaque:     #E87000;
  --destaque-2:   #FF9838;
  --destaque-luz: #FDF0E3;
  --serie-1: #E87000; --serie-2: #F59120; --serie-3: #F7AE5C;
  --serie-4: #FACB99; --serie-5: #FBE3CB;
}

/* ── Noite ── escuro inteiro, para quem trabalha em TI. ────── */
[data-tema="noite"] {
  --fundo:        #0D0E12;
  --superficie:   #16171D;
  --tinta:        #ECECF1;
  --tinta-2:      #A0A1AE;
  --tinta-3:      #6C6D7C;
  --borda:        #24262F;
  --borda-forte:  #33353F;
  --escuro:       #0A0B0E;
  --escuro-2:     #1A1C23;
  --escuro-texto: #8C8D9C;
  --escuro-marca: #FFFFFF;
  --destaque:     #38BDF8;
  --destaque-2:   #7DD3FC;
  --destaque-luz: #12283A;
  --serie-1: #38BDF8; --serie-2: #22D3EE; --serie-3: #5EEAD4;
  --serie-4: #A5F3FC; --serie-5: #CFFAFE;
}

/* ── Oceano ── azul-esverdeado. Calma e confiança: a cor que
       reduz a sensação de urgência numa tela de problema. ──── */
[data-tema="oceano"] {
  --fundo:        #F6F9F9;
  --superficie:   #FFFFFF;
  --tinta:        #10262C;
  --tinta-2:      #4A6169;
  --tinta-3:      #8CA3AB;
  --borda:        #DFE9EB;
  --borda-forte:  #C5D6DA;
  --escuro:       #0C2830;
  --escuro-2:     #143741;
  --escuro-texto: #8FB0B9;
  --escuro-marca: #FFFFFF;
  --destaque:     #0E7C86;
  --destaque-2:   #14A5B0;
  --destaque-luz: #E2F3F4;
  --serie-1: #0E7C86; --serie-2: #14A5B0; --serie-3: #4FC3CB;
  --serie-4: #94DCE1; --serie-5: #C9EDEF;
}

/* ── Índigo ── frio e técnico, com bastante contraste. ─────── */
[data-tema="indigo"] {
  --fundo:        #F8F8FC;
  --superficie:   #FFFFFF;
  --tinta:        #16182B;
  --tinta-2:      #4C4F6B;
  --tinta-3:      #9295AD;
  --borda:        #E6E6F0;
  --borda-forte:  #CCCCDE;
  --escuro:       #14152A;
  --escuro-2:     #1F2140;
  --escuro-texto: #9799BD;
  --escuro-marca: #FFFFFF;
  --destaque:     #4F46E5;
  --destaque-2:   #7C6CF6;
  --destaque-luz: #EEECFE;
  --serie-1: #4F46E5; --serie-2: #7C6CF6; --serie-3: #A78BFA;
  --serie-4: #C4B5FD; --serie-5: #DDD6FE;
}

/* ── Neve ── fundo branco de verdade, o mais clean dos cinco.
       A separação vem da borda e da sombra, e não de um cinza de fundo:
       é o que dá a sensação de papel em vez de painel. O destaque é quase
       preto, porque sobre branco puro qualquer cor forte vira grito. ── */
[data-tema="neve"] {
  --fundo:        #FFFFFF;
  --superficie:   #FFFFFF;
  --tinta:        #0F172A;
  --tinta-2:      #475569;
  --tinta-3:      #94A3B8;
  --borda:        #EDEFF3;
  --borda-forte:  #DCE0E8;

  /* A barra lateral é azul de verdade, e não cinza-escuro nem marinho
     apagado: contra o branco puro do conteúdo ela é o único bloco de cor
     grande da tela, e é o que dá personalidade ao painel inteiro. */
  --escuro:       #14294F;
  --escuro-2:     #1E3A6B;
  --escuro-texto: #BCCBE6;
  --escuro-marca: #FFFFFF;

  /* Azul vivo. O quase-preto anterior era elegante e sem vida; num sistema
     que a pessoa abre todo dia, a cor de ação precisa se anunciar. */
  --destaque:     #2563EB;
  --destaque-2:   #60A5FA;
  --destaque-luz: #EFF4FF;

  /* Série categórica: num gráfico empilhado a cor é o que separa uma marca
     da outra. Cinco cinzas fariam quatro marcas virarem um bloco só. */
  --serie-1: #2563EB; --serie-2: #0D9488; --serie-3: #F59E0B;
  --serie-4: #DB2777; --serie-5: #7C3AED;
}


/* ── Cobalto ── azul forte sobre claro. O mesmo branco leve da Neve,
       com a cor de ação mais cheia: para quem quer a tela clara mas
       achou o azul dela discreto demais. ─────────────────────── */
[data-tema="cobalto"] {
  --fundo:        #F7F9FF;
  --superficie:   #FFFFFF;
  --tinta:        #0B1533;
  --tinta-2:      #41507A;
  --tinta-3:      #8B96B8;
  --borda:        #E4E9F7;
  --borda-forte:  #CDD5EC;
  --escuro:       #0B1B3F;
  --escuro-2:     #152A5C;
  --escuro-texto: #A9BCE4;
  --escuro-marca: #FFFFFF;
  --destaque:     #1D4ED8;
  --destaque-2:   #3B82F6;
  --destaque-luz: #E8EFFE;
  --serie-1: #1D4ED8; --serie-2: #0891B2; --serie-3: #7C3AED;
  --serie-4: #DB2777; --serie-5: #EA580C;
}

/* ── Carbono ── preto com cores vivas. A tela de sala escura, e as
       séries em cor cheia para o gráfico não virar um borrão. ── */
[data-tema="carbono"] {
  --fundo:        #0A0B0F;
  --superficie:   #14161D;
  --tinta:        #F1F3F9;
  --tinta-2:      #A5AAB9;
  --tinta-3:      #6E7385;
  --borda:        #232732;
  --borda-forte:  #333845;
  --escuro:       #07080B;
  --escuro-2:     #191C25;
  --escuro-texto: #9AA0B2;
  --escuro-marca: #FFFFFF;
  --destaque:     #8B5CF6;
  --destaque-2:   #C084FC;
  --destaque-luz: #1E1733;
  --serie-1: #8B5CF6; --serie-2: #22D3EE; --serie-3: #34D399;
  --serie-4: #FBBF24; --serie-5: #FB7185;
}

/* ── Vértice ── roxo e ciano sobre branco frio. A mais "tecnológica"
       das claras: a série inteira é de cor saturada, então um painel
       com quatro gráficos lado a lado lê como um painel só. ──── */
[data-tema="vertice"] {
  --fundo:        #FAFAFF;
  --superficie:   #FFFFFF;
  --tinta:        #16112E;
  --tinta-2:      #4B4370;
  --tinta-3:      #948CB8;
  --borda:        #EBE8F7;
  --borda-forte:  #D6D0EC;
  --escuro:       #1A1338;
  --escuro-2:     #2A2052;
  --escuro-texto: #B9B0DE;
  --escuro-marca: #FFFFFF;
  --destaque:     #7C3AED;
  --destaque-2:   #06B6D4;
  --destaque-luz: #F1ECFE;
  --serie-1: #7C3AED; --serie-2: #06B6D4; --serie-3: #F43F5E;
  --serie-4: #10B981; --serie-5: #F59E0B;
}

/* ── Seletor ───────────────────────────────────────────────── */

/* Oito paletas: bolinha sem nome não se escolhe. Vira lista.
   `display: grid` ganha do `hidden` do navegador, então o menu precisa da
   regra explícita — sem ela abria sozinho. */
.paletas { display: grid; gap: 1px; min-width: 168px; }
.paletas[hidden] { display: none; }
.paleta {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 0; border-radius: var(--raio-p);
  background: none;
  font: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
  transition: background .13s;
}
.paleta:hover { background: var(--fundo); }
.paleta[aria-pressed="true"] { background: var(--destaque-luz); font-weight: 700; }
.paleta:focus-visible { outline: 2px solid var(--destaque); outline-offset: -2px; }

/* A amostra mostra as duas coisas que mudam de verdade: o fundo e a cor de
   ação. Um círculo de cor sozinho não diferenciava tema claro de escuro. */
.paleta i {
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 1px solid var(--borda-forte);
  display: block;
  position: relative;
  overflow: hidden;
}
.paleta i::after {
  content: '';
  position: absolute; inset: 0;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* ── Contto ── a marca. O padrão do sistema. ─────────────────
 *
 * Cinza, verde, preto e branco — a paleta que o Rafael definiu junto com o
 * nome e o desenho da logo: "con" em grafite, "tto" no lima.
 *
 * O lima é #B7FF00, e ele tem uma propriedade que decide como a paleta
 * inteira se comporta: **contraste péssimo sobre branco**. Texto verde em
 * fundo claro é ilegível, e botão verde com letra branca é pior ainda.
 *
 * A própria logo já resolve isso — o verde aparece **sobre o quase-preto**,
 * nunca o contrário. Então aqui ele é cor de **preenchimento com letra preta
 * em cima**, e é para isso que `--sobre-destaque` existe.
 *
 * O `--escuro` da barra lateral é o mesmo cinza-chumbo do fundo da logo, para
 * a marca e o produto serem a mesma coisa em vez de duas. */
[data-tema="contto"] {
  --fundo:        #F7F8F7;
  --superficie:   #FFFFFF;
  --tinta:        #16181A;
  --tinta-2:      #565B60;
  --tinta-3:      #9BA1A6;
  --borda:        #E8EAE9;
  --borda-forte:  #D3D7D6;

  /* O grafite do cartão e do fundo da logo. */
  --escuro:       #22262A;
  --escuro-2:     #2E3338;
  --escuro-texto: #A7AEB3;
  --escuro-marca: #B7FF00;

  /* O lima da marca, e o preto que vai em cima dele. */
  --destaque:     #B7FF00;
  --destaque-2:   #A0E400;
  --destaque-luz: #F2FFD6;
  --sobre-destaque: #16181A;
  /* Sobre claro, o acento da Contto é o grafite. O lima só preenche. */
  --marca-legivel: #22262A;

  /* E o azul volta, mas com um trabalho definido.
   *
   * O Rafael, olhando o inventário: *"aqui acho que podemos voltar como
   * estava, tudo mesma cor, aquele azul"*. Ele está certo pelo motivo certo —
   * grafite serve para a **marca** aparecer sobre claro, e não para dizer
   * "clique aqui": vira igual ao texto em volta, e a coluna de tarefas do
   * inventário deixa de se destacar.
   *
   * Cinza, lima, preto e branco não têm cor de ação legível sobre branco.
   * Então a quarta cor entra com escopo estreito: **só texto que é ação**.
   * Não é enfeite da marca, é a cor de link — e link azul é a convenção que
   * ninguém precisa aprender. */
  --acao-legivel: #1D4ED8;

  /* Série categórica: o lima abre, e o resto é a escala de cinza da marca
     com dois apoios. Uma série toda verde viraria um borrão num gráfico
     empilhado — cor tem que separar, e não decorar. */
  --serie-1: #B7FF00; --serie-2: #22262A; --serie-3: #7A8388;
  --serie-4: #C6CCD0; --serie-5: #5B8C00;
}

/* ── Contto Noite ── a mesma marca, na sala escura. ──────────
 *
 * Aqui o lima trabalha como ele foi feito para trabalhar: sobre escuro, com
 * contraste alto. É a paleta em que a marca fica mais próxima da logo. */
[data-tema="contto-noite"] {
  --fundo:        #121417;
  --superficie:   #1A1E21;
  --tinta:        #ECEEEF;
  --tinta-2:      #A2A9AE;
  --tinta-3:      #6E767C;
  --borda:        #262B2F;
  --borda-forte:  #353B40;
  --escuro:       #0E1013;
  --escuro-2:     #1E2226;
  --escuro-texto: #949BA1;
  --escuro-marca: #B7FF00;
  --destaque:     #B7FF00;
  --destaque-2:   #CBFF4D;
  --destaque-luz: #24300A;
  --sobre-destaque: #121417;
  /* No escuro o lima faz o que foi desenhado para fazer, e se lê. */
  --marca-legivel: #B7FF00;
  --serie-1: #B7FF00; --serie-2: #57C7FF; --serie-3: #FFB020;
  --serie-4: #FF6B8A; --serie-5: #8B8FF5;
}