/*
============================================================
SHINOBI PROFILE — COMPARE FINAL COLOR PACK
============================================================
CARREGAR DEPOIS DE:
  shinobi-system.css
  shinobi-preferences.css
  qualquer override anterior do /compare

Não altera o modo escuro.
No modo claro, deixa o /compare com identidade visual,
contraste e cores semelhantes ao restante do Shinobi Profile.
============================================================
*/

/* ==========================================================
   BASE — garante transições suaves sem mudar o tema escuro
   ========================================================== */
.compare .card,
.compare .metric,
.compare .side-row,
.compare .summary,
.compare .section,
.compare .head,
.compare .tag{
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

/* ==========================================================
   MODO CLARO
   ========================================================== */
html.sp-light .compare{
  color:#172d43!important;
}

/* Área geral da comparação */
html.sp-light #app.compare,
html.sp-light #app .compare{
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.42),
    rgba(226,240,249,.52)
  )!important;
  border:1px dashed #a9c6d9!important;
  border-radius:15px!important;
  padding:14px!important;
}

/* Colunas */
html.sp-light #app .compare > .col{
  min-width:0;
}

/* ==========================================================
   FICHAS DOS PERSONAGENS
   ========================================================== */
html.sp-light #app .compare > .col:first-child .card,
html.sp-light #app .compare > .col:last-child .card{
  background:linear-gradient(
    145deg,
    #ffffff 0%,
    #f4f9fd 100%
  )!important;
  border:1px solid #b9d2e3!important;
  box-shadow:0 8px 24px rgba(35,76,108,.08)!important;
  overflow:hidden;
}

/* P1 — detalhe azul */
html.sp-light #app .compare > .col:first-child > .card{
  border-top:3px solid #3d9cff!important;
}

/* P2 — detalhe laranja */
html.sp-light #app .compare > .col:last-child > .card{
  border-top:3px solid #ff6a00!important;
}

/* Cabeçalho das fichas */
html.sp-light #app .compare > .col:first-child .head,
html.sp-light #app .compare > .col:last-child .head{
  background:linear-gradient(
    135deg,
    #ffffff,
    #edf6fc
  )!important;
  color:#172d43!important;
}

/* Nome */
html.sp-light #app .compare .char-name{
  color:#17324a!important;
  -webkit-text-fill-color:#17324a!important;
  font-weight:950!important;
}

/* Meta */
html.sp-light #app .compare .char-meta{
  color:#58728a!important;
  -webkit-text-fill-color:#58728a!important;
}

/* "PERSONAGEM 1 / 2" */
html.sp-light #app .compare .side-title{
  color:#63809a!important;
  -webkit-text-fill-color:#63809a!important;
}

/* Avatar */
html.sp-light #app .compare .avatar{
  border:1px solid #a9c8dc!important;
  box-shadow:0 4px 14px rgba(40,91,126,.12)!important;
}

/* ==========================================================
   TAGS DAS MAESTRIAS
   ========================================================== */
html.sp-light #app .compare .head-tags .tag{
  background:#f4f9fd!important;
  border-color:#b9d2e3!important;
  color:#31546d!important;
  -webkit-text-fill-color:#31546d!important;
}

/* ==========================================================
   STATUS DOS PERSONAGENS
   ========================================================== */
html.sp-light #app .compare .side-stats{
  background:#ffffff!important;
}

html.sp-light #app .compare .side-row{
  border-top-color:#cfdee8!important;
  background:linear-gradient(
    90deg,
    #ffffff,
    #f6fafd
  )!important;
}

html.sp-light #app .compare .side-row span{
  color:#648097!important;
  -webkit-text-fill-color:#648097!important;
}

html.sp-light #app .compare .side-row strong{
  color:#172d43!important;
  -webkit-text-fill-color:#172d43!important;
  font-weight:950!important;
}

/* ==========================================================
   CENTRO — COMPARATIVO INTELIGENTE
   ========================================================== */
html.sp-light #app .compare > .col.center > .summary,
html.sp-light #app .compare > .col.center > .section{
  background:linear-gradient(
    145deg,
    #fffdf9 0%,
    #f0f8fd 100%
  )!important;
  border:1px solid #bdd5e5!important;
  box-shadow:0 8px 24px rgba(35,76,108,.07)!important;
}

/* Título central */
html.sp-light #app .compare .summary-title{
  color:#607b91!important;
  -webkit-text-fill-color:#607b91!important;
}

/* Vencedor geral */
html.sp-light #app .compare .summary-winner{
  color:#ff6a00!important;
  -webkit-text-fill-color:#ff6a00!important;
  font-weight:950!important;
}

/* Texto explicativo */
html.sp-light #app .compare .summary-detail{
  color:#58728a!important;
  -webkit-text-fill-color:#58728a!important;
}

/* Títulos Status/Atributos/Equipamento */
html.sp-light #app .compare .section-title{
  color:#234b67!important;
  -webkit-text-fill-color:#234b67!important;
  font-weight:950!important;
}

/* ==========================================================
   MÉTRICAS CENTRAIS
   ========================================================== */
html.sp-light #app .compare .metric{
  background:linear-gradient(
    90deg,
    #ffffff,
    #f5f9fc
  )!important;
  border:1px solid #cbdde9!important;
}

html.sp-light #app .compare .metric .row{
  background:transparent!important;
  border-top-color:#d5e2eb!important;
}

html.sp-light #app .compare .metric .left{
  color:#49677e!important;
  -webkit-text-fill-color:#49677e!important;
}

html.sp-light #app .compare .metric .right{
  color:#668198!important;
  -webkit-text-fill-color:#668198!important;
}

/* Valores normais */
html.sp-light #app .compare .metric .val{
  color:#172d43!important;
  -webkit-text-fill-color:#172d43!important;
  font-weight:950!important;
}

/* Vencedor — verde */
html.sp-light #app .compare .metric .val.winner,
html.sp-light #app .compare .winner{
  color:#14945f!important;
  -webkit-text-fill-color:#14945f!important;
  font-weight:950!important;
}

/* Perdedor — vermelho suave */
html.sp-light #app .compare .metric .val.loser{
  color:#c45151!important;
  -webkit-text-fill-color:#c45151!important;
}

/* Empate — dourado */
html.sp-light #app .compare .metric .val.draw{
  color:#b87900!important;
  -webkit-text-fill-color:#b87900!important;
}

/* ==========================================================
   EQUIPAMENTO
   ========================================================== */
html.sp-light #app .compare .section .row{
  color:#31546d!important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.9),
    rgba(243,249,253,.9)
  )!important;
  border-top-color:#d0e0ea!important;
}

html.sp-light #app .compare .section .row .left{
  color:#58728a!important;
  -webkit-text-fill-color:#58728a!important;
}

/* ==========================================================
   BOTÃO / SELECTS
   ========================================================== */
html.sp-light .controls{
  background:linear-gradient(
    135deg,
    #f4faff,
    #fff7f1
  )!important;
  border-color:#b9d2e3!important;
  box-shadow:0 7px 20px rgba(35,76,108,.07)!important;
}

html.sp-light .controls select,
html.sp-light .selectbox select{
  background:#ffffff!important;
  color:#17324a!important;
  -webkit-text-fill-color:#17324a!important;
  border-color:#b8cedd!important;
}

html.sp-light .controls select:focus,
html.sp-light .selectbox select:focus{
  border-color:#5ba9df!important;
  box-shadow:0 0 0 3px rgba(47,143,214,.12)!important;
}

html.sp-light .vs{
  color:#ff6a00!important;
  -webkit-text-fill-color:#ff6a00!important;
  font-weight:950!important;
}

html.sp-light .btn.primary,
html.sp-light button.primary{
  background:linear-gradient(
    135deg,
    #ff7a18,
    #ff5a00
  )!important;
  border-color:#ff6a00!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  box-shadow:0 5px 14px rgba(255,106,0,.18)!important;
}

/* ==========================================================
   TÍTULO DA PÁGINA
   ========================================================== */
html.sp-light .hero{
  background:linear-gradient(
    100deg,
    rgba(255,255,255,.86),
    rgba(255,247,241,.72)
  )!important;
  border-color:#d0e0ea!important;
}

html.sp-light .hero .title{
  color:#172d43!important;
  -webkit-text-fill-color:#172d43!important;
}

html.sp-light .hero .muted{
  color:#58728a!important;
  -webkit-text-fill-color:#58728a!important;
}

/* ==========================================================
   RESPONSIVO
   ========================================================== */
@media(max-width:1050px){
  html.sp-light #app .compare{
    padding:10px!important;
  }
}

@media(max-width:650px){
  html.sp-light #app .compare{
    padding:7px!important;
  }
}