/* ========================================
   COMAX — TEMAS DE INTERFACE
======================================== */

html[data-tema="plasmoto"] {
  color-scheme: light;

  --fundo: #f3f5f8;
  --fundo-secundario: #ffffff;
  --painel: #ffffff;
  --painel-hover: #f5f7fb;
  --painel-forte: #ffffff;
  --painel-claro: #eef1f6;
  --azul: #363d7f;
  --azul-claro: #4d58a8;
  --verde: #127b4c;
  --texto: #1b2434;
  --texto-secundario: #556176;
  --texto-fraco: #7a8495;
  --borda: rgba(54, 61, 127, 0.16);
  --borda-destaque: rgba(54, 61, 127, 0.38);
  --sombra: 0 20px 55px rgba(37, 48, 74, 0.13);
  --sombra-card: 0 10px 28px rgba(37, 48, 74, 0.09);

  --pedido-fundo: #f3f5f8;
  --pedido-painel: #ffffff;
  --pedido-painel-hover: #f5f7fb;
  --pedido-campo: #f7f8fb;
  --pedido-azul: #363d7f;
  --pedido-azul-claro: #4d58a8;
  --pedido-verde: #127b4c;
  --pedido-texto: #1b2434;
  --pedido-texto-secundario: #556176;
  --pedido-texto-fraco: #7a8495;
  --pedido-borda: rgba(54, 61, 127, 0.16);
  --pedido-borda-azul: rgba(54, 61, 127, 0.38);
  --pedido-sombra: 0 20px 55px rgba(37, 48, 74, 0.13);
}

html[data-tema="plasmoto"],
html[data-tema="plasmoto"] body,
html[data-tema="plasmoto"] .build-app,
html[data-tema="plasmoto"] .dashboard-app,
html[data-tema="plasmoto"] .pedido-app,
html[data-tema="plasmoto"] .produtos-app {
  background: #f3f5f8 !important;
  color: #1b2434 !important;
}

html[data-tema="plasmoto"] body {
  background-image:
    radial-gradient(
      circle at top left,
      rgba(54, 61, 127, 0.08),
      transparent 35%
    ) !important;
}

html[data-tema="plasmoto"] .build-sidebar,
html[data-tema="plasmoto"] .build-topo,
html[data-tema="plasmoto"] .dashboard-cabecalho,
html[data-tema="plasmoto"] .topo-pedido,
html[data-tema="plasmoto"] .produtos-cabecalho {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(54, 61, 127, 0.15) !important;
  color: #1b2434 !important;
}

html[data-tema="plasmoto"] .login-app {
  background: #f3f5f8 !important;
  color: #1b2434 !important;
}

html[data-tema="plasmoto"] .login-card,
html[data-tema="plasmoto"] .login-demonstracao {
  background: #ffffff !important;
  border-color: rgba(54, 61, 127, 0.16) !important;
  color: #1b2434 !important;
  box-shadow: 0 18px 50px rgba(37, 48, 74, 0.1) !important;
}

html[data-tema="plasmoto"] .login-sistema,
html[data-tema="plasmoto"] .login-card-cabecalho p,
html[data-tema="plasmoto"] .login-rodape,
html[data-tema="plasmoto"] .login-demonstracao span {
  color: #667187 !important;
}

html[data-tema="plasmoto"] .login-etiqueta {
  color: #363d7f !important;
}

html[data-tema="plasmoto"] .login-botao {
  color: #ffffff !important;
  background: #363d7f !important;
}

html[data-tema="plasmoto"] .build-menu-item {
  color: #556176 !important;
}

html[data-tema="plasmoto"] .build-menu-item:hover,
html[data-tema="plasmoto"] .build-menu-item.ativo {
  color: #363d7f !important;
  background: rgba(54, 61, 127, 0.09) !important;
  border-color: rgba(54, 61, 127, 0.28) !important;
}

html[data-tema="plasmoto"] .build-menu-numero,
html[data-tema="plasmoto"] .dashboard-card-numero,
html[data-tema="plasmoto"] .pedidos-contador,
html[data-tema="plasmoto"] .botao-voltar,
html[data-tema="plasmoto"] .pedidos-voltar {
  color: #363d7f !important;
  background: rgba(54, 61, 127, 0.08) !important;
  border-color: rgba(54, 61, 127, 0.2) !important;
}

html[data-tema="plasmoto"] .build-cabecalho-modulo,
html[data-tema="plasmoto"] .build-painel,
html[data-tema="plasmoto"] .build-upload-area,
html[data-tema="plasmoto"] .build-resultado,
html[data-tema="plasmoto"] .build-informacao,
html[data-tema="plasmoto"] .dashboard-card,
html[data-tema="plasmoto"] .dashboard-indicador,
html[data-tema="plasmoto"] .dashboard-recentes,
html[data-tema="plasmoto"] .pedidos-filtros,
html[data-tema="plasmoto"] .pedidos-painel,
html[data-tema="plasmoto"] .pedidos-detalhes,
html[data-tema="plasmoto"] .pedidos-item,
html[data-tema="plasmoto"] .pedidos-dado,
html[data-tema="plasmoto"] .pedido-cabecalho,
html[data-tema="plasmoto"] .pedido-dados,
html[data-tema="plasmoto"] .pedido-fiscal,
html[data-tema="plasmoto"] .pedido-itens,
html[data-tema="plasmoto"] .pedido-item,
html[data-tema="plasmoto"] .pedido-resumo,
html[data-tema="plasmoto"] .produto-card,
html[data-tema="plasmoto"] .produtos-painel,
html[data-tema="plasmoto"] .produtos-pesquisa {
  background: #ffffff !important;
  border-color: rgba(54, 61, 127, 0.15) !important;
  color: #1b2434 !important;
  box-shadow: 0 10px 28px rgba(37, 48, 74, 0.08) !important;
}

html[data-tema="plasmoto"] input,
html[data-tema="plasmoto"] select,
html[data-tema="plasmoto"] textarea,
html[data-tema="plasmoto"] .pedido-data-hora,
html[data-tema="plasmoto"] .item-descricao,
html[data-tema="plasmoto"] .item-preco {
  color: #1b2434 !important;
  background: #f7f8fb !important;
  border-color: rgba(54, 61, 127, 0.16) !important;
}

html[data-tema="plasmoto"] input::placeholder,
html[data-tema="plasmoto"] textarea::placeholder {
  color: #8a93a3 !important;
}

html[data-tema="plasmoto"] h1,
html[data-tema="plasmoto"] h2,
html[data-tema="plasmoto"] h3,
html[data-tema="plasmoto"] strong,
html[data-tema="plasmoto"] .build-identidade h1,
html[data-tema="plasmoto"] .dashboard-card,
html[data-tema="plasmoto"] .produto-descricao {
  color: #1b2434;
}

html[data-tema="plasmoto"] .build-etiqueta,
html[data-tema="plasmoto"] .dashboard-etiqueta,
html[data-tema="plasmoto"] .pedido-etiqueta,
html[data-tema="plasmoto"] .produto-codigo,
html[data-tema="plasmoto"] .produto-preco {
  color: #363d7f !important;
}

html[data-tema="plasmoto"] .dashboard-card-destaque,
html[data-tema="plasmoto"] .pedido-resumo-total,
html[data-tema="plasmoto"] .pedidos-total.principal {
  background: #363d7f !important;
  border-color: #363d7f !important;
  color: #ffffff !important;
}

html[data-tema="plasmoto"] .dashboard-card-destaque strong,
html[data-tema="plasmoto"] .dashboard-card-destaque p,
html[data-tema="plasmoto"] .pedido-resumo-total span,
html[data-tema="plasmoto"] .pedido-resumo-total strong,
html[data-tema="plasmoto"] .pedidos-total.principal span,
html[data-tema="plasmoto"] .pedidos-total.principal strong {
  color: #ffffff !important;
}

html[data-tema="plasmoto"] .status-indicador {
  background: #127b4c !important;
}

/* Seletor de aparência do Build */

.build-temas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.build-tema-opcao {
  min-height: 230px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
  color: var(--texto);
  background: var(--painel);
  border: 2px solid var(--borda);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.build-tema-opcao:hover {
  transform: translateY(-3px);
  border-color: var(--borda-destaque);
}

.build-tema-opcao.selecionado {
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(70, 120, 255, 0.12);
}

.build-tema-opcao.selecionado::after {
  content: "Tema selecionado";
  width: max-content;
  padding: 7px 10px;
  color: #ffffff;
  background: var(--azul);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.build-tema-preview {
  min-height: 128px;
  padding: 14px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  border-radius: 14px;
  overflow: hidden;
}

.build-tema-preview.comax {
  background: #090d16;
}

.build-tema-preview.plasmoto {
  background: #f3f5f8;
}

.build-tema-preview-sidebar {
  border-radius: 9px;
}

.build-tema-preview.comax .build-tema-preview-sidebar {
  background: #131c2c;
}

.build-tema-preview.plasmoto .build-tema-preview-sidebar {
  background: #363d7f;
}

.build-tema-preview-conteudo {
  display: grid;
  grid-template-rows: 18px 1fr 1fr;
  gap: 8px;
}

.build-tema-preview-conteudo span {
  display: block;
  border-radius: 7px;
}

.build-tema-preview.comax .build-tema-preview-conteudo span {
  background: #1b263b;
}

.build-tema-preview.comax .build-tema-preview-conteudo span:first-child {
  background: #4678ff;
}

.build-tema-preview.plasmoto .build-tema-preview-conteudo span {
  background: #ffffff;
  border: 1px solid rgba(54, 61, 127, 0.14);
}

.build-tema-preview.plasmoto .build-tema-preview-conteudo span:first-child {
  background: #127b4c;
  border: 0;
}

.build-tema-opcao-texto strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}

.build-tema-opcao-texto span {
  color: var(--texto-secundario);
  font-size: 0.78rem;
  line-height: 1.5;
}

.tema-aviso {
  margin-top: 18px;
  color: var(--texto-secundario);
  font-size: 0.78rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .build-temas-grid {
    grid-template-columns: 1fr;
  }
}