/* Venus FM - Tarjeta de Acceso (Login / Registro / Recuperar)

   Diseño intencionalmente distinto al resto del sitio: fondo blanco,

   bordes rectos negros, sin degradé, tal como se pidió. */



.vfm-lc {

    --vfm-lc-borde: #1a1a1a;

    --vfm-lc-texto: #1a1a1a;

    --vfm-lc-gris: #8a8a8a;

    --vfm-lc-rojo: #d21f1f;

    --vfm-lc-rojo-hover: #a91717;

    max-width: 380px;

    width: 100%;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    color: var(--vfm-lc-texto);

    box-sizing: border-box;

}

.vfm-lc *, .vfm-lc *::before, .vfm-lc *::after { box-sizing: border-box; }



.vfm-lc-panel { display: none; }

.vfm-lc-panel.vfm-lc-activo { display: block; }



.vfm-lc-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: clamp(12px, 3dvh, 20px);

}



.vfm-lc-header p {

    margin: 0;

    font-size: clamp(18px, 4dvh, 22px);

    font-weight: 700;

    line-height: 1.2;

}



.vfm-lc-cerrar {

    background: none;

    border: none;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    color: var(--vfm-lc-texto);

    padding: 0 0 0 12px;

}



.vfm-lc-social {

    display: flex;

    flex-direction: column;

    gap: clamp(6px, 1.4dvh, 10px);

    margin-bottom: clamp(10px, 2.2dvh, 18px);

}



.vfm-lc-divider {

    display: flex;

    align-items: center;

    text-align: center;

    color: var(--vfm-lc-gris);

    font-size: 13px;

    margin: clamp(10px, 2.2dvh, 18px) 0;

}

.vfm-lc-divider::before,

.vfm-lc-divider::after {

    content: "";

    flex: 1;

    border-bottom: 1px solid #d0d0d0;

}

.vfm-lc-divider span { padding: 0 12px; }



.vfm-lc-form { display: flex; flex-direction: column; }



.vfm-lc-field { margin-bottom: clamp(10px, 2.2dvh, 18px); }



.vfm-lc-field label {

    display: block;

    font-size: 13px;

    color: var(--vfm-lc-texto);

    margin-bottom: 5px;

}



.vfm-lc-field-toprow {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.vfm-lc-field input[type="text"],

.vfm-lc-field input[type="email"],

.vfm-lc-field input[type="password"],

.vfm-lc-field input[type="date"] {

    width: 100%;

    border: none;

    border-bottom: 1px solid var(--vfm-lc-borde);

    padding: clamp(4px, 1dvh, 6px) 2px;

    font-size: 15px;

    background: transparent;

    box-sizing: border-box;

    color: var(--vfm-lc-texto);

}



.vfm-lc-field select {

    width: 100%;

    border: none;

    border-bottom: 1px solid var(--vfm-lc-borde);

    padding: clamp(4px, 1dvh, 6px) 2px;

    font-size: 15px;

    background: transparent;

    box-sizing: border-box;

    color: var(--vfm-lc-texto);

}



.vfm-lc-field input:focus,

.vfm-lc-field select:focus {

    outline: none;

    border-bottom: 2px solid var(--vfm-lc-texto);

}



.vfm-lc-field-row {

    display: flex;

    gap: 14px;

}

.vfm-lc-field-row .vfm-lc-field { flex: 1; min-width: 0; }



.vfm-lc-ver-pass {

    background: none;

    border: none;

    font-size: 13px;

    color: var(--vfm-lc-texto);

    cursor: pointer;

    text-decoration: underline;

    padding: 0;

    white-space: nowrap;

}



.vfm-lc-hint {

    font-size: 12px;

    color: var(--vfm-lc-gris);

    margin: 5px 0 0;

}



.vfm-lc-olvido {

    text-align: right;

    margin: -4px 0 clamp(12px, 2.6dvh, 22px);

    font-size: 13px;

}

.vfm-lc-olvido a {

    color: var(--vfm-lc-texto);

    text-decoration: none;

}

.vfm-lc-olvido a:hover { text-decoration: underline; }



.vfm-lc-checkbox {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    font-size: 13px;

    color: var(--vfm-lc-texto);

    margin-bottom: clamp(8px, 1.6dvh, 14px);

    cursor: pointer;

}

.vfm-lc-checkbox input { margin-top: 3px; flex: 0 0 auto; }

.vfm-lc-checkbox a { color: var(--vfm-lc-texto); }



/* --- Botones principales: rojo con letras negras --- */

.vfm-lc-btn-principal {

    width: 100%;

    padding: clamp(10px, 2.2dvh, 13px) 14px;

    background: var(--vfm-lc-rojo);

    border: 1px solid var(--vfm-lc-rojo);

    color: var(--vfm-lc-texto);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.03em;

    text-transform: uppercase;

    cursor: pointer;

    margin-top: 4px;

}

.vfm-lc-btn-principal:hover { background: var(--vfm-lc-rojo-hover); border-color: var(--vfm-lc-rojo-hover); }

.vfm-lc-btn-principal:disabled { opacity: 0.6; cursor: default; }



.vfm-lc-pie {

    text-align: center;

    font-size: 14px;

    margin: clamp(12px, 2.6dvh, 20px) 0 0;

    color: var(--vfm-lc-texto);

}



.vfm-lc-link-rojo {

    color: var(--vfm-lc-rojo);

    font-weight: 700;

    text-decoration: underline;

}



.vfm-lc-msg { margin-bottom: 10px; }

.vfm-lc-msg .vfm-lc-msg-item {

    padding: 10px 12px;

    font-size: 13px;

    border: 1px solid;

}

.vfm-lc-msg .vfm-lc-msg-item.success {

    color: #1e6b2f;

    border-color: #1e6b2f;

    background: #eaf6ec;

}

.vfm-lc-msg .vfm-lc-msg-item.error {

    color: var(--vfm-lc-rojo);

    border-color: var(--vfm-lc-rojo);

    background: #fbeaea;

}



/* --- Adaptación a pantallas chicas ---

   El popup de Elementor le da a esta tarjeta un contenedor con altura

   limitada. Si el contenido (sobre todo el formulario de Registro, que

   tiene muchos campos) no entra, dejamos que ESE panel específico scrollee

   internamente en vez de romper el layout del popup o cortar campos. En

   pantallas normales/altas nunca llega a activarse. */

@media (max-height: 780px) {

    .vfm-lc-panel.vfm-lc-activo {

        max-height: 92dvh;

        overflow-y: auto;

        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;

        padding-right: 4px;

    }

}



@media (max-width: 380px) {

    .vfm-lc-field-row { gap: 8px; }

}