/* ==========================================================================
   LivreSat — Recuperação de senha ("Encontrar senha")
   Layout claro replicado do sistema atual: cabeçalho claro + formulário com
   labels à direita, e a marca d'água do cadeado ao fundo. Só layout (sem
   backend por enquanto).
   ========================================================================== */

.pagina-esqueci { background: #fff; color: #333; }

.fp-page {
    min-height: 100vh;
    /* Marca d'água do cadeado (canto, sutil), como no original */
    background: #fff url("../img/lock_watermark.jpg") no-repeat;
    background-position: calc(50% + 260px) 300px;
}

/* ---- Cabeçalho claro ---- */
.fp-head {
    position: relative;
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #e6e6e6;
}
.fp-back {
    position: absolute;
    left: 24px;
    font-size: 24px;
    color: #666;
    text-decoration: none;
    line-height: 1;
}
.fp-back:hover { color: var(--ls-orange); }
.fp-title {
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 26px;
    font-weight: 400;
    color: #555;
}

/* ---- Formulário ---- */
.fp-main { padding: 40px 20px 80px; }
.fp-form { max-width: 760px; margin: 0 auto; }

.fp-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
}
.fp-label {
    flex: 0 0 200px;
    text-align: right;
    padding: 8px 12px 0 0;
    color: #333;
    font-size: 15px;
}
.fp-label .req { color: #e2231a; margin-right: 2px; }

.fp-field { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fp-field > .fp-input,
.fp-field > .fp-btn,
.fp-field > .fp-note { flex: 0 0 auto; }

.fp-input {
    width: 240px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    outline: none;
}
.fp-input:focus { border-color: var(--ls-orange); }
.fp-input--sm { width: 150px; }

.fp-hint { flex: 1 0 100%; margin: 4px 0 0; color: #999; font-size: 13px; }
.fp-note { color: #e2231a; font-size: 14px; }

/* Barras de força da senha (decorativas por enquanto) */
.fp-strength { flex: 1 0 100%; display: flex; gap: 6px; margin-top: 6px; }
.fp-strength span {
    width: 46px; height: 6px;
    background: #e0e0e0;
    border-radius: 2px;
}

/* ---- Botões ---- */
.fp-btn {
    height: 34px;
    padding: 0 16px;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.fp-btn--green  { background: #7ba428; }
.fp-btn--green:hover  { background: #6d9422; }
.fp-btn--orange { background: var(--ls-orange); }
.fp-btn--orange:hover { background: var(--ls-orange-hover); }
.fp-btn--gray   { background: #9a9a9a; }
.fp-btn--gray:hover   { background: #8a8a8a; }

/* ---- Responsivo ---- */
@media (max-width: 680px) {
    .fp-page { background-image: none; }
    .fp-row { flex-direction: column; }
    .fp-label { flex-basis: auto; text-align: left; padding: 0 0 4px; }
    .fp-input { width: 100%; }
    .fp-input--sm { width: 60%; }
}