/*
 * Formularios propios de Logismad (`lm-*`).
 *
 * Compartido por el formulario de contacto (inicio, servicios y contacto) y
 * por el de la bolsa de trabajo. Antes vivía embebido en reclutamiento.html.
 */

/* --- Tarjeta y campos --- */
.lm-form-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 45px 40px 40px;
    box-shadow: 0 10px 40px rgba(26, 80, 150, 0.08);
}
.lm-field { margin-bottom: 25px; }
.lm-field label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #071c35;
    margin-bottom: 8px;
}
.lm-field label small { font-weight: 400; color: #6f7172; }
.lm-field label span, .lm-check label span { color: #d13030; }
.lm-field input[type="text"],
.lm-field input[type="email"],
.lm-field input[type="tel"],
.lm-field select,
.lm-field textarea {
    width: 100%;
    border: 1px solid #dfe6ef;
    border-radius: 6px;
    background: #fbfcfe;
    padding: 12px 15px;
    font-size: 15px;
    color: #071c35;
    transition: 0.25s;
}
.lm-field textarea { resize: vertical; min-height: 90px; }
.lm-field input:focus, .lm-field select:focus, .lm-field textarea:focus {
    border-color: #1a5096;
    background: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 80, 150, 0.12);
}
.lm-field input.lm-invalid,
.lm-field select.lm-invalid,
.lm-field textarea.lm-invalid { border-color: #d13030; }
.lm-error {
    display: none;
    color: #d13030;
    font-size: 13px;
    margin-top: 6px;
}
.lm-error.lm-visible { display: block; }

/* Zona de archivo */
.lm-drop {
    position: relative;
    border: 2px dashed #c5d4e6;
    border-radius: 8px;
    background: #fbfcfe;
    text-align: center;
    padding: 32px 20px;
    cursor: pointer;
    transition: 0.25s;
}
.lm-drop:hover, .lm-drop:focus, .lm-drop.lm-dragover {
    border-color: #1a5096;
    background: #f2f7fd;
    outline: none;
}
.lm-drop.lm-invalid { border-color: #d13030; }
.lm-drop i { font-size: 34px; color: #1a5096; display: block; margin-bottom: 12px; }
.lm-drop-title { font-size: 15px; color: #071c35; margin: 0 0 4px; }
.lm-drop-title span { color: #1a5096; font-weight: 600; text-decoration: underline; }
.lm-drop-hint { font-size: 13px; color: #6f7172; margin: 0; }
.lm-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.lm-file {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 15px;
    border-radius: 6px;
    background: #eaf4ec;
    color: #1c6b34;
    font-size: 14px;
    font-weight: 600;
}
.lm-file i { font-size: 18px; }
.lm-file span { flex: 1; word-break: break-all; }
.lm-file button {
    border: 0;
    background: none;
    color: #1c6b34;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

/* Consentimiento */
.lm-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.lm-check input { margin-top: 4px; width: 17px; height: 17px; flex-shrink: 0; }
.lm-check label { font-size: 14px; color: #6f7172; line-height: 1.6; margin: 0; font-weight: 400; }
.lm-check label a { color: #1a5096; text-decoration: underline; }

/* Acciones */
.lm-actions { margin-top: 25px; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.lm-actions .btn i { margin-left: 8px; }
.lm-actions .btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.lm-progress {
    flex: 1;
    min-width: 160px;
    height: 6px;
    border-radius: 3px;
    background: #e3ebf5;
    overflow: hidden;
}
.lm-progress > div { height: 100%; width: 0; background: #1a5096; transition: width 0.25s; }
.lm-legal { font-size: 12px; color: #9aa1a9; margin: 18px 0 0; }
.lm-legal a { color: #9aa1a9; text-decoration: underline; }

/* Resultado */
.lm-result { text-align: center; padding: 20px 10px; }
.lm-result i { font-size: 54px; display: block; margin-bottom: 20px; }
.lm-result h3 { font-size: 24px; margin-bottom: 12px; }
.lm-result p { font-size: 16px; color: #6f7172; max-width: 520px; margin: 0 auto 12px; }
.lm-result .btn { margin-top: 22px; }
.lm-result-ok i { color: #1c9c4b; }
.lm-result-error i { color: #d13030; }
.lm-captcha-ok {
    display: inline-block;
    background: #eaf4ec;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 13px !important;
    font-weight: 600;
    color: #1c6b34 !important;
}
.lm-captcha-ok i { font-size: 14px; margin-right: 6px; }
.lm-demo-note {
    background: #fff8e6;
    border: 1px solid #f0dfae;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px !important;
    color: #7a5c15 !important;
}
.grecaptcha-badge { visibility: hidden; }

@media (max-width: 575px) {
    .lm-form-card { padding: 30px 20px 25px; }
    .lm-actions { flex-direction: column; align-items: stretch; }
}

/* --- Variante sin tarjeta ---
 * En inicio y servicios el formulario ya va dentro de .appiontment-02-wrapper,
 * que es una caja blanca con su propio padding; ahí la tarjeta sobraría. */
.lm-form-card.lm-plano {
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* --- Señuelo anti-bots ---
 * Fuera de la pantalla en lugar de display:none, que algunos bots detectan.
 * Sin foco ni lectura por parte de tecnología asistiva. */
.lm-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Aviso general del formulario (límite de frecuencia, servicio caído) --- */
.lm-aviso {
    display: none;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 6px;
    background: #fdecec;
    border: 1px solid #f3c6c6;
    color: #a52222;
    font-size: 14px;
}
.lm-aviso.lm-visible { display: block; }