/* ============================================================
   validacion.css — Alertas personalizadas de formularios.
   Reemplazan el tooltip nativo del navegador ("Completa este campo").
   Estilo: borde verde en el campo + texto debajo con viñeta (en verde).
   Compartido por el login (pasaporte) y el registro (crear cuenta).
   ============================================================ */

/* Campo con error: borde verde Undelta + halo suave */
.field.campo-error input,
.field.campo-error select,
.field.campo-error textarea,
.field.campo-error .cs-trigger {
    border-color: #8fb43a !important;
    box-shadow: 0 0 0 3px rgba(164, 194, 58, 0.22) !important;
}

/* Texto debajo del campo, en verde, con viñeta (como en la 2ª foto) */
.campo-msg {
    display: none;
    margin-top: 6px;
    padding-left: 2px;
    color: #5c7a1f;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    animation: campoMsgIn 0.18s ease-out;
}

.campo-msg::before {
    content: "•";
    margin-right: 6px;
    font-weight: 700;
}

.field.campo-error .campo-msg {
    display: block;
}

/* En la portada oscura del pasaporte (celular) usamos un verde más claro
   para que el texto se lea bien sobre el fondo oscuro. */
.cover-login .campo-msg {
    color: #b7d24c;
}

@keyframes campoMsgIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}