body { font-family: 'Segoe UI', sans-serif; background-color: #f3f4f6; display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; margin: 0; padding: 20px;}
.tarjeta { background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); width: 100%; max-width: 400px; text-align: center; }
input { width: 90%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; }
button { background-color: #2563eb; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; width: 100%; font-weight: bold; margin-top: 10px; }
button:hover { background-color: #1d4ed8; }
.oculto { display: none !important; }
#mensajeError { color: red; margin-top: 10px; font-weight: bold; }
#datosUsuario { text-align: left; background: #f8fafc; padding: 15px; border-radius: 5px; margin-top: 20px; border-left: 4px solid #2563eb;}
.btn-salir { background-color: #dc2626; margin-top: 20px;}
.btn-salir:hover { background-color: #991b1b; }
.btn-admin { background-color: #10b981; color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; display: block; margin-top: 15px; }
.btn-admin:hover { background-color: #059669; }
.btn-2fa { background-color: #8b5cf6; margin-top: 15px; }
.btn-2fa:hover { background-color: #7c3aed; }
#panelQR { margin-top:15px; padding: 15px; background: #f3f4f6; border-radius: 5px; border: 2px dashed #8b5cf6;}
#panelQR img { max-width: 100%; height: auto; }