/* ========== PALETA KOMVOS/Guardiões ========== */
:root {
    --komvos-blue:      #184179;
    --komvos-blue-light:#2470b8;
    --komvos-yellow:    #ffec8b;
    --komvos-gray1:     #f4f7fa;
    --komvos-gray8:     #16212e;
    --komvos-red:       #e54c4c;
	--komvos-roxo: #718FC8;
}

/* ========== TIPOGRAFIA ========== */
body {
    font-family: 'Segoe UI', 'Arial', sans-serif;
    font-size: 1rem;
    color: var(--komvos-gray8);
    background-color: var(--komvos-gray1);
	height: 100%;
	min-height: 100vh;
}

h1, h2, h3, h4{
	color:var(--komvos-roxo);
}

#main-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1 0 auto;
}

.btn-primary{
	background: var(--komvos-roxo);
	border-color: var(--komvos-roxo);
}

/* ========== BOTÕES PERSONALIZADOS ========== */
.btn-komvos {
    background: var(--komvos-blue);
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    transition: background 0.18s;
}
.btn-komvos:hover,
.btn-komvos:focus {
    background: var(--komvos-blue-light);
    color: #fff;
}

/* ========== TITULOS ========== */
.text-komvos-blue {
    color: var(--komvos-blue)!important;
}
.text-komvos-yellow {
    color: var(--komvos-yellow)!important;
}
.text-komvos-gray8 {
    color: var(--komvos-gray8)!important;
}
.bg-komvos-blue {
    background: var(--komvos-blue)!important;
}
.bg-komvos-gray1 {
    background: var(--komvos-gray1)!important;
}

/* ========== AVATAR DASHBOARD ========== */
.avatar-bemvindo {
    width: 68px; height: 68px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--komvos-blue);
    background: #fff;
    box-shadow: 0 2px 8px rgba(24,65,121,0.07);
}

.avatar-thumb, .avatar-ranking {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--komvos-blue);
    background: #fff;
}

.avatar-ranking {
    margin-right: 8px;
    width: 48px;
    height: 48px;
}

.ranking-medalha {
    font-size: 2rem;
    width: 42px;
    text-align: center;
    display: inline-block;
 }

/* ========== CARDS COM EFEITO ========== */
.card.shadow-sm, .card.shadow-lg {
    /* sombra leve e arredondada para todos cards */
    border-radius: 1rem;
    box-shadow: 0 2px 18px 0 rgba(152,162,179, 0.06);
}

.card-title {
    font-weight: 700;
    color: var(--komvos-blue);
}

/* ========== AJUSTES DE FORMULÁRIOS ========== */
input.form-control, textarea.form-control {
    border-radius: 6px;
    border-color: #c4d1e1;
}

input.form-control:focus,
textarea.form-control:focus {
    border-color: var(--komvos-blue-light);
    box-shadow: 0 0 0 0.02rem var(--komvos-blue-light);
}

label.form-label.fw-semibold {
    color: var(--komvos-gray8);
    font-weight: bold;
}

.invalid-feedback, .alert-danger {
    color: var(--komvos-red) !important;
}

/* ========== TABELAS PERSONALIZADAS ========== */
.table-komvos thead {
    background: var(--komvos-blue)!important;
    color: #fff!important;
}
.table-komvos th, .table-komvos td {
    vertical-align: middle;
}
.table-komvos tbody tr:hover {
    background: #eaf3fa;
}

/* ========== MENUS E NAVBAR ========== */
.navbar-dark.bg-dark, .navbar.bg-komvos-blue {
    background: var(--komvos-blue)!important;
}

.nav-link {
    font-weight: 500;
    color: #f0f2f8 !important;
    transition: background 0.15s;
}

.nav-link.active, .nav-link:hover, .nav-link:focus {
    background: rgba(24,65,121,0.09);
    color: var(--komvos-yellow)!important;
    border-radius: 5px;
}

/* ========== ALERTAS E BADGES ========== */
.alert-success {
    background: #e6faf0;
    border-color: #47d7ac;
    color: #22785c;
    font-weight: 550;
}

.alert-danger, .alert-error {
    background: #fff3f3;
    color: var(--komvos-red);
    border-color: #ffbdbd;
}
.badge.bg-komvos-blue {
    background: var(--komvos-blue);
    color: #fff;
}
.badge.bg-komvos-gray8 {
    background: var(--komvos-gray8)!important;
    color: #fff;
}

.btn-main{
	color: #6A8BC6;
}

.btn-main:hover{
	color: #fff;
	border: 1px #6A8BC6 solid;
	background: #000;
}


.btn-outline-dark{
	border: 1px #6A8BC6 solid;
	color: #6A8BC6;
}

.btn-outline-dark:hover{
	background: #000;
	border: 1px #6A8BC6 solid;
}

/* ========== UTILITÁRIOS E AJUSTES GERAIS ========== */
.text-truncate {
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.table td, .table th {
    padding: .65rem .7rem;
}
@media (max-width: 540px) {
    .avatar-bemvindo, .avatar-ranking { width:36px;height:36px;}
    .card { border-radius: .7rem; }
    .ranking-medalha { font-size:1.35rem;}
}

footer {
  flex-shrink: 0;
  width: 100%;
}