@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
    --k-font: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
    --k-ink: #1E2329;
    --k-ink-2: #4F5862;
    --k-muted: #77808A;
    --k-line: #CDD3DA;
    --k-canvas: #F4F5F7;
    --k-brand: #BA7517;
    --k-brand-dark: #93590C;
    --k-danger: #B42318;
}

html, body { height: 100%; }

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: var(--k-canvas);
    background-image: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 42%, var(--k-canvas) 42%);
    font-family: var(--k-font);
    font-size: 14px;
    color: var(--k-ink);
    -webkit-font-smoothing: antialiased;
}

#cont {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 0;
    box-sizing: border-box;
}

.login-brand img { width: 340px; max-width: 80vw; height: auto; display: block; }

.login-brand { margin-bottom: 36px; }

#table_box {
    width: 360px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 28px 28px 24px;
    background-color: #FFFFFF;
    border: 1px solid #E1E4E8;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(30, 35, 41, .05), 0 22px 44px -24px rgba(30, 35, 41, .30);
}

#table_box h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }

.login-sub { margin: 0 0 22px; color: var(--k-muted); font-size: 13px; }

.field { margin-bottom: 16px; }

.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--k-ink-2); }

.textbox {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--k-line);
    border-radius: 6px;
    background-color: #FFFFFF;
    font-family: var(--k-font);
    font-size: 14px;
    color: var(--k-ink);
    transition: border-color .12s, box-shadow .12s;
}

.textbox:hover { border-color: #AEB6BF; }
.textbox:focus { outline: none; border-color: var(--k-brand); box-shadow: 0 0 0 3px rgba(186, 117, 23, .28); }

.btn {
    width: 100%;
    height: 42px;
    margin-top: 6px;
    border: none;
    border-radius: 6px;
    background-color: var(--k-brand);
    color: #FFFFFF;
    font-family: var(--k-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .12s;
}

.btn:hover { background-color: var(--k-brand-dark); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(186, 117, 23, .35); }

#divMayus { margin-top: 12px; padding: 8px 10px; border-radius: 6px; background-color: #FFF4E0; color: #7A4A06; font-size: 13px; }

#cont2 { min-height: 24px; margin-top: 14px; text-align: center; }

.error { color: var(--k-danger); font-size: 13px; font-weight: 500; font-family: var(--k-font); }

.login-foot { margin-top: auto; padding: 32px 0 20px; color: var(--k-muted); font-size: 12px; text-align: center; }