body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Fondo solo visible en login */
body.login {
    background-image: url('../fondos-img/fondo1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.login-container {
    width: 400px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #7269ee;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo {
    max-width: 100px;
    height: auto;
    margin-bottom: 10px;
}

.login-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #7269ee;
    margin-bottom: 20px;
}

.form-label {
    font-weight: 500;
    display: block;
    text-align: center;
}

.form-control {
    text-align: center;
}

.login-container input[type="text"],
.login-container input[type="password"] {
    margin-bottom: 15px;
    padding: 10px;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    width: 100%;
}

.login-container button {
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 8px;
    background-color: #6fcce4;
    color: white;
    border: none;
    width: 100%;
    transition: background-color 0.3s ease;
}

.login-container button:hover {
    background-color: #7269ee;
}



/* Estilo para hacer que cada fila de la tabla sea interactiva.
   Al pasar el cursor, se resalta con un color suave.
   Al hacer clic, se puede redirigir al detalle del empleado. */
.fila-clickable {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.fila-clickable:hover {
    background-color: #e9f7ef;
}