/* ═══════════════════════════════════════════════
   Empleo Canitas — Estilos
   ═══════════════════════════════════════════════ */

.empleo-section {
    padding: 30px 10px 60px;
    font-family: 'Montserrat', sans-serif;
}

.empleo-subtitle {
    color: #444;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
}

/* ─── Filtros ─────────────────────────────────── */

.empleo-filtros {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}

.empleo-filtros__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.empleo-filtros__campo {
    flex: 1 1 180px;
}

.empleo-filtros__campo label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #222;
}

.empleo-filtros__campo input,
.empleo-filtros__campo select {
    width: 100%;
    padding: 12px 14px;
    min-height: 48px;
    border: 1px solid #c8ccd1;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    background: #fff;
}

.empleo-filtros__campo input:focus,
.empleo-filtros__campo select:focus {
    outline: none;
    border-color: #f8ba0f;
    box-shadow: 0 0 0 3px rgba(248,186,15,0.25);
}

.empleo-filtros__btn {
    flex: 0 0 auto;
}

/* ─── Grid de candidatos ──────────────────────── */

.empleo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.empleo-card {
    border: 1px solid #d6d9dd;
    border-radius: 12px;
    padding: 24px;
    background: #fff;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.1s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.empleo-card:hover,
.empleo-card:focus-visible {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border-color: #f8ba0f;
    text-decoration: none;
    color: inherit;
}

.empleo-card:focus-visible {
    outline: 3px solid #f8ba0f;
    outline-offset: 2px;
}

.empleo-card__header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Legacy: aún usado por cards de candidatos */
.empleo-card__top {
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
    align-items: center;
    justify-content: space-between;
}

.empleo-card__foto {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.empleo-card__foto--placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f8ba0f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.empleo-card__nombre {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
    margin: 0;
    color: #1a1a1a;
}

.empleo-card__titular {
    font-size: 15px;
    color: #555;
    margin: 2px 0 0;
}

.empleo-card__ubicacion {
    font-size: 15px;
    color: #555;
    margin: 0;
}

.empleo-card__resumen {
    font-size: 16px;
    color: #3f3f3f;
    line-height: 1.6;
    flex-grow: 1;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.empleo-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.empleo-card__cta {
    margin-top: 4px;
    align-self: flex-start;
    color: #b07a00;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.empleo-card:hover .empleo-card__cta {
    color: #8a5e00;
}

/* ─── Tags ────────────────────────────────────── */

.empleo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.empleo-tag {
    display: inline-block;
    background: #fff3cd;
    color: #6b4f00;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    line-height: 1.3;
}

.empleo-tag--blue {
    background: #d1ecf1;
    color: #084c5d;
}

.empleo-tag--gray {
    background: #e9ecef;
    color: #3c4148;
}

.empleo-tag--green {
    background: #d4edda;
    color: #0e4a1e;
}

.empleo-tag--source {
    background: #fff3cd;
    color: #6b4f00;
    font-size: 12px;
    text-transform: capitalize;
}

.empleo-tag--exclusivo {
    background: #f8d7da;
    color: #6b1820;
    font-weight: 700;
}

.empleo-tag--bienvenido {
    background: #cfe2ff;
    color: #06316b;
    font-weight: 700;
}

/* ─── Oferta cards ────────────────────────────── */

.empleo-oferta-card .empleo-card__top {
    align-items: flex-start;
}

.empleo-oferta-card__empresa {
    font-size: 16px;
    color: #444;
    margin: 0;
    font-weight: 600;
}

/* Bloque de salario: fila propia, prominente y fácil de leer */
.empleo-oferta-card__salario {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    background: #d4edda;
    color: #0e4a1e;
    padding: 10px 14px;
    border-radius: 10px;
    line-height: 1.35;
}

.empleo-oferta-card__salario-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1c5a2c;
}

.empleo-oferta-card__salario-valor {
    font-size: 17px;
    font-weight: 700;
}

/* Estado vacío: la caja de sueldo se muestra igual (para alinear) pero atenuada. */
.empleo-oferta-card__salario--vacio {
    background: #f1f3f5;
}
.empleo-oferta-card__salario--vacio .empleo-oferta-card__salario-label,
.empleo-oferta-card__salario--vacio .empleo-oferta-card__salario-valor {
    color: #868e96;
}

/* Alineación fila-por-fila entre tarjetas de oferta (título con título, empresa
   con empresa, sueldo con sueldo, descripción con descripción…) mediante subgrid.
   Cada tarjeta comparte las 7 filas del contenedor; por eso el JS imprime SIEMPRE
   los 7 slots aunque estén vacíos (renderOfertaCard en js/empleo.js). */
@supports (grid-template-rows: subgrid) {
    /* row-gap del contenedor = separación entre cada línea de la tarjeta
       (la subgrid lo hereda) y también entre tarjetas. NO poner gap:0 en la
       tarjeta: anularía este espaciado y las líneas quedan pegadas. */
    #empleo-resultados {
        row-gap: 16px;
    }
    #empleo-resultados .empleo-oferta-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 7;
    }
    /* En grid, la descripción no necesita flex-grow; su altura la alinea la subgrid. */
    #empleo-resultados .empleo-oferta-card .empleo-card__resumen {
        flex-grow: 0;
    }
}

/* ─── Detalle de oferta ───────────────────────── */

.empleo-oferta-detalle {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}

.empleo-oferta-detalle h1 {
    font-size: 24px;
    margin: 0 0 15px;
    color: #222;
}

.empleo-oferta__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 15px;
    color: #555;
}

.empleo-oferta__empresa {
    font-weight: 600;
}

.empleo-oferta__ubicacion {
    color: #888;
}

.empleo-oferta__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 25px;
}

.empleo-oferta__seccion {
    margin-bottom: 25px;
}

.empleo-oferta__seccion h2 {
    font-size: 20px;
    color: #222;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f8ba0f;
}

.empleo-oferta__texto {
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: #2f2f2f;
}

.empleo-oferta__texto p {
    margin: 0 0 12px;
}

.empleo-oferta__texto ul,
.empleo-oferta__texto ol {
    margin: 8px 0 12px 20px;
    padding: 0;
}

.empleo-oferta__texto li {
    margin-bottom: 4px;
}

.empleo-oferta__info-extra {
    font-size: 15px;
    color: #555;
    border-top: 1px solid #e6e6e6;
    padding-top: 15px;
}

.empleo-oferta__info-extra p {
    margin: 5px 0;
}

/* ─── Postulación rápida ──────────────────────── */

.empleo-postular-rapido {
    margin-top: 10px;
}

.empleo-postular-rapido__desc {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

/* ─── Paginación ──────────────────────────────── */

.empleo-paginacion {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 30px 0;
}

.empleo-paginacion button {
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
}

.empleo-paginacion button.active {
    background: #f8ba0f;
    border-color: #f8ba0f;
    color: #111;
    font-weight: 700;
}

/* ─── Perfil individual ───────────────────────── */

.empleo-breadcrumb {
    font-size: 13px;
    color: #999;
    margin-bottom: 20px;
}
.empleo-breadcrumb a {
    color: #666;
    text-decoration: none;
}
.empleo-breadcrumb a:hover {
    text-decoration: underline;
}

.empleo-perfil {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}

.empleo-perfil__header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
}

.empleo-perfil__foto {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.empleo-perfil__foto--placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #f8ba0f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    flex-shrink: 0;
}

.empleo-perfil__info h1 {
    margin: 0 0 5px;
    font-size: 24px;
}

.empleo-perfil__titular {
    font-size: 16px;
    color: #555;
    margin: 0 0 5px;
}

.empleo-perfil__ubicacion {
    font-size: 14px;
    color: #999;
    margin: 0 0 10px;
}

.empleo-perfil__seccion {
    margin-bottom: 25px;
}

.empleo-perfil__seccion h2 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f8ba0f;
}

.empleo-perfil__seccion p {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

/* ─── Contacto box ────────────────────────────── */

.empleo-contacto-box {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
}

.empleo-contacto-box h3 {
    font-size: 18px;
    margin: 0 0 10px;
}

.empleo-contacto-box > p {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

.empleo-volver {
    margin-top: 15px;
}

/* ─── Formularios ─────────────────────────────── */

.empleo-form {
    margin-bottom: 20px;
}

.empleo-form h3 {
    font-size: 18px;
    color: #333;
    margin: 25px 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f8ba0f;
}

.empleo-form h3:first-child {
    margin-top: 0;
}

.empleo-form__field {
    margin-bottom: 18px;
}

.empleo-form__field label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #1a1a1a;
}

.empleo-form__field input[type="text"],
.empleo-form__field input[type="email"],
.empleo-form__field input[type="tel"],
.empleo-form__field input[type="password"],
.empleo-form__field textarea,
.empleo-form__field select {
    width: 100%;
    padding: 13px 14px;
    min-height: 48px;
    border: 1px solid #c8ccd1;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.empleo-form__field input:focus,
.empleo-form__field textarea:focus,
.empleo-form__field select:focus {
    outline: none;
    border-color: #f8ba0f;
    box-shadow: 0 0 0 3px rgba(248,186,15,.3);
}

.empleo-form__field small {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.empleo-form__field input[type="file"] {
    font-size: 13px;
}

.empleo-form__row {
    display: flex;
    gap: 15px;
}

.empleo-form__half {
    flex: 1 1 0;
}

.empleo-form__legal {
    font-size: 12px;
    color: #999;
    margin-top: 15px;
}

.empleo-form__login-link {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
}

.empleo-form__logout {
    text-align: center;
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

/* ─── Botones ─────────────────────────────────── */

.btn-empleo {
    display: inline-block;
    padding: 14px 24px;
    min-height: 48px;
    border: 2px solid #f8ba0f;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s;
    line-height: 1.2;
}

.btn-empleo:focus-visible {
    outline: 3px solid #b07a00;
    outline-offset: 2px;
}

.btn-empleo--primary {
    background: #f8ba0f;
    color: #111;
}

.btn-empleo--primary:hover {
    background: #fe7a15;
    border-color: #fe7a15;
    color: #fff;
}

.btn-empleo--outline {
    background: transparent;
    color: #333;
}

.btn-empleo--outline:hover {
    background: #f8ba0f;
    color: #111;
}

.btn-empleo--lg {
    width: 100%;
    padding: 18px 24px;
    min-height: 56px;
    font-size: 18px;
}

.btn-empleo:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ─── Alertas ─────────────────────────────────── */

.empleo-alert {
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 20px;
}

.empleo-alert--success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block !important;
}

.empleo-alert--error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.empleo-alert--info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
    display: block !important;
}

.empleo-alert a {
    color: inherit;
    font-weight: 600;
}

/* ─── CTA ─────────────────────────────────────── */

.empleo-cta {
    text-align: center;
    background: #f8f9fa;
    border-radius: 10px;
    padding: 40px 30px;
    margin-top: 40px;
}

.empleo-cta h2 {
    font-size: 22px;
    margin: 0 0 10px;
}

.empleo-cta p {
    color: #666;
    margin-bottom: 20px;
}

.empleo-cta .btn-empleo--lg {
    width: auto;
    padding: 14px 40px;
}

/* ─── Loading & sin resultados ────────────────── */

.empleo-loading,
.empleo-sin-resultados {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-size: 15px;
}

/* ─── Status del perfil ───────────────────────── */

.empleo-perfil-status {
    margin-bottom: 20px;
}

/* ─── Responsive ──────────────────────────────── */

@media (max-width: 767px) {
    .empleo-perfil__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .empleo-perfil__foto,
    .empleo-perfil__foto--placeholder {
        width: 90px;
        height: 90px;
        font-size: 36px;
    }

    .empleo-perfil__info h1 {
        font-size: 20px;
    }

    .empleo-form__row {
        flex-direction: column;
        gap: 0;
    }

    .empleo-filtros__grid {
        flex-direction: column;
    }

    .empleo-grid {
        grid-template-columns: 1fr;
        gap: 18px;
     }

    .empleo-card {
        padding: 20px;
    }

    .empleo-card__nombre {
        font-size: 18px;
    }

    .empleo-card__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .empleo-oferta-detalle {
        padding: 20px;
    }

    .empleo-oferta-detalle h1 {
        font-size: 22px;
    }

    .empleo-oferta__texto {
        font-size: 16px;
    }

    .empleo-oferta__meta {
        flex-direction: column;
        gap: 5px;
    }
}

/* ═══════════════════════════════════════════════════════
   Wizard de registro (paso a paso)
   Optimizado para adultos mayores 60+
   Reglas UX: cuerpo ≥18px, line-height 1.5-1.8, targets ≥64px,
              contraste 7:1, una acción principal por pantalla
   ═══════════════════════════════════════════════════════ */

.empleo-section--registro {
    padding: 24px 14px 80px;
}

@media (min-width: 480px) {
    .empleo-section--registro { padding: 32px 20px 80px; }
}

@media (min-width: 768px) {
    .empleo-section--registro { padding: 48px 0 80px; }
}

/* Compensar el container Bootstrap que en móvil puede dejar el card pegado al borde */
.empleo-section--registro > .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.empleo-wizard__header {
    margin-bottom: 24px;
}

.empleo-wizard__header h1 {
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #111;
    margin: 0 0 12px;
}

@media (min-width: 768px) {
    .empleo-wizard__header h1 { font-size: 30px; }
}

/* El subtítulo del header debe ser legible — 18px floor */
.empleo-section--registro .empleo-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: #2f2f2f;
}

/* ─── Progreso ────────────────────────────────────────── */

.empleo-wizard__progress {
    margin-bottom: 24px;
}

.empleo-wizard__progress-text {
    font-size: 17px;
    color: #1a1a1a;
    margin-bottom: 10px;
    font-weight: 600;
}

.empleo-wizard__progress-bar {
    width: 100%;
    height: 12px;
    background: #ececec;
    border-radius: 999px;
    overflow: hidden;
}

.empleo-wizard__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f8ba0f, #fe7a15);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* ─── Pasos ───────────────────────────────────────────── */

.empleo-wizard__step {
    display: none;
    background: #fff;
    border: 1px solid #d6d9dd;
    border-radius: 14px;
    padding: 24px 20px;
    margin-bottom: 20px;
}

.empleo-wizard__step.is-active {
    display: block;
    animation: empleoStepIn 0.25s ease;
}

@media (min-width: 768px) {
    .empleo-wizard__step { padding: 36px 32px; margin-bottom: 24px; }
}

@keyframes empleoStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.empleo-wizard__step h2 {
    font-size: 22px;
    color: #111;
    margin: 0 0 10px;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

@media (min-width: 768px) {
    .empleo-wizard__step h2 { font-size: 26px; }
}

.empleo-wizard__lead {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #2a2a2a;
    margin: 0 0 24px;
    max-width: 60ch;
}

.empleo-wizard__step .empleo-form__field {
    margin-bottom: 24px;
}

.empleo-wizard__step .empleo-form__field:last-of-type {
    margin-bottom: 8px;
}

/* Labels e inputs dentro del wizard: 18px floor */
.empleo-wizard .empleo-form__field label,
.empleo-wizard .empleo-radio-group legend {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.4;
}

.empleo-wizard .empleo-form__field input,
.empleo-wizard .empleo-form__field select,
.empleo-wizard .empleo-form__field textarea {
    font-size: 18px;
    min-height: 56px;
    padding: 14px 16px;
    line-height: 1.4;
    border-width: 2px;
    border-color: #b5bac0;
}

.empleo-wizard .empleo-form__field textarea {
    min-height: 120px;
    line-height: 1.55;
}

.empleo-wizard .empleo-form__field small {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.5;
    color: #555;
}

/* Mensaje de error junto al campo — semaforización con borde + icono + texto */
.empleo-form__field.has-error input,
.empleo-form__field.has-error select,
.empleo-form__field.has-error textarea {
    border-color: #842029;
    box-shadow: 0 0 0 3px rgba(132,32,41,0.25);
}

.empleo-form__error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    color: #4a0c11;
    background: #f8d7da;
    padding: 12px 16px;
    border-left: 4px solid #842029;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}

.empleo-form__error::before {
    content: "⚠";
    font-size: 22px;
    flex-shrink: 0;
}

/* ─── Mostrar/ocultar contraseña ──────────────────────── */

.empleo-input-with-action {
    position: relative;
    display: flex;
}

.empleo-wizard .empleo-input-with-action input {
    padding-right: 110px;
}

.empleo-input-action {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    padding: 0 16px;
    border: none;
    background: #ecedef;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    cursor: pointer;
    font-family: inherit;
    min-width: 92px;
}

.empleo-input-action:hover { background: #dde0e3; }
.empleo-input-action:focus-visible {
    outline: 3px solid #f8ba0f;
    outline-offset: 2px;
}

/* ─── Radio group (selección visual grande) ───────────── */

.empleo-radio-group {
    border: none;
    padding: 0;
    margin: 0;
}

.empleo-radio {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 2px solid #c8ccd1;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    min-height: 64px;
}

.empleo-radio:hover {
    border-color: #f8ba0f;
    background: #fffaeb;
}

.empleo-radio input[type="radio"],
.empleo-radio input[type="checkbox"] {
    width: 26px;
    height: 26px;
    accent-color: #f8ba0f;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.empleo-radio:has(input[type="radio"]:checked),
.empleo-radio:has(input[type="checkbox"]:checked) {
    border-color: #b07a00;
    background: #fff3c4;
    box-shadow: 0 0 0 3px rgba(248,186,15,0.3);
}

.empleo-radio-group__hint {
    margin: -4px 0 12px;
    font-size: 15px;
    color: #555;
}

.empleo-radio:focus-within {
    outline: 3px solid #f8ba0f;
    outline-offset: 2px;
}

.empleo-radio__label {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

/* ─── Resumen del paso final ──────────────────────────── */

.empleo-wizard__summary {
    background: #fffaeb;
    border: 2px solid #f8ba0f;
    border-radius: 12px;
    padding: 22px;
    margin: 24px 0;
}

.empleo-wizard__summary h3 {
    font-size: 19px;
    color: #5a3f00;
    margin: 0 0 14px;
    padding: 0;
    border: none;
}

.empleo-wizard__summary dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 0;
}

@media (min-width: 600px) {
    .empleo-wizard__summary dl {
        grid-template-columns: 12em 1fr;
        gap: 10px 18px;
    }
}

.empleo-wizard__summary dt {
    font-size: 15px;
    color: #5a3f00;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.empleo-wizard__summary dd {
    font-size: 18px;
    color: #1a1a1a;
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}

.empleo-wizard__summary-help {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: #5a3f00;
}

/* ─── Mensaje cálido de progreso entre pasos ──────────── */

.empleo-wizard__cheer {
    background: #d4edda;
    border-left: 4px solid #28a745;
    color: #0e4a1e;
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    display: flex;
    align-items: center;
    gap: 10px;
}

.empleo-wizard__cheer::before {
    content: "✓";
    background: #28a745;
    color: #fff;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* ─── Navegación inferior ────────────────────────────── */

/* Forzar visibilidad por estado: algún CSS del tema pisaba el atributo hidden */
.empleo-wizard__nav[hidden],
.empleo-wizard__progress[hidden],
.empleo-wizard__header[hidden],
.empleo-wizard__help[hidden],
.empleo-form__login-link[hidden],
.empleo-wizard__nav .btn-empleo[hidden] {
    display: none !important;
}

.empleo-wizard__nav {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    margin-top: 8px;
}

@media (min-width: 600px) {
    .empleo-wizard__nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.empleo-wizard__nav .btn-empleo {
    width: 100%;
    min-height: 64px;
    font-size: 18px;
}

@media (min-width: 600px) {
    .empleo-wizard__nav .btn-empleo--primary { flex: 1 1 auto; max-width: 360px; }
    .empleo-wizard__nav .btn-empleo--outline { flex: 0 0 auto; min-width: 160px; width: auto; }
}

/* Feedback visual al presionar */
.btn-empleo:active:not(:disabled) {
    transform: scale(0.98);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) inset;
}

/* Spinner para estado de carga */
.btn-empleo[aria-busy="true"] {
    cursor: wait;
    opacity: 0.85;
}
.btn-empleo[aria-busy="true"]::before {
    content: "";
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid rgba(0,0,0,0.25);
    border-top-color: #111;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    animation: empleoSpin 0.7s linear infinite;
}
@keyframes empleoSpin { to { transform: rotate(360deg); } }

/* ─── Pantalla de éxito ──────────────────────────────── */

.empleo-wizard__step--success {
    text-align: center;
    border-color: #b8e0c1;
    background: #f1faf3;
}

.empleo-wizard__success { padding: 16px 0; }

.empleo-wizard__success-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #28a745;
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    line-height: 88px;
    text-align: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 14px rgba(40,167,69,0.3);
}

.empleo-wizard__step--success h2 {
    color: #0e4a1e;
    font-size: 26px;
}

.empleo-wizard__step--success .empleo-wizard__lead {
    margin-left: auto;
    margin-right: auto;
}

.empleo-wizard__step--success .btn-empleo--lg {
    width: 100%;
    max-width: 360px;
    margin: 16px auto 0;
}

/* ─── File input más amable ──────────────────────────── */

.empleo-wizard .empleo-form__field input[type="file"] {
    padding: 16px;
    background: #f8f9fa;
    border: 2px dashed #c8ccd1;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    min-height: 64px;
    font-family: inherit;
}

.empleo-wizard .empleo-form__field input[type="file"]:hover {
    border-color: #f8ba0f;
    background: #fffaeb;
}

/* ─── Ayuda / soporte contextual ─────────────────────── */

.empleo-wizard__help {
    margin-top: 28px;
    padding: 18px 20px;
    background: #f0f4ff;
    border: 1px solid #cdd9ff;
    border-radius: 12px;
    font-size: 17px;
    line-height: 1.5;
    color: #1a1a1a;
}

.empleo-wizard__help strong { color: #0b3a8a; }
.empleo-wizard__help a {
    color: #0b3a8a;
    font-weight: 700;
    text-decoration: underline;
}

/* ─── Indicador de seguridad ─────────────────────────── */

.empleo-wizard__security {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    color: #0e4a1e;
    font-size: 15px;
    font-weight: 600;
}
.empleo-wizard__security::before {
    content: "🔒";
    font-size: 18px;
}

/* ─── Texto legal ────────────────────────────────────── */

.empleo-form__legal {
    font-size: 15px;
    color: #2f2f2f;
    line-height: 1.55;
    margin-top: 20px;
}

.empleo-form__legal a {
    color: #b07a00;
    text-decoration: underline;
    font-weight: 700;
}

/* Recaptcha más legible en móvil */
#reg-recaptcha { transform-origin: left top; }
@media (max-width: 360px) {
    #reg-recaptcha { transform: scale(0.88); }
}

/* ═══════════════════════════════════════════════════════
   Hero / CTA de /buscar-empleo/ — captar al adulto mayor
   Una acción principal por pantalla, tipografía grande,
   contraste alto y mensaje cálido.
   ═══════════════════════════════════════════════════════ */

.empleo-hero {
    margin: 16px auto 32px;
    background: linear-gradient(180deg, #fffaeb 0%, #fff 100%);
    border: 1px solid #f3d77a;
    border-radius: 20px;
    padding: 28px 20px;
}

@media (min-width: 600px) {
    .empleo-hero {
        padding: 48px 40px;
        margin: 24px auto 40px;
    }
}

@media (min-width: 992px) {
    .empleo-hero { padding: 56px 56px; }
}

/* Variante compacta: convive con el listado debajo */
.empleo-hero--compact {
    padding: 24px 20px;
    margin-bottom: 28px;
}
@media (min-width: 600px) {
    .empleo-hero--compact { padding: 36px 40px; margin-bottom: 36px; }
}
@media (min-width: 992px) {
    .empleo-hero--compact { padding: 40px 48px; }
}
.empleo-hero--compact .empleo-hero__titulo { font-size: 24px; margin-bottom: 14px; }
@media (min-width: 600px) { .empleo-hero--compact .empleo-hero__titulo { font-size: 30px; } }
.empleo-hero--compact .empleo-hero__lead { font-size: 18px; margin-bottom: 22px; }
.empleo-hero--compact .empleo-hero__cta { margin: 0 0 18px; }
.empleo-hero--compact .empleo-hero__login {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f3d77a;
}

.empleo-hero__inner {
    max-width: 720px;
    margin: 0 auto;
}

.empleo-hero__titulo {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #111;
    margin: 0 0 18px;
    font-weight: 800;
}

@media (min-width: 600px) { .empleo-hero__titulo { font-size: 36px; } }
@media (min-width: 992px) { .empleo-hero__titulo { font-size: 42px; } }

.empleo-hero__lead {
    font-size: 18px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0 0 28px;
    max-width: 60ch;
}

@media (min-width: 600px) {
    .empleo-hero__lead { font-size: 20px; line-height: 1.55; margin-bottom: 32px; }
}

/* CTA primario — variante extra grande del btn-empleo */
.btn-empleo--xl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 72px;
    padding: 18px 32px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 4px 0 #c79100, 0 6px 16px rgba(0,0,0,0.1);
    transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
    line-height: 1.2;
    border-width: 2px;
}

.btn-empleo--xl:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c79100, 0 3px 8px rgba(0,0,0,0.1);
}

@media (min-width: 600px) {
    .btn-empleo--xl {
        width: auto;
        min-width: 360px;
        font-size: 22px;
        min-height: 80px;
    }
}

.empleo-hero__cta {
    margin: 4px 0 32px;
}

.empleo-hero__cta-arrow {
    font-size: 26px;
    transition: transform 0.2s;
    display: inline-block;
}

.empleo-hero__cta:hover .empleo-hero__cta-arrow {
    transform: translateX(4px);
}

/* Bullets de beneficios */
.empleo-hero__beneficios {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.empleo-hero__beneficios li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 18px;
    line-height: 1.55;
    color: #1a1a1a;
}

.empleo-hero__beneficios strong { color: #111; font-weight: 700; }

.empleo-hero__check {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #d4edda;
    color: #0e4a1e;
    font-size: 20px;
    font-weight: 800;
    line-height: 36px;
    text-align: center;
    border: 2px solid #28a745;
}

@media (min-width: 600px) {
    .empleo-hero__beneficios li { font-size: 19px; }
}

/* Link de login y ayuda */
.empleo-hero__login {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.5;
    color: #2a2a2a;
    padding-top: 20px;
    border-top: 1px solid #f3d77a;
}

.empleo-hero__login a {
    color: #b07a00;
    text-decoration: underline;
    font-weight: 700;
    text-underline-offset: 3px;
}

.empleo-hero__ayuda {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #555;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.empleo-hero__ayuda a {
    color: #0b3a8a;
    text-decoration: underline;
    font-weight: 700;
}

/* ─── Encabezado del listado ─────────────────────────── */

.empleo-ofertas-titulo {
    font-size: 26px;
    line-height: 1.25;
    color: #111;
    margin: 0 0 8px;
    letter-spacing: 0.01em;
}

@media (min-width: 600px) {
    .empleo-ofertas-titulo { font-size: 32px; }
}

.empleo-ofertas-subtitulo {
    font-size: 18px;
    line-height: 1.55;
    color: #2a2a2a;
    margin: 0 0 24px;
}

/* ─── CTA al final del listado ───────────────────────── */

.empleo-cta-bottom {
    margin: 40px auto 16px;
    padding: 32px 24px;
    background: #fffaeb;
    border: 2px solid #f3d77a;
    border-radius: 20px;
    text-align: center;
}

.empleo-cta-bottom h2 {
    font-size: 24px;
    line-height: 1.3;
    color: #111;
    margin: 0 0 10px;
}

@media (min-width: 600px) {
    .empleo-cta-bottom h2 { font-size: 28px; }
    .empleo-cta-bottom    { padding: 44px 32px; }
}

.empleo-cta-bottom p {
    font-size: 18px;
    line-height: 1.55;
    color: #2a2a2a;
    margin: 0 auto 22px;
    max-width: 50ch;
}

.empleo-cta-bottom .btn-empleo--xl {
    margin: 0 auto;
}

/* Estado vacío más amable */
.empleo-sin-resultados {
    padding: 32px 24px;
    background: #f0f4ff;
    border: 1px solid #cdd9ff;
    border-radius: 14px;
    text-align: center;
}
.empleo-sin-resultados p {
    font-size: 18px;
    line-height: 1.55;
    color: #1a1a1a;
    margin: 0;
}

.empleo-loading p {
    font-size: 17px;
    color: #555;
    text-align: center;
    padding: 24px 0;
}

/* ─── Dictado por voz (Web Speech API) ─────────────── */

.empleo-textarea-wrap {
    position: relative;
}

.empleo-voice-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 18px;
    background: #f0f4ff;
    border: 2px solid #cdd9ff;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    color: #0b3a8a;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    min-height: 48px;
}

.empleo-voice-btn:hover {
    background: #dfe7ff;
    border-color: #9bb1ee;
}

.empleo-voice-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.empleo-voice-btn:focus-visible {
    outline: 3px solid #0b3a8a;
    outline-offset: 2px;
}

.empleo-voice-btn[disabled],
.empleo-voice-btn[data-unsupported="true"] {
    display: none;
}

.empleo-voice-btn__icon {
    font-size: 22px;
    line-height: 1;
}

.empleo-voice-btn.is-listening {
    background: #fee2e2;
    border-color: #f8a3a3;
    color: #8a1f1f;
    animation: empleoMicPulse 1.4s ease-in-out infinite;
}

.empleo-voice-btn.is-listening .empleo-voice-btn__icon {
    animation: empleoMicWiggle 0.6s ease-in-out infinite alternate;
}

@keyframes empleoMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232,69,69,0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(232,69,69,0); }
}
@keyframes empleoMicWiggle {
    from { transform: scale(1); }
    to   { transform: scale(1.18); }
}

/* NOTA: los estilos del repetidor de experiencias (registro y edición) se
   entregan INLINE desde functions/empleo/exp-styles.php — LiteSpeed servía un
   empleo.css combinado/cacheado y esas reglas no llegaban a la página. */