/* css/style.css */
:root {
    --color-rojo: #d32f2f;
    --color-negro: #212121;
    --color-blanco: #ffffff;
    --color-azul-metalico: #3a5f85;
}

body {
    background-color: var(--color-blanco);
    color: var(--color-negro);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bg-rojo { background-color: var(--color-rojo) !important; color: white; }
.bg-negro { background-color: var(--color-negro) !important; color: white; }
.bg-azul-metalico { background-color: var(--color-azul-metalico) !important; color: white; }

.text-rojo { color: var(--color-rojo) !important; }
.text-azul-metalico { color: var(--color-azul-metalico) !important; }

.btn-primary {
    background-color: var(--color-rojo);
    border-color: var(--color-rojo);
}
.btn-primary:hover {
    background-color: #b71c1c;
    border-color: #b71c1c;
}

.login-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-negro) 0%, var(--color-azul-metalico) 100%);
}

.login-card {
    background: var(--color-blanco);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
}

.login-logo {
    max-width: 200px;
    max-height: 100px;
    margin-bottom: 1.5rem;
    object-fit: contain;
}