/* ==========================================================================
   Radar · Recrutamento & Seleção — R2 Telecomunicações
   Paleta extraída da logo oficial (vermelho vinho + dourado).
   ========================================================================== */

:root {
    /* Marca R2 */
    --r2-red: #9C1B24;
    --r2-red-dark: #7A151C;
    --r2-red-darker: #5A0F14;
    --r2-gold: #F2B705;
    --r2-gold-dark: #C99A00;

    /* Neutros */
    --r2-ink: #21252B;
    --r2-gray-700: #4B5563;
    --r2-gray-500: #8A93A1;
    --r2-gray-200: #E7E9EE;
    --r2-bg: #F3F4F7;
    --r2-card: #FFFFFF;

    /* Status semânticos (mantém legibilidade, não usa o vermelho da marca
       pra não confundir "ação da marca" com "estado de erro") */
    --status-neutro: #6B7280;
    --status-atencao: #B7791F;
    --status-sucesso: #157F5E;
    --status-perigo: #C23A3A;
    --status-info: #2563AA;
    --status-roxo: #6D4AA8;
}

* { box-sizing: border-box; }

body {
    background-color: var(--r2-bg);
    color: var(--r2-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---------- Navbar ---------- */

.navbar-r2 {
    background: linear-gradient(135deg, var(--r2-red) 0%, var(--r2-red-dark) 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    padding-top: .55rem;
    padding-bottom: .55rem;
}

/* ---------- Marca Radar ---------- */

.navbar-r2 .radar-simbolo {
    width: 36px;
    height: 36px;
    display: block;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.navbar-r2 .radar-nome {
    color: #fff;
    font-family: 'Bitter', Georgia, serif;
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: -0.01em;
    margin-left: .5rem;
}

/* ---------- Tela de login (coluna do formulário + painel do radar) ---------- */

.login-tela {
    display: flex;
    min-height: 100vh;
}

.login-coluna {
    flex: 0 0 33.333%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
    position: relative;
    z-index: 1;
}

.login-conteudo { width: 100%; max-width: 380px; }

.login-painel {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #A8262F 0%, var(--r2-red) 45%, var(--r2-red-darker) 100%);
}

.login-painel canvas { position: absolute; inset: 0; display: block; }

.login-form .form-label { font-weight: 600; }

.login-campo { position: relative; }

.login-campo .form-control {
    height: 46px;
    padding-left: 42px;
}

.login-campo-icone {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--r2-red);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.login-campo #id_password { padding-right: 48px; }

.login-ver-senha {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 44px;
    height: 44px;
    border: 0;
    background: none;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--r2-gray-500);
}

.login-ver-senha:hover,
.login-ver-senha[aria-pressed="true"] { color: var(--r2-red); }

.login-ver-senha svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-entrar { height: 46px; font-weight: 600; }

@media (max-width: 1199.98px) {
    .login-coluna { flex-basis: 42%; }
}

@media (max-width: 767.98px) {
    .login-painel { display: none; }
    .login-coluna { flex: 1; box-shadow: none; padding: 40px 20px; }
}

.navbar-r2-subtitulo {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.8);
}

.radar-login-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin-bottom: 2.25rem;
}

.radar-login-nome {
    margin: 0;
    font-family: 'Bitter', Georgia, serif;
    font-weight: 800;
    font-size: 3.4rem;
    line-height: .9;
    letter-spacing: -0.02em;
    color: var(--r2-red);
}

.radar-login-subtitulo {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--r2-gray-700);
}

.navbar-r2 .nav-link {
    color: rgba(255,255,255,.9) !important;
    font-weight: 500;
    padding: .5rem .8rem !important;
    border-radius: 6px;
    transition: background-color .15s ease;
}
.navbar-r2 .nav-link:hover,
.navbar-r2 .nav-link:focus { background-color: rgba(255,255,255,.12); color: #fff !important; }
.navbar-r2 .nav-link.ativo { background-color: rgba(255,255,255,.18); color: #fff !important; font-weight: 600; }

.navbar-r2 .dropdown-menu {
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    padding: .4rem;
    margin-top: .4rem;
}
.navbar-r2 .dropdown-item {
    border-radius: 6px;
    padding: .5rem .75rem;
    font-weight: 500;
    color: var(--r2-ink);
}
.navbar-r2 .dropdown-item:hover,
.navbar-r2 .dropdown-item:focus { background-color: #FBEFD1; color: var(--r2-red-dark); }
.navbar-r2 .dropdown-item.text-danger:hover { background-color: #FBEAEA; }
.navbar-r2 .dropdown-divider { margin: .35rem 0; }

.navbar-r2 .usuario-chip {
    color: rgba(255,255,255,.85);
    font-size: .85rem;
    white-space: nowrap;
}

/* ---------- Botões ---------- */

.btn-r2-primary {
    background-color: var(--r2-red);
    border-color: var(--r2-red);
    color: #fff;
    font-weight: 600;
}
.btn-r2-primary:hover, .btn-r2-primary:focus {
    background-color: var(--r2-red-dark);
    border-color: var(--r2-red-dark);
    color: #fff;
}
.btn-r2-gold {
    background-color: var(--r2-gold);
    border-color: var(--r2-gold);
    color: var(--r2-ink);
    font-weight: 600;
}
.btn-r2-gold:hover, .btn-r2-gold:focus {
    background-color: var(--r2-gold-dark);
    border-color: var(--r2-gold-dark);
    color: var(--r2-ink);
}

/* ---------- Cards ---------- */

.card {
    border: 1px solid var(--r2-gray-200);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.card:hover.card-hover { box-shadow: 0 4px 16px rgba(16,24,40,.08); }
.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--r2-gray-200);
    font-weight: 600;
    border-radius: 12px 12px 0 0 !important;
}
.card-vaga { border-left: 4px solid var(--r2-red); }

/* ---------- Badges de status (cobre todas as etapas do processo) ---------- */

.badge-status-RASCUNHO { background-color: var(--status-neutro); }
.badge-status-AGUARDANDO_DIRETOR { background-color: var(--status-atencao); }
.badge-status-REPROVADA_DIRETOR { background-color: var(--status-perigo); }
.badge-status-PENDENTE { background-color: var(--status-atencao); }
.badge-status-APROVADA { background-color: var(--status-sucesso); }
.badge-status-REPROVADA,
.badge-status-CANCELADA { background-color: var(--status-perigo); }
.badge-status-PUBLICADA { background-color: var(--status-info); }
.badge-status-CANDIDATOS_SELECIONADOS { background-color: var(--status-roxo); }
.badge-status-AVALIACAO_DP,
.badge-status-AVALIACAO_JURIDICA { background-color: var(--status-atencao); }
.badge-status-AGUARDANDO_CONCLUSAO { background-color: var(--r2-gold-dark); }
.badge-status-CONCLUIDA { background-color: var(--status-sucesso); }

/* ---------- Passos / progresso ---------- */

.etapa-circulo {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: .85rem;
}
.etapa-circulo.concluida { background-color: var(--status-sucesso); color: #fff; }
.etapa-circulo.atual { background-color: var(--r2-red); color: #fff; }
.etapa-circulo.pendente { background-color: #fff; color: var(--r2-gray-500); border: 2px solid var(--r2-gray-200); }

/* ---------- Diversos ---------- */

a { color: var(--r2-red-dark); }
a:hover { color: var(--r2-red); }

.form-control:focus, .form-select:focus {
    border-color: var(--r2-red);
    box-shadow: 0 0 0 .2rem rgba(156,27,36,.15);
}

.text-r2-red { color: var(--r2-red); }
.bg-r2-gold-soft { background-color: #FDF3D6; }
.border-r2 { border-color: var(--r2-red) !important; }