/* ===== ABA CONFIGURAÇÕES ===== */

.config-bloco {
    padding: 24px;
}

.config-kill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #0d0d14;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 20px;
}
.config-kill-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}

.config-secao-titulo {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--text-gray);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.grid-posicoes-config {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
.grid-posicoes-config > div {
    background: #0d0d14;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.grid-posicoes-config label {
    display: block;
    font-size: 10px;
    color: var(--text-gray);
    margin-bottom: 6px;
    font-weight: 700;
}
.grid-posicoes-config input {
    width: 100%;
    text-align: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #f5c518;
    font-size: 16px;
    font-weight: 800;
    padding: 6px;
}


/* ============================================================
   CHAMPION POINT - cards padronizados
   ============================================================ */
#conteudoAba .champion-card {
    background: linear-gradient(180deg, #11111a, #0a0a12);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s;
}
#conteudoAba .champion-card:hover {
    border-color: rgba(212,160,23,0.3);
}
#conteudoAba .champion-card-titulo {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}
#conteudoAba .champion-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
#conteudoAba .champion-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #d4a017;
    cursor: pointer;
}
#conteudoAba .champion-toggle-text {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
}
#conteudoAba .champion-input {
    width: 100%;
    text-align: center;
    padding: 10px;
    background: #0a0a10;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    font-family: inherit;
}
#conteudoAba .champion-input:focus {
    outline: none;
    border-color: #f5c518;
}

/* Botao salvar regras - centralizado, sem icone */
#conteudoAba .btn-config-salvar {
    display: block;
    margin: 20px auto 0;
    padding: 12px 36px;
    background: linear-gradient(135deg, #b8860b, #f5c518);
    color: #000;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
#conteudoAba .btn-config-salvar:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(212,160,23,0.3);
}

/* Tema claro */
body.tema-claro #conteudoAba .champion-card {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}
body.tema-claro #conteudoAba .champion-card-titulo { color: #6b7280 !important; }
body.tema-claro #conteudoAba .champion-toggle-text { color: #111 !important; }
body.tema-claro #conteudoAba .champion-input {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #111 !important;
}
body.tema-claro #conteudoAba .btn-config-salvar { color: #000 !important; }


/* ============================================================
   CONFIGURACOES DA LIGA - Visual premium
   ============================================================ */

#conteudoAba .config-page {
    padding: 22px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* HERO */
#conteudoAba .config-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px 28px;
    background:
        linear-gradient(135deg, rgba(245,197,24,0.08), rgba(212,160,23,0.02)),
        linear-gradient(160deg, #15151f, #0c0c14);
    border: 1px solid rgba(212,160,23,0.2);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}
#conteudoAba .config-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(245,197,24,0.12), transparent 70%);
    pointer-events: none;
}
#conteudoAba .config-hero-icon {
    width: 72px; height: 72px;
    border-radius: 16px;
    background: linear-gradient(135deg, #b8860b, #f5c518);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(212,160,23,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    flex-shrink: 0;
}
#conteudoAba .config-hero-icon img {
    width: 36px; height: 36px;
    filter: brightness(0);
}
#conteudoAba .config-hero-titulo {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: -0.4px;
}
#conteudoAba .config-hero-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    max-width: 720px;
}

/* CARDS */
#conteudoAba .config-card {
    background:
        linear-gradient(160deg, rgba(255,255,255,0.025), transparent),
        linear-gradient(180deg, #15151f, #0c0c14);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

#conteudoAba .config-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
#conteudoAba .config-card-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
#conteudoAba .config-card-icon img {
    width: 22px; height: 22px;
    opacity: 0.95;
    filter: invert(1);
}
#conteudoAba .config-card-icon[style*="--cor:#10b981"] { background: linear-gradient(135deg, rgba(16,185,129,0.25), rgba(16,185,129,0.08)); }
#conteudoAba .config-card-icon[style*="--cor:#f5c518"] { background: linear-gradient(135deg, rgba(245,197,24,0.25), rgba(245,197,24,0.08)); }
#conteudoAba .config-card-icon[style*="--cor:#a855f7"] { background: linear-gradient(135deg, rgba(168,85,247,0.25), rgba(168,85,247,0.08)); }

#conteudoAba .config-card-titulo {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
}
#conteudoAba .config-card-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 3px;
    line-height: 1.45;
    max-width: 560px;
}

/* INPUT DE KILL */
#conteudoAba .config-kill-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 12px;
    padding: 6px 14px;
}
#conteudoAba .config-kill-input-wrap input {
    width: 70px;
    background: transparent !important;
    border: none !important;
    color: #10b981 !important;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    padding: 4px 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
#conteudoAba .config-kill-input-wrap input:focus { background: transparent !important; }
#conteudoAba .config-kill-input-suffix {
    font-size: 11px;
    font-weight: 700;
    color: rgba(16,185,129,0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* TABELA DE COLOCACAO */
#conteudoAba .grid-posicoes-config {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    margin: 0;
}
#conteudoAba .grid-posicoes-config > div {
    background: rgba(245,197,24,0.04);
    border: 1px solid rgba(245,197,24,0.15);
    border-radius: 12px;
    padding: 14px 10px 12px;
    text-align: center;
    transition: all 0.18s ease;
}
#conteudoAba .grid-posicoes-config > div:hover {
    border-color: rgba(245,197,24,0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245,197,24,0.12);
}
#conteudoAba .grid-posicoes-config label {
    display: block;
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#conteudoAba .grid-posicoes-config input {
    width: 100%;
    text-align: center;
    background: transparent !important;
    border: none !important;
    color: #f5c518 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    padding: 4px !important;
    outline: none !important;
}
#conteudoAba .grid-posicoes-config input:focus {
    background: transparent !important;
}

/* CHAMPION GRID */
#conteudoAba .champion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
#conteudoAba .champion-card {
    background: rgba(168,85,247,0.04);
    border: 1px solid rgba(168,85,247,0.18);
    border-radius: 12px;
    padding: 16px 18px;
    text-align: left;
    transition: all 0.18s ease;
}
#conteudoAba .champion-card:hover {
    border-color: rgba(168,85,247,0.4);
    transform: translateY(-2px);
}
#conteudoAba .champion-card-titulo {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-bottom: 10px;
}

/* Toggle estilo switch */
#conteudoAba .champion-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
#conteudoAba .champion-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
#conteudoAba .champion-switch {
    position: relative;
    width: 42px;
    height: 24px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.06);
}
#conteudoAba .champion-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
#conteudoAba .champion-toggle input[type="checkbox"]:checked + .champion-switch {
    background: linear-gradient(135deg, #b8860b, #f5c518);
    border-color: #d4a017;
    box-shadow: 0 0 12px rgba(245,197,24,0.4);
}
#conteudoAba .champion-toggle input[type="checkbox"]:checked + .champion-switch .champion-switch-knob {
    left: 22px;
    background: #000;
}
#conteudoAba .champion-toggle-text {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

/* Inputs com sufixo dentro dos cards Champion */
#conteudoAba .champion-input-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
#conteudoAba .champion-input {
    width: 100%;
    text-align: left;
    padding: 10px 12px !important;
    background: rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 10px !important;
    color: #f5c518 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    font-family: inherit;
}
#conteudoAba .champion-input:focus {
    outline: none !important;
    border-color: rgba(245,197,24,0.5) !important;
    background: rgba(245,197,24,0.05) !important;
    box-shadow: 0 0 0 3px rgba(245,197,24,0.1) !important;
}
#conteudoAba .champion-input-suffix {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
}

/* BOTAO SALVAR */
#conteudoAba .btn-config-salvar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px auto 0;
    padding: 14px 32px;
    background: linear-gradient(135deg, #b8860b, #f5c518);
    color: #000;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: all 0.22s ease;
    text-align: center;
    box-shadow: 0 6px 18px rgba(212,160,23,0.32);
}
#conteudoAba .btn-config-salvar:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(212,160,23,0.55);
    filter: brightness(1.06);
}
#conteudoAba .btn-config-salvar img {
    width: 16px; height: 16px;
    filter: brightness(0);
}

/* TEMA CLARO */
body.tema-claro #conteudoAba .config-hero,
body.tema-claro #conteudoAba .config-card { background: #ffffff !important; border-color: #e5e7eb !important; }
body.tema-claro #conteudoAba .config-hero-titulo,
body.tema-claro #conteudoAba .config-card-titulo { color: #111827 !important; }
body.tema-claro #conteudoAba .config-hero-desc,
body.tema-claro #conteudoAba .config-card-sub { color: #4b5563 !important; }
body.tema-claro #conteudoAba .grid-posicoes-config > div,
body.tema-claro #conteudoAba .champion-card { background: #f9fafb !important; }

/* RESPONSIVO */
@media (max-width: 768px) {
    #conteudoAba .config-page { padding: 16px; gap: 14px; }
    #conteudoAba .config-hero {
        flex-direction: column;
        text-align: center;
        padding: 22px 18px;
    }
    #conteudoAba .config-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
    #conteudoAba .config-kill-input-wrap {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}


/* ===== SELETOR DE CORES (RGB pickers) ===== */
#conteudoAba .cor-card { text-align: center; }
#conteudoAba .cor-input-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 0;
}
#conteudoAba .cor-input {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 70px;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    cursor: pointer;
    background: transparent;
    padding: 0;
    overflow: hidden;
    transition: all 0.2s;
}
#conteudoAba .cor-input::-webkit-color-swatch-wrapper { padding: 0; border-radius: 12px; }
#conteudoAba .cor-input::-webkit-color-swatch { border: none; border-radius: 12px; }
#conteudoAba .cor-input::-moz-color-swatch { border: none; border-radius: 12px; }
#conteudoAba .cor-input:hover {
    transform: scale(1.05);
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
#conteudoAba .cor-input-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}