/*
 * Telat Talent — Custom theme overrides
 * Sobre Bootstrap 5 + theme.min.css de meetingrooms
 * Paleta Telat: Azul #2443FC / Naranja #F84E2D / Dark #031842
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

/* ── Variables Telat ──────────────────────────────────────────────────────── */
:root {
  --talent-blue:    #2443FC;
  --talent-orange:  #F84E2D;
  --talent-dark:    #031842;
  --talent-green:   #10b981;
  --talent-yellow:  #f59e0b;
  --talent-red:     #ef4444;
  --talent-gray:    #64748b;
  --talent-bg:      #f1f5f9;
}

/* ── Override colores del tema meetingrooms ───────────────────────────────── */
body { font-family: 'Roboto', sans-serif; }
h1, h2, h3, h4, h5, h6,
.navbar-brand, .page-header-title { font-family: 'Montserrat', sans-serif; }

/* Reemplazar azul meetingrooms (#3384C6) → azul Telat (#2443FC) */
.btn-primary, .bg-primary                    { background-color: var(--talent-blue) !important; border-color: var(--talent-blue) !important; }
.text-primary                                { color: var(--talent-blue) !important; }
.border-primary                              { border-color: var(--talent-blue) !important; }
/* Nav-pills active — scoped to NON-sidebar contexts (page tabs, modals, etc.) */
.nav-pills:not(.navbar-nav) .nav-link.active { background-color: var(--talent-blue) !important; }
.badge.bg-primary                            { background-color: var(--talent-blue) !important; }
.badge.bg-soft-primary                       { background-color: rgba(36,67,252,.12) !important; color: var(--talent-blue) !important; }
a                                            { color: var(--talent-blue); }
a:hover                                      { color: #1a30c8; }

/* Naranja como secundario */
.btn-secondary, .bg-secondary-custom { background-color: var(--talent-orange) !important; border-color: var(--talent-orange) !important; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.navbar-vertical-aside { border-right: 1px solid #e2e8f0; }
.navbar-brand-logo-wrapper img { max-height: 40px; }
.nav-link .nav-icon { color: var(--talent-gray); }

/* Sidebar active item — soft blue tint + visible text */
.navbar-vertical .nav-link.active {
  background-color: rgba(36,67,252,.08) !important;
  color: var(--talent-blue) !important;
}
.navbar-vertical .nav-link.active .nav-link-title {
  color: var(--talent-blue) !important;
}
.navbar-vertical .nav-link.active .nav-icon {
  color: var(--talent-blue) !important;
  opacity: 1 !important;
}
.navbar-vertical .nav-link.active::before {
  background-color: var(--talent-blue) !important;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.navbar.navbar-fixed { border-bottom: 1px solid #e2e8f0; }

/* ── Page layout ──────────────────────────────────────────────────────────── */
.main .content { padding-top: 2rem; background-color: var(--talent-bg); min-height: calc(100vh - 3.75rem); }
.page-header   { padding-bottom: 0; border-bottom: none; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card           { border: 1px solid #e2e8f0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.card-header    { border-bottom: 1px solid #e2e8f0; background-color: #fff; }

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stat-icon-wrap { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.stat-icon-wrap i { font-size: 1.1rem; }
.stat-icon-blue   { background-color: rgba(36,67,252,.1);   color: var(--talent-blue); }
.stat-icon-green  { background-color: rgba(16,185,129,.1);  color: var(--talent-green); }
.stat-icon-orange { background-color: rgba(248,78,45,.1);   color: var(--talent-orange); }
.stat-icon-yellow { background-color: rgba(245,158,11,.1);  color: var(--talent-yellow); }

/* ── CEFR / decision badges ───────────────────────────────────────────────── */
.badge-cefr-high   { background-color: rgba(16,185,129,.15); color: #047857; font-size: .72rem; }
.badge-cefr-mid    { background-color: rgba(245,158,11,.15); color: #92400e; font-size: .72rem; }
.badge-cefr-low    { background-color: rgba(239,68,68,.15);  color: #991b1b; font-size: .72rem; }
.badge-proceed     { background-color: rgba(16,185,129,.15); color: #047857; }
.badge-review      { background-color: rgba(245,158,11,.15); color: #92400e; }
.badge-reject      { background-color: rgba(239,68,68,.15);  color: #991b1b; }
.badge-pending     { background-color: rgba(100,116,139,.15);color: #334155; }

/* ── Module score bars ────────────────────────────────────────────────────── */
.score-bar-wrap { height: 6px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 4px; transition: width .6s ease; }

/* ── Candidate table row hover ────────────────────────────────────────────── */
.table-candidates tbody tr { cursor: pointer; }
.table-candidates tbody tr:hover td { background-color: rgba(36,67,252,.03); }

/* ──────────────────────────────────────────────────────────────────────────── */
/*  PÁGINAS CANDIDATO (English / Computer) — sin sidebar, centrado            */
/* ──────────────────────────────────────────────────────────────────────────── */
.candidate-page {
  min-height: 100vh;
  background: var(--talent-bg);
  font-family: 'Roboto', sans-serif;
}

/* Header angosto para páginas de evaluación */
.eval-header {
  background: linear-gradient(90deg, var(--talent-dark) 0%, var(--talent-blue) 100%);
  padding: .75rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.eval-header img  { height: 36px; }
.eval-header h1   { color: #fff; font-size: 1.1rem; font-weight: 600; margin: 0; font-family: 'Montserrat', sans-serif; }
.eval-header small { color: rgba(255,255,255,.65); font-size: .8rem; }

/* Contenedor de evaluación */
.eval-wrap  { max-width: 700px; margin: 2rem auto; padding: 0 1rem 4rem; }
.eval-card  {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  border: 1px solid #e2e8f0;
}
.eval-card h2 { font-family: 'Montserrat', sans-serif; color: var(--talent-dark); font-size: 1.25rem; }

/* Progress bar de evaluación */
.eval-progress-wrap { height: 5px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 1.5rem; }
.eval-progress-fill { height: 100%; background: linear-gradient(90deg, var(--talent-blue), var(--talent-orange)); border-radius: 4px; transition: width .4s ease; }

/* Step indicator */
.step-label { font-size: .78rem; color: var(--talent-gray); font-weight: 500; margin-bottom: .25rem; }

/* Opciones de pregunta (radio/checkbox personalizados) */
.q-option {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem 1rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: .5rem;
}
.q-option:hover         { border-color: var(--talent-blue); background: rgba(36,67,252,.03); }
.q-option.selected      { border-color: var(--talent-blue); background: rgba(36,67,252,.06); }
.q-option input         { margin-top: 2px; accent-color: var(--talent-blue); }

/* Audio player de listening */
.audio-player-wrap  { background: var(--talent-bg); border-radius: 8px; padding: 1rem; margin-bottom: 1.25rem; }
.play-count-badge   { font-size: .72rem; color: var(--talent-gray); }

/* Grabación de voz */
.rec-btn-wrap   { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.btn-rec        { background: var(--talent-orange); border: none; color: #fff; border-radius: 8px; padding: .6rem 1.25rem; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.btn-rec:hover  { opacity: .85; }
.btn-rec:disabled { opacity: .45; cursor: default; }
.rec-timer      { font-size: 1.5rem; font-weight: 700; color: var(--talent-blue); font-variant-numeric: tabular-nums; }
.rec-status     { font-size: .82rem; color: var(--talent-gray); }

/* ── Triage — card resultado ──────────────────────────────────────────────── */
.triage-result-card { border-left: 5px solid transparent; }
.triage-result-card.border-proceed { border-left-color: var(--talent-green); }
.triage-result-card.border-review  { border-left-color: var(--talent-yellow); }
.triage-result-card.border-reject  { border-left-color: var(--talent-red); }

.metric-box {
  background: var(--talent-bg);
  border-radius: 8px;
  padding: .75rem 1rem;
  text-align: center;
}
.metric-label { font-size: .72rem; color: var(--talent-gray); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; }
.metric-value { font-size: 1.5rem; font-weight: 700; color: var(--talent-dark); }

/* ── File drag-drop ───────────────────────────────────────────────────────── */
.file-drop {
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.file-drop:hover, .file-drop.drag-over { border-color: var(--talent-blue); background: rgba(36,67,252,.03); }
.file-drop i  { font-size: 2rem; color: #94a3b8; margin-bottom: .75rem; }

/* ── Login page ───────────────────────────────────────────────────────────── */
.login-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--talent-dark) 0%, #1a2f6b 100%);
}
.login-card  {
  background: #fff;
  border-radius: 14px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-card .logo { height: 48px; display: block; margin: 0 auto 1.25rem; }
.login-card h2    { font-family: 'Montserrat', sans-serif; font-size: 1.25rem; text-align: center; color: var(--talent-dark); margin-bottom: .25rem; }
.login-card .subtitle { text-align: center; color: var(--talent-gray); font-size: .88rem; margin-bottom: 1.75rem; }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.page-header-title { color: var(--talent-dark); }
.breadcrumb-item a { color: var(--talent-blue); }
.btn-outline-primary { color: var(--talent-blue); border-color: var(--talent-blue); }
.btn-outline-primary:hover { background-color: var(--talent-blue); border-color: var(--talent-blue); }

/* ── Sidebar collapse toggle ──────────────────────────────────────────────── */
/* Show/hide collapse arrows based on sidebar state */
.navbar-vertical-aside-mini-mode .navbar-toggler-short-align,
.navbar-toggler-full-align                                          { display: none; }
.navbar-vertical-aside-mini-mode .navbar-toggler-full-align,
.navbar-toggler-short-align                                         { display: inline; }

/* ── btn-xs — Bootstrap 5 doesn't ship this size ─────────────────────────── */
.btn-xs {
  padding: .2rem .45rem;
  font-size: .72rem;
  line-height: 1.4;
  border-radius: .25rem;
}

/* ── Admin: Gestión de Pruebas ────────────────────────────────────────────── */

/* Main test-type tabs (Test Inglés / Test Cómputo) */
#testTabs .nav-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: .9rem;
  color: var(--talent-gray);
  border-radius: .4rem .4rem 0 0;
  padding: .6rem 1.4rem;
  border: 1px solid transparent;
  border-bottom: none;
  transition: color .15s, background .15s;
}
#testTabs .nav-link:hover  { color: var(--talent-blue); background: rgba(36,67,252,.04); }
#testTabs .nav-link.active { color: var(--talent-blue); background: #fff; border-color: #dee2e6; border-bottom-color: #fff; }

/* Sub-tabs inside each section */
.sub-tabs .nav-link {
  font-size: .82rem;
  font-weight: 500;
  color: var(--talent-gray);
  padding: .4rem 1rem;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
  margin-right: .35rem;
  transition: all .15s;
}
.sub-tabs .nav-link:hover  { color: var(--talent-blue); border-color: var(--talent-blue); background: rgba(36,67,252,.04); }
.sub-tabs .nav-link.active { color: #fff; background: var(--talent-blue); border-color: var(--talent-blue); }

/* Admin section card */
.admin-section-card { border-top: 3px solid var(--talent-blue); }

/* Table inside admin cards */
.admin-table thead th {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--talent-gray);
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.admin-table tbody tr:hover td { background: rgba(36,67,252,.025); }
.admin-table td { vertical-align: middle; font-size: .875rem; }

/* Action buttons cluster in admin tables */
.action-btns { display: inline-flex; gap: .3rem; }
.action-btns .btn-xs { line-height: 1.5; }

/* Status badge */
.badge-active   { background: rgba(16,185,129,.15); color: #047857; font-size: .72rem; }
.badge-inactive { background: rgba(239,68,68,.15);  color: #991b1b; font-size: .72rem; }

/* Empty state rows */
.empty-state-row td { text-align: center; padding: 2.5rem; color: var(--talent-gray); font-size: .88rem; }
.empty-state-row i  { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .35; }

/* Section header (icon + title + add button) */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.section-header-title {
  font-family: 'Montserrat', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--talent-dark);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.section-header-title i { color: var(--talent-blue); font-size: 1rem; }

/* Modal improvements */
.modal-header { border-bottom: 1px solid #e2e8f0; }
.modal-footer { border-top: 1px solid #e2e8f0; background: #f8fafc; }
.modal-body label { font-size: .82rem; font-weight: 600; color: var(--talent-gray); margin-bottom: .25rem; }
.modal-body .form-control, .modal-body .form-select { font-size: .875rem; }
.modal-body .form-text  { font-size: .75rem; }

/* ── Modal 360° — tabs inside gradient header ─────────────────────────────── */
#m360Tabs .nav-link {
  color: rgba(255,255,255,.65) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: .45rem 1rem !important;
  font-size: .83rem;
  font-weight: 600;
  background: none !important;
  transition: color .15s, border-color .15s;
}
#m360Tabs .nav-link:hover {
  color: rgba(255,255,255,.9) !important;
  border-bottom-color: rgba(255,255,255,.4) !important;
}
#m360Tabs .nav-link.active {
  color: #fff !important;
  border-bottom-color: #fff !important;
  background: rgba(255,255,255,.1) !important;
  border-radius: 6px 6px 0 0 !important;
}

/* ── Score sub-bars in English detail ─────────────────────────────────────── */
.score-sub-bar { height: 4px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-top: .3rem; }
.score-sub-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--talent-blue), var(--talent-orange)); }

/* ── Overview module cards ────────────────────────────────────────────────── */
.module-card-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid #e2e8f0;
}
.module-card-header .mod-icon {
  width: 2rem; height: 2rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
}

/* ── Candidate avatar initials ────────────────────────────────────────────── */
.candidate-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem; color: #fff;
  font-family: 'Montserrat', sans-serif;
  flex-shrink: 0;
}