/*=========================================
    RECUPERAR CONTRASEÑA (RecuperarClave.aspx)
    Tarjeta centrada con 3 pasos. Colores de la marca: azul #0F3D5E, dorado #F4B400.
    !important solo donde index.css / style.css fuerzan altura y padding de inputs en móvil.
=========================================*/
.rc-pagina {
    --rc-azul: #0F3D5E;
    --rc-azul-claro: #f0f6fb;
    --rc-dorado: #F4B400;
    --rc-texto: #1f2a44;
    --rc-gris: #6B7280;
    --rc-borde: #D1D5DB;
    --rc-error: #b3261e;
    --rc-exito: #1e7b45;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 70vh;
    padding: 140px 16px 64px;
    background: linear-gradient(180deg, #eef3f8 0%, #f8fafc 100%);
}

.rc-tarjeta {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 16px;
    border-top: 4px solid var(--rc-dorado);
    box-shadow: 0 10px 30px rgba(15, 61, 94, .12);
    overflow: hidden;
}

/* Cabecera */
.rc-cabecera {
    padding: 32px 32px 8px;
    text-align: center;
}

.rc-cabecera-icono {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rc-azul-claro);
    color: var(--rc-azul);
    font-size: 28px;
}

.rc-titulo {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    color: var(--rc-azul);
}

.rc-subtitulo {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--rc-gris);
}

    .rc-subtitulo strong {
        color: var(--rc-texto);
        word-break: break-all;
    }

/* Indicador de pasos */
.rc-pasos {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 24px 32px 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.rc-paso {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #9CA3AF;
    text-align: center;
}

    /* Línea que une los círculos */
    .rc-paso + .rc-paso::before {
        content: "";
        position: absolute;
        top: 15px;
        right: calc(50% + 20px);
        width: calc(100% - 32px);
        height: 2px;
        background: #E5E7EB;
    }

.rc-paso-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #E5E7EB;
    background: #fff;
    font-size: 14px;
}

.rc-paso--activo {
    color: var(--rc-azul);
}

    .rc-paso--activo .rc-paso-num {
        border-color: var(--rc-azul);
        background: var(--rc-azul);
        color: #fff;
    }

.rc-paso--hecho {
    color: var(--rc-exito);
}

    .rc-paso--hecho .rc-paso-num {
        border-color: var(--rc-exito);
        background: var(--rc-exito);
        color: transparent;
    }

        .rc-paso--hecho .rc-paso-num::after {
            content: "\F633"; /* bi-check-lg */
            font-family: "bootstrap-icons";
            color: #fff;
            position: absolute;
        }

    .rc-paso--hecho + .rc-paso::before,
    .rc-paso--hecho + .rc-paso--hecho::before {
        background: var(--rc-exito);
    }

/* Cuerpo */
.rc-cuerpo {
    padding: 24px 32px 32px;
}

.rc-campo {
    margin-bottom: 18px;
}

.rc-label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--rc-texto);
}

.rc-control {
    position: relative;
    display: flex;
    align-items: center;
}

.rc-icono {
    position: absolute;
    left: 14px;
    font-size: 18px;
    color: var(--rc-gris);
    pointer-events: none;
}

.rc-input {
    width: 100% !important;
    height: 48px !important;
    padding: 10px 14px 10px 44px !important;
    font-size: 16px !important; /* 16px: iOS no hace zoom al enfocar */
    border: 1px solid var(--rc-borde) !important;
    border-radius: 10px !important;
    background: #fff;
    color: #111827;
    transition: border-color .2s, box-shadow .2s;
}

    .rc-input::placeholder {
        color: #9CA3AF;
    }

    .rc-input:focus {
        border-color: var(--rc-azul) !important;
        box-shadow: 0 0 0 3px rgba(15, 61, 94, .15);
        outline: none;
    }

.rc-input-clave {
    padding-right: 48px !important;
}

/* Código de 6 dígitos: grande, centrado y espaciado */
.rc-input-codigo {
    height: 60px !important;
    padding: 10px 14px !important;
    text-align: center;
    font-family: Consolas, "Courier New", monospace;
    font-size: 30px !important;
    font-weight: 700;
    letter-spacing: 12px;
    color: var(--rc-azul);
}

    .rc-input-codigo::placeholder {
        letter-spacing: 12px;
        font-size: 24px;
    }

.rc-ver-clave {
    position: absolute;
    right: 2px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rc-gris);
    font-size: 18px;
    cursor: pointer;
}

    .rc-ver-clave:hover,
    .rc-ver-clave:focus-visible {
        color: var(--rc-azul);
        background: rgba(15, 61, 94, .08);
    }

.rc-ayuda {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--rc-gris);
}

.rc-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Botón principal */
.rc-boton {
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--rc-azul);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

    .rc-boton:hover {
        background: #0b2f49;
    }

    .rc-boton:active {
        transform: translateY(1px);
    }

    .rc-boton:focus-visible {
        outline: 3px solid rgba(244, 180, 0, .6);
        outline-offset: 2px;
    }

    .rc-boton[disabled],
    .rc-boton.aspNetDisabled {
        background: #9CA3AF;
        cursor: not-allowed;
    }

/* Mientras se procesa una petición */
.rc-tarjeta.rc-cargando .rc-boton {
    pointer-events: none;
    opacity: .7;
}

.rc-pie {
    margin: 18px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--rc-gris);
}

    .rc-pie a,
    .rc-enlace {
        color: var(--rc-azul);
        font-weight: 600;
        text-decoration: none;
    }

        .rc-pie a:hover,
        .rc-enlace:hover {
            text-decoration: underline;
        }

/* Mensajes */
.rc-alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: 14px;
    line-height: 1.5;
}

    .rc-alerta i {
        font-size: 18px;
        line-height: 1.2;
    }

.rc-alerta--error {
    background: #fdecea;
    border-color: #E84118;
    color: var(--rc-error);
}

.rc-alerta--exito {
    background: #e8f6ee;
    border-color: #2e9e5b;
    color: var(--rc-exito);
}

.rc-alerta--info {
    background: var(--rc-azul-claro);
    border-color: var(--rc-azul);
    color: var(--rc-azul);
}

/* Paso 2: temporizador y acciones */
.rc-temporizador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -4px 0 18px;
    font-size: 14px;
    color: var(--rc-gris);
}

    .rc-temporizador strong {
        color: var(--rc-azul);
        font-variant-numeric: tabular-nums;
    }

    .rc-temporizador.rc-temporizador--poco strong {
        color: #E84118;
    }

    .rc-temporizador.rc-temporizador--vencido {
        color: var(--rc-error);
        font-weight: 600;
    }

.rc-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 18px;
    font-size: 14px;
    color: var(--rc-gris);
}

.rc-reenviar.rc-deshabilitado {
    color: #9CA3AF;
    pointer-events: none;
    cursor: default;
}

.rc-reenviar-espera {
    font-variant-numeric: tabular-nums;
}

.rc-nota {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--rc-gris);
}

/* Paso 3: cuenta y reglas */
.rc-cuenta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--rc-azul-claro);
    color: var(--rc-azul);
    font-size: 14px;
    font-weight: 600;
    word-break: break-all;
}

.rc-reglas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--rc-gris);
}

    .rc-reglas li {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .rc-reglas li.rc-ok {
            color: var(--rc-exito);
        }

.rc-coincide.rc-ok {
    color: var(--rc-exito);
}

.rc-coincide.rc-mal {
    color: var(--rc-error);
}

/* Paso 4 */
.rc-exito {
    text-align: center;
}

    .rc-exito > p:first-child {
        margin: 0 0 22px;
        font-size: 15px;
        line-height: 1.6;
        color: var(--rc-texto);
    }

.rc-paso--hecho .rc-paso-num,
.rc-pasos li {
    position: relative;
}

/* Móvil */
@media (max-width: 575.98px) {
    .rc-pagina {
        padding: 110px 12px 40px;
    }

    .rc-cabecera {
        padding: 26px 20px 4px;
    }

    .rc-pasos {
        margin: 20px 20px 0;
    }

    .rc-cuerpo {
        padding: 20px 20px 26px;
    }

    .rc-titulo {
        font-size: 22px;
    }

    .rc-reglas {
        grid-template-columns: 1fr;
    }

    .rc-acciones {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}