/* SIGSIM-CUA · Login */
:root {
    --cua-gris: #404040; --cua-gris-oscuro: #2D2D2D;
    --cua-amarillo: #EDE709; --cua-amarillo-hover: #D4CE08; --cua-amarillo-suave: #FFFCE8;
    --bg: #f4f6fa; --surface: #fff; --border: #e1e6ee;
    --text: #1a1f2e; --muted: #5a6478;
}
* { box-sizing: border-box; }

body {
    margin: 0; min-height: 100vh; font-family: 'Segoe UI', system-ui, sans-serif;
    background:
        radial-gradient(circle at 20% 20%, rgba(237,231,9,.08), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(64,64,64,.10), transparent 50%),
        linear-gradient(135deg, #f4f6fa 0%, #e9ebf2 100%);
    color: var(--text); display: flex; align-items: center; justify-content: center; padding: 20px;
    overflow: hidden;
}

/* Telón de fondo: bloques Canvas flotantes muy sutiles */
body::before, body::after {
    content: ''; position: absolute; border-radius: 12px;
    background: rgba(255,255,255,.55); border-top: 4px solid var(--cua-amarillo);
    box-shadow: 0 8px 30px rgba(64,64,64,.08);
    pointer-events: none; z-index: 0;
}
body::before { width: 220px; height: 140px; top: 12%; left: 8%; transform: rotate(-6deg); }
body::after  { width: 180px; height: 120px; bottom: 14%; right: 9%; transform: rotate(5deg); }

.login-card {
    width: 100%; max-width: 440px; background: var(--surface); border-radius: 12px;
    box-shadow: 0 18px 50px rgba(64,64,64,.18); overflow: hidden; border: 1px solid var(--border);
    position: relative; z-index: 1;
}
.login-header {
    background: var(--cua-gris); color: #fff; padding: 30px 28px 24px;
    border-bottom: 4px solid var(--cua-amarillo); text-align: center;
}
.login-header h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: .5px; }
.login-header small { color: rgba(255,255,255,.7); font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; }
.login-body { padding: 28px; }
.login-title { font-size: 15.5px; color: var(--muted); margin: 0 0 18px; text-align: center; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
.form-group input {
    width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-group input:focus { outline: none; border-color: var(--cua-gris); box-shadow: 0 0 0 3px rgba(237,231,9,.3); }

.btn-login {
    width: 100%; padding: 12px; background: var(--cua-gris); color: #fff;
    border: none; border-bottom: 3px solid var(--cua-amarillo); border-radius: 6px;
    font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 8px; font-family: inherit;
    transition: background .15s ease;
}
.btn-login:hover { background: var(--cua-gris-oscuro); }

.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13.5px; }
.alert-error { background: #fce4d6; color: #8b0000; border: 1px solid #b22222; }

.login-footer {
    padding: 16px 28px; background: var(--cua-amarillo-suave); text-align: center;
    font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border);
}
.login-footer strong { color: var(--cua-gris); }