/* =============================================================
   ResetPassword.css — /account/reset

   Pantalla suelta: se llega desde un enlace de correo, sin sesion
   y muchas veces desde el celular con datos. Por eso todo lo que
   hay aqui es CSS: cero JS, cero imagenes, cero fuentes nuevas.
   La unica peticion extra es esta hoja; la palomita del final es
   un SVG en linea, no un archivo.

   Las animaciones usan SOLO transform y opacity, que el navegador
   resuelve en la GPU sin recalcular layout. Nada de animar blur,
   width, ni box-shadow sobre elementos grandes: eso es lo que hace
   que un telefono de gama baja se sienta pesado.

   Se apoya en qp-forms.css. Prefijo rp-.
============================================================= */

.rp-wrap {
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 3rem;
    position: relative;
    overflow: hidden;
}

/* Mancha de color estatica. No se anima: es decoracion, no espectaculo. */
.rp-wrap::before {
    content: '';
    position: absolute;
    width: 460px;
    height: 460px;
    top: -230px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, #dbeafe 0%, transparent 70%);
    filter: blur(70px);
    opacity: .5;
    pointer-events: none;
}

.rp-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    background: #fff;
    border: 1px solid var(--qp-n-200);
    border-radius: var(--qp-r-card);
    box-shadow: var(--qp-elev-2);
    padding: 2rem 1.75rem 1.75rem;
}

/* =============================================================
   ENTRADA ESCALONADA
   Un solo keyframe reutilizado con distinto delay. El escalonado
   es lo que da sensacion de fluidez sin animar nada caro.
============================================================= */
@keyframes rp-in {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.rp-card,
.rp-stagger > * {
    animation: rp-in .38s cubic-bezier(.22, 1, .36, 1) both;
}

.rp-stagger > *:nth-child(1) { animation-delay: .06s; }
.rp-stagger > *:nth-child(2) { animation-delay: .12s; }
.rp-stagger > *:nth-child(3) { animation-delay: .18s; }
.rp-stagger > *:nth-child(4) { animation-delay: .24s; }

/* =============================================================
   ENCABEZADO
============================================================= */
.rp-head {
    text-align: center;
    margin-bottom: 1.6rem;
}

.rp-lock {
    width: 52px;
    height: 52px;
    margin: 0 auto .9rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-primary, #0ea5e9), #0369a1);
    box-shadow: 0 6px 18px rgba(14, 165, 233, .3);
}

.rp-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--qp-n-900);
    margin: 0 0 .35rem;
}

.rp-sub {
    font-size: .875rem;
    color: var(--qp-n-500);
    margin: 0;
    line-height: 1.5;
}

/* =============================================================
   MEDIDOR DE FUERZA
   Cuatro segmentos que cambian de color. Se anima el color, no el
   ancho: sin reflow y sin saltos mientras se escribe.
============================================================= */
.rp-meter {
    display: flex;
    gap: 5px;
    margin-top: .1rem;
}

.rp-meter-seg {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--qp-n-200);
    transition: background-color .28s ease;
}

.rp-meter[data-nivel="1"] .rp-meter-seg:nth-child(-n+1) { background-color: #ef4444; }
.rp-meter[data-nivel="2"] .rp-meter-seg:nth-child(-n+2) { background-color: #f59e0b; }
.rp-meter[data-nivel="3"] .rp-meter-seg:nth-child(-n+3) { background-color: #0ea5e9; }
.rp-meter[data-nivel="4"] .rp-meter-seg                 { background-color: #10b981; }

/* =============================================================
   ERROR
   Sacudida corta. Se dispara sola al aparecer el nodo, sin JS.
============================================================= */
@keyframes rp-shake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    25%      { transform: translate3d(-5px, 0, 0); }
    75%      { transform: translate3d(5px, 0, 0); }
}

.rp-error {
    animation: rp-in .2s ease both, rp-shake .32s ease .2s both;
}

/* =============================================================
   EXITO
   La palomita se dibuja sola: es un trazo SVG con dasharray
   animado. Pesa nada y no necesita libreria.
============================================================= */
.rp-done { text-align: center; padding: .5rem 0 .25rem; }

.rp-check { width: 76px; height: 76px; margin-bottom: 1rem; }

.rp-check-ring {
    stroke: #10b981;
    stroke-width: 2.5;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: rp-draw .5s cubic-bezier(.65, 0, .45, 1) .05s forwards;
}

.rp-check-mark {
    stroke: #10b981;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* 32 = largo real del trazo (7.5,7.5 + 15,15 en diagonal). Si se pone de mas,
       la animacion arranca con un tramo muerto en el que no se dibuja nada. */
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: rp-draw .3s cubic-bezier(.65, 0, .45, 1) .45s forwards;
}

@keyframes rp-draw {
    to { stroke-dashoffset: 0; }
}

.rp-done-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--qp-n-900);
    margin: 0 0 .35rem;
}

.rp-done-text {
    font-size: .885rem;
    color: var(--qp-n-500);
    margin: 0 0 1.4rem;
    line-height: 1.55;
}

/* =============================================================
   PIE
============================================================= */
.rp-foot {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--qp-n-100);
    text-align: center;
    font-size: .82rem;
    color: var(--qp-n-400);
}

.rp-foot a { font-weight: 600; }

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 575.98px) {
    .rp-wrap {
        min-height: 0;
        padding: 1.25rem .9rem 2.5rem;
        align-items: flex-start;
    }

    .rp-card {
        padding: 1.6rem 1.15rem 1.35rem;
        border-radius: var(--qp-r-btn);
    }

    .rp-title { font-size: 1.25rem; }

    .rp-lock {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 1.1rem;
    }
}

/* =============================================================
   ACCESIBILIDAD
   Quien pidio menos movimiento ve la pantalla ya armada, no una
   version a medias: todo termina en su estado final.
============================================================= */
@media (prefers-reduced-motion: reduce) {
    .rp-card,
    .rp-stagger > *,
    .rp-error {
        animation: none !important;
    }

    .rp-check-ring,
    .rp-check-mark {
        animation: none !important;
        stroke-dashoffset: 0;
    }

    .rp-meter-seg { transition: none !important; }
}