/* =====================================================
   OBJETOS PERDIDOS
   Formulario: reutiliza atencion-al-cliente.css (atc-*) y los
   campos de solicitud-recibo-pago-con-tarjeta.css (srp-*).
   Aquí sólo la columna lateral.
===================================================== */

/* La franja horaria es un valor corto: no necesita todo el ancho */
.obp-franja select {
    max-width: 20rem;
}

/* --- Columna lateral: foto + consejo para rellenar --- */

.obp-aside {
    display: flex;
    flex-direction: column;
    gap: var(--lv-s3);
}

.obp-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--lv-radius);
}

/* El consejo acompaña al formulario mientras se rellena:
   nota con el filete verde de la librea */
.obp-tip {
    padding: var(--lv-s3);
    border-left: 4px solid var(--lv-green);
    background: var(--lv-platform);
    color: var(--lv-ink-2);
    font-size: var(--lv-fs-sm);
    line-height: 1.65;
}

.obp-tip p {
    margin: 0 0 1em;
}

.obp-tip p:first-child {
    color: var(--lv-ink);
    font-size: var(--lv-fs-base);
    font-weight: 500;
}

.obp-tip p:last-child {
    margin-bottom: 0;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (min-width: 992px) {

    /* La columna se queda a la vista mientras se baja por el formulario */
    .obp-aside {
        position: sticky;
        top: calc(var(--lv-header-h) + var(--lv-s3));
        padding-top: calc(var(--lv-fs-xl) * 1.1 + var(--lv-s2) * 2 + var(--lv-s4));
    }
}

@media (max-width: 991px) {

    /* En móvil el consejo va antes del formulario: se lee primero */
    .obp-aside {
        order: -1;
    }

    .obp-photo {
        max-height: 14rem;
    }
}

@media (max-width: 767px) {

    .obp-franja select {
        max-width: none;
    }
}