/* Bolsa de trabajo - EKAM Perú */

/* Convocatorias compactas; el afiche completo se consulta con Ampliar. */
.jobs { padding: clamp(2.25rem, 1.5rem + 2.5vw, 4.5rem) 0; }
.jobs__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.5rem; }
.jobs__head h2 { margin: 0; color: var(--color-primary-dark); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); letter-spacing: -.02em; }
.jobs__head p { margin: 0; color: var(--color-text-secondary); }
.jobs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); margin: 0; padding: 0; list-style: none; }
.jobs__list > .job { flex: 1 1 19rem; min-width: 0; max-width: 26rem; }

.job { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: #fff; box-shadow: var(--shadow-md); }
.job__poster { position: relative; display: block; padding: 0; border: 0; background: #eef4fa; cursor: zoom-in; }
.job__poster img { display: block; width: 100%; height: 18rem; padding: .75rem; object-fit: contain; }
.job__zoom { position: absolute; right: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px; background: rgba(7, 26, 43, .82); color: #fff; font-size: var(--text-xs); font-weight: 600; }
.job__poster:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.job__body { display: grid; gap: .55rem; padding: 1.15rem 1.25rem 1.35rem; }
.job__title { margin: 0; color: var(--color-primary-dark); font-size: 1.2rem; line-height: 1.25; }
.job__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.job__meta li { padding: .3rem .65rem; border-radius: 999px; background: var(--color-primary-subtle); color: var(--color-primary-hover); font-size: var(--text-xs); font-weight: 600; }
.job__deadline { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.job__deadline strong { color: var(--color-primary-dark); }
.job__apply { justify-content: center; margin-top: .35rem; }

.jobs__empty { width: 100%; padding: 1.5rem; border: 1.5px dashed var(--color-border); border-radius: var(--radius-xl); color: var(--color-text-secondary); text-align: center; }

/* Visor del afiche a pantalla completa (permite acercar con los dedos) */
.poster-viewer { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(4, 16, 28, .94); }
.poster-viewer::backdrop { background: rgba(4, 16, 28, .94); }
.poster-viewer__scroll { height: 100%; overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
.poster-viewer img { display: block; width: min(100%, 860px); height: auto; margin: 0 auto; padding: 4.5rem 1rem 2rem; cursor: zoom-in; }
.poster-viewer.is-zoomed img { width: min(200%, 1600px); max-width: none; cursor: zoom-out; }
.poster-viewer__bar { position: fixed; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: rgba(4, 16, 28, .9); color: #fff; }
.poster-viewer__bar p { margin: 0; font-weight: 600; }
.poster-viewer__bar div { display: flex; gap: .5rem; }
.poster-viewer__bar button, .poster-viewer__bar a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: none; color: #fff; font: 600 var(--text-sm)/1 var(--font-family); cursor: pointer; }
.poster-viewer__bar a { border-color: transparent; background: var(--color-accent); color: var(--color-primary-dark); }

/* Formulario de postulación */
.apply { padding: clamp(2.25rem, 1.5rem + 2.5vw, 4.5rem) 0; background: linear-gradient(180deg, #f2f7fc 0%, #fff 100%); scroll-margin-top: var(--header-height); }
.apply__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start; }
.apply__intro h2 { margin: 0 0 .75rem; color: var(--color-primary-dark); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); letter-spacing: -.02em; }
.apply__intro p { margin: 0 0 1rem; color: var(--color-text-secondary); line-height: 1.65; }
.apply__steps { display: grid; gap: .65rem; margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: paso; }
.apply__steps li { position: relative; padding-left: 2.4rem; color: var(--color-text); line-height: 1.5; counter-increment: paso; }
.apply__steps li::before { content: counter(paso); position: absolute; top: -.1rem; left: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-primary-subtle); color: var(--color-primary-hover); font: 800 .85rem/1 var(--font-heading); }

.apply-form { max-width: none; margin: 0; }
.apply-form fieldset { margin: 0 0 1.25rem; padding: 0; border: 0; }
.apply-form legend { margin-bottom: .75rem; padding: 0; color: var(--color-primary-dark); font: 700 1rem/1.3 var(--font-heading); }
.apply-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.apply-form__field { display: grid; gap: .35rem; }
.apply-form__field--full { grid-column: 1 / -1; }
.apply-form label, .apply-form .apply-form__label { color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }
.apply-form__hint { color: var(--color-text-secondary); font-size: var(--text-xs); }
.apply-form__levels { display: flex; flex-wrap: wrap; gap: .5rem; }
.apply-form__levels label { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-background); font-weight: 500; cursor: pointer; }
.apply-form__levels input { accent-color: var(--color-primary); }
.apply-form__levels label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-subtle); color: var(--color-primary-hover); font-weight: 600; }
.apply-form__file { padding: 1rem; border: 1.5px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-background); }
.apply-form__file input { width: 100%; font-size: var(--text-sm); }
.apply-form__consent { display: grid; gap: .75rem; margin: .25rem 0 1.25rem; }
.apply-form__check { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 400 !important; line-height: 1.5; }
.apply-form__check input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--color-primary); }
.apply-form__check a { color: var(--color-primary); text-decoration: underline; text-underline-offset: .15em; }
.apply-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apply-form__submit { width: 100%; justify-content: center; }
.apply-form__status { margin: .9rem 0 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.apply-form__status--ok { color: #0f7a4f; font-weight: 600; }

@media (max-width: 56.25em) {
    .apply__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 30em) {
    .apply-form__grid { grid-template-columns: minmax(0, 1fr); }
    .job__poster img { height: 15rem; }
}

/* Mientras cargan las convocatorias */
.job--loading { min-height: 32rem; background: linear-gradient(100deg, #f2f7fc 30%, #e6f0f9 50%, #f2f7fc 70%) 0 0 / 200% 100%; animation: jobLoading 1.4s linear infinite; }
@keyframes jobLoading { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .job--loading { animation: none; } }

/* Campos administrados desde Google Sheets. */
.apply-form [hidden] { display: none !important; }
.apply-form__extras .apply-form__field + .apply-form__field { margin-top: 1rem; }
.apply-form__extras textarea { min-height: 7rem; resize: vertical; }