/* =========
ESTILOS ENCAPSULADOS: SOLO AFECTAN ELEMENTOS DENTRO DE .apply-ui
========= */
.apply-ui {
/* fondo con ligeros acentos */
background:
    radial-gradient(1200px 800px at 10% 10%, rgba(37, 194, 160, .10), transparent 60%),
    radial-gradient(1200px 800px at 90% 10%, rgba(91, 124, 250, .12), transparent 60%);
color: #0f172a;
/* slate-900 */
}

.apply-ui .hero {
padding: 4rem 0 2rem;
text-align: center;
}

.apply-ui .hero h1 {
font-weight: 800;
letter-spacing: -.02em;
background: linear-gradient(135deg, #5b7cfa 0%, #25c2a0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: .5rem;
}

.apply-ui .hero p {
color: #64748b;
max-width: 60ch;
margin: 0 auto;
}

.apply-ui .card-neo {
background: #ffffff;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(16, 24, 40, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.apply-ui .pill {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .375rem .75rem;
border-radius: 999px;
background: rgba(91, 124, 250, .12);
color: #5b7cfa;
font-weight: 600;
font-size: .9rem;
}

/* inputs (scoped) */
.apply-ui .form-label {
font-weight: 600;
color: #334155;
}

.apply-ui .form-control,
.apply-ui .form-select {
padding: .85rem 1rem;
border-radius: 14px;
border: 1.6px solid #e5e7eb;
transition: .2s ease;
box-shadow: none;
background-color: #fff;
color: #0f172a;
}

.apply-ui .form-control:focus,
.apply-ui .form-select:focus {
border-color: #5b7cfa !important;
box-shadow: 0 0 0 .3rem rgba(91, 124, 250, .18) !important;
}

.apply-ui .input-icon {
position: relative;
}

.apply-ui .input-icon .fa-fw {
position: absolute;
left: .9rem;
top: 50%;
transform: translateY(-50%);
opacity: .6;
}

.apply-ui .input-icon input {
padding-left: 2.3rem;
}

/* dropzone */
.apply-ui .dropzone {
border: 2px dashed rgba(99, 102, 241, .35);
border-radius: 16px;
padding: 1.25rem;
text-align: center;
background: rgba(91, 124, 250, .04);
transition: .2s ease;
cursor: pointer;
}

.apply-ui .dropzone.dragover {
border-color: #25c2a0;
background: rgba(37, 194, 160, .06);
}

.apply-ui .file-meta {
font-size: .9rem;
color: #64748b;
}

/* jobs */
.apply-ui .job-card {
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 1rem;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
cursor: pointer;
background: #fff;
}

.apply-ui .job-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(16, 24, 40, .10);
border-color: rgba(91, 124, 250, .45);
}

.apply-ui .job-card.active {
outline: 3px solid rgba(91, 124, 250, .35);
}

/* buttons */
.apply-ui .btn-brand {
background: linear-gradient(135deg, #5b7cfa 0%, #25c2a0 100%);
color: white;
border: none;
border-radius: 14px;
padding: .9rem 1.1rem;
font-weight: 700;
transition: transform .15s ease, box-shadow .15s ease;
}

.apply-ui .btn-brand:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(91, 124, 250, .35);
color: white;
}

.apply-ui .btn-outline-brand {
border: 1.5px solid #5b7cfa;
color: #5b7cfa;
border-radius: 12px;
font-weight: 700;
}

.apply-ui .btn-outline-brand:hover {
background: #5b7cfa;
color: white;
}

.apply-ui .divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .5), transparent);
margin: 1rem 0 1.5rem;
}

.apply-ui .badge-soft {
background: rgba(37, 194, 160, .13);
color: #089981;
border: 1px solid rgba(37, 194, 160, .3);
border-radius: 999px;
padding: .2rem .5rem;
font-weight: 600;
}

.apply-ui .req {
color: #ef4444;
}

.apply-ui .toast-container {
z-index: 1080;
}

.apply-ui .visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}

/* Modo oscuro solo dentro del contenedor si el SO lo pide */
@media (prefers-color-scheme: dark) {
.apply-ui {
    color: #e6eaf3;
}

.apply-ui .card-neo {
    background: #0f172a;
}

.apply-ui .form-control,
.apply-ui .form-select {
    background-color: #0b1324;
    color: #e6eaf3;
    border-color: #1f2942;
}

.apply-ui .form-control::placeholder {
    color: #6b7280;
}

.apply-ui .job-card {
    background: #0f172a;
    border-color: #1f2942;
}

.apply-ui .dropzone {
    background: rgba(91, 124, 250, .06);
    border-color: rgba(99, 102, 241, .45);
}

.apply-ui .hero p {
    color: #94a3b8;
}

.apply-ui .form-label {
    color: #cbd5e1;
}
}