/* ==== Bolsa de Trabajo: rediseño premium (Views/BolsaTrabajo/Index.cshtml + _DetalleVacanteModal.cshtml) ==== */
/* Tokens en :root (no solo en .vac-wrap) porque el modal de detalle vive fuera de ese contenedor en el DOM */
:root {
    --vac-ink:#14213D; --vac-ink-soft:#5A6B85; --vac-ink-faint:#8B98AC; --vac-paper-2:#F4F6FA;
    --vac-line:#E1E6ED; --vac-line-strong:#C7D0DC;
    --vac-accent: var(--ydm-color-primary, #da2128); --vac-accent-tint: var(--ydm-color-primary-tint, #f9dedf);
    --vac-accent-prod: var(--ydm-gray-600, #4b5563); --vac-accent-admin: var(--ydm-color-primary, #da2128);
    --vac-good:#2E7D46; --vac-good-tint:#E3F1E6;
    --vac-shadow: 0 1px 2px rgba(18,29,46,.06), 0 8px 24px rgba(18,29,46,.08);
    --vac-shadow-hover: 0 2px 4px rgba(18,29,46,.08), 0 16px 40px rgba(18,29,46,.14);
    --vac-serif: Georgia, "Times New Roman", serif;
    --vac-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
.vac-wrap { color: var(--vac-ink); }
.vac-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    padding: 8px 0 20px; border-bottom: 1px solid var(--vac-line); margin-bottom: 6px; }
.vac-hero-title { min-width: 240px; flex: 1; }
.vac-hero h1 { font-family: "Poppins-Medium", sans-serif; font-size: 24px;
    margin: 0 0 8px; color: var(--vac-accent); }
.vac-hero p.vac-sub { font-size: 15px; color: var(--vac-ink-soft); max-width: 52ch; margin: 0; }
.vac-spec-row { display: flex; flex-wrap: wrap; flex: none; }
.vac-spec-item { font-family: "Poppins-Regular", sans-serif; font-size: 12.5px; padding: 0 22px 0 0; margin-right: 22px;
    border-right: 1px solid var(--vac-line); color: var(--vac-ink-soft); }
.vac-spec-item:last-child { border-right: none; margin-right: 0; }
.vac-spec-item b { display: block; font-family: "Poppins-Medium", sans-serif; font-size: 20px; color: var(--vac-accent); }
.vac-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0 6px; }
.vac-pillset { display: flex; gap: 8px; flex-wrap: wrap; }
.vac-pill { appearance: none; cursor: pointer; border: 1px solid var(--vac-line-strong); background: #fff; color: var(--vac-ink-soft);
    font-size: 13.5px; padding: 7px 15px; border-radius: 999px; transition: all .15s ease; display: inline-flex; align-items: center; gap: 8px; }
.vac-pill .vac-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.vac-pill[aria-pressed="true"] { background: var(--vac-accent); color: #fff; border-color: var(--vac-accent); }
.vac-pill:not([aria-pressed="true"]):hover { border-color: var(--vac-accent); color: var(--vac-ink); }
.vac-search { position: relative; min-width: 220px; }
.vac-search input { width: 100%; font-size: 14px; padding: 8px 14px 8px 32px; border: 1px solid var(--vac-line-strong);
    border-radius: 999px; background: #fff; color: var(--vac-ink); }
.vac-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--vac-ink-soft); }
.vac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 14px; padding: 22px 0 50px; }
.vac-card { background: #fff; border: 1px solid var(--vac-line); border-radius: 8px; overflow: hidden; box-shadow: var(--vac-shadow);
    cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.vac-card:hover { transform: translateY(-2px); box-shadow: var(--vac-shadow-hover); border-color: var(--vac-line-strong); }
.vac-card:focus-visible { outline: 2px solid var(--vac-accent); outline-offset: 2px; }
.vac-card-main { display: flex; align-items: center; gap: 14px; padding: 16px 16px 14px; }
.vac-rail { width: 4px; align-self: stretch; border-radius: 2px; flex: none; background: var(--vac-line-strong); }
.vac-card[data-area="produccion"] .vac-rail { background: var(--vac-accent-prod); }
.vac-card[data-area="administrativa"] .vac-rail { background: var(--vac-accent-admin); }
.vac-icon { width: 40px; height: 40px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.vac-card[data-area="produccion"] .vac-icon { background: var(--vac-accent-prod); }
.vac-card[data-area="administrativa"] .vac-icon { background: var(--vac-accent-admin); }
.vac-icon svg { width: 19px; height: 19px; }
.vac-card-body { flex: 1; min-width: 0; }
.vac-card-eyebrow { font-family: var(--vac-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--vac-ink-soft); margin: 0 0 3px; }
.vac-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; line-height: 1.25; }
.vac-badge { display: inline-block; font-size: 11.5px; color: var(--vac-accent); background: var(--vac-accent-tint);
    padding: 2px 9px; border-radius: 3px; }
.vac-go { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--vac-line-strong); background: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--vac-ink); transition: all .15s ease; }
.vac-go svg { width: 13px; height: 13px; }
.vac-card:hover .vac-go { background: var(--vac-ink); border-color: var(--vac-ink); color: #fff; }
.vac-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px; border-top: 1px solid var(--vac-line); background: var(--vac-paper-2);
    font-family: var(--vac-mono); font-size: 11px; color: var(--vac-ink-soft); }
.vac-ribbon .vac-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vac-ribbon .vac-meta span { display: inline-flex; align-items: center; gap: 5px; }
.vac-ribbon svg { width: 12px; height: 12px; }
.vac-status { display: inline-flex; align-items: center; gap: 5px; color: var(--vac-good); background: var(--vac-good-tint);
    padding: 3px 9px; border-radius: 999px; font-weight: 700; }
.vac-status .vac-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vac-good); }
.vac-empty { display: none; text-align: center; padding: 60px 20px; color: var(--vac-ink-soft); font-family: var(--vac-mono); font-size: 13px; }
.vac-empty.show { display: block; }

/* ---- Detalle de vacante (contenido del modal, _DetalleVacanteModal.cshtml) ---- */
.vac-detail { padding: 26px 30px 6px; font-family: "Poppins-Regular", sans-serif; }
.vac-detail-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.vac-detail-icon { width: 48px; height: 48px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.vac-detail[data-area="produccion"] .vac-detail-icon { background: var(--vac-accent-prod); }
.vac-detail[data-area="administrativa"] .vac-detail-icon { background: var(--vac-accent-admin); }
.vac-detail-icon svg { width: 22px; height: 22px; }
.vac-detail-titles { flex: 1; min-width: 0; }
.vac-detail-head > .vac-badge { flex: none; margin-left: auto; }
.vac-detail-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--vac-ink-soft); margin: 0; }
.vac-detail-titles h2 { font-family: "Poppins-Medium", sans-serif; font-size: 21px; margin: 0 0 4px; color: var(--vac-ink); }
.vac-detail-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 0; margin-bottom: 18px;
    border-top: 1px solid var(--vac-line); border-bottom: 1px solid var(--vac-line); font-size: 13px; color: var(--vac-ink-soft); }
.vac-detail-meta span { display: inline-flex; align-items: center; gap: 6px; }
.vac-detail-meta svg { width: 14px; height: 14px; }
.vac-detail-content { font-size: 14.5px; line-height: 1.7; color: var(--vac-ink-soft); max-width: 70ch; }
.vac-detail-content p { margin: 0 0 14px; }
.vac-detail-content strong, .vac-detail-content b { font-family: "Poppins-Medium", sans-serif; letter-spacing: .02em; color: var(--vac-accent); }
.vac-detail-content ul, .vac-detail-content ol { margin: 0 0 14px; padding-left: 20px; }
.vac-detail-content li { margin-bottom: 6px; }
.vac-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 20px 30px 26px; border-top: 1px solid var(--vac-line); margin-top: 8px; }
.vac-detail-btn-ghost { appearance: none; border: 1px solid var(--vac-line-strong); background: #fff; color: var(--vac-ink);
    font-family: "Poppins-Regular", sans-serif; font-size: 14px; padding: 11px 20px; border-radius: 6px; cursor: pointer; transition: border-color .15s ease; }
.vac-detail-btn-ghost:hover { border-color: var(--vac-ink); }
.vac-detail-btn-primary { appearance: none; border: none; background: var(--vac-accent); color: #fff; text-decoration: none;
    font-family: "Poppins-Medium", sans-serif; font-size: 14px; padding: 11px 22px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; transition: filter .15s ease; }
.vac-detail-btn-primary:hover { filter: brightness(1.1); color: #fff; }
.vac-detail-btn-primary svg { width: 14px; height: 14px; }

/* ---- Modal mas ancho para que el formulario de aplicacion (wizard de 3-4 pasos) quepa comodo ---- */
@media (min-width: 992px) {
    .modal-dialog.vac-modal-xl { max-width: 1040px; }
}

/* ---- Modal ancho completo (tipo panel/takeover) mientras se llena el formulario de aplicacion ----
   No se estira a 100vh de alto (eso dejaba un rectangulo blanco con espacio vacio o desbordado):
   se ancla arriba a todo el ancho y su alto lo define el propio contenido, con un tope (max-height)
   que activa scroll interno solo si el formulario es mas alto que la pantalla.
   El selector repite .cascading-modal.ModalXBolsaTrabajo para igualar/superar la especificidad de las reglas
   .modal-dialog.cascading-modal.ModalXBolsaTrabajo { margin-top: X% !important; } en style.css (3 clases) -
   con solo .modal-dialog.vac-modal-fullscreen (2 clases) esas reglas seguian ganando. */
.modal-dialog.cascading-modal.ModalXBolsaTrabajo.vac-modal-fullscreen {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    bottom: 24px !important;
    left: 24px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.vac-modal-fullscreen .modal-content {
    width: 100%;
    max-width: 900px;
    max-height: 100%;
    overflow: hidden;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}
/* .cascading-modal .modal-header trae margin:-2rem (mdb.min-4.4.0.css) para el efecto "header flotante" -
   con overflow:hidden en .modal-content (necesario para el scroll interno) ese margen negativo quedaba
   recortado y el encabezado se veia invisible/cortado. Se neutraliza aqui, dando un header edge-to-edge limpio. */
.vac-modal-fullscreen .modal-content > .modal-header {
    flex: 0 0 auto;
    margin: 0;
    border-radius: 0;
}
.vac-modal-fullscreen .modal-content > .form-elegant {
    flex: 1 1 auto;
    height: auto !important;
    max-height: none !important;
    min-height: 0;
    overflow-y: auto;
}

/* ---- Dropdowns de mes/año del calendario (pickadate). Tomadas de mdb-4.4.4.css: el mdb.min-4.4.0.css que ya
   carga el layout no las incluye, por eso el <select> de mes/año quedaba oculto/sin tamaño en vez de mostrarse. ---- */
.picker__box .picker__header select { display: inline-block !important; }
/* Las flechas prev/next de MDB (.picker__nav--prev/next) se posicionan con left:-1em/right:-1em más
   padding:.5em 1.55em - en la practica ocupan ~60px hacia dentro del renglon mes/año. Un margen de solo
   .25em no alcanza para dejarles espacio, y el texto nativo del <select> (ej. "diciembre") queda
   parcialmente tapado por la flecha ("d«iembre"). Se sube el margen para dejar el ancho real que ocupan.
   (Nota: la variante ".browser-default" de este selector nunca aplica aqui - esos son los <select> que
   pickadate genera solo, sin esa clase de MDB; no confundir con Id_EstadoCivil/Expectativa mas abajo.) */
.picker__box .picker__header .picker__select--month,
.picker__box .picker__header .picker__select--year {
    height: 2em; padding: 0; display: inline-block;
}
.picker__box .picker__header .picker__select--month { width: 40%; margin-left: 2.75em; margin-right: .25em; }
.picker__box .picker__header .picker__select--year { width: 30%; margin-left: .25em; margin-right: 2.75em; }

/* ---- Rebranding del calendario (pickadate) - traia el azul de Material de MDB en varios lugares que no
   estaban cubiertos por el fix general de #4285F4 en style.css (ese cubre .picker__date-display/dia
   seleccionado/hoy, pero NO la franja superior del dia de la semana ni el hover de las flechas). ---- */
.picker__weekday-display { background-color: var(--vac-accent) !important; }
.picker__box .picker__header .picker__nav--next:hover,
.picker__box .picker__header .picker__nav--prev:hover { background: var(--vac-accent-tint) !important; }

/* ---- Formulario de aplicacion inyectado en el mismo modal (_AplicarVacFormStaff/Asociado.cshtml) ----
   Rediseño (2026-08-11): se abandono por completo el patron de "label flotante" de MDB (.md-form) - causaba
   encimados recurrentes cada vez que un label se activaba "tarde" (al escribir) en un campo sin suficiente
   aire reservado arriba. Ahora cada label es estatico, siempre arriba de su campo - elimina esa clase de bug
   por construccion. Aprobado por el usuario via mockup interactivo antes de llevarlo aqui. */
.vac-apply-topbar { display: flex; align-items: center; gap: 14px; padding: 22px 28px 0; flex-wrap: wrap; }

/* ---- Progreso: barra + circulos con etiqueta de texto (reemplaza los circulos-icono conectados por linea) ---- */
.vac-progress-wrap { padding: 18px 28px 4px; }
.vac-progress-track { position: relative; height: 4px; background: var(--vac-line); border-radius: 999px; margin-bottom: 16px; overflow: hidden; }
.vac-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--vac-accent); border-radius: 999px;
    transition: width .3s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .vac-progress-fill { transition: none; } }
.vac-progress-steps { display: flex; justify-content: space-between; gap: 8px; }
.vac-progress-step { appearance: none; border: none; background: none; cursor: pointer; flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 2px 0; border-radius: 8px; }
.vac-progress-step:focus-visible { outline: 2px solid var(--vac-accent); outline-offset: 2px; }
.vac-progress-step .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--vac-line-strong);
    color: var(--vac-ink-soft); background: #fff; display: flex; align-items: center; justify-content: center;
    font-family: "Poppins-Medium", sans-serif; font-size: 12px; transition: all .2s ease; }
.vac-progress-step .label { font-size: 11px; color: var(--vac-ink-soft); font-family: "Poppins-Medium", sans-serif;
    text-transform: uppercase; letter-spacing: .03em; text-align: center; line-height: 1.3; }
.vac-progress-step.is-done .dot { border-color: var(--vac-accent); background: var(--vac-accent); color: #fff; }
.vac-progress-step.is-current .dot { border-color: var(--vac-accent); color: var(--vac-accent); box-shadow: 0 0 0 4px var(--vac-accent-tint); }
.vac-progress-step.is-current .label { color: var(--vac-accent); }
/* Pasos aun no desbloqueados (el usuario no ha completado los pasos previos) - no clickeables,
   ver maxUnlockedStep/updateStepLocks en vacInitStepper (Index.cshtml). */
.vac-progress-step.disabled { cursor: not-allowed; pointer-events: none; opacity: .45; }

/* ---- Campos: grid de 1 o 2 columnas, label estatico arriba (nunca se mueve, nunca se encima) ---- */
.vac-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; margin-bottom: 4px; }
.vac-field-grid .vac-field.full { grid-column: 1 / -1; }
.vac-field { display: flex; flex-direction: column; gap: 7px; }
.vac-field > label { font-family: "Poppins-Medium", sans-serif; font-size: 12px; color: var(--vac-ink-soft);
    text-transform: uppercase; letter-spacing: .03em; }
.vac-field-input { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--vac-line-strong);
    padding-bottom: 8px; transition: border-color .15s ease; }
.vac-field-input svg { width: 17px; height: 17px; color: var(--vac-ink-faint); flex: none; }
.vac-field-input input, .vac-field-input select { appearance: none; border: none; outline: none; background: none;
    width: 100%; font-family: "Poppins-Regular", sans-serif; font-size: 15px; color: var(--vac-ink); padding: 0; }
.vac-field-input select { cursor: pointer; }
.vac-field-input:has(input:focus), .vac-field-input:has(select:focus) { border-color: var(--vac-accent); }
.vac-field.has-error .vac-field-input { border-color: var(--vac-accent); }
.vac-field.has-error > label { color: var(--vac-accent); }
.vac-field .text-danger { font-size: 12px; min-height: 1px; }
.vac-radio-row { display: flex; align-items: center; gap: 26px; height: 100%; padding-top: 2px; }
.vac-radio-opt { display: inline-flex; align-items: center; font-size: 14px; color: var(--vac-ink); }
.vac-radio-opt label { margin: 0; font-family: "Poppins-Regular", sans-serif; }

/* Botones Siguiente/Anterior/Enviar del wizard - sticky al fondo del scroll interno del modal (.form-elegant)
   para que siempre queden alcanzables sin tener que bajar hasta el final de un paso largo. */
.vac-step-footer { display: flex; align-items: center; gap: 12px; padding: 16px 28px; border-top: 1px solid var(--vac-line);
    background: #fff; position: sticky; bottom: 0; margin-top: 24px; }
.vac-step-footer .vac-spacer { flex: 1; }
.vac-btn { appearance: none; border: none; border-radius: 999px; cursor: pointer; font-family: "Poppins-Medium", sans-serif;
    font-size: 14px; padding: 11px 26px; transition: filter .15s ease, transform .1s ease; }
.vac-btn:active { transform: scale(.98); }
.vac-btn:focus-visible { outline: 2px solid var(--vac-accent); outline-offset: 2px; }
.vac-btn-ghost { background: none; color: var(--vac-ink-soft); border: 1.5px solid var(--vac-line-strong); }
.vac-btn-ghost:hover { border-color: var(--vac-ink-soft); color: var(--vac-ink); }
.vac-btn-primary { background: var(--vac-accent); color: #fff; }
.vac-btn-primary:hover { filter: brightness(1.08); color: #fff; }
.vac-btn-success { background: var(--vac-good); color: #fff; }
.vac-btn-success:hover { filter: brightness(1.08); color: #fff; }

/* Zona de carga de archivo (bootstrap-fileinput) - restyle completo para que combine con el resto del wizard.
   Antes solo se le habia puesto color al boton "Examinar"; el resto (.file-drop-zone-title, .file-caption,
   botones secundarios) seguia con la tipografia/tamaño default del plugin, muy distinto al resto del form. */
.vac-upload-label { font-family: "Poppins-Medium", sans-serif; font-size: 12px; color: var(--vac-ink-soft);
    text-transform: uppercase; letter-spacing: .03em; display: block; margin-bottom: 7px; }

/* El botón "Examinar archivo" (.input-group.file-caption-main) NO vive dentro de .file-drop-zone en el DOM que
   genera el plugin - es HERMANO de .file-preview, ambos hijos directos de .file-input (ver tMain1 en fileinput.js).
   Para que la caja punteada del mockup envuelva ícono+texto+botón+leyenda como una sola pieza, el borde/fondo se
   pone en el contenedor común (.file-input) y se le quita a .file-drop-zone (que solo controla el drag&drop). */
.vac-apply .file-input {
    font-family: "Poppins-Regular", sans-serif;
    border: 1.5px dashed var(--vac-line-strong);
    border-radius: 8px;
    background: var(--vac-paper-2);
    padding: 34px 20px 26px;
    transition: border-color .15s ease, background-color .15s ease;
}
.vac-apply .file-input:hover { border-color: var(--vac-accent); background: var(--vac-accent-tint); }
.vac-apply .file-preview { border: none; padding: 0; background: none; margin-bottom: 0; }
.vac-apply .file-drop-zone {
    border: none;
    background: none;
    padding: 0;
    min-height: auto;
    margin: 0;
}
.vac-apply .file-drop-zone.file-drop-zone-fill-content { display: flex; align-items: center; justify-content: center; }
.vac-apply .file-drop-zone-hover { background: var(--vac-accent-tint); }
.vac-apply .file-drop-zone-title {
    font-family: "Poppins-Regular", sans-serif;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--vac-ink-soft);
    padding: 0;
}
/* Icono (subir archivo) arriba del texto, via SVG inline en data-uri - mismo estilo de icono que el resto del wizard */
.vac-apply .file-drop-zone-title:before {
    content: "";
    display: block;
    width: 28px; height: 28px;
    margin: 0 auto 12px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B98AC' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z'/%3E%3Cpath d='M14 2v6h6M12 18v-6M9 15l3-3 3 3'/%3E%3C/svg%3E");
}
.vac-apply .file-caption-main { margin-top: 16px; }
.vac-apply .file-caption.kv-fileinput-caption { display: none; } /* el nombre del archivo ya se ve en el thumbnail/preview */
/* Leyenda de límites (cantidad/tipos de archivo) debajo del botón - el plugin no trae un elemento propio para
   esto, así que se agrega vía ::after en vez de una leyenda aparte que haya que mantener sincronizada a mano
   con maxFileCount/allowedFileExtensions (ver dropZoneTitle/maxFileCount en vacInitPlugins, Index.cshtml).
   El texto viene de un atributo data-* (puesto por JS desde Resources.Global) en vez de un string fijo aqui,
   para que tambien cambie con el idioma ES/EN/JA de la pagina - un archivo CSS no puede leer un .resx. */
.vac-apply .file-caption-main:after {
    content: attr(data-vac-upload-caption);
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-family: "Poppins-Regular", sans-serif;
    font-size: 11.5px;
    color: var(--vac-ink-faint);
}
.vac-apply .input-group-btn.input-group-append { display: flex; justify-content: center; gap: 10px; width: 100%; }
.vac-apply .btn-file.btn-primary,
.vac-apply .fileinput-remove-button,
.vac-apply .fileinput-cancel-button,
.vac-apply .fileinput-upload-button {
    border-radius: 999px !important;
    font-family: "Poppins-Medium", sans-serif !important;
    font-size: 13px;
    padding: 9px 20px !important;
    border: none !important;
    box-shadow: none !important;
}
.vac-apply .btn-file.btn-primary { background: var(--vac-accent) !important; color: #fff !important; }
.vac-apply .btn-file.btn-primary:hover { filter: brightness(1.08); }
.vac-apply .fileinput-remove-button,
.vac-apply .fileinput-cancel-button { background: #fff !important; color: var(--vac-ink-soft) !important; border: 1.5px solid var(--vac-line-strong) !important; }
.vac-apply .fileinput-upload-button { background: var(--vac-good) !important; color: #fff !important; }
.vac-apply .kv-upload-progress .progress-bar { background-color: var(--vac-accent) !important; }
.vac-apply .file-preview-thumbnails { font-family: "Poppins-Regular", sans-serif; font-size: 13px; }

@media (max-width: 640px) {
    .vac-field-grid { grid-template-columns: 1fr; }
    .vac-progress-step .label { display: none; }
}

.vac-apply-back { appearance: none; border: none; background: none; padding: 0; cursor: pointer; display: inline-flex;
    align-items: center; gap: 6px; font-family: "Poppins-Regular", sans-serif; font-size: 13px; color: var(--vac-ink-soft); }
.vac-apply-back:hover { color: var(--vac-accent); }
.vac-apply-back svg { width: 14px; height: 14px; }
.vac-apply-title { font-family: "Poppins-Regular", sans-serif; font-size: 13px; color: var(--vac-ink-soft); }
.vac-apply-title strong { font-family: "Poppins-Medium", sans-serif; color: var(--vac-ink); }
.vac-apply-generalerror { margin: 10px 30px 0; padding: 10px 14px; border-radius: 6px; background: #FBE7E9; color: #A61B29;
    font-family: "Poppins-Regular", sans-serif; font-size: 13px; }

/* ---- Estado de exito tras enviar la aplicacion (inyectado por vacMostrarExitoAplicacion en Index.cshtml) ---- */
.vac-detail-success { text-align: center; padding: 50px 30px 20px; }
.vac-detail-success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--vac-good-tint); color: var(--vac-good);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.vac-detail-success-icon svg { width: 26px; height: 26px; }
.vac-detail-success h2 { font-family: "Poppins-Medium", sans-serif; font-size: 20px; margin: 0 0 10px; color: var(--vac-ink); }
.vac-detail-success p { font-family: "Poppins-Regular", sans-serif; font-size: 14px; color: var(--vac-ink-soft); max-width: 46ch; margin: 0 auto; }
.vac-detail-footer-center { justify-content: center; }

/* ---- Estado de error cuando la peticion AJAX del detalle/aplicacion falla (ver vacErrorHtml en Index.cshtml) ---- */
.vac-detail-error { text-align: center; padding: 50px 30px 20px; }
.vac-detail-error-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--vac-accent-tint); color: var(--vac-accent);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.vac-detail-error-icon svg { width: 26px; height: 26px; }
.vac-detail-error h2 { font-family: "Poppins-Medium", sans-serif; font-size: 20px; margin: 0 0 10px; color: var(--vac-ink); }
.vac-detail-error p { font-family: "Poppins-Regular", sans-serif; font-size: 14px; color: var(--vac-ink-soft); max-width: 46ch; margin: 0 auto 18px; }

/* El scroll interno del modal (Index.cshtml: <section class="form-elegant scrollbar-light-blue">) trae de
   style.css un thumb celeste (#82B1FF) - unico uso de esta clase en el sitio (confirmado), se cambia aqui
   en vez de tocar la regla base en style.css, para no arrastrar el cambio a algo fuera de este modal. */
.scrollbar-light-blue::-webkit-scrollbar-thumb {
    background-color: var(--vac-accent) !important;
}

@media (prefers-reduced-motion: reduce) { .vac-card, .vac-go, .vac-pill, .vac-detail-btn-ghost, .vac-detail-btn-primary, .btn-circle-2 { transition: none !important; } }