/* Estilo compartido por la pantalla de entrada y la de contraseña nueva. */
:root {
    --verde: #3A6B35;
    --verde-oscuro: #2e562a;
    --verde-claro: #eef5ed;
    --tierra: #6B5E4E;
    --trigo: #D4A76A;
    --crema: #FAF7F0;
    --peligro: #b91c1c;
    --peligro-fondo: #fee2e2;
    --exito: #3A6B35;
    --exito-fondo: #eef5ed;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--tierra);
    background:
        radial-gradient(900px 500px at 15% -10%, #ffffff 0%, transparent 60%),
        radial-gradient(700px 500px at 110% 110%, var(--verde-claro) 0%, transparent 55%),
        var(--crema);
}

.tarjeta {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    padding: 40px 32px 32px;
    box-shadow: 0 1px 2px rgba(43,30,25,.06), 0 12px 40px -12px rgba(43,30,25,.18);
    border: 1px solid rgba(107,94,78,.10);
    animation: entrada .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes entrada {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.marca { text-align: center; margin-bottom: 28px; }
.marca img {
    width: 76px; height: 76px; border-radius: 50%; object-fit: contain;
    border: 2px solid var(--verde-claro); padding: 4px; background: #fff;
}
.marca h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.75rem; font-weight: 700; color: var(--verde);
    margin: 14px 0 2px; letter-spacing: .01em;
}
.marca .sub {
    font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--trigo); font-weight: 600;
}
.marca .lema { font-size: .82rem; margin-top: 8px; opacity: .75; font-style: italic; }

h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.15rem; color: var(--verde); margin: 0 0 4px; font-weight: 600;
}
.ayuda { font-size: .82rem; line-height: 1.5; opacity: .8; margin: 0 0 20px; }

label {
    display: block; font-size: .76rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 6px; color: var(--tierra);
}
.campo { margin-bottom: 16px; }
input {
    width: 100%; padding: 13px 14px; font-size: 1rem;
    font-family: inherit; color: var(--tierra);
    border: 1.5px solid #e3ddd3; border-radius: 11px;
    background: #fffdfa; transition: border-color .18s, box-shadow .18s;
}
input:focus {
    outline: none; border-color: var(--verde);
    box-shadow: 0 0 0 4px rgba(58,107,53,.12);
}
input:disabled { opacity: .55; cursor: not-allowed; }

button {
    width: 100%; padding: 14px; font-size: .95rem; font-weight: 700;
    font-family: inherit; letter-spacing: .02em;
    border: none; border-radius: 11px; cursor: pointer;
    background: var(--verde); color: #fff;
    transition: background .18s, transform .12s, box-shadow .18s;
    box-shadow: 0 6px 18px -8px rgba(58,107,53,.7);
}
button:hover:not(:disabled) { background: var(--verde-oscuro); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .6; cursor: progress; box-shadow: none; }

.enlace {
    display: block; width: 100%; margin-top: 18px; padding: 4px;
    background: none; border: none; box-shadow: none;
    color: var(--verde); font-size: .84rem; font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.enlace:hover:not(:disabled) { background: none; color: var(--verde-oscuro); }

.aviso {
    font-size: .85rem; line-height: 1.5; padding: 12px 14px;
    border-radius: 10px; margin-bottom: 18px; display: none;
    animation: aparece .25s ease both;
}
@keyframes aparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; } }
.aviso.error { display: block; background: var(--peligro-fondo); color: var(--peligro); }
.aviso.ok    { display: block; background: var(--exito-fondo);   color: var(--exito); }

.pie {
    text-align: center; margin-top: 26px; font-size: .68rem;
    letter-spacing: .1em; text-transform: uppercase; opacity: .45;
}
[hidden] { display: none !important; }

@media (max-width: 420px) {
    .tarjeta { padding: 32px 22px 26px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .tarjeta, .aviso { animation: none; }
}