/* =========================================================
   SolVoz 2.4.18 — contrato visual do Catálogo
   ---------------------------------------------------------
   Este arquivo é a única camada responsável por CORES do catálogo.
   catalog.css continua responsável por layout, tamanhos e responsividade.
   Nenhum componente abaixo depende de branco/preto/verde fixo.
   ========================================================= */

html,
body{
  background:var(--ui-app-background) !important;
  background-attachment:fixed !important;
  color:var(--ui-text) !important;
}

/* ---------- estrutura geral ---------- */
.k-header{
  background:color-mix(in srgb,var(--ui-bg) 92%,transparent) !important;
  border-color:var(--ui-border) !important;
  color:var(--ui-text) !important;
}
.k-brand,
.k-brand:visited,
.k-brand__name,
.k-brand__name b,
.cat-hero h1,
.sidebar__head,
.panel__head,
.results-head,
.field,
.status,
.count,
.empty,
.loading,
.error,
.krj-version-bar{
  color:var(--ui-text) !important;
}
.k-brand__name span,
.cat-hero p,
.field label,
.field small,
.count small,
.krj-version-bar,
.pdf-modal__sub,
.pdf-card__meta{
  color:var(--ui-text-muted) !important;
  opacity:1 !important;
}

.sidebar,
.panel,
.results-wrap,
.az-rail,
.deskbar,
.appbar{
  background:var(--ui-surface) !important;
  border-color:var(--ui-border) !important;
  color:var(--ui-text) !important;
}
.sidebar__head,
.panel__head,
.results-head{
  background:color-mix(in srgb,var(--ui-surface) 94%,var(--ui-bg) 6%) !important;
  border-color:var(--ui-border) !important;
}
.panel__body,
.cat-layout{
  background:transparent !important;
  color:var(--ui-text) !important;
}

/* ---------- campos e controles ---------- */
.field input,
.field select,
#btnFiltersToggle,
.k-btn--icon{
  background:var(--ui-field-bg) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
}
.field input::placeholder{
  color:var(--ui-text-muted) !important;
  opacity:.82 !important;
}
.field input:focus,
.field select:focus{
  border-color:var(--ui-primary) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 18%,transparent) !important;
}
.k-btn--primary,
#btnSearch,
#btnFiltersApply{
  background:var(--ui-primary) !important;
  color:var(--ui-on-primary) !important;
  border-color:color-mix(in srgb,var(--ui-secondary) 58%,var(--ui-border) 42%) !important;
}

/* ---------- navegação ---------- */
.deskbar__item,
.az-btn,
.appbar__item{
  background:var(--ui-control-bg) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
}
.deskbar__item i,
.az-btn i,
.appbar__item i{
  color:currentColor !important;
}
.deskbar__item:hover,
.az-btn:hover,
.appbar__item:hover{
  background:var(--ui-highlight-bg) !important;
  border-color:var(--ui-highlight-border) !important;
}
.deskbar__item.active,
.az-btn.active,
.appbar__item.active{
  background:var(--ui-primary) !important;
  color:var(--ui-on-primary) !important;
  border-color:color-mix(in srgb,var(--ui-secondary) 58%,var(--ui-border) 42%) !important;
}
.appbar{
  box-shadow:0 -10px 28px var(--ui-shadow) !important;
}

/* ---------- estado da máquina ---------- */
.krj-equip-box{
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
  box-shadow:0 8px 24px var(--ui-shadow) !important;
}
.krj-equip-box b{ color:var(--ui-text) !important; }
.krj-equip-box button{
  background:var(--ui-control-bg) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border-strong) !important;
}
.krj-equip-box button:hover{
  background:var(--ui-highlight-bg) !important;
  border-color:var(--ui-highlight-border) !important;
}

/* ---------- linhas de resultado ---------- */
#results .row{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--ui-surface-raised) 90%,var(--ui-bg) 10%),
    color-mix(in srgb,var(--ui-surface) 96%,var(--ui-bg) 4%)) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
  box-shadow:0 8px 22px var(--ui-shadow) !important;
}
#results .row:nth-child(odd){
  background:var(--ui-primary) !important;
  color:var(--ui-on-primary) !important;
  border-color:color-mix(in srgb,var(--ui-secondary) 62%,var(--ui-border) 38%) !important;
}
#results .row:nth-child(even){
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--ui-surface) 88%,var(--ui-bg) 12%),
    color-mix(in srgb,var(--ui-surface-raised) 78%,var(--ui-bg) 22%)) !important;
  color:var(--ui-text) !important;
}

/* texto dos cards — nenhum texto herda branco fixo */
#results .row:nth-child(even) .cell-title,
#results .row:nth-child(even) .cell-title .val,
#results .row:nth-child(even) .song-title,
#results .row:nth-child(even) .cell-code,
#results .row:nth-child(even) .code-pack .code{
  color:var(--ui-text) !important;
  opacity:1 !important;
}
#results .row:nth-child(even) .cell-singer,
#results .row:nth-child(even) .cell-singer .val,
#results .row:nth-child(even) .song-singer{
  color:var(--ui-text-muted) !important;
  opacity:1 !important;
}
#results .row:nth-child(odd) .cell-title,
#results .row:nth-child(odd) .cell-title .val,
#results .row:nth-child(odd) .song-title,
#results .row:nth-child(odd) .cell-code,
#results .row:nth-child(odd) .code-pack .code{
  color:var(--ui-on-primary) !important;
  opacity:1 !important;
}
#results .row:nth-child(odd) .cell-singer,
#results .row:nth-child(odd) .cell-singer .val,
#results .row:nth-child(odd) .song-singer{
  color:var(--ui-on-primary) !important;
  opacity:1 !important;
}

/* código, plano, favorito */
#results .row:nth-child(even) .cell-code,
#results .row:nth-child(even) .plan-badge,
#results .row:nth-child(even) .code-pack .code,
#results .row:nth-child(even) .code-pack .plan-mini,
#results .row:nth-child(even) .fav-btn{
  background:color-mix(in srgb,var(--ui-text) 6%,var(--ui-surface-raised)) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border-strong) !important;
  box-shadow:none !important;
}
#results .row:nth-child(odd) .cell-code,
#results .row:nth-child(odd) .plan-badge,
#results .row:nth-child(odd) .code-pack .code,
#results .row:nth-child(odd) .code-pack .plan-mini,
#results .row:nth-child(odd) .fav-btn{
  background:color-mix(in srgb,var(--ui-on-primary) 9%,transparent) !important;
  color:var(--ui-on-primary) !important;
  border-color:color-mix(in srgb,var(--ui-on-primary) 30%,transparent) !important;
  box-shadow:none !important;
}
#results .fav-btn i{ color:currentColor !important; }
#results .fav-btn:not(.on){ opacity:.82 !important; }
#results .fav-btn.on{
  background:color-mix(in srgb,var(--ui-accent) 18%,var(--ui-surface-raised)) !important;
  color:var(--ui-on-accent) !important;
  border-color:color-mix(in srgb,var(--ui-accent) 58%,var(--ui-border) 42%) !important;
}
#results .row:nth-child(odd) .fav-btn.on{
  background:color-mix(in srgb,var(--ui-on-primary) 16%,transparent) !important;
  color:var(--ui-on-primary) !important;
}

/* ---------- ação Enviar para máquina ---------- */
/* "Destaque" do painel é a cor oficial desta ação. Nunca usa verde fixo. */
.send-wrap{ display:block !important; }
.send-btn{
  background:var(--ui-emphasis) !important;
  color:var(--ui-on-emphasis) !important;
  border:1px solid color-mix(in srgb,var(--ui-emphasis) 72%,var(--ui-text) 28%) !important;
  box-shadow:
    0 8px 20px color-mix(in srgb,var(--ui-emphasis) 24%,transparent),
    0 0 0 2px color-mix(in srgb,var(--ui-emphasis) 12%,transparent) !important;
}
.send-btn:hover:not(:disabled){
  filter:brightness(1.04) saturate(1.03);
  transform:translateY(-1px);
}
.send-btn:disabled,
.send-btn.is-disabled{
  background:var(--ui-disabled-bg) !important;
  color:var(--ui-disabled-text) !important;
  border-color:var(--ui-border) !important;
  box-shadow:none !important;
  opacity:1 !important;
  cursor:not-allowed !important;
  filter:none !important;
}
/* Em card colorido o botão continua sendo o destaque do painel, não vira cor do card. */
#results .row:nth-child(odd) .send-btn:not(:disabled){
  background:var(--ui-emphasis) !important;
  color:var(--ui-on-emphasis) !important;
  border-color:color-mix(in srgb,var(--ui-on-emphasis) 28%,var(--ui-emphasis) 72%) !important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--ui-emphasis) 28%,transparent) !important;
}

/* ---------- mensagens / disponibilidade ---------- */
.update-required{
  color:var(--ui-text-muted) !important;
}
.status-info{
  background:var(--ui-highlight-bg) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-highlight-border) !important;
}
.status-success{
  background:color-mix(in srgb,var(--ui-success) 12%,var(--ui-surface) 88%) !important;
  color:var(--ui-text) !important;
  border-color:color-mix(in srgb,var(--ui-success) 45%,var(--ui-border) 55%) !important;
}
.status-error{
  background:color-mix(in srgb,var(--ui-danger) 12%,var(--ui-surface) 88%) !important;
  color:var(--ui-text) !important;
  border-color:color-mix(in srgb,var(--ui-danger) 45%,var(--ui-border) 55%) !important;
}

/* ---------- Top 30 / ranking ---------- */
.top-rank .pos,
.top-rank .likes{
  background:var(--ui-control-bg) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
  box-shadow:none !important;
}
#results .row:nth-child(odd) .top-rank .pos,
#results .row:nth-child(odd) .top-rank .likes{
  background:color-mix(in srgb,var(--ui-on-primary) 10%,transparent) !important;
  color:var(--ui-on-primary) !important;
  border-color:color-mix(in srgb,var(--ui-on-primary) 28%,transparent) !important;
}

/* ---------- Modal de PDF ---------- */
.pdf-modal__overlay{
  background:var(--ui-overlay) !important;
}
.pdf-modal__panel{
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border-strong) !important;
  box-shadow:0 28px 80px var(--ui-shadow) !important;
}
.pdf-modal__head{
  background:color-mix(in srgb,var(--ui-surface) 94%,var(--ui-bg) 6%) !important;
  border-color:var(--ui-border) !important;
}
.pdf-modal__title,
.pdf-card__name{
  color:var(--ui-text) !important;
}
.pdf-modal__close,
.pdf-tab,
.pdf-card,
.pdf-card__btn{
  background:var(--ui-control-bg) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border) !important;
}
.pdf-tab.is-active{
  background:var(--ui-primary) !important;
  color:var(--ui-on-primary) !important;
  border-color:color-mix(in srgb,var(--ui-primary) 60%,var(--ui-border) 40%) !important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--ui-primary) 20%,transparent) !important;
}
.pdf-card__btn:hover,
.pdf-modal__close:hover{
  background:var(--ui-highlight-bg) !important;
  border-color:var(--ui-highlight-border) !important;
}

/* ---------- Modal de catálogo offline ---------- */
.krj-ready-modal__back{ background:var(--ui-overlay) !important; }
.krj-ready-modal__card{
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border:1px solid var(--ui-border) !important;
}
.krj-ready-modal__title,
.krj-ready-modal__text,
.krj-ready-modal__meta{
  color:var(--ui-text) !important;
}
.krj-ready-modal__meta{ color:var(--ui-text-muted) !important; opacity:1 !important; }
.krj-ready-modal__btn{
  background:var(--ui-primary) !important;
  color:var(--ui-on-primary) !important;
}

/* ---------- foco / acessibilidade ---------- */
:focus-visible{
  outline:3px solid var(--ui-focus) !important;
  outline-offset:2px;
}

/* ---------- light mode: acabamento suave sem branco puro ---------- */
body.theme-mode-light .k-header,
body.theme-mode-light .sidebar,
body.theme-mode-light .panel,
body.theme-mode-light .results-wrap,
body.theme-mode-light .appbar,
body.theme-mode-light .az-rail,
body.theme-mode-light .pdf-modal__panel{
  box-shadow:0 10px 30px color-mix(in srgb,var(--ui-text) 7%,transparent) !important;
}

/* Mobile e desktop compartilham as mesmas cores; só muda layout no catalog.css. */


/* ---------- estados especiais / overlays ---------- */
html.filters-open::before,
#krjAvisoProximo,
#krjPlanoBox{
  background:var(--ui-overlay) !important;
}
#results .row.row-selected{
  border-color:var(--ui-accent) !important;
  outline-color:color-mix(in srgb,var(--ui-accent) 38%,transparent) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 18%,transparent),0 18px 40px var(--ui-shadow) !important;
}
#results .row.row-selected::before{
  background:var(--ui-accent) !important;
  color:var(--ui-on-accent) !important;
  border-color:color-mix(in srgb,var(--ui-on-accent) 24%,transparent) !important;
}

.krj-aviso-card{
  background:var(--ui-primary) !important;
  color:var(--ui-on-primary) !important;
  border-color:var(--ui-accent) !important;
  box-shadow:0 0 42px color-mix(in srgb,var(--ui-accent) 30%,transparent) !important;
}
.krj-aviso-title,
.krj-aviso-sub,
.krj-aviso-code{
  color:var(--ui-on-primary) !important;
}

.krj-plano-card{
  background:var(--ui-surface) !important;
  color:var(--ui-text) !important;
  border-color:var(--ui-border-strong) !important;
  box-shadow:0 24px 70px var(--ui-shadow) !important;
}
.krj-plano-title{ color:var(--ui-text) !important; }
.krj-plano-sub{ color:var(--ui-text-muted) !important; opacity:1 !important; }
.krj-plano-btn{
  background:var(--ui-control-bg) !important;
  color:var(--ui-text) !important;
  border:1px solid var(--ui-border) !important;
}
.krj-plano-btn:hover{
  background:var(--ui-highlight-bg) !important;
  border-color:var(--ui-highlight-border) !important;
}
.krj-plano-plus{
  background:var(--ui-primary) !important;
  color:var(--ui-on-primary) !important;
}

.deskbar__item_loja{
  background:var(--ui-primary) !important;
  color:var(--ui-on-primary) !important;
  border-color:var(--ui-border) !important;
}

.deskbar .badge,
.appbar__item .badge{
  background:var(--ui-accent) !important;
  color:var(--ui-on-accent) !important;
  border-color:var(--ui-surface) !important;
}

/* Ícones/labels que antes herdavam cores do CSS escuro legado. */
.results-head,
.results-head > div,
.sidebar__actions,
.cell-pack,
.cell-actions,
.cell-topline{
  color:inherit !important;
}

/* Desabilitado é legível, mas inequívoco. */
button:disabled,
[aria-disabled="true"]{
  cursor:not-allowed;
}


/* ---------- legibilidade de estados não interativos ---------- */
.krj-version-bar{ opacity:1 !important; }
#results .row:has(.update-required),
#results .row.row-unavailable{
  opacity:1 !important;
}
.update-required{
  display:inline-block;
  margin-top:5px;
  padding:4px 7px;
  border-radius:8px;
  background:color-mix(in srgb,var(--ui-accent) 10%,var(--ui-surface) 90%) !important;
  color:var(--ui-text) !important;
  border:1px solid color-mix(in srgb,var(--ui-accent) 28%,var(--ui-border) 72%) !important;
}
#results .fav-btn:disabled{
  opacity:.58 !important;
  color:var(--ui-text-muted) !important;
}
#results .row:nth-child(odd) .fav-btn:disabled{
  color:var(--ui-on-primary) !important;
  opacity:.62 !important;
}