/* ===== HERO ===== */
.hero{
  min-height: 85vh; /* altura del hero */
  background-image: url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Capa oscura para que el texto sea legible */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(14,49,129,0.85) 0%,
    rgba(0,0,0,0.35) 60%
  );
}

/* Contenido encima de la imagen */
.hero-content{
  position:relative;
  max-width:700px;
}

/* ===== ICONOS ===== */
.feature-icon {
    font-size: 40px;
    color: #0d6efd;
}

/* ===== TARJETAS ===== */
.module-card {
    transition: .3s;
}

.module-card:hover {
    transform: translateY(-5px);
}


/* ===== FOOTER EVALUA CORE ===== */

.footer-ec {
  background-color: #0e3181; /* mismo azul del navbar */
  color: white;
}

.footer-title {
  font-weight: 600;
  margin-bottom: 15px;
  color: #ffffff;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #dcdcdc;
}

.footer-links a {
  color: #dcdcdc;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-bottom {
  background-color: #0a2564; /* azul más oscuro */
  font-size: 14px;
  color: #cfcfcf;
}

/* ===== LOGIN ===== */

.login-wrapper{
    background: linear-gradient(135deg,#f5f7fa,#e4e7eb);
    min-height:100vh;
}

.login-card{
    width:380px;
    border:none;
}

.brand-title{
    font-weight:700;
    color:#212529;
    margin-bottom:0;
}

.brand-subtitle{
    font-size:13px;
    color:#6c757d;
}

.login-btn{
    font-weight:600;
    height:45px;
}

.login-footer small{
    color:#9aa0a6;
}

/* ===== DASHBOARD CANDIDATO ===== */

.dashboard-wrapper{
    background:#f8f9fa;
    min-height:100vh;
}

.test-card{
    border-radius:16px;
    transition:.2s ease;
}

.test-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.card-title{
    color:#212529;
}

.progress{
    background:#e9ecef;
}

.dashboard-header{
    padding-bottom:10px;
    border-bottom:1px solid #e9ecef;
}

.dashboard-logo{
    width:56px;
    height:56px;
    object-fit:contain;
    padding:6px;
    background:#f8f9fa;
    border-radius:12px;
}

/* Bloque pregunta */
.question-block {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

/* Tarjetas de opciones */
.option-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s;
    background: #fff;
}

/* Hover */
.option-card:hover {
    border-color: #0d6efd;
    background: #f0f7ff;
}

/* Ocultar radio original */
.option-card input {
    accent-color: #0d6efd;
    transform: scale(1.2);
}

/* Seleccionado */
.option-card input:checked + span {
    font-weight: 600;
    color: #0d6efd;
}

/* ===== DASHBOARD RECLUTADOR ===== */

body{
background:#f6f9fc;
font-family:Inter,system-ui;
}

.page-container{

max-width:1400px;

margin:auto;

padding:30px;

}

/* HEADER */

.dash-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.dash-sub{

font-size:13px;

color:#6b7280;

}

.btn-primary{

background:#2563eb;

color:white;

border:none;

padding:10px 16px;

border-radius:8px;

cursor:pointer;

}

/* KPI */

.kpi-indicator{

width:10px;
height:10px;

border-radius:50%;

display:inline-block;

margin-right:6px;

}

.indicator-active{
background:#f59e0b;
}

.kpi-row{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

margin-bottom:30px;

}

.kpi-card{

background:white;

border-radius:14px;

padding:26px;

border:1px solid #eef2f7;

box-shadow:

0 1px 2px rgba(0,0,0,0.04),

0 6px 16px rgba(0,0,0,0.05);

transition:.25s;

}

.kpi-card:hover{

transform:translateY(-2px);

box-shadow:

0 4px 10px rgba(0,0,0,0.05),

0 12px 28px rgba(0,0,0,0.08);

}

.kpi-card{

position:relative;

background:#fff;
border-radius:14px;

padding:24px;

box-shadow:0 10px 25px rgba(0,0,0,0.08);

overflow:hidden;

}


/* imagen decorativa */

.card-bg-img{

position:absolute;

right:-10px;
bottom:-10px;

width:120px;

opacity:0.0;

z-index:0;

pointer-events:none;

}

.card-sub{
font-size:12px;
color:#6b7280;
margin-top:2px;
}

/* contenido siempre encima */

.kpi-card > *:not(.card-bg-img){

position:relative;
z-index:2;

}

.kpi-card{

position:relative;

background:#fff;
border-radius:14px;

padding:24px;

box-shadow:0 10px 25px rgba(0,0,0,0.08);

overflow:hidden;

}


/* imagen decorativa */

.card-bg-img{

position:absolute;
right:-10px;
bottom:55px;
width:100px;
opacity:0.07;
filter:blur(0.8px);
z-index:0;
pointer-events:none;

}


/* contenido siempre encima */

.kpi-card > *:not(.card-bg-img){

position:relative;
z-index:2;

}

.kpi-title{

font-size:13px;

color:#6b7280;

}

.kpi-value{

font-size:34px;

font-weight:700;

}

.kpi-sub{

font-size:13px;

color:#6b7280;

}

.kpi-change{

font-size:13px;

font-weight:500;


}

.kpi-change.positive{
color:#16a34a;
}

.kpi-change.negative{
color:#dc2626;
}

/* progress */

.progress-bar{

height:6px;

background:#e5e7eb;

border-radius:10px;

margin-top:6px;

}

.progress-fill{

height:6px;
background: #0a2564;
border-radius:10px;

}

.completion-progress.low{height:6px;
background: #ff213f;

}

.completion-progress.medium{height:6px;
background: #f59e0b;
}

.completion-progress.high{height:6px;
background: #22c55e;
}


.progress-fill.low{
background:#22c55e;
}

.progress-fill.warning{
background:#f59e0b;
}

.progress-fill.danger{
background:#ef4444;
}

/* GRID */

.dash-grid{

display:grid;

grid-template-columns:3fr 1fr;

gap:28px;

}

/* charts */

.charts{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:20px;

}

.chart-small{
height:252px !important;
max-width:320px;
margin:auto;
}

.chart-card{

background:white;

border-radius:14px;

padding:20px;

border:1px solid #eef2f7;

box-shadow:

0 1px 2px rgba(0,0,0,0.04),

0 6px 16px rgba(0,0,0,0.05);

}

/* table */

.table-card{

background:white;

border-radius:14px;

padding:20px;

border:1px solid #eef2f7;

box-shadow:

0 1px 2px rgba(0,0,0,0.04),

0 6px 16px rgba(0,0,0,0.05);

}

.candidates-table{

width:100%;

border-collapse:collapse;

}

.candidates-table th{

text-align:left;

font-size:13px;

color:#6b7280;

padding:12px;

border-bottom:1px solid #e5e7eb;

}

.candidates-table td{

padding:14px;

border-bottom:1px solid #f0f0f0;

}

/* candidate */

.candidate{

display:flex;

gap:10px;

align-items:center;

}

.avatar{

width:36px;

height:36px;

background:#2563eb;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:600;

}

.email{

font-size:12px;

color:#6b7280;

}

.progress-text{

font-size:12px;

color:#6b7280;

}

.btn-view{

background:#2563eb;

color:white;

padding:6px 10px;

border-radius:6px;

text-decoration:none;

font-size:13px;

}

/* ASIDE */

.aside{

display:flex;

flex-direction:column;

gap:20px;

}

.aside-card{

background:white;

border-radius:14px;

padding:20px;

border:1px solid #eef2f7;

box-shadow:

0 1px 2px rgba(0,0,0,0.04),

0 6px 16px rgba(0,0,0,0.05);

}

/* calendario */

#calendar{

display:grid;

grid-template-columns:repeat(7,1fr);

gap:6px;

margin-top:10px;

font-size:13px;

}

.calendar-day{

text-align:center;

padding:8px;

border-radius:6px;

}

.calendar-header{

font-weight:600;

color:#6b7280;

}

.calendar-date{

background:#f3f6fb;

cursor:pointer;

}

.calendar-date:hover{

background:#e6efff;

}

.calendar-today{

background:#2563eb;

color:white;

font-weight:600;

}

/* popular tests */

.popular-tests li{
color: #0d6efd;
font-size: 14px;
gap:8px;
}

.popular-tests li::before{
content:"🧠";
}


.search-container{

display:flex;
align-items:center;
gap:10px;

background:white;
border:1px solid #e5e7eb;

padding:12px 16px;
border-radius:10px;

max-width:420px;
margin-bottom:25px;

box-shadow:0 1px 2px rgba(0,0,0,0.05);

}

.search-header{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:20px;

}

.search-container{

display:flex;
align-items:center;

background:white;

border:1px solid #e5e7eb;
border-radius:10px;

padding:8px 12px;

width:350px;

}

.search-icon{

font-size:14px;
opacity:.6;

}

.search-input{

border:none;
outline:none;
width:100%;

font-size:14px;

}


.container{

max-width:900px;
margin:auto;

}

.page-header{

margin-bottom:25px;

}

.subtitle{

color:#6b7280;
font-size:14px;

}

.form-card{

background:white;
padding:30px;

border-radius:12px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);

}

.form-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

}

.form-group{

display:flex;
flex-direction:column;

}

.form-group label{

font-size:13px;
margin-bottom:6px;
color:#374151;

}

.form-group input{

padding:10px 12px;

border:1px solid #e5e7eb;
border-radius:8px;

font-size:14px;

}

.form-group.full{

grid-column:1/3;

}

.form-actions{

margin-top:25px;
display:flex;
gap:10px;

}

.btn-primary{

background:#2563eb;
color:white;

padding:10px 16px;

border-radius:8px;

text-decoration:none;

display:inline-block;

font-weight:500;

}

.btn-secondary{

background:#f3f4f6;
padding:10px 16px;

border-radius:8px;
text-decoration:none;
color:#374151;

}

/* contenedor principal igual al dashboard */

.dash-container{

max-width:1100px;
margin:auto;
padding:30px;

}

/* header */

.page-header{

margin-bottom:25px;

}

.page-header h2{

margin:0;
font-size:24px;

}

.dash-sub{

color:#6b7280;
font-size:14px;
margin-top:5px;

}

/* centrar form */

.form-wrapper{

display:flex;
justify-content:flex-start;

}

/* card del form */

.form-card{

background:white;
padding:30px;

border-radius:12px;

box-shadow:0 2px 6px rgba(0,0,0,0.05);

max-width:700px;
width:100%;

}

/* grid del form */

.form-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;

}

.form-group{

display:flex;
flex-direction:column;

}

.form-group label{

font-size:13px;
margin-bottom:6px;

}

.form-group input{

padding:10px;

border:1px solid #e5e7eb;
border-radius:8px;

}

/* campo ancho */

.form-group.full{

grid-column:1 / 3;

}

/* botones */

.form-actions{

margin-top:25px;
display:flex;
gap:10px;

}

/* responsive */

@media(max-width:1100px){

.kpi-row{

grid-template-columns:repeat(2,1fr);

}

.dash-grid{

grid-template-columns:1fr;

}

.charts{

grid-template-columns:1fr;

}

}