/* ============================================
   TalentFlow — pantallas del candidato (2026-11-04, manual de marca Leo Doncel).
   Va después de tokens.css, temas.css y base.css; no define colores propios.
   ============================================ */

/* ---- Encabezado ---- */
.app-header {
    background: var(--superficie-elevada); border-bottom: 1px solid var(--linea);
    position: sticky; top: var(--franja-alto); z-index: 50;
}
.header-inner {
    max-width: 960px; margin: 0 auto; padding: var(--espacio-3) var(--espacio-6);
    display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-3);
}
.logo { display: flex; align-items: center; gap: var(--espacio-3); text-decoration: none; min-width: 0; }
.logo-img-header { width: 40px; height: 40px; object-fit: contain; flex: none; }
.logo-text { min-width: 0; }
.logo-text h1 { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--tinta); }
.logo-text span { display: block; }
.header-user { display: flex; align-items: center; gap: var(--espacio-2); color: var(--tinta-suave); font-size: 14px; min-width: 0; }
.header-user #headerName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }

/* ---- Pasos ---- */
.stepper-container { max-width: 960px; margin: 0 auto; padding: var(--espacio-6) var(--espacio-6) 0; }
.stepper { display: flex; gap: 4px; margin-bottom: var(--espacio-6); overflow-x: auto; padding-bottom: 4px; }
.step-item {
    flex: 1; min-width: 96px; display: flex; flex-direction: column; align-items: center;
    cursor: pointer; position: relative; padding: 4px 2px; border-radius: var(--radio-m);
}
.step-circle {
    width: 36px; height: 36px; border-radius: var(--radio-total);
    background: var(--superficie-hundida); color: var(--tinta-suave); border: 2px solid var(--linea-control);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
    position: relative; z-index: 1;
}
.step-label { font-size: 12px; line-height: 16px; margin-top: 6px; text-align: center; color: var(--tinta-suave); font-weight: 600; }
.step-line { position: absolute; top: 21px; left: calc(50% + 22px); width: calc(100% - 44px); height: 2px; background: var(--linea); }
.step-item:last-child .step-line { display: none; }
/* Paso abierto: mismo trato del menú activo (índigo en Leo Doncel) */
.step-item.active .step-circle { background: var(--menu-activo-fondo); color: var(--menu-activo-texto); border-color: var(--menu-activo-raya); }
.step-item.active .step-label { color: var(--menu-activo-texto); }
.step-item.completed .step-circle { background: var(--completada-fondo); color: var(--completada); border-color: var(--completada); }
.step-item.completed .step-label { color: var(--completada); }
.step-item.completed .step-line { background: var(--completada); }

/* ---- Contenido ---- */
.main-container { max-width: 960px; margin: 0 auto; padding: 0 var(--espacio-6) 40px; }
.card {
    background: var(--superficie-elevada); border: 1px solid var(--linea); border-radius: var(--radio-l);
    box-shadow: var(--sombra-1); overflow: hidden; margin-bottom: 20px;
}
.card-header {
    padding: var(--espacio-4) var(--espacio-6); border-bottom: 1px solid var(--linea);
    display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-2); flex-wrap: wrap;
}
.card-header h2 { font-size: 20px; line-height: 26px; font-weight: 700; }
.card-header .badge { padding: 2px 10px; border-radius: var(--radio-total); font-size: 12px; line-height: 18px; font-weight: 700; background: var(--superficie-hundida); color: var(--tinta-suave); }
.card-body { padding: var(--espacio-6); }
.card-body h3 { font-size: 16px; line-height: 22px; font-weight: 700; }
.card-footer {
    padding: var(--espacio-4) var(--espacio-6); border-top: 1px solid var(--linea); background: var(--superficie);
    display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-2);
}

/* ---- Documentos ---- */
.doc-item { border: 1px solid var(--linea); border-radius: var(--radio-m); padding: var(--espacio-4); margin-bottom: var(--espacio-3); background: var(--superficie-elevada); }
.doc-item-cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-2); flex-wrap: wrap; margin-bottom: var(--espacio-3); }
.doc-item-cabeza > label { font-weight: 700; font-size: 16px; }
.doc-item-acciones { display: flex; gap: var(--espacio-2); align-items: center; flex-wrap: wrap; }
.doc-item-acciones input[type="file"] { flex: 1; min-width: 200px; font: 14px/20px var(--font-ui); color: var(--tinta); }
.opcional { color: var(--tinta-suave); font-size: 14px; font-weight: 400; }

/* ---- Listas de registros ---- */
.record-list { list-style: none; }
.record-item {
    padding: var(--espacio-3) var(--espacio-4); border: 1px solid var(--linea); border-radius: var(--radio-m);
    margin-bottom: var(--espacio-2); background: var(--superficie-elevada);
    display: flex; justify-content: space-between; align-items: center; gap: var(--espacio-3);
}
.record-item:hover { border-color: var(--linea-control); }
.record-info { min-width: 0; }
.record-info h4 { font-size: 16px; line-height: 22px; font-weight: 700; margin-bottom: 2px; }
.record-info p { font-size: 14px; line-height: 20px; color: var(--tinta-suave); }
.record-actions { display: flex; gap: 6px; flex: none; }
.adjunto { color: var(--tinta-suave); font-size: 14px; display: flex; gap: 4px; align-items: flex-start; }
/* Nombres de archivo y textos largos sin espacios se parten en vez de salirse de la tarjeta */
.record-info, .review-section, .review-field span, .doc-item-cabeza .tag { overflow-wrap: anywhere; min-width: 0; }
.subtitulo-seccion { font-size: 16px; line-height: 22px; font-weight: 700; margin: var(--espacio-4) 0 var(--espacio-2); padding-top: var(--espacio-3); border-top: 1px solid var(--linea); }

/* ---- Entrada ---- */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--espacio-6); background: var(--superficie); }
.auth-card {
    background: var(--superficie-elevada); border: 1px solid var(--linea); border-radius: var(--radio-l);
    padding: 40px; max-width: 480px; width: 100%; box-shadow: var(--sombra-2); position: relative; overflow: hidden;
}
/* La tarjeta de entrada lleva la franja de 6 px (solo en Leo Doncel) */
.auth-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--franja-alto) * 1.5);
    background: linear-gradient(90deg, var(--marca-naranja) 0 33.34%, var(--franja-indigo) 33.34% 66.67%, var(--marca-magenta) 66.67% 100%);
}
.auth-logo { text-align: center; margin-bottom: var(--espacio-6); }
.logo-img-auth { width: 260px; max-width: 100%; height: auto; margin: 0 auto var(--espacio-4); }
.auth-logo h1 { font-size: 28px; line-height: 34px; font-weight: 800; }
.auth-logo p { margin-top: 4px; }
.auth-card h2 { font-size: 20px; line-height: 26px; font-weight: 700; text-align: center; margin-bottom: var(--espacio-4); }
.habeas-data, .habeas-data2 {
    background: var(--superficie-hundida); border: 1px solid var(--linea); border-radius: var(--radio-m);
    padding: var(--espacio-3); font-size: 14px; line-height: 20px; color: var(--tinta);
    margin-bottom: var(--espacio-4);
}
.habeas-data { max-height: 140px; overflow-y: auto; }
.codigo { text-align: center; font-size: 24px !important; letter-spacing: 8px; font-weight: 700; }
.ayuda-codigo { text-align: center; margin-top: var(--espacio-4); }

/* ---- Revisión final ---- */
.review-section { margin-bottom: var(--espacio-4); }
.review-section h3 { font-size: 16px; line-height: 22px; font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid var(--linea); margin-bottom: var(--espacio-2); }
.review-section p { font-size: 16px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--espacio-2); }
.review-field label { display: block; }
.review-field span { font-size: 16px; font-weight: 600; }
.review-field label { font-size: 14px; color: var(--tinta-suave); }
.final-ok { text-align: center; padding: var(--espacio-6) var(--espacio-4); }
.final-ok .icono { width: 48px; height: 48px; color: var(--completada); margin-bottom: var(--espacio-3); }

/* ---- Celular ---- */
@media (max-width: 768px) {
    .header-inner { padding: var(--espacio-2) var(--espacio-4); }
    .header-user #headerName { display: none; }
}
@media (max-width: 480px) {
    .logo-text .marca-firma { display: none; }
    .header-user .txt { display: none; }
    .header-user .btn-sm { min-width: var(--area-tactil); padding: 0 10px; }
    .main-container { padding: 0 var(--espacio-3) var(--espacio-6); }
    .stepper-container { padding: var(--espacio-3) var(--espacio-3) 0; }
    .card-body { padding: var(--espacio-4); }
    .card-header { padding: var(--espacio-3) var(--espacio-4); }
    .card-footer { padding: var(--espacio-3) var(--espacio-4); flex-direction: column-reverse; align-items: stretch; }
    .card-footer .btn { width: 100%; }
    .auth-card { padding: var(--espacio-6) var(--espacio-4); }
    .auth-page { padding: var(--espacio-3); }
    .stepper { gap: 2px; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 8px; }
    .step-item { min-width: 84px; flex-shrink: 0; scroll-snap-align: center; }
    .step-line { display: none; }
    .record-item { flex-direction: column; align-items: stretch; }
    .record-actions .btn { flex: 1; }
    .btn-group { flex-direction: column; }
    .btn-group .btn { width: 100%; }
    .review-grid { grid-template-columns: 1fr; }
}