@import url("fonts/poppins.css");
:root {
    color-scheme: light;
    --coffee: #352015;
    --cream: #fffaf0;
    --terracotta: #ac4522;
    --gold: #d99b32;
    --muted: #8b7464;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    color: var(--coffee);
    font-family: 'Poppins', sans-serif;
    background: radial-gradient(ellipse at 48% 30%, #714024 0%, #422414 48%, #24140e 100%);
}

.container_card {
    min-height: 100vh;
    min-height: 100svh;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    padding: 32px 28px 28px;
    border: 1px solid #ffffff35;
    border-radius: 20px;
    background: var(--cream);
    box-shadow: 0 24px 64px #10080455;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 9px;
    background: linear-gradient(to right, var(--terracotta) 0% 34%, var(--gold) 34% 67%, #efdfbe 67% 100%);
}

.card_imagen { text-align: center; margin-bottom: 12px; }
.card_img { display: block; width: 160px; max-width: 65%; height: auto; margin: 0 auto; }
.card_title { margin: 0; text-align: center; font-size: 28px; line-height: 1.25; font-weight: 750; letter-spacing: -.7px; }
.card_subtitle { margin: 8px 0 24px; text-align: center; font-size: 15px; color: var(--muted); }
.card_formulario { display: flex; flex-direction: column; }
.card_formulario label { margin-bottom: 8px; font-size: 14px; font-weight: 650; }

.input_group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 0 14px;
    margin-bottom: 18px;
    border: 1px solid #dcbf8e;
    border-radius: 12px;
    background: #fbf5e8;
    transition: border-color .2s, box-shadow .2s;
}

.input_group:focus-within { border-color: var(--terracotta); box-shadow: 0 0 0 3px #ac45221c; }
svg { width: 21px; height: 21px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.input_group input { width: 100%; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: var(--coffee); font: inherit; font-size: 16px; }
#usuario { text-transform: lowercase; }
.password_toggle { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 36px; padding: 0; margin-right: -6px; border: 0; border-radius: 6px; background: transparent; color: var(--coffee); cursor: pointer; }
.password_toggle:hover { background: #eddfc8; }
.password_toggle:focus-visible, .card_cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.card_cta { width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: var(--terracotta); color: white; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; transition: background .2s; }
.card_cta:hover { background: #913819; }
.card_cta:disabled { opacity: .7; cursor: wait; }
.card_error { margin: 0 0 16px; color: #a33120; font-size: 14px; line-height: 1.4; }
.card_error[hidden] { display: none; }
.page_footer { margin: 0; text-align: center; color: #e5d1b7; font-size: 13px; }

@media (max-width: 440px) {
    .container_card { padding: 24px 16px; gap: 20px; }
    .card { padding: 30px 22px 24px; }
    .card_img { width: 140px; }
    .card_title { font-size: 26px; }
}