/* ════════════════════════════════════════════════════════════════════════
   POSTUL-V3 — Estilos del wizard rediseñado (TEMA OSCURO, consistente)
   Cargado DESPUES de postulaciones.css. Usa los tokens --mn-* del base.

   Paleta usada (de postulaciones.css :root):
     Fondo base   : var(--mn-bg)       #0c0c0e
     Fondo card   : var(--mn-card)     #18181c
     Fondo card2  : var(--mn-card-2)   #1f1f25
     Fondo input  : var(--mn-bg-2)     #141417
     Borde sutil  : var(--mn-line)     #2a2a31
     Borde fuerte : var(--mn-line-2)   #34343d
     Texto        : var(--mn-text)     #ececf0
     Texto dim    : var(--mn-text-dim) #9a9aa5
     Texto faint  : var(--mn-text-faint) #6a6a74
     Rojo marca   : var(--mn-red)      #c81e2e
     Rojo claro   : var(--mn-red-soft) #e23a48
     Verde OK     : var(--mn-green)    #2bd96b
     Amarillo     : var(--mn-amber)    #f0b429
   ════════════════════════════════════════════════════════════════════════ */

/* ── Selector de puesto (Aplico almacen / cocina) ───────────────────── */
.cand-puesto-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 16px;
}

.cand-puesto {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--mn-line-2);
    border-radius: var(--mn-radius-sm);
    background: var(--mn-bg-2);
    cursor: pointer;
    transition: border-color var(--t-base) var(--ease-soft),
                background-color var(--t-base) var(--ease-soft),
                box-shadow var(--t-base) var(--ease-soft);
    text-align: left;
    font: inherit;
    color: var(--mn-text);
    width: 100%;
}

.cand-puesto:hover { border-color: var(--mn-green-dim); }

.cand-puesto.on {
    border-color: var(--mn-green);
    background: rgba(43,217,107,.08);
    box-shadow: 0 0 0 1px var(--mn-green) inset, 0 0 12px var(--mn-green-glow);
}

.cand-puesto-check {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--mn-line-2);
    background: var(--mn-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--mn-bg);
    margin-top: 2px;
    transition: background var(--t-base), border-color var(--t-base);
}

.cand-puesto.on .cand-puesto-check {
    background: var(--mn-green);
    border-color: var(--mn-green);
    color: var(--mn-bg);
}

.cand-puesto-body { flex: 1; }
.cand-puesto-titulo {
    font-weight: 700;
    font-size: 17px;
    display: block;
    margin-bottom: 4px;
    color: var(--mn-text);
}
.cand-puesto-sub {
    font-size: 14px;
    color: var(--mn-text-dim);
    display: block;
    line-height: 1.45;
}
.cand-puesto-tags {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cand-puesto-tag {
    background: var(--mn-card-2);
    border: 1px solid var(--mn-line);
    border-radius: 8px;
    padding: 3px 9px;
    font-size: 12px;
    color: var(--mn-text-dim);
    letter-spacing: .02em;
}

/* ── Pregunta tipo trampa (A/B/C/D) ─────────────────────────────────── */
.cand-pregunta-v3 {
    margin: 14px 0;
    padding: 14px 16px;
    background: var(--mn-card-2);
    border-radius: var(--mn-radius-sm);
    border: 1px solid var(--mn-line);
}

.cand-pregunta-v3 .cand-pregunta-texto {
    font-weight: 600;
    font-size: 15px;
    margin: 0 0 10px;
    color: var(--mn-text);
    line-height: 1.4;
}

.cand-pregunta-v3 .cand-pregunta-hint {
    font-size: 13px;
    color: var(--mn-text-dim);
    margin: 0 0 10px;
    font-style: italic;
}

/* Modifier "compacta" (Compacta="true") — para grids densos de muchas preguntas
   seguidas, como Limpieza Almacén/Cocina. Reduce padding y espaciado. */
.cand-pregunta-v3.cand-pregunta-compacta {
    padding: 10px 12px;
    margin: 8px 0;
}
.cand-pregunta-v3.cand-pregunta-compacta .cand-pregunta-texto {
    font-size: 14px;
    margin: 0 0 8px;
}
.cand-pregunta-v3.cand-pregunta-compacta .cand-opciones {
    gap: 4px;
}
.cand-pregunta-v3.cand-pregunta-compacta .cand-op-v3 {
    padding: 8px 10px;
}

.cand-opciones {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cand-op-v3 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid var(--mn-line-2);
    border-radius: var(--mn-radius-sm);
    background: var(--mn-bg-2);
    cursor: pointer;
    transition: border-color var(--t-base) var(--ease-soft),
                background-color var(--t-base) var(--ease-soft),
                box-shadow var(--t-base) var(--ease-soft);
    text-align: left;
    font: inherit;
    color: var(--mn-text);
    width: 100%;
    line-height: 1.4;
}

.cand-op-v3:hover { border-color: var(--mn-green-dim); }

.cand-op-v3.on {
    border-color: var(--mn-green);
    background: rgba(43,217,107,.08);
    box-shadow: 0 0 0 1px var(--mn-green) inset, 0 0 10px var(--mn-green-glow);
}

.cand-op-v3 .cand-op-letra {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--mn-line-2);
    background: var(--mn-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--mn-text-dim);
    transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}

.cand-op-v3.on .cand-op-letra {
    background: var(--mn-green);
    border-color: var(--mn-green);
    color: var(--mn-bg);
}

.cand-op-v3 .cand-op-texto {
    flex: 1;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--mn-text);
}

/* ── Escala 0-3 para equipos cocina ─────────────────────────────────── */
.cand-escala-equipo {
    display: flex;
    gap: 6px;
    margin: 6px 0;
}

.cand-escala-equipo .cand-op-eq {
    flex: 1;
    padding: 10px 6px;
    border: 2px solid var(--mn-line-2);
    border-radius: var(--mn-radius-sm);
    background: var(--mn-bg-2);
    color: var(--mn-text);
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    line-height: 1.3;
    transition: border-color var(--t-base) var(--ease-soft),
                background-color var(--t-base) var(--ease-soft),
                box-shadow var(--t-base) var(--ease-soft);
}

.cand-escala-equipo .cand-op-eq:hover { border-color: var(--mn-green-dim); }

.cand-escala-equipo .cand-op-eq.on {
    border-color: var(--mn-green);
    background: rgba(43,217,107,.10);
    color: var(--mn-green);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--mn-green) inset, 0 0 10px var(--mn-green-glow);
}

.cand-equipo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
}

.cand-equipo-row .cand-equipo-nombre {
    flex: 0 0 40%;
    font-weight: 500;
    color: var(--mn-text);
    font-size: 14.5px;
}

.cand-equipo-row .cand-escala-equipo { flex: 1; margin: 0; }

@media (max-width: 600px) {
    .cand-equipo-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .cand-equipo-row .cand-equipo-nombre { flex: none; font-size: 14px; }
}

/* ── Chips multi-select de productos cocina ─────────────────────────── */
.cand-productos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.cand-producto-chip {
    padding: 8px 14px;
    border: 1px solid var(--mn-line-2);
    border-radius: 999px;
    background: var(--mn-bg-2);
    color: var(--mn-text);
    cursor: pointer;
    font-size: 14px;
    transition: border-color var(--t-base) var(--ease-soft),
                background-color var(--t-base) var(--ease-soft),
                color var(--t-base) var(--ease-soft);
}

.cand-producto-chip:hover { border-color: var(--mn-green-dim); }

.cand-producto-chip.on {
    border-color: var(--mn-green);
    background: rgba(43,217,107,.12);
    color: var(--mn-green);
    box-shadow: 0 0 0 1px var(--mn-green) inset, 0 0 10px var(--mn-green-glow);
}

/* ── Mini quiz al final de condiciones ──────────────────────────────── */
.cand-quiz {
    margin-top: 22px;
    padding: 16px;
    border: 1px dashed var(--mn-red-soft);
    border-radius: var(--mn-radius);
    background: rgba(200, 30, 46, .04);
}

.cand-quiz-titulo {
    font-family: var(--mn-display);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    color: var(--mn-red-soft);
    margin: 0 0 6px;
    font-size: 16px;
}

.cand-quiz-hint {
    font-size: 13px;
    color: var(--mn-text-dim);
    margin: 0 0 14px;
    line-height: 1.5;
}

.cand-quiz .cand-pregunta-v3 {
    background: var(--mn-card);
    border-color: var(--mn-line);
}

/* ── Caso abierto (textarea con contador) ───────────────────────────── */
.cand-caso-abierto {
    margin: 14px 0;
}

.cand-caso-abierto textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 110px;
    padding: 12px 14px;
    border: 1px solid var(--mn-line-2);
    border-radius: var(--mn-radius-sm);
    background: var(--mn-bg-2);
    color: var(--mn-text);
    font: inherit;
    font-size: 14.5px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color var(--t-base) var(--ease-soft),
                box-shadow var(--t-base) var(--ease-soft);
}

.cand-caso-abierto textarea::placeholder { color: var(--mn-text-faint); }

.cand-caso-abierto textarea:focus {
    border-color: var(--mn-green);
    outline: none;
    box-shadow: 0 0 0 3px var(--mn-green-glow);
}

.cand-caso-contador {
    text-align: right;
    font-size: 12px;
    color: var(--mn-text-faint);
    margin-top: 4px;
    transition: color var(--t-base) var(--ease-soft);
}

.cand-caso-contador.too-short { color: var(--mn-red-soft); }

/* ── Bloque con encabezado (Almacén / Cocina) ───────────────────────── */
.cand-bloque-puesto {
    margin: 24px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--mn-red);
}

.cand-bloque-puesto-titulo {
    font-family: var(--mn-display);
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 20px;
    font-weight: 700;
    color: var(--mn-red-soft);
    margin: 0 0 4px;
}

.cand-bloque-puesto-sub {
    font-size: 13.5px;
    color: var(--mn-text-dim);
    margin: 0;
    line-height: 1.5;
}

.cand-bloque-seccion {
    margin: 16px 0;
}

.cand-bloque-seccion-titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--mn-text);
    margin: 18px 0 8px;
    padding: 4px 10px;
    border-left: 3px solid var(--mn-red);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Toma de conocimiento de cámaras — consentimiento legal informativo.
   Antes era "alerta amarilla" y asustaba al entrar al paso. Ahora tarjeta
   sobria y neutra: el postulante lee y tilda sin sensación de advertencia. ── */
.cand-consent-camaras {
    margin: 16px 0;
    padding: 16px;
    background: var(--mn-card-2);
    border: 1px solid var(--mn-line);
    border-radius: var(--mn-radius);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cand-consent-camaras .cand-consent-titulo {
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--mn-text);
    font-size: 14.5px;
}

.cand-consent-camaras .cand-consent-texto {
    font-size: 14px;
    line-height: 1.5;
    color: var(--mn-text-dim);
    margin: 0 0 8px;
}

/* ── Contacto emergencia (grid de 3 campos) ─────────────────────────── */
.cand-emergencia-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 600px) {
    .cand-emergencia-grid { grid-template-columns: 1fr; }
}

/* ── Hint "audio obligatorio": nota sobria (antes era relleno amarillo que
   gritaba al entrar). El ⚠️ + negrita la mantienen visible sin amarillo. ── */
.cand-hint-attention {
    color: var(--mn-text-dim) !important;
    background: rgba(255, 255, 255, .022);
    border: 1px solid var(--mn-line);
    padding: 9px 13px;
    border-radius: 10px;
    font-weight: 600;
}

/* ── ZIP HTML — estilos del perfil para el archivo perfil.html ──────
   Estos selectores se renderizan en un HTML SEPARADO (no en el wizard)
   por eso quedan claros — el ZIP del admin se ve mejor en blanco. */
.v3-block { margin-top: 32px; padding-top: 16px; border-top: 3px solid #c81e2e; }
.v3-block h2 { color: #c81e2e; margin: 0 0 16px; }
.v3-card {
    background: #fafafa;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
}
.v3-card h3 { margin: 0 0 12px; color: #1f2937; }
.v3-card h4 {
    margin: 16px 0 6px;
    padding-left: 8px;
    border-left: 3px solid #c81e2e;
    font-size: 14px;
    color: #c81e2e;
}
.v3-card table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.v3-card td { padding: 6px 10px; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
.v3-card td:first-child { color: #6b7280; width: 50%; }
.v3-card ul { margin: 0; padding-left: 22px; }
.v3-card li { margin: 4px 0; }
.v3-caso {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin: 6px 0;
    font-style: italic;
    line-height: 1.5;
}